This is an automated email from the ASF dual-hosted git repository. kdump pushed a commit to branch topology_to_enhance_honeycomb_button in repository https://gitbox.apache.org/repos/asf/skywalking-rocketbot-ui.git
commit 9b54704e17216c14629e46b1b5814c9c35a939df Author: x22x22 <[email protected]> AuthorDate: Mon Nov 4 00:12:47 2019 +0800 topology to enhance honeycomb button --- package-lock.json | 243 +++++++++++-------- package.json | 1 + src/assets/index.ts | 71 +++--- src/assets/svg/honeycomb-selector.svg | 345 +++++++++++++++++++++++++++ src/main.ts | 3 + src/store/modules/topology/index.ts | 25 ++ src/store/mutation-types.ts | 5 + src/utils/cssHelper.ts | 12 +- src/views/components/alarm/alarm-tool.vue | 14 +- src/views/components/topology/topo-aside.vue | 55 ++++- src/views/components/topology/topo.vue | 210 +++++++++++++++- src/views/components/trace/trace-search.vue | 11 +- src/views/components/trace/trace-select.vue | 9 +- src/views/containers/alarm.vue | 9 +- src/views/containers/topology.vue | 6 +- src/views/containers/trace.vue | 12 +- vue.config.js | 2 +- 17 files changed, 866 insertions(+), 167 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7762b3e..aff9905 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1679,6 +1679,14 @@ "integrity": "sha1-ePrtjD0HSrgfIrTphdeehzj3IPg=", "dev": true }, + "async-validator": { + "version": "1.8.5", + "resolved": "http://nexus.yfb.sunline.cn:8099/nexus3/repository/npm-sunline/async-validator/-/async-validator-1.8.5.tgz";, + "integrity": "sha1-3D4I7B/Q3dtn5ghC8CwM0c7G1/A=", + "requires": { + "babel-runtime": "6.x" + } + }, "asynckit": { "version": "0.4.0", "resolved": "http://registry.npm.taobao.org/asynckit/download/asynckit-0.4.0.tgz";, @@ -1785,6 +1793,11 @@ } } }, + "babel-helper-vue-jsx-merge-props": { + "version": "2.0.3", + "resolved": "http://nexus.yfb.sunline.cn:8099/nexus3/repository/npm-sunline/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz";, + "integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY=" + }, "babel-loader": { "version": "8.0.5", "resolved": "http://registry.npm.taobao.org/babel-loader/download/babel-loader-8.0.5.tgz";, @@ -1806,6 +1819,22 @@ "object.assign": "^4.1.0" } }, + "babel-runtime": { + "version": "6.26.0", + "resolved": "http://nexus.yfb.sunline.cn:8099/nexus3/repository/npm-sunline/babel-runtime/-/babel-runtime-6.26.0.tgz";, + "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=", + "requires": { + "core-js": "^2.4.0", + "regenerator-runtime": "^0.11.0" + }, + "dependencies": { + "regenerator-runtime": { + "version": "0.11.1", + "resolved": "http://nexus.yfb.sunline.cn:8099/nexus3/repository/npm-sunline/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz";, + "integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk=" + } + } + }, "balanced-match": { "version": "1.0.0", "resolved": "http://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz";, @@ -2978,8 +3007,7 @@ "core-js": { "version": "2.6.5", "resolved": "http://registry.npm.taobao.org/core-js/download/core-js-2.6.5.tgz";, - "integrity": "sha1-RLyNJJ5/sv9dAOA0Gn/7lPv2eJU=", - "dev": true + "integrity": "sha1-RLyNJJ5/sv9dAOA0Gn/7lPv2eJU=" }, "core-util-is": { "version": "1.0.2", @@ -3672,8 +3700,7 @@ "deepmerge": { "version": "1.5.2", "resolved": "http://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz";, - "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M=", - "dev": true + "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M=" }, "default-gateway": { "version": "4.1.2", @@ -4003,6 +4030,19 @@ "integrity": "sha1-scz2Gd9yla6he8aVHcaJYyYp5Kk=", "dev": true }, + "element-ui": { + "version": "2.12.0", + "resolved": "http://nexus.yfb.sunline.cn:8099/nexus3/repository/npm-sunline/element-ui/-/element-ui-2.12.0.tgz";, + "integrity": "sha1-qJO8Ea5Pfbt+nVQWBvI+ZD8THuQ=", + "requires": { + "async-validator": "~1.8.1", + "babel-helper-vue-jsx-merge-props": "^2.0.0", + "deepmerge": "^1.2.0", + "normalize-wheel": "^1.0.1", + "resize-observer-polyfill": "^1.5.0", + "throttle-debounce": "^1.0.1" + } + }, "elliptic": { "version": "6.4.1", "resolved": "http://registry.npm.taobao.org/elliptic/download/elliptic-6.4.1.tgz";, @@ -4737,23 +4777,21 @@ "dev": true, "optional": true, "requires": { - "delegates": "1.0.0", - "readable-stream": "2.3.6" + "delegates": "^1.0.0", + "readable-stream": "^2.0.6" } }, "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { - "balanced-match": "1.0.0", + "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, @@ -4766,20 +4804,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -4820,7 +4855,7 @@ "dev": true, "optional": true, "requires": { - "minipass": "2.3.5" + "minipass": "^2.2.1" } }, "fs.realpath": { @@ -4835,14 +4870,14 @@ "dev": true, "optional": true, "requires": { - "aproba": "1.2.0", - "console-control-strings": "1.1.0", - "has-unicode": "2.0.1", - "object-assign": "4.1.1", - "signal-exit": "3.0.2", - "string-width": "1.0.2", - "strip-ansi": "3.0.1", - "wide-align": "1.1.3" + "aproba": "^1.0.3", + "console-control-strings": "^1.0.0", + "has-unicode": "^2.0.0", + "object-assign": "^4.1.0", + "signal-exit": "^3.0.0", + "string-width": "^1.0.1", + "strip-ansi": "^3.0.1", + "wide-align": "^1.1.0" } }, "glob": { @@ -4851,12 +4886,12 @@ "dev": true, "optional": true, "requires": { - "fs.realpath": "1.0.0", - "inflight": "1.0.6", - "inherits": "2.0.3", - "minimatch": "3.0.4", - "once": "1.4.0", - "path-is-absolute": "1.0.1" + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" } }, "has-unicode": { @@ -4871,7 +4906,7 @@ "dev": true, "optional": true, "requires": { - "safer-buffer": "2.1.2" + "safer-buffer": ">= 2.1.2 < 3" } }, "ignore-walk": { @@ -4880,7 +4915,7 @@ "dev": true, "optional": true, "requires": { - "minimatch": "3.0.4" + "minimatch": "^3.0.4" } }, "inflight": { @@ -4889,15 +4924,14 @@ "dev": true, "optional": true, "requires": { - "once": "1.4.0", - "wrappy": "1.0.2" + "once": "^1.3.0", + "wrappy": "1" } }, "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -4909,9 +4943,8 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { - "number-is-nan": "1.0.1" + "number-is-nan": "^1.0.0" } }, "isarray": { @@ -4924,25 +4957,22 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { - "brace-expansion": "1.1.11" + "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, - "optional": true, "requires": { - "safe-buffer": "5.1.2", - "yallist": "3.0.3" + "safe-buffer": "^5.1.2", + "yallist": "^3.0.0" } }, "minizlib": { @@ -4951,14 +4981,13 @@ "dev": true, "optional": true, "requires": { - "minipass": "2.3.5" + "minipass": "^2.2.1" } }, "mkdirp": { "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -4975,9 +5004,9 @@ "dev": true, "optional": true, "requires": { - "debug": "2.6.9", - "iconv-lite": "0.4.24", - "sax": "1.2.4" + "debug": "^2.1.2", + "iconv-lite": "^0.4.4", + "sax": "^1.2.4" } }, "node-pre-gyp": { @@ -4986,16 +5015,16 @@ "dev": true, "optional": true, "requires": { - "detect-libc": "1.0.3", - "mkdirp": "0.5.1", - "needle": "2.2.4", - "nopt": "4.0.1", - "npm-packlist": "1.2.0", - "npmlog": "4.1.2", - "rc": "1.2.8", - "rimraf": "2.6.3", - "semver": "5.6.0", - "tar": "4.4.8" + "detect-libc": "^1.0.2", + "mkdirp": "^0.5.1", + "needle": "^2.2.1", + "nopt": "^4.0.1", + "npm-packlist": "^1.1.6", + "npmlog": "^4.0.2", + "rc": "^1.2.7", + "rimraf": "^2.6.1", + "semver": "^5.3.0", + "tar": "^4" } }, "nopt": { @@ -5004,8 +5033,8 @@ "dev": true, "optional": true, "requires": { - "abbrev": "1.1.1", - "osenv": "0.1.5" + "abbrev": "1", + "osenv": "^0.1.4" } }, "npm-bundled": { @@ -5020,8 +5049,8 @@ "dev": true, "optional": true, "requires": { - "ignore-walk": "3.0.1", - "npm-bundled": "1.0.5" + "ignore-walk": "^3.0.1", + "npm-bundled": "^1.0.1" } }, "npmlog": { @@ -5030,17 +5059,16 @@ "dev": true, "optional": true, "requires": { - "are-we-there-yet": "1.1.5", - "console-control-strings": "1.1.0", - "gauge": "2.7.4", - "set-blocking": "2.0.0" + "are-we-there-yet": "~1.1.2", + "console-control-strings": "~1.1.0", + "gauge": "~2.7.3", + "set-blocking": "~2.0.0" } }, "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -5052,9 +5080,8 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { - "wrappy": "1.0.2" + "wrappy": "1" } }, "os-homedir": { @@ -5075,8 +5102,8 @@ "dev": true, "optional": true, "requires": { - "os-homedir": "1.0.2", - "os-tmpdir": "1.0.2" + "os-homedir": "^1.0.0", + "os-tmpdir": "^1.0.0" } }, "path-is-absolute": { @@ -5097,10 +5124,10 @@ "dev": true, "optional": true, "requires": { - "deep-extend": "0.6.0", - "ini": "1.3.5", - "minimist": "1.2.0", - "strip-json-comments": "2.0.1" + "deep-extend": "^0.6.0", + "ini": "~1.3.0", + "minimist": "^1.2.0", + "strip-json-comments": "~2.0.1" }, "dependencies": { "minimist": { @@ -5117,13 +5144,13 @@ "dev": true, "optional": true, "requires": { - "core-util-is": "1.0.2", - "inherits": "2.0.3", - "isarray": "1.0.0", - "process-nextick-args": "2.0.0", - "safe-buffer": "5.1.2", - "string_decoder": "1.1.1", - "util-deprecate": "1.0.2" + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" } }, "rimraf": { @@ -5132,7 +5159,7 @@ "dev": true, "optional": true, "requires": { - "glob": "7.1.3" + "glob": "^7.1.3" } }, "safe-buffer": { @@ -5174,11 +5201,10 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { - "code-point-at": "1.1.0", - "is-fullwidth-code-point": "1.0.0", - "strip-ansi": "3.0.1" + "code-point-at": "^1.0.0", + "is-fullwidth-code-point": "^1.0.0", + "strip-ansi": "^3.0.0" } }, "string_decoder": { @@ -5187,7 +5213,7 @@ "dev": true, "optional": true, "requires": { - "safe-buffer": "5.1.2" + "safe-buffer": "~5.1.0" } }, "strip-ansi": { @@ -5195,7 +5221,7 @@ "bundled": true, "dev": true, "requires": { - "ansi-regex": "2.1.1" + "ansi-regex": "^2.0.0" } }, "strip-json-comments": { @@ -5210,13 +5236,13 @@ "dev": true, "optional": true, "requires": { - "chownr": "1.1.1", - "fs-minipass": "1.2.5", - "minipass": "2.3.5", - "minizlib": "1.2.1", - "mkdirp": "0.5.1", - "safe-buffer": "5.1.2", - "yallist": "3.0.3" + "chownr": "^1.1.1", + "fs-minipass": "^1.2.5", + "minipass": "^2.3.4", + "minizlib": "^1.1.1", + "mkdirp": "^0.5.0", + "safe-buffer": "^5.1.2", + "yallist": "^3.0.2" } }, "util-deprecate": { @@ -5231,7 +5257,7 @@ "dev": true, "optional": true, "requires": { - "string-width": "1.0.2" + "string-width": "^1.0.2 || 2" } }, "wrappy": { @@ -7362,6 +7388,11 @@ "integrity": "sha1-suHE3E98bVd0PfczpPWXjRhlBVk=", "dev": true }, + "normalize-wheel": { + "version": "1.0.1", + "resolved": "http://nexus.yfb.sunline.cn:8099/nexus3/repository/npm-sunline/normalize-wheel/-/normalize-wheel-1.0.1.tgz";, + "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU=" + }, "noty": { "version": "3.2.0-beta", "resolved": "https://registry.npmjs.org/noty/-/noty-3.2.0-beta.tgz";, @@ -9040,6 +9071,11 @@ "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=", "dev": true }, + "resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "http://nexus.yfb.sunline.cn:8099/nexus3/repository/npm-sunline/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz";, + "integrity": "sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ=" + }, "resolve": { "version": "1.10.0", "resolved": "http://registry.npm.taobao.org/resolve/download/resolve-1.10.0.tgz";, @@ -10479,6 +10515,11 @@ "neo-async": "^2.6.0" } }, + "throttle-debounce": { + "version": "1.1.0", + "resolved": "http://nexus.yfb.sunline.cn:8099/nexus3/repository/npm-sunline/throttle-debounce/-/throttle-debounce-1.1.0.tgz";, + "integrity": "sha1-UYU9o3vmihVctugns1FKPEIuic0=" + }, "through2": { "version": "2.0.5", "resolved": "http://registry.npm.taobao.org/through2/download/through2-2.0.5.tgz";, diff --git a/package.json b/package.json index d83738f..9e507b9 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "d3-tip": "^0.9.1", "dayjs": "^1.8.8", "echarts": "^4.1.0", + "element-ui": "^2.12.0", "lodash": "^4.17.15", "noty": "^3.2.0-beta", "popper.js": "^1.14.7", diff --git a/src/assets/index.ts b/src/assets/index.ts index 97907ed..ffb7ad8 100644 --- a/src/assets/index.ts +++ b/src/assets/index.ts @@ -14,54 +14,51 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import './svg/lock.svg'; -import './svg/lock-open.svg'; -import './svg/logo.svg'; -import './svg/logo-sw.svg'; -import './svg/login-bg.svg'; -import './svg/disk.svg'; +import './svg/angle-double-left.svg'; +import './svg/angle-double-right.svg'; import './svg/arrow-down.svg'; -import './svg/link.svg'; -import './svg/code.svg'; -import './svg/close.svg'; +import './svg/chart.svg'; +import './svg/chevron-left.svg'; +import './svg/chevron-right.svg'; import './svg/clear.svg'; -import './svg/issue-child.svg'; -import './svg/package.svg'; -import './svg/list-bulleted.svg'; -import './svg/table.svg'; +import './svg/close.svg'; +import './svg/code.svg'; +import './svg/disk.svg'; import './svg/earth.svg'; import './svg/epic.svg'; -import './svg/chevron-left.svg'; -import './svg/chevron-right.svg'; -import './svg/angle-double-left.svg'; -import './svg/angle-double-right.svg'; -import './svg/todo-add.svg'; -import './svg/settings.svg'; +import './svg/error.svg'; import './svg/file-addition.svg'; import './svg/file-deletion.svg'; -import './svg/marquee-selection.svg'; import './svg/file-modified.svg'; -import './svg/search.svg'; +import './svg/file-tree.svg'; +import './svg/honeycomb-selector.svg'; +import './svg/issue-child.svg'; +import './svg/issue-close.svg'; import './svg/issue-open-m.svg'; -import './svg/sort-lowest.svg'; -import './svg/clear.svg'; -import './svg/close.svg'; -import './svg/error.svg'; -import './svg/unlink.svg'; -import './svg/chart.svg'; -import './svg/merge.svg'; -import './svg/spam.svg'; import './svg/issues.svg'; -import './svg/epic.svg'; -import './svg/spinner.svg'; +import './svg/link.svg'; +import './svg/list-bulleted.svg'; +import './svg/lock-open.svg'; +import './svg/lock.svg'; +import './svg/login-bg.svg'; +import './svg/logo-sw.svg'; +import './svg/logo.svg'; +import './svg/magnify.svg'; +import './svg/marquee-selection.svg'; +import './svg/merge.svg'; +import './svg/package.svg'; import './svg/retry.svg'; +import './svg/review-list.svg'; +import './svg/search.svg'; +import './svg/settings.svg'; import './svg/soft-unwrap.svg'; +import './svg/sort-lowest.svg'; +import './svg/spam.svg'; +import './svg/spinner.svg'; +import './svg/table.svg'; +import './svg/todo-add.svg'; import './svg/token.svg'; -import './svg/warning.svg'; -import './svg/review-list.svg'; +import './svg/unlink.svg'; import './svg/user.svg'; -import './svg/issue-close.svg'; -import './svg/list-bulleted.svg'; -import './svg/file-tree.svg'; -import './svg/magnify.svg'; +import './svg/warning.svg'; diff --git a/src/assets/svg/honeycomb-selector.svg b/src/assets/svg/honeycomb-selector.svg new file mode 100644 index 0000000..7b4ba32 --- /dev/null +++ b/src/assets/svg/honeycomb-selector.svg @@ -0,0 +1,345 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/"; + xmlns:cc="http://creativecommons.org/ns#"; + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"; + xmlns:svg="http://www.w3.org/2000/svg"; + xmlns="http://www.w3.org/2000/svg"; + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"; + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"; + version="1.0" + preserveAspectRatio="xMidYMid meet" + inkscape:version="0.92.4 (5da689c313, 2019-01-14)" + sodipodi:docname="honeycomb-selector.svg" + id="honeycomb-1"> + <metadata + id="metadata40"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage"; /> + </cc:Work> + </rdf:RDF> + </metadata> + <defs + id="defs38"> + <style + id="style42" + type="text/css" /> + <style + id="style64" + type="text/css" /> + <style + id="style393" + type="text/css" /> + <style + id="style412" + type="text/css" /> + <style + id="style431" + type="text/css" /> + <style + id="style445" + type="text/css" /> + <style + id="style445-7" + type="text/css" /> + <style + id="style608" + type="text/css" /> + <style + id="style587" + type="text/css" /> + <filter + x="0" + y="0" + width="1" + height="1" + id="text-background"> + <feFlood + flood-color="#333840" + id="feFlood20" + result="result1" /> + <feComposite + in="SourceGraphic" + in2="result1" + id="feComposite22" /> + </filter> + <style + id="style166" + type="text/css" /> + </defs> + <sodipodi:namedview + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1" + objecttolerance="10" + gridtolerance="10" + guidetolerance="10" + inkscape:pageopacity="0" + inkscape:pageshadow="2" + inkscape:window-width="3840" + inkscape:window-height="2097" + id="namedview36" + showgrid="false" + inkscape:zoom="6.774083" + inkscape:cx="-20.989356" + inkscape:cy="43.84884" + inkscape:window-x="-8" + inkscape:window-y="-8" + inkscape:window-maximized="1" + inkscape:current-layer="honeycomb-group-below-left" + inkscape:snap-bbox="true" + inkscape:bbox-paths="true" + inkscape:bbox-nodes="true" + inkscape:snap-bbox-edge-midpoints="true" + inkscape:snap-bbox-midpoints="true" + inkscape:object-paths="true" + inkscape:snap-intersection-paths="true" + inkscape:snap-smooth-nodes="true" + inkscape:snap-midpoints="true" + inkscape:snap-object-midpoints="true" + inkscape:snap-center="true" + inkscape:snap-text-baseline="true" + inkscape:snap-page="true" /> + <g + transform="matrix(0.01651539,0,0,-0.01622068,-55.951684,120.57061)" + id="honeycomb-frames" + style="fill:rgba(76, 102, 175, 0.8);stroke:none"> + <g + id="honeycomb-group-background"> + <path + style="opacity:0.2;fill:#f6f5f8;stroke:#f6f5f8;stroke-width:20.88499069px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.6" + d="M 5292.9503,6231.545 4146.073,4308.891 5271.4539,2377.4855 l 2283.5692,2.556 1140.8217,1924.4562 -1119.7003,1896.0701 z" + id="honeycomb-background" /> + <ellipse + id="honeycomb-area" + cx="6402.2075" + cy="4293.6963" + rx="3754.0742" + ry="3698.9817" + style="fill:#313446;fill-opacity:0.00090003;stroke-width:64.14954376" /> + <path + d="m 5783.2167,5365.8532 c -17,-10 -120,-176 -318.9999,-517.9999 -250,-427 -295,-509 -295,-543 -1,-34 39,-109 283.9999,-538 157,-275 295,-509 308,-522 12,-12 36,-25 53,-29 18,-3 289,-6 603.0001,-6 438,0 577,3 595.9999,13 18,9 98.0001,137 268,427 352.0001,602 354,605 354,643 0,25 -69,154 -282,527 -154.9999,272 -295,508.9999 -310.9999,524.9999 l -29.0001,30 -603,2 c -496,2 -606,0 -627,-11 z m 1164,-156 c 22,-24 526,-906.9999 525,-921.9999 0,-7 -120.9999,-218 -267,-468 l -267,-455 [...] + id="honeycomb-frame-core" /> + </g> + <g + id="honeycomb-group-top"> + <text + xml:space="preserve" + style="font-style:normal;font-weight:normal;font-size:977.55462646px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:61.09716415;filter:url(#text-background)" + x="4535.1201" + y="-7931.6621" + id="honeycomb-text-top" + transform="scale(0.99103755,-1.0090435)"><tspan + sodipodi:role="line" + id="tspan3862" + x="4535.1201" + y="-7039.8096" + style="font-size:977.55462646px;stroke-width:61.09716415" /></text> + <path + d="m 5820,7785.2006 c -11,-5 -27,-17 -36,-27 -24,-28 -579,-982 -591,-1016 -8,-22 -6,-39 6,-71 9,-23 141,-260 294,-527 215,-375 284,-488 307,-501 27,-16 88,-18 622,-21 588,-3 592,-3 620,18 18,13 136,206 321,524 229,392 294,511 294,538 0,26 -66,149 -290,540 -179,313 -300,514 -316,527 -27,19 -42,20 -619,22 -326,1 -601,-2 -612,-6 z m 950,-150 200,-6 262,-455 c 143,-250 261,-462 261,-470 0,-8 -120,-220 -266,-470 l -267,-455 -510,-3 c -280,-1 -524,0 -542,3 -31,5 -45,29 -297,470 l -265 [...] + id="honeycomb-frame-top" /> + <path + style="fill:#7e57c2;stroke:#7e57c2;stroke-width:10px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" + d="m 5889,7644.2006 -543,-931.0001 532.8223,-935.2377 1081.1776,1.2377 540.1329,931.8727 L 6970,7629.2006 Z" + id="honeycomb-content-top" /> + </g> + <g + id="honeycomb-group-top-right" + class="cp"> + <text + xml:space="preserve" + style="font-style:normal;font-weight:normal;font-size:977.55462646px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:61.09716415;filter:url(#text-background)" + x="9546.2422" + y="-6248.0264" + id="honeycomb-text-top-right" + transform="matrix(0.99103755,0,0,-1.0090435,40.655424,-100.13444)"><tspan + sodipodi:role="line" + id="tspan3868" + x="9546.2422" + y="-6248.0264" + style="font-size:488.77731323px;stroke-width:61.09716415">Alarm</tspan></text> + <path + d="m 7940.7129,6638.8004 c -37,-17 -31,-7 -360,-571 -231,-395 -268,-466 -268,-500 0,-34 43,-116 289,-544 189,-329 300,-512 318,-525 28,-21 40,-21 620,-24 550,-2 594,-1 620,15 21,13 111,158 323,523 162,277 295,514 295,525 1,11 0,29 -1,40 -1,11 -133,249 -293,528 -209,365 -299,512 -317,522 -39,20 -1183,31 -1226,11 z m 1413,-611 c 145,-253 263,-464 263,-469 0,-6 -120,-216 -267,-468 l -267,-458 h -541 -540 l -265,466 c -146,256 -264,468 -263,473 1,4 122,213 268,464 l 267,457 541,-2 5 [...] + id="honeycomb-frame-top-right" /> + <path + style="fill:#5c6bc0;stroke:#5c6bc0;stroke-width:10px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" + d="m 8009.7129,6502.8004 -543,-931.0001 532.8223,-935.2377 1081.1776,1.2377 540.1329,931.8727 -530.1328,918.1274 z" + id="honeycomb-content-top-right" /> + <g + id="honeycomb-button-alarm" + transform="matrix(1.2614497,0,0,-1.2614497,7897.3545,6205.4705)" + style="fill:#e6e6e6"> + <path + id="path449" + p-id="40349" + d="m 192,832 a 32,32 0 0 0 0,64 h 640 a 32,32 0 0 0 0,-64 z m 0,-64 h 640 a 96,96 0 0 1 0,192 H 192 a 96,96 0 0 1 0,-192 z" + inkscape:connector-curvature="0" /> + <path + id="path451" + p-id="40350" + d="m 816,208 m -48,0 a 48,48 0 1 0 96,0 48,48 0 1 0 -96,0 z" + inkscape:connector-curvature="0" /> + <path + id="path453" + p-id="40351" + d="m 208,208 m -48,0 a 48,48 0 1 0 96,0 48,48 0 1 0 -96,0 z" + inkscape:connector-curvature="0" /> + <path + id="path455" + p-id="40352" + d="m 480,608 a 32,32 0 0 1 64,0 v 160 a 32,32 0 0 1 -64,0 z" + inkscape:connector-curvature="0" /> + <path + id="path457" + p-id="40353" + d="m 512,640 a 112,112 0 1 1 0,-224 112,112 0 0 1 0,224 z m 0,-64 a 48,48 0 1 0 0,-96 48,48 0 0 0 0,96 z m 352,-96 a 32,32 0 0 1 0,-64 h 96 a 32,32 0 0 1 0,64 z m -800,0 a 32,32 0 0 1 0,-64 h 96 a 32,32 0 0 1 0,64 z M 480,64 a 32,32 0 0 1 64,0 v 96 a 32,32 0 0 1 -64,0 z" + inkscape:connector-curvature="0" /> + <path + id="path459" + p-id="40354" + d="m 272.448,800 h -64 V 512 a 304,304 0 0 1 608,0 v 288 h -64 V 512 a 240,240 0 0 0 -480,0 z" + inkscape:connector-curvature="0" /> + </g> + <path + style="fill:#5c6bc0;stroke:#5c6bc0;stroke-width:10px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.001;opacity:0.001" + d="m 8009.7129,6502.8004 -543,-931.0001 532.8223,-935.2377 1081.1776,1.2377 540.1329,931.8727 -530.1328,918.1274 z" + id="honeycomb-shade-top-right" /> + </g> + <g + id="honeycomb-group-below-right" + class="cp"> + <text + xml:space="preserve" + style="font-style:normal;font-weight:normal;font-size:977.55462646px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:61.09716415;filter:url(#text-background)" + x="9684.0586" + y="-1623.2797" + id="honeycomb-text-below-right" + transform="matrix(0.99103755,0,0,-1.0090435,-25.91292,2075.4611)"><tspan + sodipodi:role="line" + id="tspan3872" + x="9684.0586" + y="-1623.2797" + style="font-size:488.77731323px;stroke-width:61.09716415">Trace</tspan></text> + <path + d="m 8070.3706,4111.3108 c -11,-5 -27,-17 -36,-27 -24,-28 -578.9999,-982 -590.9999,-1016 -8,-22 -6,-39 6,-71 9,-23 141,-260 294,-527 214.9999,-375 283.9999,-487.9999 306.9999,-500.9998 27,-16.0002 88,-18 622,-21 588,-3 591.9999,-3 620.0001,18 18,12.9999 135.9999,205.9998 321,523.9998 228.9999,392.0001 294,511 294,538 0,26 -66,149 -290.0001,540 -179.0001,313 -300,514 -315.9999,527 -27,19 -42,20 -619,22 -326.0001,1 -601.0001,-2 -612.0001,-6 z m 950,-150 200.0001,-6 261.9999,-455 c [...] + id="honeycomb-frame-below-right" /> + <path + style="fill:#2196f3;stroke:#2196f3;stroke-width:10px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" + d="m 8139.3707,3970.3108 -543,-931.0001 532.8223,-935.2377 1081.1776,1.2377 540.1329,931.8727 -530.1328,918.1274 z" + id="honeycomb-content-below-right" /> + <g + id="honeycomb-button-link-analyze" + transform="matrix(1.182609,0,0,-1.2040956,8055.4274,3604.8517)"> + <path + id="path416" + p-id="5238" + d="M 1019.2751,950.97678 801.88042,733.58209 c 62.39848,-77.29811 99.69757,-175.69571 99.69757,-282.7931 0,-43.19894 -6.09985,-84.89792 -17.39958,-124.39696 -8.49979,1.39997 -17.19958,1.99995 -25.89936,1.99995 l -28.7993,44.9989 c 5.09987,24.99939 7.69981,50.89876 7.69981,77.29812 0,213.39479 -172.99578,386.39056 -386.39057,386.39056 -213.39479,0 -386.390562,-172.89578 -386.390562,-386.29057 0,-213.39479 172.995772,-386.390563 386.390562,-386.390562 92.49775,0 177.49567,32.499 [...] + inkscape:connector-curvature="0" + style="fill:#e6e6e6" /> + <path + id="path418" + p-id="5239" + d="m 601.9853,475.68839 c -12.1997,-5.29987 -25.79937,-8.2998 -39.99902,-8.2998 -14.09966,0 -27.59933,2.89993 -39.79903,8.1998 L 426.78958,356.09131 c 5.79986,-11.09973 9.09978,-23.69943 9.09978,-37.0991 0,-44.49891 -36.09912,-80.49803 -80.49804,-80.49803 -44.49891,0 -80.49803,36.09912 -80.49803,80.49803 0,11.39972 2.39994,22.29946 6.69984,32.09922 l -63.59845,79.89805 c -5.59987,-1.39997 -11.49972,-2.19995 -17.59957,-2.19995 -39.69903,0 -71.89825,32.19922 -71.89825,71.89825 0 [...] + inkscape:connector-curvature="0" + style="fill:#e6e6e6" /> + </g> + <path + style="fill:#2196f3;stroke:#2196f3;stroke-width:10px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.001;opacity:0.001" + d="m 8139.3707,3970.3108 -543,-931.0001 532.8223,-935.2377 1081.1776,1.2377 540.1329,931.8727 -530.1328,918.1274 z" + id="honeycomb-shade-below-right" /> + </g> + <g + id="honeycomb-group-below"> + <text + xml:space="preserve" + style="font-style:normal;font-weight:normal;font-size:977.55462646px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:61.09716415;filter:url(#text-background)" + x="4518.5239" + y="32.803318" + id="honeycomb-text-below" + transform="scale(0.99103755,-1.0090435)"><tspan + sodipodi:role="line" + id="tspan3876" + x="4518.5239" + y="924.65607" + style="stroke-width:61.09716415" /></text> + <path + d="m 5790,2951.7994 c -17,-10 -120,-176 -319,-518 -250,-427 -295,-509 -295,-543 -1,-34 39,-109 284,-538 157,-275 295,-508.99994 308,-521.99994 12,-12 36,-25 53,-29 18,-3 289,-6 603,-6 438,0 577,3 596,13 18,9 98,136.99997 268,426.99994 352,602 354,605 354,643 0,25 -69,154 -282,527 -155,272 -295,509 -311,525 l -29,30 -603,2 c -496,2 -606,0 -627,-11 z m 1164,-156 c 22,-24 526,-907 525,-922 0,-7 -121,-218 -267,-468 l -267,-454.99997 -360,-3 c -198,-2 -442,0 -542,3 l -183,7 -264,463. [...] + id="honeycomb-frame-below" /> + <path + style="fill:#b39ddb;stroke:#b39ddb;stroke-width:10px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" + d="m 5867.8672,2806.9268 -543,-931.0001 532.8223,-935.23767 1081.1776,1.2377 L 7479,1873.7994 6948.8672,2791.9268 Z" + id="honeycomb-content-below" /> + </g> + <g + id="honeycomb-group-below-left" + class="cp"> + <text + xml:space="preserve" + style="font-style:normal;font-weight:normal;font-size:977.55462646px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:61.09716415;filter:url(#text-background)" + x="-558.66388" + y="-1667.5137" + id="honeycomb-text-below-left" + transform="matrix(0.99103755,0,0,-1.0090435,1590.8923,1916.1963)"><tspan + sodipodi:role="line" + id="tspan3880" + x="-558.66388" + y="-1667.5137" + style="font-size:488.77731323px;stroke-width:61.09716415">Instances</tspan></text> + <path + d="m 3662.6334,4102.4305 c -30,-16 -75,-88 -329,-523 -229,-393 -295,-513 -296,-541 0,-30 50,-124 290,-544 182,-319 301,-517 318,-530 27,-20 41,-20 614,-23 547,-2 589,-1 621,15 30,16 76,89 329,523 256,439 295,510 295,545 -1,34 -46,119 -290,545 -180,312 -300,512 -317,525 -27,19 -42,20 -614,23 -546,2 -589,1 -621,-15 z m 1314,-429 c 89,-154 209,-364 267,-466 l 105,-184 -271,-464 -271,-463 -42,1 c -24,0 -267,1 -540,1 l -498,1 -252,443 c -138,243 -257,454 -264,469 -12,29 -16,22 442,80 [...] + id="honeycomb-frame-below-left" /> + <path + style="fill:#9fa8da;stroke:#9fa8da;stroke-width:10px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" + d="m 3735.6335,3961.4306 -543,-931.0001 532.8223,-935.2377 1081.1776,1.2377 540.1329,931.8727 -530.1328,918.1274 z" + id="honeycomb-content-below-left" /> + <path + id="honeycomb-button-instances" + p-id="22603" + d="m 3645.7653,3382.5746 586.6173,337.4231 a 24.219541,24.659417 0 0 0 23.8157,0 l 586.3143,-337.3211 c 9.0826,-4.9313 9.0826,-19.2133 0,-24.2486 l -571.3792,-328.9975 a 56.512263,57.538641 0 0 0 -53.7869,0 l -571.4802,328.7925 c -9.0827,5.0343 -9.0827,19.3163 0,24.3516 z m 1197.5553,-264.8834 c 9.0817,-5.1373 9.0817,-18.4952 -0.808,-24.3516 l -571.4802,-328.8945 a 56.512263,57.538641 0 0 0 -53.7869,0 l -571.1782,328.7915 c -9.0816,5.0354 -9.0816,19.3173 0,24.4546 l 120.4927,69. [...] + inkscape:connector-curvature="0" + style="fill:#e6e6e6;stroke-width:1.19338608" /> + <path + style="fill:#9fa8da;stroke:#9fa8da;stroke-width:10px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.001;opacity:0.001" + d="m 3735.6335,3961.4306 -543,-931.0001 532.8223,-935.2377 1081.1776,1.2377 540.1329,931.8727 -530.1328,918.1274 z" + id="honeycomb-shade-below-left" /> + </g> + <g + id="honeycomb-group-top-left" + class="cp"> + <text + xml:space="preserve" + style="font-style:normal;font-size:977.55462646px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:61.09716415;filter:url(#text-background)" + x="1448.0989" + y="-6241.5234" + id="honeycomb-text-top-left" + transform="matrix(0.99103755,0,0,-1.0090435,876.42187,-80.613427)"><tspan + sodipodi:role="line" + id="tspan3884" + x="1448.0989" + y="-6241.5234" + style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:488.77731323px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;text-align:center;text-anchor:middle;stroke-width:61.09716415">Endpoint</tspan></text> + <path + d="m 3679.4124,6649.5817 c -11,-5 -27,-17 -36,-27 -24,-28 -579,-982 -591,-1016 -8,-22 -6,-39 6,-71 9,-23 141,-260 294,-527 215,-375 284,-487.9999 307,-500.9999 27,-16.0001 88,-18 621.9999,-21 588,-3 592,-3 620.0001,18 18,13 135.9999,205.9999 321,523.9999 228.9999,392.0001 294,511 294,538 0,26 -66,149 -290.0001,540 -179,313 -300,514 -315.9999,527 -27,19 -42,20 -619,22 -326,1 -601,-2 -612,-6 z m 949.9999,-150 200.0001,-6 261.9999,-455 c 143.0001,-250 261,-462 261,-470 0,-8 -120,-2 [...] + id="honeycomb-frame-top-left" /> + <path + style="fill:#ab47bc;stroke:#ab47bc;stroke-width:10px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" + d="m 3748.4124,6508.5817 -543,-931.0001 532.8223,-935.2377 1081.1776,1.2377 540.1329,931.8727 -530.1328,918.1274 z" + id="honeycomb-content-top-left" /> + <path + id="honeycomb-button-endpoint" + d="m 4838.6178,5846.1686 v 76.5834 h -67.6949 v 68.9252 c 0,68.9253 -52.652,122.5342 -120.3479,122.5342 h -97.7819 v 91.8997 h -75.2169 v -99.5578 h -195.5638 v 99.5578 h -75.2169 v -99.5578 h -203.0858 v 99.5578 h -75.2169 v -99.5578 h -90.2599 c -67.6949,0 -120.3469,-53.609 -120.3469,-114.8761 v -68.9252 h -75.2169 v -76.5834 h 75.2169 v -206.7747 h -75.2169 v -76.5844 h 75.2169 v -206.7747 h -75.2169 v -76.5834 h 75.2169 v -68.9252 c 0,-68.9253 52.652,-122.5342 120.3469,-122. [...] + inkscape:connector-curvature="0" + style="stroke-width:1.18589246;fill:#e6e6e6" /> + <path + inkscape:connector-curvature="0" + style="opacity:0.00100002;fill:#ab47bc;stroke:#ab47bc;stroke-width:10px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.00100002" + d="m 3747.9433,6503.5692 -543,-931.0001 532.8223,-935.2377 1081.1776,1.2377 540.133,931.8727 -530.1329,918.1274 z" + id="honeycomb-shade-top-left" + sodipodi:nodetypes="ccccccc" /> + </g> + </g> +</svg> diff --git a/src/main.ts b/src/main.ts index db06627..af4c833 100644 --- a/src/main.ts +++ b/src/main.ts @@ -37,10 +37,13 @@ import 'echarts/lib/component/legend'; import 'echarts/lib/component/tooltip'; import VModal from 'vue-js-modal'; import './assets'; +import ElementUI from 'element-ui'; +import 'element-ui/lib/theme-chalk/index.css'; Vue.use(eventBus); Vue.use(VueI18n); Vue.use(components); +Vue.use(ElementUI); Vue.use(VModal, {dialog: true}); Vue.directive('clickout', clickout); Vue.directive('tooltip', tooltip); diff --git a/src/store/modules/topology/index.ts b/src/store/modules/topology/index.ts index 1c459d4..058a460 100644 --- a/src/store/modules/topology/index.ts +++ b/src/store/modules/topology/index.ts @@ -61,6 +61,11 @@ export interface State { p90: number[]; p95: number[]; p99: number[]; + honeycombNode: any; + showAlarmDialog: boolean; + showTraceDialog: boolean; + showInstancesDialog: boolean; + showEndpointDialog: boolean; } const initState: State = { @@ -83,6 +88,11 @@ const initState: State = { p90: [], p95: [], p99: [], + honeycombNode: {}, + showAlarmDialog: false, + showTraceDialog: false, + showInstancesDialog: false, + showEndpointDialog: false, }; // getters @@ -90,6 +100,21 @@ const getters = {}; // mutations const mutations = { + [types.SET_HONEYCOMB_NODE](state: State, data: any) { + state.honeycombNode = data; + }, + [types.SET_SHOW_ALARM_DIALOG](state: State, isShow: boolean) { + state.showAlarmDialog = isShow; + }, + [types.SET_SHOW_TRACE_DIALOG](state: State, isShow: boolean) { + state.showTraceDialog = isShow; + }, + [types.SET_SHOW_INSTANCES_DIALOG](state: State, isShow: boolean) { + state.showInstancesDialog = isShow; + }, + [types.SET_SHOW_INSTANCES_DIALOG](state: State, isShow: boolean) { + state.showEndpointDialog = isShow; + }, [types.SET_CALLBACK](state: State, data: any) { state.callback = data; }, diff --git a/src/store/mutation-types.ts b/src/store/mutation-types.ts index 1a4c6d0..c8b786e 100644 --- a/src/store/mutation-types.ts +++ b/src/store/mutation-types.ts @@ -79,3 +79,8 @@ export const SET_MODE = 'SET_MODE'; export const SET_TOPO_RELATION = 'SET_TOPO_RELATION'; export const SET_CALLBACK = 'SET_CALLBACK'; export const SET_MODE_STATUS = 'SET_MODE_STATUS'; +export const SET_HONEYCOMB_NODE = 'SET_HONEYCOMB_NODE'; +export const SET_SHOW_ALARM_DIALOG = 'SET_SHOW_ALARM_DIALOG'; +export const SET_SHOW_TRACE_DIALOG = 'SET_SHOW_TRACE_DIALOG'; +export const SET_SHOW_INSTANCES_DIALOG = 'SET_SHOW_INSTANCES_DIALOG'; +export const SET_SHOW_ENDPOINT_DIALOG = 'SET_SHOW_ENDPOINT_DIALOG'; diff --git a/src/utils/cssHelper.ts b/src/utils/cssHelper.ts index d6ea1ae..ab09cb0 100644 --- a/src/utils/cssHelper.ts +++ b/src/utils/cssHelper.ts @@ -13,9 +13,9 @@ export interface CssTranslate { } class CssHelper { - matrixSerialization(matrixString: string): CssMatrix { + public matrixSerialization(matrixString: string): CssMatrix { const matrixArray = matrixString.replace('matrix(', '') - .replace(')', '').split(','); + .replace(')', '').split(','); // const matrixNumberArray = []; const matrixNumberArray = matrixArray.map((value) => { return parseFloat(value); @@ -30,7 +30,7 @@ class CssHelper { }; } - translateDeserialization(translate: CssTranslate) { + public translateDeserialization(translate: CssTranslate) { let translateString = ''; const translateEntries = Object.entries(translate); translateEntries.forEach(value => { @@ -40,9 +40,9 @@ class CssHelper { return `translate(${translateString})`; } - translateSerialization(translateString: string): CssTranslate { + public translateSerialization(translateString: string): CssTranslate { const translateArray = translateString.replace('translate(', '') - .replace(')', '').split(','); + .replace(')', '').split(','); // const translateNumberArray = []; const translateNumberArray = translateArray.map((value) => { return parseFloat(value); @@ -53,7 +53,7 @@ class CssHelper { }; } - matrixDeserialization(cssMatrix: CssMatrix) { + public matrixDeserialization(cssMatrix: CssMatrix) { let matrixString = ''; const matrixEntries = Object.entries(cssMatrix); matrixEntries.forEach(value => { diff --git a/src/views/components/alarm/alarm-tool.vue b/src/views/components/alarm/alarm-tool.vue index dd578fb..92edc95 100644 --- a/src/views/components/alarm/alarm-tool.vue +++ b/src/views/components/alarm/alarm-tool.vue @@ -17,10 +17,10 @@ <template> <nav class="rk-alarm-tool flex-h"> - <AlarmSelect :title="this.$t('filterScope')" :value="alarmScope" @input="handleFilter" :data="alarmOptions"/> + <AlarmSelect v-show="!isDrawer" :title="this.$t('filterScope')" :value="alarmScope" @input="handleFilter" :data="alarmOptions"/> <div class="mr-10" style="padding: 3px 15px 0"> <div class="sm grey">{{this.$t('searchKeyword')}}</div> - <input type="text" v-model="keyword" class="rk-alarm-tool-input" @input="handleRefresh(1)"> + <input :disabled="isDrawer" 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"/> </nav> @@ -39,14 +39,18 @@ export default class AlarmTool extends Vue { @Prop() private durationTime: any; @Prop() private total!: number; private pageNum: number = 1; - private alarmScope: any = {label: 'All', key: ''}; + @Prop({default: {label: 'All', key: ''}}) + public alarmScope: any; + @Prop({default: false, type: Boolean}) + public isDrawer!: boolean; private alarmOptions: any = [ {label: 'All', key: ''}, {label: 'Service', key: 'Service'}, {label: 'ServiceInstance', key: 'ServiceInstance'}, {label: 'Endpoint', key: 'Endpoint'}, ]; - private keyword: string = ''; + @Prop({default: ''}) + public keyword!: string; private handlePage(pageNum: number) { this.handleRefresh(pageNum); @@ -70,7 +74,7 @@ export default class AlarmTool extends Vue { this.GET_ALARM(params); } private beforeMount() { - this.SET_EVENTS([() => { this.handleRefresh(1); } ]); + // this.SET_EVENTS([() => { this.handleRefresh(1); } ]); this.handleRefresh(1); } } diff --git a/src/views/components/topology/topo-aside.vue b/src/views/components/topology/topo-aside.vue index 543e3da..3884acd 100644 --- a/src/views/components/topology/topo-aside.vue +++ b/src/views/components/topology/topo-aside.vue @@ -114,6 +114,41 @@ /> </div> </div> + <el-drawer + title="Alarm" + size="75%" + destroy-on-close + :visible.sync="stateTopo.showAlarmDialog" + > + <alarm-containers :style="`height: ${drawerMainBodyHeight}`" + :alarmScope="{label: 'Service', key: 'Service'}" + isDrawer + :keyword="stateTopo.honeycombNode.name" + ></alarm-containers> + </el-drawer> + <el-drawer + title="Trace" + size="75%" + destroy-on-close + :visible.sync="stateTopo.showTraceDialog" + > + <trace-containers :style="`height: ${drawerMainBodyHeight}`" + :service="{label: stateTopo.honeycombNode.name, key: stateTopo.honeycombNode.id}" + inTopo + ></trace-containers> + </el-drawer> + <el-drawer + title="Instances" + size="75%" + destroy-on-close + :visible.sync="stateTopo.showInstancesDialog" + ></el-drawer> + <el-drawer + title="Endpoints" + size="75%" + destroy-on-close + :visible.sync="stateTopo.showEndpointDialog" + ></el-drawer> </aside> </template> <script lang="ts"> @@ -124,13 +159,31 @@ import TopoChart from './topo-chart.vue'; import TopoService from './topo-services.vue'; import ChartResponse from './topo-response.vue'; import Radial from './radial.vue'; +import AlarmContainers from '@/views/containers/alarm.vue'; +import TraceContainers from '@/views/containers/trace.vue'; -@Component({components: {TopoChart, TopoService, ChartResponse, Radial}}) +@Component({components: {TopoChart, TopoService, ChartResponse, Radial, AlarmContainers, TraceContainers}}) export default class TopoAside extends Vue { @State('rocketTopo') public stateTopo!: topoState; @Getter('intervalTime') public intervalTime: any; @Mutation('rocketTopo/SET_MODE_STATUS') public SET_MODE_STATUS: any; @Action('rocketTopo/CLEAR_TOPO_INFO') public CLEAR_TOPO_INFO: any; + + private drawerMainBodyHeight = '100%'; + + private resize() { + this.drawerMainBodyHeight = `${document.body.clientHeight - 120}px`; + } + + private mounted() { + this.resize(); + window.addEventListener('resize', this.resize); + } + + private beforeDestroy() { + window.removeEventListener('resize', this.resize); + } + get types() { const result: any = {}; this.stateTopo.nodes.forEach((i: any) => { diff --git a/src/views/components/topology/topo.vue b/src/views/components/topology/topo.vue index 6746e77..c8048be 100644 --- a/src/views/components/topology/topo.vue +++ b/src/views/components/topology/topo.vue @@ -19,9 +19,10 @@ <div class="micro-topo-chart"></div> </template> <script lang="js"> -import * as d3 from 'd3'; -import d3tip from 'd3-tip'; -/* tslint:disable */ + 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 }); @@ -136,6 +137,27 @@ export default { 'datas.nodes': 'draw', }, methods: { + switchNativeContextMenu(enable) { + document.oncontextmenu = () => { + return enable; + }; + }, + 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(); + that.switchNativeContextMenu(true); + }, 780); + }, draw() { const codeId = this.datas.nodes.map(i => i.id); for (let i = 0; i < this.datas.calls.length; i += 1) { @@ -196,6 +218,43 @@ export default { .on('mouseover', function(d, i) { that.tipName.show(d, this); }) + .on('contextmenu', function (d) { + if (d.isReal) { + const honeycombFrames = d3.select('#honeycomb-selector_honeycomb-frames'); + const appGovernTopoHoneycombFrames = that.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(this.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.switchNativeContextMenu(false); + that.$store.commit('rocketTopo/SET_HONEYCOMB_NODE', d); + + d3.selectAll('#honeycomb-selector_honeycomb-group-top-right').on('click', () => { + that.$store.commit('rocketTopo/SET_SHOW_ALARM_DIALOG', true); + that.removeHoneycomb(that); + }); + d3.selectAll('#honeycomb-selector_honeycomb-group-below-right').on('click', () => { + that.$store.commit('rocketTopo/SET_SHOW_TRACE_DIALOG', true); + that.removeHoneycomb(that); + }); + d3.selectAll('#honeycomb-selector_honeycomb-group-below-left').on('click', () => { + that.$store.commit('rocketTopo/SET_SHOW_INSTANCES_DIALOG', true); + that.removeHoneycomb(that); + }); + d3.selectAll('#honeycomb-selector_honeycomb-group-top-left').on('click', () => { + that.$store.commit('rocketTopo/SET_SHOW_ENDPOINT_DIALOG', true); + that.removeHoneycomb(that); + }); + } + }) .on('mouseout', function(d, i) { that.tipName.hide(d, this); }) @@ -273,7 +332,7 @@ export default { .attr('ry', 3) .attr('fill', d => d.cpm ? '#217EF299' : '#6a6d7799') .on('click', function(d, i) { - that.$store.commit('rocketTopo/SET_MODE', d.detectPoints) + that.$store.commit('rocketTopo/SET_MODE', d.detectPoints) event.stopPropagation(); that.tip.hide({}, this); that.tip.show(d, this); @@ -303,7 +362,7 @@ export default { if (currNode.id === node.id) { return true; } - return this.datas.calls.filter(i => + 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; @@ -453,5 +512,146 @@ toggleLineText(lineText, currNode, isHover) { 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-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-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-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-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-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.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-top-left.reverse { + opacity: 0; + animation: honeycombXTopReverse 0.1s linear; + } + + #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-below:hover,*/ + #honeycomb-selector_honeycomb-group-below-left:hover, + #honeycomb-selector_honeycomb-group-top-left:hover { + fill: #0ae; + } + + #honeycomb-selector_honeycomb-group-below-right:hover { + fill: #24c1ab; + } + + @keyframes honeycombXTop { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + + @keyframes honeycombXTopBackground { + from { + opacity: 0; + } + to { + opacity: 0.2; + } + } + + @keyframes honeycombXTopReverse { + from { + opacity: 1; + } + to { + opacity: 0; + } + } + + @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; + } + } </style> diff --git a/src/views/components/trace/trace-search.vue b/src/views/components/trace/trace-search.vue index 3fe1149..222ab4c 100644 --- a/src/views/components/trace/trace-search.vue +++ b/src/views/components/trace/trace-search.vue @@ -38,7 +38,7 @@ </a> <div class="flex-h"> <TraceSelect :hasSearch="true" :title="this.$t('service')" :value="service" @input="chooseService" - :data="rocketTrace.services"/> + :data="rocketTrace.services" :readonly="inTopo"/> <TraceSelect :hasSearch="true" :title="this.$t('instance')" v-model="instance" :data="rocketTrace.instances"/> <TraceSelect :title="this.$t('status')" :value="traceState" @input="chooseStatus" :data="[{label:'All', key: 'ALL'}, {label:'Success', key: 'SUCCESS'}, {label:'Error', key: 'ERROR'}]"/> @@ -71,7 +71,7 @@ <script lang="ts"> import { Duration, Option } from '@/types/global'; - import { Component, Vue, Watch } from 'vue-property-decorator'; + import { Component, Vue, Watch, Prop } from 'vue-property-decorator'; import { Action, Getter, Mutation, State } from 'vuex-class'; import TraceSelect from './trace-select.vue'; @@ -92,11 +92,14 @@ private status: boolean = true; private maxTraceDuration: string = localStorage.getItem('maxTraceDuration') || ''; private minTraceDuration: string = localStorage.getItem('minTraceDuration') || ''; - private service: Option = {label: 'All', key: ''}; + @Prop({default:{label: 'All', key: ''}}) + public service!: Option; 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'}; + @Prop({default: false, type: Boolean}) + public inTopo!: boolean; private dateFormat = (date: Date, step: string) => { const year = date.getFullYear(); @@ -177,6 +180,8 @@ paging: {pageNum: 1, pageSize: 15, needTotal: true}, queryOrder: this.rocketTrace.traceForm.queryOrder, }; + console.log('this.service: ', this.service); + if (this.service.key) { temp.serviceId = this.service.key; } diff --git a/src/views/components/trace/trace-select.vue b/src/views/components/trace/trace-select.vue index 40164c1..bff904f 100644 --- a/src/views/components/trace/trace-select.vue +++ b/src/views/components/trace/trace-select.vue @@ -16,13 +16,14 @@ */ <template> - <div class="rk-trace-sel-wrapper cp flex-h" v-clickout="() => { visible = false;search = '';}" :class="{'active':visible}"> - <div class="rk-trace-bar-i flex-h" @click="visible = !visible"> + <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> - <svg 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> @@ -48,6 +49,8 @@ export default class TraceSelect extends Vue { @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() { diff --git a/src/views/containers/alarm.vue b/src/views/containers/alarm.vue index e061640..477c692 100644 --- a/src/views/containers/alarm.vue +++ b/src/views/containers/alarm.vue @@ -17,7 +17,7 @@ <template> <div class="rk-alarm flex-v"> - <AlarmTool :durationTime="durationTime" :total="rocketAlarm.total"/> + <AlarmTool :durationTime="durationTime" :total="rocketAlarm.total" :alarmScope="alarmScope" :isDrawer="isDrawer" :keyword="keyword"/> <div style="flex-grow: 1;overflow: auto;height: 100%;"> <AlarmTable :data="rocketAlarm.alarmService"/> </div> @@ -28,6 +28,7 @@ import Vue from 'vue'; import Component from 'vue-class-component'; import alarm from '@/store/modules/alarm'; +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'; @@ -38,6 +39,12 @@ import { State, Action, Getter } from 'vuex-class'; export default class Alarm extends Vue { @State('rocketAlarm') private rocketAlarm!: any; @Getter('durationTime') private durationTime: any; + @Prop({default: {label: 'All', key: ''}}) + public alarmScope: any; + @Prop({default: false, type: Boolean}) + public isDrawer!: boolean; + @Prop({default: ''}) + public keyword!: string; private beforeCreate() { this.$store.registerModule('rocketAlarm', alarm); } diff --git a/src/views/containers/topology.vue b/src/views/containers/topology.vue index 0491176..99eeb26 100644 --- a/src/views/containers/topology.vue +++ b/src/views/containers/topology.vue @@ -22,7 +22,7 @@ </div> </template> <script lang="ts"> -import { Vue, Component } from 'vue-property-decorator'; +import { Vue, Component, Watch } from 'vue-property-decorator'; import { State, Action, Getter, Mutation } from 'vuex-class'; import { AxiosResponse } from 'axios'; import Topo from '../components/topology/topo.vue'; @@ -38,8 +38,10 @@ export default class Topology extends Vue { @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]); + // this.SET_EVENTS([this.getTopo]); + this.SET_EVENTS([]); } private mounted() { this.getTopo(); diff --git a/src/views/containers/trace.vue b/src/views/containers/trace.vue index 82bf740..81e248b 100644 --- a/src/views/containers/trace.vue +++ b/src/views/containers/trace.vue @@ -17,7 +17,7 @@ <template> <div class="rk-trace flex-v"> - <TraceSearch/> + <TraceSearch :service="service" :inTopo="inTopo"/> <div class="rk-trace-inner"> <TraceTable/> <TraceDetail :current="stateTrace.currentTrace" :spans="stateTrace.traceSpans"/> @@ -26,7 +26,8 @@ </template> <script lang="ts"> -import { Component, Vue } from 'vue-property-decorator'; +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'; @@ -42,6 +43,13 @@ export default class Trace extends Vue { @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: ''}}) + public service!: Option; + + @Prop({default: false, type: Boolean}) + public inTopo!: boolean; + private show: boolean = true; private beforeCreate() { this.$store.registerModule('rocketTrace', trace); diff --git a/vue.config.js b/vue.config.js index 53b87d7..370947b 100644 --- a/vue.config.js +++ b/vue.config.js @@ -19,7 +19,7 @@ module.exports = { devServer: { proxy: { '/graphql': { - target: 'http://127.0.0.1:12800', + target: 'http://122.112.182.72:8080', changeOrigin: true, }, },
