diff --git a/striker-ui/pages/manage-element/index.tsx b/striker-ui/pages/manage-element/index.tsx index 54fdcb3a..d05f5275 100644 --- a/striker-ui/pages/manage-element/index.tsx +++ b/striker-ui/pages/manage-element/index.tsx @@ -8,6 +8,7 @@ import Grid from '../../components/Grid'; import handleAPIError from '../../lib/handleAPIError'; import Header from '../../components/Header'; import ManageFencePanel from '../../components/ManageFence'; +import ManageManifestPanel from '../../components/ManageManifest'; import ManageUpsPanel from '../../components/ManageUps'; import { Panel } from '../../components/Panels'; import PrepareHostForm from '../../components/PrepareHostForm'; @@ -20,12 +21,18 @@ import useIsFirstRender from '../../hooks/useIsFirstRender'; import useProtect from '../../hooks/useProtect'; import useProtectedState from '../../hooks/useProtectedState'; +const TAB_ID_PREPARE_HOST = 'prepare-host'; +const TAB_ID_PREPARE_NETWORK = 'prepare-network'; +const TAB_ID_MANAGE_FENCE = 'manage-fence'; +const TAB_ID_MANAGE_UPS = 'manage-ups'; +const TAB_ID_MANAGE_MANIFEST = 'manage-manifest'; + const MAP_TO_PAGE_TITLE: Record = { - 'prepare-host': 'Prepare Host', - 'prepare-network': 'Prepare Network', - 'manage-fence': 'Manage Fence Devices', - 'manage-ups': 'Manage UPSes', - 'manage-manifest': 'Manage Manifests', + [TAB_ID_PREPARE_HOST]: 'Prepare Host', + [TAB_ID_PREPARE_NETWORK]: 'Prepare Network', + [TAB_ID_MANAGE_FENCE]: 'Manage Fence Devices', + [TAB_ID_MANAGE_UPS]: 'Manage UPSes', + [TAB_ID_MANAGE_MANIFEST]: 'Manage Manifests', }; const PAGE_TITLE_LOADING = 'Loading'; const STEP_CONTENT_GRID_COLUMNS = { md: 8, sm: 6, xs: 1 }; @@ -70,7 +77,7 @@ const PrepareNetworkTabContent: FC = () => { > {hostOverviewPairs.map(([hostUUID, { shortHostName }]) => ( @@ -144,6 +151,19 @@ const ManageUpsTabContent: FC = () => ( /> ); +const ManageManifestContent: FC = () => ( + , + ...STEP_CONTENT_GRID_CENTER_COLUMN, + }, + }} + /> +); + const ManageElement: FC = () => { const { isReady, @@ -156,11 +176,11 @@ const ManageElement: FC = () => { useEffect(() => { if (isReady) { let step = getQueryParam(rawStep, { - fallbackValue: 'prepare-host', + fallbackValue: TAB_ID_PREPARE_HOST, }); if (!MAP_TO_PAGE_TITLE[step]) { - step = 'prepare-host'; + step = TAB_ID_PREPARE_HOST; } if (pageTitle === PAGE_TITLE_LOADING) { @@ -188,24 +208,28 @@ const ManageElement: FC = () => { orientation={{ xs: 'vertical', sm: 'horizontal' }} value={pageTabId} > - - - - + + + + + - + - + - + - + + + + ); };