Use new TabWidget for VM route
This commit is contained in:
parent
219fc184ee
commit
e561942cf7
@ -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 (
|
||||||
|
@ -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 },
|
||||||
{
|
{
|
||||||
|
@ -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} />}
|
||||||
|
Loading…
Reference in New Issue
Block a user