You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by wu...@apache.org on 2020/06/14 12:48:24 UTC
[skywalking-rocketbot-ui] branch master updated: Feat: update
thread-stack dragable (#315)
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 e245020 Feat: update thread-stack dragable (#315)
e245020 is described below
commit e245020cdb785af1297f01964a4b2a14640b041e
Author: Allen Wang <Al...@outlook.com>
AuthorDate: Sun Jun 14 20:48:14 2020 +0800
Feat: update thread-stack dragable (#315)
---
.../components/common/trace-chart-table/trace.scss | 8 ++---
src/views/components/profile/profile-container.vue | 35 +++++++++++++++++++---
.../profile/profile-detail-chart-table.vue | 5 +---
src/views/components/profile/profile-item.vue | 8 ++---
src/views/components/profile/profile.scss | 7 ++---
5 files changed, 42 insertions(+), 21 deletions(-)
diff --git a/src/views/components/common/trace-chart-table/trace.scss b/src/views/components/common/trace-chart-table/trace.scss
index 9e69057..2c3848e 100644
--- a/src/views/components/common/trace-chart-table/trace.scss
+++ b/src/views/components/common/trace-chart-table/trace.scss
@@ -19,19 +19,19 @@
width: 150px;
}
.start-time {
- width: 100px;
+ width: 150px;
}
.exec-ms {
- width: 60px;
+ width: 80px;
}
.exec-percent {
width: 100px;
}
.self {
- width: 50px;
+ width: 100px;
}
.api {
- width: 100px;
+ width: 120px;
}
.agent {
width: 150px;
diff --git a/src/views/components/profile/profile-container.vue b/src/views/components/profile/profile-container.vue
index 16c7d51..8bc81c8 100644
--- a/src/views/components/profile/profile-container.vue
+++ b/src/views/components/profile/profile-container.vue
@@ -16,7 +16,14 @@ limitations under the License. -->
<template>
<div class="profile">
<div class="profile-header">
- <div class="thread">
+ <div class="thread" :style="`width: ${thread}px`">
+ <span class="r cp" ref="dragger">
+ <svg
+ class="icon"
+ >
+ <use xlink:href="#settings_ethernet"></use>
+ </svg>
+ </span>
Thread Stack
</div>
<div class="self">
@@ -37,21 +44,40 @@ limitations under the License. -->
Dump Count
</div>
</div>
- <slot> </slot>
+ <Item :thread="thread" :highlightTop="highlightTop" v-for="(item, index) in tableData" :data="item" :key="'key' + index" />
+ <slot></slot>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Mutation } from 'vuex-class';
+ import Item from './profile-item.vue';
- @Component
+
+ @Component({components: {Item}})
export default class ProfileContainer extends Vue {
@Mutation('profileStore/SET_HIGHLIGHT_TOP') private SET_HIGHLIGHT_TOP: any;
@Prop() private highlightTop!: boolean;
-
+ @Prop() private tableData!: any[];
+ private thread: number = 500;
private updateHighlightTop() {
this.SET_HIGHLIGHT_TOP();
}
+ private mounted() {
+ const drag: any = this.$refs.dragger;
+ drag.onmousedown = (event: any) => {
+ const diffX = event.clientX;
+ const copy = this.thread;
+ document.onmousemove = (documentEvent) => {
+ const moveX = documentEvent.clientX - diffX;
+ this.thread = copy + moveX;
+ };
+ document.onmouseup = () => {
+ document.onmousemove = null;
+ document.onmouseup = null;
+ };
+ };
+ }
}
</script>
<style lang="scss" scoped>
@@ -78,6 +104,7 @@ limitations under the License. -->
}
.profile-header {
display: flex;
+ user-select: none;
border-left: 0;
border-right: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
diff --git a/src/views/components/profile/profile-detail-chart-table.vue b/src/views/components/profile/profile-detail-chart-table.vue
index 095d602..f122e8d 100644
--- a/src/views/components/profile/profile-detail-chart-table.vue
+++ b/src/views/components/profile/profile-detail-chart-table.vue
@@ -15,21 +15,18 @@ limitations under the License. -->
<template>
<div class="profile-detail-chart-table">
- <ProfileContainer :highlightTop="highlightTop">
- <Item :highlightTop="highlightTop" v-for="(item, index) in tableData" :data="item" :key="'key' + index" />
+ <ProfileContainer :highlightTop="highlightTop" :tableData="tableData">
<div class="profile-tips" v-if="!tableData.length">{{ $t('noData') }}</div>
</ProfileContainer>
</div>
</template>
<script lang="js">
import copy from '@/utils/copy';
- import Item from './profile-item';
import ProfileContainer from './profile-container';
import _ from 'lodash';
export default {
components: {
- Item,
ProfileContainer,
},
props: ['data', 'highlightTop'],
diff --git a/src/views/components/profile/profile-item.vue b/src/views/components/profile/profile-item.vue
index 5f4e820..f0b7c90 100644
--- a/src/views/components/profile/profile-item.vue
+++ b/src/views/components/profile/profile-item.vue
@@ -15,8 +15,8 @@ limitations under the License. -->
<template>
<div>
- <div :class="['profile-item', 'level' + data.parentId]" :style="{ color: data.topDur ? '#448dfe' : '#3d444f' }">
- <div :class="['thread', 'level' + data.parentId]" :style="{ 'text-indent': data.parentId * 4 + 'px' }">
+ <div :class="['profile-item', 'level' + data.parentId]" :style="{ color: data.topDur ? '#448dfe' : '#3d444f'}">
+ <div :class="['thread', 'level' + data.parentId]" :style="{ 'text-indent': data.parentId * 4 + 'px',width: `${thread}px` }">
<svg
class="icon vm cp trans"
:style="!displayChildren ? 'transform: rotate(-90deg);' : ''"
@@ -34,14 +34,14 @@ limitations under the License. -->
<div class="dump-count">{{ data.count }}</div>
</div>
<div v-show="data.children && data.children.length && displayChildren" class="children-trace">
- <item v-for="(item, index) in data.children" :key="index" :data="item" />
+ <item :thread="thread" v-for="(item, index) in data.children" :key="index" :data="item" />
</div>
</div>
</template>
<script lang="js">
export default {
name: 'item',
- props: ['data', 'highlightTop'],
+ props: ['data', 'highlightTop', 'thread'],
data() {
return {
displayChildren: true,
diff --git a/src/views/components/profile/profile.scss b/src/views/components/profile/profile.scss
index c75c872..408a424 100644
--- a/src/views/components/profile/profile.scss
+++ b/src/views/components/profile/profile.scss
@@ -15,15 +15,12 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-.thread {
- width: 70%;
-}
.dump-count {
- width: 5%;
+ width: 8%;
min-width: 100px;
}
.exec-ms {
- width: 15%;
+ width: 20%;
position: relative;
}
.self {