fix: polish the hierarchy topology and dashboard configs (#362)

2025-05-01 07:42:52 +00:00 · 2024-01-16 17:04:21 +08:00 · 2024-01-16 17:04:21 +08:00 · 5061b19cf7
commit 5061b19cf7
parent f809123b4f
6 changed files with 78 additions and 109 deletions
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@ -385,7 +385,7 @@ const msg = {
  traceDesc:
    "The trace segment serves as a representation of a trace portion executed within one single OS process, such as a JVM. It comprises a collection of spans, typically associated with and collected from a single request or execution context.",
  tabExpressions: "Tab Expressions",
-  hierarchyServicesSettings: "Service Hierarchy Topology Settings",
-  hierarchyNodeMetrics: "Metrics related with hierarchy topology nodes",
+  hierarchyNodeMetrics: "Metrics for Hierarchy Graph Node",
+  hierarchyNodeDashboard: "As dashboard for Hierarchy Graph Node",
 };
 export default msg;
--- a/src/locales/lang/es.ts
+++ b/src/locales/lang/es.ts
@ -385,7 +385,7 @@ const msg = {
  traceDesc:
    "The trace segment serves as a representation of a trace portion executed within one single OS process, such as a JVM. It comprises a collection of spans, typically associated with and collected from a single request or execution context.",
  tabExpressions: "Tab Expressions",
-  hierarchyServicesSettings: "Service Hierarchy Topology Settings",
-  hierarchyNodeMetrics: "Metrics related with hierarchy topology nodes",
+  hierarchyNodeMetrics: "Metrics for Hierarchy Graph Node",
+  hierarchyNodeDashboard: "As dashboard for Hierarchy Graph Node",
 };
 export default msg;
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@ -383,7 +383,7 @@ const msg = {
  traceDesc:
    "Trace Segment代表在单一操作系统进程（例如JVM）中执行的追踪部分。它包含了一组跨度（spans），这些跨度通常与单一请求或执行上下文关联。",
  tabExpressions: "Tab表达式",
-  hierarchyServicesSettings: "层次结构服务拓扑设置",
-  hierarchyNodeMetrics: "层级拓扑节点关联的指标",
+  hierarchyNodeMetrics: "层次图节点的指标",
+  hierarchyNodeDashboard: "作为层次图节点的dashboard",
 };
 export default msg;
--- a/src/views/dashboard/List.vue
+++ b/src/views/dashboard/List.vue
@ -73,23 +73,7 @@ limitations under the License. -->
            <span v-else> -- </span>
          </template>
        </el-table-column>
-        <el-table-column prop="isDefault" label="Default Dashboard" width="140">
-          <template #default="scope">
-            <el-popconfirm
-              :title="t('rootTitle')"
-              @confirm="handleTopLevel(scope.row)"
-              v-if="[EntityType[0].value, EntityType[3].value].includes(scope.row.entity)"
-            >
-              <template #reference>
-                <el-button size="small" style="width: 80px">
-                  {{ scope.row.isDefault ? "Disable" : "Enable" }}
-                </el-button>
-              </template>
-            </el-popconfirm>
-            <span v-else> -- </span>
-          </template>
-        </el-table-column>
-        <el-table-column label="Operations" width="300">
+        <el-table-column label="Operations" width="400">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)">
              {{ t("edit") }}
@ -102,7 +86,7 @@ limitations under the License. -->
              size="small"
              @click="handleEditMQE(scope.row)"
            >
-              MQE
+              Hierarchy Graph
            </el-button>
            <span v-else class="placeholder"></span>
            <el-popconfirm :title="t('deleteTitle')" @confirm="handleDelete(scope.row)">
@ -147,9 +131,13 @@ limitations under the License. -->
          @next-click="changePage"
        />
      </div>
-      <el-dialog v-model="MQEVisible" title="Edit MQE" width="400px">
+      <el-dialog v-model="MQEVisible" title="Hierarchy Graph" width="400px">
+        <div class="mb-10">
+          <span class="label mr-10">{{ t("hierarchyNodeDashboard") }}</span>
+          <el-switch v-model="currentRow.isDefault" style="height: 25px" />
+        </div>
        <div>
-          <span>{{ t("hierarchyNodeMetrics") }}</span>
+          <span class="label">{{ t("hierarchyNodeMetrics") }}</span>
          <el-popover placement="left" :width="400" trigger="click">
            <template #reference>
              <span>
@ -238,10 +226,14 @@ limitations under the License. -->
  }

  async function saveMQE() {
+    if (!currentRow.value.expressionsConfig) {
+      return;
+    }
    const items: DashboardItem[] = [];
    loading.value = true;
    for (const d of dashboardStore.dashboards) {
      if (d.id === currentRow.value.id) {
+        d.isDefault = currentRow.value.isDefault || false;
        d.expressions = currentRow.value.expressions;
        d.expressionsConfig = currentRow.value.expressionsConfig;
        const key = [d.layer, d.entity, d.name].join("_");
@ -269,6 +261,38 @@ limitations under the License. -->
          loading.value = false;
          return;
        }
+      } else {
+        if (
+          d.layer === currentRow.value.layer &&
+          [EntityType[0].value].includes(d.entity) &&
+          !currentRow.value.isDefault &&
+          d.isDefault
+        ) {
+          d.isDefault = false;
+          const key = [d.layer, d.entity, d.name].join("_");
+          const layout = sessionStorage.getItem(key) || "{}";
+          const c = {
+            ...JSON.parse(layout).configuration,
+            ...d,
+          };
+          const setting = {
+            id: d.id,
+            configuration: JSON.stringify(c),
+          };
+          const res = await dashboardStore.updateDashboard(setting);
+          if (res.data.changeTemplate.status) {
+            sessionStorage.setItem(
+              key,
+              JSON.stringify({
+                id: d.id,
+                configuration: c,
+              }),
+            );
+          } else {
+            loading.value = false;
+            return;
+          }
+        }
      }
      items.push(d);
    }
