add metric values

src/assets/icons/info_outline.svg

@@ -13,6 +13,5 @@ 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 version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-<title>info_outline</title>
 <path d="M11.016 9v-2.016h1.969v2.016h-1.969zM12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93zM11.016 17.016v-6h1.969v6h-1.969z"></path>
 </svg>

src/hooks/useAssociateProcessor.ts

@@ -1,4 +1,3 @@
-import { Option } from "@/types/app";
 /**
  * Licensed to the Apache Software Foundation (ASF) under one or more
  * contributor license agreements.  See the NOTICE file distributed with
@@ -96,11 +95,14 @@ export default function associateProcessor(props: any) {
     const status = relatedTrace.status;
     const queryOrder = relatedTrace.queryOrder;
     const latency = relatedTrace.latency;
-    let latencyList = undefined;
-    const series = props.option.series;
-    // console.log(series);
-    if (latency && series) {
-      latencyList = series.map(
+    const series = props.option.series || [];
+    const item: any = {
+      duration,
+      queryOrder,
+      status,
+    };
+    if (latency) {
+      const latencyList = series.map(
         (d: { name: string; data: number[][] }, index: number) => {
           const data = [
             d.data[currentParams.dataIndex][1],
@@ -118,13 +120,18 @@ export default function associateProcessor(props: any) {
           };
         }
       );
+      item.latency = latencyList;
     }
-    const item = {
-      duration,
-      queryOrder,
-      status,
-      latency: latencyList,
-    };
+    const value = series.map(
+      (d: { name: string; data: number[][] }, index: number) => {
+        return {
+          label: d.name,
+          value: String(index),
+          data: d.data[currentParams.dataIndex][1],
+        };
+      }
+    );
+    item.metricValue = value;
     return item;
   }
   return { eventAssociate, traceFilters };

src/locales/lang/en.ts

@@ -162,6 +162,7 @@ const msg = {
   setLatencyDuration: "Set Latency Range",
   queryOrder: "Query Order",
   latency: "Latency",
+  metricValues: "Metric Values",
   seconds: "Seconds",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",

src/locales/lang/es.ts

@@ -159,6 +159,7 @@ const msg = {
   apisix: "APISIX",
   queryOrder: "Orden de consulta",
   latency: "Retraso",
+  metricValues: "Valor métrico",
   seconds: "Segundos",
   hourTip: "Seleccione Hora",
   minuteTip: "Seleccione Minuto",

src/locales/lang/zh.ts

@@ -159,6 +159,7 @@ const msg = {
   setLatencyDuration: "设置延时范围",
   queryOrder: "查询顺序",
   latency: "延迟",
+  metricValues: "指标值",
   seconds: "秒",
   hourTip: "选择小时",
   minuteTip: "选择分钟",

src/views/dashboard/related/trace/Header.vue

@@ -25,13 +25,26 @@ limitations under the License. -->
       </el-radio-button>
     </el-radio-group>
     <Selector
-      v-if="conditions === 'latency'"
+      v-if="conditions === 'latency' && filters.latency.length > 1"
       :value="filters.latency[0].value"
       :options="filters.latency"
       placeholder="Select a option"
       @change="changeLatency"
       class="ml-10"
     />
+    <el-popover trigger="hover" width="250" placement="bottom" effect="light">
+      <template #reference>
+        <div class="cp metric-value">
+          <Icon iconName="info_outline" size="middle" />
+        </div>
+      </template>
+      <div>
+        <div class="bt-10">{{ t("metricValues") }}</div>
+        <div v-for="metric in filters.metricValue" :key="metric.value">
+          {{ metric.label }}: {{ metric.data }}
+        </div>
+      </div>
+    </el-popover>
   </div>
   <div class="flex-h">
     <ConditionTags :type="'TRACE'" @update="updateTags" />
@@ -94,10 +107,10 @@ const currentLatency = ref<number[]>(
 init();
 
 async function init() {
-  // console.log(filters);
+  console.log(filters);
   if (!filters.id) {
     for (const d of Object.keys(filters)) {
-      if (filters[d] && d !== "duration") {
+      if (filters[d] && !["metricValue", "duration"].includes(d)) {
         items.value.push({ label: d, value: FiltersKeys[d] });
       }
     }
@@ -219,4 +232,8 @@ onUnmounted(() => {
 .search-btn {
   margin-top: 2px;
 }
+
+.metric-value {
+  padding: 10px 5px;
+}
 </style>