refactor, style

Signed-off-by: Qiaozp <[email protected]>
kubevela · Apr 16, 2023 · cb03057 · cb03057
1 parent 1158297
commit cb03057
Show file tree

Hide file tree

Showing 7 changed files with 188 additions and 123 deletions.
diff --git a/packages/velaux-data/src/plugins/types.ts b/packages/velaux-data/src/plugins/types.ts
@@ -5,6 +5,7 @@ export enum PluginType {
   PageApp = 'page-app',
   Definition = 'definition',
 }
+
 interface PluginMetaInfoLink {
   name: string;
   url: string;
@@ -50,7 +51,7 @@ export interface PluginInclude {
   catalog?: string;
 }
 
-export interface PluginMeta<T extends KeyValue = {}> {
+export interface PluginMeta<T extends KeyValue = {}> extends PluginLink {
   id: string;
   name: string;
   type: PluginType;
@@ -78,6 +79,13 @@ export interface PluginMeta<T extends KeyValue = {}> {
   live?: boolean;
 }
 
+/**
+ * Represents a plugin and link to get plugin tarball
+ */
+export interface PluginLink {
+  url: string
+}
+
 export interface PluginConfigPageProps<T extends PluginMeta> {
   plugin: VelaUXPlugin<T>;
   query: KeyValue; // The URL query parameters
@@ -104,7 +112,7 @@ export class VelaUXPlugin<T extends PluginMeta = PluginMeta> {
 
   // Tabs on the plugin page
   addConfigPage(tab: PluginConfigPage<T>) {
-    this.configPages=tab;
+    this.configPages = tab;
     return this;
   }
 
@@ -123,3 +131,8 @@ export type PluginInstallRequest = {
   id: string
   url: string
 }
+
+export type UXPlugin = {
+  id: string
+  url: string
+}
diff --git a/packages/velaux-ui/src/interface/addon.ts b/packages/velaux-ui/src/interface/addon.ts
@@ -1,5 +1,6 @@
 import type { ApplicationStatus, UIParam } from './application';
 import type { NameAlias } from './env';
+import { KeyValue } from "@velaux/data";
 
 export interface Addon {
   name: string;
@@ -20,6 +21,7 @@ export interface Addon {
     vela?: string;
     kubernetes?: string;
   };
+  uxPlugins?: KeyValue<string>
 }
 
 export interface AddonStatus {

diff --git a/packages/velaux-ui/src/layout/LeftMenu/index.tsx b/packages/velaux-ui/src/layout/LeftMenu/index.tsx
@@ -29,6 +29,7 @@ const LeftMenuModule = (props: Props) => {
     return <div />;
   }
 
+  let fallBackCatalog=0;
   const childrenSlider = menus?.map((item) => {
     const ele: JSX.Element[] = [];
     if (item.menus && item.menus.length > 0) {
@@ -55,7 +56,7 @@ const LeftMenuModule = (props: Props) => {
     }
     if (ele.length > 0) {
       return (
-        <li className="nav-container" key={item.catalog}>
+        <li className="nav-container" key={item.catalog?item.catalog:fallBackCatalog++}>
           {item.catalog && (
             <div className="main-nav padding-left-32">
               <Translation>{item.catalog}</Translation>

diff --git a/packages/velaux-ui/src/model/addons.js b/packages/velaux-ui/src/model/addons.js
@@ -35,6 +35,19 @@ export default {
       const result = yield call(getAddonsList, action.payload);
       if (result) {
         yield put({type: 'updateAddonsList', payload: result});
+        let uxPlugins = []
+        for (const addon of result.addons) {
+          if (addon.name === 'example') {
+            addon.uxPlugins['node-dashboard'] = "https://kubevela-docs.oss-accelerate.aliyuncs.com/binary/example/node-dashboad.tar.gz"
+          }
+          if (addon.uxPlugins && Object.keys(addon.uxPlugins).length > 0) {
+            for (const [key, value] of Object.entries(addon.uxPlugins)) {
+              console.log(key, value)
+              uxPlugins.push({id: key, url: value})
+            }
+          }
+        }
+        yield put({type: 'plugins/addBatchPluginToCache', payload: uxPlugins})
         if (action.callback) {
           action.callback(result);
         }

diff --git a/packages/velaux-ui/src/model/plugins.js b/packages/velaux-ui/src/model/plugins.js
@@ -16,30 +16,20 @@ export default {
         enabledPlugins: enabledPlugins,
       };
     },
-    addPluginToCache(state, {type, payload}) {
+    addOrUpdatePlugin(state, {type, payload}) {
       // add the plugin to pluginList if not exist
       const pluginList = state.pluginList;
       const plugin = payload;
-      if (!pluginList.find(p => p.id === plugin.id)) {
-        pluginList.push(plugin);
-      }
-      return {
-        ...state,
-        pluginList: pluginList,
-      }
-    },
-    removePluginFromCache(state, {type, payload}) {
-      // remove the plugin from pluginList if exist
-      const pluginList = state.pluginList;
-      const plugin = payload;
-      const index = pluginList.findIndex(p => p.id === plugin.id);
-      if (index !== -1) {
-        const removedPlugin = pluginList.splice(index, 1);
-        console.log('remove', removedPlugin)
-      }
+      const newPluginList = pluginList.map((p) => {
+        if (p.id === plugin.id) {
+          return plugin;
+        } else {
+          return p;
+        }
+      })
       return {
         ...state,
-        pluginList: pluginList,
+        pluginList: newPluginList,
       }
     },
     addPluginToEnableList(state, {type, payload}) {
@@ -56,48 +46,89 @@ export default {
     },
     removePluginFromEnableList(state, {type, payload}) {
       // remove the plugin from enabledPlugins if exist
-      const enabledPlugins = state.enabledPlugins;
       const plugin = payload;
-      const index = enabledPlugins.findIndex(p => p.id === plugin.id);
-      if (index !== -1) {
-        enabledPlugins.splice(index, 1);
+      const newEnabledPlugins = state.enabledPlugins.filter((p) => p.id !== plugin.id);
+
+      return {
+        ...state,
+        enabledPlugins: newEnabledPlugins,
+      };
+    },
+    addBatchPluginToCache(state, {type, payload}) {
+      // add the plugin to pluginList if not exist
+      const pluginList = state.pluginList;
+      // make a copy to newPluginList
+      const newPluginList = pluginList.slice();
+      for (const plugin of payload) {
+        if (!newPluginList.find(p => p.id === plugin.id)) {
+          newPluginList.push(plugin);
+        }
       }
       return {
         ...state,
-        enabledPlugins: enabledPlugins,
+        pluginList: newPluginList,
       }
-    }
+    },
+    removePluginDetail(state, {type, payload}) {
+      // remove the plugin from pluginList if exist
+      const pluginList = state.pluginList;
+      const {id} = payload;
+      const newPluginList = pluginList.map((p) => {
+        if (p.id === id) {
+          return {
+            id: p.id,
+            url: p.url,
+          }
+        } else {
+          return p;
+        }
+      })
+      return {
+        ...state,
+        pluginList: newPluginList,
+      }
+    },
   },
   effects: {
     * installPlugin(action, {call, put}) {
       const res = yield call(installPlugin, action.payload);
-      console.log(res)
-      yield put({type: 'addPluginToCache', payload: res});
+      if (res.info) {
+        yield put({type: 'addOrUpdatePlugin', payload: res});
+        if (action.callback) {
+          action.callback();
+        }
+      }
     },
     * uninstallPlugin(action, {call, put}) {
-      const res = yield call(uninstallPlugin, action.payload);
-      console.log(res)
-      yield put({type: 'removePluginFromCache', payload: {id: action.payload.id}});
-
+      yield call(uninstallPlugin, action.payload);
+      yield put({type: 'removePluginDetail', payload: action.payload})
+      if (action.callback) {
+        action.callback();
+      }
     },
     * getPluginList(action, {call, put}) {
       const res = yield call(getPluginList, action.payload);
-      console.log("getPluginList", res)
       if (res) {
         yield put({type: 'updatePluginList', payload: res});
       }
     },
     * enablePlugin(action, {call, put}) {
       const res = yield call(enablePlugin, action.payload);
-      if (res) {
+      if (res.info) {
         yield put({type: 'addPluginToEnableList', payload: res});
       }
+      if (action.callback) {
+        action.callback();
+      }
     },
     * disablePlugin(action, {call, put}) {
       const res = yield call(disablePlugin, action.payload);
       if (res) {
         yield put({type: 'removePluginFromEnableList', payload: res});
       }
+      if (action.callback) {
+        action.callback();
+      }
     }
   }
 }