feat: add options data

src/store/modules/dashboard.ts

@@ -16,11 +16,11 @@
  */
 import { defineStore } from "pinia";
 import { store } from "@/store";
-import { GridItemData } from "@/types/dashboard";
+import { LayoutConfig } from "@/types/dashboard";
 
 interface DashboardState {
   showConfig: boolean;
-  layout: GridItemData[];
+  layout: LayoutConfig[];
 }
 
 export const dashboardStore = defineStore({
@@ -30,25 +30,25 @@ export const dashboardStore = defineStore({
     showConfig: false,
   }),
   actions: {
-    setLayout(data: GridItemData[]) {
+    setLayout(data: LayoutConfig[]) {
       this.layout = data;
     },
     addWidget() {
-      const newWidget: GridItemData = {
+      const newWidget: LayoutConfig = {
         x: 0,
         y: 0,
-        w: 12,
+        w: 24,
         h: 12,
         i: String(this.layout.length),
       };
-      this.layout = this.layout.map((d: GridItemData) => {
+      this.layout = this.layout.map((d: LayoutConfig) => {
         d.y = d.y + newWidget.h;
         return d;
       });
       this.layout.push(newWidget);
     },
-    removeWidget(item: GridItemData) {
-      this.layout = this.layout.filter((d: GridItemData) => d.i !== item.i);
+    removeWidget(item: LayoutConfig) {
+      this.layout = this.layout.filter((d: LayoutConfig) => d.i !== item.i);
     },
     setConfigPanel(show: boolean) {
       this.showConfig = show;

src/types/dashboard.ts

@@ -1,3 +1,5 @@
+import { string } from "vue-types";
+
 /**
  * Licensed to the Apache Software Foundation (ASF) under one or more
  * contributor license agreements.  See the NOTICE file distributed with
@@ -14,11 +16,24 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export interface GridItemData {
+export interface LayoutConfig {
   x: number;
-  y: number;
+  y?: number;
   w: number;
   h: number;
   i: string;
-  static?: boolean;
+  widget?: WidgetConfig;
+  graph?: GraphConfig;
+}
+
+export interface WidgetConfig {
+  title: string;
+  Metrics: string[];
+  unit: string;
+  tips: string;
+  sortOrder: string;
+}
+
+export interface GraphConfig {
+  type: string;
 }

src/views/dashboard/Edit.vue

@@ -38,29 +38,27 @@ limitations under the License. -->
 <script lang="ts" setup>
 import { ElButton } from "element-plus";
 import GridLayout from "./panel/Layout.vue";
-import { GridItemData } from "@/types/dashboard";
+import { LayoutConfig } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
 
 const dashboardStore = useDashboardStore();
 // fetch layout data from serve side
-const layout: GridItemData[] = [
-  { x: 0, y: 0, w: 2, h: 12, i: "0" },
-  { x: 2, y: 0, w: 2, h: 12, i: "1" },
-  { x: 4, y: 0, w: 2, h: 15, i: "2" },
-  { x: 6, y: 0, w: 2, h: 9, i: "3" },
-  { x: 8, y: 0, w: 2, h: 9, i: "4" },
-  { x: 10, y: 0, w: 2, h: 9, i: "5" },
-  { x: 0, y: 5, w: 2, h: 15, i: "6" },
-  { x: 2, y: 5, w: 2, h: 15, i: "7" },
-  { x: 4, y: 5, w: 2, h: 15, i: "8" },
-  { x: 6, y: 3, w: 2, h: 12, i: "9" },
-  { x: 8, y: 4, w: 2, h: 12, i: "10" },
-  { x: 10, y: 4, w: 2, h: 12, i: "11" },
-  { x: 0, y: 10, w: 2, h: 15, i: "12" },
-  { x: 2, y: 10, w: 2, h: 15, i: "13" },
-  { x: 4, y: 8, w: 2, h: 12, i: "14" },
-  { x: 6, y: 8, w: 2, h: 12, i: "15" },
-  { x: 8, y: 10, w: 2, h: 15, i: "16" },
+const layout: LayoutConfig[] = [
+  { x: 0, y: 0, w: 4, h: 12, i: "0" },
+  { x: 4, y: 0, w: 4, h: 12, i: "1" },
+  { x: 8, y: 0, w: 4, h: 15, i: "2" },
+  { x: 12, y: 0, w: 4, h: 9, i: "3" },
+  { x: 16, y: 0, w: 4, h: 9, i: "4" },
+  { x: 20, y: 0, w: 4, h: 9, i: "5" },
+  { x: 0, y: 12, w: 4, h: 15, i: "7" },
+  { x: 4, y: 12, w: 4, h: 15, i: "8" },
+  { x: 8, y: 15, w: 4, h: 12, i: "9" },
+  { x: 12, y: 9, w: 4, h: 12, i: "10" },
+  { x: 16, y: 9, w: 4, h: 12, i: "11" },
+  { x: 20, y: 9, w: 4, h: 15, i: "12" },
+  { x: 0, y: 27, w: 4, h: 12, i: "14" },
+  { x: 4, y: 8, w: 4, h: 12, i: "15" },
+  { x: 8, y: 10, w: 4, h: 15, i: "16" },
 ];
 dashboardStore.setLayout(layout);
 document.addEventListener("click", setConfig, true);

src/views/dashboard/panel/Layout.vue

@@ -15,7 +15,7 @@ limitations under the License. -->
 <template>
   <grid-layout
     v-model:layout="dashboardStore.layout"
-    :col-num="12"
+    :col-num="24"
     :row-height="10"
     :is-draggable="true"
     :is-resizable="true"
@@ -36,11 +36,11 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { useDashboardStore } from "@/store/modules/dashboard";
-import { GridItemData } from "@/types/dashboard";
+import { LayoutConfig } from "@/types/dashboard";
 import Widget from "./Widget.vue";
 
 const dashboardStore = useDashboardStore();
-function layoutUpdatedEvent(newLayout: GridItemData) {
+function layoutUpdatedEvent(newLayout: LayoutConfig) {
   dashboardStore.setLayout(newLayout);
 }
 </script>

src/views/dashboard/panel/Widget.vue

@@ -32,11 +32,11 @@ limitations under the License. -->
 <script lang="ts" setup>
 import { defineProps } from "vue";
 import type { PropType } from "vue";
-import { GridItemData } from "@/types/dashboard";
+import { LayoutConfig } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
 
 const props = defineProps({
-  item: { type: Object as PropType<GridItemData> },
+  item: { type: Object as PropType<LayoutConfig> },
 });
 const dashboardStore = useDashboardStore();
 function removeWidget() {