Local modifications to ClusterLabs/Anvil by Alteeve
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

61 lines
1.8 KiB

import { PlayCircle } from '@mui/icons-material';
import { FC, useMemo, useState } from 'react';
import API_BASE_URL from '../../lib/consts/API_BASE_URL';
import periodicFetch from '../../lib/fetchers/periodicFetch';
import FlexBox from '../FlexBox';
import IconButton from '../IconButton';
import List from '../List';
import { Panel, PanelHeader } from '../Panels';
import Spinner from '../Spinner';
import { BodyText, HeaderText } from '../Text';
const ManageManifestPanel: FC = () => {
const [isEditManifests, setIsEditManifests] = useState<boolean>(false);
const { data: manifestOverviews, isLoading: isLoadingManifestOverviews } =
periodicFetch<APIManifestOverviewList>(`${API_BASE_URL}/manifest`, {
refreshInterval: 60000,
});
const listElement = useMemo(
() => (
<List
allowEdit
allowItemButton={isEditManifests}
edit={isEditManifests}
header
listEmpty="No manifest(s) registered."
listItems={manifestOverviews}
onEdit={() => {
setIsEditManifests((previous) => !previous);
}}
renderListItem={(manifestUUID, { manifestName }) => (
<FlexBox fullWidth row>
<IconButton disabled={isEditManifests} variant="normal">
<PlayCircle />
</IconButton>
<BodyText>{manifestName}</BodyText>
</FlexBox>
)}
/>
),
[isEditManifests, manifestOverviews],
);
const panelContent = useMemo(
() => (isLoadingManifestOverviews ? <Spinner /> : listElement),
[isLoadingManifestOverviews, listElement],
);
return (
<Panel>
<PanelHeader>
<HeaderText>Manage manifests</HeaderText>
</PanelHeader>
{panelContent}
</Panel>
);
};
export default ManageManifestPanel;