feat: switch dashboard with entity

src/views/dashboard/Edit.vue

@@ -35,8 +35,8 @@ import Tool from "./panel/Tool.vue";
 import ConfigEdit from "./configuration/ConfigEdit.vue";
 import { useDashboardStore } from "@/store/modules/dashboard";
 
-const { t } = useI18n();
 const dashboardStore = useDashboardStore();
+const { t } = useI18n();
 // fetch layout data from serve side
 // const layout: any[] = [
 //   { x: 0, y: 0, w: 4, h: 12, i: "0" },
@@ -56,6 +56,7 @@ const dashboardStore = useDashboardStore();
 //   { x: 8, y: 27, w: 4, h: 15, i: "16" },
 // ];
 // dashboardStore.setLayout(layout);
+
 function handleClick(e: any) {
   e.stopPropagation();
   if (e.target.className === "ds-main") {

src/views/dashboard/controls/Widget.vue

@@ -119,13 +119,27 @@ export default defineComponent({
       }
     }
     watch(
-      () => [
-        props.data.metricTypes,
-        props.data.metrics,
-        selectorStore.currentService,
-      ],
-      (data, old) => {
-        if (data[0] === old[0] && data[1] === old[1] && data[2] === old[2]) {
+      () => [props.data.metricTypes, props.data.metrics],
+      () => {
+        queryMetrics();
+      }
+    );
+    watch(
+      () => selectorStore.currentService,
+      () => {
+        if (dashboardStore.entity !== "Service") {
+          return;
+        }
+        queryMetrics();
+      }
+    );
+    watch(
+      () => selectorStore.currentPod,
+      () => {
+        if (
+          dashboardStore.entity === "All" ||
+          dashboardStore.entity === "Service"
+        ) {
           return;
         }
         queryMetrics();

src/views/dashboard/data.ts

@@ -42,10 +42,14 @@ export const DefaultGraphConfig: { [key: string]: any } = {
     step: false,
     smooth: false,
     showSymbol: false,
+    showXAxis: true,
+    showYAxis: true,
   },
   Area: {
     type: "Area",
     opacity: 0.4,
+    showXAxis: true,
+    showYAxis: true,
   },
   Card: {
     type: "Card",

src/views/dashboard/panel/Tool.vue

@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="dashboard-tool flex-h">
-    <div class="flex-h">
-      <div class="selectors-item">
+    <div class="flex-h" v-if="!params.serviceId">
+      <div class="selectors-item" v-if="states.key !== 10">
         <span class="label">$Service</span>
         <Selector
           v-model="states.currentService"
@@ -24,12 +24,15 @@ limitations under the License. -->
           placeholder="Select a service"
           @change="changeService"
           class="selectors"
-          :borderRadius="4"
         />
       </div>
       <div class="selectors-item" v-if="states.key === 3 || states.key === 4">
         <span class="label">
-          {{ states.entity === "endpoint" ? "$Endpoint" : "$ServiceInstance" }}
+          {{
+            dashboardStore.entity === "Endpoint"
+              ? "$Endpoint"
+              : "$ServiceInstance"
+          }}
         </span>
         <Selector
           v-model="selectorStore.currentPod"
@@ -38,7 +41,6 @@ limitations under the License. -->
           placeholder="Select a data"
           @change="changePods"
           class="selectors"
-          :borderRadius="4"
         />
       </div>
       <div class="selectors-item" v-if="states.key === 2">
@@ -95,8 +97,6 @@ const dashboardStore = useDashboardStore();
 const selectorStore = useSelectorStore();
 const params = useRoute().params;
 const states = reactive<{
-  entity: string;
-  layerId: string | string[];
   destService: string;
   destPod: string;
   key: number;
@@ -105,32 +105,31 @@ const states = reactive<{
   destService: "",
   destPod: "",
   key: EntityType.filter((d: Option) => d.value === params.entity)[0].key || 0,
-  entity: String(params.entity),
-  layerId: params.layerId,
-  currentService:
-    (selectorStore.currentService && selectorStore.currentService.value) || "",
+  currentService: "",
 });
-dashboardStore.setLayer(states.layerId);
-dashboardStore.setEntity(states.entity);
+dashboardStore.setLayer(String(params.layerId));
+dashboardStore.setEntity(String(params.entity));
 
 getServices();
 
 async function getServices() {
-  if (!states.layerId) {
+  if (!dashboardStore.layerId) {
     return;
   }
-  const json = await selectorStore.fetchServices(states.layerId);
+  const json = await selectorStore.fetchServices(dashboardStore.layerId);
   if (json.errors) {
     ElMessage.error(json.errors);
     return;
   }
-  fetchPods(states.entity);
+  states.currentService = selectorStore.currentService.value;
+  fetchPods(dashboardStore.entity);
 }
 
 async function changeService(service: Service[]) {
   if (service[0]) {
+    states.currentService = service[0].value;
     selectorStore.setCurrentService(service[0]);
-    fetchPods(states.entity);
+    fetchPods(dashboardStore.entity);
   } else {
     selectorStore.setCurrentService("");
   }
@@ -166,10 +165,10 @@ function clickIcons(t: { id: string; content: string; name: string }) {
 async function fetchPods(type: string) {
   let resp;
   switch (type) {
-    case "endpoint":
+    case "Endpoint":
       resp = await selectorStore.getEndpoints();
       break;
-    case "serviceInstance":
+    case "ServiceInstance":
       resp = await selectorStore.getServiceInstances();
       break;
     default: