fix: optimize metrics association (#196)

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,
     });
   }
 }

src/styles/reset.scss

@@ -159,6 +159,8 @@ pre {
 
 .el-drawer__header {
   margin-bottom: 0;
+  padding-left: 10px;
+  font-size: 16px;
 }
 
 .el-drawer__body {

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);

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"

src/views/dashboard/graphs/Area.vue

@@ -45,6 +45,7 @@ defineProps({
         filters: Filters;
         relatedTrace: RelatedTrace;
         id: string;
+        associate: { widgetId: string }[];
       }
     >,
     default: () => ({}),

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: () => ({}),

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: () => ({

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>

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"