add: draft for model player UI derived from WebUI

lablup · Sep 23, 2024 · 865229f · 865229f
1 parent 9b7c75e
commit 865229f
Show file tree

Hide file tree

Showing 34 changed files with 522 additions and 294 deletions.
diff --git a/manifest/backend.ai-model-player-white-text.svg b/manifest/backend.ai-model-player-white-text.svg
diff --git a/react/src/App.tsx b/react/src/App.tsx
@@ -62,7 +62,7 @@ const ImportAndRunPage = React.lazy(() => import('./pages/ImportAndRunPage'));
 
 const RedirectToSummary = () => {
   useSuspendedBackendaiClient();
-  const pathName = '/summary';
+  const pathName = '/serving';
   document.dispatchEvent(
     new CustomEvent('move-to-from-react', {
       detail: {
@@ -71,7 +71,7 @@ const RedirectToSummary = () => {
       },
     }),
   );
-  return <Navigate to="/summary" replace />;
+  return <Navigate to="/serving" replace />;
 };
 
 const router = createBrowserRouter([
@@ -120,25 +120,25 @@ const router = createBrowserRouter([
         path: '/app/index.html',
         element: <RedirectToSummary />,
       },
-      {
-        path: '/summary',
-        Component: () => {
-          const { token } = theme.useToken();
-          return (
-            <>
-              <AnnouncementAlert
-                showIcon
-                icon={undefined}
-                banner={false}
-                style={{ marginBottom: token.paddingContentVerticalLG }}
-                closable
-              />
-              {/* <SummaryPage /> */}
-            </>
-          );
-        },
-        handle: { labelKey: 'webui.menu.Summary' },
-      },
+      // {
+      //   path: '/data',
+      //   Component: () => {
+      //     const { token } = theme.useToken();
+      //     return (
+      //       <>
+      //         <AnnouncementAlert
+      //           showIcon
+      //           icon={undefined}
+      //           banner={false}
+      //           style={{ marginBottom: token.paddingContentVerticalLG }}
+      //           closable
+      //         />
+      //         {/* <SummaryPage /> */}
+      //       </>
+      //     );
+      //   },
+      //   handle: { labelKey: 'webui.menu.Summary' },
+      // },
       {
         path: '/job',
         handle: { labelKey: 'webui.menu.Sessions' },

diff --git a/react/src/components/BAIMenu.tsx b/react/src/components/BAIMenu.tsx
@@ -1,11 +1,9 @@
 import { ConfigProvider, Menu, MenuProps, theme } from 'antd';
 import React from 'react';
 
-// interface BAIMenuProps extends MenuProps {
+interface BAIMenuProps extends MenuProps {}
 
-// }
-
-const BAIMenu: React.FC<MenuProps> = ({ ...props }) => {
+const BAIMenu: React.FC<BAIMenuProps> = ({ ...props }) => {
   const { token } = theme.useToken();
   return (
     <>
@@ -33,8 +31,13 @@ const BAIMenu: React.FC<MenuProps> = ({ ...props }) => {
         theme={{
           components: {
             Menu: {
-              itemBorderRadius: 2,
+              itemBorderRadius: 20,
               itemMarginInline: 0,
+              colorPrimaryBorder: token.colorInfoHover,
+              itemHoverBg: token.colorInfoHover,
+              itemHoverColor: token.colorPrimaryBg,
+              itemSelectedBg: token.colorInfoHover,
+              itemSelectedColor: token.colorPrimaryBg,
             },
           },
         }}

diff --git 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<BAISiderProps> = ({
         `}
       </style>
       <Sider
-        width={221}
+        width={DRAWER_WIDTH}
         breakpoint="md"
         style={{
           overflowX: 'hidden',
@@ -65,9 +66,9 @@ const BAISider: React.FC<BAISiderProps> = ({
           position: 'sticky',
           top: 0,
           left: 0,
-          borderRight: '1px solid',
+          background: '#FFF',
           borderColor: token.colorBorder,
-          paddingTop: token.paddingContentVerticalSM,
+          paddingTop: 0, //token.paddingContentVerticalSM,
           scrollbarColor: 'auto',
         }}
         {...otherProps}
@@ -91,36 +92,15 @@ const BAISider: React.FC<BAISiderProps> = ({
             justify="start"
             align="start"
             style={{
-              padding: otherProps.collapsed
-                ? `${12 + token.marginSM}px 12px 12px 12px`
-                : `${12 + token.marginSM}px 16px 12px 16px`,
+              // padding: otherProps.collapsed
+              //   ? `${12 + token.marginSM}px 12px 12px 12px`
+              //   : `${12 + token.marginSM}px 16px 12px 16px`,
               overflow: 'visible',
               transition: 'all 0.2s ease-in-out',
               marginBottom: token.marginSM,
             }}
             className={'logo-and-text-container draggable'}
-          >
-            <div className="logo-img-wrap non-draggable">
-              <div style={{ display: otherProps.collapsed ? 'none' : 'block' }}>
-                {logo}
-              </div>
-              <div style={{ display: otherProps.collapsed ? 'block' : 'none' }}>
-                {logoCollapsed}
-              </div>
-            </div>
-            <div className="logo-title-wrap non-draggable">
-              <Typography.Text
-                style={{
-                  fontSize: 16,
-                  lineHeight: '16px',
-                  fontWeight: 200,
-                  whiteSpace: 'nowrap',
-                }}
-              >
-                {otherProps.collapsed ? logoTitleCollapsed : logoTitle}
-              </Typography.Text>
-            </div>
-          </Flex>
+          ></Flex>
           {children}
           {bottomText && (
             <>

diff --git a/react/src/components/MainLayout/MainLayout.tsx b/react/src/components/MainLayout/MainLayout.tsx
@@ -1,4 +1,5 @@
 import { useCustomThemeConfig } from '../../helper/customThemeConfig';
+import { useSuspendedBackendaiClient, useWebUINavigate } from '../../hooks';
 import { useBAISettingUserState } from '../../hooks/useBAISetting';
 import { useThemeMode } from '../../hooks/useThemeMode';
 import BAIContentWithDrawerArea from '../BAIContentWithDrawerArea';
@@ -42,6 +43,16 @@ function MainLayout() {
   const [compactSidebarActive] = useBAISettingUserState('compact_sidebar');
   const [sideCollapsed, setSideCollapsed] =
     useState<boolean>(!!compactSidebarActive);
+  const themeConfig = useCustomThemeConfig();
+  const { isDarkMode } = useThemeMode();
+  const mergedSiderTheme = themeConfig?.sider?.theme
+    ? themeConfig.sider.theme
+    : isDarkMode
+      ? 'dark'
+      : 'light';
+  const webuiNavigate = useWebUINavigate();
+  // const baiClient = useSuspendedBackendaiClient();
+  // const siteDescription = baiClient?._config?.siteDescription ?? null;
 
   useEffect(() => {
     if (sideCollapsed !== compactSidebarActive) {
@@ -122,61 +133,82 @@ function MainLayout() {
           </>
         }
       >
-        <WebUISider
-          collapsed={sideCollapsed}
-          onBreakpoint={(broken) => {
-            if (broken) {
-              setSideCollapsed(true);
-            } else {
-              !compactSidebarActive && setSideCollapsed(false);
-            }
-          }}
-          webuiplugins={webUIPlugins}
+        <WebUIHeader
+          logo={
+            <img
+              className="logo-wide"
+              alt={themeConfig?.logo?.alt || 'Backend.AI Logo'}
+              src={
+                mergedSiderTheme === 'dark' && themeConfig?.logo?.srcDark
+                  ? themeConfig?.logo?.srcDark ||
+                    '/manifest/backend.ai-text-bgdark.svg'
+                  : themeConfig?.logo?.src || '/manifest/backend.ai-text.svg'
+              }
+              style={{
+                width: themeConfig?.logo?.size?.width || 191,
+                height: themeConfig?.logo?.size?.height || 32,
+                cursor: 'pointer',
+              }}
+              onClick={() =>
+                webuiNavigate(themeConfig?.logo?.href || '/serving')
+              }
+            />
+          }
+          onClickMenuIcon={() => setSideCollapsed((v) => !v)}
+          containerElement={contentScrollFlexRef.current}
         />
       </Suspense>
       <Layout
         style={{
           backgroundColor: 'transparent',
         }}
       >
+        <Suspense
+          fallback={
+            <div>
+              <Layout.Header style={{ visibility: 'hidden', height: 62 }} />
+            </div>
+          }
+        >
+          <WebUISider
+            collapsed={sideCollapsed}
+            onBreakpoint={(broken) => {
+              if (broken) {
+                setSideCollapsed(true);
+              } else {
+                !compactSidebarActive && setSideCollapsed(false);
+              }
+            }}
+            webuiplugins={webUIPlugins}
+          />
+        </Suspense>
         <BAIContentWithDrawerArea drawerWidth={DRAWER_WIDTH}>
           <Flex
             ref={contentScrollFlexRef}
-            direction="column"
+            direction="row"
             align="stretch"
+            gap="lg"
             style={{
-              paddingLeft: token.paddingContentHorizontalLG,
-              paddingRight: token.paddingContentHorizontalLG,
+              // paddingLeft: token.paddingContentHorizontalLG,
+              // paddingRight: token.paddingContentHorizontalLG,
+              marginTop: 24,
               paddingBottom: token.paddingContentVertical,
               height: '100vh',
               overflow: 'auto',
             }}
           >
             <BAIErrorBoundary>
-              <Suspense
-                fallback={
-                  <div>
-                    <Layout.Header
-                      style={{ visibility: 'hidden', height: 62 }}
-                    />
-                  </div>
-                }
+              <Flex
+                direction="row"
+                align="stretch"
+                gap="lg"
+                style={{ marginTop: 100 }}
               >
-                <div
-                  style={{
-                    margin: `0 -${token.paddingContentHorizontalLG}px 0 -${token.paddingContentHorizontalLG}px`,
-                    position: 'sticky',
-                    top: 0,
-                    zIndex: HEADER_Z_INDEX_IN_MAIN_LAYOUT,
-                  }}
-                >
-                  <NetworkStatusBanner />
-                  <WebUIHeader
-                    onClickMenuIcon={() => setSideCollapsed((v) => !v)}
-                    containerElement={contentScrollFlexRef.current}
-                  />
-                </div>
-              </Suspense>
+                <Suspense>
+                  {/* @ts-ignore */}
+                  <backend-ai-webui id="webui-shell" ref={webUIRef} />
+                </Suspense>
+              </Flex>
               {/* <Flex direction="column"> */}
 
               {/* TODO: Breadcrumb */}
@@ -219,10 +251,6 @@ function MainLayout() {
               <Suspense>
                 <Outlet />
               </Suspense>
-              {/* To match paddig to 16 (2+14) */}
-              {/* </Flex> */}
-              {/* @ts-ignore */}
-              <backend-ai-webui id="webui-shell" ref={webUIRef} />
             </BAIErrorBoundary>
           </Flex>
         </BAIContentWithDrawerArea>