wip

frontend/package.json

@@ -25,12 +25,18 @@
     "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/material": "^5.15.3",
+    "@mui/x-data-grid": "^6.18.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -50,6 +56,7 @@
     "parser": "@typescript-eslint/parser",
     "parserOptions": {
       "project": "tsconfig.json",
+      "tsconfigRootDir": "frontend",
       "sourceType": "module"
     },
     "plugins": [

frontend/src/common/style.css

@@ -0,0 +1,3 @@
+.MuiButton-contained {
+    text-transform: capitalize !important;
+  }

frontend/src/common/theme.ts

@@ -0,0 +1,16 @@
+import { createTheme } from '@mui/material';
+import '../common/style.css';
+
+export const customTheme = createTheme({
+  palette: {
+    primary: {
+      main: '#1976D2' // Change primary color
+    },
+    secondary: {
+      main: '#FF4081' // Change secondary color
+    }
+  },
+  typography: {
+    fontSize: 16
+  }
+});

frontend/src/environments/App.tsx

@@ -1,7 +1,26 @@
-export default function App() {
+import { Button, Box, Stack } from '@mui/material';
+import CssBaseline from '@mui/material/CssBaseline';
+import { ThemeProvider } from '@mui/material/styles';
+
+import { customTheme } from '../common/theme';
+import { IEnvironmentData } from './types';
+import { EnvironmentList } from './EnvironmentList';
+
+export interface IAppProps {
+  images: IEnvironmentData[];
+  default_cpu_limit: string;
+  default_mem_limit: string;
+}
+export default function App(props: IAppProps) {
   return (
-    <main>
-      <p>Foo bar</p>
-    </main>
+    <ThemeProvider theme={customTheme}>
+      <CssBaseline />
+      <Stack sx={{ padding: 1 }} spacing={1}>
+        <Box sx={{ display: 'flex', flexDirection: 'row-reverse' }}>
+          <Button variant="contained">Create new environment</Button>
+        </Box>
+        <EnvironmentList />
+      </Stack>
+    </ThemeProvider>
   );
 }

frontend/src/environments/EnvironmentList.tsx

@@ -0,0 +1,64 @@
+import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid';
+
+const columns: GridColDef[] = [
+  { field: 'id', headerName: 'ID', width: 90 },
+  {
+    field: 'firstName',
+    headerName: 'First name',
+    width: 150,
+    editable: true
+  },
+  {
+    field: 'lastName',
+    headerName: 'Last name',
+    width: 150,
+    editable: true
+  },
+  {
+    field: 'age',
+    headerName: 'Age',
+    type: 'number',
+    width: 110,
+    editable: true
+  },
+  {
+    field: 'fullName',
+    headerName: 'Full name',
+    description: 'This column has a value getter and is not sortable.',
+    sortable: false,
+    width: 160,
+    valueGetter: (params: GridValueGetterParams) =>
+      `${params.row.firstName || ''} ${params.row.lastName || ''}`
+  }
+];
+
+const rows = [
+  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 14 },
+  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 31 },
+  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 31 },
+  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 11 },
+  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
+  { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
+  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
+  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
+  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 }
+];
+export function EnvironmentList() {
+
+  return (
+    <DataGrid
+      rows={rows}
+      columns={columns}
+      initialState={{
+        pagination: {
+          paginationModel: {
+            pageSize: 5
+          }
+        }
+      }}
+      pageSizeOptions={[5]}
+      checkboxSelection
+      disableRowSelectionOnClick
+    />
+  );
+}

frontend/src/environments/main.tsx

@@ -1,12 +1,27 @@
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
+
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import App from './App';
+
+import App, { IAppProps } from './App';
 
 const rootElement = document.getElementById('environments-root');
 const root = createRoot(rootElement!);
+const dataElement = document.getElementById('tljh-page-data');
+let configData: IAppProps = {
+  images: [],
+  default_cpu_limit: '2',
+  default_mem_limit: '2G'
+};
+if (dataElement) {
+  configData = JSON.parse(dataElement.textContent || '') as IAppProps;
+}
 
 root.render(
   <StrictMode>
-    <App />
+    <App {...configData} />
   </StrictMode>
 );

frontend/src/environments/types.ts

@@ -0,0 +1,11 @@
+export interface IEnvironmentData {
+  images: {
+    image_name: string;
+    cpu_limit: string;
+    display_name: string;
+    mem_limit: string;
+    ref: string;
+    repo: string;
+    status: string;
+  };
+}