feat: add and remove tabs, create and remove tab items

src/assets/icons/add.svg

@@ -0,0 +1,18 @@
+<!-- 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 version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<title>add</title>
+<path d="M18.984 12.984h-6v6h-1.969v-6h-6v-1.969h6v-6h1.969v6h6v1.969z"></path>
+</svg>

src/assets/icons/cancel.svg

@@ -0,0 +1,18 @@
+<!-- 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 version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<title>cancel</title>
+<path d="M17.016 15.609l-3.609-3.609 3.609-3.609-1.406-1.406-3.609 3.609-3.609-3.609-1.406 1.406 3.609 3.609-3.609 3.609 1.406 1.406 3.609-3.609 3.609 3.609zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"></path>
+</svg>

src/assets/icons/ellipsis_v.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. -->
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="32px" height="32.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#8a8a8a" d="M512 298.666667a85.333333 85.333333 0 1 0-85.333333-85.333334 85.333333 85.333333 0 0 0 85.333333 85.333334z m0 426.666666a85.333333 85.333333 0 1 0 85.333333 85.333334 85.333333 85.333333 0 0 0-85.333333-85.333334z m0-298.666666a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z" /></svg>

src/assets/icons/keyboard_control.svg

@@ -0,0 +1,18 @@
+<!-- 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 version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<title>keyboard_control</title>
+<path d="M12 9.984q0.797 0 1.406 0.609t0.609 1.406-0.609 1.406-1.406 0.609-1.406-0.609-0.609-1.406 0.609-1.406 1.406-0.609zM18 9.984q0.797 0 1.406 0.609t0.609 1.406-0.609 1.406-1.406 0.609-1.406-0.609-0.609-1.406 0.609-1.406 1.406-0.609zM6 9.984q0.797 0 1.406 0.609t0.609 1.406-0.609 1.406-1.406 0.609-1.406-0.609-0.609-1.406 0.609-1.406 1.406-0.609z"></path>
+</svg>

src/store/modules/dashboard.ts

@@ -73,6 +73,10 @@ export const dashboardStore = defineStore({
             name: "Tab1",
             children: [],
           },
+          {
+            name: "Tab2",
+            children: [],
+          },
         ],
         widget: {},
         graph: {},
@@ -84,9 +88,27 @@ export const dashboardStore = defineStore({
       });
       this.layout.push(newWidget);
     },
