Remove env

plasmabio · Jan 11, 2024 · 4dcb6ea · 4dcb6ea
1 parent 80d69a4
commit 4dcb6ea
Show file tree

Hide file tree

Showing 8 changed files with 245 additions and 171 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,126 +1,127 @@
 {
-  "name": "tljh_repo2docker_ui",
-  "version": "0.1.0",
-  "description": "tljh_repo2docker frontend package",
-  "license": "BSD-3-Clause",
-  "scripts": {
-    "build": "cross-env NODE_ENV=development webpack --config webpack.config.js",
-    "build:prod": "cross-env NODE_ENV=production webpack --config webpack.config.js",
-    "lint": "eslint --ext .js,.jsx,.ts,.tsx src/"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
-    "@typescript-eslint/eslint-plugin": "^5.41.0",
-    "@typescript-eslint/parser": "^5.41.0",
-    "cross-env": "^7.0.3",
-    "css-loader": "^6.7.1",
-    "eslint": "^8.26.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-react": "^7.31.10",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "less": "^4.1.3",
-    "less-loader": "11.1.0",
-    "prettier": "^3.0.0",
-    "sass": "^1.55.0",
-    "sass-loader": "^13.1.0",
-    "style-loader": "^3.3.3",
-    "ts-loader": "^9.2.6",
-    "typescript": "^5",
-    "webpack": "^5.74.0",
-    "webpack-cli": "^5.1.4"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.11.3",
-    "@emotion/styled": "^11.11.0",
-    "@fontsource/roboto": "^5.0.8",
-    "@mui/icons-material": "^5.15.3",
-    "@mui/material": "^5.15.3",
-    "@mui/x-data-grid": "^6.18.7",
-    "axios": "^1.6.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "url-join": "^5.0.0"
-  },
-  "eslintIgnore": [
-    "node_modules",
-    "dist",
-    "coverage",
-    "**/*.d.ts"
-  ],
-  "eslintConfig": {
-    "extends": [
-      "eslint:recommended",
-      "plugin:@typescript-eslint/eslint-recommended",
-      "plugin:@typescript-eslint/recommended",
-      "plugin:prettier/recommended",
-      "plugin:react-hooks/recommended"
-    ],
-    "parser": "@typescript-eslint/parser",
-    "parserOptions": {
-      "project": "tsconfig.json",
-      "tsconfigRootDir": "frontend",
-      "sourceType": "module"
+    "name": "tljh_repo2docker_ui",
+    "version": "0.1.0",
+    "description": "tljh_repo2docker frontend package",
+    "license": "BSD-3-Clause",
+    "scripts": {
+        "build": "cross-env NODE_ENV=development webpack --config webpack.config.js",
+        "build:prod": "cross-env NODE_ENV=production webpack --config webpack.config.js",
+        "eslint": "eslint --ext .js,.jsx,.ts,.tsx src/",
+        "prettier": "prettier --write \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
+        "lint": "yarn prettier && yarn eslint"
+    },
+    "devDependencies": {
+        "@types/react": "^18.2.0",
+        "@types/react-dom": "^18.2.0",
+        "@typescript-eslint/eslint-plugin": "^5.41.0",
+        "@typescript-eslint/parser": "^5.41.0",
+        "cross-env": "^7.0.3",
+        "css-loader": "^6.7.1",
+        "eslint": "^8.26.0",
+        "eslint-config-prettier": "^8.8.0",
+        "eslint-plugin-import": "^2.26.0",
+        "eslint-plugin-prettier": "^5.0.0",
+        "eslint-plugin-react": "^7.31.10",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "less": "^4.1.3",
+        "less-loader": "11.1.0",
+        "prettier": "^3.0.0",
+        "sass": "^1.55.0",
+        "sass-loader": "^13.1.0",
+        "style-loader": "^3.3.3",
+        "ts-loader": "^9.2.6",
+        "typescript": "^5",
+        "webpack": "^5.74.0",
+        "webpack-cli": "^5.1.4"
     },
-    "plugins": [
-      "@typescript-eslint"
+    "dependencies": {
+        "@emotion/react": "^11.11.3",
+        "@emotion/styled": "^11.11.0",
+        "@fontsource/roboto": "^5.0.8",
+        "@mui/icons-material": "^5.15.3",
+        "@mui/material": "^5.15.3",
+        "@mui/x-data-grid": "^6.18.7",
+        "axios": "^1.6.5",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "url-join": "^5.0.0"
+    },
+    "eslintIgnore": [
+        "node_modules",
+        "dist",
+        "coverage",
+        "**/*.d.ts"
     ],
-    "rules": {
-      "@typescript-eslint/naming-convention": [
-        "error",
-        {
-          "selector": "interface",
-          "format": [
-            "PascalCase"
-          ],
-          "custom": {
-            "regex": "^I[A-Z]",
-            "match": true
-          }
-        }
-      ],
-      "@typescript-eslint/no-unused-vars": [
-        "warn",
-        {
-          "args": "none",
-          "argsIgnorePattern": "^_",
-          "varsIgnorePattern": "^_",
-          "caughtErrorsIgnorePattern": "^_"
+    "eslintConfig": {
+        "extends": [
+            "eslint:recommended",
+            "plugin:@typescript-eslint/eslint-recommended",
+            "plugin:@typescript-eslint/recommended",
+            "plugin:prettier/recommended",
+            "plugin:react-hooks/recommended"
+        ],
+        "parser": "@typescript-eslint/parser",
+        "parserOptions": {
+            "project": "tsconfig.json",
+            "sourceType": "module"
+        },
+        "plugins": [
+            "@typescript-eslint"
+        ],
+        "rules": {
+            "@typescript-eslint/naming-convention": [
+                "error",
+                {
+                    "selector": "interface",
+                    "format": [
+                        "PascalCase"
+                    ],
+                    "custom": {
+                        "regex": "^I[A-Z]",
+                        "match": true
+                    }
+                }
+            ],
+            "@typescript-eslint/no-unused-vars": [
+                "warn",
+                {
+                    "args": "none",
+                    "argsIgnorePattern": "^_",
+                    "varsIgnorePattern": "^_",
+                    "caughtErrorsIgnorePattern": "^_"
+                }
+            ],
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-namespace": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/quotes": [
+                "error",
+                "single",
+                {
+                    "avoidEscape": true,
+                    "allowTemplateLiterals": false
+                }
+            ],
+            "curly": [
+                "error",
+                "all"
+            ],
+            "eqeqeq": "error",
+            "prefer-arrow-callback": "error"
         }
-      ],
-      "@typescript-eslint/no-explicit-any": "off",
-      "@typescript-eslint/no-namespace": "off",
-      "@typescript-eslint/no-use-before-define": "off",
-      "@typescript-eslint/quotes": [
-        "error",
-        "single",
-        {
-          "avoidEscape": true,
-          "allowTemplateLiterals": false
-        }
-      ],
-      "curly": [
-        "error",
-        "all"
-      ],
-      "eqeqeq": "error",
-      "prefer-arrow-callback": "error"
+    },
+    "prettier": {
+        "singleQuote": true,
+        "trailingComma": "none",
+        "arrowParens": "avoid",
+        "endOfLine": "auto",
+        "overrides": [
+            {
+                "files": "package.json",
+                "options": {
+                    "tabWidth": 4
+                }
+            }
+        ]
     }
-  },
-  "prettier": {
-    "singleQuote": true,
-    "trailingComma": "none",
-    "arrowParens": "avoid",
-    "endOfLine": "auto",
-    "overrides": [
-      {
-        "files": "package.json",
-        "options": {
-          "tabWidth": 4
-        }
-      }
-    ]
-  }
 }
diff --git a/frontend/src/common/axiosclient.ts b/frontend/src/common/axiosclient.ts
@@ -5,16 +5,14 @@ import axios, { AxiosInstance } from 'axios';
 export class AxiosClient {
   constructor(options: AxiosClient.IOptions) {
     this._baseUrl = options.baseUrl ?? '';
-    console.log('aaaaaaaaa', this._baseUrl);
-
     this._xsrfToken = options.xsrfToken;
     this._axios = axios.create({
       baseURL: this._baseUrl
     });
   }
 
   async request<T = any>(args: {
-    method: 'get' | 'post' | 'put' | 'option';
+    method: 'get' | 'post' | 'put' | 'option' | 'delete';
     path: string;
     data?: { [key: string]: any };
   }): Promise<T> {

diff --git a/frontend/src/common/style.css b/frontend/src/common/style.css
@@ -1,3 +1,3 @@
 .MuiButton-root {
-    text-transform: capitalize !important;
-  }
+  text-transform: capitalize !important;
+}
diff --git a/frontend/src/environments/EnvironmentList.tsx b/frontend/src/environments/EnvironmentList.tsx
@@ -1,19 +1,21 @@
-import { Button, 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 SyncIcon from '@mui/icons-material/Sync';
+import { Box } from '@mui/system';
+import { RemoveEnvironmentButton } from './RemoveEnvironmentButton';
 const columns: GridColDef[] = [
   {
     field: 'display_name',
     headerName: 'Name',
-    minWidth: 350
+    flex: 1
   },
   {
     field: 'repo',
     headerName: 'Repository URL',
-    minWidth: 350,
+    flex: 1,
     renderCell: params => {
       return (
         <a href={params.value} target="_blank">
@@ -25,7 +27,7 @@ const columns: GridColDef[] = [
   {
     field: 'ref',
     headerName: 'Reference',
-    minWidth: 150,
+    maxWidth: 150,
     renderCell: params => {
       return (
         <a href={`${params.row.repo}/tree/${params.value}`}>{params.value}</a>
@@ -35,21 +37,23 @@ const columns: GridColDef[] = [
   {
     field: 'mem_limit',
     headerName: 'Mem. Limit (GB)',
-    minWidth: 150
+    width: 150
   },
   {
     field: 'cpu_limit',
     headerName: 'CPU Limit',
-    minWidth: 150
+    width: 100
   },
   {
     field: 'status',
     headerName: 'Status',
-    minWidth: 100,
+    width: 100,
     hideSortIcons: true,
     renderCell: params => {
       return params.value === 'built' ? (
-        <CheckIcon color="success" />
+        <IconButton>
+          <CheckIcon color="success" />
+        </IconButton>
       ) : params.value === 'building' ? (
         <IconButton>
           <SyncIcon
@@ -73,21 +77,16 @@ const columns: GridColDef[] = [
   {
     field: 'remove',
     headerName: '',
-    minWidth: 100,
+    width: 100,
     filterable: false,
     sortable: false,
     hideable: false,
     renderCell: params => {
       return (
-        <Button
-          color="error"
-          size="small"
-          onClick={e => {
-            console.log(params);
-          }}
-        >
-          Remove
-        </Button>
+        <RemoveEnvironmentButton
+          name={params.row.display_name}
+          image={params.row.image_name}
+        />
       );
     }
   }
@@ -117,19 +116,21 @@ function _EnvironmentList(props: IEnvironmentListProps) {
   }, [props]);
 
   return (
-    <DataGrid
-      rows={rows}
-      columns={columns}
-      initialState={{
-        pagination: {
-          paginationModel: {
-            pageSize: 100
+    <Box sx={{ padding: 1 }}>
+      <DataGrid
+        rows={rows}
+        columns={columns}
+        initialState={{
+          pagination: {
+            paginationModel: {
+              pageSize: 100
+            }
           }
-        }
-      }}
-      pageSizeOptions={[100]}
-      disableRowSelectionOnClick
-    />
+        }}
+        pageSizeOptions={[100]}
+        disableRowSelectionOnClick
+      />
+    </Box>
   );
 }