add many pages playground frontend

Co-authored-by: tc-imba <[email protected]>
Co-authored-by: Reapor-Yurnero <[email protected]>

Author: tc-imba

apps/genie-brickified/package.json

@@ -23,7 +23,7 @@
   },
   "scripts": {
     "start": "cross-env HOST=0.0.0.0 HTTPS=false PORT=11003 react-scripts start",
-    "build": "react-scripts build",
+    "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

projects/sbos-frontend/config/routes.ts

@@ -34,6 +34,10 @@ export default [
     icon: 'smile',
     // component: './Domain/DomainList',
     routes: [
+      {
+        path: '/domain/:domainName',
+        redirect: '/domain/:domainName/dashboard',
+      },
       {
         name: 'dashboard',
         path: '/domain/:domainName/dashboard',
@@ -63,17 +67,23 @@ export default [
         access: 'isDomainAdmin',
       },
       {
-        name: 'apps',
+        name: 'resources',
         path: '/domain/:domainName/resources',
         component: './Domain/ResourceList',
         access: 'isDomainAdmin',
       },
       {
-        name: 'apps',
+        name: 'policies',
         path: '/domain/:domainName/policies',
         component: './Domain/PolicyList',
         access: 'isDomainAdmin',
       },
+      {
+        name: 'profiles',
+        path: '/domain/:domainName/profiles',
+        component: './Domain/ProfileList',
+        access: 'isDomainAdmin',
+      },
       {
         name: 'app',
         path: '/domain/:domainName/app/:appName',
@@ -82,6 +92,27 @@ export default [
       },
     ],
   },
+  {
+    name: 'developer',
+    routes: [
+      {
+        name: 'apps',
+        path: '/developer/apps',
+        component: './Developer/AppList',
+      },
+    ]
+  },
+  {
+    name: 'admin',
+    routes: [
+      {
+        name: 'apps',
+        path: '/admin/apps',
+        component: './Admin/AppList',
+        access: 'isSiteAdmin',
+      },
+    ]
+  },
   {
     path: '/admin',
     name: 'admin',

projects/sbos-frontend/src/app.tsx

@@ -2,7 +2,7 @@ import { AvatarDropdown, AvatarName, Footer, Question, SelectLang } from '@/comp
 import { useDomainName } from '@/hooks';
 import { listDomainsBrickapiV1DomainsGet } from '@/services/brick-server-playground/domains';
 import { usersCurrentUserBrickapiV1UsersMeGet as queryCurrentUser } from '@/services/brick-server-playground/users';
-import { LinkOutlined, SmileOutlined } from '@ant-design/icons';
+import {CodeOutlined, LinkOutlined, SmileOutlined, BuildOutlined, ThunderboltOutlined } from '@ant-design/icons';
 import type { Settings as LayoutSettings, MenuDataItem } from '@ant-design/pro-components';
 import { SettingDrawer } from '@ant-design/pro-components';
 import type { RunTimeLayoutConfig } from '@umijs/max';
@@ -22,8 +22,10 @@ hljsDefineTurtle(hljs);
 hljsDefineSparql(hljs);
 
 import json from 'highlight.js/lib/languages/json';
+import plaintext from 'highlight.js/lib/languages/plaintext';
 
 hljs.registerLanguage('json', json);
+hljs.registerLanguage('plaintext', plaintext);
 
 const isDev = process.env.NODE_ENV === 'development';
 const loginPath = '/user/login';
@@ -168,15 +170,39 @@ const Layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
                 path: `/domain/${domainName}/policies`,
                 name: 'policies',
               },
+              {
+                path: `/domain/${domainName}/profiles`,
+                name: 'profiles',
+              },
             ]);
           }
           menu.push({
             path: `/domain/${domainName}`,
             name: 'domain',
             children: children,
+            icon: <BuildOutlined />,
           });
         }
-
+        menu.push({
+          name: 'developer',
+          children: [
+            {
+              path: '/developer/apps',
+              name: 'apps'
+            }
+          ],
+          icon: <CodeOutlined />,
+        });
+        menu.push({
+          name: 'admin',
+          children: [
+            {
+              path: '/admin/apps',
+              name: 'apps'
+            }
+          ],
+          icon: <ThunderboltOutlined />,
+        });
         return menu;
       },
     },

