update controls

src/assets/icons/control.svg

@@ -0,0 +1,15 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<svg t="1648717513168" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15451" width="48" height="48"><path d="M810.666667 213.333333v597.333334H213.333333V213.333333h597.333334m85.333333-85.333333H128v768h768V128z m-512 170.666667h-85.333333v85.333333h85.333333z m170.666667 0h-85.333334v85.333333h85.333334z m-170.666667 170.666666h-85.333333v85.333334h85.333333z m170.666667 0h-85.333334v85.333334h85.333334z m-170.666667 170.666667h-85.333333v85.333333h85.333333z m170.666667 0h-85.333334v85.333333h85.333334z m170.666666-341.333333h-85.333333v85.333333h85.333333z m0 170.666666h-85.333333v85.333334h85.333333z m0 170.666667h-85.333333v85.333333h85.333333z" p-id="15452" fill="#515151"></path></svg>

src/hooks/useProcessor.ts

@@ -68,7 +68,7 @@ export function useQueryProcessor(config: any) {
         normal: selectorStore.currentService
           ? selectorStore.currentService.normal
           : true,
-        scope: config.catalog || dashboardStore.entity,
+        scope: config.catalog,
         topN: c.topN || 10,
         order: c.sortOrder || "DES",
       };

src/styles/reset.scss

@@ -141,3 +141,15 @@ pre {
 .el-icon.menu-icons {
   margin-top: -3px !important;
 }
+
+.el-switch__label--left {
+  margin-right: 5px;
+}
+
+.el-switch__label--right {
+  margin-left: 5px;
+}
+
+.switch {
+  margin: 0 5px;
+}

src/views/dashboard/data.ts

@@ -174,17 +174,15 @@ export const AllTools = [
   { 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: "playlist_add", content: "Widget", id: "addWidget" },
-  { name: "all_inbox", content: "Add Tab", id: "addTab" },
+  { name: "all_inbox", content: "Tab", id: "addTab" },
-  { name: "library_books", content: "Add Text", id: "addText" },
+  { name: "library_books", content: "Text", id: "addText" },
-  { name: "device_hub", content: "Add Topology", id: "addTopology" },
+  { name: "device_hub", content: "Topology", id: "addTopology" },
-  { name: "merge", content: "Add Trace", id: "addTrace" },
+  { name: "merge", content: "Trace", id: "addTrace" },
-  { name: "timeline", content: "Add Profile", id: "addProfile" },
+  { name: "timeline", content: "Profile", id: "addProfile" },
-  { name: "assignment", content: "Add Log", id: "addLog" },
+  { name: "assignment", content: "Log", id: "addLog" },
-  { name: "save", content: "Apply", id: "apply" },
 ];
 export const InstanceTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
@@ -192,7 +190,6 @@ export const InstanceTools = [
   { name: "library_books", content: "Add Text", id: "addText" },
   { 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" },
@@ -201,28 +198,24 @@ export const EndpointTools = [
   { 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: "library_books", content: "Add Text", id: "addText" },
   { name: "device_hub", content: "Add Topology", id: "addTopology" },
-  { name: "save", content: "Apply", id: "apply" },
 ];
 
 export const EndpointRelationTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
   { name: "all_inbox", content: "Add Tab", id: "addTab" },
   { name: "library_books", content: "Add Text", id: "addText" },
-  { name: "save", content: "Apply", id: "apply" },
 ];
 export const InstanceRelationTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
   { name: "all_inbox", content: "Add Tab", id: "addTab" },
   { name: "library_books", content: "Add Text", id: "addText" },
   { name: "device_hub", content: "Add Topology", id: "addTopology" },
-  { name: "save", content: "Apply", id: "apply" },
 ];
 
 export const ScopeType = [

src/views/dashboard/panel/Tool.vue

@@ -80,24 +80,39 @@ limitations under the License. -->
     </div>
     <div class="flex-h tools" v-loading="loading">
       <div class="tool-icons flex-h" v-if="dashboardStore.editMode">
-        <span
+        <el-dropdown content="Controls" placement="bottom">
-          @click="clickIcons(t)"
+          <i>
-          v-for="(t, index) in toolIcons"
+            <Icon class="icon-btn" size="sm" iconName="control" />
-          :key="index"
+          </i>
-          :title="t.content"
+          <template #dropdown>
-        >
+            <el-dropdown-menu>
-          <el-tooltip :content="t.content" placement="bottom">
+              <el-dropdown-item
-            <i>
+                @click="clickIcons(t)"
-              <Icon class="icon-btn" size="sm" :iconName="t.name" />
+                v-for="(t, index) in toolIcons"
-            </i>
+                :key="index"
-          </el-tooltip>
+                :title="t.content"
-        </span>
+              >
+                <Icon class="mr-5" size="middle" :iconName="t.name" />
+                <span>{{ t.content }}</span>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+        <el-tooltip content="Apply" placement="bottom">
+          <i>
+            <Icon class="icon-btn" size="sm" iconName="save" />
+          </i>
+        </el-tooltip>
       </div>
       <div class="switch">
         <el-switch
           v-model="dashboardStore.editMode"
           active-text="Edit"
           inactive-text="View"
+          size="small"
+          inline-prompt
+          active-color="#409eff"
+          inactive-color="#999"
           @change="changeMode"
         />
       </div>
@@ -105,7 +120,8 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { reactive, ref } from "vue";
+import { reactive, ref, unref } from "vue";
+import { ClickOutside as vClickOutside } from "element-plus";
 import { useRoute } from "vue-router";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";