You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@skywalking.apache.org by kd...@apache.org on 2019/11/03 16:13:05 UTC
[skywalking-rocketbot-ui] 02/02: topology to enhance honeycomb
button
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 <ro...@gmail.com>
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,
},
},