diff --git a/manifest/backend.ai-white-text.svg b/manifest/backend.ai-white-text.svg new file mode 100644 index 0000000000..431c69c6d6 --- /dev/null +++ b/manifest/backend.ai-white-text.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/react/src/App.tsx b/react/src/App.tsx index b9a9e006cb..b6c14e54b0 100644 --- a/react/src/App.tsx +++ b/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'), ); @@ -57,9 +59,9 @@ const InteractiveLoginPage = React.lazy( ); const ImportAndRunPage = React.lazy(() => import('./pages/ImportAndRunPage')); -const RedirectToSummary = () => { +const RedirectToStart = () => { useSuspendedBackendaiClient(); - const pathName = '/summary'; + const pathName = '/start'; document.dispatchEvent( new CustomEvent('move-to-from-react', { detail: { @@ -68,7 +70,7 @@ const RedirectToSummary = () => { }, }), ); - return ; + return ; }; const router = createBrowserRouter([ @@ -105,20 +107,20 @@ const router = createBrowserRouter([ children: [ { path: '/', - element: , + element: , }, { //for electron dev mode path: '/build/electron-app/app/index.html', - element: , + element: , }, { //for electron prod mode path: '/app/index.html', - element: , + element: , }, { - path: '/summary', + path: '/start', Component: () => { const { token } = theme.useToken(); return ( @@ -131,10 +133,11 @@ const router = createBrowserRouter([ closable /> {/* */} + ); }, - handle: { labelKey: 'webui.menu.Summary' }, + handle: { labelKey: 'start' }, }, { path: '/job', @@ -299,7 +302,8 @@ const router = createBrowserRouter([ { path: '/session', handle: { labelKey: 'webui.menu.Sessions' }, - Component: SessionListPage, + Component: NeoSessionPage, + // Component: SessionListPage, }, { path: '/session/start', diff --git a/react/src/components/BAIMenu.tsx b/react/src/components/BAIMenu.tsx index 397124b750..e91fea70a6 100644 --- a/react/src/components/BAIMenu.tsx +++ b/react/src/components/BAIMenu.tsx @@ -1,11 +1,10 @@ import { ConfigProvider, Menu, MenuProps, theme } from 'antd'; import React from 'react'; -// interface BAIMenuProps extends MenuProps { - -// } - -const BAIMenu: React.FC = ({ ...props }) => { +interface BAIMenuProps extends MenuProps { + isAdminMenu?: boolean; +} +const BAIMenu: React.FC = ({ ...props }) => { const { token } = theme.useToken(); return ( <> @@ -13,7 +12,6 @@ const BAIMenu: React.FC = ({ ...props }) => { {` .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 = ({ ...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 = ({ ...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, }, }, }} diff --git a/react/src/components/BAINotificationButton.tsx b/react/src/components/BAINotificationButton.tsx index 453c10efcb..92d63a636a 100644 --- a/react/src/components/BAINotificationButton.tsx +++ b/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 }) => { @@ -37,7 +39,7 @@ const BAINotificationButton: React.FC = ({ ...props }) => { size="large" icon={ - + } type="text" diff --git a/react/src/components/BAISider.tsx b/react/src/components/BAISider.tsx index 568a899a62..3ff7b890fb 100644 --- a/react/src/components/BAISider.tsx +++ b/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 = ({ `} = ({ 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 = ({ algorithm: siderTheme === 'dark' ? theme.darkAlgorithm : undefined, }} > - = ({ {otherProps.collapsed ? logoTitleCollapsed : logoTitle} - + */} {children} {bottomText && ( <> diff --git a/react/src/components/BAIStartBasicCard.tsx b/react/src/components/BAIStartBasicCard.tsx new file mode 100644 index 0000000000..73a2048dc6 --- /dev/null +++ b/react/src/components/BAIStartBasicCard.tsx @@ -0,0 +1,127 @@ +import Flex from './Flex'; +import { + Button, + ButtonProps, + Card, + CardProps, + ConfigProvider, + Divider, + theme, + Typography, +} from 'antd'; + +export interface BAIStartBasicCardProps extends CardProps { + icon: React.ReactNode; + title: React.ReactNode; + footerButtonProps: ButtonProps; + description?: string; + secondary?: Boolean; +} + +const BAIStartBasicCard: React.FC = ({ + icon, + title, + footerButtonProps, + description, + secondary, + ...cardProps +}) => { + const { token } = theme.useToken(); + + return ( + + + + + + {icon} + + + {title} + + {description && ( + + {description} + + )} + + + +