Reorganize network tab

virtweb_frontend/src/widgets/forms/EditSection.tsx

@@ -2,11 +2,12 @@ import { Grid, Paper, Typography } from "@mui/material";
 import React, { PropsWithChildren } from "react";
 
 export function EditSection(
-  p: { title: string; actions?: React.ReactElement } & PropsWithChildren
+  p: { title?: string; actions?: React.ReactElement } & PropsWithChildren
 ): React.ReactElement {
   return (
     <Grid item sm={12} md={6}>
       <Paper style={{ margin: "10px", padding: "10px" }}>
+        {(p.title || p.actions) && (
           <span
             style={{
               display: "flex",
@@ -14,11 +15,14 @@ export function EditSection(
               alignItems: "center",
             }}
           >
+            {p.title && (
               <Typography variant="h5" style={{ marginBottom: "15px" }}>
                 {p.title}
               </Typography>
+            )}
             {p.actions}
           </span>
+        )}
         {p.children}
       </Paper>
     </Grid>

virtweb_frontend/src/widgets/forms/VMNetworksList.tsx

@@ -4,6 +4,7 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import {
   Avatar,
   Button,
+  Grid,
   IconButton,
   ListItem,
   ListItemAvatar,
@@ -19,6 +20,7 @@ import { randomMacAddress } from "../../utils/RandUtils";
 import { MACInput } from "./MACInput";
 import { SelectInput } from "./SelectInput";
 import { VMNetworkFilterParameters } from "./VMNetworkFilterParameters";
+import { EditSection } from "./EditSection";
 
 export function VMNetworksList(p: {
   vm: VMInfo;
@@ -37,8 +39,16 @@ export function VMNetworksList(p: {
 
   return (
     <>
+      {p.editable && (
+        <div style={{ textAlign: "right", marginTop: "5px" }}>
+          <Button onClick={addNew}>Add a new network interface</Button>
+        </div>
+      )}
+
+      <Grid container spacing={2}>
         {/* networks list */}
         {p.vm.networks.map((n, num) => (
+          <EditSection key={num}>
             <NetworkInfoWidget
               key={num}
               network={n}
@@ -48,11 +58,9 @@ export function VMNetworksList(p: {
               }}
               {...p}
             />
+          </EditSection>
         ))}
-
-      {p.editable && (
-        <Button onClick={addNew}>Add a new network interface</Button>
-      )}
+      </Grid>
     </>
   );
 }
@@ -141,6 +149,7 @@ function NetworkInfoWidget(p: {
         />
 
         {p.network.type === "DefinedNetwork" && (
+          <>
             <SelectInput
               editable={p.editable}
               label="Defined network"
@@ -163,7 +172,6 @@ function NetworkInfoWidget(p: {
                 p.onChange?.();
               }}
             />
-        )}
 
             {/* Network Filter */}
             <SelectInput
@@ -200,6 +208,8 @@ function NetworkInfoWidget(p: {
                 />
               </div>
             )}
+          </>
+        )}
       </div>
     </>
   );

virtweb_frontend/src/widgets/vms/VMDetails.tsx

@@ -288,14 +288,7 @@ function VMDetailsTabStorage(p: DetailsInnerProps): React.ReactElement {
 }
 
 function VMDetailsTabNetwork(p: DetailsInnerProps): React.ReactElement {
-  return (
-    <Grid container spacing={2}>
-      {/* Networks section */}
-      <EditSection title="Networks">
-        <VMNetworksList {...p} />
-      </EditSection>
-    </Grid>
-  );
+  return <VMNetworksList {...p} />;
 }
 
 function VMDetailsTabDanger(p: DetailsInnerProps): React.ReactElement {