-    removeWidget(item: LayoutConfig) {
+    addTabItem(item: LayoutConfig) {
+      const idx = this.layout.findIndex((d: LayoutConfig) => d.i === item.i);
+      if (!this.layout[idx].children) {
+        return;
+      }
+      const len = this.layout[idx].children?.length || 0;
+      const i = {
+        name: "Tab" + (len + 1),
+        children: [],
+      };
+      this.layout[idx].children?.push(i);
+    },
+    removeControls(item: LayoutConfig) {
       this.layout = this.layout.filter((d: LayoutConfig) => d.i !== item.i);
     },
+    removeTabItem(item: LayoutConfig, index: number) {
+      const idx = this.layout.findIndex((d: LayoutConfig) => d.i === item.i);
+      if (this.layout[idx].children) {
+        this.layout[idx].children?.splice(index, 1);
+      }
+    },
     setConfigPanel(show: boolean) {
       this.showConfig = show;
     },

src/views/dashboard/controls/Tab.vue

@@ -13,65 +13,118 @@ 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. -->
 <template>
-  <div v-if="data.children.length">
+  <div class="flex-h tab-header">
     <div class="tabs">
-      <span v-for="(item, idx) in data.children || []" :key="idx">{{
-        item.name
-      }}</span>
-    </div>
-    <grid-layout
-      v-model:layout="state.layout"
-      :col-num="24"
-      :row-height="10"
-      :is-draggable="true"
-      :is-resizable="true"
-      @layout-updated="layoutUpdatedEvent"
-    >
-      <grid-item
-        v-for="item in state.layout"
-        :x="item.x"
-        :y="item.y"
-        :w="item.w"
-        :h="item.h"
-        :i="item.i"
-        :key="item.i"
+      <span
+        v-for="(item, idx) in data.children || []"
+        :key="idx"
+        :class="{ active: state.activeTab === idx }"
+        @click="clickTabs(idx)"
       >
-        <Widget :item="item" />
-      </grid-item>
-    </grid-layout>
+        {{ item.name }}
+        <Icon
+          v-show="state.activeTab === idx"
+          size="sm"
+          iconName="cancel"
+          @click="deleteTabItem(idx)"
+        />
+      </span>
+
+      <span class="add-Item" @click="addTabItem">
+        <Icon size="sm" iconName="add" />
+      </span>
+    </div>
+    <div class="operations">
+      <Icon size="sm" iconName="clearclose" @click="removeTab" />
+    </div>
   </div>
-  <div class="tabs" v-else>Please add Widgets</div>
+  <grid-layout
+    v-model:layout="state.layout"
+    :col-num="24"
+    :row-height="10"
+    :is-draggable="true"
+    :is-resizable="true"
+    @layout-updated="layoutUpdatedEvent"
+  >
+    <grid-item
+      v-for="item in state.layout"
+      :x="item.x"
+      :y="item.y"
+      :w="item.w"
+      :h="item.h"
+      :i="item.i"
+      :key="item.i"
+    >
+      <Widget :item="item" />
+    </grid-item>
+  </grid-layout>
 </template>
 <script lang="ts" setup>
 import { defineProps, reactive } from "vue";
 import type { PropType } from "vue";
 import Widget from "./Widget.vue";
 import { LayoutConfig } from "@/types/dashboard";
+import { useDashboardStore } from "@/store/modules/dashboard";
 
-defineProps({
+const props = defineProps({
   data: {
     type: Object as PropType<{ type: string; children: any[] }>,
     default: () => ({ children: [] }),
   },
 });
-const state = reactive<{ layout: any }>({
+const dashboardStore = useDashboardStore();
+const state = reactive<{ layout: any[]; activeTab: number }>({
   layout: [],
+  activeTab: 0,
 });
-function layoutUpdatedEvent(newLayout: LayoutConfig) {
+function layoutUpdatedEvent(newLayout: LayoutConfig[]) {
   state.layout = newLayout;
 }
+function clickTabs(idx: number) {
+  state.activeTab = idx;
+}
+function removeTab() {
+  dashboardStore.removeControls(props.data);
+}
+function deleteTabItem(idx: number) {
+  dashboardStore.removeTabItem(props.data, idx);
+}
+function addTabItem() {
+  dashboardStore.addTabItem(props.data);
+}
 </script>
 <style lang="scss" scoped>
 .tabs {
-  height: 30px;
-  border-bottom: 1px solid #eee;
+  height: 40px;
 
   span {
     display: inline-block;
     width: auto;
-    padding: 5px 10px;
-    border-right: 1px solid #ccc;
+    padding: 0 10px;
+    margin: 0 10px;
+    height: 40px;
+    line-height: 40px;
+    cursor: pointer;
   }
+
+  span.active {
+    border-bottom: 1px solid #409eff;
+    color: #409eff;
+  }
+}
+
+.operations {
+  color: #aaa;
+  cursor: pointer;
+  height: 40px;
+  line-height: 40px;
+  padding-right: 10px;
+}
+
+.tab-header {
+  justify-content: space-between;
+  width: 100%;
+  border-bottom: 1px solid #eee;
 }
 
 .vue-grid-layout {

src/views/dashboard/controls/Widget.vue

@@ -69,7 +69,6 @@ export default defineComponent({
     async function queryMetrics() {
       const loadingInstance = loading({
         text: t("loading"),
-        fullscreen: false,
       });
       const json = await dashboardStore.fetchMetricValue(props.data);
 
@@ -91,7 +90,7 @@ export default defineComponent({
     }
 
     function removeWidget() {
-      dashboardStore.removeWidget(data);
+      dashboardStore.removeControls(data);
     }
     function setConfig() {
       dashboardStore.setConfigPanel(true);