feat: add Tab on the dashboard

src/views/dashboard/configuration/ConfigEdit.vue

@@ -98,7 +98,6 @@ import { ValuesTypes, MetricQueryTypes, ChartTypes } from "../data";
 import { Option } from "@/types/app";
 import Loading from "@/utils/loading";
 import graphs from "../graphs";
-import controls from "../controls";
 import configs from "./graph-styles";
 import WidgetOptions from "./WidgetOptions.vue";
 import StandardOptions from "./StandardOptions.vue";
@@ -107,7 +106,6 @@ export default defineComponent({
   name: "ConfigEdit",
   components: {
     ...graphs,
-    ...controls,
     ...configs,
     WidgetOptions,
     StandardOptions,
@@ -135,7 +133,7 @@ export default defineComponent({
       valueTypes: [],
       valueType: "",
       metricQueryType: "",
-      chartType: selectedWidget.chart,
+      chartType: selectedWidget.graph.type,
       activeNames: "1",
       source: {},
       index: selectedWidget.i,

src/views/dashboard/controls/Tab.vue

@@ -13,47 +13,67 @@ 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="tabs">
-    <span v-for="(item, idx) in data" :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"
+  <div v-if="data.children.length">
+    <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"
     >
-      <Widget :item="item" />
-    </grid-item>
-  </grid-layout>
+      <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>
+  </div>
+  <div class="tabs" v-else>Please add Widgets</div>
 </template>
 <script lang="ts" setup>
 import { defineProps, reactive } from "vue";
 import type { PropType } from "vue";
-import Widget from "../panel/Widget.vue";
+import Widget from "./Widget.vue";
 import { LayoutConfig } from "@/types/dashboard";
 
 defineProps({
-  data: { type: Array as PropType<{ name: string }[]>, default: () => [] },
+  data: {
+    type: Object as PropType<{ type: string; children: any[] }>,
+    default: () => ({ children: [] }),
+  },
 });
 const state = reactive<{ layout: any }>({
-  layout: {},
+  layout: [],
 });
 function layoutUpdatedEvent(newLayout: LayoutConfig) {
   state.layout = newLayout;
 }
 </script>
 <style lang="scss" scoped>
+.tabs {
+  height: 30px;
+  border-bottom: 1px solid #eee;
+
+  span {
+    display: inline-block;
+    width: auto;
+    padding: 5px 10px;
+    border-right: 1px solid #ccc;
+  }
+}
+
 .vue-grid-layout {
   background: #f7f9fa;
   height: auto !important;

src/views/dashboard/controls/Widget.vue

@@ -15,7 +15,7 @@ limitations under the License. -->
 <template>
   <div class="widget">
     <div class="header flex-h">
-      <div>{{ item.widget.title || "" }}</div>
+      <div>{{ data.widget.title || "" }}</div>
       <div class="operations">
         <Icon
           class="mr-5"
@@ -28,7 +28,7 @@ limitations under the License. -->
     </div>
     <div class="body" :style="{ height: '200px', width: '400px' }">
       <component
-        :is="item.chart"
+        :is="data.graph.type"
         :intervalTime="appStoreWithOut.intervalTime"
         :data="state.source"
       />
@@ -47,7 +47,7 @@ import Loading from "@/utils/loading";
 import { useI18n } from "vue-i18n";
 
 const props = {
-  item: {
+  data: {
     type: Object as PropType<LayoutConfig>,
     default: () => ({ widget: {} }),
   },
@@ -62,7 +62,7 @@ export default defineComponent({
     const state = reactive({
       source: {},
     });
-    const { item } = toRefs(props);
+    const { data } = toRefs(props);
     const appStoreWithOut = useAppStoreWithOut();
     const dashboardStore = useDashboardStore();
     queryMetrics();
@@ -71,7 +71,7 @@ export default defineComponent({
         text: t("loading"),
         fullscreen: false,
       });
-      const json = await dashboardStore.fetchMetricValue(props.item);
+      const json = await dashboardStore.fetchMetricValue(props.data);
 
       loadingInstance.close();
       if (json.error) {
@@ -81,7 +81,7 @@ export default defineComponent({
       const metricVal = json.data.readMetricsValues.values.values.map(
         (d: any) => d.value
       );
-      const m = props.item.metrics && props.item.metrics[0];
+      const m = props.data.metrics && props.data.metrics[0];
       if (!m) {
         return;
       }
@@ -91,18 +91,18 @@ export default defineComponent({
     }
 
     function removeWidget() {
-      dashboardStore.removeWidget(item);
+      dashboardStore.removeWidget(data);
     }
     function setConfig() {
       dashboardStore.setConfigPanel(true);
-      dashboardStore.selectWidget(item);
+      dashboardStore.selectWidget(data);
     }
     return {
       state,
       appStoreWithOut,
       removeWidget,
       setConfig,
-      item,
+      data,
     };
   },
 });

src/views/dashboard/controls/index.ts

@@ -1,24 +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.
- */
-
-import Image from "./Image.vue";
-import Tabs from "./Tabs.vue";
-
-export default {
-  Image,
-  Tabs,
-};

src/views/dashboard/data.ts

@@ -25,8 +25,8 @@ export const ChartTypes = [
   { label: "Table", value: "Table" },
   { label: "Endpoint List", value: "EndpointList" },
   { label: "Instance List", value: "InstanceList" },
-  { label: "Image", value: "Image" },
-  { label: "Tab", value: "Tabs" },
+  // { label: "Image", value: "Image" },
+  // { label: "Tab", value: "Tabs" },
 ];
 export enum MetricQueryTypes {
   ReadMetricsValue = "readMetricsValue",
@@ -120,6 +120,15 @@ export const SortOrder = [
   { label: "DES", value: "DES" },
   { label: "ASC", value: "ASC" },
 ];
+export const ToolIcons = [
+  { name: "playlist_add", content: "Add Widget", id: "addWidget" },
+  { name: "all_inbox", content: "Add Tab", id: "addTab" },
+  { name: "insert_image", content: "Add Image", id: "addImage" },
+  { name: "save_alt", content: "Export", id: "export" },
+  { name: "folder_open", content: "Import", id: "import" },
+  { name: "settings", content: "Settings", id: "settings" },
+  { name: "save", content: "Apply", id: "applay" },
+];
 export const Options = [
   {
     value: "Option1",

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;