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: Bug: fix runtime bug (#247)
Date Tue, 14 Jan 2020 03:36:08 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 b2e9302  Bug: fix runtime bug (#247)
b2e9302 is described below

commit b2e9302040de83946ac64236a164921655097ba5
Author: Allen Wang <Allen.Wang.123@outlook.com>
AuthorDate: Tue Jan 14 11:35:53 2020 +0800

    Bug: fix runtime bug (#247)
    
    Co-authored-by: 吴晟 Wu Sheng <wu.sheng@foxmail.com>
---
 src/shims-tsx.d.ts                                |  12 +-
 src/store/index.ts                                |  12 ++
 src/store/modules/topology/index.ts               |  26 +--
 src/store/mutation-types.ts                       |   5 +-
 src/views/components/topology/topo-aside.vue      |  34 ---
 src/views/components/topology/topo.vue            |  20 +-
 src/views/containers/alarm.vue                    |   8 -
 src/views/containers/comparison.vue               |  12 --
 src/views/containers/dashboard.vue                |   6 -
 src/views/containers/topology/topology.vue        |  79 ++++---
 src/views/containers/topology/window-alarm.vue    |  63 +++---
 src/views/containers/topology/window-endpoint.vue | 244 +++++++++++-----------
 src/views/containers/topology/window-instance.vue |   9 +-
 src/views/containers/topology/window-trace.vue    |  67 +++---
 src/views/containers/trace.vue                    |   8 +-
 15 files changed, 264 insertions(+), 341 deletions(-)

diff --git a/src/shims-tsx.d.ts b/src/shims-tsx.d.ts
index bb364ee..bd01aa7 100644
--- a/src/shims-tsx.d.ts
+++ b/src/shims-tsx.d.ts
@@ -18,16 +18,8 @@
 import Vue, { VNode } from 'vue';
 
 declare global {
-  namespace JSX {
-    // tslint:disable no-empty-interface
-    interface Element extends VNode {}
-    // tslint:disable no-empty-interface
-    interface ElementClass extends Vue {}
-    interface IntrinsicElements {
-      [elem: string]: any;
-    }
-  }
-  interface Window { 
+  namespace JSX {}
+  interface Window {
     Promise: any;
     moment: any;
     axiosCancel: any;
diff --git a/src/store/index.ts b/src/store/index.ts
index cea2bb0..87782a8 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -21,6 +21,10 @@ import rocketbot, { State as RocketbotState } from './modules/global';
 import rocketOption, { State as DashboardOptionState } from './modules/dashboard/modules/dashboard-option';
 import rocketData, { State as DashboardDataState } from './modules/dashboard/modules/dashboard-data';
 import rocketDashboard, { State as DashboardState } from './modules/dashboard/source';
+import rocketTopo, { State as TopoState} from '@/store/modules/topology';
+import rocketTrace, { State as TraceState} from '@/store/modules/trace';
+import rocketAlarm, { State as AlarmState} from '@/store/modules/alarm';
+import comparisonStore, { State as ComparisonState} from '@/store/modules/comparison/comparison-store';
 Vue.use(Vuex);
 
 export interface State {
@@ -28,6 +32,10 @@ export interface State {
   rocketOption: DashboardOptionState;
   rocketData: DashboardDataState;
   rocketDashboard: DashboardState;
+  rocketTopo: TopoState;
+  rocketTrace: TraceState;
+  rocketAlarm: AlarmState;
+  comparisonStore: ComparisonState;
 }
 
 export default new Vuex.Store({
@@ -36,5 +44,9 @@ export default new Vuex.Store({
     rocketOption,
     rocketData,
     rocketDashboard,
+    rocketTopo,
+    rocketTrace,
+    rocketAlarm,
+    comparisonStore,
   },
 });
diff --git a/src/store/modules/topology/index.ts b/src/store/modules/topology/index.ts
index f51d5ff..7a25e95 100644
--- a/src/store/modules/topology/index.ts
+++ b/src/store/modules/topology/index.ts
@@ -61,10 +61,8 @@ export interface State {
   getThroughputTrend: number[];
   responsePercentile: {[key: string]: number[]};
   honeycombNode: any;
-  showAlarmDialog: boolean;
-  showTraceDialog: boolean;
-  showInstancesDialog: boolean;
-  showEndpointDialog: boolean;
+  showDialog: boolean;
+  showDialogType: string;
   instanceDependency: {
     calls: Call[];
     nodes: Node[];
@@ -93,10 +91,8 @@ const initState: State = {
   getThroughputTrend: [],
   responsePercentile: {},
   honeycombNode: {},
-  showAlarmDialog: false,
-  showTraceDialog: false,
-  showInstancesDialog: false,
-  showEndpointDialog: false,
+  showDialog: false,
+  showDialogType: '',
   instanceDependency: {
     calls: [],
     nodes: [],
@@ -114,17 +110,9 @@ const mutations = {
   [types.SET_HONEYCOMB_NODE](state: State, data: any) {
     state.honeycombNode = data;
   },
-  [types.SET_SHOW_ALARM_DIALOG](state: State, isShow: boolean) {
-    state.showAlarmDialog = isShow;
-  },
-  [types.SET_SHOW_TRACE_DIALOG](state: State, isShow: boolean) {
-    state.showTraceDialog = isShow;
-  },
-  [types.SET_SHOW_INSTANCES_DIALOG](state: State, isShow: boolean) {
-    state.showInstancesDialog = isShow;
-  },
-  [types.SET_SHOW_ENDPOINT_DIALOG](state: State, isShow: boolean) {
-    state.showEndpointDialog = isShow;
+  [types.SET_SHOW_DIALOG](state: State, type: string) {
+    state.showDialog = !!type;
+    state.showDialogType = type;
   },
   [types.SET_CALLBACK](state: State, data: any) {
     state.callback = data;
diff --git a/src/store/mutation-types.ts b/src/store/mutation-types.ts
index 39b76fa..60d780c 100644
--- a/src/store/mutation-types.ts
+++ b/src/store/mutation-types.ts
@@ -80,10 +80,7 @@ export const SET_TOPO_RELATION = 'SET_TOPO_RELATION';
 export const SET_CALLBACK = 'SET_CALLBACK';
 export const SET_MODE_STATUS = 'SET_MODE_STATUS';
 export const SET_HONEYCOMB_NODE = 'SET_HONEYCOMB_NODE';
-export const SET_SHOW_ALARM_DIALOG = 'SET_SHOW_ALARM_DIALOG';
-export const SET_SHOW_TRACE_DIALOG = 'SET_SHOW_TRACE_DIALOG';
-export const SET_SHOW_INSTANCES_DIALOG = 'SET_SHOW_INSTANCES_DIALOG';
-export const SET_SHOW_ENDPOINT_DIALOG = 'SET_SHOW_ENDPOINT_DIALOG';
+export const SET_SHOW_DIALOG = 'SET_SHOW_DIALOG';
 export const SET_INSTANCE_DEPENDENCY = 'SET_INSTANCE_DEPENDENCY';
 
 // comparison
diff --git a/src/views/components/topology/topo-aside.vue b/src/views/components/topology/topo-aside.vue
index 762f364..a4db14c 100644
--- a/src/views/components/topology/topo-aside.vue
+++ b/src/views/components/topology/topo-aside.vue
@@ -72,30 +72,6 @@ specific language governing permissions and * limitations under the License.
*/
       </div>
       <TopoDetectPoint />
     </div>
-    <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"
-    />
-    <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">
@@ -107,10 +83,6 @@ 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: {
@@ -118,15 +90,10 @@ import WindowAlarm from '@/views/containers/topology/window-alarm.vue';
     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;
@@ -169,7 +136,6 @@ export default class TopoAside extends Vue {
     window.removeEventListener('resize', this.resize);
     this.CLEAR_TOPO_INFO();
     this.CLEAR_TOPO();
-    this.$store.unregisterModule('rocketTopo');
   }
 
   get types() {
diff --git a/src/views/components/topology/topo.vue b/src/views/components/topology/topo.vue
index b764b07..b7cfea8 100644
--- a/src/views/components/topology/topo.vue
+++ b/src/views/components/topology/topo.vue
@@ -357,22 +357,22 @@ export default {
 
     that.$store.commit('rocketTopo/SET_HONEYCOMB_NODE', d);
 
-    d3.selectAll('#honeycomb-selector_honeycomb-group-top-right').on('click', () => {
-      that.$store.commit('rocketTopo/SET_SHOW_ALARM_DIALOG', true);
-      that.removeHoneycomb(that);
-    });
-    d3.selectAll('#honeycomb-selector_honeycomb-group-below-right').on('click', () =>
{
-      this.$store.commit('rocketTopo/SET_SHOW_TRACE_DIALOG', true);
+    d3.selectAll('#honeycomb-selector_honeycomb-group-top-left').on('click', () => {
+      that.$store.commit('SET_CURRENT_SERVICE', { key: d.id, label: d.name });
+      that.$store.commit('rocketTopo/SET_SHOW_DIALOG', 'endpoint');
       that.removeHoneycomb(that);
     });
     d3.selectAll('#honeycomb-selector_honeycomb-group-below-left').on('click', () => {
       that.$store.commit('SET_CURRENT_SERVICE', { key: d.id, label: d.name });
-      that.$store.commit('rocketTopo/SET_SHOW_INSTANCES_DIALOG', true);
+      that.$store.commit('rocketTopo/SET_SHOW_DIALOG', 'instance');
       that.removeHoneycomb(that);
     });
-    d3.selectAll('#honeycomb-selector_honeycomb-group-top-left').on('click', () => {
-      that.$store.commit('SET_CURRENT_SERVICE', { key: d.id, label: d.name });
-      that.$store.commit('rocketTopo/SET_SHOW_ENDPOINT_DIALOG', true);
+    d3.selectAll('#honeycomb-selector_honeycomb-group-top-right').on('click', () => {
+      that.$store.commit('rocketTopo/SET_SHOW_DIALOG', 'alarm');
+      that.removeHoneycomb(that);
+    });
+    d3.selectAll('#honeycomb-selector_honeycomb-group-below-right').on('click', () =>
{
+      this.$store.commit('rocketTopo/SET_SHOW_DIALOG', 'trace');
       that.removeHoneycomb(that);
     });
   },
diff --git a/src/views/containers/alarm.vue b/src/views/containers/alarm.vue
index 360eadd..3cd75e2 100644
--- a/src/views/containers/alarm.vue
+++ b/src/views/containers/alarm.vue
@@ -27,7 +27,6 @@
 <script lang="ts">
 import Vue from 'vue';
 import Component from 'vue-class-component';
-import alarm from '@/store/modules/alarm';
 import { Prop } from 'vue-property-decorator';
 import AlarmTool from '../components/alarm/alarm-tool.vue';
 import AlarmTable from '../components/alarm/alarm-table.vue';
@@ -45,13 +44,6 @@ export default class Alarm extends Vue {
   private inTopo!: boolean;
   @Prop({default: ''})
   private keyword!: string;
-  private beforeCreate() {
-    this.$store.registerModule('rocketAlarm', alarm);
-  }
-  private beforeDestroy() {
-    this.$store.unregisterModule('rocketAlarm');
-
-  }
 }
 </script>
 
diff --git a/src/views/containers/comparison.vue b/src/views/containers/comparison.vue
index f33b611..b2d294d 100644
--- a/src/views/containers/comparison.vue
+++ b/src/views/containers/comparison.vue
@@ -25,8 +25,6 @@
 <script lang="ts">
   import { Component, Vue } from 'vue-property-decorator';
   import { State, Getter, Mutation } from 'vuex-class';
-
-  import { comparisonStore } from '@/store/modules/comparison';
   import { ConparisonConfig, ConparisonCharts } from '../components/comparison';
   import { DurationTime } from '@/types/global';
   import compareObj from '@/utils/comparison';
@@ -42,23 +40,13 @@
     @Getter('durationTime') private durationTime: any;
     @Mutation('SET_EVENTS') private SET_EVENTS: any;
     @Mutation('comparisonStore/SET_ISPREVIOUS') private SET_ISPREVIOUS: any;
-
-    private beforeCreate() {
-      this.$store.registerModule('comparisonStore', comparisonStore);
-    }
-
     private beforeMount() {
       this.$store.dispatch('comparisonStore/GET_SERVICES', {duration: this.durationTime});
       this.SET_EVENTS([this.reloadConfig]);
     }
-
     private reloadConfig() {
       this.$store.dispatch('comparisonStore/RENDER_CHART', this.durationTime);
     }
-
-    private beforeDestroy() {
-      this.$store.unregisterModule('comparisonStore');
-    }
   }
 </script>
 
diff --git a/src/views/containers/dashboard.vue b/src/views/containers/dashboard.vue
index 96bc79d..cfb2fa8 100644
--- a/src/views/containers/dashboard.vue
+++ b/src/views/containers/dashboard.vue
@@ -86,9 +86,6 @@ export default class Dashboard extends Vue {
     return this.MIXHANDLE_GET_OPTION({compType: this.compType, duration: this.durationTime})
       .then(() => {this.handleRefresh(); });
   }
-  // private beforeCreate() {
-  //   this.$store.registerModule('rocketDashboard', dashboard);
-  // }
   private beforeMount() {
     if (window.localStorage.getItem('dashboard')) {
       const data: string = `${window.localStorage.getItem('dashboard')}`;
@@ -97,9 +94,6 @@ export default class Dashboard extends Vue {
     this.handleOption();
     this.SET_EVENTS([this.handleRefresh]);
   }
-  // private beforeDestroy() {
-  //   this.$store.unregisterModule('rocketDashboard');
-  // }
 }
 </script>
 <style lang="scss">
diff --git a/src/views/containers/topology/topology.vue b/src/views/containers/topology/topology.vue
index 2cd1559..f37d08f 100644
--- a/src/views/containers/topology/topology.vue
+++ b/src/views/containers/topology/topology.vue
@@ -1,37 +1,67 @@
-/**
- * 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 class="rk-topo">
-    <TopoAside/>
-    <Topo :datas="{nodes:stateTopo.nodes,calls:stateTopo.calls}"/>
+    <TopoAside />
+    <Topo :datas="{ nodes: stateTopo.nodes, calls: stateTopo.calls }" />
+    <rk-sidebox :show.sync="stateTopo.showDialog" :fixed="true" width="80%">
+      <window-endpoint
+        v-if="stateTopo.showDialogType === 'endpoint'"
+        :endpoints="stateDashboardOption.endpoints"
+      />
+      <window-instance
+        v-else-if="stateTopo.showDialogType === 'instance'"
+        :instances="stateDashboardOption.instances"
+      />
+      <window-trace
+        v-else-if="stateTopo.showDialogType === 'trace'"
+        :service="{
+          label: stateTopo.honeycombNode.name,
+          key: stateTopo.honeycombNode.id,
+        }"
+      />
+      <window-alarm
+        v-else-if="stateTopo.showDialogType === 'alarm'"
+        :alarmScope="{ label: 'Service', key: 'Service' }"
+        :keyword="stateTopo.honeycombNode.name"
+      />
+    </rk-sidebox>
   </div>
 </template>
 <script lang="ts">
 import { Vue, Component } from 'vue-property-decorator';
 import { State, Action, Getter, Mutation } from 'vuex-class';
 import { AxiosResponse } from 'axios';
+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';
 import Topo from '../../components/topology/topo.vue';
 import TopoAside from '../../components/topology/topo-aside.vue';
-import topo, { State as topoState} from '@/store/modules/topology';
+import { State as topoState } from '@/store/modules/topology';
 
-@Component({components: {Topo, TopoAside}})
+@Component({
+  components: {
+    Topo,
+    TopoAside,
+    WindowEndpoint,
+    WindowInstance,
+    WindowTrace,
+    WindowAlarm,
+  },
+})
 export default class Topology extends Vue {
   @State('rocketTopo') private stateTopo!: topoState;
+  @State('rocketOption') private stateDashboardOption!: any;
   @Mutation('SET_EVENTS') private SET_EVENTS: any;
   @Action('rocketTopo/GET_TOPO') private GET_TOPO: any;
   @Action('rocketTopo/CLEAR_TOPO') private CLEAR_TOPO: any;
@@ -45,21 +75,16 @@ export default class Topology extends Vue {
     this.getTopo();
   }
   private getTopo() {
-    this.GET_TOPO({duration: this.durationTime});
-  }
-  private beforeCreate() {
-    this.$store.registerModule('rocketTopo', topo);
+    this.GET_TOPO({ duration: this.durationTime });
   }
   private beforeDestroy() {
     this.CLEAR_TOPO_INFO();
     this.CLEAR_TOPO();
-    this.$store.unregisterModule('rocketTopo');
   }
 }
-
 </script>
 <style lang="scss">
-.rk-topo{
+.rk-topo {
   position: relative;
   height: 100%;
   min-height: 0;
diff --git a/src/views/containers/topology/window-alarm.vue b/src/views/containers/topology/window-alarm.vue
index fd472cc..d2273be 100644
--- a/src/views/containers/topology/window-alarm.vue
+++ b/src/views/containers/topology/window-alarm.vue
@@ -1,38 +1,32 @@
-/**
- * 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>
-  <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 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>
-  </rk-sidebox>
+  </div>
 </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';
@@ -44,21 +38,12 @@ import { State, Action, Getter } from 'vuex-class';
 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: ''})})
+  @Prop({ default: () => ({ label: 'All', key: '' }) })
   private alarmScope: any;
-  @Prop({default: false, type: Boolean})
+  @Prop({ default: false, type: Boolean })
   private inTopo!: boolean;
-  @Prop({default: ''})
+  @Prop({ default: '' })
   private keyword!: string;
-  private beforeCreate() {
-    this.$store.registerModule('rocketAlarm', alarm);
-  }
-  private beforeDestroy() {
-    this.$store.unregisterModule('rocketAlarm');
-
-  }
 }
 </script>
 
diff --git a/src/views/containers/topology/window-endpoint.vue b/src/views/containers/topology/window-endpoint.vue
index c5e0768..749581c 100644
--- a/src/views/containers/topology/window-endpoint.vue
+++ b/src/views/containers/topology/window-endpoint.vue
@@ -1,145 +1,151 @@
-/**
-* 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>
-  <rk-sidebox
-    :show.sync="isShowSync"
-    :fixed="true"
-    width="80%">
+  <div>
     <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">
+        :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>
+    <endpoints-survey
+      v-if="!rocketComps.loading"
+      :style="`overflow: auto; height: ${endpointsSurveyHeight}`"
+    />
+  </div>
 </template>
 
 <script lang="ts">
-  import EndpointsSurvey from '@/views/components/topology/endpoints-survey.vue';
-  import ToolBarSelect from '@/views/components/dashboard/tool-bar-select.vue';
-  import ToolBarEndpointSelect from '@/views/components/dashboard/tool-bar-endpoint-select.vue';
-  import _ from 'lodash';
-  import Vue from 'vue';
-  import { Component, PropSync, Watch } from 'vue-property-decorator';
-  import { Action, Getter, State } from 'vuex-class';
-
-  interface Endpoint {
-    label: string;
-    key: string;
-    name?: string;
+import EndpointsSurvey from '@/views/components/topology/endpoints-survey.vue';
+import ToolBarSelect from '@/views/components/dashboard/tool-bar-select.vue';
+import ToolBarEndpointSelect from '@/views/components/dashboard/tool-bar-endpoint-select.vue';
+import _ from 'lodash';
+import Vue from 'vue';
+import { Component, PropSync, Watch } from 'vue-property-decorator';
+import { Action, Getter, State } from 'vuex-class';
+
+interface Endpoint {
+  label: string;
+  key: string;
+  name?: string;
+}
+
+@Component({
+  components: {
+    EndpointsSurvey,
+    ToolBarSelect,
+    ToolBarEndpointSelect,
+  },
+})
+export default class WindowEndpoint extends Vue {
+  @State('rocketOption') private stateDashboardOption!: any;
+  @State('rocketData') private rocketComps!: any;
+  @Getter('durationTime') private durationTime: any;
+  @Action('SELECT_ENDPOINT') private SELECT_ENDPOINT: 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;
+  @PropSync('isShow', { default: false })
+  private isShowSync!: boolean;
+  private endpointsSurveyHeight = '100%';
+
+  private tabsLoading = true;
+  private endpointName: string = '0';
+  private endpointKey: string = '0';
+  private endpoints: any[] = [];
+
+  private dragIndex: number = NaN;
+
+  public dragStart(index: number) {
+    this.dragIndex = index;
   }
 
-  @Component({
-    components: {
-      EndpointsSurvey,
-      ToolBarSelect,
-      ToolBarEndpointSelect,
-    },
-  })
-  export default class WindowEndpoint extends Vue {
-    @State('rocketOption') private stateDashboardOption!: any;
-    @State('rocketData') private rocketComps!: any;
-    @Getter('durationTime') private durationTime: any;
-    @Action('SELECT_ENDPOINT') private SELECT_ENDPOINT: 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;
-    @PropSync('isShow', { default: false })
-    private isShowSync!: boolean;
-    private endpointsSurveyHeight = '100%';
-
-    private tabsLoading = true;
-    private endpointName: string = '0';
-    private endpointKey: string = '0';
-    private endpoints: any[] = [];
-
-    private dragIndex: number = NaN;
-
-    public dragStart(index: number) {
-      this.dragIndex = index;
-    }
-
-    private selectEndpoint(i: any) {
-      this.SELECT_ENDPOINT({endpoint: i, duration: this.durationTime});
-    }
+  private selectEndpoint(i: any) {
+    this.SELECT_ENDPOINT({ endpoint: i, duration: this.durationTime });
+  }
 
-    private handleRefresh() {
-      this.GET_QUERY({
-        serviceId: this.stateDashboardOption.currentService.key || '',
-        endpointId: this.endpointKey || '',
-        endpointName: this.endpointName || '',
-        duration: this.durationTime,
-      });
-    }
+  private handleRefresh() {
+    this.GET_QUERY({
+      serviceId: this.stateDashboardOption.currentService.key || '',
+      endpointId: this.endpointKey || '',
+      endpointName: this.endpointName || '',
+      duration: this.durationTime,
+    });
+  }
 
-    private handleOption() {
-      this.MIXHANDLE_CHANGE_GROUP_WITH_CURRENT({ index: 0, current: 2 });
-      return this.MIXHANDLE_GET_OPTION({ compType: 'service', duration: this.durationTime
})
-      .then(() => {
-        this.handleRefresh();
-      });
-    }
+  private handleOption() {
+    this.MIXHANDLE_CHANGE_GROUP_WITH_CURRENT({ index: 0, current: 2 });
+    return this.MIXHANDLE_GET_OPTION({
+      compType: 'service',
+      duration: this.durationTime,
+    }).then(() => {
+      this.handleRefresh();
+    });
+  }
 
-    @Watch('stateDashboardOption.endpoints')
-    private watchInstances(endpoints: Endpoint[]) {
-      _.forEach(endpoints, (endpoint) => {
-        endpoint.name = endpoint.label;
+  @Watch('stateDashboardOption.endpoints')
+  private watchInstances(endpoints: Endpoint[]) {
+    _.forEach(endpoints, ( endpoint ) => {
+      endpoint.name = endpoint.label;
+    });
+    this.endpoints = endpoints;
+    if (endpoints.length > 0 && this.endpointName === '0') {
+      this.SELECT_ENDPOINT({
+        endpoint: endpoints[0],
+        duration: this.durationTime,
       });
-      this.endpoints = endpoints;
-      if (endpoints.length > 0 && (this.endpointName === '0')) {
-        this.SELECT_ENDPOINT({ endpoint: endpoints[0], duration: this.durationTime });
-        if (endpoints[0].name) {
-          this.endpointName = endpoints[0].name;
-          this.endpointKey = endpoints[0].key;
-        }
+      if (endpoints[0].name) {
+        this.endpointName = endpoints[0].name;
+        this.endpointKey = endpoints[0].key;
       }
-      this.tabsLoading = false;
     }
+    this.tabsLoading = false;
+  }
 
-    private beforeMount() {
-      this.handleOption();
-    }
+  private beforeMount() {
+    this.handleOption();
+  }
 
-    private mounted() {
-      this.resize();
-      window.addEventListener('resize', this.resize);
-    }
+  private mounted() {
+    this.resize();
+    window.addEventListener('resize', this.resize);
+  }
 
-    private resize() {
-      this.endpointsSurveyHeight = `${document.body.clientHeight - 101}px`;
-    }
+  private resize() {
+    this.endpointsSurveyHeight = `${document.body.clientHeight - 101}px`;
+  }
 
-    private beforeDestroy() {
-      window.removeEventListener('resize', this.resize);
-    }
+  private beforeDestroy() {
+    window.removeEventListener('resize', this.resize);
   }
+}
 </script>
 
 <style lang="scss">
-  .rk-dashboard-bar {
-    flex-shrink: 0;
-    color: #efefef;
-    background-color: #333840;
-  }
+.rk-dashboard-bar {
+  flex-shrink: 0;
+  color: #efefef;
+  background-color: #333840;
+}
 </style>
diff --git a/src/views/containers/topology/window-instance.vue b/src/views/containers/topology/window-instance.vue
index ecd56f6..a688085 100644
--- a/src/views/containers/topology/window-instance.vue
+++ b/src/views/containers/topology/window-instance.vue
@@ -16,10 +16,7 @@
 */
 
 <template>
-  <rk-sidebox
-    :show.sync="isShowSync"
-    :fixed="true"
-    width="80%">
+  <div>
     <div class="rk-dashboard-bar flex-h">
       <ToolBarSelect
           :selectable="false"
@@ -32,8 +29,8 @@
           :current="stateDashboardOption.currentInstance"
           :data="instances" icon="disk"/>
     </div>
-    <instances-survey v-if="isShowSync" :style="`overflow: auto; height: ${instancesSurveyHeight}`"
/>
-  </rk-sidebox>
+    <instances-survey :style="`overflow: auto; height: ${instancesSurveyHeight}`" />
+  </div>
 </template>
 
 <script lang="ts">
diff --git a/src/views/containers/topology/window-trace.vue b/src/views/containers/topology/window-trace.vue
index 6e21726..1fab6c3 100644
--- a/src/views/containers/topology/window-trace.vue
+++ b/src/views/containers/topology/window-trace.vue
@@ -1,33 +1,25 @@
-/**
- * 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>
-  <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 class="rk-trace flex-v">
+    <TraceSearch :propsService="service" :inTopo="inTopo" />
+    <div class="rk-trace-inner">
+      <TraceTable />
+      <TraceDetail
+        :current="stateTrace.currentTrace"
+        :spans="stateTrace.traceSpans"
+      />
     </div>
-  </rk-sidebox>
+  </div>
 </template>
 
 <script lang="ts">
@@ -37,10 +29,11 @@ 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';
 import TraceDetail from '@/views/components/trace/trace-detail.vue';
-import trace from '../../../store/modules/trace';
 @Component({
   components: {
-    TraceTable, TraceDetail, TraceSearch,
+    TraceTable,
+    TraceDetail,
+    TraceSearch,
   },
 })
 export default class WindowTrace extends Vue {
@@ -49,22 +42,16 @@ export default class WindowTrace extends Vue {
   @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 isShowSync!: boolean;
+  @Prop({ default: { label: 'All', key: '' } })
   private service!: Option;
 
-  @Prop({default: false, type: Boolean})
+  @Prop({ default: false, type: Boolean })
   private inTopo!: boolean;
 
   private show: boolean = true;
-  private beforeCreate() {
-    this.$store.registerModule('rocketTrace', trace);
-  }
   private beforeMount() {
-     this.SET_EVENTS([]);
-  }
-  private beforeDestroy() {
-    this.$store.unregisterModule('rocketTrace');
+    this.SET_EVENTS([]);
   }
 }
 </script>
@@ -74,7 +61,7 @@ export default class WindowTrace extends Vue {
   height: 100%;
   min-height: 0;
 }
-.rk-trace-inner{
+.rk-trace-inner {
   height: 100%;
   display: flex;
   min-height: 0;
diff --git a/src/views/containers/trace.vue b/src/views/containers/trace.vue
index 0f998a1..df91055 100644
--- a/src/views/containers/trace.vue
+++ b/src/views/containers/trace.vue
@@ -29,7 +29,7 @@ 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';
 import TraceDetail from '@/views/components/trace/trace-detail.vue';
-import trace from '../../store/modules/trace';
+
 @Component({
   components: {
     TraceTable,
@@ -50,15 +50,9 @@ export default class Trace extends Vue {
   private inTopo!: boolean;
 
   private show: boolean = true;
-  private beforeCreate() {
-    this.$store.registerModule('rocketTrace', trace);
-  }
   private beforeMount() {
     this.SET_EVENTS([]);
   }
-  private beforeDestroy() {
-    this.$store.unregisterModule('rocketTrace');
-  }
 }
 </script>
 <style lang="scss">


Mime
View raw message