Fix hidden tabs issue
This commit is contained in:
parent
3407c068e1
commit
219fc184ee
35
virtweb_frontend/src/widgets/TabsWidget.tsx
Normal file
35
virtweb_frontend/src/widgets/TabsWidget.tsx
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import { Box, Tab, Tabs } from "@mui/material";
|
||||||
|
|
||||||
|
export interface TabWidgetOption<E> {
|
||||||
|
label: string;
|
||||||
|
value: E;
|
||||||
|
visible: boolean;
|
||||||
|
color?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TabsWidget<E>(p: {
|
||||||
|
currTab: E;
|
||||||
|
options: TabWidgetOption<E>[];
|
||||||
|
onValueChange: (v: E) => void;
|
||||||
|
}): React.ReactElement {
|
||||||
|
const activeOptions = p.options.filter((v) => v.visible);
|
||||||
|
|
||||||
|
const currTabIndex = activeOptions.findIndex((v) => v.value === p.currTab);
|
||||||
|
|
||||||
|
const updateActiveTab = (index: number) => {
|
||||||
|
p.onValueChange(activeOptions[index].value);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
|
||||||
|
<Tabs
|
||||||
|
value={currTabIndex}
|
||||||
|
onChange={(_ev, newVal) => updateActiveTab(newVal)}
|
||||||
|
>
|
||||||
|
{activeOptions.map((o, index) => (
|
||||||
|
<Tab key={index} label={o.label} style={{ color: o.color }} />
|
||||||
|
))}
|
||||||
|
</Tabs>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
@ -14,6 +14,7 @@ import { SelectInput } from "../forms/SelectInput";
|
|||||||
import { TextInput } from "../forms/TextInput";
|
import { TextInput } from "../forms/TextInput";
|
||||||
import { DHCPHostReservations } from "./DHCPHostReservations";
|
import { DHCPHostReservations } from "./DHCPHostReservations";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { TabsWidget } from "../TabsWidget";
|
||||||
|
|
||||||
interface DetailsProps {
|
interface DetailsProps {
|
||||||
net: NetworkInfo;
|
net: NetworkInfo;
|
||||||
@ -38,7 +39,7 @@ export function NetworkDetails(p: DetailsProps): React.ReactElement {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
enum VMTab {
|
enum NetTab {
|
||||||
General = 0,
|
General = 0,
|
||||||
IPv4,
|
IPv4,
|
||||||
IPv6,
|
IPv6,
|
||||||
@ -48,36 +49,38 @@ enum VMTab {
|
|||||||
type DetailsInnerProps = DetailsProps & { cardsList: string[] };
|
type DetailsInnerProps = DetailsProps & { cardsList: string[] };
|
||||||
|
|
||||||
function NetworkDetailsInner(p: DetailsInnerProps): React.ReactElement {
|
function NetworkDetailsInner(p: DetailsInnerProps): React.ReactElement {
|
||||||
const [currTab, setCurrTab] = React.useState(VMTab.General);
|
const [currTab, setCurrTab] = React.useState(NetTab.General);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
|
<TabsWidget
|
||||||
<Tabs value={currTab} onChange={(_ev, newVal) => setCurrTab(newVal)}>
|
currTab={currTab}
|
||||||
<Tab label="General" tabIndex={VMTab.General} />
|
onValueChange={setCurrTab}
|
||||||
|
options={[
|
||||||
|
{ label: "General", value: NetTab.General, visible: true },
|
||||||
|
{
|
||||||
|
label: "IPv4",
|
||||||
|
value: NetTab.IPv4,
|
||||||
|
visible: p.editable || !!p.net.ip_v4,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "IPv6",
|
||||||
|
value: NetTab.IPv6,
|
||||||
|
visible: p.editable || !!p.net.ip_v6,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Danger zone",
|
||||||
|
value: NetTab.Danger,
|
||||||
|
color: "red",
|
||||||
|
visible: !p.editable,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
|
||||||
{(p.editable || p.net.ip_v4) && (
|
{currTab === NetTab.General && <NetworkDetailsTabGeneral {...p} />}
|
||||||
<Tab label="IPv4" tabIndex={VMTab.IPv4} />
|
{currTab === NetTab.IPv4 && <NetworkDetailsTabIPv4 {...p} />}
|
||||||
)}
|
{currTab === NetTab.IPv6 && <NetworkDetailsTabIPv6 {...p} />}
|
||||||
|
{currTab === NetTab.Danger && <NetworkDetailsTabDanger {...p} />}
|
||||||
{(p.editable || p.net.ip_v6) && (
|
|
||||||
<Tab label="IPv6" tabIndex={VMTab.IPv6} />
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!p.editable && (
|
|
||||||
<Tab
|
|
||||||
label="Danger zone"
|
|
||||||
style={{ color: "red" }}
|
|
||||||
tabIndex={VMTab.Danger}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Tabs>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{currTab === VMTab.General && <NetworkDetailsTabGeneral {...p} />}
|
|
||||||
{currTab === VMTab.IPv4 && <NetworkDetailsTabIPv4 {...p} />}
|
|
||||||
{currTab === VMTab.IPv6 && <NetworkDetailsTabIPv6 {...p} />}
|
|
||||||
{currTab === VMTab.Danger && <NetworkDetailsTabDanger {...p} />}
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user