From 14fa5d65b60570a77052793062eb5225de9132b5 Mon Sep 17 00:00:00 2001
From: Fine0830 <fanxue0830@gmail.com>
Date: Tue, 5 Nov 2024 11:21:08 +0800
Subject: [PATCH] feat: View data value related dashboards in TopList widgets
 (#425)

---
 src/hooks/data.ts                             | 10 ++++
 src/layout/components/NavBar.vue              |  2 +-
 src/locales/lang/en.ts                        |  2 +
 src/locales/lang/es.ts                        |  2 +
 src/locales/lang/zh.ts                        |  2 +
 src/types/dashboard.d.ts                      |  1 +
 src/views/dashboard/Widget.vue                |  1 +
 src/views/dashboard/configuration/Widget.vue  |  1 +
 .../configuration/widget/metric/Index.vue     | 47 +++++++++++++++++--
 src/views/dashboard/controls/Widget.vue       |  1 +
 src/views/dashboard/graphs/TopList.vue        | 31 ++++++++++--
 11 files changed, 91 insertions(+), 9 deletions(-)

diff --git a/src/hooks/data.ts b/src/hooks/data.ts
index abaa263c..1ad8867e 100644
--- a/src/hooks/data.ts
+++ b/src/hooks/data.ts
@@ -57,6 +57,16 @@ export const RespFields: Indexable = {
         name: id
         value
         refId: traceID
+        owner {
+          scope
+          serviceID
+          serviceName
+          normal
+          serviceInstanceID
+          serviceInstanceName
+          endpointID
+          endpointName
+        }
       }
     }
     error
diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue
index 292d4c5c..322abcba 100644
--- a/src/layout/components/NavBar.vue
+++ b/src/layout/components/NavBar.vue
@@ -61,7 +61,7 @@ limitations under the License. -->
         <Icon iconName="retry" :loading="appStore.autoRefresh" class="middle" />
       </span>
       <span class="version ml-5 cp">
-        <el-popover trigger="hover" width="250" placement="bottom" :content="appStore.version">
+        <el-popover trigger="hover" :width="250" placement="bottom" :content="appStore.version">
           <template #reference>
             <span>
               <Icon iconName="info_outline" size="middle" />
diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index 49cf581d..65722791 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -388,5 +388,7 @@ const msg = {
   hierarchyNodeDashboard: "As dashboard for Hierarchy Graph Node",
   valueMappings: "Value Mappings",
   mappingTip: "Notice: The mapping key is a Regex string, e.g. ^([0-9])$",
+  valueDashboard: "Data Value Related Dashboard",
+  viewValueDashboard: "View Dashboard",
 };
 export default msg;
diff --git a/src/locales/lang/es.ts b/src/locales/lang/es.ts
index 8cda2ce3..aff70878 100644
--- a/src/locales/lang/es.ts
+++ b/src/locales/lang/es.ts
@@ -388,5 +388,7 @@ const msg = {
   hierarchyNodeDashboard: "As dashboard for Hierarchy Graph Node",
   valueMappings: "Value Mappings",
   mappingTip: "Aviso: La clave de mapeo es una cadena Regex, p. ej. ^([0-9])$",
+  valueDashboard: "Data Value Related Dashboard",
+  viewValueDashboard: "View Dashboard",
 };
 export default msg;
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index 95389196..dca5b0bb 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -386,5 +386,7 @@ const msg = {
   hierarchyNodeDashboard: "作为层次图节点的dashboard",
   valueMappings: "值映射",
   mappingTip: "注意: 映射键是一个正则表达式字符串，比如 ^([0-9])$",
+  valueDashboard: "数据值相关的仪表板",
+  viewValueDashboard: "查看仪表板",
 };
 export default msg;
diff --git a/src/types/dashboard.d.ts b/src/types/dashboard.d.ts
index ccf98861..fa72ce4a 100644
--- a/src/types/dashboard.d.ts
+++ b/src/types/dashboard.d.ts
@@ -46,6 +46,7 @@ export interface LayoutConfig {
   relatedTrace?: RelatedTrace;
   subExpressions?: string[];
   subTypesOfMQE?: string[];
+  valueRelatedDashboard?: string;
 }
 export type RelatedTrace = {
   duration: DurationTime;
diff --git a/src/views/dashboard/Widget.vue b/src/views/dashboard/Widget.vue
index 30f02385..36219761 100644
--- a/src/views/dashboard/Widget.vue
+++ b/src/views/dashboard/Widget.vue
@@ -38,6 +38,7 @@ limitations under the License. -->
           typesOfMQE: typesOfMQE || [],
           subExpressions: config.subExpressions || [],
           subTypesOfMQE: config.subTypesOfMQE || [],
+          valueRelatedDashboard: config.valueRelatedDashboard,
         }"
         :needQuery="true"
       />
