From 4dcb6eaf22e4f799e4ac253e123229b83a801151 Mon Sep 17 00:00:00 2001 From: Duc Trung LE Date: Thu, 11 Jan 2024 16:36:03 +0100 Subject: [PATCH] Remove env --- frontend/package.json | 241 +++++++++--------- frontend/src/common/axiosclient.ts | 4 +- frontend/src/common/style.css | 4 +- frontend/src/environments/EnvironmentList.tsx | 61 ++--- .../src/environments/NewEnvironmentDialog.tsx | 5 +- .../environments/RemoveEnvironmentButton.tsx | 72 ++++++ frontend/src/environments/types.ts | 1 + frontend/webpack.config.js | 28 +- 8 files changed, 245 insertions(+), 171 deletions(-) create mode 100644 frontend/src/environments/RemoveEnvironmentButton.tsx diff --git a/frontend/package.json b/frontend/package.json index b5626eb..b6db489 100644 --- 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 index bcf087f..0320e89 100644 --- a/frontend/src/common/axiosclient.ts +++ b/frontend/src/common/axiosclient.ts @@ -5,8 +5,6 @@ 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 @@ -14,7 +12,7 @@ export class AxiosClient { } async request(args: { - method: 'get' | 'post' | 'put' | 'option'; + method: 'get' | 'post' | 'put' | 'option' | 'delete'; path: string; data?: { [key: string]: any }; }): Promise { diff --git a/frontend/src/common/style.css b/frontend/src/common/style.css index bba554c..0328a57 100644 --- a/frontend/src/common/style.css +++ b/frontend/src/common/style.css @@ -1,3 +1,3 @@ .MuiButton-root { - text-transform: capitalize !important; - } \ No newline at end of file + text-transform: capitalize !important; +} diff --git a/frontend/src/environments/EnvironmentList.tsx b/frontend/src/environments/EnvironmentList.tsx index 472928e..c2a2424 100644 --- 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 ( @@ -25,7 +27,7 @@ const columns: GridColDef[] = [ { field: 'ref', headerName: 'Reference', - minWidth: 150, + maxWidth: 150, renderCell: params => { return ( {params.value} @@ -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' ? ( - + + + ) : params.value === 'building' ? ( { return ( - + ); } } @@ -117,19 +116,21 @@ function _EnvironmentList(props: IEnvironmentListProps) { }, [props]); return ( - + + }} + pageSizeOptions={[100]} + disableRowSelectionOnClick + /> + ); } diff --git a/frontend/src/environments/NewEnvironmentDialog.tsx b/frontend/src/environments/NewEnvironmentDialog.tsx index 0e0e4a3..48649e4 100644 --- a/frontend/src/environments/NewEnvironmentDialog.tsx +++ b/frontend/src/environments/NewEnvironmentDialog.tsx @@ -8,6 +8,7 @@ import { Fragment, memo, useCallback, useMemo, useState } from 'react'; import Divider from '@mui/material/Divider'; import { SmallTextField } from '../common/SmallTextField'; import { useAxios } from '../common/AxiosContext'; +import { API_PREFIX } from './types'; export interface INewEnvironmentDialogProps { default_cpu_limit: string; default_mem_limit: string; @@ -84,7 +85,7 @@ function _NewEnvironmentDialog(props: INewEnvironmentDialogProps) { data.password = data.password ?? ''; const response = await axios.request({ method: 'post', - path: 'environments', + path: API_PREFIX, data }); if (response?.status === 'ok') { @@ -188,7 +189,7 @@ function _NewEnvironmentDialog(props: INewEnvironmentDialogProps) { /> - + + + Remove environment + + + Are you sure you want to remove the following environment? + + 
{props.name}
+ + + + + + + + ); +} + +export const RemoveEnvironmentButton = memo(_RemoveEnvironmentButton); diff --git a/frontend/src/environments/types.ts b/frontend/src/environments/types.ts index 0a9e839..aea0cbe 100644 --- a/frontend/src/environments/types.ts +++ b/frontend/src/environments/types.ts @@ -1,3 +1,4 @@ +export const API_PREFIX = 'environments'; export interface IEnvironmentData { image_name: string; cpu_limit: string; diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js index bc59a89..424ae69 100644 --- a/frontend/webpack.config.js +++ b/frontend/webpack.config.js @@ -1,24 +1,24 @@ const path = require('path'); const config = { - mode: process.env.NODE_ENV ?? "development", - watch: process.env.NODE_ENV === "production" ? false: true, + mode: process.env.NODE_ENV ?? 'development', + watch: process.env.NODE_ENV === 'production' ? false : true, module: { rules: [ { test: /.tsx?$/, - use: "ts-loader", - exclude: /node_modules/, + use: 'ts-loader', + exclude: /node_modules/ }, { test: /\.css$/, - use: ["style-loader", "css-loader"], - }, - ], + use: ['style-loader', 'css-loader'] + } + ] }, resolve: { - extensions: [".tsx", ".ts", ".js"], - }, + extensions: ['.tsx', '.ts', '.js'] + } }; const distRoot = path.resolve( @@ -30,12 +30,12 @@ const distRoot = path.resolve( ); const environmentsPageConfig = { - name: "environments", - entry: "./src/environments/main.tsx", + name: 'environments', + entry: './src/environments/main.tsx', output: { - path: path.resolve(distRoot, "react"), - filename: "environments.js", + path: path.resolve(distRoot, 'react'), + filename: 'environments.js' }, - ...config, + ...config }; module.exports = [environmentsPageConfig];