Reorganize IP tabs

virtweb_frontend/src/widgets/net/DHCPHostReservations.tsx

@@ -75,7 +75,7 @@ function HostReservationWidget(p: {
   };
 
   return (
-    <Paper elevation={3} style={{ padding: "10px", marginTop: "20px" }}>
+    <Paper elevation={3} style={{ padding: "20px", marginBottom: "20px" }}>
       <ListItem
         secondaryAction={
           p.editable && (

virtweb_frontend/src/widgets/net/NetworkDetails.tsx

@@ -55,8 +55,15 @@ function NetworkDetailsInner(p: DetailsInnerProps): React.ReactElement {
       <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
         <Tabs value={currTab} onChange={(_ev, newVal) => setCurrTab(newVal)}>
           <Tab label="General" tabIndex={VMTab.General} />
-          <Tab label="IPv4" tabIndex={VMTab.IPv4} />
+
-          <Tab label="IPv6" tabIndex={VMTab.IPv6} />
+          {(p.editable || p.net.ip_v4) && (
+            <Tab label="IPv4" tabIndex={VMTab.IPv4} />
+          )}
+
+          {(p.editable || p.net.ip_v6) && (
+            <Tab label="IPv6" tabIndex={VMTab.IPv6} />
+          )}
+
           {!p.editable && (
             <Tab
               label="Danger zone"
@@ -205,33 +212,29 @@ function NetworkDetailsTabGeneral(p: DetailsInnerProps): React.ReactElement {
 
 function NetworkDetailsTabIPv4(p: DetailsInnerProps): React.ReactElement {
   return (
-    <Grid container spacing={2}>
+    <IPSection
-      <IPSection
+      editable={p.editable}
-        editable={p.editable}
+      config={p.net.ip_v4}
-        config={p.net.ip_v4}
+      onChange={(c) => {
-        onChange={(c) => {
+        p.net.ip_v4 = c;
-          p.net.ip_v4 = c;
+        p.onChange?.();
-          p.onChange?.();
+      }}
-        }}
+      version={4}
-        version={4}
+    />
-      />
-    </Grid>
   );
 }
 
 function NetworkDetailsTabIPv6(p: DetailsInnerProps): React.ReactElement {
   return (
-    <Grid container spacing={2}>
+    <IPSection
-      <IPSection
+      editable={p.editable}
-        editable={p.editable}
+      config={p.net.ip_v6}
-        config={p.net.ip_v6}
+      onChange={(c) => {
-        onChange={(c) => {
+        p.net.ip_v6 = c;
-          p.net.ip_v6 = c;
+        p.onChange?.();
-          p.onChange?.();
+      }}
-        }}
+      version={6}
-        version={6}
+    />
-      />
-    </Grid>
   );
 }
 
@@ -262,101 +265,116 @@ function IPSection(p: {
     });
   };
 
+  const toggleDHCP = (v: boolean) => {
+    if (v)
+      p.config!.dhcp =
+        p.version === 4
+          ? {
+              start: "192.168.1.100",
+              end: "192.168.1.200",
+              hosts: [],
+            }
+          : { start: "fd00::100", end: "fd00::f00", hosts: [] };
+    else p.config!.dhcp = undefined;
+
+    p.onChange?.(p.config);
+  };
+
   if (!p.config && !p.editable) return <></>;
 
   return (
-    <EditSection
+    <Grid container spacing={2}>
-      title={`IPv${p.version} network`}
+      <EditSection
-      actions={
+        title={`IPv${p.version} network`}
-        <Checkbox
+        actions={
-          disabled={!p.editable}
+          <Checkbox
-          checked={!!p.config}
+            disabled={!p.editable}
-          onChange={toggleNetwork}
+            checked={!!p.config}
-        />
+            onChange={toggleNetwork}
-      }
-    >
-      {p.config && (
-        <>
-          <IPInput
-            editable={p.editable}
-            label="Bridge address"
-            version={p.version}
-            value={p.config?.bridge_address}
-            onValueChange={(v) => {
-              p.config!.bridge_address = v ?? "";
-              p.onChange?.(p.config);
-            }}
           />
-
+        }
-          <TextInput
+      >
-            label="Prefix"
+        {p.config && (
-            editable={p.editable}
+          <>
-            value={p.config.prefix.toString()}
-            type="number"
-            onValueChange={(v) => {
-              p.config!.prefix = Number(v);
-              p.onChange?.(p.config);
-            }}
-            size={p.version === 4 ? { min: 0, max: 32 } : { min: 0, max: 128 }}
-          />
-
-          <CheckboxInput
-            checked={!!p.config.dhcp}
-            editable={p.editable}
-            label="Enable DHCP"
-            onValueChange={(v) => {
-              if (v)
-                p.config!.dhcp =
-                  p.version === 4
-                    ? {
-                        start: "192.168.1.100",
-                        end: "192.168.1.200",
-                        hosts: [],
-                      }
-                    : { start: "fd00::100", end: "fd00::f00", hosts: [] };
-              else p.config!.dhcp = undefined;
-              p.onChange?.(p.config);
-            }}
-          />
-        </>
-      )}
-
-      {p.config?.dhcp && (
-        <>
-          <Paper elevation={3} style={{ padding: "10px" }}>
             <IPInput
-              label="DHCP allocation start"
               editable={p.editable}
+              label="Bridge address"
               version={p.version}
-              value={p.config.dhcp.start}
+              value={p.config?.bridge_address}
               onValueChange={(v) => {
-                p.config!.dhcp!.start = v!;
+                p.config!.bridge_address = v ?? "";
-                p.onChange(p.config);
-              }}
-            />
-            <IPInput
-              label="DHCP allocation end"
-              editable={p.editable}
-              version={p.version}
-              value={p.config.dhcp.end}
-              onValueChange={(v) => {
-                p.config!.dhcp!.end = v!;
-                p.onChange(p.config);
-              }}
-            />
-
-            <DHCPHostReservations
-              {...p}
-              dhcp={p.config.dhcp}
-              onChange={(d) => {
-                p.config!.dhcp = d;
                 p.onChange?.(p.config);
               }}
             />
-          </Paper>
+
-        </>
+            <TextInput
+              label="Prefix"
+              editable={p.editable}
+              value={p.config.prefix.toString()}
+              type="number"
+              onValueChange={(v) => {
+                p.config!.prefix = Number(v);
+                p.onChange?.(p.config);
+              }}
+              size={
+                p.version === 4 ? { min: 0, max: 32 } : { min: 0, max: 128 }
+              }
+            />
+          </>
+        )}
+      </EditSection>
+
+      {p.config && (p.editable || p.config.dhcp) && (
+        <EditSection
+          title={`DHCP v${p.version}`}
+          actions={
+            <Checkbox
+              disabled={!p.editable}
+              checked={!!p.config.dhcp}
+              onChange={(_ev, val) => toggleDHCP(val)}
+            />
+          }
+        >
+          {p.config.dhcp && (
+            <>
+              <IPInput
+                label="DHCP allocation start"
+                editable={p.editable}
+                version={p.version}
+                value={p.config.dhcp.start}
+                onValueChange={(v) => {
+                  p.config!.dhcp!.start = v!;
+                  p.onChange(p.config);
+                }}
+              />
+              <IPInput
+                label="DHCP allocation end"
+                editable={p.editable}
+                version={p.version}
+                value={p.config.dhcp.end}
+                onValueChange={(v) => {
+                  p.config!.dhcp!.end = v!;
+                  p.onChange(p.config);
+                }}
+              />
+            </>
+          )}
+        </EditSection>
       )}
-    </EditSection>
+
+      {p.config?.dhcp && (p.editable || p.config.dhcp.hosts.length > 0) && (
+        <EditSection title="DHCP hosts reservations">
+          <DHCPHostReservations
+            {...p}
+            dhcp={p.config.dhcp}
+            onChange={(d) => {
+              p.config!.dhcp = d;
+              p.onChange?.(p.config);
+            }}
+          />
+        </EditSection>
+      )}
+    </Grid>
   );
 }
 
@@ -389,7 +407,7 @@ function NetworkDetailsTabDanger(p: DetailsInnerProps): React.ReactElement {
 
   return (
     <Button color="error" onClick={requestDelete}>
-      Delete the network
+      Delete this network
     </Button>
   );
 }