From c9eab02431906721b3e72255b9f5322e28dd0792 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Tue, 28 Dec 2021 16:03:47 +0800
Subject: [PATCH] feat: update filters

---
 src/views/dashboard/data.ts        | 16 +++++++++-------
 src/views/dashboard/panel/Tool.vue | 22 ++++++++++++++--------
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts
index 5ca2437b..dee2c81b 100644
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@@ -15,21 +15,23 @@
  * limitations under the License.
  */
 export const EntityType = [
-  { value: "service", label: "Service" },
-  { value: "all", label: "All" },
-  { value: "endpoint", label: "Service Endpoint" },
-  { value: "serviceInstance", label: "Service Instance" },
-  { value: "serviceRelationClient", label: "Service Relation(client)" },
-  { value: "serviceRelationServer", label: "Service Relation(server)" },
+  { value: "service", label: "Service", key: 1 },
+  { value: "all", label: "All", key: 10 },
+  { value: "endpoint", label: "Service Endpoint", key: 3 },
+  { value: "serviceInstance", label: "Service Instance", key: 3 },
+  { value: "serviceRelationClient", label: "Service Relation(client)", key: 2 },
+  { value: "serviceRelationServer", label: "Service Relation(server)", key: 2 },
   {
     value: "serviceInstanceRelationClient",
     label: "Service Instance Relation(client)",
+    key: 4,
   },
   {
     value: "serviceInstanceRelationServer",
     label: "Service Instance Relation(server)",
+    key: 4,
   },
-  { value: "endpointRelation", label: "Endpoint Relation" },
+  { value: "endpointRelation", label: "Endpoint Relation", key: 4 },
 ];
 export const Options = [
   {
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index 9fc15266..c849d690 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -15,7 +15,7 @@ limitations under the License. -->
 <template>
   <div class="dashboard-tool flex-h">
     <div class="flex-h">
-      <div class="selectors-item">
+      <div class="selectors-item" v-if="states.key < 3">
         <span class="label">$Service</span>
         <Selector
           :value="states.service"
@@ -27,17 +27,17 @@ limitations under the License. -->
           class="selectors"
         />
       </div>
-      <div class="selectors-item">
+      <div class="selectors-item" v-if="states.key === 3 || states.key === 4">
         <span class="label">$ServiceInstance</span>
         <el-cascader
           placeholder="Select a instance"
           :options="SelectOpts"
           size="mini"
           filterable
-          :style="{ minWidth: '230px' }"
+          :style="{ minWidth: '300px' }"
         />
       </div>
-      <div class="selectors-item">
+      <div class="selectors-item" v-if="states.key === 2">
         <span class="label">$DestinationService</span>
         <Selector
           :value="states.service"
@@ -49,14 +49,14 @@ limitations under the License. -->
           class="selectors"
         />
       </div>
-      <div class="selectors-item">
+      <div class="selectors-item" v-if="states.key === 4">
         <span class="label">$DestinationServiceInstance</span>
         <el-cascader
           placeholder="Select a instance"
           :options="SelectOpts"
           size="mini"
           filterable
-          :style="{ minWidth: '230px' }"
+          :style="{ minWidth: '300px' }"
         />
       </div>
     </div>
@@ -100,14 +100,20 @@ import { reactive } from "vue";
 import { useRoute } from "vue-router";
 import { ElTooltip, ElCascader } from "element-plus";
 import { useDashboardStore } from "@/store/modules/dashboard";
-import { Options, SelectOpts } from "../data";
+import { Options, SelectOpts, EntityType } from "../data";
 
 const dashboardStore = useDashboardStore();
 const params = useRoute().params;
 const states = reactive({
   service: Options[0].value,
+  pod: Options[0].value, // instances and endpoints
+  destService: "",
+  destPod: "",
+  key: EntityType.filter((d: any) => d.value === params.entity)[0].key || 0,
+  ...params,
 });
-console.log(params);
+console.log(states);
+
 function changeService(val: { value: string; label: string }) {
   states.service = val.value;
 }