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 8e2628a Fix ui bug & Add trace completion (#145)
8e2628a is described below
commit 8e2628a36dba0037e90f12cea8a4753deb1b7b2c
Author: Allen Wang <[email protected]>
AuthorDate: Sat Aug 31 18:16:32 2019 +0800
Fix ui bug & Add trace completion (#145)
* Fix ui bug & Add trace completion
1. Fix ui display bug.
2. Add trace completion feature.
* Translate into English
---
src/components/rk-header.vue | 21 ++----------
.../trace/trace-chart-table/collapse.gif | Bin 846 -> 0 bytes
.../components/trace/trace-chart-table/expand.gif | Bin 851 -> 0 bytes
.../trace/trace-chart-table/trace-container.vue | 2 ++
.../trace/trace-chart-table/trace-item.vue | 33 +++---------------
.../components/trace/trace-detail-chart-list.vue | 38 +++++++++++++++++++--
.../components/trace/trace-detail-chart-table.vue | 37 ++++++++++++++++++--
.../components/trace/trace-detail-chart-tree.vue | 34 +++++++++++++++++-
src/views/components/trace/trace-table.vue | 2 +-
src/views/containers/dashboard.vue | 2 +-
vue.config.js | 2 +-
11 files changed, 114 insertions(+), 57 deletions(-)
diff --git a/src/components/rk-header.vue b/src/components/rk-header.vue
index 0449340..0aaf68a 100644
--- a/src/components/rk-header.vue
+++ b/src/components/rk-header.vue
@@ -51,29 +51,12 @@
<a class="rk-btn mr-5 sm" :class="auto?'blue':'ghost'"
@click="handleAuto">
<span class="vm">{{this.$t('auto')}}</span>
</a>
- <a class="rk-btn mr-15 sm ghost" @click="handleReload">
+ <a class="rk-btn sm ghost" @click="handleReload">
<svg class="icon mr-5 vm" :class="{'loading': auto}">
<use xlink:href="#retry"></use>
</svg>
<span class="vm">{{this.$t('reload')}}</span>
- </a>
- <a class="rk-header-user" v-clickout="handleHide">
- <div @click="handleShow" class="rk-btn" :class="show? 'blue' :
'ghost'">
- <svg class="icon vs">
- <use xlink:href="#user"></use>
- </svg>
- <svg class="icon vs">
- <use xlink:href="#arrow-down"></use>
- </svg>
- </div>
- <div class="rk-header-user-menu" v-if="show">
- <div class="rk-header-user-menu-i" @click="handleSignout">
- <svg class="icon vs">
- <use xlink:href="#issue-close"></use>
- </svg>
- {{this.$t('signout')}}</div>
- </div>
- </a>
+ </a>
</div>
</header>
</template>
diff --git a/src/views/components/trace/trace-chart-table/collapse.gif
b/src/views/components/trace/trace-chart-table/collapse.gif
deleted file mode 100644
index 01e6914..0000000
Binary files a/src/views/components/trace/trace-chart-table/collapse.gif and
/dev/null differ
diff --git a/src/views/components/trace/trace-chart-table/expand.gif
b/src/views/components/trace/trace-chart-table/expand.gif
deleted file mode 100644
index 1b24ef1..0000000
Binary files a/src/views/components/trace/trace-chart-table/expand.gif and
/dev/null differ
diff --git a/src/views/components/trace/trace-chart-table/trace-container.vue
b/src/views/components/trace/trace-chart-table/trace-container.vue
index b42e117..906ab11 100644
--- a/src/views/components/trace/trace-chart-table/trace-container.vue
+++ b/src/views/components/trace/trace-chart-table/trace-container.vue
@@ -47,6 +47,8 @@
<slot> </slot>
</div>
</template>
+<script lang="js">
+</script>
<style lang="scss" scoped>
@import './trace.scss';
.trace {
diff --git a/src/views/components/trace/trace-chart-table/trace-item.vue
b/src/views/components/trace/trace-chart-table/trace-item.vue
index 3db5bd0..b6341ff 100644
--- a/src/views/components/trace/trace-chart-table/trace-item.vue
+++ b/src/views/components/trace/trace-chart-table/trace-item.vue
@@ -19,18 +19,15 @@
<div>
<div @click="showSelectSpan" :class="['trace-item', 'level'+( data.level
- 1)]">
<div :class="['method', 'level'+( data.level - 1)]"
:style="{'text-indent': (data.level - 1) * 10 + 'px' }">
- <span
- v-if="data.children && data.children.length > 0"
- @click.stop="toggle"
- :class="['trace-table-toggle', displayChildren? 'collapse':
'expand']">
-
- </span>
+ <svg class="icon vm cp trans" :style="!displayChildren?'transform:
rotate(-90deg);':''" @click.stop="toggle" v-if="data.children &&
data.children.length > 0">
+ <use xlink:href="#arrow-down"></use>
+ </svg>
<span v-tooltip:bottom="{content: data.endpointName, popperCls:
['trace-table-tooltip']}">
{{data.endpointName}}
</span>
</div>
<div class="start-time">
- {{formatTime(data.startTime)}}
+ {{data.startTime | dateformat}}
</div>
<div class="gap">
0
@@ -78,22 +75,6 @@
}
}
- .trace-table-toggle {
- cursor: pointer;
- height: 12px;
- width: 12px;
- display: inline-block;
- &.collapse {
- background: url('./collapse.gif') no-repeat;
- background-size: 12px 12px;
- }
-
- &.expand {
- background: url('./expand.gif') no-repeat;
- background-size: 12px 12px;
- }
- }
-
.trace-item {
display: flex;
position: relative;
@@ -146,9 +127,8 @@
</style>
-<script type="text/javascript">
+<script lang="js">
import moment from 'dayjs';
-import Popper from 'popper.js';
export default {
name: 'item',
props: ['data'],
@@ -190,9 +170,6 @@ export default {
toggle() {
this.displayChildren = ! this.displayChildren;
},
- formatTime(timestamp) {
- return moment(timestamp).format('HH:mm:ss SSS');
- },
showSelectSpan() {
this.eventHub.$emit('HANDLE-SELECT-SPAN', this.data);
},
diff --git a/src/views/components/trace/trace-detail-chart-list.vue
b/src/views/components/trace/trace-detail-chart-list.vue
index fbef745..72d745a 100644
--- a/src/views/components/trace/trace-detail-chart-list.vue
+++ b/src/views/components/trace/trace-detail-chart-list.vue
@@ -135,9 +135,41 @@ export default {
if (this.data.length === 0) return [];
this.list = Array.from(new Set(this.data.map(i => i.serviceCode)));
this.segmentId = [];
- const segmentGroup = {}
- const segmentIdGroup = []
- this.data.forEach(i => {
+ const segmentGroup = {};
+ const segmentIdGroup = [];
+ const fixSpans = [];
+ const segmentHeaders = [];
+ this.data.forEach((span) => {
+ if (span.parentSpanId === -1) {
+ segmentHeaders.push(span);
+ } else {
+ const index = this.data.findIndex(i => (i.segmentId ===
span.segmentId && i.spanId === (span.spanId - 1)));
+ if (index === -1) {
+ fixSpans.push(
+ {
+ traceId: span.traceId, segmentId: span.segmentId, spanId:
span.spanId - 1, parentSpanId: span.spanId - 2, refs: [], endpointName:
`${span.segmentId}`, serviceCode: 'VirtualNode', type: 'Broken', peer: '',
component: `VirtualNode: #${span.spanId - 1}`, isError: true, isBroken: true,
layer: 'Broken', tags: [], logs: [],
+ },
+ );
+ }
+ }
+ });
+ segmentHeaders.forEach((span) => {
+ if (span.refs.length) {
+ span.refs.forEach((ref) => {
+ const index = this.data.findIndex(i => (ref.parentSegmentId ===
i.segmentId && ref.parentSpanId === i.spanId));
+ if (index === -1) {
+ for (let i = 0; i <= ref.parentSpanId; i += 1) {
+ fixSpans.push(
+ {
+ traceId: ref.traceId, segmentId: ref.parentSegmentId,
spanId: i, parentSpanId: i - 1, refs: [], endpointName:
`${ref.parentSegmentId}`, serviceCode: 'VirtualNode', type: 'Broken', peer: '',
component: `VirtualNode: #${i}`, isError: true, isBroken: true, layer:
'Broken', tags: [], logs: [],
+ },
+ );
+ }
+ }
+ });
+ }
+ });
+ [...fixSpans, ...this.data].forEach(i => {
i.label=i.endpointName || 'no operation name';
i.children = [];
if(segmentGroup[i.segmentId] === undefined){
diff --git a/src/views/components/trace/trace-detail-chart-table.vue
b/src/views/components/trace/trace-detail-chart-table.vue
index e4fdbf2..d973d3a 100644
--- a/src/views/components/trace/trace-detail-chart-table.vue
+++ b/src/views/components/trace/trace-detail-chart-table.vue
@@ -1,4 +1,3 @@
-
/**
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
@@ -69,7 +68,7 @@
}
</style>
-<script>
+<script lang="js">
import copy from '@/utils/copy';
import Item from './trace-chart-table/trace-item';
import TraceContainer from './trace-chart-table/trace-container';
@@ -142,7 +141,39 @@ export default {
this.segmentId = [];
const segmentGroup = {};
const segmentIdGroup = [];
- this.data.forEach((i) => {
+ const fixSpans = [];
+ const segmentHeaders = [];
+ this.data.forEach((span) => {
+ if (span.parentSpanId === -1) {
+ segmentHeaders.push(span);
+ } else {
+ const index = this.data.findIndex(i => (i.segmentId ===
span.segmentId && i.spanId === (span.spanId - 1)));
+ if (index === -1) {
+ fixSpans.push(
+ {
+ traceId: span.traceId, segmentId: span.segmentId, spanId:
span.spanId - 1, parentSpanId: span.spanId - 2, refs: [], endpointName:
`${span.segmentId}`, serviceCode: '虚拟节点', type: 'Broken', peer: '', component:
`虚拟节点: #${span.spanId - 1}`, isError: true, isBroken: true, layer: '断链', tags:
[], logs: [],
+ },
+ );
+ }
+ }
+ });
+ segmentHeaders.forEach((span) => {
+ if (span.refs.length) {
+ span.refs.forEach((ref) => {
+ const index = this.data.findIndex(i => (ref.parentSegmentId ===
i.segmentId && ref.parentSpanId === i.spanId));
+ if (index === -1) {
+ for (let i = 0; i <= ref.parentSpanId; i += 1) {
+ fixSpans.push(
+ {
+ traceId: ref.traceId, segmentId: ref.parentSegmentId,
spanId: i, parentSpanId: i - 1, refs: [], endpointName:
`${ref.parentSegmentId}`, serviceCode: '虚拟节点', type: 'Broken', peer: '',
component: `虚拟节点: #${i}`, isError: true, isBroken: true, layer: '断链', tags: [],
logs: [],
+ },
+ );
+ }
+ }
+ });
+ }
+ });
+ [...fixSpans, ...this.data].forEach(i => {
i.label = i.endpointName || 'no operation name';
i.children = [];
if (segmentGroup[i.segmentId] === undefined) {
diff --git a/src/views/components/trace/trace-detail-chart-tree.vue
b/src/views/components/trace/trace-detail-chart-tree.vue
index d5175b1..ac085f1 100644
--- a/src/views/components/trace/trace-detail-chart-tree.vue
+++ b/src/views/components/trace/trace-detail-chart-tree.vue
@@ -118,7 +118,39 @@ export default {
this.segmentId = [];
const segmentGroup = {}
const segmentIdGroup = []
- this.data.forEach(i => {
+ const fixSpans = [];
+ const segmentHeaders = [];
+ this.data.forEach((span) => {
+ if (span.parentSpanId === -1) {
+ segmentHeaders.push(span);
+ } else {
+ const index = this.data.findIndex(i => (i.segmentId ===
span.segmentId && i.spanId === (span.spanId - 1)));
+ if (index === -1) {
+ fixSpans.push(
+ {
+ traceId: span.traceId, segmentId: span.segmentId, spanId:
span.spanId - 1, parentSpanId: span.spanId - 2, refs: [], endpointName:
`${span.segmentId}`, serviceCode: '虚拟节点', type: 'Broken', peer: '', component:
`虚拟节点: #${span.spanId - 1}`, isError: true, isBroken: true, layer: '断链', tags:
[], logs: [],
+ },
+ );
+ }
+ }
+ });
+ segmentHeaders.forEach((span) => {
+ if (span.refs.length) {
+ span.refs.forEach((ref) => {
+ const index = this.data.findIndex(i => (ref.parentSegmentId ===
i.segmentId && ref.parentSpanId === i.spanId));
+ if (index === -1) {
+ for (let i = 0; i <= ref.parentSpanId; i += 1) {
+ fixSpans.push(
+ {
+ traceId: ref.traceId, segmentId: ref.parentSegmentId,
spanId: i, parentSpanId: i - 1, refs: [], endpointName:
`${ref.parentSegmentId}`, serviceCode: '虚拟节点', type: 'Broken', peer: '',
component: `虚拟节点: #${i}`, isError: true, isBroken: true, layer: '断链', tags: [],
logs: [],
+ },
+ );
+ }
+ }
+ });
+ }
+ });
+ [...fixSpans, ...this.data].forEach(i => {
i.label=i.endpointName || 'no operation name';
i.children = [];
if(segmentGroup[i.segmentId] === undefined){
diff --git a/src/views/components/trace/trace-table.vue
b/src/views/components/trace/trace-table.vue
index c9cf9f5..8aca084 100644
--- a/src/views/components/trace/trace-table.vue
+++ b/src/views/components/trace/trace-table.vue
@@ -162,7 +162,7 @@ export default class Home extends Vue {
padding: 8px 10px;
border-bottom: 1px solid rgba(0,0,0,.07);
&.selected {
- background-color: floralwhite;
+ background-color:#ededed;
}
}
.rk-trace-success{
diff --git a/src/views/containers/dashboard.vue
b/src/views/containers/dashboard.vue
index bb280ab..96bc79d 100644
--- a/src/views/containers/dashboard.vue
+++ b/src/views/containers/dashboard.vue
@@ -16,7 +16,7 @@
*/
<template>
- <div class="flex-v wrapper" style="flex-grow:1;">
+ <div class="flex-v wrapper" style="flex-grow:1;height: 100%;">
<ToolGroup :rocketGlobal="rocketGlobal" :rocketComps="rocketComps"/>
<ToolBar :rocketGlobal="rocketGlobal" :compType="compType"
:durationTime="durationTime" :stateDashboard='stateDashboardOption'/>
<ToolNav :rocketGlobal="rocketGlobal" :rocketComps="rocketComps"/>
diff --git a/vue.config.js b/vue.config.js
index b79f6a9..53b87d7 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -19,7 +19,7 @@ module.exports = {
devServer: {
proxy: {
'/graphql': {
- target: 'http://skywalking.daocloud.io:12800',
+ target: 'http://127.0.0.1:12800',
changeOrigin: true,
},
},
