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 221751f fix: optimize metrics association (#196)
221751f is described below
commit 221751f034763d6f56ab7b4cb154abfa890f370c
Author: Fine0830 <[email protected]>
AuthorDate: Tue Nov 29 18:47:53 2022 +0800
fix: optimize metrics association (#196)
---
src/components/Graph.vue | 38 +++++++++++++++-------
src/styles/reset.scss | 2 ++
.../configuration/widget/RelatedTraceOptions.vue | 2 +-
src/views/dashboard/controls/Widget.vue | 1 +
src/views/dashboard/graphs/Area.vue | 1 +
src/views/dashboard/graphs/Bar.vue | 8 ++++-
src/views/dashboard/graphs/Line.vue | 2 ++
src/views/dashboard/graphs/TopList.vue | 1 +
src/views/dashboard/related/trace/Header.vue | 2 +-
9 files changed, 42 insertions(+), 15 deletions(-)
diff --git a/src/components/Graph.vue b/src/components/Graph.vue
index f006942..8bcd774 100644
--- a/src/components/Graph.vue
+++ b/src/components/Graph.vue
@@ -16,13 +16,13 @@ limitations under the License. -->
<div class="chart" ref="chartRef"
:style="`height:${height};width:${width};`">
<div v-if="!available" class="no-data">No Data</div>
<div class="menus" v-show="visMenus" ref="menus">
- <div class="tools" @click="associateMetrics">
+ <div class="tools" @click="associateMetrics" v-if="associate.length">
{{ t("associateMetrics") }}
</div>
<div
class="tools"
@click="viewTrace"
- v-if="props.relatedTrace && props.relatedTrace.enableRelate"
+ v-if="relatedTrace && relatedTrace.enableRelate"
>
{{ t("viewTrace") }}
</div>
@@ -33,6 +33,7 @@ limitations under the License. -->
:destroy-on-close="true"
:before-close="() => (showTrace = false)"
:append-to-body="true"
+ title="The Related Traces"
>
<Trace :data="traceOptions" />
</el-drawer>
@@ -84,6 +85,10 @@ const props = defineProps({
relatedTrace: {
type: Object as PropType<RelatedTrace>,
},
+ associate: {
+ type: Array as PropType<{ widgetId: string }[]>,
+ default: () => [],
+ },
});
const available = computed(
() =>
@@ -113,15 +118,15 @@ function instanceEvent() {
visMenus.value = true;
const w = chartRef.value.getBoundingClientRect().width || 0;
const h = chartRef.value.getBoundingClientRect().height || 0;
- if (w - params.event.offsetX > 125) {
+ if (w - params.event.offsetX > 120) {
menus.value.style.left = params.event.offsetX + "px";
} else {
- menus.value.style.left = params.event.offsetX - 125 + "px";
+ menus.value.style.left = params.event.offsetX - 120 + "px";
}
- if (h - params.event.offsetY < 60) {
- menus.value.style.top = params.event.offsetY - 60 + "px";
+ if (h - params.event.offsetY < 50) {
+ menus.value.style.top = params.event.offsetY - 40 + "px";
} else {
- menus.value.style.top = params.event.offsetY + 5 + "px";
+ menus.value.style.top = params.event.offsetY + 2 + "px";
}
});
document.addEventListener(
@@ -143,11 +148,14 @@ function instanceEvent() {
function associateMetrics() {
emits("select", currentParams.value);
- visMenus.value = true;
- updateOptions();
+ const { dataIndex, seriesIndex } = currentParams.value || {
+ dataIndex: 0,
+ seriesIndex: 0,
+ };
+ updateOptions({ dataIndex, seriesIndex });
}
-function updateOptions() {
+function updateOptions(params?: { dataIndex: number; seriesIndex: number }) {
const instance = getInstance();
if (!instance) {
return;
@@ -162,8 +170,14 @@ function updateOptions() {
} else {
instance.dispatchAction({
type: "updateAxisPointer",
- dataIndex: props.filters.dataIndex,
- seriesIndex: 0,
+ dataIndex: params ? params.dataIndex : props.filters.dataIndex,
+ seriesIndex: params ? params.seriesIndex : 0,
+ });
+ const ids = props.option.series.map((_: unknown, index: number) => index);
+ instance.dispatchAction({
+ type: "highlight",
+ dataIndex: params ? params.dataIndex : props.filters.dataIndex,
+ seriesIndex: ids,
});
}
}
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
index b5de79f..2c3f224 100644
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@@ -159,6 +159,8 @@ pre {
.el-drawer__header {
margin-bottom: 0;
+ padding-left: 10px;
+ font-size: 16px;
}
.el-drawer__body {
diff --git a/src/views/dashboard/configuration/widget/RelatedTraceOptions.vue
b/src/views/dashboard/configuration/widget/RelatedTraceOptions.vue
index 7db90f1..352c1b4 100644
--- a/src/views/dashboard/configuration/widget/RelatedTraceOptions.vue
+++ b/src/views/dashboard/configuration/widget/RelatedTraceOptions.vue
@@ -85,7 +85,7 @@ const Status = [
const { t } = useI18n();
const dashboardStore = useDashboardStore();
const { graph, relatedTrace } = dashboardStore.selectedGrid;
-const traceOpt = (relatedTrace && relatedTrace.traceOpt) || {};
+const traceOpt = relatedTrace || {};
const status = ref<string>(traceOpt.status || Status[0].value);
const queryOrder = ref<string>(traceOpt.queryOrder || QueryOrders[0].value);
const latency = ref<boolean>(traceOpt.latency || false);
diff --git a/src/views/dashboard/controls/Widget.vue
b/src/views/dashboard/controls/Widget.vue
index cccd42f..ccb8f8e 100644
--- a/src/views/dashboard/controls/Widget.vue
+++ b/src/views/dashboard/controls/Widget.vue
@@ -65,6 +65,7 @@ limitations under the License. -->
metricConfig: data.metricConfig || [],
filters: data.filters || {},
relatedTrace: data.relatedTrace || {},
+ associate: data.associate || [],
}"
:needQuery="needQuery"
@click="clickHandle"
diff --git a/src/views/dashboard/graphs/Area.vue
b/src/views/dashboard/graphs/Area.vue
index 5e4336c..018813b 100644
--- a/src/views/dashboard/graphs/Area.vue
+++ b/src/views/dashboard/graphs/Area.vue
@@ -45,6 +45,7 @@ defineProps({
filters: Filters;
relatedTrace: RelatedTrace;
id: string;
+ associate: { widgetId: string }[];
}
>,
default: () => ({}),
diff --git a/src/views/dashboard/graphs/Bar.vue
b/src/views/dashboard/graphs/Bar.vue
index ad52e48..ec5cf21 100644
--- a/src/views/dashboard/graphs/Bar.vue
+++ b/src/views/dashboard/graphs/Bar.vue
@@ -14,7 +14,12 @@ See the License for the specific language governing
permissions and
limitations under the License. -->
<template>
<div class="graph" :class="isRight ? 'flex-h' : 'flex-v'">
- <Graph :option="option" @select="clickEvent" :filters="config.filters" />
+ <Graph
+ :option="option"
+ @select="clickEvent"
+ :filters="config.filters"
+ :associate="config.associate || []"
+ />
<Legend :config="config.legend" :data="data" :intervalTime="intervalTime"
/>
</div>
</template>
@@ -44,6 +49,7 @@ const props = defineProps({
filters: Filters;
relatedTrace: RelatedTrace;
id: string;
+ associate: { widgetId: string }[];
}
>,
default: () => ({}),
diff --git a/src/views/dashboard/graphs/Line.vue
b/src/views/dashboard/graphs/Line.vue
index c26c6b1..1d0fdb7 100644
--- a/src/views/dashboard/graphs/Line.vue
+++ b/src/views/dashboard/graphs/Line.vue
@@ -19,6 +19,7 @@ limitations under the License. -->
@select="clickEvent"
:filters="config.filters"
:relatedTrace="config.relatedTrace"
+ :associate="config.associate || []"
/>
<Legend :config="config.legend" :data="data" :intervalTime="intervalTime"
/>
</div>
@@ -50,6 +51,7 @@ const props = defineProps({
filters?: Filters;
relatedTrace?: RelatedTrace;
id?: string;
+ associate: { widgetId: string }[];
}
>,
default: () => ({
diff --git a/src/views/dashboard/graphs/TopList.vue
b/src/views/dashboard/graphs/TopList.vue
index aac7fce..9630cab 100644
--- a/src/views/dashboard/graphs/TopList.vue
+++ b/src/views/dashboard/graphs/TopList.vue
@@ -58,6 +58,7 @@ limitations under the License. -->
:destroy-on-close="true"
:before-close="() => (showTrace = false)"
:append-to-body="true"
+ title="The Related Traces"
>
<Trace :data="traceOptions" />
</el-drawer>
diff --git a/src/views/dashboard/related/trace/Header.vue
b/src/views/dashboard/related/trace/Header.vue
index 2cdd71b..893e2b5 100644
--- a/src/views/dashboard/related/trace/Header.vue
+++ b/src/views/dashboard/related/trace/Header.vue
@@ -18,7 +18,7 @@ limitations under the License. -->
<el-input size="small" v-model="traceId" class="trace-id" />
</div>
<div class="conditions flex-h" v-else>
- <el-radio-group v-model="conditions" @change="changeCondition">
+ <el-radio-group v-model="conditions" @change="changeCondition"
size="small">
<el-radio-button
v-for="(item, index) in items"
:label="item.label"
