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 <[email protected]>
AuthorDate: Tue Jan 14 11:35:53 2020 +0800
Bug: fix runtime bug (#247)
Co-authored-by: 吴晟 Wu Sheng <[email protected]>
---
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">
