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 61ae252 Feature: node detail display in topo circle-chart view. (#174)
61ae252 is described below
commit 61ae25246b7f33d190a9a509baa9ace26c87ec4d
Author: bigflybrother <[email protected]>
AuthorDate: Wed Oct 30 18:04:09 2019 +0800
Feature: node detail display in topo circle-chart view. (#174)
---
src/views/components/topology/radial.vue | 19 ++++++++++++-----
src/views/components/topology/topo-aside.vue | 28 ++++++++++++++-----------
src/views/components/topology/topo-services.vue | 7 ++-----
3 files changed, 32 insertions(+), 22 deletions(-)
diff --git a/src/views/components/topology/radial.vue
b/src/views/components/topology/radial.vue
index 5ddfb31..550ab4e 100644
--- a/src/views/components/topology/radial.vue
+++ b/src/views/components/topology/radial.vue
@@ -17,8 +17,8 @@
<template>
<div class="micro-radil-chart">
- <div class="micro-radil-chart-btn rk-btn ghost cp"
@click="$emit('showRadial', false)">X</div>
- <RkEcharts height="100%" :option="responseConfig" />
+ <!-- <div class="micro-radil-chart-btn rk-btn ghost cp"
@click="$emit('showRadial', false)">X</div> -->
+ <RkEcharts height="100%" :option="responseConfig" ref="radial" />
</div>
</template>
<script lang="js">
@@ -52,7 +52,6 @@ export default {
});
graph.nodes.forEach((node) => {
nodes.push({
- value: 20,
id: node.id,
name: node.name,
label: {
@@ -115,6 +114,17 @@ export default {
};
},
},
+ mounted() {
+ const myChart = this.$refs.radial.myChart;
+ myChart.on('click', (params) => {
+ const currentNode = this.datas.nodes.find((item) => item.id ===
params.data.id);
+ if (currentNode) {
+ this.$store.commit('rocketTopo/SET_NODE', currentNode);
+ } else {
+ this.$store.commit('rocketTopo/SET_NODE', {});
+ }
+ });
+ },
};
</script>
<style lang="scss">
@@ -122,10 +132,9 @@ export default {
height: 100%;
position: fixed;
top: 48px;
- left: 0;;
background-color: #333840;
width: 100%;
- z-index: 100;
+ z-index: 100;
text-align: center;
}
.micro-radil-chart-btn{
diff --git a/src/views/components/topology/topo-aside.vue
b/src/views/components/topology/topo-aside.vue
index d716e5d..543e3da 100644
--- a/src/views/components/topology/topo-aside.vue
+++ b/src/views/components/topology/topo-aside.vue
@@ -17,15 +17,15 @@
<template>
<aside class="link-topo-aside">
- <Radial v-if="radioStatus" @showRadial="showRadial"
:datas="{nodes:stateTopo.nodes,calls:stateTopo.calls}"/>
- <svg class="link-topo-aside-btn mb-10 icon cp lg" @click="show = !show"
:style="`position:${show?'absolute':'initial'};left:${show?290:0}px;transform:
rotate(${show?0 : 180}deg);`">
- <use xlink:href="#chevron-left"></use>
- </svg>
- <svg class="link-topo-aside-btn mb-10 icon cp lg"
@click="showRadial(true)" :style="`position:absolute;left:290px;top:50px;`">
+ <Radial v-if="radioStatus"
:datas="{nodes:stateTopo.nodes,calls:stateTopo.calls}"/>
+ <svg class="link-topo-aside-btn icon cp lg" @click="showRadial()"
:style="`position:absolute;left:290px;`">
<use xlink:href="#issues"></use>
</svg>
+ <svg class="link-topo-aside-btn icon cp lg" @click="show = !show"
:style="`position:absolute;left:290px;transform: rotate(${show?0 :
180}deg);top:50px;`">
+ <use xlink:href="#chevron-left"></use>
+ </svg>
<TopoService/>
- <div class="link-topo-aside-box mb-10" v-if="!stateTopo.currentNode.name
&& show">
+ <div class="link-topo-aside-box" style="top:50px"
v-if="!stateTopo.currentNode.name && show">
<div class="mb-20">
<span class="b dib mr-20">{{$t('allServices')}}</span>
</div>
@@ -34,7 +34,7 @@
<span class="grey">{{key}}</span>
</div>
</div>
- <div class="link-topo-aside-box mb-10" v-else-if="show">
+ <div class="link-topo-aside-box" style="top:50px" v-else-if="show">
<div class="mb-20">
<span class="b dib mr-20">{{$t('serviceDetail')}}</span>
</div>
@@ -60,10 +60,10 @@
</div>
</div>
<div :class="`link-topo-aside-box
link-topo-aside-box-${isMini?'min':'max'}`"
- :style="`top:106px;position: fixed;right: 30px;${showInfoCount === 0
? 'animation: unset;': ''}`">
+ :style="`top:80px;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"
+ :style="`position:absolute;left:-48px;top:0;transform:
rotate(${isMini?0 : 180}deg);`"
+ class="link-topo-aside-btn icon cp lg"
@click="setShowInfo"
>
<use xlink:href="#chevron-left" />
@@ -156,8 +156,8 @@ export default class TopoAside extends Vue {
this.isMini = true;
}
}
- private showRadial(status: boolean) {
- this.radioStatus = status;
+ private showRadial() {
+ this.radioStatus = !this.radioStatus;
}
private setMode(mode: boolean) {
this.SET_MODE_STATUS(mode);
@@ -202,9 +202,13 @@ export default class TopoAside extends Vue {
border-radius: 4px 4px 4px 4px;
text-align: center;
padding: 10px;
+ z-index: 101;
}
.link-topo-aside-box{
border-radius: 4px;
+ position: absolute;
+ width: 280px;
+ z-index: 101;
color: #ddd;
background-color: #252a2f9a;
padding: 15px 20px 10px;
diff --git a/src/views/components/topology/topo-services.vue
b/src/views/components/topology/topo-services.vue
index ea8b3e1..8011746 100644
--- a/src/views/components/topology/topo-services.vue
+++ b/src/views/components/topology/topo-services.vue
@@ -16,11 +16,8 @@
*/
<template>
- <div class="link-topo-aside-box mb-10" style="padding:0">
- <TopoSelect class="mb-5" :current="service" :data="services"
@onChoose="handleChange"/>
- <!-- <select v-model="service" class="mr10 topo-aside-server mb-5"
style="width: 100%;" @change="handleChange">
- <option v-for="item in services" :value="item.key" :label="item.label"
:key="item.key"></option>
- </select> -->
+ <div class="link-topo-aside-box" style="padding:0;z-index:102;">
+ <TopoSelect :current="service" :data="services" @onChoose="handleChange"/>
</div>
</template>
<script lang="ts">
