skywalking-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From wush...@apache.org
Subject [skywalking-rocketbot-ui] branch master updated: Feat: Remove element-ui (#246)
Date Mon, 13 Jan 2020 11:11:45 GMT
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 825b39d  Feat: Remove element-ui (#246)
825b39d is described below

commit 825b39dc62da4fcdb1f5fdaf969b1a14ea5b8910
Author: Allen Wang <Allen.Wang.123@outlook.com>
AuthorDate: Mon Jan 13 18:55:22 2020 +0800

    Feat: Remove element-ui (#246)
    
    * Feat: Remove element-ui
    
    * Update
    
    Co-authored-by: 吴晟 Wu Sheng <wu.sheng@foxmail.com>
---
 package.json                                       |   1 -
 src/components/rk-sidebox.vue                      |  12 +-
 src/main.ts                                        |   5 +-
 .../components/comparison/comparison-config.vue    |   2 +-
 src/views/components/topology/topo-aside.vue       | 434 ++++++++++---------
 src/views/components/topology/topo-date.vue        |  43 --
 .../components/topology/topo-detect-point.vue      | 468 +++++++++++----------
 .../topology/topo-instance-dependency.vue          |   3 +-
 src/views/components/topology/topo.vue             |   4 +-
 src/views/containers/topology/topology.vue         |   3 +-
 src/views/containers/topology/window-alarm.vue     |  71 ++++
 ...point-survey-window.vue => window-endpoint.vue} |  40 +-
 ...ances-survey-window.vue => window-instance.vue} |  43 +-
 .../{topology-trace.vue => window-trace.vue}       |  24 +-
 14 files changed, 593 insertions(+), 560 deletions(-)

diff --git a/package.json b/package.json
index f5397b4..7a405f4 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,6 @@
     "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/components/rk-sidebox.vue b/src/components/rk-sidebox.vue
index 551bdf7..f88fdeb 100644
--- a/src/components/rk-sidebox.vue
+++ b/src/components/rk-sidebox.vue
@@ -26,7 +26,7 @@
           </svg>
         </div>
       </h3>
-      <div class="rk-sidebox-inner">
+      <div class="rk-sidebox-inner" :class="{'rk-sidebox-inner-fixed':fixed}">
         <slot/>
       </div>
     </aside>
@@ -43,6 +43,9 @@ export default {
     right: {
       default: false,
     },
+    fixed: {
+      default: false,
+    },
     width: {
       default: '550px',
     },
@@ -71,13 +74,18 @@ export default {
   position: fixed;
   right: 0;
   top: 50px;
-  bottom: 0;
+  bottom: 30px;
   z-index: 200;
   background-color: #fff;
 }
 .rk-sidebox-inner{
   padding: 35px 20px 20px;
 }
+.rk-sidebox-inner-fixed{
+  height: 100%;
+  padding: 0;
+  overflow: hidden;
+}
 .rk-sidebox-title {
   font-size: 16px;
   position: absolute;
diff --git a/src/main.ts b/src/main.ts
index 9efeb8f..51ea254 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -36,15 +36,12 @@ import 'echarts/lib/chart/sankey';
 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';
 import { queryOAPTimeInfo } from './utils/localtime';
+import './assets';
 
 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/views/components/comparison/comparison-config.vue b/src/views/components/comparison/comparison-config.vue
index 52337b0..d2b3dcb 100644
--- a/src/views/components/comparison/comparison-config.vue
+++ b/src/views/components/comparison/comparison-config.vue
@@ -142,7 +142,7 @@
     }
     .reload {
       background: #fff;
-      color: #333;
+      color: #2b3037;
       position: absolute;
       top: 3px;
     }
diff --git a/src/views/components/topology/topo-aside.vue b/src/views/components/topology/topo-aside.vue
index 8d4255f..762f364 100644
--- a/src/views/components/topology/topo-aside.vue
+++ b/src/views/components/topology/topo-aside.vue
@@ -1,44 +1,56 @@
-/**
-* 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"/>
+    <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" />
     </svg>
-    <svg v-if="showServerInfo" class="link-topo-aside-btn icon cp lg"
+    <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"/>
+      :style="
+        `position:absolute;left:290px;transform: rotate(${
+          show ? 0 : 180
+        }deg);top:45px;`
+      "
+    >
+      <use xlink:href="#chevron-left" />
     </svg>
-    <TopoService/>
+    <TopoService />
     <div v-if="show">
-      <div class="link-topo-aside-box" style="top:50px" v-if="!stateTopo.selectedServiceCall && showServerInfo">
+      <div
+        class="link-topo-aside-box"
+        style="top:45px"
+        v-if="!stateTopo.selectedServiceCall && showServerInfo"
+      >
         <div class="mb-20">
-          <span class="b dib mr-20">{{$t('serviceDetail')}}</span>
+          <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>
+          <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>
+          <span class="label grey">{{ $t('type') }}</span>
+          <span class="content">{{ stateTopo.currentNode.type }}</span>
         </div>
         <div>
           <TopoChart
@@ -60,237 +72,213 @@
       </div>
       <TopoDetectPoint />
     </div>
-    <el-drawer
-        v-if="stateTopo.showAlarmDialog"
-        custom-class="performance-metrics-window"
-        size="75%"
-        destroy-on-close
-        :visible.sync="stateTopo.showAlarmDialog"
-        :modal-append-to-body="false"
-    >
-      <alarm-containers :style="`height: ${drawerMainBodyHeight}`"
-        :alarmScope="{label: 'Service', key: 'Service'}"
-        inTopo
-        :keyword="stateTopo.honeycombNode.name"
-      />
-    </el-drawer>
-    <el-drawer
-        custom-class="performance-metrics-window"
-        v-if="stateTopo.showTraceDialog"
-        size="75%"
-        destroy-on-close
-        :visible.sync="stateTopo.showTraceDialog"
-        :modal-append-to-body="false"
-    >
-      <trace-containers :style="`height: ${drawerMainBodyHeight}`"
-        :service="{label: stateTopo.honeycombNode.name, key: stateTopo.honeycombNode.id}"
-        inTopo
-      />
-    </el-drawer>
-    <instances-survey-window
+    <window-endpoint
+      v-if="stateTopo.showEndpointDialog"
+      :is-show.sync="stateTopo.showEndpointDialog"
+      :endpoints="stateDashboardOption.endpoints"
+    />
+    <window-instance
       v-if="stateTopo.showInstancesDialog"
       :is-show.sync="stateTopo.showInstancesDialog"
       :instances="stateDashboardOption.instances"
     />
-    <endpoint-survey-window
-      v-if="stateTopo.showEndpointDialog"
-      :is-show.sync="stateTopo.showEndpointDialog"
-      :endpoints="stateDashboardOption.endpoints"
+    <window-trace
+      v-if="stateTopo.showTraceDialog"
+      :is-show.sync="stateTopo.showTraceDialog"
+      :service="{
+        label: stateTopo.honeycombNode.name,
+        key: stateTopo.honeycombNode.id,
+      }"
+    />
+    <window-alarm
+      v-if="stateTopo.showAlarmDialog"
+      :is-show.sync="stateTopo.showAlarmDialog"
+      :alarmScope="{ label: 'Service', key: 'Service' }"
+      :keyword="stateTopo.honeycombNode.name"
     />
   </aside>
 </template>
 <script lang="ts">
-  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/topology/endpoint-survey-window.vue';
-  import InstancesSurveyWindow from '@/views/containers/topology/instances-survey-window.vue';
-  import TraceContainers from '@/views/containers/topology/topology-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 TopoService from './topo-services.vue';
-  import TopoInstanceDependency from './topo-instance-dependency.vue';
-  import TopoDetectPoint from './topo-detect-point.vue';
+import { initState } from '@/store/modules/dashboard/modules/dashboard-data-layout';
+import topo, { State as topoState } from '@/store/modules/topology';
+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 TopoService from './topo-services.vue';
+import TopoDetectPoint from './topo-detect-point.vue';
+import WindowEndpoint from '@/views/containers/topology/window-endpoint.vue';
+import WindowInstance from '@/views/containers/topology/window-instance.vue';
+import WindowTrace from '@/views/containers/topology/window-trace.vue';
+import WindowAlarm from '@/views/containers/topology/window-alarm.vue';
 
-  @Component({
-    components: {
-      TopoChart, TopoService, Radial, AlarmContainers,
-      TraceContainers, InstancesSurveyWindow, EndpointSurveyWindow,
-      TopoInstanceDependency, TopoDetectPoint,
-    },
-  })
-  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;
-    @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;
-    @Mutation('SET_EVENTS') private SET_EVENTS: any;
-    @State('rocketDashboard') private rocketDashboard: any;
+@Component({
+  components: {
+    TopoChart,
+    TopoService,
+    Radial,
+    TopoDetectPoint,
+    WindowEndpoint,
+    WindowInstance,
+    WindowTrace,
+    WindowAlarm,
+  },
+})
+export default class TopoAside extends Vue {
+  @State('rocketTopo') private stateTopo!: topoState;
+  @State('rocketOption') private stateDashboardOption!: any;
+  @State('rocketDashboard') private rocketDashboard: any;
+  @Getter('intervalTime') private intervalTime: any;
+  @Getter('durationTime') private durationTime: any;
+  @Action('SELECT_SERVICE') private SELECT_SERVICE: any;
+  @Action('rocketTopo/GET_TOPO') private GET_TOPO: any;
+  @Action('rocketTopo/CLEAR_TOPO') private CLEAR_TOPO: any;
+  @Action('rocketTopo/CLEAR_TOPO_INFO') private CLEAR_TOPO_INFO: any;
+  @Mutation('SET_COMPS_TREE') private SET_COMPS_TREE: any;
+  @Mutation('SET_EVENTS') private SET_EVENTS: any;
+  @Mutation('rocketTopo/SET_MODE_STATUS') private SET_MODE_STATUS: any;
+  private dialogTopoVisible = false;
+  private drawerMainBodyHeight = '100%';
+  private initState = initState;
+  private radioStatus: boolean = false;
+  private show: boolean = true;
 
-    private dialogTopoVisible = false;
-    private drawerMainBodyHeight = '100%';
-    private initState = initState;
-    private radioStatus: boolean = false;
-    private show: boolean = true;
-
-    private get showServerInfo() {
-      return this.stateTopo.currentNode.name && this.stateTopo.currentNode.isReal;
-    }
+  private get showServerInfo() {
+    return this.stateTopo.currentNode.name && this.stateTopo.currentNode.isReal;
+  }
 
-    private resize() {
-      this.drawerMainBodyHeight = `${document.body.clientHeight - 50}px`;
-    }
+  private resize() {
+    this.drawerMainBodyHeight = `${document.body.clientHeight - 50}px`;
+  }
 
-    private created() {
-      this.SET_EVENTS([]);
-      this.SET_COMPS_TREE(this.initState.tree);
-    }
+  private created() {
+    this.SET_EVENTS([]);
+    this.SET_COMPS_TREE(this.initState.tree);
+  }
 
-    private mounted() {
-      this.resize();
-      window.addEventListener('resize', this.resize);
-    }
+  private mounted() {
+    this.resize();
+    window.addEventListener('resize', this.resize);
+  }
 
-    private getTopo() {
-      this.GET_TOPO({duration: this.durationTime});
-    }
+  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');
-    }
+  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;
-    }
+  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('durationTime')
+  private watchDurationTime() {
+    this.getTopo();
+  }
 
-    private showRadial() {
-      this.radioStatus = !this.radioStatus;
-    }
+  private showRadial() {
+    this.radioStatus = !this.radioStatus;
   }
+}
 </script>
 <style lang="scss">
-  .link-topo-aside {
-    width: 280px;
-    position: absolute;
-    z-index: 2;
-    left: 20px;
-    top: 30px;
+.link-topo-aside {
+  width: 280px;
+  position: absolute;
+  z-index: 2;
+  left: 20px;
+  top: 7px;
 
-    .to-apm {
-      padding-top: 10px;
-      border-top: 1px solid #d8d8d866;
-    }
+  .to-apm {
+    padding-top: 10px;
+    border-top: 1px solid #d8d8d866;
   }
+}
 
-  .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-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;
+.link-topo-aside-box {
+  border-radius: 4px;
+  position: absolute;
+  width: 280px;
+  z-index: 101;
+  color: #ddd;
+  background-color: #2b3037;
+  padding: 15px 20px 10px;
 
-    .label {
-      display: inline-block;
-      width: 40%;
-    }
+  .label {
+    display: inline-block;
+    width: 40%;
+  }
 
-    .content {
-      vertical-align: top;
-      display: inline-block;
-      width: 60%;
-    }
+  .content {
+    vertical-align: top;
+    display: inline-block;
+    width: 60%;
+  }
 
-    .circle {
-      width: 8px;
-      height: 8px;
-      border-radius: 4px;
-      background-color: #EE5B5B;
-      margin-top: 6px;
-    }
+  .circle {
+    width: 8px;
+    height: 8px;
+    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 {
+  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;
+}
 
-  .link-topo-aside-box-min {
+@keyframes linkTopoAsideBoxMax {
+  from {
     width: 280px;
-    animation: 0.5s linkTopoAsideBoxMin 1 running;
   }
-
-  .link-topo-aside-box-max {
+  to {
     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%;
   }
-
-  @keyframes linkTopoAsideBoxMin {
-    from {
-      width: 60%;
-    }
-    to {
-      width: 280px;
-    }
+  to {
+    width: 280px;
   }
+}
 </style>
diff --git a/src/views/components/topology/topo-date.vue b/src/views/components/topology/topo-date.vue
deleted file mode 100644
index 232c36f..0000000
--- a/src/views/components/topology/topo-date.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * 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>
-  <el-date-picker style="top: 87px;left: 40px;position: absolute;"
-    v-model="date"
-    type="datetimerange"
-    start-placeholder="开始日期"
-    end-placeholder="结束日期"
-    :default-time="['12:00:00']">
-  </el-date-picker>
-</template>
-<script lang="js">
-/* eslint-disable */
-export default{
-  computed: {
-    date: {
-      get() {
-        return [this.$store.state.rocketbot.duration.start, this.$store.state.rocketbot.duration.end];
-      },
-      set(value) {
-        this.$store.dispatch('SET_DURATION', value);
-      },
-    },
-  },
-};
-</script>
-<style lang="scss">
-</style>
diff --git a/src/views/components/topology/topo-detect-point.vue b/src/views/components/topology/topo-detect-point.vue
index e5021cb..b95ab51 100644
--- a/src/views/components/topology/topo-detect-point.vue
+++ b/src/views/components/topology/topo-detect-point.vue
@@ -1,297 +1,313 @@
-/**
-* 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>
-  <div v-if="stateTopo.selectedServiceCall || showServerInfo"
-       :class="`link-topo-aside-box link-topo-aside-box-${isMini?'min':'max'}`"
-       :style="`top:80px;position: fixed;right: 30px;${showInfoCount === 0 ? 'animation: unset;': ''}`">
+  <div
+    v-if="stateTopo.selectedServiceCall || showServerInfo"
+    :class="`link-topo-aside-box link-topo-aside-box-${isMini ? 'min' : 'max'}`"
+    :style="
+      `top:55px;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"
+      :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"/>
+      <use xlink:href="#chevron-left" />
     </svg>
     <div class="mb-5 clear">
       <div v-if="stateTopo.selectedServiceCall">
         <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>
+          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>
+          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>
-      <span v-else-if="showServerInfo" class="b dib mr-20 vm">{{ $t('serviceDetail') }}</span>
+      <span v-else-if="showServerInfo" class="b dib mr-20 vm">{{
+        $t('serviceDetail')
+      }}</span>
     </div>
     <div v-if="showInfo">
       <div v-if="stateTopo.selectedServiceCall">
         <TopoChart
-            v-if="stateTopo.getResponseTimeTrend.length"
-            :data="stateTopo.getResponseTimeTrend"
-            :intervalTime="intervalTime"
-            :title="$t('avgResponseTime')"
-            unit="ms"
+          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"
+          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="%"
+          v-if="stateTopo.getSLATrend.length"
+          :data="stateTopo.getSLATrend"
+          :intervalTime="intervalTime"
+          :precent="true"
+          :title="$t('avgSLA')"
+          unit="%"
         />
         <ChartLine
-            v-if="stateTopo.responsePercentile"
-            :data="stateTopo.responsePercentile"
-            :intervalTime="intervalTime"
-            :title="$t('percentResponse')"
+          v-if="stateTopo.responsePercentile"
+          :data="stateTopo.responsePercentile"
+          :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"
+          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"
+          v-if="rocketDashboard.serviceThroughput.Throughput.length"
+          :data="rocketDashboard.serviceThroughput.Throughput"
+          :intervalTime="intervalTime"
+          title="Service Throughput"
+          unit="cpm"
         />
         <ChartLine
-            v-if="rocketDashboard.servicePercent.p50.length"
-            :data="rocketDashboard.servicePercent"
-            :intervalTime="intervalTime"
-            :title="$t('percentResponse')"
+          v-if="rocketDashboard.servicePercent.p50.length"
+          :data="rocketDashboard.servicePercent"
+          :intervalTime="intervalTime"
+          :title="$t('percentResponse')"
         />
       </div>
     </div>
     <div class="show-dependency" v-if="stateTopo.selectedServiceCall">
-      <a class="rk-btn lg" @click="openInstanceModal">{{$t('ShowInstanceDependency')}}</a>
-      <el-drawer
-          custom-class="instance-dependency"
-          size="1200px"
-          :title="`${stateTopo.selectedServiceCall.source.name} -> ${stateTopo.selectedServiceCall.target.name} Instance Dependency`"
-          :visible.sync="dialogTopoVisible"
-          :modal-append-to-body="false"
-          :close-on-click-modal="false"
-          :destroy-on-close="true"
-          :before-close="clearInstance"
+      <a class="rk-btn lg" @click="openInstanceModal">{{
+        $t('ShowInstanceDependency')
+      }}</a>
+      <rk-sidebox
+        class="instance-dependency"
+        width="100%"
+        :title="
+          `${stateTopo.selectedServiceCall.source.name} -> ${stateTopo.selectedServiceCall.target.name} Instance Dependency`
+        "
+        :show.sync="dialogTopoVisible"
       >
-        <div class="title-name">{{stateTopo.selectedServiceCall.source.name}} ->
-          {{stateTopo.selectedServiceCall.target.name}} Instance Dependency
-        </div>
-        <TopoInstanceDependency/>
-      </el-drawer>
+        <TopoInstanceDependency />
+      </rk-sidebox>
     </div>
   </div>
 </template>
 <script lang="ts">
+import { State as topoState } from '@/store/modules/topology';
+import { Component, Vue, Watch } from 'vue-property-decorator';
+import { Action, Getter, Mutation, State } from 'vuex-class';
+import TopoChart from './topo-chart.vue';
+import TopoInstanceDependency from './topo-instance-dependency.vue';
+import ChartLine from './chart-line.vue';
 
-  import { State as topoState } from '@/store/modules/topology';
-  import { Component, Vue, Watch } from 'vue-property-decorator';
-  import { Action, Getter, Mutation, State } from 'vuex-class';
-  import TopoChart from './topo-chart.vue';
-  import TopoInstanceDependency from './topo-instance-dependency.vue';
-  import ChartLine from './chart-line.vue';
+@Component({
+  components: {
+    TopoInstanceDependency,
+    TopoChart,
+    ChartLine,
+  },
+})
+export default class TopoDetectPoint extends Vue {
+  @State('rocketTopo') private stateTopo!: topoState;
+  @Getter('intervalTime') private intervalTime: any;
+  @Getter('durationTime') private durationTime: any;
+  @Action('MIXHANDLE_CHANGE_GROUP_WITH_CURRENT')
+  private MIXHANDLE_CHANGE_GROUP_WITH_CURRENT: any;
+  @Action('MIXHANDLE_GET_OPTION') private MIXHANDLE_GET_OPTION: any;
+  @Action('GET_QUERY') private GET_QUERY: any;
+  @Mutation('rocketTopo/SET_MODE_STATUS') private SET_MODE_STATUS: any;
+  @State('rocketDashboard') private rocketDashboard: any;
+  @Mutation('rocketTopo/SET_SELECTED_INSTANCE_CALL')
+  private SET_SELECTED_INSTANCE_CALL: any;
+  @Mutation('rocketTopo/SET_INSTANCE_DEPENDENCY')
+  private SET_INSTANCE_DEPENDENCY: any;
+  @Action('rocketTopo/CLEAR_TOPO_INFO') private CLEAR_TOPO_INFO: any;
+  @Action('rocketTopo/GET_TOPO_INSTANCE_DEPENDENCY')
+  private GET_INSTANCE_DEPENDENCY: any;
 
-  @Component({
-    components: {
-      TopoInstanceDependency, TopoChart, ChartLine,
-    },
-  })
-  export default class TopoDetectPoint extends Vue {
-    @State('rocketTopo') private stateTopo!: topoState;
-    @Getter('intervalTime') private intervalTime: any;
-    @Getter('durationTime') private durationTime: any;
-    @Action('MIXHANDLE_CHANGE_GROUP_WITH_CURRENT') private MIXHANDLE_CHANGE_GROUP_WITH_CURRENT: any;
-    @Action('MIXHANDLE_GET_OPTION') private MIXHANDLE_GET_OPTION: any;
-    @Action('GET_QUERY') private GET_QUERY: any;
-    @Mutation('rocketTopo/SET_MODE_STATUS') private SET_MODE_STATUS: any;
-    @State('rocketDashboard') private rocketDashboard: any;
-    @Mutation('rocketTopo/SET_SELECTED_INSTANCE_CALL') private SET_SELECTED_INSTANCE_CALL: any;
-    @Mutation('rocketTopo/SET_INSTANCE_DEPENDENCY') private SET_INSTANCE_DEPENDENCY: any;
-    @Action('rocketTopo/CLEAR_TOPO_INFO') private CLEAR_TOPO_INFO: any;
-    @Action('rocketTopo/GET_TOPO_INSTANCE_DEPENDENCY') private GET_INSTANCE_DEPENDENCY: any;
+  private isMini: boolean = true;
+  private showInfoCount: number = 0;
+  private showInfo: boolean = false;
+  private dialogTopoVisible = false;
 
-    private isMini: boolean = true;
-    private showInfoCount: number = 0;
-    private showInfo: boolean = false;
-    private dialogTopoVisible = false;
-
-    private get showServerInfo() {
-      return this.stateTopo.currentNode.name && this.stateTopo.currentNode.isReal;
-    }
+  private get showServerInfo() {
+    return this.stateTopo.currentNode.name && this.stateTopo.currentNode.isReal;
+  }
 
-    @Watch('stateTopo.selectedServiceCall')
-    private watchDetectPointNodeId(newValue: string) {
-      if (newValue || this.stateTopo.currentNode.isReal) {
-        this.showInfo = true;
-      } else {
-        this.showInfo = false;
-        this.showInfoCount = 0;
-        this.isMini = true;
-      }
+  @Watch('stateTopo.selectedServiceCall')
+  private watchDetectPointNodeId(newValue: string) {
+    if (newValue || this.stateTopo.currentNode.isReal) {
+      this.showInfo = true;
+    } else {
+      this.showInfo = false;
+      this.showInfoCount = 0;
+      this.isMini = true;
     }
+  }
 
-    @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.selectedServiceCall) {
-        this.showInfo = true;
-      } else {
-        this.showInfo = false;
-        this.showInfoCount = 0;
-        this.isMini = true;
-      }
+  @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,
+        });
+      });
     }
-
-    private setShowInfo() {
+    if (newValue || this.stateTopo.selectedServiceCall) {
+      this.showInfo = true;
+    } else {
       this.showInfo = false;
-      this.showInfoCount = 1;
-      this.isMini = !this.isMini;
-      setTimeout(() => {
-        this.showInfo = true;
-      }, 550);
+      this.showInfoCount = 0;
+      this.isMini = true;
     }
+  }
 
-    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);
+  }
 
-    private clearInstance() {
-      this.dialogTopoVisible = false;
-      this.SET_SELECTED_INSTANCE_CALL(null);
-    }
+  private setMode(mode: boolean) {
+    this.SET_MODE_STATUS(mode);
+    this.stateTopo.callback();
+  }
 
-    private openInstanceModal() {
-      this.dialogTopoVisible = true;
-      if (!(this.stateTopo.selectedServiceCall && this.stateTopo.selectedServiceCall.source)) {
-        return;
-      }
-      this.GET_INSTANCE_DEPENDENCY({
-        serverServiceId: this.stateTopo.selectedServiceCall.source.id,
-        clientServiceId: this.stateTopo.selectedServiceCall.target.id,
-        duration: this.durationTime,
-      });
-    }
+  private clearInstance() {
+    this.dialogTopoVisible = false;
+    this.SET_SELECTED_INSTANCE_CALL(null);
   }
 
+  private openInstanceModal() {
+    this.dialogTopoVisible = true;
+    if (
+      !(
+        this.stateTopo.selectedServiceCall &&
+        this.stateTopo.selectedServiceCall.source
+      )
+    ) {
+      return;
+    }
+    this.GET_INSTANCE_DEPENDENCY({
+      serverServiceId: this.stateTopo.selectedServiceCall.source.id,
+      clientServiceId: this.stateTopo.selectedServiceCall.target.id,
+      duration: this.durationTime,
+    });
+  }
+}
 </script>
 <style lang="scss">
-  .link-topo-aside-box-btn {
-    color: #626977;
-    border: 1px solid;
-    padding: 0px 3px;
-    width: 45px;
-    display: inline-block;
+.link-topo-aside-box-btn {
+  color: #626977;
+  border: 1px solid;
+  padding: 0px 3px;
+  width: 45px;
+  display: inline-block;
 
-    &.active {
-      color: #448dfe;
-    }
+  &.active {
+    color: #448dfe;
   }
+}
 
-  .show-dependency {
-    margin: 20px 0;
+.show-dependency {
+  margin: 20px 0;
 
-    .rk-btn {
-      display: block;
-      text-align: center;
-    }
+  .rk-btn {
+    display: block;
+    text-align: center;
+  }
 
-    .instance-dependency {
-      background: #333;
+  .instance-dependency {
+    .rk-sidebox{
+      background: #2b3037;
       outline: none;
-
-      .el-drawer__header {
-        color: #fff;
-        padding: 0;
-      }
     }
-
-    .title-name {
-      width: 100%;
-      padding-left: 40px;
-      font-size: 16px;
+    .rk-sidebox-inner{
+      height: 100%;
     }
   }
 
-  .link-topo-aside-box {
-    border-radius: 4px;
-    position: absolute;
-    width: 280px;
-    z-index: 101;
-    color: #ddd;
-    background-color: #333;
-    padding: 15px 20px 10px;
+  .title-name {
+    width: 100%;
+    padding-left: 40px;
+    font-size: 16px;
+  }
+}
 
-    .label {
-      display: inline-block;
-      width: 40%;
-    }
+.link-topo-aside-box {
+  border-radius: 4px;
+  position: absolute;
+  width: 280px;
+  z-index: 101;
+  color: #ddd;
+  background-color: #2b3037;
+  padding: 15px 20px 10px;
 
-    .content {
-      vertical-align: top;
-      display: inline-block;
-      width: 60%;
-    }
+  .label {
+    display: inline-block;
+    width: 40%;
+  }
 
-    .circle {
-      width: 8px;
-      height: 8px;
-      border-radius: 4px;
-      background-color: #EE5B5B;
-      margin-top: 6px;
-    }
+  .content {
+    vertical-align: top;
+    display: inline-block;
+    width: 60%;
   }
 
-  .link-topo-aside-box {
-    p {
-      margin-block-start: auto !important;
-      margin-block-end: auto !important;
-    }
+  .circle {
+    width: 8px;
+    height: 8px;
+    border-radius: 4px;
+    background-color: #ee5b5b;
+    margin-top: 6px;
+  }
+}
+
+.link-topo-aside-box {
+  p {
+    margin-block-start: auto !important;
+    margin-block-end: auto !important;
   }
+}
 </style>
diff --git a/src/views/components/topology/topo-instance-dependency.vue b/src/views/components/topology/topo-instance-dependency.vue
index c32d8f5..a8e8970 100644
--- a/src/views/components/topology/topo-instance-dependency.vue
+++ b/src/views/components/topology/topo-instance-dependency.vue
@@ -125,7 +125,8 @@ export default class TopoInstanceDependency extends Vue {
     .rk-instance-dependency-metrics {
       width: 320px;
       height: 650px;
-      background: #111;
+      margin-top: 10px;
+      background: #252a2f;
       padding: 20px;
     }
     .rk-dependency-chart {
diff --git a/src/views/components/topology/topo.vue b/src/views/components/topology/topo.vue
index 66b3061..b764b07 100644
--- a/src/views/components/topology/topo.vue
+++ b/src/views/components/topology/topo.vue
@@ -286,8 +286,8 @@ export default {
       this.lineNode = this.link.append('rect').attr('class', 'link-node cp')
         .attr('width', 10)
         .attr('height', 10)
-        .attr('rx', 3)
-        .attr('ry', 3)
+        .attr('rx', 5)
+        .attr('ry', 5)
         .attr('fill', d => d.cpm ? '#217EF299' : '#6a6d7799')
         .on('click', function(d, i) {
           that.clickLinkNodes(d, this);
diff --git a/src/views/containers/topology/topology.vue b/src/views/containers/topology/topology.vue
index 0918abe..2cd1559 100644
--- a/src/views/containers/topology/topology.vue
+++ b/src/views/containers/topology/topology.vue
@@ -26,11 +26,10 @@ import { Vue, Component } from 'vue-property-decorator';
 import { State, Action, Getter, Mutation } from 'vuex-class';
 import { AxiosResponse } from 'axios';
 import Topo from '../../components/topology/topo.vue';
-import TopoDate from '../../components/topology/topo-date.vue';
 import TopoAside from '../../components/topology/topo-aside.vue';
 import topo, { State as topoState} from '@/store/modules/topology';
 
-@Component({components: {Topo, TopoAside, TopoDate}})
+@Component({components: {Topo, TopoAside}})
 export default class Topology extends Vue {
   @State('rocketTopo') private stateTopo!: topoState;
   @Mutation('SET_EVENTS') private SET_EVENTS: any;
diff --git a/src/views/containers/topology/window-alarm.vue b/src/views/containers/topology/window-alarm.vue
new file mode 100644
index 0000000..fd472cc
--- /dev/null
+++ b/src/views/containers/topology/window-alarm.vue
@@ -0,0 +1,71 @@
+/**
+ * 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>
+  <rk-sidebox
+    :show.sync="isShowSync"
+    :fixed="true"
+    width="80%">
+    <div class="rk-alarm flex-v">
+      <AlarmTool :durationTime="durationTime" :total="rocketAlarm.total" :alarmScope="alarmScope" :inTopo="inTopo" :prop-keyword="keyword"/>
+      <div style="flex-grow: 1;overflow: auto;height: 100%;">
+        <AlarmTable :data="rocketAlarm.alarmService"/>
+      </div>
+    </div>
+  </rk-sidebox>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import alarm from '@/store/modules/alarm';
+import { Prop, PropSync } 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';
+
+@Component({
+  components: { AlarmTool, AlarmTable },
+})
+export default class WindowAlarm extends Vue {
+  @State('rocketAlarm') private rocketAlarm!: any;
+  @Getter('durationTime') private durationTime: any;
+  @PropSync('isShow', { default: false })
+  private isShowSync!: boolean;
+  @Prop({default: () => ({label: 'All', key: ''})})
+  private alarmScope: any;
+  @Prop({default: false, type: Boolean})
+  private inTopo!: boolean;
+  @Prop({default: ''})
+  private keyword!: string;
+  private beforeCreate() {
+    this.$store.registerModule('rocketAlarm', alarm);
+  }
+  private beforeDestroy() {
+    this.$store.unregisterModule('rocketAlarm');
+
+  }
+}
+</script>
+
+<style lang="scss">
+.rk-alarm {
+  flex-grow: 1;
+  height: 100%;
+  min-height: 0;
+}
+</style>
diff --git a/src/views/containers/topology/endpoint-survey-window.vue b/src/views/containers/topology/window-endpoint.vue
similarity index 81%
rename from src/views/containers/topology/endpoint-survey-window.vue
rename to src/views/containers/topology/window-endpoint.vue
index c699735..c5e0768 100644
--- a/src/views/containers/topology/endpoint-survey-window.vue
+++ b/src/views/containers/topology/window-endpoint.vue
@@ -16,27 +16,23 @@
 */
 
 <template>
-  <div class="performance-metrics-window">
-    <el-drawer
-      :destroy-on-close="true"
-      :visible.sync="isShowSync"
-      :modal-append-to-body="false"
-      direction="rtl"
-      size="80%">
-      <div class="rk-dashboard-bar flex-h">
-        <ToolBarSelect
-            :selectable="false"
-            :title="this.$t('currentService')"
-            :current="stateDashboardOption.currentService"
-            :data="stateDashboardOption.services"
-            icon="package"/>
-        <ToolBarEndpointSelect @onChoose="selectEndpoint" :title="$t('currentEndpoint')"
-                               :current="stateDashboardOption.currentEndpoint" :data="endpoints" icon="code">
-        </ToolBarEndpointSelect>
-      </div>
-      <endpoints-survey v-if="!rocketComps.loading" :style="`overflow: auto; height: ${endpointsSurveyHeight}`" />
-    </el-drawer>
-  </div>
+  <rk-sidebox
+    :show.sync="isShowSync"
+    :fixed="true"
+    width="80%">
+    <div class="rk-dashboard-bar flex-h">
+      <ToolBarSelect
+          :selectable="false"
+          :title="this.$t('currentService')"
+          :current="stateDashboardOption.currentService"
+          :data="stateDashboardOption.services"
+          icon="package"/>
+      <ToolBarEndpointSelect @onChoose="selectEndpoint" :title="$t('currentEndpoint')"
+                              :current="stateDashboardOption.currentEndpoint" :data="endpoints" icon="code">
+      </ToolBarEndpointSelect>
+    </div>
+    <endpoints-survey v-if="!rocketComps.loading" :style="`overflow: auto; height: ${endpointsSurveyHeight}`" />
+  </rk-sidebox>
 </template>
 
 <script lang="ts">
@@ -61,7 +57,7 @@
       ToolBarEndpointSelect,
     },
   })
