Merge branch 'main' into 24.09

lablup · Oct 4, 2024 · 29a891b · 29a891b
2 parents b64ba94 + 23b5f81
commit 29a891b
Show file tree

Hide file tree

Showing 45 changed files with 747 additions and 252 deletions.
diff --git a/.cspell.json b/.cspell.json
@@ -8,6 +8,7 @@
     "cssinjs",
     "cuda",
     "FGPU",
+    "filebrowser",
     "Frgmt",
     "Gaudi",
     "keypair",
@@ -16,6 +17,8 @@
     "Popconfirm",
     "preopen",
     "shmem",
+    "superadmin",
+    "vfolder",
     "vfolders",
     "Warboy",
     "webcomponent",

diff --git a/e2e/session.test.ts → e2e/session-launcher.test.ts b/e2e/session.test.ts → e2e/session-launcher.test.ts
@@ -7,22 +7,61 @@ import {
 } from './test-util';
 import { test, expect } from '@playwright/test';
 
-test.describe('Sessions ', () => {
+test.describe('NEO Sessions Launcher', () => {
+  test.beforeEach(async ({ page }) => {
+    await loginAsUser(page);
+  });
+
   const sessionName = 'e2e-test-session';
   test('User can create session in NEO', async ({ page }) => {
-    await loginAsUser(page);
     await createSession(page, sessionName);
     await deleteSession(page, sessionName);
   });
+
+  test('Sensitive environment variables are cleared when the browser is reloaded.', async ({
+    page,
+  }) => {
+    await navigateTo(page, 'session/start');
+    await page
+      .getByRole('button', { name: '2 Environments & Resource' })
+      .click();
+    await page
+      .getByRole('button', { name: 'plus Add environment variables' })
+      .click();
+    await page.getByPlaceholder('Variable').fill('abc');
+    await page.getByPlaceholder('Variable').press('Tab');
+    await page.getByPlaceholder('Value').fill('123');
+    await page
+      .getByRole('button', { name: 'plus Add environment variables' })
+      .click();
+    await page.locator('#envvars_1_variable').fill('password');
+    await page.locator('#envvars_1_variable').press('Tab');
+    await page.locator('#envvars_1_value').fill('hello');
+    await page
+      .getByRole('button', { name: 'plus Add environment variables' })
+      .click();
+    await page.locator('#envvars_2_variable').fill('api_key');
+    await page.locator('#envvars_2_variable').press('Tab');
+    await page.locator('#envvars_2_value').fill('secret');
+    await page.waitForTimeout(1000); // Wait for the form state to be saved as query param.
+    await page.reload();
+    await expect(
+      page.locator('#envvars_1_value_help').getByText('Please enter a value.'),
+    ).toBeVisible();
+    await expect(
+      page.locator('#envvars_2_value_help').getByText('Please enter a value.'),
+    ).toBeVisible();
+  });
 });
 
 test.describe('Restrict resource policy and see resource warning message', () => {
-  test('superadmin to modify keypair resource policy', async ({ page }) => {
+  // TODO: fix this test
+  test.skip('superadmin to modify keypair resource policy', async ({
+    page,
+  }) => {
     await loginAsAdmin(page);
-
     // go to resource policy page
     await navigateTo(page, 'resource-policy');
-
     // modify resource limit (cpu, memory) to zero
     await page
       .getByRole('table')
@@ -40,10 +79,8 @@ test.describe('Restrict resource policy and see resource warning message', () =>
     await page.getByLabel('Memory(optional)').click();
     await page.getByLabel('Memory(optional)').fill('0');
     await page.getByRole('button', { name: 'OK' }).click();
-
     // go back to session page and see message in resource allocation section
     await navigateTo(page, 'session/start');
-
     await page.getByRole('button', { name: 'Next right' }).click();
     const notEnoughCPUResourceMsg = await page
       .locator('#resource_cpu_help')
@@ -53,7 +90,6 @@ test.describe('Restrict resource policy and see resource warning message', () =>
       .getByText('Allocatable resources falls')
       .nth(1)
       .textContent();
-
     expect(notEnoughCPUResourceMsg).toEqual(notEnoughRAMResourceMsg);
   });
 });
diff --git a/react/src/App.tsx b/react/src/App.tsx
@@ -7,7 +7,7 @@ import {
 import Flex from './components/Flex';
 import LocationStateBreadCrumb from './components/LocationStateBreadCrumb';
 import MainLayout from './components/MainLayout/MainLayout';
-import { useSuspendedBackendaiClient, useWebUINavigate } from './hooks';
+import { useSuspendedBackendaiClient } from './hooks';
 import { useBAISettingUserState } from './hooks/useBAISetting';
 import Page401 from './pages/Page401';
 import Page404 from './pages/Page404';
@@ -39,9 +39,6 @@ const SessionListPage = React.lazy(() => import('./pages/SessionListPage'));
 const SessionLauncherPage = React.lazy(
   () => import('./pages/SessionLauncherPage'),
 );
-const NeoSessionLauncherSwitchAlert = React.lazy(
-  () => import('./components/NeoSessionLauncherSwitchAlert'),
-);
 const ResourcePolicyPage = React.lazy(
   () => import('./pages/ResourcePolicyPage'),
 );
@@ -142,15 +139,6 @@ const router = createBrowserRouter([
       {
         path: '/job',
         handle: { labelKey: 'webui.menu.Sessions' },
-        Component: () => {
-          const { token } = theme.useToken();
-          useSuspendedBackendaiClient(); // make sure the client is ready
-          return (
-            <NeoSessionLauncherSwitchAlert
-              style={{ marginBottom: token.paddingContentVerticalLG }}
-            />
-          );
-        },
       },
       {
         path: '/serving',
@@ -210,22 +198,18 @@ const router = createBrowserRouter([
         path: '/import',
         handle: { labelKey: 'webui.menu.Import&Run' },
         Component: () => {
-          const { token } = theme.useToken();
-          const [is2409Launcher] = useBAISettingUserState(
-            'use_2409_session_launcher',
+          const [classicSessionLauncher] = useBAISettingUserState(
+            'classic_session_launcher',
           );
           return (
             <BAIErrorBoundary>
-              <NeoSessionLauncherSwitchAlert
-                style={{ marginBottom: token.paddingContentVerticalLG }}
-              />
-              {is2409Launcher ? null : <ImportAndRunPage />}
+              {classicSessionLauncher ? null : <ImportAndRunPage />}
               {/* @ts-ignore */}
               <backend-ai-import-view
                 active
                 class="page"
                 name="import"
-                sessionLauncherType={is2409Launcher ? 'classic' : 'neo'}
+                sessionLauncherType={classicSessionLauncher ? 'classic' : 'neo'}
               />
             </BAIErrorBoundary>
           );
@@ -321,7 +305,6 @@ const router = createBrowserRouter([
         path: '/session/start',
         handle: { labelKey: 'session.launcher.StartNewSession' },
         Component: () => {
-          const webuiNavigate = useWebUINavigate();
           const { token } = theme.useToken();
           return (
             <Flex
@@ -330,13 +313,6 @@ const router = createBrowserRouter([
               align="stretch"
               style={{ paddingBottom: token.paddingContentVerticalLG }}
             >
-              <NeoSessionLauncherSwitchAlert
-                onChange={(value) => {
-                  if (value === 'current') {
-                    webuiNavigate('/job');
-                  }
-                }}
-              />
               <LocationStateBreadCrumb />
               <Suspense
                 fallback={

diff --git a/react/src/BAICard.tsx b/react/src/BAICard.tsx
@@ -3,7 +3,7 @@ import { Button, Card, CardProps, theme } from 'antd';
 import _ from 'lodash';
 import React, { ReactNode } from 'react';
 
-interface BAICardProps extends CardProps {
+export interface BAICardProps extends CardProps {
   status?: 'success' | 'error' | 'warning' | 'default';
   extraButtonTitle?: string | ReactNode;
   onClickExtraButton?: () => void;

diff --git a/react/src/components/AvailableResourcesCard.tsx b/react/src/components/AvailableResourcesCard.tsx
@@ -3,7 +3,7 @@ import { useCurrentProjectValue } from '../hooks/useCurrentProject';
 import { useResourceLimitAndRemaining } from '../hooks/useResourceLimitAndRemaining';
 import BAIProgressWithLabel from './BAIProgressWithLabel';
 import Flex from './Flex';
-import ResourceGroupSelect from './ResourceGroupSelect';
+import ResourceGroupSelectForCurrentProject from './ResourceGroupSelectForCurrentProject';
 import { QuestionCircleOutlined, ReloadOutlined } from '@ant-design/icons';
 import { Button, Card, Tooltip } from 'antd';
 import React, { useDeferredValue, useState } from 'react';
@@ -23,11 +23,9 @@ const AvailableResourcesCard = () => {
     <Card
       title={
         <Flex direction="row" gap={'xs'}>
-          <ResourceGroupSelect
+          <ResourceGroupSelectForCurrentProject
             showSearch
-            autoSelectDefault
             style={{ minWidth: 100 }}
-            value={selectedResourceGroup}
             onChange={(v) => setSelectedResourceGroup(v)}
             loading={selectedResourceGroup !== deferredSelectedResourceGroup}
             popupMatchSelectWidth={false}

diff --git a/react/src/components/BAISelect.tsx b/react/src/components/BAISelect.tsx
@@ -0,0 +1,36 @@
+import { Select, SelectProps } from 'antd';
+import _ from 'lodash';
+import React, { useLayoutEffect } from 'react';
+
+interface BAISelectProps extends SelectProps {
+  autoSelectOption?: boolean | ((options: SelectProps['options']) => any);
+}
+/**
+ * BAISelect component.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {boolean | Function} props.autoSelectOption - Determines whether to automatically select an option.
+ * @param {any} props.value - The current value of the select.
+ * @param {Array} props.options - The available options for the select.
+ * @param {Function} props.onChange - The callback function to handle value changes.
+ * @returns {JSX.Element} The rendered BAISelect component.
+ */
+const BAISelect: React.FC<BAISelectProps> = ({
+  autoSelectOption,
+  ...selectProps
+}) => {
+  const { value, options, onChange } = selectProps;
+  useLayoutEffect(() => {
+    if (autoSelectOption && _.isEmpty(value) && options?.[0]) {
+      if (_.isBoolean(autoSelectOption)) {
+        onChange?.(options?.[0].value || options?.[0], options?.[0]);
+      } else if (_.isFunction(autoSelectOption)) {
+        onChange?.(autoSelectOption(options), options[0]);
+      }
+    }
+  }, [value, options, onChange, autoSelectOption]);
+  return <Select {...selectProps} />;
+};
+
+export default BAISelect;
diff --git a/react/src/components/DynamicUnitInputNumberWithSlider.stories.tsx b/react/src/components/DynamicUnitInputNumberWithSlider.stories.tsx
@@ -71,3 +71,46 @@ export const AllowOlnyGiB: Story = {
     units: ['m', 'g'],
   },
 };
+
+export const GreaterMinThanMax: Story = {
+  name: 'Greater min than max',
+  args: {
+    min: '3g',
+    max: '1g',
+    units: ['m', 'g'],
+  },
+};
+
+export const ExtraMarks: Story = {
+  name: 'Extra marks',
+  args: {
+    min: '0g',
+    max: '1g',
+    units: ['m', 'g'],
+    extraMarks: {
+      0.5: {
+        style: {
+          color: 'red',
+        },
+        label: '0.5g',
+      },
+    },
+  },
+};
+
+export const ExtraMarksWithGreaterMinThanMax: Story = {
+  name: 'Extra marks with greater min than max',
+  args: {
+    min: '3g',
+    max: '1g',
+    units: ['m', 'g'],
+    extraMarks: {
+      0.5: {
+        style: {
+          color: 'red',
+        },
+        label: '0.5g',
+      },
+    },
+  },
+};