Update App Launcher Keep Alive based on new design (nebari-dev#233)

* Add keep alive switch to app form. * Update form switches for consistency. * Fix positioning issue on tooltip.
jbouder · Apr 12, 2024 · 4c77288 · 4c77288
1 parent 0ffeaa5
commit 4c77288
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 28 deletions.
diff --git a/jhub_apps/static/js/index.js b/jhub_apps/static/js/index.js
diff --git a/ui/src/components/app-form/app-form.tsx b/ui/src/components/app-form/app-form.tsx
@@ -1,4 +1,6 @@
+import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
 import {
+  Box,
   Button,
   FormControl,
   FormControlLabel,
@@ -7,6 +9,8 @@ import {
   Select,
   Switch,
   TextField,
+  Tooltip,
+  Typography,
 } from '@mui/material';
 import {
   AppFrameworkProps,
@@ -59,6 +63,7 @@ export const AppForm = ({ id }: AppFormProps): React.ReactElement => {
     defaultImage,
   );
   const [isPublic, setIsPublic] = useState(false);
+  const [keepAlive, setKeepAlive] = useState(false);
   // Get the app data if we're editing an existing app
   const { data: formData, error: formError } = useQuery<
     AppQueryGetProps,
@@ -123,6 +128,7 @@ export const AppForm = ({ id }: AppFormProps): React.ReactElement => {
       custom_command: '',
       profile: '',
       is_public: false,
+      keep_alive: false,
     },
   });
   const currentFramework = watch('framework');
@@ -152,6 +158,7 @@ export const AppForm = ({ id }: AppFormProps): React.ReactElement => {
         custom_command,
         profile,
         is_public: isPublic,
+        keep_alive: keepAlive,
       };
       setCurrentFormInput(payload);
       navigate(`/server-types${id ? `?id=${id}` : ''}`);
@@ -171,6 +178,7 @@ export const AppForm = ({ id }: AppFormProps): React.ReactElement => {
           custom_command: custom_command || '',
           profile: profile || '',
           public: isPublic,
+          keep_alive: keepAlive,
         },
       };
 
@@ -268,6 +276,7 @@ export const AppForm = ({ id }: AppFormProps): React.ReactElement => {
           : undefined,
       });
       setIsPublic(formData.user_options.public);
+      setKeepAlive(formData.user_options.keep_alive);
       setCurrentImage(formData.user_options.thumbnail);
     }
   }, [
@@ -295,6 +304,7 @@ export const AppForm = ({ id }: AppFormProps): React.ReactElement => {
         profile: currentFormInput.profile || '',
       });
       setIsPublic(currentFormInput.is_public);
+      setKeepAlive(currentFormInput.keep_alive);
       setCurrentImage(currentFormInput.thumbnail);
     }
   }, [currentFormInput, reset, setCurrentImage, setCurrentServerName]);
@@ -463,6 +473,56 @@ export const AppForm = ({ id }: AppFormProps): React.ReactElement => {
             </FormControl>
           )}
         />
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+          }}
+        >
+          <Tooltip
+            placement="bottom-start"
+            title={
+              <Typography sx={{ fontSize: '10px', fontWeight: 600 }}>
+                Keep alive prevents the app from being suspended even when not
+                in active use. Your app will be instantly available, but it will
+                consume resources until manually stopped.
+              </Typography>
+            }
+          >
+            <InfoRoundedIcon
+              fontSize="small"
+              sx={{
+                position: 'relative',
+                top: '9px',
+                left: '2px',
+                color: '#0F10158F',
+              }}
+            />
+          </Tooltip>
+          <Controller
+            name="keep_alive"
+            control={control}
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            render={({ field: { ref: _, value, onChange, ...field } }) => (
+              <FormControl sx={{ flexDirection: 'row' }}>
+                <FormControlLabel
+                  control={
+                    <Switch
+                      {...field}
+                      id="keep_alive"
+                      checked={keepAlive}
+                      onChange={() => {
+                        setKeepAlive(!keepAlive);
+                      }}
+                    />
+                  }
+                  label="Keep app alive"
+                  labelPlacement="start"
+                />
+              </FormControl>
+            )}
+          />
+        </Box>
       </div>
       <hr />
       <div className="form-section">
@@ -472,7 +532,7 @@ export const AppForm = ({ id }: AppFormProps): React.ReactElement => {
           control={control}
           // eslint-disable-next-line @typescript-eslint/no-unused-vars
           render={({ field: { ref: _, value, onChange, ...field } }) => (
-            <FormControl>
+            <FormControl sx={{ flexDirection: 'row' }}>
               <FormControlLabel
                 control={
                   <Switch
@@ -484,7 +544,9 @@ export const AppForm = ({ id }: AppFormProps): React.ReactElement => {
                     }}
                   />
                 }
-                label="Allow Public Access"
+                label="Allow public access"
+                labelPlacement="start"
+                sx={{ marginLeft: '10px' }}
               />
             </FormControl>
           )}

diff --git a/ui/src/data/api.ts b/ui/src/data/api.ts
@@ -77,6 +77,7 @@ export const app: AppQueryGetProps = {
     profile: '',
     env: null,
     public: false,
+    keep_alive: false,
   },
   progress_url: '',
   state: {},
@@ -112,6 +113,7 @@ export const serverApps = {
         filepath: '/shared/users/panel_basic.py',
         env: null,
         public: true,
+        keep_alive: false,
       },
     },
     {
@@ -134,6 +136,7 @@ export const serverApps = {
         profile: 'small0',
         env: { key: 'value' },
         public: false,
+        keep_alive: true,
       },
     },
     {
@@ -156,6 +159,7 @@ export const serverApps = {
         profile: 'small0',
         env: null,
         public: false,
+        keep_alive: false,
       },
     },
     {
@@ -177,6 +181,7 @@ export const serverApps = {
         profile: 'small0',
         env: null,
         public: false,
+        keep_alive: false,
       },
     },
   ],
@@ -201,6 +206,7 @@ export const serverApps = {
         profile: 'small0',
         env: null,
         public: false,
+        keep_alive: false,
         username: 'Test User',
       },
     },

diff --git a/ui/src/pages/server-types/server-types.tsx b/ui/src/pages/server-types/server-types.tsx
@@ -94,6 +94,7 @@ export const ServerTypes = (): React.ReactElement => {
         custom_command: currentFormInput?.custom_command || '',
         profile: currentFormInput?.profile || '',
         public: currentFormInput?.is_public || false,
+        keep_alive: currentFormInput?.keep_alive || false,
       },
     };
     setSubmitting(true);

diff --git a/ui/src/types/api.ts b/ui/src/types/api.ts
@@ -9,6 +9,7 @@ export interface UserOptions {
   conda_env: string;
   profile: string;
   public: boolean;
+  keep_alive: boolean;
   env: any; // eslint-disable-line @typescript-eslint/no-explicit-any
 }
 

diff --git a/ui/src/types/form.ts b/ui/src/types/form.ts
@@ -12,6 +12,7 @@ export interface AppFormInput {
   filepath?: string;
   framework: string;
   is_public: boolean;
+  keep_alive: boolean;
   jhub_app: boolean;
   profile?: string;
   thumbnail?: string;