-  export default class InstancesSurveyWindow extends Vue {
+  export default class WindowEndpoint extends Vue {
     @State('rocketOption') private stateDashboardOption!: any;
     @State('rocketData') private rocketComps!: any;
     @Getter('durationTime') private durationTime: any;
diff --git a/src/views/containers/topology/instances-survey-window.vue b/src/views/containers/topology/window-instance.vue
similarity index 80%
rename from src/views/containers/topology/instances-survey-window.vue
rename to src/views/containers/topology/window-instance.vue
index bd17a05..ecd56f6 100644
--- a/src/views/containers/topology/instances-survey-window.vue
+++ b/src/views/containers/topology/window-instance.vue
@@ -16,29 +16,24 @@
 */
 
 <template>
-  <div class="performance-metrics-window">
-    <el-drawer
-      :destroy-on-close="true"
-      title="Instances"
-      :visible.sync="isShowSync"
-      direction="rtl"
-      :modal-append-to-body="false"
-      size="80%">
-      <div class="rk-dashboard-bar flex-h">
-        <ToolBarSelect
-            :selectable="false"
-            :title="this.$t('currentService')"
-            :current="stateDashboardOption.currentService"
-            :data="stateDashboardOption.services" icon="package"/>
-        <ToolBarSelect
-            @onChoose="selectInstance"
-            :title="$t('currentInstance')"
-            :current="stateDashboardOption.currentInstance"
-            :data="instances" icon="disk"/>
-      </div>
-      <instances-survey v-if="isShowSync" :style="`overflow: auto; height: ${instancesSurveyHeight}`" />
-    </el-drawer>
-  </div>
+  <rk-sidebox
+    :show.sync="isShowSync"
+    :fixed="true"
+    width="80%">
+    <div class="rk-dashboard-bar flex-h">
+      <ToolBarSelect
+          :selectable="false"
+          :title="this.$t('currentService')"
+          :current="stateDashboardOption.currentService"
+          :data="stateDashboardOption.services" icon="package"/>
+      <ToolBarSelect
+          @onChoose="selectInstance"
+          :title="$t('currentInstance')"
+          :current="stateDashboardOption.currentInstance"
+          :data="instances" icon="disk"/>
+    </div>
+    <instances-survey v-if="isShowSync" :style="`overflow: auto; height: ${instancesSurveyHeight}`" />
+  </rk-sidebox>
 </template>
 
 <script lang="ts">
@@ -63,7 +58,7 @@
       ToolBarEndpointSelect,
     },
   })
