feat: disable tabs

src/styles/theme.scss

@@ -65,7 +65,7 @@ html.dark {
   --el-color-primary: #409eff;
   --theme-background: #212224;
   --font-color: #fafbfc;
-  --disabled-color: #ccc;
+  --disabled-color: #999;
   --dashboard-tool-bg: #000;
   --text-color-placeholder: #ccc;
   --border-color: #262629;

src/views/dashboard/controls/Tab.vue

@@ -15,12 +15,12 @@ limitations under the License. -->
 <template>
   <div class="flex-h tab-header">
     <div class="tabs scroll_bar_style" @click="handleClick">
+      <template v-for="(child, idx) in data.children || []">
         <span
-        v-for="(child, idx) in data.children || []"
           :key="idx"
           :class="{ active: activeTabIndex === idx }"
           @click="clickTabs($event, idx)"
-        v-show="child.enable !== false"
+          v-if="child.enable !== false"
         >
           <input
             @click="editTabName($event, idx)"
@@ -39,6 +39,17 @@ limitations under the License. -->
             v-if="dashboardStore.editMode && canEditTabName"
           />
         </span>
+      </template>
+      <template v-for="(child, idx) in data.children || []">
+        <span
+          :key="idx"
+          :style="{ width: getStringWidth(child.name) + 'px' }"
+          v-if="child.enable === false"
+          class="tab-diabled"
+        >
+          {{ child.name }}
+        </span>
+      </template>
       <span class="tab-icons">
         <el-tooltip content="Copy Link" placement="bottom">
           <i @click="copyLink">
@@ -126,7 +137,6 @@ limitations under the License. -->
       default: () => ({ children: [] }),
     },
     active: { type: Boolean, default: false },
-    needQuery: { type: Boolean, default: false },
   };
   export default defineComponent({
     name: "Tab",
@@ -151,9 +161,7 @@ limitations under the License. -->
         dashboardStore.setActiveTabIndex(activeTabIndex.value, props.data.i);
       }
 
-      // if (props.needQuery || !dashboardStore.currentDashboard.id) {
+      queryExpressions();
-      //   queryExpressions();
-      // }
 
       function clickTabs(e: Event, idx: number) {
         e.stopPropagation();
@@ -246,16 +254,20 @@ limitations under the License. -->
         for (const child of tabsProps.children || []) {
           child.expression && metrics.push(child.expression);
         }
+        if (!metrics.length) {
+          return;
+        }
         const params: { [key: string]: any } = (await useExpressionsQueryProcessor({ metrics })) || {};
 
         for (const child of tabsProps.children || []) {
           if (params.source[child.expression || ""]) {
             child.enable = !!Number(params.source[child.expression || ""]);
           } else {
-            child.enable = true;
+            child.enable = false;
           }
         }
         dashboardStore.setConfigs(tabsProps);
+        console.log(props.data);
       }
 
       watch(
@@ -332,6 +344,7 @@ limitations under the License. -->
     white-space: nowrap;
     overflow-y: hidden;
     padding: 0 10px;
+    display: inline-flex;
 
     span {
       display: inline-block;
@@ -354,6 +367,18 @@ limitations under the License. -->
       background-color: $theme-background;
     }
 
+    .tab-diabled {
+      max-width: 150px;
+      outline: none;
+      color: $disabled-color;
+      font-style: normal;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-right: 20px;
+      background-color: $theme-background;
+      cursor: not-allowed;
+    }
+
     .tab-icons {
       i {
         margin-right: 3px;