Merge remote-tracking branch 'origin/main' into 25.11

Author: yomybaby

pnpm-lock.yaml

@@ -16,6 +16,7 @@
     "@dicebear/core": "^9.2.2",
     "@iconify-json/fluent-emoji-flat": "^1.2.3",
     "@melloware/react-logviewer": "^5.3.2",
+    "@microsoft/fetch-event-source": "^2.0.1",
     "@react-hook/resize-observer": "^2.0.2",
     "@storybook/test": "^8.6.10",
     "@tanstack/react-query": "^5.69.0",

react/package.json

@@ -28,15 +28,22 @@ const AboutBackendAIModal = ({
 
   return (
     <BAIModal
+      className="about-backendai-modal"
       title={
         <img
+          className="about-logo-img"
           alt={themeConfig?.logo?.alt || 'Backend.AI Logo'}
           src={
             isDarkMode && themeConfig?.logo?.srcDark
               ? themeConfig?.logo?.src || '/manifest/backend.ai-white-text.svg'
               : themeConfig?.logo?.srcDark ||
                 '/manifest/backend.ai-white-text.svg'
           }
+          style={{
+            width: themeConfig?.logo?.aboutModalSize?.width || 159,
+            height: themeConfig?.logo?.aboutModalSize?.height || 24,
+            cursor: 'pointer',
+          }}
         />
       }
       onCancel={onRequestClose}

react/src/components/AboutBackendAIModal.tsx

@@ -8,11 +8,13 @@ import { useTranslation } from 'react-i18next';
 
 const { Text } = Typography;
 
-interface BAIConfirmModalWithInputProps extends Omit<BAIModalProps, 'icon'> {
+interface BAIConfirmModalWithInputProps
+  extends Omit<BAIModalProps, 'icon' | 'okButtonProps'> {
   confirmText: string;
   content: React.ReactNode;
   title: React.ReactNode;
   icon?: React.ReactNode;
+  okButtonProps?: Omit<BAIModalProps['okButtonProps'], 'disabled' | 'danger'>;
 }
 
 const BAIConfirmModalWithInput: React.FC<BAIConfirmModalWithInputProps> = ({
@@ -51,8 +53,12 @@ const BAIConfirmModalWithInput: React.FC<BAIConfirmModalWithInputProps> = ({
         form.resetFields();
         _.isFunction(onCancel) && onCancel(e);
       }}
-      okButtonProps={{ disabled: confirmText !== typedText, danger: true }}
       {...props}
+      okButtonProps={{
+        ...props.okButtonProps,
+        disabled: confirmText !== typedText,
+        danger: true,
+      }}
     >
       <Flex direction="column" justify="start" align="start">
         {content}

react/src/components/BAIConfirmModalWithInput.tsx

@@ -21,7 +21,8 @@ function sortEndpointTokenList(
     (item) => ({
       label: item?.token,
       value: item?.token,
-      disabled: !dayjs(item?.valid_until).tz().isAfter(now),
+      // FIXME: temporally parse UTC and change to timezone (timezone need to be added in server side)
+      disabled: !dayjs.utc(item?.valid_until).tz().isAfter(now),
     }),
   );
 }

react/src/components/Chat/EndpointTokenSelect.tsx

@@ -364,7 +364,14 @@ const ImageEnvironmentSelectFormItems: React.FC<
             {t('session.launcher.Version')}
           </Typography.Text>
         }
-        rules={[{ required: _.isEmpty(environments?.manual) }]}
+        rules={[
+          {
+            required: _.isEmpty(environments?.manual),
+            message: t('general.ValueRequired', {
+              name: t('session.launcher.Environments'),
+            }),
+          },
+        ]}
         style={{ marginBottom: 10 }}
       >
         <Select
@@ -564,7 +571,14 @@ const ImageEnvironmentSelectFormItems: React.FC<
             <Form.Item
               className="image-environment-select-form-item"
               name={['environments', 'version']}
-              rules={[{ required: _.isEmpty(environments?.manual) }]}
+              rules={[
+                {
+                  required: _.isEmpty(environments?.manual),
+                  message: t('general.ValueRequired', {
+                    name: t('session.launcher.Version'),
+                  }),
+                },
+              ]}
             >
               <Select
                 ref={versionSelectRef}

react/src/components/ImageEnvironmentSelectFormItems.tsx

@@ -263,8 +263,8 @@ const InviteFolderSettingModal: React.FC<InviteFolderSettingModalProps> = ({
                         <Select
                           style={{ minWidth: 130 }}
                           options={[
-                            { label: t('data.folders.View'), value: 'ro' },
-                            { label: t('data.folders.Edit'), value: 'rw' },
+                            { label: t('data.ReadOnly'), value: 'ro' },
+                            { label: t('data.ReadWrite'), value: 'rw' },
                           ]}
                           defaultValue={perm}
                           onChange={(nextPerm) => {

react/src/components/InviteFolderSettingModal.tsx

@@ -1,4 +1,9 @@
-import { baiSignedRequestWithPromise, compareNumberWithUnits } from '../helper';
+import {
+  SSEEventHandlerTypes,
+  baiSignedRequestWithPromise,
+  compareNumberWithUnits,
+  listenToBackgroundTask,
+} from '../helper';
 import { useCurrentDomainValue, useSuspendedBackendaiClient } from '../hooks';
 import { useTanMutation } from '../hooks/reactQueryAlias';
 import Flex from './Flex';
@@ -19,6 +24,12 @@ import { useTranslation } from 'react-i18next';
 interface ServiceValidationModalProps {
   serviceData: any;
 }
+type BackgroundTaskEvent = {
+  task_id: string;
+  message: { event: string; session_id: string };
+  current_progress: number;
+  total_progress: number;
+};
 
 const ServiceValidationView: React.FC<ServiceValidationModalProps> = ({
   serviceData,
@@ -126,58 +137,53 @@ const ServiceValidationView: React.FC<ServiceValidationModalProps> = ({
 
     const validationDateTime = dayjs().format('LLL');
 
-    let sse: EventSource | undefined = undefined;
-
     mutationsToValidateService
       .mutateAsync(serviceData)
-      .then((data: any) => {
+      .then((response: any) => {
         setValidationTime(validationDateTime);
-        // setContainerLogSummary('loading...');
-        const response = data;
-        sse = baiClient.maintenance.attach_background_task(response['task_id']);
 
-        // TODO:
         const timeoutId = setTimeout(() => {
-          sse?.close();
-          // something went wrong during validation
           setValidationStatus('error');
           message.error(t('modelService.CannotValidateNow'));
         }, 10000);
 
-        sse?.addEventListener('bgtask_updated', async (e) => {
-          const data = JSON.parse(e['data']);
-          const msg = JSON.parse(data.message);
-          if (['session_started', 'session_terminated'].includes(msg.event)) {
-            const logs = await getLogs(msg.session_id);
-            setContainerLogSummary(logs);
-            clearTimeout(timeoutId);
-            // temporally close sse manually when session is terminated
-            if (msg.event === 'session_terminated') {
-              sse?.close();
-              return;
+        const SSEEventHandlers: SSEEventHandlerTypes<BackgroundTaskEvent> = {
+          onUpdated: async (data, controller) => {
+            const msg = data.message;
+            if (validationStatus === 'error') {
+              clearTimeout(timeoutId);
+              controller?.abort();
+            } else if (
+              ['session_started', 'session_terminated'].includes(msg.event)
+            ) {
+              const logs = await getLogs(msg.session_id);
+              setContainerLogSummary(logs);
+              clearTimeout(timeoutId);
+              controller?.abort();
             }
-          }
-          setValidationStatus('processing');
-        });
-        sse?.addEventListener('bgtask_done', async (e) => {
-          setValidationStatus('finished');
-          clearTimeout(timeoutId);
-          sse?.close();
-        });
-        sse?.addEventListener('bgtask_failed', async (e) => {
-          const data = JSON.parse(e['data']);
-          const msg = JSON.parse(data.message);
-          const logs = await getLogs(msg.session_id);
-          setContainerLogSummary(logs);
-          setValidationStatus('error');
-          sse?.close();
-          throw new Error(e['data']);
-        });
-        sse?.addEventListener('bgtask_cancelled', async (e) => {
-          setValidationStatus('error');
-          sse?.close();
-          throw new Error(e['data']);
-        });
+            setValidationStatus('processing');
+          },
+          onDone: (data) => {
+            setValidationStatus('finished');
+            clearTimeout(timeoutId);
+          },
+          onFailed: async (data) => {
+            const logs = await getLogs(data.message.session_id);
+            setContainerLogSummary(logs);
+            setValidationStatus('error');
+            throw new Error(data.message.event);
+          },
+          onTaskCancelled: (data) => {
+            setValidationStatus('error');
+            throw new Error(data.message.event);
+          },
+          onTaskFailed: (data) => {
+            setValidationStatus('error');
+            throw new Error(data.message.event);
+          },
+        };
+
+        listenToBackgroundTask(response['task_id'], SSEEventHandlers);
       })
       .catch((error) => {
         message.error(
@@ -190,11 +196,6 @@ const ServiceValidationView: React.FC<ServiceValidationModalProps> = ({
         isRunningRef.current = false;
       });
     isRunningRef.current = true;
-
-    return () => {
-      sse?.close();
-    };
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

react/src/components/ServiceValidationView.tsx

@@ -17,6 +17,10 @@ type LogoConfig = {
     width?: number;
     height?: number;
   };
+  aboutModalSize?: {
+    width?: number;
+    height?: number;
+  };
 };
 type SiderConfig = {
   theme?: 'light' | 'dark';

react/src/helper/customThemeConfig.ts

@@ -3,6 +3,7 @@ import { Image } from '../components/ImageEnvironmentSelectFormItems';
 import { EnvironmentImage } from '../components/ImageList';
 import { useSuspendedBackendaiClient } from '../hooks';
 import { AttachmentsProps } from '@ant-design/x';
+import { fetchEventSource } from '@microsoft/fetch-event-source';
 import { SorterResult } from 'antd/es/table/interface';
 import Big from 'big.js';
 import dayjs from 'dayjs';
@@ -610,3 +611,88 @@ export function getOS() {
   if (_.includes(userAgent, 'linux')) return 'Linux';
   return 'Linux';
 }
+
+type SSEHandlerKeys =
+  | 'onUpdated'
+  | 'onDone'
+  | 'onFailed'
+  | 'onTaskFailed'
+  | 'onTaskCancelled';
+
+export type SSEEventHandlerTypes<
+  BaseType = unknown,
+  Overrides extends Partial<Record<SSEHandlerKeys, any>> = {},
+> = {
+  [K in SSEHandlerKeys]: (
+    data: K extends keyof Overrides ? Overrides[K] : BaseType,
+    controller?: AbortController,
+  ) => void;
+};
+/**
+ * Listens to background task events using Server-Sent Events (SSE).
+ * @param taskID
+ * @param handlers
+ * @returns
+ */
+export function listenToBackgroundTask<
+  BaseType = unknown,
+  Overrides extends Partial<Record<SSEHandlerKeys, any>> = {},
+>(
+  taskID: string,
+  handlers: Partial<SSEEventHandlerTypes<BaseType, Overrides>>,
+): () => void {
+  const controller = new AbortController();
+  const signal = controller.signal;
+
+  const searchParams = new URLSearchParams({ task_id: taskID });
+  const reqUrl = `/events/background-task?${searchParams.toString()}`;
+
+  // @ts-ignore
+  const req = globalThis.backendaiclient?.newSignedRequest('GET', reqUrl, null);
+
+  if (!req) {
+    throw new Error('Failed to create request for background task events');
+  }
+
+  fetchEventSource(req.uri, {
+    signal,
+    credentials: 'include',
+    openWhenHidden: true,
+    headers: {
+      'x-backendai-sessionid':
+        localStorage.getItem('backendaiwebui.sessionid') || '',
+    },
+    onmessage: (event) => {
+      const data = JSON.parse(event.data);
+
+      switch (event.event) {
+        case 'bgtask_updated':
+          handlers.onUpdated?.(data, controller);
+          break;
+        case 'bgtask_done':
+          handlers.onDone?.(data, controller);
+          controller.abort();
+          break;
+        case 'bgtask_failed':
+          handlers.onTaskFailed?.(data, controller);
+          controller.abort();
+          break;
+        case 'task_failed':
+          handlers.onFailed?.(data, controller);
+          controller.abort();
+          break;
+        case 'bgtask_cancelled':
+          handlers.onTaskCancelled?.(data, controller);
+          controller.abort();
+          break;
+      }
+    },
+    onerror: (error) => {
+      console.error('SSE error:', error);
+      controller.abort();
+      throw error;
+    },
+  });
+
+  return controller.abort.bind(controller);
+}