add widget name

src/hooks/useDashboardsSession.ts

@@ -27,6 +27,19 @@ export default function getDashboard(param: {
       d.entity === param.entity &&
       d.layer === param.layer
   );
-
+  const widgets = [];
-  return dashboard;
+  for (const item of dashboard) {
+    if (item.type === "Tab") {
+      if (item.children && item.children.length) {
+        for (const child of item.children) {
+          if (child.children && child.children.length) {
+            widgets.push(...child.children);
+          }
+        }
+      }
+    } else {
+      widgets.push(item);
+    }
+  }
+  return { dashboard, widgets };
 }

src/types/dashboard.d.ts

@@ -36,6 +36,7 @@ export interface LayoutConfig {
   children?: { name: string; children: LayoutConfig[] }[];
   activedTabIndex?: number;
   metricConfig?: MetricConfigOpt[];
+  id?: string;
 }
 
 export type MetricConfigOpt = {
@@ -48,6 +49,7 @@ export type MetricConfigOpt = {
 };
 
 export interface WidgetConfig {
+  name?: string;
   title?: string;
   tips?: string;
 }

src/views/dashboard/Edit.vue

@@ -41,6 +41,7 @@ import Tool from "./panel/Tool.vue";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import Configuration from "./configuration";
+import { LayoutConfig } from "@/types/dashboard";
 
 export default defineComponent({
   name: "Dashboard",
@@ -79,7 +80,7 @@ export default defineComponent({
         });
       }
     }
-    function setWidgetsID(widgets: any[]) {
+    function setWidgetsID(widgets: LayoutConfig[]) {
       for (const item of widgets) {
         item.id = item.i;
         if (item.type === "Tab") {

src/views/dashboard/configuration/widget/AssociateOptions.vue

@@ -29,6 +29,8 @@ limitations under the License. -->
 import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
+import getDashboard from "@/hooks/useDashboardsSession";
+import { LayoutConfig } from "@/types/dashboard";
 
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
@@ -41,45 +43,24 @@ const widgets = computed(() => {
   const isRank = ["TopList"].includes(
     dashboardStore.selectedGrid.graph && dashboardStore.selectedGrid.graph.type
   );
-  const all = [];
+  const w = getDashboard(dashboardStore.currentDashboard).widgets;
-  for (const item of dashboardStore.layout) {
+  const items = w.filter(
-    if (item.type === "Tab") {
+    (d: { value: string; label: string } & LayoutConfig) => {
-      if (item.children && item.children.length) {
+      if (dashboardStore.selectedGrid.id !== d.id) {
-        for (const child of item.children) {
+        if (isLinear) {
-          if (child.children && child.children.length) {
+          d.value = d.id || "";
-            const items = child.children.filter(
+          d.label = (d.widget && d.widget.title) || d.type || "";
-              (d: { i: string; index: string } | any) => {
+          return d;
-                if (isLinear) {
+        }
-                  d.value = d.id;
+        if (isRank && d.type !== "Widget") {
-                  d.label = (d.widget && d.widget.title) || d.type || "";
+          d.value = d.id || "";
-                  return d;
+          d.label = (d.widget && d.widget.title) || d.type || "";
-                }
+          return d;
-                if (isRank && d.type !== "Widget") {
-                  d.value = d.id;
-                  d.label = (d.widget && d.widget.title) || d.type || "";
-                  return d;
-                }
-              }
-            );
-            all.push(...items);
-          }
         }
       }
-    } else {
-      if (isLinear) {
-        item.value = item.id;
-        item.label = (item.widget && item.widget.title) || item.type || "";
-        all.push(item);
-        return;
-      }
-      if (isRank && item.type !== "Widget") {
-        item.value = item.id;
-        item.label = (item.widget && item.widget.title) || item.type || "";
-        all.push(item);
-      }
     }
-  }
+  );
-  return all;
+  return items;
 });
 function updateWidgetConfig(param: { [key: string]: string }) {
   const key = Object.keys(param)[0];

src/views/dashboard/configuration/widget/WidgetOptions.vue

@@ -13,6 +13,16 @@ 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. -->
 <template>
+  <div class="item">
+    <span class="label">{{ t("name") }}</span>
+    <el-input
+      class="input"
+      v-model="name"
+      size="small"
+      placeholder="Please input name"
+      @change="updateWidgetName({ name: encodeURIComponent(name) })"
+    />
+  </div>
   <div class="item">
     <span class="label">{{ t("title") }}</span>
     <el-input
@@ -37,13 +47,17 @@ limitations under the License. -->
 <script lang="ts" setup>
 import { ref } from "vue";
 import { useI18n } from "vue-i18n";
+import { ElMessage } from "element-plus";
 import { useDashboardStore } from "@/store/modules/dashboard";
+import getDashboard from "@/hooks/useDashboardsSession";
+import { LayoutConfig } from "@/types/dashboard";
 
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
 const widget = dashboardStore.selectedGrid.widget || {};
 const title = ref<string>(widget.title || "");
 const tips = ref<string>(widget.tips || "");
+const name = ref<string>(widget.name || "");
 
 function updateWidgetConfig(param: { [key: string]: string }) {
   const key = Object.keys(param)[0];
@@ -57,6 +71,19 @@ function updateWidgetConfig(param: { [key: string]: string }) {
   };
   dashboardStore.selectWidget({ ...selectedGrid, widget });
 }
+function updateWidgetName(param: { [key: string]: string }) {
+  const key = Object.keys(param)[0];
+  const n = decodeURIComponent(param[key]);
+  const widgets = getDashboard(dashboardStore.currentDashboard).widgets;
+  const item = widgets.find(
+    (d: LayoutConfig) => d.widget && d.widget.name === n
+  );
+  if (item) {
+    ElMessage.warning("Duplicate name");
+    return;
+  }
+  updateWidgetConfig(param);
+}
 </script>
 <style lang="scss" scoped>
 .label {

src/views/dashboard/graphs/EndpointList.vue

@@ -147,17 +147,17 @@ async function queryEndpointMetrics(currentPods: Endpoint[]) {
   endpoints.value = currentPods;
 }
 function clickEndpoint(scope: any) {
-  const d = getDashboard({
+  const { dashboard } = getDashboard({
     name: props.config.dashboardName,
     layer: dashboardStore.layerId,
     entity: EntityType[2].value,
   });
-  if (!d) {
+  if (!dashboard) {
     ElMessage.error("No this dashboard");
     return;
   }
   router.push(
-    `/dashboard/${d.layer}/${d.entity}/${selectorStore.currentService.id}/${scope.row.id}/${d.name}`
+    `/dashboard/${dashboard.layer}/${dashboard.entity}/${selectorStore.currentService.id}/${scope.row.id}/${dashboard.name}`
   );
 }
 async function searchList() {

src/views/dashboard/graphs/InstanceList.vue

@@ -180,19 +180,19 @@ async function queryInstanceMetrics(currentInstances: Instance[]) {
 }
 
 function clickInstance(scope: any) {
-  const d = getDashboard({
+  const { dashboard } = getDashboard({
     name: props.config.dashboardName,
     layer: dashboardStore.layerId,
     entity: EntityType[3].value,
   });
-  if (!d) {
+  if (!dashboard) {
     ElMessage.error("No this dashboard");
     return;
   }
   router.push(
-    `/dashboard/${d.layer}/${d.entity}/${selectorStore.currentService.id}/${
+    `/dashboard/${dashboard.layer}/${dashboard.entity}/${
-      scope.row.id
+      selectorStore.currentService.id
-    }/${d.name.split(" ").join("-")}`
+    }/${scope.row.id}/${dashboard.name.split(" ").join("-")}`
   );
 }
 

src/views/dashboard/graphs/ServiceList.vue

@@ -179,16 +179,16 @@ function setServices(arr: (Service & { merge: boolean })[]) {
 }
 
 function clickService(scope: any) {
-  const d = getDashboard({
+  const { dashboard } = getDashboard({
     name: props.config.dashboardName,
     layer: dashboardStore.layerId,
     entity: EntityType[0].value,
   });
-  if (!d) {
+  if (!dashboard) {
     ElMessage.error("No this dashboard");
     return;
   }
-  const path = `/dashboard/${d.layer}/${d.entity}/${scope.row.id}/${d.name}`;
+  const path = `/dashboard/${dashboard.layer}/${dashboard.entity}/${scope.row.id}/${dashboard.name}`;
 
   router.push(path);
 }

src/views/dashboard/related/topology/components/Graph.vue

@@ -272,19 +272,19 @@ function handleLinkClick(event: any, d: Call) {
     dashboardStore.entity === EntityType[1].value
       ? EntityType[0].value
       : dashboardStore.entity;
-  const p = getDashboard({
+  const { dashboard } = getDashboard({
     name: settings.value.linkDashboard,
     layer: dashboardStore.layerId,
     entity: `${e}Relation`,
   });
-  if (!p) {
+  if (!dashboard) {
     ElMessage.error(
       `The dashboard named ${settings.value.linkDashboard} doesn't exist`
     );
     return;
   }
-  dashboardStore.setEntity(p.entity);
+  dashboardStore.setEntity(dashboard.entity);
-  const path = `/dashboard/related/${p.layer}/${e}Relation/${d.source.id}/${d.target.id}/${p.name}`;
+  const path = `/dashboard/related/${dashboard.layer}/${e}Relation/${d.source.id}/${d.target.id}/${dashboard.name}`;
   const routeUrl = router.resolve({ path });
   window.open(routeUrl.href, "_blank");
   dashboardStore.setEntity(origin);

src/views/dashboard/related/topology/components/PodTopology.vue

@@ -173,18 +173,18 @@ function goDashboard() {
     dashboardStore.entity === EntityType[2].value
       ? EntityType[2].value
       : EntityType[3].value;
-  const d = getDashboard({
+  const { dashboard } = getDashboard({
     name: settings.value.nodeDashboard,
     layer: dashboardStore.layerId,
     entity,
   });
-  if (!d) {
+  if (!dashboard) {
     ElMessage.error(
       `The dashboard named ${settings.value.nodeDashboard} doesn't exist`
     );
     return;
   }
-  const path = `/dashboard/${d.layer}/${entity}/${topologyStore.node.serviceId}/${topologyStore.node.id}/${d.name}`;
+  const path = `/dashboard/${dashboard.layer}/${entity}/${topologyStore.node.serviceId}/${topologyStore.node.id}/${dashboard.name}`;
   const routeUrl = router.resolve({ path });
   window.open(routeUrl.href, "_blank");
   topologyStore.setNode(null);
@@ -217,18 +217,18 @@ function selectNodeLink(d: any) {
       dashboardStore.entity === EntityType[2].value
         ? EntityType[6].value
         : EntityType[5].value;
-    const p = getDashboard({
+    const { dashboard } = getDashboard({
       name: settings.value.linkDashboard,
       layer: dashboardStore.layerId,
       entity,
     });
-    if (!p) {
+    if (!dashboard) {
       ElMessage.error(
         `The dashboard named ${settings.value.linkDashboard} doesn't exist`
       );
       return;
     }
-    const path = `/dashboard/${p.layer}/${entity}/${sourceObj.serviceId}/${sourceObj.id}/${targetObj.serviceId}/${targetObj.id}/${p.name}`;
+    const path = `/dashboard/${dashboard.layer}/${entity}/${sourceObj.serviceId}/${sourceObj.id}/${targetObj.serviceId}/${targetObj.id}/${dashboard.name}`;
     const routeUrl = router.resolve({ path });
     window.open(routeUrl.href, "_blank");
     return;