feat: add Tab on the dashboard

src/views/dashboard/panel/Layout.vue

@@ -30,19 +30,30 @@ limitations under the License. -->
       :i="item.i"
       :key="item.i"
     >
-      <Widget :item="item" />
+      <component :is="item.type" :data="item" />
     </grid-item>
   </grid-layout>
 </template>
-<script lang="ts" setup>
+<script lang="ts">
+import { defineComponent } from "vue";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { LayoutConfig } from "@/types/dashboard";
-import Widget from "./Widget.vue";
-
-const dashboardStore = useDashboardStore();
-function layoutUpdatedEvent(newLayout: LayoutConfig) {
-  dashboardStore.setLayout(newLayout);
-}
+import Widget from "../controls/Widget.vue";
+import Tab from "../controls/Tab.vue";
+export default defineComponent({
+  name: "Layout",
+  components: { Widget, Tab },
+  setup() {
+    const dashboardStore = useDashboardStore();
+    function layoutUpdatedEvent(newLayout: LayoutConfig) {
+      dashboardStore.setLayout(newLayout);
+    }
+    return {
+      dashboardStore,
+      layoutUpdatedEvent,
+    };
+  },
+});
 </script>
 <style lang="scss" scoped>
 .vue-grid-layout {

src/views/dashboard/panel/Tool.vue

@@ -62,33 +62,14 @@ limitations under the License. -->
     </div>
     <div class="tool-icons">
       <el-tooltip
+        v-for="(t, index) in ToolIcons"
+        :key="index"
         class="item"
-        effect="dark"
-        content="Add Widget"
+        :content="t.content"
         placement="top"
       >
-        <span class="icon-btn" @click="dashboardStore.addWidget">
-          <Icon size="sm" iconName="playlist_add" />
-        </span>
-      </el-tooltip>
-      <el-tooltip class="item" effect="dark" content="Settings" placement="top">
-        <span class="icon-btn" @click="dashboardStore.setConfigPanel(true)">
-          <Icon size="sm" iconName="settings" />
-        </span>
-      </el-tooltip>
-      <el-tooltip class="item" effect="dark" content="Import" placement="top">
-        <span class="icon-btn">
-          <Icon size="sm" iconName="folder_open" />
-        </span>
-      </el-tooltip>
-      <el-tooltip class="item" effect="dark" content="Export" placement="top">
-        <span class="icon-btn">
-          <Icon size="sm" iconName="save_alt" />
-        </span>
-      </el-tooltip>
-      <el-tooltip class="item" effect="dark" content="Apply" placement="top">
-        <span class="icon-btn">
-          <Icon size="sm" iconName="save" />
+        <span class="icon-btn" @click="clickIcons(t)">
+          <Icon size="sm" :iconName="t.name" />
         </span>
       </el-tooltip>
     </div>
@@ -100,7 +81,7 @@ import { reactive } from "vue";
 import { useRoute } from "vue-router";
 import { ElTooltip, ElCascader } from "element-plus";
 import { useDashboardStore } from "@/store/modules/dashboard";
-import { Options, SelectOpts, EntityType } from "../data";
+import { Options, SelectOpts, EntityType, ToolIcons } from "../data";
 
 const dashboardStore = useDashboardStore();
 const params = useRoute().params;
@@ -128,11 +109,28 @@ dashboardStore.setEntity(states.entity);
 function changeService(val: { value: string; label: string }) {
   states.service = val.value;
 }
+
+function clickIcons(t: { id: string; content: string; name: string }) {
+  switch (t.id) {
+    case "addWidget":
+      dashboardStore.addWidget();
+      break;
+    case "addTab":
+      dashboardStore.addTab();
+      break;
+    case "addImage":
+      dashboardStore.addWidget();
+      break;
+    case "settings":
+      dashboardStore.setConfigPanel(true);
+      break;
+  }
+}
 </script>
 <style lang="scss" scoped>
 .dashboard-tool {
   text-align: right;
-  padding: 5px 10px;
+  padding: 5px;
   background: rgb(240, 242, 245);
   border-bottom: 1px solid #dfe4e8;
   justify-content: space-between;
@@ -153,7 +151,7 @@ function changeService(val: { value: string; label: string }) {
   text-align: center;
   border: 1px solid #ccc;
   border-radius: 3px;
-  margin-left: 8px;
+  margin-left: 6px;
   cursor: pointer;
   background-color: #eee;
   color: #666;

src/views/dashboard/panel/Widget.vue

@@ -1,133 +0,0 @@
-<!-- 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. -->
-<template>
-  <div class="widget">
-    <div class="header flex-h">
-      <div>{{ item.widget.title || "" }}</div>
-      <div class="operations">
-        <Icon
-          class="mr-5"
-          size="sm"
-          iconName="createmode_editedit"
-          @click="setConfig"
-        />
-        <Icon size="sm" iconName="clearclose" @click="removeWidget" />
-      </div>
-    </div>
-    <div class="body" :style="{ height: '200px', width: '400px' }">
-      <component
-        :is="item.chart"
-        :intervalTime="appStoreWithOut.intervalTime"
-        :data="state.source"
-      />
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { toRefs, reactive, defineComponent } from "vue";
-import type { PropType } from "vue";
-import { LayoutConfig } from "@/types/dashboard";
-import { useDashboardStore } from "@/store/modules/dashboard";
-import { useAppStoreWithOut } from "@/store/modules/app";
-import graphs from "../graphs";
-import { ElMessage } from "element-plus";
-import Loading from "@/utils/loading";
-import { useI18n } from "vue-i18n";
-
-const props = {
-  item: {
-    type: Object as PropType<LayoutConfig>,
-    default: () => ({ widget: {} }),
-  },
-};
-export default defineComponent({
-  name: "Widget",
-  components: { ...graphs },
-  props,
-  setup(props) {
-    const { t } = useI18n();
-    const { loading } = Loading();
-    const state = reactive({
-      source: {},
-    });
-    const { item } = toRefs(props);
-    const appStoreWithOut = useAppStoreWithOut();
-    const dashboardStore = useDashboardStore();
-    queryMetrics();
-    async function queryMetrics() {
-      const loadingInstance = loading({
-        text: t("loading"),
-        fullscreen: false,
-      });
-      const json = await dashboardStore.fetchMetricValue(props.item);
-
-      loadingInstance.close();
-      if (json.error) {
-        ElMessage.error(json.error);
-        return;
-      }
-      const metricVal = json.data.readMetricsValues.values.values.map(
-        (d: any) => d.value
-      );
-      const m = props.item.metrics && props.item.metrics[0];
-      if (!m) {
-        return;
-      }
-      state.source = {
-        [m]: metricVal,
-      };
-    }
-
-    function removeWidget() {
-      dashboardStore.removeWidget(item);
-    }
-    function setConfig() {
-      dashboardStore.setConfigPanel(true);
-      dashboardStore.selectWidget(item);
-    }
-    return {
-      state,
-      appStoreWithOut,
-      removeWidget,
-      setConfig,
-      item,
-    };
-  },
-});
-</script>
-<style lang="scss" scoped>
-.widget {
-  font-size: 12px;
-}
-
-.header {
-  height: 30px;
-  padding: 5px;
-  width: 100%;
-  border-bottom: 1px solid #eee;
-  justify-content: space-between;
-}
-
-.operations {
-  color: #aaa;
-  cursor: pointer;
-}
-
-.body {
-  padding: 5px;
-  height: 200px;
-  width: 100%;
-}
-</style>