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

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';
 
 const { Text } = Typography;
 
-interface Props {
+interface Props extends SwitchProps {
   children?: React.ReactNode;
   onRefresh: () => void;
-  interval: number;
+  interval?: number;
 }
+
 const AutoRefreshSwitch: React.FC<Props> = ({
   children,
-  interval,
+  interval = 5_000,
   onRefresh,
+  ...switchProps
 }) => {
-  const [on, setOn] = useState(true);
-
   useRafInterval(
     () => {
       onRefresh();
     },
-    on ? interval : undefined,
+    switchProps.checked ? interval : undefined,
   );
+
   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,27 @@ 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,
+  theme,
+  TimePicker,
+  Tooltip,
+  Typography,
+} from 'antd';
 import { BAIFlex, BAIModal, BAIModalProps } from 'backend.ai-ui';
+import dayjs from 'dayjs';
 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 +35,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 +106,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: autoRefreshInterval,
   });
 
   const [lastLineNumbers, { resetPrevious: resetPreviousLineNumber }] =
@@ -174,27 +194,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 +216,33 @@ const ContainerLogModal: React.FC<ContainerLogModalProps> = ({
               onClick={() => refetch()}
             />
           </Tooltip>
+          <BAIFlex gap="xs" align="center">
+            <AutoRefreshSwitch
+              checked={autoRefreshEnabled}
+              onChange={setAutoRefreshEnabled}
+              interval={autoRefreshInterval}
+              onRefresh={() => {
+                refetch();
+              }}
+            >
+              {t('button.AutoRefresh')}:
+            </AutoRefreshSwitch>
+            <TimePicker
+              format="mm:ss"
+              value={dayjs()
+                .startOf('day')
+                .minute(Math.floor(autoRefreshIntervalValue / 60000))
+                .second(Math.floor((autoRefreshIntervalValue % 60000) / 1000))}
+              allowClear={false}
+              showNow={false}
+              onChange={(time) => {
+                const ms =
+                  (time?.minute() || 0) * 60_000 +
+                  (time?.second() || 0) * 1_000;
+                setAutoRefreshInterval(ms);
+              }}
+            />
+          </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",