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 03:40:03 UTC
[skywalking-rocketbot-ui] branch master updated: Bug: Fix bug#4195
(#244)
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 bcba18d Bug: Fix bug#4195 (#244)
bcba18d is described below
commit bcba18d26f8645d7f11425f7f1f6ccbb6e735a2a
Author: Allen Wang <Al...@outlook.com>
AuthorDate: Mon Jan 13 11:39:57 2020 +0800
Bug: Fix bug#4195 (#244)
---
src/router.ts | 2 +-
src/views/components/topology/topo-aside.vue | 6 +-
src/views/components/trace/trace-search.vue | 568 ++++++++++++---------
.../{ => topology}/endpoint-survey-window.vue | 0
.../{ => topology}/instances-survey-window.vue | 0
.../{trace.vue => topology/topology-trace.vue} | 4 +-
src/views/containers/{ => topology}/topology.vue | 6 +-
src/views/containers/trace.vue | 49 +-
8 files changed, 343 insertions(+), 292 deletions(-)
diff --git a/src/router.ts b/src/router.ts
index 7df8dfd..b36aa46 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -21,7 +21,7 @@ import Router from 'vue-router';
import Index from './views/containers/index.vue';
import Dashboard from './views/containers/dashboard.vue';
import Trace from './views/containers/trace.vue';
-import Topology from './views/containers/topology.vue';
+import Topology from './views/containers/topology/topology.vue';
import Alarm from './views/containers/alarm.vue';
import Comparison from './views/containers/comparison.vue';
diff --git a/src/views/components/topology/topo-aside.vue b/src/views/components/topology/topo-aside.vue
index 4147854..8d4255f 100644
--- a/src/views/components/topology/topo-aside.vue
+++ b/src/views/components/topology/topo-aside.vue
@@ -103,9 +103,9 @@
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/endpoint-survey-window.vue';
- import InstancesSurveyWindow from '@/views/containers/instances-survey-window.vue';
- import TraceContainers from '@/views/containers/trace.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';
diff --git a/src/views/components/trace/trace-search.vue b/src/views/components/trace/trace-search.vue
index 80f55aa..e5ab4b2 100644
--- a/src/views/components/trace/trace-search.vue
+++ b/src/views/components/trace/trace-search.vue
@@ -1,26 +1,23 @@
-/**
-* 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-trace-search">
<div>
<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);`">
+ <span class="mr-5 vm">{{ this.$t('more') }}</span>
+ <svg
+ class="icon trans vm"
+ :style="`transform: rotate(${status ? 180 : 0}deg);`"
+ >
<use xlink:href="#arrow-down"></use>
</svg>
</a>
@@ -28,300 +25,361 @@
<svg class="icon mr-5 vm">
<use xlink:href="#search"></use>
</svg>
- <span class="vm">{{this.$t('search')}}</span>
+ <span class="vm">{{ this.$t('search') }}</span>
</a>
<a class="rk-trace-clear-btn r mr-10" @click="clearSearch">
<svg class="icon mr-5 vm">
<use xlink:href="#clear"></use>
</svg>
- <span class="vm">{{this.$t('clear')}}</span>
+ <span class="vm">{{ this.$t('clear') }}</span>
</a>
<div class="flex-h">
- <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"/>
- <TraceSelect :title="this.$t('status')" :value="traceState" @input="chooseStatus"
- :data="[{label:'All', key: 'ALL'}, {label:'Success', key: 'SUCCESS'}, {label:'Error', key: 'ERROR'}]"/>
+ <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"
+ />
+ <TraceSelect
+ :title="this.$t('status')"
+ :value="traceState"
+ @input="chooseStatus"
+ :data="[
+ { label: 'All', key: 'ALL' },
+ { label: 'Success', key: 'SUCCESS' },
+ { label: 'Error', key: 'ERROR' }
+ ]"
+ />
<div class="mr-10" style="padding: 3px 15px 0">
- <div class="sm grey">{{this.$t('endpointName')}}</div>
- <input type="text" v-model="endpointName" class="rk-trace-search-input">
+ <div class="sm grey">{{ this.$t('endpointName') }}</div>
+ <input
+ type="text"
+ v-model="endpointName"
+ class="rk-trace-search-input"
+ />
</div>
</div>
</div>
<div class="rk-trace-search-more flex-h" v-show="status">
<div class="mr-15">
- <span class="sm b grey mr-10">{{this.$t('traceID')}}:</span>
- <input type="text" v-model="traceId" class="rk-trace-search-input dib">
+ <span class="sm b grey mr-10">{{ this.$t('traceID') }}:</span>
+ <input
+ type="text"
+ v-model="traceId"
+ class="rk-trace-search-input dib"
+ />
</div>
<div class="mr-15">
- <span class="sm b grey mr-10">{{this.$t('duration')}}:</span>
+ <span class="sm b grey mr-10">{{ this.$t('duration') }}:</span>
<div class="rk-trace-search-range dib">
- <input class="vm tc" v-model="minTraceDuration">
+ <input class="vm tc" v-model="minTraceDuration" />
<span class="grey vm">-</span>
- <input class="vm tc" v-model="maxTraceDuration">
+ <input class="vm tc" v-model="maxTraceDuration" />
</div>
</div>
<div>
- <span class="sm b grey mr-5">{{this.$t('timeRange')}}:</span>
- <RkDate class="sm" v-model="time" position="bottom" format="YYYY-MM-DD HH:mm:ss"/>
+ <span class="sm b grey mr-5">{{ this.$t('timeRange') }}:</span>
+ <RkDate
+ class="sm"
+ v-model="time"
+ position="bottom"
+ format="YYYY-MM-DD HH:mm:ss"
+ />
</div>
</div>
</div>
</template>
<script lang="ts">
- import { Duration, Option } from '@/types/global';
- import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
- import { Action, Getter, Mutation, State } from 'vuex-class';
- import TraceSelect from './trace-select.vue';
+import { Duration, Option } from '@/types/global';
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import { Action, Getter, Mutation, State } from 'vuex-class';
+import TraceSelect from './trace-select.vue';
- @Component({components: {TraceSelect}})
- export default class TraceSearch extends Vue {
- @State('rocketbot') private rocketbotGlobal: any;
- @State('rocketTrace') private rocketTrace: any;
- @Getter('durationTime') private durationTime: any;
- @Getter('duration') private duration: any;
- @Action('RESET_DURATION') private RESET_DURATION: any;
- @Action('rocketTrace/GET_SERVICES') private GET_SERVICES: any;
- @Action('rocketTrace/GET_INSTANCES') private GET_INSTANCES: any;
- @Action('rocketTrace/GET_TRACELIST') private GET_TRACELIST: any;
- @Action('rocketTrace/SET_TRACE_FORM') private SET_TRACE_FORM: any;
- @Mutation('rocketTrace/SET_TRACE_FORM_ITEM') private SET_TRACE_FORM_ITEM: any;
+@Component({ components: { TraceSelect } })
+export default class TraceSearch extends Vue {
+ @State('rocketbot') private rocketbotGlobal: any;
+ @State('rocketTrace') private rocketTrace: any;
+ @Getter('durationTime') private durationTime: any;
+ @Getter('duration') private duration: any;
+ @Action('RESET_DURATION') private RESET_DURATION: any;
+ @Action('rocketTrace/GET_SERVICES') private GET_SERVICES: any;
+ @Action('rocketTrace/GET_INSTANCES') private GET_INSTANCES: any;
+ @Action('rocketTrace/GET_TRACELIST') private GET_TRACELIST: any;
+ @Action('rocketTrace/SET_TRACE_FORM') private SET_TRACE_FORM: any;
+ @Mutation('rocketTrace/SET_TRACE_FORM_ITEM') private SET_TRACE_FORM_ITEM: any;
+ @Prop({ default: false, type: Boolean })
+ private inTopo!: boolean;
+ @Prop({ default: { label: 'All', key: '' } })
+ private propsService!: Option;
+ private service: Option = {label: 'All', key: ''};
+ private time!: Date[];
+ private status: boolean = true;
+ private maxTraceDuration: string =
+ localStorage.getItem('maxTraceDuration') || '';
+ private minTraceDuration: string =
+ localStorage.getItem('minTraceDuration') || '';
+ private instance: Option = { label: 'All', key: '' };
+ private endpointName: string = localStorage.getItem('endpointName') || '';
+ private traceId: string = localStorage.getItem('traceId') || '';
+ private traceState: Option = { label: 'All', key: 'ALL' };
- private time!: Date[];
- private status: boolean = true;
- private maxTraceDuration: string = localStorage.getItem('maxTraceDuration') || '';
- private minTraceDuration: string = localStorage.getItem('minTraceDuration') || '';
- @Prop({default: {label: 'All', key: ''}})
- private service!: Option;
- private instance: Option = {label: 'All', key: ''};
- private endpointName: string = localStorage.getItem('endpointName') || '';
- private traceId: string = localStorage.getItem('traceId') || '';
- private traceState: Option = {label: 'All', key: 'ALL'};
- @Prop({default: false, type: Boolean})
- private inTopo!: boolean;
-
- private dateFormat = (date: Date, step: string) => {
- const year = date.getFullYear();
- const monthTemp = date.getMonth() + 1;
- let month: string = `${monthTemp}`;
- if (monthTemp < 10) {
- month = `0${monthTemp}`;
- }
- if (step === 'MONTH') {
- return `${year}-${month}`;
- }
- const dayTemp = date.getDate();
- let day: string = `${dayTemp}`;
- if (dayTemp < 10) {
- day = `0${dayTemp}`;
- }
- if (step === 'DAY') {
- return `${year}-${month}-${day}`;
- }
- const hourTemp = date.getHours();
- let hour: string = `${hourTemp}`;
- if (hourTemp < 10) {
- hour = `0${hourTemp}`;
- }
- if (step === 'HOUR') {
- return `${year}-${month}-${day} ${hour}`;
- }
- const minuteTemp = date.getMinutes();
- let minute: string = `${minuteTemp}`;
- if (minuteTemp < 10) {
- minute = `0${minuteTemp}`;
- }
- if (step === 'MINUTE') {
- return `${year}-${month}-${day} ${hour}${minute}`;
- }
+ private dateFormat = (date: Date, step: string) => {
+ const year = date.getFullYear();
+ const monthTemp = date.getMonth() + 1;
+ let month: string = `${monthTemp}`;
+ if (monthTemp < 10) {
+ month = `0${monthTemp}`;
}
-
- private globalTimeFormat = (time: Date[]): any => {
- let step = 'MINUTE';
- const unix = Math.round(time[1].getTime()) - Math.round(time[0].getTime());
- if (unix <= 60 * 60 * 1000) {
- step = 'MINUTE';
- } else if (unix <= 24 * 60 * 60 * 1000) {
- step = 'HOUR';
- } else if (unix <= 30 * 24 * 60 * 60 * 1000) {
- step = 'DAY';
- } else {
- step = 'MONTH';
- }
- return {start: this.dateFormat(time[0], step), end: this.dateFormat(time[1], step), step};
+ if (step === 'MONTH') {
+ return `${year}-${month}`;
+ }
+ const dayTemp = date.getDate();
+ let day: string = `${dayTemp}`;
+ if (dayTemp < 10) {
+ day = `0${dayTemp}`;
+ }
+ if (step === 'DAY') {
+ return `${year}-${month}-${day}`;
+ }
+ const hourTemp = date.getHours();
+ let hour: string = `${hourTemp}`;
+ if (hourTemp < 10) {
+ hour = `0${hourTemp}`;
+ }
+ if (step === 'HOUR') {
+ return `${year}-${month}-${day} ${hour}`;
}
+ const minuteTemp = date.getMinutes();
+ let minute: string = `${minuteTemp}`;
+ if (minuteTemp < 10) {
+ minute = `0${minuteTemp}`;
+ }
+ if (step === 'MINUTE') {
+ return `${year}-${month}-${day} ${hour}${minute}`;
+ }
+ }
- private chooseService(i: any) {
- if (this.service.key === i.key) {
- return;
- }
- this.instance = {label: 'All', key: ''};
- this.service = i;
- if (i.key === '') {
- return;
- }
- this.GET_INSTANCES({duration: this.durationTime, serviceId: i.key});
+ private globalTimeFormat = (time: Date[]): any => {
+ let step = 'MINUTE';
+ const unix = Math.round(time[1].getTime()) - Math.round(time[0].getTime());
+ if (unix <= 60 * 60 * 1000) {
+ step = 'MINUTE';
+ } else if (unix <= 24 * 60 * 60 * 1000) {
+ step = 'HOUR';
+ } else if (unix <= 30 * 24 * 60 * 60 * 1000) {
+ step = 'DAY';
+ } else {
+ step = 'MONTH';
}
+ return {
+ start: this.dateFormat(time[0], step),
+ end: this.dateFormat(time[1], step),
+ step,
+ };
+ }
- private chooseStatus(i: any) {
- this.traceState = i;
+ private chooseService(i: any) {
+ if (this.service.key === i.key) {
+ return;
+ }
+ this.instance = { label: 'All', key: '' };
+ this.service = i;
+ if (i.key === '') {
+ return;
}
+ this.GET_INSTANCES({ duration: this.durationTime, serviceId: i.key });
+ }
- private getTraceList() {
- this.GET_SERVICES({duration: this.durationTime});
- const temp: any = {
- queryDuration: this.globalTimeFormat([
- new Date(this.time[0].getTime() +
- (parseInt(this.rocketbotGlobal.utc, 10) + new Date().getTimezoneOffset() / 60) * 3600000),
- new Date(this.time[1].getTime() +
- (parseInt(this.rocketbotGlobal.utc, 10) + new Date().getTimezoneOffset() / 60) * 3600000),
- ]),
- traceState: this.traceState.key,
- paging: {pageNum: 1, pageSize: 15, needTotal: true},
- queryOrder: this.rocketTrace.traceForm.queryOrder,
- };
+ private chooseStatus(i: any) {
+ this.traceState = i;
+ }
- if (this.service.key) {
- temp.serviceId = this.service.key;
- }
- if (this.instance.key) {
- temp.serviceInstanceId = this.instance.key;
- }
- if (this.maxTraceDuration) {
- temp.maxTraceDuration = this.maxTraceDuration;
- localStorage.setItem('maxTraceDuration', this.maxTraceDuration);
- }
- if (this.minTraceDuration) {
- temp.minTraceDuration = this.minTraceDuration;
- localStorage.setItem('minTraceDuration', this.minTraceDuration);
- }
- if (this.endpointName) {
- temp.endpointName = this.endpointName;
- localStorage.setItem('endpointName', this.endpointName);
- }
- if (this.traceId) {
- temp.traceId = this.traceId;
- localStorage.setItem('traceId', this.traceId);
- }
- this.SET_TRACE_FORM(temp);
- this.$eventBus.$emit('SET_LOADING_TRUE', () => {
- this.GET_TRACELIST().then(() => {
- this.$eventBus.$emit('SET_LOADING_FALSE');
- });
- });
- }
+ private getTraceList() {
+ this.GET_SERVICES({ duration: this.durationTime });
+ const temp: any = {
+ queryDuration: this.globalTimeFormat([
+ new Date(
+ this.time[0].getTime() +
+ (parseInt(this.rocketbotGlobal.utc, 10) +
+ new Date().getTimezoneOffset() / 60) *
+ 3600000,
+ ),
+ new Date(
+ this.time[1].getTime() +
+ (parseInt(this.rocketbotGlobal.utc, 10) +
+ new Date().getTimezoneOffset() / 60) *
+ 3600000,
+ ),
+ ]),
+ traceState: this.traceState.key,
+ paging: { pageNum: 1, pageSize: 15, needTotal: true },
+ queryOrder: this.rocketTrace.traceForm.queryOrder,
+ };
- private clearSearch() {
- this.RESET_DURATION();
- this.status = true;
- this.maxTraceDuration = '';
- localStorage.removeItem('maxTraceDuration');
- this.minTraceDuration = '';
- localStorage.removeItem('minTraceDuration');
- this.service = {label: 'All', key: ''};
- this.instance = {label: 'All', key: ''};
- this.endpointName = '';
- localStorage.removeItem('endpointName');
- this.traceId = '';
- localStorage.removeItem('traceId');
- this.traceState = {label: 'All', key: 'ALL'};
- this.SET_TRACE_FORM_ITEM({type: 'queryOrder', data: ''});
- this.getTraceList();
+ if (this.service.key) {
+ temp.serviceId = this.service.key;
}
-
- @Watch('rocketbotGlobal.durationRow')
- private durationRowWatch(value: Duration) {
- this.time = [value.start, value.end];
+ if (this.instance.key) {
+ temp.serviceInstanceId = this.instance.key;
}
-
- private created() {
- this.endpointName = this.$route.query.endpointname ? this.$route.query.endpointname.toString() : this.endpointName;
- this.traceId = this.$route.query.traceid ? this.$route.query.traceid.toString() : this.traceId;
- this.time = [this.rocketbotGlobal.durationRow.start, this.rocketbotGlobal.durationRow.end];
+ if (this.maxTraceDuration) {
+ temp.maxTraceDuration = this.maxTraceDuration;
+ localStorage.setItem('maxTraceDuration', this.maxTraceDuration);
}
-
- private mounted() {
- this.getTraceList();
- if (this.service && this.service.key) {
- this.GET_INSTANCES({duration: this.durationTime, serviceId: this.service.key});
- }
+ if (this.minTraceDuration) {
+ temp.minTraceDuration = this.minTraceDuration;
+ localStorage.setItem('minTraceDuration', this.minTraceDuration);
+ }
+ if (this.endpointName) {
+ temp.endpointName = this.endpointName;
+ localStorage.setItem('endpointName', this.endpointName);
}
+ if (this.traceId) {
+ temp.traceId = this.traceId;
+ localStorage.setItem('traceId', this.traceId);
+ }
+ this.SET_TRACE_FORM(temp);
+
+ this.$eventBus.$emit('SET_LOADING_TRUE', () => {
+ this.GET_TRACELIST().then(() => {
+ this.$eventBus.$emit('SET_LOADING_FALSE');
+ });
+ });
}
-</script>
-<style lang="scss">
- .rk-trace-search {
- flex-shrink: 0;
- background-color: #333840;
- color: #eee;
- width: 100%;
- padding: 3px 15px 8px;
+ private clearSearch() {
+ this.RESET_DURATION();
+ this.status = true;
+ this.maxTraceDuration = '';
+ localStorage.removeItem('maxTraceDuration');
+ this.minTraceDuration = '';
+ localStorage.removeItem('minTraceDuration');
+ this.service = { label: 'All', key: '' };
+ this.instance = { label: 'All', key: '' };
+ this.endpointName = '';
+ localStorage.removeItem('endpointName');
+ this.traceId = '';
+ localStorage.removeItem('traceId');
+ this.traceState = { label: 'All', key: 'ALL' };
+ this.SET_TRACE_FORM_ITEM({ type: 'queryOrder', data: '' });
+ this.getTraceList();
}
- .rk-trace-search-input {
- border-style: unset;
- outline: 0;
- padding: 2px 5px;
- border-radius: 3px;
+ @Watch('rocketbotGlobal.durationRow')
+ private durationRowWatch(value: Duration) {
+ this.time = [value.start, value.end];
}
- .rk-trace-search-range, .rk-auto-select {
- border-radius: 3px;
- background-color: #fff;
- padding: 1px;
- border-radius: 3px;
+ private created() {
+ this.endpointName = this.$route.query.endpointname
+ ? this.$route.query.endpointname.toString()
+ : this.endpointName;
+ this.traceId = this.$route.query.traceid
+ ? this.$route.query.traceid.toString()
+ : this.traceId;
+ this.time = [
+ this.rocketbotGlobal.durationRow.start,
+ this.rocketbotGlobal.durationRow.end,
+ ];
+ }
- input {
- width: 38px;
- border-style: unset;
- outline: 0;
+ private mounted() {
+ if (this.inTopo) {
+ this.service = this.propsService;
+ }
+ this.getTraceList();
+ if (this.service && this.service.key) {
+ this.GET_INSTANCES({
+ duration: this.durationTime,
+ serviceId: this.service.key,
+ });
}
}
+}
+</script>
+
+<style lang="scss">
+.rk-trace-search {
+ flex-shrink: 0;
+ background-color: #333840;
+ color: #eee;
+ width: 100%;
+ padding: 3px 15px 8px;
+}
+
+.rk-trace-search-input {
+ border-style: unset;
+ outline: 0;
+ padding: 2px 5px;
+ border-radius: 3px;
+}
+
+.rk-trace-search-range,
+.rk-auto-select {
+ border-radius: 3px;
+ background-color: #fff;
+ padding: 1px;
+ border-radius: 3px;
+
+ input {
+ width: 38px;
+ border-style: unset;
+ outline: 0;
+ }
+}
- .rk-trace-search-btn {
- padding: 3px 9px;
- background-color: #484b55;
- border-radius: 4px;
- margin-top: 12px;
+.rk-trace-search-btn {
+ padding: 3px 9px;
+ background-color: #484b55;
+ border-radius: 4px;
+ margin-top: 12px;
- &.bg-blue {
- background-color: #448dfe;
- }
+ &.bg-blue {
+ background-color: #448dfe;
}
+}
- .rk-trace-clear-btn {
- padding: 3px 9px;
- background-color: #484b55;
- border-radius: 4px;
- margin-top: 12px;
+.rk-trace-clear-btn {
+ padding: 3px 9px;
+ background-color: #484b55;
+ border-radius: 4px;
+ margin-top: 12px;
- &.bg-warning {
- background-color: #FBB03B;
- }
+ &.bg-warning {
+ background-color: #fbb03b;
}
+}
- .rk-trace-search-more {
- background-color: #484b55;
- padding: 4px 10px;
- border-radius: 3px;
- margin-top: 8px;
- position: relative;
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
+.rk-trace-search-more {
+ background-color: #484b55;
+ padding: 4px 10px;
+ border-radius: 3px;
+ margin-top: 8px;
+ position: relative;
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
- &:after {
- bottom: 100%;
- right: 30px;
- border: solid transparent;
- content: " ";
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
- border-color: rgba(0, 0, 0, 0);
- border-bottom-color: #484b55;
- border-width: 8px;
- margin-right: 0px;
- }
+ &:after {
+ bottom: 100%;
+ right: 30px;
+ border: solid transparent;
+ content: ' ';
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ border-color: rgba(0, 0, 0, 0);
+ border-bottom-color: #484b55;
+ border-width: 8px;
+ margin-right: 0px;
}
+}
</style>
diff --git a/src/views/containers/endpoint-survey-window.vue b/src/views/containers/topology/endpoint-survey-window.vue
similarity index 100%
rename from src/views/containers/endpoint-survey-window.vue
rename to src/views/containers/topology/endpoint-survey-window.vue
diff --git a/src/views/containers/instances-survey-window.vue b/src/views/containers/topology/instances-survey-window.vue
similarity index 100%
rename from src/views/containers/instances-survey-window.vue
rename to src/views/containers/topology/instances-survey-window.vue
diff --git a/src/views/containers/trace.vue b/src/views/containers/topology/topology-trace.vue
similarity index 95%
copy from src/views/containers/trace.vue
copy to src/views/containers/topology/topology-trace.vue
index a58bc8f..5b2bb59 100644
--- a/src/views/containers/trace.vue
+++ b/src/views/containers/topology/topology-trace.vue
@@ -17,7 +17,7 @@
<template>
<div class="rk-trace flex-v">
- <TraceSearch :service="service" :inTopo="inTopo"/>
+ <TraceSearch :propsService="service" :inTopo="inTopo"/>
<div class="rk-trace-inner">
<TraceTable/>
<TraceDetail :current="stateTrace.currentTrace" :spans="stateTrace.traceSpans"/>
@@ -32,7 +32,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';
+import trace from '../../../store/modules/trace';
@Component({
components: {
TraceTable, TraceDetail, TraceSearch,
diff --git a/src/views/containers/topology.vue b/src/views/containers/topology/topology.vue
similarity index 92%
rename from src/views/containers/topology.vue
rename to src/views/containers/topology/topology.vue
index 25c3da8..0918abe 100644
--- a/src/views/containers/topology.vue
+++ b/src/views/containers/topology/topology.vue
@@ -25,9 +25,9 @@
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 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}})
diff --git a/src/views/containers/trace.vue b/src/views/containers/trace.vue
index a58bc8f..e4d516c 100644
--- a/src/views/containers/trace.vue
+++ b/src/views/containers/trace.vue
@@ -1,26 +1,23 @@
-/**
- * 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-trace flex-v">
- <TraceSearch :service="service" :inTopo="inTopo"/>
+ <TraceSearch />
<div class="rk-trace-inner">
- <TraceTable/>
- <TraceDetail :current="stateTrace.currentTrace" :spans="stateTrace.traceSpans"/>
+ <TraceTable />
+ <TraceDetail
+ :current="stateTrace.currentTrace"
+ :spans="stateTrace.traceSpans"
+ />
</div>
</div>
</template>
@@ -35,7 +32,9 @@ 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 Trace extends Vue {
@@ -44,18 +43,12 @@ export default class Trace extends Vue {
@Action('rocketTrace/GET_TRACELIST') private GET_TRACELIST: any;
@Action('rocketTrace/GET_TRACE_SPANS') private GET_TRACE_SPANS: any;
- @Prop({default: {label: 'All', key: ''}})
- private service!: Option;
-
- @Prop({default: false, type: Boolean})
- private inTopo!: boolean;
-
private show: boolean = true;
private beforeCreate() {
this.$store.registerModule('rocketTrace', trace);
}
private beforeMount() {
- this.SET_EVENTS([]);
+ this.SET_EVENTS([]);
}
private beforeDestroy() {
this.$store.unregisterModule('rocketTrace');
@@ -68,7 +61,7 @@ export default class Trace extends Vue {
height: 100%;
min-height: 0;
}
-.rk-trace-inner{
+.rk-trace-inner {
height: 100%;
display: flex;
min-height: 0;