From 569c4f6301d6d31f94447f86b881bb17e8c9d5b5 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Tue, 12 Dec 2023 17:14:53 +0800
Subject: [PATCH] feat: add widget type

---
 src/components/Graph.vue                      |  3 +-
 src/store/data.ts                             | 22 ++++---
 src/store/modules/dashboard.ts                | 26 ++++----
 src/views/dashboard/List.vue                  | 16 ++++-
 src/views/dashboard/configuration/Tab.vue     | 10 ++-
 src/views/dashboard/controls/Tab.vue          |  2 +-
 src/views/dashboard/data.ts                   | 18 ++++++
 src/views/dashboard/graphs/TopList.vue        |  3 +-
 src/views/dashboard/panel/Tool.vue            | 63 ++++++++++---------
 src/views/dashboard/related/event/Content.vue |  5 +-
 .../related/log/LogTable/LogService.vue       |  3 +-
 src/views/dashboard/related/trace/Detail.vue  |  3 +-
 12 files changed, 110 insertions(+), 64 deletions(-)

diff --git a/src/components/Graph.vue b/src/components/Graph.vue
index 5ed35d1d..174d6de4 100644
--- a/src/components/Graph.vue
+++ b/src/components/Graph.vue
@@ -53,6 +53,7 @@ limitations under the License. -->
   import { addResizeListener, removeResizeListener } from "@/utils/event";
   import Trace from "@/views/dashboard/related/trace/Index.vue";
   import associateProcessor from "@/hooks/useAssociateProcessor";
+  import { WidgetType } from "@/views/dashboard/data";
 
   /*global Nullable, defineProps, defineEmits, Indexable*/
   const emits = defineEmits(["select"]);
