standalone config page

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

package.json

@@ -36,7 +36,8 @@
     },
     "resolutions": {
         "@types/react": "17.0.14",
-        "@types/react-dom": "17.0.14"
+        "@types/react-dom": "17.0.14",
+        "@velaux-plugins/vela-adopter": "portal:/Users/qiaozp/repo/vela-adopter"
     },
     "devDependencies": {
         "@babel/core": "7.20.5",

packages/velaux-ui/src/layout/AppRootPage/index.less

@@ -0,0 +1,16 @@
+.info-item {
+  white-space: nowrap;
+  min-width: 80px;
+}
+.page-header{
+  .page-header-logo {
+    min-width: 50px;
+  }
+  .page-header-title{
+    margin-top: 0px;
+  }
+  .basic-info{
+    width: fit-content;
+    font-size: 18px;
+  }
+}

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

@@ -3,12 +3,17 @@ import * as React from 'react';
 import { Translation } from '../../components/Translation';
 import { locationService } from '../../services/LocationService';
 import { getPluginSrv, importAppPagePlugin } from '../../services/PluginService';
+import { Box, Button, Divider, Grid, Loading, Tab } from "@alifd/next";
+import './index.less'
+import { connect } from "dva";
 
 interface Props {
   pluginId: string;
+  dispatch: any;
+  loading: any;
 }
 
-export function AppRootPage({ pluginId }: Props) {
+function RootPage({ pluginId }: Props) {
   const [app, setApp] = React.useState<AppPagePlugin>();
   React.useEffect(() => {
     loadAppPlugin(pluginId, setApp);
@@ -28,7 +33,7 @@ export function AppRootPage({ pluginId }: Props) {
   );
 }
 
-export function AppConfigPage({ pluginId }: Props) {
+function ConfigPage({ pluginId, dispatch, loading }: Props) {
   const [app, setApp] = React.useState<AppPagePlugin>();
   React.useEffect(() => {
     loadAppPlugin(pluginId, setApp);
@@ -40,11 +45,90 @@ export function AppConfigPage({ pluginId }: Props) {
       </div>
     )
   }
+  const meta = app.meta
+  const { Col, Row } = Grid
+
+  const isEnabled = meta.enabled
+  const isInstalled = !!meta.info
+
+  const enablePlugin = (id: string) => {
+    console.log('dispatch', dispatch)
+    dispatch({
+      type: 'plugins/enablePlugin',
+      payload: { id },
+      callback: () => {
+        location.reload()
+      }
+    });
+  }
+  const disablePlugin = (id: string) => {
+    dispatch({
+      type: 'plugins/disablePlugin',
+      payload: { id },
+      callback: () => {
+        location.reload()
+      }
+    });
+  }
+  const pluginLoading = loading.models.plugins || false
 
   return (
-    <div>
-      <app.configPages.body plugin={app} query={{}} />
-    </div>
+    <>
+      <Loading visible={pluginLoading} style={{width: '100%'}}/>
+        <Box className={'page-header'} direction={'row'}>
+        <span className={'page-header-logo'}>
+          <img src={meta.info.logos.large} />
+        </span>
+          <Box direction={'column'}>
+            <h1 className={'page-header-title'}>{meta.name}</h1>
+            <Row className={'basic-info font-size-16'}>
+              <Col>
+                <div>Version</div>
+                <div>{meta.info.version}</div>
+              </Col>
+              <Col>
+                <Divider direction="ver" style={{ height: '100%' }} />
+              </Col>
+              <Col>
+                <Box direction={'column'}>
+                  <div>Author</div>
+                  <div>{meta.info.author?.name ?? "Unknown"}</div>
+                </Box>
+              </Col>
+              <Col>
+                <Divider direction="ver" style={{ height: '100%' }} />
+              </Col>
+              <Col className={'info-item'}>
+                <div>Status</div>
+                <div>{
+                  meta.enabled ? <Translation>Enabled</Translation> : <Translation>Disabled</Translation>
+                }</div>
+              </Col>
+            </Row>
+            <h4 className={'font-size-14'}>{meta.info.description ?? "No descriptions"}</h4>
+          </Box>
+          <Box style={{ marginLeft: 'auto' }} align={'flex-end'} direction={'row'} justify={'flex-end'}>
+            <Row gutter={8}>
+              {isInstalled && !isEnabled &&
+                  <Col>
+                    <Button type={'primary'} onClick={() => enablePlugin(pluginId)}>Enable</Button>
+                  </Col>
+              }
+              {
+                isInstalled && isEnabled &&
+                  <Col>
+                    <Button warning={true} onClick={() => disablePlugin(pluginId)}>Disable</Button>
+                  </Col>
+              }
+            </Row>
+          </Box>
+        </Box>
+        <Tab>
+          <Tab.Item title={'Config'}>
+            <app.configPages.body plugin={app} query={{}} />
+          </Tab.Item>
+        </Tab>
+    </>
   )
 }
 
@@ -67,3 +151,10 @@ async function loadAppPlugin(
     console.log(err)
   }
 }
+
+const mapStateToProps = (store: any) => ({
+  ...store.plugins, loading: store.loading
+})
+
+export const AppConfigPage = connect(mapStateToProps)(ConfigPage)
+export const AppRootPage = connect(mapStateToProps)(RootPage)

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

@@ -38,12 +38,18 @@ export default {
         let uxPlugins = []
         for (const addon of result.addons) {
           // TODO: remove this hack
-          if (addon.name === 'example'&& addon.uxPlugins) {
+          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)) {
               uxPlugins.push({id: key, url: value})
+              // Add ten test data
+              if (key === 'node-dashboard') {
+                for (let i = 0; i < 10; i++) {
+                  uxPlugins.push({id: key + i, url: value})
+                }
+              }
             }
           }
         }

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

@@ -57,16 +57,22 @@ export default {
     addBatchPluginToCache(state, {type, payload}) {
       // add the plugin to pluginList if not exist
       const pluginList = state.pluginList;
+      const enabledPlugins = state.enabledPlugins
       // 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);
+          if(plugin.enabled){
+            enabledPlugins.push(plugin);
+          }
         }
       }
+      console.log(newPluginList,enabledPlugins);
       return {
         ...state,
         pluginList: newPluginList,
+        enabledPlugins: enabledPlugins,
       }
     },
     removePluginDetail(state, {type, payload}) {
@@ -111,7 +117,7 @@ export default {
     * getPluginList(action, {call, put}) {
       const res = yield call(getPluginList, action.payload);
       if (res) {
-        yield put({type: 'updatePluginList', payload: res});
+        yield put({type: 'addBatchPluginToCache', payload: res.plugins});
       }
     },
     * detailPlugin(action, {call, put}) {

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

@@ -0,0 +1,25 @@
+.plugin-card {
+  color: black;
+  height: fit-content;
+  background: #eeeeee;
+  border: 0;
+
+  :hover {
+    background-color: #e0e0e0;
+  }
+  .plugin-card-content{
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .plugin-desc{
+      height: 70px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+  .install-btn{
+    float: right;
+  }
+}