From 73ff5c71f519fe225833b5a7151c37d4a0dbbb73 Mon Sep 17 00:00:00 2001
From: Duc Trung Le <leductrungxf@gmail.com>
Date: Fri, 12 Jan 2024 11:41:05 +0100
Subject: [PATCH] Done environment page

---
 frontend/src/environments/EnvironmentList.tsx | 15 ++---
 frontend/src/environments/LogDialog.tsx       | 61 +++++++++++--------
 .../src/environments/NewEnvironmentDialog.tsx |  9 ++-
 .../environments/RemoveEnvironmentButton.tsx  | 22 ++++---
 tljh_repo2docker/builder.py                   |  2 +-
 5 files changed, 64 insertions(+), 45 deletions(-)

diff --git a/frontend/src/environments/EnvironmentList.tsx b/frontend/src/environments/EnvironmentList.tsx
index 50ae938..db55a9b 100644
--- a/frontend/src/environments/EnvironmentList.tsx
+++ b/frontend/src/environments/EnvironmentList.tsx
@@ -1,12 +1,13 @@
-// import { IconButton } from '@mui/material';
+import { IconButton } from '@mui/material';
 import { DataGrid, GridColDef } from '@mui/x-data-grid';
 import { IEnvironmentData } from './types';
 import { memo, useMemo } from 'react';
-// import CheckIcon from '@mui/icons-material/Check';
+import CheckIcon from '@mui/icons-material/Check';
 
 import { Box } from '@mui/system';
 import { RemoveEnvironmentButton } from './RemoveEnvironmentButton';
 import { EnvironmentLogButton } from './LogDialog';