@@ -63,7 +64,7 @@ limitations under the License. -->
   const currentParams = ref<Nullable<EventParams>>(null);
   const showTrace = ref<boolean>(false);
   const traceOptions = ref<{ type: string; filters?: unknown }>({
-    type: "Trace",
+    type: WidgetType.Trace,
   });
   const menuPos = reactive<{ x: number; y: number }>({ x: NaN, y: NaN });
   const props = defineProps({
diff --git a/src/store/data.ts b/src/store/data.ts
index 43d0d4d2..24749b4d 100644
--- a/src/store/data.ts
+++ b/src/store/data.ts
@@ -14,13 +14,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { WidgetType } from "@/views/dashboard/data";
+
 export const NewControl = {
   x: 0,
   y: 0,
   w: 24,
   h: 12,
   i: "0",
-  type: "Widget",
+  type: WidgetType.Widget,
 };
 export const TextConfig = {
   fontColor: "white",
@@ -39,15 +41,15 @@ export const TimeRangeConfig = {
 };
 
 export const ControlsTypes = [
-  "Trace",
-  "Profile",
-  "Log",
-  "DemandLog",
-  "Ebpf",
-  "NetworkProfiling",
-  "ThirdPartyApp",
-  "ContinuousProfiling",
-  "TaskTimeline",
+  WidgetType.Trace,
+  WidgetType.Profile,
+  WidgetType.Log,
+  WidgetType.DemandLog,
+  WidgetType.Ebpf,
+  WidgetType.NetworkProfiling,
+  WidgetType.ThirdPartyApp,
+  WidgetType.ContinuousProfiling,
+  WidgetType.TaskTimeline,
 ];
 export enum EBPFProfilingTriggerType {
   FIXED_TIME = "FIXED_TIME",
diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts
index 5fd55921..6aa3da63 100644
--- a/src/store/modules/dashboard.ts
+++ b/src/store/modules/dashboard.ts
@@ -25,7 +25,7 @@ import { NewControl, TextConfig, TimeRangeConfig, ControlsTypes } from "../data"
 import type { AxiosResponse } from "axios";
 import { ElMessage } from "element-plus";
 import { useI18n } from "vue-i18n";
-import { EntityType, MetricModes } from "@/views/dashboard/data";
+import { EntityType, MetricModes, WidgetType } from "@/views/dashboard/data";
 interface DashboardState {
   showConfig: boolean;
   layout: LayoutConfig[];
@@ -78,7 +78,7 @@ export const dashboardStore = defineStore({
     setCurrentDashboard(item: DashboardItem) {
       this.currentDashboard = item;
     },
-    addControl(type: string) {
+    addControl(type: WidgetType) {
       const arr = this.layout.map((d: Recordable) => Number(d.i));
       let index = String(Math.max(...arr) + 1);
       if (!this.layout.length) {
@@ -93,10 +93,10 @@ export const dashboardStore = defineStore({
         metrics: [""],
       };
 
-      if (type === "Widget") {
+      if (type === WidgetType.Widget) {
         newItem.metricMode = MetricModes.Expression;
       }
-      if (type === "Tab") {
+      if (type === WidgetType.Tab) {
         newItem.h = 36;
         newItem.activedTabIndex = 0;
         newItem.children = [
@@ -110,7 +110,7 @@ export const dashboardStore = defineStore({
           },
         ];
       }
-      if (type === "Topology") {
+      if (type === WidgetType.Topology) {
         newItem.h = 36;
         newItem.graph = {
           showDepth: true,
@@ -120,11 +120,11 @@ export const dashboardStore = defineStore({
       if (ControlsTypes.includes(type)) {
         newItem.h = 36;
       }
-      if (type === "Text") {
+      if (type === WidgetType.Text) {
         newItem.h = 6;
         newItem.graph = TextConfig;
       }
-      if (type === "TimeRange") {
+      if (type === WidgetType.TimeRange) {
         newItem.w = 8;
         newItem.h = 6;
         newItem.graph = TimeRangeConfig;
@@ -149,7 +149,7 @@ export const dashboardStore = defineStore({
       };
       this.layout[idx].children?.push(i);
     },
-    addTabControls(type: string) {
+    addTabControls(type: WidgetType) {
       const activedGridItem = this.activedGridItem.split("-")[0];
       const idx = this.layout.findIndex((d: LayoutConfig) => d.i === activedGridItem);
       if (idx < 0) {
@@ -171,10 +171,10 @@ export const dashboardStore = defineStore({
         metricTypes: [""],
         metrics: [""],
       };
-      if (type === "Widget") {
+      if (type === WidgetType.Widget) {
         newItem.metricMode = MetricModes.Expression;
       }
-      if (type === "Topology") {
+      if (type === WidgetType.Topology) {
         newItem.h = 32;
         newItem.graph = {
           showDepth: true,
@@ -184,11 +184,11 @@ export const dashboardStore = defineStore({
       if (ControlsTypes.includes(type)) {
         newItem.h = 32;
       }
-      if (type === "Text") {
+      if (type === WidgetType.Text) {
         newItem.h = 6;
         newItem.graph = TextConfig;
       }
-      if (type === "TimeRange") {
+      if (type === WidgetType.TimeRange) {
         newItem.w = 8;
         newItem.h = 6;
         newItem.graph = TextConfig;
@@ -292,7 +292,7 @@ export const dashboardStore = defineStore({
     },
     setWidget(param: LayoutConfig) {
       for (let i = 0; i < this.layout.length; i++) {
-        if (this.layout[i].type === "Tab") {
+        if (this.layout[i].type === WidgetType.Tab) {
           if ((this.layout[i].children || []).length) {
             for (const child of this.layout[i].children || []) {
               if (child.children && child.children.length) {
diff --git a/src/views/dashboard/List.vue b/src/views/dashboard/List.vue
index 25b4997a..d1c372dd 100644
--- a/src/views/dashboard/List.vue
+++ b/src/views/dashboard/List.vue
@@ -139,6 +139,7 @@ limitations under the License. -->
   import { saveFile, readFile } from "@/utils/file";
   import { EntityType } from "./data";
   import { isEmptyObject } from "@/utils/is";
+  import { WidgetType } from "@/views/dashboard/data";
 
   /*global Nullable*/
   const { t } = useI18n();
@@ -271,12 +272,23 @@ limitations under the License. -->
       if (!(child.metricConfig && child.metricConfig.length)) {
         delete child.metricConfig;
       }
-      if (child.type === "Tab") {
+      if (child.type === WidgetType.Tab) {
         for (const item of child.children || []) {
           optimizeTemplate(item.children);
         }
       }
-      if (["Trace", "Topology", "Tab", "Profile", "Ebpf", "Log"].includes(child.type)) {
+      if (
+        (
+          [
+            WidgetType.Trace,
+            WidgetType.Topology,
+            WidgetType.Tab,
+            WidgetType.Profile,
+            WidgetType.Ebpf,
+            WidgetType.Log,
+          ] as string[]
+        ).includes(child.type)
+      ) {
         delete child.widget;
       }
     }
diff --git a/src/views/dashboard/configuration/Tab.vue b/src/views/dashboard/configuration/Tab.vue
index d9d81894..41f50462 100644
--- a/src/views/dashboard/configuration/Tab.vue
+++ b/src/views/dashboard/configuration/Tab.vue
@@ -29,15 +29,21 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
   import { useI18n } from "vue-i18n";
-  import { reactive } from "vue";
+  import { reactive, computed } from "vue";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { ElMessage } from "element-plus";
+  import { WidgetType } from "@/views/dashboard/data";
 
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
   const originConfig = dashboardStore.selectedGrid;
   const expressions = reactive<{ [key: string]: string }>({});
-
+  const widgetTabs = computed(() =>
+    dashboardStore.selectedGrid.children.filter((child: any[]) =>
+      child.find((item: any) => item.type === WidgetType.Widget),
+    ),
+  );
+  console.log(widgetTabs.value);
   for (const child of originConfig.children || []) {
     expressions[child.name] = child.expression || "";
   }
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index b90ad90f..69b7034e 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -263,7 +263,7 @@ limitations under the License. -->
           if (params.source[child.expression || ""]) {
             child.enable = !!Number(params.source[child.expression || ""]);
           } else {
-            child.enable = false;
+            child.enable = true;
           }
         }
         dashboardStore.setConfigs(tabsProps);
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts
index 16f84074..5a4bc179 100644
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@@ -349,3 +349,21 @@ export enum CallTypes {
   Server = "SERVER",
   Client = "CLIENT",
 }
+
+export enum WidgetType {
+  Widget = "Widget",
+  Topology = "Topology",
+  Tab = "Tab",
+  Text = "Text",
+  TimeRange = "TimeRange",
+  Trace = "Trace",
+  Log = "Log",
+  Profile = "Profile",
+  Ebpf = "Ebpf",
+  DemandLog = "DemandLog",
+  Event = "Event",
+  NetworkProfiling = "NetworkProfiling",
+  ContinuousProfiling = "ContinuousProfiling",
+  ThirdPartyApp = "ThirdPartyApp",
+  TaskTimeline = "TaskTimeline",
+}
diff --git a/src/views/dashboard/graphs/TopList.vue b/src/views/dashboard/graphs/TopList.vue
index c3c5377c..434a18ae 100644
--- a/src/views/dashboard/graphs/TopList.vue
+++ b/src/views/dashboard/graphs/TopList.vue
@@ -65,6 +65,7 @@ limitations under the License. -->
   import { TextColors } from "@/views/dashboard/data";
   import Trace from "@/views/dashboard/related/trace/Index.vue";
   import { QueryOrders, Status, RefIdTypes, ProtocolTypes, ExpressionResultType } from "../data";
+  import { WidgetType } from "@/views/dashboard/data";
 
   /*global defineProps */
   const props = defineProps({
@@ -90,7 +91,7 @@ limitations under the License. -->
   const { t } = useI18n();
   const showTrace = ref<boolean>(false);
   const traceOptions = ref<{ type: string; filters?: unknown }>({
-    type: "Trace",
+    type: WidgetType.Trace,
   });
   const refIdType = computed(
     () => (props.config.relatedTrace && props.config.relatedTrace.refIdType) || RefIdTypes[0].value,
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index f584a057..0eafe064 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -143,7 +143,8 @@ limitations under the License. -->
     ServiceRelationTools,
     ProcessTools,
     ProcessRelationTools,
-  } from "../data";
+    WidgetType,
+  } from "@/views/dashboard/data";
   import { useSelectorStore } from "@/store/modules/selectors";
   import { ElMessage } from "element-plus";
   import type { Option } from "@/types/app";
@@ -412,46 +413,46 @@ limitations under the License. -->
   function setTabControls(id: string) {
     switch (id) {
       case "addWidget":
-        dashboardStore.addTabControls("Widget");
+        dashboardStore.addTabControls(WidgetType.Widget);
         break;
       case "addTrace":
-        dashboardStore.addTabControls("Trace");
+        dashboardStore.addTabControls(WidgetType.Trace);
         break;
       case "addLog":
-        dashboardStore.addTabControls("Log");
+        dashboardStore.addTabControls(WidgetType.Log);
         break;
       case "addProfile":
-        dashboardStore.addTabControls("Profile");
+        dashboardStore.addTabControls(WidgetType.Profile);
         break;
       case "addEbpf":
-        dashboardStore.addTabControls("Ebpf");
+        dashboardStore.addTabControls(WidgetType.Ebpf);
         break;
       case "addTopology":
-        dashboardStore.addTabControls("Topology");
+        dashboardStore.addTabControls(WidgetType.Topology);
         break;
       case "addText":
-        dashboardStore.addTabControls("Text");
+        dashboardStore.addTabControls(WidgetType.Text);
         break;
       case "addDemandLog":
-        dashboardStore.addTabControls("DemandLog");
+        dashboardStore.addTabControls(WidgetType.DemandLog);
         break;
       case "addEvent":
-        dashboardStore.addTabControls("Event");
+        dashboardStore.addTabControls(WidgetType.Event);
         break;
       case "addNetworkProfiling":
-        dashboardStore.addTabControls("NetworkProfiling");
+        dashboardStore.addTabControls(WidgetType.NetworkProfiling);
         break;
       case "addContinuousProfiling":
-        dashboardStore.addTabControls("ContinuousProfiling");
+        dashboardStore.addTabControls(WidgetType.ContinuousProfiling);
         break;
       case "addTimeRange":
-        dashboardStore.addTabControls("TimeRange");
+        dashboardStore.addTabControls(WidgetType.TimeRange);
         break;
       case "addIframe":
-        dashboardStore.addTabControls("ThirdPartyApp");
+        dashboardStore.addTabControls(WidgetType.ThirdPartyApp);
         break;
       case "addTaskTimeline":
-        dashboardStore.addTabControls("TaskTimeline");
+        dashboardStore.addTabControls(WidgetType.TaskTimeline);
         break;
       default:
         ElMessage.info("Don't support this control");
@@ -462,52 +463,52 @@ limitations under the License. -->
   function setControls(id: string) {
     switch (id) {
       case "addWidget":
-        dashboardStore.addControl("Widget");
+        dashboardStore.addControl(WidgetType.Widget);
         break;
       case "addTab":
-        dashboardStore.addControl("Tab");
+        dashboardStore.addControl(WidgetType.Tab);
         break;
       case "addTrace":
-        dashboardStore.addControl("Trace");
+        dashboardStore.addControl(WidgetType.Trace);
         break;
       case "addProfile":
-        dashboardStore.addControl("Profile");
+        dashboardStore.addControl(WidgetType.Profile);
         break;
       case "addEbpf":
-        dashboardStore.addControl("Ebpf");
+        dashboardStore.addControl(WidgetType.Ebpf);
         break;
       case "addLog":
-        dashboardStore.addControl("Log");
+        dashboardStore.addControl(WidgetType.Log);
         break;
       case "addTopology":
-        dashboardStore.addControl("Topology");
+        dashboardStore.addControl(WidgetType.Topology);
         break;
       case "addText":
-        dashboardStore.addControl("Text");
+        dashboardStore.addControl(WidgetType.Text);
         break;
       case "addDemandLog":
-        dashboardStore.addControl("DemandLog");
+        dashboardStore.addControl(WidgetType.DemandLog);
         break;
       case "addEvent":
-        dashboardStore.addControl("Event");
+        dashboardStore.addControl(WidgetType.Event);
         break;
       case "addNetworkProfiling":
-        dashboardStore.addControl("NetworkProfiling");
+        dashboardStore.addControl(WidgetType.NetworkProfiling);
         break;
       case "addContinuousProfiling":
-        dashboardStore.addControl("ContinuousProfiling");
+        dashboardStore.addControl(WidgetType.ContinuousProfiling);
         break;
       case "addTimeRange":
-        dashboardStore.addControl("TimeRange");
+        dashboardStore.addControl(WidgetType.TimeRange);
         break;
       case "addIframe":
-        dashboardStore.addControl("ThirdPartyApp");
+        dashboardStore.addControl(WidgetType.ThirdPartyApp);
         break;
       case "addTaskTimeline":
-        dashboardStore.addControl("TaskTimeline");
+        dashboardStore.addControl(WidgetType.TaskTimeline);
         break;
       default:
-        dashboardStore.addControl("Widget");
+        dashboardStore.addControl(WidgetType.Widget);
     }
   }
 
diff --git a/src/views/dashboard/related/event/Content.vue b/src/views/dashboard/related/event/Content.vue
index 022435e2..31d02363 100644
--- a/src/views/dashboard/related/event/Content.vue
+++ b/src/views/dashboard/related/event/Content.vue
@@ -29,6 +29,7 @@ limitations under the License. -->
   import { useAppStoreWithOut } from "@/store/modules/app";
   import dateFormatStep, { dateFormatTime } from "@/utils/dateFormat";
   import getLocalTime from "@/utils/localtime";
+  import { WidgetType } from "@/views/dashboard/data";
 
   const eventStore = useEventStore();
   /*global defineProps, Nullable */
@@ -122,7 +123,9 @@ limitations under the License. -->
     }[],
     dashboard: LayoutConfig[],
   ) {
-    const widgets = dashboard.filter((d: { type: string }) => ["Trace", "Log"].includes(d.type));
+    const widgets = dashboard.filter((d: { type: string }) =>
+      ([WidgetType.Trace, WidgetType.Log] as string[]).includes(d.type),
+    );
     const index = items[0];
     const i = events[index - 1 || 0];
     for (const widget of widgets) {
diff --git a/src/views/dashboard/related/log/LogTable/LogService.vue b/src/views/dashboard/related/log/LogTable/LogService.vue
index 60d32f8c..49a4d8c4 100644
--- a/src/views/dashboard/related/log/LogTable/LogService.vue
+++ b/src/views/dashboard/related/log/LogTable/LogService.vue
@@ -41,6 +41,7 @@ limitations under the License. -->
   import { useDashboardStore } from "@/store/modules/dashboard";
   import type { LayoutConfig } from "@/types/dashboard";
   import { dateFormat } from "@/utils/dateFormat";
+  import { WidgetType } from "@/views/dashboard/data";
 
   /*global defineProps, defineEmits, Recordable */
   const props = defineProps({
@@ -78,7 +79,7 @@ limitations under the License. -->
         traceId: id,
         id: props.data.serviceId || "",
       },
-      "Trace",
+      WidgetType.Trace,
     );
   }
 </script>
diff --git a/src/views/dashboard/related/trace/Detail.vue b/src/views/dashboard/related/trace/Detail.vue
index 53f5ce7d..f58f80fc 100644
--- a/src/views/dashboard/related/trace/Detail.vue
+++ b/src/views/dashboard/related/trace/Detail.vue
@@ -101,6 +101,7 @@ limitations under the License. -->
   import type { LayoutConfig } from "@/types/dashboard";
   import { dateFormat } from "@/utils/dateFormat";
   import { useAppStoreWithOut } from "@/store/modules/app";
+  import { WidgetType } from "@/views/dashboard/data";
 
   const props = {
     serviceId: { type: String, default: "" },
@@ -145,7 +146,7 @@ limitations under the License. -->
             traceId: traceId.value || traceStore.currentTrace.traceIds[0].value,
             id: props.serviceId || undefined,
           },
-          "Log",
+          WidgetType.Log,
         );
       }
       return {