update tools

src/views/dashboard/data.ts

@@ -152,7 +152,6 @@ export const EntityType = [
   },
   { value: "EndpointRelation", label: "Endpoint Relation", key: 4 },
 ];
-export const hasTopology = ["All", "Service", "ServiceRelation", "Endpoint"];
 export const TableEntity: any = {
   InstanceList: EntityType[3].value,
   EndpointList: EntityType[2].value,
@@ -162,18 +161,51 @@ export const SortOrder = [
   { label: "DES", value: "DES" },
   { label: "ASC", value: "ASC" },
 ];
-export const ToolIcons = [
+export const AllTools = [
+  { name: "playlist_add", content: "Add Widget", id: "addWidget" },
+  { name: "all_inbox", content: "Add Tab", id: "addTab" },
+  { name: "device_hub", content: "Add Topology", id: "addTopology" },
+  { name: "merge", content: "Add Trace", id: "addTrace" },
+  { name: "assignment", content: "Add Log", id: "addLog" },
+  { name: "save", content: "Apply", id: "apply" },
+];
+export const ServiceTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
   { name: "all_inbox", content: "Add Tab", id: "addTab" },
   { name: "device_hub", content: "Add Topology", id: "addTopology" },
   { name: "merge", content: "Add Trace", id: "addTrace" },
   { name: "timeline", content: "Add Profile", id: "addProfile" },
   { name: "assignment", content: "Add Log", id: "addLog" },
-  // { name: "save_alt", content: "Export", id: "export" },
+  { name: "save", content: "Apply", id: "apply" },
-  // { name: "folder_open", content: "Import", id: "import" },
-  // { name: "settings", content: "Settings", id: "settings" },
-  // { name: "save", content: "Apply", id: "apply" },
 ];
+export const InstanceTools = [
+  { name: "playlist_add", content: "Add Widget", id: "addWidget" },
+  { name: "all_inbox", content: "Add Tab", id: "addTab" },
+  { name: "device_hub", content: "Add Topology", id: "addTopology" },
+  { name: "merge", content: "Add Trace", id: "addTrace" },
+  { name: "assignment", content: "Add Log", id: "addLog" },
+  { name: "save", content: "Apply", id: "apply" },
+];
+export const EndpointTools = [
+  { name: "playlist_add", content: "Add Widget", id: "addWidget" },
+  { name: "all_inbox", content: "Add Tab", id: "addTab" },
+  { name: "device_hub", content: "Add Topology", id: "addTopology" },
+  { name: "merge", content: "Add Trace", id: "addTrace" },
+  { name: "assignment", content: "Add Log", id: "addLog" },
+  { name: "save", content: "Apply", id: "apply" },
+];
+export const ServiceRelationTools = [
+  { name: "playlist_add", content: "Add Widget", id: "addWidget" },
+  { name: "all_inbox", content: "Add Tab", id: "addTab" },
+  { name: "device_hub", content: "Add Topology", id: "addTopology" },
+  { name: "save", content: "Apply", id: "apply" },
+];
+export const PodRelationTools = [
+  { name: "playlist_add", content: "Add Widget", id: "addWidget" },
+  { name: "all_inbox", content: "Add Tab", id: "addTab" },
+  { name: "save", content: "Apply", id: "apply" },
+];
+
 export const ScopeType = [
   { value: "Service", label: "Service", key: 1 },
   { value: "Endpoint", label: "Endpoint", key: 3 },
@@ -214,4 +246,3 @@ export const QueryOrders = [
   { label: "Start Time", value: "BY_START_TIME" },
   { label: "Duration", value: "BY_DURATION" },
 ];
-export const TraceEntitys = ["All", "Service", "ServiceInstance", "Endpoint"];

src/views/dashboard/panel/Tool.vue

@@ -75,35 +75,30 @@ limitations under the License. -->
     <div class="tool-icons">
       <span
         @click="clickIcons(t)"
-        v-for="(t, index) in ToolIcons"
+        v-for="(t, index) in toolIcons"
         :key="index"
         :title="t.content"
       >
-        <Icon
+        <Icon class="icon-btn" size="sm" :iconName="t.name" />
-          class="icon-btn"
-          size="sm"
-          :iconName="t.name"
-          v-if="
-            !['topology', 'trace', 'profile'].includes(t.id) ||
-            (t.id === 'topology' &&
-              hasTopology.includes(dashboardStore.entity)) ||
-            (t.id === 'trace' &&
-              TraceEntitys.includes(dashboardStore.entity)) ||
-            (t.id === 'profile' &&
-              dashboardStore.entity === EntityType[0].value)
-          "
-        />
       </span>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { reactive, watch } from "vue";
+import { reactive, watch, ref } from "vue";
 import { useRoute } from "vue-router";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
-import { EntityType, ToolIcons, hasTopology, TraceEntitys } from "../data";
+import {
+  EntityType,
+  AllTools,
+  ServiceTools,
+  InstanceTools,
+  EndpointTools,
+  PodRelationTools,
+  ServiceRelationTools,
+} from "../data";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { ElMessage } from "element-plus";
 import { Option } from "@/types/app";
@@ -113,6 +108,7 @@ const selectorStore = useSelectorStore();
 const appStore = useAppStoreWithOut();
 const params = useRoute().params;
 const type = EntityType.filter((d: Option) => d.value === params.entity)[0];
+const toolIcons = ref<any[]>(PodRelationTools);
 const states = reactive<{
   destService: string;
   destPod: string;
@@ -137,6 +133,7 @@ dashboardStore.setEntity(String(params.entity));
 initSelector();
 
 function initSelector() {
+  getTools();
   if (params.serviceId) {
     setSelector();
   } else {
@@ -401,6 +398,27 @@ async function fetchPods(type: string, serviceId: string, setPod: boolean) {
     ElMessage.error(resp.errors);
   }
 }
+function getTools() {
+  switch (dashboardStore.entity) {
+    case EntityType[1].value:
+      toolIcons.value = AllTools;
+      break;
+    case EntityType[0].value:
+      toolIcons.value = ServiceTools;
+      break;
+    case EntityType[2].value:
+      toolIcons.value = EndpointTools;
+      break;
+    case EntityType[3].value:
+      toolIcons.value = InstanceTools;
+      break;
+    case EntityType[4].value:
+      toolIcons.value = ServiceRelationTools;
+      break;
+    default:
+      toolIcons.value = PodRelationTools;
+  }
+}
 watch(
   () => appStore.durationTime,
   () => {