feat: publishing

react/src/App.tsx

@@ -29,13 +29,15 @@ const EndpointDetailPage = React.lazy(
   () => import('./pages/EndpointDetailPage'),
 );
 // const SummaryPage = React.lazy(() => import('./pages/SummaryPage'));
+const StartPage = React.lazy(() => import('./pages/StartPage'));
 const EnvironmentPage = React.lazy(() => import('./pages/EnvironmentPage'));
 const MyEnvironmentPage = React.lazy(() => import('./pages/MyEnvironmentPage'));
 const StorageHostSettingPage = React.lazy(
   () => import('./pages/StorageHostSettingPage'),
 );
 const UserSettingsPage = React.lazy(() => import('./pages/UserSettingsPage'));
-const SessionListPage = React.lazy(() => import('./pages/SessionListPage'));
+// const SessionListPage = React.lazy(() => import('./pages/SessionListPage'));
+const NeoSessionPage = React.lazy(() => import('./pages/NeoSessionPage'));
 const SessionLauncherPage = React.lazy(
   () => import('./pages/SessionLauncherPage'),
 );
@@ -61,9 +63,9 @@ const ComputeSessionList = React.lazy(
   () => import('./components/ComputeSessionList'),
 );
 
-const RedirectToSummary = () => {
+const RedirectToStart = () => {
   useSuspendedBackendaiClient();
-  const pathName = '/summary';
+  const pathName = '/start';
   document.dispatchEvent(
     new CustomEvent('move-to-from-react', {
       detail: {
@@ -72,7 +74,7 @@ const RedirectToSummary = () => {
       },
     }),
   );
-  return <Navigate to="/summary" replace />;
+  return <Navigate to="/start" replace />;
 };
 
 const router = createBrowserRouter([
@@ -109,20 +111,20 @@ const router = createBrowserRouter([
     children: [
       {
         path: '/',
-        element: <RedirectToSummary />,
+        element: <RedirectToStart />,
       },
       {
         //for electron dev mode
         path: '/build/electron-app/app/index.html',
-        element: <RedirectToSummary />,
+        element: <RedirectToStart />,
       },
       {
         //for electron prod mode
         path: '/app/index.html',
-        element: <RedirectToSummary />,
+        element: <RedirectToStart />,
       },
       {
-        path: '/summary',
+        path: '/start',
         Component: () => {
           const { token } = theme.useToken();
           return (
@@ -135,10 +137,11 @@ const router = createBrowserRouter([
                 closable
               />
               {/* <SummaryPage /> */}
+              <StartPage />
             </>
           );
         },
-        handle: { labelKey: 'webui.menu.Summary' },
+        handle: { labelKey: 'start' },
       },
       {
         path: '/job',
@@ -308,7 +311,8 @@ const router = createBrowserRouter([
       {
         path: '/session',
         handle: { labelKey: 'webui.menu.Sessions' },
-        Component: SessionListPage,
+        Component: NeoSessionPage,
+        // Component: SessionListPage,
       },
       {
         path: '/session/start',

react/src/components/AllocatedResourcesCard.tsx

@@ -0,0 +1,127 @@
+import { useCurrentProjectValue } from '../hooks/useCurrentProject';
+import Flex from './Flex';
+import ResourceGroupSelect from './ResourceGroupSelect';
+import ResourceUnit, { ResourceUnitProps } from './ResourceUnit';
+import { SyncOutlined } from '@ant-design/icons';
+import {
+  Button,
+  Card,
+  CardProps,
+  ConfigProvider,
+  Divider,
+  Switch,
+  theme,
+  Typography,
+} from 'antd';
+import _ from 'lodash';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface AllocatedResourcesCardProps extends CardProps {}
+
+const AllocatedResourcesCard: React.FC<AllocatedResourcesCardProps> = ({
+  ...cardProps
+}) => {
+  const { token } = theme.useToken();
+  const { t } = useTranslation();
+  const currentProject = useCurrentProjectValue();
+
+  const resourceUnitMockData: Array<ResourceUnitProps> = [
+    {
+      name: 'CPU',
+      displayUnit: 'Core',
+      value: 12,
+      percentage: (4 / 12) * 100,
+    },
+    {
+      name: 'RAM',
+      displayUnit: 'GiB',
+      value: 256,
+      percentage: (8 / 12) * 100,
+    },
+    {
+      name: 'FGPU',
+      displayUnit: 'GiB',
+      value: 3.5,
+      percentage: (4 / 12) * 100,
+    },
+    {
+      name: 'ATOM',
+      displayUnit: 'Unit',
+      value: 2,
+      percentage: (2 / 12) * 100,
+    },
+  ];
+  return (
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            onlyIconSizeLG: 20,
+          },
+        },
+      }}
+    >
+      <Card
+        {...cardProps}
+        style={{
+          width: '100%',
+          height: 240,
+          // width: 936,
+          // height: 192,
+        }}
+      >
+        <Flex justify="between" style={{ marginBottom: 26 }}>
+          <Flex gap={10}>
+            <Typography.Title
+              level={4}
+              style={{
+                margin: 0,
+              }}
+            >
+              Allocated Resources
+            </Typography.Title>
+            <Switch defaultChecked />
+          </Flex>
+          <Flex>
+            <ResourceGroupSelect
+              placeholder={t('session.ResourceGroup')}
+              variant="borderless"
+              style={{ minWidth: 151, fontSize: token.fontSizeLG, padding: 0 }}
+              dropdownStyle={{ color: '#999999' }}
+              projectName={currentProject?.name}
+              value={currentProject?.name}
+            />
+            <Button
+              type="link"
+              size="large"
+              icon={<SyncOutlined />}
+              style={{ padding: 0, color: '#5DD2AD' }}
+            />
+          </Flex>
+        </Flex>
+        <Flex justify="between" style={{ maxWidth: 630 }}>
+          {_.map(
+            resourceUnitMockData,
+            (resourceUnit: ResourceUnitProps, index) => (
+              <>
+                <ResourceUnit
+                  key={index}
+                  name={resourceUnit.name}
+                  displayUnit={resourceUnit.displayUnit}
+                  value={resourceUnit.value}
+                  percentage={resourceUnit.percentage}
+                />
+                {index < resourceUnitMockData.length - 1 && (
+                  <Divider type="vertical" style={{ height: 70 }} />
+                )}
+              </>
+            ),
+          )}
+        </Flex>
+      </Card>
+    </ConfigProvider>
+  );
+};
+
+export default AllocatedResourcesCard;

react/src/components/BAIMenu.tsx

@@ -1,19 +1,17 @@
 import { ConfigProvider, Menu, MenuProps, theme } from 'antd';
 import React from 'react';
 
-// interface BAIMenuProps extends MenuProps {
-
-// }
-
-const BAIMenu: React.FC<MenuProps> = ({ ...props }) => {
+interface BAIMenuProps extends MenuProps {
+  isAdminMenu?: boolean;
+}
+const BAIMenu: React.FC<BAIMenuProps> = ({ ...props }) => {
   const { token } = theme.useToken();
   return (
     <>
       <style>
         {`
           .bai-menu li.ant-menu-item.ant-menu-item-selected {
             overflow: visible;
-            font-weight: 600;
           }
 
           .bai-menu li.ant-menu-item.ant-menu-item-selected::before {
@@ -22,7 +20,6 @@ const BAIMenu: React.FC<MenuProps> = ({ ...props }) => {
             bottom: 0;
             position: absolute;
             right: auto;
-            border-right: 3px solid ${token.colorPrimary};
             transform: scaleY(1);
             opacity: 1;
             content: "";
@@ -33,8 +30,23 @@ const BAIMenu: React.FC<MenuProps> = ({ ...props }) => {
         theme={{
           components: {
             Menu: {
-              itemBorderRadius: 2,
+              itemBorderRadius: 20,
               itemMarginInline: 0,
+              colorPrimaryBorder: props.isAdminMenu
+                ? token.colorSuccess
+                : token.colorInfoHover,
+              itemHoverBg: props.isAdminMenu
+                ? token.colorSuccessBgHover
+                : token.colorInfoHover,
+              itemHoverColor: props.isAdminMenu
+                ? token.colorSuccessHover
+                : token.colorPrimaryBg,
+              itemSelectedBg: props.isAdminMenu
+                ? token.colorSuccessBgHover
+                : token.colorInfoHover,
+              itemSelectedColor: props.isAdminMenu
+                ? token.colorSuccessHover
+                : token.colorPrimaryBg,
             },
           },
         }}

react/src/components/BAINotificationButton.tsx

@@ -10,7 +10,9 @@ import { atom, useAtom } from 'jotai';
 import _ from 'lodash';
 import React, { useEffect } from 'react';
 
-interface Props extends ButtonProps {}
+interface Props extends ButtonProps {
+  iconColor?: string;
+}
 export const isOpenDrawerState = atom(false);
 
 const BAINotificationButton: React.FC<Props> = ({ ...props }) => {
@@ -37,7 +39,7 @@ const BAINotificationButton: React.FC<Props> = ({ ...props }) => {
         size="large"
         icon={
           <Badge dot={hasRunningBackgroundTask}>
-            <BellOutlined />
+            <BellOutlined style={{ color: props.iconColor ?? 'inherit' }} />
           </Badge>
         }
         type="text"

react/src/components/BAISider.tsx

@@ -1,4 +1,5 @@
 import Flex from './Flex';
+import { DRAWER_WIDTH } from './WEBUINotificationDrawer';
 import { ConfigProvider, Grid, SiderProps, Typography, theme } from 'antd';
 import Sider from 'antd/es/layout/Sider';
 import _ from 'lodash';
@@ -56,7 +57,7 @@ const BAISider: React.FC<BAISiderProps> = ({
         `}
       </style>
       <Sider
-        width={221}
+        width={DRAWER_WIDTH}
         breakpoint="md"
         style={{
           overflowX: 'hidden',
@@ -65,7 +66,7 @@ const BAISider: React.FC<BAISiderProps> = ({
           position: 'sticky',
           top: 0,
           left: 0,
-          borderRight: '1px solid',
+          background: '#FFF',
           borderColor: token.colorBorder,
           paddingTop: token.paddingContentVerticalSM,
           scrollbarColor: 'auto',
@@ -86,7 +87,7 @@ const BAISider: React.FC<BAISiderProps> = ({
             algorithm: siderTheme === 'dark' ? theme.darkAlgorithm : undefined,
           }}
         >
-          <Flex
+          {/* <Flex
             direction="column"
             justify="start"
             align="start"
@@ -120,7 +121,7 @@ const BAISider: React.FC<BAISiderProps> = ({
                 {otherProps.collapsed ? logoTitleCollapsed : logoTitle}
               </Typography.Text>
             </div>
-          </Flex>
+          </Flex> */}
           {children}
           {bottomText && (
             <>