projects/sbos-frontend/src/locales/en-US/menu.ts

@@ -8,6 +8,11 @@ export default {
   'menu.domain.apps': 'App Management',
   'menu.domain.resources': 'Resource Management',
   'menu.domain.policies': 'Policy Management',
+  'menu.domain.profiles': 'Profile Management',
+  'menu.developer': "Developer",
+  'menu.developer.apps': "App List",
+  'menu.admin': "Site Admin",
+  'menu.admin.apps': "App Management",
   'menu.welcome': 'Welcome',
   'menu.more-blocks': 'More Blocks',
   'menu.home': 'Home',

projects/sbos-frontend/src/pages/Admin/AppList/index.tsx

@@ -0,0 +1,110 @@
+import {
+  appsListBrickapiV1AppsGet,
+  appsApproveBrickapiV1AppsAppApprovePost,
+  appsBuildBrickapiV1AppsAppBuildPost,
+} from '@/services/brick-server-playground/apps';
+import {useRequest} from '@@/exports';
+import {ModalForm, PageContainer, ProFormInstance} from '@ant-design/pro-components';
+import {Button, Card, Col, Flex, message, Row, Typography} from 'antd';
+import React, {useRef, useState} from 'react';
+import hljs from 'highlight.js/lib/core';
+
+const AppList: React.FC = () => {
+
+  const {data: apps, refresh: reloadApps} = useRequest(
+    async () => {
+      return await appsListBrickapiV1AppsGet({all_apps: true});
+    },
+    {
+      // manual: true,
+      onSuccess: (data: API.AppReadResp) => {
+        console.log(data);
+      },
+    },
+  );
+
+  const formRef = useRef<ProFormInstance>();
+  const [isBuildLogOpen, setIsBuildLogOpen] = useState<boolean>(false);
+  const [buildLog, setBuildLog] = useState<string>("");
+
+  const onCloseBuildLog = async () => {
+    setIsBuildLogOpen(false);
+  }
+
+  const AppCard = (app: API.AppRead) => {
+    const handleApproveApp = async () => {
+      const result = await appsApproveBrickapiV1AppsAppApprovePost({
+        app: app.id,
+      });
+      console.log(result);
+      if (result.errorCode !== "Success") {
+        message.error(result.errorCode);
+      }
+
+      reloadApps();
+    };
+
+    const handleBuildApp = async () => {
+      const result = await appsBuildBrickapiV1AppsAppBuildPost({
+        app: app.id,
+      });
+      console.log(result);
+      if (result.errorCode === "Success") {
+        setBuildLog(result?.data?.stderr || "");
+        setIsBuildLogOpen(true);
+      } else {
+        message.error("Build failed!")
+      }
+    };
+
+
+    return (
+      <Col xxl={6} xl={8} lg={8} md={8} sm={12} xs={24} key={app.id}>
+        <Card title={app.name} bordered={false}>
+          <Typography.Paragraph>{app.description}</Typography.Paragraph>
+          <Flex gap="middle" wrap>
+            {app.approved ? (
+              <Button disabled>Approved</Button>
+            ) : (
+              <Button type="primary" onClick={handleApproveApp}>
+                Approve
+              </Button>
+            )}
+            <Button type="primary" onClick={handleBuildApp}>
+              Build
+            </Button>
+          </Flex>
+        </Card>
+      </Col>
+    );
+  };
+
+  return (
+    <PageContainer>
+      <Row gutter={16}>{apps?.results.map((app: API.AppRead) => AppCard(app))}</Row>
+      <ModalForm
+        formRef={formRef}
+        title="Build Log"
+        open={isBuildLogOpen}
+        onFinish={onCloseBuildLog}
+        modalProps={{
+          destroyOnClose: true,
+          onCancel: onCloseBuildLog,
+          // cancelButtonProps: { hidden: true },
+        }}
+
+      >
+        <pre>
+        <code
+          className="hljs"
+          dangerouslySetInnerHTML={{
+            __html: hljs.highlight('plaintext', buildLog).value,
+          }}
+        />
+        </pre>
+      </ModalForm>
+    </PageContainer>
+  );
+};
+
+export default AppList;