feat: add Tab on the dashboard

src/assets/icons/all_inbox.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>all_inbox</title>
+<path d="M15 15.984h6v3q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-3h6q0 1.219 0.891 2.109t2.109 0.891 2.109-0.891 0.891-2.109zM18.984 9v-3.984h-13.969v3.984h3.984q0 1.219 0.891 2.109t2.109 0.891 2.109-0.891 0.891-2.109h3.984zM18.984 3q0.797 0 1.406 0.609t0.609 1.406v6.984q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-6.984q0-0.797 0.609-1.406t1.406-0.609h13.969z"></path>
+</svg>

src/assets/icons/insert_image.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>insert_image</title>
+<path d="M8.484 13.5l-3.469 4.5h13.969l-4.5-6-3.469 4.5zM21 18.984q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-13.969q0-0.797 0.609-1.406t1.406-0.609h13.969q0.797 0 1.406 0.609t0.609 1.406v13.969z"></path>
+</svg>

src/assets/icons/library_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>library_add</title>
+<path d="M18.984 11.016v-2.016h-3.984v-3.984h-2.016v3.984h-3.984v2.016h3.984v3.984h2.016v-3.984h3.984zM20.016 2.016q0.797 0 1.383 0.586t0.586 1.383v12q0 0.797-0.586 1.406t-1.383 0.609h-12q-0.797 0-1.406-0.609t-0.609-1.406v-12q0-0.797 0.609-1.383t1.406-0.586h12zM3.984 6v14.016h14.016v1.969h-14.016q-0.797 0-1.383-0.586t-0.586-1.383v-14.016h1.969z"></path>
+</svg>

src/store/modules/dashboard.ts

@@ -49,6 +49,34 @@ export const dashboardStore = defineStore({
         w: 24,
         h: 12,
         i: String(this.layout.length),
+        type: "Widget",
+        widget: {},
+        graph: {},
+        standard: {},
+      };
+      this.layout = this.layout.map((d: LayoutConfig) => {
+        d.y = d.y + newWidget.h;
+        return d;
+      });
+      this.layout.push(newWidget);
+    },
+    addTab() {
+      const newWidget: LayoutConfig = {
+        x: 0,
+        y: 0,
+        w: 24,
+        h: 12,
+        i: String(this.layout.length),
+        type: "Tab",
+        children: [
+          {
+            name: "Tab1",
+            children: [],
+          },
+        ],
+        widget: {},
+        graph: {},
+        standard: {},
       };
       this.layout = this.layout.map((d: LayoutConfig) => {
         d.y = d.y + newWidget.h;

src/store/modules/data.ts

@@ -14,8 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { LayoutConfig } from "@/types/dashboard";
-export const ConfigData: LayoutConfig = {
+export const ConfigData = {
   x: 0,
   y: 0,
   w: 8,
@@ -23,7 +22,7 @@ export const ConfigData: LayoutConfig = {
   i: "0",
   metrics: ["service_resp_time"],
   queryMetricType: "readMetricsValues",
-  chart: "Line",
+  type: "Widget",
   widget: {
     title: "Title123",
     tips: "Tooltip123",
@@ -31,6 +30,7 @@ export const ConfigData: LayoutConfig = {
   graph: {
     showBackground: true,
     barWidth: 30,
+    type: "Line",
   },
   standard: {
     sortOrder: "DEC",

src/types/dashboard.ts

@@ -20,12 +20,13 @@ export interface LayoutConfig {
   w: number;
   h: number;
   i: string;
-  widget?: WidgetConfig;
-  graph?: GraphConfig;
-  standard?: StandardConfig;
+  widget: WidgetConfig;
+  graph: GraphConfig;
+  standard: StandardConfig;
   metrics?: string[];
-  chart?: string;
+  type?: string;
   queryMetricType?: string;
+  children?: any[];
 }
 
 export interface WidgetConfig {
@@ -34,6 +35,7 @@ export interface WidgetConfig {
 }
 
 export interface GraphConfig {
+  type?: string;
   showBackground?: boolean;
   barWidth?: number;
 }

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;