diff --git a/src/views/dashboard/configuration/Widget.vue b/src/views/dashboard/configuration/Widget.vue
index dc36d47f..3781b979 100644
--- a/src/views/dashboard/configuration/Widget.vue
+++ b/src/views/dashboard/configuration/Widget.vue
@@ -41,6 +41,7 @@ limitations under the License. -->
             typesOfMQE: dashboardStore.selectedGrid.typesOfMQE || [],
             subExpressions: dashboardStore.selectedGrid.subExpressions || [],
             subTypesOfMQE: dashboardStore.selectedGrid.subTypesOfMQE || [],
+            valueRelatedDashboard: dashboardStore.selectedGrid.valueRelatedDashboard,
           }"
           :needQuery="true"
           @expressionTips="getErrors"
diff --git a/src/views/dashboard/configuration/widget/metric/Index.vue b/src/views/dashboard/configuration/widget/metric/Index.vue
index 452d993e..f85bdd78 100644
--- a/src/views/dashboard/configuration/widget/metric/Index.vue
+++ b/src/views/dashboard/configuration/widget/metric/Index.vue
@@ -95,6 +95,20 @@ limitations under the License. -->
       {{ type.label }}
     </span>
   </div>
+  <div v-if="states.isTopList" class="mt-10">
+    <div>{{ t("valueDashboard") }}</div>
+    <div>
+      <Selector
+        :value="states.valueRelatedDashboard || ''"
+        :options="states.dashboardList"
+        size="small"
+        placeholder="Please select a dashboard name"
+        @change="changeValueDashboard"
+        class="selectors"
+        :clearable="true"
+      />
+    </div>
+  </div>
 </template>
 <script lang="ts" setup>
   import { reactive, ref, computed } from "vue";
@@ -140,21 +154,25 @@ limitations under the License. -->
     metricTypes: string[];
     metricTypeList: Option[][];
     isList: boolean;
+    isTopList: boolean;
     dashboardName: string;
     dashboardList: ((DashboardItem & { label: string; value: string }) | any)[];
     tips: string[];
     subTips: string[];
+    valueRelatedDashboard: string;
   }>({
     metrics: metrics.value.length ? metrics.value : [""],
     metricTypes: typesOfMQE.value.length ? typesOfMQE.value : [""],
     metricTypeList: [],
     isList: false,
+    isTopList: false,
     dashboardName: graph.value.dashboardName,
     dashboardList: [{ label: "", value: "" }],
     tips: [],
     subTips: [],
     subMetrics: subMetrics.value.length ? subMetrics.value : [""],
     subMetricTypes: subMetricTypes.value.length ? subMetricTypes.value : [""],
+    valueRelatedDashboard: dashboardStore.selectedGrid.valueRelatedDashboard,
   });
   const currentMetricConfig = ref<MetricConfigOpt>({
     unit: "",
@@ -163,6 +181,7 @@ limitations under the License. -->
     sortOrder: "DES",
   });
 
+  states.isTopList = graph.value.type === ChartTypes[4].value;
   states.isList = ListChartTypes.includes(graph.value.type);
   const defaultLen = ref<number>(states.isList ? 5 : 20);
 
