Fix url gone after install

Signed-off-by: Qiaozp <[email protected]>

packages/velaux-ui/src/api/plugin.ts

@@ -11,6 +11,10 @@ export function getPluginList(params: any) {
   return get(base + managePlugin, { params: params }).then((res) => res);
 }
 
+export function detailPlugin(params: { id: string }) {
+  return get(`${base + managePlugin}/${params.id}`, { params: params }).then((res) => res);
+}
+
 export function enablePlugin(params: PluginEnableRequest) {
   return post(`${base + managePlugin}/${params.id}/enable`, params);
 }

packages/velaux-ui/src/layout/LayoutRouter/index.tsx

@@ -37,7 +37,7 @@ import DefinitionsLayout from '../Definitions';
 import ProjectLayout from '../Project';
 import MyProjectList from '../../pages/MyProjectList';
 import PlatformSetting from '../../pages/PlatformSetting';
-import { AppRootPage } from '../AppRootPage';
+import { AppConfigPage, AppRootPage } from '../AppRootPage';
 
 export default function Router() {
   return (
@@ -398,12 +398,25 @@ export default function Router() {
           return <PlatformSetting {...props}></PlatformSetting>;
         }}
       />
+      <Route
+        exact={true}
+        path="/plugins"
+        render={(props: any) => {
+          return <Addons plugin={true} {...props}></Addons>;
+        }}
+      />
       <Route
         path="/plugins/:pluginId"
         render={(props: any) => {
           return <AppRootPage pluginId={props.match.params.pluginId}></AppRootPage>;
         }}
       />
+      <Route
+        path="/plugin-config/:pluginId"
+        render={(props: any) => {
+          return <AppConfigPage pluginId={props.match.params.pluginId}></AppConfigPage>;
+        }}
+      />
       <Route path="/notFound" component={NotFound} />
       <Redirect to="/notFound" />
     </Switch>

packages/velaux-ui/src/layout/index.tsx

@@ -4,7 +4,7 @@ import LayoutRouter from './LayoutRouter';
 import LeftMenu from './LeftMenu';
 import Header from './Header';
 import './index.less';
-import { LayoutMode, Workspace, LayoutModes } from '@velaux/data';
+import { LayoutMode, LayoutModes, Workspace } from '@velaux/data';
 import { locationService } from '../services/LocationService';
 import { menuService } from '../services/MenuService';
 import { ErrorBoundary } from '../components/ErrorBoundary';

packages/velaux-ui/src/model/addons.js

@@ -37,12 +37,12 @@ export default {
         yield put({type: 'updateAddonsList', payload: result});
         let uxPlugins = []
         for (const addon of result.addons) {
-          if (addon.name === 'example') {
+          // TODO: remove this hack
+          if (addon.name === 'example'&& addon.uxPlugins) {
             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})
             }
           }

packages/velaux-ui/src/model/plugins.js

@@ -1,4 +1,4 @@
-import {disablePlugin, enablePlugin, getPluginList, installPlugin, uninstallPlugin} from "../api/plugin";
+import {detailPlugin, disablePlugin, enablePlugin, getPluginList, installPlugin, uninstallPlugin} from "../api/plugin";
 
 export default {
   namespace: 'plugins',
@@ -93,6 +93,8 @@ export default {
     * installPlugin(action, {call, put}) {
       const res = yield call(installPlugin, action.payload);
       if (res.info) {
+        // There's no url in returned plugin object, so we need to set it after calling
+        res.url = action.payload.url
         yield put({type: 'addOrUpdatePlugin', payload: res});
         if (action.callback) {
           action.callback();
@@ -112,6 +114,12 @@ export default {
         yield put({type: 'updatePluginList', payload: res});
       }
     },
+    * detailPlugin(action, {call, put}) {
+      const res = yield call(detailPlugin, action.payload);
+      if (res) {
+        yield put({type: 'addOrUpdatePlugin', payload: res});
+      }
+    },
     * enablePlugin(action, {call, put}) {
       const res = yield call(enablePlugin, action.payload);
       if (res.info) {

packages/velaux-ui/src/pages/Addons/components/plugin/index.tsx

@@ -3,7 +3,8 @@ import { connect } from 'dva';
 import './index.less';
 
 import { Box, Button, Dialog, List, Message } from "@alifd/next";
-import type { KeyValue, PluginMeta } from '@velaux/data';
+import type { KeyValue, PluginMeta, } from '@velaux/data';
+import { PluginType } from "@velaux/data";
 import PluginConfig from "../plugin-config";
 import i18n from "../../../../i18n";
 import Empty from "../../../../components/Empty";
@@ -19,6 +20,12 @@ type Props = {
   pluginList?: PluginMeta[];
   enabledPlugins?: PluginMeta[];
   errorMessage?: string;
+  history?: {
+    push: (path: string, state?: any) => void;
+    location: {
+      pathname: string;
+    };
+  };
 };
 
 
@@ -123,8 +130,33 @@ class Plugin extends React.Component<Props, State> {
     }
   };
 
+  handleConfigClose = () => {
+    const plugin = this.state.currentPlugin
+    if (!plugin || !plugin.id) {
+      return
+    }
+    this.props.dispatch({
+      type: 'plugins/detailPlugin',
+      payload: { id: plugin.id },
+    })
+    this.setState({
+      showConfig: false,
+    })
+
+  }
+
+  handleGoToPage = (plugin: PluginMeta) => {
+    const { id } = plugin;
+    this.props.history?.push(`/plugins/${id}`)
+  }
+
+  handleGoToPluginConfig = (plugin: PluginMeta) => {
+    const { id } = plugin;
+    this.props.history?.push(`/plugin-config/${id}`)
+  }
+
   render() {
-    const { pluginList, enabledPlugins, } = this.props;
+    const { pluginList, enabledPlugins } = this.props;
     const { currentPlugin, showConfig } = this.state;
 
     return (
@@ -153,19 +185,17 @@ class Plugin extends React.Component<Props, State> {
               <List.Item key={plugin.id} className="plugin-row">
                 <div
                   style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
-                  <div>{plugin.id}</div>
+                  <a onClick={() => {
+                    if (plugin.type === PluginType.PageApp) {
+                      this.handleGoToPage(plugin)
+                    }
+                  }}>
+                    <div>{plugin.id}</div>
+                  </a>
                   <div>
                     <Box spacing={8} direction="row">
                       {isInstalled && isEnabled && (
-                        <Button onClick={() => {
-                          console.log('plugin', plugin)
-                          this.setState({
-                            currentPlugin: plugin,
-                            showConfig: true,
-                          }, () => {
-                            console.log('currentPlugin', this.state.currentPlugin)
-                          })
-                        }}>Config</Button>
+                        <Button onClick={() => this.handleGoToPluginConfig(plugin)}>Config</Button>
                       )}
 
                       {!isInstalled && (
@@ -175,26 +205,19 @@ class Plugin extends React.Component<Props, State> {
                       )}
 
                       {isInstalled && !isEnabled && (
-                        <Button type={"primary"} onClick={() => {
-                          console.log('hit `Enable` plugin', plugin)
-                          this.setState({
-                            currentPlugin: plugin,
-                            showConfig: true,
-                          }, () => {
-                            console.log('currentPlugin', this.state.currentPlugin)
-                          })
-                        }}>Enable</Button>
+                        <Button type={"primary"} onClick={() => this.handleGoToPluginConfig(plugin)}>Enable</Button>
                       )}
 
                       {isInstalled && isEnabled && (
-                        <Button onClick={() => this.disablePlugin(plugin.id)}>Disable</Button>
+                        <Button warning onClick={() => this.disablePlugin(plugin.id)}>Disable</Button>
                       )}
 
                       {isInstalled && !isEnabled && (
                         <Button warning onClick={() => this.uninstallPlugin(plugin.id)}>
                           Uninstall
                         </Button>
                       )}
+
                     </Box>
                   </div>
                 </div>
@@ -204,7 +227,8 @@ class Plugin extends React.Component<Props, State> {
         </List>
       </div>
     );
-  };
+  }
+  ;
 }
 
 export default Plugin;

packages/velaux-ui/src/pages/Addons/index.tsx

@@ -16,6 +16,8 @@ import SelectSearch from './components/search/index';
 import Plugin from "./components/plugin";
 
 type Props = {
+  history: any;
+  plugin: boolean
   dispatch: ({}) => {};
   loading: any;
   match?: any;
@@ -45,6 +47,7 @@ type State = {
 class Addons extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
+    console.log('props', props)
     this.state = {
       showAddonDetail: false,
       addonName: '',
@@ -80,6 +83,7 @@ class Addons extends React.Component<Props, State> {
       payload: params,
     });
   }
+
   generateTagList = () => {
     const { addonsList } = this.props;
     const tagMap: Map<string, number> = new Map<string, number>();
@@ -135,10 +139,12 @@ class Addons extends React.Component<Props, State> {
     const {
       addonsList = [],
       registryList = [],
+      history,
       dispatch,
       loading,
       addonListMessage,
       enabledAddons,
+      plugin
     } = this.props;
 
     const addonLoading = loading.models.addons;
@@ -152,8 +158,8 @@ class Addons extends React.Component<Props, State> {
           subTitle="Manages extended platform capabilities for KubeVela and VelaUX."
         />
 
-        <Tab>
-          <Tab.Item title="Addons">
+        <Tab defaultActiveKey={plugin ? 'plugin' : 'addon'}>
+          <Tab.Item title="Addons" key={'addon'}>
             <SelectSearch
               dispatch={dispatch}
               tagList={tagList}
@@ -210,10 +216,11 @@ class Addons extends React.Component<Props, State> {
               />
             </If>
           </Tab.Item>
-          <Tab.Item title="VelaUX Plugins">
+          <Tab.Item title="VelaUX Plugins" key={'plugin'}>
             <Loading visible={pluginLoading} style={{ width: '100%' }}>
               <Plugin
                 dispatch={dispatch}
+                history={history}
               ></Plugin>
             </Loading>
           </Tab.Item>

packages/velaux-ui/src/pages/Cluster/index.tsx

@@ -3,6 +3,7 @@ import { connect } from 'dva';
 import React, { Fragment } from 'react';
 
 import { getEnabledAddons, getAddonsList } from '../../api/addons';
+
 import { deleteCluster } from '../../api/cluster';
 import { If } from '../../components/If';
 import { ListTitle } from '../../components/ListTitle';

packages/velaux-ui/src/services/MenuService.tsx

@@ -13,7 +13,7 @@ import { BsFileEarmarkPerson, BsFillFileCodeFill, BsHddNetworkFill, BsPlugin } f
 import { RiUserSettingsFill } from 'react-icons/ri';
 import { MdConfirmationNumber } from 'react-icons/md';
 import { ApplicationBase, EnvBinding } from '../interface/application';
-import { Workspace, Menu, MenuTypes } from '@velaux/data';
+import { Menu, MenuTypes, Workspace } from '@velaux/data';
 import { locationService } from './LocationService';
 import { LoginUserInfo } from '../interface/user';
 import { checkPermission } from '../utils/permission';
@@ -99,7 +99,7 @@ const defaultWorkspaceMenus: Menu[] = [
     label: 'Addons & Plugins',
     name: 'addon-list',
     permission: { resource: 'addon:*', action: 'list' },
-    relatedRoute: ['/addons'],
+    relatedRoute: ['/addons', '/plugins', '/plugin-config'],
   },
   {
     workspace: 'extension',
@@ -184,10 +184,15 @@ export type LeftMenu = {
  */
 export interface MenuService {
   loadWorkspaces(user?: LoginUserInfo): Workspace[];
+
   loadCurrentWorkspace(): Workspace | undefined;
+
   loadMenus(workspace: Workspace, user: LoginUserInfo): LeftMenu[];
+
   loadProjectMenus(p: Project): Menu[];
+
   loadApplicationEnvMenus(p: Project, app: ApplicationBase, env: EnvBinding): Menu[];
+
   loadPluginMenus(): Promise<Menu[]>;
 }
 
@@ -196,6 +201,7 @@ export class MenuWrapper implements MenuService {
   private menus: Menu[];
   private workspaces: Workspace[];
   private pluginLoaded: boolean;
+
   constructor() {
     this.menus = _.cloneDeep(defaultWorkspaceMenus);
     this.workspaces = _.cloneDeep(defaultWorkspaces);
@@ -238,6 +244,7 @@ export class MenuWrapper implements MenuService {
   getWorkspace(name: string): Workspace | undefined {
     return this.workspaces.find((w) => w.name == name);
   }
+
   // This function should be called after calling the loadPluginMenus function
   loadCurrentWorkspace(): Workspace | undefined {
     let w: Workspace | undefined = undefined;
@@ -284,9 +291,11 @@ export class MenuWrapper implements MenuService {
     });
     return matched;
   }
+
   loadProjectMenus(p: Project): Menu[] {
     return [];
   }
+
   loadApplicationEnvMenus(p: Project, app: ApplicationBase, env: EnvBinding): Menu[] {
     return [];
   }