Enhanced topology left-click display service indicators (#221)
* Enhanced topology left-click display service indicators
diff --git a/src/main.ts b/src/main.ts
index 63d0e49..9efeb8f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -75,7 +75,7 @@
i18n,
router,
store,
- render: (h) => h(App)
+ render: (h) => h(App),
}).$mount('#app');
});
diff --git a/src/utils/localtime.ts b/src/utils/localtime.ts
index b7e8b62..0bd5ae9 100644
--- a/src/utils/localtime.ts
+++ b/src/utils/localtime.ts
@@ -37,7 +37,6 @@
.query('queryOAPTimeInfo')
.params({});
if (!res.data) {
- debugger
setTimezoneOffset();
}
utc = (res.data.data.getTimeInfo.timezone / 100) + '';
diff --git a/src/views/components/dashboard/dashboard-comp.vue b/src/views/components/dashboard/dashboard-comp.vue
index 7faeca8..b5879aa 100644
--- a/src/views/components/dashboard/dashboard-comp.vue
+++ b/src/views/components/dashboard/dashboard-comp.vue
@@ -66,7 +66,9 @@
Database: [],
};
this.rocketComps.data[this.compType].forEach((i: any) => {
- temp[i.o] && temp[i.o].push(i);
+ if (temp[i.o]) {
+ temp[i.o].push(i);
+ }
});
return temp;
}
diff --git a/src/views/components/topology/topo-aside.vue b/src/views/components/topology/topo-aside.vue
index a70a887..f38ce15 100644
--- a/src/views/components/topology/topo-aside.vue
+++ b/src/views/components/topology/topo-aside.vue
@@ -1,117 +1,144 @@
/**
- * 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.
- */
+* 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>
<aside class="link-topo-aside">
<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>
+ <use xlink:href="#issues"/>
</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 v-if="showServerInfo" 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"/>
</svg>
<TopoService/>
- <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 v-if="show">
+ <div class="link-topo-aside-box" style="top:50px" v-if="!stateTopo.selectedCallId && showServerInfo">
+ <div class="mb-20">
+ <span class="b dib mr-20">{{$t('serviceDetail')}}</span>
+ </div>
+ <div class="mb-10">
+ <span class="label grey">{{$t('name')}}</span>
+ <span class="content">{{stateTopo.currentNode.name}}</span>
+ </div>
+ <div class="mb-10">
+ <span class="label grey">{{$t('type')}}</span>
+ <span class="content">{{stateTopo.currentNode.type}}</span>
+ </div>
+ <div>
+ <TopoChart
+ v-if="rocketDashboard.serviceApdexScore.ApdexScore.length"
+ :data="rocketDashboard.serviceApdexScore.ApdexScore"
+ :intervalTime="intervalTime"
+ title="Service ApdexScore"
+ unit=""
+ />
+ <TopoChart
+ v-if="rocketDashboard.serviceSLA.SLA.length"
+ :data="rocketDashboard.serviceSLA.SLA"
+ :intervalTime="intervalTime"
+ :precent="true"
+ title="Service SLA"
+ unit="%"
+ />
+ </div>
</div>
- <div class="mb-10" v-for="(val, key, index) in types" :key="index">
- <span class="r">{{val}}</span>
- <span class="grey">{{key}}</span>
- </div>
- </div>
- <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>
- <div class="mb-10">
- <span class="label grey">{{$t('name')}}</span>
- <span class="content">{{stateTopo.currentNode.name}}</span>
- </div>
- <div class="mb-10">
- <span class="label grey">{{$t('type')}}</span>
- <span class="content">{{stateTopo.currentNode.type}}</span>
- </div>
- <div class="mb-10" v-if="stateTopo.currentNode.cpm">
- <span class="label grey">{{$t('cpm')}}</span>
- <span class="content">{{stateTopo.currentNode.cpm}}</span>
- </div>
- <div class="mb-10" v-if="stateTopo.currentNode.sla">
- <span class="label grey">{{$t('sla')}}</span>
- <span class="content">{{stateTopo.currentNode.sla || ''}}%</span>
- </div>
- <div class="mb-10" v-if="stateTopo.currentNode.latency">
- <span class="label grey">{{$t('latency')}}</span>
- <span class="content">{{stateTopo.currentNode.latency}} ms</span>
- </div>
- </div>
- <div :class="`link-topo-aside-box link-topo-aside-box-${isMini?'min':'max'}`"
- :style="`top:80px;position: fixed;right: 30px;${showInfoCount === 0 ? 'animation: unset;': ''}`">
- <svg v-if="stateTopo.selectedCallId"
- :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" />
- </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="{'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 v-if="stateTopo.selectedCallId || showServerInfo"
+ :class="`link-topo-aside-box link-topo-aside-box-${isMini?'min':'max'}`"
+ :style="`top:80px;position: fixed;right: 30px;${showInfoCount === 0 ? 'animation: unset;': ''}`">
+ <svg
+ :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"/>
+ </svg>
+ <div class="mb-5 clear">
+ <span v-if="stateTopo.selectedCallId" class="b dib mr-20 vm">{{ $t('detectPoint') }}</span>
+ <span v-else-if="showServerInfo" class="b dib mr-20 vm">{{ $t('serviceDetail') }}</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">
+ <div v-if="stateTopo.selectedCallId">
+ <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>
+ <div v-else-if="showServerInfo">
+ <TopoChart
+ v-if="rocketDashboard.serviceResponseTime.ResponseTime.length"
+ :data="rocketDashboard.serviceResponseTime.ResponseTime"
+ :intervalTime="intervalTime"
+ title="Service ResponseTime"
+ unit="ms"
+ />
+ <TopoChart
+ v-if="rocketDashboard.serviceThroughput.Throughput.length"
+ :data="rocketDashboard.serviceThroughput.Throughput"
+ :intervalTime="intervalTime"
+ title="Service Throughput"
+ unit="cpm"
+ />
+ <ChartResponse
+ v-if="rocketDashboard.servicePercent.p50.length"
+ :data="rocketDashboard.servicePercent"
+ :intervalTime="intervalTime"
+ title="Service Response Time Percentile"
+ unit="ms"
+ />
+ </div>
+ </div>
</div>
</div>
<el-drawer
@@ -125,7 +152,7 @@
:alarmScope="{label: 'Service', key: 'Service'}"
inTopo
:keyword="stateTopo.honeycombNode.name"
- ></alarm-containers>
+ />
</el-drawer>
<el-drawer
custom-class="performance-metrics-window"
@@ -137,229 +164,277 @@
<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">
-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';
-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';
+ import { initState } from '@/store/modules/dashboard/modules/dashboard-data-layout';
+ import topo, { State as topoState } from '@/store/modules/topology';
+ import AlarmContainers from '@/views/containers/alarm.vue';
+ import EndpointSurveyWindow from '@/views/containers/endpoint-survey-window.vue';
+ import InstancesSurveyWindow from '@/views/containers/instances-survey-window.vue';
+ import TraceContainers from '@/views/containers/trace.vue';
+ import { Component, Vue, Watch } from 'vue-property-decorator';
+ import { Action, Getter, Mutation, State } from 'vuex-class';
+ import Radial from './radial.vue';
+ import TopoChart from './topo-chart.vue';
+ import ChartResponse from './topo-response.vue';
+ import TopoService from './topo-services.vue';
-@Component({components: {TopoChart, TopoService, ChartResponse, Radial, AlarmContainers,
- TraceContainers, InstancesSurveyWindow, EndpointSurveyWindow}})
-export default class TopoAside extends Vue {
- @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;
+ @Component({
+ components: {
+ TopoChart, TopoService, ChartResponse, Radial, AlarmContainers,
+ TraceContainers, InstancesSurveyWindow, EndpointSurveyWindow,
+ },
+ })
+ export default class TopoAside extends Vue {
+ @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;
+ @Action('SELECT_SERVICE') private SELECT_SERVICE: any;
+ @Action('GET_QUERY') private GET_QUERY: any;
+ @Action('MIXHANDLE_CHANGE_GROUP_WITH_CURRENT') private MIXHANDLE_CHANGE_GROUP_WITH_CURRENT: any;
+ @Action('MIXHANDLE_GET_OPTION') private MIXHANDLE_GET_OPTION: 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;
+ @State('rocketDashboard') private rocketDashboard: 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 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 beforeCreate() {
- this.$store.registerModule('rocketTopo', topo);
- }
+ private get showServerInfo() {
+ return this.stateTopo.currentNode.name && this.stateTopo.currentNode.isReal;
+ }
- private async created() {
- this.getTopo();
- this.SET_COMPS_TREE(this.initState.tree);
- }
+ private resize() {
+ this.drawerMainBodyHeight = `${document.body.clientHeight - 50}px`;
+ }
- private mounted() {
- this.resize();
- window.addEventListener('resize', this.resize);
- }
+ private beforeCreate() {
+ this.$store.registerModule('rocketTopo', topo);
+ }
- private getTopo() {
- this.GET_TOPO({ duration: this.durationTime });
- }
+ private async created() {
+ this.getTopo();
+ this.SET_COMPS_TREE(this.initState.tree);
+ }
- private beforeDestroy() {
- window.removeEventListener('resize', this.resize);
- this.CLEAR_TOPO_INFO();
- this.CLEAR_TOPO();
- this.$store.unregisterModule('rocketTopo');
- }
+ private mounted() {
+ this.resize();
+ window.addEventListener('resize', this.resize);
+ }
- get types() {
- const result: any = {};
- this.stateTopo.nodes.forEach((i: any) => {
- if (result[i.type]) {
- result[i.type] += 1;
+ 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) => {
+ if (result[i.type]) {
+ result[i.type] += 1;
+ } else {
+ result[i.type] = 1;
+ }
+ });
+ return result;
+ }
+
+ @Watch('durationTime')
+ private watchDurationTime() {
+ this.getTopo();
+ }
+
+ @Watch('stateTopo.selectedCallId')
+ private watchDetectPointNodeId(newValue: string) {
+ if (newValue || this.stateTopo.currentNode.isReal) {
+ this.showInfo = true;
} else {
- result[i.type] = 1;
+ this.showInfo = false;
+ this.isMini = true;
}
- });
- return result;
- }
+ }
- @Watch('durationTime')
- private watchDurationTime() {
- this.getTopo();
- }
+ @Watch('stateTopo.currentNode.name')
+ private watchCurrentNodeIsReal(newValue: boolean) {
+ const service = this.stateTopo.currentNode;
+ if (this.stateTopo.currentNode.isReal) {
+ this.MIXHANDLE_CHANGE_GROUP_WITH_CURRENT({index: 0, current: 1});
+ this.MIXHANDLE_GET_OPTION({compType: 'service', duration: this.durationTime})
+ .then(() => {
+ this.GET_QUERY({
+ serviceId: service.id || '',
+ duration: this.durationTime,
+ });
+ });
+ }
+ if (newValue || this.stateTopo.selectedCallId) {
+ this.showInfo = true;
+ } else {
+ this.showInfo = false;
+ this.isMini = true;
+ }
+ }
- @Watch('stateTopo.selectedCallId')
- private watchDetectPointNodeId(newValue: string) {
- if (newValue) {
- this.showInfo = true;
- } else {
+
+ private showRadial() {
+ this.radioStatus = !this.radioStatus;
+ }
+
+ private setMode(mode: boolean) {
+ this.SET_MODE_STATUS(mode);
+ this.stateTopo.callback();
+ }
+
+ private setShowInfo() {
this.showInfo = false;
- this.isMini = true;
+ this.showInfoCount = 1;
+ this.isMini = !this.isMini;
+ setTimeout(() => {
+ this.showInfo = true;
+ }, 550);
}
}
- private showRadial() {
- this.radioStatus = !this.radioStatus;
- }
- private setMode(mode: boolean) {
- 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">
-.link-topo-aside{
- width: 280px;
- position: absolute;
- z-index: 2;
- left: 20px;
- top: 30px;
- .to-apm{
- padding-top: 10px;
- border-top: 1px solid #d8d8d866;
+ .link-topo-aside {
+ width: 280px;
+ position: absolute;
+ z-index: 2;
+ left: 20px;
+ top: 30px;
+
+ .to-apm {
+ padding-top: 10px;
+ border-top: 1px solid #d8d8d866;
+ }
}
-}
-.link-topo-aside-box-btn{
- color: #626977;
- border: 1px solid;
- padding: 0px 3px;
- width: 45px;
- display: inline-block;
- &.active{
- color: #448dfe;
- }
-}
-.link-topo-aside-btn{
- display:block;
- background: #252a2f9a;
- color: #ddd;
- 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: #333;
- padding: 15px 20px 10px;
- .label{
+
+ .link-topo-aside-box-btn {
+ color: #626977;
+ border: 1px solid;
+ padding: 0px 3px;
+ width: 45px;
display: inline-block;
- width: 40%;
+
+ &.active {
+ color: #448dfe;
+ }
}
- .content{
- vertical-align: top;
- display: inline-block;
- width: 60%;
+
+ .link-topo-aside-btn {
+ display: block;
+ background: #252a2f9a;
+ color: #ddd;
+ border-radius: 4px 4px 4px 4px;
+ text-align: center;
+ padding: 10px;
+ z-index: 101;
}
- .circle{
- width: 8px;
- height: 8px;
+
+ .link-topo-aside-box {
border-radius: 4px;
- background-color: #EE5B5B;
- 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;
-}
-
-.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 {
+ position: absolute;
width: 280px;
- }
- to {
- width: 60%;
- }
-}
+ z-index: 101;
+ color: #ddd;
+ background-color: #333;
+ padding: 15px 20px 10px;
-@keyframes linkTopoAsideBoxMin {
- from {
- width: 60%;
+ .label {
+ display: inline-block;
+ width: 40%;
+ }
+
+ .content {
+ vertical-align: top;
+ display: inline-block;
+ width: 60%;
+ }
+
+ .circle {
+ width: 8px;
+ height: 8px;
+ border-radius: 4px;
+ background-color: #EE5B5B;
+ margin-top: 6px;
+ }
}
- to {
+
+ .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;
+ }
+
+ .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;
+ }
+ to {
+ width: 60%;
+ }
+ }
+
+ @keyframes linkTopoAsideBoxMin {
+ from {
+ width: 60%;
+ }
+ to {
+ width: 280px;
+ }
+ }
</style>
diff --git a/src/views/components/topology/topo.vue b/src/views/components/topology/topo.vue
index 1b8efca..351d8da 100644
--- a/src/views/components/topology/topo.vue
+++ b/src/views/components/topology/topo.vue
@@ -281,7 +281,8 @@
delete copyD.fx;
delete copyD.fy;
delete copyD.index;
- that.$store.commit('rocketTopo/SET_NODE', copyD);
+ that.$store.dispatch('rocketTopo/CLEAR_TOPO_INFO');
+ that.$store.commit('rocketTopo/SET_NODE', copyD);
that.toggleNode(that.node, d, true);
that.toggleLine(that.line, d, true);
that.toggleLine(that.lineNode, d, true);
@@ -342,7 +343,9 @@
.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_NODE', {});
+ that.$store.dispatch('rocketTopo/CLEAR_TOPO_INFO');
+ that.$store.commit('rocketTopo/SET_MODE', d.detectPoints);
event.stopPropagation();
that.tip.hide({}, this);
that.tip.show(d, this);
