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 { DHCPHostReservations } from "./DHCPHostReservations";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { TabsWidget } from "../TabsWidget";
|
||||
|
||||
interface DetailsProps {
|
||||
net: NetworkInfo;
|
||||
@ -38,7 +39,7 @@ export function NetworkDetails(p: DetailsProps): React.ReactElement {
|
||||
);
|
||||
}
|
||||
|
||||
enum VMTab {
|
||||
enum NetTab {
|
||||
General = 0,
|
||||
IPv4,
|
||||
IPv6,
|
||||
@ -48,36 +49,38 @@ enum VMTab {
|
||||
type DetailsInnerProps = DetailsProps & { cardsList: string[] };
|
||||
|
||||
function NetworkDetailsInner(p: DetailsInnerProps): React.ReactElement {
|
||||
const [currTab, setCurrTab] = React.useState(VMTab.General);
|
||||
const [currTab, setCurrTab] = React.useState(NetTab.General);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
|
||||
<Tabs value={currTab} onChange={(_ev, newVal) => setCurrTab(newVal)}>
|
||||
<Tab label="General" tabIndex={VMTab.General} />
|
||||
|
||||
{(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"
|
||||
style={{ color: "red" }}
|
||||
tabIndex={VMTab.Danger}
|
||||
<TabsWidget
|
||||
currTab={currTab}
|
||||
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,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
{currTab === VMTab.General && <NetworkDetailsTabGeneral {...p} />}
|
||||
{currTab === VMTab.IPv4 && <NetworkDetailsTabIPv4 {...p} />}
|
||||
{currTab === VMTab.IPv6 && <NetworkDetailsTabIPv6 {...p} />}
|
||||
{currTab === VMTab.Danger && <NetworkDetailsTabDanger {...p} />}
|
||||
{currTab === NetTab.General && <NetworkDetailsTabGeneral {...p} />}
|
||||
{currTab === NetTab.IPv4 && <NetworkDetailsTabIPv4 {...p} />}
|
||||
{currTab === NetTab.IPv6 && <NetworkDetailsTabIPv6 {...p} />}
|
||||
{currTab === NetTab.Danger && <NetworkDetailsTabDanger {...p} />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user