You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@skywalking.apache.org by wu...@apache.org on 2020/01/13 11:11:45 UTC
[skywalking-rocketbot-ui] branch master updated: Feat: Remove
element-ui (#246)
This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-rocketbot-ui.git
The following commit(s) were added to refs/heads/master by this push:
new 825b39d Feat: Remove element-ui (#246)
825b39d is described below
commit 825b39dc62da4fcdb1f5fdaf969b1a14ea5b8910
Author: Allen Wang <Al...@outlook.com>
AuthorDate: Mon Jan 13 18:55:22 2020 +0800
Feat: Remove element-ui (#246)
* Feat: Remove element-ui
* Update
Co-authored-by: 吴晟 Wu Sheng <wu...@foxmail.com>
---
package.json | 1 -
src/components/rk-sidebox.vue | 12 +-
src/main.ts | 5 +-
.../components/comparison/comparison-config.vue | 2 +-
src/views/components/topology/topo-aside.vue | 434 ++++++++++---------
src/views/components/topology/topo-date.vue | 43 --
.../components/topology/topo-detect-point.vue | 468 +++++++++++----------
.../topology/topo-instance-dependency.vue | 3 +-
src/views/components/topology/topo.vue | 4 +-
src/views/containers/topology/topology.vue | 3 +-
src/views/containers/topology/window-alarm.vue | 71 ++++
...point-survey-window.vue => window-endpoint.vue} | 40 +-
...ances-survey-window.vue => window-instance.vue} | 43 +-
.../{topology-trace.vue => window-trace.vue} | 24 +-
14 files changed, 593 insertions(+), 560 deletions(-)
diff --git a/package.json b/package.json
index f5397b4..7a405f4 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,6 @@
"d3-tip": "^0.9.1",
"dayjs": "^1.8.8",
"echarts": "^4.1.0",
- "element-ui": "^2.12.0",
"lodash": "^4.17.15",
"noty": "^3.2.0-beta",
"popper.js": "^1.14.7",
diff --git a/src/components/rk-sidebox.vue b/src/components/rk-sidebox.vue
index 551bdf7..f88fdeb 100644
--- a/src/components/rk-sidebox.vue
+++ b/src/components/rk-sidebox.vue
@@ -26,7 +26,7 @@
</svg>
</div>
</h3>
- <div class="rk-sidebox-inner">
+ <div class="rk-sidebox-inner" :class="{'rk-sidebox-inner-fixed':fixed}">
<slot/>
</div>
</aside>
@@ -43,6 +43,9 @@ export default {
right: {
default: false,
},
+ fixed: {
+ default: false,
+ },
width: {
default: '550px',
},
@@ -71,13 +74,18 @@ export default {
position: fixed;
right: 0;
top: 50px;
- bottom: 0;
+ bottom: 30px;
z-index: 200;
background-color: #fff;
}
.rk-sidebox-inner{
padding: 35px 20px 20px;
}
+.rk-sidebox-inner-fixed{
+ height: 100%;
+ padding: 0;
+ overflow: hidden;
+}
.rk-sidebox-title {
font-size: 16px;
position: absolute;
diff --git a/src/main.ts b/src/main.ts
index 9efeb8f..51ea254 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -36,15 +36,12 @@ import 'echarts/lib/chart/sankey';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/tooltip';
import VModal from 'vue-js-modal';
-import './assets';
-import ElementUI from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css';
import { queryOAPTimeInfo } from './utils/localtime';
+import './assets';
Vue.use(eventBus);
Vue.use(VueI18n);
Vue.use(components);
-Vue.use(ElementUI);
Vue.use(VModal, {dialog: true});
Vue.directive('clickout', clickout);
Vue.directive('tooltip', tooltip);
diff --git a/src/views/components/comparison/comparison-config.vue b/src/views/components/comparison/comparison-config.vue
index 52337b0..d2b3dcb 100644
--- a/src/views/components/comparison/comparison-config.vue
+++ b/src/views/components/comparison/comparison-config.vue
@@ -142,7 +142,7 @@
}
.reload {
background: #fff;
- color: #333;
+ color: #2b3037;
position: absolute;
top: 3px;
}
diff --git a/src/views/components/topology/topo-aside.vue b/src/views/components/topology/topo-aside.vue
index 8d4255f..762f364 100644
--- a/src/views/components/topology/topo-aside.vue
+++ b/src/views/components/topology/topo-aside.vue
@@ -1,44 +1,56 @@
-/**
-* Licensed to the Apache Software Foundation (ASF) under one or more
-* contributor license agreements. See the NOTICE file distributed with
-* this work for additional information regarding copyright ownership.
-* The ASF licenses this file to You under the Apache License, Version 2.0
-* (the "License"); you may not use this file except in compliance with
-* the License. You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
<aside class="link-topo-aside">
- <Radial v-if="radioStatus" :datas="{nodes:stateTopo.nodes,calls:stateTopo.calls}"/>
- <svg class="link-topo-aside-btn icon cp lg" @click="showRadial()" :style="`position:absolute;left:290px;`">
- <use xlink:href="#issues"/>
+ <Radial
+ v-if="radioStatus"
+ :datas="{ nodes: stateTopo.nodes, calls: stateTopo.calls }"
+ />
+ <svg
+ class="link-topo-aside-btn icon cp lg"
+ @click="showRadial()"
+ :style="`position:absolute;left:290px;`"
+ >
+ <use xlink:href="#issues" />
</svg>
- <svg v-if="showServerInfo" class="link-topo-aside-btn icon cp lg"
+ <svg
+ v-if="showServerInfo"
+ class="link-topo-aside-btn icon cp lg"
@click="show = !show"
- :style="`position:absolute;left:290px;transform: rotate(${show?0 : 180}deg);top:50px;`">
- <use xlink:href="#chevron-left"/>
+ :style="
+ `position:absolute;left:290px;transform: rotate(${
+ show ? 0 : 180
+ }deg);top:45px;`
+ "
+ >
+ <use xlink:href="#chevron-left" />
</svg>
- <TopoService/>
+ <TopoService />
<div v-if="show">
- <div class="link-topo-aside-box" style="top:50px" v-if="!stateTopo.selectedServiceCall && showServerInfo">
+ <div
+ class="link-topo-aside-box"
+ style="top:45px"
+ v-if="!stateTopo.selectedServiceCall && showServerInfo"
+ >
<div class="mb-20">
- <span class="b dib mr-20">{{$t('serviceDetail')}}</span>
+ <span class="b dib mr-20">{{ $t('serviceDetail') }}</span>
</div>
<div class="mb-10">
- <span class="label grey">{{$t('name')}}</span>
- <span class="content">{{stateTopo.currentNode.name}}</span>
+ <span class="label grey">{{ $t('name') }}</span>
+ <span class="content">{{ stateTopo.currentNode.name }}</span>
</div>
<div class="mb-10">
- <span class="label grey">{{$t('type')}}</span>
- <span class="content">{{stateTopo.currentNode.type}}</span>
+ <span class="label grey">{{ $t('type') }}</span>
+ <span class="content">{{ stateTopo.currentNode.type }}</span>
</div>
<div>
<TopoChart
@@ -60,237 +72,213 @@
</div>
<TopoDetectPoint />
</div>
- <el-drawer
- v-if="stateTopo.showAlarmDialog"
- custom-class="performance-metrics-window"
- size="75%"
- destroy-on-close
- :visible.sync="stateTopo.showAlarmDialog"
- :modal-append-to-body="false"
- >
- <alarm-containers :style="`height: ${drawerMainBodyHeight}`"
- :alarmScope="{label: 'Service', key: 'Service'}"
- inTopo
- :keyword="stateTopo.honeycombNode.name"
- />
- </el-drawer>
- <el-drawer
- custom-class="performance-metrics-window"
- v-if="stateTopo.showTraceDialog"
- size="75%"
- destroy-on-close
- :visible.sync="stateTopo.showTraceDialog"
- :modal-append-to-body="false"
- >
- <trace-containers :style="`height: ${drawerMainBodyHeight}`"
- :service="{label: stateTopo.honeycombNode.name, key: stateTopo.honeycombNode.id}"
- inTopo
- />
- </el-drawer>
- <instances-survey-window
+ <window-endpoint
+ v-if="stateTopo.showEndpointDialog"
+ :is-show.sync="stateTopo.showEndpointDialog"
+ :endpoints="stateDashboardOption.endpoints"
+ />
+ <window-instance
v-if="stateTopo.showInstancesDialog"
:is-show.sync="stateTopo.showInstancesDialog"
:instances="stateDashboardOption.instances"
/>
- <endpoint-survey-window
- v-if="stateTopo.showEndpointDialog"
- :is-show.sync="stateTopo.showEndpointDialog"
- :endpoints="stateDashboardOption.endpoints"
+ <window-trace
+ v-if="stateTopo.showTraceDialog"
+ :is-show.sync="stateTopo.showTraceDialog"
+ :service="{
+ label: stateTopo.honeycombNode.name,
+ key: stateTopo.honeycombNode.id,
+ }"
+ />
+ <window-alarm
+ v-if="stateTopo.showAlarmDialog"
+ :is-show.sync="stateTopo.showAlarmDialog"
+ :alarmScope="{ label: 'Service', key: 'Service' }"
+ :keyword="stateTopo.honeycombNode.name"
/>
</aside>
</template>
<script lang="ts">
- import { initState } from '@/store/modules/dashboard/modules/dashboard-data-layout';
- import topo, { State as topoState } from '@/store/modules/topology';
- import AlarmContainers from '@/views/containers/alarm.vue';
- import EndpointSurveyWindow from '@/views/containers/topology/endpoint-survey-window.vue';
- import InstancesSurveyWindow from '@/views/containers/topology/instances-survey-window.vue';
- import TraceContainers from '@/views/containers/topology/topology-trace.vue';
- import { Component, Vue, Watch } from 'vue-property-decorator';
- import { Action, Getter, Mutation, State } from 'vuex-class';
- import Radial from './radial.vue';
- import TopoChart from './topo-chart.vue';
- import TopoService from './topo-services.vue';
- import TopoInstanceDependency from './topo-instance-dependency.vue';
- import TopoDetectPoint from './topo-detect-point.vue';
+import { initState } from '@/store/modules/dashboard/modules/dashboard-data-layout';
+import topo, { State as topoState } from '@/store/modules/topology';
+import { Component, Vue, Watch } from 'vue-property-decorator';
+import { Action, Getter, Mutation, State } from 'vuex-class';
+import Radial from './radial.vue';
+import TopoChart from './topo-chart.vue';
+import TopoService from './topo-services.vue';
+import TopoDetectPoint from './topo-detect-point.vue';
+import WindowEndpoint from '@/views/containers/topology/window-endpoint.vue';
+import WindowInstance from '@/views/containers/topology/window-instance.vue';
+import WindowTrace from '@/views/containers/topology/window-trace.vue';
+import WindowAlarm from '@/views/containers/topology/window-alarm.vue';
- @Component({
- components: {
- TopoChart, TopoService, Radial, AlarmContainers,
- TraceContainers, InstancesSurveyWindow, EndpointSurveyWindow,
- TopoInstanceDependency, TopoDetectPoint,
- },
- })
- export default class TopoAside extends Vue {
- @State('rocketTopo') private stateTopo!: topoState;
- @State('rocketOption') private stateDashboardOption!: any;
- @Getter('intervalTime') private intervalTime: any;
- @Getter('durationTime') private durationTime: any;
- @Action('rocketTopo/GET_TOPO') private GET_TOPO: any;
- @Action('rocketTopo/CLEAR_TOPO') private CLEAR_TOPO: any;
- @Action('SELECT_SERVICE') private SELECT_SERVICE: any;
- @Mutation('rocketTopo/SET_MODE_STATUS') private SET_MODE_STATUS: any;
- @Action('rocketTopo/CLEAR_TOPO_INFO') private CLEAR_TOPO_INFO: any;
- @Mutation('SET_COMPS_TREE') private SET_COMPS_TREE: any;
- @Mutation('SET_EVENTS') private SET_EVENTS: any;
- @State('rocketDashboard') private rocketDashboard: any;
+@Component({
+ components: {
+ TopoChart,
+ TopoService,
+ Radial,
+ TopoDetectPoint,
+ WindowEndpoint,
+ WindowInstance,
+ WindowTrace,
+ WindowAlarm,
+ },
+})
+export default class TopoAside extends Vue {
+ @State('rocketTopo') private stateTopo!: topoState;
+ @State('rocketOption') private stateDashboardOption!: any;
+ @State('rocketDashboard') private rocketDashboard: any;
+ @Getter('intervalTime') private intervalTime: any;
+ @Getter('durationTime') private durationTime: any;
+ @Action('SELECT_SERVICE') private SELECT_SERVICE: any;
+ @Action('rocketTopo/GET_TOPO') private GET_TOPO: any;
+ @Action('rocketTopo/CLEAR_TOPO') private CLEAR_TOPO: any;
+ @Action('rocketTopo/CLEAR_TOPO_INFO') private CLEAR_TOPO_INFO: any;
+ @Mutation('SET_COMPS_TREE') private SET_COMPS_TREE: any;
+ @Mutation('SET_EVENTS') private SET_EVENTS: any;
+ @Mutation('rocketTopo/SET_MODE_STATUS') private SET_MODE_STATUS: any;
+ private dialogTopoVisible = false;
+ private drawerMainBodyHeight = '100%';
+ private initState = initState;
+ private radioStatus: boolean = false;
+ private show: boolean = true;
- private dialogTopoVisible = false;
- private drawerMainBodyHeight = '100%';
- private initState = initState;
- private radioStatus: boolean = false;
- private show: boolean = true;
-
- private get showServerInfo() {
- return this.stateTopo.currentNode.name && this.stateTopo.currentNode.isReal;
- }
+ private get showServerInfo() {
+ return this.stateTopo.currentNode.name && this.stateTopo.currentNode.isReal;
+ }
- private resize() {
- this.drawerMainBodyHeight = `${document.body.clientHeight - 50}px`;
- }
+ private resize() {
+ this.drawerMainBodyHeight = `${document.body.clientHeight - 50}px`;
+ }
- private created() {
- this.SET_EVENTS([]);
- this.SET_COMPS_TREE(this.initState.tree);
- }
+ private created() {
+ this.SET_EVENTS([]);
+ this.SET_COMPS_TREE(this.initState.tree);
+ }
- private mounted() {
- this.resize();
- window.addEventListener('resize', this.resize);
- }
+ private mounted() {
+ this.resize();
+ window.addEventListener('resize', this.resize);
+ }
- private getTopo() {
- this.GET_TOPO({duration: this.durationTime});
- }
+ private getTopo() {
+ this.GET_TOPO({ duration: this.durationTime });
+ }
- private beforeDestroy() {
- window.removeEventListener('resize', this.resize);
- this.CLEAR_TOPO_INFO();
- this.CLEAR_TOPO();
- this.$store.unregisterModule('rocketTopo');
- }
+ private beforeDestroy() {
+ window.removeEventListener('resize', this.resize);
+ this.CLEAR_TOPO_INFO();
+ this.CLEAR_TOPO();
+ this.$store.unregisterModule('rocketTopo');
+ }
- get types() {
- const result: any = {};
- this.stateTopo.nodes.forEach((i: any) => {
- if (result[i.type]) {
- result[i.type] += 1;
- } else {
- result[i.type] = 1;
- }
- });
- return result;
- }
+ get types() {
+ const result: any = {};
+ this.stateTopo.nodes.forEach((i: any) => {
+ if (result[i.type]) {
+ result[i.type] += 1;
+ } else {
+ result[i.type] = 1;
+ }
+ });
+ return result;
+ }
- @Watch('durationTime')
- private watchDurationTime() {
- this.getTopo();
- }
+ @Watch('durationTime')
+ private watchDurationTime() {
+ this.getTopo();
+ }
- private showRadial() {
- this.radioStatus = !this.radioStatus;
- }
+ private showRadial() {
+ this.radioStatus = !this.radioStatus;
}
+}
</script>
<style lang="scss">
- .link-topo-aside {
- width: 280px;
- position: absolute;
- z-index: 2;
- left: 20px;
- top: 30px;
+.link-topo-aside {
+ width: 280px;
+ position: absolute;
+ z-index: 2;
+ left: 20px;
+ top: 7px;
- .to-apm {
- padding-top: 10px;
- border-top: 1px solid #d8d8d866;
- }
+ .to-apm {
+ padding-top: 10px;
+ border-top: 1px solid #d8d8d866;
}
+}
- .link-topo-aside-btn {
- display: block;
- background: #252a2f9a;
- color: #ddd;
- border-radius: 4px 4px 4px 4px;
- text-align: center;
- padding: 10px;
- z-index: 101;
- }
+.link-topo-aside-btn {
+ display: block;
+ background: #252a2f9a;
+ color: #ddd;
+ border-radius: 4px 4px 4px 4px;
+ text-align: center;
+ padding: 10px;
+ z-index: 101;
+}
- .link-topo-aside-box {
- border-radius: 4px;
- position: absolute;
- width: 280px;
- z-index: 101;
- color: #ddd;
- background-color: #333;
- padding: 15px 20px 10px;
+.link-topo-aside-box {
+ border-radius: 4px;
+ position: absolute;
+ width: 280px;
+ z-index: 101;
+ color: #ddd;
+ background-color: #2b3037;
+ padding: 15px 20px 10px;
- .label {
- display: inline-block;
- width: 40%;
- }
+ .label {
+ display: inline-block;
+ width: 40%;
+ }
- .content {
- vertical-align: top;
- display: inline-block;
- width: 60%;
- }
+ .content {
+ vertical-align: top;
+ display: inline-block;
+ width: 60%;
+ }
- .circle {
- width: 8px;
- height: 8px;
- border-radius: 4px;
- background-color: #EE5B5B;
- margin-top: 6px;
- }
+ .circle {
+ width: 8px;
+ height: 8px;
+ border-radius: 4px;
+ background-color: #ee5b5b;
+ margin-top: 6px;
}
+}
- .link-topo-aside-box {
- p {
- margin-block-start: auto !important;
- margin-block-end: auto !important;
- }
+.link-topo-aside-box {
+ p {
+ margin-block-start: auto !important;
+ margin-block-end: auto !important;
}
+}
+
+.link-topo-aside-box-min {
+ width: 280px;
+ animation: 0.5s linkTopoAsideBoxMin 1 running;
+}
+
+.link-topo-aside-box-max {
+ width: 60%;
+ animation: 0.5s linkTopoAsideBoxMax 1 running;
+}
- .link-topo-aside-box-min {
+@keyframes linkTopoAsideBoxMax {
+ from {
width: 280px;
- animation: 0.5s linkTopoAsideBoxMin 1 running;
}
-
- .link-topo-aside-box-max {
+ to {
width: 60%;
- animation: 0.5s linkTopoAsideBoxMax 1 running;
}
+}
- .performance-metrics-window {
- .el-drawer__header {
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- color: #72767b;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin-bottom: 22px;
- padding: unset;
- }
- }
-
- @keyframes linkTopoAsideBoxMax {
- from {
- width: 280px;
- }
- to {
- width: 60%;
- }
+@keyframes linkTopoAsideBoxMin {
+ from {
+ width: 60%;
}
-
- @keyframes linkTopoAsideBoxMin {
- from {
- width: 60%;
- }
- to {
- width: 280px;
- }
+ to {
+ width: 280px;
}
+}
</style>
diff --git a/src/views/components/topology/topo-date.vue b/src/views/components/topology/topo-date.vue
deleted file mode 100644
index 232c36f..0000000
--- a/src/views/components/topology/topo-date.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-<template>
- <el-date-picker style="top: 87px;left: 40px;position: absolute;"
- v-model="date"
- type="datetimerange"
- start-placeholder="开始日期"
- end-placeholder="结束日期"
- :default-time="['12:00:00']">
- </el-date-picker>
-</template>
-<script lang="js">
-/* eslint-disable */
-export default{
- computed: {
- date: {
- get() {
- return [this.$store.state.rocketbot.duration.start, this.$store.state.rocketbot.duration.end];
- },
- set(value) {
- this.$store.dispatch('SET_DURATION', value);
- },
- },
- },
-};
-</script>
-<style lang="scss">
-</style>
diff --git a/src/views/components/topology/topo-detect-point.vue b/src/views/components/topology/topo-detect-point.vue
index e5021cb..b95ab51 100644
--- a/src/views/components/topology/topo-detect-point.vue
+++ b/src/views/components/topology/topo-detect-point.vue
@@ -1,297 +1,313 @@
-/**
-* Licensed to the Apache Software Foundation (ASF) under one or more
-* contributor license agreements. See the NOTICE file distributed with
-* this work for additional information regarding copyright ownership.
-* The ASF licenses this file to You under the Apache License, Version 2.0
-* (the "License"); you may not use this file except in compliance with
-* the License. You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
<template>
- <div v-if="stateTopo.selectedServiceCall || showServerInfo"
- :class="`link-topo-aside-box link-topo-aside-box-${isMini?'min':'max'}`"
- :style="`top:80px;position: fixed;right: 30px;${showInfoCount === 0 ? 'animation: unset;': ''}`">
+ <div
+ v-if="stateTopo.selectedServiceCall || showServerInfo"
+ :class="`link-topo-aside-box link-topo-aside-box-${isMini ? 'min' : 'max'}`"
+ :style="
+ `top:55px;position: fixed;right: 30px;${
+ showInfoCount === 0 ? 'animation: unset;' : ''
+ }`
+ "
+ >
<svg
- :style="`position:absolute;left:-48px;top:0;transform: rotate(${isMini?0 : 180}deg);`"
- class="link-topo-aside-btn icon cp lg"
- @click="setShowInfo"
+ :style="
+ `position:absolute;left:-48px;top:0;transform: rotate(${
+ isMini ? 0 : 180
+ }deg);`
+ "
+ class="link-topo-aside-btn icon cp lg"
+ @click="setShowInfo"
>
- <use xlink:href="#chevron-left"/>
+ <use xlink:href="#chevron-left" />
</svg>
<div class="mb-5 clear">
<div v-if="stateTopo.selectedServiceCall">
<span class="b dib mr-20 vm">{{ $t('detectPoint') }}</span>
<span
- v-if="stateTopo.detectPoints.indexOf('CLIENT') !== -1"
- :class="{'active':!stateTopo.mode}"
- class="link-topo-aside-box-btn tc r sm cp b"
- @click="setMode(false)"
- >{{ this.$t('client') }}</span>
+ v-if="stateTopo.detectPoints.indexOf('CLIENT') !== -1"
+ :class="{ active: !stateTopo.mode }"
+ class="link-topo-aside-box-btn tc r sm cp b"
+ @click="setMode(false)"
+ >{{ this.$t('client') }}</span
+ >
<span
- v-if="stateTopo.detectPoints.indexOf('SERVER') !== -1"
- :class="{'active':stateTopo.mode}"
- class="link-topo-aside-box-btn tc r sm cp b"
- @click="setMode(true)"
- >{{ this.$t('server') }}</span>
+ v-if="stateTopo.detectPoints.indexOf('SERVER') !== -1"
+ :class="{ active: stateTopo.mode }"
+ class="link-topo-aside-box-btn tc r sm cp b"
+ @click="setMode(true)"
+ >{{ this.$t('server') }}</span
+ >
</div>
- <span v-else-if="showServerInfo" class="b dib mr-20 vm">{{ $t('serviceDetail') }}</span>
+ <span v-else-if="showServerInfo" class="b dib mr-20 vm">{{
+ $t('serviceDetail')
+ }}</span>
</div>
<div v-if="showInfo">
<div v-if="stateTopo.selectedServiceCall">
<TopoChart
- v-if="stateTopo.getResponseTimeTrend.length"
- :data="stateTopo.getResponseTimeTrend"
- :intervalTime="intervalTime"
- :title="$t('avgResponseTime')"
- unit="ms"
+ v-if="stateTopo.getResponseTimeTrend.length"
+ :data="stateTopo.getResponseTimeTrend"
+ :intervalTime="intervalTime"
+ :title="$t('avgResponseTime')"
+ unit="ms"
/>
<TopoChart
- v-if="stateTopo.getThroughputTrend.length"
- :data="stateTopo.getThroughputTrend"
- :intervalTime="intervalTime"
- :title="$t('avgThroughput')"
- unit="cpm"
+ v-if="stateTopo.getThroughputTrend.length"
+ :data="stateTopo.getThroughputTrend"
+ :intervalTime="intervalTime"
+ :title="$t('avgThroughput')"
+ unit="cpm"
/>
<TopoChart
- v-if="stateTopo.getSLATrend.length"
- :data="stateTopo.getSLATrend"
- :intervalTime="intervalTime"
- :precent="true"
- :title="$t('avgSLA')"
- unit="%"
+ v-if="stateTopo.getSLATrend.length"
+ :data="stateTopo.getSLATrend"
+ :intervalTime="intervalTime"
+ :precent="true"
+ :title="$t('avgSLA')"
+ unit="%"
/>
<ChartLine
- v-if="stateTopo.responsePercentile"
- :data="stateTopo.responsePercentile"
- :intervalTime="intervalTime"
- :title="$t('percentResponse')"
+ v-if="stateTopo.responsePercentile"
+ :data="stateTopo.responsePercentile"
+ :intervalTime="intervalTime"
+ :title="$t('percentResponse')"
/>
</div>
<div v-else-if="showServerInfo">
<TopoChart
- v-if="rocketDashboard.serviceResponseTime.ResponseTime.length"
- :data="rocketDashboard.serviceResponseTime.ResponseTime"
- :intervalTime="intervalTime"
- title="Service ResponseTime"
- unit="ms"
+ v-if="rocketDashboard.serviceResponseTime.ResponseTime.length"
+ :data="rocketDashboard.serviceResponseTime.ResponseTime"
+ :intervalTime="intervalTime"
+ title="Service ResponseTime"
+ unit="ms"
/>
<TopoChart
- v-if="rocketDashboard.serviceThroughput.Throughput.length"
- :data="rocketDashboard.serviceThroughput.Throughput"
- :intervalTime="intervalTime"
- title="Service Throughput"
- unit="cpm"
+ v-if="rocketDashboard.serviceThroughput.Throughput.length"
+ :data="rocketDashboard.serviceThroughput.Throughput"
+ :intervalTime="intervalTime"
+ title="Service Throughput"
+ unit="cpm"
/>
<ChartLine
- v-if="rocketDashboard.servicePercent.p50.length"
- :data="rocketDashboard.servicePercent"
- :intervalTime="intervalTime"
- :title="$t('percentResponse')"
+ v-if="rocketDashboard.servicePercent.p50.length"
+ :data="rocketDashboard.servicePercent"
+ :intervalTime="intervalTime"
+ :title="$t('percentResponse')"
/>
</div>
</div>
<div class="show-dependency" v-if="stateTopo.selectedServiceCall">
- <a class="rk-btn lg" @click="openInstanceModal">{{$t('ShowInstanceDependency')}}</a>
- <el-drawer
- custom-class="instance-dependency"
- size="1200px"
- :title="`${stateTopo.selectedServiceCall.source.name} -> ${stateTopo.selectedServiceCall.target.name} Instance Dependency`"
- :visible.sync="dialogTopoVisible"
- :modal-append-to-body="false"
- :close-on-click-modal="false"
- :destroy-on-close="true"
- :before-close="clearInstance"
+ <a class="rk-btn lg" @click="openInstanceModal">{{
+ $t('ShowInstanceDependency')
+ }}</a>
+ <rk-sidebox
+ class="instance-dependency"
+ width="100%"
+ :title="
+ `${stateTopo.selectedServiceCall.source.name} -> ${stateTopo.selectedServiceCall.target.name} Instance Dependency`
+ "
+ :show.sync="dialogTopoVisible"
>
- <div class="title-name">{{stateTopo.selectedServiceCall.source.name}} ->
- {{stateTopo.selectedServiceCall.target.name}} Instance Dependency
- </div>
- <TopoInstanceDependency/>
- </el-drawer>
+ <TopoInstanceDependency />
+ </rk-sidebox>
</div>
</div>
</template>
<script lang="ts">
+import { State as topoState } from '@/store/modules/topology';
+import { Component, Vue, Watch } from 'vue-property-decorator';
+import { Action, Getter, Mutation, State } from 'vuex-class';
+import TopoChart from './topo-chart.vue';
+import TopoInstanceDependency from './topo-instance-dependency.vue';
+import ChartLine from './chart-line.vue';
- import { State as topoState } from '@/store/modules/topology';
- import { Component, Vue, Watch } from 'vue-property-decorator';
- import { Action, Getter, Mutation, State } from 'vuex-class';
- import TopoChart from './topo-chart.vue';
- import TopoInstanceDependency from './topo-instance-dependency.vue';
- import ChartLine from './chart-line.vue';
+@Component({
+ components: {
+ TopoInstanceDependency,
+ TopoChart,
+ ChartLine,
+ },
+})
+export default class TopoDetectPoint extends Vue {
+ @State('rocketTopo') private stateTopo!: topoState;
+ @Getter('intervalTime') private intervalTime: any;
+ @Getter('durationTime') private durationTime: any;
+ @Action('MIXHANDLE_CHANGE_GROUP_WITH_CURRENT')
+ private MIXHANDLE_CHANGE_GROUP_WITH_CURRENT: any;
+ @Action('MIXHANDLE_GET_OPTION') private MIXHANDLE_GET_OPTION: any;
+ @Action('GET_QUERY') private GET_QUERY: any;
+ @Mutation('rocketTopo/SET_MODE_STATUS') private SET_MODE_STATUS: any;
+ @State('rocketDashboard') private rocketDashboard: any;
+ @Mutation('rocketTopo/SET_SELECTED_INSTANCE_CALL')
+ private SET_SELECTED_INSTANCE_CALL: any;
+ @Mutation('rocketTopo/SET_INSTANCE_DEPENDENCY')
+ private SET_INSTANCE_DEPENDENCY: any;
+ @Action('rocketTopo/CLEAR_TOPO_INFO') private CLEAR_TOPO_INFO: any;
+ @Action('rocketTopo/GET_TOPO_INSTANCE_DEPENDENCY')
+ private GET_INSTANCE_DEPENDENCY: any;
- @Component({
- components: {
- TopoInstanceDependency, TopoChart, ChartLine,
- },
- })
- export default class TopoDetectPoint extends Vue {
- @State('rocketTopo') private stateTopo!: topoState;
- @Getter('intervalTime') private intervalTime: any;
- @Getter('durationTime') private durationTime: any;
- @Action('MIXHANDLE_CHANGE_GROUP_WITH_CURRENT') private MIXHANDLE_CHANGE_GROUP_WITH_CURRENT: any;
- @Action('MIXHANDLE_GET_OPTION') private MIXHANDLE_GET_OPTION: any;
- @Action('GET_QUERY') private GET_QUERY: any;
- @Mutation('rocketTopo/SET_MODE_STATUS') private SET_MODE_STATUS: any;
- @State('rocketDashboard') private rocketDashboard: any;
- @Mutation('rocketTopo/SET_SELECTED_INSTANCE_CALL') private SET_SELECTED_INSTANCE_CALL: any;
- @Mutation('rocketTopo/SET_INSTANCE_DEPENDENCY') private SET_INSTANCE_DEPENDENCY: any;
- @Action('rocketTopo/CLEAR_TOPO_INFO') private CLEAR_TOPO_INFO: any;
- @Action('rocketTopo/GET_TOPO_INSTANCE_DEPENDENCY') private GET_INSTANCE_DEPENDENCY: any;
+ private isMini: boolean = true;
+ private showInfoCount: number = 0;
+ private showInfo: boolean = false;
+ private dialogTopoVisible = false;
- private isMini: boolean = true;
- private showInfoCount: number = 0;
- private showInfo: boolean = false;
- private dialogTopoVisible = false;
-
- private get showServerInfo() {
- return this.stateTopo.currentNode.name && this.stateTopo.currentNode.isReal;
- }
+ private get showServerInfo() {
+ return this.stateTopo.currentNode.name && this.stateTopo.currentNode.isReal;
+ }
- @Watch('stateTopo.selectedServiceCall')
- private watchDetectPointNodeId(newValue: string) {
- if (newValue || this.stateTopo.currentNode.isReal) {
- this.showInfo = true;
- } else {
- this.showInfo = false;
- this.showInfoCount = 0;
- this.isMini = true;
- }
+ @Watch('stateTopo.selectedServiceCall')
+ private watchDetectPointNodeId(newValue: string) {
+ if (newValue || this.stateTopo.currentNode.isReal) {
+ this.showInfo = true;
+ } else {
+ this.showInfo = false;
+ this.showInfoCount = 0;
+ this.isMini = true;
}
+ }
- @Watch('stateTopo.currentNode.name')
- private watchCurrentNodeIsReal(newValue: boolean) {
- const service = this.stateTopo.currentNode;
- if (this.stateTopo.currentNode.isReal) {
- this.MIXHANDLE_CHANGE_GROUP_WITH_CURRENT({index: 0, current: 1});
- this.MIXHANDLE_GET_OPTION({compType: 'service', duration: this.durationTime})
- .then(() => {
- this.GET_QUERY({
- serviceId: service.id || '',
- duration: this.durationTime,
- });
- });
- }
- if (newValue || this.stateTopo.selectedServiceCall) {
- this.showInfo = true;
- } else {
- this.showInfo = false;
- this.showInfoCount = 0;
- this.isMini = true;
- }
+ @Watch('stateTopo.currentNode.name')
+ private watchCurrentNodeIsReal(newValue: boolean) {
+ const service = this.stateTopo.currentNode;
+ if (this.stateTopo.currentNode.isReal) {
+ this.MIXHANDLE_CHANGE_GROUP_WITH_CURRENT({ index: 0, current: 1 });
+ this.MIXHANDLE_GET_OPTION({
+ compType: 'service',
+ duration: this.durationTime,
+ }).then(() => {
+ this.GET_QUERY({
+ serviceId: service.id || '',
+ duration: this.durationTime,
+ });
+ });
}
-
- private setShowInfo() {
+ if (newValue || this.stateTopo.selectedServiceCall) {
+ this.showInfo = true;
+ } else {
this.showInfo = false;
- this.showInfoCount = 1;
- this.isMini = !this.isMini;
- setTimeout(() => {
- this.showInfo = true;
- }, 550);
+ this.showInfoCount = 0;
+ this.isMini = true;
}
+ }
- private setMode(mode: boolean) {
- this.SET_MODE_STATUS(mode);
- this.stateTopo.callback();
- }
+ private setShowInfo() {
+ this.showInfo = false;
+ this.showInfoCount = 1;
+ this.isMini = !this.isMini;
+ setTimeout(() => {
+ this.showInfo = true;
+ }, 550);
+ }
- private clearInstance() {
- this.dialogTopoVisible = false;
- this.SET_SELECTED_INSTANCE_CALL(null);
- }
+ private setMode(mode: boolean) {
+ this.SET_MODE_STATUS(mode);
+ this.stateTopo.callback();
+ }
- private openInstanceModal() {
- this.dialogTopoVisible = true;
- if (!(this.stateTopo.selectedServiceCall && this.stateTopo.selectedServiceCall.source)) {
- return;
- }
- this.GET_INSTANCE_DEPENDENCY({
- serverServiceId: this.stateTopo.selectedServiceCall.source.id,
- clientServiceId: this.stateTopo.selectedServiceCall.target.id,
- duration: this.durationTime,
- });
- }
+ private clearInstance() {
+ this.dialogTopoVisible = false;
+ this.SET_SELECTED_INSTANCE_CALL(null);
}
+ private openInstanceModal() {
+ this.dialogTopoVisible = true;
+ if (
+ !(
+ this.stateTopo.selectedServiceCall &&
+ this.stateTopo.selectedServiceCall.source
+ )
+ ) {
+ return;
+ }
+ this.GET_INSTANCE_DEPENDENCY({
+ serverServiceId: this.stateTopo.selectedServiceCall.source.id,
+ clientServiceId: this.stateTopo.selectedServiceCall.target.id,
+ duration: this.durationTime,
+ });
+ }
+}
</script>
<style lang="scss">
- .link-topo-aside-box-btn {
- color: #626977;
- border: 1px solid;
- padding: 0px 3px;
- width: 45px;
- display: inline-block;
+.link-topo-aside-box-btn {
+ color: #626977;
+ border: 1px solid;
+ padding: 0px 3px;
+ width: 45px;
+ display: inline-block;
- &.active {
- color: #448dfe;
- }
+ &.active {
+ color: #448dfe;
}
+}
- .show-dependency {
- margin: 20px 0;
+.show-dependency {
+ margin: 20px 0;
- .rk-btn {
- display: block;
- text-align: center;
- }
+ .rk-btn {
+ display: block;
+ text-align: center;
+ }
- .instance-dependency {
- background: #333;
+ .instance-dependency {
+ .rk-sidebox{
+ background: #2b3037;
outline: none;
-
- .el-drawer__header {
- color: #fff;
- padding: 0;
- }
}
-
- .title-name {
- width: 100%;
- padding-left: 40px;
- font-size: 16px;
+ .rk-sidebox-inner{
+ height: 100%;
}
}
- .link-topo-aside-box {
- border-radius: 4px;
- position: absolute;
- width: 280px;
- z-index: 101;
- color: #ddd;
- background-color: #333;
- padding: 15px 20px 10px;
+ .title-name {
+ width: 100%;
+ padding-left: 40px;
+ font-size: 16px;
+ }
+}
- .label {
- display: inline-block;
- width: 40%;
- }
+.link-topo-aside-box {
+ border-radius: 4px;
+ position: absolute;
+ width: 280px;
+ z-index: 101;
+ color: #ddd;
+ background-color: #2b3037;
+ padding: 15px 20px 10px;
- .content {
- vertical-align: top;
- display: inline-block;
- width: 60%;
- }
+ .label {
+ display: inline-block;
+ width: 40%;
+ }
- .circle {
- width: 8px;
- height: 8px;
- border-radius: 4px;
- background-color: #EE5B5B;
- margin-top: 6px;
- }
+ .content {
+ vertical-align: top;
+ display: inline-block;
+ width: 60%;
}
- .link-topo-aside-box {
- p {
- margin-block-start: auto !important;
- margin-block-end: auto !important;
- }
+ .circle {
+ width: 8px;
+ height: 8px;
+ border-radius: 4px;
+ background-color: #ee5b5b;
+ margin-top: 6px;
+ }
+}
+
+.link-topo-aside-box {
+ p {
+ margin-block-start: auto !important;
+ margin-block-end: auto !important;
}
+}
</style>
diff --git a/src/views/components/topology/topo-instance-dependency.vue b/src/views/components/topology/topo-instance-dependency.vue
index c32d8f5..a8e8970 100644
--- a/src/views/components/topology/topo-instance-dependency.vue
+++ b/src/views/components/topology/topo-instance-dependency.vue
@@ -125,7 +125,8 @@ export default class TopoInstanceDependency extends Vue {
.rk-instance-dependency-metrics {
width: 320px;
height: 650px;
- background: #111;
+ margin-top: 10px;
+ background: #252a2f;
padding: 20px;
}
.rk-dependency-chart {
diff --git a/src/views/components/topology/topo.vue b/src/views/components/topology/topo.vue
index 66b3061..b764b07 100644
--- a/src/views/components/topology/topo.vue
+++ b/src/views/components/topology/topo.vue
@@ -286,8 +286,8 @@ export default {
this.lineNode = this.link.append('rect').attr('class', 'link-node cp')
.attr('width', 10)
.attr('height', 10)
- .attr('rx', 3)
- .attr('ry', 3)
+ .attr('rx', 5)
+ .attr('ry', 5)
.attr('fill', d => d.cpm ? '#217EF299' : '#6a6d7799')
.on('click', function(d, i) {
that.clickLinkNodes(d, this);
diff --git a/src/views/containers/topology/topology.vue b/src/views/containers/topology/topology.vue
index 0918abe..2cd1559 100644
--- a/src/views/containers/topology/topology.vue
+++ b/src/views/containers/topology/topology.vue
@@ -26,11 +26,10 @@ import { Vue, Component } from 'vue-property-decorator';
import { State, Action, Getter, Mutation } from 'vuex-class';
import { AxiosResponse } from 'axios';
import Topo from '../../components/topology/topo.vue';
-import TopoDate from '../../components/topology/topo-date.vue';
import TopoAside from '../../components/topology/topo-aside.vue';
import topo, { State as topoState} from '@/store/modules/topology';
-@Component({components: {Topo, TopoAside, TopoDate}})
+@Component({components: {Topo, TopoAside}})
export default class Topology extends Vue {
@State('rocketTopo') private stateTopo!: topoState;
@Mutation('SET_EVENTS') private SET_EVENTS: any;
diff --git a/src/views/containers/topology/window-alarm.vue b/src/views/containers/topology/window-alarm.vue
new file mode 100644
index 0000000..fd472cc
--- /dev/null
+++ b/src/views/containers/topology/window-alarm.vue
@@ -0,0 +1,71 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+<template>
+ <rk-sidebox
+ :show.sync="isShowSync"
+ :fixed="true"
+ width="80%">
+ <div class="rk-alarm flex-v">
+ <AlarmTool :durationTime="durationTime" :total="rocketAlarm.total" :alarmScope="alarmScope" :inTopo="inTopo" :prop-keyword="keyword"/>
+ <div style="flex-grow: 1;overflow: auto;height: 100%;">
+ <AlarmTable :data="rocketAlarm.alarmService"/>
+ </div>
+ </div>
+ </rk-sidebox>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import alarm from '@/store/modules/alarm';
+import { Prop, PropSync } from 'vue-property-decorator';
+import AlarmTool from '../../components/alarm/alarm-tool.vue';
+import AlarmTable from '../../components/alarm/alarm-table.vue';
+import { State, Action, Getter } from 'vuex-class';
+
+@Component({
+ components: { AlarmTool, AlarmTable },
+})
+export default class WindowAlarm extends Vue {
+ @State('rocketAlarm') private rocketAlarm!: any;
+ @Getter('durationTime') private durationTime: any;
+ @PropSync('isShow', { default: false })
+ private isShowSync!: boolean;
+ @Prop({default: () => ({label: 'All', key: ''})})
+ private alarmScope: any;
+ @Prop({default: false, type: Boolean})
+ private inTopo!: boolean;
+ @Prop({default: ''})
+ private keyword!: string;
+ private beforeCreate() {
+ this.$store.registerModule('rocketAlarm', alarm);
+ }
+ private beforeDestroy() {
+ this.$store.unregisterModule('rocketAlarm');
+
+ }
+}
+</script>
+
+<style lang="scss">
+.rk-alarm {
+ flex-grow: 1;
+ height: 100%;
+ min-height: 0;
+}
+</style>
diff --git a/src/views/containers/topology/endpoint-survey-window.vue b/src/views/containers/topology/window-endpoint.vue
similarity index 81%
rename from src/views/containers/topology/endpoint-survey-window.vue
rename to src/views/containers/topology/window-endpoint.vue
index c699735..c5e0768 100644
--- a/src/views/containers/topology/endpoint-survey-window.vue
+++ b/src/views/containers/topology/window-endpoint.vue
@@ -16,27 +16,23 @@
*/
<template>
- <div class="performance-metrics-window">
- <el-drawer
- :destroy-on-close="true"
- :visible.sync="isShowSync"
- :modal-append-to-body="false"
- direction="rtl"
- size="80%">
- <div class="rk-dashboard-bar flex-h">
- <ToolBarSelect
- :selectable="false"
- :title="this.$t('currentService')"
- :current="stateDashboardOption.currentService"
- :data="stateDashboardOption.services"
- icon="package"/>
- <ToolBarEndpointSelect @onChoose="selectEndpoint" :title="$t('currentEndpoint')"
- :current="stateDashboardOption.currentEndpoint" :data="endpoints" icon="code">
- </ToolBarEndpointSelect>
- </div>
- <endpoints-survey v-if="!rocketComps.loading" :style="`overflow: auto; height: ${endpointsSurveyHeight}`" />
- </el-drawer>
- </div>
+ <rk-sidebox
+ :show.sync="isShowSync"
+ :fixed="true"
+ width="80%">
+ <div class="rk-dashboard-bar flex-h">
+ <ToolBarSelect
+ :selectable="false"
+ :title="this.$t('currentService')"
+ :current="stateDashboardOption.currentService"
+ :data="stateDashboardOption.services"
+ icon="package"/>
+ <ToolBarEndpointSelect @onChoose="selectEndpoint" :title="$t('currentEndpoint')"
+ :current="stateDashboardOption.currentEndpoint" :data="endpoints" icon="code">
+ </ToolBarEndpointSelect>
+ </div>
+ <endpoints-survey v-if="!rocketComps.loading" :style="`overflow: auto; height: ${endpointsSurveyHeight}`" />
+ </rk-sidebox>
</template>
<script lang="ts">
@@ -61,7 +57,7 @@
ToolBarEndpointSelect,
},
})
- export default class InstancesSurveyWindow extends Vue {
+ export default class WindowEndpoint extends Vue {
@State('rocketOption') private stateDashboardOption!: any;
@State('rocketData') private rocketComps!: any;
@Getter('durationTime') private durationTime: any;
diff --git a/src/views/containers/topology/instances-survey-window.vue b/src/views/containers/topology/window-instance.vue
similarity index 80%
rename from src/views/containers/topology/instances-survey-window.vue
rename to src/views/containers/topology/window-instance.vue
index bd17a05..ecd56f6 100644
--- a/src/views/containers/topology/instances-survey-window.vue
+++ b/src/views/containers/topology/window-instance.vue
@@ -16,29 +16,24 @@
*/
<template>
- <div class="performance-metrics-window">
- <el-drawer
- :destroy-on-close="true"
- title="Instances"
- :visible.sync="isShowSync"
- direction="rtl"
- :modal-append-to-body="false"
- size="80%">
- <div class="rk-dashboard-bar flex-h">
- <ToolBarSelect
- :selectable="false"
- :title="this.$t('currentService')"
- :current="stateDashboardOption.currentService"
- :data="stateDashboardOption.services" icon="package"/>
- <ToolBarSelect
- @onChoose="selectInstance"
- :title="$t('currentInstance')"
- :current="stateDashboardOption.currentInstance"
- :data="instances" icon="disk"/>
- </div>
- <instances-survey v-if="isShowSync" :style="`overflow: auto; height: ${instancesSurveyHeight}`" />
- </el-drawer>
- </div>
+ <rk-sidebox
+ :show.sync="isShowSync"
+ :fixed="true"
+ width="80%">
+ <div class="rk-dashboard-bar flex-h">
+ <ToolBarSelect
+ :selectable="false"
+ :title="this.$t('currentService')"
+ :current="stateDashboardOption.currentService"
+ :data="stateDashboardOption.services" icon="package"/>
+ <ToolBarSelect
+ @onChoose="selectInstance"
+ :title="$t('currentInstance')"
+ :current="stateDashboardOption.currentInstance"
+ :data="instances" icon="disk"/>
+ </div>
+ <instances-survey v-if="isShowSync" :style="`overflow: auto; height: ${instancesSurveyHeight}`" />
+ </rk-sidebox>
</template>
<script lang="ts">
@@ -63,7 +58,7 @@
ToolBarEndpointSelect,
},
})
- export default class InstancesSurveyWindow extends Vue {
+ export default class WindowInstance extends Vue {
@State('rocketOption') private stateDashboardOption!: any;
@State('rocketData') private rocketComps!: any;
@Getter('durationTime') private durationTime: any;
diff --git a/src/views/containers/topology/topology-trace.vue b/src/views/containers/topology/window-trace.vue
similarity index 79%
rename from src/views/containers/topology/topology-trace.vue
rename to src/views/containers/topology/window-trace.vue
index 5b2bb59..6e21726 100644
--- a/src/views/containers/topology/topology-trace.vue
+++ b/src/views/containers/topology/window-trace.vue
@@ -16,18 +16,23 @@
*/
<template>
- <div class="rk-trace flex-v">
- <TraceSearch :propsService="service" :inTopo="inTopo"/>
- <div class="rk-trace-inner">
- <TraceTable/>
- <TraceDetail :current="stateTrace.currentTrace" :spans="stateTrace.traceSpans"/>
+ <rk-sidebox
+ :show.sync="isShowSync"
+ :fixed="true"
+ width="80%">
+ <div class="rk-trace flex-v">
+ <TraceSearch :propsService="service" :inTopo="inTopo"/>
+ <div class="rk-trace-inner">
+ <TraceTable/>
+ <TraceDetail :current="stateTrace.currentTrace" :spans="stateTrace.traceSpans"/>
+ </div>
</div>
- </div>
+ </rk-sidebox>
</template>
<script lang="ts">
import { Option } from '@/types/global';
-import { Component, Vue, Prop } from 'vue-property-decorator';
+import { Component, Vue, Prop, PropSync } from 'vue-property-decorator';
import { State, Action, Mutation } from 'vuex-class';
import TraceSearch from '@/views/components/trace/trace-search.vue';
import TraceTable from '@/views/components/trace/trace-table.vue';
@@ -38,12 +43,13 @@ import trace from '../../../store/modules/trace';
TraceTable, TraceDetail, TraceSearch,
},
})
-export default class Trace extends Vue {
+export default class WindowTrace extends Vue {
@State('rocketTrace') private stateTrace!: any;
@Mutation('SET_EVENTS') private SET_EVENTS: any;
@Action('rocketTrace/GET_TRACELIST') private GET_TRACELIST: any;
@Action('rocketTrace/GET_TRACE_SPANS') private GET_TRACE_SPANS: any;
-
+ @PropSync('isShow', { default: false })
+ private isShowSync!: boolean;
@Prop({default: {label: 'All', key: ''}})
private service!: Option;