You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@skywalking.apache.org by wu...@apache.org on 2019/11/12 16:36:12 UTC
[skywalking-rocketbot-ui] branch master updated: Topology to
enhance honeycomb button (#176)
This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-rocketbot-ui.git
The following commit(s) were added to refs/heads/master by this push:
new 071d710 Topology to enhance honeycomb button (#176)
071d710 is described below
commit 071d7105260bdc8a801c51524c7c97a43a03a856
Author: Kdump <ro...@gmail.com>
AuthorDate: Wed Nov 13 00:36:06 2019 +0800
Topology to enhance honeycomb button (#176)
* topology to enhance honeycomb button
* topology to enhance honeycomb button
* topology to enhance honeycomb button
* add service and endpoint
* fix dashboard memory leak.
* topology to enhance honeycomb button
* topology to enhance honeycomb button
* topology to enhance honeycomb button
* topology to enhance honeycomb button
* topology to enhance honeycomb button
---
package-lock.json | 258 ++++++++-------
package.json | 3 +-
src/assets/index.ts | 71 ++---
src/assets/styles/lib.scss | 3 +-
src/assets/svg/honeycomb-selector.svg | 345 +++++++++++++++++++++
src/components/rk-echarts.vue | 5 +-
src/main.ts | 3 +
.../dashboard/modules/dashboard-data-layout.ts | 6 +-
.../modules/dashboard/modules/dashboard-data.ts | 22 ++
src/store/modules/dashboard/mutation-types.ts | 1 +
src/store/modules/topology/index.ts | 25 ++
src/store/mutation-types.ts | 5 +
src/utils/cssHelper.ts | 67 ++++
src/views/components/alarm/alarm-tool.vue | 13 +-
src/views/components/dashboard/tool-bar-select.vue | 10 +-
src/views/components/topology/endpoints-survey.vue | 55 ++++
src/views/components/topology/instances-survey.vue | 55 ++++
src/views/components/topology/topo-aside.vue | 119 ++++++-
src/views/components/topology/topo.vue | 225 +++++++++++++-
src/views/components/trace/trace-search.vue | 16 +-
src/views/components/trace/trace-select.vue | 9 +-
src/views/containers/alarm.vue | 10 +-
src/views/containers/endpoint-survey-window.vue | 148 +++++++++
src/views/containers/instances-survey-window.vue | 142 +++++++++
src/views/containers/topology.vue | 1 +
src/views/containers/trace.vue | 12 +-
26 files changed, 1445 insertions(+), 184 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 7762b3e..004298d 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",
@@ -11116,11 +11157,18 @@
}
},
"vue-property-decorator": {
- "version": "7.3.0",
- "resolved": "http://registry.npm.taobao.org/vue-property-decorator/download/vue-property-decorator-7.3.0.tgz",
- "integrity": "sha1-1Q1n8LDxyBT58vujbW7sy8xi27Y=",
+ "version": "8.3.0",
+ "resolved": "http://nexus.yfb.sunline.cn:8099/nexus3/repository/npm-sunline/vue-property-decorator/-/vue-property-decorator-8.3.0.tgz",
+ "integrity": "sha1-U28CfcfWJvN8jYWi3ALwpsuXlEA=",
"requires": {
- "vue-class-component": "^6.2.0"
+ "vue-class-component": "^7.1.0"
+ },
+ "dependencies": {
+ "vue-class-component": {
+ "version": "7.1.0",
+ "resolved": "http://nexus.yfb.sunline.cn:8099/nexus3/repository/npm-sunline/vue-class-component/-/vue-class-component-7.1.0.tgz",
+ "integrity": "sha1-sz78sQ4XI21oT3Cx6W8ZRux5Poc="
+ }
}
},
"vue-router": {
diff --git a/package.json b/package.json
index d83738f..f5397b4 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",
@@ -22,7 +23,7 @@
"vue-class-component": "^6.0.0",
"vue-i18n": "^8.10.0",
"vue-js-modal": "^1.3.31",
- "vue-property-decorator": "^7.0.0",
+ "vue-property-decorator": "^8.3.0",
"vue-router": "^3.0.1",
"vuex": "^3.0.1",
"vuex-class": "^0.3.1"
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/styles/lib.scss b/src/assets/styles/lib.scss
index 04e5187..8cf895c 100644
--- a/src/assets/styles/lib.scss
+++ b/src/assets/styles/lib.scss
@@ -26,6 +26,7 @@
.ell{text-overflow:ellipsis; white-space:nowrap; overflow:hidden}
.tc{text-align: center}
.tr{text-align: right}
+.cd{cursor: default}
.cp{cursor: pointer}
.cm{cursor: move}
.wba{word-break: break-all;}
@@ -70,4 +71,4 @@
}
.link-hover:hover{
color: #448dfe;
-}
\ No newline at end of file
+}
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/components/rk-echarts.vue b/src/components/rk-echarts.vue
index 840b56d..c7daecf 100644
--- a/src/components/rk-echarts.vue
+++ b/src/components/rk-echarts.vue
@@ -38,7 +38,10 @@ export default class RkEcharts extends Vue {
}
private beforeDestroy(): void {
- window.removeEventListener('resize', this.myChart.resize);
+ if (this.myChart.dispose) {
+ this.myChart.dispose();
+ }
+ window.removeEventListener('resize', this.myChart.resize);
}
@Watch('option', { deep: true })
private onoptionChanged(newVal: any, oldVal: any): void {
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/dashboard/modules/dashboard-data-layout.ts b/src/store/modules/dashboard/modules/dashboard-data-layout.ts
index de08ce4..0eba842 100644
--- a/src/store/modules/dashboard/modules/dashboard-data-layout.ts
+++ b/src/store/modules/dashboard/modules/dashboard-data-layout.ts
@@ -34,7 +34,7 @@ export interface State {
tree: CompsTree[];
}
-const initState: State = {
+export const initState: State = {
current: 0,
group: 0,
index: 0,
@@ -79,6 +79,10 @@ const mutations: MutationTree<State> = {
state.group = current;
state.current = 0;
},
+ [types.SET_CURRENT_GROUP_WITH_CURRENT](state: State, { index, current = 0 }: { index: number, current: number }) {
+ state.group = index;
+ state.current = current;
+ },
[types.ADD_COMPS_GROUP](state: State, params: any) {
if (!params.name) {return; }
switch (params.template) {
diff --git a/src/store/modules/dashboard/modules/dashboard-data.ts b/src/store/modules/dashboard/modules/dashboard-data.ts
index 7925ca4..31b292b 100644
--- a/src/store/modules/dashboard/modules/dashboard-data.ts
+++ b/src/store/modules/dashboard/modules/dashboard-data.ts
@@ -54,6 +54,28 @@ const actions: ActionTree<State, any> = {
context.dispatch('SET_CURRENT_STATE', context.state.tree[index].query);
context.dispatch('RUN_EVENTS', {}, {root: true});
},
+ MIXHANDLE_CHANGE_GROUP_WITH_CURRENT(
+ context: { commit: Commit, dispatch: Dispatch, state: State, rootState: any },
+ { index, current = 0 }: { index: number, current: number }): void {
+ const rocketOption = context.rootState.rocketOption;
+ const temp: any = {};
+ if (rocketOption.currentService) {
+ temp.service = rocketOption.currentService;
+ }
+ if (rocketOption.currentEndpoint) {
+ temp.endpoint = rocketOption.currentEndpoint;
+ }
+ if (rocketOption.currentInstance) {
+ temp.instance = rocketOption.currentInstance;
+ }
+ if (rocketOption.currentDatabase) {
+ temp.database = rocketOption.currentDatabase;
+ }
+ context.commit('SET_GROUP_QUERY', temp);
+ context.commit('SET_CURRENT_GROUP_WITH_CURRENT', { index, current });
+ context.dispatch('SET_CURRENT_STATE', context.state.tree[index].query);
+ context.dispatch('RUN_EVENTS', {}, { root: true });
+ },
} ;
// getters
diff --git a/src/store/modules/dashboard/mutation-types.ts b/src/store/modules/dashboard/mutation-types.ts
index b0fd160..73e3acc 100644
--- a/src/store/modules/dashboard/mutation-types.ts
+++ b/src/store/modules/dashboard/mutation-types.ts
@@ -38,6 +38,7 @@ export const SET_SEARCH_ENDPOINTS = 'SET_SEARCH_ENDPOINTS';
// comp
export const SET_CURRENT_GROUP = 'SET_CURRENT_GROUP';
+export const SET_CURRENT_GROUP_WITH_CURRENT = 'SET_CURRENT_GROUP_WITH_CURRENT';
export const SET_CURRENT_COMPS = 'SET_CURRENT_COMPS';
export const ADD_COMPS_GROUP = 'ADD_COMPS_GROUP';
export const ADD_COMPS_TREE = 'ADD_COMPS_TREE';
diff --git a/src/store/modules/topology/index.ts b/src/store/modules/topology/index.ts
index 1c459d4..0cf662c 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_ENDPOINT_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 79a48c4..ea6a211 100644
--- a/src/store/mutation-types.ts
+++ b/src/store/mutation-types.ts
@@ -79,6 +79,11 @@ 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';
// comparison
export const SET_CHARTVAL = 'SET_CHARTVAL';
diff --git a/src/utils/cssHelper.ts b/src/utils/cssHelper.ts
new file mode 100644
index 0000000..de82c68
--- /dev/null
+++ b/src/utils/cssHelper.ts
@@ -0,0 +1,67 @@
+export interface CssMatrix {
+ a: number;
+ b: number;
+ c: number;
+ d: number;
+ tx: number;
+ ty: number;
+}
+
+export interface CssTranslate {
+ x: number;
+ y: number;
+}
+
+class CssHelper {
+ public matrixSerialization(matrixString: string): CssMatrix {
+ const matrixArray = matrixString.replace('matrix(', '')
+ .replace(')', '').split(',');
+ // const matrixNumberArray = [];
+ const matrixNumberArray = matrixArray.map((value) => {
+ return parseFloat(value);
+ });
+ return {
+ a: matrixNumberArray[0],
+ b: matrixNumberArray[1],
+ c: matrixNumberArray[2],
+ d: matrixNumberArray[3],
+ tx: matrixNumberArray[4],
+ ty: matrixNumberArray[5],
+ };
+ }
+
+ public translateDeserialization(translate: CssTranslate) {
+ let translateString = '';
+ const translateEntries = Object.entries(translate);
+ translateEntries.forEach((value) => {
+ translateString += value[1] + ',';
+ });
+ translateString = translateString.slice(0, translateString.length - 1);
+ return `translate(${translateString})`;
+ }
+
+ public translateSerialization(translateString: string): CssTranslate {
+ const translateArray = translateString.replace('translate(', '')
+ .replace(')', '').split(',');
+ // const translateNumberArray = [];
+ const translateNumberArray = translateArray.map((value) => {
+ return parseFloat(value);
+ });
+ return {
+ x: translateNumberArray[0],
+ y: translateNumberArray[1],
+ };
+ }
+
+ public matrixDeserialization(cssMatrix: CssMatrix) {
+ let matrixString = '';
+ const matrixEntries = Object.entries(cssMatrix);
+ matrixEntries.forEach((value) => {
+ matrixString += value[1] + ',';
+ });
+ matrixString = matrixString.slice(0, matrixString.length - 1);
+ return `matrix(${matrixString})`;
+ }
+}
+
+export default new CssHelper();
diff --git a/src/views/components/alarm/alarm-tool.vue b/src/views/components/alarm/alarm-tool.vue
index dd578fb..786aedd 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="!inTopo" :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="inTopo" type="text" v-model="keyword" class="rk-alarm-tool-input" @input="handleRefresh(1)">
</div>
<RkPage class="mt-15" :currentSize="20" :currentPage="pageNum" @changePage="handlePage" :total="total"/>
</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: ''}})
+ private alarmScope: any;
+ @Prop({default: false, type: Boolean})
+ private inTopo!: boolean;
private alarmOptions: any = [
{label: 'All', key: ''},
{label: 'Service', key: 'Service'},
{label: 'ServiceInstance', key: 'ServiceInstance'},
{label: 'Endpoint', key: 'Endpoint'},
];
- private keyword: string = '';
+ @Prop({default: ''})
+ private keyword!: string;
private handlePage(pageNum: number) {
this.handleRefresh(pageNum);
@@ -71,7 +75,6 @@ export default class AlarmTool extends Vue {
}
private beforeMount() {
this.SET_EVENTS([() => { this.handleRefresh(1); } ]);
- this.handleRefresh(1);
}
}
</script>
diff --git a/src/views/components/dashboard/tool-bar-select.vue b/src/views/components/dashboard/tool-bar-select.vue
index 7acaf01..241c628 100644
--- a/src/views/components/dashboard/tool-bar-select.vue
+++ b/src/views/components/dashboard/tool-bar-select.vue
@@ -16,8 +16,9 @@
*/
<template>
- <div class="rk-dashboard-bar-select cp flex-h" v-clickout="() => { visible = false;search = '';}" :class="{'active':visible}">
- <div class="rk-dashboard-bar-i flex-h" @click="visible = !visible">
+ <div class="rk-dashboard-bar-select flex-h" v-clickout="() => { visible = false;search = '';}"
+ :class="{'active':visible, 'cp': selectable, 'cd': !selectable}">
+ <div class="rk-dashboard-bar-i flex-h" @click="selectable && (visible = !visible)">
<svg class="icon lg mr-15">
<use :xlink:href="`#${icon}`"></use>
</svg>
@@ -25,11 +26,11 @@
<div class="sm grey">{{title}}</div>
<div class="ell" v-tooltip:right.ellipsis="current.label || ''">{{current.label}}</div>
</div>
- <svg class="icon lg trans" :style="`transform: rotate(${visible?180:0}deg)`">
+ <svg v-if="selectable" class="icon lg trans" :style="`transform: rotate(${visible?180:0}deg)`">
<use xlink:href="#arrow-down"></use>
</svg>
</div>
- <div class="rk-dashboard-sel" v-if="visible">
+ <div class="rk-dashboard-sel" v-if="visible && selectable">
<div>
<input type="text" class="rk-dashboard-sel-search" v-model="search">
<svg class="icon sm close" @click="search = ''" v-if="search">
@@ -51,6 +52,7 @@ export default class ToolBarSelect extends Vue {
@Prop() public current!: any;
@Prop() public title!: string;
@Prop() public icon!: string;
+ @Prop({type: Boolean, default: true}) public selectable!: boolean;
public search: string = '';
public visible: boolean = false;
get filterData() {
diff --git a/src/views/components/topology/endpoints-survey.vue b/src/views/components/topology/endpoints-survey.vue
new file mode 100644
index 0000000..fa449f6
--- /dev/null
+++ b/src/views/components/topology/endpoints-survey.vue
@@ -0,0 +1,55 @@
+/**
+* Licensed to the Apache Software Foundation (ASF) under one or more
+* contributor license agreements. See the NOTICE file distributed with
+* this work for additional information regarding copyright ownership.
+* The ASF licenses this file to You under the Apache License, Version 2.0
+* (the "License"); you may not use this file except in compliance with
+* the License. You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+<template>
+ <div class="dashboard-container clear">
+ <DashboardItem
+ v-for="(i, index) in rocketComps.tree[0]
+ .children[2].children" :key="index+i.t+i.w+i.d" :index="index"
+ :rocketGlobal="rocketGlobal" :i="i" :dragIndex="dragIndex"
+ @dragStart="dragStart" />
+ </div>
+</template>
+
+<script lang="ts">
+ import DashboardItem from '@/views/components/dashboard/dashboard-item.vue';
+ import Vue from 'vue';
+ import { Component } from 'vue-property-decorator';
+ import { State } from 'vuex-class';
+
+ @Component({
+ components: {
+ DashboardItem,
+ },
+ })
+ export default class InstancesSurvey extends Vue {
+ @State('rocketbot') private rocketGlobal: any;
+ @State('rocketOption') private stateDashboardOption!: any;
+ @State('rocketData') private rocketComps!: any;
+
+ private dragIndex: number = NaN;
+
+
+ public dragStart(index: number) {
+ this.dragIndex = index;
+ }
+ }
+</script>
+
+<style lang="less" scoped>
+
+</style>
diff --git a/src/views/components/topology/instances-survey.vue b/src/views/components/topology/instances-survey.vue
new file mode 100644
index 0000000..bf8aca6
--- /dev/null
+++ b/src/views/components/topology/instances-survey.vue
@@ -0,0 +1,55 @@
+/**
+* Licensed to the Apache Software Foundation (ASF) under one or more
+* contributor license agreements. See the NOTICE file distributed with
+* this work for additional information regarding copyright ownership.
+* The ASF licenses this file to You under the Apache License, Version 2.0
+* (the "License"); you may not use this file except in compliance with
+* the License. You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+<template>
+ <div class="dashboard-container clear">
+ <DashboardItem
+ v-for="(i, index) in rocketComps.tree[0]
+ .children[3].children" :key="index+i.t+i.w+i.d" :index="index"
+ :rocketGlobal="rocketGlobal" :i="i" :dragIndex="dragIndex"
+ @dragStart="dragStart" />
+ </div>
+</template>
+
+<script lang="ts">
+ import DashboardItem from '@/views/components/dashboard/dashboard-item.vue';
+ import Vue from 'vue';
+ import { Component } from 'vue-property-decorator';
+ import { State } from 'vuex-class';
+
+ @Component({
+ components: {
+ DashboardItem,
+ },
+ })
+ export default class InstancesSurvey extends Vue {
+ @State('rocketbot') private rocketGlobal: any;
+ @State('rocketOption') private stateDashboardOption!: any;
+ @State('rocketData') private rocketComps!: any;
+
+ private dragIndex: number = NaN;
+
+
+ public dragStart(index: number) {
+ this.dragIndex = index;
+ }
+ }
+</script>
+
+<style lang="less" scoped>
+
+</style>
diff --git a/src/views/components/topology/topo-aside.vue b/src/views/components/topology/topo-aside.vue
index 543e3da..2e24222 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
+ v-if="stateTopo.showAlarmDialog"
+ custom-class="performance-metrics-window"
+ size="75%"
+ destroy-on-close
+ :visible.sync="stateTopo.showAlarmDialog"
+ >
+ <alarm-containers :style="`height: ${drawerMainBodyHeight}`"
+ :alarmScope="{label: 'Service', key: 'Service'}"
+ inTopo
+ :keyword="stateTopo.honeycombNode.name"
+ ></alarm-containers>
+ </el-drawer>
+ <el-drawer
+ custom-class="performance-metrics-window"
+ v-if="stateTopo.showTraceDialog"
+ 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>
+ <instances-survey-window
+ v-if="stateTopo.showInstancesDialog"
+ :is-show.sync="stateTopo.showInstancesDialog"
+ :instances="stateDashboardOption.instances"
+ ></instances-survey-window>
+ <endpoint-survey-window
+ v-if="stateTopo.showEndpointDialog"
+ :is-show.sync="stateTopo.showEndpointDialog"
+ :endpoints="stateDashboardOption.endpoints"
+ ></endpoint-survey-window>
</aside>
</template>
<script lang="ts">
@@ -124,13 +159,62 @@ 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';
+import InstancesSurveyWindow from '@/views/containers/instances-survey-window.vue';
+import EndpointSurveyWindow from '@/views/containers/endpoint-survey-window.vue';
+import { initState } from '@/store/modules/dashboard/modules/dashboard-data-layout';
-@Component({components: {TopoChart, TopoService, ChartResponse, Radial}})
+@Component({components: {TopoChart, TopoService, ChartResponse, Radial, AlarmContainers,
+ TraceContainers, InstancesSurveyWindow, EndpointSurveyWindow}})
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;
+ @State('rocketTopo') private stateTopo!: topoState;
+ @State('rocketOption') private stateDashboardOption!: any;
+ @Getter('intervalTime') private intervalTime: any;
+ @Getter('durationTime') private durationTime: any;
+ @Action('rocketTopo/GET_TOPO') private GET_TOPO: any;
+ @Action('rocketTopo/CLEAR_TOPO') private CLEAR_TOPO: any;
+ @Mutation('rocketTopo/SET_MODE_STATUS') private SET_MODE_STATUS: any;
+ @Action('rocketTopo/CLEAR_TOPO_INFO') private CLEAR_TOPO_INFO: any;
+ @Mutation('SET_COMPS_TREE') private SET_COMPS_TREE: any;
+
+ private drawerMainBodyHeight = '100%';
+ private initState = initState;
+ private radioStatus: boolean = false;
+ private show: boolean = true;
+ private showInfo: boolean = false;
+ private isMini: boolean = true;
+ private showInfoCount: number = 0;
+
+ private resize() {
+ this.drawerMainBodyHeight = `${document.body.clientHeight - 50}px`;
+ }
+
+ private beforeCreate() {
+ this.$store.registerModule('rocketTopo', topo);
+ }
+
+ private async created() {
+ this.getTopo();
+ this.SET_COMPS_TREE(this.initState.tree);
+ }
+
+ private mounted() {
+ this.resize();
+ window.addEventListener('resize', this.resize);
+ }
+
+ private getTopo() {
+ this.GET_TOPO({ duration: this.durationTime });
+ }
+
+ private beforeDestroy() {
+ window.removeEventListener('resize', this.resize);
+ this.CLEAR_TOPO_INFO();
+ this.CLEAR_TOPO();
+ this.$store.unregisterModule('rocketTopo');
+ }
+
get types() {
const result: any = {};
this.stateTopo.nodes.forEach((i: any) => {
@@ -142,11 +226,12 @@ export default class TopoAside extends Vue {
});
return result;
}
- private radioStatus: boolean = false;
- private show: boolean = true;
- private showInfo: boolean = false;
- private isMini: boolean = true;
- private showInfoCount: number = 0;
+
+ @Watch('durationTime')
+ private watchDurationTime() {
+ this.getTopo();
+ }
+
@Watch('stateTopo.selectedCallId')
private watchDetectPointNodeId(newValue: string) {
if (newValue) {
@@ -246,6 +331,20 @@ export default class TopoAside extends Vue {
animation: 0.5s linkTopoAsideBoxMax 1 running;
}
+.performance-metrics-window {
+ .el-drawer__header {
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #72767b;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-bottom: 22px;
+ padding: unset;
+ }
+}
+
@keyframes linkTopoAsideBoxMax {
from {
width: 280px;
diff --git a/src/views/components/topology/topo.vue b/src/views/components/topology/topo.vue
index 6746e77..cf5ae3b 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,7 +137,33 @@ export default {
'datas.nodes': 'draw',
},
methods: {
- draw() {
+ 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(value, oldValue) {
+ // Avoid unnecessary repetitive rendering
+ const diffNodes = _.difference(_.sortBy(value, 'id'), _.sortBy(oldValue, 'id'));
+ if(value && value.length > 0 && diffNodes && diffNodes.length <=0){
+ return null;
+ }
const codeId = this.datas.nodes.map(i => i.id);
for (let i = 0; i < this.datas.calls.length; i += 1) {
const element = this.datas.calls[i];
@@ -196,6 +223,45 @@ 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('SET_CURRENT_SERVICE', { key: d.id, label: d.name });
+ 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('SET_CURRENT_SERVICE', { key: d.id, label: d.name });
+ that.$store.commit('rocketTopo/SET_SHOW_ENDPOINT_DIALOG', true);
+ that.removeHoneycomb(that);
+ });
+ }
+ })
.on('mouseout', function(d, i) {
that.tipName.hide(d, this);
})
@@ -273,7 +339,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 +369,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;
@@ -420,11 +486,11 @@ toggleLineText(lineText, currNode, isHover) {
}
.link {
stroke-linecap: round;
- stroke-width: 1.3px;
+ stroke-width: 1.3px !important;
fill: none;
- animation: dash 1s linear infinite;
+ animation: topo-dash 1s linear infinite !important;
}
- @keyframes dash {
+ @keyframes topo-dash {
from {
stroke-dashoffset: 20;
}
@@ -453,5 +519,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 2b92263..3555f9e 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, Prop, Vue, Watch } 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: ''}})
+ private 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})
+ private inTopo!: boolean;
private dateFormat = (date: Date, step: string) => {
const year = date.getFullYear();
@@ -133,6 +136,7 @@
return `${year}-${month}-${day} ${hour}${minute}`;
}
}
+
private globalTimeFormat = (time: Date[]): any => {
let step = 'MINUTE';
const unix = Math.round(time[1].getTime()) - Math.round(time[0].getTime());
@@ -177,6 +181,7 @@
paging: {pageNum: 1, pageSize: 15, needTotal: true},
queryOrder: this.rocketTrace.traceForm.queryOrder,
};
+
if (this.service.key) {
temp.serviceId = this.service.key;
}
@@ -236,6 +241,9 @@
private mounted() {
this.getTraceList();
+ if (this.service && this.service.key) {
+ this.GET_INSTANCES({duration: this.durationTime, serviceId: this.service.key});
+ }
}
}
</script>
@@ -256,7 +264,7 @@
border-radius: 3px;
}
- .rk-trace-search-range,.rk-auto-select {
+ .rk-trace-search-range, .rk-auto-select {
border-radius: 3px;
background-color: #fff;
padding: 1px;
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..61c6afb 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" :inTopo="inTopo" :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,11 +39,18 @@ 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: ''}})
+ private alarmScope: any;
+ @Prop({default: false, type: Boolean})
+ private inTopo!: boolean;
+ @Prop({default: ''})
+ private keyword!: string;
private beforeCreate() {
this.$store.registerModule('rocketAlarm', alarm);
}
private beforeDestroy() {
this.$store.unregisterModule('rocketAlarm');
+
}
}
</script>
diff --git a/src/views/containers/endpoint-survey-window.vue b/src/views/containers/endpoint-survey-window.vue
new file mode 100644
index 0000000..6a86585
--- /dev/null
+++ b/src/views/containers/endpoint-survey-window.vue
@@ -0,0 +1,148 @@
+/**
+* Licensed to the Apache Software Foundation (ASF) under one or more
+* contributor license agreements. See the NOTICE file distributed with
+* this work for additional information regarding copyright ownership.
+* The ASF licenses this file to You under the Apache License, Version 2.0
+* (the "License"); you may not use this file except in compliance with
+* the License. You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+<template>
+ <div class="performance-metrics-window">
+ <el-drawer
+ :destroy-on-close="true"
+ :visible.sync="isShowSync"
+ direction="rtl"
+ size="80%">
+ <div class="rk-dashboard-bar flex-h">
+ <ToolBarSelect
+ :selectable="false"
+ :title="this.$t('currentService')"
+ :current="stateDashboardOption.currentService"
+ :data="stateDashboardOption.services"
+ icon="package"/>
+ <ToolBarEndpointSelect @onChoose="selectEndpoint" :title="$t('currentEndpoint')"
+ :current="stateDashboardOption.currentEndpoint" :data="endpoints" icon="code">
+ </ToolBarEndpointSelect>
+ </div>
+ <endpoints-survey v-if="!rocketComps.loading" :style="`overflow: auto; height: ${endpointsSurveyHeight}`" />
+ </el-drawer>
+ </div>
+</template>
+
+<script lang="ts">
+ import EndpointsSurvey from '@/views/components/topology/endpoints-survey.vue';
+ import ToolBarSelect from '@/views/components/dashboard/tool-bar-select.vue';
+ import ToolBarEndpointSelect from '@/views/components/dashboard/tool-bar-endpoint-select.vue';
+ import _ from 'lodash';
+ import Vue from 'vue';
+ import { Component, PropSync, Watch } from 'vue-property-decorator';
+ import { Action, Getter, State } from 'vuex-class';
+
+ interface Endpoint {
+ label: string;
+ key: string;
+ name?: string;
+ }
+
+ @Component({
+ components: {
+ EndpointsSurvey,
+ ToolBarSelect,
+ ToolBarEndpointSelect,
+ },
+ })
+ export default class InstancesSurveyWindow extends Vue {
+ @State('rocketOption') private stateDashboardOption!: any;
+ @State('rocketData') private rocketComps!: any;
+ @Getter('durationTime') private durationTime: any;
+ @Action('SELECT_ENDPOINT') private SELECT_ENDPOINT: any;
+ @Action('MIXHANDLE_CHANGE_GROUP_WITH_CURRENT') private MIXHANDLE_CHANGE_GROUP_WITH_CURRENT: any;
+ @Action('MIXHANDLE_GET_OPTION') private MIXHANDLE_GET_OPTION: any;
+ @Action('GET_QUERY') private GET_QUERY: any;
+ @PropSync('isShow', { default: false })
+ private isShowSync!: boolean;
+ private endpointsSurveyHeight = '100%';
+
+ private tabsLoading = true;
+ private endpointName: string = '0';
+ private endpointKey: string = '0';
+ private endpoints: any[] = [];
+
+ private dragIndex: number = NaN;
+
+ public dragStart(index: number) {
+ this.dragIndex = index;
+ }
+
+ private selectEndpoint(i: any) {
+ this.SELECT_ENDPOINT({endpoint: i, duration: this.durationTime});
+ }
+
+ private handleRefresh() {
+ this.GET_QUERY({
+ serviceId: this.stateDashboardOption.currentService.key || '',
+ endpointId: this.endpointKey || '',
+ endpointName: this.endpointName || '',
+ duration: this.durationTime,
+ });
+ }
+
+ private handleOption() {
+ this.MIXHANDLE_CHANGE_GROUP_WITH_CURRENT({ index: 0, current: 2 });
+ return this.MIXHANDLE_GET_OPTION({ compType: 'service', duration: this.durationTime })
+ .then(() => {
+ this.handleRefresh();
+ });
+ }
+
+ @Watch('stateDashboardOption.endpoints')
+ private watchInstances(endpoints: Endpoint[]) {
+ _.forEach(endpoints, (endpoint) => {
+ endpoint.name = endpoint.label;
+ });
+ this.endpoints = endpoints;
+ if (endpoints.length > 0 && (this.endpointName === '0')) {
+ this.SELECT_ENDPOINT({ endpoint: endpoints[0], duration: this.durationTime });
+ if (endpoints[0].name) {
+ this.endpointName = endpoints[0].name;
+ this.endpointKey = endpoints[0].key;
+ }
+ }
+ this.tabsLoading = false;
+ }
+
+ private beforeMount() {
+ this.handleOption();
+ }
+
+ private mounted() {
+ this.resize();
+ window.addEventListener('resize', this.resize);
+ }
+
+ private resize() {
+ this.endpointsSurveyHeight = `${document.body.clientHeight - 101}px`;
+ }
+
+ private beforeDestroy() {
+ window.removeEventListener('resize', this.resize);
+ }
+ }
+</script>
+
+<style lang="scss">
+ .rk-dashboard-bar {
+ flex-shrink: 0;
+ color: #efefef;
+ background-color: #333840;
+ }
+</style>
diff --git a/src/views/containers/instances-survey-window.vue b/src/views/containers/instances-survey-window.vue
new file mode 100644
index 0000000..ed6d767
--- /dev/null
+++ b/src/views/containers/instances-survey-window.vue
@@ -0,0 +1,142 @@
+/**
+* Licensed to the Apache Software Foundation (ASF) under one or more
+* contributor license agreements. See the NOTICE file distributed with
+* this work for additional information regarding copyright ownership.
+* The ASF licenses this file to You under the Apache License, Version 2.0
+* (the "License"); you may not use this file except in compliance with
+* the License. You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+<template>
+ <div class="performance-metrics-window">
+ <el-drawer
+ :destroy-on-close="true"
+ title="Instances"
+ :visible.sync="isShowSync"
+ direction="rtl"
+ size="80%">
+ <div class="rk-dashboard-bar flex-h">
+ <ToolBarSelect
+ :selectable="false"
+ :title="this.$t('currentService')"
+ :current="stateDashboardOption.currentService"
+ :data="stateDashboardOption.services" icon="package"/>
+ <ToolBarSelect
+ @onChoose="selectInstance"
+ :title="$t('currentInstance')"
+ :current="stateDashboardOption.currentInstance"
+ :data="instances" icon="disk"/>
+ </div>
+ <instances-survey v-if="isShowSync" :style="`overflow: auto; height: ${instancesSurveyHeight}`" />
+ </el-drawer>
+ </div>
+</template>
+
+<script lang="ts">
+ import InstancesSurvey from '@/views/components/topology/instances-survey.vue';
+ import ToolBarSelect from '@/views/components/dashboard/tool-bar-select.vue';
+ import ToolBarEndpointSelect from '@/views/components/dashboard/tool-bar-endpoint-select.vue';
+ import _ from 'lodash';
+ import Vue from 'vue';
+ import { Component, PropSync, Watch } from 'vue-property-decorator';
+ import { Action, Getter, State } from 'vuex-class';
+
+ interface Instance {
+ label: string;
+ key: string;
+ name?: string;
+ }
+
+ @Component({
+ components: {
+ InstancesSurvey,
+ ToolBarSelect,
+ ToolBarEndpointSelect,
+ },
+ })
+ export default class InstancesSurveyWindow extends Vue {
+ @State('rocketOption') private stateDashboardOption!: any;
+ @State('rocketData') private rocketComps!: any;
+ @Getter('durationTime') private durationTime: any;
+ @Action('SELECT_INSTANCE') private SELECT_INSTANCE: any;
+ @Action('MIXHANDLE_CHANGE_GROUP_WITH_CURRENT') private MIXHANDLE_CHANGE_GROUP_WITH_CURRENT: any;
+ @Action('MIXHANDLE_GET_OPTION') private MIXHANDLE_GET_OPTION: any;
+ @Action('GET_QUERY') private GET_QUERY: any;
+ @PropSync('isShow', { default: false })
+ private isShowSync!: boolean;
+ private instancesSurveyHeight = '100%';
+
+ private tabsLoading = true;
+ private instanceName: string = '0';
+ private instances: any[] = [];
+
+ private dragIndex: number = NaN;
+
+ public dragStart(index: number) {
+ this.dragIndex = index;
+ }
+
+ private selectInstance(i: any) {
+ this.SELECT_INSTANCE({instance: i, duration: this.durationTime});
+ }
+
+ private handleRefresh() {
+ this.GET_QUERY({
+ serviceId: this.stateDashboardOption.currentService.key || '',
+ duration: this.durationTime,
+ });
+ }
+
+ private handleOption() {
+ this.MIXHANDLE_CHANGE_GROUP_WITH_CURRENT({ index: 0, current: 3 });
+ return this.MIXHANDLE_GET_OPTION({ compType: 'service', duration: this.durationTime })
+ .then(() => {
+ this.handleRefresh();
+ });
+ }
+
+ @Watch('stateDashboardOption.instances')
+ private watchInstances(instances: Instance[]) {
+ _.forEach(instances, (instance) => {
+ instance.name = instance.label.includes('@') ? instance.label.split('@')[1] : instance.label;
+ });
+ this.instances = instances;
+ if (instances.length > 0 && (this.instanceName === '0')) {
+ this.SELECT_INSTANCE({ instance: instances[0], duration: this.durationTime });
+ if (instances[0].name) {
+ this.instanceName = instances[0].name;
+ }
+ }
+ this.tabsLoading = false;
+ }
+
+ private beforeMount() {
+ this.handleOption();
+ }
+
+ private mounted() {
+ this.resize();
+ window.addEventListener('resize', this.resize);
+ }
+
+ private resize() {
+ this.instancesSurveyHeight = `${document.body.clientHeight - 101}px`;
+ }
+
+ private beforeDestroy() {
+ window.removeEventListener('resize', this.resize);
+ }
+ }
+</script>
+
+<style lang="less" scoped>
+
+</style>
diff --git a/src/views/containers/topology.vue b/src/views/containers/topology.vue
index 0491176..25c3da8 100644
--- a/src/views/containers/topology.vue
+++ b/src/views/containers/topology.vue
@@ -38,6 +38,7 @@ 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]);
}
diff --git a/src/views/containers/trace.vue b/src/views/containers/trace.vue
index 82bf740..a58bc8f 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: ''}})
+ private service!: Option;
+
+ @Prop({default: false, type: Boolean})
+ private inTopo!: boolean;
+
private show: boolean = true;
private beforeCreate() {
this.$store.registerModule('rocketTrace', trace);