@@ -187,9 +206,10 @@ limitations under the License. -->
     const arr = list.reduce((prev: (DashboardItem & { label: string; value: string })[], d: DashboardItem) => {
       if (d.layer === dashboardStore.layerId) {
         if (
-          (d.entity === EntityType[0].value && chart === "ServiceList") ||
-          (d.entity === EntityType[2].value && chart === "EndpointList") ||
-          (d.entity === EntityType[3].value && chart === "InstanceList")
+          (d.entity === EntityType[0].value && chart === ChartTypes[8].value) ||
+          (d.entity === EntityType[2].value && chart === ChartTypes[9].value) ||
+          (d.entity === EntityType[3].value && chart === ChartTypes[10].value) ||
+          states.isTopList
         ) {
           prev.push({
             ...d,
@@ -254,9 +274,28 @@ limitations under the License. -->
       typesOfMQE: states.metricTypes,
     });
     emit("update", params.source || {});
+    if (states.isTopList) {
+      const values: any = Object.values(params.source)[0];
+      if (!values) {
+        return;
+      }
+      states.dashboardList = states.dashboardList.filter((d) => d.entity === values[0].owner.scope);
+    }
   }
 
-  function changeDashboard(opt: any) {
+  function changeValueDashboard(opt: { value: string }[]) {
+    if (!opt[0]) {
+      states.valueRelatedDashboard = "";
+    } else {
+      states.valueRelatedDashboard = opt[0].value;
+    }
+    dashboardStore.selectWidget({
+      ...dashboardStore.selectedGrid,
+      valueRelatedDashboard: states.valueRelatedDashboard,
+    });
+  }
+
+  function changeDashboard(opt: { value: string }[]) {
     if (!opt[0]) {
       states.dashboardName = "";
     } else {
diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue
index db73fe39..fdd8ecac 100644
--- a/src/views/dashboard/controls/Widget.vue
+++ b/src/views/dashboard/controls/Widget.vue
@@ -61,6 +61,7 @@ limitations under the License. -->
           typesOfMQE: typesOfMQE || [],
           subExpressions: data.subExpressions || [],
           subTypesOfMQE: data.subTypesOfMQE || [],
+          valueRelatedDashboard: data.valueRelatedDashboard,
         }"
         :needQuery="needQuery"
         @click="clickHandle"
diff --git a/src/views/dashboard/graphs/TopList.vue b/src/views/dashboard/graphs/TopList.vue
index 1b5b427d..2c1349f3 100644
--- a/src/views/dashboard/graphs/TopList.vue
+++ b/src/views/dashboard/graphs/TopList.vue
@@ -35,6 +35,9 @@ limitations under the License. -->
           <div class="operation" @click="viewTrace(i)" v-show="refIdType === RefIdTypes[0].value">
             <span>{{ t("viewTrace") }}</span>
           </div>
+          <div class="operation" @click="viewDashboard(i)">
+            <span>{{ t("viewValueDashboard") }}</span>
+          </div>
         </el-popover>
       </div>
       <el-progress
@@ -61,12 +64,14 @@ limitations under the License. -->
   import type { PropType } from "vue";
   import { useI18n } from "vue-i18n";
   import { computed, ref } from "vue";
+  import router from "@/router";
+  import { useDashboardStore } from "@/store/modules/dashboard";
   import copy from "@/utils/copy";
-  import { TextColors } from "@/views/dashboard/data";
+  import { TextColors, MetricCatalog } from "@/views/dashboard/data";
   import Trace from "@/views/dashboard/related/trace/Index.vue";
   import { WidgetType, QueryOrders, Status, RefIdTypes, ExpressionResultType } from "@/views/dashboard/data";
 
-  /*global defineProps */
+  /*global defineProps, Recordable*/
   const props = defineProps({
     data: {
       type: Object as PropType<{
@@ -80,12 +85,14 @@ limitations under the License. -->
         expressions: string[];
         typesOfMQE: string[];
         relatedTrace: any;
+        valueRelatedDashboard: string;
       }>,
       default: () => ({ color: "purple" }),
     },
     intervalTime: { type: Array as PropType<string[]>, default: () => [] },
   });
   const { t } = useI18n();
+  const dashboardStore = useDashboardStore();
   const showTrace = ref<boolean>(false);
   const traceOptions = ref<{ type: string; filters?: unknown }>({
     type: WidgetType.Trace,
@@ -122,6 +129,23 @@ limitations under the License. -->
     };
     showTrace.value = true;
   }
+  function viewDashboard(item: Recordable) {
+    const { owner } = item;
+    let path;
+    if (owner.scope === MetricCatalog.SERVICE) {
+      path = `/dashboard/${dashboardStore.layerId}/${owner.scope}/${owner.serviceID}/${props.config.valueRelatedDashboard}`;
+    }
+    if (owner.scope === MetricCatalog.SERVICE_INSTANCE) {
+      path = `/dashboard/${dashboardStore.layerId}/${owner.scope}/${owner.serviceID}/${owner.serviceInstanceID}/${props.config.valueRelatedDashboard}`;
+    }
+    if (owner.scope === MetricCatalog.ENDPOINT) {
+      path = `/dashboard/${dashboardStore.layerId}/${owner.scope}/${owner.serviceID}/${owner.endpointID}/${props.config.valueRelatedDashboard}`;
+    }
+    if (!path) {
+      return;
+    }
+    router.push(path);
+  }
 </script>
 <style lang="scss" scoped>
   .top-list {
@@ -187,11 +211,10 @@ limitations under the License. -->
   }
 
   .operation {
-    padding: 5px 0;
+    padding: 5px;
     color: $font-color;
     cursor: pointer;
     position: relative;
-    text-align: center;
     font-size: $font-size-smaller;
 
     &:hover {