+
 const columns: GridColDef[] = [
   {
     field: 'display_name',
@@ -52,13 +53,9 @@ const columns: GridColDef[] = [
     hideSortIcons: true,
     renderCell: params => {
       return params.value === 'built' ? (
-        // <IconButton>
-        //   <CheckIcon color="success" />
-        // </IconButton>
-        <EnvironmentLogButton
-          name={params.row.display_name}
-          image={params.row.image_name}
-        />
+        <IconButton>
+          <CheckIcon color="success" />
+        </IconButton>
       ) : params.value === 'building' ? (
         <EnvironmentLogButton
           name={params.row.display_name}
diff --git a/frontend/src/environments/LogDialog.tsx b/frontend/src/environments/LogDialog.tsx
index cc397b7..dad5cc3 100644
--- a/frontend/src/environments/LogDialog.tsx
+++ b/frontend/src/environments/LogDialog.tsx
@@ -1,29 +1,32 @@
+import 'xterm/css/xterm.css';
+
+import CheckIcon from '@mui/icons-material/Check';
+import SyncIcon from '@mui/icons-material/Sync';
 import { Button, IconButton } from '@mui/material';
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import { Fragment, memo, useRef, useState } from 'react';
-import SyncIcon from '@mui/icons-material/Sync';
-import 'xterm/css/xterm.css';
+import urlJoin from 'url-join';
 import { Terminal } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
-import urlJoin from 'url-join';
 
-interface IRemoveEnvironmentButton {
+interface IEnvironmentLogButton {
   name: string;
   image: string;
 }
 
 const terminalFactory = () => {
-  const terminal = new Terminal();
+  const terminal = new Terminal({ convertEol: true, disableStdin: true });
   const fitAddon = new FitAddon();
   terminal.loadAddon(fitAddon);
   return { terminal, fitAddon };
 };
 
-function _EnvironmentLogButton(props: IRemoveEnvironmentButton) {
+function _EnvironmentLogButton(props: IEnvironmentLogButton) {
   const [open, setOpen] = useState(false);
+  const [built, setBuilt] = useState(false);
   const divRef = useRef<HTMLDivElement>(null);
   const terminalRef = useRef<{ terminal: Terminal; fitAddon: FitAddon }>(
     terminalFactory()
@@ -55,11 +58,11 @@ function _EnvironmentLogButton(props: IRemoveEnvironmentButton) {
       };
 
       eventSource.onmessage = event => {
-        var data = JSON.parse(event.data);
-        console.log('data', data);
-        
+        const data = JSON.parse(event.data);
+
         if (data.phase === 'built') {
           eventSource.close();
+          setBuilt(true);
           return;
         }
         terminalRef.current.terminal.write(data.message);
@@ -84,28 +87,34 @@ function _EnvironmentLogButton(props: IRemoveEnvironmentButton) {
 
   return (
     <Fragment>
-      <IconButton onClick={handleOpen}>
-        <SyncIcon
-          sx={{
-            animation: 'spin 2s linear infinite',
-            '@keyframes spin': {
-              '0%': {
-                transform: 'rotate(360deg)'
-              },
-              '100%': {
-                transform: 'rotate(0deg)'
+      {!built && (
+        <IconButton onClick={handleOpen}>
+          <SyncIcon
+            sx={{
+              animation: 'spin 2s linear infinite',
+              '@keyframes spin': {
+                '0%': {
+                  transform: 'rotate(360deg)'
+                },
+                '100%': {
+                  transform: 'rotate(0deg)'
+                }
               }
-            }
-          }}
-          htmlColor="orange"
-        />
-      </IconButton>
-
+            }}
+            htmlColor="orange"
+          />
+        </IconButton>
+      )}
+      {built && (
+        <IconButton>
+          <CheckIcon color="success" />
+        </IconButton>
+      )}
       <Dialog
         open={open}
         onClose={handleClose}
         fullWidth
-        maxWidth={'sm'}
+        maxWidth={'lg'}
         keepMounted={true}
       >
         <DialogTitle>Creating environment {props.name}</DialogTitle>
diff --git a/frontend/src/environments/NewEnvironmentDialog.tsx b/frontend/src/environments/NewEnvironmentDialog.tsx
index 48649e4..3e761d1 100644
--- a/frontend/src/environments/NewEnvironmentDialog.tsx
+++ b/frontend/src/environments/NewEnvironmentDialog.tsx
@@ -78,7 +78,14 @@ function _NewEnvironmentDialog(props: INewEnvironmentDialogProps) {
           onSubmit: async (event: React.FormEvent<HTMLFormElement>) => {
             event.preventDefault();
             const data: any = { ...formValues };
-            data.name = data.name ?? data.repo;
+            data.repo = data.repo.trim();
+            data.name =
+              data.name ??
+              (data.repo as string)
+                .replace('http://', '')
+                .replace('https://', '')
+                .replace(/\//g, '-')
+                .replace(/\./g, '-');
             data.cpu = data.cpu ?? '2';
             data.memory = data.memory ?? '2';
             data.username = data.username ?? '';
diff --git a/frontend/src/environments/RemoveEnvironmentButton.tsx b/frontend/src/environments/RemoveEnvironmentButton.tsx
index 903ab7e..dd0b16e 100644
--- a/frontend/src/environments/RemoveEnvironmentButton.tsx
+++ b/frontend/src/environments/RemoveEnvironmentButton.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@mui/material';
+import { Button, Typography } from '@mui/material';
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
@@ -15,13 +15,14 @@ interface IRemoveEnvironmentButton {
   image: string;
 }
 const Loading = () => (
-  <Box sx={{ display: 'flex' }}>
+  <Box sx={{ display: 'flex', justifyContent: 'center' }}>
     <CircularProgress />
   </Box>
 );
 function _RemoveEnvironmentButton(props: IRemoveEnvironmentButton) {
   const axios = useAxios();
   const [open, setOpen] = useState(false);
+  const [removing, setRemoving] = useState(false);
   const handleOpen = () => {
     setOpen(true);
   };
@@ -36,6 +37,7 @@ function _RemoveEnvironmentButton(props: IRemoveEnvironmentButton) {
   };
 
   const removeEnv = useCallback(async () => {
+    setRemoving(true);
     const response = await axios.request({
       method: 'delete',
       path: API_PREFIX,
@@ -46,7 +48,7 @@ function _RemoveEnvironmentButton(props: IRemoveEnvironmentButton) {
     } else {
       handleClose();
     }
-  }, [props.image, axios]);
+  }, [props.image, axios, setRemoving]);
 
   return (
     <Fragment>
@@ -57,11 +59,15 @@ function _RemoveEnvironmentButton(props: IRemoveEnvironmentButton) {
       <Dialog open={open} onClose={handleClose} fullWidth maxWidth={'sm'}>
         <DialogTitle>Remove environment</DialogTitle>
         <DialogContent>
-          {/* <Typography>
-            Are you sure you want to remove the following environment?
-          </Typography>
-          <pre>{props.name}</pre> */}
-          <Loading />
+          {!removing && (
+            <Box>
+              <Typography>
+                Are you sure you want to remove the following environment?
+              </Typography>
+              <pre>{props.name}</pre>
+            </Box>
+          )}
+          {removing && <Loading />}
         </DialogContent>
         <DialogActions>
           <Button variant="contained" onClick={handleClose}>
diff --git a/tljh_repo2docker/builder.py b/tljh_repo2docker/builder.py
index fbef6d3..f973794 100644
--- a/tljh_repo2docker/builder.py
+++ b/tljh_repo2docker/builder.py
@@ -73,7 +73,7 @@ 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)