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 1adce54 add topo metrice chart zoom (#159)
1adce54 is described below
commit 1adce5403957510d1ff3f714898636809172ac6c
Author: Kdump <[email protected]>
AuthorDate: Tue Sep 24 13:22:17 2019 +0800
add topo metrice chart zoom (#159)
---
.gitignore | 1 +
package-lock.json | 186 +++++++++++++++------------
package.json | 1 +
src/store/modules/topology/index.ts | 7 +-
src/views/components/topology/topo-aside.vue | 115 +++++++++++++++--
5 files changed, 216 insertions(+), 94 deletions(-)
diff --git a/.gitignore b/.gitignore
index 541a820..9620a91 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,7 @@ node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
+node
# Editor directories and files
.idea
diff --git a/package-lock.json b/package-lock.json
index 02be41b..7762b3e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -897,6 +897,12 @@
}
}
},
+ "@types/lodash": {
+ "version": "4.14.138",
+ "resolved":
"https://registry.npm.taobao.org/@types/lodash/download/@types/lodash-4.14.138.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Flodash%2Fdownload%2F%40types%2Flodash-4.14.138.tgz";,
+ "integrity": "sha1-NPUmQNc1gjAwg0TlecFbN42RmJ4=",
+ "dev": true
+ },
"@types/q": {
"version": "1.5.1",
"resolved":
"http://registry.npm.taobao.org/@types/q/download/@types/q-1.5.1.tgz";,
@@ -4731,21 +4737,23 @@
"dev": true,
"optional": true,
"requires": {
- "delegates": "^1.0.0",
- "readable-stream": "^2.0.6"
+ "delegates": "1.0.0",
+ "readable-stream": "2.3.6"
}
},
"balanced-match": {
"version": "1.0.0",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": 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"
}
},
@@ -4758,17 +4766,20 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"core-util-is": {
"version": "1.0.2",
@@ -4809,7 +4820,7 @@
"dev": true,
"optional": true,
"requires": {
- "minipass": "^2.2.1"
+ "minipass": "2.3.5"
}
},
"fs.realpath": {
@@ -4824,14 +4835,14 @@
"dev": true,
"optional": true,
"requires": {
- "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"
+ "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"
}
},
"glob": {
@@ -4840,12 +4851,12 @@
"dev": true,
"optional": true,
"requires": {
- "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"
+ "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"
}
},
"has-unicode": {
@@ -4860,7 +4871,7 @@
"dev": true,
"optional": true,
"requires": {
- "safer-buffer": ">= 2.1.2 < 3"
+ "safer-buffer": "2.1.2"
}
},
"ignore-walk": {
@@ -4869,7 +4880,7 @@
"dev": true,
"optional": true,
"requires": {
- "minimatch": "^3.0.4"
+ "minimatch": "3.0.4"
}
},
"inflight": {
@@ -4878,14 +4889,15 @@
"dev": true,
"optional": true,
"requires": {
- "once": "^1.3.0",
- "wrappy": "1"
+ "once": "1.4.0",
+ "wrappy": "1.0.2"
}
},
"inherits": {
"version": "2.0.3",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"ini": {
"version": "1.3.5",
@@ -4897,8 +4909,9 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
- "number-is-nan": "^1.0.0"
+ "number-is-nan": "1.0.1"
}
},
"isarray": {
@@ -4911,22 +4924,25 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
- "brace-expansion": "^1.1.7"
+ "brace-expansion": "1.1.11"
}
},
"minimist": {
"version": "0.0.8",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
- "safe-buffer": "^5.1.2",
- "yallist": "^3.0.0"
+ "safe-buffer": "5.1.2",
+ "yallist": "3.0.3"
}
},
"minizlib": {
@@ -4935,13 +4951,14 @@
"dev": true,
"optional": true,
"requires": {
- "minipass": "^2.2.1"
+ "minipass": "2.3.5"
}
},
"mkdirp": {
"version": "0.5.1",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -4958,9 +4975,9 @@
"dev": true,
"optional": true,
"requires": {
- "debug": "^2.1.2",
- "iconv-lite": "^0.4.4",
- "sax": "^1.2.4"
+ "debug": "2.6.9",
+ "iconv-lite": "0.4.24",
+ "sax": "1.2.4"
}
},
"node-pre-gyp": {
@@ -4969,16 +4986,16 @@
"dev": true,
"optional": true,
"requires": {
- "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"
+ "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"
}
},
"nopt": {
@@ -4987,8 +5004,8 @@
"dev": true,
"optional": true,
"requires": {
- "abbrev": "1",
- "osenv": "^0.1.4"
+ "abbrev": "1.1.1",
+ "osenv": "0.1.5"
}
},
"npm-bundled": {
@@ -5003,8 +5020,8 @@
"dev": true,
"optional": true,
"requires": {
- "ignore-walk": "^3.0.1",
- "npm-bundled": "^1.0.1"
+ "ignore-walk": "3.0.1",
+ "npm-bundled": "1.0.5"
}
},
"npmlog": {
@@ -5013,16 +5030,17 @@
"dev": true,
"optional": true,
"requires": {
- "are-we-there-yet": "~1.1.2",
- "console-control-strings": "~1.1.0",
- "gauge": "~2.7.3",
- "set-blocking": "~2.0.0"
+ "are-we-there-yet": "1.1.5",
+ "console-control-strings": "1.1.0",
+ "gauge": "2.7.4",
+ "set-blocking": "2.0.0"
}
},
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"object-assign": {
"version": "4.1.1",
@@ -5034,8 +5052,9 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
- "wrappy": "1"
+ "wrappy": "1.0.2"
}
},
"os-homedir": {
@@ -5056,8 +5075,8 @@
"dev": true,
"optional": true,
"requires": {
- "os-homedir": "^1.0.0",
- "os-tmpdir": "^1.0.0"
+ "os-homedir": "1.0.2",
+ "os-tmpdir": "1.0.2"
}
},
"path-is-absolute": {
@@ -5078,10 +5097,10 @@
"dev": true,
"optional": true,
"requires": {
- "deep-extend": "^0.6.0",
- "ini": "~1.3.0",
- "minimist": "^1.2.0",
- "strip-json-comments": "~2.0.1"
+ "deep-extend": "0.6.0",
+ "ini": "1.3.5",
+ "minimist": "1.2.0",
+ "strip-json-comments": "2.0.1"
},
"dependencies": {
"minimist": {
@@ -5098,13 +5117,13 @@
"dev": true,
"optional": true,
"requires": {
- "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"
+ "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"
}
},
"rimraf": {
@@ -5113,7 +5132,7 @@
"dev": true,
"optional": true,
"requires": {
- "glob": "^7.1.3"
+ "glob": "7.1.3"
}
},
"safe-buffer": {
@@ -5155,10 +5174,11 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
- "code-point-at": "^1.0.0",
- "is-fullwidth-code-point": "^1.0.0",
- "strip-ansi": "^3.0.0"
+ "code-point-at": "1.1.0",
+ "is-fullwidth-code-point": "1.0.0",
+ "strip-ansi": "3.0.1"
}
},
"string_decoder": {
@@ -5167,7 +5187,7 @@
"dev": true,
"optional": true,
"requires": {
- "safe-buffer": "~5.1.0"
+ "safe-buffer": "5.1.2"
}
},
"strip-ansi": {
@@ -5175,7 +5195,7 @@
"bundled": true,
"dev": true,
"requires": {
- "ansi-regex": "^2.0.0"
+ "ansi-regex": "2.1.1"
}
},
"strip-json-comments": {
@@ -5190,13 +5210,13 @@
"dev": true,
"optional": true,
"requires": {
- "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"
+ "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"
}
},
"util-deprecate": {
@@ -5211,7 +5231,7 @@
"dev": true,
"optional": true,
"requires": {
- "string-width": "^1.0.2 || 2"
+ "string-width": "1.0.2"
}
},
"wrappy": {
diff --git a/package.json b/package.json
index ae26629..d83738f 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
"vuex-class": "^0.3.1"
},
"devDependencies": {
+ "@types/lodash": "^4.14.138",
"@vue/cli-plugin-babel": "^3.4.1",
"@vue/cli-plugin-typescript": "^3.4.1",
"@vue/cli-service": "^3.4.1",
diff --git a/src/store/modules/topology/index.ts
b/src/store/modules/topology/index.ts
index 0dd594f..1c459d4 100644
--- a/src/store/modules/topology/index.ts
+++ b/src/store/modules/topology/index.ts
@@ -49,6 +49,7 @@ export interface State {
calls: Call[];
nodes: Node[];
detectPoints: string[];
+ selectedCallId: string;
currentNode: any;
current: Option;
mode: boolean;
@@ -66,6 +67,7 @@ const initState: State = {
callback: '',
mode: true,
detectPoints: [],
+ selectedCallId: '',
calls: [],
nodes: [],
currentNode: {},
@@ -109,6 +111,7 @@ const mutations = {
state.nodes = data.nodes;
},
[types.SET_TOPO_RELATION](state: State, data: any) {
+ state.selectedCallId = data.id;
state.getResponseTimeTrend = data.getResponseTimeTrend ?
data.getResponseTimeTrend.values.map((i: any) => i.value) : [];
state.getSLATrend = data.getSLATrend ? data.getSLATrend.values.map((i:
any) => i.value) : [];
@@ -134,7 +137,7 @@ const actions: ActionTree<State, any> = {
.query('queryTopoServiceInfo')
.params(params)
.then((res: AxiosResponse) => {
- context.commit('SET_TOPO_RELATION', res.data.data);
+ context.commit('SET_TOPO_RELATION', Object.assign(res.data.data, { id:
params.id }));
});
},
GET_TOPO_CLIENT_INFO(context: { commit: Commit; state: State; }, params:
any) {
@@ -142,7 +145,7 @@ const actions: ActionTree<State, any> = {
.query('queryTopoClientInfo')
.params(params)
.then((res: AxiosResponse) => {
- context.commit('SET_TOPO_RELATION', res.data.data);
+ context.commit('SET_TOPO_RELATION', Object.assign(res.data.data, { id:
params.id }));
});
},
GET_TOPO(context: { commit: Commit; state: State; }, params: any) {
diff --git a/src/views/components/topology/topo-aside.vue
b/src/views/components/topology/topo-aside.vue
index acdf100..d716e5d 100644
--- a/src/views/components/topology/topo-aside.vue
+++ b/src/views/components/topology/topo-aside.vue
@@ -59,21 +59,65 @@
<span class="content">{{stateTopo.currentNode.latency}} ms</span>
</div>
</div>
- <div class="link-topo-aside-box" style="width:280px;top:78px;position:
fixed;right: 30px;">
+ <div :class="`link-topo-aside-box
link-topo-aside-box-${isMini?'min':'max'}`"
+ :style="`top:106px;position: fixed;right: 30px;${showInfoCount === 0
? 'animation: unset;': ''}`">
+ <svg v-if="stateTopo.selectedCallId"
+ :style="`position:absolute;left:-48px;top:11px;transform:
rotate(${isMini?0 : 180}deg);`"
+ class="link-topo-aside-btn mb-10 icon cp lg"
+ @click="setShowInfo"
+ >
+ <use xlink:href="#chevron-left" />
+ </svg>
<div class="mb-5 clear">
- <span class="b dib mr-20 vm">{{$t('detectPoint')}}</span>
- <span v-if="stateTopo.detectPoints.indexOf('CLIENT') !== -1"
class="link-topo-aside-box-btn tc r sm cp b"
:class="{'active':!stateTopo.mode}"
@click="setMode(false)">{{this.$t('client')}}</span>
- <span v-if="stateTopo.detectPoints.indexOf('SERVER') !== -1"
class="link-topo-aside-box-btn tc r sm cp b" :class="{'active':stateTopo.mode}"
@click="setMode(true)">{{this.$t('server')}}</span>
+ <span class="b dib mr-20 vm">{{ $t('detectPoint') }}</span>
+ <span
+ v-if="stateTopo.detectPoints.indexOf('CLIENT') !== -1"
+ :class="{'active':!stateTopo.mode}"
+ class="link-topo-aside-box-btn tc r sm cp b"
+ @click="setMode(false)"
+ >{{ this.$t('client') }}</span>
+ <span
+ v-if="stateTopo.detectPoints.indexOf('SERVER') !== -1"
+ :class="{'active':stateTopo.mode}"
+ class="link-topo-aside-box-btn tc r sm cp b"
+ @click="setMode(true)"
+ >{{ this.$t('server') }}</span>
+ </div>
+ <div v-if="showInfo">
+ <TopoChart
+ v-if="stateTopo.getResponseTimeTrend.length"
+ :data="stateTopo.getResponseTimeTrend"
+ :intervalTime="intervalTime"
+ :title="$t('avgResponseTime')"
+ unit="ms"
+ />
+ <TopoChart
+ v-if="stateTopo.getThroughputTrend.length"
+ :data="stateTopo.getThroughputTrend"
+ :intervalTime="intervalTime"
+ :title="$t('avgThroughput')"
+ unit="cpm"
+ />
+ <TopoChart
+ v-if="stateTopo.getSLATrend.length"
+ :data="stateTopo.getSLATrend"
+ :intervalTime="intervalTime"
+ :precent="true"
+ :title="$t('avgSLA')"
+ unit="%"
+ />
+ <ChartResponse
+ v-if="stateTopo.p50.length"
+ :data="stateTopo"
+ :intervalTime="intervalTime"
+ :title="$t('percentResponse')"
+ />
</div>
- <TopoChart v-if="stateTopo.getResponseTimeTrend.length"
:title="$t('avgResponseTime')" unit="ms" :intervalTime="intervalTime"
:data="stateTopo.getResponseTimeTrend"/>
- <TopoChart v-if="stateTopo.getThroughputTrend.length"
:title="$t('avgThroughput')" unit="cpm" :intervalTime="intervalTime"
:data="stateTopo.getThroughputTrend"/>
- <TopoChart v-if="stateTopo.getSLATrend.length" :title="$t('avgSLA')"
unit="%" :intervalTime="intervalTime" :precent="true"
:data="stateTopo.getSLATrend"/>
- <ChartResponse v-if="stateTopo.p50.length"
:title="$t('percentResponse')" :intervalTime="intervalTime" :data="stateTopo"/>
</div>
</aside>
</template>
<script lang="ts">
-import { Vue, Component } from 'vue-property-decorator';
+import { Vue, Component, Watch } from 'vue-property-decorator';
import topo, { State as topoState} from '@/store/modules/topology';
import { State, Mutation, Getter, Action } from 'vuex-class';
import TopoChart from './topo-chart.vue';
@@ -101,6 +145,17 @@ export default class TopoAside extends Vue {
private radioStatus: boolean = false;
private show: boolean = true;
private showInfo: boolean = false;
+ private isMini: boolean = true;
+ private showInfoCount: number = 0;
+ @Watch('stateTopo.selectedCallId')
+ private watchDetectPointNodeId(newValue: string) {
+ if (newValue) {
+ this.showInfo = true;
+ } else {
+ this.showInfo = false;
+ this.isMini = true;
+ }
+ }
private showRadial(status: boolean) {
this.radioStatus = status;
}
@@ -108,6 +163,14 @@ export default class TopoAside extends Vue {
this.SET_MODE_STATUS(mode);
this.stateTopo.callback();
}
+ private setShowInfo() {
+ this.showInfo = false;
+ this.showInfoCount = 1;
+ this.isMini = !this.isMini;
+ setTimeout(() => {
+ this.showInfo = true;
+ }, 550);
+ }
}
</script>
<style lang="scss">
@@ -162,4 +225,38 @@ export default class TopoAside extends Vue {
margin-top: 6px;
}
}
+.link-topo-aside-box {
+ p {
+ margin-block-start: auto !important;
+ margin-block-end: auto !important;
+ }
+}
+
+.link-topo-aside-box-min {
+ width: 280px;
+ animation: 0.5s linkTopoAsideBoxMin 1 running;
+}
+
+.link-topo-aside-box-max {
+ width: 60%;
+ animation: 0.5s linkTopoAsideBoxMax 1 running;
+}
+
+@keyframes linkTopoAsideBoxMax {
+ from {
+ width: 280px;
+ }
+ to {
+ width: 60%;
+ }
+}
+
+@keyframes linkTopoAsideBoxMin {
+ from {
+ width: 60%;
+ }
+ to {
+ width: 280px;
+ }
+}
</style>