-  export default class InstancesSurveyWindow extends Vue {
+  export default class WindowInstance extends Vue {
     @State('rocketOption') private stateDashboardOption!: any;
     @State('rocketData') private rocketComps!: any;
     @Getter('durationTime') private durationTime: any;
diff --git a/src/views/containers/topology/topology-trace.vue b/src/views/containers/topology/window-trace.vue
similarity index 79%
rename from src/views/containers/topology/topology-trace.vue
rename to src/views/containers/topology/window-trace.vue
index 5b2bb59..6e21726 100644
--- a/src/views/containers/topology/topology-trace.vue
+++ b/src/views/containers/topology/window-trace.vue
@@ -16,18 +16,23 @@
  */
 
 <template>
-  <div class="rk-trace flex-v">
-    <TraceSearch :propsService="service" :inTopo="inTopo"/>
-    <div class="rk-trace-inner">
-      <TraceTable/>
-      <TraceDetail :current="stateTrace.currentTrace" :spans="stateTrace.traceSpans"/>
+  <rk-sidebox
+      :show.sync="isShowSync"
+      :fixed="true"
+      width="80%">
+    <div class="rk-trace flex-v">
+      <TraceSearch :propsService="service" :inTopo="inTopo"/>
+      <div class="rk-trace-inner">
+        <TraceTable/>
+        <TraceDetail :current="stateTrace.currentTrace" :spans="stateTrace.traceSpans"/>
+      </div>
     </div>
-  </div>
+  </rk-sidebox>
 </template>
 
 <script lang="ts">
 import { Option } from '@/types/global';
-import { Component, Vue, Prop } from 'vue-property-decorator';
+import { Component, Vue, Prop, PropSync } 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';
@@ -38,12 +43,13 @@ import trace from '../../../store/modules/trace';
     TraceTable, TraceDetail, TraceSearch,
   },
 })
-export default class Trace extends Vue {
+export default class WindowTrace extends Vue {
   @State('rocketTrace') private stateTrace!: any;
   @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;
-
+  @PropSync('isShow', { default: false })
+    private isShowSync!: boolean;
   @Prop({default: {label: 'All', key: ''}})
   private service!: Option;
 


Mime
View raw message