feat(dashboard): download & import a view

Author: GerilLeto

dashboard/src/dashboard-editor/model/content/index.ts

@@ -18,6 +18,7 @@ import { FiltersModel } from '../filters';
 import { QueriesModel } from '../queries';
 import { SQLSnippetsModel } from '../sql-snippets';
 
+import { v4 as uuidv4 } from 'uuid';
 import { TAdditionalQueryInfo } from '~/api-caller/request';
 import {
   formatSQLSnippet,
@@ -281,24 +282,45 @@ const _ContentModel = types
       self.views.findByID(viewID)?.removePanelID(panelID);
     },
     addANewPanel(viewID: string) {
-      const id = new Date().getTime().toString();
+      const id = uuidv4();
       self.panels.append(getNewPanel(id));
       self.views.findByID(viewID)?.appendPanelID(id);
     },
     applyJSONSchema(partialSchema: AnyObject) {
-      const { panels, filters, definition = {} } = partialSchema;
+      const { views, panels, filters, definition = {} } = partialSchema;
       const { queries, sqlSnippets, mock_context } = definition;
+      const panelIDMap: Map<string, string> = new Map(); // old -> new
 
       // PANELS
       if (Array.isArray(panels)) {
-        const newPanels = panels.map((p) => ({
-          ...p,
-          id: new Date().getTime().toString(),
-        }));
+        const newPanels = panels.map((p) => {
+          const newID = uuidv4();
+          panelIDMap.set(p.id, newID);
+          return {
+            ...p,
+            id: newID,
+          };
+        });
         self.panels.appendMultiple(newPanels);
 
-        const panelIDs = newPanels.map((p) => p.id);
-        self.views.VIE?.appendPanelIDs(panelIDs);
+        // import panels to current view
+        if (!Array.isArray(views) || views.length === 0) {
+          const panelIDs = newPanels.map((p) => p.id);
+          self.views.VIE?.appendPanelIDs(panelIDs);
+        }
+      }
+
+      // VIEWS
+      if (Array.isArray(views)) {
+        const newViews = views.map((v) => {
+          const panelIDs = v.panelIDs.map((oldID: string) => panelIDMap.get(oldID) ?? oldID);
+          return {
+            ...v,
+            id: uuidv4(),
+            panelIDs,
+          };
+        });
+        self.views.appendMultiple(newViews);
       }
 
       // FILTERS

dashboard/src/dashboard-editor/model/views/index.ts

@@ -4,12 +4,14 @@ import { IDashboardView } from '~/types';
 import { PanelsModelInstance } from '../panels';
 
 import { ViewDivisionConfigSnapshotIn, ViewMetaInstance, ViewModalConfigSnapshotIn } from '~/model';
+import { ViewModel, ViewModelInstance } from './view';
 
 export const ViewsModel = types
   .compose(
     'ViewsModel',
     ViewsRenderModel,
     types.model({
+      current: types.optional(types.array(ViewModel), []),
       idOfVIE: types.string, // VIE: view in edit
     }),
   )
@@ -21,7 +23,7 @@ export const ViewsModel = types
       return self.current[0].id === self.idOfVIE;
     },
     get VIE() {
-      return self.current.find(({ id }) => id === self.idOfVIE);
+      return self.current.find(({ id }) => id === self.idOfVIE) as ViewModelInstance;
     },
     get options() {
       return self.current.map((v) => ({
@@ -70,6 +72,13 @@ export const ViewsModel = types
     append(item: ViewRenderModelInstance) {
       self.current.push(item);
     },
+    appendMultiple(items: ViewRenderModelInstance[]) {
+      if (items.length === 0) {
+        return;
+      }
+
+      self.current.push(...items);
+    },
     remove(index: number) {
       self.current.splice(index, 1);
     },

dashboard/src/dashboard-editor/model/views/view.ts

@@ -0,0 +1,41 @@
+import _ from 'lodash';
+import { Instance, SnapshotIn } from 'mobx-state-tree';
+import { EViewComponentType, ViewRenderModel } from '~/model';
+import { AnyObject } from '~/types';
+import { downloadJSON } from '~/utils/download';
+
+export const ViewModel = ViewRenderModel.actions((self) => ({
+  getSchema() {
+    const view = self.json;
+    const panels: AnyObject[] = [];
+    const queries: AnyObject[] = [];
+    self.panels.forEach((p: any) => {
+      const ps = p.getSchema();
+      panels.push(ps.panel);
+      if (ps.queries.length > 0) {
+        queries.push(...ps.queries);
+      }
+    });
+
+    const ret = {
+      views: [view],
+      panels: panels,
+      definition: {
+        queries: _.uniqBy(queries, (q) => q.id),
+      },
+    };
+    return ret;
+  },
+  downloadSchema() {
+    if (self.type === EViewComponentType.Tabs) {
+      console.error(new Error('Please choose a tab first'));
+      return;
+    }
+    const schema = JSON.stringify(this.getSchema(), null, 2);
+    const filename = self.name;
+    downloadJSON(filename, schema);
+  },
+}));
+
+export type ViewModelInstance = Instance<typeof ViewModel>;
+export type ViewModelSnapshotIn = SnapshotIn<ViewModelInstance>;

dashboard/src/dashboard-editor/ui/header/download-this-view/index.tsx

@@ -15,7 +15,7 @@ const ButtonSx: Sx = {
 export const DownloadThisView = observer(() => {
   const contentModel = useEditContentModelContext();
   const cant = contentModel.views.VIE?.type === EViewComponentType.Tabs;
-  const download = () => contentModel.views.VIE.downloadSchema();
+  const download = () => contentModel.views.VIE?.downloadSchema();
   if (cant) {
     return (
       <Tooltip label="Please choose a tab first">

dashboard/src/model/render-model/dashboard/content/panels/panel.ts

@@ -73,18 +73,22 @@ export const PanelRenderModel = PanelMeta.views((self) => ({
         __TRIGGERS: {},
       };
 
-      const ret = {
+      return {
+        panel,
+        queries: self.queries.map((q) => q.json),
+      };
+    },
+    downloadSchema() {
+      const { panel, queries } = this.getSchema();
+      const schema = {
         panels: [panel],
         definition: {
-          queries: self.queries.map((q) => q.json),
+          queries,
         },
       };
-      return ret;
-    },
-    downloadSchema() {
-      const schema = JSON.stringify(this.getSchema(), null, 2);
+      const schemaStr = JSON.stringify(schema, null, 2);
       const filename = self.name;
-      downloadJSON(filename, schema);
+      downloadJSON(filename, schemaStr);
     },
   }));