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 08c7fb5 Feat: remove element-ui (#218)
08c7fb5 is described below
commit 08c7fb5e7c57c47a436ec568ee41ec04c3fc6b5d
Author: Allen Wang <[email protected]>
AuthorDate: Fri Dec 6 20:39:56 2019 +0800
Feat: remove element-ui (#218)
1. remove element-ui.
2. replace router redirection logic.
3. fix language linter bug.
---
package.json | 1 -
src/App.vue | 7 +-
src/components/rk-back.vue | 4 +-
src/components/rk-button.vue | 7 +-
src/components/rk-footer.vue | 2 +-
src/main.ts | 3 -
src/router.ts | 17 +--
src/shims-tsx.d.ts | 2 +-
src/store/index.ts | 9 ++
src/store/modules/topology/index.ts | 20 ---
src/views/components/alarm/alarm-tool.vue | 4 +-
src/views/components/dashboard/dashboard-comp.vue | 4 +-
src/views/components/dashboard/tool-bar.vue | 5 +-
src/views/components/topology/radial.vue | 1 -
src/views/components/topology/topo-aside.vue | 60 +--------
src/views/components/topology/topo-chart.vue | 4 +-
src/views/components/topology/topo-response.vue | 2 +-
src/views/components/topology/topo.vue | 64 +++++-----
src/views/components/trace/trace-search.vue | 5 +-
src/views/containers/alarm.vue | 14 +-
src/views/containers/dashboard.vue | 6 -
src/views/containers/endpoint-survey-window.vue | 148 ----------------------
src/views/containers/instances-survey-window.vue | 142 ---------------------
src/views/containers/topology.vue | 6 +-
src/views/containers/trace.vue | 9 +-
25 files changed, 77 insertions(+), 469 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/App.vue b/src/App.vue
index ac0e195..5f1618f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -16,7 +16,12 @@
*/
<template>
- <router-view></router-view>
+<div class="container">
+ <keep-alive :max="1">
+ <router-view v-if="$route.meta.keepAlive"></router-view>
+ </keep-alive>
+ <router-view v-if="!$route.meta.keepAlive"></router-view>
+</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
diff --git a/src/components/rk-back.vue b/src/components/rk-back.vue
index 51ccf9f..daf24f2 100644
--- a/src/components/rk-back.vue
+++ b/src/components/rk-back.vue
@@ -29,8 +29,8 @@ export default class RkBack extends Vue {
@Prop({ default: '' }) private size!: string;
private handleBack() {
const query = this.$route.query as any;
- if (query.form) {
- this.$router.push(query.form);
+ if (query.from) {
+ this.$router.push(query.from);
} else {
this.$emit('back');
}
diff --git a/src/components/rk-button.vue b/src/components/rk-button.vue
index 73622fe..1bb7db1 100644
--- a/src/components/rk-button.vue
+++ b/src/components/rk-button.vue
@@ -16,8 +16,9 @@
*/
<template>
- <a class="rk-btn" :class="{size, 'ghost': ghost}" @click="$emit('click')">
- <svg class="icon"><use xlink:href="#chevron-left"></use></svg>
+ <a class="rk-btn" :class="`${size} ${ghost?'ghost':''}`"
@click="$emit('click')">
+ <rk-icon v-if="icon" :icon="icon" :offset="true"/>
+ <slot/>
</a>
</template>
<script lang="ts">
@@ -27,6 +28,7 @@ import { Component, Prop } from 'vue-property-decorator';
@Component
export default class RkBtn extends Vue {
@Prop({ default: '' }) private size!: string;
+ @Prop({ default: '' }) private icon!: string;
@Prop({ default: false }) private ghost!: boolean;
}
</script>
@@ -37,6 +39,7 @@ export default class RkBtn extends Vue {
background-color: #448dfe;
border-radius: 4px;
color: #fff;
+ display: inline-block;
transition: background-color .3s;
&.sm{
line-height: 24px;
diff --git a/src/components/rk-footer.vue b/src/components/rk-footer.vue
index 37eaac7..f34e46c 100644
--- a/src/components/rk-footer.vue
+++ b/src/components/rk-footer.vue
@@ -87,7 +87,7 @@ export default class Footerssd extends Vue {
border-top: 1px solid #448dfe;
}
.rk-footer-utc{
- color:inherit;background: 0;border: 0;outline: none;
width:27px;padding-bottom: 0;
+ color:inherit;background: 0;border: 0;outline: none;
width:35px;padding-bottom: 0;
}
.rk-footer-inner{
justify-content: space-between;
diff --git a/src/main.ts b/src/main.ts
index af4c833..db06627 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -37,13 +37,10 @@ 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';
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/router.ts b/src/router.ts
index 7df8dfd..6e0bfa9 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -33,11 +33,6 @@ const router = new Router({
base: process.env.BASE_URL,
linkActiveClass: 'active',
routes: [
- // {
- // path: '/login',
- // component: Login,
- // meta: { login: true },
- // },
{
path: '/',
component: Index,
@@ -53,6 +48,9 @@ const router = new Router({
{
path: 'topology',
component: Topology,
+ meta: {
+ keepAlive: true,
+ },
},
{
path: 'alarm',
@@ -75,15 +73,6 @@ router.beforeEach((to, from, next) => {
}
window.axiosCancel = [];
}
- // if (to.meta.login && (token === null || token === 'guest')) {
- // next();
- // } else if (token === null || token === 'guest') {
- // next('/login');
- // } else if (to.meta.login) {
- // next(from.path);
- // } else {
- // next();
- // }
next();
});
diff --git a/src/shims-tsx.d.ts b/src/shims-tsx.d.ts
index bb364ee..a7f977c 100644
--- a/src/shims-tsx.d.ts
+++ b/src/shims-tsx.d.ts
@@ -27,7 +27,7 @@ declare global {
[elem: string]: any;
}
}
- interface Window {
+ interface Window {
Promise: any;
moment: any;
axiosCancel: any;
diff --git a/src/store/index.ts b/src/store/index.ts
index cea2bb0..595db78 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -21,6 +21,9 @@ 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';
Vue.use(Vuex);
export interface State {
@@ -28,6 +31,9 @@ export interface State {
rocketOption: DashboardOptionState;
rocketData: DashboardDataState;
rocketDashboard: DashboardState;
+ rocketTopo: TopoState;
+ rocketTrace: TraceState;
+ rocketAlarm: AlarmState;
}
export default new Vuex.Store({
@@ -36,5 +42,8 @@ export default new Vuex.Store({
rocketOption,
rocketData,
rocketDashboard,
+ rocketTopo,
+ rocketTrace,
+ rocketAlarm,
},
});
diff --git a/src/store/modules/topology/index.ts
b/src/store/modules/topology/index.ts
index 0cf662c..5ad1904 100644
--- a/src/store/modules/topology/index.ts
+++ b/src/store/modules/topology/index.ts
@@ -62,10 +62,6 @@ export interface State {
p95: number[];
p99: number[];
honeycombNode: any;
- showAlarmDialog: boolean;
- showTraceDialog: boolean;
- showInstancesDialog: boolean;
- showEndpointDialog: boolean;
}
const initState: State = {
@@ -89,10 +85,6 @@ const initState: State = {
p95: [],
p99: [],
honeycombNode: {},
- showAlarmDialog: false,
- showTraceDialog: false,
- showInstancesDialog: false,
- showEndpointDialog: false,
};
// getters
@@ -103,18 +95,6 @@ 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_CALLBACK](state: State, data: any) {
state.callback = data;
},
diff --git a/src/views/components/alarm/alarm-tool.vue
b/src/views/components/alarm/alarm-tool.vue
index 786aedd..77753f0 100644
--- a/src/views/components/alarm/alarm-tool.vue
+++ b/src/views/components/alarm/alarm-tool.vue
@@ -17,6 +17,7 @@
<template>
<nav class="rk-alarm-tool flex-h">
+ <RkBack v-if="$route.query.from"/>
<AlarmSelect v-show="!inTopo" :title="this.$t('filterScope')"
:value="alarmScope" @input="handleFilter" :data="alarmOptions"/>
<div class="mr-10" style="padding: 3px 15px 0">
<div class="sm grey">{{this.$t('searchKeyword')}}</div>
@@ -39,7 +40,7 @@ export default class AlarmTool extends Vue {
@Prop() private durationTime: any;
@Prop() private total!: number;
private pageNum: number = 1;
- @Prop({default: {label: 'All', key: ''}})
+ @Prop({default: () => ({label: 'All', key: ''})})
private alarmScope: any;
@Prop({default: false, type: Boolean})
private inTopo!: boolean;
@@ -75,6 +76,7 @@ export default class AlarmTool extends Vue {
}
private beforeMount() {
this.SET_EVENTS([() => { this.handleRefresh(1); } ]);
+ this.handleRefresh(1);
}
}
</script>
diff --git a/src/views/components/dashboard/dashboard-comp.vue
b/src/views/components/dashboard/dashboard-comp.vue
index 7faeca8..b5879aa 100644
--- a/src/views/components/dashboard/dashboard-comp.vue
+++ b/src/views/components/dashboard/dashboard-comp.vue
@@ -66,7 +66,9 @@ export default class DashboardComp extends Vue {
Database: [],
};
this.rocketComps.data[this.compType].forEach((i: any) => {
- temp[i.o] && temp[i.o].push(i);
+ if (temp[i.o]) {
+ temp[i.o].push(i);
+ }
});
return temp;
}
diff --git a/src/views/components/dashboard/tool-bar.vue
b/src/views/components/dashboard/tool-bar.vue
index 230efc3..d061184 100644
--- a/src/views/components/dashboard/tool-bar.vue
+++ b/src/views/components/dashboard/tool-bar.vue
@@ -18,11 +18,12 @@
<template>
<div>
<div class="rk-dashboard-bar flex-h" v-if="compType === 'service'">
+ <RkBack v-if="$route.query.from" class="ml-5"/>
<div class="rk-dashboard-bar-reload">
- <svg class="icon lg vm cp rk-btn ghost"
:style="`color:${!rocketGlobal.edit? '' :'#ffc107'}`"
@click="handleSetEdit"><use
:xlink:href="!rocketGlobal.edit?'#lock':'#lock-open'"></use></svg>
+ <rk-button :icon="!rocketGlobal.edit?'#lock':'#lock-open'"
:size="'lg'" :ghost="true" @click="handleSetEdit"></rk-button>
</div>
<div class="rk-dashboard-bar-reload">
- <svg class="icon lg vm cp rk-btn ghost" @click="handleOption"><use
xlink:href="#retry"></use></svg>
+ <rk-button icon="#retry" :size="'lg'" :ghost="true"
@click="handleOption"></rk-button>
</div>
<ToolBarSelect @onChoose="selectService"
:title="this.$t('currentService')" :current="stateDashboard.currentService"
:data="stateDashboard.services" icon="package"/>
<ToolBarEndpointSelect @onChoose="selectEndpoint"
:title="this.$t('currentEndpoint')" :current="stateDashboard.currentEndpoint"
:data="stateDashboard.endpoints" icon="code"/>
diff --git a/src/views/components/topology/radial.vue
b/src/views/components/topology/radial.vue
index 550ab4e..f47bff9 100644
--- a/src/views/components/topology/radial.vue
+++ b/src/views/components/topology/radial.vue
@@ -17,7 +17,6 @@
<template>
<div class="micro-radil-chart">
- <!-- <div class="micro-radil-chart-btn rk-btn ghost cp"
@click="$emit('showRadial', false)">X</div> -->
<RkEcharts height="100%" :option="responseConfig" ref="radial" />
</div>
</template>
diff --git a/src/views/components/topology/topo-aside.vue
b/src/views/components/topology/topo-aside.vue
index a70a887..35817d0 100644
--- a/src/views/components/topology/topo-aside.vue
+++ b/src/views/components/topology/topo-aside.vue
@@ -114,41 +114,6 @@
/>
</div>
</div>
- <el-drawer
- v-if="stateTopo.showAlarmDialog"
- custom-class="performance-metrics-window"
- size="75%"
- destroy-on-close
- :visible.sync="stateTopo.showAlarmDialog"
- >
- <alarm-containers :style="`height: ${drawerMainBodyHeight}`"
- :alarmScope="{label: 'Service', key: 'Service'}"
- inTopo
- :keyword="stateTopo.honeycombNode.name"
- ></alarm-containers>
- </el-drawer>
- <el-drawer
- custom-class="performance-metrics-window"
- v-if="stateTopo.showTraceDialog"
- size="75%"
- destroy-on-close
- :visible.sync="stateTopo.showTraceDialog"
- >
- <trace-containers :style="`height: ${drawerMainBodyHeight}`"
- :service="{label: stateTopo.honeycombNode.name, key:
stateTopo.honeycombNode.id}"
- inTopo
- ></trace-containers>
- </el-drawer>
- <instances-survey-window
- v-if="stateTopo.showInstancesDialog"
- :is-show.sync="stateTopo.showInstancesDialog"
- :instances="stateDashboardOption.instances"
- ></instances-survey-window>
- <endpoint-survey-window
- v-if="stateTopo.showEndpointDialog"
- :is-show.sync="stateTopo.showEndpointDialog"
- :endpoints="stateDashboardOption.endpoints"
- ></endpoint-survey-window>
</aside>
</template>
<script lang="ts">
@@ -159,14 +124,9 @@ import TopoChart from './topo-chart.vue';
import TopoService from './topo-services.vue';
import ChartResponse from './topo-response.vue';
import Radial from './radial.vue';
-import AlarmContainers from '@/views/containers/alarm.vue';
-import TraceContainers from '@/views/containers/trace.vue';
-import InstancesSurveyWindow from
'@/views/containers/instances-survey-window.vue';
-import EndpointSurveyWindow from
'@/views/containers/endpoint-survey-window.vue';
import { initState } from
'@/store/modules/dashboard/modules/dashboard-data-layout';
-@Component({components: {TopoChart, TopoService, ChartResponse, Radial,
AlarmContainers,
- TraceContainers, InstancesSurveyWindow, EndpointSurveyWindow}})
+@Component({components: {TopoChart, TopoService, ChartResponse, Radial}})
export default class TopoAside extends Vue {
@State('rocketTopo') private stateTopo!: topoState;
@State('rocketOption') private stateDashboardOption!: any;
@@ -178,7 +138,6 @@ export default class TopoAside extends Vue {
@Action('rocketTopo/CLEAR_TOPO_INFO') private CLEAR_TOPO_INFO: any;
@Mutation('SET_COMPS_TREE') private SET_COMPS_TREE: any;
- private drawerMainBodyHeight = '100%';
private initState = initState;
private radioStatus: boolean = false;
private show: boolean = true;
@@ -186,33 +145,18 @@ export default class TopoAside extends Vue {
private isMini: boolean = true;
private showInfoCount: number = 0;
- private resize() {
- this.drawerMainBodyHeight = `${document.body.clientHeight - 50}px`;
- }
-
- private beforeCreate() {
- this.$store.registerModule('rocketTopo', topo);
- }
-
private async created() {
this.getTopo();
this.SET_COMPS_TREE(this.initState.tree);
}
- private mounted() {
- this.resize();
- window.addEventListener('resize', this.resize);
- }
-
private getTopo() {
this.GET_TOPO({ duration: this.durationTime });
}
private beforeDestroy() {
- window.removeEventListener('resize', this.resize);
this.CLEAR_TOPO_INFO();
this.CLEAR_TOPO();
- this.$store.unregisterModule('rocketTopo');
}
get types() {
@@ -295,7 +239,7 @@ export default class TopoAside extends Vue {
width: 280px;
z-index: 101;
color: #ddd;
- background-color: #333;
+ background-color: #252a2f;
padding: 15px 20px 10px;
.label{
display: inline-block;
diff --git a/src/views/components/topology/topo-chart.vue
b/src/views/components/topology/topo-chart.vue
index 88087be..eb3a8d1 100644
--- a/src/views/components/topology/topo-chart.vue
+++ b/src/views/components/topology/topo-chart.vue
@@ -18,8 +18,8 @@
<template>
<div>
<div class="grey sm mb-5">{{title}}</div>
- <h5 class="mt-0 mb-0">{{content.toFixed(2)}} {{unit}}</h5>
- <RkEcharts height="100px" :option="responseConfig"/>
+ <div class="mb-5">{{content.toFixed(2)}} {{unit}}</div>
+ <RkEcharts height="80px" :option="responseConfig"/>
</div>
</template>
diff --git a/src/views/components/topology/topo-response.vue
b/src/views/components/topology/topo-response.vue
index c248bc1..d824889 100644
--- a/src/views/components/topology/topo-response.vue
+++ b/src/views/components/topology/topo-response.vue
@@ -18,7 +18,7 @@
<template>
<div>
<div class="grey sm mb-5">{{title}}</div>
- <RkEcharts height="120px" :option="responseConfig"/>
+ <RkEcharts height="80px" :option="responseConfig"/>
</div>
</template>
diff --git a/src/views/components/topology/topo.vue
b/src/views/components/topology/topo.vue
index 1b8efca..d7ddaeb 100644
--- a/src/views/components/topology/topo.vue
+++ b/src/views/components/topology/topo.vue
@@ -110,6 +110,7 @@ export default {
this.tip.hide({}, this);
window.removeEventListener('resize', this.resize);
d3.selectAll('.d3-tip-grey').remove();
+ this.removeHoneycomb(this);
// this.$store.commit('skywalking/setCurrentNode', []);
},
mounted() {
@@ -198,6 +199,7 @@ export default {
this.toggleNode(this.node, d, false);
this.toggleLine(this.line, d, false);
this.toggleLine(this.lineNode, d, false);
+ that.removeHoneycomb(that);
});
this.defs = this.graph.append('defs');
this.arrowMarker = this.defs
@@ -226,16 +228,33 @@ export default {
.on('mouseover', function(d, i) {
that.tipName.show(d, this);
})
- .on('contextmenu', function (d) {
- if (d.isReal) {
+ .on('mouseout', function(d, i) {
+ that.tipName.hide(d, this);
+ })
+ .on('click', function(d, i) {
+ that.removeHoneycomb(that);
+ event.stopPropagation();
+ that.tip.hide({}, this);
+ that.node.attr('class', '');
+ d3.select(this).attr('class', 'node-active');
+ const copyD = JSON.parse(JSON.stringify(d));
+ delete copyD.x;
+ delete copyD.y;
+ delete copyD.vx;
+ delete copyD.vy;
+ delete copyD.fx;
+ delete copyD.fy;
+ delete copyD.index;
+ that.$store.commit('rocketTopo/SET_NODE', copyD);
+ that.toggleNode(that.node, d, true);
+ that.toggleLine(that.line, d, true);
+ that.toggleLine(that.lineNode, d, true);
+ if (d.isReal) {
const honeycombFrames =
d3.select('#honeycomb-selector_honeycomb-frames');
const appGovernTopoHoneycombFrames = that.graph.append('g')
.attr('id', 'app-govern-topo-honeycomb-frames')
.attr('style', honeycombFrames.attr('style'))
- .attr('stroke',
honeycombFrames.attr('stroke')).html(honeycombFrames.html())
- .on('mouseleave', function () {
- that.removeHoneycomb(that);
- });
+ .attr('stroke',
honeycombFrames.attr('stroke')).html(honeycombFrames.html());
const nodeTranslate =
CssHelper.translateSerialization(this.getAttribute('transform'));
const appGovernTopoHoneycombFramesTranslate =
CssHelper.matrixSerialization(honeycombFrames.attr('transform'));
appGovernTopoHoneycombFramesTranslate.tx = nodeTranslate.x - 83;
@@ -246,45 +265,20 @@ 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);
+ that.$router.push({path: '/alarm', query: { from: '/topology' ,
keyword: d.name}})
});
d3.selectAll('#honeycomb-selector_honeycomb-group-below-right').on('click', ()
=> {
- that.$store.commit('rocketTopo/SET_SHOW_TRACE_DIALOG', true);
- that.removeHoneycomb(that);
+ that.$router.push({path: '/trace', query: { from: '/topology',
scope: JSON.stringify({ key: d.id, label: d.name }) }})
});
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.removeHoneycomb(that);
+ that.$router.push({path: '/', query: { from: '/topology' }})
});
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);
- that.removeHoneycomb(that);
+ that.$router.push({path: '/', query: { from: '/topology' }})
});
}
- })
- .on('mouseout', function(d, i) {
- that.tipName.hide(d, this);
- })
- .on('click', function(d, i) {
- event.stopPropagation();
- that.tip.hide({}, this);
- that.node.attr('class', '');
- d3.select(this).attr('class', 'node-active');
- const copyD = JSON.parse(JSON.stringify(d));
- delete copyD.x;
- delete copyD.y;
- delete copyD.vx;
- delete copyD.vy;
- delete copyD.fx;
- delete copyD.fy;
- delete copyD.index;
- that.$store.commit('rocketTopo/SET_NODE', copyD);
- that.toggleNode(that.node, d, true);
- that.toggleLine(that.line, d, true);
- that.toggleLine(that.lineNode, d, true);
});
this.node
.append('image')
diff --git a/src/views/components/trace/trace-search.vue
b/src/views/components/trace/trace-search.vue
index 3555f9e..dea57de 100644
--- a/src/views/components/trace/trace-search.vue
+++ b/src/views/components/trace/trace-search.vue
@@ -17,7 +17,7 @@
<template>
<div class="rk-trace-search">
- <div>
+ <div class="clear">
<a class="rk-trace-clear-btn r" @click="status = !status">
<span class="mr-5 vm">{{this.$t('more')}}</span>
<svg class="icon trans vm" :style="`transform:
rotate(${status?180:0}deg);`">
@@ -37,6 +37,7 @@
<span class="vm">{{this.$t('clear')}}</span>
</a>
<div class="flex-h">
+ <RkBack v-if="$route.query.from"/>
<TraceSelect :hasSearch="true" :title="this.$t('service')"
:value="service" @input="chooseService"
:data="rocketTrace.services" :readonly="inTopo"/>
<TraceSelect :hasSearch="true" :title="this.$t('instance')"
v-model="instance" :data="rocketTrace.instances"/>
@@ -92,7 +93,7 @@
private status: boolean = true;
private maxTraceDuration: string =
localStorage.getItem('maxTraceDuration') || '';
private minTraceDuration: string =
localStorage.getItem('minTraceDuration') || '';
- @Prop({default: {label: 'All', key: ''}})
+ @Prop({default: () => ({label: 'All', key: ''})})
private service!: Option;
private instance: Option = {label: 'All', key: ''};
private endpointName: string = localStorage.getItem('endpointName') || '';
diff --git a/src/views/containers/alarm.vue b/src/views/containers/alarm.vue
index 61c6afb..1bb8b8f 100644
--- a/src/views/containers/alarm.vue
+++ b/src/views/containers/alarm.vue
@@ -17,7 +17,7 @@
<template>
<div class="rk-alarm flex-v">
- <AlarmTool :durationTime="durationTime" :total="rocketAlarm.total"
:alarmScope="alarmScope" :inTopo="inTopo" :keyword="keyword"/>
+ <AlarmTool :durationTime="durationTime" :total="rocketAlarm.total"
:alarmScope="alarmScope" :inTopo="inTopo" :keyword="$route.query.keyword ||
''"/>
<div style="flex-grow: 1;overflow: auto;height: 100%;">
<AlarmTable :data="rocketAlarm.alarmService"/>
</div>
@@ -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';
@@ -39,19 +38,10 @@ import { State, Action, Getter } from 'vuex-class';
export default class Alarm extends Vue {
@State('rocketAlarm') private rocketAlarm!: any;
@Getter('durationTime') private durationTime: any;
- @Prop({default: {label: 'All', key: ''}})
+ @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>
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/endpoint-survey-window.vue
b/src/views/containers/endpoint-survey-window.vue
deleted file mode 100644
index 6a86585..0000000
--- a/src/views/containers/endpoint-survey-window.vue
+++ /dev/null
@@ -1,148 +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>
- <div class="performance-metrics-window">
- <el-drawer
- :destroy-on-close="true"
- :visible.sync="isShowSync"
- 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>
-</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;
- }
-
- @Component({
- components: {
- EndpointsSurvey,
- ToolBarSelect,
- ToolBarEndpointSelect,
- },
- })
- export default class InstancesSurveyWindow 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 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();
- });
- }
-
- @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 });
- if (endpoints[0].name) {
- this.endpointName = endpoints[0].name;
- this.endpointKey = endpoints[0].key;
- }
- }
- this.tabsLoading = false;
- }
-
- private beforeMount() {
- this.handleOption();
- }
-
- private mounted() {
- this.resize();
- window.addEventListener('resize', this.resize);
- }
-
- private resize() {
- this.endpointsSurveyHeight = `${document.body.clientHeight - 101}px`;
- }
-
- private beforeDestroy() {
- window.removeEventListener('resize', this.resize);
- }
- }
-</script>
-
-<style lang="scss">
- .rk-dashboard-bar {
- flex-shrink: 0;
- color: #efefef;
- background-color: #333840;
- }
-</style>
diff --git a/src/views/containers/instances-survey-window.vue
b/src/views/containers/instances-survey-window.vue
deleted file mode 100644
index ed6d767..0000000
--- a/src/views/containers/instances-survey-window.vue
+++ /dev/null
@@ -1,142 +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>
- <div class="performance-metrics-window">
- <el-drawer
- :destroy-on-close="true"
- title="Instances"
- :visible.sync="isShowSync"
- 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"/>
- <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>
-</template>
-
-<script lang="ts">
- import InstancesSurvey from
'@/views/components/topology/instances-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 Instance {
- label: string;
- key: string;
- name?: string;
- }
-
- @Component({
- components: {
- InstancesSurvey,
- ToolBarSelect,
- ToolBarEndpointSelect,
- },
- })
- export default class InstancesSurveyWindow extends Vue {
- @State('rocketOption') private stateDashboardOption!: any;
- @State('rocketData') private rocketComps!: any;
- @Getter('durationTime') private durationTime: any;
- @Action('SELECT_INSTANCE') private SELECT_INSTANCE: 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 instancesSurveyHeight = '100%';
-
- private tabsLoading = true;
- private instanceName: string = '0';
- private instances: any[] = [];
-
- private dragIndex: number = NaN;
-
- public dragStart(index: number) {
- this.dragIndex = index;
- }
-
- private selectInstance(i: any) {
- this.SELECT_INSTANCE({instance: i, duration: this.durationTime});
- }
-
- private handleRefresh() {
- this.GET_QUERY({
- serviceId: this.stateDashboardOption.currentService.key || '',
- duration: this.durationTime,
- });
- }
-
- private handleOption() {
- this.MIXHANDLE_CHANGE_GROUP_WITH_CURRENT({ index: 0, current: 3 });
- return this.MIXHANDLE_GET_OPTION({ compType: 'service', duration:
this.durationTime })
- .then(() => {
- this.handleRefresh();
- });
- }
-
- @Watch('stateDashboardOption.instances')
- private watchInstances(instances: Instance[]) {
- _.forEach(instances, (instance) => {
- instance.name = instance.label.includes('@') ?
instance.label.split('@')[1] : instance.label;
- });
- this.instances = instances;
- if (instances.length > 0 && (this.instanceName === '0')) {
- this.SELECT_INSTANCE({ instance: instances[0], duration:
this.durationTime });
- if (instances[0].name) {
- this.instanceName = instances[0].name;
- }
- }
- this.tabsLoading = false;
- }
-
- private beforeMount() {
- this.handleOption();
- }
-
- private mounted() {
- this.resize();
- window.addEventListener('resize', this.resize);
- }
-
- private resize() {
- this.instancesSurveyHeight = `${document.body.clientHeight - 101}px`;
- }
-
- private beforeDestroy() {
- window.removeEventListener('resize', this.resize);
- }
- }
-</script>
-
-<style lang="less" scoped>
-
-</style>
diff --git a/src/views/containers/topology.vue
b/src/views/containers/topology.vue
index 25c3da8..64734f3 100644
--- a/src/views/containers/topology.vue
+++ b/src/views/containers/topology.vue
@@ -28,7 +28,7 @@ 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';
+import { State as topoState} from '@/store/modules/topology';
@Component({components: {Topo, TopoAside, TopoDate}})
export default class Topology extends Vue {
@@ -48,13 +48,9 @@ export default class Topology extends Vue {
private getTopo() {
this.GET_TOPO({duration: this.durationTime});
}
- private beforeCreate() {
- this.$store.registerModule('rocketTopo', topo);
- }
private beforeDestroy() {
this.CLEAR_TOPO_INFO();
this.CLEAR_TOPO();
- this.$store.unregisterModule('rocketTopo');
}
}
diff --git a/src/views/containers/trace.vue b/src/views/containers/trace.vue
index a58bc8f..4098450 100644
--- a/src/views/containers/trace.vue
+++ b/src/views/containers/trace.vue
@@ -17,7 +17,7 @@
<template>
<div class="rk-trace flex-v">
- <TraceSearch :service="service" :inTopo="inTopo"/>
+ <TraceSearch
:service="$route.query.scope?JSON.parse($route.query.scope):service"
:inTopo="inTopo"/>
<div class="rk-trace-inner">
<TraceTable/>
<TraceDetail :current="stateTrace.currentTrace"
:spans="stateTrace.traceSpans"/>
@@ -32,7 +32,6 @@ 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,
@@ -51,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">
