Yaml editor

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
+    "@monaco-editor/react": "^4.4.5",
     "@mui/icons-material": "^5.8.0",
     "@mui/material": "^5.8.0",
     "@svgr/webpack": "^6.2.1",
@@ -21,7 +22,8 @@
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.6.4",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "yaml": "^2.1.1"
   },
   "overrides": {
     "@svgr/webpack": "$@svgr/webpack"

src/App.tsx

@@ -1,6 +1,7 @@
 import { Routes, Route } from 'react-router-dom';
 import { Box, Toolbar } from '@mui/material';
 import ClusterDetail from './ClusterDetail/ClusterDetail';
+import GameServerBuildCreate from './GameServerBuildCreate/GameServerBuildCreate';
 import GameServerBuildDetail from './GameServerBuildDetail/GameServerBuildDetail';
 import Home from './Home/Home';
 import SideMenu from './Common/SideMenu';
@@ -17,7 +18,7 @@ function App() {
         <Routes>
           <Route path="/" element={<Home clusters={clusters} />} />
           <Route path=":clusterName" element={<ClusterDetail clusters={clusters} />} />
-          <Route path=":clusterName/gsb/create" element={<h2>Create Game Server Build</h2>}/>
+          <Route path=":clusterName/gsb/create" element={<GameServerBuildCreate clusters={clusters}/>}/>
           <Route path=":clusterName/gsb/:namespace/:buildName" element={<GameServerBuildDetail clusters={clusters}/>} />
         </Routes>
       </Box>

src/ClusterDetail/ClusterDetail.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { Link } from "react-router-dom";
 import { Alert, Box, Button, Grid, Typography } from "@mui/material";
 import { useParams } from "react-router-dom";
@@ -67,10 +67,13 @@ function ClusterDetail({ clusters }: ClusterDetailProps) {
       });
   }, [clusterName, clusterApi]);
 
-  const handleCloseAlert = (error: string) => {
-    errors.delete(error);
-    setErrors(prev => new Set(prev));
-  };
+  const handleCloseAlert = useCallback((error: string) => {
+    setErrors(prev => {
+      const newErrors = new Set(prev);
+      newErrors.delete(error);
+      return newErrors;
+    });
+  }, []);
 
   const groupDataByNode = (gsList: Array<GameServer>) => {
     const emptyValues = () => {
@@ -107,15 +110,17 @@ function ClusterDetail({ clusters }: ClusterDetailProps) {
     };
   }, [getGameServers, getGameServerBuilds]);
 
-  const nodeData = groupDataByNode(gsList);
-  const errorsArray = Array.from(errors).sort();
-  const errorMessages = errorsArray.map((error, index) =>
-    <Box key={index} display="flex" justifyContent="center">
-      <Alert severity="error" onClose={() => { handleCloseAlert(error) }}>
-        {error}
-      </Alert>
-    </Box>
-  );
+  const nodeData = useMemo(() => groupDataByNode(gsList), [gsList]);
+  const errorMessages = useMemo(() => {
+    const errorsArray = Array.from(errors).sort();
+    return errorsArray.map((error, index) =>
+      <Box key={index} display="flex" justifyContent="center">
+        <Alert severity="error" onClose={() => { handleCloseAlert(error) }}>
+          {error}
+        </Alert>
+      </Box>
+    );
+  }, [errors, handleCloseAlert]);
 
   return (
     <React.Fragment>
@@ -142,7 +147,7 @@ function ClusterDetail({ clusters }: ClusterDetailProps) {
         </Grid>
       </Grid>
       <Box sx={{ marginBottom: "30px" }}>
-        <GameServerBuildTable gsbList={gsbList} />
+        <GameServerBuildTable clusterApi={clusterApi} gsbList={gsbList} />
       </Box>
       <Typography variant="h5" gutterBottom component="div">
         Nodes