From 27cdb7f87dc5e995012c7b30ec72370d9ee069d4 Mon Sep 17 00:00:00 2001
From: trungleduc <leductrungxf@gmail.com>
Date: Thu, 18 Jan 2024 17:38:27 +0100
Subject: [PATCH] Add launch server button

---
 frontend/src/servers/App.tsx              |  8 ++++-
 frontend/src/servers/NewServerDialog.tsx  | 25 ++++++++++----
 frontend/src/servers/OpenServerButton.tsx | 42 +++++++++++++++++++----
 frontend/src/servers/ServersList.tsx      | 29 ++++++++++++++--
 frontend/src/servers/main.tsx             |  7 ++++
 frontend/src/servers/types.ts             |  1 +
 tljh_repo2docker/builder.py               |  1 -
 tljh_repo2docker/servers.py               | 14 ++++++--
 tljh_repo2docker/templates/servers.html   |  2 +-
 9 files changed, 110 insertions(+), 19 deletions(-)

diff --git a/frontend/src/servers/App.tsx b/frontend/src/servers/App.tsx
index 79ad26d..4dd62d6 100644
--- a/frontend/src/servers/App.tsx
+++ b/frontend/src/servers/App.tsx
@@ -15,6 +15,7 @@ import { useJupyterhub } from '../common/JupyterhubContext';
 export interface IAppProps {
   images: IEnvironmentData[];
   server_data: IServerData[];
+  default_server_data: IServerData;
   allow_named_servers: boolean;
   named_server_limit_per_user: number;
 }
@@ -34,8 +35,13 @@ export default function App(props: IAppProps) {
             <NewServerDialog
               images={props.images}
               allowNamedServers={props.allow_named_servers}
+              serverLimit={props.named_server_limit_per_user}
+              defaultRunning={props.default_server_data.active}
+            />
+            <ServerList
+              servers={props.server_data}
+              defaultServer={props.default_server_data}
             />
-            <ServerList servers={props.server_data} />
           </Stack>
         </ScopedCssBaseline>
       </AxiosContext.Provider>
diff --git a/frontend/src/servers/NewServerDialog.tsx b/frontend/src/servers/NewServerDialog.tsx
index fbb744a..269e026 100644
--- a/frontend/src/servers/NewServerDialog.tsx
+++ b/frontend/src/servers/NewServerDialog.tsx
@@ -9,7 +9,7 @@ import {
   OutlinedTextFieldProps
 } from '@mui/material';
 import { GridRowSelectionModel } from '@mui/x-data-grid';
-import { Fragment, memo, useCallback, useState } from 'react';
+import { Fragment, memo, useCallback, useMemo, useState } from 'react';
 
 import { EnvironmentList } from '../environments/EnvironmentList';
 import { IEnvironmentData } from '../environments/types';
@@ -21,6 +21,8 @@ import { useJupyterhub } from '../common/JupyterhubContext';
 export interface INewServerDialogProps {
   images: IEnvironmentData[];
   allowNamedServers: boolean;
+  defaultRunning: boolean;
+  serverLimit: number;
 }
 
 const commonInputProps: OutlinedTextFieldProps = {
@@ -77,6 +79,18 @@ function _NewServerDialog(props: INewServerDialogProps) {
       console.error(e);
     }
   }, [serverName, rowSelectionModel, props.images, axios, jhData]);
+  const disabled = useMemo(() => {
+    if (rowSelectionModel.length === 0) {
+      return true;
+    }
+    if (serverName.length === 0) {
+      if (props.defaultRunning) {
+        return true;
+      } else {
+        return false;
+      }
+    }
+  }, [rowSelectionModel, serverName, props.defaultRunning]);
   return (
     <Fragment>
       <Box sx={{ display: 'flex', flexDirection: 'row-reverse' }}>
@@ -95,9 +109,11 @@ function _NewServerDialog(props: INewServerDialogProps) {
                 name="server_name"
                 label="Server name"
                 type="string"
-                required={true}
+                required={false}
+                helperText="If empty, a default server will be created"
                 onChange={e => setServerName(e.target.value)}
                 value={serverName}
+                disabled={!props.allowNamedServers}
               />
             </Box>
           )}
