gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 样式调整

Browse Source 
1.dashboard-table背景色
2.metric preview Options字色、小标题与输入框间距加大
3.所有输入框、分页按钮背景色
4.cascade、下拉框的active字色
5.dashboard 图表横向间距
This commit is contained in:
陈劲松
2020-02-03 21:30:07 +08:00
parent 8ae08254d9
commit 0eaeb09d4f
21 changed files with 1356 additions and 1327 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
nezha-fronted/package-lock.json generated
View File

@@ -7,8 +7,7 @@
"@sindresorhus/is": { "@sindresorhus/is": {
"version": "0.7.0", "version": "0.7.0",
"resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz", "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz",
"integrity": "sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==", "integrity": "sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow=="
"dev": true
}, },
"@types/q": { "@types/q": {
"version": "1.5.2", "version": "1.5.2",
@@ -340,9 +339,9 @@
"integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=" "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg="
}, },
"aws4": { "aws4": {
"version": "1.9.0", "version": "1.9.1",
"resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.0.tgz", "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.1.tgz",
"integrity": "sha512-Uvq6hVe90D0B2WEnUqtdgY1bATGz3mw33nH9Y+dmA+w5DHvUmBgkr5rM/KCHpCsiFNRUfokW/szpPPgMK2hm4A==" "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug=="
}, },
"axios": { "axios": {
"version": "0.19.0", "version": "0.19.0",
@@ -1590,7 +1589,6 @@
"version": "2.1.4", "version": "2.1.4",
"resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-2.1.4.tgz", "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-2.1.4.tgz",
"integrity": "sha1-DYCIAbY0KtM8kd+dC0TcCbkeXD0=", "integrity": "sha1-DYCIAbY0KtM8kd+dC0TcCbkeXD0=",
"dev": true,
"requires": { "requires": {
"clone-response": "1.0.2", "clone-response": "1.0.2",
"get-stream": "3.0.0", "get-stream": "3.0.0",
@@ -1604,14 +1602,12 @@
"lowercase-keys": { "lowercase-keys": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.0.tgz", "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.0.tgz",
"integrity": "sha1-TjNms55/VFfjXxMkvfb4jQv8cwY=", "integrity": "sha1-TjNms55/VFfjXxMkvfb4jQv8cwY="
"dev": true
}, },
"normalize-url": { "normalize-url": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-2.0.1.tgz", "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-2.0.1.tgz",
"integrity": "sha512-D6MUW4K/VzoJ4rJ01JFKxDrtY1v9wrgzCX5f2qj/lzH1m/lW6MhUZFKerVsnyjOhOsYzI9Kqqak+10l4LvLpMw==", "integrity": "sha512-D6MUW4K/VzoJ4rJ01JFKxDrtY1v9wrgzCX5f2qj/lzH1m/lW6MhUZFKerVsnyjOhOsYzI9Kqqak+10l4LvLpMw==",
"dev": true,
"requires": { "requires": {
"prepend-http": "^2.0.0", "prepend-http": "^2.0.0",
"query-string": "^5.0.1", "query-string": "^5.0.1",
@@ -1621,14 +1617,12 @@
"prepend-http": { "prepend-http": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz", "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
"integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=", "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc="
"dev": true
}, },
"query-string": { "query-string": {
"version": "5.1.1", "version": "5.1.1",
"resolved": "https://registry.npmjs.org/query-string/-/query-string-5.1.1.tgz", "resolved": "https://registry.npmjs.org/query-string/-/query-string-5.1.1.tgz",
"integrity": "sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw==", "integrity": "sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw==",
"dev": true,
"requires": { "requires": {
"decode-uri-component": "^0.2.0", "decode-uri-component": "^0.2.0",
"object-assign": "^4.1.0", "object-assign": "^4.1.0",
@@ -1639,7 +1633,6 @@
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-2.0.0.tgz", "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-2.0.0.tgz",
"integrity": "sha1-ZYU1WEhh7JfXMNbPQYIuH1ZoQSg=", "integrity": "sha1-ZYU1WEhh7JfXMNbPQYIuH1ZoQSg=",
"dev": true,
"requires": { "requires": {
"is-plain-obj": "^1.0.0" "is-plain-obj": "^1.0.0"
} }
@@ -1929,7 +1922,6 @@
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz", "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz",
"integrity": "sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=", "integrity": "sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=",
"dev": true,
"requires": { "requires": {
"mimic-response": "^1.0.0" "mimic-response": "^1.0.0"
} }
@@ -3218,14 +3210,12 @@
"decode-uri-component": { "decode-uri-component": {
"version": "0.2.0", "version": "0.2.0",
"resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz", "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
"integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=", "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
"dev": true
}, },
"decompress-response": { "decompress-response": {
"version": "3.3.0", "version": "3.3.0",
"resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz", "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz",
"integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=", "integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=",
"dev": true,
"requires": { "requires": {
"mimic-response": "^1.0.0" "mimic-response": "^1.0.0"
} }
@@ -3516,8 +3506,7 @@
"duplexer3": { "duplexer3": {
"version": "0.1.4", "version": "0.1.4",
"resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz", "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
"integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=", "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI="
"dev": true
}, },
"duplexify": { "duplexify": {
"version": "3.7.1", "version": "3.7.1",
@@ -4349,7 +4338,6 @@
"version": "2.3.0", "version": "2.3.0",
"resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz", "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
"integrity": "sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=", "integrity": "sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=",
"dev": true,
"requires": { "requires": {
"inherits": "^2.0.1", "inherits": "^2.0.1",
"readable-stream": "^2.0.0" "readable-stream": "^2.0.0"
@@ -4999,8 +4987,7 @@
"get-stream": { "get-stream": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz", "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
"integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=", "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ="
"dev": true
}, },
"get-value": { "get-value": {
"version": "2.0.6", "version": "2.0.6",
@@ -5084,7 +5071,6 @@
"version": "8.3.2", "version": "8.3.2",
"resolved": "https://registry.npmjs.org/got/-/got-8.3.2.tgz", "resolved": "https://registry.npmjs.org/got/-/got-8.3.2.tgz",
"integrity": "sha512-qjUJ5U/hawxosMryILofZCkm3C84PLJS/0grRIpjAwu+Lkxxj5cxeCU25BG0/3mDSpXKTyZr8oh8wIgLaH0QCw==", "integrity": "sha512-qjUJ5U/hawxosMryILofZCkm3C84PLJS/0grRIpjAwu+Lkxxj5cxeCU25BG0/3mDSpXKTyZr8oh8wIgLaH0QCw==",
"dev": true,
"requires": { "requires": {
"@sindresorhus/is": "^0.7.0", "@sindresorhus/is": "^0.7.0",
"cacheable-request": "^2.1.1", "cacheable-request": "^2.1.1",
@@ -5147,20 +5133,20 @@
}, },
"dependencies": { "dependencies": {
"ajv": { "ajv": {
"version": "6.10.2", "version": "6.11.0",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.2.tgz", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.11.0.tgz",
"integrity": "sha512-TXtUUEYHuaTEbLZWIKUr5pmBuhDLy+8KYtPYdcV8qC+pOZL+NKqYwvWSRrVXHn+ZmRRAu8vJTAznH7Oag6RVRw==", "integrity": "sha512-nCprB/0syFYy9fVYU1ox1l2KN8S9I+tziH8D4zdZuLT3N6RMlGSGt5FSTpAiHB/Whv8Qs1cWHma1aMKZyaHRKA==",
"requires": { "requires": {
"fast-deep-equal": "^2.0.1", "fast-deep-equal": "^3.1.1",
"fast-json-stable-stringify": "^2.0.0", "fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.4.1", "json-schema-traverse": "^0.4.1",
"uri-js": "^4.2.2" "uri-js": "^4.2.2"
} }
}, },
"fast-deep-equal": { "fast-deep-equal": {
"version": "2.0.1", "version": "3.1.1",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
"integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=" "integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA=="
}, },
"json-schema-traverse": { "json-schema-traverse": {
"version": "0.4.1", "version": "0.4.1",
@@ -5195,8 +5181,7 @@
"has-symbol-support-x": { "has-symbol-support-x": {
"version": "1.4.2", "version": "1.4.2",
"resolved": "https://registry.npmjs.org/has-symbol-support-x/-/has-symbol-support-x-1.4.2.tgz", "resolved": "https://registry.npmjs.org/has-symbol-support-x/-/has-symbol-support-x-1.4.2.tgz",
"integrity": "sha512-3ToOva++HaW+eCpgqZrCfN51IPB+7bJNVT6CUATzueB5Heb8o6Nam0V3HG5dlDvZU1Gn5QLcbahiKw/XVk5JJw==", "integrity": "sha512-3ToOva++HaW+eCpgqZrCfN51IPB+7bJNVT6CUATzueB5Heb8o6Nam0V3HG5dlDvZU1Gn5QLcbahiKw/XVk5JJw=="
"dev": true
}, },
"has-symbols": { "has-symbols": {
"version": "1.0.1", "version": "1.0.1",
@@ -5208,7 +5193,6 @@
"version": "1.4.1", "version": "1.4.1",
"resolved": "https://registry.npmjs.org/has-to-string-tag-x/-/has-to-string-tag-x-1.4.1.tgz", "resolved": "https://registry.npmjs.org/has-to-string-tag-x/-/has-to-string-tag-x-1.4.1.tgz",
"integrity": "sha512-vdbKfmw+3LoOYVr+mtxHaX5a96+0f3DljYd8JOqvOLsf5mw2Otda2qCDT9qRqLAhrjyQ0h7ual5nOiASpsGNFw==", "integrity": "sha512-vdbKfmw+3LoOYVr+mtxHaX5a96+0f3DljYd8JOqvOLsf5mw2Otda2qCDT9qRqLAhrjyQ0h7ual5nOiASpsGNFw==",
"dev": true,
"requires": { "requires": {
"has-symbol-support-x": "^1.4.1" "has-symbol-support-x": "^1.4.1"
} }
@@ -5435,8 +5419,7 @@
"http-cache-semantics": { "http-cache-semantics": {
"version": "3.8.1", "version": "3.8.1",
"resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz", "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz",
"integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==", "integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w=="
"dev": true
}, },
"http-deceiver": { "http-deceiver": {
"version": "1.2.7", "version": "1.2.7",
@@ -5648,7 +5631,6 @@
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/into-stream/-/into-stream-3.1.0.tgz", "resolved": "https://registry.npmjs.org/into-stream/-/into-stream-3.1.0.tgz",
"integrity": "sha1-lvsKk2wSur1v8XUqF9BWFqvQlMY=", "integrity": "sha1-lvsKk2wSur1v8XUqF9BWFqvQlMY=",
"dev": true,
"requires": { "requires": {
"from2": "^2.1.1", "from2": "^2.1.1",
"p-is-promise": "^1.1.0" "p-is-promise": "^1.1.0"
@@ -5833,8 +5815,7 @@
"is-object": { "is-object": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/is-object/-/is-object-1.0.1.tgz", "resolved": "https://registry.npmjs.org/is-object/-/is-object-1.0.1.tgz",
"integrity": "sha1-iVJojF7C/9awPsyF52ngKQMINHA=", "integrity": "sha1-iVJojF7C/9awPsyF52ngKQMINHA="
"dev": true
}, },
"is-path-cwd": { "is-path-cwd": {
"version": "1.0.0", "version": "1.0.0",
@@ -5863,8 +5844,7 @@
"is-plain-obj": { "is-plain-obj": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz", "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
"integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=", "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4="
"dev": true
}, },
"is-plain-object": { "is-plain-object": {
"version": "2.0.4", "version": "2.0.4",
@@ -5893,8 +5873,7 @@
"is-retry-allowed": { "is-retry-allowed": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz", "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz",
"integrity": "sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==", "integrity": "sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg=="
"dev": true
}, },
"is-stream": { "is-stream": {
"version": "1.1.0", "version": "1.1.0",
@@ -5967,7 +5946,6 @@
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/isurl/-/isurl-1.0.0.tgz", "resolved": "https://registry.npmjs.org/isurl/-/isurl-1.0.0.tgz",
"integrity": "sha512-1P/yWsxPlDtn7QeRD+ULKQPaIaN6yF368GZ2vDfv0AL0NwpStafjWCDDdn0k8wgFMWpVAqG7oJhxHnlud42i9w==", "integrity": "sha512-1P/yWsxPlDtn7QeRD+ULKQPaIaN6yF368GZ2vDfv0AL0NwpStafjWCDDdn0k8wgFMWpVAqG7oJhxHnlud42i9w==",
"dev": true,
"requires": { "requires": {
"has-to-string-tag-x": "^1.2.0", "has-to-string-tag-x": "^1.2.0",
"is-object": "^1.0.1" "is-object": "^1.0.1"
@@ -6008,8 +5986,7 @@
"json-buffer": { "json-buffer": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz", "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz",
"integrity": "sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=", "integrity": "sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg="
"dev": true
}, },
"json-loader": { "json-loader": {
"version": "0.5.7", "version": "0.5.7",
@@ -6066,7 +6043,6 @@
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/keyv/-/keyv-3.0.0.tgz", "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.0.0.tgz",
"integrity": "sha512-eguHnq22OE3uVoSYG0LVWNP+4ppamWr9+zWBe1bsNcovIMy6huUJFPgy4mGwCd/rnl3vOLGW1MTlu4c57CT1xA==", "integrity": "sha512-eguHnq22OE3uVoSYG0LVWNP+4ppamWr9+zWBe1bsNcovIMy6huUJFPgy4mGwCd/rnl3vOLGW1MTlu4c57CT1xA==",
"dev": true,
"requires": { "requires": {
"json-buffer": "3.0.0" "json-buffer": "3.0.0"
} }
@@ -6254,8 +6230,7 @@
"lowercase-keys": { "lowercase-keys": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz", "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
"integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==", "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA=="
"dev": true
}, },
"lru-cache": { "lru-cache": {
"version": "4.1.5", "version": "4.1.5",
@@ -6525,8 +6500,7 @@
"mimic-response": { "mimic-response": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz", "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
"integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==", "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ=="
"dev": true
}, },
"minimalistic-assert": { "minimalistic-assert": {
"version": "1.0.1", "version": "1.0.1",
@@ -6796,9 +6770,9 @@
} }
}, },
"node-sass": { "node-sass": {
"version": "4.13.0", "version": "4.13.1",
"resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.13.0.tgz", "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.13.1.tgz",
"integrity": "sha512-W1XBrvoJ1dy7VsvTAS5q1V45lREbTlZQqFbiHb3R3OTTCma0XBtuG6xZ6Z4506nR4lmHPTqVRwxT6KgtWC97CA==", "integrity": "sha512-TTWFx+ZhyDx1Biiez2nB0L3YrCZ/8oHagaDalbuBSlqXgUPsdkUSzJsVxeDO9LtPB49+Fh3WQl3slABo6AotNw==",
"requires": { "requires": {
"async-foreach": "^0.1.3", "async-foreach": "^0.1.3",
"chalk": "^1.1.1", "chalk": "^1.1.1",
@@ -7187,20 +7161,17 @@
"p-cancelable": { "p-cancelable": {
"version": "0.4.1", "version": "0.4.1",
"resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-0.4.1.tgz", "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-0.4.1.tgz",
"integrity": "sha512-HNa1A8LvB1kie7cERyy21VNeHb2CWJJYqyyC2o3klWFfMGlFmWv2Z7sFgZH8ZiaYL95ydToKTFVXgMV/Os0bBQ==", "integrity": "sha512-HNa1A8LvB1kie7cERyy21VNeHb2CWJJYqyyC2o3klWFfMGlFmWv2Z7sFgZH8ZiaYL95ydToKTFVXgMV/Os0bBQ=="
"dev": true
}, },
"p-finally": { "p-finally": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz", "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
"integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=", "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4="
"dev": true
}, },
"p-is-promise": { "p-is-promise": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz", "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz",
"integrity": "sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=", "integrity": "sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4="
"dev": true
}, },
"p-limit": { "p-limit": {
"version": "1.3.0", "version": "1.3.0",
@@ -7230,7 +7201,6 @@
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-2.0.1.tgz", "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-2.0.1.tgz",
"integrity": "sha512-88em58dDVB/KzPEx1X0N3LwFfYZPyDc4B6eF38M1rk9VTZMbxXXgjugz8mmwpS9Ox4BDZ+t6t3QP5+/gazweIA==", "integrity": "sha512-88em58dDVB/KzPEx1X0N3LwFfYZPyDc4B6eF38M1rk9VTZMbxXXgjugz8mmwpS9Ox4BDZ+t6t3QP5+/gazweIA==",
"dev": true,
"requires": { "requires": {
"p-finally": "^1.0.0" "p-finally": "^1.0.0"
} }
@@ -7379,8 +7349,7 @@
"pify": { "pify": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
"integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
"dev": true
}, },
"pinkie": { "pinkie": {
"version": "2.0.4", "version": "2.0.4",
@@ -10269,7 +10238,6 @@
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/responselike/-/responselike-1.0.2.tgz", "resolved": "https://registry.npmjs.org/responselike/-/responselike-1.0.2.tgz",
"integrity": "sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec=", "integrity": "sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec=",
"dev": true,
"requires": { "requires": {
"lowercase-keys": "^1.0.0" "lowercase-keys": "^1.0.0"
} }
@@ -11292,8 +11260,7 @@
"strict-uri-encode": { "strict-uri-encode": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz", "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
"integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=", "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
"dev": true
}, },
"string-width": { "string-width": {
"version": "2.1.1", "version": "2.1.1",
@@ -11500,8 +11467,7 @@
"timed-out": { "timed-out": {
"version": "4.0.1", "version": "4.0.1",
"resolved": "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz", "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz",
"integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8=", "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8="
"dev": true
}, },
"timers-browserify": { "timers-browserify": {
"version": "2.0.11", "version": "2.0.11",
@@ -11918,7 +11884,6 @@
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz", "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
"integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=", "integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=",
"dev": true,
"requires": { "requires": {
"prepend-http": "^2.0.0" "prepend-http": "^2.0.0"
}, },
@@ -11926,16 +11891,14 @@
"prepend-http": { "prepend-http": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz", "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
"integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=", "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc="
"dev": true
} }
} }
}, },
"url-to-options": { "url-to-options": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/url-to-options/-/url-to-options-1.0.1.tgz", "resolved": "https://registry.npmjs.org/url-to-options/-/url-to-options-1.0.1.tgz",
"integrity": "sha1-FQWgOiiaSMvXpDTvuu7FBV9WM6k=", "integrity": "sha1-FQWgOiiaSMvXpDTvuu7FBV9WM6k="
"dev": true
}, },
"use": { "use": {
"version": "3.1.1", "version": "3.1.1",
@@ -12114,7 +12077,6 @@
"version": "1.5.1", "version": "1.5.1",
"resolved": "https://registry.npmjs.org/vue-resource/-/vue-resource-1.5.1.tgz", "resolved": "https://registry.npmjs.org/vue-resource/-/vue-resource-1.5.1.tgz",
"integrity": "sha512-o6V4wNgeqP+9v9b2bPXrr20CGNQPEXjpbUWdZWq9GJhqVeAGcYoeTtn/D4q059ZiyN0DIrDv/ADrQUmlUQcsmg==", "integrity": "sha512-o6V4wNgeqP+9v9b2bPXrr20CGNQPEXjpbUWdZWq9GJhqVeAGcYoeTtn/D4q059ZiyN0DIrDv/ADrQUmlUQcsmg==",
"dev": true,
"requires": { "requires": {
"got": "^8.0.3" "got": "^8.0.3"
} }

2
nezha-fronted/package.json
View File

@@ -13,7 +13,7 @@
"axios": "^0.19.0", "axios": "^0.19.0",
"echarts": "^4.6.0", "echarts": "^4.6.0",
"element-ui": "^2.13.0", "element-ui": "^2.13.0",
"node-sass": "^4.13.0", "node-sass": "^4.13.1",
"vue": "^2.5.2", "vue": "^2.5.2",
"vue-i18n": "^8.15.1", "vue-i18n": "^8.15.1",
"vue-resource": "^1.5.1", "vue-resource": "^1.5.1",

4
nezha-fronted/src/assets/stylus/index.scss
View File

@@ -1,5 +1,7 @@
$global-text-color-active: #ee9d3f; // 全局文字active字色 $global-text-color-active: #ee9d3f; // 全局文字active字色
$content-right-background-color: #fcfcfc; //右侧背景色
$header-text-color: #e5e5e5; // header默认字色 $header-text-color: #e5e5e5; // header默认字色
$header-text-color-active: #fff; // header高亮字色 $header-text-color-active: #fff; // header高亮字色
$header-text-color-hover: #444; //header hover字色 $header-text-color-hover: #444; //header hover字色
@@ -20,4 +22,6 @@ $box-title-color: #333; //弹框标题字体颜色
$content-left-text-color: #666; //左侧菜单默认字色 $content-left-text-color: #666; //左侧菜单默认字色
$dropdown-hover-background-color: #fafafa; //下拉鼠标悬停背景色
@import './main.scss'; @import './main.scss';

63
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -93,7 +93,7 @@ li{
} }
/* begin--按钮组件*/ /* begin--按钮组件*/
.nz-btn-min-width-35 { .nz-btn-min-width-35 {
min-width: 35px; min-width: 45px;
} }
.nz-btn-min-width-60 { .nz-btn-min-width-60 {
min-width: 60px; min-width: 60px;
@@ -267,6 +267,7 @@ li{
position: absolute; position: absolute;
right: 8px; right: 8px;
color: #666; color: #666;
top: 0;
} }
/* end--el-input扩展 */ /* end--el-input扩展 */
@@ -324,7 +325,7 @@ li{
float: left; float: left;
width: 256px; width: 256px;
height: 100%; height: 100%;
border-right: 1px solid #cccccc; border-right: 1px solid #eeeeee;
padding: 0 25px 0 15px; padding: 0 25px 0 15px;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -382,9 +383,10 @@ li{
/* begin--右侧内容*/ /* begin--右侧内容*/
.content-right { .content-right {
height: calc(100% - 131px); height: 100%;
margin-left: 256px; margin-left: 256px;
padding: 0 20px 0 20px; padding: 0 20px 0 20px;
background-color: $content-right-background-color;
} }
.content-right-option { .content-right-option {
cursor: pointer; cursor: pointer;
@@ -406,8 +408,10 @@ li{
} }
/* begin--顶部工具栏*/ /* begin--顶部工具栏*/
.top-tools { .top-tools {
margin: 26px 0 41px 0; display: flex;
height: 1px; height: 68px;
align-items : center;
justify-content: space-between
} }
.top-tools .top-tool-search { .top-tools .top-tool-search {
width: 260px; width: 260px;
@@ -435,7 +439,6 @@ li{
font-size: 14px; font-size: 14px;
border-left: 1px solid white; border-left: 1px solid white;
border-bottom: 1px solid #d4d4d4; border-bottom: 1px solid #d4d4d4;
} }
.nz-table.el-table .el-table__header th:first-of-type { .nz-table.el-table .el-table__header th:first-of-type {
border-left: none; border-left: none;
@@ -446,13 +449,28 @@ li{
.nz-table.el-table--border td, .el-table--border th, .nz-table .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed { .nz-table.el-table--border td, .el-table--border th, .nz-table .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
border-right: none; border-right: none;
} }
.chart-table .nz-table.el-table td {
background-color: white;
}
.nz-table.el-table td { .nz-table.el-table td {
padding: 0; padding: 0;
background-color: $content-right-background-color;
} }
.nz-table.el-table th { .nz-table.el-table th {
padding: 0; padding: 0;
} }
.nz-table.el-table th:last-of-type {
background-color: $content-right-background-color;
}
.nz-table .el-table__body-wrapper {
background-color: $content-right-background-color;
}
.chart-table .nz-table.el-table th:last-of-type {
background-color: white;
}
.chart-table .nz-table .el-table__body-wrapper {
background-color: white;
}
//小信息栏边框 //小信息栏边框
.nz-table.el-table th .cell{ .nz-table.el-table th .cell{
height: 36px; height: 36px;
@@ -734,6 +752,11 @@ li{
font-size: 16px; font-size: 16px;
color: black; color: black;
} }
.right-box-form .el-form-item.metric-title-position .el-form-item__label {
padding: 0;
font-size: 14px;
color: #666;
}
.pop-item-wider .right-box-form .el-form-item .el-form-item__label { .pop-item-wider .right-box-form .el-form-item .el-form-item__label {
font-size: 14px; font-size: 14px;
line-height: 32px; line-height: 32px;
@@ -888,8 +911,11 @@ li{
/* begin--自定义可编辑的el-select下拉框样式*/ /* begin--自定义可编辑的el-select下拉框样式*/
.el-select-dropdown__wrap.el-scrollbar__wrap {
margin-bottom: 0 !important;
}
.config-dropdown { /* 若宽度不合适，自行增加新类覆盖宽度 */ .config-dropdown { /* 若宽度不合适，自行增加新类覆盖宽度 */
width: 500px; width: 490px;
} }
.asset-dropdown { .asset-dropdown {
width: 400px; width: 400px;
@@ -939,3 +965,24 @@ li{
color: #BA3939; color: #BA3939;
} }
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover,
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover,
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
color:$global-text-color-active !important;
background-color: $dropdown-hover-background-color !important;
}
.el-button--text,
.el-button--text:focus,
.el-button--text:hover,
.el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path,
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected,
.el-select-dropdown__item.selected,
.el-date-table td.today span {
color: $global-text-color-active !important;
}
.el-date-table td.end-date span, .el-date-table td.start-date span {
background-color: $global-text-color-active !important;
}

2
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -1,8 +1,8 @@
<style scoped> <style scoped>
.chartBox { .chartBox {
box-sizing: border-box; box-sizing: border-box;
padding-bottom: 10px;
float:left; float:left;
padding: 0 10px 10px 10px;
} }
.noData{ .noData{
text-align: center text-align: center

2
nezha-fronted/src/components/common/header.vue
View File

@@ -58,7 +58,7 @@
<el-menu-item :index="'3-' + index"> <el-menu-item :index="'3-' + index">
<div @click="jumpToAsset(item.id)" :class="{'menu-item-active' : (activeIndex == 'asset' && indOf(activeItemIndexes, item.id) > -1) }"> <div @click="jumpToAsset(item.id)" :class="{'menu-item-active' : (activeIndex == 'asset' && indOf(activeItemIndexes, item.id) > -1) }">
<span class="too-long-split" style="width: 130px;">{{item.name}}</span> <span class="too-long-split" style="width: 130px;">{{item.name}}</span>
<idc-config-box :post-idc="item" ref="idcConfigBox" placement="left" @after="getIDCOptionData" :button-class="'menu-edit'"> <idc-config-box :post-idc="item" ref="idcConfigBox" placement="left" @after="getIDCOptionData">
<template v-slot:optionZone> <template v-slot:optionZone>
<div @click="closeAllPop" class="menu-edit"> <div @click="closeAllPop" class="menu-edit">
<i class="nz-icon nz-icon-edit" @click="getIDCOptionData(item.id)" style="color: inherit"></i> <i class="nz-icon nz-icon-edit" @click="getIDCOptionData(item.id)" style="color: inherit"></i>

12
nezha-fronted/src/components/common/pagination.vue
View File

@@ -60,7 +60,7 @@ export default {
float: left; float: left;
} }
.pagination { .pagination {
padding-top: 12px; padding-top: 16px;
text-align: center; text-align: center;
} }
@@ -84,11 +84,21 @@ export default {
.el-pagination .el-pager .more::before { .el-pagination .el-pager .more::before {
line-height: 20px; line-height: 20px;
} }
.el-pagination .el-pager .more {
background-color: $content-right-background-color;
}
.btn-next, .btn-prev {
background-color: $content-right-background-color !important;
}
.pagination input {
background-color: $content-right-background-color !important;
}
.el-pager li.number{ .el-pager li.number{
font-family: NotoSansSC-Regular; font-family: NotoSansSC-Regular;
color: #666666; color: #666666;
letter-spacing: 0; letter-spacing: 0;
font-weight:normal; font-weight:normal;
background-color: $content-right-background-color;
} }
.el-pager li.number.active{ .el-pager li.number.active{
font-family: NotoSansSC-Regular; font-family: NotoSansSC-Regular;

6
nezha-fronted/src/components/common/rightBox/metricPrePanelBox.vue
View File

@@ -61,9 +61,9 @@
props: { props: {
chartInfo: Object, chartInfo: Object,
elementTarget:Object, elementTarget:Object,
seriesData:Object, seriesData:Array,
chartCount:Object, chartCount:String,
series:Object series:Array
}, },
data() { data() {
return { return {

7
nezha-fronted/src/components/common/searchInput.vue
View File

@@ -1200,7 +1200,7 @@
} }
</script> </script>
<style scoped> <style scoped lang="scss">
.new-search{ .new-search{
display: flex; display: flex;
@@ -1216,7 +1216,7 @@
} }
.new-search .search-input-all{ .new-search .search-input-all{
width: 240px; width: 240px;
background: #fff; background-color: $content-right-background-color;
color: rgba(0,0,0,.55); color: rgba(0,0,0,.55);
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
@@ -1226,6 +1226,9 @@
position: relative; position: relative;
} }
input {
background-color: $content-right-background-color;
}
.search-input-all .btn-retract{ .search-input-all .btn-retract{
padding: 0px 4px; padding: 0px 4px;
text-align: center; text-align: center;

7
nezha-fronted/src/components/page/alert/config.vue
View File

@@ -22,6 +22,10 @@
</div> </div>
<div class="content-right"> <div class="content-right">
<div class="top-tools"> <div class="top-tools">
<div>
</div>
<div>
<button id="alert-add" @click="toAdd" <button id="alert-add" @click="toAdd"
class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82"> class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82">
<span class="top-tool-btn-txt"> <span class="top-tool-btn-txt">
@@ -32,12 +36,13 @@
<search-input :searchMsg="searchMsg" @search="search"></search-input> <search-input :searchMsg="searchMsg" @search="search"></search-input>
</div> </div>
</div> </div>
</div>
<el-table <el-table
class="nz-table" class="nz-table"
:data="tableData" :data="tableData"
border border
tooltip-effect="light" tooltip-effect="light"
height="calc(100% - 65px)" height="calc(100% - 195px)"
style="width: 100%;"> style="width: 100%;">
<el-table-column <el-table-column
:resizable="false" :resizable="false"

3
nezha-fronted/src/components/page/alert/list.vue
View File

@@ -16,6 +16,7 @@
</div> </div>
<div class="content-right"> <div class="content-right">
<div class="top-tools"> <div class="top-tools">
<div></div>
<div class="top-tool-search float-right"> <div class="top-tool-search float-right">
<search-input :searchMsg="searchMsg" @search="search"></search-input> <search-input :searchMsg="searchMsg" @search="search"></search-input>
</div> </div>
@@ -25,7 +26,7 @@
:data="tableData" :data="tableData"
border border
tooltip-effect="light" tooltip-effect="light"
height="calc(100% - 65px)" height="calc(100% - 195px)"
style="width: 100%;"> style="width: 100%;">
<el-table-column <el-table-column
:resizable="false" :resizable="false"

5
nezha-fronted/src/components/page/asset/asset.vue
View File

@@ -31,6 +31,8 @@
<div class="content-right"> <div class="content-right">
<div class="top-tools"> <div class="top-tools">
<div></div>
<div>
<button @click.stop="tagShow('showAdd')" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="asset-add"> <button @click.stop="tagShow('showAdd')" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="asset-add">
<span class="top-tool-btn-txt"> <span class="top-tool-btn-txt">
<i class="nz-icon-create-square nz-icon"></i> <i class="nz-icon-create-square nz-icon"></i>
@@ -39,10 +41,11 @@
</button> </button>
<div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div> <div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
</div> </div>
</div>
<el-table <el-table
class="nz-table" class="nz-table"
height="calc(100% - 65px)" height="calc(100% - 195px)"
style="width: 100%;" style="width: 100%;"
:data="tableData" :data="tableData"
border border

5
nezha-fronted/src/components/page/config/account.vue
View File

@@ -22,6 +22,8 @@
</div> </div>
<div class="content-right"> <div class="content-right">
<div class="top-tools"> <div class="top-tools">
<div></div>
<div>
<button type="button" @click="toAdd" <button type="button" @click="toAdd"
class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="account-add"> class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="account-add">
<span class="top-tool-btn-txt"> <span class="top-tool-btn-txt">
@@ -32,11 +34,12 @@
<search-input :searchMsg="searchMsg" @search="search"></search-input> <search-input :searchMsg="searchMsg" @search="search"></search-input>
</div> </div>
</div> </div>
</div>
<el-table <el-table
class="nz-table" class="nz-table"
:data="tableData" :data="tableData"
border border
height="calc(100% - 65px)" height="calc(100% - 195px)"
style="width: 100%;"> style="width: 100%;">
<el-table-column <el-table-column
:resizable="false" :resizable="false"

65
nezha-fronted/src/components/page/config/promServer.vue
View File

@@ -2,6 +2,7 @@
.prom { .prom {
height: 100%; height: 100%;
} }
.top-tools .top-tool-btn-txt .nz-icon { .top-tools .top-tool-btn-txt .nz-icon {
display: inline-block; display: inline-block;
font-size: 12px; font-size: 12px;
@@ -13,21 +14,30 @@
<div class="content-left"> <div class="content-left">
<div class="sidebar-title">{{$t('config.config')}}</div> <div class="sidebar-title">{{$t('config.config')}}</div>
<div class="sidebar-info"> <div class="sidebar-info">
<div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="prom-jump-account">{{$t('config.account.account')}}</div> <div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="prom-jump-account">
{{$t('config.account.account')}}
</div>
<div class="sidebar-info-item sidebar-info-item-active">{{$t('config.promServer.promServerList')}}</div> <div class="sidebar-info-item sidebar-info-item-active">{{$t('config.promServer.promServerList')}}</div>
</div> </div>
</div> </div>
<div class="content-right"> <div class="content-right">
<div class="top-tools"> <div class="top-tools">
<button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="prom-add"> <div></div>
<div>
<button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82"
id="prom-add">
<span class="top-tool-btn-txt"> <span class="top-tool-btn-txt">
<i class="nz-icon-create-square nz-icon"></i> <i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span> {{$t('overall.add')}}</span>
</button> </button>
<div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div> <div class="top-tool-search float-right">
<search-input :searchMsg="searchMsg" @search="search"></search-input>
</div> </div>
<el-table :data="tableData" border height="calc(100% - 65px)" style="width: 100%;" class="nz-table"> </div>
<el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width" :key="`col-${index}`" :label="item.label"> </div>
<el-table :data="tableData" border height="calc(100% - 195px)" style="width: 100%;" class="nz-table">
<el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width"
:key="`col-${index}`" :label="item.label">
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<template v-if="index==0"> <template v-if="index==0">
<span @click.stop="elementsetShow('shezhi',$event)" id="prom-tab-set" class="nz-table-gear"> <span @click.stop="elementsetShow('shezhi',$event)" id="prom-tab-set" class="nz-table-gear">
@@ -40,7 +50,9 @@
</div> </div>
</template> </template>
<template slot-scope="scope" :column="item"> <template slot-scope="scope" :column="item">
<idc-config-box v-if="item.prop == 'idc'" ref="idcConfigBox" :post-idc="JSON.parse(JSON.stringify(scope.row[item.prop]))" :is-edit="false" placement="left" @after="getIdcData" :button-class="'checkbox-edit'"> <idc-config-box v-if="item.prop == 'idc'" ref="idcConfigBox"
:post-idc="JSON.parse(JSON.stringify(scope.row[item.prop]))" :is-edit="false"
placement="left" @after="getIdcData" :button-class="'checkbox-edit'">
<template v-slot:optionZone> <template v-slot:optionZone>
<span class="link" @click="closeAllPop">{{scope.row[item.prop].name}}</span> <span class="link" @click="closeAllPop">{{scope.row[item.prop].name}}</span>
</template> </template>
@@ -72,13 +84,15 @@
<div class="right-box right-box-prom" v-if="rightBox.show"> <div class="right-box right-box-prom" v-if="rightBox.show">
<!-- begin--顶部按钮--> <!-- begin--顶部按钮-->
<div class="right-box-top-btns"> <div class="right-box-top-btns">
<button type="button" v-if="rightBox.isEdit && promServer.id != ''" @click="del(promServer)" id="prom-edit-del" <button type="button" v-if="rightBox.isEdit && promServer.id != ''" @click="del(promServer)"
id="prom-edit-del"
class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82"> class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span> <span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span> <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button> </button>
<button v-if="!rightBox.isEdit" type="button" @click="saveOrToEdit" <button v-if="!rightBox.isEdit" type="button" @click="saveOrToEdit"
class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82" id="prom-edit-save"> class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82"
id="prom-edit-save">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-edit"></i></span> <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-edit"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.edit')}}</span> <span class="right-box-top-btn-txt">{{$t('overall.edit')}}</span>
</button> </button>
@@ -91,19 +105,24 @@
<!-- begin--表单--> <!-- begin--表单-->
<el-scrollbar class="right-box-form-box"> <el-scrollbar class="right-box-form-box">
<el-form class="right-box-form" :model="promServer" label-position="top" label-width="80px" :rules="rules" ref="promServerForm"> <el-form class="right-box-form" :model="promServer" label-position="top" label-width="80px" :rules="rules"
ref="promServerForm">
<!--DC start--> <!--DC start-->
<el-form-item label="DC" prop="idc.name"> <el-form-item label="DC" prop="idc.name">
<div class="right-box-form-content"> <div class="right-box-form-content">
<el-select class="right-box-row-with-btn" value-key="id" popper-class="config-dropdown" v-model="promServer.idc" placeholder="" v-if="rightBox.isEdit" size="small"> <el-select class="right-box-row-with-btn" value-key="id" popper-class="config-dropdown"
<el-option @click.native="blurEditIdc()" v-for="item in idcData" :key="item.id" :label="item.name" :value="item" :id="'prom-edit-idc-op-'+item.id"> v-model="promServer.idc" placeholder="" v-if="rightBox.isEdit" size="small">
<el-option @click.native="blurEditIdc()" v-for="item in idcData" :key="item.id" :label="item.name"
:value="item" :id="'prom-edit-idc-op-'+item.id">
<span class="config-dropdown-label-txt">{{item.name}}</span> <span class="config-dropdown-label-txt">{{item.name}}</span>
<idc-config-box :post-idc="item" placement="left" @after="getIdcData" :button-class="'config-dropdown-btn'"> <idc-config-box :post-idc="item" placement="left" @after="getIdcData"
:button-class="'config-dropdown-btn'">
<template v-slot:optionZone> <template v-slot:optionZone>
<i class="el-icon-edit-outline"></i> <i class="el-icon-edit-outline"></i>
</template> </template>
</idc-config-box> </idc-config-box>
<span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="toDelIdc(item)" :id="'prom-edit-idc-op-del-'+item.id"><i class="el-icon-delete"></i></span> <span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="toDelIdc(item)"
:id="'prom-edit-idc-op-del-'+item.id"><i class="el-icon-delete"></i></span>
</el-option> </el-option>
</el-select> </el-select>
@@ -118,20 +137,26 @@
<!--host--> <!--host-->
<el-form-item label="Host" prop="host"> <el-form-item label="Host" prop="host">
<el-input type="text" v-if="rightBox.isEdit" placeholder="" v-model="promServer.host" size="small"></el-input> <el-input type="text" v-if="rightBox.isEdit" placeholder="" v-model="promServer.host"
size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{promServer.host}}</div> <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{promServer.host}}</div>
</el-form-item> </el-form-item>
<!--Port--> <!--Port-->
<el-form-item label="Port" prop="port"> <el-form-item label="Port" prop="port">
<el-input type="text" v-if="rightBox.isEdit" placeholder="" v-model.number="promServer.port" size="small"></el-input> <el-input type="text" v-if="rightBox.isEdit" placeholder="" v-model.number="promServer.port"
size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{promServer.port}}</div> <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{promServer.port}}</div>
</el-form-item> </el-form-item>
<!--type--> <!--type-->
<el-form-item :label="$t('config.promServer.type')" prop="type"> <el-form-item :label="$t('config.promServer.type')" prop="type">
<el-select popper-class="config-dropdown" v-model="promServer.type" placeholder="" v-if="rightBox.isEdit" size="small"> <el-select popper-class="config-dropdown" v-model="promServer.type" placeholder="" v-if="rightBox.isEdit"
<el-option v-for="item in typeData" :key="item.key" :label="item.value" :value="item.key" :id="'prom-edit-type-op-'+item.key"></el-option> size="small">
<el-option v-for="item in typeData" :key="item.key" :label="item.value" :value="item.key"
:id="'prom-edit-type-op-'+item.key"></el-option>
</el-select> </el-select>
<div v-for="item in typeData" v-if="!rightBox.isEdit && item.key == promServer.type" :id="'prom-edit-type-op-del-'+item.key" class="right-box-form-content-txt">{{item.value}}</div> <div v-for="item in typeData" v-if="!rightBox.isEdit && item.key == promServer.type"
:id="'prom-edit-type-op-del-'+item.key" class="right-box-form-content-txt">{{item.value}}
</div>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-scrollbar> </el-scrollbar>
@@ -142,7 +167,8 @@
<button @click="esc" id="prom-esc" class="nz-btn nz-btn-size-large nz-btn-style-light nz-btn-min-width-120"> <button @click="esc" id="prom-esc" class="nz-btn nz-btn-size-large nz-btn-style-light nz-btn-min-width-120">
<span>{{$t('overall.cancel')}}</span> <span>{{$t('overall.cancel')}}</span>
</button> </button>
<button v-if="rightBox.isEdit" @click="saveOrToEdit" id="prom-save" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120"> <button v-if="rightBox.isEdit" @click="saveOrToEdit" id="prom-save"
class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120">
<span>{{$t('overall.save')}}</span> <span>{{$t('overall.save')}}</span>
</button> </button>
</div> </div>
@@ -161,6 +187,7 @@
<script> <script>
import {host} from '../../common/js/validate'; import {host} from '../../common/js/validate';
import {port} from '../../common/js/validate'; import {port} from '../../common/js/validate';
export default { export default {
name: "prom", name: "prom",

2
nezha-fronted/src/components/page/dashboard/chartMetric.vue
View File

@@ -92,7 +92,7 @@
width: 100px; width: 100px;
} }
.li-list-part-label-val-list .el-select--mini { .li-list-part-label-val-list .el-select--mini {
width: calc(100% - 45px); width: calc(100% - 45px) !important;
} }
.nz-tab-chart-item-box{ .nz-tab-chart-item-box{
padding:0; padding:0;

64
nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
View File

@@ -143,7 +143,7 @@
<style> <style>
.li-list-part-label-val-list .metric-title-position .el-form-item__label { .li-list-part-label-val-list .metric-title-position .el-form-item__label {
font-size: 14px; font-size: 14px;
height: 10px; height: 15px;
color: #666; color: #666;
line-height: 14px; line-height: 14px;
text-align: left; text-align: left;
@@ -163,11 +163,11 @@
<template> <template>
<el-form :model="elementInfo" ref="elementInfo" > <el-form :model="elementInfo" ref="elementInfo" >
<el-row > <el-row >
<el-col span="16"> <el-col :span="16">
<!-- <span class="star-red">*</span>&nbsp; --> <!-- <span class="star-red">*</span>&nbsp; -->
{{$t('dashboard.panel.chartForm.metric')}} {{$t('dashboard.panel.chartForm.metric')}}
</el-col> </el-col>
<el-col span="8" style="text-align: right;"> <el-col :span="8" style="text-align: right;">
<div class="nz-tab-item-box" v-show="tableShow == 1"> <div class="nz-tab-item-box" v-show="tableShow == 1">
<!-- <div class="nz-btn-group float-left" v-show="tableShow == 2"> --> <!-- <div class="nz-btn-group float-left" v-show="tableShow == 2"> -->
<div @click="" class="nz-tab-style nz-tab-style-light"> <div @click="" class="nz-tab-style nz-tab-style-light">
@@ -202,15 +202,15 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row v-if="tableShow == 2"> <el-row v-if="tableShow == 2">
<el-col span="24" class="mt1"> <el-col :span="24" class="mt1">
<el-form-item prop="expression" :rules="{ required: true, message:$t('validate.required'), trigger: 'blur' }"><!--expression和metric的验证只能有一个，不能同时存在？？:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"--> <el-form-item prop="expression" :rules="{ required: true, message:$t('validate.required'), trigger: 'blur' }"><!--expression和metric的验证只能有一个，不能同时存在？？:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
<el-input size="mini" @input="changeExpression" class="full-width" ref="metricExpression" type="textarea" maxlength="1024" show-word-limit v-model="elementInfo.expression" :placeholder="this.$t('dashboard.metric.expertTip')" ></el-input> <el-input size="mini" @input="changeExpression" class="full-width" ref="metricExpression" type="textarea" maxlength="1024" show-word-limit v-model="elementInfo.expression" :placeholder="this.$t('dashboard.metric.expertTip')" ></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row v-if="tableShow == 1"> <el-row v-if="tableShow == 1">
<el-col span="24" > <el-col :span="24" >
<el-form-item :label-width="80" prop="metric" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }"><!--:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"--> <el-form-item label-width="80" prop="metric" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }"><!--:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
<!-- <!--
<el-select ref="metricSelect" class="full-width" filterable placeholder="" popper-class="" size="small" v-model="elementInfo.metric" @change="selectMetric"> <el-select ref="metricSelect" class="full-width" filterable placeholder="" popper-class="" size="small" v-model="elementInfo.metric" @change="selectMetric">
<el-option v-for="(item, index) in metricShowList.arr" :key="item.metric + index" <el-option v-for="(item, index) in metricShowList.arr" :key="item.metric + index"
@@ -229,7 +229,7 @@
</el-row> </el-row>
<!--create chart组件显示框 --> <!--create chart组件显示框 -->
<el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"--> <el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
<el-col span="9" style="margin-bottom: 20px;"> <el-col :span="9" style="margin-bottom: 20px;">
<div class="metric-title-label too-long-split">{{elementInfo.metric}}</div> <div class="metric-title-label too-long-split">{{elementInfo.metric}}</div>
<div class="li-list-part"> <div class="li-list-part">
<el-scrollbar style="height: 100%"> <el-scrollbar style="height: 100%">
@@ -243,12 +243,12 @@
</div> </div>
</el-col> </el-col>
<el-col span="1" class="symbol-area"><span class="symbol-equal">=</span></el-col> <el-col :span="1" class="symbol-area"><span class="symbol-equal">=</span></el-col>
<el-col span="14"> <el-col :span="14">
<div class="li-list-part-label-val-list" > <div class="li-list-part-label-val-list" >
<el-scrollbar style="height: 100%"> <el-scrollbar style="height: 100%">
<el-form-item class="metric-title-position right-box-form-content" v-for="(item, index) in elementInfo.selectedTagList" :key="index" :label="item.name" :label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" > <el-form-item class="metric-title-position right-box-form-content" v-for="(item, index) in elementInfo.selectedTagList" :key="index" :label="item.name" label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
<el-select v-model="item.value" ref="tagSelect" size="mini" <el-select v-model="item.value" ref="tagSelect" size="mini"
placeholder="" placeholder=""
collapse-tags collapse-tags
@@ -264,48 +264,6 @@
</el-col> </el-col>
</el-row> </el-row>
<!-- create chart组件显示框 -->
<!-- <el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
<!-- <el-col span="12">
<div class="metric-title-label">{{elementInfo.metric}}</div>
<div class="li-list-part">
<ul class="no-list-style">
<li class="li-cursor" v-if="!item.isSelect"
v-for="(item,index) in elementInfo.tagList"
@click="getLidata(index,item)"
:key="index">
<div>
<span >{{ item.name }}</span>
</div>
</li>
</ul>
</div>
</el-col>
<el-col span="12">
<div class="li-list-part-label-val-list" >
<el-form-item class="metric-title-position" v-for="(item, index) in elementInfo.selectedTagList" :key="index" :label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
<el-row >{{item.name}}</el-row>
<el-row class="metric-title-row-position" > -->
<!--多选列表 -->
<!-- <el-col span="20" >
<el-select v-model="item.value" ref="tagSelect" size="small"
placeholder=""
collapse-tags
filterable
@change="changeTag"
multiple>
<el-option v-for="(op, j) in elementInfo.selectedTagList[index].list" :key="op + j" :value="op">{{op}}</el-option>
</el-select>
</el-col>
<el-col span="4" >
&nbsp;&nbsp;<button type="button" @click="deleteMetricLabel(item,index)" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square nz-btn-style-higher"><span class="top-tool-btn-txt"><i class="el-icon-close"></i></span></button>
</el-col>
</el-row>
</el-form-item>
</div>
</el-col> -->
<!-- </el-row> -->
</el-form> </el-form>
</template> </template>
<script> <script>
@@ -324,7 +282,7 @@ export default {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
metricCascaderList:[], metricCascaderList:Array,
countTotal: { countTotal: {
type: Number, type: Number,
default: 1, default: 1,

7
nezha-fronted/src/components/page/dashboard/metricPreview.scss
View File

@@ -37,7 +37,12 @@
font-weight: bold; font-weight: bold;
padding-left:5px; padding-left:5px;
} }
input {
background-color: $content-right-background-color;
}
.el-input__inner {
background-color: $content-right-background-color;
}
} }
/* /*

5
nezha-fronted/src/components/page/dashboard/metricPreview.vue
View File

@@ -33,10 +33,11 @@
<div class="table-list" > <div class="table-list" >
<div class="box-content" > <div class="box-content" >
<el-row :gutter="20" class="row-width" style="height: calc(100% - 65px);"> <el-row :gutter="20" class="row-width" style="height: calc(100% - 65px);">
<el-col :span="12" > <el-col :span="10" >
<metric-set ref="metricSet" @on-view-chart="getChartParam"></metric-set> <metric-set ref="metricSet" @on-view-chart="getChartParam"></metric-set>
</el-col> </el-col>
<el-col :span="12" style="height: calc(100% - 10px);overflow-y: auto;overflow-x: hidden;"> <el-col :span="0.5"><div>&nbsp;</div></el-col>
<el-col :span="13" style="height: calc(100% - 180px);overflow-y: auto;overflow-x: hidden;">
<el-row class="border-area" v-show="chartCount === 'single'"> <el-row class="border-area" v-show="chartCount === 'single'">
<div class="chartBox"> <div class="chartBox">
<line-chart-block <line-chart-block

12
nezha-fronted/src/components/page/dashboard/metricSet.vue
View File

@@ -44,9 +44,9 @@
<el-row class="operate-area"> <el-row class="operate-area">
<button type="primary" @click="preview" :disabled="loading" class="nz-btn nz-btn-size-normal nz-btn-style-normal">{{$t('dashboard.metric.previewChart')}}</button> <button type="primary" @click="preview" :disabled="loading" class="nz-btn nz-btn-size-large nz-btn-style-normal">{{$t('dashboard.metric.previewChart')}}</button>
<button :disabled="saveDisabled || loading" type="primary" @click="preview('change')" <button :disabled="saveDisabled || loading" type="primary" @click="preview('change')" class="margin-l-10"
:class="{'nz-btn nz-btn-disabled nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 btn-disabled-cursor-not-allowed' : (saveDisabled || loading), 'nz-btn nz-btn-size-normal nz-btn-style-light' : !(saveDisabled || loading)}" :class="{'nz-btn nz-btn-disabled nz-btn-size-large nz-btn-style-light nz-btn-min-width-75 btn-disabled-cursor-not-allowed' : (saveDisabled || loading), 'nz-btn nz-btn-size-large nz-btn-style-light' : !(saveDisabled || loading)}"
>{{chartSwitchWord}}</button> >{{chartSwitchWord}}</button>
<!-- <Button type="primary" @click="addTarget">添加指标</Button> --> <!-- <Button type="primary" @click="addTarget">添加指标</Button> -->
@@ -70,11 +70,11 @@
</el-row> </el-row>
<!-- options --> <!-- options -->
<el-row class="mt-10"> <el-row class="mt-10 margin-b-10">
<el-checkbox-button :disabled="saveDisabled" v-model="isSave" checked >Options</el-checkbox-button> <div>Options</div>
<!-- <el-checkbox :disabled="saveDisabled" v-model="isSave" checked >options</el-checkbox> --> <!-- <el-checkbox :disabled="saveDisabled" v-model="isSave" checked >options</el-checkbox> -->
</el-row> </el-row>
<el-form :model="chartInfo" ref="chartInfo" v-show="isSave"> <el-form :model="chartInfo" ref="chartInfo">
<el-row> <el-row>
<div class="common-float-left"> <div class="common-float-left">
<el-form-item label-width="80px" :label="$t('dashboard.panel.chartForm.width')" prop="span" <el-form-item label-width="80px" :label="$t('dashboard.panel.chartForm.width')" prop="span"

122
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -1,4 +1,3 @@
<template> <template>
<div class="panel"> <div class="panel">
<div class="content-left"> <div class="content-left">
@@ -10,7 +9,22 @@
</div> </div>
<div class="content-right"> <div class="content-right">
<div class="top-tools"> <div class="top-tools">
<button @click="toAddChart" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82"> <div>
<el-dropdown @command="panelChange" trigger="click">
<span class="el-dropdown-link">
{{showPanel.name}}<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu class="nz-dashboard-dropdown" slot="dropdown">
<el-dropdown-item>{{$t('dashboard.panel.createPanelTitleSec')}}</el-dropdown-item>
<el-dropdown-item v-for="item in panelData" :key="item.id+1"
:class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">{{item.name}}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div>
<button @click="toAddChart"
class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82">
<span class="top-tool-btn-txt"> <span class="top-tool-btn-txt">
<i class="nz-icon-create-square nz-icon"></i> <i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span> {{$t('overall.add')}}</span>
@@ -18,78 +32,41 @@
<div class="top-tool-search float-right"> <div class="top-tool-search float-right">
<search-input ref="searchInput" :searchMsg="searchMsg" @search="search"></search-input> <search-input ref="searchInput" :searchMsg="searchMsg" @search="search"></search-input>
</div> </div>
<!-- <el-select class="panel-select-width" popper-class="" v-model="showPanel.id" placeholder="" size="small" @change="panelChange">
<el-option >
<span class="panel-dropdown-btn-create" @click.stop="toAdd" >{{$t('dashboard.panel.createPanelTitleSec')}}</span>
</el-option>
<el-option
@click.native=""
v-for="item in panelData"
:key="item.id"
:label="item.name"
:value="item.id">
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
<span class="panel-dropdown-btn" @click.stop="toEdit(item)">
<i class="el-icon-edit-outline" ></i>
</span>
<span class="panel-dropdown-btn panel-dropdown-btn-delete" @click.stop="del(item)"><i class="el-icon-delete"></i></span>
</el-option>
</el-select> -->
<el-dropdown @command="panelChange" trigger="click">
<span class="el-dropdown-link">
{{showPanel.name}}<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu class="nz-dashboard-dropdown" slot="dropdown">
<el-dropdown-item >{{$t('dashboard.panel.createPanelTitleSec')}}</el-dropdown-item>
<el-dropdown-item v-for="item in panelData" :key="item.id+1" :class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">{{item.name}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<div class="nz-btn-group nz-btn-group-light float-right margin-r-20"> <div class="nz-btn-group nz-btn-group-light float-right margin-r-20">
<button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="Refresh()"> <button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button"
class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="Refresh()">
<i style="font-size: 12px" class="global-active-color nz-icon nz-icon-refresh"></i> <i style="font-size: 12px" class="global-active-color nz-icon nz-icon-refresh"></i>
</button><el-popover v-model="visible" placement="bottom-start" width="200" trigger="click"> </button><el-popover
v-model="visible" placement="bottom-start" width="200" trigger="click">
<ul class="popover_ul"> <ul class="popover_ul">
<li v-for="i in intervalList" :style="{color:interval==i.value?'#31749C':''}" :key="i.value+i.name" @click="selectInterval(i.value)"> <li v-for="i in intervalList" :style="{color:interval==i.value?'#31749C':''}" :key="i.value+i.name"
@click="selectInterval(i.value)">
{{i.name}} {{i.name}}
</li> </li>
</ul> </ul>
<button type="button" style="border-radius: 0 4px 4px 0" class="nz-btn nz-btn-size-normal nz-btn-style-light" slot="reference"> <button type="button" style="border-radius: 0 4px 4px 0"
class="nz-btn nz-btn-size-normal nz-btn-style-light" slot="reference">
<i style="font-size: 12px" class="nz-icon nz-icon-arrow-down"></i> <i style="font-size: 12px" class="nz-icon nz-icon-arrow-down"></i>
</button> </button>
</el-popover> </el-popover>
</div> </div>
<!--<div class="panel-refresh-interval">
<div class="block">
&lt;!&ndash; 刷新 &ndash;&gt;
<div class="refresh">
<span style="cursor:pointer;" class="nz-dashboard-refresh">
<i class="nz-icon nz-icon-refresh" @click="Refresh()"></i>
</span>
<el-popover v-model="visible" placement="bottom-start" width="200" trigger="click">
<ul class="popover_ul">
<li v-for="i in intervalList" :style="{color:interval==i.value?'#31749C':''}" :key="i.value+i.name" @click="selectInterval(i.value)">
{{i.name}}
</li>
</ul>
<div style="cursor:pointer" slot="reference">
&lt;!&ndash; {{interval}} &ndash;&gt;
<i class="nz-icon nz-icon-arrow-down" ></i>
</div>
</el-popover>
</div>
</div>
</div>-->
<div class="panel-calendar margin-r-20"> <div class="panel-calendar margin-r-20">
<div class="block"> <div class="block">
<el-date-picker prefix-icon=" " class="nz-dashboard-picker" size="mini" ref="calendar" format="yyyy/MM/dd HH:mm" @change="dateChange" v-model="searchTime" type="datetimerange" :picker-options="pickerOptions" :range-separator="$t('dashboard.panel.to')" :start-placeholder="$t('dashboard.panel.startTime')" :end-placeholder="$t('dashboard.panel.endTime')" align="right"> <el-date-picker prefix-icon=" " class="nz-dashboard-picker" size="mini" ref="calendar"
format="yyyy/MM/dd HH:mm" @change="dateChange" v-model="searchTime" type="datetimerange"
:picker-options="pickerOptions" :range-separator="$t('dashboard.panel.to')"
:start-placeholder="$t('dashboard.panel.startTime')"
:end-placeholder="$t('dashboard.panel.endTime')" align="right">
</el-date-picker> </el-date-picker>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="table-list" @scroll="onScroll" id="tableList"> <div class="table-list" @scroll="onScroll" id="tableList">
<div class="box-content"> <div class="box-content">
<chart-list @on-edit-chart="editData" @on-refresh-time="refreshTime" @on-remove-chart="removeData" ref="chartList"></chart-list> <chart-list @on-edit-chart="editData" @on-refresh-time="refreshTime" @on-remove-chart="removeData"
ref="chartList"></chart-list>
</div> </div>
</div> </div>
</div> </div>
@@ -530,7 +507,8 @@ export default {
created() { created() {
this.getTableData(); this.getTableData();
}, },
mounted: function () {}, mounted: function () {
},
computed: { computed: {
refreshPanel() { refreshPanel() {
return this.$store.state.panelListReload; return this.$store.state.panelListReload;
@@ -549,7 +527,6 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.panel { .panel {
height: 100%; height: 100%;
background: #FCFCFC;
} }
.panel .el-table { .panel .el-table {
@@ -582,7 +559,7 @@ export default {
.table-list { .table-list {
margin-top: 10px; margin-top: 10px;
overflow-y: auto; overflow-y: auto;
height: 100%; height: calc(100% - 150px);
} }
.box-content { .box-content {
@@ -659,13 +636,16 @@ export default {
outline: none; outline: none;
border: 1px solid #ccc; border: 1px solid #ccc;
} }
button:hover { button:hover {
background: $btn-light-background-color-hover; background: $btn-light-background-color-hover;
} }
} }
.nz-dashboard-dropdown { .nz-dashboard-dropdown {
height: 300px; height: 300px;
overflow-y: auto; overflow-y: auto;
li { li {
padding: 0 20px !important; padding: 0 20px !important;
@@ -673,13 +653,14 @@ export default {
} }
.nz-dashboard-dropdown-bg { .nz-dashboard-dropdown-bg {
background: #409EFF; background: $global-text-color-active;
color: #fff; color: #fff;
} }
.el-dropdown-link { .el-dropdown-link {
cursor: pointer; cursor: pointer;
} }
.refresh { .refresh {
display: flex; display: flex;
background: #fff; background: #fff;
@@ -689,40 +670,57 @@ export default {
margin: 0 10px; margin: 0 10px;
border: 1px solid #ccc; border: 1px solid #ccc;
background: $btn-light-background-color; background: $btn-light-background-color;
span { span {
display: inline-block; display: inline-block;
padding: 1px 8px; padding: 1px 8px;
} }
} }
.popover_ul li { .popover_ul li {
padding: 10px 3px; padding: 10px 3px;
cursor: pointer; cursor: pointer;
} }
.popover_ul li:hover { .popover_ul li:hover {
background: #f5f7fa; background: $dropdown-hover-background-color !important;
color: $global-text-color-active !important;
} }
.nz-dashboard-refresh { .nz-dashboard-refresh {
border-right: 1px solid #ccc; border-right: 1px solid #ccc;
color: #F0BF84; color: #F0BF84;
} }
.nz-dashboard-picker {}
.nz-dashboard-picker {
}
</style> </style>
<style lang="scss"> <style lang="scss">
.panel .panel-calendar input {
background-color: $content-right-background-color;
}
.panel .panel-calendar .el-input__inner {
background-color: $content-right-background-color;
}
.panel-calendar .el-range-editor--mini.el-input__inner { .panel-calendar .el-range-editor--mini.el-input__inner {
height: 25px !important; height: 25px !important;
border-color: #d8d8d8; border-color: #d8d8d8;
} }
.panel-calendar .el-range-editor--mini .el-range__close-icon { .panel-calendar .el-range-editor--mini .el-range__close-icon {
line-height: 18px; line-height: 18px;
} }
.panel-calendar .el-range-editor--mini .el-range__icon { .panel-calendar .el-range-editor--mini .el-range__icon {
display: none; display: none;
} }
.panel-calendar .el-range-editor--mini .el-range-separator { .panel-calendar .el-range-editor--mini .el-range-separator {
line-height: 17px; line-height: 17px;
} }
.panel-calendar .el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner { .panel-calendar .el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner {
width: 310px; width: 310px;
padding-right: 0; padding-right: 0;

12
nezha-fronted/src/components/page/project/project.vue
View File

@@ -24,7 +24,7 @@
<!--metrics--> <!--metrics-->
<div class="content-right" v-show="tableShow == 2"> <div class="content-right" v-show="tableShow == 2">
<div class="top-tools"> <div class="top-tools">
<div class="nz-tab float-left"> <div class="nz-tab">
<div @click="tableShow = 1" class="nz-tab-item-box"> <div @click="tableShow = 1" class="nz-tab-item-box">
<div class="nz-tab-item">{{$t('project.endpoint.endpoint')}}</div> <div class="nz-tab-item">{{$t('project.endpoint.endpoint')}}</div>
</div> </div>
@@ -32,13 +32,13 @@
<div class="nz-tab-item nz-tab-item-active">{{$t('project.metrics.metrics')}}</div> <div class="nz-tab-item nz-tab-item-active">{{$t('project.metrics.metrics')}}</div>
</div> </div>
</div> </div>
<div class="top-tool-search float-right"><search-input :searchMsg="metricSearchMsg" @search="metricSearch"></search-input></div> <div class="top-tool-search"><search-input :searchMsg="metricSearchMsg" @search="metricSearch"></search-input></div>
</div> </div>
<el-table <el-table
:data="metricsTableData" :data="metricsTableData"
class="nz-table" class="nz-table"
border border
height="calc(100% - 65px)" height="calc(100% - 195px)"
style="width: 100%;"> style="width: 100%;">
<el-table-column <el-table-column
:resizable="false" :resizable="false"
@@ -60,7 +60,7 @@
<!--endpoint--> <!--endpoint-->
<div class="content-right" v-show="tableShow == 1"> <div class="content-right" v-show="tableShow == 1">
<div class="top-tools"> <div class="top-tools">
<div class="nz-tab float-left"> <div class="nz-tab">
<div class="nz-tab-item-box"> <div class="nz-tab-item-box">
<div class="nz-tab-item nz-tab-item-active">{{$t('project.endpoint.endpoint')}}</div> <div class="nz-tab-item nz-tab-item-active">{{$t('project.endpoint.endpoint')}}</div>
</div> </div>
@@ -68,6 +68,7 @@
<div class="nz-tab-item">{{$t('project.metrics.metrics')}}</div> <div class="nz-tab-item">{{$t('project.metrics.metrics')}}</div>
</div> </div>
</div> </div>
<div>
<button @click="toCreateEndpoint" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="project-add-ep"> <button @click="toCreateEndpoint" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="project-add-ep">
<span class='top-tool-btn-txt'> <span class='top-tool-btn-txt'>
<i class="nz-icon-create-square nz-icon"></i> <i class="nz-icon-create-square nz-icon"></i>
@@ -75,11 +76,12 @@
</button> </button>
<div class="top-tool-search float-right"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div> <div class="top-tool-search float-right"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div>
</div> </div>
</div>
<el-table <el-table
:data="endpointTableData" :data="endpointTableData"
border border
class="nz-table" class="nz-table"
height="calc(100% - 65px)" height="calc(100% - 195px)"
style="width: 100%;"> style="width: 100%;">
<el-table-column <el-table-column
:resizable="false" :resizable="false"