Build: add git hook for code style (#249)
* build: add hooks for pre commit
* build: add prettier
* style: format
* style: test
* style: fix
* style: fix
* fix: prettier
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..834b6e9
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,10 @@
+{
+ "trailingComma": "all",
+ "printWidth": 120,
+ "tabWidth": 2,
+ "semi": true,
+ "singleQuote": true,
+ "bracketSpacing": true,
+ "vueIndentScriptAndStyle": true,
+ "arrowParens": "always"
+}
diff --git a/package-lock.json b/package-lock.json
index 8262f15..b2d662f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -838,12 +838,49 @@
"glob-to-regexp": "^0.3.0"
}
},
+ "@nodelib/fs.scandir": {
+ "version": "2.1.3",
+ "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
+ "integrity": "sha512-eGmwYQn3gxo4r7jdQnkrrN6bY478C3P+a/y72IJukF8LjB6ZHeB3c+Ehacj3sYeSmUXGlnA67/PmbM9CVwL7Dw==",
+ "dev": true,
+ "requires": {
+ "@nodelib/fs.stat": "2.0.3",
+ "run-parallel": "^1.1.9"
+ },
+ "dependencies": {
+ "@nodelib/fs.stat": {
+ "version": "2.0.3",
+ "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz",
+ "integrity": "sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA==",
+ "dev": true
+ }
+ }
+ },
"@nodelib/fs.stat": {
"version": "1.1.3",
"resolved": "http://registry.npm.taobao.org/@nodelib/fs.stat/download/@nodelib/fs.stat-1.1.3.tgz",
"integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
"dev": true
},
+ "@nodelib/fs.walk": {
+ "version": "1.2.4",
+ "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.4.tgz",
+ "integrity": "sha512-1V9XOY4rDW0rehzbrcqAmHnz8e7SKvX27gh8Gt2WgB0+pdzdiLV83p72kZPU+jvMbS1qU5mauP2iOvO8rhmurQ==",
+ "dev": true,
+ "requires": {
+ "@nodelib/fs.scandir": "2.1.3",
+ "fastq": "^1.6.0"
+ }
+ },
+ "@samverschueren/stream-to-observable": {
+ "version": "0.3.0",
+ "resolved": "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz",
+ "integrity": "sha512-MI4Xx6LHs4Webyvi6EbspgyAb4D2Q2VtnCQ1blOJcoLS6mVa8lNN2rkIy1CVxfTUpoyIbCTkXES1rLXztFD1lg==",
+ "dev": true,
+ "requires": {
+ "any-observable": "^0.3.0"
+ }
+ },
"@soda/friendly-errors-webpack-plugin": {
"version": "1.7.1",
"resolved": "http://registry.npm.taobao.org/@soda/friendly-errors-webpack-plugin/download/@soda/friendly-errors-webpack-plugin-1.7.1.tgz",
@@ -897,12 +934,53 @@
}
}
},
+ "@types/color-name": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
+ "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
+ "dev": true
+ },
+ "@types/events": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
+ "integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==",
+ "dev": true
+ },
+ "@types/glob": {
+ "version": "7.1.1",
+ "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.1.tgz",
+ "integrity": "sha512-1Bh06cbWJUHMC97acuD6UMG29nMt0Aqz1vF3guLfG+kHHJhy3AyohZFFxYk2f7Q1SQIrNwvncxAE0N/9s70F2w==",
+ "dev": true,
+ "requires": {
+ "@types/events": "*",
+ "@types/minimatch": "*",
+ "@types/node": "*"
+ }
+ },
"@types/lodash": {
"version": "4.14.138",
"resolved": "https://registry.npm.taobao.org/@types/lodash/download/@types/lodash-4.14.138.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Flodash%2Fdownload%2F%40types%2Flodash-4.14.138.tgz",
"integrity": "sha1-NPUmQNc1gjAwg0TlecFbN42RmJ4=",
"dev": true
},
+ "@types/minimatch": {
+ "version": "3.0.3",
+ "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
+ "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==",
+ "dev": true
+ },
+ "@types/node": {
+ "version": "13.1.6",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-13.1.6.tgz",
+ "integrity": "sha512-Jg1F+bmxcpENHP23sVKkNuU3uaxPnsBMW0cLjleiikFKomJQbsn0Cqk2yDvQArqzZN6ABfBkZ0To7pQ8sLdWDg==",
+ "dev": true
+ },
+ "@types/parse-json": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+ "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
+ "dev": true
+ },
"@types/q": {
"version": "1.5.1",
"resolved": "http://registry.npm.taobao.org/@types/q/download/@types/q-1.5.1.tgz",
@@ -1160,6 +1238,12 @@
"yallist": "^2.1.2"
}
},
+ "prettier": {
+ "version": "1.16.3",
+ "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.16.3.tgz",
+ "integrity": "sha512-kn/GU6SMRYPxUakNXhpP0EedT/KmaPzr0H5lIsDogrykbaxOpOfAFfk5XA7DZrJyMAv1wlMV3CPcZruGXVVUZw==",
+ "dev": true
+ },
"source-map": {
"version": "0.6.1",
"resolved": "http://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
@@ -1413,6 +1497,24 @@
"integrity": "sha1-tfUGMfjWzsi9IMljljr7VeBsvOk=",
"dev": true
},
+ "aggregate-error": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.0.1.tgz",
+ "integrity": "sha512-quoaXsZ9/BLNae5yiNoUz+Nhkwz83GhWwtYFglcjEQB2NDHCIpApbqXxIFnm4Pq/Nvhrsq5sYJFyohrrxnTGAA==",
+ "dev": true,
+ "requires": {
+ "clean-stack": "^2.0.0",
+ "indent-string": "^4.0.0"
+ },
+ "dependencies": {
+ "indent-string": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+ "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+ "dev": true
+ }
+ }
+ },
"ajv": {
"version": "6.9.2",
"resolved": "http://registry.npm.taobao.org/ajv/download/ajv-6.9.2.tgz",
@@ -1455,6 +1557,12 @@
"integrity": "sha1-V9NbhoboUeLMBMQD8cACA5dqGBM=",
"dev": true
},
+ "ansi-escapes": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz",
+ "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==",
+ "dev": true
+ },
"ansi-html": {
"version": "0.0.7",
"resolved": "http://registry.npm.taobao.org/ansi-html/download/ansi-html-0.0.7.tgz",
@@ -1476,6 +1584,12 @@
"color-convert": "^1.9.0"
}
},
+ "any-observable": {
+ "version": "0.3.0",
+ "resolved": "https://registry.npmjs.org/any-observable/-/any-observable-0.3.0.tgz",
+ "integrity": "sha512-/FQM1EDkTsf63Ub2C6O7GuYFDsSXUwsaZDurV0np41ocwq0jthUAYCmhBX9f+KwlaCgIuWyr/4WlUQUBfKfZog==",
+ "dev": true
+ },
"anymatch": {
"version": "2.0.0",
"resolved": "http://registry.npm.taobao.org/anymatch/download/anymatch-2.0.0.tgz",
@@ -2437,6 +2551,12 @@
}
}
},
+ "clean-stack": {
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
+ "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
+ "dev": true
+ },
"cli-cursor": {
"version": "2.1.0",
"resolved": "http://registry.npm.taobao.org/cli-cursor/download/cli-cursor-2.1.0.tgz",
@@ -2452,6 +2572,53 @@
"integrity": "sha1-ACwZkJEtDVlYDJO9NsBW3pnkJZo=",
"dev": true
},
+ "cli-truncate": {
+ "version": "0.2.1",
+ "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-0.2.1.tgz",
+ "integrity": "sha1-nxXPuwcFAFNpIWxiasfQWrkN1XQ=",
+ "dev": true,
+ "requires": {
+ "slice-ansi": "0.0.4",
+ "string-width": "^1.0.1"
+ },
+ "dependencies": {
+ "ansi-regex": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+ "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+ "dev": true
+ },
+ "is-fullwidth-code-point": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+ "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+ "dev": true,
+ "requires": {
+ "number-is-nan": "^1.0.0"
+ }
+ },
+ "string-width": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+ "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+ "dev": true,
+ "requires": {
+ "code-point-at": "^1.0.0",
+ "is-fullwidth-code-point": "^1.0.0",
+ "strip-ansi": "^3.0.0"
+ }
+ },
+ "strip-ansi": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+ "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+ "dev": true,
+ "requires": {
+ "ansi-regex": "^2.0.0"
+ }
+ }
+ }
+ },
"clipboardy": {
"version": "1.2.3",
"resolved": "http://registry.npm.taobao.org/clipboardy/download/clipboardy-1.2.3.tgz",
@@ -3622,6 +3789,12 @@
"assert-plus": "^1.0.0"
}
},
+ "date-fns": {
+ "version": "1.30.1",
+ "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
+ "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==",
+ "dev": true
+ },
"date-now": {
"version": "0.1.4",
"resolved": "http://registry.npm.taobao.org/date-now/download/date-now-0.1.4.tgz",
@@ -3663,6 +3836,12 @@
"integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
"dev": true
},
+ "dedent": {
+ "version": "0.7.0",
+ "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
+ "integrity": "sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=",
+ "dev": true
+ },
"deep-equal": {
"version": "1.0.1",
"resolved": "http://registry.npm.taobao.org/deep-equal/download/deep-equal-1.0.1.tgz",
@@ -4003,6 +4182,12 @@
"integrity": "sha1-scz2Gd9yla6he8aVHcaJYyYp5Kk=",
"dev": true
},
+ "elegant-spinner": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/elegant-spinner/-/elegant-spinner-1.0.1.tgz",
+ "integrity": "sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4=",
+ "dev": true
+ },
"elliptic": {
"version": "6.4.1",
"resolved": "http://registry.npm.taobao.org/elliptic/download/elliptic-6.4.1.tgz",
@@ -4450,6 +4635,15 @@
"integrity": "sha1-kXKMWllC7O2FMSg8eUQe5BIsNak=",
"dev": true
},
+ "fastq": {
+ "version": "1.6.0",
+ "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.6.0.tgz",
+ "integrity": "sha512-jmxqQ3Z/nXoeyDmWAzF9kH1aGZSis6e/SbfPmJpUnyZ0ogr6iscHQaml4wsEepEWSdtmpy+eVXmCRIMpxaXqOA==",
+ "dev": true,
+ "requires": {
+ "reusify": "^1.0.0"
+ }
+ },
"faye-websocket": {
"version": "0.10.0",
"resolved": "http://registry.npm.taobao.org/faye-websocket/download/faye-websocket-0.10.0.tgz",
@@ -4465,6 +4659,16 @@
"integrity": "sha1-hiRwESkBxyeg5JWoB0S9W6odZ5A=",
"dev": true
},
+ "figures": {
+ "version": "1.7.0",
+ "resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz",
+ "integrity": "sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=",
+ "dev": true,
+ "requires": {
+ "escape-string-regexp": "^1.0.5",
+ "object-assign": "^4.1.0"
+ }
+ },
"file-loader": {
"version": "3.0.1",
"resolved": "http://registry.npm.taobao.org/file-loader/download/file-loader-3.0.1.tgz",
@@ -4723,7 +4927,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"aproba": {
"version": "1.2.0",
@@ -5138,7 +5343,8 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -5194,6 +5400,7 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@@ -5237,12 +5444,14 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
}
}
},
@@ -5332,6 +5541,12 @@
"integrity": "sha1-+Xj6TJDR3+f/LWvtoqUV5xO9z0o=",
"dev": true
},
+ "get-own-enumerable-property-symbols": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
+ "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==",
+ "dev": true
+ },
"get-stdin": {
"version": "4.0.1",
"resolved": "http://registry.npm.taobao.org/get-stdin/download/get-stdin-4.0.1.tgz",
@@ -5813,6 +6028,185 @@
"integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
"dev": true
},
+ "husky": {
+ "version": "4.0.9",
+ "resolved": "https://registry.npmjs.org/husky/-/husky-4.0.9.tgz",
+ "integrity": "sha512-zaH0INH9MZBH8smr6nPdzv7pjchOZPN/AKdhkuV4zut9SyF0+pUy1ZCBzhz2uPe7Cp75YzD92ewU2ytIZ0GjUQ==",
+ "dev": true,
+ "requires": {
+ "chalk": "^3.0.0",
+ "ci-info": "^2.0.0",
+ "cosmiconfig": "^6.0.0",
+ "opencollective-postinstall": "^2.0.2",
+ "pkg-dir": "^4.2.0",
+ "please-upgrade-node": "^3.2.0",
+ "slash": "^3.0.0",
+ "which-pm-runs": "^1.0.0"
+ },
+ "dependencies": {
+ "ansi-styles": {
+ "version": "4.2.1",
+ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+ "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+ "dev": true,
+ "requires": {
+ "@types/color-name": "^1.1.1",
+ "color-convert": "^2.0.1"
+ }
+ },
+ "chalk": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+ "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+ "dev": true,
+ "requires": {
+ "ansi-styles": "^4.1.0",
+ "supports-color": "^7.1.0"
+ }
+ },
+ "ci-info": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
+ "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
+ "dev": true
+ },
+ "color-convert": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+ "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+ "dev": true,
+ "requires": {
+ "color-name": "~1.1.4"
+ }
+ },
+ "color-name": {
+ "version": "1.1.4",
+ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+ "dev": true
+ },
+ "cosmiconfig": {
+ "version": "6.0.0",
+ "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+ "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+ "dev": true,
+ "requires": {
+ "@types/parse-json": "^4.0.0",
+ "import-fresh": "^3.1.0",
+ "parse-json": "^5.0.0",
+ "path-type": "^4.0.0",
+ "yaml": "^1.7.2"
+ }
+ },
+ "find-up": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+ "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+ "dev": true,
+ "requires": {
+ "locate-path": "^5.0.0",
+ "path-exists": "^4.0.0"
+ }
+ },
+ "has-flag": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+ "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+ "dev": true
+ },
+ "import-fresh": {
+ "version": "3.2.1",
+ "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
+ "integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==",
+ "dev": true,
+ "requires": {
+ "parent-module": "^1.0.0",
+ "resolve-from": "^4.0.0"
+ }
+ },
+ "locate-path": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+ "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+ "dev": true,
+ "requires": {
+ "p-locate": "^4.1.0"
+ }
+ },
+ "p-limit": {
+ "version": "2.2.2",
+ "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.2.tgz",
+ "integrity": "sha512-WGR+xHecKTr7EbUEhyLSh5Dube9JtdiG78ufaeLxTgpudf/20KqyMioIUZJAezlTIi6evxuoUs9YXc11cU+yzQ==",
+ "dev": true,
+ "requires": {
+ "p-try": "^2.0.0"
+ }
+ },
+ "p-locate": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+ "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+ "dev": true,
+ "requires": {
+ "p-limit": "^2.2.0"
+ }
+ },
+ "parse-json": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz",
+ "integrity": "sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==",
+ "dev": true,
+ "requires": {
+ "@babel/code-frame": "^7.0.0",
+ "error-ex": "^1.3.1",
+ "json-parse-better-errors": "^1.0.1",
+ "lines-and-columns": "^1.1.6"
+ }
+ },
+ "path-exists": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+ "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+ "dev": true
+ },
+ "path-type": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+ "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+ "dev": true
+ },
+ "pkg-dir": {
+ "version": "4.2.0",
+ "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+ "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+ "dev": true,
+ "requires": {
+ "find-up": "^4.0.0"
+ }
+ },
+ "resolve-from": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+ "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+ "dev": true
+ },
+ "slash": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+ "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+ "dev": true
+ },
+ "supports-color": {
+ "version": "7.1.0",
+ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+ "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+ "dev": true,
+ "requires": {
+ "has-flag": "^4.0.0"
+ }
+ }
+ }
+ },
"iconv-lite": {
"version": "0.4.23",
"resolved": "http://registry.npm.taobao.org/iconv-lite/download/iconv-lite-0.4.23.tgz",
@@ -6205,6 +6599,15 @@
"integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=",
"dev": true
},
+ "is-observable": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/is-observable/-/is-observable-1.1.0.tgz",
+ "integrity": "sha512-NqCa4Sa2d+u7BWc6CukaObG3Fh+CU9bvixbpcXYhy2VvYS7vVGIdAgnIS5Ks3A/cqk4rebLJ9s8zBstT2aKnIA==",
+ "dev": true,
+ "requires": {
+ "symbol-observable": "^1.1.0"
+ }
+ },
"is-path-cwd": {
"version": "1.0.0",
"resolved": "http://registry.npm.taobao.org/is-path-cwd/download/is-path-cwd-1.0.0.tgz",
@@ -6244,6 +6647,12 @@
"isobject": "^3.0.1"
}
},
+ "is-promise": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz",
+ "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=",
+ "dev": true
+ },
"is-regex": {
"version": "1.0.4",
"resolved": "http://registry.npm.taobao.org/is-regex/download/is-regex-1.0.4.tgz",
@@ -6253,6 +6662,12 @@
"has": "^1.0.1"
}
},
+ "is-regexp": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
+ "integrity": "sha1-/S2INUXEa6xaYz57mgnof6LLUGk=",
+ "dev": true
+ },
"is-resolvable": {
"version": "1.1.0",
"resolved": "http://registry.npm.taobao.org/is-resolvable/download/is-resolvable-1.1.0.tgz",
@@ -6518,6 +6933,492 @@
"invert-kv": "^2.0.0"
}
},
+ "lines-and-columns": {
+ "version": "1.1.6",
+ "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
+ "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
+ "dev": true
+ },
+ "lint-staged": {
+ "version": "9.5.0",
+ "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-9.5.0.tgz",
+ "integrity": "sha512-nawMob9cb/G1J98nb8v3VC/E8rcX1rryUYXVZ69aT9kde6YWX+uvNOEHY5yf2gcWcTJGiD0kqXmCnS3oD75GIA==",
+ "dev": true,
+ "requires": {
+ "chalk": "^2.4.2",
+ "commander": "^2.20.0",
+ "cosmiconfig": "^5.2.1",
+ "debug": "^4.1.1",
+ "dedent": "^0.7.0",
+ "del": "^5.0.0",
+ "execa": "^2.0.3",
+ "listr": "^0.14.3",
+ "log-symbols": "^3.0.0",
+ "micromatch": "^4.0.2",
+ "normalize-path": "^3.0.0",
+ "please-upgrade-node": "^3.1.1",
+ "string-argv": "^0.3.0",
+ "stringify-object": "^3.3.0"
+ },
+ "dependencies": {
+ "@nodelib/fs.stat": {
+ "version": "2.0.3",
+ "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz",
+ "integrity": "sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA==",
+ "dev": true
+ },
+ "array-union": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+ "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+ "dev": true
+ },
+ "braces": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+ "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+ "dev": true,
+ "requires": {
+ "fill-range": "^7.0.1"
+ }
+ },
+ "commander": {
+ "version": "2.20.3",
+ "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+ "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+ "dev": true
+ },
+ "cosmiconfig": {
+ "version": "5.2.1",
+ "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
+ "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
+ "dev": true,
+ "requires": {
+ "import-fresh": "^2.0.0",
+ "is-directory": "^0.3.1",
+ "js-yaml": "^3.13.1",
+ "parse-json": "^4.0.0"
+ }
+ },
+ "cross-spawn": {
+ "version": "7.0.1",
+ "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.1.tgz",
+ "integrity": "sha512-u7v4o84SwFpD32Z8IIcPZ6z1/ie24O6RU3RbtL5Y316l3KuHVPx9ItBgWQ6VlfAFnRnTtMUrsQ9MUUTuEZjogg==",
+ "dev": true,
+ "requires": {
+ "path-key": "^3.1.0",
+ "shebang-command": "^2.0.0",
+ "which": "^2.0.1"
+ }
+ },
+ "del": {
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/del/-/del-5.1.0.tgz",
+ "integrity": "sha512-wH9xOVHnczo9jN2IW68BabcecVPxacIA3g/7z6vhSU/4stOKQzeCRK0yD0A24WiAAUJmmVpWqrERcTxnLo3AnA==",
+ "dev": true,
+ "requires": {
+ "globby": "^10.0.1",
+ "graceful-fs": "^4.2.2",
+ "is-glob": "^4.0.1",
+ "is-path-cwd": "^2.2.0",
+ "is-path-inside": "^3.0.1",
+ "p-map": "^3.0.0",
+ "rimraf": "^3.0.0",
+ "slash": "^3.0.0"
+ }
+ },
+ "dir-glob": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+ "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+ "dev": true,
+ "requires": {
+ "path-type": "^4.0.0"
+ }
+ },
+ "execa": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/execa/-/execa-2.1.0.tgz",
+ "integrity": "sha512-Y/URAVapfbYy2Xp/gb6A0E7iR8xeqOCXsuuaoMn7A5PzrXUK84E1gyiEfq0wQd/GHA6GsoHWwhNq8anb0mleIw==",
+ "dev": true,
+ "requires": {
+ "cross-spawn": "^7.0.0",
+ "get-stream": "^5.0.0",
+ "is-stream": "^2.0.0",
+ "merge-stream": "^2.0.0",
+ "npm-run-path": "^3.0.0",
+ "onetime": "^5.1.0",
+ "p-finally": "^2.0.0",
+ "signal-exit": "^3.0.2",
+ "strip-final-newline": "^2.0.0"
+ }
+ },
+ "fast-glob": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.1.1.tgz",
+ "integrity": "sha512-nTCREpBY8w8r+boyFYAx21iL6faSsQynliPHM4Uf56SbkyohCNxpVPEH9xrF5TXKy+IsjkPUHDKiUkzBVRXn9g==",
+ "dev": true,
+ "requires": {
+ "@nodelib/fs.stat": "^2.0.2",
+ "@nodelib/fs.walk": "^1.2.3",
+ "glob-parent": "^5.1.0",
+ "merge2": "^1.3.0",
+ "micromatch": "^4.0.2"
+ },
+ "dependencies": {
+ "merge2": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.3.0.tgz",
+ "integrity": "sha512-2j4DAdlBOkiSZIsaXk4mTE3sRS02yBHAtfy127xRV3bQUFqXkjHCHLW6Scv7DwNRbIWNHH8zpnz9zMaKXIdvYw==",
+ "dev": true
+ }
+ }
+ },
+ "fill-range": {
+ "version": "7.0.1",
+ "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+ "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+ "dev": true,
+ "requires": {
+ "to-regex-range": "^5.0.1"
+ }
+ },
+ "get-stream": {
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.1.0.tgz",
+ "integrity": "sha512-EXr1FOzrzTfGeL0gQdeFEvOMm2mzMOglyiOXSTpPC+iAjAKftbr3jpCMWynogwYnM+eSj9sHGc6wjIcDvYiygw==",
+ "dev": true,
+ "requires": {
+ "pump": "^3.0.0"
+ }
+ },
+ "glob-parent": {
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.0.tgz",
+ "integrity": "sha512-qjtRgnIVmOfnKUE3NJAQEdk+lKrxfw8t5ke7SXtfMTHcjsBfOfWXCQfdb30zfDoZQ2IRSIiidmjtbHZPZ++Ihw==",
+ "dev": true,
+ "requires": {
+ "is-glob": "^4.0.1"
+ }
+ },
+ "globby": {
+ "version": "10.0.2",
+ "resolved": "https://registry.npmjs.org/globby/-/globby-10.0.2.tgz",
+ "integrity": "sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==",
+ "dev": true,
+ "requires": {
+ "@types/glob": "^7.1.1",
+ "array-union": "^2.1.0",
+ "dir-glob": "^3.0.1",
+ "fast-glob": "^3.0.3",
+ "glob": "^7.1.3",
+ "ignore": "^5.1.1",
+ "merge2": "^1.2.3",
+ "slash": "^3.0.0"
+ }
+ },
+ "graceful-fs": {
+ "version": "4.2.3",
+ "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
+ "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
+ "dev": true
+ },
+ "ignore": {
+ "version": "5.1.4",
+ "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.4.tgz",
+ "integrity": "sha512-MzbUSahkTW1u7JpKKjY7LCARd1fU5W2rLdxlM4kdkayuCwZImjkpluF9CM1aLewYJguPDqewLam18Y6AU69A8A==",
+ "dev": true
+ },
+ "is-glob": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+ "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+ "dev": true,
+ "requires": {
+ "is-extglob": "^2.1.1"
+ }
+ },
+ "is-number": {
+ "version": "7.0.0",
+ "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+ "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+ "dev": true
+ },
+ "is-path-cwd": {
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
+ "integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==",
+ "dev": true
+ },
+ "is-path-inside": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.2.tgz",
+ "integrity": "sha512-/2UGPSgmtqwo1ktx8NDHjuPwZWmHhO+gj0f93EkhLB5RgW9RZevWYYlIkS6zePc6U2WpOdQYIwHe9YC4DWEBVg==",
+ "dev": true
+ },
+ "is-stream": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
+ "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
+ "dev": true
+ },
+ "js-yaml": {
+ "version": "3.13.1",
+ "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
+ "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
+ "dev": true,
+ "requires": {
+ "argparse": "^1.0.7",
+ "esprima": "^4.0.0"
+ }
+ },
+ "log-symbols": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-3.0.0.tgz",
+ "integrity": "sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==",
+ "dev": true,
+ "requires": {
+ "chalk": "^2.4.2"
+ }
+ },
+ "micromatch": {
+ "version": "4.0.2",
+ "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
+ "integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
+ "dev": true,
+ "requires": {
+ "braces": "^3.0.1",
+ "picomatch": "^2.0.5"
+ }
+ },
+ "mimic-fn": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+ "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+ "dev": true
+ },
+ "npm-run-path": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-3.1.0.tgz",
+ "integrity": "sha512-Dbl4A/VfiVGLgQv29URL9xshU8XDY1GeLy+fsaZ1AA8JDSfjvr5P5+pzRbWqRSBxk6/DW7MIh8lTM/PaGnP2kg==",
+ "dev": true,
+ "requires": {
+ "path-key": "^3.0.0"
+ }
+ },
+ "onetime": {
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.0.tgz",
+ "integrity": "sha512-5NcSkPHhwTVFIQN+TUqXoS5+dlElHXdpAWu9I0HP20YOtIi+aZ0Ct82jdlILDxjLEAWwvm+qj1m6aEtsDVmm6Q==",
+ "dev": true,
+ "requires": {
+ "mimic-fn": "^2.1.0"
+ }
+ },
+ "p-finally": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-2.0.1.tgz",
+ "integrity": "sha512-vpm09aKwq6H9phqRQzecoDpD8TmVyGw70qmWlyq5onxY7tqyTTFVvxMykxQSQKILBSFlbXpypIw2T1Ml7+DDtw==",
+ "dev": true
+ },
+ "p-map": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/p-map/-/p-map-3.0.0.tgz",
+ "integrity": "sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==",
+ "dev": true,
+ "requires": {
+ "aggregate-error": "^3.0.0"
+ }
+ },
+ "path-key": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+ "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+ "dev": true
+ },
+ "path-type": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+ "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+ "dev": true
+ },
+ "rimraf": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.0.tgz",
+ "integrity": "sha512-NDGVxTsjqfunkds7CqsOiEnxln4Bo7Nddl3XhS4pXg5OzwkLqJ971ZVAAnB+DDLnF76N+VnDEiBHaVV8I06SUg==",
+ "dev": true,
+ "requires": {
+ "glob": "^7.1.3"
+ }
+ },
+ "shebang-command": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+ "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+ "dev": true,
+ "requires": {
+ "shebang-regex": "^3.0.0"
+ }
+ },
+ "shebang-regex": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+ "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+ "dev": true
+ },
+ "slash": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+ "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+ "dev": true
+ },
+ "to-regex-range": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+ "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+ "dev": true,
+ "requires": {
+ "is-number": "^7.0.0"
+ }
+ },
+ "which": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+ "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+ "dev": true,
+ "requires": {
+ "isexe": "^2.0.0"
+ }
+ }
+ }
+ },
+ "listr": {
+ "version": "0.14.3",
+ "resolved": "https://registry.npmjs.org/listr/-/listr-0.14.3.tgz",
+ "integrity": "sha512-RmAl7su35BFd/xoMamRjpIE4j3v+L28o8CT5YhAXQJm1fD+1l9ngXY8JAQRJ+tFK2i5njvi0iRUKV09vPwA0iA==",
+ "dev": true,
+ "requires": {
+ "@samverschueren/stream-to-observable": "^0.3.0",
+ "is-observable": "^1.1.0",
+ "is-promise": "^2.1.0",
+ "is-stream": "^1.1.0",
+ "listr-silent-renderer": "^1.1.1",
+ "listr-update-renderer": "^0.5.0",
+ "listr-verbose-renderer": "^0.5.0",
+ "p-map": "^2.0.0",
+ "rxjs": "^6.3.3"
+ },
+ "dependencies": {
+ "p-map": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz",
+ "integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==",
+ "dev": true
+ }
+ }
+ },
+ "listr-silent-renderer": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz",
+ "integrity": "sha1-kktaN1cVN3C/Go4/v3S4u/P5JC4=",
+ "dev": true
+ },
+ "listr-update-renderer": {
+ "version": "0.5.0",
+ "resolved": "https://registry.npmjs.org/listr-update-renderer/-/listr-update-renderer-0.5.0.tgz",
+ "integrity": "sha512-tKRsZpKz8GSGqoI/+caPmfrypiaq+OQCbd+CovEC24uk1h952lVj5sC7SqyFUm+OaJ5HN/a1YLt5cit2FMNsFA==",
+ "dev": true,
+ "requires": {
+ "chalk": "^1.1.3",
+ "cli-truncate": "^0.2.1",
+ "elegant-spinner": "^1.0.1",
+ "figures": "^1.7.0",
+ "indent-string": "^3.0.0",
+ "log-symbols": "^1.0.2",
+ "log-update": "^2.3.0",
+ "strip-ansi": "^3.0.1"
+ },
+ "dependencies": {
+ "ansi-regex": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+ "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+ "dev": true
+ },
+ "ansi-styles": {
+ "version": "2.2.1",
+ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+ "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+ "dev": true
+ },
+ "chalk": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+ "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+ "dev": true,
+ "requires": {
+ "ansi-styles": "^2.2.1",
+ "escape-string-regexp": "^1.0.2",
+ "has-ansi": "^2.0.0",
+ "strip-ansi": "^3.0.0",
+ "supports-color": "^2.0.0"
+ }
+ },
+ "indent-string": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz",
+ "integrity": "sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=",
+ "dev": true
+ },
+ "log-symbols": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-1.0.2.tgz",
+ "integrity": "sha1-N2/3tY6jCGoPCfrMdGF+ylAeGhg=",
+ "dev": true,
+ "requires": {
+ "chalk": "^1.0.0"
+ }
+ },
+ "strip-ansi": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+ "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+ "dev": true,
+ "requires": {
+ "ansi-regex": "^2.0.0"
+ }
+ },
+ "supports-color": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+ "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+ "dev": true
+ }
+ }
+ },
+ "listr-verbose-renderer": {
+ "version": "0.5.0",
+ "resolved": "https://registry.npmjs.org/listr-verbose-renderer/-/listr-verbose-renderer-0.5.0.tgz",
+ "integrity": "sha512-04PDPqSlsqIOaaaGZ+41vq5FejI9auqTInicFRndCBgE3bXG8D6W1I+mWhk+1nqbHmyhla/6BUrd5OSiHwKRXw==",
+ "dev": true,
+ "requires": {
+ "chalk": "^2.4.1",
+ "cli-cursor": "^2.1.0",
+ "date-fns": "^1.27.2",
+ "figures": "^2.0.0"
+ },
+ "dependencies": {
+ "figures": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
+ "integrity": "sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=",
+ "dev": true,
+ "requires": {
+ "escape-string-regexp": "^1.0.5"
+ }
+ }
+ }
+ },
"load-json-file": {
"version": "1.1.0",
"resolved": "http://registry.npm.taobao.org/load-json-file/download/load-json-file-1.1.0.tgz",
@@ -6666,6 +7567,44 @@
"chalk": "^2.0.1"
}
},
+ "log-update": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/log-update/-/log-update-2.3.0.tgz",
+ "integrity": "sha1-iDKP19HOeTiykoN0bwsbwSayRwg=",
+ "dev": true,
+ "requires": {
+ "ansi-escapes": "^3.0.0",
+ "cli-cursor": "^2.0.0",
+ "wrap-ansi": "^3.0.1"
+ },
+ "dependencies": {
+ "ansi-regex": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+ "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+ "dev": true
+ },
+ "strip-ansi": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+ "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+ "dev": true,
+ "requires": {
+ "ansi-regex": "^3.0.0"
+ }
+ },
+ "wrap-ansi": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-3.0.1.tgz",
+ "integrity": "sha1-KIoE2H7aXChuBg3+jxNc6NAH+Lo=",
+ "dev": true,
+ "requires": {
+ "string-width": "^2.1.1",
+ "strip-ansi": "^4.0.0"
+ }
+ }
+ }
+ },
"loglevel": {
"version": "1.6.1",
"resolved": "http://registry.npm.taobao.org/loglevel/download/loglevel-1.6.1.tgz",
@@ -6847,6 +7786,12 @@
}
}
},
+ "merge-stream": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+ "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+ "dev": true
+ },
"merge2": {
"version": "1.2.3",
"resolved": "http://registry.npm.taobao.org/merge2/download/merge2-1.2.3.tgz",
@@ -7549,6 +8494,12 @@
"mimic-fn": "^1.0.0"
}
},
+ "opencollective-postinstall": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz",
+ "integrity": "sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw==",
+ "dev": true
+ },
"opener": {
"version": "1.5.1",
"resolved": "http://registry.npm.taobao.org/opener/download/opener-1.5.1.tgz",
@@ -7700,6 +8651,23 @@
"no-case": "^2.2.0"
}
},
+ "parent-module": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+ "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+ "dev": true,
+ "requires": {
+ "callsites": "^3.0.0"
+ },
+ "dependencies": {
+ "callsites": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+ "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+ "dev": true
+ }
+ }
+ },
"parse-asn1": {
"version": "5.1.4",
"resolved": "http://registry.npm.taobao.org/parse-asn1/download/parse-asn1-5.1.4.tgz",
@@ -7812,6 +8780,12 @@
"integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
"dev": true
},
+ "picomatch": {
+ "version": "2.2.1",
+ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.1.tgz",
+ "integrity": "sha512-ISBaA8xQNmwELC7eOjqFKMESB2VIqt4PPDD0nsS95b/9dZXvVKOlz9keMSnoGGKcOHXfTvDD6WMaRoSc9UuhRA==",
+ "dev": true
+ },
"pify": {
"version": "3.0.0",
"resolved": "http://registry.npm.taobao.org/pify/download/pify-3.0.0.tgz",
@@ -7842,6 +8816,15 @@
"find-up": "^3.0.0"
}
},
+ "please-upgrade-node": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
+ "integrity": "sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==",
+ "dev": true,
+ "requires": {
+ "semver-compare": "^1.0.0"
+ }
+ },
"popper.js": {
"version": "1.14.7",
"resolved": "http://registry.npm.taobao.org/popper.js/download/popper.js-1.14.7.tgz",
@@ -8486,9 +9469,9 @@
}
},
"prettier": {
- "version": "1.16.3",
- "resolved": "http://registry.npm.taobao.org/prettier/download/prettier-1.16.3.tgz",
- "integrity": "sha1-jGIWhFO63vcC80tFtu6JlXSmpl0=",
+ "version": "1.19.1",
+ "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
+ "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
"dev": true
},
"pretty-error": {
@@ -9086,6 +10069,12 @@
"integrity": "sha1-uKSCXVvbH8P29Twrwz+BOIaBx7w=",
"dev": true
},
+ "reusify": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+ "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+ "dev": true
+ },
"rgb-regex": {
"version": "1.0.1",
"resolved": "http://registry.npm.taobao.org/rgb-regex/download/rgb-regex-1.0.1.tgz",
@@ -9117,6 +10106,12 @@
"inherits": "^2.0.1"
}
},
+ "run-parallel": {
+ "version": "1.1.9",
+ "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.1.9.tgz",
+ "integrity": "sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q==",
+ "dev": true
+ },
"run-queue": {
"version": "1.0.3",
"resolved": "http://registry.npm.taobao.org/run-queue/download/run-queue-1.0.3.tgz",
@@ -9131,6 +10126,15 @@
"resolved": "http://registry.npm.taobao.org/rw/download/rw-1.3.3.tgz",
"integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q="
},
+ "rxjs": {
+ "version": "6.5.4",
+ "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.4.tgz",
+ "integrity": "sha512-naMQXcgEo3csAEGvw/NydRA0fuS2nDZJiw1YUWFKU7aPPAPGZEsD4Iimit96qwCieH6y614MCLYwdkrWx7z/7Q==",
+ "dev": true,
+ "requires": {
+ "tslib": "^1.9.0"
+ }
+ },
"safe-buffer": {
"version": "5.1.2",
"resolved": "http://registry.npm.taobao.org/safe-buffer/download/safe-buffer-5.1.2.tgz",
@@ -9361,6 +10365,12 @@
"integrity": "sha1-fnQlb7qknHWqfHogXMInmcrIAAQ=",
"dev": true
},
+ "semver-compare": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
+ "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w=",
+ "dev": true
+ },
"send": {
"version": "0.16.2",
"resolved": "http://registry.npm.taobao.org/send/download/send-0.16.2.tgz",
@@ -9581,6 +10591,12 @@
"integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q=",
"dev": true
},
+ "slice-ansi": {
+ "version": "0.0.4",
+ "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-0.0.4.tgz",
+ "integrity": "sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU=",
+ "dev": true
+ },
"snapdragon": {
"version": "0.8.2",
"resolved": "http://registry.npm.taobao.org/snapdragon/download/snapdragon-0.8.2.tgz",
@@ -10008,6 +11024,12 @@
"integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
"dev": true
},
+ "string-argv": {
+ "version": "0.3.1",
+ "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz",
+ "integrity": "sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==",
+ "dev": true
+ },
"string-width": {
"version": "2.1.1",
"resolved": "http://registry.npm.taobao.org/string-width/download/string-width-2.1.1.tgz",
@@ -10066,6 +11088,17 @@
"safe-buffer": "~5.1.0"
}
},
+ "stringify-object": {
+ "version": "3.3.0",
+ "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
+ "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
+ "dev": true,
+ "requires": {
+ "get-own-enumerable-property-symbols": "^3.0.0",
+ "is-obj": "^1.0.1",
+ "is-regexp": "^1.0.0"
+ }
+ },
"strip-ansi": {
"version": "5.0.0",
"resolved": "http://registry.npm.taobao.org/strip-ansi/download/strip-ansi-5.0.0.tgz",
@@ -10090,6 +11123,12 @@
"integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
"dev": true
},
+ "strip-final-newline": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+ "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+ "dev": true
+ },
"strip-indent": {
"version": "2.0.0",
"resolved": "http://registry.npm.taobao.org/strip-indent/download/strip-indent-2.0.0.tgz",
@@ -10397,6 +11436,12 @@
"util.promisify": "~1.0.0"
}
},
+ "symbol-observable": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+ "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==",
+ "dev": true
+ },
"tapable": {
"version": "1.1.1",
"resolved": "http://registry.npm.taobao.org/tapable/download/tapable-1.1.1.tgz",
@@ -11425,6 +12470,12 @@
"integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
"dev": true
},
+ "which-pm-runs": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/which-pm-runs/-/which-pm-runs-1.0.0.tgz",
+ "integrity": "sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=",
+ "dev": true
+ },
"wide-align": {
"version": "1.1.3",
"resolved": "http://registry.npm.taobao.org/wide-align/download/wide-align-1.1.3.tgz",
@@ -11529,6 +12580,32 @@
"integrity": "sha1-tLBJ4xS+VF486AIjbWzSLNkcPek=",
"dev": true
},
+ "yaml": {
+ "version": "1.7.2",
+ "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.7.2.tgz",
+ "integrity": "sha512-qXROVp90sb83XtAoqE8bP9RwAkTTZbugRUTm5YeFCBfNRPEp2YzTeqWiz7m5OORHzEvrA/qcGS8hp/E+MMROYw==",
+ "dev": true,
+ "requires": {
+ "@babel/runtime": "^7.6.3"
+ },
+ "dependencies": {
+ "@babel/runtime": {
+ "version": "7.8.3",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.3.tgz",
+ "integrity": "sha512-fVHx1rzEmwB130VTkLnxR+HmxcTjGzH12LYQcFFoBwakMd3aOMD4OsRN7tGG/UOYE2ektgFrS8uACAoRk1CY0w==",
+ "dev": true,
+ "requires": {
+ "regenerator-runtime": "^0.13.2"
+ }
+ },
+ "regenerator-runtime": {
+ "version": "0.13.3",
+ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+ "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==",
+ "dev": true
+ }
+ }
+ },
"yargs": {
"version": "12.0.2",
"resolved": "http://registry.npm.taobao.org/yargs/download/yargs-12.0.2.tgz",
diff --git a/package.json b/package.json
index 7a405f4..86ef869 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,17 @@
"docker:run": "docker build -t rocketbot . && docker run --name rocketbot -p 8888:80 -d -e SKYWALKING_URL=localhost:1234,127.0.0.1:1235 rocketbot",
"docker:stop": "docker stop rocketbot && docker rm rocketbot"
},
+ "husky": {
+ "hooks": {
+ "pre-commit": "lint-staged"
+ }
+ },
+ "lint-staged": {
+ "*.{ts,vue,js}": [
+ "prettier --write",
+ "git add"
+ ]
+ },
"dependencies": {
"axios": "^0.18.0",
"d3": "^5.9.1",
@@ -32,7 +43,10 @@
"@vue/cli-plugin-babel": "^3.4.1",
"@vue/cli-plugin-typescript": "^3.4.1",
"@vue/cli-service": "^3.4.1",
+ "husky": "^4.0.9",
+ "lint-staged": "^9.5.0",
"node-sass": "^4.11.0",
+ "prettier": "^1.19.1",
"sass-loader": "^7.1.0",
"svg-sprite-loader": "^4.1.3",
"typescript": "^3.0.0",
diff --git a/src/App.vue b/src/App.vue
index ac0e195..0c72b91 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,41 +1,35 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
<router-view></router-view>
</template>
<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+ import { Component, Vue } from 'vue-property-decorator';
-@Component
-export default class App extends Vue {
-}
+ @Component
+ export default class App extends Vue {}
</script>
<style>
-@import './assets/styles/reset.scss';
-@import './assets/styles/lib.scss';
-@import './assets/styles/style.scss';
-@import './assets/styles/grid.scss';
-#app,.container{
- height: 100%;
-}
-#app{
- display: flex;
- flex-direction: column;
- justify-content: space-between;
-}
+ @import './assets/styles/reset.scss';
+ @import './assets/styles/lib.scss';
+ @import './assets/styles/style.scss';
+ @import './assets/styles/grid.scss';
+ #app,
+ .container {
+ height: 100%;
+ }
+ #app {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
</style>
diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts
index 4bfac1c..353c87c 100755
--- a/src/assets/icons/index.ts
+++ b/src/assets/icons/index.ts
@@ -15,6 +15,7 @@
* limitations under the License.
*/
-const requireAll = (requireContext: any) => requireContext.keys().map(requireContext);
+const requireAll = (requireContext: any) =>
+ requireContext.keys().map(requireContext);
const req = require.context('./', true, /\.svg$/);
requireAll(req);
diff --git a/src/assets/lang/en.ts b/src/assets/lang/en.ts
index 96fae7d..7f1a53e 100644
--- a/src/assets/lang/en.ts
+++ b/src/assets/lang/en.ts
@@ -79,7 +79,7 @@
start: 'Start',
spans: 'Spans',
spanInfo: 'Span Info',
- spanType: 'Span Type',
+ spanType: 'Span Type',
time: 'Time',
tags: 'Tags',
logs: 'Logs',
diff --git a/src/assets/styles/grid.scss b/src/assets/styles/grid.scss
index 7a58ed6..e191437 100644
--- a/src/assets/styles/grid.scss
+++ b/src/assets/styles/grid.scss
@@ -406,4 +406,4 @@
.g-lg-space-1 {
margin-left: 8.333%;
}
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/lib.scss b/src/assets/styles/lib.scss
index 8cf895c..8841ccd 100644
--- a/src/assets/styles/lib.scss
+++ b/src/assets/styles/lib.scss
@@ -15,60 +15,169 @@
* limitations under the License.
*/
-.l{float: left}
-.r{float: right}
-.n{font-weight: 400}
-.b{font-weight: 500}
-.long{width: 100%}
-.vm{vertical-align: middle;}
-.vs{vertical-align: sub;}
-.clear:after{display:table; content:''; clear:both}
-.ell{text-overflow:ellipsis; white-space:nowrap; overflow:hidden}
-.tc{text-align: center}
-.tr{text-align: right}
-.cd{cursor: default}
-.cp{cursor: pointer}
-.cm{cursor: move}
-.wba{word-break: break-all;}
-.flex-v{display: flex;flex-direction: column;}
-.flex-h{display: flex;align-items: center;}
-.trans{transition:all .3s;}
-.db{display: block;}
-.dib{display: inline-block;}
-.auto{margin-right: auto;margin-left: auto;}
-.sm{font-size: 12px}
-.green{color:#4caf50}
-.red{color:#E54C17}
-.blue{color:#448dfe}
-.purple{color:#6e40aa}
-.yellow{color:#FBB03B}
-.grey{color: #a7aebb}
-.bg-green{background-color:#4caf50}
-.bg-red{background-color:#E54C17}
-.bg-blue{background-color:#448dfe}
-.bg-purple{background-color:#6e40aa}
-.bg-yellow{background-color:#FBB03B}
-.bg-grey{background-color: #a7aebb}
-.ml-5{margin-left:5px}
-.mr-0{margin-right: 0px}
-.mr-5{margin-right:5px}
-.mr-10{margin-right:10px}
-.mr-15{margin-right: 15px}
-.mr-20{margin-right: 20px}
-.mt-0{margin-top: 0}
-.mt-5{margin-top:5px}
-.mt-10{margin-top:10px}
-.mt-15{margin-top:15px}
-.mb-0{margin-bottom:0px}
-.mb-5{margin-bottom:5px}
-.mb-10{margin-bottom:10px}
-.mb-15{margin-bottom:15px}
-.mb-20{margin-bottom:20px}
-.pt-10{padding-top: 10px}
-.pl-15{padding-left: 15px}
-.link-hover{
- transition: color .3s;
+.l {
+ float: left;
}
-.link-hover:hover{
+.r {
+ float: right;
+}
+.n {
+ font-weight: 400;
+}
+.b {
+ font-weight: 500;
+}
+.long {
+ width: 100%;
+}
+.vm {
+ vertical-align: middle;
+}
+.vs {
+ vertical-align: sub;
+}
+.clear:after {
+ display: table;
+ content: '';
+ clear: both;
+}
+.ell {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+}
+.tc {
+ text-align: center;
+}
+.tr {
+ text-align: right;
+}
+.cd {
+ cursor: default;
+}
+.cp {
+ cursor: pointer;
+}
+.cm {
+ cursor: move;
+}
+.wba {
+ word-break: break-all;
+}
+.flex-v {
+ display: flex;
+ flex-direction: column;
+}
+.flex-h {
+ display: flex;
+ align-items: center;
+}
+.trans {
+ transition: all 0.3s;
+}
+.db {
+ display: block;
+}
+.dib {
+ display: inline-block;
+}
+.auto {
+ margin-right: auto;
+ margin-left: auto;
+}
+.sm {
+ font-size: 12px;
+}
+.green {
+ color: #4caf50;
+}
+.red {
+ color: #e54c17;
+}
+.blue {
+ color: #448dfe;
+}
+.purple {
+ color: #6e40aa;
+}
+.yellow {
+ color: #fbb03b;
+}
+.grey {
+ color: #a7aebb;
+}
+.bg-green {
+ background-color: #4caf50;
+}
+.bg-red {
+ background-color: #e54c17;
+}
+.bg-blue {
+ background-color: #448dfe;
+}
+.bg-purple {
+ background-color: #6e40aa;
+}
+.bg-yellow {
+ background-color: #fbb03b;
+}
+.bg-grey {
+ background-color: #a7aebb;
+}
+.ml-5 {
+ margin-left: 5px;
+}
+.mr-0 {
+ margin-right: 0px;
+}
+.mr-5 {
+ margin-right: 5px;
+}
+.mr-10 {
+ margin-right: 10px;
+}
+.mr-15 {
+ margin-right: 15px;
+}
+.mr-20 {
+ margin-right: 20px;
+}
+.mt-0 {
+ margin-top: 0;
+}
+.mt-5 {
+ margin-top: 5px;
+}
+.mt-10 {
+ margin-top: 10px;
+}
+.mt-15 {
+ margin-top: 15px;
+}
+.mb-0 {
+ margin-bottom: 0px;
+}
+.mb-5 {
+ margin-bottom: 5px;
+}
+.mb-10 {
+ margin-bottom: 10px;
+}
+.mb-15 {
+ margin-bottom: 15px;
+}
+.mb-20 {
+ margin-bottom: 20px;
+}
+.pt-10 {
+ padding-top: 10px;
+}
+.pl-15 {
+ padding-left: 15px;
+}
+.link-hover {
+ transition: color 0.3s;
+}
+.link-hover:hover {
color: #448dfe;
}
diff --git a/src/assets/styles/reset.scss b/src/assets/styles/reset.scss
index 57ff087..96ef249 100644
--- a/src/assets/styles/reset.scss
+++ b/src/assets/styles/reset.scss
@@ -15,49 +15,87 @@
* limitations under the License.
*/
-body{
+body {
margin: 0;
line-height: 1.5;
font-size: 13px;
color: #3d444f;
- font-family: "Lato","Source Han Sans CN", "Microsoft YaHei", sans-serif;
+ font-family: 'Lato', 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
text-rendering: optimizeLegibility;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
-html, body {
+html,
+body {
height: 100%;
}
-div,header,footer,nav,article,section,aside,label,input,textarea,select,button,ul,ol,li,h1,h2,h3,h4,h5,a,img{
+div,
+header,
+footer,
+nav,
+article,
+section,
+aside,
+label,
+input,
+textarea,
+select,
+button,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+a,
+img {
box-sizing: border-box;
}
-input,textarea,select,button {
+input,
+textarea,
+select,
+button {
font-size: 100%;
font-family: inherit;
}
-h1{font-size: 26px;}
-h2{font-size: 24px;}
-h3{font-size: 21px;}
-h4{font-size: 18px;}
-h5{font-size: 14px;}
-h6{font-size:1em;}
-ul,ol{
- margin:0;
- padding-left:0;
- list-style-type:none;
+h1 {
+ font-size: 26px;
}
-a{
- text-decoration:none;
+h2 {
+ font-size: 24px;
+}
+h3 {
+ font-size: 21px;
+}
+h4 {
+ font-size: 18px;
+}
+h5 {
+ font-size: 14px;
+}
+h6 {
+ font-size: 1em;
+}
+ul,
+ol {
+ margin: 0;
+ padding-left: 0;
+ list-style-type: none;
+}
+a {
+ text-decoration: none;
cursor: pointer;
color: inherit;
- -webkit-tap-highlight-color: transparent;
- -webkit-appearance: none;
+ -webkit-tap-highlight-color: transparent;
+ -webkit-appearance: none;
}
-hr{
+hr {
border-width: 0;
border-bottom: 1px solid #e0e0e0;
}
-blockquote{
+blockquote {
margin-left: 0;
margin-right: 0;
padding-left: 1.2em;
@@ -65,57 +103,57 @@
}
code,
-pre{
+pre {
font-family: Consolas, Menlo, Courier, monospace;
}
/*webkit内核*/
.scroll_hide::-webkit-scrollbar {
- width:0px;
- height:0px;
+ width: 0px;
+ height: 0px;
}
-.scroll_hide::-webkit-scrollbar-button {
- background-color:rgba(0,0,0,0);
+.scroll_hide::-webkit-scrollbar-button {
+ background-color: rgba(0, 0, 0, 0);
}
-.scroll_hide::-webkit-scrollbar-track {
- background-color:rgba(0,0,0,0);
+.scroll_hide::-webkit-scrollbar-track {
+ background-color: rgba(0, 0, 0, 0);
}
.scroll_hide::-webkit-scrollbar-track-piece {
- background-color:rgba(0,0,0,0);
+ background-color: rgba(0, 0, 0, 0);
}
-.scroll_hide::-webkit-scrollbar-thumb{
- background-color:rgba(0,0,0,0);
+.scroll_hide::-webkit-scrollbar-thumb {
+ background-color: rgba(0, 0, 0, 0);
}
.scroll_hide::-webkit-scrollbar-corner {
- background-color:rgba(0,0,0,0);
+ background-color: rgba(0, 0, 0, 0);
}
-.scroll_hide::-webkit-scrollbar-resizer {
- background-color:rgba(0,0,0,0);
+.scroll_hide::-webkit-scrollbar-resizer {
+ background-color: rgba(0, 0, 0, 0);
}
/*o内核*/
-.scroll_hide .-o-scrollbar{
- -moz-appearance: none !important;
- background: rgba(0,255,0,0) !important;
+.scroll_hide .-o-scrollbar {
+ -moz-appearance: none !important;
+ background: rgba(0, 255, 0, 0) !important;
}
-.scroll_hide::-o-scrollbar-button {
- background-color:rgba(0,0,0,0);
+.scroll_hide::-o-scrollbar-button {
+ background-color: rgba(0, 0, 0, 0);
}
-.scroll_hide::-o-scrollbar-track {
- background-color:rgba(0,0,0,0);
+.scroll_hide::-o-scrollbar-track {
+ background-color: rgba(0, 0, 0, 0);
}
.scroll_hide::-o-scrollbar-track-piece {
- background-color:rgba(0,0,0,0);
+ background-color: rgba(0, 0, 0, 0);
}
-.scroll_hide::-o-scrollbar-thumb{
- background-color:rgba(0,0,0,0);
+.scroll_hide::-o-scrollbar-thumb {
+ background-color: rgba(0, 0, 0, 0);
}
.scroll_hide::-o-scrollbar-corner {
- background-color:rgba(0,0,0,0);
+ background-color: rgba(0, 0, 0, 0);
}
-.scroll_hide::-o-scrollbar-resizer {
- background-color:rgba(0,0,0,0);
+.scroll_hide::-o-scrollbar-resizer {
+ background-color: rgba(0, 0, 0, 0);
}
/*IE10,IE11,IE12*/
-.scroll_hide{
+.scroll_hide {
-ms-scroll-chaining: chained;
-ms-overflow-style: none;
-ms-content-zooming: zoom;
@@ -125,4 +163,4 @@
-ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
-ms-overflow-style: none;
overflow: auto;
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/style.scss b/src/assets/styles/style.scss
index 6b42c03..b17d68a 100644
--- a/src/assets/styles/style.scss
+++ b/src/assets/styles/style.scss
@@ -14,35 +14,39 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-.fade-enter-active, .fade-leave-active {
- transition: opacity .3s ease;
+.fade-enter-active,
+.fade-leave-active {
+ transition: opacity 0.3s ease;
}
-.fade-enter, .fade-leave-to {
+.fade-enter,
+.fade-leave-to {
opacity: 0;
}
-.d3-tip,.d3-tip-grey {
+.d3-tip,
+.d3-tip-grey {
line-height: 1;
padding: 8px;
color: #eee;
border-radius: 4px;
font-size: 12px;
}
-.d3-tip{
+.d3-tip {
background: #252a2f;
}
-.d3-tip-grey{
+.d3-tip-grey {
background: #252a2fcc;
}
-.d3-tip-grey:after,.d3-tip:after {
+.d3-tip-grey:after,
+.d3-tip:after {
box-sizing: border-box;
display: block;
font-size: 10px;
width: 100%;
line-height: 0.8;
color: #252a2f;
- content: "\25BC";
+ content: '\25BC';
position: absolute;
text-align: center;
}
@@ -51,25 +55,26 @@
color: #252a2fcc;
}
-.d3-tip-grey.n:after,.d3-tip.n:after {
+.d3-tip-grey.n:after,
+.d3-tip.n:after {
margin: -2px 0 0 0;
top: 100%;
left: 0;
}
@keyframes loading {
0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
}
to {
- -webkit-transform: rotate(1turn);
- transform: rotate(1turn);
+ -webkit-transform: rotate(1turn);
+ transform: rotate(1turn);
}
}
.oa {
overflow: hidden;
}
-.oa:hover{
+.oa:hover {
overflow: auto;
-}
\ No newline at end of file
+}
diff --git a/src/components/icon.html b/src/components/icon.html
index d3f99f6..525e323 100644
--- a/src/components/icon.html
+++ b/src/components/icon.html
@@ -13,1851 +13,1913 @@
See the License for the specific language governing permissions and
limitations under the License. -->
-<!doctype html>
+<!DOCTYPE html>
<html>
-
-<head>
+ <head>
<title>IcoMoon - SVG Icons</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
- .icon {
- display: inline-block;
- width: 1em;
- height: 1em;
- stroke-width: 0;
- stroke: currentColor;
- fill: currentColor;
- }
+ .icon {
+ display: inline-block;
+ width: 1em;
+ height: 1em;
+ stroke-width: 0;
+ stroke: currentColor;
+ fill: currentColor;
+ }
- body {
- padding: 0;
- margin: 0;
- font-family: sans-serif;
- font-size: 1em;
- line-height: 1.5;
- color: #555;
- background: #fff;
- }
+ body {
+ padding: 0;
+ margin: 0;
+ font-family: sans-serif;
+ font-size: 1em;
+ line-height: 1.5;
+ color: #555;
+ background: #fff;
+ }
- h1 {
- font-size: 1.5em;
- font-weight: normal;
- box-shadow: 0 1px #ddd, 0 2px #fff, 0 3px #ddd;
- }
+ h1 {
+ font-size: 1.5em;
+ font-weight: normal;
+ box-shadow: 0 1px #ddd, 0 2px #fff, 0 3px #ddd;
+ }
- small {
- font-size: .66666667em;
- }
+ small {
+ font-size: 0.66666667em;
+ }
- a {
- color: #e74c3c;
- text-decoration: none;
- }
+ a {
+ color: #e74c3c;
+ text-decoration: none;
+ }
- a:hover,
- a:focus {
- box-shadow: 0 1px #e74c3c;
- }
+ a:hover,
+ a:focus {
+ box-shadow: 0 1px #e74c3c;
+ }
- .bshadow0,
- input {
- box-shadow: inset 0 -2px #e7e7e7;
- }
+ .bshadow0,
+ input {
+ box-shadow: inset 0 -2px #e7e7e7;
+ }
- input:hover {
- box-shadow: inset 0 -2px #ccc;
- }
+ input:hover {
+ box-shadow: inset 0 -2px #ccc;
+ }
- input,
- fieldset {
- font-size: 1em;
- margin: 0;
- padding: 0;
- border: 0;
- }
+ input,
+ fieldset {
+ font-size: 1em;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ }
- input {
- color: inherit;
- line-height: 1.5;
- height: 1.5em;
- padding: .25em 0;
- }
+ input {
+ color: inherit;
+ line-height: 1.5;
+ height: 1.5em;
+ padding: 0.25em 0;
+ }
- input:focus {
- outline: none;
- box-shadow: inset 0 -2px #449fdb;
- }
+ input:focus {
+ outline: none;
+ box-shadow: inset 0 -2px #449fdb;
+ }
- .glyph {
- font-size: 16px;
- margin-right: 1.5em;
- float: left;
- width: 12em;
- }
+ .glyph {
+ font-size: 16px;
+ margin-right: 1.5em;
+ float: left;
+ width: 12em;
+ }
- svg {
- color: #000;
- }
+ svg {
+ color: #000;
+ }
- .liga {
- width: 80%;
- width: calc(100% - 2.5em);
- }
+ .liga {
+ width: 80%;
+ width: calc(100% - 2.5em);
+ }
- .talign-right {
- text-align: right;
- }
+ .talign-right {
+ text-align: right;
+ }
- .talign-center {
- text-align: center;
- }
+ .talign-center {
+ text-align: center;
+ }
- .bgc1 {
- background: #f1f1f1;
- }
+ .bgc1 {
+ background: #f1f1f1;
+ }
- .fgc0 {
- color: #000;
- }
+ .fgc0 {
+ color: #000;
+ }
- .fgc1 {
- color: #999;
- }
+ .fgc1 {
+ color: #999;
+ }
- p {
- margin-top: 1em;
- margin-bottom: 1em;
- }
+ p {
+ margin-top: 1em;
+ margin-bottom: 1em;
+ }
- .mvm {
- margin-top: .75em;
- margin-bottom: .75em;
- }
+ .mvm {
+ margin-top: 0.75em;
+ margin-bottom: 0.75em;
+ }
- .mtn {
- margin-top: 0;
- }
+ .mtn {
+ margin-top: 0;
+ }
- .mtl,
- .mal {
- margin-top: 1.5em;
- }
+ .mtl,
+ .mal {
+ margin-top: 1.5em;
+ }
- .mbl,
- .mal {
- margin-bottom: 1.5em;
- }
+ .mbl,
+ .mal {
+ margin-bottom: 1.5em;
+ }
- .mal,
- .mhl {
- margin-left: 1.5em;
- margin-right: 1.5em;
- }
+ .mal,
+ .mhl {
+ margin-left: 1.5em;
+ margin-right: 1.5em;
+ }
- .mhmm {
- margin-left: 1em;
- margin-right: 1em;
- }
+ .mhmm {
+ margin-left: 1em;
+ margin-right: 1em;
+ }
- .ptl {
- padding-top: 1.5em;
- }
+ .ptl {
+ padding-top: 1.5em;
+ }
- .pbs,
- .pvs {
- padding-bottom: .25em;
- }
+ .pbs,
+ .pvs {
+ padding-bottom: 0.25em;
+ }
- .pvs,
- .pts {
- padding-top: .25em;
- }
+ .pvs,
+ .pts {
+ padding-top: 0.25em;
+ }
- .unit {
- float: left;
- }
+ .unit {
+ float: left;
+ }
- .unitRight {
- float: right;
- }
+ .unitRight {
+ float: right;
+ }
- .size1of2 {
- width: 50%;
- }
+ .size1of2 {
+ width: 50%;
+ }
- .size1of1 {
- width: 100%;
- }
+ .size1of1 {
+ width: 100%;
+ }
- .clearfix:before,
- .clearfix:after {
- content: " ";
- display: table;
- }
+ .clearfix:before,
+ .clearfix:after {
+ content: ' ';
+ display: table;
+ }
- .clearfix:after {
- clear: both;
- }
+ .clearfix:after {
+ clear: both;
+ }
- .hidden-true {
- display: none;
- }
+ .hidden-true {
+ display: none;
+ }
- .textbox0 {
- width: 3em;
- background: #f1f1f1;
- padding: .25em .5em;
- line-height: 1.5;
- height: 1.5em;
- }
+ .textbox0 {
+ width: 3em;
+ background: #f1f1f1;
+ padding: 0.25em 0.5em;
+ line-height: 1.5;
+ height: 1.5em;
+ }
- .fs0 {
- font-size: 16px;
- }
+ .fs0 {
+ font-size: 16px;
+ }
- .fs1 {
- font-size: 24px;
- }
+ .fs1 {
+ font-size: 24px;
+ }
- .name {
- font-size: 0.5em;
- margin-left: 1em;
- }
+ .name {
+ font-size: 0.5em;
+ margin-left: 1em;
+ }
</style>
-</head>
+ </head>
-<body>
- <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1"
- xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <defs>
- <symbol id="icon-error" viewBox="0 0 24 24">
- <title>error</title>
- <path
- d="M12.984 12.984v-6h-1.969v6h1.969zM12.984 17.016v-2.016h-1.969v2.016h1.969zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z">
- </path>
- </symbol>
- <symbol id="icon-error_outline" viewBox="0 0 24 24">
- <title>error_outline</title>
- <path
- d="M12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93zM11.016 6.984h1.969v6h-1.969v-6zM11.016 15h1.969v2.016h-1.969v-2.016z">
- </path>
- </symbol>
- <symbol id="icon-warningreport_problem" viewBox="0 0 24 24">
- <title>warningreport_problem</title>
- <path
- d="M12.984 14.016v-4.031h-1.969v4.031h1.969zM12.984 18v-2.016h-1.969v2.016h1.969zM0.984 21l11.016-18.984 11.016 18.984h-22.031z">
- </path>
- </symbol>
- <symbol id="icon-notification_important" viewBox="0 0 24 24">
- <title>notification_important</title>
- <path
- d="M12 21.984q-0.844 0-1.43-0.563t-0.586-1.406h4.031q0 0.797-0.609 1.383t-1.406 0.586zM12.984 12v-3.984h-1.969v3.984h1.969zM12.984 15.984v-1.969h-1.969v1.969h1.969zM18 15.984l2.016 2.016v0.984h-16.031v-0.984l2.016-2.016v-4.969q0-2.344 1.195-4.078t3.305-2.25v-0.703q0-0.609 0.422-1.055t1.078-0.445 1.078 0.445 0.422 1.055v0.703q2.109 0.516 3.305 2.25t1.195 4.078v4.969z">
- </path>
- </symbol>
- <symbol id="icon-av_timer" viewBox="0 0 24 24">
- <title>av_timer</title>
- <path
- d="M6 12q0-0.422 0.281-0.703t0.703-0.281 0.727 0.281 0.305 0.703-0.305 0.703-0.727 0.281-0.703-0.281-0.281-0.703zM18 12q0 0.422-0.281 0.703t-0.703 0.281-0.727-0.281-0.305-0.703 0.305-0.703 0.727-0.281 0.703 0.281 0.281 0.703zM11.016 3h0.984q3.75 0 6.375 2.625t2.625 6.375-2.625 6.375-6.375 2.625-6.375-2.625-2.625-6.375q0-4.5 3.609-7.172v-0.047l6.797 6.797-1.406 1.406-5.438-5.391q-1.547 1.922-1.547 4.406 0 2.906 2.039 4.945t4.945 2.039 4.945-2.039 2.039-4.945q0-2.625-1.734-4.594t-4.266-2.344v1.922h-1.969v-3.984zM11.016 17.016q0-0.422 0.281-0.727t0.703-0.305 0.703 0.305 0.281 0.727-0.281 0.703-0.703 0.281-0.703-0.281-0.281-0.703z">
- </path>
- </symbol>
- <symbol id="icon-equalizer" viewBox="0 0 24 24">
- <title>equalizer</title>
- <path
- d="M15.984 9h4.031v11.016h-4.031v-11.016zM3.984 20.016v-8.016h4.031v8.016h-4.031zM9.984 20.016v-16.031h4.031v16.031h-4.031z">
- </path>
- </symbol>
- <symbol id="icon-loopsync" viewBox="0 0 24 24">
- <title>loopsync</title>
- <path
- d="M12 18v-3l3.984 3.984-3.984 4.031v-3q-3.281 0-5.648-2.367t-2.367-5.648q0-2.344 1.266-4.266l1.453 1.453q-0.703 1.266-0.703 2.813 0 2.484 1.758 4.242t4.242 1.758zM12 3.984q3.281 0 5.648 2.367t2.367 5.648q0 2.344-1.266 4.266l-1.453-1.453q0.703-1.266 0.703-2.813 0-2.484-1.758-4.242t-4.242-1.758v3l-3.984-3.984 3.984-4.031v3z">
- </path>
- </symbol>
- <symbol id="icon-library_addqueueadd_to_photos" viewBox="0 0 24 24">
- <title>library_addqueueadd_to_photos</title>
- <path
- d="M18.984 11.016v-2.016h-3.984v-3.984h-2.016v3.984h-3.984v2.016h3.984v3.984h2.016v-3.984h3.984zM20.016 2.016q0.797 0 1.383 0.586t0.586 1.383v12q0 0.797-0.586 1.406t-1.383 0.609h-12q-0.797 0-1.406-0.609t-0.609-1.406v-12q0-0.797 0.609-1.383t1.406-0.586h12zM3.984 6v14.016h14.016v1.969h-14.016q-0.797 0-1.383-0.586t-0.586-1.383v-14.016h1.969z">
- </path>
- </symbol>
- <symbol id="icon-library_books" viewBox="0 0 24 24">
- <title>library_books</title>
- <path
- d="M18.984 6.984v-1.969h-9.984v1.969h9.984zM15 15v-2.016h-6v2.016h6zM18.984 11.016v-2.016h-9.984v2.016h9.984zM20.016 2.016q0.797 0 1.383 0.586t0.586 1.383v12q0 0.797-0.586 1.406t-1.383 0.609h-12q-0.797 0-1.406-0.609t-0.609-1.406v-12q0-0.797 0.609-1.383t1.406-0.586h12zM3.984 6v14.016h14.016v1.969h-14.016q-0.797 0-1.383-0.586t-0.586-1.383v-14.016h1.969z">
- </path>
- </symbol>
- <symbol id="icon-not_interesteddo_not_disturb" viewBox="0 0 24 24">
- <title>not_interesteddo_not_disturb</title>
- <path
- d="M18.328 16.922q1.688-2.109 1.688-4.922 0-3.281-2.367-5.648t-5.648-2.367q-1.125 0-2.578 0.492t-2.344 1.195zM12 20.016q1.125 0 2.578-0.492t2.344-1.195l-11.25-11.25q-1.688 2.109-1.688 4.922 0 3.281 2.367 5.648t5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z">
- </path>
- </symbol>
- <symbol id="icon-playlist_add" viewBox="0 0 24 24">
- <title>playlist_add</title>
- <path
- d="M2.016 15.984v-1.969h7.969v1.969h-7.969zM18 14.016h3.984v1.969h-3.984v4.031h-2.016v-4.031h-3.984v-1.969h3.984v-4.031h2.016v4.031zM14.016 6v2.016h-12v-2.016h12zM14.016 9.984v2.016h-12v-2.016h12z">
- </path>
- </symbol>
- <symbol id="icon-repeat" viewBox="0 0 24 24">
- <title>repeat</title>
- <path
- d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031h-1.969v-6h12v-3l3.984 3.984-3.984 3.984v-3h-10.031z">
- </path>
- </symbol>
- <symbol id="icon-replay" viewBox="0 0 24 24">
- <title>replay</title>
- <path
- d="M12 5.016q3.328 0 5.672 2.344t2.344 5.625q0 3.328-2.367 5.672t-5.648 2.344-5.648-2.344-2.367-5.672h2.016q0 2.484 1.758 4.242t4.242 1.758 4.242-1.758 1.758-4.242-1.758-4.242-4.242-1.758v4.031l-5.016-5.016 5.016-5.016v4.031z">
- </path>
- </symbol>
- <symbol id="icon-slow_motion_video" viewBox="0 0 24 24">
- <title>slow_motion_video</title>
- <path
- d="M21.984 12q0 3.844-2.578 6.703t-6.375 3.234v-2.016q2.953-0.375 4.969-2.648t2.016-5.273-2.016-5.273-4.969-2.648v-2.016q3.797 0.375 6.375 3.234t2.578 6.703zM5.672 19.734l1.406-1.406q1.688 1.313 3.938 1.594v2.016q-1.266-0.141-2.836-0.797t-2.508-1.406zM4.078 12.984q0.234 2.203 1.594 3.891l-1.406 1.453q-1.922-2.391-2.203-5.344h2.016zM5.672 7.078q-1.313 1.734-1.594 3.938h-2.016q0.141-1.266 0.797-2.836t1.406-2.508zM11.016 4.078q-2.25 0.281-3.938 1.594l-1.406-1.406q2.391-1.922 5.344-2.203v2.016zM13.031 9.797l2.953 2.203q-2.953 2.203-6 4.5z">
- </path>
- </symbol>
- <symbol id="icon-import_export" viewBox="0 0 24 24">
- <title>import_export</title>
- <path
- d="M15.984 17.016h3l-3.984 3.984-3.984-3.984h3v-7.031h1.969v7.031zM9 3l3.984 3.984h-3v7.031h-1.969v-7.031h-3z">
- </path>
- </symbol>
- <symbol id="icon-location_onplaceroom" viewBox="0 0 24 24">
- <title>location_onplaceroom</title>
- <path
- d="M12 11.484q1.031 0 1.758-0.727t0.727-1.758-0.727-1.758-1.758-0.727-1.758 0.727-0.727 1.758 0.727 1.758 1.758 0.727zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z">
- </path>
- </symbol>
- <symbol id="icon-vpn_key" viewBox="0 0 24 24">
- <title>vpn_key</title>
- <path
- d="M6.984 14.016q0.797 0 1.406-0.609t0.609-1.406-0.609-1.406-1.406-0.609-1.383 0.609-0.586 1.406 0.586 1.406 1.383 0.609zM12.656 9.984h10.359v4.031h-2.016v3.984h-3.984v-3.984h-4.359q-0.609 1.641-2.273 2.813t-3.398 1.172q-2.484 0-4.242-1.758t-1.758-4.242 1.758-4.242 4.242-1.758q1.734 0 3.398 1.172t2.273 2.813z">
- </path>
- </symbol>
- <symbol id="icon-import_contacts" viewBox="0 0 24 24">
- <title>import_contacts</title>
- <path
- d="M21 18.516v-11.531q-1.547-0.469-3.516-0.469-3.047 0-5.484 1.5v11.484q2.438-1.5 5.484-1.5 1.828 0 3.516 0.516zM17.484 4.5q3.563 0 5.531 1.5v14.578q0 0.188-0.164 0.352t-0.352 0.164q-0.141 0-0.234-0.047-1.922-1.031-4.781-1.031-3.047 0-5.484 1.5-2.016-1.5-5.484-1.5-2.531 0-4.781 1.078-0.047 0-0.117 0.023t-0.117 0.023q-0.188 0-0.352-0.141t-0.164-0.328v-14.672q2.016-1.5 5.531-1.5 3.469 0 5.484 1.5 2.016-1.5 5.484-1.5z">
- </path>
- </symbol>
- <symbol id="icon-mail_outline" viewBox="0 0 24 24">
- <title>mail_outline</title>
- <path
- d="M12 11.016l8.016-5.016h-16.031zM20.016 18v-9.984l-8.016 4.969-8.016-4.969v9.984h16.031zM20.016 3.984q0.797 0 1.383 0.609t0.586 1.406v12q0 0.797-0.586 1.406t-1.383 0.609h-16.031q-0.797 0-1.383-0.609t-0.586-1.406v-12q0-0.797 0.586-1.406t1.383-0.609h16.031z">
- </path>
- </symbol>
- <symbol id="icon-sentiment_satisfied_alt" viewBox="0 0 24 24">
- <title>sentiment_satisfied_alt</title>
- <path
- d="M12 17.484q-1.734 0-3.117-0.961t-1.992-2.508h1.641q1.172 1.969 3.469 1.969t3.469-1.969h1.641q-0.609 1.547-1.992 2.508t-3.117 0.961zM12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93zM8.484 11.016q-0.609 0-1.055-0.445t-0.445-1.055 0.445-1.055 1.055-0.445 1.055 0.445 0.445 1.055-0.445 1.055-1.055 0.445zM15.516 11.016q-0.609 0-1.055-0.445t-0.445-1.055 0.445-1.055 1.055-0.445 1.055 0.445 0.445 1.055-0.445 1.055-1.055 0.445z">
- </path>
- </symbol>
- <symbol id="icon-lightbulb" viewBox="0 0 24 24">
- <title>lightbulb</title>
- <path
- d="M12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 3.516-3 5.719v2.297q0 0.422-0.281 0.703t-0.703 0.281h-6q-0.422 0-0.703-0.281t-0.281-0.703v-2.297q-3-2.063-3-5.719 0-2.906 2.039-4.945t4.945-2.039zM9 21v-0.984h6v0.984q0 0.422-0.281 0.703t-0.703 0.281h-4.031q-0.422 0-0.703-0.281t-0.281-0.703z">
- </path>
- </symbol>
- <symbol id="icon-add" viewBox="0 0 24 24">
- <title>add</title>
- <path d="M18.984 12.984h-6v6h-1.969v-6h-6v-1.969h6v-6h1.969v6h6v1.969z"></path>
- </symbol>
- <symbol id="icon-add_box" viewBox="0 0 24 24">
- <title>add_box</title>
- <path
- d="M17.016 12.984v-1.969h-4.031v-4.031h-1.969v4.031h-4.031v1.969h4.031v4.031h1.969v-4.031h4.031zM18.984 3q0.797 0 1.406 0.609t0.609 1.406v13.969q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.844 0-1.43-0.586t-0.586-1.43v-13.969q0-0.844 0.586-1.43t1.43-0.586h13.969z">
- </path>
- </symbol>
- <symbol id="icon-add_circle" viewBox="0 0 24 24">
- <title>add_circle</title>
- <path
- d="M17.016 12.984v-1.969h-4.031v-4.031h-1.969v4.031h-4.031v1.969h4.031v4.031h1.969v-4.031h4.031zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z">
- </path>
- </symbol>
- <symbol id="icon-add_circle_outlinecontrol_point" viewBox="0 0 24 24">
- <title>add_circle_outlinecontrol_point</title>
- <path
- d="M12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93zM12.984 6.984v4.031h4.031v1.969h-4.031v4.031h-1.969v-4.031h-4.031v-1.969h4.031v-4.031h1.969z">
- </path>
- </symbol>
- <symbol id="icon-backspace" viewBox="0 0 24 24">
- <title>backspace</title>
- <path
- d="M18.984 15.609l-3.563-3.609 3.563-3.609-1.406-1.406-3.563 3.609-3.609-3.609-1.406 1.406 3.609 3.609-3.609 3.609 1.406 1.406 3.609-3.609 3.563 3.609zM21.984 3q0.797 0 1.406 0.609t0.609 1.406v13.969q0 0.797-0.609 1.406t-1.406 0.609h-15q-0.938 0-1.594-0.891l-5.391-8.109 5.391-8.109q0.656-0.891 1.594-0.891h15z">
- </path>
- </symbol>
- <symbol id="icon-clearclose" viewBox="0 0 24 24">
- <title>clearclose</title>
- <path
- d="M18.984 6.422l-5.578 5.578 5.578 5.578-1.406 1.406-5.578-5.578-5.578 5.578-1.406-1.406 5.578-5.578-5.578-5.578 1.406-1.406 5.578 5.578 5.578-5.578z">
- </path>
- </symbol>
- <symbol id="icon-content_copy" viewBox="0 0 24 24">
- <title>content_copy</title>
- <path
- d="M18.984 21v-14.016h-10.969v14.016h10.969zM18.984 5.016q0.797 0 1.406 0.586t0.609 1.383v14.016q0 0.797-0.609 1.406t-1.406 0.609h-10.969q-0.797 0-1.406-0.609t-0.609-1.406v-14.016q0-0.797 0.609-1.383t1.406-0.586h10.969zM15.984 0.984v2.016h-12v14.016h-1.969v-14.016q0-0.797 0.586-1.406t1.383-0.609h12z">
- </path>
- </symbol>
- <symbol id="icon-content_cut" viewBox="0 0 24 24">
- <title>content_cut</title>
- <path
- d="M18.984 3h3v0.984l-6.984 7.031-2.016-2.016zM12 12.516q0.516 0 0.516-0.516t-0.516-0.516-0.516 0.516 0.516 0.516zM6 20.016q0.797 0 1.406-0.586t0.609-1.43-0.609-1.43-1.406-0.586-1.406 0.586-0.609 1.43 0.609 1.43 1.406 0.586zM6 8.016q0.797 0 1.406-0.586t0.609-1.43-0.609-1.43-1.406-0.586-1.406 0.586-0.609 1.43 0.609 1.43 1.406 0.586zM9.656 7.641l12.328 12.375v0.984h-3l-6.984-6.984-2.344 2.344q0.328 0.703 0.328 1.641 0 1.641-1.172 2.813t-2.813 1.172-2.813-1.172-1.172-2.813 1.172-2.813 2.813-1.172q0.938 0 1.641 0.328l2.344-2.344-2.344-2.344q-0.703 0.328-1.641 0.328-1.641 0-2.813-1.172t-1.172-2.813 1.172-2.813 2.813-1.172 2.813 1.172 1.172 2.813q0 0.938-0.328 1.641z">
- </path>
- </symbol>
- <symbol id="icon-content_paste" viewBox="0 0 24 24">
- <title>content_paste</title>
- <path
- d="M18.984 20.016v-16.031h-1.969v3h-10.031v-3h-1.969v16.031h13.969zM12 2.016q-0.422 0-0.703 0.281t-0.281 0.703 0.281 0.703 0.703 0.281 0.703-0.281 0.281-0.703-0.281-0.703-0.703-0.281zM18.984 2.016q0.797 0 1.406 0.586t0.609 1.383v16.031q0 0.797-0.609 1.383t-1.406 0.586h-13.969q-0.797 0-1.406-0.586t-0.609-1.383v-16.031q0-0.797 0.609-1.383t1.406-0.586h4.172q0.328-0.891 1.078-1.453t1.734-0.563 1.734 0.563 1.078 1.453h4.172z">
- </path>
- </symbol>
- <symbol id="icon-createmode_editedit" viewBox="0 0 24 24">
- <title>createmode_editedit</title>
- <path
- d="M20.719 7.031l-1.828 1.828-3.75-3.75 1.828-1.828q0.281-0.281 0.703-0.281t0.703 0.281l2.344 2.344q0.281 0.281 0.281 0.703t-0.281 0.703zM3 17.25l11.063-11.063 3.75 3.75-11.063 11.063h-3.75v-3.75z">
- </path>
- </symbol>
- <symbol id="icon-inbox" viewBox="0 0 24 24">
- <title>inbox</title>
- <path
- d="M18.984 15v-9.984h-14.016v9.984h4.031q0 1.219 0.891 2.109t2.109 0.891 2.109-0.891 0.891-2.109h3.984zM18.984 3q0.844 0 1.43 0.586t0.586 1.43v13.969q0 0.797-0.609 1.406t-1.406 0.609h-14.016q-0.844 0-1.406-0.586t-0.563-1.43v-13.969q0-0.844 0.563-1.43t1.406-0.586h14.016z">
- </path>
- </symbol>
- <symbol id="icon-linkinsert_link" viewBox="0 0 24 24">
- <title>linkinsert_link</title>
- <path
- d="M17.016 6.984q2.063 0 3.516 1.477t1.453 3.539-1.453 3.539-3.516 1.477h-4.031v-1.922h4.031q1.266 0 2.18-0.914t0.914-2.18-0.914-2.18-2.18-0.914h-4.031v-1.922h4.031zM8.016 12.984v-1.969h7.969v1.969h-7.969zM3.891 12q0 1.266 0.914 2.18t2.18 0.914h4.031v1.922h-4.031q-2.063 0-3.516-1.477t-1.453-3.539 1.453-3.539 3.516-1.477h4.031v1.922h-4.031q-1.266 0-2.18 0.914t-0.914 2.18z">
- </path>
- </symbol>
- <symbol id="icon-redo" viewBox="0 0 24 24">
- <title>redo</title>
- <path
- d="M18.422 10.594l3.563-3.609v9h-9l3.656-3.609q-2.25-1.875-5.156-1.875-2.391 0-4.617 1.594t-2.977 3.891l-2.344-0.75q1.031-3.188 3.773-5.203t6.164-2.016q3.984 0 6.938 2.578z">
- </path>
- </symbol>
- <symbol id="icon-remove" viewBox="0 0 24 24">
- <title>remove</title>
- <path d="M18.984 12.984h-13.969v-1.969h13.969v1.969z"></path>
- </symbol>
- <symbol id="icon-remove_circledo_not_disturb_on" viewBox="0 0 24 24">
- <title>remove_circledo_not_disturb_on</title>
- <path
- d="M17.016 12.984v-1.969h-10.031v1.969h10.031zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z">
- </path>
- </symbol>
- <symbol id="icon-remove_circle_outline" viewBox="0 0 24 24">
- <title>remove_circle_outline</title>
- <path
- d="M12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93zM6.984 11.016h10.031v1.969h-10.031v-1.969z">
- </path>
- </symbol>
- <symbol id="icon-reply" viewBox="0 0 24 24">
- <title>reply</title>
- <path
- d="M9.984 9q4.875 0.703 7.523 3.727t3.492 7.289q-3.609-5.109-11.016-5.109v4.078l-6.984-6.984 6.984-6.984v3.984z">
- </path>
- </symbol>
- <symbol id="icon-reply_all" viewBox="0 0 24 24">
- <title>reply_all</title>
- <path
- d="M12.984 9q4.875 0.703 7.523 3.727t3.492 7.289q-3.609-5.109-11.016-5.109v4.078l-6.984-6.984 6.984-6.984v3.984zM6.984 8.016l-3.984 3.984 3.984 3.984v3l-6.984-6.984 6.984-6.984v3z">
- </path>
- </symbol>
- <symbol id="icon-report" viewBox="0 0 24 24">
- <title>report</title>
- <path
- d="M12.984 12.984v-6h-1.969v6h1.969zM12 17.297q0.516 0 0.914-0.398t0.398-0.914-0.398-0.891-0.914-0.375-0.914 0.375-0.398 0.891 0.398 0.914 0.914 0.398zM15.75 3l5.25 5.25v7.5l-5.25 5.25h-7.5l-5.25-5.25v-7.5l5.25-5.25h7.5z">
- </path>
- </symbol>
- <symbol id="icon-save" viewBox="0 0 24 24">
- <title>save</title>
- <path
- d="M15 9v-3.984h-9.984v3.984h9.984zM12 18.984q1.219 0 2.109-0.891t0.891-2.109-0.891-2.109-2.109-0.891-2.109 0.891-0.891 2.109 0.891 2.109 2.109 0.891zM17.016 3l3.984 3.984v12q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.844 0-1.43-0.586t-0.586-1.43v-13.969q0-0.844 0.586-1.43t1.43-0.586h12z">
- </path>
- </symbol>
- <symbol id="icon-link_off" viewBox="0 0 24 24">
- <title>link_off</title>
- <path
- d="M2.016 4.266l1.266-1.266 16.734 16.734-1.266 1.266-4.031-3.984h-1.734v-1.734l-2.25-2.297h-2.719v-1.969h0.703l-2.063-2.063q-1.172 0.141-1.969 1.008t-0.797 2.039q0 1.266 0.914 2.18t2.18 0.914h4.031v1.922h-4.031q-2.063 0-3.516-1.477t-1.453-3.539q0-1.406 0.891-2.766t2.203-1.875zM15.984 11.016v1.969h-0.188l-1.969-1.969h2.156zM17.016 6.984q2.063 0 3.516 1.477t1.453 3.539q0 3.047-2.719 4.453l-1.453-1.453q0.984-0.234 1.641-1.078t0.656-1.922q0-1.266-0.914-2.18t-2.18-0.914h-4.031v-1.922h4.031z">
- </path>
- </symbol>
- <symbol id="icon-save_alt" viewBox="0 0 24 24">
- <title>save_alt</title>
- <path
- d="M12.984 12.656l2.625-2.578 1.406 1.406-5.016 5.016-5.016-5.016 1.406-1.406 2.625 2.578v-9.656h1.969v9.656zM18.984 12h2.016v6.984q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-6.984h2.016v6.984h13.969v-6.984z">
- </path>
- </symbol>
- <symbol id="icon-add_link" viewBox="0 0 24 24">
- <title>add_link</title>
- <path
- d="M18.984 12v3h3v2.016h-3v3h-1.969v-3h-3v-2.016h3v-3h1.969zM3.891 12q0 1.266 0.914 2.18t2.18 0.914h4.031v1.922h-4.031q-2.063 0-3.516-1.477t-1.453-3.539 1.453-3.539 3.516-1.477h4.031v1.922h-4.031q-1.266 0-2.18 0.914t-0.914 2.18zM20.109 12q0-1.266-0.914-2.18t-2.18-0.914h-4.031v-1.922h4.031q2.063 0 3.516 1.477t1.453 3.539h-1.875zM8.016 11.016h7.969v1.969h-7.969v-1.969z">
- </path>
- </symbol>
- <symbol id="icon-access_timequery_builderschedule" viewBox="0 0 24 24">
- <title>access_timequery_builderschedule</title>
- <path
- d="M12.516 6.984v5.25l4.5 2.672-0.75 1.266-5.25-3.188v-6h1.5zM12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z">
- </path>
- </symbol>
- <symbol id="icon-data_usage" viewBox="0 0 24 24">
- <title>data_usage</title>
- <path
- d="M12 18.984q1.359 0 2.953-0.773t2.484-1.852l2.625 1.547q-3 4.078-8.063 4.078-4.125 0-7.055-2.93t-2.93-7.055q0-3.891 2.602-6.727t6.398-3.211v3q-2.531 0.375-4.266 2.344t-1.734 4.594q0 2.906 2.039 4.945t4.945 2.039zM12.984 2.063q3.797 0.375 6.398 3.211t2.602 6.727q0 2.25-0.844 4.078l-2.625-1.547q0.469-1.313 0.469-2.531 0-2.625-1.734-4.594t-4.266-2.344v-3z">
- </path>
- </symbol>
- <symbol id="icon-storage" viewBox="0 0 24 24">
- <title>storage</title>
- <path
- d="M3.984 11.016v1.969h2.016v-1.969h-2.016zM2.016 14.016v-4.031h19.969v4.031h-19.969zM6 6.984v-1.969h-2.016v1.969h2.016zM2.016 3.984h19.969v4.031h-19.969v-4.031zM3.984 17.016v1.969h2.016v-1.969h-2.016zM2.016 20.016v-4.031h19.969v4.031h-19.969z">
- </path>
- </symbol>
- <symbol id="icon-signal_cellular_alt" viewBox="0 0 24 24">
- <title>signal_cellular_alt</title>
- <path d="M11.016 9h3v11.016h-3v-11.016zM5.016 14.016h3v6h-3v-6zM17.016 3.984h3v16.031h-3v-16.031z">
- </path>
- </symbol>
- <symbol id="icon-border_color" viewBox="0 0 24 24">
- <title>border_color</title>
- <path
- d="M0 20.016h24v3.984h-24v-3.984zM20.719 4.031l-1.969 1.969-3.75-3.75 1.969-1.969q0.281-0.281 0.703-0.281t0.703 0.281l2.344 2.344q0.281 0.281 0.281 0.703t-0.281 0.703zM17.766 6.984l-10.031 10.031h-3.75v-3.75l10.031-10.031z">
- </path>
- </symbol>
- <symbol id="icon-format_indent_decrease" viewBox="0 0 24 24">
- <title>format_indent_decrease</title>
- <path
- d="M11.016 12.984v-1.969h9.984v1.969h-9.984zM11.016 9v-2.016h9.984v2.016h-9.984zM3 3h18v2.016h-18v-2.016zM3 21v-2.016h18v2.016h-18zM3 12l3.984-3.984v7.969zM11.016 17.016v-2.016h9.984v2.016h-9.984z">
- </path>
- </symbol>
- <symbol id="icon-format_indent_increase" viewBox="0 0 24 24">
- <title>format_indent_increase</title>
- <path
- d="M11.016 12.984v-1.969h9.984v1.969h-9.984zM11.016 9v-2.016h9.984v2.016h-9.984zM3 3h18v2.016h-18v-2.016zM11.016 17.016v-2.016h9.984v2.016h-9.984zM3 8.016l3.984 3.984-3.984 3.984v-7.969zM3 21v-2.016h18v2.016h-18z">
- </path>
- </symbol>
- <symbol id="icon-insert_chartpollassessment" viewBox="0 0 24 24">
- <title>insert_chartpollassessment</title>
- <path
- d="M17.016 17.016v-4.031h-2.016v4.031h2.016zM12.984 17.016v-10.031h-1.969v10.031h1.969zM9 17.016v-7.031h-2.016v7.031h2.016zM18.984 3q0.797 0 1.406 0.609t0.609 1.406v13.969q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-13.969q0-0.797 0.609-1.406t1.406-0.609h13.969z">
- </path>
- </symbol>
- <symbol id="icon-insert_drive_file" viewBox="0 0 24 24">
- <title>insert_drive_file</title>
- <path
- d="M12.984 9h5.531l-5.531-5.484v5.484zM6 2.016h8.016l6 6v12q0 0.797-0.609 1.383t-1.406 0.586h-12q-0.797 0-1.406-0.586t-0.609-1.383l0.047-16.031q0-0.797 0.586-1.383t1.383-0.586z">
- </path>
- </symbol>
- <symbol id="icon-insert_photoimagephoto" viewBox="0 0 24 24">
- <title>insert_photoimagephoto</title>
- <path
- d="M8.484 13.5l-3.469 4.5h13.969l-4.5-6-3.469 4.5zM21 18.984q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-13.969q0-0.797 0.609-1.406t1.406-0.609h13.969q0.797 0 1.406 0.609t0.609 1.406v13.969z">
- </path>
- </symbol>
- <symbol id="icon-publish" viewBox="0 0 24 24">
- <title>publish</title>
- <path
- d="M5.016 14.016l6.984-7.031 6.984 7.031h-3.984v6h-6v-6h-3.984zM5.016 3.984h13.969v2.016h-13.969v-2.016z">
- </path>
- </symbol>
- <symbol id="icon-linear_scale" viewBox="0 0 24 24">
- <title>linear_scale</title>
- <path
- d="M19.5 9.516q1.031 0 1.758 0.727t0.727 1.758-0.727 1.758-1.758 0.727q-1.688 0-2.297-1.5h-2.906q-0.609 1.5-2.297 1.5t-2.297-1.5h-2.906q-0.609 1.5-2.297 1.5-1.031 0-1.758-0.727t-0.727-1.758 0.727-1.758 1.758-0.727q1.688 0 2.297 1.5h2.906q0.609-1.5 2.297-1.5t2.297 1.5h2.906q0.609-1.5 2.297-1.5z">
- </path>
- </symbol>
- <symbol id="icon-scatter_plot" viewBox="0 0 24 24">
- <title>scatter_plot</title>
- <path
- d="M13.594 17.578q0-1.219 0.891-2.109t2.109-0.891 2.109 0.891 0.891 2.109-0.891 2.109-2.109 0.891-2.109-0.891-0.891-2.109zM8.016 6q0-1.219 0.891-2.109t2.109-0.891 2.109 0.891 0.891 2.109-0.891 2.109-2.109 0.891-2.109-0.891-0.891-2.109zM3.984 14.016q0-1.219 0.891-2.109t2.109-0.891 2.109 0.891 0.891 2.109-0.891 2.109-2.109 0.891-2.109-0.891-0.891-2.109z">
- </path>
- </symbol>
- <symbol id="icon-bar_chart" viewBox="0 0 24 24">
- <title>bar_chart</title>
- <path
- d="M16.219 12.984h2.766v6h-2.766v-6zM10.594 5.016h2.813v13.969h-2.813v-13.969zM5.016 9.188h3v9.797h-3v-9.797z">
- </path>
- </symbol>
- <symbol id="icon-cloud_queue" viewBox="0 0 24 24">
- <title>cloud_queue</title>
- <path
- d="M18.984 18q1.219 0 2.109-0.891t0.891-2.109-0.891-2.109-2.109-0.891h-1.5v-0.516q0-2.297-1.594-3.891t-3.891-1.594q-1.875 0-3.328 1.125t-1.969 2.859h-0.703q-1.641 0-2.813 1.195t-1.172 2.836 1.172 2.813 2.813 1.172h12.984zM19.359 10.031q1.922 0.141 3.281 1.57t1.359 3.398q0 2.063-1.477 3.539t-3.539 1.477h-12.984q-2.484 0-4.242-1.758t-1.758-4.242q0-2.203 1.57-3.961t3.773-1.992q0.984-1.828 2.766-2.953t3.891-1.125q2.531 0 4.711 1.781t2.648 4.266z">
- </path>
- </symbol>
- <symbol id="icon-file_downloadget_app" viewBox="0 0 24 24">
- <title>file_downloadget_app</title>
- <path d="M5.016 18h13.969v2.016h-13.969v-2.016zM18.984 9l-6.984 6.984-6.984-6.984h3.984v-6h6v6h3.984z">
- </path>
- </symbol>
- <symbol id="icon-file_upload" viewBox="0 0 24 24">
- <title>file_upload</title>
- <path
- d="M5.016 18h13.969v2.016h-13.969v-2.016zM9 15.984v-6h-3.984l6.984-6.984 6.984 6.984h-3.984v6h-6z">
- </path>
- </symbol>
- <symbol id="icon-folder" viewBox="0 0 24 24">
- <title>folder</title>
- <path
- d="M9.984 3.984l2.016 2.016h8.016q0.797 0 1.383 0.609t0.586 1.406v9.984q0 0.797-0.586 1.406t-1.383 0.609h-16.031q-0.797 0-1.383-0.609t-0.586-1.406v-12q0-0.797 0.586-1.406t1.383-0.609h6z">
- </path>
- </symbol>
- <symbol id="icon-folder_open" viewBox="0 0 24 24">
- <title>folder_open</title>
- <path
- d="M20.016 18v-9.984h-16.031v9.984h16.031zM20.016 6q0.797 0 1.383 0.609t0.586 1.406v9.984q0 0.797-0.586 1.406t-1.383 0.609h-16.031q-0.797 0-1.383-0.609t-0.586-1.406v-12q0-0.797 0.586-1.406t1.383-0.609h6l2.016 2.016h8.016z">
- </path>
- </symbol>
- <symbol id="icon-create_new_folder" viewBox="0 0 24 24">
- <title>create_new_folder</title>
- <path
- d="M18.984 14.016v-2.016h-3v-3h-1.969v3h-3v2.016h3v3h1.969v-3h3zM20.016 6q0.844 0 1.406 0.586t0.563 1.43v9.984q0 0.844-0.563 1.43t-1.406 0.586h-16.031q-0.844 0-1.406-0.586t-0.563-1.43v-12q0-0.844 0.563-1.43t1.406-0.586h6l2.016 2.016h8.016z">
- </path>
- </symbol>
- <symbol id="icon-keyboard_arrow_down" viewBox="0 0 24 24">
- <title>keyboard_arrow_down</title>
- <path d="M7.406 8.578l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z"></path>
- </symbol>
- <symbol id="icon-keyboard_arrow_left" viewBox="0 0 24 24">
- <title>keyboard_arrow_left</title>
- <path d="M15.422 16.594l-1.406 1.406-6-6 6-6 1.406 1.406-4.594 4.594z"></path>
- </symbol>
- <symbol id="icon-keyboard_arrow_right" viewBox="0 0 24 24">
- <title>keyboard_arrow_right</title>
- <path d="M8.578 16.594l4.594-4.594-4.594-4.594 1.406-1.406 6 6-6 6z"></path>
- </symbol>
- <symbol id="icon-keyboard_arrow_up" viewBox="0 0 24 24">
- <title>keyboard_arrow_up</title>
- <path d="M7.406 15.422l-1.406-1.406 6-6 6 6-1.406 1.406-4.594-4.594z"></path>
- </symbol>
- <symbol id="icon-keyboard_backspace" viewBox="0 0 24 24">
- <title>keyboard_backspace</title>
- <path d="M21 11.016v1.969h-14.156l3.563 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.563 3.609h14.156z">
- </path>
- </symbol>
- <symbol id="icon-keyboard_return" viewBox="0 0 24 24">
- <title>keyboard_return</title>
- <path
- d="M18.984 6.984h2.016v6h-15.188l3.609 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.609 3.609h13.172v-4.031z">
- </path>
- </symbol>
- <symbol id="icon-keyboard_tab" viewBox="0 0 24 24">
- <title>keyboard_tab</title>
- <path
- d="M20.016 6h1.969v12h-1.969v-12zM11.578 7.406l1.406-1.406 6 6-6 6-1.406-1.406 3.609-3.609h-14.203v-1.969h14.203z">
- </path>
- </symbol>
- <symbol id="icon-device_hub" viewBox="0 0 24 24">
- <title>device_hub</title>
- <path
- d="M17.016 15.984h3.984v5.016h-5.016v-3.047l-3.984-4.219-3.984 4.219v3.047h-5.016v-5.016h3.984l4.031-3.984v-3.188q-0.891-0.328-1.453-1.078t-0.563-1.734q0-1.219 0.891-2.109t2.109-0.891 2.109 0.891 0.891 2.109q0 0.984-0.563 1.734t-1.453 1.078v3.188z">
- </path>
- </symbol>
- <symbol id="icon-arrow_drop_down" viewBox="0 0 24 24">
- <title>arrow_drop_down</title>
- <path d="M6.984 9.984h10.031l-5.016 5.016z"></path>
- </symbol>
- <symbol id="icon-arrow_drop_up" viewBox="0 0 24 24">
- <title>arrow_drop_up</title>
- <path d="M6.984 14.016l5.016-5.016 5.016 5.016h-10.031z"></path>
- </symbol>
- <symbol id="icon-cancel" viewBox="0 0 24 24">
- <title>cancel</title>
- <path
- d="M17.016 15.609l-3.609-3.609 3.609-3.609-1.406-1.406-3.609 3.609-3.609-3.609-1.406 1.406 3.609 3.609-3.609 3.609 1.406 1.406 3.609-3.609 3.609 3.609zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z">
- </path>
- </symbol>
- <symbol id="icon-keyboard_control" viewBox="0 0 24 24">
- <title>keyboard_control</title>
- <path
- d="M12 9.984q0.797 0 1.406 0.609t0.609 1.406-0.609 1.406-1.406 0.609-1.406-0.609-0.609-1.406 0.609-1.406 1.406-0.609zM18 9.984q0.797 0 1.406 0.609t0.609 1.406-0.609 1.406-1.406 0.609-1.406-0.609-0.609-1.406 0.609-1.406 1.406-0.609zM6 9.984q0.797 0 1.406 0.609t0.609 1.406-0.609 1.406-1.406 0.609-1.406-0.609-0.609-1.406 0.609-1.406 1.406-0.609z">
- </path>
- </symbol>
- <symbol id="icon-refresh" viewBox="0 0 24 24">
- <title>refresh</title>
- <path
- d="M17.672 6.328l2.344-2.344v7.031h-7.031l3.234-3.234q-1.781-1.781-4.219-1.781-2.484 0-4.242 1.758t-1.758 4.242 1.758 4.242 4.242 1.758q1.734 0 3.398-1.172t2.273-2.813h2.063q-0.656 2.625-2.813 4.313t-4.922 1.688q-3.281 0-5.625-2.344t-2.344-5.672 2.344-5.672 5.625-2.344q1.406 0 3.070 0.68t2.602 1.664z">
- </path>
- </symbol>
- <symbol id="icon-unfold_more" viewBox="0 0 24 24">
- <title>unfold_more</title>
- <path
- d="M12 18.188l3.188-3.188 1.406 1.406-4.594 4.594-4.594-4.594 1.406-1.406zM12 5.813l-3.188 3.188-1.406-1.406 4.594-4.594 4.594 4.594-1.406 1.406z">
- </path>
- </symbol>
- <symbol id="icon-arrow_left" viewBox="0 0 24 24">
- <title>arrow_left</title>
- <path d="M14.016 6.984v10.031l-5.016-5.016z"></path>
- </symbol>
- <symbol id="icon-arrow_right" viewBox="0 0 24 24">
- <title>arrow_right</title>
- <path d="M9.984 17.016v-10.031l5.016 5.016z"></path>
- </symbol>
- <symbol id="icon-arrow_back_ios" viewBox="0 0 24 24">
- <title>arrow_back_ios</title>
- <path d="M11.672 3.891l-8.109 8.109 8.109 8.109-1.781 1.781-9.891-9.891 9.891-9.891z"></path>
- </symbol>
- <symbol id="icon-arrow_forward_ios" viewBox="0 0 24 24">
- <title>arrow_forward_ios</title>
- <path d="M5.859 4.125l2.156-2.109 9.984 9.984-9.984 9.984-2.156-2.109 7.922-7.875z"></path>
- </symbol>
- <symbol id="icon-notifications" viewBox="0 0 24 24">
- <title>notifications</title>
- <path
- d="M18 15.984l2.016 2.016v0.984h-16.031v-0.984l2.016-2.016v-4.969q0-2.344 1.195-4.078t3.305-2.25v-0.703q0-0.609 0.422-1.055t1.078-0.445 1.078 0.445 0.422 1.055v0.703q2.109 0.516 3.305 2.25t1.195 4.078v4.969zM12 21.984q-0.844 0-1.43-0.563t-0.586-1.406h4.031q0 0.797-0.609 1.383t-1.406 0.586z">
- </path>
- </symbol>
- <symbol id="icon-notifications_none" viewBox="0 0 24 24">
- <title>notifications_none</title>
- <path
- d="M15.984 17.016v-6q0-1.922-1.078-3.211t-2.906-1.289-2.906 1.289-1.078 3.211v6h7.969zM18 15.984l2.016 2.016v0.984h-16.031v-0.984l2.016-2.016v-4.969q0-2.344 1.195-4.078t3.305-2.25v-0.703q0-0.609 0.422-1.055t1.078-0.445 1.078 0.445 0.422 1.055v0.703q2.109 0.516 3.305 2.25t1.195 4.078v4.969zM12 21.984q-0.797 0-1.406-0.586t-0.609-1.383h4.031q0 0.797-0.609 1.383t-1.406 0.586z">
- </path>
- </symbol>
- <symbol id="icon-notifications_off" viewBox="0 0 24 24">
- <title>notifications_off</title>
- <path
- d="M18 14.672l-8.953-9.422q0.141-0.047 0.375-0.164l0.328-0.164h0.047l0.281-0.141q0.047 0 0.188-0.047t0.234-0.047v-0.703q0-0.609 0.422-1.055t1.078-0.445 1.078 0.445 0.422 1.055v0.703q2.109 0.516 3.305 2.25t1.195 4.078v3.656zM12 21.984q-0.844 0-1.43-0.563t-0.586-1.406h4.031q0 0.844-0.586 1.406t-1.43 0.563zM7.828 6.141q1.125 1.172 5.883 6.047t7.289 7.547l-1.266 1.266-2.016-2.016h-13.734v-0.984l2.016-2.016v-5.016q0-1.922 0.797-3.422l-2.813-2.766 1.266-1.313z">
- </path>
- </symbol>
- <symbol id="icon-check_box" viewBox="0 0 24 24">
- <title>check_box</title>
- <path
- d="M9.984 17.016l9-9-1.406-1.453-7.594 7.594-3.563-3.563-1.406 1.406zM18.984 3q0.844 0 1.43 0.586t0.586 1.43v13.969q0 0.844-0.586 1.43t-1.43 0.586h-13.969q-0.844 0-1.43-0.586t-0.586-1.43v-13.969q0-0.844 0.586-1.43t1.43-0.586h13.969z">
- </path>
- </symbol>
- <symbol id="icon-check_box_outline_blank" viewBox="0 0 24 24">
- <title>check_box_outline_blank</title>
- <path
- d="M18.984 3q0.797 0 1.406 0.609t0.609 1.406v13.969q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-13.969q0-0.797 0.609-1.406t1.406-0.609h13.969zM18.984 5.016h-13.969v13.969h13.969v-13.969z">
- </path>
- </symbol>
- <symbol id="icon-assignment" viewBox="0 0 24 24">
- <title>assignment</title>
- <path
- d="M17.016 9v-2.016h-10.031v2.016h10.031zM17.016 12.984v-1.969h-10.031v1.969h10.031zM14.016 17.016v-2.016h-7.031v2.016h7.031zM12 3q-0.422 0-0.703 0.281t-0.281 0.703 0.281 0.727 0.703 0.305 0.703-0.305 0.281-0.727-0.281-0.703-0.703-0.281zM18.984 3q0.797 0 1.406 0.609t0.609 1.406v13.969q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-13.969q0-0.797 0.609-1.406t1.406-0.609h4.172q0.328-0.891 1.078-1.453t1.734-0.563 1.734 0.563 1.078 1.453h4.172z">
- </path>
- </symbol>
- <symbol id="icon-cached" viewBox="0 0 24 24">
- <title>cached</title>
- <path
- d="M6 12h3l-3.984 3.984-4.031-3.984h3q0-3.281 2.367-5.648t5.648-2.367q2.344 0 4.266 1.266l-1.453 1.453q-1.266-0.703-2.813-0.703-2.484 0-4.242 1.758t-1.758 4.242zM18.984 8.016l4.031 3.984h-3q0 3.281-2.367 5.648t-5.648 2.367q-2.344 0-4.266-1.266l1.453-1.453q1.313 0.703 2.813 0.703 2.484 0 4.242-1.758t1.758-4.242h-3z">
- </path>
- </symbol>
- <symbol id="icon-code" viewBox="0 0 24 24">
- <title>code</title>
- <path
- d="M14.578 16.594l4.641-4.594-4.641-4.594 1.406-1.406 6 6-6 6zM9.422 16.594l-1.406 1.406-6-6 6-6 1.406 1.406-4.641 4.594z">
- </path>
- </symbol>
- <symbol id="icon-description" viewBox="0 0 24 24">
- <title>description</title>
- <path
- d="M12.984 9h5.531l-5.531-5.484v5.484zM15.984 14.016v-2.016h-7.969v2.016h7.969zM15.984 18v-2.016h-7.969v2.016h7.969zM14.016 2.016l6 6v12q0 0.797-0.609 1.383t-1.406 0.586h-12q-0.797 0-1.406-0.586t-0.609-1.383l0.047-16.031q0-0.797 0.586-1.383t1.383-0.586h8.016z">
- </path>
- </symbol>
- <symbol id="icon-dns" viewBox="0 0 24 24">
- <title>dns</title>
- <path
- d="M6.984 9q0.797 0 1.406-0.609t0.609-1.406-0.609-1.383-1.406-0.586-1.383 0.586-0.586 1.383 0.586 1.406 1.383 0.609zM20.016 3q0.422 0 0.703 0.281t0.281 0.703v6q0 0.422-0.281 0.727t-0.703 0.305h-16.031q-0.422 0-0.703-0.305t-0.281-0.727v-6q0-0.422 0.281-0.703t0.703-0.281h16.031zM6.984 18.984q0.797 0 1.406-0.586t0.609-1.383-0.609-1.406-1.406-0.609-1.383 0.609-0.586 1.406 0.586 1.383 1.383 0.586zM20.016 12.984q0.422 0 0.703 0.305t0.281 0.727v6q0 0.422-0.281 0.703t-0.703 0.281h-16.031q-0.422 0-0.703-0.281t-0.281-0.703v-6q0-0.422 0.281-0.727t0.703-0.305h16.031z">
- </path>
- </symbol>
- <symbol id="icon-help" viewBox="0 0 24 24">
- <title>help</title>
- <path
- d="M15.047 11.25q0.938-0.938 0.938-2.25 0-1.641-1.172-2.813t-2.813-1.172-2.813 1.172-1.172 2.813h1.969q0-0.797 0.609-1.406t1.406-0.609 1.406 0.609 0.609 1.406-0.609 1.406l-1.219 1.266q-1.172 1.266-1.172 2.813v0.516h1.969q0-1.547 1.172-2.813zM12.984 18.984v-1.969h-1.969v1.969h1.969zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z">
- </path>
- </symbol>
- <symbol id="icon-highlight_remove" viewBox="0 0 24 24">
- <title>highlight_remove</title>
- <path
- d="M12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93zM14.578 8.016l1.406 1.406-2.578 2.578 2.578 2.578-1.406 1.406-2.578-2.578-2.578 2.578-1.406-1.406 2.578-2.578-2.578-2.578 1.406-1.406 2.578 2.578z">
- </path>
- </symbol>
- <symbol id="icon-info" viewBox="0 0 24 24">
- <title>info</title>
- <path
- d="M12.984 9v-2.016h-1.969v2.016h1.969zM12.984 17.016v-6h-1.969v6h1.969zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z">
- </path>
- </symbol>
- <symbol id="icon-info_outline" viewBox="0 0 24 24">
- <title>info_outline</title>
- <path
- d="M11.016 9v-2.016h1.969v2.016h-1.969zM12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93zM11.016 17.016v-6h1.969v6h-1.969z">
- </path>
- </symbol>
- <symbol id="icon-language" viewBox="0 0 24 24">
- <title>language</title>
- <path
- d="M16.359 14.016h3.375q0.281-1.313 0.281-2.016t-0.281-2.016h-3.375q0.141 0.984 0.141 2.016t-0.141 2.016zM14.578 19.547q1.172-0.375 2.438-1.43t1.922-2.133h-2.953q-0.469 1.875-1.406 3.563zM14.344 14.016q0.141-0.984 0.141-2.016t-0.141-2.016h-4.688q-0.141 0.984-0.141 2.016t0.141 2.016h4.688zM12 19.969q1.313-1.922 1.922-3.984h-3.844q0.609 2.063 1.922 3.984zM8.016 8.016q0.563-2.016 1.406-3.563-1.172 0.375-2.461 1.43t-1.898 2.133h2.953zM5.063 15.984q0.609 1.078 1.898 2.133t2.461 1.43q-0.938-1.688-1.406-3.563h-2.953zM4.266 14.016h3.375q-0.141-0.984-0.141-2.016t0.141-2.016h-3.375q-0.281 1.313-0.281 2.016t0.281 2.016zM12 4.031q-1.313 1.922-1.922 3.984h3.844q-0.609-2.063-1.922-3.984zM18.938 8.016q-0.656-1.078-1.922-2.133t-2.438-1.43q0.844 1.547 1.406 3.563h2.953zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z">
- </path>
- </symbol>
- <symbol id="icon-lock_open" viewBox="0 0 24 24">
- <title>lock_open</title>
- <path
- d="M18 20.016v-10.031h-12v10.031h12zM18 8.016q0.797 0 1.406 0.586t0.609 1.383v10.031q0 0.797-0.609 1.383t-1.406 0.586h-12q-0.797 0-1.406-0.586t-0.609-1.383v-10.031q0-0.797 0.609-1.383t1.406-0.586h9.094v-2.016q0-1.266-0.914-2.18t-2.18-0.914-2.18 0.914-0.914 2.18h-1.922q0-2.063 1.477-3.539t3.539-1.477 3.539 1.477 1.477 3.539v2.016h0.984zM12 17.016q-0.797 0-1.406-0.609t-0.609-1.406 0.609-1.406 1.406-0.609 1.406 0.609 0.609 1.406-0.609 1.406-1.406 0.609z">
- </path>
- </symbol>
- <symbol id="icon-lock_outline" viewBox="0 0 24 24">
- <title>lock_outline</title>
- <path
- d="M18 20.016v-10.031h-12v10.031h12zM8.906 6v2.016h6.188v-2.016q0-1.266-0.914-2.18t-2.18-0.914-2.18 0.914-0.914 2.18zM18 8.016q0.797 0 1.406 0.586t0.609 1.383v10.031q0 0.797-0.609 1.383t-1.406 0.586h-12q-0.797 0-1.406-0.586t-0.609-1.383v-10.031q0-0.797 0.609-1.383t1.406-0.586h0.984v-2.016q0-2.063 1.477-3.539t3.539-1.477 3.539 1.477 1.477 3.539v2.016h0.984zM12 17.016q-0.797 0-1.406-0.609t-0.609-1.406 0.609-1.406 1.406-0.609 1.406 0.609 0.609 1.406-0.609 1.406-1.406 0.609z">
- </path>
- </symbol>
- <symbol id="icon-search" viewBox="0 0 24 24">
- <title>search</title>
- <path
- d="M9.516 14.016q1.875 0 3.188-1.313t1.313-3.188-1.313-3.188-3.188-1.313-3.188 1.313-1.313 3.188 1.313 3.188 3.188 1.313zM15.516 14.016l4.969 4.969-1.5 1.5-4.969-4.969v-0.797l-0.281-0.281q-1.781 1.547-4.219 1.547-2.719 0-4.617-1.875t-1.898-4.594 1.898-4.617 4.617-1.898 4.594 1.898 1.875 4.617q0 0.984-0.469 2.227t-1.078 1.992l0.281 0.281h0.797z">
- </path>
- </symbol>
- <symbol id="icon-settings" viewBox="0 0 24 24">
- <title>settings</title>
- <path
- d="M12 15.516q1.453 0 2.484-1.031t1.031-2.484-1.031-2.484-2.484-1.031-2.484 1.031-1.031 2.484 1.031 2.484 2.484 1.031zM19.453 12.984l2.109 1.641q0.328 0.234 0.094 0.656l-2.016 3.469q-0.188 0.328-0.609 0.188l-2.484-0.984q-0.984 0.703-1.688 0.984l-0.375 2.625q-0.094 0.422-0.469 0.422h-4.031q-0.375 0-0.469-0.422l-0.375-2.625q-0.891-0.375-1.688-0.984l-2.484 0.984q-0.422 0.141-0.609-0.188l-2.016-3.469q-0.234-0.422 0.094-0.656l2.109-1.641q-0.047-0.328-0.047-0.984t0.047-0.984l-2.109-1.641q-0.328-0.234-0.094-0.656l2.016-3.469q0.188-0.328 0.609-0.188l2.484 0.984q0.984-0.703 1.688-0.984l0.375-2.625q0.094-0.422 0.469-0.422h4.031q0.375 0 0.469 0.422l0.375 2.625q0.891 0.375 1.688 0.984l2.484-0.984q0.422-0.141 0.609 0.188l2.016 3.469q0.234 0.422-0.094 0.656l-2.109 1.641q0.047 0.328 0.047 0.984t-0.047 0.984z">
- </path>
- </symbol>
- <symbol id="icon-settings_ethernet" viewBox="0 0 24 24">
- <title>settings_ethernet</title>
- <path
- d="M17.766 5.484l5.438 6.516-5.438 6.516-1.547-1.266 4.359-5.25-4.359-5.25zM11.016 12.984v-1.969h1.969v1.969h-1.969zM17.016 11.016v1.969h-2.016v-1.969h2.016zM6.984 12.984v-1.969h2.016v1.969h-2.016zM7.781 6.75l-4.359 5.25 4.359 5.25-1.547 1.266-5.438-6.516 5.438-6.516z">
- </path>
- </symbol>
- <symbol id="icon-donut_small" viewBox="0 0 24 24">
- <title>donut_small</title>
- <path
- d="M12.984 14.859q1.266-0.375 1.875-1.875h7.125q-0.375 3.609-2.836 6.141t-6.164 2.859v-7.125zM14.859 11.016q-0.563-1.5-1.875-1.875v-7.125q3.703 0.328 6.164 2.859t2.836 6.141h-7.125zM11.016 9.141q-0.797 0.328-1.406 1.125t-0.609 1.734 0.609 1.734 1.406 1.125v7.125q-3.797-0.375-6.398-3.234t-2.602-6.75 2.602-6.75 6.398-3.234v7.125z">
- </path>
- </symbol>
- <symbol id="icon-timeline" viewBox="0 0 24 24">
- <title>timeline</title>
- <path
- d="M23.016 8.016q0 0.797-0.609 1.383t-1.406 0.586h-0.047q-0.328 0-0.469-0.047l-3.563 3.563q0.094 0.281 0.094 0.516 0 0.797-0.609 1.383t-1.406 0.586-1.406-0.586-0.609-1.383q0-0.234 0.094-0.516l-2.578-2.578q-0.281 0.094-0.516 0.094t-0.516-0.094l-4.547 4.547q0.094 0.281 0.094 0.516 0 0.797-0.609 1.406t-1.406 0.609-1.406-0.609-0.609-1.406 0.609-1.383 1.406-0.586q0.375 0 0.516 0.047l4.547-4.547q-0.047-0.141-0.047-0.516 0-0.797 0.586-1.406t1.383-0.609 1.406 0.609 0.609 1.406q0 0.375-0.047 0.516l2.531 2.531q0.141-0.047 0.516-0.047t0.516 0.047l3.563-3.516q-0.094-0.281-0.094-0.516 0-0.797 0.609-1.406t1.406-0.609 1.406 0.609 0.609 1.406z">
- </path>
- </symbol>
- <symbol id="icon-account_tree" viewBox="0 0 24 24">
- <title>account_tree</title>
- <path
- d="M21.984 11.016h-6.984v-3h-2.016v7.969h2.016v-3h6.984v8.016h-6.984v-3h-3.984v-9.984h-2.016v3h-6.984v-8.016h6.984v3h6v-3h6.984v8.016z">
- </path>
- </symbol>
- <symbol id="icon-all_inbox" viewBox="0 0 24 24">
- <title>all_inbox</title>
- <path
- d="M15 15.984h6v3q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-3h6q0 1.219 0.891 2.109t2.109 0.891 2.109-0.891 0.891-2.109zM18.984 9v-3.984h-13.969v3.984h3.984q0 1.219 0.891 2.109t2.109 0.891 2.109-0.891 0.891-2.109h3.984zM18.984 3q0.797 0 1.406 0.609t0.609 1.406v6.984q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-6.984q0-0.797 0.609-1.406t1.406-0.609h13.969z">
- </path>
- </symbol>
- <symbol id="icon-dashboard_customize" viewBox="0 0 24 24">
- <title>dashboard_customize</title>
- <path
- d="M18 12.984v3h3v2.016h-3v3h-2.016v-3h-3v-2.016h3v-3h2.016zM3 12.984h8.016v8.016h-8.016v-8.016zM12.984 3h8.016v8.016h-8.016v-8.016zM3 3h8.016v8.016h-8.016v-8.016z">
- </path>
- </symbol>
- <symbol id="icon-speed" viewBox="0 0 24 24">
- <title>speed</title>
- <path
- d="M12 15.984q-0.797 0-1.406-0.586t-0.609-1.383q0-0.844 0.609-1.453l8.484-5.625-5.672 8.484q-0.563 0.563-1.406 0.563zM20.391 8.578q0.656 1.031 1.125 2.625t0.469 2.813q0 2.766-1.313 4.969-0.609 1.031-1.734 1.031h-13.875q-1.125 0-1.734-1.031-1.313-2.203-1.313-4.969 0-4.125 2.93-7.055t7.102-2.93q1.219 0 2.789 0.469t2.602 1.125l-1.875 1.219q-1.688-0.844-3.563-0.844-3.281 0-5.648 2.344t-2.367 5.672q0 2.156 1.078 3.984h13.875q1.078-1.828 1.078-3.984 0-1.922-0.844-3.609z">
- </path>
- </symbol>
- <symbol id="icon-sync_alt" viewBox="0 0 24 24">
- <title>sync_alt</title>
- <path d="M2.016 15.984l3.984-3.984v3h15v2.016h-15v3zM21.984 8.016l-3.984 3.984v-3h-15v-2.016h15v-3z">
- </path>
- </symbol>
- </defs>
+ <body>
+ <svg
+ aria-hidden="true"
+ style="position: absolute; width: 0; height: 0; overflow: hidden;"
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ >
+ <defs>
+ <symbol id="icon-error" viewBox="0 0 24 24">
+ <title>error</title>
+ <path
+ d="M12.984 12.984v-6h-1.969v6h1.969zM12.984 17.016v-2.016h-1.969v2.016h1.969zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"
+ ></path>
+ </symbol>
+ <symbol id="icon-error_outline" viewBox="0 0 24 24">
+ <title>error_outline</title>
+ <path
+ d="M12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93zM11.016 6.984h1.969v6h-1.969v-6zM11.016 15h1.969v2.016h-1.969v-2.016z"
+ ></path>
+ </symbol>
+ <symbol id="icon-warningreport_problem" viewBox="0 0 24 24">
+ <title>warningreport_problem</title>
+ <path
+ d="M12.984 14.016v-4.031h-1.969v4.031h1.969zM12.984 18v-2.016h-1.969v2.016h1.969zM0.984 21l11.016-18.984 11.016 18.984h-22.031z"
+ ></path>
+ </symbol>
+ <symbol id="icon-notification_important" viewBox="0 0 24 24">
+ <title>notification_important</title>
+ <path
+ d="M12 21.984q-0.844 0-1.43-0.563t-0.586-1.406h4.031q0 0.797-0.609 1.383t-1.406 0.586zM12.984 12v-3.984h-1.969v3.984h1.969zM12.984 15.984v-1.969h-1.969v1.969h1.969zM18 15.984l2.016 2.016v0.984h-16.031v-0.984l2.016-2.016v-4.969q0-2.344 1.195-4.078t3.305-2.25v-0.703q0-0.609 0.422-1.055t1.078-0.445 1.078 0.445 0.422 1.055v0.703q2.109 0.516 3.305 2.25t1.195 4.078v4.969z"
+ ></path>
+ </symbol>
+ <symbol id="icon-av_timer" viewBox="0 0 24 24">
+ <title>av_timer</title>
+ <path
+ d="M6 12q0-0.422 0.281-0.703t0.703-0.281 0.727 0.281 0.305 0.703-0.305 0.703-0.727 0.281-0.703-0.281-0.281-0.703zM18 12q0 0.422-0.281 0.703t-0.703 0.281-0.727-0.281-0.305-0.703 0.305-0.703 0.727-0.281 0.703 0.281 0.281 0.703zM11.016 3h0.984q3.75 0 6.375 2.625t2.625 6.375-2.625 6.375-6.375 2.625-6.375-2.625-2.625-6.375q0-4.5 3.609-7.172v-0.047l6.797 6.797-1.406 1.406-5.438-5.391q-1.547 1.922-1.547 4.406 0 2.906 2.039 4.945t4.945 2.039 4.945-2.039 2.039-4.945q0-2.625-1.734-4.594t-4.266-2.344v1.922h-1.969v-3.984zM11.016 17.016q0-0.422 0.281-0.727t0.703-0.305 0.703 0.305 0.281 0.727-0.281 0.703-0.703 0.281-0.703-0.281-0.281-0.703z"
+ ></path>
+ </symbol>
+ <symbol id="icon-equalizer" viewBox="0 0 24 24">
+ <title>equalizer</title>
+ <path
+ d="M15.984 9h4.031v11.016h-4.031v-11.016zM3.984 20.016v-8.016h4.031v8.016h-4.031zM9.984 20.016v-16.031h4.031v16.031h-4.031z"
+ ></path>
+ </symbol>
+ <symbol id="icon-loopsync" viewBox="0 0 24 24">
+ <title>loopsync</title>
+ <path
+ d="M12 18v-3l3.984 3.984-3.984 4.031v-3q-3.281 0-5.648-2.367t-2.367-5.648q0-2.344 1.266-4.266l1.453 1.453q-0.703 1.266-0.703 2.813 0 2.484 1.758 4.242t4.242 1.758zM12 3.984q3.281 0 5.648 2.367t2.367 5.648q0 2.344-1.266 4.266l-1.453-1.453q0.703-1.266 0.703-2.813 0-2.484-1.758-4.242t-4.242-1.758v3l-3.984-3.984 3.984-4.031v3z"
+ ></path>
+ </symbol>
+ <symbol id="icon-library_addqueueadd_to_photos" viewBox="0 0 24 24">
+ <title>library_addqueueadd_to_photos</title>
+ <path
+ d="M18.984 11.016v-2.016h-3.984v-3.984h-2.016v3.984h-3.984v2.016h3.984v3.984h2.016v-3.984h3.984zM20.016 2.016q0.797 0 1.383 0.586t0.586 1.383v12q0 0.797-0.586 1.406t-1.383 0.609h-12q-0.797 0-1.406-0.609t-0.609-1.406v-12q0-0.797 0.609-1.383t1.406-0.586h12zM3.984 6v14.016h14.016v1.969h-14.016q-0.797 0-1.383-0.586t-0.586-1.383v-14.016h1.969z"
+ ></path>
+ </symbol>
+ <symbol id="icon-library_books" viewBox="0 0 24 24">
+ <title>library_books</title>
+ <path
+ d="M18.984 6.984v-1.969h-9.984v1.969h9.984zM15 15v-2.016h-6v2.016h6zM18.984 11.016v-2.016h-9.984v2.016h9.984zM20.016 2.016q0.797 0 1.383 0.586t0.586 1.383v12q0 0.797-0.586 1.406t-1.383 0.609h-12q-0.797 0-1.406-0.609t-0.609-1.406v-12q0-0.797 0.609-1.383t1.406-0.586h12zM3.984 6v14.016h14.016v1.969h-14.016q-0.797 0-1.383-0.586t-0.586-1.383v-14.016h1.969z"
+ ></path>
+ </symbol>
+ <symbol id="icon-not_interesteddo_not_disturb" viewBox="0 0 24 24">
+ <title>not_interesteddo_not_disturb</title>
+ <path
+ d="M18.328 16.922q1.688-2.109 1.688-4.922 0-3.281-2.367-5.648t-5.648-2.367q-1.125 0-2.578 0.492t-2.344 1.195zM12 20.016q1.125 0 2.578-0.492t2.344-1.195l-11.25-11.25q-1.688 2.109-1.688 4.922 0 3.281 2.367 5.648t5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"
+ ></path>
+ </symbol>
+ <symbol id="icon-playlist_add" viewBox="0 0 24 24">
+ <title>playlist_add</title>
+ <path
+ d="M2.016 15.984v-1.969h7.969v1.969h-7.969zM18 14.016h3.984v1.969h-3.984v4.031h-2.016v-4.031h-3.984v-1.969h3.984v-4.031h2.016v4.031zM14.016 6v2.016h-12v-2.016h12zM14.016 9.984v2.016h-12v-2.016h12z"
+ ></path>
+ </symbol>
+ <symbol id="icon-repeat" viewBox="0 0 24 24">
+ <title>repeat</title>
+ <path
+ d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031h-1.969v-6h12v-3l3.984 3.984-3.984 3.984v-3h-10.031z"
+ ></path>
+ </symbol>
+ <symbol id="icon-replay" viewBox="0 0 24 24">
+ <title>replay</title>
+ <path
+ d="M12 5.016q3.328 0 5.672 2.344t2.344 5.625q0 3.328-2.367 5.672t-5.648 2.344-5.648-2.344-2.367-5.672h2.016q0 2.484 1.758 4.242t4.242 1.758 4.242-1.758 1.758-4.242-1.758-4.242-4.242-1.758v4.031l-5.016-5.016 5.016-5.016v4.031z"
+ ></path>
+ </symbol>
+ <symbol id="icon-slow_motion_video" viewBox="0 0 24 24">
+ <title>slow_motion_video</title>
+ <path
+ d="M21.984 12q0 3.844-2.578 6.703t-6.375 3.234v-2.016q2.953-0.375 4.969-2.648t2.016-5.273-2.016-5.273-4.969-2.648v-2.016q3.797 0.375 6.375 3.234t2.578 6.703zM5.672 19.734l1.406-1.406q1.688 1.313 3.938 1.594v2.016q-1.266-0.141-2.836-0.797t-2.508-1.406zM4.078 12.984q0.234 2.203 1.594 3.891l-1.406 1.453q-1.922-2.391-2.203-5.344h2.016zM5.672 7.078q-1.313 1.734-1.594 3.938h-2.016q0.141-1.266 0.797-2.836t1.406-2.508zM11.016 4.078q-2.25 0.281-3.938 1.594l-1.406-1.406q2.391-1.922 5.344-2.203v2.016zM13.031 9.797l2.953 2.203q-2.953 2.203-6 4.5z"
+ ></path>
+ </symbol>
+ <symbol id="icon-import_export" viewBox="0 0 24 24">
+ <title>import_export</title>
+ <path
+ d="M15.984 17.016h3l-3.984 3.984-3.984-3.984h3v-7.031h1.969v7.031zM9 3l3.984 3.984h-3v7.031h-1.969v-7.031h-3z"
+ ></path>
+ </symbol>
+ <symbol id="icon-location_onplaceroom" viewBox="0 0 24 24">
+ <title>location_onplaceroom</title>
+ <path
+ d="M12 11.484q1.031 0 1.758-0.727t0.727-1.758-0.727-1.758-1.758-0.727-1.758 0.727-0.727 1.758 0.727 1.758 1.758 0.727zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z"
+ ></path>
+ </symbol>
+ <symbol id="icon-vpn_key" viewBox="0 0 24 24">
+ <title>vpn_key</title>
+ <path
+ d="M6.984 14.016q0.797 0 1.406-0.609t0.609-1.406-0.609-1.406-1.406-0.609-1.383 0.609-0.586 1.406 0.586 1.406 1.383 0.609zM12.656 9.984h10.359v4.031h-2.016v3.984h-3.984v-3.984h-4.359q-0.609 1.641-2.273 2.813t-3.398 1.172q-2.484 0-4.242-1.758t-1.758-4.242 1.758-4.242 4.242-1.758q1.734 0 3.398 1.172t2.273 2.813z"
+ ></path>
+ </symbol>
+ <symbol id="icon-import_contacts" viewBox="0 0 24 24">
+ <title>import_contacts</title>
+ <path
+ d="M21 18.516v-11.531q-1.547-0.469-3.516-0.469-3.047 0-5.484 1.5v11.484q2.438-1.5 5.484-1.5 1.828 0 3.516 0.516zM17.484 4.5q3.563 0 5.531 1.5v14.578q0 0.188-0.164 0.352t-0.352 0.164q-0.141 0-0.234-0.047-1.922-1.031-4.781-1.031-3.047 0-5.484 1.5-2.016-1.5-5.484-1.5-2.531 0-4.781 1.078-0.047 0-0.117 0.023t-0.117 0.023q-0.188 0-0.352-0.141t-0.164-0.328v-14.672q2.016-1.5 5.531-1.5 3.469 0 5.484 1.5 2.016-1.5 5.484-1.5z"
+ ></path>
+ </symbol>
+ <symbol id="icon-mail_outline" viewBox="0 0 24 24">
+ <title>mail_outline</title>
+ <path
+ d="M12 11.016l8.016-5.016h-16.031zM20.016 18v-9.984l-8.016 4.969-8.016-4.969v9.984h16.031zM20.016 3.984q0.797 0 1.383 0.609t0.586 1.406v12q0 0.797-0.586 1.406t-1.383 0.609h-16.031q-0.797 0-1.383-0.609t-0.586-1.406v-12q0-0.797 0.586-1.406t1.383-0.609h16.031z"
+ ></path>
+ </symbol>
+ <symbol id="icon-sentiment_satisfied_alt" viewBox="0 0 24 24">
+ <title>sentiment_satisfied_alt</title>
+ <path
+ d="M12 17.484q-1.734 0-3.117-0.961t-1.992-2.508h1.641q1.172 1.969 3.469 1.969t3.469-1.969h1.641q-0.609 1.547-1.992 2.508t-3.117 0.961zM12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93zM8.484 11.016q-0.609 0-1.055-0.445t-0.445-1.055 0.445-1.055 1.055-0.445 1.055 0.445 0.445 1.055-0.445 1.055-1.055 0.445zM15.516 11.016q-0.609 0-1.055-0.445t-0.445-1.055 0.445-1.055 1.055-0.445 1.055 0.445 0.445 1.055-0.445 1.055-1.055 0.445z"
+ ></path>
+ </symbol>
+ <symbol id="icon-lightbulb" viewBox="0 0 24 24">
+ <title>lightbulb</title>
+ <path
+ d="M12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 3.516-3 5.719v2.297q0 0.422-0.281 0.703t-0.703 0.281h-6q-0.422 0-0.703-0.281t-0.281-0.703v-2.297q-3-2.063-3-5.719 0-2.906 2.039-4.945t4.945-2.039zM9 21v-0.984h6v0.984q0 0.422-0.281 0.703t-0.703 0.281h-4.031q-0.422 0-0.703-0.281t-0.281-0.703z"
+ ></path>
+ </symbol>
+ <symbol id="icon-add" viewBox="0 0 24 24">
+ <title>add</title>
+ <path
+ d="M18.984 12.984h-6v6h-1.969v-6h-6v-1.969h6v-6h1.969v6h6v1.969z"
+ ></path>
+ </symbol>
+ <symbol id="icon-add_box" viewBox="0 0 24 24">
+ <title>add_box</title>
+ <path
+ d="M17.016 12.984v-1.969h-4.031v-4.031h-1.969v4.031h-4.031v1.969h4.031v4.031h1.969v-4.031h4.031zM18.984 3q0.797 0 1.406 0.609t0.609 1.406v13.969q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.844 0-1.43-0.586t-0.586-1.43v-13.969q0-0.844 0.586-1.43t1.43-0.586h13.969z"
+ ></path>
+ </symbol>
+ <symbol id="icon-add_circle" viewBox="0 0 24 24">
+ <title>add_circle</title>
+ <path
+ d="M17.016 12.984v-1.969h-4.031v-4.031h-1.969v4.031h-4.031v1.969h4.031v4.031h1.969v-4.031h4.031zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"
+ ></path>
+ </symbol>
+ <symbol id="icon-add_circle_outlinecontrol_point" viewBox="0 0 24 24">
+ <title>add_circle_outlinecontrol_point</title>
+ <path
+ d="M12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93zM12.984 6.984v4.031h4.031v1.969h-4.031v4.031h-1.969v-4.031h-4.031v-1.969h4.031v-4.031h1.969z"
+ ></path>
+ </symbol>
+ <symbol id="icon-backspace" viewBox="0 0 24 24">
+ <title>backspace</title>
+ <path
+ d="M18.984 15.609l-3.563-3.609 3.563-3.609-1.406-1.406-3.563 3.609-3.609-3.609-1.406 1.406 3.609 3.609-3.609 3.609 1.406 1.406 3.609-3.609 3.563 3.609zM21.984 3q0.797 0 1.406 0.609t0.609 1.406v13.969q0 0.797-0.609 1.406t-1.406 0.609h-15q-0.938 0-1.594-0.891l-5.391-8.109 5.391-8.109q0.656-0.891 1.594-0.891h15z"
+ ></path>
+ </symbol>
+ <symbol id="icon-clearclose" viewBox="0 0 24 24">
+ <title>clearclose</title>
+ <path
+ d="M18.984 6.422l-5.578 5.578 5.578 5.578-1.406 1.406-5.578-5.578-5.578 5.578-1.406-1.406 5.578-5.578-5.578-5.578 1.406-1.406 5.578 5.578 5.578-5.578z"
+ ></path>
+ </symbol>
+ <symbol id="icon-content_copy" viewBox="0 0 24 24">
+ <title>content_copy</title>
+ <path
+ d="M18.984 21v-14.016h-10.969v14.016h10.969zM18.984 5.016q0.797 0 1.406 0.586t0.609 1.383v14.016q0 0.797-0.609 1.406t-1.406 0.609h-10.969q-0.797 0-1.406-0.609t-0.609-1.406v-14.016q0-0.797 0.609-1.383t1.406-0.586h10.969zM15.984 0.984v2.016h-12v14.016h-1.969v-14.016q0-0.797 0.586-1.406t1.383-0.609h12z"
+ ></path>
+ </symbol>
+ <symbol id="icon-content_cut" viewBox="0 0 24 24">
+ <title>content_cut</title>
+ <path
+ d="M18.984 3h3v0.984l-6.984 7.031-2.016-2.016zM12 12.516q0.516 0 0.516-0.516t-0.516-0.516-0.516 0.516 0.516 0.516zM6 20.016q0.797 0 1.406-0.586t0.609-1.43-0.609-1.43-1.406-0.586-1.406 0.586-0.609 1.43 0.609 1.43 1.406 0.586zM6 8.016q0.797 0 1.406-0.586t0.609-1.43-0.609-1.43-1.406-0.586-1.406 0.586-0.609 1.43 0.609 1.43 1.406 0.586zM9.656 7.641l12.328 12.375v0.984h-3l-6.984-6.984-2.344 2.344q0.328 0.703 0.328 1.641 0 1.641-1.172 2.813t-2.813 1.172-2.813-1.172-1.172-2.813 1.172-2.813 2.813-1.172q0.938 0 1.641 0.328l2.344-2.344-2.344-2.344q-0.703 0.328-1.641 0.328-1.641 0-2.813-1.172t-1.172-2.813 1.172-2.813 2.813-1.172 2.813 1.172 1.172 2.813q0 0.938-0.328 1.641z"
+ ></path>
+ </symbol>
+ <symbol id="icon-content_paste" viewBox="0 0 24 24">
+ <title>content_paste</title>
+ <path
+ d="M18.984 20.016v-16.031h-1.969v3h-10.031v-3h-1.969v16.031h13.969zM12 2.016q-0.422 0-0.703 0.281t-0.281 0.703 0.281 0.703 0.703 0.281 0.703-0.281 0.281-0.703-0.281-0.703-0.703-0.281zM18.984 2.016q0.797 0 1.406 0.586t0.609 1.383v16.031q0 0.797-0.609 1.383t-1.406 0.586h-13.969q-0.797 0-1.406-0.586t-0.609-1.383v-16.031q0-0.797 0.609-1.383t1.406-0.586h4.172q0.328-0.891 1.078-1.453t1.734-0.563 1.734 0.563 1.078 1.453h4.172z"
+ ></path>
+ </symbol>
+ <symbol id="icon-createmode_editedit" viewBox="0 0 24 24">
+ <title>createmode_editedit</title>
+ <path
+ d="M20.719 7.031l-1.828 1.828-3.75-3.75 1.828-1.828q0.281-0.281 0.703-0.281t0.703 0.281l2.344 2.344q0.281 0.281 0.281 0.703t-0.281 0.703zM3 17.25l11.063-11.063 3.75 3.75-11.063 11.063h-3.75v-3.75z"
+ ></path>
+ </symbol>
+ <symbol id="icon-inbox" viewBox="0 0 24 24">
+ <title>inbox</title>
+ <path
+ d="M18.984 15v-9.984h-14.016v9.984h4.031q0 1.219 0.891 2.109t2.109 0.891 2.109-0.891 0.891-2.109h3.984zM18.984 3q0.844 0 1.43 0.586t0.586 1.43v13.969q0 0.797-0.609 1.406t-1.406 0.609h-14.016q-0.844 0-1.406-0.586t-0.563-1.43v-13.969q0-0.844 0.563-1.43t1.406-0.586h14.016z"
+ ></path>
+ </symbol>
+ <symbol id="icon-linkinsert_link" viewBox="0 0 24 24">
+ <title>linkinsert_link</title>
+ <path
+ d="M17.016 6.984q2.063 0 3.516 1.477t1.453 3.539-1.453 3.539-3.516 1.477h-4.031v-1.922h4.031q1.266 0 2.18-0.914t0.914-2.18-0.914-2.18-2.18-0.914h-4.031v-1.922h4.031zM8.016 12.984v-1.969h7.969v1.969h-7.969zM3.891 12q0 1.266 0.914 2.18t2.18 0.914h4.031v1.922h-4.031q-2.063 0-3.516-1.477t-1.453-3.539 1.453-3.539 3.516-1.477h4.031v1.922h-4.031q-1.266 0-2.18 0.914t-0.914 2.18z"
+ ></path>
+ </symbol>
+ <symbol id="icon-redo" viewBox="0 0 24 24">
+ <title>redo</title>
+ <path
+ d="M18.422 10.594l3.563-3.609v9h-9l3.656-3.609q-2.25-1.875-5.156-1.875-2.391 0-4.617 1.594t-2.977 3.891l-2.344-0.75q1.031-3.188 3.773-5.203t6.164-2.016q3.984 0 6.938 2.578z"
+ ></path>
+ </symbol>
+ <symbol id="icon-remove" viewBox="0 0 24 24">
+ <title>remove</title>
+ <path d="M18.984 12.984h-13.969v-1.969h13.969v1.969z"></path>
+ </symbol>
+ <symbol id="icon-remove_circledo_not_disturb_on" viewBox="0 0 24 24">
+ <title>remove_circledo_not_disturb_on</title>
+ <path
+ d="M17.016 12.984v-1.969h-10.031v1.969h10.031zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"
+ ></path>
+ </symbol>
+ <symbol id="icon-remove_circle_outline" viewBox="0 0 24 24">
+ <title>remove_circle_outline</title>
+ <path
+ d="M12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93zM6.984 11.016h10.031v1.969h-10.031v-1.969z"
+ ></path>
+ </symbol>
+ <symbol id="icon-reply" viewBox="0 0 24 24">
+ <title>reply</title>
+ <path
+ d="M9.984 9q4.875 0.703 7.523 3.727t3.492 7.289q-3.609-5.109-11.016-5.109v4.078l-6.984-6.984 6.984-6.984v3.984z"
+ ></path>
+ </symbol>
+ <symbol id="icon-reply_all" viewBox="0 0 24 24">
+ <title>reply_all</title>
+ <path
+ d="M12.984 9q4.875 0.703 7.523 3.727t3.492 7.289q-3.609-5.109-11.016-5.109v4.078l-6.984-6.984 6.984-6.984v3.984zM6.984 8.016l-3.984 3.984 3.984 3.984v3l-6.984-6.984 6.984-6.984v3z"
+ ></path>
+ </symbol>
+ <symbol id="icon-report" viewBox="0 0 24 24">
+ <title>report</title>
+ <path
+ d="M12.984 12.984v-6h-1.969v6h1.969zM12 17.297q0.516 0 0.914-0.398t0.398-0.914-0.398-0.891-0.914-0.375-0.914 0.375-0.398 0.891 0.398 0.914 0.914 0.398zM15.75 3l5.25 5.25v7.5l-5.25 5.25h-7.5l-5.25-5.25v-7.5l5.25-5.25h7.5z"
+ ></path>
+ </symbol>
+ <symbol id="icon-save" viewBox="0 0 24 24">
+ <title>save</title>
+ <path
+ d="M15 9v-3.984h-9.984v3.984h9.984zM12 18.984q1.219 0 2.109-0.891t0.891-2.109-0.891-2.109-2.109-0.891-2.109 0.891-0.891 2.109 0.891 2.109 2.109 0.891zM17.016 3l3.984 3.984v12q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.844 0-1.43-0.586t-0.586-1.43v-13.969q0-0.844 0.586-1.43t1.43-0.586h12z"
+ ></path>
+ </symbol>
+ <symbol id="icon-link_off" viewBox="0 0 24 24">
+ <title>link_off</title>
+ <path
+ d="M2.016 4.266l1.266-1.266 16.734 16.734-1.266 1.266-4.031-3.984h-1.734v-1.734l-2.25-2.297h-2.719v-1.969h0.703l-2.063-2.063q-1.172 0.141-1.969 1.008t-0.797 2.039q0 1.266 0.914 2.18t2.18 0.914h4.031v1.922h-4.031q-2.063 0-3.516-1.477t-1.453-3.539q0-1.406 0.891-2.766t2.203-1.875zM15.984 11.016v1.969h-0.188l-1.969-1.969h2.156zM17.016 6.984q2.063 0 3.516 1.477t1.453 3.539q0 3.047-2.719 4.453l-1.453-1.453q0.984-0.234 1.641-1.078t0.656-1.922q0-1.266-0.914-2.18t-2.18-0.914h-4.031v-1.922h4.031z"
+ ></path>
+ </symbol>
+ <symbol id="icon-save_alt" viewBox="0 0 24 24">
+ <title>save_alt</title>
+ <path
+ d="M12.984 12.656l2.625-2.578 1.406 1.406-5.016 5.016-5.016-5.016 1.406-1.406 2.625 2.578v-9.656h1.969v9.656zM18.984 12h2.016v6.984q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-6.984h2.016v6.984h13.969v-6.984z"
+ ></path>
+ </symbol>
+ <symbol id="icon-add_link" viewBox="0 0 24 24">
+ <title>add_link</title>
+ <path
+ d="M18.984 12v3h3v2.016h-3v3h-1.969v-3h-3v-2.016h3v-3h1.969zM3.891 12q0 1.266 0.914 2.18t2.18 0.914h4.031v1.922h-4.031q-2.063 0-3.516-1.477t-1.453-3.539 1.453-3.539 3.516-1.477h4.031v1.922h-4.031q-1.266 0-2.18 0.914t-0.914 2.18zM20.109 12q0-1.266-0.914-2.18t-2.18-0.914h-4.031v-1.922h4.031q2.063 0 3.516 1.477t1.453 3.539h-1.875zM8.016 11.016h7.969v1.969h-7.969v-1.969z"
+ ></path>
+ </symbol>
+ <symbol id="icon-access_timequery_builderschedule" viewBox="0 0 24 24">
+ <title>access_timequery_builderschedule</title>
+ <path
+ d="M12.516 6.984v5.25l4.5 2.672-0.75 1.266-5.25-3.188v-6h1.5zM12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"
+ ></path>
+ </symbol>
+ <symbol id="icon-data_usage" viewBox="0 0 24 24">
+ <title>data_usage</title>
+ <path
+ d="M12 18.984q1.359 0 2.953-0.773t2.484-1.852l2.625 1.547q-3 4.078-8.063 4.078-4.125 0-7.055-2.93t-2.93-7.055q0-3.891 2.602-6.727t6.398-3.211v3q-2.531 0.375-4.266 2.344t-1.734 4.594q0 2.906 2.039 4.945t4.945 2.039zM12.984 2.063q3.797 0.375 6.398 3.211t2.602 6.727q0 2.25-0.844 4.078l-2.625-1.547q0.469-1.313 0.469-2.531 0-2.625-1.734-4.594t-4.266-2.344v-3z"
+ ></path>
+ </symbol>
+ <symbol id="icon-storage" viewBox="0 0 24 24">
+ <title>storage</title>
+ <path
+ d="M3.984 11.016v1.969h2.016v-1.969h-2.016zM2.016 14.016v-4.031h19.969v4.031h-19.969zM6 6.984v-1.969h-2.016v1.969h2.016zM2.016 3.984h19.969v4.031h-19.969v-4.031zM3.984 17.016v1.969h2.016v-1.969h-2.016zM2.016 20.016v-4.031h19.969v4.031h-19.969z"
+ ></path>
+ </symbol>
+ <symbol id="icon-signal_cellular_alt" viewBox="0 0 24 24">
+ <title>signal_cellular_alt</title>
+ <path
+ d="M11.016 9h3v11.016h-3v-11.016zM5.016 14.016h3v6h-3v-6zM17.016 3.984h3v16.031h-3v-16.031z"
+ ></path>
+ </symbol>
+ <symbol id="icon-border_color" viewBox="0 0 24 24">
+ <title>border_color</title>
+ <path
+ d="M0 20.016h24v3.984h-24v-3.984zM20.719 4.031l-1.969 1.969-3.75-3.75 1.969-1.969q0.281-0.281 0.703-0.281t0.703 0.281l2.344 2.344q0.281 0.281 0.281 0.703t-0.281 0.703zM17.766 6.984l-10.031 10.031h-3.75v-3.75l10.031-10.031z"
+ ></path>
+ </symbol>
+ <symbol id="icon-format_indent_decrease" viewBox="0 0 24 24">
+ <title>format_indent_decrease</title>
+ <path
+ d="M11.016 12.984v-1.969h9.984v1.969h-9.984zM11.016 9v-2.016h9.984v2.016h-9.984zM3 3h18v2.016h-18v-2.016zM3 21v-2.016h18v2.016h-18zM3 12l3.984-3.984v7.969zM11.016 17.016v-2.016h9.984v2.016h-9.984z"
+ ></path>
+ </symbol>
+ <symbol id="icon-format_indent_increase" viewBox="0 0 24 24">
+ <title>format_indent_increase</title>
+ <path
+ d="M11.016 12.984v-1.969h9.984v1.969h-9.984zM11.016 9v-2.016h9.984v2.016h-9.984zM3 3h18v2.016h-18v-2.016zM11.016 17.016v-2.016h9.984v2.016h-9.984zM3 8.016l3.984 3.984-3.984 3.984v-7.969zM3 21v-2.016h18v2.016h-18z"
+ ></path>
+ </symbol>
+ <symbol id="icon-insert_chartpollassessment" viewBox="0 0 24 24">
+ <title>insert_chartpollassessment</title>
+ <path
+ d="M17.016 17.016v-4.031h-2.016v4.031h2.016zM12.984 17.016v-10.031h-1.969v10.031h1.969zM9 17.016v-7.031h-2.016v7.031h2.016zM18.984 3q0.797 0 1.406 0.609t0.609 1.406v13.969q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-13.969q0-0.797 0.609-1.406t1.406-0.609h13.969z"
+ ></path>
+ </symbol>
+ <symbol id="icon-insert_drive_file" viewBox="0 0 24 24">
+ <title>insert_drive_file</title>
+ <path
+ d="M12.984 9h5.531l-5.531-5.484v5.484zM6 2.016h8.016l6 6v12q0 0.797-0.609 1.383t-1.406 0.586h-12q-0.797 0-1.406-0.586t-0.609-1.383l0.047-16.031q0-0.797 0.586-1.383t1.383-0.586z"
+ ></path>
+ </symbol>
+ <symbol id="icon-insert_photoimagephoto" viewBox="0 0 24 24">
+ <title>insert_photoimagephoto</title>
+ <path
+ d="M8.484 13.5l-3.469 4.5h13.969l-4.5-6-3.469 4.5zM21 18.984q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-13.969q0-0.797 0.609-1.406t1.406-0.609h13.969q0.797 0 1.406 0.609t0.609 1.406v13.969z"
+ ></path>
+ </symbol>
+ <symbol id="icon-publish" viewBox="0 0 24 24">
+ <title>publish</title>
+ <path
+ d="M5.016 14.016l6.984-7.031 6.984 7.031h-3.984v6h-6v-6h-3.984zM5.016 3.984h13.969v2.016h-13.969v-2.016z"
+ ></path>
+ </symbol>
+ <symbol id="icon-linear_scale" viewBox="0 0 24 24">
+ <title>linear_scale</title>
+ <path
+ d="M19.5 9.516q1.031 0 1.758 0.727t0.727 1.758-0.727 1.758-1.758 0.727q-1.688 0-2.297-1.5h-2.906q-0.609 1.5-2.297 1.5t-2.297-1.5h-2.906q-0.609 1.5-2.297 1.5-1.031 0-1.758-0.727t-0.727-1.758 0.727-1.758 1.758-0.727q1.688 0 2.297 1.5h2.906q0.609-1.5 2.297-1.5t2.297 1.5h2.906q0.609-1.5 2.297-1.5z"
+ ></path>
+ </symbol>
+ <symbol id="icon-scatter_plot" viewBox="0 0 24 24">
+ <title>scatter_plot</title>
+ <path
+ d="M13.594 17.578q0-1.219 0.891-2.109t2.109-0.891 2.109 0.891 0.891 2.109-0.891 2.109-2.109 0.891-2.109-0.891-0.891-2.109zM8.016 6q0-1.219 0.891-2.109t2.109-0.891 2.109 0.891 0.891 2.109-0.891 2.109-2.109 0.891-2.109-0.891-0.891-2.109zM3.984 14.016q0-1.219 0.891-2.109t2.109-0.891 2.109 0.891 0.891 2.109-0.891 2.109-2.109 0.891-2.109-0.891-0.891-2.109z"
+ ></path>
+ </symbol>
+ <symbol id="icon-bar_chart" viewBox="0 0 24 24">
+ <title>bar_chart</title>
+ <path
+ d="M16.219 12.984h2.766v6h-2.766v-6zM10.594 5.016h2.813v13.969h-2.813v-13.969zM5.016 9.188h3v9.797h-3v-9.797z"
+ ></path>
+ </symbol>
+ <symbol id="icon-cloud_queue" viewBox="0 0 24 24">
+ <title>cloud_queue</title>
+ <path
+ d="M18.984 18q1.219 0 2.109-0.891t0.891-2.109-0.891-2.109-2.109-0.891h-1.5v-0.516q0-2.297-1.594-3.891t-3.891-1.594q-1.875 0-3.328 1.125t-1.969 2.859h-0.703q-1.641 0-2.813 1.195t-1.172 2.836 1.172 2.813 2.813 1.172h12.984zM19.359 10.031q1.922 0.141 3.281 1.57t1.359 3.398q0 2.063-1.477 3.539t-3.539 1.477h-12.984q-2.484 0-4.242-1.758t-1.758-4.242q0-2.203 1.57-3.961t3.773-1.992q0.984-1.828 2.766-2.953t3.891-1.125q2.531 0 4.711 1.781t2.648 4.266z"
+ ></path>
+ </symbol>
+ <symbol id="icon-file_downloadget_app" viewBox="0 0 24 24">
+ <title>file_downloadget_app</title>
+ <path
+ d="M5.016 18h13.969v2.016h-13.969v-2.016zM18.984 9l-6.984 6.984-6.984-6.984h3.984v-6h6v6h3.984z"
+ ></path>
+ </symbol>
+ <symbol id="icon-file_upload" viewBox="0 0 24 24">
+ <title>file_upload</title>
+ <path
+ d="M5.016 18h13.969v2.016h-13.969v-2.016zM9 15.984v-6h-3.984l6.984-6.984 6.984 6.984h-3.984v6h-6z"
+ ></path>
+ </symbol>
+ <symbol id="icon-folder" viewBox="0 0 24 24">
+ <title>folder</title>
+ <path
+ d="M9.984 3.984l2.016 2.016h8.016q0.797 0 1.383 0.609t0.586 1.406v9.984q0 0.797-0.586 1.406t-1.383 0.609h-16.031q-0.797 0-1.383-0.609t-0.586-1.406v-12q0-0.797 0.586-1.406t1.383-0.609h6z"
+ ></path>
+ </symbol>
+ <symbol id="icon-folder_open" viewBox="0 0 24 24">
+ <title>folder_open</title>
+ <path
+ d="M20.016 18v-9.984h-16.031v9.984h16.031zM20.016 6q0.797 0 1.383 0.609t0.586 1.406v9.984q0 0.797-0.586 1.406t-1.383 0.609h-16.031q-0.797 0-1.383-0.609t-0.586-1.406v-12q0-0.797 0.586-1.406t1.383-0.609h6l2.016 2.016h8.016z"
+ ></path>
+ </symbol>
+ <symbol id="icon-create_new_folder" viewBox="0 0 24 24">
+ <title>create_new_folder</title>
+ <path
+ d="M18.984 14.016v-2.016h-3v-3h-1.969v3h-3v2.016h3v3h1.969v-3h3zM20.016 6q0.844 0 1.406 0.586t0.563 1.43v9.984q0 0.844-0.563 1.43t-1.406 0.586h-16.031q-0.844 0-1.406-0.586t-0.563-1.43v-12q0-0.844 0.563-1.43t1.406-0.586h6l2.016 2.016h8.016z"
+ ></path>
+ </symbol>
+ <symbol id="icon-keyboard_arrow_down" viewBox="0 0 24 24">
+ <title>keyboard_arrow_down</title>
+ <path
+ d="M7.406 8.578l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z"
+ ></path>
+ </symbol>
+ <symbol id="icon-keyboard_arrow_left" viewBox="0 0 24 24">
+ <title>keyboard_arrow_left</title>
+ <path
+ d="M15.422 16.594l-1.406 1.406-6-6 6-6 1.406 1.406-4.594 4.594z"
+ ></path>
+ </symbol>
+ <symbol id="icon-keyboard_arrow_right" viewBox="0 0 24 24">
+ <title>keyboard_arrow_right</title>
+ <path
+ d="M8.578 16.594l4.594-4.594-4.594-4.594 1.406-1.406 6 6-6 6z"
+ ></path>
+ </symbol>
+ <symbol id="icon-keyboard_arrow_up" viewBox="0 0 24 24">
+ <title>keyboard_arrow_up</title>
+ <path
+ d="M7.406 15.422l-1.406-1.406 6-6 6 6-1.406 1.406-4.594-4.594z"
+ ></path>
+ </symbol>
+ <symbol id="icon-keyboard_backspace" viewBox="0 0 24 24">
+ <title>keyboard_backspace</title>
+ <path
+ d="M21 11.016v1.969h-14.156l3.563 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.563 3.609h14.156z"
+ ></path>
+ </symbol>
+ <symbol id="icon-keyboard_return" viewBox="0 0 24 24">
+ <title>keyboard_return</title>
+ <path
+ d="M18.984 6.984h2.016v6h-15.188l3.609 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.609 3.609h13.172v-4.031z"
+ ></path>
+ </symbol>
+ <symbol id="icon-keyboard_tab" viewBox="0 0 24 24">
+ <title>keyboard_tab</title>
+ <path
+ d="M20.016 6h1.969v12h-1.969v-12zM11.578 7.406l1.406-1.406 6 6-6 6-1.406-1.406 3.609-3.609h-14.203v-1.969h14.203z"
+ ></path>
+ </symbol>
+ <symbol id="icon-device_hub" viewBox="0 0 24 24">
+ <title>device_hub</title>
+ <path
+ d="M17.016 15.984h3.984v5.016h-5.016v-3.047l-3.984-4.219-3.984 4.219v3.047h-5.016v-5.016h3.984l4.031-3.984v-3.188q-0.891-0.328-1.453-1.078t-0.563-1.734q0-1.219 0.891-2.109t2.109-0.891 2.109 0.891 0.891 2.109q0 0.984-0.563 1.734t-1.453 1.078v3.188z"
+ ></path>
+ </symbol>
+ <symbol id="icon-arrow_drop_down" viewBox="0 0 24 24">
+ <title>arrow_drop_down</title>
+ <path d="M6.984 9.984h10.031l-5.016 5.016z"></path>
+ </symbol>
+ <symbol id="icon-arrow_drop_up" viewBox="0 0 24 24">
+ <title>arrow_drop_up</title>
+ <path d="M6.984 14.016l5.016-5.016 5.016 5.016h-10.031z"></path>
+ </symbol>
+ <symbol id="icon-cancel" viewBox="0 0 24 24">
+ <title>cancel</title>
+ <path
+ d="M17.016 15.609l-3.609-3.609 3.609-3.609-1.406-1.406-3.609 3.609-3.609-3.609-1.406 1.406 3.609 3.609-3.609 3.609 1.406 1.406 3.609-3.609 3.609 3.609zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"
+ ></path>
+ </symbol>
+ <symbol id="icon-keyboard_control" viewBox="0 0 24 24">
+ <title>keyboard_control</title>
+ <path
+ d="M12 9.984q0.797 0 1.406 0.609t0.609 1.406-0.609 1.406-1.406 0.609-1.406-0.609-0.609-1.406 0.609-1.406 1.406-0.609zM18 9.984q0.797 0 1.406 0.609t0.609 1.406-0.609 1.406-1.406 0.609-1.406-0.609-0.609-1.406 0.609-1.406 1.406-0.609zM6 9.984q0.797 0 1.406 0.609t0.609 1.406-0.609 1.406-1.406 0.609-1.406-0.609-0.609-1.406 0.609-1.406 1.406-0.609z"
+ ></path>
+ </symbol>
+ <symbol id="icon-refresh" viewBox="0 0 24 24">
+ <title>refresh</title>
+ <path
+ d="M17.672 6.328l2.344-2.344v7.031h-7.031l3.234-3.234q-1.781-1.781-4.219-1.781-2.484 0-4.242 1.758t-1.758 4.242 1.758 4.242 4.242 1.758q1.734 0 3.398-1.172t2.273-2.813h2.063q-0.656 2.625-2.813 4.313t-4.922 1.688q-3.281 0-5.625-2.344t-2.344-5.672 2.344-5.672 5.625-2.344q1.406 0 3.070 0.68t2.602 1.664z"
+ ></path>
+ </symbol>
+ <symbol id="icon-unfold_more" viewBox="0 0 24 24">
+ <title>unfold_more</title>
+ <path
+ d="M12 18.188l3.188-3.188 1.406 1.406-4.594 4.594-4.594-4.594 1.406-1.406zM12 5.813l-3.188 3.188-1.406-1.406 4.594-4.594 4.594 4.594-1.406 1.406z"
+ ></path>
+ </symbol>
+ <symbol id="icon-arrow_left" viewBox="0 0 24 24">
+ <title>arrow_left</title>
+ <path d="M14.016 6.984v10.031l-5.016-5.016z"></path>
+ </symbol>
+ <symbol id="icon-arrow_right" viewBox="0 0 24 24">
+ <title>arrow_right</title>
+ <path d="M9.984 17.016v-10.031l5.016 5.016z"></path>
+ </symbol>
+ <symbol id="icon-arrow_back_ios" viewBox="0 0 24 24">
+ <title>arrow_back_ios</title>
+ <path
+ d="M11.672 3.891l-8.109 8.109 8.109 8.109-1.781 1.781-9.891-9.891 9.891-9.891z"
+ ></path>
+ </symbol>
+ <symbol id="icon-arrow_forward_ios" viewBox="0 0 24 24">
+ <title>arrow_forward_ios</title>
+ <path
+ d="M5.859 4.125l2.156-2.109 9.984 9.984-9.984 9.984-2.156-2.109 7.922-7.875z"
+ ></path>
+ </symbol>
+ <symbol id="icon-notifications" viewBox="0 0 24 24">
+ <title>notifications</title>
+ <path
+ d="M18 15.984l2.016 2.016v0.984h-16.031v-0.984l2.016-2.016v-4.969q0-2.344 1.195-4.078t3.305-2.25v-0.703q0-0.609 0.422-1.055t1.078-0.445 1.078 0.445 0.422 1.055v0.703q2.109 0.516 3.305 2.25t1.195 4.078v4.969zM12 21.984q-0.844 0-1.43-0.563t-0.586-1.406h4.031q0 0.797-0.609 1.383t-1.406 0.586z"
+ ></path>
+ </symbol>
+ <symbol id="icon-notifications_none" viewBox="0 0 24 24">
+ <title>notifications_none</title>
+ <path
+ d="M15.984 17.016v-6q0-1.922-1.078-3.211t-2.906-1.289-2.906 1.289-1.078 3.211v6h7.969zM18 15.984l2.016 2.016v0.984h-16.031v-0.984l2.016-2.016v-4.969q0-2.344 1.195-4.078t3.305-2.25v-0.703q0-0.609 0.422-1.055t1.078-0.445 1.078 0.445 0.422 1.055v0.703q2.109 0.516 3.305 2.25t1.195 4.078v4.969zM12 21.984q-0.797 0-1.406-0.586t-0.609-1.383h4.031q0 0.797-0.609 1.383t-1.406 0.586z"
+ ></path>
+ </symbol>
+ <symbol id="icon-notifications_off" viewBox="0 0 24 24">
+ <title>notifications_off</title>
+ <path
+ d="M18 14.672l-8.953-9.422q0.141-0.047 0.375-0.164l0.328-0.164h0.047l0.281-0.141q0.047 0 0.188-0.047t0.234-0.047v-0.703q0-0.609 0.422-1.055t1.078-0.445 1.078 0.445 0.422 1.055v0.703q2.109 0.516 3.305 2.25t1.195 4.078v3.656zM12 21.984q-0.844 0-1.43-0.563t-0.586-1.406h4.031q0 0.844-0.586 1.406t-1.43 0.563zM7.828 6.141q1.125 1.172 5.883 6.047t7.289 7.547l-1.266 1.266-2.016-2.016h-13.734v-0.984l2.016-2.016v-5.016q0-1.922 0.797-3.422l-2.813-2.766 1.266-1.313z"
+ ></path>
+ </symbol>
+ <symbol id="icon-check_box" viewBox="0 0 24 24">
+ <title>check_box</title>
+ <path
+ d="M9.984 17.016l9-9-1.406-1.453-7.594 7.594-3.563-3.563-1.406 1.406zM18.984 3q0.844 0 1.43 0.586t0.586 1.43v13.969q0 0.844-0.586 1.43t-1.43 0.586h-13.969q-0.844 0-1.43-0.586t-0.586-1.43v-13.969q0-0.844 0.586-1.43t1.43-0.586h13.969z"
+ ></path>
+ </symbol>
+ <symbol id="icon-check_box_outline_blank" viewBox="0 0 24 24">
+ <title>check_box_outline_blank</title>
+ <path
+ d="M18.984 3q0.797 0 1.406 0.609t0.609 1.406v13.969q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-13.969q0-0.797 0.609-1.406t1.406-0.609h13.969zM18.984 5.016h-13.969v13.969h13.969v-13.969z"
+ ></path>
+ </symbol>
+ <symbol id="icon-assignment" viewBox="0 0 24 24">
+ <title>assignment</title>
+ <path
+ d="M17.016 9v-2.016h-10.031v2.016h10.031zM17.016 12.984v-1.969h-10.031v1.969h10.031zM14.016 17.016v-2.016h-7.031v2.016h7.031zM12 3q-0.422 0-0.703 0.281t-0.281 0.703 0.281 0.727 0.703 0.305 0.703-0.305 0.281-0.727-0.281-0.703-0.703-0.281zM18.984 3q0.797 0 1.406 0.609t0.609 1.406v13.969q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-13.969q0-0.797 0.609-1.406t1.406-0.609h4.172q0.328-0.891 1.078-1.453t1.734-0.563 1.734 0.563 1.078 1.453h4.172z"
+ ></path>
+ </symbol>
+ <symbol id="icon-cached" viewBox="0 0 24 24">
+ <title>cached</title>
+ <path
+ d="M6 12h3l-3.984 3.984-4.031-3.984h3q0-3.281 2.367-5.648t5.648-2.367q2.344 0 4.266 1.266l-1.453 1.453q-1.266-0.703-2.813-0.703-2.484 0-4.242 1.758t-1.758 4.242zM18.984 8.016l4.031 3.984h-3q0 3.281-2.367 5.648t-5.648 2.367q-2.344 0-4.266-1.266l1.453-1.453q1.313 0.703 2.813 0.703 2.484 0 4.242-1.758t1.758-4.242h-3z"
+ ></path>
+ </symbol>
+ <symbol id="icon-code" viewBox="0 0 24 24">
+ <title>code</title>
+ <path
+ d="M14.578 16.594l4.641-4.594-4.641-4.594 1.406-1.406 6 6-6 6zM9.422 16.594l-1.406 1.406-6-6 6-6 1.406 1.406-4.641 4.594z"
+ ></path>
+ </symbol>
+ <symbol id="icon-description" viewBox="0 0 24 24">
+ <title>description</title>
+ <path
+ d="M12.984 9h5.531l-5.531-5.484v5.484zM15.984 14.016v-2.016h-7.969v2.016h7.969zM15.984 18v-2.016h-7.969v2.016h7.969zM14.016 2.016l6 6v12q0 0.797-0.609 1.383t-1.406 0.586h-12q-0.797 0-1.406-0.586t-0.609-1.383l0.047-16.031q0-0.797 0.586-1.383t1.383-0.586h8.016z"
+ ></path>
+ </symbol>
+ <symbol id="icon-dns" viewBox="0 0 24 24">
+ <title>dns</title>
+ <path
+ d="M6.984 9q0.797 0 1.406-0.609t0.609-1.406-0.609-1.383-1.406-0.586-1.383 0.586-0.586 1.383 0.586 1.406 1.383 0.609zM20.016 3q0.422 0 0.703 0.281t0.281 0.703v6q0 0.422-0.281 0.727t-0.703 0.305h-16.031q-0.422 0-0.703-0.305t-0.281-0.727v-6q0-0.422 0.281-0.703t0.703-0.281h16.031zM6.984 18.984q0.797 0 1.406-0.586t0.609-1.383-0.609-1.406-1.406-0.609-1.383 0.609-0.586 1.406 0.586 1.383 1.383 0.586zM20.016 12.984q0.422 0 0.703 0.305t0.281 0.727v6q0 0.422-0.281 0.703t-0.703 0.281h-16.031q-0.422 0-0.703-0.281t-0.281-0.703v-6q0-0.422 0.281-0.727t0.703-0.305h16.031z"
+ ></path>
+ </symbol>
+ <symbol id="icon-help" viewBox="0 0 24 24">
+ <title>help</title>
+ <path
+ d="M15.047 11.25q0.938-0.938 0.938-2.25 0-1.641-1.172-2.813t-2.813-1.172-2.813 1.172-1.172 2.813h1.969q0-0.797 0.609-1.406t1.406-0.609 1.406 0.609 0.609 1.406-0.609 1.406l-1.219 1.266q-1.172 1.266-1.172 2.813v0.516h1.969q0-1.547 1.172-2.813zM12.984 18.984v-1.969h-1.969v1.969h1.969zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"
+ ></path>
+ </symbol>
+ <symbol id="icon-highlight_remove" viewBox="0 0 24 24">
+ <title>highlight_remove</title>
+ <path
+ d="M12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93zM14.578 8.016l1.406 1.406-2.578 2.578 2.578 2.578-1.406 1.406-2.578-2.578-2.578 2.578-1.406-1.406 2.578-2.578-2.578-2.578 1.406-1.406 2.578 2.578z"
+ ></path>
+ </symbol>
+ <symbol id="icon-info" viewBox="0 0 24 24">
+ <title>info</title>
+ <path
+ d="M12.984 9v-2.016h-1.969v2.016h1.969zM12.984 17.016v-6h-1.969v6h1.969zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"
+ ></path>
+ </symbol>
+ <symbol id="icon-info_outline" viewBox="0 0 24 24">
+ <title>info_outline</title>
+ <path
+ d="M11.016 9v-2.016h1.969v2.016h-1.969zM12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93zM11.016 17.016v-6h1.969v6h-1.969z"
+ ></path>
+ </symbol>
+ <symbol id="icon-language" viewBox="0 0 24 24">
+ <title>language</title>
+ <path
+ d="M16.359 14.016h3.375q0.281-1.313 0.281-2.016t-0.281-2.016h-3.375q0.141 0.984 0.141 2.016t-0.141 2.016zM14.578 19.547q1.172-0.375 2.438-1.43t1.922-2.133h-2.953q-0.469 1.875-1.406 3.563zM14.344 14.016q0.141-0.984 0.141-2.016t-0.141-2.016h-4.688q-0.141 0.984-0.141 2.016t0.141 2.016h4.688zM12 19.969q1.313-1.922 1.922-3.984h-3.844q0.609 2.063 1.922 3.984zM8.016 8.016q0.563-2.016 1.406-3.563-1.172 0.375-2.461 1.43t-1.898 2.133h2.953zM5.063 15.984q0.609 1.078 1.898 2.133t2.461 1.43q-0.938-1.688-1.406-3.563h-2.953zM4.266 14.016h3.375q-0.141-0.984-0.141-2.016t0.141-2.016h-3.375q-0.281 1.313-0.281 2.016t0.281 2.016zM12 4.031q-1.313 1.922-1.922 3.984h3.844q-0.609-2.063-1.922-3.984zM18.938 8.016q-0.656-1.078-1.922-2.133t-2.438-1.43q0.844 1.547 1.406 3.563h2.953zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"
+ ></path>
+ </symbol>
+ <symbol id="icon-lock_open" viewBox="0 0 24 24">
+ <title>lock_open</title>
+ <path
+ d="M18 20.016v-10.031h-12v10.031h12zM18 8.016q0.797 0 1.406 0.586t0.609 1.383v10.031q0 0.797-0.609 1.383t-1.406 0.586h-12q-0.797 0-1.406-0.586t-0.609-1.383v-10.031q0-0.797 0.609-1.383t1.406-0.586h9.094v-2.016q0-1.266-0.914-2.18t-2.18-0.914-2.18 0.914-0.914 2.18h-1.922q0-2.063 1.477-3.539t3.539-1.477 3.539 1.477 1.477 3.539v2.016h0.984zM12 17.016q-0.797 0-1.406-0.609t-0.609-1.406 0.609-1.406 1.406-0.609 1.406 0.609 0.609 1.406-0.609 1.406-1.406 0.609z"
+ ></path>
+ </symbol>
+ <symbol id="icon-lock_outline" viewBox="0 0 24 24">
+ <title>lock_outline</title>
+ <path
+ d="M18 20.016v-10.031h-12v10.031h12zM8.906 6v2.016h6.188v-2.016q0-1.266-0.914-2.18t-2.18-0.914-2.18 0.914-0.914 2.18zM18 8.016q0.797 0 1.406 0.586t0.609 1.383v10.031q0 0.797-0.609 1.383t-1.406 0.586h-12q-0.797 0-1.406-0.586t-0.609-1.383v-10.031q0-0.797 0.609-1.383t1.406-0.586h0.984v-2.016q0-2.063 1.477-3.539t3.539-1.477 3.539 1.477 1.477 3.539v2.016h0.984zM12 17.016q-0.797 0-1.406-0.609t-0.609-1.406 0.609-1.406 1.406-0.609 1.406 0.609 0.609 1.406-0.609 1.406-1.406 0.609z"
+ ></path>
+ </symbol>
+ <symbol id="icon-search" viewBox="0 0 24 24">
+ <title>search</title>
+ <path
+ d="M9.516 14.016q1.875 0 3.188-1.313t1.313-3.188-1.313-3.188-3.188-1.313-3.188 1.313-1.313 3.188 1.313 3.188 3.188 1.313zM15.516 14.016l4.969 4.969-1.5 1.5-4.969-4.969v-0.797l-0.281-0.281q-1.781 1.547-4.219 1.547-2.719 0-4.617-1.875t-1.898-4.594 1.898-4.617 4.617-1.898 4.594 1.898 1.875 4.617q0 0.984-0.469 2.227t-1.078 1.992l0.281 0.281h0.797z"
+ ></path>
+ </symbol>
+ <symbol id="icon-settings" viewBox="0 0 24 24">
+ <title>settings</title>
+ <path
+ d="M12 15.516q1.453 0 2.484-1.031t1.031-2.484-1.031-2.484-2.484-1.031-2.484 1.031-1.031 2.484 1.031 2.484 2.484 1.031zM19.453 12.984l2.109 1.641q0.328 0.234 0.094 0.656l-2.016 3.469q-0.188 0.328-0.609 0.188l-2.484-0.984q-0.984 0.703-1.688 0.984l-0.375 2.625q-0.094 0.422-0.469 0.422h-4.031q-0.375 0-0.469-0.422l-0.375-2.625q-0.891-0.375-1.688-0.984l-2.484 0.984q-0.422 0.141-0.609-0.188l-2.016-3.469q-0.234-0.422 0.094-0.656l2.109-1.641q-0.047-0.328-0.047-0.984t0.047-0.984l-2.109-1.641q-0.328-0.234-0.094-0.656l2.016-3.469q0.188-0.328 0.609-0.188l2.484 0.984q0.984-0.703 1.688-0.984l0.375-2.625q0.094-0.422 0.469-0.422h4.031q0.375 0 0.469 0.422l0.375 2.625q0.891 0.375 1.688 0.984l2.484-0.984q0.422-0.141 0.609 0.188l2.016 3.469q0.234 0.422-0.094 0.656l-2.109 1.641q0.047 0.328 0.047 0.984t-0.047 0.984z"
+ ></path>
+ </symbol>
+ <symbol id="icon-settings_ethernet" viewBox="0 0 24 24">
+ <title>settings_ethernet</title>
+ <path
+ d="M17.766 5.484l5.438 6.516-5.438 6.516-1.547-1.266 4.359-5.25-4.359-5.25zM11.016 12.984v-1.969h1.969v1.969h-1.969zM17.016 11.016v1.969h-2.016v-1.969h2.016zM6.984 12.984v-1.969h2.016v1.969h-2.016zM7.781 6.75l-4.359 5.25 4.359 5.25-1.547 1.266-5.438-6.516 5.438-6.516z"
+ ></path>
+ </symbol>
+ <symbol id="icon-donut_small" viewBox="0 0 24 24">
+ <title>donut_small</title>
+ <path
+ d="M12.984 14.859q1.266-0.375 1.875-1.875h7.125q-0.375 3.609-2.836 6.141t-6.164 2.859v-7.125zM14.859 11.016q-0.563-1.5-1.875-1.875v-7.125q3.703 0.328 6.164 2.859t2.836 6.141h-7.125zM11.016 9.141q-0.797 0.328-1.406 1.125t-0.609 1.734 0.609 1.734 1.406 1.125v7.125q-3.797-0.375-6.398-3.234t-2.602-6.75 2.602-6.75 6.398-3.234v7.125z"
+ ></path>
+ </symbol>
+ <symbol id="icon-timeline" viewBox="0 0 24 24">
+ <title>timeline</title>
+ <path
+ d="M23.016 8.016q0 0.797-0.609 1.383t-1.406 0.586h-0.047q-0.328 0-0.469-0.047l-3.563 3.563q0.094 0.281 0.094 0.516 0 0.797-0.609 1.383t-1.406 0.586-1.406-0.586-0.609-1.383q0-0.234 0.094-0.516l-2.578-2.578q-0.281 0.094-0.516 0.094t-0.516-0.094l-4.547 4.547q0.094 0.281 0.094 0.516 0 0.797-0.609 1.406t-1.406 0.609-1.406-0.609-0.609-1.406 0.609-1.383 1.406-0.586q0.375 0 0.516 0.047l4.547-4.547q-0.047-0.141-0.047-0.516 0-0.797 0.586-1.406t1.383-0.609 1.406 0.609 0.609 1.406q0 0.375-0.047 0.516l2.531 2.531q0.141-0.047 0.516-0.047t0.516 0.047l3.563-3.516q-0.094-0.281-0.094-0.516 0-0.797 0.609-1.406t1.406-0.609 1.406 0.609 0.609 1.406z"
+ ></path>
+ </symbol>
+ <symbol id="icon-account_tree" viewBox="0 0 24 24">
+ <title>account_tree</title>
+ <path
+ d="M21.984 11.016h-6.984v-3h-2.016v7.969h2.016v-3h6.984v8.016h-6.984v-3h-3.984v-9.984h-2.016v3h-6.984v-8.016h6.984v3h6v-3h6.984v8.016z"
+ ></path>
+ </symbol>
+ <symbol id="icon-all_inbox" viewBox="0 0 24 24">
+ <title>all_inbox</title>
+ <path
+ d="M15 15.984h6v3q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-3h6q0 1.219 0.891 2.109t2.109 0.891 2.109-0.891 0.891-2.109zM18.984 9v-3.984h-13.969v3.984h3.984q0 1.219 0.891 2.109t2.109 0.891 2.109-0.891 0.891-2.109h3.984zM18.984 3q0.797 0 1.406 0.609t0.609 1.406v6.984q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-6.984q0-0.797 0.609-1.406t1.406-0.609h13.969z"
+ ></path>
+ </symbol>
+ <symbol id="icon-dashboard_customize" viewBox="0 0 24 24">
+ <title>dashboard_customize</title>
+ <path
+ d="M18 12.984v3h3v2.016h-3v3h-2.016v-3h-3v-2.016h3v-3h2.016zM3 12.984h8.016v8.016h-8.016v-8.016zM12.984 3h8.016v8.016h-8.016v-8.016zM3 3h8.016v8.016h-8.016v-8.016z"
+ ></path>
+ </symbol>
+ <symbol id="icon-speed" viewBox="0 0 24 24">
+ <title>speed</title>
+ <path
+ d="M12 15.984q-0.797 0-1.406-0.586t-0.609-1.383q0-0.844 0.609-1.453l8.484-5.625-5.672 8.484q-0.563 0.563-1.406 0.563zM20.391 8.578q0.656 1.031 1.125 2.625t0.469 2.813q0 2.766-1.313 4.969-0.609 1.031-1.734 1.031h-13.875q-1.125 0-1.734-1.031-1.313-2.203-1.313-4.969 0-4.125 2.93-7.055t7.102-2.93q1.219 0 2.789 0.469t2.602 1.125l-1.875 1.219q-1.688-0.844-3.563-0.844-3.281 0-5.648 2.344t-2.367 5.672q0 2.156 1.078 3.984h13.875q1.078-1.828 1.078-3.984 0-1.922-0.844-3.609z"
+ ></path>
+ </symbol>
+ <symbol id="icon-sync_alt" viewBox="0 0 24 24">
+ <title>sync_alt</title>
+ <path
+ d="M2.016 15.984l3.984-3.984v3h15v2.016h-15v3zM21.984 8.016l-3.984 3.984v-3h-15v-2.016h15v-3z"
+ ></path>
+ </symbol>
+ </defs>
</svg>
<div class="clearfix mhl ptl">
- <h1 class="mvm mtn fgc1">Grid Size: 24</h1>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-error">
- <use xlink:href="#icon-error"></use>
- </svg><span class="name"> error</span>
- </div>
+ <h1 class="mvm mtn fgc1">Grid Size: 24</h1>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-error">
+ <use xlink:href="#icon-error"></use></svg
+ ><span class="name"> error</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-error_outline">
- <use xlink:href="#icon-error_outline"></use>
- </svg><span class="name"> error_outline</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-error_outline">
+ <use xlink:href="#icon-error_outline"></use></svg
+ ><span class="name"> error_outline</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-warningreport_problem">
- <use xlink:href="#icon-warningreport_problem"></use>
- </svg><span class="name"> warningreport_problem</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-warningreport_problem">
+ <use xlink:href="#icon-warningreport_problem"></use></svg
+ ><span class="name"> warningreport_problem</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-notification_important">
- <use xlink:href="#icon-notification_important"></use>
- </svg><span class="name"> notification_important</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-notification_important">
+ <use xlink:href="#icon-notification_important"></use></svg
+ ><span class="name"> notification_important</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-av_timer">
- <use xlink:href="#icon-av_timer"></use>
- </svg><span class="name"> av_timer</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-av_timer">
+ <use xlink:href="#icon-av_timer"></use></svg
+ ><span class="name"> av_timer</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-equalizer">
- <use xlink:href="#icon-equalizer"></use>
- </svg><span class="name"> equalizer</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-equalizer">
+ <use xlink:href="#icon-equalizer"></use></svg
+ ><span class="name"> equalizer</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-loopsync">
- <use xlink:href="#icon-loopsync"></use>
- </svg><span class="name"> loopsync</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-loopsync">
+ <use xlink:href="#icon-loopsync"></use></svg
+ ><span class="name"> loopsync</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-library_addqueueadd_to_photos">
- <use xlink:href="#icon-library_addqueueadd_to_photos"></use>
- </svg><span class="name"> library_addqueueadd_to_photos</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-library_addqueueadd_to_photos">
+ <use xlink:href="#icon-library_addqueueadd_to_photos"></use></svg
+ ><span class="name"> library_addqueueadd_to_photos</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-library_books">
- <use xlink:href="#icon-library_books"></use>
- </svg><span class="name"> library_books</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-library_books">
+ <use xlink:href="#icon-library_books"></use></svg
+ ><span class="name"> library_books</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-not_interesteddo_not_disturb">
- <use xlink:href="#icon-not_interesteddo_not_disturb"></use>
- </svg><span class="name"> not_interesteddo_not_disturb</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-not_interesteddo_not_disturb">
+ <use xlink:href="#icon-not_interesteddo_not_disturb"></use></svg
+ ><span class="name"> not_interesteddo_not_disturb</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-playlist_add">
- <use xlink:href="#icon-playlist_add"></use>
- </svg><span class="name"> playlist_add</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-playlist_add">
+ <use xlink:href="#icon-playlist_add"></use></svg
+ ><span class="name"> playlist_add</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-repeat">
- <use xlink:href="#icon-repeat"></use>
- </svg><span class="name"> repeat</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-repeat">
+ <use xlink:href="#icon-repeat"></use></svg
+ ><span class="name"> repeat</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-replay">
- <use xlink:href="#icon-replay"></use>
- </svg><span class="name"> replay</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-replay">
+ <use xlink:href="#icon-replay"></use></svg
+ ><span class="name"> replay</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-slow_motion_video">
- <use xlink:href="#icon-slow_motion_video"></use>
- </svg><span class="name"> slow_motion_video</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-slow_motion_video">
+ <use xlink:href="#icon-slow_motion_video"></use></svg
+ ><span class="name"> slow_motion_video</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-import_export">
- <use xlink:href="#icon-import_export"></use>
- </svg><span class="name"> import_export</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-import_export">
+ <use xlink:href="#icon-import_export"></use></svg
+ ><span class="name"> import_export</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-location_onplaceroom">
- <use xlink:href="#icon-location_onplaceroom"></use>
- </svg><span class="name"> location_onplaceroom</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-location_onplaceroom">
+ <use xlink:href="#icon-location_onplaceroom"></use></svg
+ ><span class="name"> location_onplaceroom</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-vpn_key">
- <use xlink:href="#icon-vpn_key"></use>
- </svg><span class="name"> vpn_key</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-vpn_key">
+ <use xlink:href="#icon-vpn_key"></use></svg
+ ><span class="name"> vpn_key</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-import_contacts">
- <use xlink:href="#icon-import_contacts"></use>
- </svg><span class="name"> import_contacts</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-import_contacts">
+ <use xlink:href="#icon-import_contacts"></use></svg
+ ><span class="name"> import_contacts</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-mail_outline">
- <use xlink:href="#icon-mail_outline"></use>
- </svg><span class="name"> mail_outline</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-mail_outline">
+ <use xlink:href="#icon-mail_outline"></use></svg
+ ><span class="name"> mail_outline</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-sentiment_satisfied_alt">
- <use xlink:href="#icon-sentiment_satisfied_alt"></use>
- </svg><span class="name"> sentiment_satisfied_alt</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-sentiment_satisfied_alt">
+ <use xlink:href="#icon-sentiment_satisfied_alt"></use></svg
+ ><span class="name"> sentiment_satisfied_alt</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-lightbulb">
- <use xlink:href="#icon-lightbulb"></use>
- </svg><span class="name"> lightbulb</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-lightbulb">
+ <use xlink:href="#icon-lightbulb"></use></svg
+ ><span class="name"> lightbulb</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-add">
- <use xlink:href="#icon-add"></use>
- </svg><span class="name"> add</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-add">
+ <use xlink:href="#icon-add"></use></svg
+ ><span class="name"> add</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-add_box">
- <use xlink:href="#icon-add_box"></use>
- </svg><span class="name"> add_box</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-add_box">
+ <use xlink:href="#icon-add_box"></use></svg
+ ><span class="name"> add_box</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-add_circle">
- <use xlink:href="#icon-add_circle"></use>
- </svg><span class="name"> add_circle</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-add_circle">
+ <use xlink:href="#icon-add_circle"></use></svg
+ ><span class="name"> add_circle</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-add_circle_outlinecontrol_point">
- <use xlink:href="#icon-add_circle_outlinecontrol_point"></use>
- </svg><span class="name"> add_circle_outlinecontrol_point</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-add_circle_outlinecontrol_point">
+ <use xlink:href="#icon-add_circle_outlinecontrol_point"></use></svg
+ ><span class="name"> add_circle_outlinecontrol_point</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-backspace">
- <use xlink:href="#icon-backspace"></use>
- </svg><span class="name"> backspace</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-backspace">
+ <use xlink:href="#icon-backspace"></use></svg
+ ><span class="name"> backspace</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-clearclose">
- <use xlink:href="#icon-clearclose"></use>
- </svg><span class="name"> clearclose</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-clearclose">
+ <use xlink:href="#icon-clearclose"></use></svg
+ ><span class="name"> clearclose</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-content_copy">
- <use xlink:href="#icon-content_copy"></use>
- </svg><span class="name"> content_copy</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-content_copy">
+ <use xlink:href="#icon-content_copy"></use></svg
+ ><span class="name"> content_copy</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-content_cut">
- <use xlink:href="#icon-content_cut"></use>
- </svg><span class="name"> content_cut</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-content_cut">
+ <use xlink:href="#icon-content_cut"></use></svg
+ ><span class="name"> content_cut</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-content_paste">
- <use xlink:href="#icon-content_paste"></use>
- </svg><span class="name"> content_paste</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-content_paste">
+ <use xlink:href="#icon-content_paste"></use></svg
+ ><span class="name"> content_paste</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-createmode_editedit">
- <use xlink:href="#icon-createmode_editedit"></use>
- </svg><span class="name"> createmode_editedit</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-createmode_editedit">
+ <use xlink:href="#icon-createmode_editedit"></use></svg
+ ><span class="name"> createmode_editedit</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-inbox">
- <use xlink:href="#icon-inbox"></use>
- </svg><span class="name"> inbox</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-inbox">
+ <use xlink:href="#icon-inbox"></use></svg
+ ><span class="name"> inbox</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-linkinsert_link">
- <use xlink:href="#icon-linkinsert_link"></use>
- </svg><span class="name"> linkinsert_link</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-linkinsert_link">
+ <use xlink:href="#icon-linkinsert_link"></use></svg
+ ><span class="name"> linkinsert_link</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-redo">
- <use xlink:href="#icon-redo"></use>
- </svg><span class="name"> redo</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-redo">
+ <use xlink:href="#icon-redo"></use></svg
+ ><span class="name"> redo</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-remove">
- <use xlink:href="#icon-remove"></use>
- </svg><span class="name"> remove</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-remove">
+ <use xlink:href="#icon-remove"></use></svg
+ ><span class="name"> remove</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-remove_circledo_not_disturb_on">
- <use xlink:href="#icon-remove_circledo_not_disturb_on"></use>
- </svg><span class="name"> remove_circledo_not_disturb_on</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-remove_circledo_not_disturb_on">
+ <use xlink:href="#icon-remove_circledo_not_disturb_on"></use></svg
+ ><span class="name"> remove_circledo_not_disturb_on</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-remove_circle_outline">
- <use xlink:href="#icon-remove_circle_outline"></use>
- </svg><span class="name"> remove_circle_outline</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-remove_circle_outline">
+ <use xlink:href="#icon-remove_circle_outline"></use></svg
+ ><span class="name"> remove_circle_outline</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-reply">
- <use xlink:href="#icon-reply"></use>
- </svg><span class="name"> reply</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-reply">
+ <use xlink:href="#icon-reply"></use></svg
+ ><span class="name"> reply</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-reply_all">
- <use xlink:href="#icon-reply_all"></use>
- </svg><span class="name"> reply_all</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-reply_all">
+ <use xlink:href="#icon-reply_all"></use></svg
+ ><span class="name"> reply_all</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-report">
- <use xlink:href="#icon-report"></use>
- </svg><span class="name"> report</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-report">
+ <use xlink:href="#icon-report"></use></svg
+ ><span class="name"> report</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-save">
- <use xlink:href="#icon-save"></use>
- </svg><span class="name"> save</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-save">
+ <use xlink:href="#icon-save"></use></svg
+ ><span class="name"> save</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-link_off">
- <use xlink:href="#icon-link_off"></use>
- </svg><span class="name"> link_off</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-link_off">
+ <use xlink:href="#icon-link_off"></use></svg
+ ><span class="name"> link_off</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-save_alt">
- <use xlink:href="#icon-save_alt"></use>
- </svg><span class="name"> save_alt</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-save_alt">
+ <use xlink:href="#icon-save_alt"></use></svg
+ ><span class="name"> save_alt</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-add_link">
- <use xlink:href="#icon-add_link"></use>
- </svg><span class="name"> add_link</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-add_link">
+ <use xlink:href="#icon-add_link"></use></svg
+ ><span class="name"> add_link</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-access_timequery_builderschedule">
- <use xlink:href="#icon-access_timequery_builderschedule"></use>
- </svg><span class="name"> access_timequery_builderschedule</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-access_timequery_builderschedule">
+ <use xlink:href="#icon-access_timequery_builderschedule"></use></svg
+ ><span class="name"> access_timequery_builderschedule</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-data_usage">
- <use xlink:href="#icon-data_usage"></use>
- </svg><span class="name"> data_usage</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-data_usage">
+ <use xlink:href="#icon-data_usage"></use></svg
+ ><span class="name"> data_usage</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-storage">
- <use xlink:href="#icon-storage"></use>
- </svg><span class="name"> storage</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-storage">
+ <use xlink:href="#icon-storage"></use></svg
+ ><span class="name"> storage</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-signal_cellular_alt">
- <use xlink:href="#icon-signal_cellular_alt"></use>
- </svg><span class="name"> signal_cellular_alt</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-signal_cellular_alt">
+ <use xlink:href="#icon-signal_cellular_alt"></use></svg
+ ><span class="name"> signal_cellular_alt</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-border_color">
- <use xlink:href="#icon-border_color"></use>
- </svg><span class="name"> border_color</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-border_color">
+ <use xlink:href="#icon-border_color"></use></svg
+ ><span class="name"> border_color</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-format_indent_decrease">
- <use xlink:href="#icon-format_indent_decrease"></use>
- </svg><span class="name"> format_indent_decrease</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-format_indent_decrease">
+ <use xlink:href="#icon-format_indent_decrease"></use></svg
+ ><span class="name"> format_indent_decrease</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-format_indent_increase">
- <use xlink:href="#icon-format_indent_increase"></use>
- </svg><span class="name"> format_indent_increase</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-format_indent_increase">
+ <use xlink:href="#icon-format_indent_increase"></use></svg
+ ><span class="name"> format_indent_increase</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-insert_chartpollassessment">
- <use xlink:href="#icon-insert_chartpollassessment"></use>
- </svg><span class="name"> insert_chartpollassessment</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-insert_chartpollassessment">
+ <use xlink:href="#icon-insert_chartpollassessment"></use></svg
+ ><span class="name"> insert_chartpollassessment</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-insert_drive_file">
- <use xlink:href="#icon-insert_drive_file"></use>
- </svg><span class="name"> insert_drive_file</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-insert_drive_file">
+ <use xlink:href="#icon-insert_drive_file"></use></svg
+ ><span class="name"> insert_drive_file</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-insert_photoimagephoto">
- <use xlink:href="#icon-insert_photoimagephoto"></use>
- </svg><span class="name"> insert_photoimagephoto</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-insert_photoimagephoto">
+ <use xlink:href="#icon-insert_photoimagephoto"></use></svg
+ ><span class="name"> insert_photoimagephoto</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-publish">
- <use xlink:href="#icon-publish"></use>
- </svg><span class="name"> publish</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-publish">
+ <use xlink:href="#icon-publish"></use></svg
+ ><span class="name"> publish</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-linear_scale">
- <use xlink:href="#icon-linear_scale"></use>
- </svg><span class="name"> linear_scale</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-linear_scale">
+ <use xlink:href="#icon-linear_scale"></use></svg
+ ><span class="name"> linear_scale</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-scatter_plot">
- <use xlink:href="#icon-scatter_plot"></use>
- </svg><span class="name"> scatter_plot</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-scatter_plot">
+ <use xlink:href="#icon-scatter_plot"></use></svg
+ ><span class="name"> scatter_plot</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-bar_chart">
- <use xlink:href="#icon-bar_chart"></use>
- </svg><span class="name"> bar_chart</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-bar_chart">
+ <use xlink:href="#icon-bar_chart"></use></svg
+ ><span class="name"> bar_chart</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-cloud_queue">
- <use xlink:href="#icon-cloud_queue"></use>
- </svg><span class="name"> cloud_queue</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-cloud_queue">
+ <use xlink:href="#icon-cloud_queue"></use></svg
+ ><span class="name"> cloud_queue</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-file_downloadget_app">
- <use xlink:href="#icon-file_downloadget_app"></use>
- </svg><span class="name"> file_downloadget_app</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-file_downloadget_app">
+ <use xlink:href="#icon-file_downloadget_app"></use></svg
+ ><span class="name"> file_downloadget_app</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-file_upload">
- <use xlink:href="#icon-file_upload"></use>
- </svg><span class="name"> file_upload</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-file_upload">
+ <use xlink:href="#icon-file_upload"></use></svg
+ ><span class="name"> file_upload</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-folder">
- <use xlink:href="#icon-folder"></use>
- </svg><span class="name"> folder</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-folder">
+ <use xlink:href="#icon-folder"></use></svg
+ ><span class="name"> folder</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-folder_open">
- <use xlink:href="#icon-folder_open"></use>
- </svg><span class="name"> folder_open</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-folder_open">
+ <use xlink:href="#icon-folder_open"></use></svg
+ ><span class="name"> folder_open</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-create_new_folder">
- <use xlink:href="#icon-create_new_folder"></use>
- </svg><span class="name"> create_new_folder</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-create_new_folder">
+ <use xlink:href="#icon-create_new_folder"></use></svg
+ ><span class="name"> create_new_folder</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-keyboard_arrow_down">
- <use xlink:href="#icon-keyboard_arrow_down"></use>
- </svg><span class="name"> keyboard_arrow_down</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-keyboard_arrow_down">
+ <use xlink:href="#icon-keyboard_arrow_down"></use></svg
+ ><span class="name"> keyboard_arrow_down</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-keyboard_arrow_left">
- <use xlink:href="#icon-keyboard_arrow_left"></use>
- </svg><span class="name"> keyboard_arrow_left</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-keyboard_arrow_left">
+ <use xlink:href="#icon-keyboard_arrow_left"></use></svg
+ ><span class="name"> keyboard_arrow_left</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-keyboard_arrow_right">
- <use xlink:href="#icon-keyboard_arrow_right"></use>
- </svg><span class="name"> keyboard_arrow_right</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-keyboard_arrow_right">
+ <use xlink:href="#icon-keyboard_arrow_right"></use></svg
+ ><span class="name"> keyboard_arrow_right</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-keyboard_arrow_up">
- <use xlink:href="#icon-keyboard_arrow_up"></use>
- </svg><span class="name"> keyboard_arrow_up</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-keyboard_arrow_up">
+ <use xlink:href="#icon-keyboard_arrow_up"></use></svg
+ ><span class="name"> keyboard_arrow_up</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-keyboard_backspace">
- <use xlink:href="#icon-keyboard_backspace"></use>
- </svg><span class="name"> keyboard_backspace</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-keyboard_backspace">
+ <use xlink:href="#icon-keyboard_backspace"></use></svg
+ ><span class="name"> keyboard_backspace</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-keyboard_return">
- <use xlink:href="#icon-keyboard_return"></use>
- </svg><span class="name"> keyboard_return</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-keyboard_return">
+ <use xlink:href="#icon-keyboard_return"></use></svg
+ ><span class="name"> keyboard_return</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-keyboard_tab">
- <use xlink:href="#icon-keyboard_tab"></use>
- </svg><span class="name"> keyboard_tab</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-keyboard_tab">
+ <use xlink:href="#icon-keyboard_tab"></use></svg
+ ><span class="name"> keyboard_tab</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-device_hub">
- <use xlink:href="#icon-device_hub"></use>
- </svg><span class="name"> device_hub</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-device_hub">
+ <use xlink:href="#icon-device_hub"></use></svg
+ ><span class="name"> device_hub</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-arrow_drop_down">
- <use xlink:href="#icon-arrow_drop_down"></use>
- </svg><span class="name"> arrow_drop_down</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-arrow_drop_down">
+ <use xlink:href="#icon-arrow_drop_down"></use></svg
+ ><span class="name"> arrow_drop_down</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-arrow_drop_up">
- <use xlink:href="#icon-arrow_drop_up"></use>
- </svg><span class="name"> arrow_drop_up</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-arrow_drop_up">
+ <use xlink:href="#icon-arrow_drop_up"></use></svg
+ ><span class="name"> arrow_drop_up</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-cancel">
- <use xlink:href="#icon-cancel"></use>
- </svg><span class="name"> cancel</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-cancel">
+ <use xlink:href="#icon-cancel"></use></svg
+ ><span class="name"> cancel</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-keyboard_control">
- <use xlink:href="#icon-keyboard_control"></use>
- </svg><span class="name"> keyboard_control</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-keyboard_control">
+ <use xlink:href="#icon-keyboard_control"></use></svg
+ ><span class="name"> keyboard_control</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-refresh">
- <use xlink:href="#icon-refresh"></use>
- </svg><span class="name"> refresh</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-refresh">
+ <use xlink:href="#icon-refresh"></use></svg
+ ><span class="name"> refresh</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-unfold_more">
- <use xlink:href="#icon-unfold_more"></use>
- </svg><span class="name"> unfold_more</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-unfold_more">
+ <use xlink:href="#icon-unfold_more"></use></svg
+ ><span class="name"> unfold_more</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-arrow_left">
- <use xlink:href="#icon-arrow_left"></use>
- </svg><span class="name"> arrow_left</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-arrow_left">
+ <use xlink:href="#icon-arrow_left"></use></svg
+ ><span class="name"> arrow_left</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-arrow_right">
- <use xlink:href="#icon-arrow_right"></use>
- </svg><span class="name"> arrow_right</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-arrow_right">
+ <use xlink:href="#icon-arrow_right"></use></svg
+ ><span class="name"> arrow_right</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-arrow_back_ios">
- <use xlink:href="#icon-arrow_back_ios"></use>
- </svg><span class="name"> arrow_back_ios</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-arrow_back_ios">
+ <use xlink:href="#icon-arrow_back_ios"></use></svg
+ ><span class="name"> arrow_back_ios</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-arrow_forward_ios">
- <use xlink:href="#icon-arrow_forward_ios"></use>
- </svg><span class="name"> arrow_forward_ios</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-arrow_forward_ios">
+ <use xlink:href="#icon-arrow_forward_ios"></use></svg
+ ><span class="name"> arrow_forward_ios</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-notifications">
- <use xlink:href="#icon-notifications"></use>
- </svg><span class="name"> notifications</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-notifications">
+ <use xlink:href="#icon-notifications"></use></svg
+ ><span class="name"> notifications</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-notifications_none">
- <use xlink:href="#icon-notifications_none"></use>
- </svg><span class="name"> notifications_none</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-notifications_none">
+ <use xlink:href="#icon-notifications_none"></use></svg
+ ><span class="name"> notifications_none</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-notifications_off">
- <use xlink:href="#icon-notifications_off"></use>
- </svg><span class="name"> notifications_off</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-notifications_off">
+ <use xlink:href="#icon-notifications_off"></use></svg
+ ><span class="name"> notifications_off</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-check_box">
- <use xlink:href="#icon-check_box"></use>
- </svg><span class="name"> check_box</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-check_box">
+ <use xlink:href="#icon-check_box"></use></svg
+ ><span class="name"> check_box</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-check_box_outline_blank">
- <use xlink:href="#icon-check_box_outline_blank"></use>
- </svg><span class="name"> check_box_outline_blank</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-check_box_outline_blank">
+ <use xlink:href="#icon-check_box_outline_blank"></use></svg
+ ><span class="name"> check_box_outline_blank</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-assignment">
- <use xlink:href="#icon-assignment"></use>
- </svg><span class="name"> assignment</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-assignment">
+ <use xlink:href="#icon-assignment"></use></svg
+ ><span class="name"> assignment</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-cached">
- <use xlink:href="#icon-cached"></use>
- </svg><span class="name"> cached</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-cached">
+ <use xlink:href="#icon-cached"></use></svg
+ ><span class="name"> cached</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-code">
- <use xlink:href="#icon-code"></use>
- </svg><span class="name"> code</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-code">
+ <use xlink:href="#icon-code"></use></svg
+ ><span class="name"> code</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-description">
- <use xlink:href="#icon-description"></use>
- </svg><span class="name"> description</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-description">
+ <use xlink:href="#icon-description"></use></svg
+ ><span class="name"> description</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-dns">
- <use xlink:href="#icon-dns"></use>
- </svg><span class="name"> dns</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-dns">
+ <use xlink:href="#icon-dns"></use></svg
+ ><span class="name"> dns</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-help">
- <use xlink:href="#icon-help"></use>
- </svg><span class="name"> help</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-help">
+ <use xlink:href="#icon-help"></use></svg
+ ><span class="name"> help</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-highlight_remove">
- <use xlink:href="#icon-highlight_remove"></use>
- </svg><span class="name"> highlight_remove</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-highlight_remove">
+ <use xlink:href="#icon-highlight_remove"></use></svg
+ ><span class="name"> highlight_remove</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-info">
- <use xlink:href="#icon-info"></use>
- </svg><span class="name"> info</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-info">
+ <use xlink:href="#icon-info"></use></svg
+ ><span class="name"> info</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-info_outline">
- <use xlink:href="#icon-info_outline"></use>
- </svg><span class="name"> info_outline</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-info_outline">
+ <use xlink:href="#icon-info_outline"></use></svg
+ ><span class="name"> info_outline</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-language">
- <use xlink:href="#icon-language"></use>
- </svg><span class="name"> language</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-language">
+ <use xlink:href="#icon-language"></use></svg
+ ><span class="name"> language</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-lock_open">
- <use xlink:href="#icon-lock_open"></use>
- </svg><span class="name"> lock_open</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-lock_open">
+ <use xlink:href="#icon-lock_open"></use></svg
+ ><span class="name"> lock_open</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-lock_outline">
- <use xlink:href="#icon-lock_outline"></use>
- </svg><span class="name"> lock_outline</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-lock_outline">
+ <use xlink:href="#icon-lock_outline"></use></svg
+ ><span class="name"> lock_outline</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-search">
- <use xlink:href="#icon-search"></use>
- </svg><span class="name"> search</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-search">
+ <use xlink:href="#icon-search"></use></svg
+ ><span class="name"> search</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-settings">
- <use xlink:href="#icon-settings"></use>
- </svg><span class="name"> settings</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-settings">
+ <use xlink:href="#icon-settings"></use></svg
+ ><span class="name"> settings</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-settings_ethernet">
- <use xlink:href="#icon-settings_ethernet"></use>
- </svg><span class="name"> settings_ethernet</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-settings_ethernet">
+ <use xlink:href="#icon-settings_ethernet"></use></svg
+ ><span class="name"> settings_ethernet</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-donut_small">
- <use xlink:href="#icon-donut_small"></use>
- </svg><span class="name"> donut_small</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-donut_small">
+ <use xlink:href="#icon-donut_small"></use></svg
+ ><span class="name"> donut_small</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-timeline">
- <use xlink:href="#icon-timeline"></use>
- </svg><span class="name"> timeline</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-timeline">
+ <use xlink:href="#icon-timeline"></use></svg
+ ><span class="name"> timeline</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-account_tree">
- <use xlink:href="#icon-account_tree"></use>
- </svg><span class="name"> account_tree</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-account_tree">
+ <use xlink:href="#icon-account_tree"></use></svg
+ ><span class="name"> account_tree</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-all_inbox">
- <use xlink:href="#icon-all_inbox"></use>
- </svg><span class="name"> all_inbox</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-all_inbox">
+ <use xlink:href="#icon-all_inbox"></use></svg
+ ><span class="name"> all_inbox</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-dashboard_customize">
- <use xlink:href="#icon-dashboard_customize"></use>
- </svg><span class="name"> dashboard_customize</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-dashboard_customize">
+ <use xlink:href="#icon-dashboard_customize"></use></svg
+ ><span class="name"> dashboard_customize</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-speed">
- <use xlink:href="#icon-speed"></use>
- </svg><span class="name"> speed</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-speed">
+ <use xlink:href="#icon-speed"></use></svg
+ ><span class="name"> speed</span>
</div>
- <div class="glyph fs1">
- <div class="clearfix pbs">
- <svg class="icon icon-sync_alt">
- <use xlink:href="#icon-sync_alt"></use>
- </svg><span class="name"> sync_alt</span>
- </div>
+ </div>
+ <div class="glyph fs1">
+ <div class="clearfix pbs">
+ <svg class="icon icon-sync_alt">
+ <use xlink:href="#icon-sync_alt"></use></svg
+ ><span class="name"> sync_alt</span>
</div>
+ </div>
</div>
<script defer>
- /*!
- * @copyright Copyright (c) 2017 IcoMoon.io
- * @license Licensed under MIT license
- * See https://github.com/Keyamoon/svgxuse
- * @version 1.2.6
- */
- /*jslint browser: true */
- /*global XDomainRequest, MutationObserver, window */
- (function () {
- "use strict";
- if (typeof window !== "undefined" && window.addEventListener) {
- var cache = Object.create(null); // holds xhr objects to prevent multiple requests
- var checkUseElems;
- var tid; // timeout id
- var debouncedCheck = function () {
- clearTimeout(tid);
- tid = setTimeout(checkUseElems, 100);
- };
- var unobserveChanges = function () {
- return;
- };
- var observeChanges = function () {
- var observer;
- window.addEventListener("resize", debouncedCheck, false);
- window.addEventListener("orientationchange", debouncedCheck, false);
- if (window.MutationObserver) {
- observer = new MutationObserver(debouncedCheck);
- observer.observe(document.documentElement, {
- childList: true,
- subtree: true,
- attributes: true
- });
- unobserveChanges = function () {
- try {
- observer.disconnect();
- window.removeEventListener("resize", debouncedCheck, false);
- window.removeEventListener("orientationchange", debouncedCheck, false);
- } catch (ignore) { }
- };
- } else {
- document.documentElement.addEventListener("DOMSubtreeModified", debouncedCheck, false);
- unobserveChanges = function () {
- document.documentElement.removeEventListener("DOMSubtreeModified", debouncedCheck, false);
- window.removeEventListener("resize", debouncedCheck, false);
- window.removeEventListener("orientationchange", debouncedCheck, false);
- };
- }
- };
- var createRequest = function (url) {
- // In IE 9, cross origin requests can only be sent using XDomainRequest.
- // XDomainRequest would fail if CORS headers are not set.
- // Therefore, XDomainRequest should only be used with cross origin requests.
- function getOrigin(loc) {
- var a;
- if (loc.protocol !== undefined) {
- a = loc;
- } else {
- a = document.createElement("a");
- a.href = loc;
- }
- return a.protocol.replace(/:/g, "") + a.host;
- }
- var Request;
- var origin;
- var origin2;
- if (window.XMLHttpRequest) {
- Request = new XMLHttpRequest();
- origin = getOrigin(location);
- origin2 = getOrigin(url);
- if (Request.withCredentials === undefined && origin2 !== "" && origin2 !== origin) {
- Request = XDomainRequest || undefined;
- } else {
- Request = XMLHttpRequest;
- }
- }
- return Request;
- };
- var xlinkNS = "http://www.w3.org/1999/xlink";
- checkUseElems = function () {
- var base;
- var bcr;
- var fallback = ""; // optional fallback URL in case no base path to SVG file was given and no symbol definition was found.
- var hash;
- var href;
- var i;
- var inProgressCount = 0;
- var isHidden;
- var Request;
- var url;
- var uses;
- var xhr;
- function observeIfDone() {
- // If done with making changes, start watching for chagnes in DOM again
- inProgressCount -= 1;
- if (inProgressCount === 0) { // if all xhrs were resolved
- unobserveChanges(); // make sure to remove old handlers
- observeChanges(); // watch for changes to DOM
- }
- }
- function attrUpdateFunc(spec) {
- return function () {
- if (cache[spec.base] !== true) {
- spec.useEl.setAttributeNS(xlinkNS, "xlink:href", "#" + spec.hash);
- if (spec.useEl.hasAttribute("href")) {
- spec.useEl.setAttribute("href", "#" + spec.hash);
- }
- }
- };
- }
- function onloadFunc(xhr) {
- return function () {
- var body = document.body;
- var x = document.createElement("x");
- var svg;
- xhr.onload = null;
- x.innerHTML = xhr.responseText;
- svg = x.getElementsByTagName("svg")[0];
- if (svg) {
- svg.setAttribute("aria-hidden", "true");
- svg.style.position = "absolute";
- svg.style.width = 0;
- svg.style.height = 0;
- svg.style.overflow = "hidden";
- body.insertBefore(svg, body.firstChild);
- }
- observeIfDone();
- };
- }
- function onErrorTimeout(xhr) {
- return function () {
- xhr.onerror = null;
- xhr.ontimeout = null;
- observeIfDone();
- };
- }
- unobserveChanges(); // stop watching for changes to DOM
- // find all use elements
- uses = document.getElementsByTagName("use");
- for (i = 0; i < uses.length; i += 1) {
- try {
- bcr = uses[i].getBoundingClientRect();
- } catch (ignore) {
- // failed to get bounding rectangle of the use element
- bcr = false;
- }
- href = uses[i].getAttribute("href")
- || uses[i].getAttributeNS(xlinkNS, "href")
- || uses[i].getAttribute("xlink:href");
- if (href && href.split) {
- url = href.split("#");
- } else {
- url = ["", ""];
- }
- base = url[0];
- hash = url[1];
- isHidden = bcr && bcr.left === 0 && bcr.right === 0 && bcr.top === 0 && bcr.bottom === 0;
- if (bcr && bcr.width === 0 && bcr.height === 0 && !isHidden) {
- // the use element is empty
- // if there is a reference to an external SVG, try to fetch it
- // use the optional fallback URL if there is no reference to an external SVG
- if (fallback && !base.length && hash && !document.getElementById(hash)) {
- base = fallback;
- }
- if (uses[i].hasAttribute("href")) {
- uses[i].setAttributeNS(xlinkNS, "xlink:href", href);
- }
- if (base.length) {
- // schedule updating xlink:href
- xhr = cache[base];
- if (xhr !== true) {
- // true signifies that prepending the SVG was not required
- setTimeout(attrUpdateFunc({
- useEl: uses[i],
- base: base,
- hash: hash
- }), 0);
- }
- if (xhr === undefined) {
- Request = createRequest(base);
- if (Request !== undefined) {
- xhr = new Request();
- cache[base] = xhr;
- xhr.onload = onloadFunc(xhr);
- xhr.onerror = onErrorTimeout(xhr);
- xhr.ontimeout = onErrorTimeout(xhr);
- xhr.open("GET", base);
- xhr.send();
- inProgressCount += 1;
- }
- }
- }
- } else {
- if (!isHidden) {
- if (cache[base] === undefined) {
- // remember this URL if the use element was not empty and no request was sent
- cache[base] = true;
- } else if (cache[base].onload) {
- // if it turns out that prepending the SVG is not necessary,
- // abort the in-progress xhr.
- cache[base].abort();
- delete cache[base].onload;
- cache[base] = true;
- }
- } else if (base.length && cache[base]) {
- setTimeout(attrUpdateFunc({
- useEl: uses[i],
- base: base,
- hash: hash
- }), 0);
- }
- }
- }
- uses = "";
- inProgressCount += 1;
- observeIfDone();
- };
- var winLoad;
- winLoad = function () {
- window.removeEventListener("load", winLoad, false); // to prevent memory leaks
- tid = setTimeout(checkUseElems, 0);
- };
- if (document.readyState !== "complete") {
- // The load event fires when all resources have finished loading, which allows detecting whether SVG use elements are empty.
- window.addEventListener("load", winLoad, false);
- } else {
- // No need to add a listener if the document is already loaded, initialize immediately.
- winLoad();
- }
+ /*!
+ * @copyright Copyright (c) 2017 IcoMoon.io
+ * @license Licensed under MIT license
+ * See https://github.com/Keyamoon/svgxuse
+ * @version 1.2.6
+ */
+ /*jslint browser: true */
+ /*global XDomainRequest, MutationObserver, window */
+ (function() {
+ 'use strict';
+ if (typeof window !== 'undefined' && window.addEventListener) {
+ var cache = Object.create(null); // holds xhr objects to prevent multiple requests
+ var checkUseElems;
+ var tid; // timeout id
+ var debouncedCheck = function() {
+ clearTimeout(tid);
+ tid = setTimeout(checkUseElems, 100);
+ };
+ var unobserveChanges = function() {
+ return;
+ };
+ var observeChanges = function() {
+ var observer;
+ window.addEventListener('resize', debouncedCheck, false);
+ window.addEventListener('orientationchange', debouncedCheck, false);
+ if (window.MutationObserver) {
+ observer = new MutationObserver(debouncedCheck);
+ observer.observe(document.documentElement, {
+ childList: true,
+ subtree: true,
+ attributes: true,
+ });
+ unobserveChanges = function() {
+ try {
+ observer.disconnect();
+ window.removeEventListener('resize', debouncedCheck, false);
+ window.removeEventListener(
+ 'orientationchange',
+ debouncedCheck,
+ false,
+ );
+ } catch (ignore) {}
+ };
+ } else {
+ document.documentElement.addEventListener(
+ 'DOMSubtreeModified',
+ debouncedCheck,
+ false,
+ );
+ unobserveChanges = function() {
+ document.documentElement.removeEventListener(
+ 'DOMSubtreeModified',
+ debouncedCheck,
+ false,
+ );
+ window.removeEventListener('resize', debouncedCheck, false);
+ window.removeEventListener(
+ 'orientationchange',
+ debouncedCheck,
+ false,
+ );
+ };
}
- }());
-
+ };
+ var createRequest = function(url) {
+ // In IE 9, cross origin requests can only be sent using XDomainRequest.
+ // XDomainRequest would fail if CORS headers are not set.
+ // Therefore, XDomainRequest should only be used with cross origin requests.
+ function getOrigin(loc) {
+ var a;
+ if (loc.protocol !== undefined) {
+ a = loc;
+ } else {
+ a = document.createElement('a');
+ a.href = loc;
+ }
+ return a.protocol.replace(/:/g, '') + a.host;
+ }
+ var Request;
+ var origin;
+ var origin2;
+ if (window.XMLHttpRequest) {
+ Request = new XMLHttpRequest();
+ origin = getOrigin(location);
+ origin2 = getOrigin(url);
+ if (
+ Request.withCredentials === undefined &&
+ origin2 !== '' &&
+ origin2 !== origin
+ ) {
+ Request = XDomainRequest || undefined;
+ } else {
+ Request = XMLHttpRequest;
+ }
+ }
+ return Request;
+ };
+ var xlinkNS = 'http://www.w3.org/1999/xlink';
+ checkUseElems = function() {
+ var base;
+ var bcr;
+ var fallback = ''; // optional fallback URL in case no base path to SVG file was given and no symbol definition was found.
+ var hash;
+ var href;
+ var i;
+ var inProgressCount = 0;
+ var isHidden;
+ var Request;
+ var url;
+ var uses;
+ var xhr;
+ function observeIfDone() {
+ // If done with making changes, start watching for chagnes in DOM again
+ inProgressCount -= 1;
+ if (inProgressCount === 0) {
+ // if all xhrs were resolved
+ unobserveChanges(); // make sure to remove old handlers
+ observeChanges(); // watch for changes to DOM
+ }
+ }
+ function attrUpdateFunc(spec) {
+ return function() {
+ if (cache[spec.base] !== true) {
+ spec.useEl.setAttributeNS(
+ xlinkNS,
+ 'xlink:href',
+ '#' + spec.hash,
+ );
+ if (spec.useEl.hasAttribute('href')) {
+ spec.useEl.setAttribute('href', '#' + spec.hash);
+ }
+ }
+ };
+ }
+ function onloadFunc(xhr) {
+ return function() {
+ var body = document.body;
+ var x = document.createElement('x');
+ var svg;
+ xhr.onload = null;
+ x.innerHTML = xhr.responseText;
+ svg = x.getElementsByTagName('svg')[0];
+ if (svg) {
+ svg.setAttribute('aria-hidden', 'true');
+ svg.style.position = 'absolute';
+ svg.style.width = 0;
+ svg.style.height = 0;
+ svg.style.overflow = 'hidden';
+ body.insertBefore(svg, body.firstChild);
+ }
+ observeIfDone();
+ };
+ }
+ function onErrorTimeout(xhr) {
+ return function() {
+ xhr.onerror = null;
+ xhr.ontimeout = null;
+ observeIfDone();
+ };
+ }
+ unobserveChanges(); // stop watching for changes to DOM
+ // find all use elements
+ uses = document.getElementsByTagName('use');
+ for (i = 0; i < uses.length; i += 1) {
+ try {
+ bcr = uses[i].getBoundingClientRect();
+ } catch (ignore) {
+ // failed to get bounding rectangle of the use element
+ bcr = false;
+ }
+ href =
+ uses[i].getAttribute('href') ||
+ uses[i].getAttributeNS(xlinkNS, 'href') ||
+ uses[i].getAttribute('xlink:href');
+ if (href && href.split) {
+ url = href.split('#');
+ } else {
+ url = ['', ''];
+ }
+ base = url[0];
+ hash = url[1];
+ isHidden =
+ bcr &&
+ bcr.left === 0 &&
+ bcr.right === 0 &&
+ bcr.top === 0 &&
+ bcr.bottom === 0;
+ if (bcr && bcr.width === 0 && bcr.height === 0 && !isHidden) {
+ // the use element is empty
+ // if there is a reference to an external SVG, try to fetch it
+ // use the optional fallback URL if there is no reference to an external SVG
+ if (
+ fallback &&
+ !base.length &&
+ hash &&
+ !document.getElementById(hash)
+ ) {
+ base = fallback;
+ }
+ if (uses[i].hasAttribute('href')) {
+ uses[i].setAttributeNS(xlinkNS, 'xlink:href', href);
+ }
+ if (base.length) {
+ // schedule updating xlink:href
+ xhr = cache[base];
+ if (xhr !== true) {
+ // true signifies that prepending the SVG was not required
+ setTimeout(
+ attrUpdateFunc({
+ useEl: uses[i],
+ base: base,
+ hash: hash,
+ }),
+ 0,
+ );
+ }
+ if (xhr === undefined) {
+ Request = createRequest(base);
+ if (Request !== undefined) {
+ xhr = new Request();
+ cache[base] = xhr;
+ xhr.onload = onloadFunc(xhr);
+ xhr.onerror = onErrorTimeout(xhr);
+ xhr.ontimeout = onErrorTimeout(xhr);
+ xhr.open('GET', base);
+ xhr.send();
+ inProgressCount += 1;
+ }
+ }
+ }
+ } else {
+ if (!isHidden) {
+ if (cache[base] === undefined) {
+ // remember this URL if the use element was not empty and no request was sent
+ cache[base] = true;
+ } else if (cache[base].onload) {
+ // if it turns out that prepending the SVG is not necessary,
+ // abort the in-progress xhr.
+ cache[base].abort();
+ delete cache[base].onload;
+ cache[base] = true;
+ }
+ } else if (base.length && cache[base]) {
+ setTimeout(
+ attrUpdateFunc({
+ useEl: uses[i],
+ base: base,
+ hash: hash,
+ }),
+ 0,
+ );
+ }
+ }
+ }
+ uses = '';
+ inProgressCount += 1;
+ observeIfDone();
+ };
+ var winLoad;
+ winLoad = function() {
+ window.removeEventListener('load', winLoad, false); // to prevent memory leaks
+ tid = setTimeout(checkUseElems, 0);
+ };
+ if (document.readyState !== 'complete') {
+ // The load event fires when all resources have finished loading, which allows detecting whether SVG use elements are empty.
+ window.addEventListener('load', winLoad, false);
+ } else {
+ // No need to add a listener if the document is already loaded, initialize immediately.
+ winLoad();
+ }
+ }
+ })();
</script>
-</body>
-
-</html>
\ No newline at end of file
+ </body>
+</html>
diff --git a/src/components/index.ts b/src/components/index.ts
index 738a357..b764619 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -33,14 +33,29 @@
import RkIcon from './rk-icon.vue';
const components: any = {
- RkHeader, RkFooter, RkProgress, RkDate, RkPanel, RkEcharts, RkPage, RkSidebox, RkFooterTime, RkSelect,
- RkPopper, RkDropdown, RkBack, RkButton, RkIcon,
+ RkHeader,
+ RkFooter,
+ RkProgress,
+ RkDate,
+ RkPanel,
+ RkEcharts,
+ RkPage,
+ RkSidebox,
+ RkFooterTime,
+ RkSelect,
+ RkPopper,
+ RkDropdown,
+ RkBack,
+ RkButton,
+ RkIcon,
};
const componentsName: string[] = Object.keys(components);
-export default {install: (vue: any) => {
- componentsName.forEach((i) => {
- vue.component(i, components[i]);
- });
- vue.use(noty);
-}};
+export default {
+ install: (vue: any) => {
+ componentsName.forEach((i) => {
+ vue.component(i, components[i]);
+ });
+ vue.use(noty);
+ },
+};
diff --git a/src/components/noty/bootstrap-v4.css b/src/components/noty/bootstrap-v4.css
index d820cb2..397e39a 100644
--- a/src/components/noty/bootstrap-v4.css
+++ b/src/components/noty/bootstrap-v4.css
@@ -14,55 +14,65 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
+
.noty_theme__bootstrap-v4.noty_bar {
margin: 4px 0;
overflow: hidden;
position: relative;
border: 1px solid transparent;
- border-radius: .25rem; }
- .noty_theme__bootstrap-v4.noty_bar .noty_body {
- padding: .75rem 1.25rem; }
- .noty_theme__bootstrap-v4.noty_bar .noty_buttons {
- padding: 10px; }
- .noty_theme__bootstrap-v4.noty_bar .noty_close_button {
- font-size: 1.5rem;
- font-weight: 700;
- line-height: 1;
- color: #000;
- text-shadow: 0 1px 0 #fff;
- filter: alpha(opacity=20);
- opacity: .5;
- background: transparent; }
- .noty_theme__bootstrap-v4.noty_bar .noty_close_button:hover {
- background: transparent;
- text-decoration: none;
- cursor: pointer;
- filter: alpha(opacity=50);
- opacity: .75; }
+ border-radius: 0.25rem;
+}
+.noty_theme__bootstrap-v4.noty_bar .noty_body {
+ padding: 0.75rem 1.25rem;
+}
+.noty_theme__bootstrap-v4.noty_bar .noty_buttons {
+ padding: 10px;
+}
+.noty_theme__bootstrap-v4.noty_bar .noty_close_button {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 1;
+ color: #000;
+ text-shadow: 0 1px 0 #fff;
+ filter: alpha(opacity=20);
+ opacity: 0.5;
+ background: transparent;
+}
+.noty_theme__bootstrap-v4.noty_bar .noty_close_button:hover {
+ background: transparent;
+ text-decoration: none;
+ cursor: pointer;
+ filter: alpha(opacity=50);
+ opacity: 0.75;
+}
.noty_theme__bootstrap-v4.noty_type__alert,
.noty_theme__bootstrap-v4.noty_type__notification {
background-color: #fff;
- color: inherit; }
+ color: inherit;
+}
.noty_theme__bootstrap-v4.noty_type__warning {
background-color: #fcf8e3;
color: #8a6d3b;
- border-color: #faebcc; }
+ border-color: #faebcc;
+}
.noty_theme__bootstrap-v4.noty_type__error {
background-color: #f2dede;
color: #a94442;
- border-color: #ebccd1; }
+ border-color: #ebccd1;
+}
.noty_theme__bootstrap-v4.noty_type__info,
.noty_theme__bootstrap-v4.noty_type__information {
background-color: #d9edf7;
color: #31708f;
- border-color: #bce8f1; }
+ border-color: #bce8f1;
+}
.noty_theme__bootstrap-v4.noty_type__success {
background-color: #dff0d8;
color: #3c763d;
- border-color: #d6e9c6; }
+ border-color: #d6e9c6;
+}
diff --git a/src/components/noty/noty.css b/src/components/noty/noty.css
index 8bcac6c..0b062b9 100644
--- a/src/components/noty/noty.css
+++ b/src/components/noty/noty.css
@@ -14,88 +14,121 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
-.noty_layout_mixin, #noty_layout__top, #noty_layout__topLeft, #noty_layout__topCenter, #noty_layout__topRight, #noty_layout__bottom, #noty_layout__bottomLeft, #noty_layout__bottomCenter, #noty_layout__bottomRight, #noty_layout__center, #noty_layout__centerLeft, #noty_layout__centerRight {
+
+.noty_layout_mixin,
+#noty_layout__top,
+#noty_layout__topLeft,
+#noty_layout__topCenter,
+#noty_layout__topRight,
+#noty_layout__bottom,
+#noty_layout__bottomLeft,
+#noty_layout__bottomCenter,
+#noty_layout__bottomRight,
+#noty_layout__center,
+#noty_layout__centerLeft,
+#noty_layout__centerRight {
position: fixed;
margin: 0;
padding: 0;
z-index: 9999999;
-webkit-transform: translateZ(0) scale(1, 1);
- transform: translateZ(0) scale(1, 1);
+ transform: translateZ(0) scale(1, 1);
-webkit-backface-visibility: hidden;
- backface-visibility: hidden;
+ backface-visibility: hidden;
-webkit-font-smoothing: subpixel-antialiased;
filter: blur(0);
-webkit-filter: blur(0);
- max-width: 90%; }
+ max-width: 90%;
+}
#noty_layout__top {
top: 0;
left: 5%;
- width: 90%; }
+ width: 90%;
+}
#noty_layout__topLeft {
top: 20px;
left: 20px;
- width: 325px; }
+ width: 325px;
+}
#noty_layout__topCenter {
top: 5%;
left: 50%;
width: 325px;
- -webkit-transform: translate(-webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
- transform: translate(calc(-50% - .5px)) translateZ(0) scale(1, 1); }
+ -webkit-transform: translate(-webkit-calc(-50% - 0.5px)) translateZ(0)
+ scale(1, 1);
+ transform: translate(calc(-50% - 0.5px)) translateZ(0) scale(1, 1);
+}
#noty_layout__topRight {
top: 20px;
right: 20px;
- width: 325px; }
+ width: 325px;
+}
#noty_layout__bottom {
bottom: 0;
left: 5%;
- width: 90%; }
+ width: 90%;
+}
#noty_layout__bottomLeft {
bottom: 20px;
left: 20px;
- width: 325px; }
+ width: 325px;
+}
#noty_layout__bottomCenter {
bottom: 5%;
left: 50%;
width: 325px;
- -webkit-transform: translate(-webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
- transform: translate(calc(-50% - .5px)) translateZ(0) scale(1, 1); }
+ -webkit-transform: translate(-webkit-calc(-50% - 0.5px)) translateZ(0)
+ scale(1, 1);
+ transform: translate(calc(-50% - 0.5px)) translateZ(0) scale(1, 1);
+}
#noty_layout__bottomRight {
bottom: 20px;
right: 20px;
- width: 325px; }
+ width: 325px;
+}
#noty_layout__center {
top: 50%;
left: 50%;
width: 325px;
- -webkit-transform: translate(-webkit-calc(-50% - .5px), -webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
- transform: translate(calc(-50% - .5px), calc(-50% - .5px)) translateZ(0) scale(1, 1); }
+ -webkit-transform: translate(
+ -webkit-calc(-50% - 0.5px),
+ -webkit-calc(-50% - 0.5px)
+ )
+ translateZ(0) scale(1, 1);
+ transform: translate(calc(-50% - 0.5px), calc(-50% - 0.5px)) translateZ(0)
+ scale(1, 1);
+}
#noty_layout__centerLeft {
top: 50%;
left: 20px;
width: 325px;
- -webkit-transform: translate(0, -webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
- transform: translate(0, calc(-50% - .5px)) translateZ(0) scale(1, 1); }
+ -webkit-transform: translate(0, -webkit-calc(-50% - 0.5px)) translateZ(0)
+ scale(1, 1);
+ transform: translate(0, calc(-50% - 0.5px)) translateZ(0) scale(1, 1);
+}
#noty_layout__centerRight {
top: 50%;
right: 20px;
width: 325px;
- -webkit-transform: translate(0, -webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
- transform: translate(0, calc(-50% - .5px)) translateZ(0) scale(1, 1); }
+ -webkit-transform: translate(0, -webkit-calc(-50% - 0.5px)) translateZ(0)
+ scale(1, 1);
+ transform: translate(0, calc(-50% - 0.5px)) translateZ(0) scale(1, 1);
+}
.noty_progressbar {
- display: none; }
+ display: none;
+}
.noty_has_timeout.noty_has_progressbar .noty_progressbar {
display: block;
@@ -106,37 +139,43 @@
width: 100%;
background-color: #646464;
opacity: 0.2;
- filter: alpha(opacity=10); }
+ filter: alpha(opacity=10);
+}
.noty_bar {
-webkit-transform: translate(0, 0) translateZ(0) scale(1, 1);
-ms-transform: translate(0, 0) scale(1, 1);
- transform: translate(0, 0) scale(1, 1);
+ transform: translate(0, 0) scale(1, 1);
-webkit-font-smoothing: subpixel-antialiased;
- overflow: hidden; }
+ overflow: hidden;
+}
.noty_effects_open {
opacity: 0;
-webkit-transform: translate(50%);
- -ms-transform: translate(50%);
- transform: translate(50%);
+ -ms-transform: translate(50%);
+ transform: translate(50%);
-webkit-animation: noty_anim_in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
- animation: noty_anim_in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+ animation: noty_anim_in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-animation-fill-mode: forwards;
- animation-fill-mode: forwards; }
+ animation-fill-mode: forwards;
+}
.noty_effects_close {
-webkit-animation: noty_anim_out 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
- animation: noty_anim_out 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+ animation: noty_anim_out 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-animation-fill-mode: forwards;
- animation-fill-mode: forwards; }
+ animation-fill-mode: forwards;
+}
.noty_fix_effects_height {
-webkit-animation: noty_anim_height 75ms ease-out;
- animation: noty_anim_height 75ms ease-out; }
+ animation: noty_anim_height 75ms ease-out;
+}
.noty_close_with_click {
- cursor: pointer; }
+ cursor: pointer;
+}
.noty_close_button {
position: absolute;
@@ -150,11 +189,13 @@
background-color: rgba(0, 0, 0, 0.05);
border-radius: 2px;
cursor: pointer;
- -webkit-transition: all .2s ease-out;
- transition: all .2s ease-out; }
+ -webkit-transition: all 0.2s ease-out;
+ transition: all 0.2s ease-out;
+}
.noty_close_button:hover {
- background-color: rgba(0, 0, 0, 0.1); }
+ background-color: rgba(0, 0, 0, 0.1);
+}
.noty_modal {
position: fixed;
@@ -162,71 +203,96 @@
height: 100%;
background-color: #000;
z-index: 10000;
- opacity: .3;
+ opacity: 0.3;
left: 0;
- top: 0; }
+ top: 0;
+}
.noty_modal.noty_modal_open {
opacity: 0;
- -webkit-animation: noty_modal_in .3s ease-out;
- animation: noty_modal_in .3s ease-out; }
+ -webkit-animation: noty_modal_in 0.3s ease-out;
+ animation: noty_modal_in 0.3s ease-out;
+}
.noty_modal.noty_modal_close {
- -webkit-animation: noty_modal_out .3s ease-out;
- animation: noty_modal_out .3s ease-out;
+ -webkit-animation: noty_modal_out 0.3s ease-out;
+ animation: noty_modal_out 0.3s ease-out;
-webkit-animation-fill-mode: forwards;
- animation-fill-mode: forwards; }
+ animation-fill-mode: forwards;
+}
@-webkit-keyframes noty_modal_in {
100% {
- opacity: .3; } }
+ opacity: 0.3;
+ }
+}
@keyframes noty_modal_in {
100% {
- opacity: .3; } }
+ opacity: 0.3;
+ }
+}
@-webkit-keyframes noty_modal_out {
100% {
- opacity: 0; } }
+ opacity: 0;
+ }
+}
@keyframes noty_modal_out {
100% {
- opacity: 0; } }
+ opacity: 0;
+ }
+}
@keyframes noty_modal_out {
100% {
- opacity: 0; } }
+ opacity: 0;
+ }
+}
@-webkit-keyframes noty_anim_in {
100% {
-webkit-transform: translate(0);
- transform: translate(0);
- opacity: 1; } }
+ transform: translate(0);
+ opacity: 1;
+ }
+}
@keyframes noty_anim_in {
100% {
-webkit-transform: translate(0);
- transform: translate(0);
- opacity: 1; } }
+ transform: translate(0);
+ opacity: 1;
+ }
+}
@-webkit-keyframes noty_anim_out {
100% {
-webkit-transform: translate(50%);
- transform: translate(50%);
- opacity: 0; } }
+ transform: translate(50%);
+ opacity: 0;
+ }
+}
@keyframes noty_anim_out {
100% {
-webkit-transform: translate(50%);
- transform: translate(50%);
- opacity: 0; } }
+ transform: translate(50%);
+ opacity: 0;
+ }
+}
@-webkit-keyframes noty_anim_height {
100% {
- height: 0; } }
+ height: 0;
+ }
+}
@keyframes noty_anim_height {
100% {
- height: 0; } }
+ height: 0;
+ }
+}
-/*# sourceMappingURL=noty.css.map*/
\ No newline at end of file
+/*# sourceMappingURL=noty.css.map*/
diff --git a/src/components/rk-back.vue b/src/components/rk-back.vue
index 51ccf9f..5a9cd6b 100644
--- a/src/components/rk-back.vue
+++ b/src/components/rk-back.vue
@@ -1,19 +1,13 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
<a class="rk-back" @click="handleBack">
@@ -21,30 +15,30 @@
</a>
</template>
<script lang="ts">
-import Vue from 'vue';
-import { Component, Prop } from 'vue-property-decorator';
+ import Vue from 'vue';
+ import { Component, Prop } from 'vue-property-decorator';
-@Component
-export default class RkBack extends Vue {
- @Prop({ default: '' }) private size!: string;
- private handleBack() {
- const query = this.$route.query as any;
- if (query.form) {
- this.$router.push(query.form);
- } else {
- this.$emit('back');
+ @Component
+ export default class RkBack extends Vue {
+ @Prop({ default: '' }) private size!: string;
+ private handleBack() {
+ const query = this.$route.query as any;
+ if (query.form) {
+ this.$router.push(query.form);
+ } else {
+ this.$emit('back');
+ }
}
}
-}
</script>
<style lang="scss">
-.rk-back{
- margin-right: 10px;
- .icon{
- vertical-align: bottom;
- height: 22px;
- width: 22px;
- padding: -1px 3px;
+ .rk-back {
+ margin-right: 10px;
+ .icon {
+ vertical-align: bottom;
+ height: 22px;
+ width: 22px;
+ padding: -1px 3px;
+ }
}
-}
</style>
diff --git a/src/components/rk-button.vue b/src/components/rk-button.vue
index 73622fe..893312b 100644
--- a/src/components/rk-button.vue
+++ b/src/components/rk-button.vue
@@ -1,54 +1,48 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
- <a class="rk-btn" :class="{size, 'ghost': ghost}" @click="$emit('click')">
+ <a class="rk-btn" :class="{ size, ghost: ghost }" @click="$emit('click')">
<svg class="icon"><use xlink:href="#chevron-left"></use></svg>
</a>
</template>
<script lang="ts">
-import Vue from 'vue';
-import { Component, Prop } from 'vue-property-decorator';
+ import Vue from 'vue';
+ import { Component, Prop } from 'vue-property-decorator';
-@Component
-export default class RkBtn extends Vue {
- @Prop({ default: '' }) private size!: string;
- @Prop({ default: false }) private ghost!: boolean;
-}
+ @Component
+ export default class RkBtn extends Vue {
+ @Prop({ default: '' }) private size!: string;
+ @Prop({ default: false }) private ghost!: boolean;
+ }
</script>
<style lang="scss">
-.rk-btn{
- line-height: 26px;
- padding: 0 7px;
- background-color: #448dfe;
- border-radius: 4px;
- color: #fff;
- transition: background-color .3s;
- &.sm{
- line-height: 24px;
+ .rk-btn {
+ line-height: 26px;
+ padding: 0 7px;
+ background-color: #448dfe;
+ border-radius: 4px;
+ color: #fff;
+ transition: background-color 0.3s;
+ &.sm {
+ line-height: 24px;
+ }
+ &.lg {
+ line-height: 30px;
+ }
+ &.ghost {
+ background-color: #555b6b66;
+ }
+ &:hover {
+ background-color: #357de9;
+ }
}
- &.lg{
- line-height: 30px;
- }
- &.ghost{
- background-color: #555b6b66;
- }
- &:hover{
- background-color: #357de9;
- }
-}
</style>
diff --git a/src/components/rk-date-calendar.vue b/src/components/rk-date-calendar.vue
index 23da975..50f246b 100755
--- a/src/components/rk-date-calendar.vue
+++ b/src/components/rk-date-calendar.vue
@@ -1,499 +1,607 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
-<div :class="`${pre}`">
- <div :class="`${pre}-head`">
- <a :class="`${pre}-prev-decade-btn`" v-show="showYears" @click="year-=10"><svg class="icon sm cp">
- <use xlink:href="#angle-double-left"></use>
- </svg></a>
- <a :class="`${pre}-prev-year-btn`" v-show="!showYears" @click="year--"><svg class="icon sm cp">
- <use xlink:href="#angle-double-left"></use>
- </svg></a>
- <a :class="`${pre}-prev-month-btn`" v-show="!showYears&&!showMonths" @click="pm">
- <svg class="icon lg cp">
- <use xlink:href="#chevron-left"></use>
- </svg></a>
- <a :class="`${pre}-year-select`" v-show="showYears">{{ys+'-'+ye}}</a>
- <template v-if="local.yearSuffix">
- <a :class="`${pre}-year-select`" @click="showYears=!showYears" v-show="!showYears">{{year}}{{local.yearSuffix}}</a>
- <a :class="`${pre}-month-select`" @click="showMonths=!showMonths" v-show="!showYears&&!showMonths">{{local.monthsHead[month]}}</a>
- </template>
- <template v-else>
- <a :class="`${pre}-month-select`" @click="showMonths=!showMonths" v-show="!showYears&&!showMonths">{{local.monthsHead[month]}}</a>
- <a :class="`${pre}-year-select`" @click="showYears=!showYears" v-show="!showYears">{{year}}</a>
- </template>
- <a :class="`${pre}-next-month-btn`" v-show="!showYears&&!showMonths" @click="nm">
- <svg class="icon lg cp">
- <use xlink:href="#chevron-right"></use>
- </svg></a>
- <a :class="`${pre}-next-year-btn`" v-show="!showYears" @click="year++"><svg class="icon sm cp">
- <use xlink:href="#angle-double-right"></use>
- </svg></a>
- <a :class="`${pre}-next-decade-btn`" v-show="showYears" @click="year+=10"><svg class="icon sm cp">
- <use xlink:href="#angle-double-right"></use>
- </svg></a>
- </div>
- <div :class="`${pre}-body`">
- <div :class="`${pre}-days`">
- <a :class="`${pre}-week`" v-for="i in local.weeks" :key="i">{{i}}</a>
- <a v-for="(j,i) in days" @click="is($event)&&(day=j.i,ok(j))" :class="[(j.p||j.n)?`${pre}-date-out`:'',status(j.y,j.m,j.i,hour,minute,second,'YYYYMMDD')]" :key="i">{{j.i}}</a>
+ <div :class="`${pre}`">
+ <div :class="`${pre}-head`">
+ <a
+ :class="`${pre}-prev-decade-btn`"
+ v-show="showYears"
+ @click="year -= 10"
+ ><svg class="icon sm cp">
+ <use xlink:href="#angle-double-left"></use></svg
+ ></a>
+ <a :class="`${pre}-prev-year-btn`" v-show="!showYears" @click="year--"
+ ><svg class="icon sm cp">
+ <use xlink:href="#angle-double-left"></use></svg
+ ></a>
+ <a
+ :class="`${pre}-prev-month-btn`"
+ v-show="!showYears && !showMonths"
+ @click="pm"
+ >
+ <svg class="icon lg cp">
+ <use xlink:href="#chevron-left"></use></svg
+ ></a>
+ <a :class="`${pre}-year-select`" v-show="showYears">{{
+ ys + '-' + ye
+ }}</a>
+ <template v-if="local.yearSuffix">
+ <a
+ :class="`${pre}-year-select`"
+ @click="showYears = !showYears"
+ v-show="!showYears"
+ >{{ year }}{{ local.yearSuffix }}</a
+ >
+ <a
+ :class="`${pre}-month-select`"
+ @click="showMonths = !showMonths"
+ v-show="!showYears && !showMonths"
+ >{{ local.monthsHead[month] }}</a
+ >
+ </template>
+ <template v-else>
+ <a
+ :class="`${pre}-month-select`"
+ @click="showMonths = !showMonths"
+ v-show="!showYears && !showMonths"
+ >{{ local.monthsHead[month] }}</a
+ >
+ <a
+ :class="`${pre}-year-select`"
+ @click="showYears = !showYears"
+ v-show="!showYears"
+ >{{ year }}</a
+ >
+ </template>
+ <a
+ :class="`${pre}-next-month-btn`"
+ v-show="!showYears && !showMonths"
+ @click="nm"
+ >
+ <svg class="icon lg cp">
+ <use xlink:href="#chevron-right"></use></svg
+ ></a>
+ <a :class="`${pre}-next-year-btn`" v-show="!showYears" @click="year++"
+ ><svg class="icon sm cp">
+ <use xlink:href="#angle-double-right"></use></svg
+ ></a>
+ <a
+ :class="`${pre}-next-decade-btn`"
+ v-show="showYears"
+ @click="year += 10"
+ ><svg class="icon sm cp">
+ <use xlink:href="#angle-double-right"></use></svg
+ ></a>
</div>
- <div :class="`${pre}-months`" v-show="showMonths">
- <a v-for="(i,j) in local.months" @click="is($event)&&(showMonths=(m==='M'),month=j,(m==='M'&&ok('m')))" :class="[status(year,j,day,hour,minute,second,'YYYYMM')]" :key="j">{{i}}</a>
- </div>
- <div :class="`${pre}-years`" v-show="showYears">
- <a v-for="(i,j) in years" @click="is($event)&&(showYears=(m==='Y'),year=i,(m==='Y'&&ok('y')))" :class="[(j===0||j===11)?`${pre}-date-out`:'',status(i,month,day,hour,minute,second,'YYYY')]" :key="j">{{i}}</a>
- </div>
- <div :class="`${pre}-hours scroll_hide`" v-show="showHours">
- <div :class="`${pre}-title`">{{local.hourTip}}</div>
- <div class="scroll_hide calendar-overflow">
- <a v-for="(j,i) in 24" @click="is($event)&&(showHours=false,hour=i,ok('h'))" :class="[status(year,month,day,i,minute,second,'YYYYMMDDHH')]" :key="i">{{i}}</a>
+ <div :class="`${pre}-body`">
+ <div :class="`${pre}-days`">
+ <a :class="`${pre}-week`" v-for="i in local.weeks" :key="i">{{ i }}</a>
+ <a
+ v-for="(j, i) in days"
+ @click="is($event) && ((day = j.i), ok(j))"
+ :class="[
+ j.p || j.n ? `${pre}-date-out` : '',
+ status(j.y, j.m, j.i, hour, minute, second, 'YYYYMMDD'),
+ ]"
+ :key="i"
+ >{{ j.i }}</a
+ >
+ </div>
+ <div :class="`${pre}-months`" v-show="showMonths">
+ <a
+ v-for="(i, j) in local.months"
+ @click="
+ is($event) &&
+ ((showMonths = m === 'M'), (month = j), m === 'M' && ok('m'))
+ "
+ :class="[status(year, j, day, hour, minute, second, 'YYYYMM')]"
+ :key="j"
+ >{{ i }}</a
+ >
+ </div>
+ <div :class="`${pre}-years`" v-show="showYears">
+ <a
+ v-for="(i, j) in years"
+ @click="
+ is($event) &&
+ ((showYears = m === 'Y'), (year = i), m === 'Y' && ok('y'))
+ "
+ :class="[
+ j === 0 || j === 11 ? `${pre}-date-out` : '',
+ status(i, month, day, hour, minute, second, 'YYYY'),
+ ]"
+ :key="j"
+ >{{ i }}</a
+ >
+ </div>
+ <div :class="`${pre}-hours scroll_hide`" v-show="showHours">
+ <div :class="`${pre}-title`">{{ local.hourTip }}</div>
+ <div class="scroll_hide calendar-overflow">
+ <a
+ v-for="(j, i) in 24"
+ @click="is($event) && ((showHours = false), (hour = i), ok('h'))"
+ :class="[status(year, month, day, i, minute, second, 'YYYYMMDDHH')]"
+ :key="i"
+ >{{ i }}</a
+ >
+ </div>
+ </div>
+ <div :class="`${pre}-minutes`" v-show="showMinutes">
+ <div :class="`${pre}-title`">{{ local.minuteTip }}</div>
+ <div class="scroll_hide calendar-overflow">
+ <a
+ v-for="(j, i) in 60"
+ @click="
+ is($event) && ((showMinutes = false), (minute = i), ok('h'))
+ "
+ :class="[status(year, month, day, hour, i, second, 'YYYYMMDDHHmm')]"
+ :key="i"
+ >{{ i }}</a
+ >
+ </div>
+ </div>
+ <div :class="`${pre}-seconds`" v-show="showSeconds">
+ <div :class="`${pre}-title`">{{ local.secondTip }}</div>
+ <div class="scroll_hide calendar-overflow">
+ <a
+ v-for="(j, i) in 60"
+ @click="
+ is($event) && ((showSeconds = false), (second = i), ok('h'))
+ "
+ :class="[
+ status(year, month, day, hour, minute, i, 'YYYYMMDDHHmmss'),
+ ]"
+ :key="i"
+ >{{ i }}</a
+ >
+ </div>
</div>
</div>
- <div :class="`${pre}-minutes`" v-show="showMinutes">
- <div :class="`${pre}-title`">{{local.minuteTip}}</div>
- <div class="scroll_hide calendar-overflow">
- <a v-for="(j,i) in 60" @click="is($event)&&(showMinutes=false,minute=i,ok('h'))" :class="[status(year,month,day,hour,i,second,'YYYYMMDDHHmm')]" :key="i">{{i}}</a>
- </div>
- </div>
- <div :class="`${pre}-seconds`" v-show="showSeconds">
- <div :class="`${pre}-title`">{{local.secondTip}}</div>
- <div class="scroll_hide calendar-overflow">
- <a v-for="(j,i) in 60" @click="is($event)&&(showSeconds=false,second=i,ok('h'))" :class="[status(year,month,day,hour,minute,i,'YYYYMMDDHHmmss')]" :key="i">{{i}}</a>
+ <div :class="`${pre}-foot`" v-if="m === 'H'">
+ <div :class="`${pre}-hour`">
+ <a
+ :title="local.hourTip"
+ @click="(showHours = !showHours), (showMinutes = showSeconds = false)"
+ :class="{ on: showHours }"
+ >{{ hour | dd }}</a
+ >
+ <span>:</span>
+ <a
+ :title="local.minuteTip"
+ @click="
+ (showMinutes = !showMinutes), (showHours = showSeconds = false)
+ "
+ :class="{ on: showMinutes }"
+ >{{ minute | dd }}</a
+ >
+ <span>:</span>
+ <a
+ :title="local.secondTip"
+ @click="
+ (showSeconds = !showSeconds), (showHours = showMinutes = false)
+ "
+ :class="{ on: showSeconds }"
+ >{{ second | dd }}</a
+ >
</div>
</div>
</div>
- <div :class="`${pre}-foot`" v-if="m==='H'">
- <div :class="`${pre}-hour`">
- <a :title="local.hourTip" @click="showHours=!showHours,showMinutes=showSeconds=false" :class="{on:showHours}">{{hour|dd}}</a>
- <span>:</span>
- <a :title="local.minuteTip" @click="showMinutes=!showMinutes,showHours=showSeconds=false" :class="{on:showMinutes}">{{minute|dd}}</a>
- <span>:</span>
- <a :title="local.secondTip" @click="showSeconds=!showSeconds,showHours=showMinutes=false" :class="{on:showSeconds}">{{second|dd}}</a>
- </div>
- </div>
-</div>
</template>
<script lang="js">
-/* eslint-disable */
-/* tslint:disable */
-export default {
- name: 'VueDatepickerLocalCalendar',
- props: {
- value: { default: null },
- left: { default: false },
- right: { default: false },
- },
- data() {
- const get = (time) => {
- return {
- year: time.getFullYear(),
- month: time.getMonth(),
- day: time.getDate(),
- hour: time.getHours(),
- minute: time.getMinutes(),
- second: time.getSeconds(),
+ /* eslint-disable */
+ /* tslint:disable */
+ export default {
+ name: 'VueDatepickerLocalCalendar',
+ props: {
+ value: { default: null },
+ left: { default: false },
+ right: { default: false },
+ },
+ data() {
+ const get = (time) => {
+ return {
+ year: time.getFullYear(),
+ month: time.getMonth(),
+ day: time.getDate(),
+ hour: time.getHours(),
+ minute: time.getMinutes(),
+ second: time.getSeconds(),
+ };
};
- };
- const time = get(this.value);
- return {
- pre: 'calendar',
- m: 'D',
- showYears: false,
- showMonths: false,
- showHours: false,
- showMinutes: false,
- showSeconds: false,
- year: time.year,
- month: time.month,
- day: time.day,
- hour: time.hour,
- minute: time.minute,
- second: time.second,
- };
- },
- watch: {
- value(val) {
- const $this = this;
- const time = $this.get(val);
- $this.year = time.year;
- $this.month = time.month;
- $this.day = time.day;
- $this.hour = time.hour;
- $this.minute = time.minute;
- $this.second = time.second;
- },
- },
- computed: {
- local() {
- return this.$parent.local;
- },
- format() {
- return this.$parent.format;
- },
- start() {
- return this.parse(this.$parent.dates[0]);
- },
- end() {
- return this.parse(this.$parent.dates[1]);
- },
- ys() {
- return Math.floor(this.year / 10) * 10;
- },
- ye() {
- return this.ys + 10;
- },
- years() {
- const arr = [];
- let start = this.ys - 1;
- while (arr.length < 12) {
- arr.push(start += 1);
- }
- return arr;
- },
- days() {
- const days = [];
- const $this = this;
- const year = $this.year;
- const month = $this.month;
- const time = new Date(year, month, 1);
- const dow = $this.local.dow || 7;
- time.setDate(0); // switch to the last day of last month
- let lastDay = time.getDate();
- const week = time.getDay() || 7;
- let count = dow <= week ? week - dow + 1 : week + (7 - dow + 1);
- while (count > 0) {
- days.push({
- i: lastDay - count + 1,
- y: month > 0 ? year : year - 1,
- m: month > 0 ? month - 1 : 11,
- p: true,
- });
- count--;
- }
- time.setMonth(time.getMonth() + 2, 0); // switch to the last day of the current month
- lastDay = time.getDate();
- let i = 1;
- for (i = 1; i <= lastDay; i++) {
- days.push({
- i: i,
- y: year,
- m: month,
- });
- }
- for (i = 1; days.length < 42; i++) {
- days.push({
- i: i,
- y: month < 11 ? year : year + 1,
- m: month < 11 ? month + 1 : 0,
- n: true,
- });
- }
- return days;
- },
- },
- filters: {
- dd: val => ('0' + val).slice(-2),
- },
- methods: {
- get(time) {
+ const time = get(this.value);
return {
- year: time.getFullYear(),
- month: time.getMonth(),
- day: time.getDate(),
- hour: time.getHours(),
- minute: time.getMinutes(),
- second: time.getSeconds(),
+ pre: 'calendar',
+ m: 'D',
+ showYears: false,
+ showMonths: false,
+ showHours: false,
+ showMinutes: false,
+ showSeconds: false,
+ year: time.year,
+ month: time.month,
+ day: time.day,
+ hour: time.hour,
+ minute: time.minute,
+ second: time.second,
};
},
- parse(num) {
- return Math.floor(num / 1000);
+ watch: {
+ value(val) {
+ const $this = this;
+ const time = $this.get(val);
+ $this.year = time.year;
+ $this.month = time.month;
+ $this.day = time.day;
+ $this.hour = time.hour;
+ $this.minute = time.minute;
+ $this.second = time.second;
+ },
},
- status(year, month, day, hour, minute, second, format) {
+ computed: {
+ local() {
+ return this.$parent.local;
+ },
+ format() {
+ return this.$parent.format;
+ },
+ start() {
+ return this.parse(this.$parent.dates[0]);
+ },
+ end() {
+ return this.parse(this.$parent.dates[1]);
+ },
+ ys() {
+ return Math.floor(this.year / 10) * 10;
+ },
+ ye() {
+ return this.ys + 10;
+ },
+ years() {
+ const arr = [];
+ let start = this.ys - 1;
+ while (arr.length < 12) {
+ arr.push(start += 1);
+ }
+ return arr;
+ },
+ days() {
+ const days = [];
+ const $this = this;
+ const year = $this.year;
+ const month = $this.month;
+ const time = new Date(year, month, 1);
+ const dow = $this.local.dow || 7;
+ time.setDate(0); // switch to the last day of last month
+ let lastDay = time.getDate();
+ const week = time.getDay() || 7;
+ let count = dow <= week ? week - dow + 1 : week + (7 - dow + 1);
+ while (count > 0) {
+ days.push({
+ i: lastDay - count + 1,
+ y: month > 0 ? year : year - 1,
+ m: month > 0 ? month - 1 : 11,
+ p: true,
+ });
+ count--;
+ }
+ time.setMonth(time.getMonth() + 2, 0); // switch to the last day of the current month
+ lastDay = time.getDate();
+ let i = 1;
+ for (i = 1; i <= lastDay; i++) {
+ days.push({
+ i: i,
+ y: year,
+ m: month,
+ });
+ }
+ for (i = 1; days.length < 42; i++) {
+ days.push({
+ i: i,
+ y: month < 11 ? year : year + 1,
+ m: month < 11 ? month + 1 : 0,
+ n: true,
+ });
+ }
+ return days;
+ },
+ },
+ filters: {
+ dd: val => ('0' + val).slice(-2),
+ },
+ methods: {
+ get(time) {
+ return {
+ year: time.getFullYear(),
+ month: time.getMonth(),
+ day: time.getDate(),
+ hour: time.getHours(),
+ minute: time.getMinutes(),
+ second: time.getSeconds(),
+ };
+ },
+ parse(num) {
+ return Math.floor(num / 1000);
+ },
+ status(year, month, day, hour, minute, second, format) {
+ const $this = this;
+ const maxDay = new Date(year, month + 1, 0).getDate();
+ const time = new Date(
+ year,
+ month,
+ day > maxDay ? maxDay : day,
+ hour,
+ minute,
+ second
+ );
+ const t = $this.parse(time);
+ const f = $this.$parent.tf;
+ const classObj = {};
+ let flag = false;
+ if (format === 'YYYY') {
+ flag = year === $this.year;
+ } else if (format === 'YYYYMM') {
+ flag = month === $this.month;
+ } else {
+ flag = f($this.value, format) === f(time, format);
+ }
+ classObj[`${$this.pre}-date`] = true;
+ classObj[`${$this.pre}-date-disabled`] =
+ ($this.right && t < $this.start) ||
+ $this.$parent.disabledDate(time, format);
+ classObj[`${$this.pre}-date-on`] =
+ ($this.left && t > $this.start) || ($this.right && t < $this.end);
+ classObj[`${$this.pre}-date-selected`] = flag;
+ return classObj;
+ },
+ nm() {
+ if (this.month < 11) {
+ this.month++;
+ } else {
+ this.month = 0;
+ this.year++;
+ }
+ },
+ pm() {
+ if (this.month > 0) {
+ this.month--;
+ } else {
+ this.month = 11;
+ this.year--;
+ }
+ },
+ is(e) {
+ return e.target.className.indexOf(`${this.pre}-date-disabled`) === -1;
+ },
+ ok(info) {
+ const $this = this;
+ let year = '';
+ let month = '';
+ let day = '';
+ info && info.n && $this.nm();
+ info && info.p && $this.pm();
+ if (info === 'h') {
+ const time = $this.get(this.value);
+ year = time.year;
+ month = time.month;
+ } else if (info === 'm' || info === 'y') {
+ day = '1';
+ }
+ const _time = new Date(
+ year || $this.year,
+ month || $this.month,
+ day || $this.day,
+ $this.hour,
+ $this.minute,
+ $this.second
+ );
+ if ($this.left && Math.floor(_time.getTime() / 1000) > $this.end) {
+ this.$parent.dates[1] = _time;
+ }
+ $this.$emit('input', _time);
+ $this.$parent.ok(info === 'h');
+ },
+ },
+ mounted() {
const $this = this;
- const maxDay = new Date(year, month + 1, 0).getDate();
- const time = new Date(
- year,
- month,
- day > maxDay ? maxDay : day,
- hour,
- minute,
- second
- );
- const t = $this.parse(time);
- const f = $this.$parent.tf;
- const classObj = {};
- let flag = false;
- if (format === 'YYYY') {
- flag = year === $this.year;
- } else if (format === 'YYYYMM') {
- flag = month === $this.month;
- } else {
- flag = f($this.value, format) === f(time, format);
- }
- classObj[`${$this.pre}-date`] = true;
- classObj[`${$this.pre}-date-disabled`] =
- ($this.right && t < $this.start) ||
- $this.$parent.disabledDate(time, format);
- classObj[`${$this.pre}-date-on`] =
- ($this.left && t > $this.start) || ($this.right && t < $this.end);
- classObj[`${$this.pre}-date-selected`] = flag;
- return classObj;
- },
- nm() {
- if (this.month < 11) {
- this.month++;
- } else {
- this.month = 0;
- this.year++;
+ const is = c => $this.format.indexOf(c) !== -1;
+ if (is('s') && is('m') && (is('h') || is('H'))) {
+ $this.m = 'H';
+ } else if (is('D')) {
+ $this.m = 'D';
+ } else if (is('M')) {
+ $this.m = 'M';
+ $this.showMonths = true;
+ } else if (is('Y')) {
+ $this.m = 'Y';
+ $this.showYears = true;
}
},
- pm() {
- if (this.month > 0) {
- this.month--;
- } else {
- this.month = 11;
- this.year--;
- }
- },
- is(e) {
- return e.target.className.indexOf(`${this.pre}-date-disabled`) === -1;
- },
- ok(info) {
- const $this = this;
- let year = '';
- let month = '';
- let day = '';
- info && info.n && $this.nm();
- info && info.p && $this.pm();
- if (info === 'h') {
- const time = $this.get(this.value);
- year = time.year;
- month = time.month;
- } else if (info === 'm' || info === 'y') {
- day = '1';
- }
- const _time = new Date(
- year || $this.year,
- month || $this.month,
- day || $this.day,
- $this.hour,
- $this.minute,
- $this.second
- );
- if ($this.left && Math.floor(_time.getTime() / 1000) > $this.end) {
- this.$parent.dates[1] = _time;
- }
- $this.$emit('input', _time);
- $this.$parent.ok(info === 'h');
- },
- },
- mounted() {
- const $this = this;
- const is = c => $this.format.indexOf(c) !== -1;
- if (is('s') && is('m') && (is('h') || is('H'))) {
- $this.m = 'H';
- } else if (is('D')) {
- $this.m = 'D';
- } else if (is('M')) {
- $this.m = 'M';
- $this.showMonths = true;
- } else if (is('Y')) {
- $this.m = 'Y';
- $this.showYears = true;
- }
- },
-};
+ };
</script>
<style scoped>
-.calendar {
- float: left;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- color: #3d444f;
-}
-.calendar + .calendar {
- border-left: solid 1px #eaeaea;
- margin-left: 5px;
- padding-left: 5px;
-}
-.calendar-head {
- line-height: 34px;
- height: 34px;
- text-align: center;
- position: relative;
-}
+ .calendar {
+ float: left;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ color: #3d444f;
+ }
+ .calendar + .calendar {
+ border-left: solid 1px #eaeaea;
+ margin-left: 5px;
+ padding-left: 5px;
+ }
+ .calendar-head {
+ line-height: 34px;
+ height: 34px;
+ text-align: center;
+ position: relative;
+ }
-.calendar-head a {
- color: #666;
- cursor: pointer;
- display: inline-block;
- text-align: center;
- position: absolute;
- padding: 0 5px;
- font-size: 16px;
-}
+ .calendar-head a {
+ color: #666;
+ cursor: pointer;
+ display: inline-block;
+ text-align: center;
+ position: absolute;
+ padding: 0 5px;
+ font-size: 16px;
+ }
-.calendar-head a:hover {
- color: #3f97e3;
-}
+ .calendar-head a:hover {
+ color: #3f97e3;
+ }
-.calendar-head .calendar-year-select,
-.calendar-head .calendar-month-select {
- font-size: 12px;
- padding: 0 2px;
- position: relative;
-}
+ .calendar-head .calendar-year-select,
+ .calendar-head .calendar-month-select {
+ font-size: 12px;
+ padding: 0 2px;
+ position: relative;
+ }
-.calendar-prev-decade-btn,
-.calendar-prev-year-btn {
- left: 6px;
-}
+ .calendar-prev-decade-btn,
+ .calendar-prev-year-btn {
+ left: 6px;
+ }
-.calendar-prev-month-btn {
- left: 24px;
-}
+ .calendar-prev-month-btn {
+ left: 24px;
+ }
-.calendar-next-decade-btn,
-.calendar-next-year-btn {
- right: 6px;
-}
+ .calendar-next-decade-btn,
+ .calendar-next-year-btn {
+ right: 6px;
+ }
-.calendar-next-month-btn {
- right: 24px;
-}
-.calendar-next-month-btn .icon.lg, .calendar-prev-month-btn .icon.lg{
- margin-top: 8px;
-}
-.calendar-body {
- position: relative;
- width: 196px;
- height: 196px;
-}
+ .calendar-next-month-btn {
+ right: 24px;
+ }
+ .calendar-next-month-btn .icon.lg,
+ .calendar-prev-month-btn .icon.lg {
+ margin-top: 8px;
+ }
+ .calendar-body {
+ position: relative;
+ width: 196px;
+ height: 196px;
+ }
-.calendar-days {
- width: 100%;
- height: 100%;
-}
+ .calendar-days {
+ width: 100%;
+ height: 100%;
+ }
-.calendar-week,
-.calendar-date {
- font-weight: normal;
- width: 14.28%;
- height: 14.28%;
- text-align: center;
- box-sizing: border-box;
- overflow: hidden;
- float: left;
-}
+ .calendar-week,
+ .calendar-date {
+ font-weight: normal;
+ width: 14.28%;
+ height: 14.28%;
+ text-align: center;
+ box-sizing: border-box;
+ overflow: hidden;
+ float: left;
+ }
-.calendar-week:before,
-.calendar-date:before {
- content: '';
- display: inline-block;
- height: 100%;
- vertical-align: middle;
-}
+ .calendar-week:before,
+ .calendar-date:before {
+ content: '';
+ display: inline-block;
+ height: 100%;
+ vertical-align: middle;
+ }
-.calendar-date {
- cursor: pointer;
- line-height: 29px;
- transition: background-color .3s;
-}
+ .calendar-date {
+ cursor: pointer;
+ line-height: 29px;
+ transition: background-color 0.3s;
+ }
-.calendar-date-out {
- color: #ccc;
-}
+ .calendar-date-out {
+ color: #ccc;
+ }
-.calendar-date:hover,
-.calendar-date-on {
- color: #3f97e3;
- background-color: #f8f8f8;
-}
+ .calendar-date:hover,
+ .calendar-date-on {
+ color: #3f97e3;
+ background-color: #f8f8f8;
+ }
-.calendar-date-selected,
-.calendar-date-selected:hover {
- color: #fff;
- font-weight: bold;
- border-radius: 14px;
- background: #3f97e3;
-}
+ .calendar-date-selected,
+ .calendar-date-selected:hover {
+ color: #fff;
+ font-weight: bold;
+ border-radius: 14px;
+ background: #3f97e3;
+ }
-.calendar-date-disabled {
- cursor: not-allowed !important;
- color: #ccc !important;
- background: #fff !important;
-}
+ .calendar-date-disabled {
+ cursor: not-allowed !important;
+ color: #ccc !important;
+ background: #fff !important;
+ }
-.calendar-foot {
- margin-top: 5px;
-}
+ .calendar-foot {
+ margin-top: 5px;
+ }
-.calendar-hour {
- display: inline-block;
- border: 1px solid #e6e5e5;
- color: #9e9e9e;
-}
+ .calendar-hour {
+ display: inline-block;
+ border: 1px solid #e6e5e5;
+ color: #9e9e9e;
+ }
-.calendar-hour a {
- display: inline-block;
- padding: 2px 4px;
- cursor: pointer;
-}
+ .calendar-hour a {
+ display: inline-block;
+ padding: 2px 4px;
+ cursor: pointer;
+ }
-.calendar-hour a:hover,
-.calendar-hour a.on {
- color: #3f97e3;
-}
+ .calendar-hour a:hover,
+ .calendar-hour a.on {
+ color: #3f97e3;
+ }
-.calendar-years,
-.calendar-months,
-.calendar-hours,
-.calendar-minutes,
-.calendar-seconds {
- width: 100%;
- height: 100%;
- position: absolute;
- background: #fff;
- left: 0;
- top: 0;
-}
+ .calendar-years,
+ .calendar-months,
+ .calendar-hours,
+ .calendar-minutes,
+ .calendar-seconds {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ background: #fff;
+ left: 0;
+ top: 0;
+ }
-.calendar-months a {
- width: 33.33%;
- height: 25%;
-}
+ .calendar-months a {
+ width: 33.33%;
+ height: 25%;
+ }
-.calendar-years a {
- width: 33.33%;
- height: 25%;
-}
+ .calendar-years a {
+ width: 33.33%;
+ height: 25%;
+ }
-.calendar-overflow{
- overflow-x:scroll;
- height: 100%;
-}
+ .calendar-overflow {
+ overflow-x: scroll;
+ height: 100%;
+ }
-/* .calendar-hours a {
+ /* .calendar-hours a {
width: 20%;
height: 20%;
}
@@ -504,13 +612,12 @@
height: 10%;
} */
-.calendar-title {
- margin-top: -30px;
- height: 30px;
- line-height: 30px;
- background: #fff;
- text-align: center;
- font-weight: bold;
-}
+ .calendar-title {
+ margin-top: -30px;
+ height: 30px;
+ line-height: 30px;
+ background: #fff;
+ text-align: center;
+ font-weight: bold;
+ }
</style>
-
diff --git a/src/components/rk-date.vue b/src/components/rk-date.vue
index f8c3a89..16f49bb 100755
--- a/src/components/rk-date.vue
+++ b/src/components/rk-date.vue
@@ -1,472 +1,536 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
-<div class="datepicker" :class="{'datepicker-range':range,'datepicker__clearable':clearable&&text&&!disabled}">
- <!-- <svg class="icon datepicker-icon">
+ <div
+ class="datepicker"
+ :class="{
+ 'datepicker-range': range,
+ datepicker__clearable: clearable && text && !disabled,
+ }"
+ >
+ <!-- <svg class="icon datepicker-icon">
<use xlink:href="#timer"></use>
</svg> -->
- <input class="cp" readonly :value="text" :class="[show ? 'focus' : '', inputClass]" :disabled="disabled" :placeholder="placeholder" :name="name" v-if="type!=='inline'"/>
- <a class="datepicker-close" @click.stop="cls"></a>
- <transition name="datepicker-anim">
- <div class="datepicker-popup" :class="[popupClass,{'datepicker-inline':type==='inline'},position==='top'?'top':'bottom']" tabindex="-1" v-if="show||type==='inline'">
- <template v-if="range">
- <div class="datepicker-popup__sidebar">
- <button type="button" class="datepicker-popup__shortcut" @click="quickPick('quarter')">{{this.local.quarterHourCutTip}}</button>
- <button type="button" class="datepicker-popup__shortcut" @click="quickPick('half')">{{this.local.halfHourCutTip}}</button>
- <button type="button" class="datepicker-popup__shortcut" @click="quickPick('hour')">{{this.local.hourCutTip}}</button>
- <button type="button" class="datepicker-popup__shortcut" @click="quickPick('day')">{{this.local.dayCutTip}}</button>
- <button type="button" class="datepicker-popup__shortcut" @click="quickPick('week')">{{this.local.weekCutTip}}</button>
- <button type="button" class="datepicker-popup__shortcut" @click="quickPick('month')">{{this.local.monthCutTip}}</button>
+ <input
+ class="cp"
+ readonly
+ :value="text"
+ :class="[show ? 'focus' : '', inputClass]"
+ :disabled="disabled"
+ :placeholder="placeholder"
+ :name="name"
+ v-if="type !== 'inline'"
+ />
+ <a class="datepicker-close" @click.stop="cls"></a>
+ <transition name="datepicker-anim">
+ <div
+ class="datepicker-popup"
+ :class="[
+ popupClass,
+ { 'datepicker-inline': type === 'inline' },
+ position === 'top' ? 'top' : 'bottom',
+ ]"
+ tabindex="-1"
+ v-if="show || type === 'inline'"
+ >
+ <template v-if="range">
+ <div class="datepicker-popup__sidebar">
+ <button
+ type="button"
+ class="datepicker-popup__shortcut"
+ @click="quickPick('quarter')"
+ >
+ {{ this.local.quarterHourCutTip }}
+ </button>
+ <button
+ type="button"
+ class="datepicker-popup__shortcut"
+ @click="quickPick('half')"
+ >
+ {{ this.local.halfHourCutTip }}
+ </button>
+ <button
+ type="button"
+ class="datepicker-popup__shortcut"
+ @click="quickPick('hour')"
+ >
+ {{ this.local.hourCutTip }}
+ </button>
+ <button
+ type="button"
+ class="datepicker-popup__shortcut"
+ @click="quickPick('day')"
+ >
+ {{ this.local.dayCutTip }}
+ </button>
+ <button
+ type="button"
+ class="datepicker-popup__shortcut"
+ @click="quickPick('week')"
+ >
+ {{ this.local.weekCutTip }}
+ </button>
+ <button
+ type="button"
+ class="datepicker-popup__shortcut"
+ @click="quickPick('month')"
+ >
+ {{ this.local.monthCutTip }}
+ </button>
+ </div>
+ <div class="datepicker-popup__body">
+ <rk-calendar v-model="dates[0]" :left="true"></rk-calendar>
+ <rk-calendar v-model="dates[1]" :right="true"></rk-calendar>
+ </div>
+ </template>
+ <template v-else>
+ <rk-calendar v-model="dates[0]"></rk-calendar>
+ </template>
+ <div v-if="showButtons" class="datepicker__buttons">
+ <button
+ @click.prevent.stop="cancel"
+ class="datepicker__button-cancel"
+ >
+ {{ this.local.cancelTip }}
+ </button>
+ <button
+ @click.prevent.stop="submit"
+ class="datepicker__button-select"
+ >
+ {{ this.local.submitTip }}
+ </button>
</div>
- <div class="datepicker-popup__body">
- <rk-calendar v-model="dates[0]" :left="true"></rk-calendar>
- <rk-calendar v-model="dates[1]" :right="true"></rk-calendar>
- </div>
- </template>
- <template v-else>
- <rk-calendar v-model="dates[0]"></rk-calendar>
- </template>
- <div v-if="showButtons" class="datepicker__buttons">
- <button @click.prevent.stop="cancel" class="datepicker__button-cancel">{{this.local.cancelTip}}</button>
- <button @click.prevent.stop="submit" class="datepicker__button-select">{{this.local.submitTip}}</button>
</div>
- </div>
- </transition>
-</div>
+ </transition>
+ </div>
</template>
<script lang="js">
-import RkCalendar from './rk-date-calendar.vue';
-import getLocalTime from '@/utils/localtime';
-/* eslint-disable */
-/* tslint:disable */
-export default {
- name: 'VueDatepickerLocal',
- components: { RkCalendar },
- props: {
- position: { type:String, default:'bottom' },
- name: [String],
- inputClass: [String],
- popupClass: [String],
- value: [Date, Array, String],
- disabled: [Boolean],
- type: {
- type: String,
- default: 'normal',
+ import RkCalendar from './rk-date-calendar.vue';
+ import getLocalTime from '@/utils/localtime';
+ /* eslint-disable */
+ /* tslint:disable */
+ export default {
+ name: 'VueDatepickerLocal',
+ components: { RkCalendar },
+ props: {
+ position: { type:String, default:'bottom' },
+ name: [String],
+ inputClass: [String],
+ popupClass: [String],
+ value: [Date, Array, String],
+ disabled: [Boolean],
+ type: {
+ type: String,
+ default: 'normal',
+ },
+ rangeSeparator: {
+ type: String,
+ default: '~',
+ },
+ clearable: {
+ type: Boolean,
+ default: false,
+ },
+ placeholder: [String],
+ disabledDate: {
+ type: Function,
+ default: () => false,
+ },
+ format: {
+ type: String,
+ default: 'YYYY-MM-DD',
+ },
+ showButtons: {
+ type: Boolean,
+ default: false,
+ },
+ dateRangeSelect: [Function],
},
- rangeSeparator: {
- type: String,
- default: '~',
- },
- clearable: {
- type: Boolean,
- default: false,
- },
- placeholder: [String],
- disabledDate: {
- type: Function,
- default: () => false,
- },
- format: {
- type: String,
- default: 'YYYY-MM-DD',
- },
- showButtons: {
- type: Boolean,
- default: false,
- },
- dateRangeSelect: [Function],
- },
- data() {
- return {
- show: false,
- dates: [],
- };
- },
- computed: {
- local() {
+ data() {
return {
- dow: 1, // Monday is the first day of the week
- hourTip: this.$t('hourTip'), // tip of select hour
- minuteTip: this.$t('minuteTip'), // tip of select minute
- secondTip: this.$t('secondTip'), // tip of select second
- yearSuffix: this.$t('yearSuffix'), // format of head
- monthsHead: this.$t('monthsHead').split(
- '_',
- ), // months of head
- months: this.$t('months').split(
- '_',
- ), // months of panel
- weeks: this.$t('weeks').split('_'), // weeks
- cancelTip: this.$t('cancel'), // default text for cancel button
- submitTip: this.$t('confirm'), // default text for submit button
- quarterHourCutTip: this.$t('quarterHourCutTip'),
- halfHourCutTip: this.$t('halfHourCutTip'),
- hourCutTip: this.$t('hourCutTip'),
- dayCutTip: this.$t('dayCutTip'),
- weekCutTip: this.$t('weekCutTip'),
- monthCutTip: this.$t('monthCutTip'),
+ show: false,
+ dates: [],
};
},
- range() {
- return this.dates.length === 2;
+ computed: {
+ local() {
+ return {
+ dow: 1, // Monday is the first day of the week
+ hourTip: this.$t('hourTip'), // tip of select hour
+ minuteTip: this.$t('minuteTip'), // tip of select minute
+ secondTip: this.$t('secondTip'), // tip of select second
+ yearSuffix: this.$t('yearSuffix'), // format of head
+ monthsHead: this.$t('monthsHead').split(
+ '_',
+ ), // months of head
+ months: this.$t('months').split(
+ '_',
+ ), // months of panel
+ weeks: this.$t('weeks').split('_'), // weeks
+ cancelTip: this.$t('cancel'), // default text for cancel button
+ submitTip: this.$t('confirm'), // default text for submit button
+ quarterHourCutTip: this.$t('quarterHourCutTip'),
+ halfHourCutTip: this.$t('halfHourCutTip'),
+ hourCutTip: this.$t('hourCutTip'),
+ dayCutTip: this.$t('dayCutTip'),
+ weekCutTip: this.$t('weekCutTip'),
+ monthCutTip: this.$t('monthCutTip'),
+ };
+ },
+ range() {
+ return this.dates.length === 2;
+ },
+ text() {
+ const val = this.value;
+ const txt = this.dates
+ .map(date => this.tf(date))
+ .join(` ${this.rangeSeparator} `);
+ if (Array.isArray(val)) {
+ return val.length > 1 ? txt : '';
+ }
+ return val ? txt : '';
+ },
},
- text() {
- const val = this.value;
- const txt = this.dates
- .map(date => this.tf(date))
- .join(` ${this.rangeSeparator} `);
- if (Array.isArray(val)) {
- return val.length > 1 ? txt : '';
- }
- return val ? txt : '';
+ watch: {
+ value() {
+ this.dates = this.vi(this.value);
+ },
},
- },
- watch: {
- value() {
+ methods: {
+ get() {
+ return Array.isArray(this.value) ? this.dates : this.dates[0];
+ },
+ cls() {
+ this.$emit('clear');
+ this.$emit('input', this.range ? [] : '');
+ },
+ vi(val) {
+ if (Array.isArray(val)) {
+ return val.length > 1
+ ? val.map(item => new Date(item))
+ : [new Date(), new Date()];
+ }
+ return val ? [new Date(val)] : [new Date()];
+ },
+ ok(leaveOpened) {
+ this.$emit('input', this.get());
+ !leaveOpened &&
+ !this.showButtons &&
+ setTimeout(() => {
+ this.show = this.range;
+ });
+ },
+ tf(time, format) {
+ const year = time.getFullYear();
+ const month = time.getMonth();
+ const day = time.getDate();
+ const hours24 = time.getHours();
+ const hours = hours24 % 12 === 0 ? 12 : hours24 % 12;
+ const minutes = time.getMinutes();
+ const seconds = time.getSeconds();
+ const milliseconds = time.getMilliseconds();
+ const dd = t => (`0${t}`).slice(-2);
+ const map = {
+ YYYY: year,
+ MM: dd(month + 1),
+ MMM: this.local.months[month],
+ MMMM: this.local.monthsHead[month],
+ M: month + 1,
+ DD: dd(day),
+ D: day,
+ HH: dd(hours24),
+ H: hours24,
+ hh: dd(hours),
+ h: hours,
+ mm: dd(minutes),
+ m: minutes,
+ ss: dd(seconds),
+ s: seconds,
+ S: milliseconds,
+ };
+ return (format || this.format).replace(
+ /Y+|M+|D+|H+|h+|m+|s+|S+/g,
+ str => map[str],
+ );
+ },
+ dc(e) {
+ this.show = this.$el.contains(e.target) && !this.disabled;
+ },
+ quickPick(type){
+ const end = new Date();
+ const start = new Date();
+ switch (type) {
+ case 'quarter':
+ start.setTime(start.getTime() - 60 * 15 * 1000);//15 mins
+ break;
+ case 'half':
+ start.setTime(start.getTime() - 60 * 30 * 1000);//30 mins
+ break;
+ case 'hour':
+ start.setTime(start.getTime() - 3600 * 1000);//1 hour
+ break;
+ case 'day':
+ start.setTime(start.getTime() - 3600 * 1000 * 24);//1 day
+ break;
+ case 'week':
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);//1 week
+ break;
+ case 'month':
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);//1 month
+ break;
+ default:
+ break;
+ }
+ this.dates = [start, end];
+ this.$emit('input', this.get());
+ },
+ submit() {
+ this.$emit('confirm', this.get());
+ this.show = false;
+ },
+ cancel() {
+ this.$emit('cancel');
+ this.show = false;
+ },
+ },
+ mounted() {
this.dates = this.vi(this.value);
+ document.addEventListener('click', this.dc, true);
},
- },
- methods: {
- get() {
- return Array.isArray(this.value) ? this.dates : this.dates[0];
+ beforeDestroy() {
+ document.removeEventListener('click', this.dc, true);
},
- cls() {
- this.$emit('clear');
- this.$emit('input', this.range ? [] : '');
- },
- vi(val) {
- if (Array.isArray(val)) {
- return val.length > 1
- ? val.map(item => new Date(item))
- : [new Date(), new Date()];
- }
- return val ? [new Date(val)] : [new Date()];
- },
- ok(leaveOpened) {
- this.$emit('input', this.get());
- !leaveOpened &&
- !this.showButtons &&
- setTimeout(() => {
- this.show = this.range;
- });
- },
- tf(time, format) {
- const year = time.getFullYear();
- const month = time.getMonth();
- const day = time.getDate();
- const hours24 = time.getHours();
- const hours = hours24 % 12 === 0 ? 12 : hours24 % 12;
- const minutes = time.getMinutes();
- const seconds = time.getSeconds();
- const milliseconds = time.getMilliseconds();
- const dd = t => (`0${t}`).slice(-2);
- const map = {
- YYYY: year,
- MM: dd(month + 1),
- MMM: this.local.months[month],
- MMMM: this.local.monthsHead[month],
- M: month + 1,
- DD: dd(day),
- D: day,
- HH: dd(hours24),
- H: hours24,
- hh: dd(hours),
- h: hours,
- mm: dd(minutes),
- m: minutes,
- ss: dd(seconds),
- s: seconds,
- S: milliseconds,
- };
- return (format || this.format).replace(
- /Y+|M+|D+|H+|h+|m+|s+|S+/g,
- str => map[str],
- );
- },
- dc(e) {
- this.show = this.$el.contains(e.target) && !this.disabled;
- },
- quickPick(type){
- const end = new Date();
- const start = new Date();
- switch (type) {
- case 'quarter':
- start.setTime(start.getTime() - 60 * 15 * 1000);//15 mins
- break;
- case 'half':
- start.setTime(start.getTime() - 60 * 30 * 1000);//30 mins
- break;
- case 'hour':
- start.setTime(start.getTime() - 3600 * 1000);//1 hour
- break;
- case 'day':
- start.setTime(start.getTime() - 3600 * 1000 * 24);//1 day
- break;
- case 'week':
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);//1 week
- break;
- case 'month':
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);//1 month
- break;
- default:
- break;
- }
- this.dates = [start, end];
- this.$emit('input', this.get());
- },
- submit() {
- this.$emit('confirm', this.get());
- this.show = false;
- },
- cancel() {
- this.$emit('cancel');
- this.show = false;
- },
- },
- mounted() {
- this.dates = this.vi(this.value);
- document.addEventListener('click', this.dc, true);
- },
- beforeDestroy() {
- document.removeEventListener('click', this.dc, true);
- },
-};
+ };
</script>
<style lang="scss" scoped>
-.datepicker {
- display: inline-block;
- position: relative;
- // color: #3d444f;
-}
-
-.datepicker-icon {
- display: block;
- position: absolute;
- top: 8px;
- left: 8px;
- color: #515a6ecc;
-}
-
-.datepicker-close {
- display: none;
- position: absolute;
- width: 34px;
- height: 100%;
- top: 0;
- right: 0;
- cursor: pointer;
-}
-
-.datepicker-close:before {
- display: block;
- content: '';
- position: absolute;
- width: 16px;
- height: 16px;
- left: 50%;
- top: 50%;
- margin-left: -8px;
- margin-top: -8px;
- text-align: center;
- background: #ccc;
- color: #fff;
- border-radius: 50%;
- background: #ccc
- url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3IDciIHdpZHRoPSI3IiBoZWlnaHQ9IjciPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik01LjU4LDVsMi44LTIuODFBLjQxLjQxLDAsMSwwLDcuOCwxLjZMNSw0LjQxLDIuMiwxLjZhLjQxLjQxLDAsMCwwLS41OC41OGgwTDQuNDIsNSwxLjYyLDcuOGEuNDEuNDEsMCwwLDAsLjU4LjU4TDUsNS41OCw3LjgsOC4zOWEuNDEuNDEsMCwwLDAsLjU4LS41OGgwWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEuNSAtMS40OCkiIHN0eWxlPSJmaWxsOiNmZmYiLz48L3N2Zz4NCg==')
- no-repeat 50% 50%;
-}
-
-.datepicker__clearable:hover:before {
- display: none;
-}
-.datepicker__clearable:hover .datepicker-close {
- display: block;
-}
-
-.datepicker-close:hover:before {
- background-color: #afafaf;
-}
-
-.datepicker > input {
- color: inherit;
- // transition: all 200ms ease;
- border-radius: 4px;
- border: 0;
- background: none;
- height: 28px;
- box-sizing: border-box;
- outline: none;
- padding: 0 5px;
- width: 100%;
- user-select: none;
- font-family: Monaco;
- letter-spacing: -0.7px;
-}
-
-// .datepicker > input.focus {
-// border-color: #3f97e3;
-// -webkit-box-shadow: 0 0 5px rgba(59, 180, 242, 0.3);
-// box-shadow: 0 0 5px rgba(59, 180, 242, 0.3);
-// }
-
-.datepicker > input:disabled {
- cursor: not-allowed;
- background-color: #ebebe4;
- border-color: #e5e5e5;
- -webkit-box-shadow: none;
- box-shadow: none;
-}
-
-.datepicker-popup {
- right: 0px;
- border-radius: 4px;
- position: absolute;
- transition: all 200ms ease;
- opacity: 1;
- transform: scaleY(1);
- font-size: 12px;
- background: #fff;
- box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
- margin-top: 2px;
- outline: 0;
- padding: 5px;
- overflow: hidden;
- z-index: 999;
- &.top{
- bottom:35px;
- transform-origin: center bottom;
+ .datepicker {
+ display: inline-block;
+ position: relative;
+ // color: #3d444f;
}
- &.bottom{
- top:35px;
- transform-origin: center top;
- }
- &__sidebar{
- position: absolute;
- top: 0;
- bottom: 0;
- width:100px;
- height: 100%;
- padding: 5px;
- border-right: solid 1px #eaeaea;
- }
- &__shortcut{
+
+ .datepicker-icon {
display: block;
- width: 100%;
- border: 0;
- background-color: transparent;
- line-height: 34px;
- font-size: 12px;
- color: #666;
- text-align: left;
- outline: none;
+ position: absolute;
+ top: 8px;
+ left: 8px;
+ color: #515a6ecc;
+ }
+
+ .datepicker-close {
+ display: none;
+ position: absolute;
+ width: 34px;
+ height: 100%;
+ top: 0;
+ right: 0;
cursor: pointer;
- white-space: nowrap;
- &:hover{
- color: #3f97e3;
+ }
+
+ .datepicker-close:before {
+ display: block;
+ content: '';
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ left: 50%;
+ top: 50%;
+ margin-left: -8px;
+ margin-top: -8px;
+ text-align: center;
+ background: #ccc;
+ color: #fff;
+ border-radius: 50%;
+ background: #ccc
+ url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3IDciIHdpZHRoPSI3IiBoZWlnaHQ9IjciPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik01LjU4LDVsMi44LTIuODFBLjQxLjQxLDAsMSwwLDcuOCwxLjZMNSw0LjQxLDIuMiwxLjZhLjQxLjQxLDAsMCwwLS41OC41OGgwTDQuNDIsNSwxLjYyLDcuOGEuNDEuNDEsMCwwLDAsLjU4LjU4TDUsNS41OCw3LjgsOC4zOWEuNDEuNDEsMCwwLDAsLjU4LS41OGgwWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEuNSAtMS40OCkiIHN0eWxlPSJmaWxsOiNmZmYiLz48L3N2Zz4NCg==')
+ no-repeat 50% 50%;
+ }
+
+ .datepicker__clearable:hover:before {
+ display: none;
+ }
+ .datepicker__clearable:hover .datepicker-close {
+ display: block;
+ }
+
+ .datepicker-close:hover:before {
+ background-color: #afafaf;
+ }
+
+ .datepicker > input {
+ color: inherit;
+ // transition: all 200ms ease;
+ border-radius: 4px;
+ border: 0;
+ background: none;
+ height: 28px;
+ box-sizing: border-box;
+ outline: none;
+ padding: 0 5px;
+ width: 100%;
+ user-select: none;
+ font-family: Monaco;
+ letter-spacing: -0.7px;
+ }
+
+ // .datepicker > input.focus {
+ // border-color: #3f97e3;
+ // -webkit-box-shadow: 0 0 5px rgba(59, 180, 242, 0.3);
+ // box-shadow: 0 0 5px rgba(59, 180, 242, 0.3);
+ // }
+
+ .datepicker > input:disabled {
+ cursor: not-allowed;
+ background-color: #ebebe4;
+ border-color: #e5e5e5;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ }
+
+ .datepicker-popup {
+ right: 0px;
+ border-radius: 4px;
+ position: absolute;
+ transition: all 200ms ease;
+ opacity: 1;
+ transform: scaleY(1);
+ font-size: 12px;
+ background: #fff;
+ box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
+ margin-top: 2px;
+ outline: 0;
+ padding: 5px;
+ overflow: hidden;
+ z-index: 999;
+ &.top {
+ bottom: 35px;
+ transform-origin: center bottom;
+ }
+ &.bottom {
+ top: 35px;
+ transform-origin: center top;
+ }
+ &__sidebar {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: 100px;
+ height: 100%;
+ padding: 5px;
+ border-right: solid 1px #eaeaea;
+ }
+ &__shortcut {
+ display: block;
+ width: 100%;
+ border: 0;
+ background-color: transparent;
+ line-height: 34px;
+ font-size: 12px;
+ color: #666;
+ text-align: left;
+ outline: none;
+ cursor: pointer;
+ white-space: nowrap;
+ &:hover {
+ color: #3f97e3;
+ }
+ }
+ &__body {
+ margin-left: 100px;
+ padding-left: 5px;
}
}
- &__body{
- margin-left: 100px;
- padding-left: 5px;
+
+ .datepicker-inline {
+ position: relative;
+ margin-top: 0;
}
-}
-.datepicker-inline {
- position: relative;
- margin-top: 0;
-}
-
-.datepicker-range {
- min-width: 280px;
-}
-
-.datepicker-range .datepicker-popup {
- width:520px;
-}
-
-.datepicker-bottom {
- float: left;
- width: 100%;
- text-align: right;
-}
-
-.datepicker-btn {
- padding: 5px 10px;
- background: #3f97e3;
- color: #fff;
- border-radius: 2px;
- display: inline-block;
- cursor: pointer;
-}
-.datepicker-anim-enter-active {
- transform-origin: 0 0;
- animation: datepicker-anim-in 0.2s cubic-bezier(0.23, 1, 0.32, 1);
-}
-
-.datepicker-anim-leave-active {
- transform-origin: 0 0;
- animation: datepicker-anim-out 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06);
-}
-
-.datepicker__buttons {
- display: block;
- text-align: right;
-}
-
-.datepicker__buttons button {
- display: inline-block;
- font-size: 13px;
- border: none;
- cursor: pointer;
- margin: 10px 0 0 5px;
- padding: 5px 15px;
- color: #ffffff;
-}
-
-.datepicker__buttons .datepicker__button-select {
- background: #3f97e3;
-}
-
-.datepicker__buttons .datepicker__button-cancel {
- background: #666;
-}
-
-@keyframes datepicker-anim-in {
- 0% {
- opacity: 0;
- transform: scaleY(0.8);
+ .datepicker-range {
+ min-width: 280px;
}
- to {
- opacity: 1;
- transform: scaleY(1);
- }
-}
-@keyframes datepicker-anim-out {
- 0% {
- opacity: 1;
- transform: scaleY(1);
+ .datepicker-range .datepicker-popup {
+ width: 520px;
}
- to {
- opacity: 0;
- transform: scaleY(0.8);
+
+ .datepicker-bottom {
+ float: left;
+ width: 100%;
+ text-align: right;
}
-}
+
+ .datepicker-btn {
+ padding: 5px 10px;
+ background: #3f97e3;
+ color: #fff;
+ border-radius: 2px;
+ display: inline-block;
+ cursor: pointer;
+ }
+ .datepicker-anim-enter-active {
+ transform-origin: 0 0;
+ animation: datepicker-anim-in 0.2s cubic-bezier(0.23, 1, 0.32, 1);
+ }
+
+ .datepicker-anim-leave-active {
+ transform-origin: 0 0;
+ animation: datepicker-anim-out 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ }
+
+ .datepicker__buttons {
+ display: block;
+ text-align: right;
+ }
+
+ .datepicker__buttons button {
+ display: inline-block;
+ font-size: 13px;
+ border: none;
+ cursor: pointer;
+ margin: 10px 0 0 5px;
+ padding: 5px 15px;
+ color: #ffffff;
+ }
+
+ .datepicker__buttons .datepicker__button-select {
+ background: #3f97e3;
+ }
+
+ .datepicker__buttons .datepicker__button-cancel {
+ background: #666;
+ }
+
+ @keyframes datepicker-anim-in {
+ 0% {
+ opacity: 0;
+ transform: scaleY(0.8);
+ }
+ to {
+ opacity: 1;
+ transform: scaleY(1);
+ }
+ }
+
+ @keyframes datepicker-anim-out {
+ 0% {
+ opacity: 1;
+ transform: scaleY(1);
+ }
+ to {
+ opacity: 0;
+ transform: scaleY(0.8);
+ }
+ }
</style>
diff --git a/src/components/rk-dropdown-item.vue b/src/components/rk-dropdown-item.vue
index a766f54..e78da01 100644
--- a/src/components/rk-dropdown-item.vue
+++ b/src/components/rk-dropdown-item.vue
@@ -1,58 +1,55 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
- <div class="rk-dropdown-item" :class="{'active': (value === active && active)}">
+ <div class="rk-dropdown-item" :class="{ active: value === active && active }">
<div class="ell" v-if="!show">
<svg v-if="detail" class="icon sm r" @click.stop="show = !show">
<use xlink:href="#code"></use>
</svg>
- {{value}}</div>
+ {{ value }}
+ </div>
<div v-else>
<svg v-if="detail" class="icon sm r" @click.stop="show = !show">
<use xlink:href="#code"></use>
</svg>
- {{value}}</div>
+ {{ value }}
+ </div>
</div>
</template>
<script lang="ts">
-import Vue from 'vue';
-import { Component, Prop } from 'vue-property-decorator';
+ import Vue from 'vue';
+ import { Component, Prop } from 'vue-property-decorator';
-@Component({})
-export default class RkDropdownItem extends Vue {
- @Prop({ default: false }) private detail!: boolean;
- @Prop() private active!: string | number;
- @Prop() private value!: string | number;
- private show: boolean = false;
-}
+ @Component({})
+ export default class RkDropdownItem extends Vue {
+ @Prop({ default: false }) private detail!: boolean;
+ @Prop() private active!: string | number;
+ @Prop() private value!: string | number;
+ private show: boolean = false;
+ }
</script>
<style lang="scss">
-.rk-dropdown-item{
- padding: 7px 15px;
- cursor: pointer;
- user-select: none;
- .icon{
- margin-top: 3px;
+ .rk-dropdown-item {
+ padding: 7px 15px;
+ cursor: pointer;
+ user-select: none;
+ .icon {
+ margin-top: 3px;
+ }
+ &:hover,
+ &.active {
+ background-color: #40454e;
+ }
}
- &:hover, &.active{
- background-color: #40454e;
- }
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/rk-dropdown.vue b/src/components/rk-dropdown.vue
index 31f901d..36e61b3 100644
--- a/src/components/rk-dropdown.vue
+++ b/src/components/rk-dropdown.vue
@@ -1,80 +1,86 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
<rk-popper ref="popper" :trigger="trigger" :forceShow="show">
<span slot="reference"><slot></slot></span>
<div class="rk-dropdown" :style="`width:${width}`">
- <input v-model="searchString" type="text" placeholder="搜索..." class="rk-dropdown-search">
- <RkDropdownItem v-for="i in searchResult" :key="i.name" @click.native="handleClick(i)" :detail="true" :value="i.name"/>
+ <input
+ v-model="searchString"
+ type="text"
+ placeholder="搜索..."
+ class="rk-dropdown-search"
+ />
+ <RkDropdownItem
+ v-for="i in searchResult"
+ :key="i.name"
+ @click.native="handleClick(i)"
+ :detail="true"
+ :value="i.name"
+ />
</div>
</rk-popper>
</template>
<script lang="ts">
-import RkDropdownItem from './rk-dropdown-item.vue';
-import Vue from 'vue';
-import { Component, Prop, PropSync, Ref } from 'vue-property-decorator';
+ import RkDropdownItem from './rk-dropdown-item.vue';
+ import Vue from 'vue';
+ import { Component, Prop, PropSync, Ref } from 'vue-property-decorator';
-interface Option {
- value: string | number;
- name: string | number;
-}
+ interface Option {
+ value: string | number;
+ name: string | number;
+ }
-@Component({
- components: { RkDropdownItem },
-})
-export default class RkDropdown extends Vue {
- @Ref('popper') private readonly popper!: any;
- @Prop({ default: 'click' }) private trigger!: string;
- @Prop({ default: '180px' }) private width!: string;
- @Prop({ default: false }) private show!: boolean;
- @Prop({ default: false }) private search!: boolean;
- @Prop({ default: () => [] }) private options!: Option[];
- private searchString: string = '';
- private get searchResult() {
- return this.options.filter((item: Option) =>
- `${item.name}`.indexOf(this.searchString) !== -1);
+ @Component({
+ components: { RkDropdownItem },
+ })
+ export default class RkDropdown extends Vue {
+ @Ref('popper') private readonly popper!: any;
+ @Prop({ default: 'click' }) private trigger!: string;
+ @Prop({ default: '180px' }) private width!: string;
+ @Prop({ default: false }) private show!: boolean;
+ @Prop({ default: false }) private search!: boolean;
+ @Prop({ default: () => [] }) private options!: Option[];
+ private searchString: string = '';
+ private get searchResult() {
+ return this.options.filter(
+ (item: Option) => `${item.name}`.indexOf(this.searchString) !== -1,
+ );
+ }
+ private handleClick(i: Option) {
+ this.$emit('click', i);
+ this.popper.doClose();
+ }
}
- private handleClick(i: Option) {
- this.$emit('click', i);
- this.popper.doClose();
- }
-}
</script>
<style lang="scss">
-.rk-dropdown{
- color: #efefef;
- box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
- background-color: #252a2f;
- border-radius: 3px;
- overflow: auto;
- max-height: 200px;
- padding-bottom: 2px;
- &-search{
- width: calc(100% - 4px);
- border: 0;
- background-color: #333840;
- color: #eee;
- outline: 0;
- padding: 5px 25px 5px 10px;
- margin: 2px;
+ .rk-dropdown {
+ color: #efefef;
+ box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
+ background-color: #252a2f;
border-radius: 3px;
+ overflow: auto;
+ max-height: 200px;
+ padding-bottom: 2px;
+ &-search {
+ width: calc(100% - 4px);
+ border: 0;
+ background-color: #333840;
+ color: #eee;
+ outline: 0;
+ padding: 5px 25px 5px 10px;
+ margin: 2px;
+ border-radius: 3px;
+ }
}
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/rk-echarts.vue b/src/components/rk-echarts.vue
index 74f7b13..18d43ef 100644
--- a/src/components/rk-echarts.vue
+++ b/src/components/rk-echarts.vue
@@ -1,70 +1,62 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
<div class="echarts" :style="`height:${height};width:${width};`"></div>
</template>
<script lang="ts">
-import Vue from 'vue';
-import { Component, Prop, Watch } from 'vue-property-decorator';
-import echarts from 'echarts/lib/echarts';
-import { Action } from 'vuex-class';
-@Component
-export default class RkEcharts extends Vue {
- @Prop() private option: any;
- @Prop() private clickEvent: any;
- @Prop({ default: false }) private uncombine!: boolean;
- @Prop({ default: '100%' }) private height!: string;
- @Prop({default: '100%' }) private width!: string;
- @Action('CLEAR_CHARTS') private CLEAR_CHARTS: any;
- private myChart: any = {};
- private mounted(): void {
- this.drawEcharts();
- window.addEventListener('resize', this.myChart.resize);
-
- }
- private beforeDestroy(): void {
- if (this.myChart.dispose) {
- this.myChart.dispose();
- }
- window.removeEventListener('resize', this.myChart.resize);
- }
- @Watch('option', { deep: true })
- private onoptionChanged(newVal: any, oldVal: any): void {
- if (this.myChart) {
- if (newVal) {
- this.myChart.setOption(newVal, true); // clear cache
- } else {
- this.myChart.setOption(oldVal, true);
- }
- } else {
+ import Vue from 'vue';
+ import { Component, Prop, Watch } from 'vue-property-decorator';
+ import echarts from 'echarts/lib/echarts';
+ import { Action } from 'vuex-class';
+ @Component
+ export default class RkEcharts extends Vue {
+ @Prop() private option: any;
+ @Prop() private clickEvent: any;
+ @Prop({ default: false }) private uncombine!: boolean;
+ @Prop({ default: '100%' }) private height!: string;
+ @Prop({ default: '100%' }) private width!: string;
+ @Action('CLEAR_CHARTS') private CLEAR_CHARTS: any;
+ private myChart: any = {};
+ private mounted(): void {
this.drawEcharts();
+ window.addEventListener('resize', this.myChart.resize);
+ }
+ private beforeDestroy(): void {
+ if (this.myChart.dispose) {
+ this.myChart.dispose();
+ }
+ window.removeEventListener('resize', this.myChart.resize);
+ }
+ @Watch('option', { deep: true })
+ private onoptionChanged(newVal: any, oldVal: any): void {
+ if (this.myChart) {
+ if (newVal) {
+ this.myChart.setOption(newVal, true); // clear cache
+ } else {
+ this.myChart.setOption(oldVal, true);
+ }
+ } else {
+ this.drawEcharts();
+ }
+ }
+ private drawEcharts(): void {
+ const el: any = this.$el;
+ this.myChart = echarts.init(el, '');
+ this.myChart.setOption(this.option);
+ this.myChart.on('click', (params: any) => {
+ this.clickEvent(params);
+ });
}
}
- private drawEcharts(): void {
- const el: any = this.$el;
- this.myChart = echarts.init(el, '');
- this.myChart.setOption(this.option);
- this.myChart.on('click', (params: any) => {
- this.clickEvent(params);
- });
- }
-}
</script>
-<style>
-</style>
+<style></style>
diff --git a/src/components/rk-footer-time.vue b/src/components/rk-footer-time.vue
index 66ae100..ce6e280 100644
--- a/src/components/rk-footer-time.vue
+++ b/src/components/rk-footer-time.vue
@@ -1,42 +1,43 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
- <RkDate class="mr-10" v-model="time" position="top" format="YYYY-MM-DD HH:mm:ss"/>
+ <RkDate
+ class="mr-10"
+ v-model="time"
+ position="top"
+ format="YYYY-MM-DD HH:mm:ss"
+ />
</template>
<script lang="ts">
-import timeFormat from '@/utils/timeFormat';
+ import timeFormat from '@/utils/timeFormat';
-export default {
- computed: {
- time: {
- get() {
- const that: any = this;
- return [that.$store.state.rocketbot.durationRow.start, that.$store.state.rocketbot.durationRow.end];
- },
- set(val: Date[]) {
- const that: any = this;
- that.$store.dispatch('SET_DURATION', timeFormat(val));
+ export default {
+ computed: {
+ time: {
+ get() {
+ const that: any = this;
+ return [
+ that.$store.state.rocketbot.durationRow.start,
+ that.$store.state.rocketbot.durationRow.end,
+ ];
+ },
+ set(val: Date[]) {
+ const that: any = this;
+ that.$store.dispatch('SET_DURATION', timeFormat(val));
+ },
},
},
- },
-};
+ };
</script>
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/src/components/rk-footer.vue b/src/components/rk-footer.vue
index 37eaac7..a3a640d 100644
--- a/src/components/rk-footer.vue
+++ b/src/components/rk-footer.vue
@@ -1,96 +1,114 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
- <footer class="rk-footer trans" :class="{'rk-footer-dark': $route.path === '/topology'}">
+ <footer
+ class="rk-footer trans"
+ :class="{ 'rk-footer-dark': $route.path === '/topology' }"
+ >
<div class="rk-footer-inner">
- <div class="flex-h">
- </div>
+ <div class="flex-h"></div>
<div class="sm flex-h">
- <RkFooterTime/>
- <span class="mr-15 cp" @click="setLang">{{lang === 'zh' ? '中' : 'En'}}</span>
- <span>{{$t('serverZone')}} UTC {{utc >= 0 ? '+' : ''}}</span><input v-model="utc" min='-12' max="14" class="rk-footer-utc" type="number">
+ <RkFooterTime />
+ <span class="mr-15 cp" @click="setLang">{{
+ lang === 'zh' ? '中' : 'En'
+ }}</span>
+ <span>{{ $t('serverZone') }} UTC {{ utc >= 0 ? '+' : '' }}</span
+ ><input
+ v-model="utc"
+ min="-12"
+ max="14"
+ class="rk-footer-utc"
+ type="number"
+ />
</div>
</div>
</footer>
</template>
<script lang="ts">
-import { Duration } from '@/types/global';
-import { Vue, Component, Watch } from 'vue-property-decorator';
-import { State, Action, Mutation } from 'vuex-class';
-import timeFormat from '@/utils/timeFormat';
+ import { Duration } from '@/types/global';
+ import { Vue, Component, Watch } from 'vue-property-decorator';
+ import { State, Action, Mutation } from 'vuex-class';
+ import timeFormat from '@/utils/timeFormat';
-@Component
-export default class Footerssd extends Vue {
- @State('rocketbot') private rocketbotGlobal: any;
- @Action('SET_DURATION') private SET_DURATION: any;
- @Action('SET_UTC') private SET_UTC: any;
- private lang: any = '';
- private utc: any = window.localStorage.getItem('utc') || -(new Date().getTimezoneOffset() / 60);
- @Watch('utc')
- private onUtcUpdate() {
- if (this.utc < -12) { this.utc = -12; }
- if (this.utc > 14) { this.utc = 14; }
- if (this.utc === '') { this.utc = 0; }
- this.SET_UTC(this.utc);
- window.localStorage.setItem('utc', this.utc.toString());
- }
- private setLang() {
- if (this.lang === 'zh') {
- this.$i18n.locale = 'en';
- window.localStorage.setItem('lang', 'en');
- this.lang = 'en';
- } else {
- this.$i18n.locale = 'zh';
- window.localStorage.setItem('lang', 'zh');
- this.lang = 'zh';
+ @Component
+ export default class Footerssd extends Vue {
+ @State('rocketbot') private rocketbotGlobal: any;
+ @Action('SET_DURATION') private SET_DURATION: any;
+ @Action('SET_UTC') private SET_UTC: any;
+ private lang: any = '';
+ private utc: any =
+ window.localStorage.getItem('utc') ||
+ -(new Date().getTimezoneOffset() / 60);
+ @Watch('utc')
+ private onUtcUpdate() {
+ if (this.utc < -12) {
+ this.utc = -12;
+ }
+ if (this.utc > 14) {
+ this.utc = 14;
+ }
+ if (this.utc === '') {
+ this.utc = 0;
+ }
+ this.SET_UTC(this.utc);
+ window.localStorage.setItem('utc', this.utc.toString());
+ }
+ private setLang() {
+ if (this.lang === 'zh') {
+ this.$i18n.locale = 'en';
+ window.localStorage.setItem('lang', 'en');
+ this.lang = 'en';
+ } else {
+ this.$i18n.locale = 'zh';
+ window.localStorage.setItem('lang', 'zh');
+ this.lang = 'zh';
+ }
+ }
+ private beforeMount() {
+ this.lang = window.localStorage.getItem('lang');
}
}
- private beforeMount() {
- this.lang = window.localStorage.getItem('lang');
- }
-}
</script>
<style scoped>
-.rk-footer {
- color: #515a6e;
- flex-shrink: 0;
- padding-right: 15px;
- padding-left: 15px;
- padding-bottom: 1px;
- box-shadow: 0 -1px 0px rgba(0, 0, 0, 0.08);
-}
-.rk-footer-dark {
- color: #ddd;
- background:#252a2f;
- border-top: 1px solid #252a2f;
-}
-.rk-footer-edit {
- color: #eee;
- background:#448dfe;
- border-top: 1px solid #448dfe;
-}
-.rk-footer-utc{
- color:inherit;background: 0;border: 0;outline: none; width:27px;padding-bottom: 0;
-}
-.rk-footer-inner{
- justify-content: space-between;
- display: flex;
-}
+ .rk-footer {
+ color: #515a6e;
+ flex-shrink: 0;
+ padding-right: 15px;
+ padding-left: 15px;
+ padding-bottom: 1px;
+ box-shadow: 0 -1px 0px rgba(0, 0, 0, 0.08);
+ }
+ .rk-footer-dark {
+ color: #ddd;
+ background: #252a2f;
+ border-top: 1px solid #252a2f;
+ }
+ .rk-footer-edit {
+ color: #eee;
+ background: #448dfe;
+ border-top: 1px solid #448dfe;
+ }
+ .rk-footer-utc {
+ color: inherit;
+ background: 0;
+ border: 0;
+ outline: none;
+ width: 27px;
+ padding-bottom: 0;
+ }
+ .rk-footer-inner {
+ justify-content: space-between;
+ display: flex;
+ }
</style>
diff --git a/src/components/rk-header.vue b/src/components/rk-header.vue
index c493e35..36a7a9c 100644
--- a/src/components/rk-header.vue
+++ b/src/components/rk-header.vue
@@ -1,19 +1,13 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
<header class="rk-header flex-h">
@@ -26,164 +20,173 @@
<svg class="icon sm vm">
<use xlink:href="#chart"></use>
</svg>
- <span class="vm hide-xs ml-5">{{this.$t('dashboard')}}</span>
+ <span class="vm hide-xs ml-5">{{ this.$t('dashboard') }}</span>
</router-link>
<router-link class="nav-link mr-20" to="/topology">
<svg class="icon sm vm">
<use xlink:href="#issues"></use>
</svg>
- <span class="vm hide-xs ml-5">{{this.$t('topology')}}</span>
+ <span class="vm hide-xs ml-5">{{ this.$t('topology') }}</span>
</router-link>
<router-link class="nav-link mr-20" to="/trace">
<svg class="icon sm vm">
<use xlink:href="#merge"></use>
</svg>
- <span class="vm hide-xs ml-5">{{this.$t('trace')}}</span>
+ <span class="vm hide-xs ml-5">{{ this.$t('trace') }}</span>
</router-link>
<router-link class="nav-link mr-20" to="/alarm">
<svg class="icon sm vm">
<use xlink:href="#spam"></use>
</svg>
- <span class="vm hide-xs ml-5">{{this.$t('alarm')}}</span>
+ <span class="vm hide-xs ml-5">{{ this.$t('alarm') }}</span>
</router-link>
<router-link class="nav-link mr-20" to="/comparison">
<svg class="icon sm vm">
<use xlink:href="#chart"></use>
</svg>
- <span class="vm hide-xs ml-5">{{this.$t('comparison')}}</span>
+ <span class="vm hide-xs ml-5">{{ this.$t('comparison') }}</span>
</router-link>
</div>
<div class="flex-h">
- <a class="rk-btn mr-5 sm" :class="auto?'blue':'ghost'" @click="handleAuto">
- <span class="vm">{{this.$t('auto')}}</span>
+ <a
+ class="rk-btn mr-5 sm"
+ :class="auto ? 'blue' : 'ghost'"
+ @click="handleAuto"
+ >
+ <span class="vm">{{ this.$t('auto') }}</span>
</a>
<div class="auto-time">
<span class="rk-auto-select">
- <input v-model="autoTime" type="number" @change="changeAutoTime" min="1">
+ <input
+ v-model="autoTime"
+ type="number"
+ @change="changeAutoTime"
+ min="1"
+ />
</span>
- {{this.$t('second')}}
+ {{ this.$t('second') }}
</div>
<a class="rk-btn sm ghost" @click="handleReload">
- <svg class="icon mr-5 vm" :class="{'loading': auto}">
+ <svg class="icon mr-5 vm" :class="{ loading: auto }">
<use xlink:href="#retry"></use>
</svg>
- <span class="vm">{{this.$t('reload')}}</span>
+ <span class="vm">{{ this.$t('reload') }}</span>
</a>
- </div>
+ </div>
</header>
</template>
<script lang="ts">
-import { Vue, Component } from 'vue-property-decorator';
-import { Action, State, Getter } from 'vuex-class';
-import timeFormat from '@/utils/timeFormat';
+ import { Vue, Component } from 'vue-property-decorator';
+ import { Action, State, Getter } from 'vuex-class';
+ import timeFormat from '@/utils/timeFormat';
-@Component
-export default class Header extends Vue {
- @Getter('duration') private duration: any;
- @Action('SET_DURATION') private SET_DURATION: any;
- private show: boolean = false;
- private auto: boolean = false;
- private autoTime: number = 6;
- private timer: any = null;
- private handleReload() {
- const gap = this.duration.end.getTime() - this.duration.start.getTime();
- const utcCopy: any = -(new Date().getTimezoneOffset() / 60);
- const time: Date[] = [new Date(new Date().getTime() - gap), new Date()];
- this.SET_DURATION(timeFormat(time));
- }
- private handleAuto() {
- this.auto = !this.auto;
- if (this.auto) {
- this.handleReload();
- this.timer = setInterval(this.handleReload, this.autoTime * 1000);
- } else {
+ @Component
+ export default class Header extends Vue {
+ @Getter('duration') private duration: any;
+ @Action('SET_DURATION') private SET_DURATION: any;
+ private show: boolean = false;
+ private auto: boolean = false;
+ private autoTime: number = 6;
+ private timer: any = null;
+ private handleReload() {
+ const gap = this.duration.end.getTime() - this.duration.start.getTime();
+ const utcCopy: any = -(new Date().getTimezoneOffset() / 60);
+ const time: Date[] = [new Date(new Date().getTime() - gap), new Date()];
+ this.SET_DURATION(timeFormat(time));
+ }
+ private handleAuto() {
+ this.auto = !this.auto;
+ if (this.auto) {
+ this.handleReload();
+ this.timer = setInterval(this.handleReload, this.autoTime * 1000);
+ } else {
+ clearInterval(this.timer);
+ }
+ }
+ private handleHide() {
+ this.show = false;
+ }
+ private handleShow() {
+ this.show = !this.show;
+ }
+ private handleSignout() {
+ localStorage.removeItem('skywalking-authority');
+ this.$router.push('/login');
+ }
+ private changeAutoTime() {
clearInterval(this.timer);
+ if (this.auto) {
+ this.handleReload();
+ this.timer = setInterval(this.handleReload, this.autoTime * 1000);
+ }
}
}
- private handleHide() {
- this.show = false;
- }
- private handleShow() {
- this.show = !this.show;
- }
- private handleSignout() {
- localStorage.removeItem('skywalking-authority');
- this.$router.push('/login');
- }
- private changeAutoTime() {
- clearInterval(this.timer);
- if (this.auto) {
- this.handleReload();
- this.timer = setInterval(this.handleReload, this.autoTime * 1000);
- }
- }
-}
</script>
<style lang="scss" scoped>
-.rk-header {
- flex-shrink: 0;
- justify-content: space-between;
- height: 48px;
- padding-right: 15px;
- padding-left: 15px;
- font-size: 13px;
- color: #efefef;
- z-index: 9;
- background-color: #252a2f;
- box-shadow: 0 1px 2px 0 rgba(26, 24, 29, 0.24);
- .svg-logo {
- width: 90px;
- height: 22px;
+ .rk-header {
+ flex-shrink: 0;
+ justify-content: space-between;
+ height: 48px;
+ padding-right: 15px;
+ padding-left: 15px;
+ font-size: 13px;
+ color: #efefef;
+ z-index: 9;
+ background-color: #252a2f;
+ box-shadow: 0 1px 2px 0 rgba(26, 24, 29, 0.24);
+ .svg-logo {
+ width: 90px;
+ height: 22px;
+ }
+ .rocketbot {
+ padding-top: 27px;
+ position: absolute;
+ font-size: 11px;
+ }
+ .logo {
+ font-family: 'Avenir', Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ padding-top: 2px;
+ margin-right: 50px;
+ }
+ .nav-link {
+ padding: 4px 10px;
+ border-radius: 4px;
+ opacity: 0.8;
+ color: #efeff1;
+ will-change: opacity, background-color;
+ transition: opacity 0.3s, background-color 0.3s;
+ }
+ .nav-link:hover,
+ .nav-link.active {
+ opacity: 1;
+ background-color: #333844;
+ }
}
- .rocketbot{
- padding-top: 27px;
+ .rk-header-user {
+ display: none;
+ position: relative;
+ }
+ .rk-header-user-menu {
position: absolute;
- font-size: 11px;
- }
- .logo {
- font-family: "Avenir", Helvetica, Arial, sans-serif;
- font-size: 18px;
- padding-top: 2px;
- margin-right: 50px;
- }
- .nav-link {
- padding: 4px 10px;
+ top: 35px;
+ right: 0;
+ background-color: #fff;
+ overflow: hidden;
border-radius: 4px;
- opacity: 0.8;
- color: #efeff1;
- will-change: opacity, background-color;
- transition: opacity 0.3s, background-color 0.3s;
+ padding: 3px 0;
+ color: #333844;
+ width: 100px;
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.15);
}
- .nav-link:hover,
- .nav-link.active {
- opacity: 1;
- background-color: #333844;
+ .rk-header-user-menu-i {
+ padding: 6px 10px;
+ will-change: background-color;
+ transition: background-color 0.3s;
+ &:hover {
+ background-color: #dededf;
+ }
}
-}
-.rk-header-user{
- display: none;
- position: relative;
-}
-.rk-header-user-menu{
- position: absolute;
- top: 35px;
- right: 0;
- background-color: #fff;
- overflow: hidden;
- border-radius: 4px;
- padding: 3px 0;
- color: #333844;
- width: 100px;
- box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 0 1px rgba(0,0,0,0.15);
-}
-.rk-header-user-menu-i{
- padding: 6px 10px;
- will-change: background-color;
- transition: background-color .3s;
- &:hover{
- background-color:#dededf;
- }
-}
</style>
diff --git a/src/components/rk-icon.vue b/src/components/rk-icon.vue
index 27b6a01..be6c57c 100644
--- a/src/components/rk-icon.vue
+++ b/src/components/rk-icon.vue
@@ -1,63 +1,60 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
- <svg class="icon" :class="{
- 'sm':size === 'sm',
- 'lg':size=== 'lg',
- 'offset':offset,
- 'loading':loading,
- }">
+ <svg
+ class="icon"
+ :class="{
+ sm: size === 'sm',
+ lg: size === 'lg',
+ offset: offset,
+ loading: loading,
+ }"
+ >
<use :xlink:href="icon"></use>
</svg>
</template>
<script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator';
-import '../assets/icons/index';
+ import { Vue, Component, Prop } from 'vue-property-decorator';
+ import '../assets/icons/index';
-@Component
-export default class RkIcon extends Vue {
- @Prop({default: ''}) private icon!: string;
- @Prop({default: ''}) private size!: string;
- @Prop({default: false}) private loading!: boolean;
- @Prop({default: false}) private offset!: boolean;
-}
+ @Component
+ export default class RkIcon extends Vue {
+ @Prop({ default: '' }) private icon!: string;
+ @Prop({ default: '' }) private size!: string;
+ @Prop({ default: false }) private loading!: boolean;
+ @Prop({ default: false }) private offset!: boolean;
+ }
</script>
<style lang="scss">
-.icon{
- width: 16px;
- height: 16px;
- vertical-align: middle;
- fill: currentColor;
- &.sm{
- width: 13px;
- height: 13px;
+ .icon {
+ width: 16px;
+ height: 16px;
+ vertical-align: middle;
+ fill: currentColor;
+ &.sm {
+ width: 13px;
+ height: 13px;
+ }
+ &.lg {
+ width: 18px;
+ height: 18px;
+ }
+ &.offset {
+ margin-top: -2px;
+ }
+ &.loading {
+ animation: loading 1.5s linear infinite;
+ }
}
- &.lg{
- width: 18px;
- height: 18px;
- }
- &.offset{
- margin-top: -2px;
- }
- &.loading {
- animation: loading 1.5s linear infinite;
- }
-}
</style>
diff --git a/src/components/rk-page.vue b/src/components/rk-page.vue
index 2746148..956d5f6 100644
--- a/src/components/rk-page.vue
+++ b/src/components/rk-page.vue
@@ -1,115 +1,115 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
<span class="rk-page flex-h">
<svg class="icon cp mr-5" @click="pre">
<use xlink:href="#chevron-left"></use>
</svg>
- <input class="rk-page-input tc mr-5" type="text" v-model="currentPage" @keyup.enter="goToCertainPage">
+ <input
+ class="rk-page-input tc mr-5"
+ type="text"
+ v-model="currentPage"
+ @keyup.enter="goToCertainPage"
+ />
<span class="mr-5">/</span>
- <span class="mr-5">{{Math.ceil(this.total / this.currentSize)}}</span>
+ <span class="mr-5">{{ Math.ceil(this.total / this.currentSize) }}</span>
<svg class="icon cp" @click="next">
<use xlink:href="#chevron-right"></use>
</svg>
</span>
</template>
-<script lang="js"> // tslint:disable
-export default {
- name: 'RkPage',
- props: {
- name: {
- type: String,
- default: '',
+<script lang="js">
+ // tslint:disable
+ export default {
+ name: 'RkPage',
+ props: {
+ name: {
+ type: String,
+ default: '',
+ },
+ currentPage: {
+ type: Number,
+ default: 1,
+ },
+ currentSize: {
+ type: Number,
+ default: 10,
+ },
+ total: {
+ type: Number,
+ default: 10,
+ },
},
- currentPage: {
- type: Number,
- default: 1,
- },
- currentSize: {
- type: Number,
- default: 10,
- },
- total: {
- type: Number,
- default: 10,
- },
- },
- computed: {
- last() {
- if (this.currentPage * this.currentSize > this.total) {
- return this.total;
- }
- return this.currentPage * this.currentSize;
- },
- totalPages() {
- return Math.ceil(this.total / this.currentSize)
- }
- },
- data() {
- return {
- current: '',
- };
- },
- watch: {
- currentPage() { this.current = parseInt(this.currentPage); },
- },
- beforeMount() {
- this.current = this.currentPage;
- },
- methods: {
- next() {
- if (this.current !== this.totalPages) {
- this.current = this.current + 1;
- this.$emit('changePage', this.current);
+ computed: {
+ last() {
+ if (this.currentPage * this.currentSize > this.total) {
+ return this.total;
+ }
+ return this.currentPage * this.currentSize;
+ },
+ totalPages() {
+ return Math.ceil(this.total / this.currentSize)
}
},
- pre() {
- if (this.current !== 1) {
- this.current = this.current - 1;
- this.$emit('changePage', this.current);
+ data() {
+ return {
+ current: '',
+ };
+ },
+ watch: {
+ currentPage() { this.current = parseInt(this.currentPage); },
+ },
+ beforeMount() {
+ this.current = this.currentPage;
+ },
+ methods: {
+ next() {
+ if (this.current !== this.totalPages) {
+ this.current = this.current + 1;
+ this.$emit('changePage', this.current);
+ }
+ },
+ pre() {
+ if (this.current !== 1) {
+ this.current = this.current - 1;
+ this.$emit('changePage', this.current);
+ }
+ },
+ goToCertainPage() {
+ var regInt = /^0*[1-9]\d*$/
+ if (regInt.test(this.current) && this.current <= this.totalPages) {
+ this.$emit('changePage', this.current);
+ }
}
},
- goToCertainPage() {
- var regInt = /^0*[1-9]\d*$/
- if (regInt.test(this.current) && this.current <= this.totalPages) {
- this.$emit('changePage', this.current);
- }
- }
- },
-};
+ };
</script>
<style lang="scss" scoped>
-.rk-page{
- display: inline-flex;
- .icon{
- padding: 3px;
- opacity: 0.5;
- &:hover{
- opacity: 1;
- color: #448dfe;
+ .rk-page {
+ display: inline-flex;
+ .icon {
+ padding: 3px;
+ opacity: 0.5;
+ &:hover {
+ opacity: 1;
+ color: #448dfe;
+ }
}
}
-}
-.rk-page-input{
- width: 40px;
- outline: 0;
- border-style: unset;
- border-radius: 4px;
- border: 1px solid #c1c5ca55;
-}
+ .rk-page-input {
+ width: 40px;
+ outline: 0;
+ border-style: unset;
+ border-radius: 4px;
+ border: 1px solid #c1c5ca55;
+ }
</style>
diff --git a/src/components/rk-panel.vue b/src/components/rk-panel.vue
index 190fcc8..8dd3a44 100644
--- a/src/components/rk-panel.vue
+++ b/src/components/rk-panel.vue
@@ -1,51 +1,45 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
- <div class="rk-box" :style="width?`width: ${width};`:''">
- <div class="rk-box-title ell">{{title}}</div>
+ <div class="rk-box" :style="width ? `width: ${width};` : ''">
+ <div class="rk-box-title ell">{{ title }}</div>
<div class="rk-box-container"><slot></slot></div>
</div>
</template>
<script lang="ts">
-import Vue from 'vue';
-import { Component, Prop } from 'vue-property-decorator';
+ import Vue from 'vue';
+ import { Component, Prop } from 'vue-property-decorator';
-@Component({})
-export default class RkPanel extends Vue {
- @Prop() private title!: string;
- @Prop({ default: '' }) private width!: string;
-}
+ @Component({})
+ export default class RkPanel extends Vue {
+ @Prop() private title!: string;
+ @Prop({ default: '' }) private width!: string;
+ }
</script>
<style lang="scss" scoped>
-.rk-box{
- padding-left: 5px;
- padding-right: 5px;
-}
-.rk-box-title{
- padding: 5px 15px;
- border-radius: 4px;
- background-color: rgba(196, 200, 225, .2);
- // color: rgba(61, 68, 79, 0.6);
- color: #9da5b2;
-}
-.rk-box-container{
- padding: 7px 10px;
- // min-height: 220px;
-}
+ .rk-box {
+ padding-left: 5px;
+ padding-right: 5px;
+ }
+ .rk-box-title {
+ padding: 5px 15px;
+ border-radius: 4px;
+ background-color: rgba(196, 200, 225, 0.2);
+ // color: rgba(61, 68, 79, 0.6);
+ color: #9da5b2;
+ }
+ .rk-box-container {
+ padding: 7px 10px;
+ // min-height: 220px;
+ }
</style>
diff --git a/src/components/rk-popper.vue b/src/components/rk-popper.vue
index ab25ce8..9634c42 100644
--- a/src/components/rk-popper.vue
+++ b/src/components/rk-popper.vue
@@ -21,328 +21,328 @@
</template>
<script>
-import Popper from 'popper.js';
-const on = (element, event, handler) => {
- if (element && event && handler) {
- document.addEventListener
- ? element.addEventListener(event, handler, false)
- : element.attachEvent('on' + event, handler);
- }
-};
-const off = (element, event, handler) => {
- if (element && event) {
- document.removeEventListener
- ? element.removeEventListener(event, handler, false)
- : element.detachEvent('on' + event, handler);
- }
-};
-export default {
- props: {
- tagName: {
- type: String,
- default: 'span',
- },
- trigger: {
- type: String,
- default: 'hover',
- validator: (value) =>
- [
- 'clickToOpen',
- 'click', // Same as clickToToggle, provided for backwards compatibility.
- 'clickToToggle',
- 'hover',
- 'focus',
- ].indexOf(value) > -1,
- },
- delayOnMouseOver: {
- type: Number,
- default: 10,
- },
- delayOnMouseOut: {
- type: Number,
- default: 10,
- },
- disabled: {
- type: Boolean,
- default: false,
- },
- boundariesSelector: String,
- reference: {},
- forceShow: {
- type: Boolean,
- default: false,
- },
- dataValue: {
- default: null,
- },
- appendToBody: {
- type: Boolean,
- default: false,
- },
- stopPropagation: {
- type: Boolean,
- default: false,
- },
- preventDefault: {
- type: Boolean,
- default: false,
- },
- options: {
- type: Object,
- default() {
- return {};
+ import Popper from 'popper.js';
+ const on = (element, event, handler) => {
+ if (element && event && handler) {
+ document.addEventListener
+ ? element.addEventListener(event, handler, false)
+ : element.attachEvent('on' + event, handler);
+ }
+ };
+ const off = (element, event, handler) => {
+ if (element && event) {
+ document.removeEventListener
+ ? element.removeEventListener(event, handler, false)
+ : element.detachEvent('on' + event, handler);
+ }
+ };
+ export default {
+ props: {
+ tagName: {
+ type: String,
+ default: 'span',
},
- },
- },
- data() {
- return {
- referenceElm: null,
- popperJS: null,
- showPopper: false,
- currentPlacement: '',
- popperOptions: {
- placement: 'bottom-start',
- computeStyle: {
- gpuAcceleration: false,
+ trigger: {
+ type: String,
+ default: 'hover',
+ validator: (value) =>
+ [
+ 'clickToOpen',
+ 'click', // Same as clickToToggle, provided for backwards compatibility.
+ 'clickToToggle',
+ 'hover',
+ 'focus',
+ ].indexOf(value) > -1,
+ },
+ delayOnMouseOver: {
+ type: Number,
+ default: 10,
+ },
+ delayOnMouseOut: {
+ type: Number,
+ default: 10,
+ },
+ disabled: {
+ type: Boolean,
+ default: false,
+ },
+ boundariesSelector: String,
+ reference: {},
+ forceShow: {
+ type: Boolean,
+ default: false,
+ },
+ dataValue: {
+ default: null,
+ },
+ appendToBody: {
+ type: Boolean,
+ default: false,
+ },
+ stopPropagation: {
+ type: Boolean,
+ default: false,
+ },
+ preventDefault: {
+ type: Boolean,
+ default: false,
+ },
+ options: {
+ type: Object,
+ default() {
+ return {};
},
},
- };
- },
- watch: {
- showPopper(value) {
- if (value) {
- this.$emit('show', this);
- if (this.popperJS) {
- this.popperJS.enableEventListeners();
- }
- this.updatePopper();
- } else {
- if (this.popperJS) {
- this.popperJS.disableEventListeners();
- }
- this.$emit('hide', this);
- }
},
- forceShow: {
- handler(value) {
- this[value ? 'doShow' : 'doClose']();
- },
- immediate: true,
+ data() {
+ return {
+ referenceElm: null,
+ popperJS: null,
+ showPopper: false,
+ currentPlacement: '',
+ popperOptions: {
+ placement: 'bottom-start',
+ computeStyle: {
+ gpuAcceleration: false,
+ },
+ },
+ };
},
- disabled(value) {
- if (value) {
- this.showPopper = false;
- }
- },
- },
- created() {
- this.appendedArrow = false;
- this.appendedToBody = false;
- this.popperOptions = Object.assign(this.popperOptions, this.options);
- },
- mounted() {
- this.referenceElm = this.reference || this.$slots.reference[0].elm;
- this.popper = this.$slots.default[0].elm;
- switch (this.trigger) {
- case 'clickToOpen':
- on(this.referenceElm, 'click', this.doShow);
- on(document, 'click', this.handleDocumentClick);
- break;
- case 'click': // Same as clickToToggle, provided for backwards compatibility.
- case 'clickToToggle':
- on(this.referenceElm, 'click', this.doToggle);
- on(document, 'click', this.handleDocumentClick);
- break;
- case 'hover':
- on(this.referenceElm, 'mouseover', this.onMouseOver);
- on(this.popper, 'mouseover', this.onMouseOver);
- on(this.referenceElm, 'mouseout', this.onMouseOut);
- on(this.popper, 'mouseout', this.onMouseOut);
- break;
- case 'focus':
- on(this.referenceElm, 'focus', this.onMouseOver);
- on(this.popper, 'focus', this.onMouseOver);
- on(this.referenceElm, 'blur', this.onMouseOut);
- on(this.popper, 'blur', this.onMouseOut);
- break;
- }
- },
- methods: {
- doToggle(event) {
- if (this.stopPropagation) {
- event.stopPropagation();
- }
- if (this.preventDefault) {
- event.preventDefault();
- }
- if (!this.forceShow) {
- this.showPopper = !this.showPopper;
- }
- },
- doShow() {
- this.showPopper = true;
- },
- doClose() {
- this.showPopper = false;
- },
- doDestroy() {
- if (this.showPopper) {
- return;
- }
- if (this.popperJS) {
- this.popperJS.destroy();
- this.popperJS = null;
- }
- if (this.appendedToBody) {
- this.appendedToBody = false;
- document.body.removeChild(this.popper.parentElement);
- }
- },
- createPopper() {
- this.$nextTick(() => {
- if (this.appendToBody && !this.appendedToBody) {
- this.appendedToBody = true;
- document.body.appendChild(this.popper.parentElement);
- }
- if (this.popperJS && this.popperJS.destroy) {
- this.popperJS.destroy();
- }
- if (this.boundariesSelector) {
- const boundariesElement = document.querySelector(
- this.boundariesSelector,
- );
- if (boundariesElement) {
- this.popperOptions.modifiers = Object.assign(
- {},
- this.popperOptions.modifiers,
- );
- this.popperOptions.modifiers.preventOverflow = Object.assign(
- {},
- this.popperOptions.modifiers.preventOverflow,
- );
- this.popperOptions.modifiers.preventOverflow.boundariesElement = boundariesElement;
+ watch: {
+ showPopper(value) {
+ if (value) {
+ this.$emit('show', this);
+ if (this.popperJS) {
+ this.popperJS.enableEventListeners();
}
+ this.updatePopper();
+ } else {
+ if (this.popperJS) {
+ this.popperJS.disableEventListeners();
+ }
+ this.$emit('hide', this);
}
- this.popperOptions.onCreate = () => {
- this.$emit('created', this);
- this.$nextTick(this.updatePopper);
- };
- this.popperJS = new Popper(
- this.referenceElm,
- this.popper,
- this.popperOptions,
- );
- });
+ },
+ forceShow: {
+ handler(value) {
+ this[value ? 'doShow' : 'doClose']();
+ },
+ immediate: true,
+ },
+ disabled(value) {
+ if (value) {
+ this.showPopper = false;
+ }
+ },
},
- destroyPopper() {
- off(this.referenceElm, 'click', this.doToggle);
- off(this.referenceElm, 'mouseup', this.doClose);
- off(this.referenceElm, 'mousedown', this.doShow);
- off(this.referenceElm, 'focus', this.doShow);
- off(this.referenceElm, 'blur', this.doClose);
- off(this.referenceElm, 'mouseout', this.onMouseOut);
- off(this.referenceElm, 'mouseover', this.onMouseOver);
- off(document, 'click', this.handleDocumentClick);
- this.showPopper = false;
- this.doDestroy();
+ created() {
+ this.appendedArrow = false;
+ this.appendedToBody = false;
+ this.popperOptions = Object.assign(this.popperOptions, this.options);
},
- updatePopper() {
- this.popperJS ? this.popperJS.scheduleUpdate() : this.createPopper();
+ mounted() {
+ this.referenceElm = this.reference || this.$slots.reference[0].elm;
+ this.popper = this.$slots.default[0].elm;
+ switch (this.trigger) {
+ case 'clickToOpen':
+ on(this.referenceElm, 'click', this.doShow);
+ on(document, 'click', this.handleDocumentClick);
+ break;
+ case 'click': // Same as clickToToggle, provided for backwards compatibility.
+ case 'clickToToggle':
+ on(this.referenceElm, 'click', this.doToggle);
+ on(document, 'click', this.handleDocumentClick);
+ break;
+ case 'hover':
+ on(this.referenceElm, 'mouseover', this.onMouseOver);
+ on(this.popper, 'mouseover', this.onMouseOver);
+ on(this.referenceElm, 'mouseout', this.onMouseOut);
+ on(this.popper, 'mouseout', this.onMouseOut);
+ break;
+ case 'focus':
+ on(this.referenceElm, 'focus', this.onMouseOver);
+ on(this.popper, 'focus', this.onMouseOver);
+ on(this.referenceElm, 'blur', this.onMouseOut);
+ on(this.popper, 'blur', this.onMouseOut);
+ break;
+ }
},
- onMouseOver() {
- clearTimeout(this._timer);
- this._timer = setTimeout(() => {
+ methods: {
+ doToggle(event) {
+ if (this.stopPropagation) {
+ event.stopPropagation();
+ }
+ if (this.preventDefault) {
+ event.preventDefault();
+ }
+ if (!this.forceShow) {
+ this.showPopper = !this.showPopper;
+ }
+ },
+ doShow() {
this.showPopper = true;
- }, this.delayOnMouseOver);
- },
- onMouseOut() {
- clearTimeout(this._timer);
- this._timer = setTimeout(() => {
+ },
+ doClose() {
this.showPopper = false;
- }, this.delayOnMouseOut);
+ },
+ doDestroy() {
+ if (this.showPopper) {
+ return;
+ }
+ if (this.popperJS) {
+ this.popperJS.destroy();
+ this.popperJS = null;
+ }
+ if (this.appendedToBody) {
+ this.appendedToBody = false;
+ document.body.removeChild(this.popper.parentElement);
+ }
+ },
+ createPopper() {
+ this.$nextTick(() => {
+ if (this.appendToBody && !this.appendedToBody) {
+ this.appendedToBody = true;
+ document.body.appendChild(this.popper.parentElement);
+ }
+ if (this.popperJS && this.popperJS.destroy) {
+ this.popperJS.destroy();
+ }
+ if (this.boundariesSelector) {
+ const boundariesElement = document.querySelector(
+ this.boundariesSelector,
+ );
+ if (boundariesElement) {
+ this.popperOptions.modifiers = Object.assign(
+ {},
+ this.popperOptions.modifiers,
+ );
+ this.popperOptions.modifiers.preventOverflow = Object.assign(
+ {},
+ this.popperOptions.modifiers.preventOverflow,
+ );
+ this.popperOptions.modifiers.preventOverflow.boundariesElement = boundariesElement;
+ }
+ }
+ this.popperOptions.onCreate = () => {
+ this.$emit('created', this);
+ this.$nextTick(this.updatePopper);
+ };
+ this.popperJS = new Popper(
+ this.referenceElm,
+ this.popper,
+ this.popperOptions,
+ );
+ });
+ },
+ destroyPopper() {
+ off(this.referenceElm, 'click', this.doToggle);
+ off(this.referenceElm, 'mouseup', this.doClose);
+ off(this.referenceElm, 'mousedown', this.doShow);
+ off(this.referenceElm, 'focus', this.doShow);
+ off(this.referenceElm, 'blur', this.doClose);
+ off(this.referenceElm, 'mouseout', this.onMouseOut);
+ off(this.referenceElm, 'mouseover', this.onMouseOver);
+ off(document, 'click', this.handleDocumentClick);
+ this.showPopper = false;
+ this.doDestroy();
+ },
+ updatePopper() {
+ this.popperJS ? this.popperJS.scheduleUpdate() : this.createPopper();
+ },
+ onMouseOver() {
+ clearTimeout(this._timer);
+ this._timer = setTimeout(() => {
+ this.showPopper = true;
+ }, this.delayOnMouseOver);
+ },
+ onMouseOut() {
+ clearTimeout(this._timer);
+ this._timer = setTimeout(() => {
+ this.showPopper = false;
+ }, this.delayOnMouseOut);
+ },
+ handleDocumentClick(e) {
+ if (
+ !this.$el ||
+ !this.referenceElm ||
+ this.elementContains(this.$el, e.target) ||
+ this.elementContains(this.referenceElm, e.target) ||
+ !this.popper ||
+ this.elementContains(this.popper, e.target)
+ ) {
+ return;
+ }
+ this.$emit('documentClick', this);
+ if (this.forceShow) {
+ return;
+ }
+ this.showPopper = false;
+ },
+ elementContains(elm, otherElm) {
+ if (typeof elm.contains === 'function') {
+ return elm.contains(otherElm);
+ }
+ return false;
+ },
},
- handleDocumentClick(e) {
- if (
- !this.$el ||
- !this.referenceElm ||
- this.elementContains(this.$el, e.target) ||
- this.elementContains(this.referenceElm, e.target) ||
- !this.popper ||
- this.elementContains(this.popper, e.target)
- ) {
- return;
- }
- this.$emit('documentClick', this);
- if (this.forceShow) {
- return;
- }
- this.showPopper = false;
+ destroyed() {
+ this.destroyPopper();
},
- elementContains(elm, otherElm) {
- if (typeof elm.contains === 'function') {
- return elm.contains(otherElm);
- }
- return false;
- },
- },
- destroyed() {
- this.destroyPopper();
- },
-};
+ };
</script>
<style lang="scss">
-.popper {
- z-index: 11;
-}
-.popper .popper__arrow {
- width: 0;
- height: 0;
- border-style: solid;
- position: absolute;
- margin: 5px;
-}
-.popper[x-placement^='top'] {
- margin-bottom: 5px;
-}
-.popper[x-placement^='top'] .popper__arrow {
- border-width: 5px 5px 0 5px;
- border-color: #fafafa transparent transparent transparent;
- bottom: -5px;
- left: calc(50% - 5px);
- margin-top: 0;
- margin-bottom: 0;
-}
-.popper[x-placement^='bottom'] {
- margin-top: 5px;
-}
-.popper[x-placement^='bottom'] .popper__arrow {
- border-width: 0 5px 5px 5px;
- border-color: transparent transparent #fafafa transparent;
- top: -5px;
- left: calc(50% - 5px);
- margin-top: 0;
- margin-bottom: 0;
-}
-.popper[x-placement^='right'] {
- margin-left: 5px;
-}
-.popper[x-placement^='right'] .popper__arrow {
- border-width: 5px 5px 5px 0;
- border-color: transparent #fafafa transparent transparent;
- left: -5px;
- top: calc(50% - 5px);
- margin-left: 0;
- margin-right: 0;
-}
-.popper[x-placement^='left'] {
- margin-right: 5px;
-}
-.popper[x-placement^='left'] .popper__arrow {
- border-width: 5px 0 5px 5px;
- border-color: transparent transparent transparent #fafafa;
- right: -5px;
- top: calc(50% - 5px);
- margin-left: 0;
- margin-right: 0;
-}
-</style>
\ No newline at end of file
+ .popper {
+ z-index: 11;
+ }
+ .popper .popper__arrow {
+ width: 0;
+ height: 0;
+ border-style: solid;
+ position: absolute;
+ margin: 5px;
+ }
+ .popper[x-placement^='top'] {
+ margin-bottom: 5px;
+ }
+ .popper[x-placement^='top'] .popper__arrow {
+ border-width: 5px 5px 0 5px;
+ border-color: #fafafa transparent transparent transparent;
+ bottom: -5px;
+ left: calc(50% - 5px);
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ .popper[x-placement^='bottom'] {
+ margin-top: 5px;
+ }
+ .popper[x-placement^='bottom'] .popper__arrow {
+ border-width: 0 5px 5px 5px;
+ border-color: transparent transparent #fafafa transparent;
+ top: -5px;
+ left: calc(50% - 5px);
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ .popper[x-placement^='right'] {
+ margin-left: 5px;
+ }
+ .popper[x-placement^='right'] .popper__arrow {
+ border-width: 5px 5px 5px 0;
+ border-color: transparent #fafafa transparent transparent;
+ left: -5px;
+ top: calc(50% - 5px);
+ margin-left: 0;
+ margin-right: 0;
+ }
+ .popper[x-placement^='left'] {
+ margin-right: 5px;
+ }
+ .popper[x-placement^='left'] .popper__arrow {
+ border-width: 5px 0 5px 5px;
+ border-color: transparent transparent transparent #fafafa;
+ right: -5px;
+ top: calc(50% - 5px);
+ margin-left: 0;
+ margin-right: 0;
+ }
+</style>
diff --git a/src/components/rk-progress.vue b/src/components/rk-progress.vue
index e0d4eb6..17f6e9f 100644
--- a/src/components/rk-progress.vue
+++ b/src/components/rk-progress.vue
@@ -1,48 +1,47 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
-<div class="rk-progress">
- <div class="rk-progress-inner" :style="`width:${precent}%;background-color: ${color};`"></div>
-</div>
+ <div class="rk-progress">
+ <div
+ class="rk-progress-inner"
+ :style="`width:${precent}%;background-color: ${color};`"
+ ></div>
+ </div>
</template>
<script lang="ts">
-import Vue from 'vue';
-import { Component, Prop } from 'vue-property-decorator';
+ import Vue from 'vue';
+ import { Component, Prop } from 'vue-property-decorator';
-@Component({})
-export default class RkProgress extends Vue {
- @Prop({
- default: 0,
- }) public precent!: number;
- @Prop({
- default: '#3fb1e3',
- }) public color!: string;
-}
+ @Component({})
+ export default class RkProgress extends Vue {
+ @Prop({
+ default: 0,
+ })
+ public precent!: number;
+ @Prop({
+ default: '#3fb1e3',
+ })
+ public color!: string;
+ }
</script>
<style lang="scss" scoped>
-.rk-progress{
- height: 4px;
- border-radius: 2px;
- background-color: rgba(196, 200, 225, 0.3);
-}
-.rk-progress-inner{
- height: 100%;;
- border-radius: 2px;
-}
+ .rk-progress {
+ height: 4px;
+ border-radius: 2px;
+ background-color: rgba(196, 200, 225, 0.3);
+ }
+ .rk-progress-inner {
+ height: 100%;
+ border-radius: 2px;
+ }
</style>
diff --git a/src/components/rk-select.vue b/src/components/rk-select.vue
index f1608ef..8466e5b 100644
--- a/src/components/rk-select.vue
+++ b/src/components/rk-select.vue
@@ -1,165 +1,200 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
- <div class="rk-bar-select cp flex-h" v-clickout="() => { visible = false;search = '';}" :class="{'active':visible}">
+ <div
+ class="rk-bar-select cp flex-h"
+ v-clickout="
+ () => {
+ visible = false;
+ search = '';
+ }
+ "
+ :class="{ active: visible }"
+ >
<div class="rk-bar-i flex-h" @click="visible = !visible">
<div class="mr-15 rk-bar-i-text">
<div v-if="Array.isArray(current)">
<span class="selected" v-for="item in current" :key="item.key">
- <span>{{item.label}}</span>
- <span class="remove-icon" v-if="current.length!==1" @click="removeSelected(item)">×</span>
+ <span>{{ item.label }}</span>
+ <span
+ class="remove-icon"
+ v-if="current.length !== 1"
+ @click="removeSelected(item)"
+ >×</span
+ >
</span>
</div>
- <div class="ell" v-else v-tooltip:right.ellipsis="current.label || ''">{{current.label}}</div>
+ <div class="ell" v-else v-tooltip:right.ellipsis="current.label || ''">
+ {{ current.label }}
+ </div>
</div>
- <svg class="icon lg trans" :style="`transform: rotate(${visible?180:0}deg)`">
+ <svg
+ class="icon lg trans"
+ :style="`transform: rotate(${visible ? 180 : 0}deg)`"
+ >
<use xlink:href="#arrow-down"></use>
</svg>
</div>
<div class="rk-sel" v-if="visible">
<div>
- <input type="text" class="rk-sel-search" v-model="search">
+ <input type="text" class="rk-sel-search" v-model="search" />
<svg class="icon sm close" @click="search = ''" v-if="search">
<use xlink:href="#clear"></use>
</svg>
</div>
<div class="rk-opt-wrapper scroll_hide">
- <div class="rk-opt ell" @click="handleSelect(i)" :class="{'select-disabled': selectedOpt.includes(i.key)}" v-for="i in filterData" :key="i.key">{{i.label}}</div>
+ <div
+ class="rk-opt ell"
+ @click="handleSelect(i)"
+ :class="{ 'select-disabled': selectedOpt.includes(i.key) }"
+ v-for="i in filterData"
+ :key="i.key"
+ >
+ {{ i.label }}
+ </div>
</div>
</div>
</div>
</template>
<script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator';
-const Multiple = 'multiple';
-@Component
-export default class RkSelect extends Vue {
- @Prop() public mode: any;
- @Prop() public data!: any;
- @Prop() public current!: any;
- public search: string = '';
- public visible: boolean = false;
+ import { Vue, Component, Prop } from 'vue-property-decorator';
+ const Multiple = 'multiple';
+ @Component
+ export default class RkSelect extends Vue {
+ @Prop() public mode: any;
+ @Prop() public data!: any;
+ @Prop() public current!: any;
+ public search: string = '';
+ public visible: boolean = false;
- get filterData() {
- return this.data.filter((i: any) => i.label.toUpperCase().indexOf(this.search.toUpperCase()) !== -1);
- }
-
- get selectedOpt() {
- return this.mode === Multiple ? this.current.map((item: any) => item.key) : [this.current.key];
- }
-
- public handleOpen() {
- this.visible = true;
- }
-
- public handleSelect(i: any) {
- const selected = this.mode === Multiple ? this.current.map((item: any) => item.key) : [this.current.key];
- if (selected.includes(i.key)) {
- return;
+ get filterData() {
+ return this.data.filter(
+ (i: any) =>
+ i.label.toUpperCase().indexOf(this.search.toUpperCase()) !== -1,
+ );
}
- this.$emit('onChoose', i);
- this.visible = false;
- }
- private removeSelected(item: any) {
- if (this.mode === Multiple) {
- this.$emit('onChoose', item);
+ get selectedOpt() {
+ return this.mode === Multiple
+ ? this.current.map((item: any) => item.key)
+ : [this.current.key];
+ }
+
+ public handleOpen() {
+ this.visible = true;
+ }
+
+ public handleSelect(i: any) {
+ const selected =
+ this.mode === Multiple
+ ? this.current.map((item: any) => item.key)
+ : [this.current.key];
+ if (selected.includes(i.key)) {
+ return;
+ }
+ this.$emit('onChoose', i);
+ this.visible = false;
+ }
+
+ private removeSelected(item: any) {
+ if (this.mode === Multiple) {
+ this.$emit('onChoose', item);
+ }
}
}
-}
</script>
<style lang="scss" scoped>
-.rk-bar-select {
- position: relative;
- min-height: 40px;
- justify-content: space-between;
- border: 1px solid #ddd;
- background: #fff;
- border-radius: 3px;
- .sm{ line-height: 12px;}
- .icon { flex-shrink: 0};
- .selected {
- display: inline-block;
- padding: 5px;
+ .rk-bar-select {
+ position: relative;
+ min-height: 40px;
+ justify-content: space-between;
+ border: 1px solid #ddd;
+ background: #fff;
border-radius: 3px;
- margin: 3px;
- overflow: hidden;
- color: rgba(0, 0, 0, 0.65);
- background-color: #fafafa;
- border: 1px solid #e8e8e8;
+ .sm {
+ line-height: 12px;
+ }
+ .icon {
+ flex-shrink: 0;
+ }
+ .selected {
+ display: inline-block;
+ padding: 5px;
+ border-radius: 3px;
+ margin: 3px;
+ overflow: hidden;
+ color: rgba(0, 0, 0, 0.65);
+ background-color: #fafafa;
+ border: 1px solid #e8e8e8;
+ }
+ .remove-icon {
+ display: inline-block;
+ margin-left: 5px;
+ cursor: pointer;
+ }
}
- .remove-icon {
- display: inline-block;
- margin-left: 5px;
- cursor: pointer;
+ .rk-bar-i-text {
+ width: 100%;
}
-}
-.rk-bar-i-text{
- width: 100%;
-}
-.rk-bar-i {
- height: 100%;
- width: 100%;
- padding: 5px 15px;
- overflow: auto;
-}
-.rk-sel{
- position: absolute;
- top: 100%;
- background: #fff;
- box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
- border: 1px solid #ddd;
- width: 100%;
- border-radius: 0 0 3px 3px;
- border-right-width: 1px !important;
- z-index: 10;
- .close{
+ .rk-bar-i {
+ height: 100%;
+ width: 100%;
+ padding: 5px 15px;
+ overflow: auto;
+ }
+ .rk-sel {
position: absolute;
- right: 10px;
- top: 12px;
- opacity: 0.6;
- &:hover{opacity: 1;}
+ top: 100%;
+ background: #fff;
+ box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
+ border: 1px solid #ddd;
+ width: 100%;
+ border-radius: 0 0 3px 3px;
+ border-right-width: 1px !important;
+ z-index: 10;
+ .close {
+ position: absolute;
+ right: 10px;
+ top: 12px;
+ opacity: 0.6;
+ &:hover {
+ opacity: 1;
+ }
+ }
}
-}
-.rk-opt{
- padding: 7px 15px;
- &.select-disabled {
- color: rgba(0, 0, 0, 0.25);
- cursor: not-allowed;
+ .rk-opt {
+ padding: 7px 15px;
+ &.select-disabled {
+ color: rgba(0, 0, 0, 0.25);
+ cursor: not-allowed;
+ }
+ &:hover {
+ background-color: #f5f5f5;
+ }
}
- &:hover{
- background-color: #f5f5f5;
+ .rk-sel-search {
+ width: calc(100% - 4px);
+ border: 0;
+ border-bottom: 1px solid #ddd;
+ outline: 0;
+ padding: 7px 25px 7px 10px;
+ margin: 2px;
+ border-radius: 3px;
}
-}
-.rk-sel-search{
- width: calc(100% - 4px);
- border:0;
- border-bottom: 1px solid #ddd;
- outline: 0;
- padding: 7px 25px 7px 10px;
- margin: 2px;
- border-radius: 3px;
-}
-.rk-opt-wrapper{
- overflow: auto;
- max-height: 200px;
- padding-bottom: 2px;
-}
+ .rk-opt-wrapper {
+ overflow: auto;
+ max-height: 200px;
+ padding-bottom: 2px;
+ }
</style>
diff --git a/src/components/rk-sidebox.vue b/src/components/rk-sidebox.vue
index 5799475..a6a7345 100644
--- a/src/components/rk-sidebox.vue
+++ b/src/components/rk-sidebox.vue
@@ -1,120 +1,126 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
<div>
<div class="rk-sidebox-backdrop" v-show="show" @click="handleHide"></div>
- <aside class="rk-sidebox" :style="show?`width:${width};${right ? 'right:0' : 'left:0'}`:`width:${width};${right ? 'right' : 'left'}:-${width}`">
- <h3 class="rk-sidebox-title">{{this.title}}
+ <aside
+ class="rk-sidebox"
+ :style="
+ show
+ ? `width:${width};${right ? 'right:0' : 'left:0'}`
+ : `width:${width};${right ? 'right' : 'left'}:-${width}`
+ "
+ >
+ <h3 class="rk-sidebox-title">
+ {{ this.title }}
<div class="r rk-sidebox-close" @click="handleHide">
<svg class="icon">
<use xlink:href="#close"></use>
</svg>
</div>
</h3>
- <div class="rk-sidebox-inner" :class="{'rk-sidebox-inner-fixed':fixed}">
- <slot/>
+ <div
+ class="rk-sidebox-inner"
+ :class="{ 'rk-sidebox-inner-fixed': fixed }"
+ >
+ <slot />
</div>
</aside>
</div>
</template>
-<script lang="js"> // tslint:disable
-export default {
- name: 'RkSidebox',
- props: {
- show: {},
- title: {
- default: '',
+<script lang="js">
+ // tslint:disable
+ export default {
+ name: 'RkSidebox',
+ props: {
+ show: {},
+ title: {
+ default: '',
+ },
+ right: {
+ default: false,
+ },
+ fixed: {
+ default: false,
+ },
+ width: {
+ default: '550px',
+ },
},
- right: {
- default: false,
+ methods: {
+ handleHide() {
+ this.$emit('update:show', false);
+ },
},
- fixed: {
- default: false,
- },
- width: {
- default: '550px',
- },
- },
- methods: {
- handleHide() {
- this.$emit('update:show', false);
- },
- },
-};
+ };
</script>
<style lang="scss">
-.rk-sidebox-backdrop{
- position: fixed;
- top: 50px;
- left: 0;
- bottom: 0;
- right: 0;
- background-color: rgba(31, 33, 38, 0.2);
- z-index: 199;
-}
-.rk-sidebox{
- overflow-y: auto;
- transition: all .3s;
- position: fixed;
- right: 0;
- top: 50px;
- bottom: 30px;
- z-index: 200;
- background-color: #fff;
-}
-.rk-sidebox-inner{
- padding: 35px 20px 20px;
-}
-.rk-sidebox-inner-fixed{
- height: 100%;
- padding: 0;
- overflow: hidden;
-}
-.rk-sidebox-title {
- font-size: 16px;
- position: absolute;
- width: 100%;
- padding: 0 20px;
- line-height: 17px;
-}
-.rk-sidebox-close{
- cursor: pointer;
- color: #D8D8D8;
- transition: color .3s;
- .icon{
- width: 18px;
- height: 20px;
+ .rk-sidebox-backdrop {
+ position: fixed;
+ top: 50px;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background-color: rgba(31, 33, 38, 0.2);
+ z-index: 199;
}
- &:hover{
- color: #3D92FF;
+ .rk-sidebox {
+ overflow-y: auto;
+ transition: all 0.3s;
+ position: fixed;
+ right: 0;
+ top: 50px;
+ bottom: 30px;
+ z-index: 200;
+ background-color: #fff;
}
-}
-.rk-sidebox-magnify{
- cursor: pointer;
- color: #D8D8D8;
- transition: color .3s;
- .icon{
- width: 18px;
- height: 20px;
+ .rk-sidebox-inner {
+ padding: 35px 20px 20px;
}
- &:hover{
- color: #3D92FF;
+ .rk-sidebox-inner-fixed {
+ height: 100%;
+ padding: 0;
+ overflow: hidden;
}
-}
+ .rk-sidebox-title {
+ font-size: 16px;
+ position: absolute;
+ width: 100%;
+ padding: 0 20px;
+ line-height: 17px;
+ }
+ .rk-sidebox-close {
+ cursor: pointer;
+ color: #d8d8d8;
+ transition: color 0.3s;
+ .icon {
+ width: 18px;
+ height: 20px;
+ }
+ &:hover {
+ color: #3d92ff;
+ }
+ }
+ .rk-sidebox-magnify {
+ cursor: pointer;
+ color: #d8d8d8;
+ transition: color 0.3s;
+ .icon {
+ width: 18px;
+ height: 20px;
+ }
+ &:hover {
+ color: #3d92ff;
+ }
+ }
</style>
diff --git a/src/event-bus.ts b/src/event-bus.ts
index 99a098d..cce04fe 100644
--- a/src/event-bus.ts
+++ b/src/event-bus.ts
@@ -15,10 +15,9 @@
* limitations under the License.
*/
-import Vue, { VueConstructor } from 'vue';
+import Vue, { VueConstructor } from 'vue';
-type VueComponentVM = Vue & { _uid: string; };
-
+type VueComponentVM = Vue & { _uid: string };
interface Handles {
[key: string]: any[];
@@ -47,7 +46,11 @@
* @param vm vue component object or undefined, if is undefined, event not auto destroy.
* @param callback event callback
*/
- public $on(eventName: string, vm: Vue | undefined, callback: (cb: any) => void) {
+ public $on(
+ eventName: string,
+ vm: Vue | undefined,
+ callback: (cb: any) => void,
+ ) {
if (!this.handles[eventName]) {
this.handles[eventName] = [];
}
@@ -105,14 +108,17 @@
vue.prototype.$eventBus = new EventBus(vue);
vue.mixin({
deactivated() {
- (this as VueComponentVM).$eventBus.$offVmEvent((this as VueComponentVM)._uid);
+ (this as VueComponentVM).$eventBus.$offVmEvent(
+ (this as VueComponentVM)._uid,
+ );
},
beforeDestroy() {
- (this as VueComponentVM).$eventBus.$offVmEvent((this as VueComponentVM)._uid);
+ (this as VueComponentVM).$eventBus.$offVmEvent(
+ (this as VueComponentVM)._uid,
+ );
},
});
},
};
-
export default $EventBus;
diff --git a/src/graph/fragments/alarm.ts b/src/graph/fragments/alarm.ts
index 7ef1305..16878ec 100644
--- a/src/graph/fragments/alarm.ts
+++ b/src/graph/fragments/alarm.ts
@@ -16,7 +16,8 @@
*/
export const Alarm = {
- variable: '$keyword: String, $scope: Scope, $duration:Duration!, $paging: Pagination!',
+ variable:
+ '$keyword: String, $scope: Scope, $duration:Duration!, $paging: Pagination!',
query: `
getAlarm(keyword: $keyword, scope: $scope, duration: $duration, paging: $paging) {
items: msgs {
@@ -26,4 +27,5 @@
scope
}
total
- }`};
+ }`,
+};
diff --git a/src/graph/fragments/comparison.ts b/src/graph/fragments/comparison.ts
index 12f0320..e186c98 100644
--- a/src/graph/fragments/comparison.ts
+++ b/src/graph/fragments/comparison.ts
@@ -34,7 +34,8 @@
value
}
}
-`};
+`,
+};
export const dependencyServerThroughputTrend = {
variable: '$duration: Duration!, $id: ID!',
@@ -47,7 +48,8 @@
value
}
}
-`};
+`,
+};
export const dependencyServerSLATrend = {
variable: '$duration: Duration!, $id: ID!',
@@ -60,7 +62,8 @@
value
}
}
-`};
+`,
+};
export const dependencyClientResponseTimeTrend = {
variable: '$duration: Duration!, $id: ID!',
@@ -73,7 +76,8 @@
value
}
}
-`};
+`,
+};
export const dependencyClientThroughputTrend = {
variable: '$duration: Duration!, $id: ID!',
@@ -86,7 +90,8 @@
value
}
}
-`};
+`,
+};
export const dependencyClientSLATrend = {
variable: '$duration: Duration!, $id: ID!',
@@ -99,7 +104,8 @@
value
}
}
-`};
+`,
+};
export const dependencyClientPercentile = {
variable: '$duration: Duration!, $id: ID!',
fragment: `
diff --git a/src/graph/fragments/option.ts b/src/graph/fragments/option.ts
index 9eb0d67..bdd443e 100644
--- a/src/graph/fragments/option.ts
+++ b/src/graph/fragments/option.ts
@@ -22,7 +22,8 @@
key: id
label: name
}
- `};
+ `,
+};
export const Database = {
variable: '$duration: Duration!',
@@ -31,7 +32,8 @@
key: id
label: name
}
- `};
+ `,
+};
export const Endpoints = {
variable: '$serviceId: ID!, $keyword: String!',
@@ -40,7 +42,8 @@
key: id
label: name
}
-`};
+`,
+};
export const Instances = {
variable: '$serviceId: ID!, $duration: Duration!',
@@ -54,7 +57,8 @@
value
}
}
- `};
+ `,
+};
export const OAPTimeInfo = {
query: `
@@ -62,4 +66,5 @@
timezone
currentTimestamp
}
- `};
+ `,
+};
diff --git a/src/graph/fragments/topology.ts b/src/graph/fragments/topology.ts
index 9033d43..7ea364e 100644
--- a/src/graph/fragments/topology.ts
+++ b/src/graph/fragments/topology.ts
@@ -46,7 +46,8 @@
name: "service_relation_server_percentile",
id: $id
}, numOfLinear: 5, duration: $duration) { values { value } }
-`};
+`,
+};
export const TopoClientInfo = {
variable: '$duration: Duration!, $id: ID!',
@@ -79,7 +80,8 @@
name: "service_relation_client_percentile",
id: $id
}, numOfLinear: 5, duration: $duration) { values { value } }
-`};
+`,
+};
export const TopoInstanceClientInfo = {
variable: '$duration: Duration!, $id: ID!',
@@ -112,7 +114,8 @@
name: "service_instance_relation_client_percentile",
id: $id
}, numOfLinear: 5, duration: $duration) { values { value } }
-`};
+`,
+};
export const TopoInstanceServerInfo = {
variable: '$duration: Duration!, $id: ID!',
@@ -145,10 +148,12 @@
name: "service_instance_relation_client_percentile",
id: $id
}, numOfLinear: 5, duration: $duration) { values { value } }
-`};
+`,
+};
export const TopoInstanceDependency = {
- variable: '$clientServiceId: ID!, $serverServiceId: ID!, $duration: Duration!',
+ variable:
+ '$clientServiceId: ID!, $serverServiceId: ID!, $duration: Duration!',
query: `
topo: getServiceInstanceTopology(clientServiceId: $clientServiceId,
serverServiceId: $serverServiceId, duration: $duration) {
@@ -167,7 +172,8 @@
target
}
}
-`};
+`,
+};
export const Topo = {
variable: '$duration: Duration!',
@@ -185,7 +191,8 @@
detectPoints
target
}
- }`};
+ }`,
+};
export const ServiceTopo = {
variable: '$duration: Duration!, $serviceId: ID!',
query: `
@@ -202,7 +209,8 @@
detectPoints
target
}
- }`};
+ }`,
+};
export const TopoMetric = {
variable: '$ids: [ID!]!',
query: `
@@ -232,7 +240,8 @@
id
value
}
- }`};
+ }`,
+};
export const TopoServiceMetric = {
variable: '$idsS: [ID!]!',
@@ -254,7 +263,8 @@
id
value
}
- }`};
+ }`,
+};
export const TopoClientMetric = {
variable: '$idsC: [ID!]!',
@@ -276,7 +286,8 @@
id
value
}
- }`};
+ }`,
+};
export const DependencyInstanceServerMetric = {
variable: '$duration: Duration!, $idsC: [ID!]!',
@@ -289,7 +300,8 @@
id
value
}
- }`};
+ }`,
+};
export const DependencyInstanceClientMetric = {
variable: '$duration: Duration!, $idsC: [ID!]!',
query: `
@@ -301,4 +313,5 @@
id
value
}
- }`};
+ }`,
+};
diff --git a/src/graph/fragments/trace.ts b/src/graph/fragments/trace.ts
index 0887cc0..290b023 100644
--- a/src/graph/fragments/trace.ts
+++ b/src/graph/fragments/trace.ts
@@ -28,7 +28,8 @@
traceIds
}
total
- }`};
+ }`,
+};
export const ServiceInstanceOption = {
variable: '$duration: Duration!, $serviceId: ID!',
@@ -36,9 +37,8 @@
instanceId: getServiceInstances(duration: $duration, serviceId: $serviceId) {
key: id
label: name
- }`};
-
-
+ }`,
+};
/**
* @param { traceId } { string }
@@ -80,4 +80,5 @@
}
}
}
- `};
+ `,
+};
diff --git a/src/graph/index.ts b/src/graph/index.ts
index 84f8df1..449fd67 100644
--- a/src/graph/index.ts
+++ b/src/graph/index.ts
@@ -36,10 +36,14 @@
return this;
}
public params(variablesData: any): AxiosPromise<void> {
- return axios.post('/graphql', {
- query: query[this.queryData],
- variables: variablesData,
- }, { cancelToken: cancelToken() });
+ return axios.post(
+ '/graphql',
+ {
+ query: query[this.queryData],
+ variables: variablesData,
+ },
+ { cancelToken: cancelToken() },
+ );
}
}
diff --git a/src/graph/query/alarm.ts b/src/graph/query/alarm.ts
index 796f9c9..aa81903 100644
--- a/src/graph/query/alarm.ts
+++ b/src/graph/query/alarm.ts
@@ -17,5 +17,4 @@
import { Alarm } from '../fragments/alarm';
-export const queryAlarms =
- `query queryAlarms(${Alarm.variable}) {${Alarm.query}}`;
+export const queryAlarms = `query queryAlarms(${Alarm.variable}) {${Alarm.query}}`;
diff --git a/src/graph/query/option.ts b/src/graph/query/option.ts
index 11e436e..8db9916 100644
--- a/src/graph/query/option.ts
+++ b/src/graph/query/option.ts
@@ -15,19 +15,20 @@
* limitations under the License.
*/
-import { Services, Endpoints, Instances, Database, OAPTimeInfo } from '../fragments/option';
+import {
+ Services,
+ Endpoints,
+ Instances,
+ Database,
+ OAPTimeInfo,
+} from '../fragments/option';
-export const queryServices =
- `query queryServices(${Services.variable}) {${Services.query}}`;
+export const queryServices = `query queryServices(${Services.variable}) {${Services.query}}`;
-export const queryDatabases =
- `query queryDatabases(${Database.variable}) {${Database.query}}`;
+export const queryDatabases = `query queryDatabases(${Database.variable}) {${Database.query}}`;
-export const queryEndpoints =
- `query queryEndpoints(${Endpoints.variable}) {${Endpoints.query}}`;
+export const queryEndpoints = `query queryEndpoints(${Endpoints.variable}) {${Endpoints.query}}`;
-export const queryInstances =
- `query queryInstances(${Instances.variable}) {${Instances.query}}`;
+export const queryInstances = `query queryInstances(${Instances.variable}) {${Instances.query}}`;
-export const queryOAPTimeInfo =
- `query queryOAPTimeInfo {${OAPTimeInfo.query}}`;
+export const queryOAPTimeInfo = `query queryOAPTimeInfo {${OAPTimeInfo.query}}`;
diff --git a/src/graph/query/topology.ts b/src/graph/query/topology.ts
index ab436e0..ba6cf2d 100644
--- a/src/graph/query/topology.ts
+++ b/src/graph/query/topology.ts
@@ -15,18 +15,26 @@
* limitations under the License.
*/
-import { Topo, ServiceTopo, TopoMetric, TopoInstanceDependency, TopoInstanceClientInfo, TopoInstanceServerInfo,
- TopoServiceMetric, TopoClientMetric, TopoServiceInfo, TopoClientInfo,
- DependencyInstanceServerMetric, DependencyInstanceClientMetric } from '../fragments/topology';
+import {
+ Topo,
+ ServiceTopo,
+ TopoMetric,
+ TopoInstanceDependency,
+ TopoInstanceClientInfo,
+ TopoInstanceServerInfo,
+ TopoServiceMetric,
+ TopoClientMetric,
+ TopoServiceInfo,
+ TopoClientInfo,
+ DependencyInstanceServerMetric,
+ DependencyInstanceClientMetric,
+} from '../fragments/topology';
-export const queryTopo =
- `query queryTopo(${Topo.variable}) {${Topo.query}}`;
+export const queryTopo = `query queryTopo(${Topo.variable}) {${Topo.query}}`;
-export const queryServiceTopo =
- `query queryServiceTopo(${ServiceTopo.variable}) {${ServiceTopo.query}}`;
+export const queryServiceTopo = `query queryServiceTopo(${ServiceTopo.variable}) {${ServiceTopo.query}}`;
-export const queryTopoInfo =
- `query queryTrace(
+export const queryTopoInfo = `query queryTrace(
${Topo.variable},
${TopoMetric.variable},
${TopoServiceMetric.variable},
@@ -37,25 +45,23 @@
${TopoClientMetric.query}
}`;
-export const queryTopoServiceInfo =
- `query queryTopoServiceInfo(${TopoServiceInfo.variable}) {${TopoServiceInfo.query}}`;
+export const queryTopoServiceInfo = `query queryTopoServiceInfo(
+ ${TopoServiceInfo.variable}) {${TopoServiceInfo.query}}`;
-export const queryTopoClientInfo =
- `query queryTopoClientInfo(${TopoClientInfo.variable}) {${TopoClientInfo.query}}`;
+export const queryTopoClientInfo = `query queryTopoClientInfo(
+ ${TopoClientInfo.variable}) {${TopoClientInfo.query}}`;
-export const queryTopoInstanceDependency =
- `query queryTopoInstanceDependency(${TopoInstanceDependency.variable}) {${TopoInstanceDependency.query}}`;
+export const queryTopoInstanceDependency = `query queryTopoInstanceDependency(
+ ${TopoInstanceDependency.variable}) {${TopoInstanceDependency.query}}`;
-export const queryTopoInstanceServerInfo =
- `query queryTopoInstanceServerInfo(${TopoInstanceServerInfo.variable}) {${TopoInstanceServerInfo.query}}`;
+export const queryTopoInstanceServerInfo = `query queryTopoInstanceServerInfo(
+ ${TopoInstanceServerInfo.variable}) {${TopoInstanceServerInfo.query}}`;
-export const queryTopoInstanceClientInfo =
- `query queryTopoInstanceClientInfo(${TopoInstanceClientInfo.variable}) {${TopoInstanceClientInfo.query}}`;
+export const queryTopoInstanceClientInfo = `query queryTopoInstanceClientInfo(
+ ${TopoInstanceClientInfo.variable}) {${TopoInstanceClientInfo.query}}`;
-export const queryDependencyInstanceServerMetric =
- `query queryDependencyInstanceServerMetric(${DependencyInstanceServerMetric.variable}) \
- {${DependencyInstanceServerMetric.query}}`;
+export const queryDependencyInstanceServerMetric = `query queryDependencyInstanceServerMetric(
+ ${DependencyInstanceServerMetric.variable}) {${DependencyInstanceServerMetric.query}}`;
-export const queryDependencyInstanceClientMetric =
- `query queryDependencyInstanceClientMetric(${DependencyInstanceClientMetric.variable}) \
- {${DependencyInstanceClientMetric.query}}`;
+export const queryDependencyInstanceClientMetric = `query queryDependencyInstanceClientMetric(
+ ${DependencyInstanceClientMetric.variable}) {${DependencyInstanceClientMetric.query}}`;
diff --git a/src/graph/query/trace.ts b/src/graph/query/trace.ts
index 8b7cb6d..76f5dac 100644
--- a/src/graph/query/trace.ts
+++ b/src/graph/query/trace.ts
@@ -17,11 +17,9 @@
import { Traces, Trace, ServiceInstanceOption } from '../fragments/trace';
-export const queryTraces =
- `query queryTraces(${Traces.variable}) {${Traces.query}}`;
+export const queryTraces = `query queryTraces(${Traces.variable}) {${Traces.query}}`;
-export const queryTrace =
- `query queryTrace(${Trace.variable}) {${Trace.query}}`;
+export const queryTrace = `query queryTrace(${Trace.variable}) {${Trace.query}}`;
-export const queryServiceInstance =
- `query queryServiceInstance(${ServiceInstanceOption.variable}) {${ServiceInstanceOption.query}}`;
+export const queryServiceInstance = `query queryServiceInstance(${ServiceInstanceOption.variable})
+{${ServiceInstanceOption.query}}`;
diff --git a/src/main.ts b/src/main.ts
index 51ea254..122c2ff 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -42,11 +42,15 @@
Vue.use(eventBus);
Vue.use(VueI18n);
Vue.use(components);
-Vue.use(VModal, {dialog: true});
+Vue.use(VModal, { dialog: true });
Vue.directive('clickout', clickout);
Vue.directive('tooltip', tooltip);
-Vue.filter('dateformat', (dataStr: any, pattern: string = 'YYYY-MM-DD HH:mm:ss') => moment(dataStr).format(pattern));
+Vue.filter(
+ 'dateformat',
+ (dataStr: any, pattern: string = 'YYYY-MM-DD HH:mm:ss') =>
+ moment(dataStr).format(pattern),
+);
const savedLanguage = window.localStorage.getItem('lang');
let language = navigator.language.split('-')[0];
@@ -63,7 +67,9 @@
},
});
-if (!window.Promise) { window.Promise = Promise; }
+if (!window.Promise) {
+ window.Promise = Promise;
+}
Vue.config.productionTip = false;
@@ -75,5 +81,3 @@
render: (h) => h(App),
}).$mount('#app');
});
-
-
diff --git a/src/router.ts b/src/router.ts
index b36aa46..eeb9235 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -70,7 +70,7 @@
router.beforeEach((to, from, next) => {
const token = window.localStorage.getItem('skywalking-authority');
if (window.axiosCancel.length !== 0) {
- for (const func of window.axiosCancel) {
+ for (const func of window.axiosCancel) {
setTimeout(func(), 0);
}
window.axiosCancel = [];
diff --git a/src/store/index.ts b/src/store/index.ts
index 87782a8..b9ca56a 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -18,13 +18,21 @@
import Vue from 'vue';
import Vuex from 'vuex';
import rocketbot, { State as RocketbotState } from './modules/global';
-import rocketOption, { State as DashboardOptionState } from './modules/dashboard/modules/dashboard-option';
-import rocketData, { State as DashboardDataState } from './modules/dashboard/modules/dashboard-data';
-import rocketDashboard, { State as DashboardState } from './modules/dashboard/source';
-import rocketTopo, { State as TopoState} from '@/store/modules/topology';
-import rocketTrace, { State as TraceState} from '@/store/modules/trace';
-import rocketAlarm, { State as AlarmState} from '@/store/modules/alarm';
-import comparisonStore, { State as ComparisonState} from '@/store/modules/comparison/comparison-store';
+import rocketOption, {
+ State as DashboardOptionState,
+} from './modules/dashboard/modules/dashboard-option';
+import rocketData, {
+ State as DashboardDataState,
+} from './modules/dashboard/modules/dashboard-data';
+import rocketDashboard, {
+ State as DashboardState,
+} from './modules/dashboard/source';
+import rocketTopo, { State as TopoState } from '@/store/modules/topology';
+import rocketTrace, { State as TraceState } from '@/store/modules/trace';
+import rocketAlarm, { State as AlarmState } from '@/store/modules/alarm';
+import comparisonStore, {
+ State as ComparisonState,
+} from '@/store/modules/comparison/comparison-store';
Vue.use(Vuex);
export interface State {
diff --git a/src/store/modules/alarm/index.ts b/src/store/modules/alarm/index.ts
index 6c2e337..3c08822 100644
--- a/src/store/modules/alarm/index.ts
+++ b/src/store/modules/alarm/index.ts
@@ -49,7 +49,10 @@
// actions
const actions: ActionTree<State, any> = {
- GET_ALARM(context: { commit: Commit; state: State}, params: AlarmParams): Promise<void> {
+ GET_ALARM(
+ context: { commit: Commit; state: State },
+ params: AlarmParams,
+ ): Promise<void> {
return graph
.query('queryAlarms')
.params(params)
diff --git a/src/store/modules/comparison/comparison-const.ts b/src/store/modules/comparison/comparison-const.ts
index eb5fa0e..3ef2cd8 100644
--- a/src/store/modules/comparison/comparison-const.ts
+++ b/src/store/modules/comparison/comparison-const.ts
@@ -17,11 +17,11 @@
import { IOption, ICurrentOptions, DataSourceType } from '@/types/comparison';
export const ComparisonType: IOption[] = [
- {key: 'Service', label: 'Service'},
- {key: 'ServiceInstance', label: 'Service Instance'},
- {key: 'ServiceEndpoint', label: 'Service Endpoint'},
- {key: 'Database', label: 'Database'},
- {key: 'ServiceDependency', label: 'Service Dependency'},
+ { key: 'Service', label: 'Service' },
+ { key: 'ServiceInstance', label: 'Service Instance' },
+ { key: 'ServiceEndpoint', label: 'Service Endpoint' },
+ { key: 'Database', label: 'Database' },
+ { key: 'ServiceDependency', label: 'Service Dependency' },
];
export enum ObjectType {
@@ -38,14 +38,14 @@
}
export const ComparisonOption: ICurrentOptions = {
- preService: {key: 0, label: ''},
- preType: {key: 'ServiceEndpoint', label: 'Service Endpoint'},
- preObject: {key: 0, label: ''},
- preMetrics: [{key: 0, label: ''}],
- nextService: {key: 0, label: ''},
- nextType: {key: 'ServiceEndpoint', label: 'Service Endpoint'},
- nextObject: {key: 0, label: ''},
- nextMetrics: [{key: 0, label: ''}],
+ preService: { key: 0, label: '' },
+ preType: { key: 'ServiceEndpoint', label: 'Service Endpoint' },
+ preObject: { key: 0, label: '' },
+ preMetrics: [{ key: 0, label: '' }],
+ nextService: { key: 0, label: '' },
+ nextType: { key: 'ServiceEndpoint', label: 'Service Endpoint' },
+ nextObject: { key: 0, label: '' },
+ nextMetrics: [{ key: 0, label: '' }],
};
export const InitSource: DataSourceType = {
@@ -78,10 +78,40 @@
export const LinearType = ['ChartBar', 'ChartLine'];
export const PercentileType: any = {
- servicePercent: ['serviceP50', 'serviceP75', 'serviceP90', 'serviceP95', 'serviceP99'],
- endpointPercent: ['endpointP50', 'endpointP75', 'endpointP90', 'endpointP95', 'endpointP99'],
- databasePercent: ['databaseP50', 'databaseP75', 'databaseP90', 'databaseP95', 'databaseP99'],
- dependencyServerPercentile: ['serverSideP50', 'serverSideP75', 'serverSideP90', 'serverSideP95', 'serverSideP99'],
- dependencyClientPercentile: ['clientSideP50', 'clientSideP75', 'clientSideP90', 'clientSideP95', 'clientSideP99'],
+ servicePercent: [
+ 'serviceP50',
+ 'serviceP75',
+ 'serviceP90',
+ 'serviceP95',
+ 'serviceP99',
+ ],
+ endpointPercent: [
+ 'endpointP50',
+ 'endpointP75',
+ 'endpointP90',
+ 'endpointP95',
+ 'endpointP99',
+ ],
+ databasePercent: [
+ 'databaseP50',
+ 'databaseP75',
+ 'databaseP90',
+ 'databaseP95',
+ 'databaseP99',
+ ],
+ dependencyServerPercentile: [
+ 'serverSideP50',
+ 'serverSideP75',
+ 'serverSideP90',
+ 'serverSideP95',
+ 'serverSideP99',
+ ],
+ dependencyClientPercentile: [
+ 'clientSideP50',
+ 'clientSideP75',
+ 'clientSideP90',
+ 'clientSideP95',
+ 'clientSideP99',
+ ],
};
export const PercentileItem: string[] = ['p50', 'p75', 'p90', 'p95', 'p99'];
diff --git a/src/store/modules/comparison/comparison-store.ts b/src/store/modules/comparison/comparison-store.ts
index f73b232..c391c4a 100644
--- a/src/store/modules/comparison/comparison-store.ts
+++ b/src/store/modules/comparison/comparison-store.ts
@@ -24,10 +24,22 @@
import { DurationTime } from '@/types/global';
import { queryChartData } from '@/utils/queryChartData';
import fragmentAll from '@/graph/query/comparison';
-import { ICurrentOptions, DataSourceType, ISelectConfig, MetricsType } from '@/types/comparison';
import {
- ComparisonOption, InitSource, LinearType, ComparisonType,
- ObjectType, ServiceType, ChangeType, StatusType, PercentileItem,
+ ICurrentOptions,
+ DataSourceType,
+ ISelectConfig,
+ MetricsType,
+} from '@/types/comparison';
+import {
+ ComparisonOption,
+ InitSource,
+ LinearType,
+ ComparisonType,
+ ObjectType,
+ ServiceType,
+ ChangeType,
+ StatusType,
+ PercentileItem,
} from './comparison-const';
type GenericIdentityFn<T> = (arg: T) => T;
@@ -94,8 +106,8 @@
const { key } = currentOptions.preType;
if (key === ObjectType.ServiceEndpoint) {
- variablesData.endpointId = currentOptions.preObject.key;
- variablesData.endpointName = currentOptions.preObject.label;
+ variablesData.endpointId = currentOptions.preObject.key;
+ variablesData.endpointName = currentOptions.preObject.label;
} else if (key === ObjectType.ServiceInstance) {
variablesData.instanceId = currentOptions.preObject.key;
} else if (key === ObjectType.Database) {
@@ -111,7 +123,7 @@
nextConfig(state: State) {
const { currentOptions } = state;
const { nextType, nextService, nextObject } = currentOptions;
- let variablesData = {serviceId: nextService.key} as any;
+ let variablesData = { serviceId: nextService.key } as any;
if (nextType.key === ObjectType.ServiceEndpoint) {
variablesData = {
@@ -206,7 +218,7 @@
[types.SET_METRICSOURCE](state: State, source: MetricsType) {
state.metricSource = source;
},
- [types.SET_SERVICES](state: State, data: {services: any[]}) {
+ [types.SET_SERVICES](state: State, data: { services: any[] }) {
const { services } = data;
if (!services.length) {
@@ -219,13 +231,18 @@
},
[types.SET_CONFIG](state: State, data: any[]) {
if (!data.length) {
- data = [{
- key: '',
- label: '',
- }];
+ data = [
+ {
+ key: '',
+ label: '',
+ },
+ ];
}
const { isPrevious, currentOptions, metricSource } = state as any;
- const type = isPrevious === StatusType.Pre ? currentOptions.preType.key : currentOptions.nextType.key;
+ const type =
+ isPrevious === StatusType.Pre
+ ? currentOptions.preType.key
+ : currentOptions.nextType.key;
if (isPrevious === StatusType.Pre) {
state.dataSource.preObjectSource = data;
@@ -256,7 +273,7 @@
};
}
},
- [types.SET_CHARTVAL](state: State, data: {value: any, type: string}) {
+ [types.SET_CHARTVAL](state: State, data: { value: any; type: string }) {
const { preObject, preService, preType } = state.currentOptions;
const { nextObject, nextService, nextType } = state.currentOptions;
const obj = {} as any;
@@ -265,11 +282,13 @@
let value = [] as any;
if (Array.isArray(data.value[key].values)) {
- value = data.value[key].values.map((d: {value: number}) => d.value);
+ value = data.value[key].values.map((d: { value: number }) => d.value);
} else {
value = {};
PercentileItem.forEach((item, index) => {
- value[item] = data.value[key][index].values.map((d: {value: number}) => d.value);
+ value[item] = data.value[key][index].values.map(
+ (d: { value: number }) => d.value,
+ );
});
}
obj[key] = value;
@@ -278,15 +297,17 @@
for (const key of Object.keys(obj)) {
if (data.type === ServiceType.PREVIOUS) {
const str = `${preService.label}_`;
- const strKeyPre = `${preType.key === ObjectType.Database ?
- '' : str}${preType.key === ObjectType.Service ? '' : preObject.label}_${key}`;
+ const strKeyPre = `${preType.key === ObjectType.Database ? '' : str}${
+ preType.key === ObjectType.Service ? '' : preObject.label
+ }_${key}`;
obj[strKeyPre] = obj[key];
delete obj[key];
} else {
const str = `${nextObject.label}`;
- const servicesLabel = `${nextService.label}_`;
- const strKeyNext = `${nextType.key === ObjectType.Database ?
- '' : servicesLabel}${nextType.key === ObjectType.Service ? '' : str}_${key}`;
+ const servicesLabel = `${nextService.label}_`;
+ const strKeyNext = `${
+ nextType.key === ObjectType.Database ? '' : servicesLabel
+ }${nextType.key === ObjectType.Service ? '' : str}_${key}`;
obj[strKeyNext] = obj[key];
delete obj[key];
}
@@ -297,16 +318,17 @@
};
},
[types.UPDATE_CONFIG](state: any, data: ISelectConfig) {
- const {type, option} = data;
- const { currentOptions, isPrevious } = state;
- const { nextType, preType } = currentOptions;
+ const { type, option } = data;
+ const { currentOptions } = state;
if (type === ChangeType.NextMetrics || type === ChangeType.PreMetrics) {
const metrics = currentOptions[type];
const item = metrics.findIndex((d: any) => d.key === option.key);
if (item > -1) {
- state.currentOptions[type] = metrics.filter((d: any) => d.key !== option.key);
+ state.currentOptions[type] = metrics.filter(
+ (d: any) => d.key !== option.key,
+ );
} else {
state.currentOptions[type].push(option);
}
@@ -381,41 +403,56 @@
// actions
const actions: ActionTree<State, ActionsParamType> = {
- GET_SERVICES(context: {commit: Commit, dispatch: Dispatch, getters: any, state: State}, params: {
- duration: string;
- }) {
+ GET_SERVICES(
+ context: { commit: Commit; dispatch: Dispatch; getters: any; state: State },
+ params: {
+ duration: string;
+ },
+ ) {
if (context.state.isPrevious !== StatusType.Init) {
return;
}
context.commit(types.SET_METRICSOURCE, context.getters.AllMetrics);
context.commit(types.SET_ISPREVIOUS, StatusType.Init);
- return graph.query('queryServices').params(params)
+ return graph
+ .query('queryServices')
+ .params(params)
.then((res: AxiosResponse) => {
if (!res.data.data) {
return;
}
- context.commit(types.SET_SERVICES, {services: res.data.data.services});
- }).then(() => {
+ context.commit(types.SET_SERVICES, {
+ services: res.data.data.services,
+ });
+ })
+ .then(() => {
context.dispatch('GET_SERVICE_ENDPOINTS', params.duration);
});
},
- GET_SERVICE_ENDPOINTS(context: { commit: Commit, state: State, dispatch: Dispatch }, date: string) {
+ GET_SERVICE_ENDPOINTS(
+ context: { commit: Commit; state: State; dispatch: Dispatch },
+ date: string,
+ ) {
if (!context.state.currentOptions.preService) {
return new Promise((resolve) => resolve());
}
const { isPrevious, currentOptions } = context.state;
- const servicesId = isPrevious === StatusType.Pre ? currentOptions.preService.key : currentOptions.nextService.key;
+ const servicesId =
+ isPrevious === StatusType.Pre
+ ? currentOptions.preService.key
+ : currentOptions.nextService.key;
graph
.query('queryEndpoints')
- .params({serviceId: servicesId, keyword: ''})
+ .params({ serviceId: servicesId, keyword: '' })
.then((res: AxiosResponse) => {
if (!res.data.data) {
return;
}
context.commit(types.SET_CONFIG, res.data.data.getEndpoints);
return res.data.data;
- }).then((data) => {
+ })
+ .then((data) => {
if (!data.getEndpoints) {
return;
}
@@ -424,9 +461,12 @@
}
});
},
- GET_SERVICE_INSTANCES(context: { commit: Commit, state: State }, params) {
+ GET_SERVICE_INSTANCES(context: { commit: Commit; state: State }, params) {
const { isPrevious, currentOptions } = context.state;
- params.serviceId = isPrevious === StatusType.Pre ? currentOptions.preService.key : currentOptions.nextService.key;
+ params.serviceId =
+ isPrevious === StatusType.Pre
+ ? currentOptions.preService.key
+ : currentOptions.nextService.key;
return graph
.query('queryInstances')
.params(params)
@@ -434,10 +474,16 @@
if (!res.data) {
return;
}
- context.commit(types.SELECT_INSTANCE_DATABASE, res.data.data.getServiceInstances);
+ context.commit(
+ types.SELECT_INSTANCE_DATABASE,
+ res.data.data.getServiceInstances,
+ );
});
},
- GET_DATABASES(context: { commit: Commit, state: State }, params: {duration: string}) {
+ GET_DATABASES(
+ context: { commit: Commit; state: State },
+ params: { duration: string },
+ ) {
return graph
.query('queryDatabases')
.params(params)
@@ -448,9 +494,12 @@
context.commit(types.SELECT_INSTANCE_DATABASE, res.data.data.services);
});
},
- GET_SERVICE_TOPOLOGY(context: { commit: Commit, state: State }, params) {
+ GET_SERVICE_TOPOLOGY(context: { commit: Commit; state: State }, params) {
const { isPrevious, currentOptions } = context.state;
- params.serviceId = isPrevious === StatusType.Pre ? currentOptions.preService.key : currentOptions.nextService.key;
+ params.serviceId =
+ isPrevious === StatusType.Pre
+ ? currentOptions.preService.key
+ : currentOptions.nextService.key;
return graph
.query('queryServiceTopo')
.params(params)
@@ -461,20 +510,39 @@
context.commit(types.SET_SERVICE_TOPOLOGY, res.data.data.topo);
});
},
- RENDER_CHART(context: {dispatch: Dispatch, commit: Commit}, date: string) {
+ RENDER_CHART(context: { dispatch: Dispatch; commit: Commit }, date: string) {
context.commit(types.CLEAR_CHART_VAL);
- context.dispatch('GET_COMPARISON', {duration: date, type: ServiceType.PREVIOUS});
- context.dispatch('GET_COMPARISON', {duration: date, type: ServiceType.NEXT});
+ context.dispatch('GET_COMPARISON', {
+ duration: date,
+ type: ServiceType.PREVIOUS,
+ });
+ context.dispatch('GET_COMPARISON', {
+ duration: date,
+ type: ServiceType.NEXT,
+ });
},
- SELECT_CONFIG(context: {commit: Commit, state: State, dispatch: Dispatch}, params: any) {
- const isPrevious = params.type.includes(StatusType.Next) ? StatusType.Next : StatusType.Pre;
+ SELECT_CONFIG(
+ context: { commit: Commit; state: State; dispatch: Dispatch },
+ params: any,
+ ) {
+ const isPrevious = params.type.includes(StatusType.Next)
+ ? StatusType.Next
+ : StatusType.Pre;
context.commit(types.SET_ISPREVIOUS, isPrevious);
context.commit(types.UPDATE_CONFIG, params);
const { currentOptions } = context.state;
- const objType = isPrevious === StatusType.Next ? currentOptions.nextType : currentOptions.preType;
- const typeList = [ChangeType.PreService, ChangeType.NextService, ChangeType.PreType, ChangeType.NextType];
+ const objType =
+ isPrevious === StatusType.Next
+ ? currentOptions.nextType
+ : currentOptions.preType;
+ const typeList = [
+ ChangeType.PreService,
+ ChangeType.NextService,
+ ChangeType.PreType,
+ ChangeType.NextType,
+ ];
if (typeList.includes(params.type)) {
if (objType.key === ObjectType.Service) {
@@ -486,14 +554,15 @@
} else if (objType.key === ObjectType.ServiceEndpoint) {
context.dispatch('GET_SERVICE_ENDPOINTS', params.duration);
} else if (objType.key === ObjectType.Database) {
- context.dispatch('GET_DATABASES', {duration: params.duration});
+ context.dispatch('GET_DATABASES', { duration: params.duration });
} else if (objType.key === ObjectType.ServiceDependency) {
- context.dispatch('GET_SERVICE_TOPOLOGY', {duration: params.duration});
+ context.dispatch('GET_SERVICE_TOPOLOGY', { duration: params.duration });
}
}
},
GET_COMPARISON(
- context: {commit: Commit, state: State, dispatch: Dispatch, getters: any}, param: {duration: string, type: string},
+ context: { commit: Commit; state: State; dispatch: Dispatch; getters: any },
+ param: { duration: string; type: string },
) {
let variablesData = {
duration: param.duration,
@@ -512,76 +581,113 @@
};
queryVal = context.getters.queryNextValue;
}
- return axios.post('/graphql', {
- query: queryVal,
- variables: variablesData,
- }, {cancelToken: cancelToken()}).then((res: AxiosResponse<any>) => {
+ return axios
+ .post(
+ '/graphql',
+ {
+ query: queryVal,
+ variables: variablesData,
+ },
+ { cancelToken: cancelToken() },
+ )
+ .then((res: AxiosResponse<any>) => {
const data = res.data.data;
if (!data) {
return;
}
- context.dispatch('FORMAT_VALUE', {value: data, type: param.type});
- });
+ context.dispatch('FORMAT_VALUE', { value: data, type: param.type });
+ });
},
- FORMAT_VALUE(context: {commit: Commit, state: State, dispatch: Dispatch}, params: {value: any, type: string}) {
+ FORMAT_VALUE(
+ context: { commit: Commit; state: State; dispatch: Dispatch },
+ params: { value: any; type: string },
+ ) {
if (!(params && params.value)) {
return;
}
if (params.value.endpointSLA) {
- params.value.endpointSLA.values = params.value.endpointSLA.values.map((i: any) => {
- return {value: i.value / 100};
- });
+ params.value.endpointSLA.values = params.value.endpointSLA.values.map(
+ (i: any) => {
+ return { value: i.value / 100 };
+ },
+ );
}
if (params.value.databaseSLA) {
- params.value.databaseSLA.values = params.value.databaseSLA.values.map((i: any) => {
- return {value: i.value / 100};
- });
+ params.value.databaseSLA.values = params.value.databaseSLA.values.map(
+ (i: any) => {
+ return { value: i.value / 100 };
+ },
+ );
}
if (params.value.serviceSLA) {
- params.value.serviceSLA.values = params.value.serviceSLA.values.map((i: any) => {
- return {value: i.value / 100};
- });
+ params.value.serviceSLA.values = params.value.serviceSLA.values.map(
+ (i: any) => {
+ return { value: i.value / 100 };
+ },
+ );
}
if (params.value.instanceSLA) {
- params.value.instanceSLA.values = params.value.instanceSLA.values.map((i: any) => {
- return {value: i.value / 100};
- });
+ params.value.instanceSLA.values = params.value.instanceSLA.values.map(
+ (i: any) => {
+ return { value: i.value / 100 };
+ },
+ );
}
if (params.value.serviceApdexScore) {
- params.value.serviceApdexScore.values = params.value.serviceApdexScore.values.map((i: any) => {
- return {value: (i.value / 10000).toFixed(2)};
- });
+ params.value.serviceApdexScore.values = params.value.serviceApdexScore.values.map(
+ (i: any) => {
+ return { value: (i.value / 10000).toFixed(2) };
+ },
+ );
}
if (params.value.heap && params.value.maxHeap) {
params.value.heap.values = params.value.heap.values.map((i: any) => {
- return {value: (i.value / 1048576).toFixed(2)};
+ return { value: (i.value / 1048576).toFixed(2) };
});
- params.value.maxHeap.values = params.value.maxHeap.values.map((i: any, index: number) => {
- const val = i.value > -1 ? ((i.value / 1048576) - params.value.heap.values[index].value).toFixed(2) : 0;
- return {value: val};
- });
+ params.value.maxHeap.values = params.value.maxHeap.values.map(
+ (i: any, index: number) => {
+ const val =
+ i.value > -1
+ ? (
+ i.value / 1048576 -
+ params.value.heap.values[index].value
+ ).toFixed(2)
+ : 0;
+ return { value: val };
+ },
+ );
if (Math.max.apply(Math, params.value.maxHeap.values) === -1) {
params.value.maxHeap.values = 'Max Heap Unlimited';
}
}
if (params.value.nonheap && params.value.maxNonHeap) {
- params.value.nonheap.values = params.value.nonheap.values.map((i: any) => {
- return {value : (i.value / 1048576).toFixed(2)};
- });
- params.value.maxNonHeap.values = params.value.maxNonHeap.values
- .map((i: any, index: number) => {
- const val = i.value > -1 ? ((i.value / 1048576) - params.value.nonheap.values[index].value).toFixed(2) : 0;
- return {value: val};
- });
+ params.value.nonheap.values = params.value.nonheap.values.map(
+ (i: any) => {
+ return { value: (i.value / 1048576).toFixed(2) };
+ },
+ );
+ params.value.maxNonHeap.values = params.value.maxNonHeap.values.map(
+ (i: any, index: number) => {
+ const val =
+ i.value > -1
+ ? (
+ i.value / 1048576 -
+ params.value.nonheap.values[index].value
+ ).toFixed(2)
+ : 0;
+ return { value: val };
+ },
+ );
if (Math.max.apply(Math, params.value.maxNonHeap.values) === -1) {
params.value.maxNonHeap.values = 'Max NonHeap Unlimited';
}
}
if (params.value.clrHeap) {
- params.value.clrHeap.values =
- params.value.clrHeap.values.map((i: any) => {
- return { value: (i.value / 1048576 ).toFixed(2)};
- });
+ params.value.clrHeap.values = params.value.clrHeap.values.map(
+ (i: any) => {
+ return { value: (i.value / 1048576).toFixed(2) };
+ },
+ );
}
context.commit(types.SET_CHARTVAL, params);
},
diff --git a/src/store/modules/dashboard/mutation-types.ts b/src/store/modules/dashboard/mutation-types.ts
index 73e3acc..abb3eed 100644
--- a/src/store/modules/dashboard/mutation-types.ts
+++ b/src/store/modules/dashboard/mutation-types.ts
@@ -17,7 +17,6 @@
export const ADD_DASHBOARD_QUERY = 'ADD_DASHBOARD_QUERY';
-
// dashboard
export const SET_CURRENT_INDEX = 'SET_CURRENT_INDEX';
export const SET_GLOBAL = 'SET_GLOBAL';
diff --git a/src/store/modules/global/index.ts b/src/store/modules/global/index.ts
index d903534..75ca20d 100644
--- a/src/store/modules/global/index.ts
+++ b/src/store/modules/global/index.ts
@@ -112,14 +112,19 @@
chartStack: [],
edit: false,
lock: true,
- utc: window.localStorage.getItem('utc') || -(new Date().getTimezoneOffset() / 60),
+ utc:
+ window.localStorage.getItem('utc') ||
+ -(new Date().getTimezoneOffset() / 60),
};
// getters
const getters = {
duration(state: State): Duration {
return {
- start: getLocalTime(parseInt(state.utc + '', 10), state.durationRow.start),
+ start: getLocalTime(
+ parseInt(state.utc + '', 10),
+ state.durationRow.start,
+ ),
end: getLocalTime(parseInt(state.utc + '', 10), state.durationRow.end),
step: state.durationRow.step,
};
@@ -137,17 +142,25 @@
interval = 86400000;
break;
case 'MONTH':
- interval = (getter.duration.end.getTime() - getter.duration.start.getTime())
- / (getter.duration.end.getFullYear() * 12 + getter.duration.end.getMonth()
- - getter.duration.start.getFullYear() * 12 - getter.duration.start.getMonth());
+ interval =
+ (getter.duration.end.getTime() - getter.duration.start.getTime()) /
+ (getter.duration.end.getFullYear() * 12 +
+ getter.duration.end.getMonth() -
+ getter.duration.start.getFullYear() * 12 -
+ getter.duration.start.getMonth());
break;
}
- const utcSpace = (parseInt(state.utc + '', 10) + new Date().getTimezoneOffset() / 60) * 3600000;
+ const utcSpace =
+ (parseInt(state.utc + '', 10) + new Date().getTimezoneOffset() / 60) *
+ 3600000;
const startUnix: number = getter.duration.start.getTime();
const endUnix: number = getter.duration.end.getTime();
const timeIntervals: string[] = [];
for (let i = 0; i <= endUnix - startUnix; i += interval) {
- const temp: string = dateFormatTime(new Date(startUnix + i - utcSpace), getter.duration.step);
+ const temp: string = dateFormatTime(
+ new Date(startUnix + i - utcSpace),
+ getter.duration.step,
+ );
timeIntervals.push(temp);
}
return timeIntervals;
@@ -182,9 +195,13 @@
},
[types.RUN_EVENTS](state: State): void {
clearTimeout(timer);
- timer = setTimeout(() => state.eventStack.forEach((event: any) => {
- setTimeout(event(), 0);
- }), 500);
+ timer = setTimeout(
+ () =>
+ state.eventStack.forEach((event: any) => {
+ setTimeout(event(), 0);
+ }),
+ 500,
+ );
},
[types.SET_EDIT](state: State, status: boolean): void {
state.edit = status;
diff --git a/src/store/modules/topology/index.ts b/src/store/modules/topology/index.ts
index 7a25e95..28d7225 100644
--- a/src/store/modules/topology/index.ts
+++ b/src/store/modules/topology/index.ts
@@ -59,7 +59,7 @@
getResponseTimeTrend: number[];
getSLATrend: number[];
getThroughputTrend: number[];
- responsePercentile: {[key: string]: number[]};
+ responsePercentile: { [key: string]: number[] };
honeycombNode: any;
showDialog: boolean;
showDialogType: string;
@@ -68,7 +68,7 @@
nodes: Node[];
};
selectedInstanceCall: Call | null;
- instanceDependencyMetrics: {[key: string]: any};
+ instanceDependencyMetrics: { [key: string]: any };
queryInstanceMetricsType: string;
}
@@ -138,17 +138,24 @@
state.selectedServiceCall = data;
},
[types.SET_TOPO_RELATION](state: State, data: any) {
- state.getResponseTimeTrend = data.getResponseTimeTrend ?
- data.getResponseTimeTrend.values.map((i: any) => i.value) : [];
- state.getSLATrend = data.getSLATrend ? data.getSLATrend.values.map((i: any) => i.value) : [];
- state.getThroughputTrend = data.getThroughputTrend ? data.getThroughputTrend.values.map((i: any) => i.value) : [];
+ state.getResponseTimeTrend = data.getResponseTimeTrend
+ ? data.getResponseTimeTrend.values.map((i: any) => i.value)
+ : [];
+ state.getSLATrend = data.getSLATrend
+ ? data.getSLATrend.values.map((i: any) => i.value)
+ : [];
+ state.getThroughputTrend = data.getThroughputTrend
+ ? data.getThroughputTrend.values.map((i: any) => i.value)
+ : [];
if (!data.getPercentile) {
state.responsePercentile = {};
return;
}
data.getPercentile.forEach((item: any, index: number) => {
- state.responsePercentile[PercentileItem[index]] = item.values.map((i: any) => i.value);
+ state.responsePercentile[PercentileItem[index]] = item.values.map(
+ (i: any) => i.value,
+ );
});
},
[types.SET_INSTANCE_DEPENDENCY](state: State, data: any) {
@@ -158,18 +165,23 @@
state.selectedInstanceCall = data;
},
[types.SET_INSTANCE_DEPEDENCE_METRICS](state: State, data: any) {
- state.instanceDependencyMetrics.getResponseTimeTrend = data.getResponseTimeTrend ?
- data.getResponseTimeTrend.values.map((i: any) => i.value) : [];
- state.instanceDependencyMetrics.getSLATrend = data.getSLATrend ?
- data.getSLATrend.values.map((i: any) => i.value) : [];
- state.instanceDependencyMetrics.getThroughputTrend = data.getThroughputTrend ?
- data.getThroughputTrend.values.map((i: any) => i.value) : [];
+ state.instanceDependencyMetrics.getResponseTimeTrend = data.getResponseTimeTrend
+ ? data.getResponseTimeTrend.values.map((i: any) => i.value)
+ : [];
+ state.instanceDependencyMetrics.getSLATrend = data.getSLATrend
+ ? data.getSLATrend.values.map((i: any) => i.value)
+ : [];
+ state.instanceDependencyMetrics.getThroughputTrend = data.getThroughputTrend
+ ? data.getThroughputTrend.values.map((i: any) => i.value)
+ : [];
state.instanceDependencyMetrics.percentResponse = {};
if (!data.getPercentile) {
return;
}
data.getPercentile.forEach((item: any, index: number) => {
- state.instanceDependencyMetrics.percentResponse[PercentileItem[index]] = item.values.map((i: any) => i.value);
+ state.instanceDependencyMetrics.percentResponse[
+ PercentileItem[index]
+ ] = item.values.map((i: any) => i.value);
});
},
[types.SET_INSTANCE_DEPEDENCE_TYPE](state: State, data: string) {
@@ -179,15 +191,16 @@
// actions
const actions: ActionTree<State, any> = {
- CLEAR_TOPO(context: { commit: Commit; state: State; }) {
- context.commit(types.SET_TOPO, {calls: [], nodes: []});
+ CLEAR_TOPO(context: { commit: Commit; state: State }) {
+ context.commit(types.SET_TOPO, { calls: [], nodes: [] });
},
- CLEAR_TOPO_INFO(context: { commit: Commit; state: State; }) {
+ CLEAR_TOPO_INFO(context: { commit: Commit; state: State }) {
context.commit(types.SET_TOPO_RELATION, {});
context.commit(types.SET_SELECTED_CALL, null);
},
GET_INSTANCE_DEPENDENCY_METRICS(
- context: { commit: Commit; state: State, dispatch: Dispatch, getters: any}, params: any,
+ context: { commit: Commit; state: State; dispatch: Dispatch; getters: any },
+ params: any,
) {
if (params.mode === 'SERVER') {
params.queryType = 'queryTopoInstanceServerInfo';
@@ -198,97 +211,125 @@
context.dispatch('INSTANCE_RELATION_INFO', params);
}
},
- GET_TOPO_SERVICE_INFO(context: { commit: Commit; state: State; }, params: any) {
+ GET_TOPO_SERVICE_INFO(
+ context: { commit: Commit; state: State },
+ params: any,
+ ) {
return graph
- .query('queryTopoServiceInfo')
- .params({
- id: params.id,
- duration: params.duration,
- })
- .then((res: AxiosResponse) => {
- context.commit('SET_TOPO_RELATION', res.data.data);
- context.commit(types.SET_SELECTED_CALL, params);
- });
+ .query('queryTopoServiceInfo')
+ .params({
+ id: params.id,
+ duration: params.duration,
+ })
+ .then((res: AxiosResponse) => {
+ context.commit('SET_TOPO_RELATION', res.data.data);
+ context.commit(types.SET_SELECTED_CALL, params);
+ });
},
- GET_TOPO_CLIENT_INFO(context: { commit: Commit; state: State; }, params: any) {
+ GET_TOPO_CLIENT_INFO(context: { commit: Commit; state: State }, params: any) {
return graph
- .query('queryTopoClientInfo')
- .params(params)
- .then((res: AxiosResponse) => {
- context.commit('SET_TOPO_RELATION', res.data.data);
- context.commit(types.SET_SELECTED_CALL, params);
- });
+ .query('queryTopoClientInfo')
+ .params(params)
+ .then((res: AxiosResponse) => {
+ context.commit('SET_TOPO_RELATION', res.data.data);
+ context.commit(types.SET_SELECTED_CALL, params);
+ });
},
- GET_TOPO(context: { commit: Commit; state: State; }, params: any) {
+ GET_TOPO(context: { commit: Commit; state: State }, params: any) {
let query = 'queryTopo';
if (params.serviceId) {
query = 'queryServiceTopo';
}
return graph
- .query(query)
- .params(params)
- .then((res: AxiosResponse) => {
- const calls = res.data.data.topo.calls;
- const nodes = res.data.data.topo.nodes;
- const ids = nodes.map((i: any) => i.id);
- const idsS = calls.filter((i: any) => i.detectPoints.indexOf('CLIENT') === -1).map((b: any) => b.id);
- const idsC = calls.filter((i: any) => i.detectPoints.indexOf('CLIENT') !== -1).map((b: any) => b.id);
- return graph
- .query('queryTopoInfo')
- .params({...params, ids, idsC, idsS})
- .then((info: AxiosResponse) => {
- const resInfo = info.data.data;
- if (!resInfo.sla) {
- return context.commit(types.SET_TOPO, {calls, nodes});
- }
- for (let i = 0; i < resInfo.sla.values.length; i += 1) {
- for (let j = 0; j < nodes.length; j += 1) {
- if (nodes[j].id === resInfo.sla.values[i].id) {
- nodes[j] = {
- ...nodes[j],
- sla: resInfo.sla.values[i].value ? resInfo.sla.values[i].value / 100 : -1,
- cpm: resInfo.nodeCpm.values[i] ? resInfo.nodeCpm.values[i].value : -1,
- latency: resInfo.nodeLatency.values[i] ? resInfo.nodeLatency.values[i].value : -1,
- };
+ .query(query)
+ .params(params)
+ .then((res: AxiosResponse) => {
+ const calls = res.data.data.topo.calls;
+ const nodes = res.data.data.topo.nodes;
+ const ids = nodes.map((i: any) => i.id);
+ const idsS = calls
+ .filter((i: any) => i.detectPoints.indexOf('CLIENT') === -1)
+ .map((b: any) => b.id);
+ const idsC = calls
+ .filter((i: any) => i.detectPoints.indexOf('CLIENT') !== -1)
+ .map((b: any) => b.id);
+ return graph
+ .query('queryTopoInfo')
+ .params({ ...params, ids, idsC, idsS })
+ .then((info: AxiosResponse) => {
+ const resInfo = info.data.data;
+ if (!resInfo.sla) {
+ return context.commit(types.SET_TOPO, { calls, nodes });
+ }
+ for (let i = 0; i < resInfo.sla.values.length; i += 1) {
+ for (let j = 0; j < nodes.length; j += 1) {
+ if (nodes[j].id === resInfo.sla.values[i].id) {
+ nodes[j] = {
+ ...nodes[j],
+ sla: resInfo.sla.values[i].value
+ ? resInfo.sla.values[i].value / 100
+ : -1,
+ cpm: resInfo.nodeCpm.values[i]
+ ? resInfo.nodeCpm.values[i].value
+ : -1,
+ latency: resInfo.nodeLatency.values[i]
+ ? resInfo.nodeLatency.values[i].value
+ : -1,
+ };
+ }
}
}
- }
- if (!resInfo.cpmC) {
- return context.commit(types.SET_TOPO, {calls, nodes});
- }
- for (let i = 0; i < resInfo.cpmC.values.length; i += 1) {
- for (let j = 0; j < calls.length; j += 1) {
- if (calls[j].id === resInfo.cpmC.values[i].id) {
- calls[j] = {
- ...calls[j],
- cpm: resInfo.cpmC.values[i] ? resInfo.cpmC.values[i].value : '',
- latency: resInfo.latencyC.values[i] ? resInfo.latencyC.values[i].value : '',
- };
+ if (!resInfo.cpmC) {
+ return context.commit(types.SET_TOPO, { calls, nodes });
+ }
+ for (let i = 0; i < resInfo.cpmC.values.length; i += 1) {
+ for (let j = 0; j < calls.length; j += 1) {
+ if (calls[j].id === resInfo.cpmC.values[i].id) {
+ calls[j] = {
+ ...calls[j],
+ cpm: resInfo.cpmC.values[i]
+ ? resInfo.cpmC.values[i].value
+ : '',
+ latency: resInfo.latencyC.values[i]
+ ? resInfo.latencyC.values[i].value
+ : '',
+ };
+ }
}
}
- }
- if (!resInfo.cpmS) {
- return context.commit(types.SET_TOPO, {calls, nodes});
- }
- for (let i = 0; i < resInfo.cpmS.values.length; i += 1) {
- for (let j = 0; j < calls.length; j += 1) {
- if (calls[j].id === resInfo.cpmS.values[i].id) {
- calls[j] = {
- ...calls[j],
- cpm: resInfo.cpmS.values[i] ? resInfo.cpmS.values[i].value : '',
- latency: resInfo.latencyS.values[i] ? resInfo.latencyS.values[i].value : '',
- };
+ if (!resInfo.cpmS) {
+ return context.commit(types.SET_TOPO, { calls, nodes });
+ }
+ for (let i = 0; i < resInfo.cpmS.values.length; i += 1) {
+ for (let j = 0; j < calls.length; j += 1) {
+ if (calls[j].id === resInfo.cpmS.values[i].id) {
+ calls[j] = {
+ ...calls[j],
+ cpm: resInfo.cpmS.values[i]
+ ? resInfo.cpmS.values[i].value
+ : '',
+ latency: resInfo.latencyS.values[i]
+ ? resInfo.latencyS.values[i].value
+ : '',
+ };
+ }
}
}
- }
- context.commit(types.SET_TOPO, {calls, nodes});
- });
- });
+ context.commit(types.SET_TOPO, { calls, nodes });
+ });
+ });
},
- async GET_TOPO_INSTANCE_DEPENDENCY(context: { commit: Commit; state: State; }, params: {
- clientServiceId: string, serverServiceId: string, duration: string}) {
-
- graph.query('queryTopoInstanceDependency').params(params)
+ async GET_TOPO_INSTANCE_DEPENDENCY(
+ context: { commit: Commit; state: State },
+ params: {
+ clientServiceId: string;
+ serverServiceId: string;
+ duration: string;
+ },
+ ) {
+ graph
+ .query('queryTopoInstanceDependency')
+ .params(params)
.then((res: AxiosResponse) => {
if (!(res.data && res.data.data)) {
return;
@@ -303,58 +344,69 @@
serverIdsC.push(call.id);
}
}
- graph.query('queryDependencyInstanceClientMetric').params({
- idsC: clientIdsC,
- duration: params.duration,
- }).then((json: AxiosResponse) => {
- const clientCalls = [] as string[];
- for (const call of topoCalls) {
- for (const cpm of json.data.data.cpmC.values) {
- if (cpm.id === call.id) {
- clientCalls.push({
- ...call,
- ...cpm,
- });
- }
- }
- }
- graph.query('queryDependencyInstanceServerMetric').params({
- idsC: serverIdsC,
+ graph
+ .query('queryDependencyInstanceClientMetric')
+ .params({
+ idsC: clientIdsC,
duration: params.duration,
- }).then((jsonResp: AxiosResponse) => {
- const serverCalls = [] as string[];
+ })
+ .then((json: AxiosResponse) => {
+ const clientCalls = [] as string[];
for (const call of topoCalls) {
- for (const cpm of jsonResp.data.data.cpmC.values) {
+ for (const cpm of json.data.data.cpmC.values) {
if (cpm.id === call.id) {
- serverCalls.push({
+ clientCalls.push({
...call,
...cpm,
});
}
}
}
- const data = {
- nodes: res.data.data.topo.nodes,
- calls: [...serverCalls, ...clientCalls],
- };
- context.commit(types.SET_INSTANCE_DEPENDENCY, data);
+ graph
+ .query('queryDependencyInstanceServerMetric')
+ .params({
+ idsC: serverIdsC,
+ duration: params.duration,
+ })
+ .then((jsonResp: AxiosResponse) => {
+ const serverCalls = [] as string[];
+ for (const call of topoCalls) {
+ for (const cpm of jsonResp.data.data.cpmC.values) {
+ if (cpm.id === call.id) {
+ serverCalls.push({
+ ...call,
+ ...cpm,
+ });
+ }
+ }
+ }
+ const data = {
+ nodes: res.data.data.topo.nodes,
+ calls: [...serverCalls, ...clientCalls],
+ };
+ context.commit(types.SET_INSTANCE_DEPENDENCY, data);
+ });
});
- });
});
},
- INSTANCE_RELATION_INFO(context: { commit: Commit; state: State; }, params: Call &
- {mode: string; queryType: string; durationTime: string}) {
- graph.query(params.queryType).params({
- id: params.id,
- duration: params.durationTime,
- }).then((res: AxiosResponse) => {
- if (!(res.data && res.data.data)) {
- return;
- }
- context.commit(types.SET_SELECTED_INSTANCE_CALL, params);
- context.commit(types.SET_INSTANCE_DEPEDENCE_TYPE, params.mode);
- context.commit(types.SET_INSTANCE_DEPEDENCE_METRICS, res.data.data);
- });
+ INSTANCE_RELATION_INFO(
+ context: { commit: Commit; state: State },
+ params: Call & { mode: string; queryType: string; durationTime: string },
+ ) {
+ graph
+ .query(params.queryType)
+ .params({
+ id: params.id,
+ duration: params.durationTime,
+ })
+ .then((res: AxiosResponse) => {
+ if (!(res.data && res.data.data)) {
+ return;
+ }
+ context.commit(types.SET_SELECTED_INSTANCE_CALL, params);
+ context.commit(types.SET_INSTANCE_DEPEDENCE_TYPE, params.mode);
+ context.commit(types.SET_INSTANCE_DEPEDENCE_METRICS, res.data.data);
+ });
},
};
diff --git a/src/store/modules/trace/index.ts b/src/store/modules/trace/index.ts
index 3c986ee..a082730 100644
--- a/src/store/modules/trace/index.ts
+++ b/src/store/modules/trace/index.ts
@@ -36,7 +36,7 @@
services: [],
instances: [],
traceForm: {
- paging: {pageNum: 1, pageSize: 15, needTotal: true},
+ paging: { pageNum: 1, pageSize: 15, needTotal: true },
queryOrder: localStorage.getItem('traceQueryOrder') || 'BY_DURATION',
},
traceList: [],
@@ -58,10 +58,10 @@
// mutations
const mutations: MutationTree<State> = {
[types.SET_SERVICES](state: State, data: Option[]): void {
- state.services = [{label: 'All', key: ''}].concat(data);
+ state.services = [{ label: 'All', key: '' }].concat(data);
},
[types.SET_INSTANCES](state: State, data: Option[]): void {
- state.instances = [{label: 'All', key: ''}].concat(data);
+ state.instances = [{ label: 'All', key: '' }].concat(data);
},
[types.SET_TRACE_FORM](state: State, data: any): void {
if (data.queryOrder) {
@@ -127,14 +127,17 @@
context.commit(types.SET_INSTANCES, res.data.data.instanceId);
});
},
- SET_TRACE_FORM(context: { commit: Commit, dispatch: Dispatch }, params: any): void {
+ SET_TRACE_FORM(
+ context: { commit: Commit; dispatch: Dispatch },
+ params: any,
+ ): void {
context.commit(types.SET_TRACE_FORM, params);
},
- GET_TRACELIST(context: { state: State, commit: Commit }): Promise<void> {
+ GET_TRACELIST(context: { state: State; commit: Commit }): Promise<void> {
context.commit(types.SET_TRACELIST, []);
return graph
.query('queryTraces')
- .params({condition: context.state.traceForm})
+ .params({ condition: context.state.traceForm })
.then((res: AxiosResponse) => {
context.commit(types.SET_TRACELIST, res.data.data.traces.data);
context.commit(types.SET_TRACELIST_TOTAL, res.data.data.traces.total);
diff --git a/src/types/comparison.d.ts b/src/types/comparison.d.ts
index 8aaadd8..2cf41d7 100644
--- a/src/types/comparison.d.ts
+++ b/src/types/comparison.d.ts
@@ -18,7 +18,7 @@
key: number | string;
label: string;
sources?: any;
-}
+};
export interface ICurrentOptions {
preService: IOption;
preType: IOption;
@@ -42,7 +42,7 @@
export interface ISelectConfig {
option: IOption;
type: string;
- duration: string
+ duration: string;
}
export interface MetricsType {
diff --git a/src/types/dashboard.d.ts b/src/types/dashboard.d.ts
index 3270d9b..c3897aa 100644
--- a/src/types/dashboard.d.ts
+++ b/src/types/dashboard.d.ts
@@ -14,7 +14,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { Option } from "./global";
+import { Option } from './global';
export interface Value {
value: number;
}
diff --git a/src/types/trace.d.ts b/src/types/trace.d.ts
index d5f0a37..25a7353 100644
--- a/src/types/trace.d.ts
+++ b/src/types/trace.d.ts
@@ -31,4 +31,4 @@
operationNames: string[];
start: string;
traceIds: string[];
-}
\ No newline at end of file
+}
diff --git a/src/utils/cancelToken.ts b/src/utils/cancelToken.ts
index 8095a84..32979e0 100644
--- a/src/utils/cancelToken.ts
+++ b/src/utils/cancelToken.ts
@@ -19,8 +19,8 @@
/* eslint-disable */
const CancelToken = axios.CancelToken;
-export const cancelToken = () => ( new CancelToken(function executor(c) {
+export const cancelToken = () =>
+ new CancelToken(function executor(c) {
const w = window as any;
w.axiosCancel.push(c);
- })
-);
+ });
diff --git a/src/utils/comparison.ts b/src/utils/comparison.ts
index 14fe756..b12147a 100644
--- a/src/utils/comparison.ts
+++ b/src/utils/comparison.ts
@@ -22,7 +22,10 @@
* @return The same object return false, otherwise return true.
*/
const compareObj = (objA: object, objB: object): boolean => {
- return JSON.stringify(Object.entries(objA).sort(), null, 0) !== JSON.stringify(Object.entries(objB).sort(), null, 0);
+ return (
+ JSON.stringify(Object.entries(objA).sort(), null, 0) !==
+ JSON.stringify(Object.entries(objB).sort(), null, 0)
+ );
};
export default compareObj;
diff --git a/src/utils/copy.ts b/src/utils/copy.ts
index d672f86..3339ab2 100644
--- a/src/utils/copy.ts
+++ b/src/utils/copy.ts
@@ -22,8 +22,8 @@
document.body.appendChild(input);
input.select();
if (document.execCommand('Copy')) {
- document.execCommand('Copy');
+ document.execCommand('Copy');
}
input.remove();
- Vue.prototype.$noty.success('Copied!', {timeout: 500});
+ Vue.prototype.$noty.success('Copied!', { timeout: 500 });
};
diff --git a/src/utils/cssHelper.ts b/src/utils/cssHelper.ts
index de82c68..05915d6 100644
--- a/src/utils/cssHelper.ts
+++ b/src/utils/cssHelper.ts
@@ -14,8 +14,10 @@
class CssHelper {
public matrixSerialization(matrixString: string): CssMatrix {
- const matrixArray = matrixString.replace('matrix(', '')
- .replace(')', '').split(',');
+ const matrixArray = matrixString
+ .replace('matrix(', '')
+ .replace(')', '')
+ .split(',');
// const matrixNumberArray = [];
const matrixNumberArray = matrixArray.map((value) => {
return parseFloat(value);
@@ -41,8 +43,10 @@
}
public translateSerialization(translateString: string): CssTranslate {
- const translateArray = translateString.replace('translate(', '')
- .replace(')', '').split(',');
+ const translateArray = translateString
+ .replace('translate(', '')
+ .replace(')', '')
+ .split(',');
// const translateNumberArray = [];
const translateNumberArray = translateArray.map((value) => {
return parseFloat(value);
diff --git a/src/utils/localtime.ts b/src/utils/localtime.ts
index 0bd5ae9..5cbb06a 100644
--- a/src/utils/localtime.ts
+++ b/src/utils/localtime.ts
@@ -23,23 +23,24 @@
const len = d.getTime();
const offset = d.getTimezoneOffset() * 60000;
const utcTime = len + offset;
- return new Date(utcTime + (3600000 * i));
+ return new Date(utcTime + 3600000 * i);
};
const setTimezoneOffset = () => {
- window.localStorage.setItem('utc', -(new Date().getTimezoneOffset() / 60) + '');
+ window.localStorage.setItem(
+ 'utc',
+ -(new Date().getTimezoneOffset() / 60) + '',
+ );
};
export const queryOAPTimeInfo = async () => {
let utc = window.localStorage.getItem('utc');
if (!utc) {
- const res: AxiosResponse = await graph
- .query('queryOAPTimeInfo')
- .params({});
+ const res: AxiosResponse = await graph.query('queryOAPTimeInfo').params({});
if (!res.data) {
setTimezoneOffset();
}
- utc = (res.data.data.getTimeInfo.timezone / 100) + '';
+ utc = res.data.data.getTimeInfo.timezone / 100 + '';
window.localStorage.setItem('utc', utc);
}
};
diff --git a/src/utils/queryChartData.ts b/src/utils/queryChartData.ts
index 5965a2d..cad616a 100644
--- a/src/utils/queryChartData.ts
+++ b/src/utils/queryChartData.ts
@@ -19,86 +19,500 @@
service: [
// global
{
- o: 'Global', d: 'globalHeatmap', c: 'ChartHeatmap', t: 'Global Heatmap', w: 3, h: 250,
- }, {
- o: 'Global', d: 'globalPercent', c: 'ChartLine', t: 'Global Response Time Percentile', w: 3, h: 250,
- }, {
- o: 'Global', d: 'globalBrief', c: 'ChartBrief', t: 'Global Brief', w: 3, h: 250,
- }, {
- o: 'Global', d: 'globalThroughput', c: 'ChartTrace', t: 'Global Top Throughput', w: 3, h: 250,
- }, {
- o: 'Global', d: 'globalSlow', c: 'ChartSlow', t: 'Global Top Slow Endpoint', w: 3, h: 250,
+ o: 'Global',
+ d: 'globalHeatmap',
+ c: 'ChartHeatmap',
+ t: 'Global Heatmap',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'Global',
+ d: 'globalPercent',
+ c: 'ChartLine',
+ t: 'Global Response Time Percentile',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'Global',
+ d: 'globalBrief',
+ c: 'ChartBrief',
+ t: 'Global Brief',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'Global',
+ d: 'globalThroughput',
+ c: 'ChartTrace',
+ t: 'Global Top Throughput',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'Global',
+ d: 'globalSlow',
+ c: 'ChartSlow',
+ t: 'Global Top Slow Endpoint',
+ w: 3,
+ h: 250,
},
// service
- { o: 'Service', d: 'serviceResponseTime', c: 'ChartNum', t: 'Service Avg ResponseTime', w: 3, h: 250 },
- { o: 'Service', d: 'serviceThroughput', c: 'ChartNum', t: 'Service Avg Throughput', w: 3, h: 250 },
- { o: 'Service', d: 'serviceSLA', c: 'ChartNum', t: 'Service Avg SLA', w: 3, h: 250 },
- { o: 'Service', d: 'serviceResponseTime', c: 'ChartLine', t: 'Service ResponseTime', w: 3, h: 250 },
- { o: 'Service', d: 'serviceThroughput', c: 'ChartLine', t: 'Service Throughput', w: 3, h: 250 },
- { o: 'Service', d: 'serviceSLA', c: 'ChartBar', t: 'Service SLA', w: 3, h: 250 },
- { o: 'Service', d: 'serviceInstanceThroughput', c: 'ChartTrace', t: 'Running ServiceInstance', w: 3, h: 250 },
- { o: 'Service', d: 'servicePercent', c: 'ChartLine', t: 'Service Response Time Percentile', w: 3, h: 250 },
- { o: 'Service', d: 'serviceSlowEndpoint', c: 'ChartSlow', t: 'Service Slow Endpoint', w: 3, h: 250 },
- { o: 'Service', d: 'serviceApdexScore', c: 'ChartLine', t: 'Service ApdexScore', w: 3, h: 250},
- { o: 'Service', d: 'serviceApdexScore', c: 'ChartNum', t: 'Service Avg ApdexScore', w: 3, h: 250},
+ {
+ o: 'Service',
+ d: 'serviceResponseTime',
+ c: 'ChartNum',
+ t: 'Service Avg ResponseTime',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'Service',
+ d: 'serviceThroughput',
+ c: 'ChartNum',
+ t: 'Service Avg Throughput',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'Service',
+ d: 'serviceSLA',
+ c: 'ChartNum',
+ t: 'Service Avg SLA',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'Service',
+ d: 'serviceResponseTime',
+ c: 'ChartLine',
+ t: 'Service ResponseTime',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'Service',
+ d: 'serviceThroughput',
+ c: 'ChartLine',
+ t: 'Service Throughput',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'Service',
+ d: 'serviceSLA',
+ c: 'ChartBar',
+ t: 'Service SLA',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'Service',
+ d: 'serviceInstanceThroughput',
+ c: 'ChartTrace',
+ t: 'Running ServiceInstance',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'Service',
+ d: 'servicePercent',
+ c: 'ChartLine',
+ t: 'Service Response Time Percentile',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'Service',
+ d: 'serviceSlowEndpoint',
+ c: 'ChartSlow',
+ t: 'Service Slow Endpoint',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'Service',
+ d: 'serviceApdexScore',
+ c: 'ChartLine',
+ t: 'Service ApdexScore',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'Service',
+ d: 'serviceApdexScore',
+ c: 'ChartNum',
+ t: 'Service Avg ApdexScore',
+ w: 3,
+ h: 250,
+ },
// Endpoint
- { o: 'ServiceEndpoint', d: 'endpointResponseTime', c: 'ChartNum', t: 'Endpoint Avg ResponseTime', w: 3, h: 250 },
- { o: 'ServiceEndpoint', d: 'endpointThroughput', c: 'ChartNum', t: 'Endpoint Avg Throughput', w: 3, h: 250 },
- { o: 'ServiceEndpoint', d: 'endpointSLA', c: 'ChartNum', t: 'Endpoint Avg SLA', w: 3, h: 250 },
- { o: 'ServiceEndpoint', d: 'endpointResponseTime', c: 'ChartLine', t: 'Endpoint ResponseTime', w: 3, h: 250 },
- { o: 'ServiceEndpoint', d: 'endpointThroughput', c: 'ChartLine', t: 'Endpoint Throughput', w: 3, h: 250 },
- { o: 'ServiceEndpoint', d: 'endpointSLA', c: 'ChartBar', t: 'Endpoint SLA', w: 3, h: 250 },
- { o: 'ServiceEndpoint', d: 'endpointPercent', c: 'ChartLine',
- t: 'Endpoint Response Time Percentile', w: 3, h: 250},
- { o: 'ServiceEndpoint', d: 'endpointTraces', c: 'ChartSlow', t: 'Slow Traces', w: 3, h: 250 },
- { o: 'ServiceEndpoint', d: 'endpointTopology', c: 'ChartSankey', t: 'Dependency Map', w: 3, h: 250 },
+ {
+ o: 'ServiceEndpoint',
+ d: 'endpointResponseTime',
+ c: 'ChartNum',
+ t: 'Endpoint Avg ResponseTime',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'ServiceEndpoint',
+ d: 'endpointThroughput',
+ c: 'ChartNum',
+ t: 'Endpoint Avg Throughput',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'ServiceEndpoint',
+ d: 'endpointSLA',
+ c: 'ChartNum',
+ t: 'Endpoint Avg SLA',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'ServiceEndpoint',
+ d: 'endpointResponseTime',
+ c: 'ChartLine',
+ t: 'Endpoint ResponseTime',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'ServiceEndpoint',
+ d: 'endpointThroughput',
+ c: 'ChartLine',
+ t: 'Endpoint Throughput',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'ServiceEndpoint',
+ d: 'endpointSLA',
+ c: 'ChartBar',
+ t: 'Endpoint SLA',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'ServiceEndpoint',
+ d: 'endpointPercent',
+ c: 'ChartLine',
+ t: 'Endpoint Response Time Percentile',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'ServiceEndpoint',
+ d: 'endpointTraces',
+ c: 'ChartSlow',
+ t: 'Slow Traces',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'ServiceEndpoint',
+ d: 'endpointTopology',
+ c: 'ChartSankey',
+ t: 'Dependency Map',
+ w: 3,
+ h: 250,
+ },
// instance
- { o: 'ServiceInstance', d: 'globalBrief', c: 'ChartInstance', t: 'Instance Info', w: 3, h: 250 },
- { o: 'ServiceInstance', d: 'instanceResponseTime', c: 'ChartNum', t: 'Instance Avg ResponseTime', w: 3, h: 250 },
- { o: 'ServiceInstance', d: 'instanceThroughput', c: 'ChartNum', t: 'Instance Avg Throughput', w: 3, h: 250 },
- { o: 'ServiceInstance', d: 'instanceSLA', c: 'ChartNum', t: 'Instance Avg SLA', w: 3, h: 250 },
- { o: 'ServiceInstance', d: 'instanceResponseTime', c: 'ChartLine', t: 'Instance ResponseTime', w: 3, h: 250 },
- { o: 'ServiceInstance', d: 'instanceThroughput', c: 'ChartLine', t: 'Instance Throughput', w: 3, h: 250 },
- { o: 'ServiceInstance', d: 'instanceSLA', c: 'ChartLine', t: 'Instance SLA', w: 3, h: 250 },
- { o: 'ServiceInstance', d: 'instanceHeap', c: 'ChartLine', t: 'JVM Heap (MB)', w: 3, h: 250 },
- { o: 'ServiceInstance', d: 'instanceNonheap', c: 'ChartLine', t: 'JVM Non-Heap (MB)', w: 3, h: 250 },
- { o: 'ServiceInstance', d: 'instanceGC', c: 'ChartLine', t: 'JVM GC (ms)', w: 3, h: 250 },
- { o: 'ServiceInstance', d: 'instanceGCCount', c: 'ChartCount', t: 'JVM GC Count', w: 3, h: 250 },
- { o: 'ServiceInstance', d: 'instanceCPU', c: 'ChartLine', t: 'JVM CPU (%)', w: 3, h: 250 },
- { o: 'ServiceInstance', d: 'instanceClrCPU', c: 'ChartLine', t: 'CLR CPU (%)', w: 3, h: 250 },
- { o: 'ServiceInstance', d: 'instanceClrGC', c: 'ChartLine', t: 'CLR GC (Count)', w: 3, h: 250 },
- { o: 'ServiceInstance', d: 'instanceClrHeap', c: 'ChartLine', t: 'CLR HeapMemory (MB)', w: 3, h: 250 },
- {o: 'ServiceDependency', d: 'dependencyServerPercentile',
- c: 'ChartLine', t: 'Server Response Time Percentile', w: 3, h: 250},
- {o: 'ServiceDependency', d: 'dependencyClientPercentile',
- c: 'ChartLine', t: 'Client Response Time Percentile', w: 3, h: 250},
- {o: 'ServiceDependency', d: 'dependencyServerResponseTimeTrend',
- c: 'ChartLine', t: 'Server Response Time', w: 3, h: 250},
- {o: 'ServiceDependency', d: 'dependencyClientResponseTimeTrend',
- c: 'ChartLine', t: 'Client Response Time', w: 3, h: 250},
- {o: 'ServiceDependency', d: 'dependencyServerThroughputTrend',
- c: 'ChartLine', t: 'Server Throughput', w: 3, h: 250},
- {o: 'ServiceDependency', d: 'dependencyClientThroughputTrend',
- c: 'ChartLine', t: 'Client Throughput', w: 3, h: 250},
- {o: 'ServiceDependency', d: 'dependencyServerSLATrend', c: 'ChartLine', t: 'Server SLA', w: 3, h: 250},
- {o: 'ServiceDependency', d: 'dependencyClientSLATrend', c: 'ChartLine', t: 'Client SLA', w: 3, h: 250},
+ {
+ o: 'ServiceInstance',
+ d: 'globalBrief',
+ c: 'ChartInstance',
+ t: 'Instance Info',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'ServiceInstance',
+ d: 'instanceResponseTime',
+ c: 'ChartNum',
+ t: 'Instance Avg ResponseTime',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'ServiceInstance',
+ d: 'instanceThroughput',
+ c: 'ChartNum',
+ t: 'Instance Avg Throughput',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'ServiceInstance',
+ d: 'instanceSLA',
+ c: 'ChartNum',
+ t: 'Instance Avg SLA',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'ServiceInstance',
+ d: 'instanceResponseTime',
+ c: 'ChartLine',
+ t: 'Instance ResponseTime',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'ServiceInstance',
+ d: 'instanceThroughput',
+ c: 'ChartLine',
+ t: 'Instance Throughput',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'ServiceInstance',
+ d: 'instanceSLA',
+ c: 'ChartLine',
+ t: 'Instance SLA',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'ServiceInstance',
+ d: 'instanceHeap',
+ c: 'ChartLine',
+ t: 'JVM Heap (MB)',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'ServiceInstance',
+ d: 'instanceNonheap',
+ c: 'ChartLine',
+ t: 'JVM Non-Heap (MB)',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'ServiceInstance',
+ d: 'instanceGC',
+ c: 'ChartLine',
+ t: 'JVM GC (ms)',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'ServiceInstance',
+ d: 'instanceGCCount',
+ c: 'ChartCount',
+ t: 'JVM GC Count',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'ServiceInstance',
+ d: 'instanceCPU',
+ c: 'ChartLine',
+ t: 'JVM CPU (%)',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'ServiceInstance',
+ d: 'instanceClrCPU',
+ c: 'ChartLine',
+ t: 'CLR CPU (%)',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'ServiceInstance',
+ d: 'instanceClrGC',
+ c: 'ChartLine',
+ t: 'CLR GC (Count)',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'ServiceInstance',
+ d: 'instanceClrHeap',
+ c: 'ChartLine',
+ t: 'CLR HeapMemory (MB)',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'ServiceDependency',
+ d: 'dependencyServerPercentile',
+ c: 'ChartLine',
+ t: 'Server Response Time Percentile',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'ServiceDependency',
+ d: 'dependencyClientPercentile',
+ c: 'ChartLine',
+ t: 'Client Response Time Percentile',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'ServiceDependency',
+ d: 'dependencyServerResponseTimeTrend',
+ c: 'ChartLine',
+ t: 'Server Response Time',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'ServiceDependency',
+ d: 'dependencyClientResponseTimeTrend',
+ c: 'ChartLine',
+ t: 'Client Response Time',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'ServiceDependency',
+ d: 'dependencyServerThroughputTrend',
+ c: 'ChartLine',
+ t: 'Server Throughput',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'ServiceDependency',
+ d: 'dependencyClientThroughputTrend',
+ c: 'ChartLine',
+ t: 'Client Throughput',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'ServiceDependency',
+ d: 'dependencyServerSLATrend',
+ c: 'ChartLine',
+ t: 'Server SLA',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'ServiceDependency',
+ d: 'dependencyClientSLATrend',
+ c: 'ChartLine',
+ t: 'Client SLA',
+ w: 3,
+ h: 250,
+ },
],
proxy: [],
database: [
- // global
- { o: 'Global', d: 'globalHeatmap', c: 'ChartHeatmap', t: 'Global Heatmap', w: 3, h: 250 },
- { o: 'Global', d: 'globalPercent', c: 'ChartLine', t: 'Global Response Time Percentile', w: 3, h: 250 },
- { o: 'Global', d: 'globalBrief', c: 'ChartBrief', t: 'Global Brief', w: 3, h: 250 },
- { o: 'Global', d: 'globalThroughput', c: 'ChartTrace', t: 'Global Top Throughput', w: 3, h: 250 },
- { o: 'Global', d: 'globalSlow', c: 'ChartSlow', t: 'Global Top Slow Endpoint', w: 3, h: 250 },
- // database
- { o: 'Database', d: 'databaseResponseTime', c: 'ChartNum', t: 'Database Avg ResponseTime', w: 3, h: 250 },
- { o: 'Database', d: 'databaseThroughput', c: 'ChartNum', t: 'Database Avg Throughput', w: 3, h: 250 },
- { o: 'Database', d: 'databaseSLA', c: 'ChartNum', t: 'Database Avg SLA', w: 3, h: 250 },
- { o: 'Database', d: 'databaseResponseTime', c: 'ChartLine', t: 'Database ResponseTime', w: 3, h: 250 },
- { o: 'Database', d: 'databaseThroughput', c: 'ChartLine', t: 'Database Throughput', w: 3, h: 250 },
- { o: 'Database', d: 'databaseSLA', c: 'ChartBar', t: 'Database SLA', w: 3, h: 250 },
- { o: 'Database', d: 'databasePercent', c: 'ChartLine', t: 'Database Response Time Percentile', w: 3, h: 250 },
- { o: 'Database', d: 'databaseTopNRecords', c: 'ChartSlow', t: 'Database TopN Records', w: 3, h: 250 },
+ // global
+ {
+ o: 'Global',
+ d: 'globalHeatmap',
+ c: 'ChartHeatmap',
+ t: 'Global Heatmap',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'Global',
+ d: 'globalPercent',
+ c: 'ChartLine',
+ t: 'Global Response Time Percentile',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'Global',
+ d: 'globalBrief',
+ c: 'ChartBrief',
+ t: 'Global Brief',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'Global',
+ d: 'globalThroughput',
+ c: 'ChartTrace',
+ t: 'Global Top Throughput',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'Global',
+ d: 'globalSlow',
+ c: 'ChartSlow',
+ t: 'Global Top Slow Endpoint',
+ w: 3,
+ h: 250,
+ },
+ // database
+ {
+ o: 'Database',
+ d: 'databaseResponseTime',
+ c: 'ChartNum',
+ t: 'Database Avg ResponseTime',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'Database',
+ d: 'databaseThroughput',
+ c: 'ChartNum',
+ t: 'Database Avg Throughput',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'Database',
+ d: 'databaseSLA',
+ c: 'ChartNum',
+ t: 'Database Avg SLA',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'Database',
+ d: 'databaseResponseTime',
+ c: 'ChartLine',
+ t: 'Database ResponseTime',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'Database',
+ d: 'databaseThroughput',
+ c: 'ChartLine',
+ t: 'Database Throughput',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'Database',
+ d: 'databaseSLA',
+ c: 'ChartBar',
+ t: 'Database SLA',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'Database',
+ d: 'databasePercent',
+ c: 'ChartLine',
+ t: 'Database Response Time Percentile',
+ w: 3,
+ h: 250,
+ },
+ {
+ o: 'Database',
+ d: 'databaseTopNRecords',
+ c: 'ChartSlow',
+ t: 'Database TopN Records',
+ w: 3,
+ h: 250,
+ },
],
};
diff --git a/src/utils/tooltip.scss b/src/utils/tooltip.scss
index 0f975e7..85fbd28 100644
--- a/src/utils/tooltip.scss
+++ b/src/utils/tooltip.scss
@@ -15,10 +15,10 @@
* limitations under the License.
*/
-$zindex-tooltip: 1070 !default;
-$tooltip-max-width: 200px !default;
-$tooltip-color: #fff !default;
-$tooltip-bg: #252a2f !default;
+$zindex-tooltip: 1070 !default;
+$tooltip-max-width: 200px !default;
+$tooltip-color: #fff !default;
+$tooltip-bg: #252a2f !default;
// Base class
.rk-tooltip {
display: inline-block;
@@ -40,7 +40,7 @@
text-align: left;
background-color: $tooltip-bg;
border-radius: 5px;
- word-break:break-all;
+ word-break: break-all;
}
// Arrows
@@ -53,13 +53,13 @@
}
}
-.trace-detail-chart-table .rk-tooltip-popper .rk-tooltip-inner {
+.trace-detail-chart-table .rk-tooltip-popper .rk-tooltip-inner {
max-width: 500px;
-}
+}
// Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
.rk-tooltip-popper {
- &[x-placement^="top"] {
+ &[x-placement^='top'] {
padding: 5px 0 15px;
.rk-tooltip-arrow {
bottom: 6px;
@@ -67,7 +67,7 @@
border-top-color: $tooltip-bg;
}
}
- &[x-placement^="right"] {
+ &[x-placement^='right'] {
padding: 0 5px 0 15px;
.rk-tooltip-arrow {
left: 6px;
@@ -75,7 +75,7 @@
border-right-color: $tooltip-bg;
}
}
- &[x-placement^="bottom"] {
+ &[x-placement^='bottom'] {
padding: 15px 0 5px;
.rk-tooltip-arrow {
top: 6px;
@@ -83,7 +83,7 @@
border-bottom-color: $tooltip-bg;
}
}
- &[x-placement^="left"] {
+ &[x-placement^='left'] {
padding: 0 15px 0 5px;
.rk-tooltip-arrow {
right: 6px;
@@ -93,46 +93,46 @@
}
}
-.rk-tooltip-popper[x-placement="top"] .rk-tooltip-arrow {
+.rk-tooltip-popper[x-placement='top'] .rk-tooltip-arrow {
left: 50%;
margin-left: -13px;
}
-.rk-tooltip-popper[x-placement="top-start"] .rk-tooltip-arrow {
+.rk-tooltip-popper[x-placement='top-start'] .rk-tooltip-arrow {
left: 16px;
}
-.rk-tooltip-popper[x-placement="top-end"] .rk-tooltip-arrow {
+.rk-tooltip-popper[x-placement='top-end'] .rk-tooltip-arrow {
right: 16px;
}
-.rk-tooltip-popper[x-placement="bottom"] .rk-tooltip-arrow {
+.rk-tooltip-popper[x-placement='bottom'] .rk-tooltip-arrow {
left: 50%;
margin-left: -13px;
}
-.rk-tooltip-popper[x-placement="bottom-start"] .rk-tooltip-arrow {
+.rk-tooltip-popper[x-placement='bottom-start'] .rk-tooltip-arrow {
left: 16px;
}
-.rk-tooltip-popper[x-placement="bottom-end"] .rk-tooltip-arrow {
+.rk-tooltip-popper[x-placement='bottom-end'] .rk-tooltip-arrow {
right: 16px;
}
-.rk-tooltip-popper[x-placement="left"] .rk-tooltip-arrow {
+.rk-tooltip-popper[x-placement='left'] .rk-tooltip-arrow {
top: 50%;
margin-top: -13px;
}
-.rk-tooltip-popper[x-placement="left-start"] .rk-tooltip-arrow {
+.rk-tooltip-popper[x-placement='left-start'] .rk-tooltip-arrow {
top: 8px;
}
-.rk-tooltip-popper[x-placement="left-end"] .rk-tooltip-arrow {
+.rk-tooltip-popper[x-placement='left-end'] .rk-tooltip-arrow {
bottom: 8px;
}
-.rk-tooltip-popper[x-placement="right"] .rk-tooltip-arrow {
+.rk-tooltip-popper[x-placement='right'] .rk-tooltip-arrow {
top: 50%;
margin-top: -13px;
}
-.rk-tooltip-popper[x-placement="right-start"] .rk-tooltip-arrow {
+.rk-tooltip-popper[x-placement='right-start'] .rk-tooltip-arrow {
top: 8px;
}
-.rk-tooltip-popper[x-placement="right-end"] .rk-tooltip-arrow {
+.rk-tooltip-popper[x-placement='right-end'] .rk-tooltip-arrow {
bottom: 8px;
-}
\ No newline at end of file
+}
diff --git a/src/utils/tooltip.ts b/src/utils/tooltip.ts
index b6b4133..3ce60aa 100644
--- a/src/utils/tooltip.ts
+++ b/src/utils/tooltip.ts
@@ -43,9 +43,13 @@
function setAttributes($inner: any, el: any) {
const popper = el.popper;
$inner.innerHTML = el.popper._content;
- if (!popper.popper) { return; }
+ if (!popper.popper) {
+ return;
+ }
const isShow =
- !popper._disabled && (popper._visible || popper._always) && (!popper._ellipsis || isEllipsisTooltip(el));
+ !popper._disabled &&
+ (popper._visible || popper._always) &&
+ (!popper._ellipsis || isEllipsisTooltip(el));
if (popper._appendToBody) {
if (isShow && popper.popper.parentNode !== document.body) {
@@ -91,7 +95,7 @@
}
function isEllipsisTooltip(el: any) {
- return (el.offsetWidth < el.scrollWidth);
+ return el.offsetWidth < el.scrollWidth;
}
export default {
@@ -111,7 +115,6 @@
const $inner = document.createElement('div');
$inner.setAttribute('class', 'rk-tooltip-inner');
-
$content.appendChild($inner);
$popper.appendChild($content);
if (binding.value) {
@@ -119,7 +122,9 @@
$popper.style.display = 'none';
el.appendChild($popper);
} else {
- $popper.className += ` append-to-body ${binding.value.popperCls ? binding.value.popperCls.join(' ') : ''}`;
+ $popper.className += ` append-to-body ${
+ binding.value.popperCls ? binding.value.popperCls.join(' ') : ''
+ }`;
}
}
@@ -137,8 +142,13 @@
removeEvent(el);
el.popper.destroy();
if (binding.value.appendToBody === false) {
- if (el.popper.popper) { el.removeChild(el.popper.popper); }
- } else if (el.popper.popper && el.popper.popper.parentNode === document.body) {
+ if (el.popper.popper) {
+ el.removeChild(el.popper.popper);
+ }
+ } else if (
+ el.popper.popper &&
+ el.popper.popper.parentNode === document.body
+ ) {
document.body.removeChild(el.popper.popper);
}
},
diff --git a/src/views/components/alarm/alarm-select.vue b/src/views/components/alarm/alarm-select.vue
index b0d4c03..2b9d600 100644
--- a/src/views/components/alarm/alarm-select.vue
+++ b/src/views/components/alarm/alarm-select.vue
@@ -1,120 +1,154 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
- <div class="rk-alarm-select cp flex-h" v-clickout="() => { visible = false;search = '';}" :class="{'active':visible}">
+ <div
+ class="rk-alarm-select cp flex-h"
+ v-clickout="
+ () => {
+ visible = false;
+ search = '';
+ }
+ "
+ :class="{ active: visible }"
+ >
<div class="rk-alarm-bar-i flex-h" @click="visible = !visible">
<div class="mr-15 rk-alarm-bar-i-text">
- <div class="sm grey">{{title}}</div>
- <div class="ell" v-tooltip:right.ellipsis="$t(value.label.toLowerCase()) || ''">{{$t(value.label.toLowerCase()) || ''}}</div>
+ <div class="sm grey">{{ title }}</div>
+ <div
+ class="ell"
+ v-tooltip:right.ellipsis="$t(value.label.toLowerCase()) || ''"
+ >
+ {{ $t(value.label.toLowerCase()) || '' }}
+ </div>
</div>
- <svg class="icon lg trans" :style="`transform: rotate(${visible?180:0}deg)`">
+ <svg
+ class="icon lg trans"
+ :style="`transform: rotate(${visible ? 180 : 0}deg)`"
+ >
<use xlink:href="#arrow-down"></use>
</svg>
</div>
<div class="rk-alarm-sel" v-if="visible">
<div v-if="hasSearch">
- <input type="text" class="rk-alarm-sel-search" v-model="search" placeholder="Search...">
+ <input
+ type="text"
+ class="rk-alarm-sel-search"
+ v-model="search"
+ placeholder="Search..."
+ />
<svg class="icon sm close" @click="search = ''" v-if="search">
<use xlink:href="#clear"></use>
</svg>
</div>
<div class="rk-alarm-opt-wrapper scroll_content">
- <div class="rk-alarm-opt ell" @click="handleSelect(i)" :class="{'active':i.key === value.key}" v-for="i in filterData" :key="i.key">{{$t(i.label.toLowerCase())}}</div>
+ <div
+ class="rk-alarm-opt ell"
+ @click="handleSelect(i)"
+ :class="{ active: i.key === value.key }"
+ v-for="i in filterData"
+ :key="i.key"
+ >
+ {{ $t(i.label.toLowerCase()) }}
+ </div>
</div>
</div>
</div>
</template>
<script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator';
-@Component
-export default class AlarmSelect extends Vue {
- @Prop() public data!: any;
- @Prop() public value!: any;
- @Prop() public title!: string;
- @Prop({default: false}) public hasSearch!: boolean;
- public search: string = '';
- public visible: boolean = false;
- get filterData() {
- return this.data.filter((i: any) => i.label.toUpperCase().indexOf(this.search.toUpperCase()) !== -1);
+ import { Vue, Component, Prop } from 'vue-property-decorator';
+ @Component
+ export default class AlarmSelect extends Vue {
+ @Prop() public data!: any;
+ @Prop() public value!: any;
+ @Prop() public title!: string;
+ @Prop({ default: false }) public hasSearch!: boolean;
+ public search: string = '';
+ public visible: boolean = false;
+ get filterData() {
+ return this.data.filter(
+ (i: any) =>
+ i.label.toUpperCase().indexOf(this.search.toUpperCase()) !== -1,
+ );
+ }
+ public handleOpen() {
+ this.visible = true;
+ }
+ public handleSelect(i: any) {
+ this.$emit('input', i);
+ this.visible = false;
+ }
}
- public handleOpen() {
- this.visible = true;
- }
- public handleSelect(i: any) {
- this.$emit('input', i);
- this.visible = false;
- }
-}
</script>
<style lang="scss" scoped>
- .rk-alarm-select{
- position: relative;
- z-index: 1;
- height: 100%;
- justify-content: space-between;
- .sm{ line-height: 12px;}
- .icon { flex-shrink: 0};
-}
-.rk-alarm-bar-i-text{
- max-width: 150px;
- min-width: 80px;
-}
-.rk-alarm-bar-i {
- height: 100%;
- padding: 0 15px;
- border-right: 2px solid #252a2f;
-}
-.rk-alarm-sel{
- position: absolute;
- top: 50px;
- box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
- background-color: #252a2f;
- width: 100%;
- border-radius: 3px;
- overflow: hidden;
- .close{
+ .rk-alarm-select {
+ position: relative;
+ z-index: 1;
+ height: 100%;
+ justify-content: space-between;
+ .sm {
+ line-height: 12px;
+ }
+ .icon {
+ flex-shrink: 0;
+ }
+ }
+ .rk-alarm-bar-i-text {
+ max-width: 150px;
+ min-width: 80px;
+ }
+ .rk-alarm-bar-i {
+ height: 100%;
+ padding: 0 15px;
+ border-right: 2px solid #252a2f;
+ }
+ .rk-alarm-sel {
position: absolute;
- right: 10px;
- top: 12px;
- opacity: 0.6;
- &:hover{opacity: 1;}
+ top: 50px;
+ box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
+ background-color: #252a2f;
+ width: 100%;
+ border-radius: 3px;
+ overflow: hidden;
+ .close {
+ position: absolute;
+ right: 10px;
+ top: 12px;
+ opacity: 0.6;
+ &:hover {
+ opacity: 1;
+ }
+ }
}
-}
-.rk-alarm-opt{
- padding: 7px 15px;
- &.active,&:hover{
- background-color: #40454e;
+ .rk-alarm-opt {
+ padding: 7px 15px;
+ &.active,
+ &:hover {
+ background-color: #40454e;
+ }
}
-}
-.rk-alarm-sel-search{
- width: calc(100% - 4px);
- border:0;
- background-color: #333840;
- color: #eee;
- outline: 0;
- padding: 7px 25px 7px 10px;
- margin: 2px;
-}
-.rk-alarm-opt-wrapper{
- overflow: auto;
- max-height: 200px;
- padding-bottom: 2px;
-}
+ .rk-alarm-sel-search {
+ width: calc(100% - 4px);
+ border: 0;
+ background-color: #333840;
+ color: #eee;
+ outline: 0;
+ padding: 7px 25px 7px 10px;
+ margin: 2px;
+ }
+ .rk-alarm-opt-wrapper {
+ overflow: auto;
+ max-height: 200px;
+ padding-bottom: 2px;
+ }
</style>
diff --git a/src/views/components/alarm/alarm-table.vue b/src/views/components/alarm/alarm-table.vue
index 1ea3e39..5d38571 100644
--- a/src/views/components/alarm/alarm-table.vue
+++ b/src/views/components/alarm/alarm-table.vue
@@ -1,90 +1,94 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
-<div class="rk-alarm-table clear">
- <div v-for="(i,index) in data" :key="index" class="mb-10 clear">
- <div class="g-sm-3 grey sm hide-xs rk-alarm-time-line tr">{{parseInt(i.startTime) | dateformat}}</div>
- <div class="rk-alarm-table-i g-sm-9">
- <div class="message mb-5 b"><span class="mr-10 sm">#{{i.key}}</span>{{i.message}}</div>
- <div class="rk-alarm-table-i-scope mr-10 l sm" :class="{
- 'blue': i.scope === 'Service',
- 'green':i.scope === 'Endpoint',
- 'yellow':i.scope === 'ServiceInstance',
- }">{{$t(i.scope.toLowerCase())}}</div>
- <div class="grey sm show-xs">{{parseInt(i.startTime) | dateformat}}</div>
+ <div class="rk-alarm-table clear">
+ <div v-for="(i, index) in data" :key="index" class="mb-10 clear">
+ <div class="g-sm-3 grey sm hide-xs rk-alarm-time-line tr">
+ {{ parseInt(i.startTime) | dateformat }}
+ </div>
+ <div class="rk-alarm-table-i g-sm-9">
+ <div class="message mb-5 b">
+ <span class="mr-10 sm">#{{ i.key }}</span
+ >{{ i.message }}
+ </div>
+ <div
+ class="rk-alarm-table-i-scope mr-10 l sm"
+ :class="{
+ blue: i.scope === 'Service',
+ green: i.scope === 'Endpoint',
+ yellow: i.scope === 'ServiceInstance',
+ }"
+ >
+ {{ $t(i.scope.toLowerCase()) }}
+ </div>
+ <div class="grey sm show-xs">
+ {{ parseInt(i.startTime) | dateformat }}
+ </div>
+ </div>
</div>
</div>
-</div>
</template>
<script lang="ts">
-import Vue from 'vue';
-import { Component, Prop } from 'vue-property-decorator';
+ import Vue from 'vue';
+ import { Component, Prop } from 'vue-property-decorator';
-
-@Component
-export default class AlarmTable extends Vue {
- @Prop({default: () => []}) private data: any;
-}
+ @Component
+ export default class AlarmTable extends Vue {
+ @Prop({ default: () => [] }) private data: any;
+ }
</script>
<style lang="scss" scoped>
-.rk-alarm-table{
- padding: 30px 20px 20px 40px;
-
-}
-.rk-alarm-time-line{
- padding: 14px 30px;
- min-height: 63px;
- max-width: 132px
-}
-.rk-alarm-table-i{
- padding: 10px 15px;
- border-left: 4px solid rgba(46, 47, 51, 0.05);
- position: relative;
- &:after{
- content: '';
+ .rk-alarm-table {
+ padding: 30px 20px 20px 40px;
+ }
+ .rk-alarm-time-line {
+ padding: 14px 30px;
+ min-height: 63px;
+ max-width: 132px;
+ }
+ .rk-alarm-table-i {
+ padding: 10px 15px;
+ border-left: 4px solid rgba(46, 47, 51, 0.05);
+ position: relative;
+ &:after {
+ content: '';
+ display: inline-block;
+ position: absolute;
+ width: 7px;
+ height: 7px;
+ left: -23px;
+ top: 25px;
+ border-radius: 4px;
+ background-color: #448dfe;
+ }
+ &:before {
+ content: '';
+ display: inline-block;
+ position: absolute;
+ width: 1px;
+ height: calc(100% + 11px);
+ top: 0;
+ left: -20px;
+ border-radius: 5px;
+ background-color: #448dfe99;
+ }
+ }
+ .rk-alarm-table-i-scope {
display: inline-block;
- position: absolute;
- width: 7px;
- height: 7px;
- left: -23px;
- top: 25px;
+ padding: 0px 8px;
+ border: 1px solid;
+ margin-top: -1px;
border-radius: 4px;
- background-color: #448dfe;
}
- &:before{
- content: '';
- display: inline-block;
- position: absolute;
- width: 1px;
- height: calc(100% + 11px);
- top: 0;
- left: -20px;
- border-radius: 5px;
- background-color: #448dfe99;
- }
-}
-.rk-alarm-table-i-scope{
- display: inline-block;
- padding: 0px 8px;
- border: 1px solid;
- margin-top: -1px;
- border-radius: 4px;
-}
</style>
diff --git a/src/views/components/alarm/alarm-tool.vue b/src/views/components/alarm/alarm-tool.vue
index ef18c42..80b3d14 100644
--- a/src/views/components/alarm/alarm-tool.vue
+++ b/src/views/components/alarm/alarm-tool.vue
@@ -1,29 +1,40 @@
-/**
-* Licensed to the Apache Software Foundation (ASF) under one or more
-* contributor license agreements. See the NOTICE file distributed with
-* this work for additional information regarding copyright ownership.
-* The ASF licenses this file to You under the Apache License, Version 2.0
-* (the "License"); you may not use this file except in compliance with
-* the License. You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
<nav class="rk-alarm-tool flex-h">
- <AlarmSelect v-show="!inTopo" :title="$t('filterScope')" :value="alarmScope" @input="handleFilter"
- :data="alarmOptions"/>
+ <AlarmSelect
+ v-show="!inTopo"
+ :title="$t('filterScope')"
+ :value="alarmScope"
+ @input="handleFilter"
+ :data="alarmOptions"
+ />
<div class="mr-10" style="padding: 3px 15px 0">
- <div class="sm grey">{{$t('searchKeyword')}}</div>
- <input :disabled="inTopo" type="text" v-model="keyword" class="rk-alarm-tool-input" @input="handleRefresh(1)">
+ <div class="sm grey">{{ $t('searchKeyword') }}</div>
+ <input
+ :disabled="inTopo"
+ type="text"
+ v-model="keyword"
+ class="rk-alarm-tool-input"
+ @input="handleRefresh(1)"
+ />
</div>
- <RkPage class="mt-15" :currentSize="20" :currentPage="pageNum" @changePage="handlePage" :total="total"/>
+ <RkPage
+ class="mt-15"
+ :currentSize="20"
+ :currentPage="pageNum"
+ @changePage="handlePage"
+ :total="total"
+ />
</nav>
</template>
@@ -33,22 +44,22 @@
import { Action, Mutation } from 'vuex-class';
import AlarmSelect from './alarm-select.vue';
- @Component({components: {AlarmSelect}})
+ @Component({ components: { AlarmSelect } })
export default class AlarmTool extends Vue {
@Mutation('SET_EVENTS') private SET_EVENTS: any;
@Action('rocketAlarm/GET_ALARM') private GET_ALARM: any;
@Prop() private durationTime: any;
@Prop() private total!: number;
private pageNum: number = 1;
- @Prop({type: Object, default: () => ({label: 'All', key: ''})})
+ @Prop({ type: Object, default: () => ({ label: 'All', key: '' }) })
private alarmScope: any;
- @Prop({default: false, type: Boolean})
+ @Prop({ default: false, type: Boolean })
private inTopo!: boolean;
private alarmOptions: any = [
- {label: 'All', key: ''},
- {label: 'Service', key: 'Service'},
- {label: 'ServiceInstance', key: 'ServiceInstance'},
- {label: 'Endpoint', key: 'Endpoint'},
+ { label: 'All', key: '' },
+ { label: 'Service', key: 'Service' },
+ { label: 'ServiceInstance', key: 'ServiceInstance' },
+ { label: 'Endpoint', key: 'Endpoint' },
];
private keyword: string = '';
@@ -91,16 +102,17 @@
}
private beforeMount() {
- this.SET_EVENTS([() => {
- this.handleRefresh(1);
- }]);
+ this.SET_EVENTS([
+ () => {
+ this.handleRefresh(1);
+ },
+ ]);
this.handleRefresh(1);
}
private beforeDestroy() {
this.SET_EVENTS([]);
}
-
}
</script>
diff --git a/src/views/components/comparison/chart-line.vue b/src/views/components/comparison/chart-line.vue
index dfb3394..aa3e6c3 100644
--- a/src/views/components/comparison/chart-line.vue
+++ b/src/views/components/comparison/chart-line.vue
@@ -1,39 +1,35 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
- <RkEcharts ref="chart" :option="option" :autoResize="true"/>
+ <RkEcharts ref="chart" :option="option" :autoResize="true" />
</template>
<script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator';
+ import { Vue, Component, Prop } from 'vue-property-decorator';
-@Component
-export default class ChartLine extends Vue {
- @Prop() private data!: any;
- @Prop() private intervalTime!: any;
- public resize() {
- const chart: any = this.$refs.chart;
- chart.myChart.resize();
- }
- get option() {
- const temp: any = [];
- const keys = Object.keys(this.data || {}).filter((i: any) => Array.isArray(this.data[i]) && this.data[i].length);
- keys.forEach((i: any, index: number) => {
- const serie: any = {
+ @Component
+ export default class ChartLine extends Vue {
+ @Prop() private data!: any;
+ @Prop() private intervalTime!: any;
+ public resize() {
+ const chart: any = this.$refs.chart;
+ chart.myChart.resize();
+ }
+ get option() {
+ const temp: any = [];
+ const keys = Object.keys(this.data || {}).filter(
+ (i: any) => Array.isArray(this.data[i]) && this.data[i].length,
+ );
+ keys.forEach((i: any, index: number) => {
+ const serie: any = {
data: this.data[i].map((item: any, itemIndex: number) => [
this.intervalTime[itemIndex],
item,
@@ -46,63 +42,63 @@
width: 1.5,
type: 'solid',
},
- };
- temp.push(serie);
- });
- const color: string[] = [
- '#30A4EB',
- '#45BFC0',
- '#FFCC55',
- '#FF6A84',
- '#a0a7e6',
- '#6be6c1',
- '#626c91',
- '#96dee8',
- '#3f96e3',
- ];
+ };
+ temp.push(serie);
+ });
+ const color: string[] = [
+ '#30A4EB',
+ '#45BFC0',
+ '#FFCC55',
+ '#FF6A84',
+ '#a0a7e6',
+ '#6be6c1',
+ '#626c91',
+ '#96dee8',
+ '#3f96e3',
+ ];
- return {
- color,
- tooltip: {
- trigger: 'axis',
- backgroundColor: 'rgb(50,50,50)',
- textStyle: {
- fontSize: 13,
+ return {
+ color,
+ tooltip: {
+ trigger: 'axis',
+ backgroundColor: 'rgb(50,50,50)',
+ textStyle: {
+ fontSize: 13,
+ },
},
- },
- legend: {
- show: keys.length === 1 ? false : true,
- icon: 'circle',
- top: 0,
- left: 0,
- itemWidth: 12,
- },
- grid: {
- top: keys.length === 1 ? 15 : 55,
- left: 0,
- right: 10,
- bottom: 5,
- containLabel: true,
- },
- xAxis: {
- type: 'category',
- axisTick: {
- lineStyle: { color: '#c1c5ca41' },
- alignWithLabel: true,
+ legend: {
+ show: keys.length === 1 ? false : true,
+ icon: 'circle',
+ top: 0,
+ left: 0,
+ itemWidth: 12,
},
- splitLine: { show: false },
- axisLine: { lineStyle: { color: 'rgba(0,0,0,0)' } },
- axisLabel: { color: '#9da5b2', fontSize: '11' },
- },
- yAxis: {
- type: 'value',
- axisLine: { show: false },
- axisTick: { show: false },
- splitLine: { lineStyle: { color: '#c1c5ca41', type: 'dashed' } },
- axisLabel: { color: '#9da5b2', fontSize: '11' },
- },
- series: temp,
- };
+ grid: {
+ top: keys.length === 1 ? 15 : 55,
+ left: 0,
+ right: 10,
+ bottom: 5,
+ containLabel: true,
+ },
+ xAxis: {
+ type: 'category',
+ axisTick: {
+ lineStyle: { color: '#c1c5ca41' },
+ alignWithLabel: true,
+ },
+ splitLine: { show: false },
+ axisLine: { lineStyle: { color: 'rgba(0,0,0,0)' } },
+ axisLabel: { color: '#9da5b2', fontSize: '11' },
+ },
+ yAxis: {
+ type: 'value',
+ axisLine: { show: false },
+ axisTick: { show: false },
+ splitLine: { lineStyle: { color: '#c1c5ca41', type: 'dashed' } },
+ axisLabel: { color: '#9da5b2', fontSize: '11' },
+ },
+ series: temp,
+ };
+ }
}
-}
</script>
diff --git a/src/views/components/comparison/comparison-charts.vue b/src/views/components/comparison/comparison-charts.vue
index dd01928..7771ee2 100644
--- a/src/views/components/comparison/comparison-charts.vue
+++ b/src/views/components/comparison/comparison-charts.vue
@@ -1,27 +1,33 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
<div class="rk-comparison-charts">
- <div class="component-item" v-for="item of Object.keys(chartSource)" :key="item">
- <div class="title">{{item}}</div>
+ <div
+ class="component-item"
+ v-for="item of Object.keys(chartSource)"
+ :key="item"
+ >
+ <div class="title">{{ item }}</div>
<div class="chart-item">
- <ChartLine v-if="Array.isArray(chartSource[item])" :intervalTime="intervalTime" :data="{[item]: chartSource[item]}" />
- <ChartLine v-else :intervalTime="intervalTime" :data="chartSource[item]" />
+ <ChartLine
+ v-if="Array.isArray(chartSource[item])"
+ :intervalTime="intervalTime"
+ :data="{ [item]: chartSource[item] }"
+ />
+ <ChartLine
+ v-else
+ :intervalTime="intervalTime"
+ :data="chartSource[item]"
+ />
</div>
</div>
</div>
@@ -59,7 +65,7 @@
line-height: 30px;
margin: 10px 0;
padding-left: 10px;
- background-color: rgba(196,200,225,.2);
+ background-color: rgba(196, 200, 225, 0.2);
color: #9da5b2;
}
}
diff --git a/src/views/components/comparison/comparison-config.vue b/src/views/components/comparison/comparison-config.vue
index d2b3dcb..bf853d2 100644
--- a/src/views/components/comparison/comparison-config.vue
+++ b/src/views/components/comparison/comparison-config.vue
@@ -1,24 +1,18 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
<div class="rk-comparison-config" v-if="currentOptions">
- <h4>{{this.$t("previousService")}}</h4>
- <label>{{this.$t("type")}}</label>
+ <h4>{{ this.$t('previousService') }}</h4>
+ <label>{{ this.$t('type') }}</label>
<RkSelect
class="mb-5"
:current="currentOptions.preType"
@@ -26,7 +20,7 @@
@onChoose="(item) => changOption(item, changeType.PreType)"
/>
<div v-if="currentOptions.preType.key !== 'Database'">
- <label>{{this.$t("service")}}</label>
+ <label>{{ this.$t('service') }}</label>
<RkSelect
class="mb-5"
:current="currentOptions.preService"
@@ -35,7 +29,7 @@
/>
</div>
<div v-if="currentOptions.preType.key !== 'Service'">
- <label>{{this.$t("object")}}</label>
+ <label>{{ this.$t('object') }}</label>
<RkSelect
class="mb-5"
:current="currentOptions.preObject"
@@ -43,7 +37,7 @@
@onChoose="(item) => changOption(item, changeType.PreObject)"
/>
</div>
- <label>{{this.$t("metrics")}}</label>
+ <label>{{ this.$t('metrics') }}</label>
<RkSelect
class="mb-5"
:mode="'multiple'"
@@ -51,8 +45,8 @@
:data="optSource.preMetricsSource"
@onChoose="(item) => changOption(item, changeType.PreMetrics)"
/>
- <h4>{{this.$t("nextService")}}</h4>
- <label>{{this.$t("type")}}</label>
+ <h4>{{ this.$t('nextService') }}</h4>
+ <label>{{ this.$t('type') }}</label>
<RkSelect
class="mb-5"
:current="currentOptions.nextType"
@@ -60,7 +54,7 @@
@onChoose="(item) => changOption(item, changeType.NextType)"
/>
<div v-if="currentOptions.nextType.key !== 'Database'">
- <label>{{this.$t("service")}}</label>
+ <label>{{ this.$t('service') }}</label>
<RkSelect
class="mb-5"
:current="currentOptions.nextService"
@@ -69,7 +63,7 @@
/>
</div>
<div v-if="currentOptions.nextType.key !== 'Service'">
- <label>{{this.$t("object")}}</label>
+ <label>{{ this.$t('object') }}</label>
<RkSelect
class="mb-5"
:current="currentOptions.nextObject"
@@ -77,7 +71,7 @@
@onChoose="(item) => changOption(item, changeType.NextObject)"
/>
</div>
- <label>{{this.$t("metrics")}}</label>
+ <label>{{ this.$t('metrics') }}</label>
<RkSelect
class="mb-5"
:mode="'multiple'"
@@ -86,8 +80,8 @@
@onChoose="(item) => changOption(item, changeType.NextMetrics)"
/>
<div class="mb-5 query-data">
- <a @click="updateChart">{{this.$t("queryData")}}</a>
- <a @click="resetService">{{this.$t("reset")}}</a>
+ <a @click="updateChart">{{ this.$t('queryData') }}</a>
+ <a @click="resetService">{{ this.$t('reset') }}</a>
</div>
</div>
</template>
@@ -117,12 +111,14 @@
private resetService() {
this.$store.commit('comparisonStore/SET_ISPREVIOUS', 'init');
- this.$store.dispatch('comparisonStore/GET_SERVICES', {duration: this.durationTime});
+ this.$store.dispatch('comparisonStore/GET_SERVICES', {
+ duration: this.durationTime,
+ });
}
}
</script>
-<style lang='scss'>
+<style lang="scss">
.rk-comparison-config {
width: 380px;
height: 100%;
diff --git a/src/views/components/dashboard/dashboard-comp.vue b/src/views/components/dashboard/dashboard-comp.vue
index b5879aa..4dad0ee 100644
--- a/src/views/components/dashboard/dashboard-comp.vue
+++ b/src/views/components/dashboard/dashboard-comp.vue
@@ -1,148 +1,168 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
<div class="rk-dashboard-comp">
<nav class="rk-dashboard-comp-nav mb-15">
- <a class="rk-dashboard-comp-nav-i b mr-20" v-if="value.length" @click="current = key;configMode = false" :class="{'active': key === current}" v-for="(value, key) in tree" :key="key">{{$t(key.toLowerCase())}}</a>
+ <a
+ class="rk-dashboard-comp-nav-i b mr-20"
+ v-if="value.length"
+ @click="
+ current = key;
+ configMode = false;
+ "
+ :class="{ active: key === current }"
+ v-for="(value, key) in tree"
+ :key="key"
+ >{{ $t(key.toLowerCase()) }}</a
+ >
<div class="pt-10 r">
- <a class="rk-btn ghost sm" @click="configMode = !configMode">{{$t('templateConfig')}}</a>
+ <a class="rk-btn ghost sm" @click="configMode = !configMode">{{
+ $t('templateConfig')
+ }}</a>
</div>
</nav>
<div class="rk-dashboard-comp-wrapper">
<div v-if="configMode" class="mb-15">
- <textarea class="long mb-5 sm rk-dashboard-textarea" rows="3" v-model="config"></textarea>
- <a class="rk-btn ghost sm mr-10" @click="handleCopy(config)">{{$t('copy')}}</a>
- <a class="rk-btn ghost sm mr-10" @click="handleReset">{{$t('reset')}}</a>
- <a class="rk-btn ghost sm" @click="handleApply">{{$t('apply')}}</a>
+ <textarea
+ class="long mb-5 sm rk-dashboard-textarea"
+ rows="3"
+ v-model="config"
+ ></textarea>
+ <a class="rk-btn ghost sm mr-10" @click="handleCopy(config)">{{
+ $t('copy')
+ }}</a>
+ <a class="rk-btn ghost sm mr-10" @click="handleReset">{{
+ $t('reset')
+ }}</a>
+ <a class="rk-btn ghost sm" @click="handleApply">{{ $t('apply') }}</a>
</div>
- <div v-else class="rk-dashboard-comp-i mr-10 mb-10" v-for="(i, index) in tree[current]" :key="index">
- <span class="b mr-5 sm">{{$t(i.o.toLowerCase())}}</span>
+ <div
+ v-else
+ class="rk-dashboard-comp-i mr-10 mb-10"
+ v-for="(i, index) in tree[current]"
+ :key="index"
+ >
+ <span class="b mr-5 sm">{{ $t(i.o.toLowerCase()) }}</span>
<svg class="icon blue cp lg r" @click="ADD_COMP(i)">
<use xlink:href="#file-addition"></use>
</svg>
- <div class="mr-5">{{i.t}}</div>
+ <div class="mr-5">{{ i.t }}</div>
</div>
</div>
</div>
</template>
<script lang="ts">
-import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
-import { State, Mutation } from 'vuex-class';
-import copy from '@/utils/copy';
+ import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
+ import { State, Mutation } from 'vuex-class';
+ import copy from '@/utils/copy';
-@Component
-export default class DashboardComp extends Vue {
- @Prop() private rocketComps: any;
- @Prop() private compType: any;
- @Mutation('ADD_COMP') private ADD_COMP: any;
- private current: string = 'Global';
- private configMode: boolean = false;
- private config: string = '';
- private get tree() {
- const temp: any = {
- Global: [],
- Service: [],
- ServiceEndpoint: [],
- ServiceInstance: [],
- Proxy: [],
- ProxyEndpoint: [],
- ProxyInstance: [],
- Database: [],
- };
- this.rocketComps.data[this.compType].forEach((i: any) => {
- if (temp[i.o]) {
- temp[i.o].push(i);
+ @Component
+ export default class DashboardComp extends Vue {
+ @Prop() private rocketComps: any;
+ @Prop() private compType: any;
+ @Mutation('ADD_COMP') private ADD_COMP: any;
+ private current: string = 'Global';
+ private configMode: boolean = false;
+ private config: string = '';
+ private get tree() {
+ const temp: any = {
+ Global: [],
+ Service: [],
+ ServiceEndpoint: [],
+ ServiceInstance: [],
+ Proxy: [],
+ ProxyEndpoint: [],
+ ProxyInstance: [],
+ Database: [],
+ };
+ this.rocketComps.data[this.compType].forEach((i: any) => {
+ if (temp[i.o]) {
+ temp[i.o].push(i);
+ }
+ });
+ return temp;
+ }
+ private created() {
+ this.config = JSON.stringify(this.rocketComps.tree);
+ }
+ private handleCopy(i: any) {
+ copy(i);
+ }
+ private handleApply() {
+ const r = confirm('');
+ if (r === true) {
+ window.localStorage.setItem('dashboard', this.config);
+ this.configMode = false;
+ location.reload();
}
- });
- return temp;
- }
- private created() {
- this.config = JSON.stringify(this.rocketComps.tree);
- }
- private handleCopy(i: any) {
- copy(i);
- }
- private handleApply() {
- const r = confirm('');
- if (r === true) {
- window.localStorage.setItem('dashboard', this.config);
- this.configMode = false;
- location.reload();
+ }
+ private handleReset() {
+ const r = confirm('');
+ if (r === true) {
+ window.localStorage.removeItem('dashboard');
+ this.configMode = false;
+ location.reload();
+ }
}
}
- private handleReset() {
- const r = confirm('');
- if (r === true) {
- window.localStorage.removeItem('dashboard');
- this.configMode = false;
- location.reload();
- }
- }
-}
</script>
<style lang="scss" scoped>
-.rk-dashboard-comp-nav{
- padding: 0 15px;
-}
-.rk-dashboard-textarea{
- resize:none;
- border: 1px solid #c1c5ca41;
- outline: none;
- padding: 0 8px;
- border-radius: 4px;
-}
-.rk-dashboard-comp-nav-i{
- display: inline-block;
- line-height: 30px;
- border-bottom: 2px;
- border-bottom-style: solid;
- color: rgba(61, 68, 79, .6);
- border-color: rgba(0, 0, 0, 0);
- will-change: border-color,color;
- transition: border-color .3s, color .3s;
- &:hover{
- color: #448dfe;
- }
- &.active{
- color: #448dfe;
- border-color: #448dfe;
- }
-}
-.rk-dashboard-comp {
- flex-shrink: 0;
- border-top: 1px solid #c1c5ca41;
- color: #515a6e;
- background-color: rgba(196, 200, 225, 0.2);
- .title{
+ .rk-dashboard-comp-nav {
padding: 0 15px;
}
-}
-.rk-dashboard-comp-wrapper{
- padding: 0 15px;
-}
-.rk-dashboard-comp-i{
- padding: 6px 10px;
- min-width: 100px;
- display: inline-block;
- border-radius: 3px;
- background-color: #fff;
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
-}
+ .rk-dashboard-textarea {
+ resize: none;
+ border: 1px solid #c1c5ca41;
+ outline: none;
+ padding: 0 8px;
+ border-radius: 4px;
+ }
+ .rk-dashboard-comp-nav-i {
+ display: inline-block;
+ line-height: 30px;
+ border-bottom: 2px;
+ border-bottom-style: solid;
+ color: rgba(61, 68, 79, 0.6);
+ border-color: rgba(0, 0, 0, 0);
+ will-change: border-color, color;
+ transition: border-color 0.3s, color 0.3s;
+ &:hover {
+ color: #448dfe;
+ }
+ &.active {
+ color: #448dfe;
+ border-color: #448dfe;
+ }
+ }
+ .rk-dashboard-comp {
+ flex-shrink: 0;
+ border-top: 1px solid #c1c5ca41;
+ color: #515a6e;
+ background-color: rgba(196, 200, 225, 0.2);
+ .title {
+ padding: 0 15px;
+ }
+ }
+ .rk-dashboard-comp-wrapper {
+ padding: 0 15px;
+ }
+ .rk-dashboard-comp-i {
+ padding: 6px 10px;
+ min-width: 100px;
+ display: inline-block;
+ border-radius: 3px;
+ background-color: #fff;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
+ }
</style>
diff --git a/src/views/components/dashboard/dashboard-item.vue b/src/views/components/dashboard/dashboard-item.vue
index 8cf3c44..3ab551a 100644
--- a/src/views/components/dashboard/dashboard-item.vue
+++ b/src/views/components/dashboard/dashboard-item.vue
@@ -1,112 +1,125 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
- <template>
- <div class="rk-dashboard-item" :class="`g-sm-${i.w}`" :style="`height:${i.h}px;`"
- draggable="true" @dragstart="$emit('dragStart', index)" @dragover="$event.preventDefault();" @drop="drop">
+<template>
+ <div
+ class="rk-dashboard-item"
+ :class="`g-sm-${i.w}`"
+ :style="`height:${i.h}px;`"
+ draggable="true"
+ @dragstart="$emit('dragStart', index)"
+ @dragover="$event.preventDefault()"
+ @drop="drop"
+ >
<div class="rk-dashboard-item-title ell">
- <svg class="icon cp red r" v-if="rocketGlobal.edit" @click="DELETE_COMP(index)">
- <use xlink:href="#file-deletion"></use>
- </svg>
- <span>{{i.t}}</span>
- <span class="hint" v-if="rocketDashboard[i.d].Hint" >({{rocketDashboard[i.d].Hint}})</span>
+ <svg
+ class="icon cp red r"
+ v-if="rocketGlobal.edit"
+ @click="DELETE_COMP(index)"
+ >
+ <use xlink:href="#file-deletion"></use>
+ </svg>
+ <span>{{ i.t }}</span>
+ <span class="hint" v-if="rocketDashboard[i.d].Hint"
+ >({{ rocketDashboard[i.d].Hint }})</span
+ >
</div>
<div class="rk-dashboard-item-body">
<div style="height:100%;">
- <component :is="rocketGlobal.edit ? 'ChartEdit' : i.c" ref="chart" :i="i" :index="index" :intervalTime="intervalTime" :data="rocketDashboard[i.d]"></component>
+ <component
+ :is="rocketGlobal.edit ? 'ChartEdit' : i.c"
+ ref="chart"
+ :i="i"
+ :index="index"
+ :intervalTime="intervalTime"
+ :data="rocketDashboard[i.d]"
+ ></component>
</div>
</div>
</div>
</template>
<script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator';
-import charts from './charts';
+ import { Vue, Component, Prop } from 'vue-property-decorator';
+ import charts from './charts';
-import { Mutation, Action, State, Getter } from 'vuex-class';
+ import { Mutation, Action, State, Getter } from 'vuex-class';
-@Component({
- components: { ...charts },
-})
-export default class DashboardItem extends Vue {
- @Mutation('DELETE_COMP') private DELETE_COMP: any;
- @Mutation('SWICH_COMP') private SWICH_COMP: any;
- @State('rocketDashboard') private rocketDashboard: any;
- @Getter('intervalTime') private intervalTime: any;
- @Prop() private rocketGlobal!: any;
- @Prop() private i!: any;
- @Prop() private index!: number;
- @Prop() private dragIndex!: number;
- private drop() {
- this.SWICH_COMP({start: this.dragIndex, end: this.index});
+ @Component({
+ components: { ...charts },
+ })
+ export default class DashboardItem extends Vue {
+ @Mutation('DELETE_COMP') private DELETE_COMP: any;
+ @Mutation('SWICH_COMP') private SWICH_COMP: any;
+ @State('rocketDashboard') private rocketDashboard: any;
+ @Getter('intervalTime') private intervalTime: any;
+ @Prop() private rocketGlobal!: any;
+ @Prop() private i!: any;
+ @Prop() private index!: number;
+ @Prop() private dragIndex!: number;
+ private drop() {
+ this.SWICH_COMP({ start: this.dragIndex, end: this.index });
+ }
}
-}
-
</script>
<style lang="scss">
-.rk-dashboard-item{
- display: flex;
- height: 100%;
- flex-direction: column;
- padding-left: 5px;
- padding-right: 5px;
-}
-.dashboard-item-shadow{
- background-color:#448dfe15;
- position:absolute;
- border: 1px solid #448dfec0;
- border-radius: 4px;
-}
-.rk-dashboard-item-title{
- flex-shrink: 0;
- user-select: none;
- line-height: 16px;
- border-radius: 2px;
- background-color: rgba(196,200,225,.2);
- color: #9da5b2;
- padding: 6px 10px ;
-}
-.rk-dashboard-item-title .hint{
- color: #FBB03B;
- padding-left: 10px ;
-}
-.dashboard-item-title-input{
- border-style: unset;
- background-color: #ffffffcc;
- outline: 0;
- border-radius: 3px;
- padding: 5px;
- height: 16px;
- margin-left: -5px;
-}
-.dashboard-item-resize{
- position: absolute;
- fill: #9da5b2;
- z-index: 1;
- width: 8px;
- height: 8px;
- padding: 3px;
- right: -4px;
- bottom: 0;
- cursor: se-resize;
-}
-.rk-dashboard-item-body{
- padding: 7px 10px;
- flex-grow:1;
- // height:100%;
- height: calc(100% - 28px);
-}
+ .rk-dashboard-item {
+ display: flex;
+ height: 100%;
+ flex-direction: column;
+ padding-left: 5px;
+ padding-right: 5px;
+ }
+ .dashboard-item-shadow {
+ background-color: #448dfe15;
+ position: absolute;
+ border: 1px solid #448dfec0;
+ border-radius: 4px;
+ }
+ .rk-dashboard-item-title {
+ flex-shrink: 0;
+ user-select: none;
+ line-height: 16px;
+ border-radius: 2px;
+ background-color: rgba(196, 200, 225, 0.2);
+ color: #9da5b2;
+ padding: 6px 10px;
+ }
+ .rk-dashboard-item-title .hint {
+ color: #fbb03b;
+ padding-left: 10px;
+ }
+ .dashboard-item-title-input {
+ border-style: unset;
+ background-color: #ffffffcc;
+ outline: 0;
+ border-radius: 3px;
+ padding: 5px;
+ height: 16px;
+ margin-left: -5px;
+ }
+ .dashboard-item-resize {
+ position: absolute;
+ fill: #9da5b2;
+ z-index: 1;
+ width: 8px;
+ height: 8px;
+ padding: 3px;
+ right: -4px;
+ bottom: 0;
+ cursor: se-resize;
+ }
+ .rk-dashboard-item-body {
+ padding: 7px 10px;
+ flex-grow: 1;
+ // height:100%;
+ height: calc(100% - 28px);
+ }
</style>
diff --git a/src/views/components/dashboard/tool-bar-endpoint-select-opt.vue b/src/views/components/dashboard/tool-bar-endpoint-select-opt.vue
index 656e70b..c862fee 100644
--- a/src/views/components/dashboard/tool-bar-endpoint-select-opt.vue
+++ b/src/views/components/dashboard/tool-bar-endpoint-select-opt.vue
@@ -1,46 +1,41 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
- <div class="rk-dashboard-opt ell" @click="$emit('handleSelect', data)" >{{data.label}}
+ <div class="rk-dashboard-opt ell" @click="$emit('handleSelect', data)">
+ {{ data.label }}
<svg style="margin-top: 3px;" class="icon sm r" @click.stop="show = !show">
<use xlink:href="#code"></use>
- </svg>
- <div class="rk-dashboard-opt-tip" v-if="show">{{data.label}}</div>
+ </svg>
+ <div class="rk-dashboard-opt-tip" v-if="show">{{ data.label }}</div>
</div>
</template>
<script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator';
-@Component
-export default class ToolBarEndpointSelectOpt extends Vue {
- @Prop() public data!: any;
- private show: boolean = false;
-}
+ import { Vue, Component, Prop } from 'vue-property-decorator';
+ @Component
+ export default class ToolBarEndpointSelectOpt extends Vue {
+ @Prop() public data!: any;
+ private show: boolean = false;
+ }
</script>
<style lang="scss" scoped>
-.rk-dashboard-opt-tip{
- margin-top: 5px;
- word-break: break-all;
- white-space: pre-wrap;
- border-radius: 3px;
- padding: 3px;
- background-color: #f3f4f9;
- color: #334444;
-}
+ .rk-dashboard-opt-tip {
+ margin-top: 5px;
+ word-break: break-all;
+ white-space: pre-wrap;
+ border-radius: 3px;
+ padding: 3px;
+ background-color: #f3f4f9;
+ color: #334444;
+ }
</style>
diff --git a/src/views/components/dashboard/tool-bar-endpoint-select.vue b/src/views/components/dashboard/tool-bar-endpoint-select.vue
index 105ac82..75ac469 100644
--- a/src/views/components/dashboard/tool-bar-endpoint-select.vue
+++ b/src/views/components/dashboard/tool-bar-endpoint-select.vue
@@ -1,129 +1,167 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
- <div class="rk-dashboard-bar-select cp flex-h" v-clickout="() => {search = ''; visible = false;}" :class="{'active':visible}">
- <div class="rk-dashboard-bar-i flex-h" @click="visible = !visible;SEARCH_ENDPOINTS('');">
+ <div
+ class="rk-dashboard-bar-select cp flex-h"
+ v-clickout="
+ () => {
+ search = '';
+ visible = false;
+ }
+ "
+ :class="{ active: visible }"
+ >
+ <div
+ class="rk-dashboard-bar-i flex-h"
+ @click="
+ visible = !visible;
+ SEARCH_ENDPOINTS('');
+ "
+ >
<svg class="icon lg mr-15">
<use :xlink:href="`#${icon}`"></use>
</svg>
<div class="mr-15 rk-dashboard-bar-i-text">
- <div class="sm grey">{{title}}</div>
- <div class="ell" v-tooltip:right.ellipsis="current.label || ''">{{current.label}}</div>
+ <div class="sm grey">{{ title }}</div>
+ <div class="ell" v-tooltip:right.ellipsis="current.label || ''">
+ {{ current.label }}
+ </div>
</div>
- <svg class="icon lg trans" :style="`transform: rotate(${visible?180:0}deg)`">
+ <svg
+ class="icon lg trans"
+ :style="`transform: rotate(${visible ? 180 : 0}deg)`"
+ >
<use xlink:href="#arrow-down"></use>
</svg>
</div>
<div class="rk-dashboard-sel" v-if="visible">
<div>
- <input type="text" class="rk-dashboard-sel-search" v-model="search" @input="handleSearch">
- <svg class="icon sm close" style="margin-top: 3px;" @click="search = ''" v-if="search">
+ <input
+ type="text"
+ class="rk-dashboard-sel-search"
+ v-model="search"
+ @input="handleSearch"
+ />
+ <svg
+ class="icon sm close"
+ style="margin-top: 3px;"
+ @click="search = ''"
+ v-if="search"
+ >
<use xlink:href="#clear"></use>
</svg>
</div>
<div class="rk-dashboard-opt-wrapper scroll_hide">
- <EndpointOpt @handleSelect="handleSelect" :class="{'active':i.key === current.key}" v-for="i in data" :key="i.key" :data="i"/>
+ <EndpointOpt
+ @handleSelect="handleSelect"
+ :class="{ active: i.key === current.key }"
+ v-for="i in data"
+ :key="i.key"
+ :data="i"
+ />
</div>
</div>
</div>
</template>
<script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator';
-import { Action } from 'vuex-class';
-import EndpointOpt from './tool-bar-endpoint-select-opt.vue';
-@Component({components: {EndpointOpt}})
-export default class ToolBarEndpointSelect extends Vue {
- @Action('SEARCH_ENDPOINTS') public SEARCH_ENDPOINTS: any;
- @Prop() public data!: any;
- @Prop() public current!: any;
- @Prop() public title!: string;
- @Prop() public icon!: string;
- public search: string = '';
- public visible: boolean = false;
- public handleSearch() {
- this.SEARCH_ENDPOINTS(this.search);
+ import { Vue, Component, Prop } from 'vue-property-decorator';
+ import { Action } from 'vuex-class';
+ import EndpointOpt from './tool-bar-endpoint-select-opt.vue';
+ @Component({ components: { EndpointOpt } })
+ export default class ToolBarEndpointSelect extends Vue {
+ @Action('SEARCH_ENDPOINTS') public SEARCH_ENDPOINTS: any;
+ @Prop() public data!: any;
+ @Prop() public current!: any;
+ @Prop() public title!: string;
+ @Prop() public icon!: string;
+ public search: string = '';
+ public visible: boolean = false;
+ public handleSearch() {
+ this.SEARCH_ENDPOINTS(this.search);
+ }
+ public handleOpen() {
+ this.visible = true;
+ }
+ public handleSelect(i: any) {
+ this.$emit('onChoose', i);
+ this.visible = false;
+ }
}
- public handleOpen() {
- this.visible = true;
- }
- public handleSelect(i: any) {
- this.$emit('onChoose', i);
- this.visible = false;
- }
-}
</script>
<style lang="scss" scoped>
-.rk-dashboard-bar-select {
- position: relative;
- z-index: 1;
- height: 52px;
- justify-content: space-between;
- .sm{ line-height: 12px;}
- .icon { flex-shrink: 0};
-}
-.rk-dashboard-bar-i-text{
- max-width: 250px;
-}
-.rk-dashboard-bar-i {
- height: 100%;
- padding: 0 15px;
- border-right: 2px solid #252a2f;
- &.active,&:hover{
- background-color: #40454e;
+ .rk-dashboard-bar-select {
+ position: relative;
+ z-index: 1;
+ height: 52px;
+ justify-content: space-between;
+ .sm {
+ line-height: 12px;
+ }
+ .icon {
+ flex-shrink: 0;
+ }
}
-}
-.rk-dashboard-sel{
- position: absolute;
- top: 50px;
- left: -1px;
- box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
- background-color: #252a2f;
- width: 100%;
- border-radius: 0 0 3px 3px;
- .close{
+ .rk-dashboard-bar-i-text {
+ max-width: 250px;
+ }
+ .rk-dashboard-bar-i {
+ height: 100%;
+ padding: 0 15px;
+ border-right: 2px solid #252a2f;
+ &.active,
+ &:hover {
+ background-color: #40454e;
+ }
+ }
+ .rk-dashboard-sel {
position: absolute;
- right: 10px;
- top: 12px;
- opacity: 0.6;
- &:hover{opacity: 1;}
+ top: 50px;
+ left: -1px;
+ box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
+ background-color: #252a2f;
+ width: 100%;
+ border-radius: 0 0 3px 3px;
+ .close {
+ position: absolute;
+ right: 10px;
+ top: 12px;
+ opacity: 0.6;
+ &:hover {
+ opacity: 1;
+ }
+ }
}
-}
-.rk-dashboard-opt{
- padding: 7px 15px;
- &.active,&:hover{
- background-color: #40454e;
+ .rk-dashboard-opt {
+ padding: 7px 15px;
+ &.active,
+ &:hover {
+ background-color: #40454e;
+ }
}
-}
-.rk-dashboard-sel-search{
- width: calc(100% - 4px);
- border:0;
- background-color: #333840;
- color: #eee;
- outline: 0;
- padding: 7px 25px 7px 10px;
- margin: 2px;
- border-radius: 3px;
-}
-.rk-dashboard-opt-wrapper{
- overflow: auto;
- max-height: 200px;
- padding-bottom: 2px;
-}
+ .rk-dashboard-sel-search {
+ width: calc(100% - 4px);
+ border: 0;
+ background-color: #333840;
+ color: #eee;
+ outline: 0;
+ padding: 7px 25px 7px 10px;
+ margin: 2px;
+ border-radius: 3px;
+ }
+ .rk-dashboard-opt-wrapper {
+ overflow: auto;
+ max-height: 200px;
+ padding-bottom: 2px;
+ }
</style>
diff --git a/src/views/components/dashboard/tool-bar-select.vue b/src/views/components/dashboard/tool-bar-select.vue
index 241c628..129a215 100644
--- a/src/views/components/dashboard/tool-bar-select.vue
+++ b/src/views/components/dashboard/tool-bar-select.vue
@@ -1,128 +1,158 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
- <div class="rk-dashboard-bar-select flex-h" v-clickout="() => { visible = false;search = '';}"
- :class="{'active':visible, 'cp': selectable, 'cd': !selectable}">
- <div class="rk-dashboard-bar-i flex-h" @click="selectable && (visible = !visible)">
+ <div
+ class="rk-dashboard-bar-select flex-h"
+ v-clickout="
+ () => {
+ visible = false;
+ search = '';
+ }
+ "
+ :class="{ active: visible, cp: selectable, cd: !selectable }"
+ >
+ <div
+ class="rk-dashboard-bar-i flex-h"
+ @click="selectable && (visible = !visible)"
+ >
<svg class="icon lg mr-15">
<use :xlink:href="`#${icon}`"></use>
</svg>
<div class="mr-15 rk-dashboard-bar-i-text">
- <div class="sm grey">{{title}}</div>
- <div class="ell" v-tooltip:right.ellipsis="current.label || ''">{{current.label}}</div>
+ <div class="sm grey">{{ title }}</div>
+ <div class="ell" v-tooltip:right.ellipsis="current.label || ''">
+ {{ current.label }}
+ </div>
</div>
- <svg v-if="selectable" class="icon lg trans" :style="`transform: rotate(${visible?180:0}deg)`">
+ <svg
+ v-if="selectable"
+ class="icon lg trans"
+ :style="`transform: rotate(${visible ? 180 : 0}deg)`"
+ >
<use xlink:href="#arrow-down"></use>
</svg>
</div>
<div class="rk-dashboard-sel" v-if="visible && selectable">
<div>
- <input type="text" class="rk-dashboard-sel-search" v-model="search">
+ <input type="text" class="rk-dashboard-sel-search" v-model="search" />
<svg class="icon sm close" @click="search = ''" v-if="search">
<use xlink:href="#clear"></use>
</svg>
</div>
<div class="rk-dashboard-opt-wrapper scroll_hide">
- <div class="rk-dashboard-opt ell" @click="handleSelect(i)" :class="{'active':i.key === current.key}" v-for="i in filterData" :key="i.key">{{i.label}}</div>
+ <div
+ class="rk-dashboard-opt ell"
+ @click="handleSelect(i)"
+ :class="{ active: i.key === current.key }"
+ v-for="i in filterData"
+ :key="i.key"
+ >
+ {{ i.label }}
+ </div>
</div>
</div>
</div>
</template>
<script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator';
-@Component
-export default class ToolBarSelect extends Vue {
- @Prop() public data!: any;
- @Prop() public current!: any;
- @Prop() public title!: string;
- @Prop() public icon!: string;
- @Prop({type: Boolean, default: true}) public selectable!: boolean;
- public search: string = '';
- public visible: boolean = false;
- get filterData() {
- return this.data.filter((i: any) => i.label.toUpperCase().indexOf(this.search.toUpperCase()) !== -1);
+ import { Vue, Component, Prop } from 'vue-property-decorator';
+ @Component
+ export default class ToolBarSelect extends Vue {
+ @Prop() public data!: any;
+ @Prop() public current!: any;
+ @Prop() public title!: string;
+ @Prop() public icon!: string;
+ @Prop({ type: Boolean, default: true }) public selectable!: boolean;
+ public search: string = '';
+ public visible: boolean = false;
+ get filterData() {
+ return this.data.filter(
+ (i: any) =>
+ i.label.toUpperCase().indexOf(this.search.toUpperCase()) !== -1,
+ );
+ }
+ public handleOpen() {
+ this.visible = true;
+ }
+ public handleSelect(i: any) {
+ this.$emit('onChoose', i);
+ this.visible = false;
+ }
}
- public handleOpen() {
- this.visible = true;
- }
- public handleSelect(i: any) {
- this.$emit('onChoose', i);
- this.visible = false;
- }
-}
</script>
<style lang="scss" scoped>
-.rk-dashboard-bar-select {
- position: relative;
- z-index: 1;
- height: 52px;
- justify-content: space-between;
- .sm{ line-height: 12px;}
- .icon { flex-shrink: 0};
-}
-.rk-dashboard-bar-i-text{
- max-width: 200px;
-}
-.rk-dashboard-bar-i {
- height: 100%;
- padding: 0 15px;
- border-right: 2px solid #252a2f;
- &.active,&:hover{
- background-color: #40454e;
+ .rk-dashboard-bar-select {
+ position: relative;
+ z-index: 1;
+ height: 52px;
+ justify-content: space-between;
+ .sm {
+ line-height: 12px;
+ }
+ .icon {
+ flex-shrink: 0;
+ }
}
-}
-.rk-dashboard-sel{
- position: absolute;
- top: 50px;
- left: -1px;
- box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
- background-color: #252a2f;
- width: 100%;
- border-radius: 0 0 3px 3px;
- .close{
+ .rk-dashboard-bar-i-text {
+ max-width: 200px;
+ }
+ .rk-dashboard-bar-i {
+ height: 100%;
+ padding: 0 15px;
+ border-right: 2px solid #252a2f;
+ &.active,
+ &:hover {
+ background-color: #40454e;
+ }
+ }
+ .rk-dashboard-sel {
position: absolute;
- right: 10px;
- top: 12px;
- opacity: 0.6;
- &:hover{opacity: 1;}
+ top: 50px;
+ left: -1px;
+ box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
+ background-color: #252a2f;
+ width: 100%;
+ border-radius: 0 0 3px 3px;
+ .close {
+ position: absolute;
+ right: 10px;
+ top: 12px;
+ opacity: 0.6;
+ &:hover {
+ opacity: 1;
+ }
+ }
}
-}
-.rk-dashboard-opt{
- padding: 7px 15px;
- &.active,&:hover{
- background-color: #40454e;
+ .rk-dashboard-opt {
+ padding: 7px 15px;
+ &.active,
+ &:hover {
+ background-color: #40454e;
+ }
}
-}
-.rk-dashboard-sel-search{
- width: calc(100% - 4px);
- border:0;
- background-color: #333840;
- color: #eee;
- outline: 0;
- padding: 7px 25px 7px 10px;
- margin: 2px;
- border-radius: 3px;
-}
-.rk-dashboard-opt-wrapper{
- overflow: auto;
- max-height: 200px;
- padding-bottom: 2px;
-}
+ .rk-dashboard-sel-search {
+ width: calc(100% - 4px);
+ border: 0;
+ background-color: #333840;
+ color: #eee;
+ outline: 0;
+ padding: 7px 25px 7px 10px;
+ margin: 2px;
+ border-radius: 3px;
+ }
+ .rk-dashboard-opt-wrapper {
+ overflow: auto;
+ max-height: 200px;
+ padding-bottom: 2px;
+ }
</style>
diff --git a/src/views/components/dashboard/tool-bar.vue b/src/views/components/dashboard/tool-bar.vue
index 230efc3..31090a9 100644
--- a/src/views/components/dashboard/tool-bar.vue
+++ b/src/views/components/dashboard/tool-bar.vue
@@ -1,104 +1,164 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
<div>
<div class="rk-dashboard-bar flex-h" v-if="compType === 'service'">
<div class="rk-dashboard-bar-reload">
- <svg class="icon lg vm cp rk-btn ghost" :style="`color:${!rocketGlobal.edit? '' :'#ffc107'}`" @click="handleSetEdit"><use :xlink:href="!rocketGlobal.edit?'#lock':'#lock-open'"></use></svg>
+ <svg
+ class="icon lg vm cp rk-btn ghost"
+ :style="`color:${!rocketGlobal.edit ? '' : '#ffc107'}`"
+ @click="handleSetEdit"
+ >
+ <use :xlink:href="!rocketGlobal.edit ? '#lock' : '#lock-open'"></use>
+ </svg>
</div>
<div class="rk-dashboard-bar-reload">
- <svg class="icon lg vm cp rk-btn ghost" @click="handleOption"><use xlink:href="#retry"></use></svg>
+ <svg class="icon lg vm cp rk-btn ghost" @click="handleOption">
+ <use xlink:href="#retry"></use>
+ </svg>
</div>
- <ToolBarSelect @onChoose="selectService" :title="this.$t('currentService')" :current="stateDashboard.currentService" :data="stateDashboard.services" icon="package"/>
- <ToolBarEndpointSelect @onChoose="selectEndpoint" :title="this.$t('currentEndpoint')" :current="stateDashboard.currentEndpoint" :data="stateDashboard.endpoints" icon="code"/>
- <ToolBarSelect @onChoose="selectInstance" :title="this.$t('currentInstance')" :current="stateDashboard.currentInstance" :data="stateDashboard.instances" icon="disk"/>
+ <ToolBarSelect
+ @onChoose="selectService"
+ :title="this.$t('currentService')"
+ :current="stateDashboard.currentService"
+ :data="stateDashboard.services"
+ icon="package"
+ />
+ <ToolBarEndpointSelect
+ @onChoose="selectEndpoint"
+ :title="this.$t('currentEndpoint')"
+ :current="stateDashboard.currentEndpoint"
+ :data="stateDashboard.endpoints"
+ icon="code"
+ />
+ <ToolBarSelect
+ @onChoose="selectInstance"
+ :title="this.$t('currentInstance')"
+ :current="stateDashboard.currentInstance"
+ :data="stateDashboard.instances"
+ icon="disk"
+ />
</div>
<div class="rk-dashboard-bar flex-h" v-if="compType === 'proxy'">
<div class="rk-dashboard-bar-reload">
- <svg class="icon vm cp rk-btn ghost" @click="handleOption"><use xlink:href="#retry"></use></svg>
+ <svg class="icon vm cp rk-btn ghost" @click="handleOption">
+ <use xlink:href="#retry"></use>
+ </svg>
</div>
- <ToolBarSelect @onChoose="selectService" title="Current Proxy" :current="stateDashboard.currentService" :data="stateDashboard.services" icon="package"/>
- <ToolBarEndpointSelect @onChoose="selectEndpoint" title="Current Endpoint" :current="stateDashboard.currentEndpoint" :data="stateDashboard.endpoints" icon="code"/>
- <ToolBarSelect @onChoose="selectInstance" title="Current Instance" :current="stateDashboard.currentInstance" :data="stateDashboard.instances" icon="disk"/>
+ <ToolBarSelect
+ @onChoose="selectService"
+ title="Current Proxy"
+ :current="stateDashboard.currentService"
+ :data="stateDashboard.services"
+ icon="package"
+ />
+ <ToolBarEndpointSelect
+ @onChoose="selectEndpoint"
+ title="Current Endpoint"
+ :current="stateDashboard.currentEndpoint"
+ :data="stateDashboard.endpoints"
+ icon="code"
+ />
+ <ToolBarSelect
+ @onChoose="selectInstance"
+ title="Current Instance"
+ :current="stateDashboard.currentInstance"
+ :data="stateDashboard.instances"
+ icon="disk"
+ />
</div>
<div class="rk-dashboard-bar flex-h" v-else-if="compType === 'database'">
<div class="rk-dashboard-bar-reload">
- <svg class="icon lg vm cp rk-btn ghost" :style="`color:${!rocketGlobal.edit? '' :'#ffc107'}`" @click="handleSetEdit"><use :xlink:href="!rocketGlobal.edit?'#lock':'#lock-open'"></use></svg>
+ <svg
+ class="icon lg vm cp rk-btn ghost"
+ :style="`color:${!rocketGlobal.edit ? '' : '#ffc107'}`"
+ @click="handleSetEdit"
+ >
+ <use :xlink:href="!rocketGlobal.edit ? '#lock' : '#lock-open'"></use>
+ </svg>
</div>
<div class="rk-dashboard-bar-reload">
- <svg class="icon lg vm cp rk-btn ghost" @click="handleOption"><use xlink:href="#retry"></use></svg>
+ <svg class="icon lg vm cp rk-btn ghost" @click="handleOption">
+ <use xlink:href="#retry"></use>
+ </svg>
</div>
- <ToolBarSelect @onChoose="SELECT_DATABASE" :title="this.$t('currentDatabase')" :current="stateDashboard.currentDatabase" :data="stateDashboard.databases" icon="epic"/>
+ <ToolBarSelect
+ @onChoose="SELECT_DATABASE"
+ :title="this.$t('currentDatabase')"
+ :current="stateDashboard.currentDatabase"
+ :data="stateDashboard.databases"
+ icon="epic"
+ />
</div>
</div>
</template>
<script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator';
-import ToolBarSelect from './tool-bar-select.vue';
-import ToolBarEndpointSelect from './tool-bar-endpoint-select.vue';
-import { State, Action, Mutation } from 'vuex-class';
-@Component({components: {ToolBarSelect, ToolBarEndpointSelect}})
-export default class ToolBar extends Vue {
- @Prop() private compType!: any;
- @Prop() private stateDashboard!: any;
- @Prop() private rocketGlobal!: any;
- @Prop() private rocketComps!: any;
- @Prop() private durationTime!: any;
- @Mutation('ADD_COMP') private ADD_COMP: any;
- @Action('SET_EDIT') private SET_EDIT: any;
- @Action('SELECT_SERVICE') private SELECT_SERVICE: any;
- @Action('SELECT_DATABASE') private SELECT_DATABASE: any;
- @Action('SELECT_ENDPOINT') private SELECT_ENDPOINT: any;
- @Action('SELECT_INSTANCE') private SELECT_INSTANCE: any;
- @Action('MIXHANDLE_GET_OPTION') private MIXHANDLE_GET_OPTION: any;
- get lastKey() {
- const current = this.rocketComps.tree[this.rocketComps.group]
- .children[this.rocketComps.current].children;
- if (!current.length) { return 0; }
- return current[current.length - 1].k;
+ import { Vue, Component, Prop } from 'vue-property-decorator';
+ import ToolBarSelect from './tool-bar-select.vue';
+ import ToolBarEndpointSelect from './tool-bar-endpoint-select.vue';
+ import { State, Action, Mutation } from 'vuex-class';
+ @Component({ components: { ToolBarSelect, ToolBarEndpointSelect } })
+ export default class ToolBar extends Vue {
+ @Prop() private compType!: any;
+ @Prop() private stateDashboard!: any;
+ @Prop() private rocketGlobal!: any;
+ @Prop() private rocketComps!: any;
+ @Prop() private durationTime!: any;
+ @Mutation('ADD_COMP') private ADD_COMP: any;
+ @Action('SET_EDIT') private SET_EDIT: any;
+ @Action('SELECT_SERVICE') private SELECT_SERVICE: any;
+ @Action('SELECT_DATABASE') private SELECT_DATABASE: any;
+ @Action('SELECT_ENDPOINT') private SELECT_ENDPOINT: any;
+ @Action('SELECT_INSTANCE') private SELECT_INSTANCE: any;
+ @Action('MIXHANDLE_GET_OPTION') private MIXHANDLE_GET_OPTION: any;
+ get lastKey() {
+ const current = this.rocketComps.tree[this.rocketComps.group].children[
+ this.rocketComps.current
+ ].children;
+ if (!current.length) {
+ return 0;
+ }
+ return current[current.length - 1].k;
+ }
+ private handleOption() {
+ return this.MIXHANDLE_GET_OPTION({
+ compType: this.compType,
+ duration: this.durationTime,
+ });
+ }
+ private handleSetEdit() {
+ this.SET_EDIT(this.rocketGlobal.edit ? false : true);
+ }
+ private selectService(i: any) {
+ this.SELECT_SERVICE({ service: i, duration: this.durationTime });
+ }
+ private selectEndpoint(i: any) {
+ this.SELECT_ENDPOINT({ endpoint: i, duration: this.durationTime });
+ }
+ private selectInstance(i: any) {
+ this.SELECT_INSTANCE({ instance: i, duration: this.durationTime });
+ }
}
- private handleOption() {
- return this.MIXHANDLE_GET_OPTION({compType: this.compType, duration: this.durationTime});
- }
- private handleSetEdit() {
- this.SET_EDIT(this.rocketGlobal.edit ? false : true);
- }
- private selectService(i: any) {
- this.SELECT_SERVICE({service: i, duration: this.durationTime});
- }
- private selectEndpoint(i: any) {
- this.SELECT_ENDPOINT({endpoint: i, duration: this.durationTime});
- }
- private selectInstance(i: any) {
- this.SELECT_INSTANCE({instance: i, duration: this.durationTime});
- }
-}
</script>
<style lang="scss" scoped>
-.rk-dashboard-bar {
- flex-shrink: 0;
- color: #efefef;
- background-color: #333840;
-}
-.rk-dashboard-bar-reload{
- padding: 0 5px;
- border-right: 2px solid #252a2f;
-}
+ .rk-dashboard-bar {
+ flex-shrink: 0;
+ color: #efefef;
+ background-color: #333840;
+ }
+ .rk-dashboard-bar-reload {
+ padding: 0 5px;
+ border-right: 2px solid #252a2f;
+ }
</style>
diff --git a/src/views/components/dashboard/tool-group.vue b/src/views/components/dashboard/tool-group.vue
index d57937b..09549db 100644
--- a/src/views/components/dashboard/tool-group.vue
+++ b/src/views/components/dashboard/tool-group.vue
@@ -1,161 +1,184 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
<nav class="rk-dashboard-group">
<span v-for="(i, index) in rocketComps.tree" :key="index" class="mr-15">
- <a class="rk-dashboard-group-i mb-10" @click="handleOption(index)" :class="{'active': rocketComps.group == index, 'grey': rocketComps.group != index}">{{i.name}}</a>
- <svg v-if="rocketGlobal.edit && rocketComps.group !== index" class="ml-5 icon cp red vm" @click="DELETE_COMPS_GROUP(index)">
+ <a
+ class="rk-dashboard-group-i mb-10"
+ @click="handleOption(index)"
+ :class="{
+ active: rocketComps.group == index,
+ grey: rocketComps.group != index,
+ }"
+ >{{ i.name }}</a
+ >
+ <svg
+ v-if="rocketGlobal.edit && rocketComps.group !== index"
+ class="ml-5 icon cp red vm"
+ @click="DELETE_COMPS_GROUP(index)"
+ >
<use xlink:href="#file-deletion"></use>
</svg>
</span>
- <a class="rk-dashboard-group-add" v-clickout="handleHide" v-if="rocketGlobal.edit">
- <svg class="icon vm" @click="show=!show">
+ <a
+ class="rk-dashboard-group-add"
+ v-clickout="handleHide"
+ v-if="rocketGlobal.edit"
+ >
+ <svg class="icon vm" @click="show = !show">
<use xlink:href="#todo-add"></use>
</svg>
<div class="rk-dashboard-group-add-box" v-if="show">
- <div class="mb-10 vm">{{$t('createGroup')}}</div>
- <div class="sm grey mb-5 mr-10">{{$t('groupType')}}</div>
+ <div class="mb-10 vm">{{ $t('createGroup') }}</div>
+ <div class="sm grey mb-5 mr-10">{{ $t('groupType') }}</div>
<select v-model="type" class="rk-dashboard-group-sel mb-5 long">
- <option value="service">{{$t('service')}}</option>
+ <option value="service">{{ $t('service') }}</option>
<!-- <option value="proxy">Proxy</option> -->
- <option value="database">{{$t('database')}}</option>
+ <option value="database">{{ $t('database') }}</option>
</select>
- <div class="sm grey mb-5 mr-10">{{$t('groupName')}}</div>
- <input class="mb-5 rk-dashboard-group-input" type="text" v-model="name">
- <label class="mb-10 dib"><input type="checkbox" v-model="template">{{$t('template')}}</label>
- <a class="rk-btn r vm long tc" @click="handleCreate">{{$t('confirm')}}</a>
+ <div class="sm grey mb-5 mr-10">{{ $t('groupName') }}</div>
+ <input
+ class="mb-5 rk-dashboard-group-input"
+ type="text"
+ v-model="name"
+ />
+ <label class="mb-10 dib"
+ ><input type="checkbox" v-model="template" />{{
+ $t('template')
+ }}</label
+ >
+ <a class="rk-btn r vm long tc" @click="handleCreate">{{
+ $t('confirm')
+ }}</a>
</div>
</a>
</nav>
</template>
<script lang="ts">
-import Vue from 'vue';
-import { Component, Prop } from 'vue-property-decorator';
-import { Mutation, Action, Getter } from 'vuex-class';
+ import Vue from 'vue';
+ import { Component, Prop } from 'vue-property-decorator';
+ import { Mutation, Action, Getter } from 'vuex-class';
-@Component({})
-export default class ToolGroup extends Vue {
- @Prop() private rocketGlobal: any;
- @Prop() private rocketComps: any;
- @Mutation('DELETE_COMPS_GROUP') private DELETE_COMPS_GROUP: any;
- @Mutation('ADD_COMPS_GROUP') private ADD_COMPS_GROUP: any;
- @Action('MIXHANDLE_CHANGE_GROUP') private MIXHANDLE_CHANGE_GROUP: any;
- @Action('MIXHANDLE_GET_OPTION') private MIXHANDLE_GET_OPTION: any;
- @Getter('durationTime') private durationTime: any;
- private name: string = '';
- private type: string = 'service';
- private show: boolean = false;
- private template: boolean = false;
- private get compType() {
- return this.rocketComps.tree[this.rocketComps.group].type;
- }
- private handleOption(index: any) {
- this.MIXHANDLE_CHANGE_GROUP(index);
- return this.MIXHANDLE_GET_OPTION({compType: this.compType, duration: this.durationTime});
- }
- private handleHide() {
- this.name = '';
- this.type = 'service';
- this.show = false;
- }
- private handleCreate() {
- let template = 'nouse';
- if (this.type === 'service') {
- template = 'groupService';
+ @Component({})
+ export default class ToolGroup extends Vue {
+ @Prop() private rocketGlobal: any;
+ @Prop() private rocketComps: any;
+ @Mutation('DELETE_COMPS_GROUP') private DELETE_COMPS_GROUP: any;
+ @Mutation('ADD_COMPS_GROUP') private ADD_COMPS_GROUP: any;
+ @Action('MIXHANDLE_CHANGE_GROUP') private MIXHANDLE_CHANGE_GROUP: any;
+ @Action('MIXHANDLE_GET_OPTION') private MIXHANDLE_GET_OPTION: any;
+ @Getter('durationTime') private durationTime: any;
+ private name: string = '';
+ private type: string = 'service';
+ private show: boolean = false;
+ private template: boolean = false;
+ private get compType() {
+ return this.rocketComps.tree[this.rocketComps.group].type;
}
- if (this.type === 'database') {
- template = 'groupDatabase';
+ private handleOption(index: any) {
+ this.MIXHANDLE_CHANGE_GROUP(index);
+ return this.MIXHANDLE_GET_OPTION({
+ compType: this.compType,
+ duration: this.durationTime,
+ });
}
- if (!this.template) {
- template = 'nouse';
+ private handleHide() {
+ this.name = '';
+ this.type = 'service';
+ this.show = false;
}
- this.ADD_COMPS_GROUP({name: this.name, type: this.type, template });
- this.handleHide();
- this.template = false;
+ private handleCreate() {
+ let template = 'nouse';
+ if (this.type === 'service') {
+ template = 'groupService';
+ }
+ if (this.type === 'database') {
+ template = 'groupDatabase';
+ }
+ if (!this.template) {
+ template = 'nouse';
+ }
+ this.ADD_COMPS_GROUP({ name: this.name, type: this.type, template });
+ this.handleHide();
+ this.template = false;
+ }
}
-}
</script>
<style lang="scss" scoped>
-.rk-dashboard-group{
- border-bottom:1px solid #252a2f;
- background-color: #333840;
- padding: 10px 15px 0;
- color: #eee;
-}
-.rk-dashboard-group-sel{
- outline: none;
- border: 0;
-}
-.rk-dashboard-group-add{
- position: relative;
-}
-.rk-dashboard-group-add-box{
- position: absolute;
- left: -10px;
- top: 35px;
- padding: 10px 5px;
- z-index: 2;
- border-radius: 4px;
- color: #eee;
- background-color: #252a2f;
- box-shadow: 0 3px 6px 0 rgba(0,0,0,.1), 0 1px 3px 0 rgba(0,0,0,.08);
-}
-.rk-dashboard-group-add-box:after {
- bottom: 100%;
- left: 10px;
- border: solid transparent;
- content: " ";
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
- border-color: rgba(136, 183, 213, 0);
- border-bottom-color: #252a2f;
- border-width: 8px;
- margin-left: 0px;
-}
-.rk-dashboard-group-input{
- border: 0;
- outline: 0;
- padding: 1px 8px;
- border-radius: 4px;
-}
-.rk-dashboard-group-i{
- display: inline-block;
- padding: 4px 13px 4px 15px;
- border-radius: 4px;
- position: relative;
- background-color: rgba(255, 255, 255, 0.07);
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
- will-change: border-color,color;
- transition: border-color .3s, color .3s;
- &.active::before{
- content: '';
- position: absolute;
- display: inline-block;
- width: 5px;
- height: 10px;
- border-radius: 4px;
- background-color: #448dfe;
- top: 9px;
- left: 4px;
+ .rk-dashboard-group {
+ border-bottom: 1px solid #252a2f;
+ background-color: #333840;
+ padding: 10px 15px 0;
+ color: #eee;
}
-}
+ .rk-dashboard-group-sel {
+ outline: none;
+ border: 0;
+ }
+ .rk-dashboard-group-add {
+ position: relative;
+ }
+ .rk-dashboard-group-add-box {
+ position: absolute;
+ left: -10px;
+ top: 35px;
+ padding: 10px 5px;
+ z-index: 2;
+ border-radius: 4px;
+ color: #eee;
+ background-color: #252a2f;
+ box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
+ }
+ .rk-dashboard-group-add-box:after {
+ bottom: 100%;
+ left: 10px;
+ border: solid transparent;
+ content: ' ';
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ border-color: rgba(136, 183, 213, 0);
+ border-bottom-color: #252a2f;
+ border-width: 8px;
+ margin-left: 0px;
+ }
+ .rk-dashboard-group-input {
+ border: 0;
+ outline: 0;
+ padding: 1px 8px;
+ border-radius: 4px;
+ }
+ .rk-dashboard-group-i {
+ display: inline-block;
+ padding: 4px 13px 4px 15px;
+ border-radius: 4px;
+ position: relative;
+ background-color: rgba(255, 255, 255, 0.07);
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
+ will-change: border-color, color;
+ transition: border-color 0.3s, color 0.3s;
+ &.active::before {
+ content: '';
+ position: absolute;
+ display: inline-block;
+ width: 5px;
+ height: 10px;
+ border-radius: 4px;
+ background-color: #448dfe;
+ top: 9px;
+ left: 4px;
+ }
+ }
</style>
diff --git a/src/views/components/dashboard/tool-nav.vue b/src/views/components/dashboard/tool-nav.vue
index 4407fec..2e92f9e 100644
--- a/src/views/components/dashboard/tool-nav.vue
+++ b/src/views/components/dashboard/tool-nav.vue
@@ -1,141 +1,183 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
<nav class="rk-dashboard-nav">
- <span v-for="(i, index) in rocketComps.tree[rocketComps.group].children" :key="index" class="mr-20">
- <a class="rk-dashboard-nav-i b" @click="SET_CURRENT_COMPS(index);RUN_EVENTS({})" :class="{'active': rocketComps.current == index}">{{i.name}}</a>
- <svg v-if="rocketGlobal.edit && rocketComps.current !== index" class="ml-5 icon cp red vm" @click="DELETE_COMPS_TREE(index)">
+ <span
+ v-for="(i, index) in rocketComps.tree[rocketComps.group].children"
+ :key="index"
+ class="mr-20"
+ >
+ <a
+ class="rk-dashboard-nav-i b"
+ @click="
+ SET_CURRENT_COMPS(index);
+ RUN_EVENTS({});
+ "
+ :class="{ active: rocketComps.current == index }"
+ >{{ i.name }}</a
+ >
+ <svg
+ v-if="rocketGlobal.edit && rocketComps.current !== index"
+ class="ml-5 icon cp red vm"
+ @click="DELETE_COMPS_TREE(index)"
+ >
<use xlink:href="#file-deletion"></use>
</svg>
</span>
- <a class="rk-dashboard-nav-add" v-clickout="handleHide" v-if="rocketGlobal.edit">
- <svg class="icon vm" @click="show=!show">
+ <a
+ class="rk-dashboard-nav-add"
+ v-clickout="handleHide"
+ v-if="rocketGlobal.edit"
+ >
+ <svg class="icon vm" @click="show = !show">
<use xlink:href="#todo-add"></use>
</svg>
<div class="rk-dashboard-nav-add-box" v-if="show">
- <div class="mb-10 vm">{{$t('createTab')}}</div>
- <div class="sm grey mb-5 mr-10">{{$t('tabName')}}</div>
- <input class="mb-5 rk-dashboard-nav-input" type="text" v-model="name">
- <div class="sm grey mb-5 mr-10">{{$t('template')}}</div>
- <label class="dib mb-5 mr-10 sm"><input type="radio" v-model="template" value="nouse">{{$t('nouse')}}</label>
- <label class="dib mb-5 mr-10 sm"><input type="radio" v-model="template" value="global">{{$t('global')}}</label>
- <label class="dib mb-5 mr-10 sm" v-if="type === 'service'"><input type="radio" v-model="template" value="service">{{$t('service')}}</label>
- <label class="dib mb-5 mr-10 sm" v-if="type === 'service'"><input type="radio" v-model="template" value="endpoint">{{$t('endpoint')}}</label>
- <label class="dib mb-5 mr-10 sm" v-if="type === 'service'"><input type="radio" v-model="template" value="instance">{{$t('instance')}}</label>
- <label class="dib mb-5 mr-10 sm" v-if="type === 'database'"><input type="radio" v-model="template" value="database">{{$t('database')}}</label>
- <a class="rk-btn r vm long tc" @click="handleCreate">{{$t('confirm')}}</a>
+ <div class="mb-10 vm">{{ $t('createTab') }}</div>
+ <div class="sm grey mb-5 mr-10">{{ $t('tabName') }}</div>
+ <input class="mb-5 rk-dashboard-nav-input" type="text" v-model="name" />
+ <div class="sm grey mb-5 mr-10">{{ $t('template') }}</div>
+ <label class="dib mb-5 mr-10 sm"
+ ><input type="radio" v-model="template" value="nouse" />{{
+ $t('nouse')
+ }}</label
+ >
+ <label class="dib mb-5 mr-10 sm"
+ ><input type="radio" v-model="template" value="global" />{{
+ $t('global')
+ }}</label
+ >
+ <label class="dib mb-5 mr-10 sm" v-if="type === 'service'"
+ ><input type="radio" v-model="template" value="service" />{{
+ $t('service')
+ }}</label
+ >
+ <label class="dib mb-5 mr-10 sm" v-if="type === 'service'"
+ ><input type="radio" v-model="template" value="endpoint" />{{
+ $t('endpoint')
+ }}</label
+ >
+ <label class="dib mb-5 mr-10 sm" v-if="type === 'service'"
+ ><input type="radio" v-model="template" value="instance" />{{
+ $t('instance')
+ }}</label
+ >
+ <label class="dib mb-5 mr-10 sm" v-if="type === 'database'"
+ ><input type="radio" v-model="template" value="database" />{{
+ $t('database')
+ }}</label
+ >
+ <a class="rk-btn r vm long tc" @click="handleCreate">{{
+ $t('confirm')
+ }}</a>
</div>
</a>
</nav>
</template>
<script lang="ts">
-import Vue from 'vue';
-import { Component, Prop, Model } from 'vue-property-decorator';
-import { State, Mutation, Action } from 'vuex-class';
+ import Vue from 'vue';
+ import { Component, Prop, Model } from 'vue-property-decorator';
+ import { State, Mutation, Action } from 'vuex-class';
-@Component
-export default class ToolNav extends Vue {
- @Prop() private rocketGlobal: any;
- @Prop() private rocketComps: any;
- @Mutation('SET_CURRENT_COMPS') private SET_CURRENT_COMPS: any;
- @Mutation('DELETE_COMPS_TREE') private DELETE_COMPS_TREE: any;
- @Mutation('ADD_COMPS_TREE') private ADD_COMPS_TREE: any;
- @Action('RUN_EVENTS') private RUN_EVENTS: any;
- private name: string = '';
- private template: string = 'nouse';
- private show: boolean = false;
- get type() {
- return this.rocketComps.tree[this.rocketComps.group].type;
+ @Component
+ export default class ToolNav extends Vue {
+ @Prop() private rocketGlobal: any;
+ @Prop() private rocketComps: any;
+ @Mutation('SET_CURRENT_COMPS') private SET_CURRENT_COMPS: any;
+ @Mutation('DELETE_COMPS_TREE') private DELETE_COMPS_TREE: any;
+ @Mutation('ADD_COMPS_TREE') private ADD_COMPS_TREE: any;
+ @Action('RUN_EVENTS') private RUN_EVENTS: any;
+ private name: string = '';
+ private template: string = 'nouse';
+ private show: boolean = false;
+ get type() {
+ return this.rocketComps.tree[this.rocketComps.group].type;
+ }
+ private handleHide() {
+ this.name = '';
+ this.show = false;
+ }
+ private handleCreate() {
+ if (!this.name) {
+ return;
+ }
+ this.ADD_COMPS_TREE({ name: this.name, template: this.template });
+ this.handleHide();
+ this.template = 'nouse';
+ }
}
- private handleHide() {
- this.name = '';
- this.show = false;
- }
- private handleCreate() {
- if (!this.name) { return; }
- this.ADD_COMPS_TREE({name: this.name, template: this.template});
- this.handleHide();
- this.template = 'nouse';
- }
-}
</script>
<style lang="scss" scoped>
-.rk-dashboard-nav{
- box-shadow: 0 1px 0px rgba(0, 0, 0, 0.08);
- background-color: rgba(196, 200, 225, .2);
- padding: 0 15px;
-}
-.rk-dashboard-nav-sel{
- outline: none;
- border: 0;
-}
-.rk-dashboard-nav-add{
- position: relative;
-}
-.rk-dashboard-nav-add-box{
- position: absolute;
- left: -10px;
- top: 35px;
- padding: 10px 5px;
- z-index: 10;
- border-radius: 4px;
- color: #eee;
- background-color: #252a2f;
- box-shadow: 0 3px 6px 0 rgba(0,0,0,.1), 0 1px 3px 0 rgba(0,0,0,.08);
-}
-.rk-dashboard-nav-add-box:after {
- bottom: 100%;
- left: 10px;
- border: solid transparent;
- content: " ";
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
- border-color: rgba(136, 183, 213, 0);
- border-bottom-color: #333840;
- border-width: 8px;
- margin-left: 0px;
-}
-.rk-dashboard-nav-input{
- border: 0;
- outline: 0;
- padding: 1px 8px;
- border-radius: 4px;
-}
-.rk-dashboard-nav-i{
- display: inline-block;
- height: 41px;
- line-height: 40px;
- border-bottom: 2px;
- border-bottom-style: solid;
- color: rgba(61, 68, 79, .6);
- border-color: rgba(0, 0, 0, 0);
- will-change: border-color,color;
- transition: border-color .3s, color .3s;
- &:hover{
- color: #448dfe;
+ .rk-dashboard-nav {
+ box-shadow: 0 1px 0px rgba(0, 0, 0, 0.08);
+ background-color: rgba(196, 200, 225, 0.2);
+ padding: 0 15px;
}
- &.active{
- color: #448dfe;
- border-color: #448dfe;
+ .rk-dashboard-nav-sel {
+ outline: none;
+ border: 0;
}
-}
+ .rk-dashboard-nav-add {
+ position: relative;
+ }
+ .rk-dashboard-nav-add-box {
+ position: absolute;
+ left: -10px;
+ top: 35px;
+ padding: 10px 5px;
+ z-index: 10;
+ border-radius: 4px;
+ color: #eee;
+ background-color: #252a2f;
+ box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
+ }
+ .rk-dashboard-nav-add-box:after {
+ bottom: 100%;
+ left: 10px;
+ border: solid transparent;
+ content: ' ';
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ border-color: rgba(136, 183, 213, 0);
+ border-bottom-color: #333840;
+ border-width: 8px;
+ margin-left: 0px;
+ }
+ .rk-dashboard-nav-input {
+ border: 0;
+ outline: 0;
+ padding: 1px 8px;
+ border-radius: 4px;
+ }
+ .rk-dashboard-nav-i {
+ display: inline-block;
+ height: 41px;
+ line-height: 40px;
+ border-bottom: 2px;
+ border-bottom-style: solid;
+ color: rgba(61, 68, 79, 0.6);
+ border-color: rgba(0, 0, 0, 0);
+ will-change: border-color, color;
+ transition: border-color 0.3s, color 0.3s;
+ &:hover {
+ color: #448dfe;
+ }
+ &.active {
+ color: #448dfe;
+ border-color: #448dfe;
+ }
+ }
</style>
diff --git a/src/views/components/topology/chart-line.vue b/src/views/components/topology/chart-line.vue
index f2e8242..c3dd4a9 100644
--- a/src/views/components/topology/chart-line.vue
+++ b/src/views/components/topology/chart-line.vue
@@ -1,40 +1,36 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
<div>
- <div class="grey sm mb-5">{{title}}</div>
- <RkEcharts height="90px" :option="option"/>
+ <div class="grey sm mb-5">{{ title }}</div>
+ <RkEcharts height="90px" :option="option" />
</div>
</template>
<script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator';
+ import { Vue, Component, Prop } from 'vue-property-decorator';
-@Component
-export default class ChartLine extends Vue {
- @Prop() private data!: any;
- @Prop() private title!: string;
- @Prop() private intervalTime!: any;
+ @Component
+ export default class ChartLine extends Vue {
+ @Prop() private data!: any;
+ @Prop() private title!: string;
+ @Prop() private intervalTime!: any;
- get option() {
- const temp: any = [];
- const keys = Object.keys(this.data || {}).filter((i: any) => Array.isArray(this.data[i]) && this.data[i].length);
- keys.forEach((i: any, index: number) => {
- const serie: any = {
+ get option() {
+ const temp: any = [];
+ const keys = Object.keys(this.data || {}).filter(
+ (i: any) => Array.isArray(this.data[i]) && this.data[i].length,
+ );
+ keys.forEach((i: any, index: number) => {
+ const serie: any = {
data: this.data[i].map((item: any, itemIndex: number) => [
this.intervalTime[itemIndex],
item,
@@ -47,59 +43,59 @@
width: 1.5,
type: 'solid',
},
- };
- temp.push(serie);
- });
- const color: string[] = [
- '#30A4EB',
- '#45BFC0',
- '#FFCC55',
- '#FF6A84',
- '#a0a7e6',
- '#6be6c1',
- '#626c91',
- '#96dee8',
- '#3f96e3',
- ];
+ };
+ temp.push(serie);
+ });
+ const color: string[] = [
+ '#30A4EB',
+ '#45BFC0',
+ '#FFCC55',
+ '#FF6A84',
+ '#a0a7e6',
+ '#6be6c1',
+ '#626c91',
+ '#96dee8',
+ '#3f96e3',
+ ];
- return {
- color,
- tooltip: {
- trigger: 'axis',
- backgroundColor: 'rgb(50,50,50)',
- textStyle: {
- fontSize: 13,
+ return {
+ color,
+ tooltip: {
+ trigger: 'axis',
+ backgroundColor: 'rgb(50,50,50)',
+ textStyle: {
+ fontSize: 13,
+ },
},
- },
- legend: {
- show: false,
- },
- grid: {
- top: 5,
- left: 0,
- right: 18,
- bottom: 5,
- containLabel: true,
- },
- xAxis: {
- type: 'category',
- axisTick: {
- lineStyle: { color: '#c1c5ca41' },
- alignWithLabel: true,
+ legend: {
+ show: false,
},
- splitLine: { show: false },
- axisLine: { lineStyle: { color: 'rgba(0,0,0,0)' } },
- axisLabel: { color: '#9da5b2', fontSize: '11' },
- },
- yAxis: {
- type: 'value',
- axisLine: { show: false },
- axisTick: { show: false },
- splitLine: { lineStyle: { color: '#c1c5ca41', type: 'dashed' } },
- axisLabel: { color: '#9da5b2', fontSize: '11' },
- },
- series: temp,
- };
+ grid: {
+ top: 5,
+ left: 0,
+ right: 18,
+ bottom: 5,
+ containLabel: true,
+ },
+ xAxis: {
+ type: 'category',
+ axisTick: {
+ lineStyle: { color: '#c1c5ca41' },
+ alignWithLabel: true,
+ },
+ splitLine: { show: false },
+ axisLine: { lineStyle: { color: 'rgba(0,0,0,0)' } },
+ axisLabel: { color: '#9da5b2', fontSize: '11' },
+ },
+ yAxis: {
+ type: 'value',
+ axisLine: { show: false },
+ axisTick: { show: false },
+ splitLine: { lineStyle: { color: '#c1c5ca41', type: 'dashed' } },
+ axisLabel: { color: '#9da5b2', fontSize: '11' },
+ },
+ series: temp,
+ };
+ }
}
-}
</script>
diff --git a/src/views/components/topology/dependency-sankey.vue b/src/views/components/topology/dependency-sankey.vue
index f171607..5436923 100644
--- a/src/views/components/topology/dependency-sankey.vue
+++ b/src/views/components/topology/dependency-sankey.vue
@@ -1,52 +1,47 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
- <RkEcharts height="100%" :option="optionConfigs" :clickEvent="clickLinks"/>
+ <RkEcharts height="100%" :option="optionConfigs" :clickEvent="clickLinks" />
</template>
<script lang="ts">
-import Vue from 'vue';
-import { Component, Prop } from 'vue-property-decorator';
-import { State, Action, Getter, Mutation } from 'vuex-class';
-import echarts from 'echarts/lib/echarts';
+ import Vue from 'vue';
+ import { Component, Prop } from 'vue-property-decorator';
+ import { State, Action, Getter, Mutation } from 'vuex-class';
+ import echarts from 'echarts/lib/echarts';
-@Component
-export default class DependencySankey extends Vue {
- @Prop() private data: any;
- @Getter('durationTime') private durationTime: any;
- @Action('rocketTopo/GET_INSTANCE_DEPENDENCY_METRICS') private GET_INSTANCE_DEPENDENCY_METRICS: any;
+ @Component
+ export default class DependencySankey extends Vue {
+ @Prop() private data: any;
+ @Getter('durationTime') private durationTime: any;
+ @Action('rocketTopo/GET_INSTANCE_DEPENDENCY_METRICS')
+ private GET_INSTANCE_DEPENDENCY_METRICS: any;
- get optionConfigs() {
- return {
- series: {
- type: 'sankey',
- left: 40,
- top: 20,
- right: 300,
- bottom: 40,
- focusNodeAdjacency: 'allEdges',
- data: this.data.nodes,
- links: this.data.calls,
- label: {
- color: '#fff',
- formatter: ((param: any) => param.data.name),
- },
- color: [
+ get optionConfigs() {
+ return {
+ series: {
+ type: 'sankey',
+ left: 40,
+ top: 20,
+ right: 300,
+ bottom: 40,
+ focusNodeAdjacency: 'allEdges',
+ data: this.data.nodes,
+ links: this.data.calls,
+ label: {
+ color: '#fff',
+ formatter: (param: any) => param.data.name,
+ },
+ color: [
'#3fe1da',
'#6be6c1',
'#3fcfdc',
@@ -57,29 +52,29 @@
'#96dee8',
'#bf99f8',
],
- itemStyle: {
- normal: {
- borderWidth: 0,
+ itemStyle: {
+ normal: {
+ borderWidth: 0,
+ },
+ },
+ lineStyle: {
+ normal: {
+ color: 'source',
+ opacity: 0.12,
+ },
},
},
- lineStyle: {
- normal: {
- color: 'source',
- opacity: 0.12,
- },
- },
- },
- };
- }
+ };
+ }
- private clickLinks(params: any) {
- if (params.dataType === 'edge' && params.data) {
- this.GET_INSTANCE_DEPENDENCY_METRICS({
- ...params.data,
- durationTime: this.durationTime,
- mode: params.data.detectPoints[0],
- });
+ private clickLinks(params: any) {
+ if (params.dataType === 'edge' && params.data) {
+ this.GET_INSTANCE_DEPENDENCY_METRICS({
+ ...params.data,
+ durationTime: this.durationTime,
+ mode: params.data.detectPoints[0],
+ });
+ }
}
}
-}
</script>
diff --git a/src/views/components/topology/endpoints-survey.vue b/src/views/components/topology/endpoints-survey.vue
index fa449f6..b685d2c 100644
--- a/src/views/components/topology/endpoints-survey.vue
+++ b/src/views/components/topology/endpoints-survey.vue
@@ -1,27 +1,25 @@
-/**
-* Licensed to the Apache Software Foundation (ASF) under one or more
-* contributor license agreements. See the NOTICE file distributed with
-* this work for additional information regarding copyright ownership.
-* The ASF licenses this file to You under the Apache License, Version 2.0
-* (the "License"); you may not use this file except in compliance with
-* the License. You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
<div class="dashboard-container clear">
<DashboardItem
- v-for="(i, index) in rocketComps.tree[0]
- .children[2].children" :key="index+i.t+i.w+i.d" :index="index"
- :rocketGlobal="rocketGlobal" :i="i" :dragIndex="dragIndex"
- @dragStart="dragStart" />
+ v-for="(i, index) in rocketComps.tree[0].children[2].children"
+ :key="index + i.t + i.w + i.d"
+ :index="index"
+ :rocketGlobal="rocketGlobal"
+ :i="i"
+ :dragIndex="dragIndex"
+ @dragStart="dragStart"
+ />
</div>
</template>
@@ -43,13 +41,10 @@
private dragIndex: number = NaN;
-
public dragStart(index: number) {
this.dragIndex = index;
}
}
</script>
-<style lang="less" scoped>
-
-</style>
+<style lang="less" scoped></style>
diff --git a/src/views/components/topology/instances-survey.vue b/src/views/components/topology/instances-survey.vue
index bf8aca6..68f1a70 100644
--- a/src/views/components/topology/instances-survey.vue
+++ b/src/views/components/topology/instances-survey.vue
@@ -1,27 +1,25 @@
-/**
-* Licensed to the Apache Software Foundation (ASF) under one or more
-* contributor license agreements. See the NOTICE file distributed with
-* this work for additional information regarding copyright ownership.
-* The ASF licenses this file to You under the Apache License, Version 2.0
-* (the "License"); you may not use this file except in compliance with
-* the License. You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
<div class="dashboard-container clear">
<DashboardItem
- v-for="(i, index) in rocketComps.tree[0]
- .children[3].children" :key="index+i.t+i.w+i.d" :index="index"
- :rocketGlobal="rocketGlobal" :i="i" :dragIndex="dragIndex"
- @dragStart="dragStart" />
+ v-for="(i, index) in rocketComps.tree[0].children[3].children"
+ :key="index + i.t + i.w + i.d"
+ :index="index"
+ :rocketGlobal="rocketGlobal"
+ :i="i"
+ :dragIndex="dragIndex"
+ @dragStart="dragStart"
+ />
</div>
</template>
@@ -43,13 +41,10 @@
private dragIndex: number = NaN;
-
public dragStart(index: number) {
this.dragIndex = index;
}
}
</script>
-<style lang="less" scoped>
-
-</style>
+<style lang="less" scoped></style>
diff --git a/src/views/components/topology/radial.vue b/src/views/components/topology/radial.vue
index 550ab4e..085d14d 100644
--- a/src/views/components/topology/radial.vue
+++ b/src/views/components/topology/radial.vue
@@ -1,19 +1,13 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
<div class="micro-radil-chart">
@@ -22,125 +16,125 @@
</div>
</template>
<script lang="js">
-import * as d3 from 'd3';
-import d3tip from 'd3-tip';
+ import * as d3 from 'd3';
+ import d3tip from 'd3-tip';
-export default {
- props: {
- datas: {
- type: Object,
- default() {
+ export default {
+ props: {
+ datas: {
+ type: Object,
+ default() {
+ return {
+ nodes: [],
+ calls: [],
+ };
+ },
+ },
+ },
+ computed: {
+ responseConfig() {
+ const graph = this.datas;
+ const categories = [...new Set(graph.nodes.map((i) => i.type))].map((i) => ({name: i}));
+ const links = [];
+ const nodes = [];
+ graph.calls.forEach((call, index) => {
+ links.push({
+ index,
+ source: call.source.id,
+ target: call.target.id,
+ });
+ });
+ graph.nodes.forEach((node) => {
+ nodes.push({
+ id: node.id,
+ name: node.name,
+ label: {
+ normal: {
+ show: true,
+ },
+ },
+ category: node.type,
+ });
+ });
return {
- nodes: [],
- calls: [],
+ tooltip: {},
+ color: [
+ '#6be6c1',
+ '#a0a7e6',
+ '#96dee8',
+ '#3f96e3',
+ '#3fb1e3',
+ '#6be6c1',
+ '#626c91',
+ '#a0a7e6',
+ '#c4ebad',
+ '#96dee8',
+ ],
+ legend: {
+ top: 25,
+ textStyle: {
+ color: '#ddd',
+ },
+ data: categories.map((a) => a.name),
+ },
+ series : [
+ {
+ top: '20%',
+ height: '60%',
+ name: 'Les Miserables',
+ type: 'graph',
+ layout: 'circular',
+ circular: {
+ rotateLabel: true,
+ },
+ data: nodes,
+ links,
+ categories,
+ roam: true,
+ label: {
+ normal: {
+ position: 'right',
+ formatter: '{b}',
+ },
+ },
+ lineStyle: {
+ normal: {
+ color: 'source',
+ curveness: 0.3,
+ },
+ },
+ },
+ ],
};
},
},
- },
- computed: {
- responseConfig() {
- const graph = this.datas;
- const categories = [...new Set(graph.nodes.map((i) => i.type))].map((i) => ({name: i}));
- const links = [];
- const nodes = [];
- graph.calls.forEach((call, index) => {
- links.push({
- index,
- source: call.source.id,
- target: call.target.id,
- });
+ mounted() {
+ const myChart = this.$refs.radial.myChart;
+ myChart.on('click', (params) => {
+ const currentNode = this.datas.nodes.find((item) => item.id === params.data.id);
+ if (currentNode) {
+ this.$store.commit('rocketTopo/SET_NODE', currentNode);
+ } else {
+ this.$store.commit('rocketTopo/SET_NODE', {});
+ }
});
- graph.nodes.forEach((node) => {
- nodes.push({
- id: node.id,
- name: node.name,
- label: {
- normal: {
- show: true,
- },
- },
- category: node.type,
- });
- });
- return {
- tooltip: {},
- color: [
- '#6be6c1',
- '#a0a7e6',
- '#96dee8',
- '#3f96e3',
- '#3fb1e3',
- '#6be6c1',
- '#626c91',
- '#a0a7e6',
- '#c4ebad',
- '#96dee8',
- ],
- legend: {
- top: 25,
- textStyle: {
- color: '#ddd',
- },
- data: categories.map((a) => a.name),
- },
- series : [
- {
- top: '20%',
- height: '60%',
- name: 'Les Miserables',
- type: 'graph',
- layout: 'circular',
- circular: {
- rotateLabel: true,
- },
- data: nodes,
- links,
- categories,
- roam: true,
- label: {
- normal: {
- position: 'right',
- formatter: '{b}',
- },
- },
- lineStyle: {
- normal: {
- color: 'source',
- curveness: 0.3,
- },
- },
- },
- ],
- };
},
- },
- mounted() {
- const myChart = this.$refs.radial.myChart;
- myChart.on('click', (params) => {
- const currentNode = this.datas.nodes.find((item) => item.id === params.data.id);
- if (currentNode) {
- this.$store.commit('rocketTopo/SET_NODE', currentNode);
- } else {
- this.$store.commit('rocketTopo/SET_NODE', {});
- }
- });
- },
-};
+ };
</script>
<style lang="scss">
-.micro-radil-chart {
- height: 100%;
- position: fixed;
- top: 48px;
- background-color: #333840;
- width: 100%;
- z-index: 100;
- text-align: center;
-}
-.micro-radil-chart-btn{
- position: absolute;
- top: 20px;
- right: 20px;
- z-index: 99;
-}
+ .micro-radil-chart {
+ height: 100%;
+ position: fixed;
+ top: 48px;
+ background-color: #333840;
+ width: 100%;
+ z-index: 100;
+ text-align: center;
+ }
+ .micro-radil-chart-btn {
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ z-index: 99;
+ }
</style>
diff --git a/src/views/components/topology/topo-aside.vue b/src/views/components/topology/topo-aside.vue
index a4db14c..a905a68 100644
--- a/src/views/components/topology/topo-aside.vue
+++ b/src/views/components/topology/topo-aside.vue
@@ -75,176 +75,178 @@
</aside>
</template>
<script lang="ts">
-import { initState } from '@/store/modules/dashboard/modules/dashboard-data-layout';
-import topo, { State as topoState } from '@/store/modules/topology';
-import { Component, Vue, Watch } from 'vue-property-decorator';
-import { Action, Getter, Mutation, State } from 'vuex-class';
-import Radial from './radial.vue';
-import TopoChart from './topo-chart.vue';
-import TopoService from './topo-services.vue';
-import TopoDetectPoint from './topo-detect-point.vue';
+ import { initState } from '@/store/modules/dashboard/modules/dashboard-data-layout';
+ import topo, { State as topoState } from '@/store/modules/topology';
+ import { Component, Vue, Watch } from 'vue-property-decorator';
+ import { Action, Getter, Mutation, State } from 'vuex-class';
+ import Radial from './radial.vue';
+ import TopoChart from './topo-chart.vue';
+ import TopoService from './topo-services.vue';
+ import TopoDetectPoint from './topo-detect-point.vue';
-@Component({
- components: {
- TopoChart,
- TopoService,
- Radial,
- TopoDetectPoint,
- },
-})
-export default class TopoAside extends Vue {
- @State('rocketTopo') private stateTopo!: topoState;
- @State('rocketDashboard') private rocketDashboard: any;
- @Getter('intervalTime') private intervalTime: any;
- @Getter('durationTime') private durationTime: any;
- @Action('SELECT_SERVICE') private SELECT_SERVICE: any;
- @Action('rocketTopo/GET_TOPO') private GET_TOPO: any;
- @Action('rocketTopo/CLEAR_TOPO') private CLEAR_TOPO: any;
- @Action('rocketTopo/CLEAR_TOPO_INFO') private CLEAR_TOPO_INFO: any;
- @Mutation('SET_COMPS_TREE') private SET_COMPS_TREE: any;
- @Mutation('SET_EVENTS') private SET_EVENTS: any;
- @Mutation('rocketTopo/SET_MODE_STATUS') private SET_MODE_STATUS: any;
- private dialogTopoVisible = false;
- private drawerMainBodyHeight = '100%';
- private initState = initState;
- private radioStatus: boolean = false;
- private show: boolean = true;
+ @Component({
+ components: {
+ TopoChart,
+ TopoService,
+ Radial,
+ TopoDetectPoint,
+ },
+ })
+ export default class TopoAside extends Vue {
+ @State('rocketTopo') private stateTopo!: topoState;
+ @State('rocketDashboard') private rocketDashboard: any;
+ @Getter('intervalTime') private intervalTime: any;
+ @Getter('durationTime') private durationTime: any;
+ @Action('SELECT_SERVICE') private SELECT_SERVICE: any;
+ @Action('rocketTopo/GET_TOPO') private GET_TOPO: any;
+ @Action('rocketTopo/CLEAR_TOPO') private CLEAR_TOPO: any;
+ @Action('rocketTopo/CLEAR_TOPO_INFO') private CLEAR_TOPO_INFO: any;
+ @Mutation('SET_COMPS_TREE') private SET_COMPS_TREE: any;
+ @Mutation('SET_EVENTS') private SET_EVENTS: any;
+ @Mutation('rocketTopo/SET_MODE_STATUS') private SET_MODE_STATUS: any;
+ private dialogTopoVisible = false;
+ private drawerMainBodyHeight = '100%';
+ private initState = initState;
+ private radioStatus: boolean = false;
+ private show: boolean = true;
- private get showServerInfo() {
- return this.stateTopo.currentNode.name && this.stateTopo.currentNode.isReal;
+ private get showServerInfo() {
+ return (
+ this.stateTopo.currentNode.name && this.stateTopo.currentNode.isReal
+ );
+ }
+
+ private resize() {
+ this.drawerMainBodyHeight = `${document.body.clientHeight - 50}px`;
+ }
+
+ private created() {
+ this.SET_EVENTS([]);
+ this.SET_COMPS_TREE(this.initState.tree);
+ }
+
+ private mounted() {
+ this.resize();
+ window.addEventListener('resize', this.resize);
+ }
+
+ private getTopo() {
+ this.GET_TOPO({ duration: this.durationTime });
+ }
+
+ private beforeDestroy() {
+ window.removeEventListener('resize', this.resize);
+ this.CLEAR_TOPO_INFO();
+ this.CLEAR_TOPO();
+ }
+
+ get types() {
+ const result: any = {};
+ this.stateTopo.nodes.forEach((i: any) => {
+ if (result[i.type]) {
+ result[i.type] += 1;
+ } else {
+ result[i.type] = 1;
+ }
+ });
+ return result;
+ }
+
+ @Watch('durationTime')
+ private watchDurationTime() {
+ this.getTopo();
+ }
+
+ private showRadial() {
+ this.radioStatus = !this.radioStatus;
+ }
}
-
- private resize() {
- this.drawerMainBodyHeight = `${document.body.clientHeight - 50}px`;
- }
-
- private created() {
- this.SET_EVENTS([]);
- this.SET_COMPS_TREE(this.initState.tree);
- }
-
- private mounted() {
- this.resize();
- window.addEventListener('resize', this.resize);
- }
-
- private getTopo() {
- this.GET_TOPO({ duration: this.durationTime });
- }
-
- private beforeDestroy() {
- window.removeEventListener('resize', this.resize);
- this.CLEAR_TOPO_INFO();
- this.CLEAR_TOPO();
- }
-
- get types() {
- const result: any = {};
- this.stateTopo.nodes.forEach((i: any) => {
- if (result[i.type]) {
- result[i.type] += 1;
- } else {
- result[i.type] = 1;
- }
- });
- return result;
- }
-
- @Watch('durationTime')
- private watchDurationTime() {
- this.getTopo();
- }
-
- private showRadial() {
- this.radioStatus = !this.radioStatus;
- }
-}
</script>
<style lang="scss">
-.link-topo-aside {
- width: 280px;
- position: absolute;
- z-index: 2;
- left: 20px;
- top: 7px;
+ .link-topo-aside {
+ width: 280px;
+ position: absolute;
+ z-index: 2;
+ left: 20px;
+ top: 7px;
- .to-apm {
- padding-top: 10px;
- border-top: 1px solid #d8d8d866;
- }
-}
-
-.link-topo-aside-btn {
- display: block;
- background: #252a2f9a;
- color: #ddd;
- border-radius: 4px 4px 4px 4px;
- text-align: center;
- padding: 10px;
- z-index: 101;
-}
-
-.link-topo-aside-box {
- border-radius: 4px;
- position: absolute;
- width: 280px;
- z-index: 101;
- color: #ddd;
- background-color: #2b3037;
- padding: 15px 20px 10px;
-
- .label {
- display: inline-block;
- width: 40%;
+ .to-apm {
+ padding-top: 10px;
+ border-top: 1px solid #d8d8d866;
+ }
}
- .content {
- vertical-align: top;
- display: inline-block;
- width: 60%;
+ .link-topo-aside-btn {
+ display: block;
+ background: #252a2f9a;
+ color: #ddd;
+ border-radius: 4px 4px 4px 4px;
+ text-align: center;
+ padding: 10px;
+ z-index: 101;
}
- .circle {
- width: 8px;
- height: 8px;
+ .link-topo-aside-box {
border-radius: 4px;
- background-color: #ee5b5b;
- margin-top: 6px;
- }
-}
-
-.link-topo-aside-box {
- p {
- margin-block-start: auto !important;
- margin-block-end: auto !important;
- }
-}
-
-.link-topo-aside-box-min {
- width: 280px;
- animation: 0.5s linkTopoAsideBoxMin 1 running;
-}
-
-.link-topo-aside-box-max {
- width: 60%;
- animation: 0.5s linkTopoAsideBoxMax 1 running;
-}
-
-@keyframes linkTopoAsideBoxMax {
- from {
+ position: absolute;
width: 280px;
- }
- to {
- width: 60%;
- }
-}
+ z-index: 101;
+ color: #ddd;
+ background-color: #2b3037;
+ padding: 15px 20px 10px;
-@keyframes linkTopoAsideBoxMin {
- from {
- width: 60%;
+ .label {
+ display: inline-block;
+ width: 40%;
+ }
+
+ .content {
+ vertical-align: top;
+ display: inline-block;
+ width: 60%;
+ }
+
+ .circle {
+ width: 8px;
+ height: 8px;
+ border-radius: 4px;
+ background-color: #ee5b5b;
+ margin-top: 6px;
+ }
}
- to {
+
+ .link-topo-aside-box {
+ p {
+ margin-block-start: auto !important;
+ margin-block-end: auto !important;
+ }
+ }
+
+ .link-topo-aside-box-min {
width: 280px;
+ animation: 0.5s linkTopoAsideBoxMin 1 running;
}
-}
+
+ .link-topo-aside-box-max {
+ width: 60%;
+ animation: 0.5s linkTopoAsideBoxMax 1 running;
+ }
+
+ @keyframes linkTopoAsideBoxMax {
+ from {
+ width: 280px;
+ }
+ to {
+ width: 60%;
+ }
+ }
+
+ @keyframes linkTopoAsideBoxMin {
+ from {
+ width: 60%;
+ }
+ to {
+ width: 280px;
+ }
+ }
</style>
diff --git a/src/views/components/topology/topo-chart.vue b/src/views/components/topology/topo-chart.vue
index 36b49dd..fbcf8ee 100644
--- a/src/views/components/topology/topo-chart.vue
+++ b/src/views/components/topology/topo-chart.vue
@@ -1,100 +1,99 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
<div>
- <div class="grey sm mb-5">{{title}}</div>
- <h5 class="mt-0 mb-0">{{content.toFixed(2)}} {{unit}}</h5>
- <RkEcharts height="80px" :option="responseConfig"/>
+ <div class="grey sm mb-5">{{ title }}</div>
+ <h5 class="mt-0 mb-0">{{ content.toFixed(2) }} {{ unit }}</h5>
+ <RkEcharts height="80px" :option="responseConfig" />
</div>
-
</template>
<script lang="ts">
-import Vue from 'vue';
-import { Component, Prop } from 'vue-property-decorator';
+ import Vue from 'vue';
+ import { Component, Prop } from 'vue-property-decorator';
-@Component
-export default class TopoChart extends Vue {
- @Prop() private title!: string;
- @Prop() private data!: any;
- @Prop() private unit!: string;
- @Prop() private intervalTime!: number[];
- @Prop() private precent!: boolean;
- get content() {
- if (!this.data.length) {return 0; }
- const noZero = this.data.filter((i: any) => i);
- const sum = noZero.length ? noZero
- .reduce((preValue: number, curValue: number, index: number, array: number[]) => preValue + curValue)
- / noZero.length : 0;
- return this.precent ? sum / 100 : sum;
- }
- get responseConfig() {
- return {
- color: [
- '#3f96e3ee',
- '#6be6c1',
- ],
- tooltip: {
- trigger: 'axis',
- backgroundColor: '#333844',
- textStyle: {
- fontSize: 13,
- },
- },
- grid: {
- top: 4,
- left: 0,
- right: 0,
- bottom: 7,
- containLabel: true,
- },
- xAxis: {
- type: 'category',
- axisTick: {
- lineStyle: { color: '#c1c5ca41' },
- alignWithLabel: true,
- },
- splitLine: { show: false },
- axisLine: { lineStyle: { color: 'rgba(0,0,0,0)' } },
- axisLabel: { color: '#9da5b2', fontSize: '11' },
- },
- yAxis: {
- type: 'value',
- axisLine: { show: false },
- axisTick: { show: false },
- splitLine: { lineStyle: { color: '#c1c5ca41', type: 'dashed' } },
- axisLabel: { color: '#9da5b2', fontSize: '11' },
- },
- series: [
- {
- data: this.data.map((i: any, index: number) => [
- this.intervalTime[index],
- i,
- ]),
- type: this.precent ? 'bar' : 'line',
- symbol: 'none',
- barMaxWidth: 5,
- lineStyle: {
- width: 1,
+ @Component
+ export default class TopoChart extends Vue {
+ @Prop() private title!: string;
+ @Prop() private data!: any;
+ @Prop() private unit!: string;
+ @Prop() private intervalTime!: number[];
+ @Prop() private precent!: boolean;
+ get content() {
+ if (!this.data.length) {
+ return 0;
+ }
+ const noZero = this.data.filter((i: any) => i);
+ const sum = noZero.length
+ ? noZero.reduce(
+ (
+ preValue: number,
+ curValue: number,
+ index: number,
+ array: number[],
+ ) => preValue + curValue,
+ ) / noZero.length
+ : 0;
+ return this.precent ? sum / 100 : sum;
+ }
+ get responseConfig() {
+ return {
+ color: ['#3f96e3ee', '#6be6c1'],
+ tooltip: {
+ trigger: 'axis',
+ backgroundColor: '#333844',
+ textStyle: {
+ fontSize: 13,
},
},
- ],
- };
+ grid: {
+ top: 4,
+ left: 0,
+ right: 0,
+ bottom: 7,
+ containLabel: true,
+ },
+ xAxis: {
+ type: 'category',
+ axisTick: {
+ lineStyle: { color: '#c1c5ca41' },
+ alignWithLabel: true,
+ },
+ splitLine: { show: false },
+ axisLine: { lineStyle: { color: 'rgba(0,0,0,0)' } },
+ axisLabel: { color: '#9da5b2', fontSize: '11' },
+ },
+ yAxis: {
+ type: 'value',
+ axisLine: { show: false },
+ axisTick: { show: false },
+ splitLine: { lineStyle: { color: '#c1c5ca41', type: 'dashed' } },
+ axisLabel: { color: '#9da5b2', fontSize: '11' },
+ },
+ series: [
+ {
+ data: this.data.map((i: any, index: number) => [
+ this.intervalTime[index],
+ i,
+ ]),
+ type: this.precent ? 'bar' : 'line',
+ symbol: 'none',
+ barMaxWidth: 5,
+ lineStyle: {
+ width: 1,
+ },
+ },
+ ],
+ };
+ }
}
-}
</script>
diff --git a/src/views/components/topology/topo-detect-point.vue b/src/views/components/topology/topo-detect-point.vue
index 717b43c..0470296 100644
--- a/src/views/components/topology/topo-detect-point.vue
+++ b/src/views/components/topology/topo-detect-point.vue
@@ -125,190 +125,192 @@
</div>
</template>
<script lang="ts">
-import { State as topoState } from '@/store/modules/topology';
-import { Component, Vue, Watch } from 'vue-property-decorator';
-import { Action, Getter, Mutation, State } from 'vuex-class';
-import TopoChart from './topo-chart.vue';
-import TopoInstanceDependency from './topo-instance-dependency.vue';
-import ChartLine from './chart-line.vue';
+ import { State as topoState } from '@/store/modules/topology';
+ import { Component, Vue, Watch } from 'vue-property-decorator';
+ import { Action, Getter, Mutation, State } from 'vuex-class';
+ import TopoChart from './topo-chart.vue';
+ import TopoInstanceDependency from './topo-instance-dependency.vue';
+ import ChartLine from './chart-line.vue';
-@Component({
- components: {
- TopoInstanceDependency,
- TopoChart,
- ChartLine,
- },
-})
-export default class TopoDetectPoint extends Vue {
- @State('rocketTopo') private stateTopo!: topoState;
- @Getter('intervalTime') private intervalTime: any;
- @Getter('durationTime') private durationTime: any;
- @Action('MIXHANDLE_CHANGE_GROUP_WITH_CURRENT')
- private MIXHANDLE_CHANGE_GROUP_WITH_CURRENT: any;
- @Action('MIXHANDLE_GET_OPTION') private MIXHANDLE_GET_OPTION: any;
- @Action('GET_QUERY') private GET_QUERY: any;
- @Mutation('rocketTopo/SET_MODE_STATUS') private SET_MODE_STATUS: any;
- @State('rocketDashboard') private rocketDashboard: any;
- @Mutation('rocketTopo/SET_SELECTED_INSTANCE_CALL')
- private SET_SELECTED_INSTANCE_CALL: any;
- @Mutation('rocketTopo/SET_INSTANCE_DEPENDENCY')
- private SET_INSTANCE_DEPENDENCY: any;
- @Action('rocketTopo/CLEAR_TOPO_INFO') private CLEAR_TOPO_INFO: any;
- @Action('rocketTopo/GET_TOPO_INSTANCE_DEPENDENCY')
- private GET_INSTANCE_DEPENDENCY: any;
+ @Component({
+ components: {
+ TopoInstanceDependency,
+ TopoChart,
+ ChartLine,
+ },
+ })
+ export default class TopoDetectPoint extends Vue {
+ @State('rocketTopo') private stateTopo!: topoState;
+ @Getter('intervalTime') private intervalTime: any;
+ @Getter('durationTime') private durationTime: any;
+ @Action('MIXHANDLE_CHANGE_GROUP_WITH_CURRENT')
+ private MIXHANDLE_CHANGE_GROUP_WITH_CURRENT: any;
+ @Action('MIXHANDLE_GET_OPTION') private MIXHANDLE_GET_OPTION: any;
+ @Action('GET_QUERY') private GET_QUERY: any;
+ @Mutation('rocketTopo/SET_MODE_STATUS') private SET_MODE_STATUS: any;
+ @State('rocketDashboard') private rocketDashboard: any;
+ @Mutation('rocketTopo/SET_SELECTED_INSTANCE_CALL')
+ private SET_SELECTED_INSTANCE_CALL: any;
+ @Mutation('rocketTopo/SET_INSTANCE_DEPENDENCY')
+ private SET_INSTANCE_DEPENDENCY: any;
+ @Action('rocketTopo/CLEAR_TOPO_INFO') private CLEAR_TOPO_INFO: any;
+ @Action('rocketTopo/GET_TOPO_INSTANCE_DEPENDENCY')
+ private GET_INSTANCE_DEPENDENCY: any;
- private isMini: boolean = true;
- private showInfoCount: number = 0;
- private showInfo: boolean = false;
- private dialogTopoVisible = false;
+ private isMini: boolean = true;
+ private showInfoCount: number = 0;
+ private showInfo: boolean = false;
+ private dialogTopoVisible = false;
- private get showServerInfo() {
- return this.stateTopo.currentNode.name && this.stateTopo.currentNode.isReal;
- }
-
- @Watch('stateTopo.selectedServiceCall')
- private watchDetectPointNodeId(newValue: string) {
- if (newValue || this.stateTopo.currentNode.isReal) {
- this.showInfo = true;
- } else {
- this.showInfo = false;
- this.showInfoCount = 0;
- this.isMini = true;
+ private get showServerInfo() {
+ return (
+ this.stateTopo.currentNode.name && this.stateTopo.currentNode.isReal
+ );
}
- }
- @Watch('stateTopo.currentNode.name')
- private watchCurrentNodeIsReal(newValue: boolean) {
- const service = this.stateTopo.currentNode;
- if (this.stateTopo.currentNode.isReal) {
- this.MIXHANDLE_CHANGE_GROUP_WITH_CURRENT({ index: 0, current: 1 });
- this.MIXHANDLE_GET_OPTION({
- compType: 'service',
- duration: this.durationTime,
- }).then(() => {
- this.GET_QUERY({
- serviceId: service.id || '',
+ @Watch('stateTopo.selectedServiceCall')
+ private watchDetectPointNodeId(newValue: string) {
+ if (newValue || this.stateTopo.currentNode.isReal) {
+ this.showInfo = true;
+ } else {
+ this.showInfo = false;
+ this.showInfoCount = 0;
+ this.isMini = true;
+ }
+ }
+
+ @Watch('stateTopo.currentNode.name')
+ private watchCurrentNodeIsReal(newValue: boolean) {
+ const service = this.stateTopo.currentNode;
+ if (this.stateTopo.currentNode.isReal) {
+ this.MIXHANDLE_CHANGE_GROUP_WITH_CURRENT({ index: 0, current: 1 });
+ this.MIXHANDLE_GET_OPTION({
+ compType: 'service',
duration: this.durationTime,
+ }).then(() => {
+ this.GET_QUERY({
+ serviceId: service.id || '',
+ duration: this.durationTime,
+ });
});
+ }
+ if (newValue || this.stateTopo.selectedServiceCall) {
+ this.showInfo = true;
+ } else {
+ this.showInfo = false;
+ this.showInfoCount = 0;
+ this.isMini = true;
+ }
+ }
+
+ private setShowInfo() {
+ this.showInfo = false;
+ this.showInfoCount = 1;
+ this.isMini = !this.isMini;
+ setTimeout(() => {
+ this.showInfo = true;
+ }, 550);
+ }
+
+ private setMode(mode: boolean) {
+ this.SET_MODE_STATUS(mode);
+ this.stateTopo.callback();
+ }
+
+ private clearInstance() {
+ this.dialogTopoVisible = false;
+ this.SET_SELECTED_INSTANCE_CALL(null);
+ }
+
+ private openInstanceModal() {
+ this.dialogTopoVisible = true;
+ if (
+ !(
+ this.stateTopo.selectedServiceCall &&
+ this.stateTopo.selectedServiceCall.source
+ )
+ ) {
+ return;
+ }
+ this.GET_INSTANCE_DEPENDENCY({
+ serverServiceId: this.stateTopo.selectedServiceCall.source.id,
+ clientServiceId: this.stateTopo.selectedServiceCall.target.id,
+ duration: this.durationTime,
});
}
- if (newValue || this.stateTopo.selectedServiceCall) {
- this.showInfo = true;
- } else {
- this.showInfo = false;
- this.showInfoCount = 0;
- this.isMini = true;
- }
}
-
- private setShowInfo() {
- this.showInfo = false;
- this.showInfoCount = 1;
- this.isMini = !this.isMini;
- setTimeout(() => {
- this.showInfo = true;
- }, 550);
- }
-
- private setMode(mode: boolean) {
- this.SET_MODE_STATUS(mode);
- this.stateTopo.callback();
- }
-
- private clearInstance() {
- this.dialogTopoVisible = false;
- this.SET_SELECTED_INSTANCE_CALL(null);
- }
-
- private openInstanceModal() {
- this.dialogTopoVisible = true;
- if (
- !(
- this.stateTopo.selectedServiceCall &&
- this.stateTopo.selectedServiceCall.source
- )
- ) {
- return;
- }
- this.GET_INSTANCE_DEPENDENCY({
- serverServiceId: this.stateTopo.selectedServiceCall.source.id,
- clientServiceId: this.stateTopo.selectedServiceCall.target.id,
- duration: this.durationTime,
- });
- }
-}
</script>
<style lang="scss">
-.link-topo-aside-box-btn {
- color: #626977;
- border: 1px solid;
- padding: 0px 3px;
- width: 45px;
- display: inline-block;
+ .link-topo-aside-box-btn {
+ color: #626977;
+ border: 1px solid;
+ padding: 0px 3px;
+ width: 45px;
+ display: inline-block;
- &.active {
- color: #448dfe;
- }
-}
-
-.show-dependency {
- margin-top: 20px;
-
- .rk-btn {
- display: block;
- text-align: center;
- }
-
- .instance-dependency {
- .rk-sidebox{
- background: #2b3037;
- outline: none;
- }
- .rk-sidebox-inner{
- height: 100%;
+ &.active {
+ color: #448dfe;
}
}
- .title-name {
- width: 100%;
- padding-left: 40px;
- font-size: 16px;
- }
-}
+ .show-dependency {
+ margin-top: 20px;
-.link-topo-aside-box {
- border-radius: 4px;
- position: absolute;
- width: 280px;
- z-index: 101;
- color: #ddd;
- background-color: #2b3037;
- padding: 15px 20px 10px;
+ .rk-btn {
+ display: block;
+ text-align: center;
+ }
- .label {
- display: inline-block;
- width: 40%;
+ .instance-dependency {
+ .rk-sidebox {
+ background: #2b3037;
+ outline: none;
+ }
+ .rk-sidebox-inner {
+ height: 100%;
+ }
+ }
+
+ .title-name {
+ width: 100%;
+ padding-left: 40px;
+ font-size: 16px;
+ }
}
- .content {
- vertical-align: top;
- display: inline-block;
- width: 60%;
- }
-
- .circle {
- width: 8px;
- height: 8px;
+ .link-topo-aside-box {
border-radius: 4px;
- background-color: #ee5b5b;
- margin-top: 6px;
- }
-}
+ position: absolute;
+ width: 280px;
+ z-index: 101;
+ color: #ddd;
+ background-color: #2b3037;
+ padding: 15px 20px 10px;
-.link-topo-aside-box {
- p {
- margin-block-start: auto !important;
- margin-block-end: auto !important;
+ .label {
+ display: inline-block;
+ width: 40%;
+ }
+
+ .content {
+ vertical-align: top;
+ display: inline-block;
+ width: 60%;
+ }
+
+ .circle {
+ width: 8px;
+ height: 8px;
+ border-radius: 4px;
+ background-color: #ee5b5b;
+ margin-top: 6px;
+ }
}
-}
+
+ .link-topo-aside-box {
+ p {
+ margin-block-start: auto !important;
+ margin-block-end: auto !important;
+ }
+ }
</style>
diff --git a/src/views/components/topology/topo-instance-dependency.vue b/src/views/components/topology/topo-instance-dependency.vue
index 85966e1..91e612f 100644
--- a/src/views/components/topology/topo-instance-dependency.vue
+++ b/src/views/components/topology/topo-instance-dependency.vue
@@ -1,19 +1,13 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
<div class="rk-topo-instance-dependency">
@@ -21,22 +15,33 @@
<DependencySankey :data="stateTopo.instanceDependency" />
</div>
<div class="rk-instance-metric-box">
- <div v-if="!stateTopo.instanceDependency.nodes.length">No Instance Dependency</div>
- <div v-if="stateTopo.selectedInstanceCall" class="rk-instance-dependency-metrics">
+ <div v-if="!stateTopo.instanceDependency.nodes.length">
+ No Instance Dependency
+ </div>
+ <div
+ v-if="stateTopo.selectedInstanceCall"
+ class="rk-instance-dependency-metrics"
+ >
<div class="mb-5 clear">
<span class="b dib mr-20 vm">{{ $t('detectPoint') }}</span>
<span
- v-if="stateTopo.selectedInstanceCall.detectPoints.includes('CLIENT')"
+ v-if="
+ stateTopo.selectedInstanceCall.detectPoints.includes('CLIENT')
+ "
class="link-topo-aside-box-btn tc r sm cp b"
- :class="{'active':stateTopo.queryInstanceMetricsType==='CLIENT'}"
+ :class="{ active: stateTopo.queryInstanceMetricsType === 'CLIENT' }"
@click="setMode('CLIENT')"
- >{{ this.$t('client') }}</span>
+ >{{ this.$t('client') }}</span
+ >
<span
- v-if="stateTopo.selectedInstanceCall.detectPoints.includes('SERVER')"
+ v-if="
+ stateTopo.selectedInstanceCall.detectPoints.includes('SERVER')
+ "
class="link-topo-aside-box-btn tc r sm cp b"
- :class="{'active':stateTopo.queryInstanceMetricsType==='SERVER' }"
+ :class="{ active: stateTopo.queryInstanceMetricsType === 'SERVER' }"
@click="setMode('SERVER')"
- >{{ this.$t('server') }}</span>
+ >{{ this.$t('server') }}</span
+ >
</div>
<div v-if="stateTopo.selectedInstanceCall">
<TopoChart
@@ -73,46 +78,50 @@
</div>
</template>
<script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator';
-import { State, Action, Getter, Mutation } from 'vuex-class';
+ import { Vue, Component, Prop } from 'vue-property-decorator';
+ import { State, Action, Getter, Mutation } from 'vuex-class';
-import { State as topoState} from '@/store/modules/topology';
-import Topo from './topo.vue';
-import TopoChart from './topo-chart.vue';
-import DependencySankey from './dependency-sankey.vue';
-import ChartLine from './chart-line.vue';
+ import { State as topoState } from '@/store/modules/topology';
+ import Topo from './topo.vue';
+ import TopoChart from './topo-chart.vue';
+ import DependencySankey from './dependency-sankey.vue';
+ import ChartLine from './chart-line.vue';
-@Component({
- components: {
- Topo, ChartLine, TopoChart, DependencySankey,
- },
-})
-export default class TopoInstanceDependency extends Vue {
- @Getter('durationTime') private durationTime: any;
- @State('rocketTopo') private stateTopo!: topoState;
- @State('rocketDashboard') private rocketDashboard: any;
- @Getter('intervalTime') private intervalTime: any;
- @Mutation('rocketTopo/SET_INSTANCE_DEPEDENCE_TYPE') private SET_MODE_STATUS: any;
- @Action('rocketTopo/GET_INSTANCE_DEPENDENCY_METRICS') private GET_INSTANCE_DEPENDENCY_METRICS: any;
+ @Component({
+ components: {
+ Topo,
+ ChartLine,
+ TopoChart,
+ DependencySankey,
+ },
+ })
+ export default class TopoInstanceDependency extends Vue {
+ @Getter('durationTime') private durationTime: any;
+ @State('rocketTopo') private stateTopo!: topoState;
+ @State('rocketDashboard') private rocketDashboard: any;
+ @Getter('intervalTime') private intervalTime: any;
+ @Mutation('rocketTopo/SET_INSTANCE_DEPEDENCE_TYPE')
+ private SET_MODE_STATUS: any;
+ @Action('rocketTopo/GET_INSTANCE_DEPENDENCY_METRICS')
+ private GET_INSTANCE_DEPENDENCY_METRICS: any;
- private showInfo: boolean = true;
+ private showInfo: boolean = true;
- private setMode(mode: string) {
- this.GET_INSTANCE_DEPENDENCY_METRICS({
- ...this.stateTopo.selectedInstanceCall,
- durationTime: this.durationTime,
- mode,
- });
+ private setMode(mode: string) {
+ this.GET_INSTANCE_DEPENDENCY_METRICS({
+ ...this.stateTopo.selectedInstanceCall,
+ durationTime: this.durationTime,
+ mode,
+ });
+ }
}
-}
-
</script>
<style lang="scss">
.rk-topo-instance-dependency {
height: 100%;
display: flex;
flex-direction: row;
- &>:first-child {
+ & > :first-child {
line-height: 400px;
text-align: center;
width: 100%;
diff --git a/src/views/components/topology/topo-select.vue b/src/views/components/topology/topo-select.vue
index df2e417..ef97771 100644
--- a/src/views/components/topology/topo-select.vue
+++ b/src/views/components/topology/topo-select.vue
@@ -1,122 +1,149 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
- <div class="rk-topo-bar-select cp flex-h" v-clickout="() => { visible = false;search = '';}" :class="{'active':visible}">
+ <div
+ class="rk-topo-bar-select cp flex-h"
+ v-clickout="
+ () => {
+ visible = false;
+ search = '';
+ }
+ "
+ :class="{ active: visible }"
+ >
<div class="rk-topo-bar-i flex-h" @click="visible = !visible">
<div class="mr-15 rk-topo-bar-i-text">
- <div class="sm grey">{{title}}</div>
- <div class="ell" v-tooltip:right.ellipsis="current.label || ''">{{current.label}}</div>
+ <div class="sm grey">{{ title }}</div>
+ <div class="ell" v-tooltip:right.ellipsis="current.label || ''">
+ {{ current.label }}
+ </div>
</div>
- <svg class="icon lg trans" :style="`transform: rotate(${visible?180:0}deg)`">
+ <svg
+ class="icon lg trans"
+ :style="`transform: rotate(${visible ? 180 : 0}deg)`"
+ >
<use xlink:href="#arrow-down"></use>
</svg>
</div>
<div class="rk-topo-sel" v-if="visible">
<div>
- <input type="text" class="rk-topo-sel-search" v-model="search">
+ <input type="text" class="rk-topo-sel-search" v-model="search" />
<svg class="icon sm close" @click="search = ''" v-if="search">
<use xlink:href="#clear"></use>
</svg>
</div>
<div class="rk-topo-opt-wrapper scroll_hide">
- <div class="rk-topo-opt ell" @click="handleSelect(i)" :class="{'active':i.key === current.key}" v-for="i in filterData" :key="i.key">{{i.label}}</div>
+ <div
+ class="rk-topo-opt ell"
+ @click="handleSelect(i)"
+ :class="{ active: i.key === current.key }"
+ v-for="i in filterData"
+ :key="i.key"
+ >
+ {{ i.label }}
+ </div>
</div>
</div>
</div>
</template>
<script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator';
-@Component
-export default class TopoSelect extends Vue {
- @Prop() public data!: any;
- @Prop() public current!: any;
- @Prop() public title!: string;
- @Prop() public icon!: string;
- public search: string = '';
- public visible: boolean = false;
- get filterData() {
- return this.data.filter((i: any) => i.label.toUpperCase().indexOf(this.search.toUpperCase()) !== -1);
+ import { Vue, Component, Prop } from 'vue-property-decorator';
+ @Component
+ export default class TopoSelect extends Vue {
+ @Prop() public data!: any;
+ @Prop() public current!: any;
+ @Prop() public title!: string;
+ @Prop() public icon!: string;
+ public search: string = '';
+ public visible: boolean = false;
+ get filterData() {
+ return this.data.filter(
+ (i: any) =>
+ i.label.toUpperCase().indexOf(this.search.toUpperCase()) !== -1,
+ );
+ }
+ public handleOpen() {
+ this.visible = true;
+ }
+ public handleSelect(i: any) {
+ this.$emit('onChoose', i);
+ this.visible = false;
+ }
}
- public handleOpen() {
- this.visible = true;
- }
- public handleSelect(i: any) {
- this.$emit('onChoose', i);
- this.visible = false;
- }
-}
</script>
<style lang="scss" scoped>
-.rk-topo-bar-select {
- position: relative;
- z-index: 1;
- height: 40px;
- justify-content: space-between;
- .sm{ line-height: 12px;}
- .icon { flex-shrink: 0};
-}
-.rk-topo-bar-i-text{
- width: 100%;
-}
-.rk-topo-bar-i {
- height: 100%;
- width: 100%;
- padding: 5px 15px;
- &.active,&:hover{
- background-color: #40454e;
+ .rk-topo-bar-select {
+ position: relative;
+ z-index: 1;
+ height: 40px;
+ justify-content: space-between;
+ .sm {
+ line-height: 12px;
+ }
+ .icon {
+ flex-shrink: 0;
+ }
}
-}
-.rk-topo-sel{
- position: absolute;
- top: 40px;
- box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
- background-color: #252a2f;
- width: 100%;
- border-radius: 0 0 3px 3px;
- .close{
+ .rk-topo-bar-i-text {
+ width: 100%;
+ }
+ .rk-topo-bar-i {
+ height: 100%;
+ width: 100%;
+ padding: 5px 15px;
+ &.active,
+ &:hover {
+ background-color: #40454e;
+ }
+ }
+ .rk-topo-sel {
position: absolute;
- right: 10px;
- top: 12px;
- opacity: 0.6;
- &:hover{opacity: 1;}
+ top: 40px;
+ box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
+ background-color: #252a2f;
+ width: 100%;
+ border-radius: 0 0 3px 3px;
+ .close {
+ position: absolute;
+ right: 10px;
+ top: 12px;
+ opacity: 0.6;
+ &:hover {
+ opacity: 1;
+ }
+ }
}
-}
-.rk-topo-opt{
- padding: 7px 15px;
- &.active,&:hover{
- background-color: #40454e;
+ .rk-topo-opt {
+ padding: 7px 15px;
+ &.active,
+ &:hover {
+ background-color: #40454e;
+ }
}
-}
-.rk-topo-sel-search{
- width: calc(100% - 4px);
- border:0;
- background-color: #333840;
- color: #eee;
- outline: 0;
- padding: 7px 25px 7px 10px;
- margin: 2px;
- border-radius: 3px;
-}
-.rk-topo-opt-wrapper{
- overflow: auto;
- max-height: 200px;
- padding-bottom: 2px;
-}
+ .rk-topo-sel-search {
+ width: calc(100% - 4px);
+ border: 0;
+ background-color: #333840;
+ color: #eee;
+ outline: 0;
+ padding: 7px 25px 7px 10px;
+ margin: 2px;
+ border-radius: 3px;
+ }
+ .rk-topo-opt-wrapper {
+ overflow: auto;
+ max-height: 200px;
+ padding-bottom: 2px;
+ }
</style>
diff --git a/src/views/components/topology/topo-services.vue b/src/views/components/topology/topo-services.vue
index 73d4899..1a08893 100644
--- a/src/views/components/topology/topo-services.vue
+++ b/src/views/components/topology/topo-services.vue
@@ -1,23 +1,17 @@
-/**
-* Licensed to the Apache Software Foundation (ASF) under one or more
-* contributor license agreements. See the NOTICE file distributed with
-* this work for additional information regarding copyright ownership.
-* The ASF licenses this file to You under the Apache License, Version 2.0
-* (the "License"); you may not use this file except in compliance with
-* the License. You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
<div class="link-topo-aside-box" style="padding:0;">
- <TopoSelect :current="service" :data="services" @onChoose="handleChange"/>
+ <TopoSelect :current="service" :data="services" @onChoose="handleChange" />
</div>
</template>
<script lang="ts">
@@ -28,12 +22,12 @@
import { Action, Getter } from 'vuex-class';
import TopoSelect from './topo-select.vue';
- @Component({components: {TopoSelect}})
+ @Component({ components: { TopoSelect } })
export default class TopoServices extends Vue {
@Getter('durationTime') public durationTime: any;
@Action('rocketTopo/GET_TOPO') public GET_TOPO: any;
- private services = [{key: 0, label: 'All services'}];
- private service = {key: 0, label: 'All services'};
+ private services = [{ key: 0, label: 'All services' }];
+ private service = { key: 0, label: 'All services' };
private fetchData() {
Axios.post('/graphql', {
@@ -49,10 +43,8 @@
},
}).then((res: AxiosResponse) => {
this.services = res.data.data.services
- ?
- [{key: 0, label: 'All services'}, ...res.data.data.services]
- :
- [{key: 0, label: 'All services'}];
+ ? [{ key: 0, label: 'All services' }, ...res.data.data.services]
+ : [{ key: 0, label: 'All services' }];
});
}
@@ -66,7 +58,10 @@
private handleChange(i: any) {
this.service = i;
- this.GET_TOPO({serviceId: this.service.key, duration: this.durationTime});
+ this.GET_TOPO({
+ serviceId: this.service.key,
+ duration: this.durationTime,
+ });
}
private created() {
diff --git a/src/views/components/topology/topo.vue b/src/views/components/topology/topo.vue
index b7cfea8..d8715ab 100644
--- a/src/views/components/topology/topo.vue
+++ b/src/views/components/topology/topo.vue
@@ -1,675 +1,680 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
<div class="micro-topo-chart"></div>
</template>
<script lang="js">
- import CssHelper from '@/utils/cssHelper';
- import * as d3 from 'd3';
- import d3tip from 'd3-tip';
- /* tslint:disable */
- const diagonal = d3.linkHorizontal()
- .x(function (d) { return d.x })
- .y(function (d) { return d.y });
- const diagonalvertical = d3.linkVertical()
- .x(function (d) { return d.x })
- .y(function (d) { return d.y });
+ import CssHelper from '@/utils/cssHelper';
+ import * as d3 from 'd3';
+ import d3tip from 'd3-tip';
+ /* tslint:disable */
+ const diagonal = d3.linkHorizontal()
+ .x(function (d) { return d.x })
+ .y(function (d) { return d.y });
+ const diagonalvertical = d3.linkVertical()
+ .x(function (d) { return d.x })
+ .y(function (d) { return d.y });
-export default {
- props: {
- datas: {
- type: Object,
- default() {
- return {
- nodes: [],
- calls: [],
- };
+ export default {
+ props: {
+ datas: {
+ type: Object,
+ default() {
+ return {
+ nodes: [],
+ calls: [],
+ };
+ },
},
},
- },
- data() {
- return {
- LOCAL: require('./assets/Local2.png'),
- ARMERIA: require('./assets/ARMERIA.png'),
- CUBE: require('./assets/cube22.png'),
- CUBEERROR: require('./assets/cube21.png'),
- USER: require('./assets/USER.png'),
- UNKNOWN: require('./assets/UNKNOWN.png'),
- UNKNOWNCLOUD: require('./assets/UNKNOWN_CLOUD.png'),
- UNDEFINED: require('./assets/UNDEFINED.png'),
- KAFKA: require('./assets/KAFKALOGO.png'),
- KAFKACONSUMER: require('./assets/KAFKALOGO.png'),
- H2:require('./assets/H2.png'),
- REDIS:require('./assets/REDIS.png'),
- TOMCAT: require('./assets/TOMCAT.png'),
- HTTPCLIENT: require('./assets/HTTPCLIENT.png'),
- DUBBO: require('./assets/DUBBO.png'),
- MOTAN: require('./assets/MOTAN.png'),
- RESIN: require('./assets/RESIN.png'),
- OKHTTP: require('./assets/OKHTTP.png'),
- SPRINGMVC: require('./assets/SPRINGMVC.png'),
- STRUTS2: require('./assets/STRUTS2.png'),
- NUTZMVC: require('./assets/SPRINGMVC.png'),
- NUTZHTTP: require('./assets/HTTPCLIENT.png'),
- JETTY:require('./assets/JETTY.png'),
- JETTYSERVER: require('./assets/JETTYSERVER.png'),
- GRPC: require('./assets/GRPC.png'),
- ORACLE: require('./assets/ORACLE.png'),
- MYSQL: require('./assets/MYSQL.png'),
- MYSQLGROUP: require('./assets/MYSQL.png'),
- MSSQLSERVER: require('./assets/MYSQL.png'),
- MSSQLSERVERGROUP: require('./assets/MYSQL.png'),
- MONGODB: require('./assets/MONGODB.png'),
- MONGODBGROUP: require('./assets/MONGODB.png'),
- ACTIVEMQ: require('./assets/ACTIVEMQ.png'),
- ELASTICSEARCH: require('./assets/ELASTICSEARCH.png'),
- FEIGNDEFAULTHTTP: require('./assets/FEIGNDEFAULTHTTP.png'),
- HPROSE: require('./assets/HPROSE.png'),
- HPROSE: require('./assets/POSTGRESQL.png'),
- RESIN: require('./assets/RESIN.png'),
- RABBITMQ: require('./assets/RABBITMQ.png'),
- SOFARPC: require('./assets/SOFARPC.png'),
- ROCKETMQ: require('./assets/ROCKETMQ.png'),
- ROCKETMQCONSUMER: require('./assets/ROCKETMQ.png'),
- HTTP: require('./assets/HTTPCLIENT.png'),
- RESTEASY: require('./assets/RESTEASY.png'),
- SOLR: require('./assets/SOLR.png'),
- ZOOKEEPER: require('./assets/ZOOKEEPER.png'),
- CASSANDRA: require('./assets/CASSANDRA.png'),
- LIGHT4J: require('./assets/LIGHT4J.png'),
- PULSAR: require('./assets/PULSAR.png'),
- SERVICECOMB: require('./assets/SERVICECOMB.png'),
- SERVICECOMBMESHER: require('./assets/SERVICECOMBMESHER.png'),
- SERVICECOMBSERVICECENTER: require('./assets/SERVICECOMBSERVICECENTER.png'),
- PLAY: require('./assets/PLAY.png'),
- width: 600,
- height: 600,
- force: '',
- svg: '',
- graph: '',
- link: '',
- node: '',
- zoom: '',
- };
- },
- beforeDestroy() {
- this.tip.hide({}, this);
- window.removeEventListener('resize', this.resize);
- d3.selectAll('.d3-tip-grey').remove();
- // this.$store.commit('skywalking/setCurrentNode', []);
- },
- mounted() {
- window.addEventListener('resize', this.resize);
- this.tip = d3tip()
- .attr('class', 'd3-tip-grey')
- .offset([-8, 0])
- .html(d => {
- return `
- <div class="mb-5"><span class="grey">${this.$t('cpm')}: </span>${d.cpm}</div>
- <div class="mb-5"><span class="grey">${this.$t('detectPoint')}: </span>${this.$store.state.rocketTopo.detectPoints.join(' | ')}</div>
- <div><span class="grey">${this.$t('latency')}: </span>${d.latency}</div>
- `});
- this.tipName = d3tip()
- .attr('class', 'd3-tip-grey')
- .offset([-8, 0])
- .html(d => {
- return `<div>${d.name}</div>`});
- this.height = this.$el.clientHeight;
- this.svg = d3
- .select(this.$el)
- .append('svg')
- .style('display','block')
- .attr('width', '100%')
- .attr('height', this.height);
- },
- watch: {
- 'datas.nodes': 'draw',
- },
- methods: {
- removeHoneycomb(that) {
- const appGovernTopoHoneycombFrames = d3.select('#app-govern-topo-honeycomb-frames');
- appGovernTopoHoneycombFrames.nodes().forEach((node) => {
- const childrenArray = Array.from(node.children).reverse();
- _.forEach(childrenArray, (ele, index) => {
- ele.classList.toggle('reverse');
- setTimeout(() => {
- ele.remove();
- }, 130 * index);
- });
- });
- setTimeout(() => {
- appGovernTopoHoneycombFrames.remove();
- }, 780);
+ data() {
+ return {
+ LOCAL: require('./assets/Local2.png'),
+ ARMERIA: require('./assets/ARMERIA.png'),
+ CUBE: require('./assets/cube22.png'),
+ CUBEERROR: require('./assets/cube21.png'),
+ USER: require('./assets/USER.png'),
+ UNKNOWN: require('./assets/UNKNOWN.png'),
+ UNKNOWNCLOUD: require('./assets/UNKNOWN_CLOUD.png'),
+ UNDEFINED: require('./assets/UNDEFINED.png'),
+ KAFKA: require('./assets/KAFKALOGO.png'),
+ KAFKACONSUMER: require('./assets/KAFKALOGO.png'),
+ H2:require('./assets/H2.png'),
+ REDIS:require('./assets/REDIS.png'),
+ TOMCAT: require('./assets/TOMCAT.png'),
+ HTTPCLIENT: require('./assets/HTTPCLIENT.png'),
+ DUBBO: require('./assets/DUBBO.png'),
+ MOTAN: require('./assets/MOTAN.png'),
+ RESIN: require('./assets/RESIN.png'),
+ OKHTTP: require('./assets/OKHTTP.png'),
+ SPRINGMVC: require('./assets/SPRINGMVC.png'),
+ STRUTS2: require('./assets/STRUTS2.png'),
+ NUTZMVC: require('./assets/SPRINGMVC.png'),
+ NUTZHTTP: require('./assets/HTTPCLIENT.png'),
+ JETTY:require('./assets/JETTY.png'),
+ JETTYSERVER: require('./assets/JETTYSERVER.png'),
+ GRPC: require('./assets/GRPC.png'),
+ ORACLE: require('./assets/ORACLE.png'),
+ MYSQL: require('./assets/MYSQL.png'),
+ MYSQLGROUP: require('./assets/MYSQL.png'),
+ MSSQLSERVER: require('./assets/MYSQL.png'),
+ MSSQLSERVERGROUP: require('./assets/MYSQL.png'),
+ MONGODB: require('./assets/MONGODB.png'),
+ MONGODBGROUP: require('./assets/MONGODB.png'),
+ ACTIVEMQ: require('./assets/ACTIVEMQ.png'),
+ ELASTICSEARCH: require('./assets/ELASTICSEARCH.png'),
+ FEIGNDEFAULTHTTP: require('./assets/FEIGNDEFAULTHTTP.png'),
+ HPROSE: require('./assets/HPROSE.png'),
+ HPROSE: require('./assets/POSTGRESQL.png'),
+ RESIN: require('./assets/RESIN.png'),
+ RABBITMQ: require('./assets/RABBITMQ.png'),
+ SOFARPC: require('./assets/SOFARPC.png'),
+ ROCKETMQ: require('./assets/ROCKETMQ.png'),
+ ROCKETMQCONSUMER: require('./assets/ROCKETMQ.png'),
+ HTTP: require('./assets/HTTPCLIENT.png'),
+ RESTEASY: require('./assets/RESTEASY.png'),
+ SOLR: require('./assets/SOLR.png'),
+ ZOOKEEPER: require('./assets/ZOOKEEPER.png'),
+ CASSANDRA: require('./assets/CASSANDRA.png'),
+ LIGHT4J: require('./assets/LIGHT4J.png'),
+ PULSAR: require('./assets/PULSAR.png'),
+ SERVICECOMB: require('./assets/SERVICECOMB.png'),
+ SERVICECOMBMESHER: require('./assets/SERVICECOMBMESHER.png'),
+ SERVICECOMBSERVICECENTER: require('./assets/SERVICECOMBSERVICECENTER.png'),
+ PLAY: require('./assets/PLAY.png'),
+ width: 600,
+ height: 600,
+ force: '',
+ svg: '',
+ graph: '',
+ link: '',
+ node: '',
+ zoom: '',
+ };
},
- draw(value, oldValue) {
- // Avoid unnecessary repetitive rendering
- const diffNodes = _.difference(_.sortBy(value, 'id'), _.sortBy(oldValue, 'id'));
- if(value && value.length > 0 && diffNodes && diffNodes.length <=0) {
- return;
- }
- const codeId = this.datas.nodes.map(i => i.id);
- for (let i = 0; i < this.datas.calls.length; i += 1) {
- const element = this.datas.calls[i];
- if(codeId.indexOf(element.target) === -1 ) {
- this.datas.calls[i].target = this.datas.calls[i].source;
+ beforeDestroy() {
+ this.tip.hide({}, this);
+ window.removeEventListener('resize', this.resize);
+ d3.selectAll('.d3-tip-grey').remove();
+ // this.$store.commit('skywalking/setCurrentNode', []);
+ },
+ mounted() {
+ window.addEventListener('resize', this.resize);
+ this.tip = d3tip()
+ .attr('class', 'd3-tip-grey')
+ .offset([-8, 0])
+ .html(d => {
+ return `
+ <div class="mb-5"><span class="grey">${this.$t('cpm')}: </span>${d.cpm}</div>
+ <div class="mb-5"><span class="grey">${this.$t('detectPoint')}: </span>${this.$store.state.rocketTopo.detectPoints.join(' | ')}</div>
+ <div><span class="grey">${this.$t('latency')}: </span>${d.latency}</div>
+ `});
+ this.tipName = d3tip()
+ .attr('class', 'd3-tip-grey')
+ .offset([-8, 0])
+ .html(d => {
+ return `<div>${d.name}</div>`});
+ this.height = this.$el.clientHeight;
+ this.svg = d3
+ .select(this.$el)
+ .append('svg')
+ .style('display','block')
+ .attr('width', '100%')
+ .attr('height', this.height);
+ },
+ watch: {
+ 'datas.nodes': 'draw',
+ },
+ methods: {
+ removeHoneycomb(that) {
+ const appGovernTopoHoneycombFrames = d3.select('#app-govern-topo-honeycomb-frames');
+ appGovernTopoHoneycombFrames.nodes().forEach((node) => {
+ const childrenArray = Array.from(node.children).reverse();
+ _.forEach(childrenArray, (ele, index) => {
+ ele.classList.toggle('reverse');
+ setTimeout(() => {
+ ele.remove();
+ }, 130 * index);
+ });
+ });
+ setTimeout(() => {
+ appGovernTopoHoneycombFrames.remove();
+ }, 780);
+ },
+ draw(value, oldValue) {
+ // Avoid unnecessary repetitive rendering
+ const diffNodes = _.difference(_.sortBy(value, 'id'), _.sortBy(oldValue, 'id'));
+ if(value && value.length > 0 && diffNodes && diffNodes.length <=0) {
+ return;
}
- }
- this.svg.select(`.graph_${this.datas.type || ''}`).remove();
- this.force = d3
- .forceSimulation(this.datas.nodes)
- .force('collide', d3.forceCollide().radius(() => 65))
- .force('yPos', d3.forceY().strength(1))
- .force('xPos', d3.forceX().strength(1))
- .force('charge', d3.forceManyBody().strength(-520))
- .force( 'link', d3.forceLink(this.datas.calls).id(d => d.id))
- .force('center', d3.forceCenter(window.innerWidth / 2 + 100, this.height / 2))
- .on('tick', this.tick)
- .stop();
- this.graph = this.svg.append('g').attr('class', `graph_${this.datas.type || ''}`);
- this.svg.call(this.getZoomBehavior(this.graph));
- this.graph.call(this.tip);
- this.graph.call(this.tipName);
- this.svg.on('click', (d, i) => {
- event.stopPropagation();
- event.preventDefault();
- this.$store.commit('rocketTopo/SET_NODE', {});
- this.$store.dispatch('rocketTopo/CLEAR_TOPO_INFO');
- that.tip.hide({}, this);
- this.toggleNode(this.node, d, false);
- this.toggleLine(this.line, d, false);
- this.toggleLine(this.lineNode, d, false);
- });
- this.defs = this.graph.append('defs');
- this.arrowMarker = this.defs
- .append('marker')
- .attr('id', 'arrow')
- .attr('markerUnits', 'strokeWidth')
- .attr('markerWidth', '12')
- .attr('markerHeight', '12')
- .attr('viewBox', '0 0 12 12')
- .attr('refX', '11')
- .attr('refY', '6')
- .attr('orient', 'auto');
- const arrow_path = 'M2,2 L10,6 L2,10 L3,6 L2,2';
- this.arrowMarker.append('path').attr('d', arrow_path).attr('fill', '#217EF2');
- this.gnode = this.graph.append('g').selectAll('.node');
- const that = this;
- this.node = this.gnode.data(this.datas.nodes)
- .enter()
- .append('g')
- .call(d3.drag()
- .on('start', this.dragstart)
- .on('drag', this.dragged)
- .on('end', function(d, i) {
- that.tipName.show(d, this);
- }))
- .on('mouseover', function(d, i) {
- that.tipName.show(d, this);
- })
- .on('mouseout', function(d, i) {
- that.tipName.hide(d, this);
- })
- .on('click', function(d, i) {
+ const codeId = this.datas.nodes.map(i => i.id);
+ for (let i = 0; i < this.datas.calls.length; i += 1) {
+ const element = this.datas.calls[i];
+ if(codeId.indexOf(element.target) === -1 ) {
+ this.datas.calls[i].target = this.datas.calls[i].source;
+ }
+ }
+ this.svg.select(`.graph_${this.datas.type || ''}`).remove();
+ this.force = d3
+ .forceSimulation(this.datas.nodes)
+ .force('collide', d3.forceCollide().radius(() => 65))
+ .force('yPos', d3.forceY().strength(1))
+ .force('xPos', d3.forceX().strength(1))
+ .force('charge', d3.forceManyBody().strength(-520))
+ .force( 'link', d3.forceLink(this.datas.calls).id(d => d.id))
+ .force('center', d3.forceCenter(window.innerWidth / 2 + 100, this.height / 2))
+ .on('tick', this.tick)
+ .stop();
+ this.graph = this.svg.append('g').attr('class', `graph_${this.datas.type || ''}`);
+ this.svg.call(this.getZoomBehavior(this.graph));
+ this.graph.call(this.tip);
+ this.graph.call(this.tipName);
+ this.svg.on('click', (d, i) => {
event.stopPropagation();
- // active selected nodes and disable another nodes of non-relations
- that.clickNodesToUpdate(d, this);
- if (d.isReal) {
- // show some entrance icons for service nodes, such as alarm, instance, endpoint
- that.dashboardEntranceIcons(d, this);
- }
+ event.preventDefault();
+ this.$store.commit('rocketTopo/SET_NODE', {});
+ this.$store.dispatch('rocketTopo/CLEAR_TOPO_INFO');
+ that.tip.hide({}, this);
+ this.toggleNode(this.node, d, false);
+ this.toggleLine(this.line, d, false);
+ this.toggleLine(this.lineNode, d, false);
});
- this.node
- .append('image')
- .attr('width', 49)
- .attr('height', 49)
- .attr('x', 2)
- .attr('y', 10)
- .attr('style', 'cursor: move;')
- .attr('xlink:href',d => {
- const type = d.type;
- if( d.sla < 98 ) {
- return this.CUBEERROR;
- }
- return this.CUBE;
- });
- this.node
- .append('image')
- .attr('width',32)
- .attr('height', 32)
- .attr('x', 6)
- .attr('y', -10)
- .attr('style', 'opacity: 0.5;')
- .attr('xlink:href',this.LOCAL);
- this.node
- .append('image')
- .attr('width', 18)
- .attr('height', 18)
- .attr('x', 13)
- .attr('y', -7)
- .attr('xlink:href',d => {
- if( !d.type || d.type === 'N/A') {
- return this['UNDEFINED']
- }
- return this[d.type.toUpperCase().replace('-','')];
- });
- this.node
- .append('text')
- .attr('class', 'node-text')
- .attr('text-anchor', 'middle')
- .attr('x', 22)
- .attr('y', 70)
- // .text(d => d.name)
- .text(d => d.name.length > 20 ? `${d.name.substring(0, 20)}...`: d.name)
- this.glink = this.graph.append('g').selectAll('.link');
- this.link = this.glink.data(this.datas.calls).enter();
- this.line = this.link.append('path').attr('class', 'link')
- .attr('stroke-dasharray', '13 7')
- .attr('stroke', d => d.cpm ? '#217EF25f' : '#6a6d7777');
- const handleSelectLine = function(d, i) {
- that.tip.hide({}, this);
- }
- this.lineNode = this.link.append('rect').attr('class', 'link-node cp')
- .attr('width', 10)
- .attr('height', 10)
- .attr('rx', 5)
- .attr('ry', 5)
- .attr('fill', d => d.cpm ? '#217EF299' : '#6a6d7799')
- .on('click', function(d, i) {
- that.clickLinkNodes(d, this);
- });
- d3.timeout(() => {
- for (
- let i = 0,
- n = Math.ceil(
- Math.log(this.force.alphaMin()) /
- Math.log(1 - this.force.alphaDecay())
- );
- i < n;
- i += 1
- ) {
- this.force.tick();
- this.tick();
+ this.defs = this.graph.append('defs');
+ this.arrowMarker = this.defs
+ .append('marker')
+ .attr('id', 'arrow')
+ .attr('markerUnits', 'strokeWidth')
+ .attr('markerWidth', '12')
+ .attr('markerHeight', '12')
+ .attr('viewBox', '0 0 12 12')
+ .attr('refX', '11')
+ .attr('refY', '6')
+ .attr('orient', 'auto');
+ const arrow_path = 'M2,2 L10,6 L2,10 L3,6 L2,2';
+ this.arrowMarker.append('path').attr('d', arrow_path).attr('fill', '#217EF2');
+ this.gnode = this.graph.append('g').selectAll('.node');
+ const that = this;
+ this.node = this.gnode.data(this.datas.nodes)
+ .enter()
+ .append('g')
+ .call(d3.drag()
+ .on('start', this.dragstart)
+ .on('drag', this.dragged)
+ .on('end', function(d, i) {
+ that.tipName.show(d, this);
+ }))
+ .on('mouseover', function(d, i) {
+ that.tipName.show(d, this);
+ })
+ .on('mouseout', function(d, i) {
+ that.tipName.hide(d, this);
+ })
+ .on('click', function(d, i) {
+ event.stopPropagation();
+ // active selected nodes and disable another nodes of non-relations
+ that.clickNodesToUpdate(d, this);
+ if (d.isReal) {
+ // show some entrance icons for service nodes, such as alarm, instance, endpoint
+ that.dashboardEntranceIcons(d, this);
+ }
+ });
+ this.node
+ .append('image')
+ .attr('width', 49)
+ .attr('height', 49)
+ .attr('x', 2)
+ .attr('y', 10)
+ .attr('style', 'cursor: move;')
+ .attr('xlink:href',d => {
+ const type = d.type;
+ if( d.sla < 98 ) {
+ return this.CUBEERROR;
+ }
+ return this.CUBE;
+ });
+ this.node
+ .append('image')
+ .attr('width',32)
+ .attr('height', 32)
+ .attr('x', 6)
+ .attr('y', -10)
+ .attr('style', 'opacity: 0.5;')
+ .attr('xlink:href',this.LOCAL);
+ this.node
+ .append('image')
+ .attr('width', 18)
+ .attr('height', 18)
+ .attr('x', 13)
+ .attr('y', -7)
+ .attr('xlink:href',d => {
+ if( !d.type || d.type === 'N/A') {
+ return this['UNDEFINED']
+ }
+ return this[d.type.toUpperCase().replace('-','')];
+ });
+ this.node
+ .append('text')
+ .attr('class', 'node-text')
+ .attr('text-anchor', 'middle')
+ .attr('x', 22)
+ .attr('y', 70)
+ // .text(d => d.name)
+ .text(d => d.name.length > 20 ? `${d.name.substring(0, 20)}...`: d.name)
+ this.glink = this.graph.append('g').selectAll('.link');
+ this.link = this.glink.data(this.datas.calls).enter();
+ this.line = this.link.append('path').attr('class', 'link')
+ .attr('stroke-dasharray', '13 7')
+ .attr('stroke', d => d.cpm ? '#217EF25f' : '#6a6d7777');
+ const handleSelectLine = function(d, i) {
+ that.tip.hide({}, this);
}
- });
- },
- clickLinkNodes(d, that) {
- this.$store.commit('rocketTopo/SET_NODE', {});
- this.$store.dispatch('rocketTopo/CLEAR_TOPO_INFO');
- this.$store.commit('rocketTopo/SET_MODE', d.detectPoints);
- event.stopPropagation();
- this.tip.hide({}, that);
- this.tip.show(d, that);
- this.$store.dispatch(this.$store.state.rocketTopo.mode ? 'rocketTopo/GET_TOPO_SERVICE_INFO' : 'rocketTopo/GET_TOPO_CLIENT_INFO', {...d,duration: this.$store.getters.durationTime});
- this.$store.commit('rocketTopo/SET_CALLBACK', () => {
+ this.lineNode = this.link.append('rect').attr('class', 'link-node cp')
+ .attr('width', 10)
+ .attr('height', 10)
+ .attr('rx', 5)
+ .attr('ry', 5)
+ .attr('fill', d => d.cpm ? '#217EF299' : '#6a6d7799')
+ .on('click', function(d, i) {
+ that.clickLinkNodes(d, this);
+ });
+ d3.timeout(() => {
+ for (
+ let i = 0,
+ n = Math.ceil(
+ Math.log(this.force.alphaMin()) /
+ Math.log(1 - this.force.alphaDecay())
+ );
+ i < n;
+ i += 1
+ ) {
+ this.force.tick();
+ this.tick();
+ }
+ });
+ },
+ clickLinkNodes(d, that) {
+ this.$store.commit('rocketTopo/SET_NODE', {});
+ this.$store.dispatch('rocketTopo/CLEAR_TOPO_INFO');
+ this.$store.commit('rocketTopo/SET_MODE', d.detectPoints);
+ event.stopPropagation();
this.tip.hide({}, that);
this.tip.show(d, that);
this.$store.dispatch(this.$store.state.rocketTopo.mode ? 'rocketTopo/GET_TOPO_SERVICE_INFO' : 'rocketTopo/GET_TOPO_CLIENT_INFO', {...d,duration: this.$store.getters.durationTime});
- })
- },
- clickNodesToUpdate(d, that) {
- this.tip.hide({}, that);
- this.node.attr('class', '');
- d3.select(that).attr('class', 'node-active');
- const copyD = JSON.parse(JSON.stringify(d));
- delete copyD.x;
- delete copyD.y;
- delete copyD.vx;
- delete copyD.vy;
- delete copyD.fx;
- delete copyD.fy;
- delete copyD.index;
- this.$store.dispatch('rocketTopo/CLEAR_TOPO_INFO');
- this.$store.commit('rocketTopo/SET_NODE', copyD);
- this.toggleNode(this.node, d, true);
- this.toggleLine(this.line, d, true);
- this.toggleLine(this.lineNode, d, true);
- },
- dashboardEntranceIcons(d, context) {
- const that = this;
- const honeycombFrames = d3.select('#honeycomb-selector_honeycomb-frames');
- const appGovernTopoHoneycombFrames = this.graph.append('g')
- .attr('id', 'app-govern-topo-honeycomb-frames')
- .attr('style', honeycombFrames.attr('style'))
- .attr('stroke', honeycombFrames.attr('stroke')).html(honeycombFrames.html())
- .on('mouseleave', function () {
+ this.$store.commit('rocketTopo/SET_CALLBACK', () => {
+ this.tip.hide({}, that);
+ this.tip.show(d, that);
+ this.$store.dispatch(this.$store.state.rocketTopo.mode ? 'rocketTopo/GET_TOPO_SERVICE_INFO' : 'rocketTopo/GET_TOPO_CLIENT_INFO', {...d,duration: this.$store.getters.durationTime});
+ })
+ },
+ clickNodesToUpdate(d, that) {
+ this.tip.hide({}, that);
+ this.node.attr('class', '');
+ d3.select(that).attr('class', 'node-active');
+ const copyD = JSON.parse(JSON.stringify(d));
+ delete copyD.x;
+ delete copyD.y;
+ delete copyD.vx;
+ delete copyD.vy;
+ delete copyD.fx;
+ delete copyD.fy;
+ delete copyD.index;
+ this.$store.dispatch('rocketTopo/CLEAR_TOPO_INFO');
+ this.$store.commit('rocketTopo/SET_NODE', copyD);
+ this.toggleNode(this.node, d, true);
+ this.toggleLine(this.line, d, true);
+ this.toggleLine(this.lineNode, d, true);
+ },
+ dashboardEntranceIcons(d, context) {
+ const that = this;
+ const honeycombFrames = d3.select('#honeycomb-selector_honeycomb-frames');
+ const appGovernTopoHoneycombFrames = this.graph.append('g')
+ .attr('id', 'app-govern-topo-honeycomb-frames')
+ .attr('style', honeycombFrames.attr('style'))
+ .attr('stroke', honeycombFrames.attr('stroke')).html(honeycombFrames.html())
+ .on('mouseleave', function () {
+ that.removeHoneycomb(that);
+ });
+ const nodeTranslate = CssHelper.translateSerialization(context.getAttribute('transform'));
+ const appGovernTopoHoneycombFramesTranslate = CssHelper.matrixSerialization(honeycombFrames.attr('transform'));
+ appGovernTopoHoneycombFramesTranslate.tx = nodeTranslate.x - 83;
+ appGovernTopoHoneycombFramesTranslate.ty = nodeTranslate.y + 72;
+ appGovernTopoHoneycombFrames.attr('transform', CssHelper.matrixDeserialization(appGovernTopoHoneycombFramesTranslate));
+
+ that.$store.commit('rocketTopo/SET_HONEYCOMB_NODE', d);
+
+ d3.selectAll('#honeycomb-selector_honeycomb-group-top-left').on('click', () => {
+ that.$store.commit('SET_CURRENT_SERVICE', { key: d.id, label: d.name });
+ that.$store.commit('rocketTopo/SET_SHOW_DIALOG', 'endpoint');
that.removeHoneycomb(that);
});
- const nodeTranslate = CssHelper.translateSerialization(context.getAttribute('transform'));
- const appGovernTopoHoneycombFramesTranslate = CssHelper.matrixSerialization(honeycombFrames.attr('transform'));
- appGovernTopoHoneycombFramesTranslate.tx = nodeTranslate.x - 83;
- appGovernTopoHoneycombFramesTranslate.ty = nodeTranslate.y + 72;
- appGovernTopoHoneycombFrames.attr('transform', CssHelper.matrixDeserialization(appGovernTopoHoneycombFramesTranslate));
-
- that.$store.commit('rocketTopo/SET_HONEYCOMB_NODE', d);
-
- d3.selectAll('#honeycomb-selector_honeycomb-group-top-left').on('click', () => {
- that.$store.commit('SET_CURRENT_SERVICE', { key: d.id, label: d.name });
- that.$store.commit('rocketTopo/SET_SHOW_DIALOG', 'endpoint');
- that.removeHoneycomb(that);
- });
- d3.selectAll('#honeycomb-selector_honeycomb-group-below-left').on('click', () => {
- that.$store.commit('SET_CURRENT_SERVICE', { key: d.id, label: d.name });
- that.$store.commit('rocketTopo/SET_SHOW_DIALOG', 'instance');
- that.removeHoneycomb(that);
- });
- d3.selectAll('#honeycomb-selector_honeycomb-group-top-right').on('click', () => {
- that.$store.commit('rocketTopo/SET_SHOW_DIALOG', 'alarm');
- that.removeHoneycomb(that);
- });
- d3.selectAll('#honeycomb-selector_honeycomb-group-below-right').on('click', () => {
- this.$store.commit('rocketTopo/SET_SHOW_DIALOG', 'trace');
- that.removeHoneycomb(that);
- });
+ d3.selectAll('#honeycomb-selector_honeycomb-group-below-left').on('click', () => {
+ that.$store.commit('SET_CURRENT_SERVICE', { key: d.id, label: d.name });
+ that.$store.commit('rocketTopo/SET_SHOW_DIALOG', 'instance');
+ that.removeHoneycomb(that);
+ });
+ d3.selectAll('#honeycomb-selector_honeycomb-group-top-right').on('click', () => {
+ that.$store.commit('rocketTopo/SET_SHOW_DIALOG', 'alarm');
+ that.removeHoneycomb(that);
+ });
+ d3.selectAll('#honeycomb-selector_honeycomb-group-below-right').on('click', () => {
+ this.$store.commit('rocketTopo/SET_SHOW_DIALOG', 'trace');
+ that.removeHoneycomb(that);
+ });
+ },
+ isLinkNode(currNode, node) {
+ if (currNode.id === node.id) {
+ return true;
+ }
+ return this.datas.calls.filter(i =>
+ (i.source.id === currNode.id || i.target.id === currNode.id) &&
+ (i.source.id === node.id || i.target.id === node.id)
+ ).length;
+ },
+ toggleNode(nodeCircle, currNode, isHover) {
+ if (isHover) {
+ nodeCircle.sort((a, b) => a.id === currNode.id ? 1 : -1);
+ nodeCircle
+ .style('opacity', .2)
+ .filter(node => this.isLinkNode(currNode, node))
+ .style('opacity', 1);
+ } else {
+ nodeCircle.style('opacity', 1);
+ }
},
- isLinkNode(currNode, node) {
- if (currNode.id === node.id) {
- return true;
- }
- return this.datas.calls.filter(i =>
- (i.source.id === currNode.id || i.target.id === currNode.id) &&
- (i.source.id === node.id || i.target.id === node.id)
- ).length;
- },
- toggleNode(nodeCircle, currNode, isHover) {
+ toggleLine(linkLine, currNode, isHover) {
if (isHover) {
- nodeCircle.sort((a, b) => a.id === currNode.id ? 1 : -1);
- nodeCircle
- .style('opacity', .2)
- .filter(node => this.isLinkNode(currNode, node))
- .style('opacity', 1);
- } else {
- nodeCircle.style('opacity', 1);
- }
-},
-toggleLine(linkLine, currNode, isHover) {
- if (isHover) {
- linkLine
- .style('opacity', .05)
- .style('animation', 'none')
- .filter(link => this.isLinkLine(currNode, link))
- .style('opacity', 1)
- .style('animation', 'dash 1s linear infinite');
- // .classed('link-active', true);
- } else {
linkLine
+ .style('opacity', .05)
+ .style('animation', 'none')
+ .filter(link => this.isLinkLine(currNode, link))
.style('opacity', 1)
.style('animation', 'dash 1s linear infinite');
- // .classed('link-active', false);
- }
- },
-isLinkLine(node, link) {
- return link.source.id == node.id || link.target.id == node.id;
-},
-toggleLineText(lineText, currNode, isHover) {
- if (isHover) {
- lineText
- .style('fill-opacity', link => this.isLinkLine(currNode, link) ? 1.0 : 0.0);
+ // .classed('link-active', true);
} else {
+ linkLine
+ .style('opacity', 1)
+ .style('animation', 'dash 1s linear infinite');
+ // .classed('link-active', false);
+ }
+ },
+ isLinkLine(node, link) {
+ return link.source.id == node.id || link.target.id == node.id;
+ },
+ toggleLineText(lineText, currNode, isHover) {
+ if (isHover) {
lineText
- .style('fill-opacity', '1.0');
- }
- },
- toggleMarker(marker, currNode, isHover) {
- if (isHover) {
- marker.filter(link => this.isLinkLine(currNode, link))
- .style('transform', 'scale(1.5)');
- } else {
- marker
- .attr('refX', nodeConf.radius.Company)
- .style('transform', 'scale(1)');
+ .style('fill-opacity', link => this.isLinkLine(currNode, link) ? 1.0 : 0.0);
+ } else {
+ lineText
+ .style('fill-opacity', '1.0');
}
},
- resize() {
- this.svg.attr('height', document.body.clientHeight - 50);
- },
- tick() {
- this.line
- .attr('d', d => `M${d.source.x} ${d.source.y} Q ${(d.source.x + d.target.x)/2} ${(d.target.y + d.source.y)/2 - 80} ${d.target.x} ${d.target.y}`);
- this.lineNode.attr('transform', d => `translate(${(d.source.x + d.target.x)/2 - 3},${(d.target.y + d.source.y)/2 - 43})`);
- // this.linkText.attr('transform',d =>`translate(${(d.source.x + d.target.x) / 2},${(d.source.y + d.target.y) / 2})`);
- this.node.attr('transform', d => `translate(${d.x - 22},${d.y - 22})`);
- },
- getZoomBehavior(g) {
- const that = this;
- return d3
- .zoom()
- .scaleExtent([0.3, 10])
- .on('zoom', () => {
- that.tip.hide({}, this);
- that.tipName.hide({}, this);
- g.attr(
- 'transform',
- `translate(${d3.event.transform.x},${d3.event.transform.y})scale(${
- d3.event.transform.k
- })`
- );
+ toggleMarker(marker, currNode, isHover) {
+ if (isHover) {
+ marker.filter(link => this.isLinkLine(currNode, link))
+ .style('transform', 'scale(1.5)');
+ } else {
+ marker
+ .attr('refX', nodeConf.radius.Company)
+ .style('transform', 'scale(1)');
+ }
+ },
+ resize() {
+ this.svg.attr('height', document.body.clientHeight - 50);
+ },
+ tick() {
+ this.line
+ .attr('d', d => `M${d.source.x} ${d.source.y} Q ${(d.source.x + d.target.x)/2} ${(d.target.y + d.source.y)/2 - 80} ${d.target.x} ${d.target.y}`);
+ this.lineNode.attr('transform', d => `translate(${(d.source.x + d.target.x)/2 - 3},${(d.target.y + d.source.y)/2 - 43})`);
+ // this.linkText.attr('transform',d =>`translate(${(d.source.x + d.target.x) / 2},${(d.source.y + d.target.y) / 2})`);
+ this.node.attr('transform', d => `translate(${d.x - 22},${d.y - 22})`);
+ },
+ getZoomBehavior(g) {
+ const that = this;
+ return d3
+ .zoom()
+ .scaleExtent([0.3, 10])
+ .on('zoom', () => {
+ that.tip.hide({}, this);
+ that.tipName.hide({}, this);
+ g.attr(
+ 'transform',
+ `translate(${d3.event.transform.x},${d3.event.transform.y})scale(${
+ d3.event.transform.k
+ })`
+ );
+ });
+ },
+ dragstart(d) {
+ const that = this;
+ that.tipName.hide({}, this);
+ this.node._groups[0].forEach(d => {
+ d.__data__.fx = d.__data__.x;
+ d.__data__.fy = d.__data__.y;
});
+ if (!d3.event.active) {
+ this.force.alphaTarget(0.01).restart();
+ }
+ d3.event.sourceEvent.stopPropagation();
+ },
+ dragged(d) {
+ const that = this;
+ that.tipName.hide({}, this);
+ d.fx = d3.event.x;
+ d.fy = d3.event.y;
+ },
+ dragended() {
+ if (!d3.event.active) {
+ this.force.alphaTarget(0);
+ }
+ },
},
- dragstart(d) {
- const that = this;
- that.tipName.hide({}, this);
- this.node._groups[0].forEach(d => {
- d.__data__.fx = d.__data__.x;
- d.__data__.fy = d.__data__.y;
- });
- if (!d3.event.active) {
- this.force.alphaTarget(0.01).restart();
- }
- d3.event.sourceEvent.stopPropagation();
- },
- dragged(d) {
- const that = this;
- that.tipName.hide({}, this);
- d.fx = d3.event.x;
- d.fy = d3.event.y;
- },
- dragended() {
- if (!d3.event.active) {
- this.force.alphaTarget(0);
- }
- },
- },
-};
+ };
</script>
<style lang="scss">
-.micro-topo-chart{
- height: 100%;
- width: 100%;
- .node-name {
- cursor: move;
- font-size:14px;
- fill: #ddd;
- }
- .link {
- stroke-linecap: round;
- stroke-width: 1.3px !important;
- fill: none;
- animation: topo-dash 1s linear infinite !important;
- }
- @keyframes topo-dash {
- from {
- stroke-dashoffset: 20;
+ .micro-topo-chart {
+ height: 100%;
+ width: 100%;
+ .node-name {
+ cursor: move;
+ font-size: 14px;
+ fill: #ddd;
}
- to {
- stroke-dashoffset: 0;
+ .link {
+ stroke-linecap: round;
+ stroke-width: 1.3px !important;
+ fill: none;
+ animation: topo-dash 1s linear infinite !important;
}
- }
- .node-text{
- font-family: "Lato","Source Han Sans CN", "Microsoft YaHei", sans-serif;
- fill: #ddd;
- font-size:11px;
- opacity: 0.8;
- }
- .link-text {
- font-family: "Lato","Source Han Sans CN", "Microsoft YaHei", sans-serif;
- fill: #ddd;
- font-size:11px;
- opacity: 0.8;
- }
- .node {
- cursor: move;
- fill: #333840;
- stroke-width: 0;
- }
- .link-node{
- stroke-width: 6px;
- stroke: rgba(255, 255, 255, 0);
- }
+ @keyframes topo-dash {
+ from {
+ stroke-dashoffset: 20;
+ }
+ to {
+ stroke-dashoffset: 0;
+ }
+ }
+ .node-text {
+ font-family: 'Lato', 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
+ fill: #ddd;
+ font-size: 11px;
+ opacity: 0.8;
+ }
+ .link-text {
+ font-family: 'Lato', 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
+ fill: #ddd;
+ font-size: 11px;
+ opacity: 0.8;
+ }
+ .node {
+ cursor: move;
+ fill: #333840;
+ stroke-width: 0;
+ }
+ .link-node {
+ stroke-width: 6px;
+ stroke: rgba(255, 255, 255, 0);
+ }
- #honeycomb-selector_honeycomb-group-background {
- opacity: 0.6;
- animation: honeycombXTopBackground 0.1s linear;
- }
+ #honeycomb-selector_honeycomb-group-background {
+ opacity: 0.6;
+ animation: honeycombXTopBackground 0.1s linear;
+ }
- #honeycomb-selector_honeycomb-group-top {
- opacity: 1;
- animation: honeycombXTop 0.2s linear;
- }
+ #honeycomb-selector_honeycomb-group-top {
+ opacity: 1;
+ animation: honeycombXTop 0.2s linear;
+ }
- #honeycomb-selector_honeycomb-group-top-right {
- opacity: 1;
- animation: honeycombXTop 0.3s linear;
- }
+ #honeycomb-selector_honeycomb-group-top-right {
+ opacity: 1;
+ animation: honeycombXTop 0.3s linear;
+ }
- #honeycomb-selector_honeycomb-group-below-right {
- opacity: 1;
- animation: honeycombXTop 0.4s linear;
- }
+ #honeycomb-selector_honeycomb-group-below-right {
+ opacity: 1;
+ animation: honeycombXTop 0.4s linear;
+ }
- #honeycomb-selector_honeycomb-group-below {
- opacity: 1;
- animation: honeycombXTop 0.5s linear;
- }
+ #honeycomb-selector_honeycomb-group-below {
+ opacity: 1;
+ animation: honeycombXTop 0.5s linear;
+ }
- #honeycomb-selector_honeycomb-group-below-left {
- opacity: 1;
- animation: honeycombXTop 0.6s linear;
- }
+ #honeycomb-selector_honeycomb-group-below-left {
+ opacity: 1;
+ animation: honeycombXTop 0.6s linear;
+ }
- #honeycomb-selector_honeycomb-group-top-left {
- opacity: 1;
- animation: honeycombXTop 0.7s linear;
- }
+ #honeycomb-selector_honeycomb-group-top-left {
+ opacity: 1;
+ animation: honeycombXTop 0.7s linear;
+ }
- #honeycomb-selector_honeycomb-group-background.reverse {
- opacity: 0;
- animation: honeycombXTopBackgroundReverse 0.7s linear;
- }
+ #honeycomb-selector_honeycomb-group-background.reverse {
+ opacity: 0;
+ animation: honeycombXTopBackgroundReverse 0.7s linear;
+ }
- #honeycomb-selector_honeycomb-group-top.reverse {
- opacity: 0;
- animation: honeycombXTopReverse 0.6s linear;
- }
+ #honeycomb-selector_honeycomb-group-top.reverse {
+ opacity: 0;
+ animation: honeycombXTopReverse 0.6s linear;
+ }
- #honeycomb-selector_honeycomb-group-top-right.reverse {
- opacity: 0;
- animation: honeycombXTopReverse 0.5s linear;
- }
+ #honeycomb-selector_honeycomb-group-top-right.reverse {
+ opacity: 0;
+ animation: honeycombXTopReverse 0.5s linear;
+ }
- #honeycomb-selector_honeycomb-group-below-right.reverse {
- opacity: 0;
- animation: honeycombXTopReverse 0.4s linear;
- }
+ #honeycomb-selector_honeycomb-group-below-right.reverse {
+ opacity: 0;
+ animation: honeycombXTopReverse 0.4s linear;
+ }
- #honeycomb-selector_honeycomb-group-below.reverse {
- opacity: 0;
- animation: honeycombXTopReverse 0.3s linear;
- }
+ #honeycomb-selector_honeycomb-group-below.reverse {
+ opacity: 0;
+ animation: honeycombXTopReverse 0.3s linear;
+ }
- #honeycomb-selector_honeycomb-group-below-left.reverse {
- opacity: 0;
- animation: honeycombXTopReverse 0.2s linear;
- }
+ #honeycomb-selector_honeycomb-group-below-left.reverse {
+ opacity: 0;
+ animation: honeycombXTopReverse 0.2s linear;
+ }
- #honeycomb-selector_honeycomb-group-top-left.reverse {
- opacity: 0;
- animation: honeycombXTopReverse 0.1s linear;
- }
+ #honeycomb-selector_honeycomb-group-top-left.reverse {
+ opacity: 0;
+ animation: honeycombXTopReverse 0.1s linear;
+ }
- #honeycomb-selector_honeycomb-select-top-left {
- opacity: 0.1;
- }
+ #honeycomb-selector_honeycomb-select-top-left {
+ opacity: 0.1;
+ }
- /*#honeycomb-selector_honeycomb-group-top:hover,*/
- #honeycomb-selector_honeycomb-group-top-right:hover,
+ /*#honeycomb-selector_honeycomb-group-top:hover,*/
+ #honeycomb-selector_honeycomb-group-top-right:hover,
/*#honeycomb-selector_honeycomb-group-below:hover,*/
#honeycomb-selector_honeycomb-group-below-left:hover,
#honeycomb-selector_honeycomb-group-top-left:hover {
- fill: #0ae;
- }
+ fill: #0ae;
+ }
- #honeycomb-selector_honeycomb-group-below-right:hover {
- fill: #24c1ab;
- }
+ #honeycomb-selector_honeycomb-group-below-right:hover {
+ fill: #24c1ab;
+ }
- @keyframes honeycombXTop {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
- }
+ @keyframes honeycombXTop {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+ }
- @keyframes honeycombXTopBackground {
- from {
- opacity: 0;
- }
- to {
- opacity: 0.2;
- }
- }
+ @keyframes honeycombXTopBackground {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 0.2;
+ }
+ }
- @keyframes honeycombXTopReverse {
- from {
- opacity: 1;
- }
- to {
- opacity: 0;
- }
- }
+ @keyframes honeycombXTopReverse {
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+ }
- @keyframes honeycombXTopBackgroundReverse {
- from {
- opacity: 1;
+ @keyframes honeycombXTopBackgroundReverse {
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+ }
+
+ #honeycomb-selector_honeycomb-group-top
+ #honeycomb-selector_honeycomb-text-top,
+ #honeycomb-selector_honeycomb-group-top-right
+ #honeycomb-selector_honeycomb-text-top-right,
+ #honeycomb-selector_honeycomb-group-below-right
+ #honeycomb-selector_honeycomb-text-below-right,
+ #honeycomb-selector_honeycomb-group-below
+ #honeycomb-selector_honeycomb-text-below,
+ #honeycomb-selector_honeycomb-group-below-left
+ #honeycomb-selector_honeycomb-text-below-left,
+ #honeycomb-selector_honeycomb-group-top-left
+ #honeycomb-selector_honeycomb-text-top-left {
+ display: none;
+ }
+
+ #honeycomb-selector_honeycomb-group-top:hover
+ #honeycomb-selector_honeycomb-text-top,
+ #honeycomb-selector_honeycomb-group-top-right:hover
+ #honeycomb-selector_honeycomb-text-top-right,
+ #honeycomb-selector_honeycomb-group-below-right:hover
+ #honeycomb-selector_honeycomb-text-below-right,
+ #honeycomb-selector_honeycomb-group-below:hover
+ #honeycomb-selector_honeycomb-text-below,
+ #honeycomb-selector_honeycomb-group-below-left:hover
+ #honeycomb-selector_honeycomb-text-below-left,
+ #honeycomb-selector_honeycomb-group-top-left:hover
+ #honeycomb-selector_honeycomb-text-top-left {
+ display: block;
+ }
}
- to {
- opacity: 0;
- }
- }
-
- #honeycomb-selector_honeycomb-group-top #honeycomb-selector_honeycomb-text-top,
- #honeycomb-selector_honeycomb-group-top-right #honeycomb-selector_honeycomb-text-top-right,
- #honeycomb-selector_honeycomb-group-below-right #honeycomb-selector_honeycomb-text-below-right,
- #honeycomb-selector_honeycomb-group-below #honeycomb-selector_honeycomb-text-below,
- #honeycomb-selector_honeycomb-group-below-left #honeycomb-selector_honeycomb-text-below-left,
- #honeycomb-selector_honeycomb-group-top-left #honeycomb-selector_honeycomb-text-top-left {
- display: none;
- }
-
- #honeycomb-selector_honeycomb-group-top:hover #honeycomb-selector_honeycomb-text-top,
- #honeycomb-selector_honeycomb-group-top-right:hover #honeycomb-selector_honeycomb-text-top-right,
- #honeycomb-selector_honeycomb-group-below-right:hover #honeycomb-selector_honeycomb-text-below-right,
- #honeycomb-selector_honeycomb-group-below:hover #honeycomb-selector_honeycomb-text-below,
- #honeycomb-selector_honeycomb-group-below-left:hover #honeycomb-selector_honeycomb-text-below-left,
- #honeycomb-selector_honeycomb-group-top-left:hover #honeycomb-selector_honeycomb-text-top-left {
- display: block;
- }
-
-}
</style>
diff --git a/src/views/components/trace/d3-trace-tree.js b/src/views/components/trace/d3-trace-tree.js
index c824c3e..79284ab 100644
--- a/src/views/components/trace/d3-trace-tree.js
+++ b/src/views/components/trace/d3-trace-tree.js
@@ -36,32 +36,45 @@
this.tip = d3tip()
.attr('class', 'd3-tip')
.offset([-8, 0])
- .html(d => `
+ .html(
+ (d) => `
<div class="mb-5">${d.data.label}</div>
- ${d.data.dur?'<div class="sm">SelfDuration: ' + d.data.dur + 'ms</div>' : ''}
- ${(d.data.endTime - d.data.startTime)?'<div class="sm">TotalDuration: ' + (d.data.endTime - d.data.startTime) + 'ms</div>' : ''}
- `);
- this.svg = this.body.append('g').attr('transform', d => `translate(120, 0)`);
- this.svg.call(this.tip);
+ ${
+ d.data.dur
+ ? '<div class="sm">SelfDuration: ' + d.data.dur + 'ms</div>'
+ : ''
+ }
+ ${
+ d.data.endTime - d.data.startTime
+ ? '<div class="sm">TotalDuration: ' +
+ (d.data.endTime - d.data.startTime) +
+ 'ms</div>'
+ : ''
+ }
+ `,
+ );
+ this.svg = this.body
+ .append('g')
+ .attr('transform', (d) => `translate(120, 0)`);
+ this.svg.call(this.tip);
}
resize() {
// reset svg size
this.width = this.el.clientWidth;
this.height = this.el.clientHeight - 28;
this.body.attr('width', this.width).attr('height', this.height);
- this.body.select('g').attr('transform', d => `translate(160, 0)`);
+ this.body.select('g').attr('transform', (d) => `translate(160, 0)`);
// reset zoom function for translate
- const transform = d3.zoomTransform(0)
- .translate(0, 0);
+ const transform = d3.zoomTransform(0).translate(0, 0);
d3.zoom().transform(this.body, transform);
}
init(data, row) {
this.treemap = d3.tree().size([row.length * 35, this.width]);
this.row = row;
this.data = data;
- this.min = d3.min(this.row.map(i => i.startTime));
- this.max = d3.max(this.row.map(i => i.endTime - this.min));
- this.list = Array.from(new Set(this.row.map(i => i.serviceCode)));
+ this.min = d3.min(this.row.map((i) => i.startTime));
+ this.max = d3.max(this.row.map((i) => i.endTime - this.min));
+ this.list = Array.from(new Set(this.row.map((i) => i.serviceCode)));
this.xScale = d3
.scaleLinear()
.range([0, 100])
@@ -72,30 +85,30 @@
.interpolator(d3.interpolateCool);
this.body.call(this.getZoomBehavior(this.svg));
- this.root = d3.hierarchy(this.data, d => d.children);
+ this.root = d3.hierarchy(this.data, (d) => d.children);
this.root.x0 = this.height / 2;
this.root.y0 = 0;
this.topSlow = [];
this.topChild = [];
const that = this;
this.root.children.forEach(collapse);
- this.topSlowMax = this.topSlow.sort((a,b) => b - a)[0];
- this.topSlowMin = this.topSlow.sort((a,b) => b - a)[4];
- this.topChildMax = this.topChild.sort((a,b) => b - a)[0];
- this.topChildMin = this.topChild.sort((a,b) => b - a)[4];
+ this.topSlowMax = this.topSlow.sort((a, b) => b - a)[0];
+ this.topSlowMin = this.topSlow.sort((a, b) => b - a)[4];
+ this.topChildMax = this.topChild.sort((a, b) => b - a)[0];
+ this.topChildMin = this.topChild.sort((a, b) => b - a)[4];
this.update(this.root);
// Collapse the node and all it's children
function collapse(d) {
- if(d.children) {
+ if (d.children) {
let dur = d.data.endTime - d.data.startTime;
- d.children.forEach(i => {
- dur -= (i.data.endTime - i.data.startTime);
- })
+ d.children.forEach((i) => {
+ dur -= i.data.endTime - i.data.startTime;
+ });
d.dur = dur < 0 ? 0 : dur;
that.topSlow.push(dur);
that.topChild.push(d.children.length);
d.childrenLength = d.children.length;
- d.children.forEach(collapse)
+ d.children.forEach(collapse);
}
}
}
@@ -106,166 +119,212 @@
const that = this;
var treeData = this.treemap(this.root);
var nodes = treeData.descendants(),
- links = treeData.descendants().slice(1);
+ links = treeData.descendants().slice(1);
- nodes.forEach(function(d){ d.y = d.depth * 140});
-
-
- var node = this.svg.selectAll('g.node')
- .data(nodes, function(d) {return d.id || (d.id = ++i); });
-
- var nodeEnter = node.enter().append('g')
- .attr('class', 'node')
- .attr('cursor', 'pointer')
- .attr("transform", function(d) {
- return "translate(" + source.y0 + "," + source.x0 + ")";
- }).on('mouseover', function(d, i) {
- that.tip.show(d, this);
- if(!that.timeUpdate) {return;}
- const _node = that.timeUpdate._groups[0].filter(group => group.__data__.id === (i+1));
- if(_node.length){
- that.timeTip.show(d, _node[0].children[1]);
- }
- })
- .on('mouseout', function(d, i) {
- that.tip.hide(d, this);
- if(!that.timeUpdate) {return;}
- const _node = that.timeUpdate._groups[0].filter(group => group.__data__.id === (i+1));
- if(_node.length){
- that.timeTip.hide(d, _node[0].children[1]);
- }
- })
- .on('click', function(d) {
- d3.event.stopPropagation();
- that.scope.handleSelectSpan(d);
+ nodes.forEach(function(d) {
+ d.y = d.depth * 140;
});
- nodeEnter.append('circle')
+ var node = this.svg.selectAll('g.node').data(nodes, function(d) {
+ return d.id || (d.id = ++i);
+ });
+
+ var nodeEnter = node
+ .enter()
+ .append('g')
+ .attr('class', 'node')
+ .attr('cursor', 'pointer')
+ .attr('transform', function(d) {
+ return 'translate(' + source.y0 + ',' + source.x0 + ')';
+ })
+ .on('mouseover', function(d, i) {
+ that.tip.show(d, this);
+ if (!that.timeUpdate) {
+ return;
+ }
+ const _node = that.timeUpdate._groups[0].filter(
+ (group) => group.__data__.id === i + 1,
+ );
+ if (_node.length) {
+ that.timeTip.show(d, _node[0].children[1]);
+ }
+ })
+ .on('mouseout', function(d, i) {
+ that.tip.hide(d, this);
+ if (!that.timeUpdate) {
+ return;
+ }
+ const _node = that.timeUpdate._groups[0].filter(
+ (group) => group.__data__.id === i + 1,
+ );
+ if (_node.length) {
+ that.timeTip.hide(d, _node[0].children[1]);
+ }
+ })
+ .on('click', function(d) {
+ d3.event.stopPropagation();
+ that.scope.handleSelectSpan(d);
+ });
+
+ nodeEnter
+ .append('circle')
.attr('class', 'node')
.attr('r', 1e-6)
- .style("fill", d => d._children ? this.sequentialScale(this.list.indexOf(d.data.serviceCode)) : "#fff")
- .attr('stroke', d => this.sequentialScale(this.list.indexOf(d.data.serviceCode)))
- .attr('stroke-width', 2.5)
+ .style('fill', (d) =>
+ d._children
+ ? this.sequentialScale(this.list.indexOf(d.data.serviceCode))
+ : '#fff',
+ )
+ .attr('stroke', (d) =>
+ this.sequentialScale(this.list.indexOf(d.data.serviceCode)),
+ )
+ .attr('stroke-width', 2.5);
- nodeEnter.append('text')
+ nodeEnter
+ .append('text')
.attr('font-size', 11)
- .attr("dy", "-0.5em")
- .attr("x", function(d) {
- return d.children || d._children ? -15 : 15;
- })
- .attr("text-anchor", function(d) {
- return d.children || d._children ? "end" : "start";
- })
- .text(d => d.data.label.length > 19 ? (d.data.isError?'◉ ': '') + d.data.label.slice(0, 19) + '...' : (d.data.isError?'◉ ': '') + d.data.label)
- .style("fill", d => !d.data.isError? '#3d444f': '#E54C17');
- nodeEnter.append('text')
- .attr('class','node-text')
- .attr("x", function(d) {
+ .attr('dy', '-0.5em')
+ .attr('x', function(d) {
return d.children || d._children ? -15 : 15;
})
- .attr("dy", "1em")
+ .attr('text-anchor', function(d) {
+ return d.children || d._children ? 'end' : 'start';
+ })
+ .text((d) =>
+ d.data.label.length > 19
+ ? (d.data.isError ? '◉ ' : '') + d.data.label.slice(0, 19) + '...'
+ : (d.data.isError ? '◉ ' : '') + d.data.label,
+ )
+ .style('fill', (d) => (!d.data.isError ? '#3d444f' : '#E54C17'));
+ nodeEnter
+ .append('text')
+ .attr('class', 'node-text')
+ .attr('x', function(d) {
+ return d.children || d._children ? -15 : 15;
+ })
+ .attr('dy', '1em')
.attr('fill', '#bbb')
- .attr("text-anchor", function(d) {
- return d.children || d._children ? "end" : "start";
+ .attr('text-anchor', function(d) {
+ return d.children || d._children ? 'end' : 'start';
})
.style('font-size', '10px')
.text(
- d =>
+ (d) =>
`${d.data.layer || ''}${
d.data.component ? '-' + d.data.component : d.data.component || ''
- }`
+ }`,
);
- nodeEnter
+ nodeEnter
.append('rect')
.attr('rx', 1)
.attr('ry', 1)
.attr('height', 2)
.attr('width', 100)
.attr('x', function(d) {
- return d.children || d._children ? "-110" : "10";
+ return d.children || d._children ? '-110' : '10';
})
.attr('y', -1)
.style('fill', '#00000020');
- nodeEnter
+ nodeEnter
.append('rect')
.attr('rx', 1)
.attr('ry', 1)
.attr('height', 2)
- .attr('width', d => {
+ .attr('width', (d) => {
if (!d.data.endTime || !d.data.startTime) return 0;
- return this.xScale(d.data.endTime- d.data.startTime) + 1 || 0;
+ return this.xScale(d.data.endTime - d.data.startTime) + 1 || 0;
})
- .attr('x', d => {
- if (!d.data.endTime || !d.data.startTime) { return 0; }
- if( d.children || d._children ) {
- return -110 + this.xScale(d.data.startTime - this.min)
+ .attr('x', (d) => {
+ if (!d.data.endTime || !d.data.startTime) {
+ return 0;
}
- return 10 + this.xScale(d.data.startTime - this.min)
+ if (d.children || d._children) {
+ return -110 + this.xScale(d.data.startTime - this.min);
+ }
+ return 10 + this.xScale(d.data.startTime - this.min);
})
.attr('y', -1)
- .style( 'fill', d => this.sequentialScale(this.list.indexOf(d.data.serviceCode)));
- var nodeUpdate = nodeEnter.merge(node);
- this.nodeUpdate = nodeUpdate;
- nodeUpdate.transition()
- .duration(600)
- .attr('transform', function(d) {
- return 'translate(' + d.y + ',' + d.x + ')';
- });
+ .style('fill', (d) =>
+ this.sequentialScale(this.list.indexOf(d.data.serviceCode)),
+ );
+ var nodeUpdate = nodeEnter.merge(node);
+ this.nodeUpdate = nodeUpdate;
+ nodeUpdate
+ .transition()
+ .duration(600)
+ .attr('transform', function(d) {
+ return 'translate(' + d.y + ',' + d.x + ')';
+ });
- // Update the node attributes and style
- nodeUpdate.select('circle.node')
- .attr('r', 5)
- .style("fill", (d) => d._children ? this.sequentialScale(this.list.indexOf(d.data.serviceCode)) : "#fff" )
- .attr('cursor', 'pointer')
- .on('click', d => {
- d3.event.stopPropagation();
- click(d);
- });
+ // Update the node attributes and style
+ nodeUpdate
+ .select('circle.node')
+ .attr('r', 5)
+ .style('fill', (d) =>
+ d._children
+ ? this.sequentialScale(this.list.indexOf(d.data.serviceCode))
+ : '#fff',
+ )
+ .attr('cursor', 'pointer')
+ .on('click', (d) => {
+ d3.event.stopPropagation();
+ click(d);
+ });
- // Remove any exiting nodes
- var nodeExit = node.exit().transition()
+ // Remove any exiting nodes
+ var nodeExit = node
+ .exit()
+ .transition()
.duration(600)
.attr('transform', function(d) {
return 'translate(' + source.y + ',' + source.x + ')';
})
.remove();
- nodeExit.select('circle')
- .attr('r', 1e-6);
+ nodeExit.select('circle').attr('r', 1e-6);
- nodeExit.select('text')
- .style('fill-opacity', 1e-6);
+ nodeExit.select('text').style('fill-opacity', 1e-6);
- var link = this.svg.selectAll('path.tree-link')
- .data(links, function(d) { return d.id; })
- .style('stroke-width', 1.5);
-
- var linkEnter = link.enter().insert('path', "g")
- .attr("class", "tree-link")
- .attr('d', function(d){
- var o = {x: source.x0, y: source.y0}
- return diagonal(o, o)
+ var link = this.svg
+ .selectAll('path.tree-link')
+ .data(links, function(d) {
+ return d.id;
})
- .style('stroke-width', 1.5);
+ .style('stroke-width', 1.5);
- var linkUpdate = linkEnter.merge(link);
- linkUpdate.transition()
- .duration(600)
- .attr('d', function(d){ return diagonal(d, d.parent) });
+ var linkEnter = link
+ .enter()
+ .insert('path', 'g')
+ .attr('class', 'tree-link')
+ .attr('d', function(d) {
+ var o = { x: source.x0, y: source.y0 };
+ return diagonal(o, o);
+ })
+ .style('stroke-width', 1.5);
- var linkExit = link.exit().transition()
+ var linkUpdate = linkEnter.merge(link);
+ linkUpdate
+ .transition()
.duration(600)
.attr('d', function(d) {
- var o = {x: source.x, y: source.y}
- return diagonal(o, o)
+ return diagonal(d, d.parent);
+ });
+
+ var linkExit = link
+ .exit()
+ .transition()
+ .duration(600)
+ .attr('d', function(d) {
+ var o = { x: source.x, y: source.y };
+ return diagonal(o, o);
})
- .style('stroke-width', 1.5)
+ .style('stroke-width', 1.5)
.remove();
- nodes.forEach(function(d){
- d.x0 = d.x;
- d.y0 = d.y;
- });
+ nodes.forEach(function(d) {
+ d.x0 = d.x;
+ d.y0 = d.y;
+ });
function diagonal(s, d) {
return `M ${s.y} ${s.x}
C ${(s.y + d.y) / 2} ${s.x}, ${(s.y + d.y) / 2} ${d.x},
@@ -273,13 +332,13 @@
}
function click(d) {
if (d.children) {
- d._children = d.children;
- d.children = null;
- } else {
- d.children = d._children;
- d._children = null;
- }
- that.update(d);
+ d._children = d.children;
+ d.children = null;
+ } else {
+ d.children = d._children;
+ d._children = null;
+ }
+ that.update(d);
}
}
setDefault() {
@@ -287,33 +346,39 @@
d3.selectAll('.time-inner-duration').style('opacity', 0);
d3.selectAll('.trace-tree-node-selfdur').style('opacity', 0);
d3.selectAll('.trace-tree-node-selfchild').style('opacity', 0);
- this.nodeUpdate._groups[0].forEach(i => {
+ this.nodeUpdate._groups[0].forEach((i) => {
d3.select(i).style('opacity', 1);
- })
+ });
}
getTopChild() {
d3.selectAll('.time-inner').style('opacity', 1);
d3.selectAll('.time-inner-duration').style('opacity', 0);
d3.selectAll('.trace-tree-node-selfdur').style('opacity', 0);
d3.selectAll('.trace-tree-node-selfchild').style('opacity', 1);
- this.nodeUpdate._groups[0].forEach(i => {
- d3.select(i).style('opacity', .2);
- if(i.__data__.data.children.length >= this.topChildMin && i.__data__.data.children.length <= this.topChildMax){
+ this.nodeUpdate._groups[0].forEach((i) => {
+ d3.select(i).style('opacity', 0.2);
+ if (
+ i.__data__.data.children.length >= this.topChildMin &&
+ i.__data__.data.children.length <= this.topChildMax
+ ) {
d3.select(i).style('opacity', 1);
}
- })
+ });
}
getTopSlow() {
d3.selectAll('.time-inner').style('opacity', 0);
d3.selectAll('.time-inner-duration').style('opacity', 1);
d3.selectAll('.trace-tree-node-selfchild').style('opacity', 0);
d3.selectAll('.trace-tree-node-selfdur').style('opacity', 1);
- this.nodeUpdate._groups[0].forEach(i => {
- d3.select(i).style('opacity', .2);
- if(i.__data__.data.dur >= this.topSlowMin && i.__data__.data.dur <= this.topSlowMax){
+ this.nodeUpdate._groups[0].forEach((i) => {
+ d3.select(i).style('opacity', 0.2);
+ if (
+ i.__data__.data.dur >= this.topSlowMin &&
+ i.__data__.data.dur <= this.topSlowMax
+ ) {
d3.select(i).style('opacity', 1);
}
- })
+ });
}
getZoomBehavior(g) {
return d3
@@ -322,7 +387,9 @@
.on('zoom', () => {
g.attr(
'transform',
- `translate(${d3.event.transform.x + 120},${d3.event.transform.y})scale(${d3.event.transform.k})`
+ `translate(${d3.event.transform.x + 120},${
+ d3.event.transform.y
+ })scale(${d3.event.transform.k})`,
);
});
}
diff --git a/src/views/components/trace/d3-trace.js b/src/views/components/trace/d3-trace.js
index a7535b3..3ded882 100644
--- a/src/views/components/trace/d3-trace.js
+++ b/src/views/components/trace/d3-trace.js
@@ -44,11 +44,23 @@
this.tip = d3tip()
.attr('class', 'd3-tip')
.offset([-8, 0])
- .html(d => `
+ .html(
+ (d) => `
<div class="mb-5">${d.data.label}</div>
- ${d.data.dur?'<div class="sm">SelfDuration: ' + d.data.dur + 'ms</div>' : ''}
- ${(d.data.endTime - d.data.startTime)?'<div class="sm">TotalDuration: ' + (d.data.endTime - d.data.startTime) + 'ms</div>' : ''}
- `);
+ ${
+ d.data.dur
+ ? '<div class="sm">SelfDuration: ' + d.data.dur + 'ms</div>'
+ : ''
+ }
+ ${
+ d.data.endTime - d.data.startTime
+ ? '<div class="sm">TotalDuration: ' +
+ (d.data.endTime - d.data.startTime) +
+ 'ms</div>'
+ : ''
+ }
+ `,
+ );
this.svg.call(this.tip);
}
diagonal(d) {
@@ -61,30 +73,30 @@
d3.select('.trace-xaxis').remove();
this.row = row;
this.data = data;
- this.min = d3.min(this.row.map(i => i.startTime));
- this.max = d3.max(this.row.map(i => i.endTime - this.min));
- this.list = Array.from(new Set(this.row.map(i => i.serviceCode)));
+ this.min = d3.min(this.row.map((i) => i.startTime));
+ this.max = d3.max(this.row.map((i) => i.endTime - this.min));
+ this.list = Array.from(new Set(this.row.map((i) => i.serviceCode)));
this.xScale = d3
.scaleLinear()
.range([0, this.width * 0.387])
.domain([0, this.max]);
- this.xAxis = d3.axisTop(this.xScale).tickFormat(d => {
- if(d === 0) return 0;
- if(d>=1000) return d/1000 + 's';
+ this.xAxis = d3.axisTop(this.xScale).tickFormat((d) => {
+ if (d === 0) return 0;
+ if (d >= 1000) return d / 1000 + 's';
return d;
});
- this.svg.attr('height', (this.row.length+1) * this.barHeight);
+ this.svg.attr('height', (this.row.length + 1) * this.barHeight);
this.svg
- .append('g')
- .attr('class','trace-xaxis')
-
- .attr('transform', `translate(${this.width * 0.618 -20 },${30})`)
- .call(this.xAxis);
+ .append('g')
+ .attr('class', 'trace-xaxis')
+
+ .attr('transform', `translate(${this.width * 0.618 - 20},${30})`)
+ .call(this.xAxis);
this.sequentialScale = d3
.scaleSequential()
.domain([0, this.list.length + 1])
.interpolator(d3.interpolateCool);
- this.root = d3.hierarchy(this.data, d => d.children);
+ this.root = d3.hierarchy(this.data, (d) => d.children);
this.root.x0 = 0;
this.root.y0 = 0;
}
@@ -106,13 +118,13 @@
const that = this;
const nodes = this.root.descendants();
let index = -1;
- this.root.eachBefore(n => {
+ this.root.eachBefore((n) => {
n.x = ++index * this.barHeight + 24;
n.y = n.depth * 12;
});
const node = this.svg
.selectAll('.trace-node')
- .data(nodes, d => d.id || (d.id = ++this.i));
+ .data(nodes, (d) => d.id || (d.id = ++this.i));
const nodeEnter = node
.enter()
.append('g')
@@ -131,8 +143,8 @@
nodeEnter
.append('rect')
.attr('height', 42)
- .attr('ry',2)
- .attr('rx',2)
+ .attr('ry', 2)
+ .attr('rx', 2)
.attr('y', -22)
.attr('x', 20)
.attr('width', '100%')
@@ -142,92 +154,90 @@
.attr('x', 13)
.attr('y', 5)
.attr('fill', '#E54C17')
- .html(d => d.data.isError?'◉': '')
- nodeEnter
+ .html((d) => (d.data.isError ? '◉' : ''));
+ nodeEnter
.append('text')
- .attr('class','node-text')
+ .attr('class', 'node-text')
.attr('x', 35)
.attr('y', -6)
.attr('fill', '#333')
- .text( d =>
- {
- if(d.data.label === 'TRACE_ROOT') {
- return '';
- }
- return d.data.label.length > 40
- ? `${d.data.label.slice(0, 40)}...`
- : `${d.data.label}`
+ .text((d) => {
+ if (d.data.label === 'TRACE_ROOT') {
+ return '';
}
- );
+ return d.data.label.length > 40
+ ? `${d.data.label.slice(0, 40)}...`
+ : `${d.data.label}`;
+ });
nodeEnter
.append('text')
- .attr('class','node-text')
+ .attr('class', 'node-text')
.attr('x', 35)
.attr('y', 12)
.attr('fill', '#ccc')
.style('font-size', '11px')
.text(
- d =>
+ (d) =>
`${d.data.layer || ''} ${
d.data.component ? '- ' + d.data.component : d.data.component || ''
- }`
+ }`,
);
nodeEnter
.append('rect')
.attr('rx', 2)
.attr('ry', 2)
.attr('height', 4)
- .attr('width', d => {
+ .attr('width', (d) => {
if (!d.data.endTime || !d.data.startTime) return 0;
- return this.xScale(d.data.endTime- d.data.startTime)+1 || 0;
+ return this.xScale(d.data.endTime - d.data.startTime) + 1 || 0;
})
- .attr('x', d =>
+ .attr('x', (d) =>
!d.data.endTime || !d.data.startTime
? 0
- : (this.width * 0.618 -
- 20 -
- d.y +
- this.xScale(d.data.startTime - this.min)) || 0
+ : this.width * 0.618 -
+ 20 -
+ d.y +
+ this.xScale(d.data.startTime - this.min) || 0,
)
.attr('y', -2)
.style(
'fill',
- d => `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`
+ (d) => `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`,
);
nodeEnter
.transition()
.duration(400)
- .attr('transform', d => `translate(${d.y},${d.x})`)
+ .attr('transform', (d) => `translate(${d.y},${d.x})`)
.style('opacity', 1);
nodeEnter
.append('circle')
.attr('r', 3)
.style('cursor', 'pointer')
.attr('stroke-width', 2.5)
- .attr('fill', d =>
+ .attr('fill', (d) =>
d._children
? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`
- : 'rbga(0,0,0,0)'
+ : 'rbga(0,0,0,0)',
)
- .style(
- 'stroke',
- d => d.data.label === 'TRACE_ROOT'?'':`${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`
+ .style('stroke', (d) =>
+ d.data.label === 'TRACE_ROOT'
+ ? ''
+ : `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`,
)
- .on('click', d => {
- this.click(d, this)
+ .on('click', (d) => {
+ this.click(d, this);
d3.event.stopPropagation();
-
});
node
.transition()
.duration(400)
- .attr('transform', d => `translate(${d.y},${d.x})`)
+ .attr('transform', (d) => `translate(${d.y},${d.x})`)
.style('opacity', 1)
.select('circle')
- .attr('fill', d =>
+ .attr('fill', (d) =>
d._children
? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`
- : ''
+ : '',
);
// Transition exiting nodes to the parent's new position.
@@ -251,7 +261,7 @@
.attr('fill', 'rgba(0,0,0,0)')
.attr('stroke', 'rgba(0, 0, 0, 0.1)')
.attr('stroke-width', 2)
- .attr('d', d => {
+ .attr('d', (d) => {
const o = { x: source.x0 + 35, y: source.y0 };
return this.diagonal({ source: o, target: o });
})
@@ -268,7 +278,7 @@
.exit()
.transition()
.duration(400)
- .attr('d', d => {
+ .attr('d', (d) => {
const o = { x: source.x + 35, y: source.y };
return this.diagonal({ source: o, target: o });
})
@@ -278,7 +288,7 @@
d.y0 = d.y;
});
if (callback) {
- callback()
+ callback();
}
}
}
diff --git a/src/views/components/trace/trace-detail-chart-list.vue b/src/views/components/trace/trace-detail-chart-list.vue
index a1fd586..229a7dc 100644
--- a/src/views/components/trace/trace-detail-chart-list.vue
+++ b/src/views/components/trace/trace-detail-chart-list.vue
@@ -1,19 +1,13 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
<div class="time-charts scroll_hide">
@@ -23,368 +17,417 @@
</svg>
</div>
<transition-group name="fade" tag="a" class="mb-5">
- <span class="time-charts-item mr-10" v-for="(i,index) in list" :key="i" :style="`color:${computedScale(index)}`">
- <svg class="icon vm mr-5 sm">
- <use xlink:href="#issue-open-m"></use>
- </svg>
- <span>{{i}}</span>
+ <span
+ class="time-charts-item mr-10"
+ v-for="(i, index) in list"
+ :key="i"
+ :style="`color:${computedScale(index)}`"
+ >
+ <svg class="icon vm mr-5 sm">
+ <use xlink:href="#issue-open-m"></use>
+ </svg>
+ <span>{{ i }}</span>
</span>
</transition-group>
- <a class="rk-btn r vm tc" @click="downloadTrace">{{$t('exportImage')}}</a>
+ <a class="rk-btn r vm tc" @click="downloadTrace">{{
+ $t('exportImage')
+ }}</a>
<rk-sidebox :width="'50%'" :show.sync="showDetail" :title="$t('spanInfo')">
<div class="rk-trace-detail">
- <h5 class="mb-15">{{$t('tags')}}.</h5>
- <div class="mb-10 clear"><span class="g-sm-4 grey">{{$t('endpoint')}}:</span><span class="g-sm-8 wba">{{this.currentSpan.label}}</span></div>
- <div class="mb-10 clear"><span class="g-sm-4 grey">{{$t('spanType')}}:</span><span class="g-sm-8 wba">{{this.currentSpan.type}}</span></div>
- <div class="mb-10 clear"><span class="g-sm-4 grey">{{$t('component')}}:</span><span class="g-sm-8 wba">{{this.currentSpan.component}}</span></div>
- <div class="mb-10 clear"><span class="g-sm-4 grey">Peer:</span><span class="g-sm-8 wba">{{this.currentSpan.peer||'No Peer'}}</span></div>
- <div class="mb-10 clear"><span class="g-sm-4 grey">{{$t('error')}}:</span><span class="g-sm-8 wba">{{this.currentSpan.isError}}</span></div>
- <div class="mb-10 clear" v-for="i in this.currentSpan.tags" :key="i.key">
- <span class="g-sm-4 grey">{{i.key}}:</span>
+ <h5 class="mb-15">{{ $t('tags') }}.</h5>
+ <div class="mb-10 clear">
+ <span class="g-sm-4 grey">{{ $t('endpoint') }}:</span
+ ><span class="g-sm-8 wba">{{ this.currentSpan.label }}</span>
+ </div>
+ <div class="mb-10 clear">
+ <span class="g-sm-4 grey">{{ $t('spanType') }}:</span
+ ><span class="g-sm-8 wba">{{ this.currentSpan.type }}</span>
+ </div>
+ <div class="mb-10 clear">
+ <span class="g-sm-4 grey">{{ $t('component') }}:</span
+ ><span class="g-sm-8 wba">{{ this.currentSpan.component }}</span>
+ </div>
+ <div class="mb-10 clear">
+ <span class="g-sm-4 grey">Peer:</span
+ ><span class="g-sm-8 wba">{{
+ this.currentSpan.peer || 'No Peer'
+ }}</span>
+ </div>
+ <div class="mb-10 clear">
+ <span class="g-sm-4 grey">{{ $t('error') }}:</span
+ ><span class="g-sm-8 wba">{{ this.currentSpan.isError }}</span>
+ </div>
+ <div
+ class="mb-10 clear"
+ v-for="i in this.currentSpan.tags"
+ :key="i.key"
+ >
+ <span class="g-sm-4 grey">{{ i.key }}:</span>
<span class="g-sm-8 wba">
- {{i.value}}
- <svg v-if="i.key==='db.statement'" class="icon vm grey link-hover cp ml-5" @click="copy(i.value)">
+ {{ i.value }}
+ <svg
+ v-if="i.key === 'db.statement'"
+ class="icon vm grey link-hover cp ml-5"
+ @click="copy(i.value)"
+ >
<use xlink:href="#review-list"></use>
</svg>
</span>
</div>
- <h5 class="mb-10" v-if="this.currentSpan.logs" v-show="this.currentSpan.logs.length">{{$t('logs')}}.</h5>
+ <h5
+ class="mb-10"
+ v-if="this.currentSpan.logs"
+ v-show="this.currentSpan.logs.length"
+ >
+ {{ $t('logs') }}.
+ </h5>
<div v-for="(i, index) in this.currentSpan.logs" :key="index">
- <div class="mb-10 sm"><span class="mr-10">{{$t('time')}}:</span><span class="grey">{{i.time | dateformat}}</span></div>
+ <div class="mb-10 sm">
+ <span class="mr-10">{{ $t('time') }}:</span
+ ><span class="grey">{{ i.time | dateformat }}</span>
+ </div>
<div class="mb-15 clear" v-for="(_i, _index) in i.data" :key="_index">
- <div class="mb-10">{{_i.key}}:<span v-if="_i.key==='stack'" class="r rk-sidebox-magnify"
- @click="showCurrentSpanDetail(_i.key, _i.value)">
- <svg class="icon">
- <use xlink:href="#magnify"></use>
- </svg>
- </span></div><pre class="pl-15 mt-0 mb-0 sm oa" >{{_i.value}}</pre>
+ <div class="mb-10">
+ {{ _i.key }}:<span
+ v-if="_i.key === 'stack'"
+ class="r rk-sidebox-magnify"
+ @click="showCurrentSpanDetail(_i.key, _i.value)"
+ >
+ <svg class="icon">
+ <use xlink:href="#magnify"></use>
+ </svg>
+ </span>
+ </div>
+ <pre class="pl-15 mt-0 mb-0 sm oa">{{ _i.value }}</pre>
</div>
</div>
</div>
</rk-sidebox>
- <v-dialog width="90%"/>
+ <v-dialog width="90%" />
<div class="trace-list">
<div ref="traceList"></div>
</div>
</div>
</template>
<script lang="js">
-import copy from '@/utils/copy';
-import * as d3 from 'd3';
-import Trace from './d3-trace';
-import _ from 'lodash';
-export default {
- props: ['data', 'traceId'],
- data() {
- return {
- segmentId: [],
- showDetail: false,
- list: [],
- currentSpan: [],
- loading: true,
- };
- },
- watch: {
+ import copy from '@/utils/copy';
+ import * as d3 from 'd3';
+ import Trace from './d3-trace';
+ import _ from 'lodash';
+ export default {
+ props: ['data', 'traceId'],
data() {
- if (!this.data.length) { return; }
- this.loading = true;
- this.changeTree();
- this.tree.init({label: 'TRACE_ROOT', children: this.segmentId}, this.data);
- this.tree.draw(() => {
- setTimeout(() => {
- this.loading = false;
- }, 200);
- });
+ return {
+ segmentId: [],
+ showDetail: false,
+ list: [],
+ currentSpan: [],
+ loading: true,
+ };
},
- },
- beforeDestroy() {
- d3.selectAll('.d3-tip').remove();
- },
- mounted() {
- this.$eventBus.$on('TRACE-LIST-LOADING', this, () => { this.loading = true; });
- // this.loading = true;
- this.changeTree();
- this.tree = new Trace(this.$refs.traceList, this);
- this.tree.init({label: 'TRACE_ROOT', children: this.segmentId}, this.data);
- this.tree.draw();
- this.loading = false;
- // this.computedScale();
- },
- methods: {
- copy,
- handleSelectSpan(i) {
- this.currentSpan = i.data;
- this.showDetail = true;
- },
- traverseTree(node, spanId, segmentId, data) {
- if (!node) { return; }
- if (node.spanId === spanId && node.segmentId === segmentId) {
- node.children.push(data);
- return;
- }
- if (node.children && node.children.length > 0) {
- node.children.forEach((nodeItem) => {
- this.traverseTree(nodeItem, spanId, segmentId, data);
+ watch: {
+ data() {
+ if (!this.data.length) { return; }
+ this.loading = true;
+ this.changeTree();
+ this.tree.init({label: 'TRACE_ROOT', children: this.segmentId}, this.data);
+ this.tree.draw(() => {
+ setTimeout(() => {
+ this.loading = false;
+ }, 200);
});
- }
+ },
},
- computedScale(i) {
- // Rainbow map
- const sequentialScale = d3.scaleSequential()
- .domain([0, this.list.length + 1])
- .interpolator(d3.interpolateCool);
- return sequentialScale(i);
+ beforeDestroy() {
+ d3.selectAll('.d3-tip').remove();
},
- changeTree() {
- if (this.data.length === 0) {
- return [];
- }
- this.list = Array.from(new Set(this.data.map((i) => i.serviceCode)));
- this.segmentId = [];
- const segmentGroup = {};
- const segmentIdGroup = [];
- const fixSpans = [];
- const segmentHeaders = [];
- this.data.forEach((span) => {
- if (span.parentSpanId === -1) {
- segmentHeaders.push(span);
- } else {
- const index = this.data.findIndex((i) => (
- i.segmentId === span.segmentId
- &&
- i.spanId === (span.spanId - 1)
- ));
- const fixSpanKeyContent = {
- traceId: span.traceId,
- segmentId: span.segmentId,
- spanId: span.spanId - 1,
- parentSpanId: span.spanId - 2,
- };
- if (index === -1 && !_.find(fixSpans, fixSpanKeyContent)) {
- fixSpans.push(
- {
- ...fixSpanKeyContent,
- refs: [],
- endpointName: `VNode: ${span.segmentId}`,
- serviceCode: 'VirtualNode',
- type: `[Broken] ${span.type}`,
- peer: '',
- component: `VirtualNode: #${span.spanId - 1}`,
- isError: true,
- isBroken: true,
- layer: 'Broken',
- tags: [],
- logs: [],
- },
- );
- }
+ mounted() {
+ this.$eventBus.$on('TRACE-LIST-LOADING', this, () => { this.loading = true; });
+ // this.loading = true;
+ this.changeTree();
+ this.tree = new Trace(this.$refs.traceList, this);
+ this.tree.init({label: 'TRACE_ROOT', children: this.segmentId}, this.data);
+ this.tree.draw();
+ this.loading = false;
+ // this.computedScale();
+ },
+ methods: {
+ copy,
+ handleSelectSpan(i) {
+ this.currentSpan = i.data;
+ this.showDetail = true;
+ },
+ traverseTree(node, spanId, segmentId, data) {
+ if (!node) { return; }
+ if (node.spanId === spanId && node.segmentId === segmentId) {
+ node.children.push(data);
+ return;
}
- });
- segmentHeaders.forEach((span) => {
- if (span.refs.length) {
- span.refs.forEach((ref) => {
+ if (node.children && node.children.length > 0) {
+ node.children.forEach((nodeItem) => {
+ this.traverseTree(nodeItem, spanId, segmentId, data);
+ });
+ }
+ },
+ computedScale(i) {
+ // Rainbow map
+ const sequentialScale = d3.scaleSequential()
+ .domain([0, this.list.length + 1])
+ .interpolator(d3.interpolateCool);
+ return sequentialScale(i);
+ },
+ changeTree() {
+ if (this.data.length === 0) {
+ return [];
+ }
+ this.list = Array.from(new Set(this.data.map((i) => i.serviceCode)));
+ this.segmentId = [];
+ const segmentGroup = {};
+ const segmentIdGroup = [];
+ const fixSpans = [];
+ const segmentHeaders = [];
+ this.data.forEach((span) => {
+ if (span.parentSpanId === -1) {
+ segmentHeaders.push(span);
+ } else {
const index = this.data.findIndex((i) => (
- ref.parentSegmentId === i.segmentId
+ i.segmentId === span.segmentId
&&
- ref.parentSpanId === i.spanId
+ i.spanId === (span.spanId - 1)
));
- if (index === -1) {
- // create a known broken node.
- const i = ref.parentSpanId;
- const fixSpanKeyContent = {
- traceId: ref.traceId,
- segmentId: ref.parentSegmentId,
- spanId: i,
- parentSpanId: i > -1 ? 0 : -1,
- };
- if (!_.find(fixSpans, fixSpanKeyContent)) {
- fixSpans.push({
- ...fixSpanKeyContent, refs: [], endpointName: `VNode: ${ref.parentSegmentId}`,
- serviceCode: 'VirtualNode', type: `[Broken] ${ref.type}`, peer: '', component: `VirtualNode: #${i}`,
- isError: true, isBroken: true, layer: 'Broken', tags: [], logs: [],
- });
- }
- // if root broken node is not exist, create a root broken node.
- if (fixSpanKeyContent.parentSpanId > -1) {
- const fixRootSpanKeyContent = {
+ const fixSpanKeyContent = {
+ traceId: span.traceId,
+ segmentId: span.segmentId,
+ spanId: span.spanId - 1,
+ parentSpanId: span.spanId - 2,
+ };
+ if (index === -1 && !_.find(fixSpans, fixSpanKeyContent)) {
+ fixSpans.push(
+ {
+ ...fixSpanKeyContent,
+ refs: [],
+ endpointName: `VNode: ${span.segmentId}`,
+ serviceCode: 'VirtualNode',
+ type: `[Broken] ${span.type}`,
+ peer: '',
+ component: `VirtualNode: #${span.spanId - 1}`,
+ isError: true,
+ isBroken: true,
+ layer: 'Broken',
+ tags: [],
+ logs: [],
+ },
+ );
+ }
+ }
+ });
+ segmentHeaders.forEach((span) => {
+ if (span.refs.length) {
+ span.refs.forEach((ref) => {
+ const index = this.data.findIndex((i) => (
+ ref.parentSegmentId === i.segmentId
+ &&
+ ref.parentSpanId === i.spanId
+ ));
+ if (index === -1) {
+ // create a known broken node.
+ const i = ref.parentSpanId;
+ const fixSpanKeyContent = {
traceId: ref.traceId,
segmentId: ref.parentSegmentId,
- spanId: 0,
- parentSpanId: -1,
+ spanId: i,
+ parentSpanId: i > -1 ? 0 : -1,
};
- if (!_.find(fixSpans, fixRootSpanKeyContent)) {
+ if (!_.find(fixSpans, fixSpanKeyContent)) {
fixSpans.push({
- ...fixRootSpanKeyContent,
- refs: [],
- endpointName: `VNode: ${ref.parentSegmentId}`,
- serviceCode: 'VirtualNode',
- type: `[Broken] ${ref.type}`,
- peer: '',
- component: `VirtualNode: #0`,
- isError: true,
- isBroken: true,
- layer: 'Broken',
- tags: [],
- logs: [],
+ ...fixSpanKeyContent, refs: [], endpointName: `VNode: ${ref.parentSegmentId}`,
+ serviceCode: 'VirtualNode', type: `[Broken] ${ref.type}`, peer: '', component: `VirtualNode: #${i}`,
+ isError: true, isBroken: true, layer: 'Broken', tags: [], logs: [],
});
}
+ // if root broken node is not exist, create a root broken node.
+ if (fixSpanKeyContent.parentSpanId > -1) {
+ const fixRootSpanKeyContent = {
+ traceId: ref.traceId,
+ segmentId: ref.parentSegmentId,
+ spanId: 0,
+ parentSpanId: -1,
+ };
+ if (!_.find(fixSpans, fixRootSpanKeyContent)) {
+ fixSpans.push({
+ ...fixRootSpanKeyContent,
+ refs: [],
+ endpointName: `VNode: ${ref.parentSegmentId}`,
+ serviceCode: 'VirtualNode',
+ type: `[Broken] ${ref.type}`,
+ peer: '',
+ component: `VirtualNode: #0`,
+ isError: true,
+ isBroken: true,
+ layer: 'Broken',
+ tags: [],
+ logs: [],
+ });
+ }
+ }
+ }
+ });
+ }
+ });
+ [...fixSpans, ...this.data].forEach((i) => {
+ i.label = i.endpointName || 'no operation name';
+ i.children = [];
+ if (segmentGroup[i.segmentId] === undefined) {
+ segmentIdGroup.push(i.segmentId);
+ segmentGroup[i.segmentId] = [];
+ segmentGroup[i.segmentId].push(i);
+ } else {
+ segmentGroup[i.segmentId].push(i);
+ }
+ });
+ segmentIdGroup.forEach((id) => {
+ const currentSegment = segmentGroup[id].sort((a, b) => b.parentSpanId - a.parentSpanId);
+ currentSegment.forEach((s) => {
+ const index = currentSegment.findIndex((i) => i.spanId === s.parentSpanId);
+ if (index !== -1) {
+ if (
+ (currentSegment[index].isBroken && currentSegment[index].parentSpanId === -1)
+ ||
+ !currentSegment[index].isBroken
+ ) {
+ currentSegment[index].children.push(s);
+ currentSegment[index].children.sort((a, b) => a.spanId - b.spanId);
+ }
+ }
+ if (s.isBroken) {
+ const children = _.filter(this.data, (span) => {
+ return _.find(span.refs, {traceId: s.traceId, parentSegmentId: s.segmentId, parentSpanId: s.spanId});
+ });
+ if (children.length > 0) {
+ s.children.push(...children);
}
}
});
- }
- });
- [...fixSpans, ...this.data].forEach((i) => {
- i.label = i.endpointName || 'no operation name';
- i.children = [];
- if (segmentGroup[i.segmentId] === undefined) {
- segmentIdGroup.push(i.segmentId);
- segmentGroup[i.segmentId] = [];
- segmentGroup[i.segmentId].push(i);
- } else {
- segmentGroup[i.segmentId].push(i);
- }
- });
- segmentIdGroup.forEach((id) => {
- const currentSegment = segmentGroup[id].sort((a, b) => b.parentSpanId - a.parentSpanId);
- currentSegment.forEach((s) => {
- const index = currentSegment.findIndex((i) => i.spanId === s.parentSpanId);
- if (index !== -1) {
- if (
- (currentSegment[index].isBroken && currentSegment[index].parentSpanId === -1)
- ||
- !currentSegment[index].isBroken
- ) {
- currentSegment[index].children.push(s);
- currentSegment[index].children.sort((a, b) => a.spanId - b.spanId);
+ segmentGroup[id] = currentSegment[currentSegment.length - 1];
+ });
+ segmentIdGroup.forEach((id) => {
+ segmentGroup[id].refs.forEach((ref) => {
+ if (ref.traceId === this.traceId) {
+ this.traverseTree(
+ segmentGroup[ref.parentSegmentId],
+ ref.parentSpanId,
+ ref.parentSegmentId,
+ segmentGroup[id]);
}
- }
- if (s.isBroken) {
- const children = _.filter(this.data, (span) => {
- return _.find(span.refs, {traceId: s.traceId, parentSegmentId: s.segmentId, parentSpanId: s.spanId});
- });
- if (children.length > 0) {
- s.children.push(...children);
- }
- }
+ });
});
- segmentGroup[id] = currentSegment[currentSegment.length - 1];
- });
- segmentIdGroup.forEach((id) => {
- segmentGroup[id].refs.forEach((ref) => {
- if (ref.traceId === this.traceId) {
- this.traverseTree(
- segmentGroup[ref.parentSegmentId],
- ref.parentSpanId,
- ref.parentSegmentId,
- segmentGroup[id]);
+ for (const i in segmentGroup) {
+ if (segmentGroup[i].refs.length === 0 ) {
+ this.segmentId.push(segmentGroup[i]);
}
- });
- });
- for (const i in segmentGroup) {
- if (segmentGroup[i].refs.length === 0 ) {
- this.segmentId.push(segmentGroup[i]);
}
- }
- this.segmentId.forEach((i) => {
- this.collapse(i);
- });
- },
- collapse(d) {
- if (d.children) {
- let dur = d.endTime - d.startTime;
- d.children.forEach((i) => {
- dur -= (i.endTime - i.startTime);
+ this.segmentId.forEach((i) => {
+ this.collapse(i);
});
- d.dur = dur < 0 ? 0 : dur;
- d.children.forEach((i) => this.collapse(i));
- }
- },
- showCurrentSpanDetail(title, text) {
- const textLineNumber = text.split('\n').length;
- let textHeight = textLineNumber * 20.2 + 10;
- const tmpHeight = window.innerHeight * 0.9;
- textHeight = textHeight >= tmpHeight ? tmpHeight : textHeight;
- this.$modal.show('dialog', {
- title,
- text: `<div style="height:${textHeight}px">${text}</div>`,
- buttons: [
- {
- title: 'Copy',
- handler: () => {
- this.copy(text);
+ },
+ collapse(d) {
+ if (d.children) {
+ let dur = d.endTime - d.startTime;
+ d.children.forEach((i) => {
+ dur -= (i.endTime - i.startTime);
+ });
+ d.dur = dur < 0 ? 0 : dur;
+ d.children.forEach((i) => this.collapse(i));
+ }
+ },
+ showCurrentSpanDetail(title, text) {
+ const textLineNumber = text.split('\n').length;
+ let textHeight = textLineNumber * 20.2 + 10;
+ const tmpHeight = window.innerHeight * 0.9;
+ textHeight = textHeight >= tmpHeight ? tmpHeight : textHeight;
+ this.$modal.show('dialog', {
+ title,
+ text: `<div style="height:${textHeight}px">${text}</div>`,
+ buttons: [
+ {
+ title: 'Copy',
+ handler: () => {
+ this.copy(text);
+ },
},
- },
- {
- title: 'Close',
- },
- ],
- });
+ {
+ title: 'Close',
+ },
+ ],
+ });
+ },
+ downloadTrace() {
+ const serializer = new XMLSerializer();
+ const svgNode = d3.select('.trace-list-dowanload').node();
+ const source = `<?xml version="1.0" standalone="no"?>\r\n${serializer.serializeToString(svgNode)}`;
+ const canvas = document.createElement('canvas');
+ const context = canvas.getContext('2d');
+ canvas.width = d3.select('.trace-list-dowanload')._groups[0][0].clientWidth;
+ canvas.height = d3.select('.trace-list-dowanload')._groups[0][0].clientHeight;
+ context.fillStyle = '#fff';
+ context.fillRect(0, 0, canvas.width, canvas.height);
+ const image = new Image();
+ image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(source)}`;
+ image.onload = () => {
+ context.drawImage(image, 0, 0);
+ const tagA = document.createElement('a');
+ tagA.download = 'trace-list.png';
+ tagA.href = canvas.toDataURL('image/png');
+ tagA.click();
+ };
+ },
},
- downloadTrace() {
- const serializer = new XMLSerializer();
- const svgNode = d3.select('.trace-list-dowanload').node();
- const source = `<?xml version="1.0" standalone="no"?>\r\n${serializer.serializeToString(svgNode)}`;
- const canvas = document.createElement('canvas');
- const context = canvas.getContext('2d');
- canvas.width = d3.select('.trace-list-dowanload')._groups[0][0].clientWidth;
- canvas.height = d3.select('.trace-list-dowanload')._groups[0][0].clientHeight;
- context.fillStyle = '#fff';
- context.fillRect(0, 0, canvas.width, canvas.height);
- const image = new Image();
- image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(source)}`;
- image.onload = () => {
- context.drawImage(image, 0, 0);
- const tagA = document.createElement('a');
- tagA.download = 'trace-list.png';
- tagA.href = canvas.toDataURL('image/png');
- tagA.click();
- };
- },
- },
-};
+ };
</script>
<style lang="scss">
-.time-charts{
- overflow: auto;
- padding: 10px 30px;
- position: relative;
- min-height: 150px;
-}
-.trace-node .group {
- cursor: pointer;
- fill-opacity: 0;
-}
-.trace-node-container{
- fill: rgba(0, 0, 0, 0);
- stroke-width: 5px;
- cursor: pointer;
- &:hover{
- fill: rgba(0,0,0,0.05)
+ .time-charts {
+ overflow: auto;
+ padding: 10px 30px;
+ position: relative;
+ min-height: 150px;
}
-}
-.trace-node .node-text {
- font: 12.5px sans-serif;
- pointer-events: none;
-}
-.domain{display: none;}
-.time-charts-item{
- display: inline-block;
- padding: 2px 8px;
- border: 1px solid;
- font-size: 11px;
- border-radius: 4px;
-}
- .trace-list{
- fill: rgba(0,0,0,0)
- }
- .trace-list .trace-node rect{
- &:hover{
- fill: rgba(0,0,0,0.05)
- }
- }
-.dialog-c-text {
- white-space: pre;
- overflow: auto;
- font-family: monospace;
-}
+ .trace-node .group {
+ cursor: pointer;
+ fill-opacity: 0;
+ }
+ .trace-node-container {
+ fill: rgba(0, 0, 0, 0);
+ stroke-width: 5px;
+ cursor: pointer;
+ &:hover {
+ fill: rgba(0, 0, 0, 0.05);
+ }
+ }
+ .trace-node .node-text {
+ font: 12.5px sans-serif;
+ pointer-events: none;
+ }
+ .domain {
+ display: none;
+ }
+ .time-charts-item {
+ display: inline-block;
+ padding: 2px 8px;
+ border: 1px solid;
+ font-size: 11px;
+ border-radius: 4px;
+ }
+ .trace-list {
+ fill: rgba(0, 0, 0, 0);
+ }
+ .trace-list .trace-node rect {
+ &:hover {
+ fill: rgba(0, 0, 0, 0.05);
+ }
+ }
+ .dialog-c-text {
+ white-space: pre;
+ overflow: auto;
+ font-family: monospace;
+ }
</style>
diff --git a/src/views/components/trace/trace-detail-chart-table.vue b/src/views/components/trace/trace-detail-chart-table.vue
index 465f0ab..557f16a 100644
--- a/src/views/components/trace/trace-detail-chart-table.vue
+++ b/src/views/components/trace/trace-detail-chart-table.vue
@@ -1,22 +1,15 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
-
<div class="trace-detail-chart-table">
<div class="rk-trace-t-loading" v-show="loading">
<svg class="icon loading">
@@ -24,49 +17,89 @@
</svg>
</div>
<TraceContainer>
- <Item v-for="(item, index) in tableData" :data="item" :key="'key'+ index" />
+ <Item
+ v-for="(item, index) in tableData"
+ :data="item"
+ :key="'key' + index"
+ />
</TraceContainer>
<rk-sidebox :width="'50%'" :show.sync="showDetail" :title="$t('spanInfo')">
<div class="rk-trace-detail">
- <h5 class="mb-15">{{$t('tags')}}.</h5>
- <div class="mb-10 clear"><span class="g-sm-4 grey">{{$t('endpoint')}}:</span><span class="g-sm-8 wba">{{this.currentSpan.label}}</span></div>
- <div class="mb-10 clear"><span class="g-sm-4 grey">{{$t('spanType')}}:</span><span class="g-sm-8 wba">{{this.currentSpan.type}}</span></div>
- <div class="mb-10 clear"><span class="g-sm-4 grey">{{$t('component')}}:</span><span class="g-sm-8 wba">{{this.currentSpan.component}}</span></div>
- <div class="mb-10 clear"><span class="g-sm-4 grey">Peer:</span><span class="g-sm-8 wba">{{this.currentSpan.peer||'No Peer'}}</span></div>
- <div class="mb-10 clear"><span class="g-sm-4 grey">{{$t('error')}}:</span><span class="g-sm-8 wba">{{this.currentSpan.isError}}</span></div>
- <div class="mb-10 clear" v-for="i in this.currentSpan.tags" :key="i.key">
- <span class="g-sm-4 grey">{{i.key}}:</span>
+ <h5 class="mb-15">{{ $t('tags') }}.</h5>
+ <div class="mb-10 clear">
+ <span class="g-sm-4 grey">{{ $t('endpoint') }}:</span
+ ><span class="g-sm-8 wba">{{ this.currentSpan.label }}</span>
+ </div>
+ <div class="mb-10 clear">
+ <span class="g-sm-4 grey">{{ $t('spanType') }}:</span
+ ><span class="g-sm-8 wba">{{ this.currentSpan.type }}</span>
+ </div>
+ <div class="mb-10 clear">
+ <span class="g-sm-4 grey">{{ $t('component') }}:</span
+ ><span class="g-sm-8 wba">{{ this.currentSpan.component }}</span>
+ </div>
+ <div class="mb-10 clear">
+ <span class="g-sm-4 grey">Peer:</span
+ ><span class="g-sm-8 wba">{{
+ this.currentSpan.peer || 'No Peer'
+ }}</span>
+ </div>
+ <div class="mb-10 clear">
+ <span class="g-sm-4 grey">{{ $t('error') }}:</span
+ ><span class="g-sm-8 wba">{{ this.currentSpan.isError }}</span>
+ </div>
+ <div
+ class="mb-10 clear"
+ v-for="i in this.currentSpan.tags"
+ :key="i.key"
+ >
+ <span class="g-sm-4 grey">{{ i.key }}:</span>
<span class="g-sm-8 wba">
- {{i.value}}
- <svg v-if="i.key==='db.statement'" class="icon vm grey link-hover cp ml-5" @click="copy(i.value)">
+ {{ i.value }}
+ <svg
+ v-if="i.key === 'db.statement'"
+ class="icon vm grey link-hover cp ml-5"
+ @click="copy(i.value)"
+ >
<use xlink:href="#review-list"></use>
</svg>
</span>
</div>
- <h5 class="mb-10" v-if="this.currentSpan.logs" v-show="this.currentSpan.logs.length">{{$t('logs')}}.</h5>
+ <h5
+ class="mb-10"
+ v-if="this.currentSpan.logs"
+ v-show="this.currentSpan.logs.length"
+ >
+ {{ $t('logs') }}.
+ </h5>
<div v-for="(i, index) in this.currentSpan.logs" :key="index">
<div class="mb-10 sm">
- <span class="mr-10">{{$t('time')}}:</span>
- <span class="grey">{{i.time | dateformat}}</span>
+ <span class="mr-10">{{ $t('time') }}:</span>
+ <span class="grey">{{ i.time | dateformat }}</span>
</div>
<div class="mb-15 clear" v-for="(_i, _index) in i.data" :key="_index">
- <div class="mb-10">{{_i.key}}:<span v-if="_i.key==='stack'" class="r rk-sidebox-magnify"
- @click="showCurrentSpanDetail(_i.key, _i.value)">
- <svg class="icon">
- <use xlink:href="#magnify"></use>
- </svg>
- </span></div>
- <pre class="pl-15 mt-0 mb-0 sm oa">{{_i.value}}</pre>
+ <div class="mb-10">
+ {{ _i.key }}:<span
+ v-if="_i.key === 'stack'"
+ class="r rk-sidebox-magnify"
+ @click="showCurrentSpanDetail(_i.key, _i.value)"
+ >
+ <svg class="icon">
+ <use xlink:href="#magnify"></use>
+ </svg>
+ </span>
+ </div>
+ <pre class="pl-15 mt-0 mb-0 sm oa">{{ _i.value }}</pre>
</div>
</div>
</div>
</rk-sidebox>
- <v-dialog width="90%"/>
+ <v-dialog width="90%" />
</div>
</template>
<style lang="scss">
- .rk-tooltip-popper.trace-table-tooltip .rk-tooltip-inner{
- max-width: 600px;
+ .rk-tooltip-popper.trace-table-tooltip .rk-tooltip-inner {
+ max-width: 600px;
}
.trace-detail-chart-table {
position: relative;
@@ -75,243 +108,243 @@
</style>
<script lang="js">
-import copy from '@/utils/copy';
-import Item from './trace-chart-table/trace-item';
-import TraceContainer from './trace-chart-table/trace-container';
-import _ from 'lodash';
-/* eslint-disable */
-/* tslint:disable */
-export default {
- components: {
- Item,
- TraceContainer,
- },
- props: ['data', 'traceId'],
- watch: {
- data(val, oldVal) {
- if (!this.data.length) {
- return;
- }
- this.tableData = this.formatData(this.changeTree());
- this.loading = false;
+ import copy from '@/utils/copy';
+ import Item from './trace-chart-table/trace-item';
+ import TraceContainer from './trace-chart-table/trace-container';
+ import _ from 'lodash';
+ /* eslint-disable */
+ /* tslint:disable */
+ export default {
+ components: {
+ Item,
+ TraceContainer,
},
- },
- data() {
- return {
- tableData: [],
- diaplay: true,
- // segmentId: [],
- showDetail: false,
- list: [],
- currentSpan: [],
- loading: true,
- };
- },
- methods: {
- copy,
- // 给增加层级关系
- formatData(arr, level = 1, totalExec = null) {
- for (const item of arr) {
- item.level = level;
- totalExec = totalExec || (item.endTime - item.startTime);
- item.totalExec = totalExec;
- if (item.children && item.children.length > 0) {
- this.formatData(item.children, level + 1, totalExec);
+ props: ['data', 'traceId'],
+ watch: {
+ data(val, oldVal) {
+ if (!this.data.length) {
+ return;
}
- }
- return arr;
+ this.tableData = this.formatData(this.changeTree());
+ this.loading = false;
+ },
},
- traverseTree(node, spanId, segmentId, data) {
- if (!node) {
- return;
- }
- if (node.spanId === spanId && node.segmentId === segmentId) {
- node.children.push(data);
- return;
- }
- if (node.children && node.children.length > 0) {
- for (const item of node.children) {
- this.traverseTree(item, spanId, segmentId, data);
- }
- }
+ data() {
+ return {
+ tableData: [],
+ diaplay: true,
+ // segmentId: [],
+ showDetail: false,
+ list: [],
+ currentSpan: [],
+ loading: true,
+ };
},
- changeTree() {
- if (this.data.length === 0) {
- return [];
- }
- this.list = Array.from(new Set(this.data.map((i) => i.serviceCode)));
- this.segmentId = [];
- const segmentGroup = {};
- const segmentIdGroup = [];
- const fixSpans = [];
- const segmentHeaders = [];
- this.data.forEach((span) => {
- if (span.parentSpanId === -1) {
- segmentHeaders.push(span);
- } else {
- const index = this.data.findIndex(i => (i.segmentId === span.segmentId && i.spanId === (span.spanId - 1)));
- const fixSpanKeyContent = {
- traceId: span.traceId,
- segmentId: span.segmentId,
- spanId: span.spanId - 1,
- parentSpanId: span.spanId - 2,
- };
- if (index === -1 && !_.find(fixSpans, fixSpanKeyContent)) {
- fixSpans.push(
- {
- ...fixSpanKeyContent, refs: [], endpointName: `VNode: ${span.segmentId}`, serviceCode: 'VirtualNode', type: `[Broken] ${span.type}`, peer: '', component: `VirtualNode: #${span.spanId - 1}`, isError: true, isBroken: true, layer: 'Broken', tags: [], logs: [],
- },
- );
- }
+ methods: {
+ copy,
+ // 给增加层级关系
+ formatData(arr, level = 1, totalExec = null) {
+ for (const item of arr) {
+ item.level = level;
+ totalExec = totalExec || (item.endTime - item.startTime);
+ item.totalExec = totalExec;
+ if (item.children && item.children.length > 0) {
+ this.formatData(item.children, level + 1, totalExec);
}
- });
- segmentHeaders.forEach((span) => {
- if (span.refs.length) {
- span.refs.forEach((ref) => {
- const index = this.data.findIndex(i => (ref.parentSegmentId === i.segmentId && ref.parentSpanId === i.spanId));
- if (index === -1) {
- // create a known broken node.
- const i = ref.parentSpanId;
- const fixSpanKeyContent = {
- traceId: ref.traceId,
- segmentId: ref.parentSegmentId,
- spanId: i,
- parentSpanId: i > -1 ? 0 : -1,
- };
- !_.find(fixSpans, fixSpanKeyContent) && fixSpans.push(
+ }
+ return arr;
+ },
+ traverseTree(node, spanId, segmentId, data) {
+ if (!node) {
+ return;
+ }
+ if (node.spanId === spanId && node.segmentId === segmentId) {
+ node.children.push(data);
+ return;
+ }
+ if (node.children && node.children.length > 0) {
+ for (const item of node.children) {
+ this.traverseTree(item, spanId, segmentId, data);
+ }
+ }
+ },
+ changeTree() {
+ if (this.data.length === 0) {
+ return [];
+ }
+ this.list = Array.from(new Set(this.data.map((i) => i.serviceCode)));
+ this.segmentId = [];
+ const segmentGroup = {};
+ const segmentIdGroup = [];
+ const fixSpans = [];
+ const segmentHeaders = [];
+ this.data.forEach((span) => {
+ if (span.parentSpanId === -1) {
+ segmentHeaders.push(span);
+ } else {
+ const index = this.data.findIndex(i => (i.segmentId === span.segmentId && i.spanId === (span.spanId - 1)));
+ const fixSpanKeyContent = {
+ traceId: span.traceId,
+ segmentId: span.segmentId,
+ spanId: span.spanId - 1,
+ parentSpanId: span.spanId - 2,
+ };
+ if (index === -1 && !_.find(fixSpans, fixSpanKeyContent)) {
+ fixSpans.push(
{
- ...fixSpanKeyContent, refs: [], endpointName: `VNode: ${ref.parentSegmentId}`, serviceCode: 'VirtualNode', type: `[Broken] ${ref.type}`, peer: '', component: `VirtualNode: #${i}`, isError: true, isBroken: true, layer: 'Broken', tags: [], logs: [],
+ ...fixSpanKeyContent, refs: [], endpointName: `VNode: ${span.segmentId}`, serviceCode: 'VirtualNode', type: `[Broken] ${span.type}`, peer: '', component: `VirtualNode: #${span.spanId - 1}`, isError: true, isBroken: true, layer: 'Broken', tags: [], logs: [],
},
);
- // if root broken node is not exist, create a root broken node.
- if (fixSpanKeyContent.parentSpanId > -1) {
- const fixRootSpanKeyContent = {
+ }
+ }
+ });
+ segmentHeaders.forEach((span) => {
+ if (span.refs.length) {
+ span.refs.forEach((ref) => {
+ const index = this.data.findIndex(i => (ref.parentSegmentId === i.segmentId && ref.parentSpanId === i.spanId));
+ if (index === -1) {
+ // create a known broken node.
+ const i = ref.parentSpanId;
+ const fixSpanKeyContent = {
traceId: ref.traceId,
segmentId: ref.parentSegmentId,
- spanId: 0,
- parentSpanId: -1,
+ spanId: i,
+ parentSpanId: i > -1 ? 0 : -1,
};
- !_.find(fixSpans, fixRootSpanKeyContent) && fixSpans.push(
+ !_.find(fixSpans, fixSpanKeyContent) && fixSpans.push(
{
- ...fixRootSpanKeyContent,
- refs: [],
- endpointName: `VNode: ${ref.parentSegmentId}`,
- serviceCode: 'VirtualNode',
- type: `[Broken] ${ref.type}`,
- peer: '',
- component: `VirtualNode: #0`,
- isError: true,
- isBroken: true,
- layer: 'Broken',
- tags: [],
- logs: [],
+ ...fixSpanKeyContent, refs: [], endpointName: `VNode: ${ref.parentSegmentId}`, serviceCode: 'VirtualNode', type: `[Broken] ${ref.type}`, peer: '', component: `VirtualNode: #${i}`, isError: true, isBroken: true, layer: 'Broken', tags: [], logs: [],
},
);
+ // if root broken node is not exist, create a root broken node.
+ if (fixSpanKeyContent.parentSpanId > -1) {
+ const fixRootSpanKeyContent = {
+ traceId: ref.traceId,
+ segmentId: ref.parentSegmentId,
+ spanId: 0,
+ parentSpanId: -1,
+ };
+ !_.find(fixSpans, fixRootSpanKeyContent) && fixSpans.push(
+ {
+ ...fixRootSpanKeyContent,
+ refs: [],
+ endpointName: `VNode: ${ref.parentSegmentId}`,
+ serviceCode: 'VirtualNode',
+ type: `[Broken] ${ref.type}`,
+ peer: '',
+ component: `VirtualNode: #0`,
+ isError: true,
+ isBroken: true,
+ layer: 'Broken',
+ tags: [],
+ logs: [],
+ },
+ );
+ }
+ }
+ });
+ }
+ });
+ [...fixSpans, ...this.data].forEach(i => {
+ i.label=i.endpointName || 'no operation name';
+ i.children = [];
+ if(segmentGroup[i.segmentId] === undefined){
+ segmentIdGroup.push(i.segmentId);
+ segmentGroup[i.segmentId] = [];
+ segmentGroup[i.segmentId].push(i);
+ }else{
+ segmentGroup[i.segmentId].push(i);
+ }
+ });
+ segmentIdGroup.forEach(id => {
+ let currentSegment = segmentGroup[id].sort((a,b) => b.parentSpanId-a.parentSpanId);
+ currentSegment.forEach(s =>{
+ let index = currentSegment.findIndex(i => i.spanId === s.parentSpanId);
+ if (index !== -1) {
+ if ((currentSegment[index].isBroken && currentSegment[index].parentSpanId === -1) || !currentSegment[index].isBroken) {
+ currentSegment[index].children.push(s);
+ currentSegment[index].children.sort((a, b) => a.spanId - b.spanId);
}
}
- });
- }
- });
- [...fixSpans, ...this.data].forEach(i => {
- i.label=i.endpointName || 'no operation name';
- i.children = [];
- if(segmentGroup[i.segmentId] === undefined){
- segmentIdGroup.push(i.segmentId);
- segmentGroup[i.segmentId] = [];
- segmentGroup[i.segmentId].push(i);
- }else{
- segmentGroup[i.segmentId].push(i);
- }
- });
- segmentIdGroup.forEach(id => {
- let currentSegment = segmentGroup[id].sort((a,b) => b.parentSpanId-a.parentSpanId);
- currentSegment.forEach(s =>{
- let index = currentSegment.findIndex(i => i.spanId === s.parentSpanId);
- if (index !== -1) {
- if ((currentSegment[index].isBroken && currentSegment[index].parentSpanId === -1) || !currentSegment[index].isBroken) {
- currentSegment[index].children.push(s);
- currentSegment[index].children.sort((a, b) => a.spanId - b.spanId);
+ if (s.isBroken) {
+ const children = _.filter(this.data, (span) => {
+ return _.find(span.refs, {traceId: s.traceId, parentSegmentId: s.segmentId, parentSpanId: s.spanId});
+ });
+ children.length > 0 && s.children.push(...children);
}
- }
- if (s.isBroken) {
- const children = _.filter(this.data, (span) => {
- return _.find(span.refs, {traceId: s.traceId, parentSegmentId: s.segmentId, parentSpanId: s.spanId});
- });
- children.length > 0 && s.children.push(...children);
- }
+ })
+ segmentGroup[id] = currentSegment[currentSegment.length-1]
})
- segmentGroup[id] = currentSegment[currentSegment.length-1]
- })
- segmentIdGroup.forEach(id => {
- segmentGroup[id].refs.forEach(ref => {
- if(ref.traceId === this.traceId) {
- this.traverseTree(segmentGroup[ref.parentSegmentId],ref.parentSpanId,ref.parentSegmentId,segmentGroup[id])
- };
+ segmentIdGroup.forEach(id => {
+ segmentGroup[id].refs.forEach(ref => {
+ if(ref.traceId === this.traceId) {
+ this.traverseTree(segmentGroup[ref.parentSegmentId],ref.parentSpanId,ref.parentSegmentId,segmentGroup[id])
+ };
+ })
+ // if(segmentGroup[id].refs.length !==0 ) delete segmentGroup[id];
})
- // if(segmentGroup[id].refs.length !==0 ) delete segmentGroup[id];
- })
- for (const i in segmentGroup) {
- if (segmentGroup[i].refs.length === 0) {
- this.segmentId.push(segmentGroup[i]);
+ for (const i in segmentGroup) {
+ if (segmentGroup[i].refs.length === 0) {
+ this.segmentId.push(segmentGroup[i]);
+ }
}
- }
- this.segmentId.forEach((_, i) => {
- this.collapse(this.segmentId[i]);
- });
- return this.segmentId;
- },
- collapse(d) {
- if (d.children) {
- let dur = d.endTime - d.startTime;
- d.children.forEach((i) => {
- dur -= (i.endTime - i.startTime);
+ this.segmentId.forEach((_, i) => {
+ this.collapse(this.segmentId[i]);
});
- d.dur = dur < 0 ? 0 : dur;
- d.children.forEach((i) => this.collapse(i));
- }
- },
- handleSelectSpan(data) {
- this.currentSpan = data;
- this.showDetail = true;
- },
- showCurrentSpanDetail(title, text) {
- const textLineNumber = text.split('\n').length;
- let textHeight = textLineNumber * 20.2 + 10;
- const tmpHeight = window.innerHeight * 0.9
- textHeight = textHeight >= tmpHeight ? tmpHeight : textHeight;
- this.$modal.show('dialog', {
- title,
- text: `<div style="height:${textHeight}px">${text}</div>`,
- buttons: [
- {
- title: 'Copy',
- handler: () => {
- this.copy(text);
+ return this.segmentId;
+ },
+ collapse(d) {
+ if (d.children) {
+ let dur = d.endTime - d.startTime;
+ d.children.forEach((i) => {
+ dur -= (i.endTime - i.startTime);
+ });
+ d.dur = dur < 0 ? 0 : dur;
+ d.children.forEach((i) => this.collapse(i));
+ }
+ },
+ handleSelectSpan(data) {
+ this.currentSpan = data;
+ this.showDetail = true;
+ },
+ showCurrentSpanDetail(title, text) {
+ const textLineNumber = text.split('\n').length;
+ let textHeight = textLineNumber * 20.2 + 10;
+ const tmpHeight = window.innerHeight * 0.9
+ textHeight = textHeight >= tmpHeight ? tmpHeight : textHeight;
+ this.$modal.show('dialog', {
+ title,
+ text: `<div style="height:${textHeight}px">${text}</div>`,
+ buttons: [
+ {
+ title: 'Copy',
+ handler: () => {
+ this.copy(text);
+ },
},
- },
- {
- title: 'Close',
- },
- ],
- })
+ {
+ title: 'Close',
+ },
+ ],
+ })
+ },
},
- },
- created() {
- this.loading = true;
- },
- mounted() {
- this.tableData = this.formatData(this.changeTree());
- this.loading = false;
- this.$eventBus.$on('HANDLE-SELECT-SPAN', this, this.handleSelectSpan);
- this.$eventBus.$on('TRACE-TABLE-LOADING', this, ()=>{ this.loading = true });
+ created() {
+ this.loading = true;
+ },
+ mounted() {
+ this.tableData = this.formatData(this.changeTree());
+ this.loading = false;
+ this.$eventBus.$on('HANDLE-SELECT-SPAN', this, this.handleSelectSpan);
+ this.$eventBus.$on('TRACE-TABLE-LOADING', this, ()=>{ this.loading = true });
- },
-};
+ },
+ };
</script>
<style>
-.dialog-c-text {
- white-space: pre;
- overflow: auto;
- font-family: monospace;
-}
+ .dialog-c-text {
+ white-space: pre;
+ overflow: auto;
+ font-family: monospace;
+ }
</style>
diff --git a/src/views/components/trace/trace-detail-chart-tree.vue b/src/views/components/trace/trace-detail-chart-tree.vue
index a64a997..f1857f3 100644
--- a/src/views/components/trace/trace-detail-chart-tree.vue
+++ b/src/views/components/trace/trace-detail-chart-tree.vue
@@ -1,344 +1,389 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
<div class="trace-tree-charts scroll_hide flex-v">
<transition-group name="fade" tag="div" style="padding: 10px 30px;">
- <span class="time-charts-item mr-10" v-for="(i,index) in list" :key="i" :style="`color:${computedScale(index)}`">
- <svg class="icon vm mr-5 sm">
- <use xlink:href="#issue-open-m"></use>
- </svg>
- <span>{{i}}</span>
+ <span
+ class="time-charts-item mr-10"
+ v-for="(i, index) in list"
+ :key="i"
+ :style="`color:${computedScale(index)}`"
+ >
+ <svg class="icon vm mr-5 sm">
+ <use xlink:href="#issue-open-m"></use>
+ </svg>
+ <span>{{ i }}</span>
</span>
</transition-group>
<div style="padding: 0 30px;">
<a class="trace-tree-btn mr-10" @click="tree.setDefault()">Default</a>
- <a class="trace-tree-btn mr-10" @click="tree.getTopSlow()">Top 5 of slow</a>
- <a class="trace-tree-btn mr-10" @click="tree.getTopChild()">Top 5 of children</a>
+ <a class="trace-tree-btn mr-10" @click="tree.getTopSlow()"
+ >Top 5 of slow</a
+ >
+ <a class="trace-tree-btn mr-10" @click="tree.getTopChild()"
+ >Top 5 of children</a
+ >
</div>
- <rk-sidebox :width="'50%'" :show.sync="showDetail" :title="$t('spanInfo')">
+ <rk-sidebox :width="'50%'" :show.sync="showDetail" :title="$t('spanInfo')">
<div class="rk-trace-detail">
- <h5 class="mb-15">{{$t('tags')}}.</h5>
- <div class="mb-10 clear"><span class="g-sm-4 grey">{{$t('endpoint')}}:</span><span class="g-sm-8 wba">{{this.currentSpan.label}}</span></div>
- <div class="mb-10 clear"><span class="g-sm-4 grey">{{$t('spanType')}}:</span><span class="g-sm-8 wba">{{this.currentSpan.type}}</span></div>
- <div class="mb-10 clear"><span class="g-sm-4 grey">{{$t('component')}}:</span><span class="g-sm-8 wba">{{this.currentSpan.component}}</span></div>
- <div class="mb-10 clear"><span class="g-sm-4 grey">Peer:</span><span class="g-sm-8 wba">{{this.currentSpan.peer||'No Peer'}}</span></div>
- <div class="mb-10 clear"><span class="g-sm-4 grey">{{$t('error')}}:</span><span class="g-sm-8 wba">{{this.currentSpan.isError}}</span></div>
- <div class="mb-10 clear" v-for="i in this.currentSpan.tags" :key="i.key">
- <span class="g-sm-4 grey">{{i.key}}:</span>
+ <h5 class="mb-15">{{ $t('tags') }}.</h5>
+ <div class="mb-10 clear">
+ <span class="g-sm-4 grey">{{ $t('endpoint') }}:</span
+ ><span class="g-sm-8 wba">{{ this.currentSpan.label }}</span>
+ </div>
+ <div class="mb-10 clear">
+ <span class="g-sm-4 grey">{{ $t('spanType') }}:</span
+ ><span class="g-sm-8 wba">{{ this.currentSpan.type }}</span>
+ </div>
+ <div class="mb-10 clear">
+ <span class="g-sm-4 grey">{{ $t('component') }}:</span
+ ><span class="g-sm-8 wba">{{ this.currentSpan.component }}</span>
+ </div>
+ <div class="mb-10 clear">
+ <span class="g-sm-4 grey">Peer:</span
+ ><span class="g-sm-8 wba">{{
+ this.currentSpan.peer || 'No Peer'
+ }}</span>
+ </div>
+ <div class="mb-10 clear">
+ <span class="g-sm-4 grey">{{ $t('error') }}:</span
+ ><span class="g-sm-8 wba">{{ this.currentSpan.isError }}</span>
+ </div>
+ <div
+ class="mb-10 clear"
+ v-for="i in this.currentSpan.tags"
+ :key="i.key"
+ >
+ <span class="g-sm-4 grey">{{ i.key }}:</span>
<span class="g-sm-8 wba">
- {{i.value}}
- <svg v-if="i.key==='db.statement'" class="icon vm grey link-hover cp ml-5" @click="copy(i.value)">
+ {{ i.value }}
+ <svg
+ v-if="i.key === 'db.statement'"
+ class="icon vm grey link-hover cp ml-5"
+ @click="copy(i.value)"
+ >
<use xlink:href="#review-list"></use>
</svg>
</span>
</div>
- <h5 class="mb-10" v-if="this.currentSpan.logs" v-show="this.currentSpan.logs.length">{{$t('logs')}}.</h5>
+ <h5
+ class="mb-10"
+ v-if="this.currentSpan.logs"
+ v-show="this.currentSpan.logs.length"
+ >
+ {{ $t('logs') }}.
+ </h5>
<div v-for="(i, index) in this.currentSpan.logs" :key="index">
- <div class="mb-10 sm"><span class="mr-10">{{$t('time')}}:</span><span class="grey">{{i.time | dateformat}}</span></div>
+ <div class="mb-10 sm">
+ <span class="mr-10">{{ $t('time') }}:</span
+ ><span class="grey">{{ i.time | dateformat }}</span>
+ </div>
<div class="mb-15 clear" v-for="(_i, _index) in i.data" :key="_index">
- <div class="mb-10">{{_i.key}}:<span v-if="_i.key==='stack'" class="r rk-sidebox-magnify"
- @click="showCurrentSpanDetail(_i.key, _i.value)">
- <svg class="icon">
- <use xlink:href="#magnify"></use>
- </svg>
- </span></div><pre class="pl-15 mt-0 mb-0 sm oa">{{_i.value}}</pre>
+ <div class="mb-10">
+ {{ _i.key }}:<span
+ v-if="_i.key === 'stack'"
+ class="r rk-sidebox-magnify"
+ @click="showCurrentSpanDetail(_i.key, _i.value)"
+ >
+ <svg class="icon">
+ <use xlink:href="#magnify"></use>
+ </svg>
+ </span>
+ </div>
+ <pre class="pl-15 mt-0 mb-0 sm oa">{{ _i.value }}</pre>
</div>
</div>
</div>
</rk-sidebox>
- <v-dialog width="90%"/>
+ <v-dialog width="90%" />
<div class="trace-tree" style="height:100%">
<div class="trace-tree-inner" ref="traceTree"></div>
</div>
</div>
</template>
<script lang="js">
-import copy from '@/utils/copy';
-import * as d3 from 'd3';
-import Tree from './d3-trace-tree';
-import _ from 'lodash';
-/* eslint-disable */
-/* tslint:disable */
-export default {
- props: ['data', 'traceId'],
- data(){
- return {
- segmentId:[],
- showDetail: false,
- list: [],
- currentSpan: [],
- };
- },
- watch: {
- data() {
- if(!this.data.length) {return;}
- d3.select('.trace-tree-inner').selectAll('svg').selectAll('svg').remove();
- this.changeTree();
- this.tree.init({label:`${this.traceId}`, children: this.segmentId}, this.data);
- }
- },
- mounted() {
- window.addEventListener('resize', this.resize);
- this.changeTree();
- this.tree = new Tree(this.$refs.traceTree, this);
- this.tree.init({label:`${this.traceId}`, children: this.segmentId}, this.data);
- },
- beforeDestroy() {
- window.removeEventListener('resize', this.resize);
- },
- methods: {
- copy,
- handleSelectSpan(i) {
- this.currentSpan = i.data;
- this.showDetail = true;
+ import copy from '@/utils/copy';
+ import * as d3 from 'd3';
+ import Tree from './d3-trace-tree';
+ import _ from 'lodash';
+ /* eslint-disable */
+ /* tslint:disable */
+ export default {
+ props: ['data', 'traceId'],
+ data(){
+ return {
+ segmentId:[],
+ showDetail: false,
+ list: [],
+ currentSpan: [],
+ };
},
- traverseTree(node, spanId, segmentId, data){
- if (!node) return;
- if(node.spanId == spanId && node.segmentId == segmentId) {node.children.push(data);return;}
- if (node.children && node.children.length > 0) {
- for (let i = 0; i < node.children.length; i++) {
- this.traverseTree(node.children[i],spanId,segmentId,data);
- }
+ watch: {
+ data() {
+ if(!this.data.length) {return;}
+ d3.select('.trace-tree-inner').selectAll('svg').selectAll('svg').remove();
+ this.changeTree();
+ this.tree.init({label:`${this.traceId}`, children: this.segmentId}, this.data);
}
},
- computedScale(i) {
- // Rainbow map
- const sequentialScale = d3.scaleSequential()
- .domain([0, this.list.length + 1])
- .interpolator(d3.interpolateCool);
- return sequentialScale(i);
+ mounted() {
+ window.addEventListener('resize', this.resize);
+ this.changeTree();
+ this.tree = new Tree(this.$refs.traceTree, this);
+ this.tree.init({label:`${this.traceId}`, children: this.segmentId}, this.data);
},
- changeTree(){
- if (this.data.length === 0) return [];
- this.list = Array.from(new Set(this.data.map(i => i.serviceCode)));
- this.segmentId = [];
- const segmentGroup = {}
- const segmentIdGroup = []
- const fixSpans = [];
- const segmentHeaders = [];
- this.data.forEach((span) => {
- if (span.parentSpanId === -1) {
- segmentHeaders.push(span);
- } else {
- const index = this.data.findIndex(i => (i.segmentId === span.segmentId && i.spanId === (span.spanId - 1)));
- const fixSpanKeyContent = {
- traceId: span.traceId,
- segmentId: span.segmentId,
- spanId: span.spanId - 1,
- parentSpanId: span.spanId - 2,
- };
- if (index === -1 && !_.find(fixSpans, fixSpanKeyContent)) {
- fixSpans.push(
- {
- ...fixSpanKeyContent, refs: [], endpointName: `VNode: ${span.segmentId}`, serviceCode: 'VirtualNode', type: `[Broken] ${span.type}`, peer: '', component: `VirtualNode: #${span.spanId - 1}`, isError: true, isBroken: true, layer: 'Broken', tags: [], logs: [],
- },
- );
- }
+ beforeDestroy() {
+ window.removeEventListener('resize', this.resize);
+ },
+ methods: {
+ copy,
+ handleSelectSpan(i) {
+ this.currentSpan = i.data;
+ this.showDetail = true;
+ },
+ traverseTree(node, spanId, segmentId, data){
+ if (!node) return;
+ if(node.spanId == spanId && node.segmentId == segmentId) {node.children.push(data);return;}
+ if (node.children && node.children.length > 0) {
+ for (let i = 0; i < node.children.length; i++) {
+ this.traverseTree(node.children[i],spanId,segmentId,data);
}
- });
- segmentHeaders.forEach((span) => {
- if (span.refs.length) {
- span.refs.forEach((ref) => {
- const index = this.data.findIndex(i => (ref.parentSegmentId === i.segmentId && ref.parentSpanId === i.spanId));
- if (index === -1) {
- // create a known broken node.
- const i = ref.parentSpanId;
- const fixSpanKeyContent = {
- traceId: ref.traceId,
- segmentId: ref.parentSegmentId,
- spanId: i,
- parentSpanId: i > -1 ? 0 : -1,
- };
- !_.find(fixSpans, fixSpanKeyContent) && fixSpans.push(
+ }
+ },
+ computedScale(i) {
+ // Rainbow map
+ const sequentialScale = d3.scaleSequential()
+ .domain([0, this.list.length + 1])
+ .interpolator(d3.interpolateCool);
+ return sequentialScale(i);
+ },
+ changeTree(){
+ if (this.data.length === 0) return [];
+ this.list = Array.from(new Set(this.data.map(i => i.serviceCode)));
+ this.segmentId = [];
+ const segmentGroup = {}
+ const segmentIdGroup = []
+ const fixSpans = [];
+ const segmentHeaders = [];
+ this.data.forEach((span) => {
+ if (span.parentSpanId === -1) {
+ segmentHeaders.push(span);
+ } else {
+ const index = this.data.findIndex(i => (i.segmentId === span.segmentId && i.spanId === (span.spanId - 1)));
+ const fixSpanKeyContent = {
+ traceId: span.traceId,
+ segmentId: span.segmentId,
+ spanId: span.spanId - 1,
+ parentSpanId: span.spanId - 2,
+ };
+ if (index === -1 && !_.find(fixSpans, fixSpanKeyContent)) {
+ fixSpans.push(
{
- ...fixSpanKeyContent, refs: [], endpointName: `VNode: ${ref.parentSegmentId}`, serviceCode: 'VirtualNode', type: `[Broken] ${ref.type}`, peer: '', component: `VirtualNode: #${i}`, isError: true, isBroken: true, layer: 'Broken', tags: [], logs: [],
+ ...fixSpanKeyContent, refs: [], endpointName: `VNode: ${span.segmentId}`, serviceCode: 'VirtualNode', type: `[Broken] ${span.type}`, peer: '', component: `VirtualNode: #${span.spanId - 1}`, isError: true, isBroken: true, layer: 'Broken', tags: [], logs: [],
},
);
- // if root broken node is not exist, create a root broken node.
- if (fixSpanKeyContent.parentSpanId > -1) {
- const fixRootSpanKeyContent = {
+ }
+ }
+ });
+ segmentHeaders.forEach((span) => {
+ if (span.refs.length) {
+ span.refs.forEach((ref) => {
+ const index = this.data.findIndex(i => (ref.parentSegmentId === i.segmentId && ref.parentSpanId === i.spanId));
+ if (index === -1) {
+ // create a known broken node.
+ const i = ref.parentSpanId;
+ const fixSpanKeyContent = {
traceId: ref.traceId,
segmentId: ref.parentSegmentId,
- spanId: 0,
- parentSpanId: -1,
+ spanId: i,
+ parentSpanId: i > -1 ? 0 : -1,
};
- !_.find(fixSpans, fixRootSpanKeyContent) && fixSpans.push(
+ !_.find(fixSpans, fixSpanKeyContent) && fixSpans.push(
{
- ...fixRootSpanKeyContent,
- refs: [],
- endpointName: `VNode: ${ref.parentSegmentId}`,
- serviceCode: 'VirtualNode',
- type: `[Broken] ${ref.type}`,
- peer: '',
- component: `VirtualNode: #0`,
- isError: true,
- isBroken: true,
- layer: 'Broken',
- tags: [],
- logs: [],
+ ...fixSpanKeyContent, refs: [], endpointName: `VNode: ${ref.parentSegmentId}`, serviceCode: 'VirtualNode', type: `[Broken] ${ref.type}`, peer: '', component: `VirtualNode: #${i}`, isError: true, isBroken: true, layer: 'Broken', tags: [], logs: [],
},
);
+ // if root broken node is not exist, create a root broken node.
+ if (fixSpanKeyContent.parentSpanId > -1) {
+ const fixRootSpanKeyContent = {
+ traceId: ref.traceId,
+ segmentId: ref.parentSegmentId,
+ spanId: 0,
+ parentSpanId: -1,
+ };
+ !_.find(fixSpans, fixRootSpanKeyContent) && fixSpans.push(
+ {
+ ...fixRootSpanKeyContent,
+ refs: [],
+ endpointName: `VNode: ${ref.parentSegmentId}`,
+ serviceCode: 'VirtualNode',
+ type: `[Broken] ${ref.type}`,
+ peer: '',
+ component: `VirtualNode: #0`,
+ isError: true,
+ isBroken: true,
+ layer: 'Broken',
+ tags: [],
+ logs: [],
+ },
+ );
+ }
+ }
+ });
+ }
+ });
+ [...fixSpans, ...this.data].forEach(i => {
+ i.label=i.endpointName || 'no operation name';
+ i.children = [];
+ if(segmentGroup[i.segmentId] === undefined){
+ segmentIdGroup.push(i.segmentId);
+ segmentGroup[i.segmentId] = [];
+ segmentGroup[i.segmentId].push(i);
+ }else{
+ segmentGroup[i.segmentId].push(i);
+ }
+ });
+ segmentIdGroup.forEach(id => {
+ let currentSegment = segmentGroup[id].sort((a,b) => b.parentSpanId-a.parentSpanId);
+ currentSegment.forEach(s =>{
+ let index = currentSegment.findIndex(i => i.spanId === s.parentSpanId);
+ if (index !== -1) {
+ if ((currentSegment[index].isBroken && currentSegment[index].parentSpanId === -1) || !currentSegment[index].isBroken) {
+ currentSegment[index].children.push(s);
+ currentSegment[index].children.sort((a, b) => a.spanId - b.spanId);
}
}
- });
- }
- });
- [...fixSpans, ...this.data].forEach(i => {
- i.label=i.endpointName || 'no operation name';
- i.children = [];
- if(segmentGroup[i.segmentId] === undefined){
- segmentIdGroup.push(i.segmentId);
- segmentGroup[i.segmentId] = [];
- segmentGroup[i.segmentId].push(i);
- }else{
- segmentGroup[i.segmentId].push(i);
- }
- });
- segmentIdGroup.forEach(id => {
- let currentSegment = segmentGroup[id].sort((a,b) => b.parentSpanId-a.parentSpanId);
- currentSegment.forEach(s =>{
- let index = currentSegment.findIndex(i => i.spanId === s.parentSpanId);
- if (index !== -1) {
- if ((currentSegment[index].isBroken && currentSegment[index].parentSpanId === -1) || !currentSegment[index].isBroken) {
- currentSegment[index].children.push(s);
- currentSegment[index].children.sort((a, b) => a.spanId - b.spanId);
+ if (s.isBroken) {
+ const children = _.filter(this.data, (span) => {
+ return _.find(span.refs, {traceId: s.traceId, parentSegmentId: s.segmentId, parentSpanId: s.spanId});
+ });
+ children.length > 0 && s.children.push(...children);
}
- }
- if (s.isBroken) {
- const children = _.filter(this.data, (span) => {
- return _.find(span.refs, {traceId: s.traceId, parentSegmentId: s.segmentId, parentSpanId: s.spanId});
- });
- children.length > 0 && s.children.push(...children);
- }
+ })
+ segmentGroup[id] = currentSegment[currentSegment.length-1]
})
- segmentGroup[id] = currentSegment[currentSegment.length-1]
- })
- segmentIdGroup.forEach(id => {
- segmentGroup[id].refs.forEach(ref => {
- if(ref.traceId === this.traceId) {
- this.traverseTree(segmentGroup[ref.parentSegmentId],ref.parentSpanId,ref.parentSegmentId,segmentGroup[id])
- };
+ segmentIdGroup.forEach(id => {
+ segmentGroup[id].refs.forEach(ref => {
+ if(ref.traceId === this.traceId) {
+ this.traverseTree(segmentGroup[ref.parentSegmentId],ref.parentSpanId,ref.parentSegmentId,segmentGroup[id])
+ };
+ })
+ // if(segmentGroup[id].refs.length !==0 ) delete segmentGroup[id];
})
- // if(segmentGroup[id].refs.length !==0 ) delete segmentGroup[id];
+ for (let i in segmentGroup) {
+ if(segmentGroup[i].refs.length ===0 )
+ this.segmentId.push(segmentGroup[i]);
+ }
+ this.segmentId.forEach((_, i) => {
+ this.collapse(this.segmentId[i]);
})
- for (let i in segmentGroup) {
- if(segmentGroup[i].refs.length ===0 )
- this.segmentId.push(segmentGroup[i]);
- }
- this.segmentId.forEach((_, i) => {
- this.collapse(this.segmentId[i]);
- })
- },
- collapse(d) {
- if(d.children){
- let dur = d.endTime - d.startTime;
- d.children.forEach(i => {
- dur -= (i.endTime - i.startTime);
- })
- d.dur = dur < 0 ? 0 : dur;
- d.children.forEach((i) => this.collapse(i));
- }
- },
- resize() {
- this.tree.resize();
- },
- showCurrentSpanDetail(title, text) {
- const textLineNumber = text.split('\n').length;
- let textHeight = textLineNumber * 20.2 + 10;
- const tmpHeight = window.innerHeight * 0.9
- textHeight = textHeight >= tmpHeight ? tmpHeight : textHeight;
- this.$modal.show('dialog', {
- title,
- text: `<div style="height:${textHeight}px">${text}</div>`,
- buttons: [
- {
- title: 'Copy',
- handler: () => {
- this.copy(text);
+ },
+ collapse(d) {
+ if(d.children){
+ let dur = d.endTime - d.startTime;
+ d.children.forEach(i => {
+ dur -= (i.endTime - i.startTime);
+ })
+ d.dur = dur < 0 ? 0 : dur;
+ d.children.forEach((i) => this.collapse(i));
+ }
+ },
+ resize() {
+ this.tree.resize();
+ },
+ showCurrentSpanDetail(title, text) {
+ const textLineNumber = text.split('\n').length;
+ let textHeight = textLineNumber * 20.2 + 10;
+ const tmpHeight = window.innerHeight * 0.9
+ textHeight = textHeight >= tmpHeight ? tmpHeight : textHeight;
+ this.$modal.show('dialog', {
+ title,
+ text: `<div style="height:${textHeight}px">${text}</div>`,
+ buttons: [
+ {
+ title: 'Copy',
+ handler: () => {
+ this.copy(text);
+ },
},
- },
- {
- title: 'Close',
- },
- ],
- })
- },
- }
-};
+ {
+ title: 'Close',
+ },
+ ],
+ })
+ },
+ }
+ };
</script>
<style lang="scss">
-.trace-tree-btn{
- display: inline-block;
- border-radius: 4px;
- padding: 0px 7px;
- background-color: #40454e;
- color: #eee;
- font-size: 11px;
-}
-.trace-tree-charts{
- overflow: auto;
- flex-grow: 1;
- height: 100%;
-}
-.trace-node .group {
- cursor: pointer;
- fill-opacity: 0;
-}
-.trace-tree-inner{
- height: 100%;
-}
-.trace-node-container{
- fill: rgba(0, 0, 0, 0);
- stroke-width: 5px;
- cursor: pointer;
- &:hover{
- fill: rgba(0,0,0,0.05)
+ .trace-tree-btn {
+ display: inline-block;
+ border-radius: 4px;
+ padding: 0px 7px;
+ background-color: #40454e;
+ color: #eee;
+ font-size: 11px;
}
-}
-.trace-node .node-text {
- font: 12.5px sans-serif;
- pointer-events: none;
-}
-.domain{display: none;}
-.tree-link {
- fill: none;
- stroke: rgba(0,0,0,0.1);
- stroke-width: 2px;
-}
-.time-charts-item{
- display: inline-block;
- padding: 2px 8px;
- border: 1px solid;
- font-size: 11px;
- border-radius: 4px;
-}
- .trace-tree{
- fill: rgba(0,0,0,0);
- flex-grow: 1;
- }
- .trace-tree .trace-node rect{
- &:hover{
- fill: rgba(0,0,0,0.05)
- }
- }
-.dialog-c-text {
- white-space: pre;
- overflow: auto;
- font-family: monospace;
-}
+ .trace-tree-charts {
+ overflow: auto;
+ flex-grow: 1;
+ height: 100%;
+ }
+ .trace-node .group {
+ cursor: pointer;
+ fill-opacity: 0;
+ }
+ .trace-tree-inner {
+ height: 100%;
+ }
+ .trace-node-container {
+ fill: rgba(0, 0, 0, 0);
+ stroke-width: 5px;
+ cursor: pointer;
+ &:hover {
+ fill: rgba(0, 0, 0, 0.05);
+ }
+ }
+ .trace-node .node-text {
+ font: 12.5px sans-serif;
+ pointer-events: none;
+ }
+ .domain {
+ display: none;
+ }
+ .tree-link {
+ fill: none;
+ stroke: rgba(0, 0, 0, 0.1);
+ stroke-width: 2px;
+ }
+ .time-charts-item {
+ display: inline-block;
+ padding: 2px 8px;
+ border: 1px solid;
+ font-size: 11px;
+ border-radius: 4px;
+ }
+ .trace-tree {
+ fill: rgba(0, 0, 0, 0);
+ flex-grow: 1;
+ }
+ .trace-tree .trace-node rect {
+ &:hover {
+ fill: rgba(0, 0, 0, 0.05);
+ }
+ }
+ .dialog-c-text {
+ white-space: pre;
+ overflow: auto;
+ font-family: monospace;
+ }
</style>
diff --git a/src/views/components/trace/trace-detail.vue b/src/views/components/trace/trace-detail.vue
index d6fe194..ac85631 100644
--- a/src/views/components/trace/trace-detail.vue
+++ b/src/views/components/trace/trace-detail.vue
@@ -1,62 +1,93 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
<div class="rk-trace-detail flex-v">
- <div class="rk-trace-detail-wrapper clear" v-if="current.endpointNames">
+ <div class="rk-trace-detail-wrapper clear" v-if="current.endpointNames">
<h5 class="mb-5 mt-0">
<svg v-if="current.isError" class="icon red vm mr-5 sm">
<use xlink:href="#clear"></use>
</svg>
- <span class="vm">{{current.endpointNames[0]}}</span>
+ <span class="vm">{{ current.endpointNames[0] }}</span>
</h5>
<div class="mb-5 blue sm">
- <select class="rk-trace-detail-ids" @change="GET_TRACE_SPANS({traceId: i})">
- <option v-for="i in current.traceIds" :value="i" :key="i">{{i}}</option>
+ <select
+ class="rk-trace-detail-ids"
+ @change="GET_TRACE_SPANS({ traceId: i })"
+ >
+ <option v-for="i in current.traceIds" :value="i" :key="i">{{
+ i
+ }}</option>
</select>
- <svg class="icon vm grey link-hover cp ml-5" @click="handleClick(current.traceIds)">
- <use xlink:href="#review-list"></use>
- </svg>
+ <svg
+ class="icon vm grey link-hover cp ml-5"
+ @click="handleClick(current.traceIds)"
+ >
+ <use xlink:href="#review-list"></use>
+ </svg>
</div>
- <a class="rk-btn mr-5 sm r" :class="{'ghost':displayMode !== 'table'}" @click="displayMode = 'table'">
- <svg class="icon vm sm rk-trace-table_svg-icon">
+ <a
+ class="rk-btn mr-5 sm r"
+ :class="{ ghost: displayMode !== 'table' }"
+ @click="displayMode = 'table'"
+ >
+ <svg class="icon vm sm rk-trace-table_svg-icon">
<use xlink:href="#table"></use>
</svg>
- {{$t('table')}}</a>
- <a class="rk-btn mr-5 sm r" :class="{'ghost':displayMode !== 'tree'}" @click="displayMode = 'tree'">
+ {{ $t('table') }}</a
+ >
+ <a
+ class="rk-btn mr-5 sm r"
+ :class="{ ghost: displayMode !== 'tree' }"
+ @click="displayMode = 'tree'"
+ >
<svg class="icon vm sm">
<use xlink:href="#issue-child"></use>
</svg>
- {{$t('tree')}}</a>
- <a class="rk-btn mr-5 sm r" :class="{'ghost':displayMode !== 'list'}" @click="displayMode = 'list'">
- <svg class="icon vm sm">
+ {{ $t('tree') }}</a
+ >
+ <a
+ class="rk-btn mr-5 sm r"
+ :class="{ ghost: displayMode !== 'list' }"
+ @click="displayMode = 'list'"
+ >
+ <svg class="icon vm sm">
<use xlink:href="#list-bulleted"></use>
</svg>
- {{$t('list')}}</a>
+ {{ $t('list') }}</a
+ >
-
- <div class="rk-tag mr-5">{{this.$t('start')}}</div><span class="mr-15 sm">{{parseInt(current.start) | dateformat}}</span>
- <div class="rk-tag mr-5">{{this.$t('duration')}}</div><span class="mr-15 sm">{{current.duration}} ms</span>
- <div class="rk-tag mr-5">{{this.$t('spans')}}</div><span class="sm">{{spans.length}}</span>
+ <div class="rk-tag mr-5">{{ this.$t('start') }}</div>
+ <span class="mr-15 sm">{{ parseInt(current.start) | dateformat }}</span>
+ <div class="rk-tag mr-5">{{ this.$t('duration') }}</div>
+ <span class="mr-15 sm">{{ current.duration }} ms</span>
+ <div class="rk-tag mr-5">{{ this.$t('spans') }}</div>
+ <span class="sm">{{ spans.length }}</span>
</div>
- <TraceDetailChartList v-if="displayMode == 'list'&¤t.endpointNames" :data="spans" :traceId="current.traceIds[0]"/>
- <TraceDetailChartTree v-if="displayMode == 'tree'&¤t.endpointNames" :data="spans" :traceId="current.traceIds[0]"/>
- <TraceDetailChartTable v-if="displayMode == 'table'&¤t.endpointNames" :data="spans" :traceId="current.traceIds[0]"/>
+ <TraceDetailChartList
+ v-if="displayMode == 'list' && current.endpointNames"
+ :data="spans"
+ :traceId="current.traceIds[0]"
+ />
+ <TraceDetailChartTree
+ v-if="displayMode == 'tree' && current.endpointNames"
+ :data="spans"
+ :traceId="current.traceIds[0]"
+ />
+ <TraceDetailChartTable
+ v-if="displayMode == 'table' && current.endpointNames"
+ :data="spans"
+ :traceId="current.traceIds[0]"
+ />
<div v-if="!current.endpointNames" class="flex-h container">
<svg class="icon rk-icon-trace">
@@ -67,68 +98,74 @@
</template>
<script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator';
-import TraceDetailChartList from './trace-detail-chart-list.vue';
-import TraceDetailChartTree from './trace-detail-chart-tree.vue';
-import TraceDetailChartTable from './trace-detail-chart-table.vue';
-import { Trace, Span } from '@/types/trace';
-import { Action, State } from 'vuex-class';
-import copy from '@/utils/copy';
+ import { Vue, Component, Prop } from 'vue-property-decorator';
+ import TraceDetailChartList from './trace-detail-chart-list.vue';
+ import TraceDetailChartTree from './trace-detail-chart-tree.vue';
+ import TraceDetailChartTable from './trace-detail-chart-table.vue';
+ import { Trace, Span } from '@/types/trace';
+ import { Action, State } from 'vuex-class';
+ import copy from '@/utils/copy';
-@Component({ components: { TraceDetailChartList, TraceDetailChartTree, TraceDetailChartTable } })
-export default class TraceDetail extends Vue {
- @State('rocketbot') private rocketbot: any;
- @Action('rocketTrace/GET_TRACE_SPANS') private GET_TRACE_SPANS: any;
- @Prop() private spans!: Span[];
- @Prop() private current!: Trace;
- private mode: boolean = true;
- private displayMode: string = 'list';
- private handleClick(ids: any) {
- let copyValue = null;
- if (ids.length === 1) {
- copyValue = ids[0];
- } else {
- copyValue = ids.join(',');
+ @Component({
+ components: {
+ TraceDetailChartList,
+ TraceDetailChartTree,
+ TraceDetailChartTable,
+ },
+ })
+ export default class TraceDetail extends Vue {
+ @State('rocketbot') private rocketbot: any;
+ @Action('rocketTrace/GET_TRACE_SPANS') private GET_TRACE_SPANS: any;
+ @Prop() private spans!: Span[];
+ @Prop() private current!: Trace;
+ private mode: boolean = true;
+ private displayMode: string = 'list';
+ private handleClick(ids: any) {
+ let copyValue = null;
+ if (ids.length === 1) {
+ copyValue = ids[0];
+ } else {
+ copyValue = ids.join(',');
+ }
+ copy(copyValue);
}
- copy(copyValue);
}
-}
</script>
<style lang="scss" scoped>
-.rk-trace-detail {
- flex-shrink: 0;
- height: 100%;
- width: 75%;
- overflow-y:auto;
-}
-.rk-trace-detail-wrapper {
- padding: 8px 30px;
- border-bottom: 1px solid rgba(0,0,0,0.1);
-}
-.rk-trace-detail-ids{
- background-color: rgba(0, 0, 0, 0);
- outline: 0;
- border-style: unset;
- color: inherit;
- border: 1px solid;
- border-radius: 4px;
-}
-.rk-tag{
- display: inline-block;
- border-radius: 4px;
- padding: 0px 7px;
- background-color: #40454e;
- color: #eee;
-}
-.rk-icon-trace{
- width:100px;
- height:100px;
- margin: 0 auto;
- fill: rgba(46, 47, 51, 0.15);
-}
-.rk-trace-table_svg-icon {
- width: 11px;
- height: 11px;
-}
+ .rk-trace-detail {
+ flex-shrink: 0;
+ height: 100%;
+ width: 75%;
+ overflow-y: auto;
+ }
+ .rk-trace-detail-wrapper {
+ padding: 8px 30px;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+ }
+ .rk-trace-detail-ids {
+ background-color: rgba(0, 0, 0, 0);
+ outline: 0;
+ border-style: unset;
+ color: inherit;
+ border: 1px solid;
+ border-radius: 4px;
+ }
+ .rk-tag {
+ display: inline-block;
+ border-radius: 4px;
+ padding: 0px 7px;
+ background-color: #40454e;
+ color: #eee;
+ }
+ .rk-icon-trace {
+ width: 100px;
+ height: 100px;
+ margin: 0 auto;
+ fill: rgba(46, 47, 51, 0.15);
+ }
+ .rk-trace-table_svg-icon {
+ width: 11px;
+ height: 11px;
+ }
</style>
diff --git a/src/views/components/trace/trace-search.vue b/src/views/components/trace/trace-search.vue
index ebcd9ff..a93b51a 100644
--- a/src/views/components/trace/trace-search.vue
+++ b/src/views/components/trace/trace-search.vue
@@ -1,23 +1,17 @@
-/** * Licensed to the Apache Software Foundation (ASF) under one or more *
-contributor license agreements. See the NOTICE file distributed with * this work
-for additional information regarding copyright ownership. * The ASF licenses
-this file to You under the Apache License, Version 2.0 * (the "License"); you
-may not use this file except in compliance with * the License. You may obtain a
-copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
-required by applicable law or agreed to in writing, software * distributed under
-the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
-CONDITIONS OF ANY KIND, either express or implied. * See the License for the
-specific language governing permissions and * limitations under the License. */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreements. See the
+NOTICE file distributed with * this work for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you may not use this file except in compliance
+with * the License. You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS
+IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific
+language governing permissions and * limitations under the License. */
<template>
<div class="rk-trace-search">
<div>
<a class="rk-trace-clear-btn r" @click="status = !status">
<span class="mr-5 vm">{{ this.$t('more') }}</span>
- <svg
- class="icon trans vm"
- :style="`transform: rotate(${status ? 180 : 0}deg);`"
- >
+ <svg class="icon trans vm" :style="`transform: rotate(${status ? 180 : 0}deg);`">
<use xlink:href="#arrow-down"></use>
</svg>
</a>
@@ -42,12 +36,7 @@
:data="rocketTrace.services"
:readonly="inTopo"
/>
- <TraceSelect
- :hasSearch="true"
- :title="this.$t('instance')"
- v-model="instance"
- :data="rocketTrace.instances"
- />
+ <TraceSelect :hasSearch="true" :title="this.$t('instance')" v-model="instance" :data="rocketTrace.instances" />
<TraceSelect
:title="this.$t('status')"
:value="traceState"
@@ -55,27 +44,19 @@
:data="[
{ label: 'All', key: 'ALL' },
{ label: 'Success', key: 'SUCCESS' },
- { label: 'Error', key: 'ERROR' }
+ { label: 'Error', key: 'ERROR' },
]"
/>
<div class="mr-10" style="padding: 3px 15px 0">
<div class="sm grey">{{ this.$t('endpointName') }}</div>
- <input
- type="text"
- v-model="endpointName"
- class="rk-trace-search-input"
- />
+ <input type="text" v-model="endpointName" class="rk-trace-search-input" />
</div>
</div>
</div>
<div class="rk-trace-search-more flex-h" v-show="status">
<div class="mr-15">
<span class="sm b grey mr-10">{{ this.$t('traceID') }}:</span>
- <input
- type="text"
- v-model="traceId"
- class="rk-trace-search-input dib"
- />
+ <input type="text" v-model="traceId" class="rk-trace-search-input dib" />
</div>
<div class="mr-15">
<span class="sm b grey mr-10">{{ this.$t('duration') }}:</span>
@@ -87,299 +68,284 @@
</div>
<div>
<span class="sm b grey mr-5">{{ this.$t('timeRange') }}:</span>
- <RkDate
- class="sm"
- v-model="time"
- position="bottom"
- format="YYYY-MM-DD HH:mm:ss"
- />
+ <RkDate class="sm" v-model="time" position="bottom" format="YYYY-MM-DD HH:mm:ss" />
</div>
</div>
</div>
</template>
<script lang="ts">
-import { Duration, Option } from '@/types/global';
-import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
-import { Action, Getter, Mutation, State } from 'vuex-class';
-import TraceSelect from './trace-select.vue';
+ import { Duration, Option } from '@/types/global';
+ import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+ import { Action, Getter, Mutation, State } from 'vuex-class';
+ import TraceSelect from './trace-select.vue';
-@Component({ components: { TraceSelect } })
-export default class TraceSearch extends Vue {
- @State('rocketbot') private rocketbotGlobal: any;
- @State('rocketTrace') private rocketTrace: any;
- @Getter('durationTime') private durationTime: any;
- @Getter('duration') private duration: any;
- @Action('RESET_DURATION') private RESET_DURATION: any;
- @Action('rocketTrace/GET_SERVICES') private GET_SERVICES: any;
- @Action('rocketTrace/GET_INSTANCES') private GET_INSTANCES: any;
- @Action('rocketTrace/GET_TRACELIST') private GET_TRACELIST: any;
- @Action('rocketTrace/SET_TRACE_FORM') private SET_TRACE_FORM: any;
- @Mutation('rocketTrace/SET_TRACE_FORM_ITEM') private SET_TRACE_FORM_ITEM: any;
- @Prop({ default: false, type: Boolean })
- private inTopo!: boolean;
- @Prop({ default: () => ({label: 'All', key: ''})})
- private propsService!: Option;
- private service: Option = {label: 'All', key: ''};
- private time!: Date[];
- private status: boolean = true;
- private maxTraceDuration: string =
- localStorage.getItem('maxTraceDuration') || '';
- private minTraceDuration: string =
- localStorage.getItem('minTraceDuration') || '';
- private instance: Option = { label: 'All', key: '' };
- private endpointName: string = localStorage.getItem('endpointName') || '';
- private traceId: string = localStorage.getItem('traceId') || '';
- private traceState: Option = { label: 'All', key: 'ALL' };
+ @Component({ components: { TraceSelect } })
+ export default class TraceSearch extends Vue {
+ @State('rocketbot') private rocketbotGlobal: any;
+ @State('rocketTrace') private rocketTrace: any;
+ @Getter('durationTime') private durationTime: any;
+ @Getter('duration') private duration: any;
+ @Action('RESET_DURATION') private RESET_DURATION: any;
+ @Action('rocketTrace/GET_SERVICES') private GET_SERVICES: any;
+ @Action('rocketTrace/GET_INSTANCES') private GET_INSTANCES: any;
+ @Action('rocketTrace/GET_TRACELIST') private GET_TRACELIST: any;
+ @Action('rocketTrace/SET_TRACE_FORM') private SET_TRACE_FORM: any;
+ @Mutation('rocketTrace/SET_TRACE_FORM_ITEM')
+ private SET_TRACE_FORM_ITEM: any;
+ @Prop({ default: false, type: Boolean })
+ private inTopo!: boolean;
+ @Prop({ default: () => ({ label: 'All', key: '' }) })
+ private propsService!: Option;
+ private service: Option = { label: 'All', key: '' };
+ private time!: Date[];
+ private status: boolean = true;
+ private maxTraceDuration: string = localStorage.getItem('maxTraceDuration') || '';
+ private minTraceDuration: string = localStorage.getItem('minTraceDuration') || '';
+ private instance: Option = { label: 'All', key: '' };
+ private endpointName: string = localStorage.getItem('endpointName') || '';
+ private traceId: string = localStorage.getItem('traceId') || '';
+ private traceState: Option = { label: 'All', key: 'ALL' };
- private dateFormat = (date: Date, step: string) => {
- const year = date.getFullYear();
- const monthTemp = date.getMonth() + 1;
- let month: string = `${monthTemp}`;
- if (monthTemp < 10) {
- month = `0${monthTemp}`;
+ private dateFormat(date: Date, step: string) {
+ const year = date.getFullYear();
+ const monthTemp = date.getMonth() + 1;
+ let month: string = `${monthTemp}`;
+ if (monthTemp < 10) {
+ month = `0${monthTemp}`;
+ }
+ if (step === 'MONTH') {
+ return `${year}-${month}`;
+ }
+ const dayTemp = date.getDate();
+ let day: string = `${dayTemp}`;
+ if (dayTemp < 10) {
+ day = `0${dayTemp}`;
+ }
+ if (step === 'DAY') {
+ return `${year}-${month}-${day}`;
+ }
+ const hourTemp = date.getHours();
+ let hour: string = `${hourTemp}`;
+ if (hourTemp < 10) {
+ hour = `0${hourTemp}`;
+ }
+ if (step === 'HOUR') {
+ return `${year}-${month}-${day} ${hour}`;
+ }
+ const minuteTemp = date.getMinutes();
+ let minute: string = `${minuteTemp}`;
+ if (minuteTemp < 10) {
+ minute = `0${minuteTemp}`;
+ }
+ if (step === 'MINUTE') {
+ return `${year}-${month}-${day} ${hour}${minute}`;
+ }
}
- if (step === 'MONTH') {
- return `${year}-${month}`;
- }
- const dayTemp = date.getDate();
- let day: string = `${dayTemp}`;
- if (dayTemp < 10) {
- day = `0${dayTemp}`;
- }
- if (step === 'DAY') {
- return `${year}-${month}-${day}`;
- }
- const hourTemp = date.getHours();
- let hour: string = `${hourTemp}`;
- if (hourTemp < 10) {
- hour = `0${hourTemp}`;
- }
- if (step === 'HOUR') {
- return `${year}-${month}-${day} ${hour}`;
- }
- const minuteTemp = date.getMinutes();
- let minute: string = `${minuteTemp}`;
- if (minuteTemp < 10) {
- minute = `0${minuteTemp}`;
- }
- if (step === 'MINUTE') {
- return `${year}-${month}-${day} ${hour}${minute}`;
- }
- }
- private globalTimeFormat = (time: Date[]): any => {
- let step = 'MINUTE';
- const unix = Math.round(time[1].getTime()) - Math.round(time[0].getTime());
- if (unix <= 60 * 60 * 1000) {
- step = 'MINUTE';
- } else if (unix <= 24 * 60 * 60 * 1000) {
- step = 'HOUR';
- } else if (unix <= 30 * 24 * 60 * 60 * 1000) {
- step = 'DAY';
- } else {
- step = 'MONTH';
+ private globalTimeFormat(time: Date[]) {
+ let step = 'MINUTE';
+ const unix = Math.round(time[1].getTime()) - Math.round(time[0].getTime());
+ if (unix <= 60 * 60 * 1000) {
+ step = 'MINUTE';
+ } else if (unix <= 24 * 60 * 60 * 1000) {
+ step = 'HOUR';
+ } else if (unix <= 30 * 24 * 60 * 60 * 1000) {
+ step = 'DAY';
+ } else {
+ step = 'MONTH';
+ }
+ return {
+ start: this.dateFormat(time[0], step),
+ end: this.dateFormat(time[1], step),
+ step,
+ };
}
- return {
- start: this.dateFormat(time[0], step),
- end: this.dateFormat(time[1], step),
- step,
- };
- }
- private chooseService(i: any) {
- if (this.service.key === i.key) {
- return;
+ private chooseService(i: any) {
+ if (this.service.key === i.key) {
+ return;
+ }
+ this.instance = { label: 'All', key: '' };
+ this.service = i;
+ if (i.key === '') {
+ return;
+ }
+ this.GET_INSTANCES({ duration: this.durationTime, serviceId: i.key });
}
- this.instance = { label: 'All', key: '' };
- this.service = i;
- if (i.key === '') {
- return;
- }
- this.GET_INSTANCES({ duration: this.durationTime, serviceId: i.key });
- }
- private chooseStatus(i: any) {
- this.traceState = i;
- }
-
- private getTraceList() {
- this.GET_SERVICES({ duration: this.durationTime });
- const temp: any = {
- queryDuration: this.globalTimeFormat([
- new Date(
- this.time[0].getTime() +
- (parseInt(this.rocketbotGlobal.utc, 10) +
- new Date().getTimezoneOffset() / 60) *
- 3600000,
- ),
- new Date(
- this.time[1].getTime() +
- (parseInt(this.rocketbotGlobal.utc, 10) +
- new Date().getTimezoneOffset() / 60) *
- 3600000,
- ),
- ]),
- traceState: this.traceState.key,
- paging: { pageNum: 1, pageSize: 15, needTotal: true },
- queryOrder: this.rocketTrace.traceForm.queryOrder,
- };
-
- if (this.service.key) {
- temp.serviceId = this.service.key;
+ private chooseStatus(i: any) {
+ this.traceState = i;
}
- if (this.instance.key) {
- temp.serviceInstanceId = this.instance.key;
- }
- if (this.maxTraceDuration) {
- temp.maxTraceDuration = this.maxTraceDuration;
- localStorage.setItem('maxTraceDuration', this.maxTraceDuration);
- }
- if (this.minTraceDuration) {
- temp.minTraceDuration = this.minTraceDuration;
- localStorage.setItem('minTraceDuration', this.minTraceDuration);
- }
- if (this.endpointName) {
- temp.endpointName = this.endpointName;
- localStorage.setItem('endpointName', this.endpointName);
- }
- if (this.traceId) {
- temp.traceId = this.traceId;
- localStorage.setItem('traceId', this.traceId);
- }
- this.SET_TRACE_FORM(temp);
- this.$eventBus.$emit('SET_LOADING_TRUE', () => {
- this.GET_TRACELIST().then(() => {
- this.$eventBus.$emit('SET_LOADING_FALSE');
- });
- });
- }
+ private getTraceList() {
+ this.GET_SERVICES({ duration: this.durationTime });
+ const temp: any = {
+ queryDuration: this.globalTimeFormat([
+ new Date(
+ this.time[0].getTime() +
+ (parseInt(this.rocketbotGlobal.utc, 10) + new Date().getTimezoneOffset() / 60) * 3600000,
+ ),
+ new Date(
+ this.time[1].getTime() +
+ (parseInt(this.rocketbotGlobal.utc, 10) + new Date().getTimezoneOffset() / 60) * 3600000,
+ ),
+ ]),
+ traceState: this.traceState.key,
+ paging: { pageNum: 1, pageSize: 15, needTotal: true },
+ queryOrder: this.rocketTrace.traceForm.queryOrder,
+ };
- private clearSearch() {
- this.RESET_DURATION();
- this.status = true;
- this.maxTraceDuration = '';
- localStorage.removeItem('maxTraceDuration');
- this.minTraceDuration = '';
- localStorage.removeItem('minTraceDuration');
- this.service = { label: 'All', key: '' };
- this.instance = { label: 'All', key: '' };
- this.endpointName = '';
- localStorage.removeItem('endpointName');
- this.traceId = '';
- localStorage.removeItem('traceId');
- this.traceState = { label: 'All', key: 'ALL' };
- this.SET_TRACE_FORM_ITEM({ type: 'queryOrder', data: '' });
- this.getTraceList();
- }
+ if (this.service.key) {
+ temp.serviceId = this.service.key;
+ }
+ if (this.instance.key) {
+ temp.serviceInstanceId = this.instance.key;
+ }
+ if (this.maxTraceDuration) {
+ temp.maxTraceDuration = this.maxTraceDuration;
+ localStorage.setItem('maxTraceDuration', this.maxTraceDuration);
+ }
+ if (this.minTraceDuration) {
+ temp.minTraceDuration = this.minTraceDuration;
+ localStorage.setItem('minTraceDuration', this.minTraceDuration);
+ }
+ if (this.endpointName) {
+ temp.endpointName = this.endpointName;
+ localStorage.setItem('endpointName', this.endpointName);
+ }
+ if (this.traceId) {
+ temp.traceId = this.traceId;
+ localStorage.setItem('traceId', this.traceId);
+ }
+ this.SET_TRACE_FORM(temp);
- @Watch('rocketbotGlobal.durationRow')
- private durationRowWatch(value: Duration) {
- this.time = [value.start, value.end];
- }
-
- private created() {
- this.endpointName = this.$route.query.endpointname
- ? this.$route.query.endpointname.toString()
- : this.endpointName;
- this.traceId = this.$route.query.traceid
- ? this.$route.query.traceid.toString()
- : this.traceId;
- this.time = [
- this.rocketbotGlobal.durationRow.start,
- this.rocketbotGlobal.durationRow.end,
- ];
- }
-
- private mounted() {
- if (this.inTopo) {
- this.service = this.propsService;
- }
- this.getTraceList();
- if (this.service && this.service.key) {
- this.GET_INSTANCES({
- duration: this.durationTime,
- serviceId: this.service.key,
+ this.$eventBus.$emit('SET_LOADING_TRUE', () => {
+ this.GET_TRACELIST().then(() => {
+ this.$eventBus.$emit('SET_LOADING_FALSE');
+ });
});
}
+
+ private clearSearch() {
+ this.RESET_DURATION();
+ this.status = true;
+ this.maxTraceDuration = '';
+ localStorage.removeItem('maxTraceDuration');
+ this.minTraceDuration = '';
+ localStorage.removeItem('minTraceDuration');
+ this.service = { label: 'All', key: '' };
+ this.instance = { label: 'All', key: '' };
+ this.endpointName = '';
+ localStorage.removeItem('endpointName');
+ this.traceId = '';
+ localStorage.removeItem('traceId');
+ this.traceState = { label: 'All', key: 'ALL' };
+ this.SET_TRACE_FORM_ITEM({ type: 'queryOrder', data: '' });
+ this.getTraceList();
+ }
+
+ @Watch('rocketbotGlobal.durationRow')
+ private durationRowWatch(value: Duration) {
+ this.time = [value.start, value.end];
+ }
+
+ private created() {
+ this.endpointName = this.$route.query.endpointname
+ ? this.$route.query.endpointname.toString()
+ : this.endpointName;
+ this.traceId = this.$route.query.traceid ? this.$route.query.traceid.toString() : this.traceId;
+ this.time = [this.rocketbotGlobal.durationRow.start, this.rocketbotGlobal.durationRow.end];
+ }
+
+ private mounted() {
+ if (this.inTopo) {
+ this.service = this.propsService;
+ }
+ this.getTraceList();
+ if (this.service && this.service.key) {
+ this.GET_INSTANCES({
+ duration: this.durationTime,
+ serviceId: this.service.key,
+ });
+ }
+ }
}
-}
</script>
<style lang="scss">
-.rk-trace-search {
- flex-shrink: 0;
- background-color: #333840;
- color: #eee;
- width: 100%;
- padding: 3px 15px 8px;
-}
+ .rk-trace-search {
+ flex-shrink: 0;
+ background-color: #333840;
+ color: #eee;
+ width: 100%;
+ padding: 3px 15px 8px;
+ }
-.rk-trace-search-input {
- border-style: unset;
- outline: 0;
- padding: 2px 5px;
- border-radius: 3px;
-}
-
-.rk-trace-search-range,
-.rk-auto-select {
- border-radius: 3px;
- background-color: #fff;
- padding: 1px;
- border-radius: 3px;
-
- input {
- width: 38px;
+ .rk-trace-search-input {
border-style: unset;
outline: 0;
+ padding: 2px 5px;
+ border-radius: 3px;
}
-}
-.rk-trace-search-btn {
- padding: 3px 9px;
- background-color: #484b55;
- border-radius: 4px;
- margin-top: 12px;
+ .rk-trace-search-range,
+ .rk-auto-select {
+ border-radius: 3px;
+ background-color: #fff;
+ padding: 1px;
+ border-radius: 3px;
- &.bg-blue {
- background-color: #448dfe;
+ input {
+ width: 38px;
+ border-style: unset;
+ outline: 0;
+ }
}
-}
-.rk-trace-clear-btn {
- padding: 3px 9px;
- background-color: #484b55;
- border-radius: 4px;
- margin-top: 12px;
+ .rk-trace-search-btn {
+ padding: 3px 9px;
+ background-color: #484b55;
+ border-radius: 4px;
+ margin-top: 12px;
- &.bg-warning {
- background-color: #fbb03b;
+ &.bg-blue {
+ background-color: #448dfe;
+ }
}
-}
-.rk-trace-search-more {
- background-color: #484b55;
- padding: 4px 10px;
- border-radius: 3px;
- margin-top: 8px;
- position: relative;
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
+ .rk-trace-clear-btn {
+ padding: 3px 9px;
+ background-color: #484b55;
+ border-radius: 4px;
+ margin-top: 12px;
- &:after {
- bottom: 100%;
- right: 30px;
- border: solid transparent;
- content: ' ';
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
- border-color: rgba(0, 0, 0, 0);
- border-bottom-color: #484b55;
- border-width: 8px;
- margin-right: 0px;
+ &.bg-warning {
+ background-color: #fbb03b;
+ }
}
-}
+
+ .rk-trace-search-more {
+ background-color: #484b55;
+ padding: 4px 10px;
+ border-radius: 3px;
+ margin-top: 8px;
+ position: relative;
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
+
+ &:after {
+ bottom: 100%;
+ right: 30px;
+ border: solid transparent;
+ content: ' ';
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ border-color: rgba(0, 0, 0, 0);
+ border-bottom-color: #484b55;
+ border-width: 8px;
+ margin-right: 0px;
+ }
+ }
</style>
diff --git a/src/views/components/trace/trace-select.vue b/src/views/components/trace/trace-select.vue
index bff904f..2861f52 100644
--- a/src/views/components/trace/trace-select.vue
+++ b/src/views/components/trace/trace-select.vue
@@ -1,120 +1,151 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
- <div class="rk-trace-sel-wrapper flex-h" v-clickout="() => { visible = false;search = '';}"
- :class="{'cp':!readonly,'active':visible}">
- <div class="rk-trace-bar-i flex-h" @click="visible = !visible&&!readonly">
+ <div
+ class="rk-trace-sel-wrapper flex-h"
+ v-clickout="
+ () => {
+ visible = false;
+ search = '';
+ }
+ "
+ :class="{ cp: !readonly, active: visible }"
+ >
+ <div class="rk-trace-bar-i flex-h" @click="visible = !visible && !readonly">
<div class="mr-15 rk-trace-bar-i-text">
- <div class="sm grey">{{title}}</div>
- <div class="ell" v-tooltip:right.ellipsis="value.label || ''">{{value.label || ''}}</div>
+ <div class="sm grey">{{ title }}</div>
+ <div class="ell" v-tooltip:right.ellipsis="value.label || ''">
+ {{ value.label || '' }}
+ </div>
</div>
- <svg v-if="!readonly" class="icon lg trans" :style="`transform: rotate(${visible?180:0}deg)`">
+ <svg
+ v-if="!readonly"
+ class="icon lg trans"
+ :style="`transform: rotate(${visible ? 180 : 0}deg)`"
+ >
<use xlink:href="#arrow-down"></use>
</svg>
</div>
<div class="rk-trace-sel" v-if="visible">
<div v-if="hasSearch">
- <input type="text" class="rk-trace-sel-search" v-model="search" :placeholder="`${this.$t('search')}...`">
+ <input
+ type="text"
+ class="rk-trace-sel-search"
+ v-model="search"
+ :placeholder="`${this.$t('search')}...`"
+ />
<svg class="icon sm close" @click="search = ''" v-if="search">
<use xlink:href="#clear"></use>
</svg>
</div>
<div class="rk-trace-opt-wrapper scroll_hide">
- <div class="rk-trace-opt ell" @click="handleSelect(i)" :class="{'active':i.key === value.key}" v-for="i in filterData" :key="i.key">{{i.label}}</div>
+ <div
+ class="rk-trace-opt ell"
+ @click="handleSelect(i)"
+ :class="{ active: i.key === value.key }"
+ v-for="i in filterData"
+ :key="i.key"
+ >
+ {{ i.label }}
+ </div>
</div>
</div>
</div>
</template>
<script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator';
-@Component
-export default class TraceSelect extends Vue {
- @Prop() public data!: any;
- @Prop() public value!: any;
- @Prop() public title!: string;
- @Prop({default: false}) public hasSearch!: boolean;
- @Prop({default: false})
- public readonly!: boolean;
- public search: string = '';
- public visible: boolean = false;
- get filterData() {
- return this.data.filter((i: any) => i.label.toUpperCase().indexOf(this.search.toUpperCase()) !== -1);
+ import { Vue, Component, Prop } from 'vue-property-decorator';
+ @Component
+ export default class TraceSelect extends Vue {
+ @Prop() public data!: any;
+ @Prop() public value!: any;
+ @Prop() public title!: string;
+ @Prop({ default: false }) public hasSearch!: boolean;
+ @Prop({ default: false })
+ public readonly!: boolean;
+ public search: string = '';
+ public visible: boolean = false;
+ get filterData() {
+ return this.data.filter(
+ (i: any) =>
+ i.label.toUpperCase().indexOf(this.search.toUpperCase()) !== -1,
+ );
+ }
+ public handleSelect(i: any) {
+ this.$emit('input', i);
+ this.visible = false;
+ }
}
- public handleSelect(i: any) {
- this.$emit('input', i);
- this.visible = false;
- }
-}
</script>
<style lang="scss" scoped>
-.rk-trace-sel-wrapper {
- position: relative;
- z-index: 2;
- height: 100%;
- justify-content: space-between;
- .sm{line-height: 13px}
- .icon {flex-shrink: 0}
-}
-.rk-trace-bar-i-text{
- max-width: 150px;
- min-width: 80px;
-}
-.rk-trace-bar-i {
- height: 100%;
- padding: 0 15px;
- border-right: 2px solid #252a2f;
-}
-.rk-trace-sel{
- position: absolute;
- top: 44px;
- box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
- background-color: #252a2f;
- width: 100%;
- border-radius: 3px;
- overflow: hidden;
- .close{
+ .rk-trace-sel-wrapper {
+ position: relative;
+ z-index: 2;
+ height: 100%;
+ justify-content: space-between;
+ .sm {
+ line-height: 13px;
+ }
+ .icon {
+ flex-shrink: 0;
+ }
+ }
+ .rk-trace-bar-i-text {
+ max-width: 150px;
+ min-width: 80px;
+ }
+ .rk-trace-bar-i {
+ height: 100%;
+ padding: 0 15px;
+ border-right: 2px solid #252a2f;
+ }
+ .rk-trace-sel {
position: absolute;
- right: 10px;
- top: 12px;
- opacity: 0.6;
- &:hover{opacity: 1;}
+ top: 44px;
+ box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
+ background-color: #252a2f;
+ width: 100%;
+ border-radius: 3px;
+ overflow: hidden;
+ .close {
+ position: absolute;
+ right: 10px;
+ top: 12px;
+ opacity: 0.6;
+ &:hover {
+ opacity: 1;
+ }
+ }
}
-}
-.rk-trace-opt{
- padding: 7px 15px;
- &.active,&:hover{
- background-color: #40454e;
+ .rk-trace-opt {
+ padding: 7px 15px;
+ &.active,
+ &:hover {
+ background-color: #40454e;
+ }
}
-}
-.rk-trace-sel-search{
- width: calc(100% - 4px);
- border:0;
- background-color: #333840;
- color: #eee;
- outline: 0;
- padding: 7px 25px 7px 10px;
- margin: 2px;
-}
-.rk-trace-opt-wrapper{
- overflow: auto;
- max-height: 200px;
- padding-bottom: 2px;
-}
+ .rk-trace-sel-search {
+ width: calc(100% - 4px);
+ border: 0;
+ background-color: #333840;
+ color: #eee;
+ outline: 0;
+ padding: 7px 25px 7px 10px;
+ margin: 2px;
+ }
+ .rk-trace-opt-wrapper {
+ overflow: auto;
+ max-height: 200px;
+ padding-bottom: 2px;
+ }
</style>
diff --git a/src/views/components/trace/trace-table.vue b/src/views/components/trace/trace-table.vue
index 4b26fef..bb6e541 100644
--- a/src/views/components/trace/trace-table.vue
+++ b/src/views/components/trace/trace-table.vue
@@ -1,181 +1,214 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
- <div class="rk-trace-t flex-v">
- <div class="rk-trace-t-tool flex-h">
- <RkPage :currentSize="15" :currentPage="rocketTrace.traceForm.paging.pageNum" @changePage="page" :total="rocketTrace.traceTotal"/>
- <select class='grey' @change="changeSort" :value="rocketTrace.traceForm.queryOrder">
- <option value="BY_START_TIME">{{this.$t('startTime')}}</option>
- <option value="BY_DURATION">{{this.$t('duration')}}</option>
- </select>
- </div>
- <div class="rk-trace-t-loading" v-show="loading">
- <svg class="icon loading">
- <use xlink:href="#spinner"></use>
- </svg>
- </div>
- <div class="rk-trace-t-wrapper scroll_hide">
- <table class="rk-trace-t">
- <tr class="rk-trace-tr cp" v-for="(i, index) in rocketTrace.traceList" @click="selectTrace(i)" :key="index">
- <td class="rk-trace-td" :class="{
- 'rk-trace-success':!i.isError,
- 'rk-trace-error':i.isError,
- 'selected': selectedKey == i.key
- }">
- <div class="ell mb-5" :class="{
- 'blue':!i.isError,
- 'red':i.isError,
- }"><span class="b">{{i.endpointNames[0]}}</span></div>
- <div class="grey ell sm"><span class="rk-tag mr-10 sm">{{i.duration}} ms</span>{{parseInt(i.start) | dateformat}}</div>
- </td>
- </tr>
- </table>
- </div>
+ <div class="rk-trace-t flex-v">
+ <div class="rk-trace-t-tool flex-h">
+ <RkPage
+ :currentSize="15"
+ :currentPage="rocketTrace.traceForm.paging.pageNum"
+ @changePage="page"
+ :total="rocketTrace.traceTotal"
+ />
+ <select
+ class="grey"
+ @change="changeSort"
+ :value="rocketTrace.traceForm.queryOrder"
+ >
+ <option value="BY_START_TIME">{{ this.$t('startTime') }}</option>
+ <option value="BY_DURATION">{{ this.$t('duration') }}</option>
+ </select>
</div>
+ <div class="rk-trace-t-loading" v-show="loading">
+ <svg class="icon loading">
+ <use xlink:href="#spinner"></use>
+ </svg>
+ </div>
+ <div class="rk-trace-t-wrapper scroll_hide">
+ <table class="rk-trace-t">
+ <tr
+ class="rk-trace-tr cp"
+ v-for="(i, index) in rocketTrace.traceList"
+ @click="selectTrace(i)"
+ :key="index"
+ >
+ <td
+ class="rk-trace-td"
+ :class="{
+ 'rk-trace-success': !i.isError,
+ 'rk-trace-error': i.isError,
+ selected: selectedKey == i.key,
+ }"
+ >
+ <div
+ class="ell mb-5"
+ :class="{
+ blue: !i.isError,
+ red: i.isError,
+ }"
+ >
+ <span class="b">{{ i.endpointNames[0] }}</span>
+ </div>
+ <div class="grey ell sm">
+ <span class="rk-tag mr-10 sm">{{ i.duration }} ms</span
+ >{{ parseInt(i.start) | dateformat }}
+ </div>
+ </td>
+ </tr>
+ </table>
+ </div>
+ </div>
</template>
<script lang="ts">
-import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
-import { Action, Getter, Mutation, State } from 'vuex-class';
-@Component
-export default class TraceTable extends Vue {
- @State('rocketTrace') private rocketTrace: any;
- @State('rocketbot') private rocketbot: any;
- @Mutation('rocketTrace/SET_TRACE_FORM_ITEM') private SET_TRACE_FORM_ITEM: any;
- @Mutation('rocketTrace/SET_CURRENT_TRACE') private SET_CURRENT_TRACE: any;
- @Mutation('rocketTrace/SET_DEFAULT_EMPTY_TRACE') private SET_DEFAULT_EMPTY_TRACE: any;
- @Action('rocketTrace/GET_TRACELIST') private GET_TRACELIST: any;
- @Action('rocketTrace/GET_TRACE_SPANS') private GET_TRACE_SPANS: any;
- private loading: boolean = false;
- private selectedKey: string = '';
- @Watch('rocketTrace.traceList')
- private onTraceListChange() {
- if (this.rocketTrace.traceList && this.rocketTrace.traceList.length > 0) {
- this.selectTrace(this.rocketTrace.traceList[0]);
- }
- if (this.rocketTrace.traceList && this.rocketTrace.traceList.length === 0) {
- this.SET_DEFAULT_EMPTY_TRACE();
- }
- }
- private selectTrace(i: any) {
- this.SET_CURRENT_TRACE(i);
- this.selectedKey = i.key;
- this.$eventBus.$emit('TRACE-TABLE-LOADING');
- this.$eventBus.$emit('TRACE-LIST-LOADING');
- if (i.traceIds.length) {
- this.GET_TRACE_SPANS({traceId: i.traceIds[0]});
- }
- }
- private changeSort(e: any) {
- this.SET_TRACE_FORM_ITEM({type: 'queryOrder', data: e.target.options[e.target.selectedIndex].value});
- this.SET_TRACE_FORM_ITEM({type: 'paging', data: { pageNum: 1, pageSize: 15, needTotal: true}});
- this.GET_TRACELIST();
- }
- private page(p: number) {
- this.loading = true;
- this.SET_TRACE_FORM_ITEM({type: 'paging', data: { pageNum: p, pageSize: 15, needTotal: true}});
- this.GET_TRACELIST().then(() => {
- this.loading = false;
- });
- }
- private created() {
- this.$eventBus.$on('SET_LOADING_TRUE', this, (cb: any) => {
- this.loading = true;
- if (cb) {
- cb();
+ import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
+ import { Action, Getter, Mutation, State } from 'vuex-class';
+ @Component
+ export default class TraceTable extends Vue {
+ @State('rocketTrace') private rocketTrace: any;
+ @State('rocketbot') private rocketbot: any;
+ @Mutation('rocketTrace/SET_TRACE_FORM_ITEM')
+ private SET_TRACE_FORM_ITEM: any;
+ @Mutation('rocketTrace/SET_CURRENT_TRACE') private SET_CURRENT_TRACE: any;
+ @Mutation('rocketTrace/SET_DEFAULT_EMPTY_TRACE')
+ private SET_DEFAULT_EMPTY_TRACE: any;
+ @Action('rocketTrace/GET_TRACELIST') private GET_TRACELIST: any;
+ @Action('rocketTrace/GET_TRACE_SPANS') private GET_TRACE_SPANS: any;
+ private loading: boolean = false;
+ private selectedKey: string = '';
+ @Watch('rocketTrace.traceList')
+ private onTraceListChange() {
+ if (this.rocketTrace.traceList && this.rocketTrace.traceList.length > 0) {
+ this.selectTrace(this.rocketTrace.traceList[0]);
}
- });
- this.$eventBus.$on('SET_LOADING_FALSE', this, () => {
- this.loading = false;
- });
+ if (
+ this.rocketTrace.traceList &&
+ this.rocketTrace.traceList.length === 0
+ ) {
+ this.SET_DEFAULT_EMPTY_TRACE();
+ }
+ }
+ private selectTrace(i: any) {
+ this.SET_CURRENT_TRACE(i);
+ this.selectedKey = i.key;
+ this.$eventBus.$emit('TRACE-TABLE-LOADING');
+ this.$eventBus.$emit('TRACE-LIST-LOADING');
+ if (i.traceIds.length) {
+ this.GET_TRACE_SPANS({ traceId: i.traceIds[0] });
+ }
+ }
+ private changeSort(e: any) {
+ this.SET_TRACE_FORM_ITEM({
+ type: 'queryOrder',
+ data: e.target.options[e.target.selectedIndex].value,
+ });
+ this.SET_TRACE_FORM_ITEM({
+ type: 'paging',
+ data: { pageNum: 1, pageSize: 15, needTotal: true },
+ });
+ this.GET_TRACELIST();
+ }
+ private page(p: number) {
+ this.loading = true;
+ this.SET_TRACE_FORM_ITEM({
+ type: 'paging',
+ data: { pageNum: p, pageSize: 15, needTotal: true },
+ });
+ this.GET_TRACELIST().then(() => {
+ this.loading = false;
+ });
+ }
+ private created() {
+ this.$eventBus.$on('SET_LOADING_TRUE', this, (cb: any) => {
+ this.loading = true;
+ if (cb) {
+ cb();
+ }
+ });
+ this.$eventBus.$on('SET_LOADING_FALSE', this, () => {
+ this.loading = false;
+ });
+ }
}
-}
</script>
<style lang="scss">
-.rk-trace-t{
- flex-grow: 1;
- height: 100%;
- position: relative;
-}
-.rk-trace-t-tool{
- flex-shrink: 0;
- background-color: rgba(196, 200, 225, 0.2);
- justify-content: space-between;
- padding-right: 5px;
- select{
- background-color: rgba(0, 0, 0, 0);
- outline: 0;
- border-style: unset;
+ .rk-trace-t {
+ flex-grow: 1;
+ height: 100%;
+ position: relative;
}
- padding-top: 1px;
- border-bottom: 1px solid #c1c5ca41;
- border-right: 1px solid #c1c5ca41;
- height: 35px;
-}
-.rk-trace-t-wrapper{
- overflow: auto;
- flex-grow: 1;
- border-right: 1px solid rgba(0,0,0,0.1);
-}
-.rk-trace-t-loading{
- text-align: center;
- position: absolute;
- width: 100%;
- height: 70px;
- margin-top: 40px;
- line-height: 88px;
- overflow: hidden;
- .icon{
- width: 30px;
- height: 30px;
+ .rk-trace-t-tool {
+ flex-shrink: 0;
+ background-color: rgba(196, 200, 225, 0.2);
+ justify-content: space-between;
+ padding-right: 5px;
+ select {
+ background-color: rgba(0, 0, 0, 0);
+ outline: 0;
+ border-style: unset;
+ }
+ padding-top: 1px;
+ border-bottom: 1px solid #c1c5ca41;
+ border-right: 1px solid #c1c5ca41;
+ height: 35px;
}
-}
-.rk-trace-t {
- width: 100%;
- border-spacing: 0;
- table-layout: fixed;
-}
-.rk-trace-tr{
- &:hover{
- background-color: rgba(0,0,0,.04)
+ .rk-trace-t-wrapper {
+ overflow: auto;
+ flex-grow: 1;
+ border-right: 1px solid rgba(0, 0, 0, 0.1);
}
-}
-.rk-trace-td {
- padding: 8px 10px;
- border-bottom: 1px solid rgba(0,0,0,.07);
- &.selected {
- background-color:#ededed;
+ .rk-trace-t-loading {
+ text-align: center;
+ position: absolute;
+ width: 100%;
+ height: 70px;
+ margin-top: 40px;
+ line-height: 88px;
+ overflow: hidden;
+ .icon {
+ width: 30px;
+ height: 30px;
+ }
}
-}
-.rk-trace-success{
- border-left: 4px solid rgba(46, 47, 51, 0.1);
-}
-.rk-trace-warning{
- border-left: 4px solid #FBB03B;
-}
-.rk-trace-error{
- border-left: 4px solid #E54C17;
-}
-.rk-tag{
- border-radius: 4px;
- padding-right: 5px;
- padding-left: 5px;
- background-color: #40454e;
- color: #eee;
-}
+ .rk-trace-t {
+ width: 100%;
+ border-spacing: 0;
+ table-layout: fixed;
+ }
+ .rk-trace-tr {
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.04);
+ }
+ }
+ .rk-trace-td {
+ padding: 8px 10px;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+ &.selected {
+ background-color: #ededed;
+ }
+ }
+ .rk-trace-success {
+ border-left: 4px solid rgba(46, 47, 51, 0.1);
+ }
+ .rk-trace-warning {
+ border-left: 4px solid #fbb03b;
+ }
+ .rk-trace-error {
+ border-left: 4px solid #e54c17;
+ }
+ .rk-tag {
+ border-radius: 4px;
+ padding-right: 5px;
+ padding-left: 5px;
+ background-color: #40454e;
+ color: #eee;
+ }
</style>
diff --git a/src/views/containers/alarm.vue b/src/views/containers/alarm.vue
index 3cd75e2..1663ca7 100644
--- a/src/views/containers/alarm.vue
+++ b/src/views/containers/alarm.vue
@@ -1,56 +1,56 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
<div class="rk-alarm flex-v">
- <AlarmTool :durationTime="durationTime" :total="rocketAlarm.total" :alarmScope="alarmScope" :inTopo="inTopo" :prop-keyword="keyword"/>
+ <AlarmTool
+ :durationTime="durationTime"
+ :total="rocketAlarm.total"
+ :alarmScope="alarmScope"
+ :inTopo="inTopo"
+ :prop-keyword="keyword"
+ />
<div style="flex-grow: 1;overflow: auto;height: 100%;">
- <AlarmTable :data="rocketAlarm.alarmService"/>
+ <AlarmTable :data="rocketAlarm.alarmService" />
</div>
</div>
</template>
<script lang="ts">
-import Vue from 'vue';
-import Component from 'vue-class-component';
-import { Prop } from 'vue-property-decorator';
-import AlarmTool from '../components/alarm/alarm-tool.vue';
-import AlarmTable from '../components/alarm/alarm-table.vue';
-import { State, Action, Getter } from 'vuex-class';
+ import Vue from 'vue';
+ import Component from 'vue-class-component';
+ import { Prop } from 'vue-property-decorator';
+ import AlarmTool from '../components/alarm/alarm-tool.vue';
+ import AlarmTable from '../components/alarm/alarm-table.vue';
+ import { State, Action, Getter } from 'vuex-class';
-@Component({
- components: { AlarmTool, AlarmTable },
-})
-export default class Alarm extends Vue {
- @State('rocketAlarm') private rocketAlarm!: any;
- @Getter('durationTime') private durationTime: any;
- @Prop({default: () => ({label: 'All', key: ''})})
- private alarmScope: any;
- @Prop({default: false, type: Boolean})
- private inTopo!: boolean;
- @Prop({default: ''})
- private keyword!: string;
-}
+ @Component({
+ components: { AlarmTool, AlarmTable },
+ })
+ export default class Alarm extends Vue {
+ @State('rocketAlarm') private rocketAlarm!: any;
+ @Getter('durationTime') private durationTime: any;
+ @Prop({ default: () => ({ label: 'All', key: '' }) })
+ private alarmScope: any;
+ @Prop({ default: false, type: Boolean })
+ private inTopo!: boolean;
+ @Prop({ default: '' })
+ private keyword!: string;
+ }
</script>
<style lang="scss">
-.rk-alarm {
- flex-grow: 1;
- height: 100%;
- min-height: 0;
-}
+ .rk-alarm {
+ flex-grow: 1;
+ height: 100%;
+ min-height: 0;
+ }
</style>
diff --git a/src/views/containers/comparison.vue b/src/views/containers/comparison.vue
index b2d294d..cda1a6c 100644
--- a/src/views/containers/comparison.vue
+++ b/src/views/containers/comparison.vue
@@ -1,24 +1,21 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
<div class="rk-comparison flex-h">
<ConparisonCharts :chartSource="comparison.chartSource" />
- <ConparisonConfig :currentOptions="comparison.currentOptions" :optSource="comparison.dataSource" />
+ <ConparisonConfig
+ :currentOptions="comparison.currentOptions"
+ :optSource="comparison.dataSource"
+ />
</div>
</template>
@@ -41,7 +38,9 @@
@Mutation('SET_EVENTS') private SET_EVENTS: any;
@Mutation('comparisonStore/SET_ISPREVIOUS') private SET_ISPREVIOUS: any;
private beforeMount() {
- this.$store.dispatch('comparisonStore/GET_SERVICES', {duration: this.durationTime});
+ this.$store.dispatch('comparisonStore/GET_SERVICES', {
+ duration: this.durationTime,
+ });
this.SET_EVENTS([this.reloadConfig]);
}
private reloadConfig() {
diff --git a/src/views/containers/dashboard.vue b/src/views/containers/dashboard.vue
index cfb2fa8..d344e5e 100644
--- a/src/views/containers/dashboard.vue
+++ b/src/views/containers/dashboard.vue
@@ -1,107 +1,121 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
<div class="flex-v wrapper" style="flex-grow:1;height: 100%;">
- <ToolGroup :rocketGlobal="rocketGlobal" :rocketComps="rocketComps"/>
- <ToolBar :rocketGlobal="rocketGlobal" :compType="compType" :durationTime="durationTime" :stateDashboard='stateDashboardOption'/>
- <ToolNav :rocketGlobal="rocketGlobal" :rocketComps="rocketComps"/>
+ <ToolGroup :rocketGlobal="rocketGlobal" :rocketComps="rocketComps" />
+ <ToolBar
+ :rocketGlobal="rocketGlobal"
+ :compType="compType"
+ :durationTime="durationTime"
+ :stateDashboard="stateDashboardOption"
+ />
+ <ToolNav :rocketGlobal="rocketGlobal" :rocketComps="rocketComps" />
<div class="dashboard-container clear">
<DashboardItem
- v-for="(i, index) in rocketComps.tree[this.rocketComps.group]
- .children[this.rocketComps.current].children" :key="index+i.t+i.w+i.d" :index="index"
- :rocketGlobal="rocketGlobal" :i="i" :dragIndex="dragIndex"
- @dragStart="dragStart">
+ v-for="(i, index) in rocketComps.tree[this.rocketComps.group].children[
+ this.rocketComps.current
+ ].children"
+ :key="index + i.t + i.w + i.d"
+ :index="index"
+ :rocketGlobal="rocketGlobal"
+ :i="i"
+ :dragIndex="dragIndex"
+ @dragStart="dragStart"
+ >
</DashboardItem>
</div>
- <DashboardComp v-if="rocketGlobal.edit" :compType="compType" :rocketComps="rocketComps"/>
+ <DashboardComp
+ v-if="rocketGlobal.edit"
+ :compType="compType"
+ :rocketComps="rocketComps"
+ />
</div>
</template>
<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-import { Action, Getter, State, Mutation } from 'vuex-class';
-import ToolBar from '@/views/components/dashboard/tool-bar.vue';
-import ToolGroup from '@/views/components/dashboard/tool-group.vue';
-import ToolNav from '@/views/components/dashboard/tool-nav.vue';
-import DashboardItem from '@/views/components/dashboard/dashboard-item.vue';
-import DashboardComp from '@/views/components/dashboard/dashboard-comp.vue';
+ import { Component, Vue } from 'vue-property-decorator';
+ import { Action, Getter, State, Mutation } from 'vuex-class';
+ import ToolBar from '@/views/components/dashboard/tool-bar.vue';
+ import ToolGroup from '@/views/components/dashboard/tool-group.vue';
+ import ToolNav from '@/views/components/dashboard/tool-nav.vue';
+ import DashboardItem from '@/views/components/dashboard/dashboard-item.vue';
+ import DashboardComp from '@/views/components/dashboard/dashboard-comp.vue';
-@Component({
- components: {
- ToolBar,
- ToolGroup,
- ToolNav,
- DashboardItem,
- DashboardComp,
- },
-})
-export default class Dashboard extends Vue {
- @State('rocketbot') private rocketGlobal: any;
- @State('rocketOption') private stateDashboardOption!: any;
- @State('rocketData') private rocketComps!: any;
- @Mutation('SET_EVENTS') private SET_EVENTS: any;
- @Mutation('SET_COMPS_TREE') private SET_COMPS_TREE: any;
- @Mutation('SET_CURRENT_COMPS') private SET_CURRENT_COMPS: any;
- @Action('MIXHANDLE_GET_OPTION') private MIXHANDLE_GET_OPTION: any;
- @Action('GET_QUERY') private GET_QUERY: any;
- @Getter('durationTime') private durationTime: any;
- private isRouterAlive: boolean = true;
- private dragIndex: number = NaN;
- public dragStart(index: number) {
- this.dragIndex = index;
- }
- public reload(): void {
- this.isRouterAlive = false;
- this.$nextTick(() => { this.isRouterAlive = true; });
- }
- private get compType() {
- return this.rocketComps.tree[this.rocketComps.group].type;
- }
- private handleRefresh() {
- this.GET_QUERY({
- serviceId: this.stateDashboardOption.currentService.key || '',
- endpointId: this.stateDashboardOption.currentEndpoint.key || '',
- endpointName: this.stateDashboardOption.currentEndpoint.label || '',
- instanceId: this.stateDashboardOption.currentInstance.key || '',
- databaseId: this.stateDashboardOption.currentDatabase.key || '',
- duration: this.durationTime,
- });
- }
- private handleOption() {
- return this.MIXHANDLE_GET_OPTION({compType: this.compType, duration: this.durationTime})
- .then(() => {this.handleRefresh(); });
- }
- private beforeMount() {
- if (window.localStorage.getItem('dashboard')) {
- const data: string = `${window.localStorage.getItem('dashboard')}`;
- this.SET_COMPS_TREE(JSON.parse(data));
+ @Component({
+ components: {
+ ToolBar,
+ ToolGroup,
+ ToolNav,
+ DashboardItem,
+ DashboardComp,
+ },
+ })
+ export default class Dashboard extends Vue {
+ @State('rocketbot') private rocketGlobal: any;
+ @State('rocketOption') private stateDashboardOption!: any;
+ @State('rocketData') private rocketComps!: any;
+ @Mutation('SET_EVENTS') private SET_EVENTS: any;
+ @Mutation('SET_COMPS_TREE') private SET_COMPS_TREE: any;
+ @Mutation('SET_CURRENT_COMPS') private SET_CURRENT_COMPS: any;
+ @Action('MIXHANDLE_GET_OPTION') private MIXHANDLE_GET_OPTION: any;
+ @Action('GET_QUERY') private GET_QUERY: any;
+ @Getter('durationTime') private durationTime: any;
+ private isRouterAlive: boolean = true;
+ private dragIndex: number = NaN;
+ public dragStart(index: number) {
+ this.dragIndex = index;
}
- this.handleOption();
- this.SET_EVENTS([this.handleRefresh]);
+ public reload(): void {
+ this.isRouterAlive = false;
+ this.$nextTick(() => {
+ this.isRouterAlive = true;
+ });
+ }
+ private get compType() {
+ return this.rocketComps.tree[this.rocketComps.group].type;
+ }
+ private handleRefresh() {
+ this.GET_QUERY({
+ serviceId: this.stateDashboardOption.currentService.key || '',
+ endpointId: this.stateDashboardOption.currentEndpoint.key || '',
+ endpointName: this.stateDashboardOption.currentEndpoint.label || '',
+ instanceId: this.stateDashboardOption.currentInstance.key || '',
+ databaseId: this.stateDashboardOption.currentDatabase.key || '',
+ duration: this.durationTime,
+ });
+ }
+ private handleOption() {
+ return this.MIXHANDLE_GET_OPTION({
+ compType: this.compType,
+ duration: this.durationTime,
+ }).then(() => {
+ this.handleRefresh();
+ });
+ }
+ private beforeMount() {
+ if (window.localStorage.getItem('dashboard')) {
+ const data: string = `${window.localStorage.getItem('dashboard')}`;
+ this.SET_COMPS_TREE(JSON.parse(data));
+ }
+ this.handleOption();
+ this.SET_EVENTS([this.handleRefresh]);
+ }
}
-}
</script>
<style lang="scss">
-.dashboard-container{
- overflow: auto;
- padding:20px 15px;
- height: 100%;
- flex-grow: 1;
-}
+ .dashboard-container {
+ overflow: auto;
+ padding: 20px 15px;
+ height: 100%;
+ flex-grow: 1;
+ }
</style>
-
diff --git a/src/views/containers/index.vue b/src/views/containers/index.vue
index 84aa3be..ea27bda 100644
--- a/src/views/containers/index.vue
+++ b/src/views/containers/index.vue
@@ -1,43 +1,38 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
-<div id="app">
- <RkHeader @reloadFooter="reloadFooter"/>
- <router-view></router-view>
- <RkFooter ref="footer"/>
-</div>
+ <div id="app">
+ <RkHeader @reloadFooter="reloadFooter" />
+ <router-view></router-view>
+ <RkFooter ref="footer" />
+ </div>
</template>
<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-import RkHeader from '@/components/rk-header.vue';
-import RkFooter from '@/components/rk-footer.vue';
+ import { Component, Vue } from 'vue-property-decorator';
+ import RkHeader from '@/components/rk-header.vue';
+ import RkFooter from '@/components/rk-footer.vue';
-@Component({
- components: {
- RkHeader, RkFooter,
- },
-})
-export default class RouterIndex extends Vue {
- private isRouterAlive: boolean = true;
- public reloadFooter(timeArray: Date[]): void {
- const footer: any = this.$refs.footer;
- footer.time = timeArray;
+ @Component({
+ components: {
+ RkHeader,
+ RkFooter,
+ },
+ })
+ export default class RouterIndex extends Vue {
+ private isRouterAlive: boolean = true;
+ public reloadFooter(timeArray: Date[]): void {
+ const footer: any = this.$refs.footer;
+ footer.time = timeArray;
+ }
}
-}
</script>
diff --git a/src/views/containers/login.vue b/src/views/containers/login.vue
index 08e6fed..0ff8490 100644
--- a/src/views/containers/login.vue
+++ b/src/views/containers/login.vue
@@ -1,174 +1,195 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
-<div class="rk-login flex-h">
- <div class="rk-login-l">
- <div class="rk-login-form-wrapper">
- <div class="rk-login-form">
- <h1 class="mb-10 title"><span class="grey">{{$t('hello')}}, </span>SkyWalking Rockbot UI</h1>
- <div class="grey dscp">{{$t('helloMessage')}}</div>
- <div class="sm b mb-5">{{$t('username')}}</div>
- <input @keyup.enter="login" @input="error = false;" class="rk-login-input mb-15" :class="{'rk-login-red':error}" v-model="accountInfo.userName" type="text">
- <div class="sm b mb-5">{{$t('password')}}</div>
- <input @keyup.enter="login" @input="error = false;" class="rk-login-input mb-20" :class="{'rk-login-red':error}" v-model="accountInfo.password" type="password">
- <a class="rk-btn dib tc cp long mb-10 rk-login-btn" @click="login">{{$t('login')}}</a>
+ <div class="rk-login flex-h">
+ <div class="rk-login-l">
+ <div class="rk-login-form-wrapper">
+ <div class="rk-login-form">
+ <h1 class="mb-10 title">
+ <span class="grey">{{ $t('hello') }}, </span>SkyWalking Rockbot UI
+ </h1>
+ <div class="grey dscp">{{ $t('helloMessage') }}</div>
+ <div class="sm b mb-5">{{ $t('username') }}</div>
+ <input
+ @keyup.enter="login"
+ @input="error = false"
+ class="rk-login-input mb-15"
+ :class="{ 'rk-login-red': error }"
+ v-model="accountInfo.userName"
+ type="text"
+ />
+ <div class="sm b mb-5">{{ $t('password') }}</div>
+ <input
+ @keyup.enter="login"
+ @input="error = false"
+ class="rk-login-input mb-20"
+ :class="{ 'rk-login-red': error }"
+ v-model="accountInfo.password"
+ type="password"
+ />
+ <a class="rk-btn dib tc cp long mb-10 rk-login-btn" @click="login">{{
+ $t('login')
+ }}</a>
<p class="grey sm">Copyright © 2018 - 2019</p>
+ </div>
</div>
</div>
+ <div class="rk-login-r hide-xs">
+ <svg class="rk-img-wrapper">
+ <use xlink:href="#login-bg"></use>
+ </svg>
+ <svg class="rk-img-logo">
+ <use xlink:href="#logo-sw"></use>
+ </svg>
+ </div>
</div>
- <div class="rk-login-r hide-xs">
- <svg class="rk-img-wrapper">
- <use xlink:href="#login-bg"></use>
- </svg>
- <svg class="rk-img-logo">
- <use xlink:href="#logo-sw"></use>
- </svg>
- </div>
-</div>
</template>
<script lang="ts">
-import Vue from 'vue';
-import { Component } from 'vue-property-decorator';
-import axios, { AxiosResponse } from 'axios';
+ import Vue from 'vue';
+ import { Component } from 'vue-property-decorator';
+ import axios, { AxiosResponse } from 'axios';
-interface Account {
- userName: string;
- password: string;
-}
-
-@Component({})
-export default class Login extends Vue {
- private accountInfo: Account = {
- userName: '',
- password: '',
- };
- private error: boolean = false;
-
-// ======================================================
- // 此处为登录的业务逻辑，自行调用自己的登录接口将返回值写入localstorage
- // 修改src/router/index.js中的 beforeEach 业务，判断是否存在正确的定义值，例：skywalking-authority
-
- // Here is the business logic of the login, call its own login interface to write the return value to localstorage
- // Modify the beforeEach service in src/router/index.js to determine.
- // if there is a correct defined value. example：skywalking-authority
- private login() {
- if (process.env.NODE_ENV === 'development') {
- if (this.accountInfo.userName === 'admin' && this.accountInfo.password === 'admin') {
- window.localStorage.setItem('skywalking-authority', 'admin');
- } else {
- this.error = true;
- return;
- }
- this.$router.push('/');
- } else {
- axios.post('/login/account', this.accountInfo).then((res: AxiosResponse) => {
- window.localStorage.setItem('skywalking-authority', res.data.currentAuthority);
- this.$router.push('/');
- }).catch(() => {
- this.error = true;
- });
- }
+ interface Account {
+ userName: string;
+ password: string;
}
-// ======================================================
-}
+
+ @Component({})
+ export default class Login extends Vue {
+ private accountInfo: Account = {
+ userName: '',
+ password: '',
+ };
+ private error: boolean = false;
+
+ // ======================================================
+ // 此处为登录的业务逻辑，自行调用自己的登录接口将返回值写入localstorage
+ // 修改src/router/index.js中的 beforeEach 业务，判断是否存在正确的定义值，例：skywalking-authority
+
+ // Here is the business logic of the login, call its own login interface to write the return value to localstorage
+ // Modify the beforeEach service in src/router/index.js to determine.
+ // if there is a correct defined value. example：skywalking-authority
+ private login() {
+ if (process.env.NODE_ENV === 'development') {
+ if (
+ this.accountInfo.userName === 'admin' &&
+ this.accountInfo.password === 'admin'
+ ) {
+ window.localStorage.setItem('skywalking-authority', 'admin');
+ } else {
+ this.error = true;
+ return;
+ }
+ this.$router.push('/');
+ } else {
+ axios
+ .post('/login/account', this.accountInfo)
+ .then((res: AxiosResponse) => {
+ window.localStorage.setItem(
+ 'skywalking-authority',
+ res.data.currentAuthority,
+ );
+ this.$router.push('/');
+ })
+ .catch(() => {
+ this.error = true;
+ });
+ }
+ }
+ // ======================================================
+ }
</script>
<style lang="scss">
-.rk-login{
- height: 100%;
- .title{
- font-weight: bolder;
- font-family: 'Avenir', Helvetica, Arial, sans-serif;
+ .rk-login {
+ height: 100%;
+ .title {
+ font-weight: bolder;
+ font-family: 'Avenir', Helvetica, Arial, sans-serif;
+ }
}
-}
-.rk-img-wrapper{
- width: 100%;
- height: 100%;
- animation: spin 100s linear infinite;
- background-size: 100%;
- background-position: center;
-}
-.rk-img-logo{
- position: absolute;
- top: 35%;
- left: 50%;
- margin-left: -150px;
-}
-.rk-login-input{
- width: 100%;
- border:0;
- font-size: 16px;
- border-bottom: 1px solid #e4e7ed;
- padding: 2px 0.2em 5px;
- transition: border-color .3s;
- &:focus{
- outline: none;
- border-color: #6399f7;
+ .rk-img-wrapper {
+ width: 100%;
+ height: 100%;
+ animation: spin 100s linear infinite;
+ background-size: 100%;
+ background-position: center;
}
-}
-.rk-login-form-wrapper{
- display: table-cell;
- vertical-align: middle;
-}
-.rocket{
- position: absolute;
- width: 120px;
- height: 120px;
- top: 50%;
- left: 50%;
- margin-top: -60px;
- margin-left: -60px;
-}
-.rk-login-form{
- max-width: 360px;
- margin: 0 auto;
- padding-bottom: 30px;
- .dscp{
- margin-bottom: 30px;
+ .rk-img-logo {
+ position: absolute;
+ top: 35%;
+ left: 50%;
+ margin-left: -150px;
}
-}
-.rk-login-l{
- padding: 0 40px;
- height: 100%;
- display: table;
- flex-shrink: 0;
- margin: 0 auto;
-}
-.rk-login-r{
- position: relative;
- height: 100%;
- width: 61.8%;
- background-color: #21272b;
- overflow: hidden;
-}
-@keyframes spin {
+ .rk-login-input {
+ width: 100%;
+ border: 0;
+ font-size: 16px;
+ border-bottom: 1px solid #e4e7ed;
+ padding: 2px 0.2em 5px;
+ transition: border-color 0.3s;
+ &:focus {
+ outline: none;
+ border-color: #6399f7;
+ }
+ }
+ .rk-login-form-wrapper {
+ display: table-cell;
+ vertical-align: middle;
+ }
+ .rocket {
+ position: absolute;
+ width: 120px;
+ height: 120px;
+ top: 50%;
+ left: 50%;
+ margin-top: -60px;
+ margin-left: -60px;
+ }
+ .rk-login-form {
+ max-width: 360px;
+ margin: 0 auto;
+ padding-bottom: 30px;
+ .dscp {
+ margin-bottom: 30px;
+ }
+ }
+ .rk-login-l {
+ padding: 0 40px;
+ height: 100%;
+ display: table;
+ flex-shrink: 0;
+ margin: 0 auto;
+ }
+ .rk-login-r {
+ position: relative;
+ height: 100%;
+ width: 61.8%;
+ background-color: #21272b;
+ overflow: hidden;
+ }
+ @keyframes spin {
from {
- transform: rotate(0deg);
+ transform: rotate(0deg);
}
to {
- transform: rotate(360deg);
+ transform: rotate(360deg);
}
-}
-.rk-login-btn{
- padding: 8px 2em;
-}
-.rk-login-red{
- border-color: #f76363;
-}
-</style>
\ No newline at end of file
+ }
+ .rk-login-btn {
+ padding: 8px 2em;
+ }
+ .rk-login-red {
+ border-color: #f76363;
+ }
+</style>
diff --git a/src/views/containers/topology/topology.vue b/src/views/containers/topology/topology.vue
index f37d08f..cff77c9 100644
--- a/src/views/containers/topology/topology.vue
+++ b/src/views/containers/topology/topology.vue
@@ -38,57 +38,57 @@
</div>
</template>
<script lang="ts">
-import { Vue, Component } from 'vue-property-decorator';
-import { State, Action, Getter, Mutation } from 'vuex-class';
-import { AxiosResponse } from 'axios';
-import WindowEndpoint from '@/views/containers/topology/window-endpoint.vue';
-import WindowInstance from '@/views/containers/topology/window-instance.vue';
-import WindowTrace from '@/views/containers/topology/window-trace.vue';
-import WindowAlarm from '@/views/containers/topology/window-alarm.vue';
-import Topo from '../../components/topology/topo.vue';
-import TopoAside from '../../components/topology/topo-aside.vue';
-import { State as topoState } from '@/store/modules/topology';
+ import { Vue, Component } from 'vue-property-decorator';
+ import { State, Action, Getter, Mutation } from 'vuex-class';
+ import { AxiosResponse } from 'axios';
+ import WindowEndpoint from '@/views/containers/topology/window-endpoint.vue';
+ import WindowInstance from '@/views/containers/topology/window-instance.vue';
+ import WindowTrace from '@/views/containers/topology/window-trace.vue';
+ import WindowAlarm from '@/views/containers/topology/window-alarm.vue';
+ import Topo from '../../components/topology/topo.vue';
+ import TopoAside from '../../components/topology/topo-aside.vue';
+ import { State as topoState } from '@/store/modules/topology';
-@Component({
- components: {
- Topo,
- TopoAside,
- WindowEndpoint,
- WindowInstance,
- WindowTrace,
- WindowAlarm,
- },
-})
-export default class Topology extends Vue {
- @State('rocketTopo') private stateTopo!: topoState;
- @State('rocketOption') private stateDashboardOption!: any;
- @Mutation('SET_EVENTS') private SET_EVENTS: any;
- @Action('rocketTopo/GET_TOPO') private GET_TOPO: any;
- @Action('rocketTopo/CLEAR_TOPO') private CLEAR_TOPO: any;
- @Action('rocketTopo/CLEAR_TOPO_INFO') private CLEAR_TOPO_INFO: any;
- @Getter('durationTime') private durationTime: any;
+ @Component({
+ components: {
+ Topo,
+ TopoAside,
+ WindowEndpoint,
+ WindowInstance,
+ WindowTrace,
+ WindowAlarm,
+ },
+ })
+ export default class Topology extends Vue {
+ @State('rocketTopo') private stateTopo!: topoState;
+ @State('rocketOption') private stateDashboardOption!: any;
+ @Mutation('SET_EVENTS') private SET_EVENTS: any;
+ @Action('rocketTopo/GET_TOPO') private GET_TOPO: any;
+ @Action('rocketTopo/CLEAR_TOPO') private CLEAR_TOPO: any;
+ @Action('rocketTopo/CLEAR_TOPO_INFO') private CLEAR_TOPO_INFO: any;
+ @Getter('durationTime') private durationTime: any;
- private beforeMount(): void {
- this.SET_EVENTS([this.getTopo]);
+ private beforeMount(): void {
+ this.SET_EVENTS([this.getTopo]);
+ }
+ private mounted() {
+ this.getTopo();
+ }
+ private getTopo() {
+ this.GET_TOPO({ duration: this.durationTime });
+ }
+ private beforeDestroy() {
+ this.CLEAR_TOPO_INFO();
+ this.CLEAR_TOPO();
+ }
}
- private mounted() {
- this.getTopo();
- }
- private getTopo() {
- this.GET_TOPO({ duration: this.durationTime });
- }
- private beforeDestroy() {
- this.CLEAR_TOPO_INFO();
- this.CLEAR_TOPO();
- }
-}
</script>
<style lang="scss">
-.rk-topo {
- position: relative;
- height: 100%;
- min-height: 0;
- display: flex;
- background: #333840;
-}
+ .rk-topo {
+ position: relative;
+ height: 100%;
+ min-height: 0;
+ display: flex;
+ background: #333840;
+ }
</style>
diff --git a/src/views/containers/topology/window-alarm.vue b/src/views/containers/topology/window-alarm.vue
index d2273be..8fdc826 100644
--- a/src/views/containers/topology/window-alarm.vue
+++ b/src/views/containers/topology/window-alarm.vue
@@ -25,32 +25,32 @@
</template>
<script lang="ts">
-import Vue from 'vue';
-import Component from 'vue-class-component';
-import { Prop, PropSync } from 'vue-property-decorator';
-import AlarmTool from '../../components/alarm/alarm-tool.vue';
-import AlarmTable from '../../components/alarm/alarm-table.vue';
-import { State, Action, Getter } from 'vuex-class';
+ import Vue from 'vue';
+ import Component from 'vue-class-component';
+ import { Prop, PropSync } from 'vue-property-decorator';
+ import AlarmTool from '../../components/alarm/alarm-tool.vue';
+ import AlarmTable from '../../components/alarm/alarm-table.vue';
+ import { State, Action, Getter } from 'vuex-class';
-@Component({
- components: { AlarmTool, AlarmTable },
-})
-export default class WindowAlarm extends Vue {
- @State('rocketAlarm') private rocketAlarm!: any;
- @Getter('durationTime') private durationTime: any;
- @Prop({ default: () => ({ label: 'All', key: '' }) })
- private alarmScope: any;
- @Prop({ default: false, type: Boolean })
- private inTopo!: boolean;
- @Prop({ default: '' })
- private keyword!: string;
-}
+ @Component({
+ components: { AlarmTool, AlarmTable },
+ })
+ export default class WindowAlarm extends Vue {
+ @State('rocketAlarm') private rocketAlarm!: any;
+ @Getter('durationTime') private durationTime: any;
+ @Prop({ default: () => ({ label: 'All', key: '' }) })
+ private alarmScope: any;
+ @Prop({ default: false, type: Boolean })
+ private inTopo!: boolean;
+ @Prop({ default: '' })
+ private keyword!: string;
+ }
</script>
<style lang="scss">
-.rk-alarm {
- flex-grow: 1;
- height: 100%;
- min-height: 0;
-}
+ .rk-alarm {
+ flex-grow: 1;
+ height: 100%;
+ min-height: 0;
+ }
</style>
diff --git a/src/views/containers/topology/window-endpoint.vue b/src/views/containers/topology/window-endpoint.vue
index 749581c..343299d 100644
--- a/src/views/containers/topology/window-endpoint.vue
+++ b/src/views/containers/topology/window-endpoint.vue
@@ -36,116 +36,116 @@
</template>
<script lang="ts">
-import EndpointsSurvey from '@/views/components/topology/endpoints-survey.vue';
-import ToolBarSelect from '@/views/components/dashboard/tool-bar-select.vue';
-import ToolBarEndpointSelect from '@/views/components/dashboard/tool-bar-endpoint-select.vue';
-import _ from 'lodash';
-import Vue from 'vue';
-import { Component, PropSync, Watch } from 'vue-property-decorator';
-import { Action, Getter, State } from 'vuex-class';
+ import EndpointsSurvey from '@/views/components/topology/endpoints-survey.vue';
+ import ToolBarSelect from '@/views/components/dashboard/tool-bar-select.vue';
+ import ToolBarEndpointSelect from '@/views/components/dashboard/tool-bar-endpoint-select.vue';
+ import _ from 'lodash';
+ import Vue from 'vue';
+ import { Component, PropSync, Watch } from 'vue-property-decorator';
+ import { Action, Getter, State } from 'vuex-class';
-interface Endpoint {
- label: string;
- key: string;
- name?: string;
-}
-
-@Component({
- components: {
- EndpointsSurvey,
- ToolBarSelect,
- ToolBarEndpointSelect,
- },
-})
-export default class WindowEndpoint extends Vue {
- @State('rocketOption') private stateDashboardOption!: any;
- @State('rocketData') private rocketComps!: any;
- @Getter('durationTime') private durationTime: any;
- @Action('SELECT_ENDPOINT') private SELECT_ENDPOINT: any;
- @Action('MIXHANDLE_CHANGE_GROUP_WITH_CURRENT')
- private MIXHANDLE_CHANGE_GROUP_WITH_CURRENT: any;
- @Action('MIXHANDLE_GET_OPTION') private MIXHANDLE_GET_OPTION: any;
- @Action('GET_QUERY') private GET_QUERY: any;
- @PropSync('isShow', { default: false })
- private isShowSync!: boolean;
- private endpointsSurveyHeight = '100%';
-
- private tabsLoading = true;
- private endpointName: string = '0';
- private endpointKey: string = '0';
- private endpoints: any[] = [];
-
- private dragIndex: number = NaN;
-
- public dragStart(index: number) {
- this.dragIndex = index;
+ interface Endpoint {
+ label: string;
+ key: string;
+ name?: string;
}
- private selectEndpoint(i: any) {
- this.SELECT_ENDPOINT({ endpoint: i, duration: this.durationTime });
- }
+ @Component({
+ components: {
+ EndpointsSurvey,
+ ToolBarSelect,
+ ToolBarEndpointSelect,
+ },
+ })
+ export default class WindowEndpoint extends Vue {
+ @State('rocketOption') private stateDashboardOption!: any;
+ @State('rocketData') private rocketComps!: any;
+ @Getter('durationTime') private durationTime: any;
+ @Action('SELECT_ENDPOINT') private SELECT_ENDPOINT: any;
+ @Action('MIXHANDLE_CHANGE_GROUP_WITH_CURRENT')
+ private MIXHANDLE_CHANGE_GROUP_WITH_CURRENT: any;
+ @Action('MIXHANDLE_GET_OPTION') private MIXHANDLE_GET_OPTION: any;
+ @Action('GET_QUERY') private GET_QUERY: any;
+ @PropSync('isShow', { default: false })
+ private isShowSync!: boolean;
+ private endpointsSurveyHeight = '100%';
- private handleRefresh() {
- this.GET_QUERY({
- serviceId: this.stateDashboardOption.currentService.key || '',
- endpointId: this.endpointKey || '',
- endpointName: this.endpointName || '',
- duration: this.durationTime,
- });
- }
+ private tabsLoading = true;
+ private endpointName: string = '0';
+ private endpointKey: string = '0';
+ private endpoints: any[] = [];
- private handleOption() {
- this.MIXHANDLE_CHANGE_GROUP_WITH_CURRENT({ index: 0, current: 2 });
- return this.MIXHANDLE_GET_OPTION({
- compType: 'service',
- duration: this.durationTime,
- }).then(() => {
- this.handleRefresh();
- });
- }
+ private dragIndex: number = NaN;
- @Watch('stateDashboardOption.endpoints')
- private watchInstances(endpoints: Endpoint[]) {
- _.forEach(endpoints, ( endpoint ) => {
- endpoint.name = endpoint.label;
- });
- this.endpoints = endpoints;
- if (endpoints.length > 0 && this.endpointName === '0') {
- this.SELECT_ENDPOINT({
- endpoint: endpoints[0],
+ public dragStart(index: number) {
+ this.dragIndex = index;
+ }
+
+ private selectEndpoint(i: any) {
+ this.SELECT_ENDPOINT({ endpoint: i, duration: this.durationTime });
+ }
+
+ private handleRefresh() {
+ this.GET_QUERY({
+ serviceId: this.stateDashboardOption.currentService.key || '',
+ endpointId: this.endpointKey || '',
+ endpointName: this.endpointName || '',
duration: this.durationTime,
});
- if (endpoints[0].name) {
- this.endpointName = endpoints[0].name;
- this.endpointKey = endpoints[0].key;
- }
}
- this.tabsLoading = false;
- }
- private beforeMount() {
- this.handleOption();
- }
+ private handleOption() {
+ this.MIXHANDLE_CHANGE_GROUP_WITH_CURRENT({ index: 0, current: 2 });
+ return this.MIXHANDLE_GET_OPTION({
+ compType: 'service',
+ duration: this.durationTime,
+ }).then(() => {
+ this.handleRefresh();
+ });
+ }
- private mounted() {
- this.resize();
- window.addEventListener('resize', this.resize);
- }
+ @Watch('stateDashboardOption.endpoints')
+ private watchInstances(endpoints: Endpoint[]) {
+ _.forEach(endpoints, (endpoint) => {
+ endpoint.name = endpoint.label;
+ });
+ this.endpoints = endpoints;
+ if (endpoints.length > 0 && this.endpointName === '0') {
+ this.SELECT_ENDPOINT({
+ endpoint: endpoints[0],
+ duration: this.durationTime,
+ });
+ if (endpoints[0].name) {
+ this.endpointName = endpoints[0].name;
+ this.endpointKey = endpoints[0].key;
+ }
+ }
+ this.tabsLoading = false;
+ }
- private resize() {
- this.endpointsSurveyHeight = `${document.body.clientHeight - 101}px`;
- }
+ private beforeMount() {
+ this.handleOption();
+ }
- private beforeDestroy() {
- window.removeEventListener('resize', this.resize);
+ private mounted() {
+ this.resize();
+ window.addEventListener('resize', this.resize);
+ }
+
+ private resize() {
+ this.endpointsSurveyHeight = `${document.body.clientHeight - 101}px`;
+ }
+
+ private beforeDestroy() {
+ window.removeEventListener('resize', this.resize);
+ }
}
-}
</script>
<style lang="scss">
-.rk-dashboard-bar {
- flex-shrink: 0;
- color: #efefef;
- background-color: #333840;
-}
+ .rk-dashboard-bar {
+ flex-shrink: 0;
+ color: #efefef;
+ background-color: #333840;
+ }
</style>
diff --git a/src/views/containers/topology/window-instance.vue b/src/views/containers/topology/window-instance.vue
index a688085..fd24a13 100644
--- a/src/views/containers/topology/window-instance.vue
+++ b/src/views/containers/topology/window-instance.vue
@@ -1,35 +1,35 @@
-/**
-* Licensed to the Apache Software Foundation (ASF) under one or more
-* contributor license agreements. See the NOTICE file distributed with
-* this work for additional information regarding copyright ownership.
-* The ASF licenses this file to You under the Apache License, Version 2.0
-* (the "License"); you may not use this file except in compliance with
-* the License. You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
<div>
<div class="rk-dashboard-bar flex-h">
<ToolBarSelect
- :selectable="false"
- :title="this.$t('currentService')"
- :current="stateDashboardOption.currentService"
- :data="stateDashboardOption.services" icon="package"/>
+ :selectable="false"
+ :title="this.$t('currentService')"
+ :current="stateDashboardOption.currentService"
+ :data="stateDashboardOption.services"
+ icon="package"
+ />
<ToolBarSelect
- @onChoose="selectInstance"
- :title="$t('currentInstance')"
- :current="stateDashboardOption.currentInstance"
- :data="instances" icon="disk"/>
+ @onChoose="selectInstance"
+ :title="$t('currentInstance')"
+ :current="stateDashboardOption.currentInstance"
+ :data="instances"
+ icon="disk"
+ />
</div>
- <instances-survey :style="`overflow: auto; height: ${instancesSurveyHeight}`" />
+ <instances-survey
+ :style="`overflow: auto; height: ${instancesSurveyHeight}`"
+ />
</div>
</template>
@@ -60,7 +60,8 @@
@State('rocketData') private rocketComps!: any;
@Getter('durationTime') private durationTime: any;
@Action('SELECT_INSTANCE') private SELECT_INSTANCE: any;
- @Action('MIXHANDLE_CHANGE_GROUP_WITH_CURRENT') private MIXHANDLE_CHANGE_GROUP_WITH_CURRENT: any;
+ @Action('MIXHANDLE_CHANGE_GROUP_WITH_CURRENT')
+ private MIXHANDLE_CHANGE_GROUP_WITH_CURRENT: any;
@Action('MIXHANDLE_GET_OPTION') private MIXHANDLE_GET_OPTION: any;
@Action('GET_QUERY') private GET_QUERY: any;
@PropSync('isShow', { default: false })
@@ -78,7 +79,7 @@
}
private selectInstance(i: any) {
- this.SELECT_INSTANCE({instance: i, duration: this.durationTime});
+ this.SELECT_INSTANCE({ instance: i, duration: this.durationTime });
}
private handleRefresh() {
@@ -90,8 +91,10 @@
private handleOption() {
this.MIXHANDLE_CHANGE_GROUP_WITH_CURRENT({ index: 0, current: 3 });
- return this.MIXHANDLE_GET_OPTION({ compType: 'service', duration: this.durationTime })
- .then(() => {
+ return this.MIXHANDLE_GET_OPTION({
+ compType: 'service',
+ duration: this.durationTime,
+ }).then(() => {
this.handleRefresh();
});
}
@@ -99,11 +102,16 @@
@Watch('stateDashboardOption.instances')
private watchInstances(instances: Instance[]) {
_.forEach(instances, (instance) => {
- instance.name = instance.label.includes('@') ? instance.label.split('@')[1] : instance.label;
+ instance.name = instance.label.includes('@')
+ ? instance.label.split('@')[1]
+ : instance.label;
});
this.instances = instances;
- if (instances.length > 0 && (this.instanceName === '0')) {
- this.SELECT_INSTANCE({ instance: instances[0], duration: this.durationTime });
+ if (instances.length > 0 && this.instanceName === '0') {
+ this.SELECT_INSTANCE({
+ instance: instances[0],
+ duration: this.durationTime,
+ });
if (instances[0].name) {
this.instanceName = instances[0].name;
}
@@ -130,6 +138,4 @@
}
</script>
-<style lang="less" scoped>
-
-</style>
+<style lang="less" scoped></style>
diff --git a/src/views/containers/topology/window-trace.vue b/src/views/containers/topology/window-trace.vue
index 1fab6c3..ea8eb34 100644
--- a/src/views/containers/topology/window-trace.vue
+++ b/src/views/containers/topology/window-trace.vue
@@ -23,47 +23,47 @@
</template>
<script lang="ts">
-import { Option } from '@/types/global';
-import { Component, Vue, Prop, PropSync } from 'vue-property-decorator';
-import { State, Action, Mutation } from 'vuex-class';
-import TraceSearch from '@/views/components/trace/trace-search.vue';
-import TraceTable from '@/views/components/trace/trace-table.vue';
-import TraceDetail from '@/views/components/trace/trace-detail.vue';
-@Component({
- components: {
- TraceTable,
- TraceDetail,
- TraceSearch,
- },
-})
-export default class WindowTrace extends Vue {
- @State('rocketTrace') private stateTrace!: any;
- @Mutation('SET_EVENTS') private SET_EVENTS: any;
- @Action('rocketTrace/GET_TRACELIST') private GET_TRACELIST: any;
- @Action('rocketTrace/GET_TRACE_SPANS') private GET_TRACE_SPANS: any;
- @PropSync('isShow', { default: false })
- private isShowSync!: boolean;
- @Prop({ default: { label: 'All', key: '' } })
- private service!: Option;
+ import { Option } from '@/types/global';
+ import { Component, Vue, Prop, PropSync } from 'vue-property-decorator';
+ import { State, Action, Mutation } from 'vuex-class';
+ import TraceSearch from '@/views/components/trace/trace-search.vue';
+ import TraceTable from '@/views/components/trace/trace-table.vue';
+ import TraceDetail from '@/views/components/trace/trace-detail.vue';
+ @Component({
+ components: {
+ TraceTable,
+ TraceDetail,
+ TraceSearch,
+ },
+ })
+ export default class WindowTrace extends Vue {
+ @State('rocketTrace') private stateTrace!: any;
+ @Mutation('SET_EVENTS') private SET_EVENTS: any;
+ @Action('rocketTrace/GET_TRACELIST') private GET_TRACELIST: any;
+ @Action('rocketTrace/GET_TRACE_SPANS') private GET_TRACE_SPANS: any;
+ @PropSync('isShow', { default: false })
+ private isShowSync!: boolean;
+ @Prop({ default: { label: 'All', key: '' } })
+ private service!: Option;
- @Prop({ default: false, type: Boolean })
- private inTopo!: boolean;
+ @Prop({ default: false, type: Boolean })
+ private inTopo!: boolean;
- private show: boolean = true;
- private beforeMount() {
- this.SET_EVENTS([]);
+ private show: boolean = true;
+ private beforeMount() {
+ this.SET_EVENTS([]);
+ }
}
-}
</script>
<style lang="scss">
-.rk-trace {
- flex-grow: 1;
- height: 100%;
- min-height: 0;
-}
-.rk-trace-inner {
- height: 100%;
- display: flex;
- min-height: 0;
-}
+ .rk-trace {
+ flex-grow: 1;
+ height: 100%;
+ min-height: 0;
+ }
+ .rk-trace-inner {
+ height: 100%;
+ display: flex;
+ min-height: 0;
+ }
</style>
diff --git a/src/views/containers/trace.vue b/src/views/containers/trace.vue
index df91055..b6d57ea 100644
--- a/src/views/containers/trace.vue
+++ b/src/views/containers/trace.vue
@@ -23,47 +23,47 @@
</template>
<script lang="ts">
-import { Option } from '@/types/global';
-import { Component, Vue, Prop } from 'vue-property-decorator';
-import { State, Action, Mutation } from 'vuex-class';
-import TraceSearch from '@/views/components/trace/trace-search.vue';
-import TraceTable from '@/views/components/trace/trace-table.vue';
-import TraceDetail from '@/views/components/trace/trace-detail.vue';
+ import { Option } from '@/types/global';
+ import { Component, Vue, Prop } from 'vue-property-decorator';
+ import { State, Action, Mutation } from 'vuex-class';
+ import TraceSearch from '@/views/components/trace/trace-search.vue';
+ import TraceTable from '@/views/components/trace/trace-table.vue';
+ import TraceDetail from '@/views/components/trace/trace-detail.vue';
-@Component({
- components: {
- TraceTable,
- TraceDetail,
- TraceSearch,
- },
-})
-export default class Trace extends Vue {
- @State('rocketTrace') private stateTrace!: any;
- @Mutation('SET_EVENTS') private SET_EVENTS: any;
- @Action('rocketTrace/GET_TRACELIST') private GET_TRACELIST: any;
- @Action('rocketTrace/GET_TRACE_SPANS') private GET_TRACE_SPANS: any;
+ @Component({
+ components: {
+ TraceTable,
+ TraceDetail,
+ TraceSearch,
+ },
+ })
+ export default class Trace extends Vue {
+ @State('rocketTrace') private stateTrace!: any;
+ @Mutation('SET_EVENTS') private SET_EVENTS: any;
+ @Action('rocketTrace/GET_TRACELIST') private GET_TRACELIST: any;
+ @Action('rocketTrace/GET_TRACE_SPANS') private GET_TRACE_SPANS: any;
- @Prop({default: () => ({label: 'All', key: ''})})
- private service!: Option;
+ @Prop({ default: () => ({ label: 'All', key: '' }) })
+ private service!: Option;
- @Prop({default: false, type: Boolean})
- private inTopo!: boolean;
+ @Prop({ default: false, type: Boolean })
+ private inTopo!: boolean;
- private show: boolean = true;
- private beforeMount() {
- this.SET_EVENTS([]);
+ private show: boolean = true;
+ private beforeMount() {
+ this.SET_EVENTS([]);
+ }
}
-}
</script>
<style lang="scss">
-.rk-trace {
- flex-grow: 1;
- height: 100%;
- min-height: 0;
-}
-.rk-trace-inner {
- height: 100%;
- display: flex;
- min-height: 0;
-}
+ .rk-trace {
+ flex-grow: 1;
+ height: 100%;
+ min-height: 0;
+ }
+ .rk-trace-inner {
+ height: 100%;
+ display: flex;
+ min-height: 0;
+ }
</style>