@@ -118,10 +134,7 @@ function _NewServerDialog(props: INewServerDialogProps) {
           <Button
             variant="contained"
             color="primary"
-            disabled={
-              rowSelectionModel.length === 0 ||
-              (serverName.length === 0 && props.allowNamedServers)
-            }
+            disabled={disabled}
             onClick={createServer}
           >
             Create Server
diff --git a/frontend/src/servers/OpenServerButton.tsx b/frontend/src/servers/OpenServerButton.tsx
index c987401..a21f542 100644
--- a/frontend/src/servers/OpenServerButton.tsx
+++ b/frontend/src/servers/OpenServerButton.tsx
@@ -1,19 +1,23 @@
 import { Button, IconButton } from '@mui/material';
-import { Fragment, memo, useEffect, useState } from 'react';
+import { Fragment, memo, useCallback, useEffect, useState } from 'react';
 
-// import { useAxios } from '../common/AxiosContext';
+import { useAxios } from '../common/AxiosContext';
 import { useJupyterhub } from '../common/JupyterhubContext';
 import urlJoin from 'url-join';
 import SyncIcon from '@mui/icons-material/Sync';
+import { SPAWN_PREFIX } from '../common/axiosclient';
 
 interface IOpenServerButton {
   url: string;
   serverName: string;
+  imageName: string;
+  active: boolean;
 }
 
 function _OpenServerButton(props: IOpenServerButton) {
-  // const axios = useAxios();
+  const axios = useAxios();
   const jhData = useJupyterhub();
+
   const [progress, setProgress] = useState(0);
   useEffect(() => {
     const { user, baseUrl, xsrfToken } = jhData;
@@ -45,12 +49,38 @@ function _OpenServerButton(props: IOpenServerButton) {
     };
   }, [jhData, setProgress, props.serverName]);
 
+  const createServer = useCallback(async () => {
+    const imageName = props.imageName;
+    const data = new FormData();
+    data.append('image', imageName);
+    try {
+      await axios.request({
+        method: 'post',
+        prefix: SPAWN_PREFIX,
+        path: `${jhData.user}/${props.serverName}`,
+        data
+      });
+      window.open(props.url, '_blank')?.focus();
+      window.location.reload();
+    } catch (e: any) {
+      console.error(e);
+    }
+  }, [props, axios, jhData]);
+
   return (
     <Fragment>
       {progress === 100 && (
-        <Button href={props.url} target="_blank">
-          Open Server
-        </Button>
+        <Fragment>
+          {props.active && (
+            <Button href={props.url} target="_blank">
+              Open Server
+            </Button>
+          )}
+
+          {!props.active && (
+            <Button onClick={createServer}>Launch server</Button>
+          )}
+        </Fragment>
       )}
       {progress < 100 && (
         <IconButton title="Starting">
diff --git a/frontend/src/servers/ServersList.tsx b/frontend/src/servers/ServersList.tsx
index 8c351f4..282c0c3 100644
--- a/frontend/src/servers/ServersList.tsx
+++ b/frontend/src/servers/ServersList.tsx
@@ -6,7 +6,9 @@ import { IServerData } from './types';
 import { formatTime } from '../common/utils';
 import { RemoveServerButton } from './RemoveServerButton';
 import { OpenServerButton } from './OpenServerButton';
-
+import { IconButton } from '@mui/material';
+import CheckIcon from '@mui/icons-material/Check';
+import ClearIcon from '@mui/icons-material/Clear';
 const columns: GridColDef[] = [
   {
     field: 'name',
@@ -23,6 +25,23 @@ const columns: GridColDef[] = [
     headerName: 'Last activity',
     width: 150
   },
+  {
+    field: 'active',
+    headerName: 'Status',
+    width: 100,
+    hideSortIcons: true,
+    renderCell: params => {
+      return params.value ? (
+        <IconButton>
+          <CheckIcon color="success" />
+        </IconButton>
+      ) : (
+        <IconButton>
+          <ClearIcon color="error" />
+        </IconButton>
+      );
+    }
+  },
   {
     field: 'status',
     headerName: '',
@@ -43,7 +62,12 @@ const columns: GridColDef[] = [
     hideable: false,
     renderCell: params => {
       return (
-        <OpenServerButton url={params.row.url} serverName={params.row.name} />
+        <OpenServerButton
+          url={params.row.url}
+          serverName={params.row.name}
+          imageName={params.row.image}
+          active={params.row.active}
+        />
       );
     }
   }
@@ -51,6 +75,7 @@ const columns: GridColDef[] = [
 
 export interface IServerListProps {
   servers: IServerData[];
+  defaultServer: IServerData;
 }
 
 function _ServerList(props: IServerListProps) {
diff --git a/frontend/src/servers/main.tsx b/frontend/src/servers/main.tsx
index e30e12c..1943b6d 100644
--- a/frontend/src/servers/main.tsx
+++ b/frontend/src/servers/main.tsx
@@ -17,6 +17,13 @@ if (rootElement) {
   let configData: IAppProps = {
     images: [],
     server_data: [],
+    default_server_data: {
+      name: '',
+      url: '',
+      last_activity: '',
+      user_options: {},
+      active: false
+    },
     allow_named_servers: false,
     named_server_limit_per_user: 0
   };
diff --git a/frontend/src/servers/types.ts b/frontend/src/servers/types.ts
index 34c77fa..a1da1d9 100644
--- a/frontend/src/servers/types.ts
+++ b/frontend/src/servers/types.ts
@@ -3,4 +3,5 @@ export interface IServerData {
   url: string;
   last_activity: string;
   user_options: { image?: string };
+  active: boolean;
 }
diff --git a/tljh_repo2docker/builder.py b/tljh_repo2docker/builder.py
index f973794..b813967 100644
--- a/tljh_repo2docker/builder.py
+++ b/tljh_repo2docker/builder.py
@@ -73,7 +73,6 @@ async def post(self):
                         "Invalid build argument format"
                     )
                 extra_buildargs.append(barg)
-        print('@@@@@@@', repo, ref, name, memory, cpu, username, password, extra_buildargs)
         await build_image(repo, ref, name, memory, cpu, username, password, extra_buildargs)
 
         self.set_status(200)
diff --git a/tljh_repo2docker/servers.py b/tljh_repo2docker/servers.py
index e6eea49..76095f3 100644
--- a/tljh_repo2docker/servers.py
+++ b/tljh_repo2docker/servers.py
@@ -26,12 +26,17 @@ async def get(self):
             server_data.append(
                 self._spawner_to_server_data(sp, user)
             )
+        try:
+            named_server_limit = await self.get_current_user_named_server_limit()
+        except Exception:
+            named_server_limit = 0
         result = self.render_template(
             "servers.html",
             images=images,
             allow_named_servers=self.allow_named_servers,
-            named_server_limit_per_user=await self.get_current_user_named_server_limit(),
+            named_server_limit_per_user=named_server_limit,
             server_data=server_data,
+            default_server_data=self._spawner_to_server_data(user.spawner, user),
             auth_state=auth_state,
         )
 
@@ -53,11 +58,16 @@ def _spawner_to_server_data(self, sp: Spawner, user: Any) -> Dict:
         except Exception:
             data["last_activity"] = ""
 
+        try:
+            data["active"] = sp.active
+        except Exception:
+            data["active"] = False
+
         try:
             if sp.user_options:
                 data["user_options"] = sp.user_options
             else:
                 data["user_options"] = {}
-        except:
+        except Exception:
             data["user_options"] = {}
         return data
diff --git a/tljh_repo2docker/templates/servers.html b/tljh_repo2docker/templates/servers.html
index d6723a5..70ae35f 100644
--- a/tljh_repo2docker/templates/servers.html
+++ b/tljh_repo2docker/templates/servers.html
@@ -2,7 +2,7 @@
 <div id="servers-root">
   <script id="tljh-page-data" type="application/json">
     {
-      "images": {{ images | tojson  }}, "allow_named_servers": {{allow_named_servers | tojson}}, "named_server_limit_per_user": {{named_server_limit_per_user}}, "server_data":  {{ server_data| tojson }}
+      "images": {{ images | tojson  }}, "allow_named_servers": {{allow_named_servers | tojson}}, "named_server_limit_per_user": {{named_server_limit_per_user}}, "server_data":  {{ server_data| tojson }}, "default_server_data":  {{ default_server_data| tojson }}
     }
   </script>
   <script src="{{ base_url }}environments-static/js/react/servers.js"></script>