feat(FR-1679): add auto refresh to container logs (#4640)

resolves FR-1679

# Add auto-refresh feature to container logs with configurable interval

This PR enhances the container log modal with an auto-refresh feature that allows users to automatically refresh logs at configurable intervals. Users can toggle auto-refresh on/off and set their preferred refresh interval using a time picker.

The implementation includes:

- Enhanced `AutoRefreshSwitch` component to accept additional props and use a configurable interval
- Added auto-refresh controls to the container log modal with a time picker for interval selection
- Stored user preferences for auto-refresh settings in user settings
- Added internationalization support for "Auto refresh" text in all language files

<img width="312" height="53" alt="image" src="https://github.com/user-attachments/assets/eb5cd40f-d030-44dc-990f-84bc55003443" />

**Checklist:**

- [x] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after

Author: agatha197

react/src/components/AutoRefreshSwitch.tsx

@@ -1,31 +1,32 @@
-import { useRafInterval } from 'ahooks';
-import { Switch, Typography } from 'antd';
+import { Switch, SwitchProps, Typography } from 'antd';
 import { BAIFlex } from 'backend.ai-ui';
-import React, { useState } from 'react';
+import React from 'react';
+import { useInterval } from 'src/hooks/useIntervalValue';
 
 const { Text } = Typography;
 
-interface Props {
+interface Props extends SwitchProps {
   children?: React.ReactNode;
   onRefresh: () => void;
-  interval: number;
+  interval: number | null;
 }
+
 const AutoRefreshSwitch: React.FC<Props> = ({
   children,
   interval,
   onRefresh,
+  ...switchProps
 }) => {
-  const [on, setOn] = useState(true);
-
-  useRafInterval(
+  useInterval(
     () => {
       onRefresh();
     },
-    on ? interval : undefined,
+    switchProps.checked ? interval : null,
   );
+
   return (
     <BAIFlex direction="row" gap={'xs'}>
-      <Switch size="small" checked={on} onChange={setOn} />
+      <Switch size="small" {...switchProps} />
       <Text>{children}</Text>
     </BAIFlex>
   );

react/src/components/ComputeSessionNodeItems/ContainerLogModal.tsx

@@ -3,16 +3,26 @@ import { downloadBlob } from '../../helper/csv-util';
 import { useSuspendedBackendaiClient } from '../../hooks';
 import { useTanQuery } from '../../hooks/reactQueryAlias';
 import { useMemoWithPrevious } from '../../hooks/useMemoWithPrevious';
+import AutoRefreshSwitch from '../AutoRefreshSwitch';
 import BAISelect from '../BAISelect';
 import { ReloadOutlined } from '@ant-design/icons';
 import { LazyLog, ScrollFollow } from '@melloware/react-logviewer';
-import { Button, Divider, Grid, theme, Tooltip, Typography } from 'antd';
+import {
+  Button,
+  Divider,
+  Grid,
+  InputNumber,
+  theme,
+  Tooltip,
+  Typography,
+} from 'antd';
 import { BAIFlex, BAIModal, BAIModalProps } from 'backend.ai-ui';
 import _ from 'lodash';
 import { DownloadIcon } from 'lucide-react';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useFragment } from 'react-relay';
+import { useBAISettingUserState } from 'src/hooks/useBAISetting';
 
 interface ContainerLogModalProps extends BAIModalProps {
   sessionFrgmt: ContainerLogModalFragment$key | null;
@@ -24,9 +34,18 @@ const ContainerLogModal: React.FC<ContainerLogModalProps> = ({
   defaultKernelId,
   ...modalProps
 }) => {
+  'use memo';
   const baiClient = useSuspendedBackendaiClient();
   const { token } = theme.useToken();
 
+  const [autoRefreshEnabled, setAutoRefreshEnabled] = useBAISettingUserState(
+    'container_log_auto_refresh_enabled',
+  );
+  const [autoRefreshInterval, setAutoRefreshInterval] = useBAISettingUserState(
+    'container_log_auto_refresh_interval',
+  );
+  const autoRefreshIntervalValue = autoRefreshInterval || 5_000;
+
   const session = useFragment(
     graphql`
       fragment ContainerLogModalFragment on ComputeSessionNode {
@@ -86,7 +105,7 @@ const ContainerLogModal: React.FC<ContainerLogModalProps> = ({
         .get_logs(session?.row_id, session?.access_key, selectedKernelId, 15000)
         .then((req: any) => req.result.logs);
     },
-    staleTime: 5000,
+    staleTime: autoRefreshIntervalValue,
   });
 
   const [lastLineNumbers, { resetPrevious: resetPreviousLineNumber }] =
@@ -174,27 +193,6 @@ const ContainerLogModal: React.FC<ContainerLogModalProps> = ({
               .value()}
           />
           <Divider type="vertical" />
-          {/* Request logs
-          <Select
-            value={logSize}
-            options={[
-              {
-                label: 'last 100 lines',
-                value: 100,
-              },
-              {
-                label: 'Full logs',
-                value: 'full',
-              },
-            ]}
-            onChange={(value) => {
-              setLogSize(value);
-              if(value!=='full'){
-                resetPreviousLineNumber();
-              }
-              refetch();
-            }}
-          ></Select> */}
           <Tooltip title={t('button.Download')}>
             <Button
               size="middle"
@@ -217,6 +215,29 @@ const ContainerLogModal: React.FC<ContainerLogModalProps> = ({
               onClick={() => refetch()}
             />
           </Tooltip>
+          <BAIFlex gap="xs" align="center">
+            <AutoRefreshSwitch
+              checked={autoRefreshEnabled}
+              onChange={setAutoRefreshEnabled}
+              interval={isRefetching ? null : autoRefreshIntervalValue}
+              onRefresh={() => {
+                refetch();
+              }}
+            >
+              {t('button.AutoRefresh')}:
+            </AutoRefreshSwitch>
+            <InputNumber
+              min={3}
+              value={(autoRefreshIntervalValue ?? 1000) / 1000}
+              onChange={(value) => {
+                if (typeof value === 'number') {
+                  setAutoRefreshInterval(value * 1000);
+                }
+              }}
+              addonAfter={t('time.Sec')}
+              style={{ maxWidth: 150 }}
+            />
+          </BAIFlex>
         </BAIFlex>
 
         <div

react/src/hooks/useBAISetting.tsx

@@ -35,6 +35,8 @@ interface UserSettings {
 
   classic_session_list?: boolean; // `experimental_neo_session_list` has been replaced with `classic_session_list`
   max_concurrent_uploads?: number;
+  container_log_auto_refresh_enabled?: boolean;
+  container_log_auto_refresh_interval?: number;
 }
 
 export type SessionHistory = {

resources/i18n/de.json

@@ -60,6 +60,7 @@
   "button": {
     "Add": "Hinzufügen",
     "Apply": "Bewerbung",
+    "AutoRefresh": "Automatische Aktualisierung",
     "Cancel": "Stornieren",
     "Clear": "Löschen",
     "ClearLogs": "Protokolle löschen",

resources/i18n/el.json

@@ -60,6 +60,7 @@
   "button": {
     "Add": "Προσθήκη",
     "Apply": "Εφαρμογή",
+    "AutoRefresh": "Αυτόματη ανανέωση",
     "Cancel": "Ματαίωση",
     "Clear": "Διαγράφω",
     "ClearLogs": "Εκκαθάριση αρχείων καταγραφής",

resources/i18n/en.json

@@ -63,6 +63,7 @@
   "button": {
     "Add": "Add",
     "Apply": "Apply",
+    "AutoRefresh": "Auto refresh",
     "Cancel": "Cancel",
     "Clear": "Clear",
     "ClearLogs": "Clear Logs",

resources/i18n/es.json

@@ -60,6 +60,7 @@
   "button": {
     "Add": "Añadir",
     "Apply": "Solicitar",
+    "AutoRefresh": "Actualización automática",
     "Cancel": "Cancelar",
     "Clear": "Borrar",
     "ClearLogs": "Borrar registros",

resources/i18n/fi.json

@@ -60,6 +60,7 @@
   "button": {
     "Add": "Lisää",
     "Apply": "Hae",
+    "AutoRefresh": "Automaattinen päivitys",
     "Cancel": "Peruuta",
     "Clear": "Poistaa",
     "ClearLogs": "Tyhjennä lokit",

resources/i18n/fr.json

@@ -60,6 +60,7 @@
   "button": {
     "Add": "Ajouter",
     "Apply": "Appliquer",
+    "AutoRefresh": "Actualisation automatique",
     "Cancel": "Annuler",
     "Clear": "Supprimer",
     "ClearLogs": "Effacer les journaux",

resources/i18n/id.json

@@ -60,6 +60,7 @@
   "button": {
     "Add": "Tambah",
     "Apply": "Menerapkan",
+    "AutoRefresh": "Penyegaran otomatis",
     "Cancel": "Batalkan",
     "Clear": "Menghapus",
     "ClearLogs": "Hapus Log",