save topology templates

src/store/modules/topology.ts

@@ -23,6 +23,8 @@ import { useSelectorStore } from "@/store/modules/selectors";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { AxiosResponse } from "axios";
 import query from "@/graphql/fetch";
+import { useQueryTopologyMetrics } from "@/hooks/useProcessor";
+import { ElMessage } from "element-plus";
 
 interface MetricVal {
   [key: string]: { values: { id: string; value: unknown }[] };
@@ -400,6 +402,37 @@ export const topologyStore = defineStore({
       this.setNodeMetrics(res.data.data);
       return res.data;
     },
+    async getLinkClientMetrics(linkClientMetrics: string[]) {
+      const idsC = this.calls
+        .filter((i: Call) => i.detectPoints.includes("CLIENT"))
+        .map((b: Call) => b.id);
+      const param = await useQueryTopologyMetrics(linkClientMetrics, idsC);
+      const res = await this.getCallClientMetrics(param);
+
+      if (res.errors) {
+        ElMessage.error(res.errors);
+      }
+    },
+    async getLinkServerMetrics(linkServerMetrics: string[]) {
+      const idsS = this.calls
+        .filter((i: Call) => i.detectPoints.includes("SERVER"))
+        .map((b: Call) => b.id);
+      const param = await useQueryTopologyMetrics(linkServerMetrics, idsS);
+      const res = await this.getCallServerMetrics(param);
+
+      if (res.errors) {
+        ElMessage.error(res.errors);
+      }
+    },
+    async queryNodeMetrics(nodeMetrics: string[]) {
+      const ids = this.nodes.map((d: Node) => d.id);
+      const param = await useQueryTopologyMetrics(nodeMetrics, ids);
+      const res = await this.getNodeMetrics(param);
+
+      if (res.errors) {
+        ElMessage.error(res.errors);
+      }
+    },
     async getLegendMetrics(param: {
       queryStr: string;
       conditions: { [key: string]: unknown };

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

@@ -20,7 +20,7 @@ limitations under the License. -->
     element-loading-background="rgba(0, 0, 0, 0)"
     :style="`height: ${height}px`"
   >
-    <div class="setting" v-show="showSetting">
+    <div class="setting" v-if="showSetting">
       <Settings @update="updateSettings" @updateNodes="freshNodes" />
     </div>
     <div class="tool">
@@ -118,7 +118,7 @@ const anchor = ref<any>(null);
 const arrow = ref<any>(null);
 const legend = ref<any>(null);
 const showSetting = ref<boolean>(false);
-const settings = ref<any>({});
+const settings = ref<any>(props.config);
 const operationsPos = reactive<{ x: number; y: number }>({ x: NaN, y: NaN });
 const items = ref<
   { id: string; title: string; func: any; dashboard?: string }[]
@@ -135,6 +135,9 @@ onMounted(async () => {
   if (resp && resp.errors) {
     ElMessage.error(resp.errors);
   }
+  topologyStore.getLinkClientMetrics(settings.value.linkClientMetrics);
+  topologyStore.getLinkServerMetrics(settings.value.linkServerMetrics);
+  topologyStore.queryNodeMetrics(settings.value.nodeMetrics);
   const dom = document.querySelector(".topology")?.getBoundingClientRect() || {
     height: 40,
     width: 0,
@@ -172,6 +175,7 @@ async function init() {
     event.preventDefault();
     topologyStore.setNode(null);
     topologyStore.setLink(null);
+    dashboardStore.selectWidget(props.config);
   });
 }
 function ticked() {
@@ -460,6 +464,7 @@ async function getTopology() {
 }
 function setConfig() {
   showSetting.value = !showSetting.value;
+  dashboardStore.selectWidget(props.config);
 }
 function resize() {
   height.value = document.body.clientHeight;

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

@@ -43,7 +43,7 @@ limitations under the License. -->
     >
       <Icon size="middle" iconName="keyboard_backspace" />
     </span>
-    <div class="settings" v-show="showSettings">
+    <div class="settings" v-if="showSettings">
       <Settings @update="updateConfig" />
     </div>
   </div>
@@ -109,7 +109,7 @@ const loading = ref<boolean>(false);
 const height = ref<number>(100);
 const width = ref<number>(100);
 const showSettings = ref<boolean>(false);
-const settings = ref<any>({});
+const settings = ref<any>(props.config);
 const operationsPos = reactive<{ x: number; y: number }>({ x: NaN, y: NaN });
 const depth = ref<number>(props.config.graph.depth || 3);
 const items = [
@@ -135,6 +135,9 @@ async function loadTopology(id: string) {
   };
   height.value = dom.height - 70;
   width.value = dom.width - 5;
+  topologyStore.getLinkClientMetrics(settings.value.linkClientMetrics);
+  topologyStore.getLinkServerMetrics(settings.value.linkServerMetrics);
+  topologyStore.queryNodeMetrics(settings.value.nodeMetrics);
 }
 
 function inspect() {
@@ -172,6 +175,7 @@ function goDashboard() {
 function setConfig() {
   topologyStore.setNode(null);
   showSettings.value = !showSettings.value;
+  dashboardStore.selectWidget(props.config);
 }
 
 function updateConfig(config: any) {
@@ -236,6 +240,7 @@ function handleClick(event: any) {
   if (event.target.nodeName === "svg") {
     topologyStore.setNode(null);
     topologyStore.setLink(null);
+    dashboardStore.selectWidget(props.config);
   }
 }
 watch(

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

@@ -26,7 +26,6 @@ const emit = defineEmits(["click"]);
 const topologyStore = useTopologyStore();
 const option = computed(() => getOption());
 
-console.log(topologyStore.nodes);
 function getOption() {
   return {
     tooltip: {

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

@@ -176,6 +176,11 @@ limitations under the License. -->
       {{ t("setLegend") }}
     </el-button>
   </div>
+  <div>
+    <el-button @click="saveConfig" class="save-btn" size="small" type="primary">
+      {{ t("apply") }}
+    </el-button>
+  </div>
 </template>
 <script lang="ts" setup>
 import { reactive } from "vue";
@@ -186,7 +191,7 @@ import { ElMessage } from "element-plus";
 import { MetricCatalog, ScopeType, MetricConditions } from "../../../data";
 import { Option } from "@/types/app";
 import { useQueryTopologyMetrics } from "@/hooks/useProcessor";
-import { Node, Call } from "@/types/topology";
+import { Node } from "@/types/topology";
 import { DashboardItem } from "@/types/dashboard";
 import { EntityType, LegendOpt, MetricsType } from "../../../data";
 
@@ -195,12 +200,16 @@ const emit = defineEmits(["update", "updateNodes"]);
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
 const topologyStore = useTopologyStore();
+const { selectedGrid } = dashboardStore;
+const isService = [EntityType[0].value, EntityType[1].value].includes(
+  dashboardStore.entity
+);
 const items = reactive<
   {
     scope: string;
     dashboard: string;
   }[]
->([{ scope: "", dashboard: "" }]);
+>((isService && selectedGrid.nodeDashboard) || [{ scope: "", dashboard: "" }]);
 const states = reactive<{
   linkDashboard: string;
   nodeDashboard: {
@@ -215,22 +224,19 @@ const states = reactive<{
   linkDashboards: (DashboardItem & { label: string; value: string })[];
   nodeDashboards: (DashboardItem & { label: string; value: string })[];
 }>({
-  linkDashboard: "",
+  linkDashboard: selectedGrid.linkDashboard || "",
-  nodeDashboard: [],
+  nodeDashboard: selectedGrid.nodeDashboard || [],
-  linkServerMetrics: [],
+  linkServerMetrics: selectedGrid.linkServerMetrics || [],
-  linkClientMetrics: [],
+  linkClientMetrics: selectedGrid.linkClientMetrics || [],
-  nodeMetrics: [],
+  nodeMetrics: selectedGrid.nodeMetrics || [],
   nodeMetricList: [],
   linkMetricList: [],
   linkDashboards: [],
   nodeDashboards: [],
 });
-const isService = [EntityType[0].value, EntityType[1].value].includes(
-  dashboardStore.entity
-);
 const legend = reactive<{
   metric: { name: string; condition: string; value: string }[];
-}>({ metric: [{ name: "", condition: "", value: "" }] });
+}>({ metric: selectedGrid.legend || [{ name: "", condition: "", value: "" }] });
 
 getMetricList();
 async function getMetricList() {
@@ -275,8 +281,7 @@ async function setLegend() {
     (d: any) => d.name && d.value && d.condition
   );
   const names = metrics.map((d: any) => d.name);
-
+  const p = {
-  emit("update", {
     linkDashboard: states.linkDashboard,
     nodeDashboard: isService
       ? items.filter((d: { scope: string; dashboard: string }) => d.dashboard)
@@ -285,7 +290,10 @@ async function setLegend() {
     linkClientMetrics: states.linkClientMetrics,
     nodeMetrics: states.nodeMetrics,
     legend: metrics,
-  });
+  };
+
+  emit("update", p);
+  dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, ...p });
   const ids = topologyStore.nodes.map((d: Node) => d.id);
   const param = await useQueryTopologyMetrics(names, ids);
   const res = await topologyStore.getLegendMetrics(param);
@@ -335,7 +343,7 @@ function deleteItem(index: number) {
   updateSettings();
 }
 function updateSettings() {
-  emit("update", {
+  const param = {
     linkDashboard: states.linkDashboard,
     nodeDashboard: isService
       ? items.filter((d: { scope: string; dashboard: string }) => d.dashboard)
@@ -344,7 +352,9 @@ function updateSettings() {
     linkClientMetrics: states.linkClientMetrics,
     nodeMetrics: states.nodeMetrics,
     legend: legend.metric,
-  });
+  };
+  dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, ...param });
+  emit("update", param);
 }
 async function changeLinkServerMetrics(options: Option[] | any) {
   states.linkServerMetrics = options.map((d: Option) => d.value);
@@ -353,15 +363,7 @@ async function changeLinkServerMetrics(options: Option[] | any) {
     topologyStore.setLinkServerMetrics({});
     return;
   }
-  const idsS = topologyStore.calls
+  topologyStore.getLinkServerMetrics(states.linkServerMetrics);
-    .filter((i: Call) => i.detectPoints.includes("SERVER"))
-    .map((b: Call) => b.id);
-  const param = await useQueryTopologyMetrics(states.linkServerMetrics, idsS);
-  const res = await topologyStore.getCallServerMetrics(param);
-
-  if (res.errors) {
-    ElMessage.error(res.errors);
-  }
 }
 async function changeLinkClientMetrics(options: Option[] | any) {
   states.linkClientMetrics = options.map((d: Option) => d.value);
@@ -370,16 +372,9 @@ async function changeLinkClientMetrics(options: Option[] | any) {
     topologyStore.setLinkClientMetrics({});
     return;
   }
-  const idsC = topologyStore.calls
+  topologyStore.getLinkClientMetrics(states.linkClientMetrics);
-    .filter((i: Call) => i.detectPoints.includes("CLIENT"))
-    .map((b: Call) => b.id);
-  const param = await useQueryTopologyMetrics(states.linkClientMetrics, idsC);
-  const res = await topologyStore.getCallClientMetrics(param);
-
-  if (res.errors) {
-    ElMessage.error(res.errors);
-  }
 }
+
 async function changeNodeMetrics(options: Option[] | any) {
   states.nodeMetrics = options.map((d: Option) => d.value);
   updateSettings();
@@ -387,13 +382,7 @@ async function changeNodeMetrics(options: Option[] | any) {
     topologyStore.setNodeMetrics({});
     return;
   }
-  const ids = topologyStore.nodes.map((d: Node) => d.id);
+  topologyStore.queryNodeMetrics(states.nodeMetrics);
-  const param = await useQueryTopologyMetrics(states.nodeMetrics, ids);
-  const res = await topologyStore.getNodeMetrics(param);
-
-  if (res.errors) {
-    ElMessage.error(res.errors);
-  }
 }
 function deleteMetric(index: number) {
   legend.metric.splice(index, 1);
@@ -401,6 +390,10 @@ function deleteMetric(index: number) {
 function addMetric() {
   legend.metric.push({ name: "", condition: "", value: "" });
 }
+function saveConfig() {
+  console.log(dashboardStore.selectedGrid);
+  dashboardStore.setConfigs(dashboardStore.selectedGrid);
+}
 </script>
 <style lang="scss" scoped>
 .link-settings {
@@ -439,4 +432,8 @@ function addMetric() {
 .delete {
   margin: 0 3px;
 }
+
+.save-btn {
+  margin-top: 20px;
+}
 </style>