@ -497,71 +521,7 @@ limitations under the License. -->
    searchDashboards(currentPage.value);
    loading.value = false;
  }
-  async function handleTopLevel(row: DashboardItem) {
-    const items: DashboardItem[] = [];
-    loading.value = true;
-    for (const d of dashboardStore.dashboards) {
-      if (d.id === row.id) {
-        d.isDefault = !row.isDefault;
-        const key = [d.layer, d.entity, d.name].join("_");
-        const layout = sessionStorage.getItem(key) || "{}";
-        const c = {
-          ...JSON.parse(layout).configuration,
-          ...d,
-        };
-        delete c.id;
-        const setting = {
-          id: d.id,
-          configuration: JSON.stringify(c),
-        };

-        const res = await dashboardStore.updateDashboard(setting);
-        if (res.data.changeTemplate.status) {
-          sessionStorage.setItem(
-            key,
-            JSON.stringify({
-              id: d.id,
-              configuration: c,
-            }),
-          );
-        } else {
-          loading.value = false;
-          return;
-        }
-      } else {
-        if (d.layer === row.layer && [EntityType[0].value].includes(d.entity) && !row.isDefault && d.isDefault) {
-          d.isDefault = false;
-          const key = [d.layer, d.entity, d.name].join("_");
-          const layout = sessionStorage.getItem(key) || "{}";
-          const c = {
-            ...JSON.parse(layout).configuration,
-            ...d,
-          };
-          const setting = {
-            id: d.id,
-            configuration: JSON.stringify(c),
-          };
-          const res = await dashboardStore.updateDashboard(setting);
-          if (res.data.changeTemplate.status) {
-            sessionStorage.setItem(
-              key,
-              JSON.stringify({
-                id: d.id,
-                configuration: c,
-              }),
-            );
-          } else {
-            loading.value = false;
-            return;
-          }
-        }
-      }
-      items.push(d);
-    }
-    dashboardStore.resetDashboards(items);
-    searchDashboards(currentPage.value);
-    loading.value = false;
-  }
  function handleRename(row: DashboardItem) {
    ElMessageBox.prompt("Please input dashboard name", "Edit", {
      confirmButtonText: "OK",
@ -724,10 +684,14 @@ limitations under the License. -->

  .placeholder {
    display: inline-block;
-    width: 75px;
+    width: 136px;
  }

  .expressions {
    height: 300px;
  }
+
+  .label {
+    font-size: 12px;
+  }
 </style>
--- a/src/views/dashboard/related/topology/pod/InstanceMap.vue
+++ b/src/views/dashboard/related/topology/pod/InstanceMap.vue
@ -152,16 +152,18 @@ limitations under the License. -->
    const origin = dashboardStore.entity;
    event.stopPropagation();
    hideTip();
-    const dashboard =
-      getDashboard(
-        {
-          layer: d.layer || "",
-          entity: EntityType[3].value,
-        },
-        ConfigFieldTypes.ISDEFAULT,
-      ).dashboard || {};
+    const { dashboard } = getDashboard(
+      {
+        layer: d.layer || "",
+        entity: EntityType[3].value,
+      },
+      ConfigFieldTypes.ISDEFAULT,
+    );
+    if (!dashboard) {
+      return;
+    }
    const name = dashboard.name;
-    const path = `/dashboard/${dashboardStore.layerId}/${EntityType[3].value}/${d.serviceId}/${d.key}/${name}`;
+    const path = `/dashboard/${dashboard.layer}/${EntityType[3].value}/${d.serviceId}/${d.key}/${name}`;
    const routeUrl = router.resolve({ path });

    window.open(routeUrl.href, "_blank");
--- a/src/views/dashboard/related/topology/service/HierarchyMap.vue
+++ b/src/views/dashboard/related/topology/service/HierarchyMap.vue
@ -160,16 +160,19 @@ limitations under the License. -->
    const origin = dashboardStore.entity;
    event.stopPropagation();
    hideTip();
-    const dashboard =
-      getDashboard(
-        {
-          layer: d.layer || "",
-          entity: EntityType[0].value,
-        },
-        ConfigFieldTypes.ISDEFAULT,
-      ).dashboard || {};
+    const { dashboard } = getDashboard(
+      {
+        layer: d.layer || "",
+        entity: EntityType[0].value,
+      },
+      ConfigFieldTypes.ISDEFAULT,
+    );
+    if (!dashboard) {
+      return;
+    }
+
    const name = dashboard.name;
-    const path = `/dashboard/${dashboardStore.layerId}/${EntityType[0].value}/${d.key}/${name}`;
+    const path = `/dashboard/${dashboard.layer}/${EntityType[0].value}/${d.key}/${name}`;
    const routeUrl = router.resolve({ path });

    window.open(routeUrl.href, "_blank");