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 d95fe31 Update (#314)
d95fe31 is described below
commit d95fe319269c2e2f08b4a8be93d9935ee035f14e
Author: Allen Wang <[email protected]>
AuthorDate: Sun Jun 14 16:38:33 2020 +0800
Update (#314)
---
.../common/trace-chart-table/trace-container.vue | 43 ++++++++++++++++++++--
.../common/trace-chart-table/trace-item.vue | 12 +++---
.../components/common/trace-chart-table/trace.scss | 20 ++++------
.../components/common/trace-detail-chart-table.vue | 5 +--
4 files changed, 55 insertions(+), 25 deletions(-)
diff --git a/src/views/components/common/trace-chart-table/trace-container.vue
b/src/views/components/common/trace-chart-table/trace-container.vue
index a834350..047eee4 100644
--- a/src/views/components/common/trace-chart-table/trace-container.vue
+++ b/src/views/components/common/trace-chart-table/trace-container.vue
@@ -16,22 +16,55 @@ limitations under the License. -->
<template>
<div class="trace">
<div class="trace-header">
- <div :class="item.label" v-for="(item, index) in data" :key="index">
+ <div class="method" :style="`width: ${method}px`">
+ <span class="r cp" ref="dragger">
+ <svg
+ class="icon"
+ >
+ <use xlink:href="#settings_ethernet"></use>
+ </svg>
+ </span>
+ {{ data[0].value }}
+ </div>
+ <div :class="item.label" v-for="(item, index) in data.slice(1)"
:key="index">
{{ item.value }}
</div>
</div>
- <slot> </slot>
+ <Item :method="method" v-for="(item, index) in tableData" :data="item"
:key="'key' + index" :type="type" />
+ <slot></slot>
</div>
</template>
<script lang="js">
import { ProfileConstant, TraceConstant } from './trace-constant';
+ import Item from './trace-item';
export default {
+ components: {Item},
name: 'TraceContainer',
- props: ['type'],
+ props: ['type', 'tableData'],
+ data() {
+ return {
+ method: 300,
+ };
+ },
created() {
this.data = this.type === 'profile' ? ProfileConstant : TraceConstant;
},
+ mounted() {
+ const drag = this.$refs.dragger;
+ drag.onmousedown = (event) => {
+ const diffX = event.clientX;
+ const copy = this.method;
+ document.onmousemove = (documentEvent) => {
+ const moveX = documentEvent.clientX - diffX;
+ this.method = copy + moveX;
+ };
+ document.onmouseup = () => {
+ document.onmousemove = null;
+ document.onmouseup = null;
+ };
+ };
+ },
};
</script>
<style lang="scss" scoped>
@@ -42,13 +75,15 @@ limitations under the License. -->
overflow: auto;
}
.trace-header {
- display: flex;
+ white-space: nowrap;
+ user-select: none;
border-left: 0;
border-right: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.trace-header div {
+ display: inline-block;
padding: 0 4px;
border: 1px solid transparent;
border-right: 1px dotted silver;
diff --git a/src/views/components/common/trace-chart-table/trace-item.vue
b/src/views/components/common/trace-chart-table/trace-item.vue
index 56caf72..a500005 100644
--- a/src/views/components/common/trace-chart-table/trace-item.vue
+++ b/src/views/components/common/trace-chart-table/trace-item.vue
@@ -16,7 +16,7 @@ limitations under the License. -->
<template>
<div>
<div @click="showSelectSpan" :class="['trace-item', 'level' + (data.level
- 1)]" ref="traceItem">
- <div :class="['method', 'level' + (data.level - 1)]" :style="{
'text-indent': (data.level - 1) * 10 + 'px' }">
+ <div :class="['method', 'level' + (data.level - 1)]" :style="{
'text-indent': (data.level - 1) * 10 + 'px', width: `${method}px`}">
<svg
class="icon vm cp trans"
:style="!displayChildren ? 'transform: rotate(-90deg);' : ''"
@@ -54,14 +54,14 @@ limitations under the License. -->
</div>
</div>
<div v-show="data.children && data.children.length > 0 && displayChildren"
class="children-trace">
- <item v-for="(item, index) in data.children" :key="index" :data="item"
:type="type"> </item>
+ <item :method="method" v-for="(item, index) in data.children"
:key="index" :data="item" :type="type"> </item>
</div>
</div>
</template>
<script lang="js">
export default {
name: 'item',
- props: ['data', 'type'],
+ props: ['data', 'type', 'method'],
watch: {
data() {
const items = document.querySelectorAll('.trace-item');
@@ -140,7 +140,8 @@ limitations under the License. -->
}
.trace-item {
- display: flex;
+ // display: flex;
+ white-space: nowrap;
position: relative;
cursor: pointer;
}
@@ -154,6 +155,7 @@ limitations under the License. -->
.trace-item > div {
padding: 0 5px;
+ display: inline-block;
border: 1px solid transparent;
border-right: 1px dotted silver;
overflow: hidden;
@@ -166,7 +168,7 @@ limitations under the License. -->
padding-left: 10px;
}
.trace-item div.exec-percent {
- width: 10%;
+ width: 100px;
padding-left: 8px;
padding-right: 8px;
.outer-progress_bar {
diff --git a/src/views/components/common/trace-chart-table/trace.scss
b/src/views/components/common/trace-chart-table/trace.scss
index a0f6065..9e69057 100644
--- a/src/views/components/common/trace-chart-table/trace.scss
+++ b/src/views/components/common/trace-chart-table/trace.scss
@@ -15,32 +15,28 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-.method {
- width: 50%;
-}
.argument {
- width: 15%;
+ width: 150px;
}
.start-time {
- width: 5%;
- min-width: 100px;
+ width: 100px;
}
.exec-ms {
- width: 6%;
+ width: 60px;
}
.exec-percent {
- width: 10%;
+ width: 100px;
}
.self {
- width: 5%;
+ width: 50px;
}
.api {
- width: 10%;
+ width: 100px;
}
.agent {
- width: 15%;
+ width: 150px;
}
.application {
- width: 15%;
+ width: 150px;
text-align: center;
}
diff --git a/src/views/components/common/trace-detail-chart-table.vue
b/src/views/components/common/trace-detail-chart-table.vue
index 0c5716e..ae0088a 100644
--- a/src/views/components/common/trace-detail-chart-table.vue
+++ b/src/views/components/common/trace-detail-chart-table.vue
@@ -19,8 +19,7 @@ limitations under the License. -->
<use xlink:href="#spinner"></use>
</svg>
</div>
- <TraceContainer :type="HeaderType">
- <Item v-for="(item, index) in tableData" :data="item" :key="'key' +
index" :type="HeaderType" />
+ <TraceContainer :tableData="tableData" :type="HeaderType">
<div class="trace-tips" v-if="!tableData.length">{{ $t('noData') }}</div>
</TraceContainer>
<rk-sidebox :width="'50%'" :show.sync="showDetail" :title="$t('spanInfo')">
@@ -93,14 +92,12 @@ limitations under the License. -->
<script lang="js">
import copy from '@/utils/copy';
- import Item from './trace-chart-table/trace-item';
import TraceContainer from './trace-chart-table/trace-container';
import _ from 'lodash';
/* eslint-disable */
/* tslint:disable */
export default {
components: {
- Item,
TraceContainer,
},
props: ['data', 'traceId', 'showBtnDetail', 'HeaderType'],
