feat: batch session timeout

lablup · Nov 6, 2024 · e5bf63c · e5bf63c
1 parent afacad0
commit e5bf63c
Showing 1 changed file with 66 additions and 0 deletions.
diff --git a/react/src/pages/SessionLauncherPage.tsx b/react/src/pages/SessionLauncherPage.tsx
@@ -89,13 +89,15 @@ import {
   Switch,
   Table,
   Tag,
+  TimePicker,
   Tooltip,
   Typography,
   theme,
 } from 'antd';
 import dayjs from 'dayjs';
 import { useAtomValue } from 'jotai';
 import _ from 'lodash';
+import { Check } from 'lucide-react';
 import React, { useEffect, useMemo, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { Trans, useTranslation } from 'react-i18next';
@@ -147,6 +149,8 @@ interface SessionLauncherValue {
     enabled: boolean;
     scheduleDate?: string;
     command?: string;
+    enabledTimeout?: boolean;
+    timeout?: string;
   };
   allocationPreset: string;
   envvars: EnvVarFormListValue[];
@@ -963,6 +967,68 @@ const SessionLauncherPage = () => {
                         </Form.Item>
                       </Flex>
                     </Form.Item>
+                    <Form.Item label={t('session.launcher.SessionTimeout')}>
+                      <Flex direction="row" gap={'xs'}>
+                        <Form.Item
+                          noStyle
+                          name={['batch', 'timeoutEnabled']}
+                          valuePropName="checked"
+                        >
+                          <Checkbox
+                            onChange={(e) => {
+                              if (
+                                e.target.checked &&
+                                _.isEmpty(
+                                  form.getFieldValue(['batch', 'timeout']),
+                                )
+                              ) {
+                                form.setFieldValue(
+                                  ['batch', 'timeout'],
+                                  dayjs('00:00:00', 'HH:mm:ss'),
+                                );
+                              } else if (e.target.checked === false) {
+                                form.setFieldValue(
+                                  ['batch', 'timeout'],
+                                  undefined,
+                                );
+                              }
+                              form.validateFields([['batch', 'timeout']]);
+                            }}
+                          >
+                            {t('session.launcher.Enable')}
+                          </Checkbox>
+                        </Form.Item>
+                        <Form.Item
+                          noStyle
+                          shouldUpdate={(prev, next) => {
+                            return (
+                              prev.batch?.timeoutEnabled !==
+                              next.batch?.timeoutEnabled
+                            );
+                          }}
+                        >
+                          {() => {
+                            const disabled =
+                              form.getFieldValue('batch')?.timeoutEnabled !==
+                              true;
+                            return (
+                              <>
+                                <Form.Item name={['batch', 'timeout']} noStyle>
+                                  <TimePicker
+                                    disabled={disabled}
+                                    showNow={false}
+                                    defaultOpenValue={dayjs(
+                                      '00:00:00',
+                                      'HH:mm:ss',
+                                    )}
+                                  />
+                                </Form.Item>
+                              </>
+                            );
+                          }}
+                        </Form.Item>
+                      </Flex>
+                    </Form.Item>
                   </Card>
                 )}