Merge branch 'main' into feature/add-import-from-hugging-face-modal

lablup · Jul 9, 2024 · f0f1be8 · f0f1be8
2 parents 7fd4eff + a533296
commit f0f1be8
Show file tree

Hide file tree

Showing 53 changed files with 2,556 additions and 1,995 deletions.
diff --git a/config.toml.sample b/config.toml.sample
@@ -30,7 +30,7 @@ isDirectorySizeVisible = true           # If false, directory size in folder exp
 maxCountForPreopenPorts = 10            # The maximum allowed number of preopen ports. If you set this option to 0, the feature of preopen ports is disabled.
 allowCustomResourceAllocation = true    # If true, display the custom allocation on the session launcher.
 eduAppNamePrefix = ""                   # The prefix of edu applauncher's app name. If the app name starts with this prefix, split it by '-' and use the tail as the name of image.
-supportModelStore = false		            # Enable model store feature. (From Backend.AI 24.03)
+enableModelStore = false		            # Enable model store feature. (From Backend.AI 24.03)
 
 [wsproxy]
 proxyURL = "[Proxy URL]"

diff --git a/react/package-lock.json b/react/package-lock.json
diff --git a/react/package.json b/react/package.json
@@ -5,17 +5,20 @@
   "dependencies": {
     "@ant-design/icons": "^5.3.6",
     "@cloudscape-design/board-components": "3.0.60",
+    "@codemirror/language": "^6.10.2",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^15.0.5",
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.17.4",
     "@types/node": "^20.14.2",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@uiw/codemirror-extensions-langs": "^4.22.2",
+    "@uiw/react-codemirror": "^4.22.2",
     "ahooks": "^3.8.0",
+    "ansi_up": "^6.0.2",
     "antd": "5.18.0",
     "antd-style": "^3.6.2",
-    "ansi_up": "^6.0.2",
     "dayjs": "^1.11.11",
     "i18next": "^23.11.5",
     "i18next-http-backend": "^2.5.2",

diff --git a/react/src/App.tsx b/react/src/App.tsx
@@ -47,6 +47,12 @@ const ResourcesPage = React.lazy(() => import('./pages/ResourcesPage'));
 const FolderExplorerOpener = React.lazy(
   () => import('./components/FolderExplorerOpener'),
 );
+const ServiceLauncherCreatePage = React.lazy(
+  () => import('./components/ServiceLauncherPageContent'),
+);
+const ServiceLauncherUpdatePage = React.lazy(
+  () => import('./pages/ServiceLauncherPage'),
+);
 const InteractiveLoginPage = React.lazy(
   () => import('./pages/InteractiveLoginPage'),
 );
@@ -144,6 +150,34 @@ const router = createBrowserRouter([
         ),
         handle: { labelKey: 'modelService.RoutingInfo' },
       },
+      {
+        path: '/service',
+        handle: { labelKey: 'webui.menu.Serving' },
+        children: [
+          {
+            path: '',
+            element: <Navigate to="/serving" replace />,
+          },
+          {
+            path: 'start',
+            handle: { labelKey: 'modelService.StartNewService' },
+            element: (
+              <BAIErrorBoundary>
+                <ServiceLauncherCreatePage />
+              </BAIErrorBoundary>
+            ),
+          },
+          {
+            path: 'update/:endpointId',
+            handle: { labelKey: 'modelService.UpdateService' },
+            element: (
+              <BAIErrorBoundary>
+                <ServiceLauncherUpdatePage />
+              </BAIErrorBoundary>
+            ),
+          },
+        ],
+      },
       {
         path: '/import',
         handle: { labelKey: 'webui.menu.Import&Run' },

diff --git a/react/src/components/BAICodeEditor.tsx b/react/src/components/BAICodeEditor.tsx
@@ -0,0 +1,49 @@
+import { loadLanguage, LanguageName } from '@uiw/codemirror-extensions-langs';
+import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';
+import { EditorView } from '@uiw/react-codemirror';
+import { useControllableValue } from 'ahooks';
+
+interface BAICodeEditorProps extends Omit<ReactCodeMirrorProps, 'language'> {
+  children: string;
+  onChange: (value: string) => void;
+  language: LanguageName;
+  editable?: boolean;
+  showLineNumbers?: boolean;
+  lineWrapping?: boolean;
+}
+
+const BAICodeEditor: React.FC<BAICodeEditorProps> = ({
+  children,
+  onChange,
+  language = 'shell',
+  editable = false,
+  showLineNumbers = true,
+  lineWrapping = false,
+  ...CodeMirrorProps
+}) => {
+  const [script, setScript] = useControllableValue<string>({
+    defaultValue: '',
+    value: children,
+    onChange,
+  });
+  const extensions = [loadLanguage(language)!];
+
+  return (
+    <CodeMirror
+      value={script}
+      onChange={(value, viewUpdate) => setScript(value)}
+      theme={'dark'}
+      extensions={
+        lineWrapping ? [EditorView.lineWrapping, ...extensions] : extensions
+      }
+      editable={editable}
+      readOnly={!editable}
+      basicSetup={{
+        lineNumbers: showLineNumbers,
+      }}
+      {...CodeMirrorProps}
+    />
+  );
+};
+
+export default BAICodeEditor;
diff --git a/react/src/components/ImageResourceFormItem.tsx b/react/src/components/ImageResourceFormItem.tsx
@@ -27,17 +27,17 @@ const ImageResourceFormItem: React.FC<ImageResourceFormItemProps> = ({
     return (
       {
         cpu: {
-          label: resourceSlotsDetails?.cpu.description,
+          label: resourceSlotsDetails?.cpu?.description,
           steps: _.map(
             ['0', '1', '2', '3', '4', '5', '6', '7', '8'],
             (value) => ({
               value,
-              label: `${value} ${resourceSlotsDetails?.cpu.display_unit}`,
+              label: `${value} ${resourceSlotsDetails?.cpu?.display_unit}`,
             }),
           ),
         },
         mem: {
-          label: resourceSlotsDetails?.mem.description,
+          label: resourceSlotsDetails?.mem?.description,
           steps: _.map(
             [
               '64m',
@@ -62,24 +62,24 @@ const ImageResourceFormItem: React.FC<ImageResourceFormItemProps> = ({
           ),
         },
         'cuda.device': {
-          label: resourceSlotsDetails?.['cuda.device'].description,
+          label: resourceSlotsDetails?.['cuda.device']?.description,
           steps: _.map(['0', '1', '2', '3', '4', '5', '6', '7', '8'], (v) => ({
             value: v,
-            label: `${v} ${resourceSlotsDetails?.['cuda.device'].display_unit}`,
+            label: `${v} ${resourceSlotsDetails?.['cuda.device']?.display_unit}`,
           })),
         },
         'cuda.shares': {
-          label: resourceSlotsDetails?.['cuda.shares'].description,
+          label: resourceSlotsDetails?.['cuda.shares']?.description,
           steps: _.map(
             ['0', '0.1', '0.2', '0.5', '1.0', '2.0', '4.0', '8.0'],
             (v) => ({
               value: v,
-              label: `${v} ${resourceSlotsDetails?.['cuda.shares'].display_unit}`,
+              label: `${v} ${resourceSlotsDetails?.['cuda.shares']?.display_unit}`,
             }),
           ),
         },
         'rocm.device': {
-          label: resourceSlotsDetails?.['rocm.device'].description,
+          label: resourceSlotsDetails?.['rocm.device']?.description,
           steps: ['0', '1', '2', '3', '4', '5', '6', '7', '8'],
         },
       }[type] || {

diff --git a/react/src/components/KeypairResourcePolicySettingModal.tsx b/react/src/components/KeypairResourcePolicySettingModal.tsx
@@ -299,20 +299,20 @@ const KeypairResourcePolicySettingModal: React.FC<
                 <FormItemWithUnlimited
                   name={['parsedTotalResourceSlots', 'cpu']}
                   unlimitedValue={undefined}
-                  label={resourceSlotsDetails?.cpu.description}
+                  label={resourceSlotsDetails?.cpu?.description}
                 >
                   <InputNumber
                     min={0}
                     max={512}
-                    addonAfter={resourceSlotsDetails?.cpu.display_unit}
+                    addonAfter={resourceSlotsDetails?.cpu?.display_unit}
                   />
                 </FormItemWithUnlimited>
               </Col>
               <Col span={12}>
                 <FormItemWithUnlimited
                   name={['parsedTotalResourceSlots', 'mem']}
                   unlimitedValue={undefined}
-                  label={resourceSlotsDetails?.mem.description}
+                  label={resourceSlotsDetails?.mem?.description}
                 >
                   <DynamicUnitInputNumber />
                 </FormItemWithUnlimited>
@@ -323,13 +323,13 @@ const KeypairResourcePolicySettingModal: React.FC<
                 <FormItemWithUnlimited
                   name={['parsedTotalResourceSlots', 'cuda.device']}
                   unlimitedValue={undefined}
-                  label={resourceSlotsDetails?.['cuda.device'].description}
+                  label={resourceSlotsDetails?.['cuda.device']?.description}
                 >
                   <InputNumber
                     min={0}
                     max={64}
                     addonAfter={
-                      resourceSlotsDetails?.['cuda.device'].display_unit
+                      resourceSlotsDetails?.['cuda.device']?.display_unit
                     }
                   />
                 </FormItemWithUnlimited>
@@ -338,14 +338,14 @@ const KeypairResourcePolicySettingModal: React.FC<
                 <FormItemWithUnlimited
                   name={['parsedTotalResourceSlots', 'cuda.shares']}
                   unlimitedValue={undefined}
-                  label={resourceSlotsDetails?.['cuda.shares'].description}
+                  label={resourceSlotsDetails?.['cuda.shares']?.description}
                 >
                   <InputNumber
                     min={0}
                     max={256}
                     step={0.1}
                     addonAfter={
-                      resourceSlotsDetails?.['cuda.shares'].display_unit
+                      resourceSlotsDetails?.['cuda.shares']?.display_unit
                     }
                   />
                 </FormItemWithUnlimited>

diff --git a/react/src/components/ProjectSelect.tsx b/react/src/components/ProjectSelect.tsx
@@ -75,7 +75,7 @@ const ProjectSelector: React.FC<Props> = ({
         email: currentUser.email,
         type:
           (userRole === 'admin' || userRole === 'superadmin') &&
-          baiClient._config.supportModelStore
+          baiClient._config.enableModelStore
             ? ['GENERAL', 'MODEL_STORE']
             : ['GENERAL'],
       },

diff --git a/react/src/components/ResourceAllocationFormItems.tsx b/react/src/components/ResourceAllocationFormItems.tsx
@@ -445,8 +445,10 @@ const ResourceAllocationFormItems: React.FC<
           style={{ marginBottom: token.marginXS }}
         >
           <ResourcePresetSelect
-            showCustom
-            showMinimumRequired
+            showCustom={baiClient._config.allowCustomResourceAllocation}
+            showMinimumRequired={
+              baiClient._config.allowCustomResourceAllocation
+            }
             onChange={(value, options) => {
               switch (value) {
                 case 'custom':
@@ -485,7 +487,7 @@ const ResourceAllocationFormItems: React.FC<
                     name={['resource', 'cpu']}
                     // initialValue={0}
                     label={
-                      resourceSlotsDetails?.cpu.human_readable_name || 'CPU'
+                      resourceSlotsDetails?.cpu?.human_readable_name || 'CPU'
                     }
                     tooltip={{
                       placement: 'right',
@@ -524,7 +526,7 @@ const ResourceAllocationFormItems: React.FC<
                     <InputNumberWithSlider
                       inputNumberProps={{
                         addonAfter:
-                          resourceSlotsDetails?.cpu.display_unit ||
+                          resourceSlotsDetails?.cpu?.display_unit ||
                           t('session.launcher.Core'),
                       }}
                       sliderProps={{

diff --git a/react/src/components/ResourceNumber.tsx b/react/src/components/ResourceNumber.tsx
@@ -56,14 +56,14 @@ const ResourceNumber: React.FC<ResourceNumberProps> = ({
       )}
 
       <Typography.Text>
-        {resourceSlotsDetails?.[type].number_format.binary
+        {resourceSlotsDetails?.[type]?.number_format.binary
           ? Number(iSizeToSize(amount, 'g', 3, true)?.numberFixed).toString()
-          : (resourceSlotsDetails?.[type].number_format.round_length || 0) > 0
+          : (resourceSlotsDetails?.[type]?.number_format.round_length || 0) > 0
             ? parseFloat(amount).toFixed(2)
             : amount}
       </Typography.Text>
       <Typography.Text type="secondary">
-        {resourceSlotsDetails?.[type].display_unit || ''}
+        {resourceSlotsDetails?.[type]?.display_unit || ''}
       </Typography.Text>
       {type === 'mem' && opts?.shmem && opts?.shmem > 0 ? (
         <Typography.Text