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 46d67ea trace (#261)
46d67ea is described below
commit 46d67ea0171d34067d1fc5b0075aeab30cc1a8b7
Author: bigflybrother <[email protected]>
AuthorDate: Sat Mar 7 18:45:05 2020 +0800
trace (#261)
---
src/components/rk-sidebox.vue | 13 +-
src/views/components/trace/trace-search.vue | 7 +-
src/views/containers/topology/topology.vue | 6 +-
.../topology/{window-trace.vue => trace/index.vue} | 14 +-
.../topology}/trace/trace-search.vue | 36 ++---
.../containers/topology/trace/trace-select.vue | 151 +++++++++++++++++++++
6 files changed, 174 insertions(+), 53 deletions(-)
diff --git a/src/components/rk-sidebox.vue b/src/components/rk-sidebox.vue
index a6a7345..e8ff6af 100644
--- a/src/components/rk-sidebox.vue
+++ b/src/components/rk-sidebox.vue
@@ -20,14 +20,14 @@ specific language governing permissions and * limitations
under the License. */
: `width:${width};${right ? 'right' : 'left'}:-${width}`
"
>
- <h3 class="rk-sidebox-title">
- {{ this.title }}
+ <div class="rk-sidebox-title">
+ <span class="title">{{ this.title }}</span>
<div class="r rk-sidebox-close" @click="handleHide">
<svg class="icon">
<use xlink:href="#close"></use>
</svg>
</div>
- </h3>
+ </div>
<div
class="rk-sidebox-inner"
:class="{ 'rk-sidebox-inner-fixed': fixed }"
@@ -96,10 +96,13 @@ specific language governing permissions and * limitations
under the License. */
font-size: 16px;
position: absolute;
width: 100%;
- padding: 0 20px;
- line-height: 17px;
+ padding-left: 20px;
+ line-height: 35px;
}
.rk-sidebox-close {
+ position: absolute;
+ right: 10px;
+ top:0;
cursor: pointer;
color: #d8d8d8;
transition: color 0.3s;
diff --git a/src/views/components/trace/trace-search.vue
b/src/views/components/trace/trace-search.vue
index 4f37aee..fed6202 100644
--- a/src/views/components/trace/trace-search.vue
+++ b/src/views/components/trace/trace-search.vue
@@ -34,7 +34,6 @@ language governing permissions and * limitations under the
License. */
:value="service"
@input="chooseService"
:data="rocketTrace.services"
- :readonly="inTopo"
/>
<TraceSelect :hasSearch="true" :title="this.$t('instance')"
v-model="instance" :data="rocketTrace.instances" />
<TraceSelect
@@ -76,7 +75,7 @@ language governing permissions and * limitations under the
License. */
<script lang="ts">
import { Duration, Option } from '@/types/global';
- import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+ import { Component, Vue, Watch } from 'vue-property-decorator';
import { Action, Getter, Mutation, State } from 'vuex-class';
import TraceSelect from './trace-select.vue';
@@ -93,10 +92,6 @@ language governing permissions and * limitations under the
License. */
@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;
diff --git a/src/views/containers/topology/topology.vue
b/src/views/containers/topology/topology.vue
index 653f175..e19816a 100644
--- a/src/views/containers/topology/topology.vue
+++ b/src/views/containers/topology/topology.vue
@@ -23,8 +23,8 @@ specific language governing permissions and * limitations
under the License. */
:instances="stateDashboardOption.instances"
/>
<window-trace
- v-else-if="dialog === 'trace'"
- :service="this.current"
+ v-if="dialog === 'trace'"
+ :current="this.current"
/>
<window-alarm
v-if="dialog === 'alarm'"
@@ -39,7 +39,7 @@ specific language governing permissions and * limitations
under the License. */
import { AxiosResponse } from 'axios';
import WindowEndpoint from '@/views/containers/topology/window-endpoint.vue';
import WindowInstance from '@/views/containers/topology/window-instance.vue';
- import WindowTrace from '@/views/containers/topology/window-trace.vue';
+ import WindowTrace from '@/views/containers/topology/trace/index.vue';
import WindowAlarm from '@/views/containers/topology/alarm/index.vue';
import Topo from '../../components/topology/chart/topo.vue';
import TopoAside from '../../components/topology/topo-aside.vue';
diff --git a/src/views/containers/topology/window-trace.vue
b/src/views/containers/topology/trace/index.vue
similarity index 80%
rename from src/views/containers/topology/window-trace.vue
rename to src/views/containers/topology/trace/index.vue
index ec5cf09..2be0d52 100644
--- a/src/views/containers/topology/window-trace.vue
+++ b/src/views/containers/topology/trace/index.vue
@@ -11,7 +11,7 @@ specific language governing permissions and * limitations
under the License. */
<template>
<div class="rk-trace flex-v">
- <TraceSearch ref="search" :propsService="service" :inTopo="true" />
+ <TraceSearch :service="current"/>
<div class="rk-trace-inner">
<TraceTable />
<TraceDetail
@@ -26,7 +26,7 @@ specific language governing permissions and * limitations
under the License. */
import { Option } from '@/types/global';
import { Component, Vue, Prop, PropSync, Watch } from
'vue-property-decorator';
import { State, Action, Mutation } from 'vuex-class';
- import TraceSearch from '@/views/components/trace/trace-search.vue';
+ import TraceSearch from './trace-search.vue';
import TraceTable from '@/views/components/trace/trace-table.vue';
import TraceDetail from '@/views/components/trace/trace-detail.vue';
@Component({
@@ -38,17 +38,9 @@ specific language governing permissions and * limitations
under the License. */
})
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;
- private show: boolean = true;
- private beforeMount() {
- this.SET_EVENTS([]);
- }
+ @Prop() private current!: Option;
}
</script>
<style lang="scss">
diff --git a/src/views/components/trace/trace-search.vue
b/src/views/containers/topology/trace/trace-search.vue
similarity index 91%
copy from src/views/components/trace/trace-search.vue
copy to src/views/containers/topology/trace/trace-search.vue
index 4f37aee..b84db2a 100644
--- a/src/views/components/trace/trace-search.vue
+++ b/src/views/containers/topology/trace/trace-search.vue
@@ -28,14 +28,6 @@ language governing permissions and * limitations under the
License. */
<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')"
@@ -76,7 +68,7 @@ language governing permissions and * limitations under the
License. */
<script lang="ts">
import { Duration, Option } from '@/types/global';
- import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+ import { Component, Vue, Watch, Prop } from 'vue-property-decorator';
import { Action, Getter, Mutation, State } from 'vuex-class';
import TraceSelect from './trace-select.vue';
@@ -91,13 +83,8 @@ language governing permissions and * limitations under the
License. */
@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: '' };
+ @Mutation('rocketTrace/SET_TRACE_FORM_ITEM') private SET_TRACE_FORM_ITEM:
any;
+ @Prop() private service!: Option;
private time!: Date[];
private status: boolean = true;
private maxTraceDuration: string =
localStorage.getItem('maxTraceDuration') || '';
@@ -179,7 +166,6 @@ language governing permissions and * limitations under the
License. */
}
private getTraceList() {
- this.GET_SERVICES({ duration: this.durationTime });
const temp: any = {
queryDuration: this.globalTimeFormat([
new Date(
@@ -195,10 +181,7 @@ language governing permissions and * limitations under the
License. */
paging: { pageNum: 1, pageSize: 15, needTotal: true },
queryOrder: this.rocketTrace.traceForm.queryOrder,
};
-
- if (this.service.key) {
- temp.serviceId = this.service.key;
- }
+ temp.serviceId = this.service.key;
if (this.instance.key) {
temp.serviceInstanceId = this.instance.key;
}
@@ -234,7 +217,6 @@ language governing permissions and * limitations under the
License. */
localStorage.removeItem('maxTraceDuration');
this.minTraceDuration = '';
localStorage.removeItem('minTraceDuration');
- this.service = { label: 'All', key: '' };
this.instance = { label: 'All', key: '' };
this.endpointName = '';
localStorage.removeItem('endpointName');
@@ -259,12 +241,10 @@ language governing permissions and * limitations under
the License. */
}
private mounted() {
this.getTraceList();
- if (this.service && this.service.key) {
- this.GET_INSTANCES({
- duration: this.durationTime,
- serviceId: this.service.key,
- });
- }
+ this.GET_INSTANCES({
+ duration: this.durationTime,
+ serviceId: this.service.key,
+ });
}
}
</script>
diff --git a/src/views/containers/topology/trace/trace-select.vue
b/src/views/containers/topology/trace/trace-select.vue
new file mode 100644
index 0000000..2861f52
--- /dev/null
+++ b/src/views/containers/topology/trace/trace-select.vue
@@ -0,0 +1,151 @@
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this
work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * *
Unless
+required by applicable law or agreed to in writing, software * distributed
under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
+
+<template>
+ <div
+ class="rk-trace-sel-wrapper flex-h"
+ v-clickout="
+ () => {
+ visible = false;
+ search = '';
+ }
+ "
+ :class="{ cp: !readonly, active: visible }"
+ >
+ <div class="rk-trace-bar-i flex-h" @click="visible = !visible &&
!readonly">
+ <div class="mr-15 rk-trace-bar-i-text">
+ <div class="sm grey">{{ title }}</div>
+ <div class="ell" v-tooltip:right.ellipsis="value.label || ''">
+ {{ value.label || '' }}
+ </div>
+ </div>
+ <svg
+ v-if="!readonly"
+ class="icon lg trans"
+ :style="`transform: rotate(${visible ? 180 : 0}deg)`"
+ >
+ <use xlink:href="#arrow-down"></use>
+ </svg>
+ </div>
+ <div class="rk-trace-sel" v-if="visible">
+ <div v-if="hasSearch">
+ <input
+ type="text"
+ class="rk-trace-sel-search"
+ v-model="search"
+ :placeholder="`${this.$t('search')}...`"
+ />
+ <svg class="icon sm close" @click="search = ''" v-if="search">
+ <use xlink:href="#clear"></use>
+ </svg>
+ </div>
+ <div class="rk-trace-opt-wrapper scroll_hide">
+ <div
+ class="rk-trace-opt ell"
+ @click="handleSelect(i)"
+ :class="{ active: i.key === value.key }"
+ v-for="i in filterData"
+ :key="i.key"
+ >
+ {{ i.label }}
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script lang="ts">
+ import { Vue, Component, Prop } from 'vue-property-decorator';
+ @Component
+ export default class TraceSelect extends Vue {
+ @Prop() public data!: any;
+ @Prop() public value!: any;
+ @Prop() public title!: string;
+ @Prop({ default: false }) public hasSearch!: boolean;
+ @Prop({ default: false })
+ public readonly!: boolean;
+ public search: string = '';
+ public visible: boolean = false;
+ get filterData() {
+ return this.data.filter(
+ (i: any) =>
+ i.label.toUpperCase().indexOf(this.search.toUpperCase()) !== -1,
+ );
+ }
+ public handleSelect(i: any) {
+ this.$emit('input', i);
+ this.visible = false;
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ .rk-trace-sel-wrapper {
+ position: relative;
+ z-index: 2;
+ height: 100%;
+ justify-content: space-between;
+ .sm {
+ line-height: 13px;
+ }
+ .icon {
+ flex-shrink: 0;
+ }
+ }
+ .rk-trace-bar-i-text {
+ max-width: 150px;
+ min-width: 80px;
+ }
+ .rk-trace-bar-i {
+ height: 100%;
+ padding: 0 15px;
+ border-right: 2px solid #252a2f;
+ }
+ .rk-trace-sel {
+ position: absolute;
+ top: 44px;
+ box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
+ background-color: #252a2f;
+ width: 100%;
+ border-radius: 3px;
+ overflow: hidden;
+ .close {
+ position: absolute;
+ right: 10px;
+ top: 12px;
+ opacity: 0.6;
+ &:hover {
+ opacity: 1;
+ }
+ }
+ }
+ .rk-trace-opt {
+ padding: 7px 15px;
+ &.active,
+ &:hover {
+ background-color: #40454e;
+ }
+ }
+ .rk-trace-sel-search {
+ width: calc(100% - 4px);
+ border: 0;
+ background-color: #333840;
+ color: #eee;
+ outline: 0;
+ padding: 7px 25px 7px 10px;
+ margin: 2px;
+ }
+ .rk-trace-opt-wrapper {
+ overflow: auto;
+ max-height: 200px;
+ padding-bottom: 2px;
+ }
+</style>
