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:03 UTC
[skywalking-rocketbot-ui] branch
topology_to_enhance_honeycomb_button created (now 9b54704)
This is an automated email from the ASF dual-hosted git repository.
kdump pushed a change to branch topology_to_enhance_honeycomb_button
in repository https://gitbox.apache.org/repos/asf/skywalking-rocketbot-ui.git.
at 9b54704 topology to enhance honeycomb button
This branch includes the following new commits:
new 43eba9b topology to enhance honeycomb button
new 9b54704 topology to enhance honeycomb button
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
[skywalking-rocketbot-ui] 02/02: topology to enhance honeycomb
button
Posted by kd...@apache.org.
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,
},
},
[skywalking-rocketbot-ui] 01/02: topology to enhance honeycomb
button
Posted by kd...@apache.org.
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 43eba9b691a62764a6a45eb84924511f52b0d8a9
Author: x22x22 <ro...@gmail.com>
AuthorDate: Mon Nov 4 00:12:40 2019 +0800
topology to enhance honeycomb button
---
src/utils/cssHelper.ts | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 67 insertions(+)
diff --git a/src/utils/cssHelper.ts b/src/utils/cssHelper.ts
new file mode 100644
index 0000000..d6ea1ae
--- /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 {
+ 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],
+ };
+ }
+
+ 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})`;
+ }
+
+ 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],
+ };
+ }
+
+ 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();