pierre/VirtWeb
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

Use new TabWidget for VM route

Browse Source
This commit is contained in:
Pierre HUBERT 2024-01-03 00:12:16 +01:00
parent 219fc184ee
commit e561942cf7
3 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
virtweb_frontend/src/widgets/TabsWidget.tsx
View File

@ -10,14 +10,14 @@ export interface TabWidgetOption<E> {
export function TabsWidget<E>(p: { export function TabsWidget<E>(p: {
currTab: E; currTab: E;
options: TabWidgetOption<E>[]; options: TabWidgetOption<E>[];
onValueChange: (v: E) => void; onTabChange: (v: E) => void;
}): React.ReactElement { }): React.ReactElement {
const activeOptions = p.options.filter((v) => v.visible); const activeOptions = p.options.filter((v) => v.visible);
const currTabIndex = activeOptions.findIndex((v) => v.value === p.currTab); const currTabIndex = activeOptions.findIndex((v) => v.value === p.currTab);
const updateActiveTab = (index: number) => { const updateActiveTab = (index: number) => {
p.onValueChange(activeOptions[index].value); p.onTabChange(activeOptions[index].value);
}; };
return ( return (

2
virtweb_frontend/src/widgets/net/NetworkDetails.tsx
View File

@ -55,7 +55,7 @@ function NetworkDetailsInner(p: DetailsInnerProps): React.ReactElement {
<> <>
<TabsWidget <TabsWidget
currTab={currTab} currTab={currTab}
onValueChange={setCurrTab} onTabChange={setCurrTab}
options={[ options={[
{ label: "General", value: NetTab.General, visible: true }, { label: "General", value: NetTab.General, visible: true },
{ {

30
virtweb_frontend/src/widgets/vms/VMDetails.tsx
View File

@ -20,6 +20,7 @@ import { useNavigate } from "react-router-dom";
import { useAlert } from "../../hooks/providers/AlertDialogProvider"; import { useAlert } from "../../hooks/providers/AlertDialogProvider";
import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider"; import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
import { useSnackbar } from "../../hooks/providers/SnackbarProvider"; import { useSnackbar } from "../../hooks/providers/SnackbarProvider";
import { TabsWidget } from "../TabsWidget";
interface DetailsProps { interface DetailsProps {
vm: VMInfo; vm: VMInfo;
@ -82,20 +83,21 @@ function VMDetailsInner(p: DetailsInnerProps): React.ReactElement {
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} /> onTabChange={setCurrTab}
<Tab label="Storage" tabIndex={VMTab.Storage} /> options={[
<Tab label="Network" tabIndex={VMTab.Network} /> { label: "General", value: VMTab.General, visible: true },
{!p.editable && ( { label: "Storage", value: VMTab.Storage, visible: true },
<Tab { label: "Network", value: VMTab.Network, visible: true },
label="Danger zone" {
style={{ color: "red" }} label: "Danger zone",
tabIndex={VMTab.Danger} value: VMTab.Danger,
/> visible: !p.editable,
)} color: "red",
</Tabs> },
</Box> ]}
/>
{currTab === VMTab.General && <VMDetailsTabGeneral {...p} />} {currTab === VMTab.General && <VMDetailsTabGeneral {...p} />}
{currTab === VMTab.Storage && <VMDetailsTabStorage {...p} />} {currTab === VMTab.Storage && <VMDetailsTabStorage {...p} />}