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 2022/04/26 11:32:27 UTC
[skywalking-booster-ui] branch main updated: fix: optimize the trace widget (#73)
This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git
The following commit(s) were added to refs/heads/main by this push:
new 02f5c4b fix: optimize the trace widget (#73)
02f5c4b is described below
commit 02f5c4b9768343cc387c2de285341eab4831fbba
Author: Fine0830 <fi...@outlook.com>
AuthorDate: Tue Apr 26 19:32:23 2022 +0800
fix: optimize the trace widget (#73)
---
src/assets/icons/arrow-down.svg | 16 +++++++++++++++
src/views/dashboard/related/trace/Detail.vue | 23 ++++++++++++++++------
.../dashboard/related/trace/components/List.vue | 8 ++++++--
.../dashboard/related/trace/utils/d3-trace-list.ts | 8 ++++----
4 files changed, 43 insertions(+), 12 deletions(-)
diff --git a/src/assets/icons/arrow-down.svg b/src/assets/icons/arrow-down.svg
new file mode 100755
index 0000000..f85e0b0
--- /dev/null
+++ b/src/assets/icons/arrow-down.svg
@@ -0,0 +1,16 @@
+<!-- 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. -->
+
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path id="a" d="m10.472352 7.28232367c.3431062-.36783247.904419-.36783247 1.2592596-.00644059.3578153.36442148.3578153.95850784.0002156 1.28561559l-3.10532264 3.16826253c-.17025689.1734002-.39845625.2702388-.62654793.2702388-.24380864 0-.45151514-.0919745-.62697852-.2706782l-3.09835734-3.16693764c-.36405333-.352236-.36405333-.94614513-.01248284-1.28566765.34310619-.36783247.90441901-.36783247 1.25901327-.0 [...]
\ No newline at end of file
diff --git a/src/views/dashboard/related/trace/Detail.vue b/src/views/dashboard/related/trace/Detail.vue
index 3e2caa6..d44b01a 100644
--- a/src/views/dashboard/related/trace/Detail.vue
+++ b/src/views/dashboard/related/trace/Detail.vue
@@ -24,7 +24,12 @@ limitations under the License. -->
/>
<span class="vm">{{ traceStore.currentTrace.endpointNames[0] }}</span>
<div class="trace-log-btn">
- <el-button class="mr-10" type="primary" @click="searchTraceLogs">
+ <el-button
+ size="small"
+ class="mr-10"
+ type="primary"
+ @click="searchTraceLogs"
+ >
{{ t("viewLogs") }}
</el-button>
</div>
@@ -88,7 +93,8 @@ limitations under the License. -->
</div>
<div>
<el-button
- class="grey small"
+ class="grey"
+ size="small"
:class="{ ghost: displayMode !== 'List' }"
@click="displayMode = 'List'"
>
@@ -96,7 +102,8 @@ limitations under the License. -->
{{ t("list") }}
</el-button>
<el-button
- class="grey small"
+ class="grey"
+ size="small"
:class="{ ghost: displayMode !== 'Tree' }"
@click="displayMode = 'Tree'"
>
@@ -104,7 +111,8 @@ limitations under the License. -->
{{ t("tree") }}
</el-button>
<el-button
- class="grey small"
+ class="grey"
+ size="small"
:class="{ ghost: displayMode !== 'Table' }"
@click="displayMode = 'Table'"
>
@@ -112,7 +120,8 @@ limitations under the License. -->
{{ t("table") }}
</el-button>
<el-button
- class="grey small"
+ class="grey"
+ size="small"
:class="{ ghost: displayMode !== 'Statistics' }"
@click="displayMode = 'Statistics'"
>
@@ -230,7 +239,9 @@ export default defineComponent({
}
.trace-chart {
- height: 100%;
+ height: calc(100% - 100px);
+ overflow: auto;
+ padding-bottom: 20px;
}
.trace-detail-wrapper {
diff --git a/src/views/dashboard/related/trace/components/List.vue b/src/views/dashboard/related/trace/components/List.vue
index e8d4cd0..907c236 100644
--- a/src/views/dashboard/related/trace/components/List.vue
+++ b/src/views/dashboard/related/trace/components/List.vue
@@ -22,11 +22,11 @@ limitations under the License. -->
<Icon iconName="issue-open-m" class="mr-5" size="sm" />
<span>{{ i }}</span>
</span>
- <el-button class="btn" type="primary" @click="downloadTrace">
+ <el-button class="btn" size="small" type="primary" @click="downloadTrace">
{{ t("exportImage") }}
</el-button>
</div>
- <div>
+ <div class="list">
<Graph :data="data" :traceId="traceId" type="List" />
</div>
</div>
@@ -103,4 +103,8 @@ function downloadTrace() {
.btn {
float: right;
}
+
+.list {
+ height: calc(100% - 150px);
+}
</style>
diff --git a/src/views/dashboard/related/trace/utils/d3-trace-list.ts b/src/views/dashboard/related/trace/utils/d3-trace-list.ts
index dc2c16a..8d90dc6 100644
--- a/src/views/dashboard/related/trace/utils/d3-trace-list.ts
+++ b/src/views/dashboard/related/trace/utils/d3-trace-list.ts
@@ -40,8 +40,8 @@ export default class ListGraph {
constructor(el: HTMLDivElement, handleSelectSpan: (i: Trace) => void) {
this.handleSelectSpan = handleSelectSpan;
this.el = el;
- this.width = el.clientWidth - 10;
- this.height = el.clientHeight;
+ this.width = el.getBoundingClientRect().width - 10;
+ this.height = el.getBoundingClientRect().height - 10;
this.svg = d3
.select(this.el)
.append("svg")
@@ -306,8 +306,8 @@ export default class ListGraph {
if (!this.el) {
return;
}
- this.width = this.el.clientWidth - 20;
- this.height = this.el.clientHeight;
+ this.width = this.el.getBoundingClientRect().width - 20;
+ this.height = this.el.getBoundingClientRect().height - 10;
this.svg.attr("width", this.width).attr("height", this.height);
this.svg.select("g").attr("transform", () => `translate(160, 0)`);
const transform = d3.zoomTransform(this.svg).translate(0, 0);