@openshift-assisted/ui-lib 2.55.1 → 2.56.0

package/lib/ocm/components/hostsTable/use-hosts-table.tsx

@@ -0,0 +1,424 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  Cluster,
+  Disk,
+  DiskRole,
+  Host,
+  HostUpdateParams,
+} from '@openshift-assisted/types/assisted-installer-service';
+import {
+  useAlerts,
+  AddHostsContext,
+  getInventory,
+  isSNO,
+  hostActionResolver,
+  AdditionalNTPSourcesFormProps,
+  getApiErrorMessage,
+  handleApiError,
+  isUnknownServerError,
+  useTranslation,
+  canEditDisks as canEditDisksUtil,
+  canEditRole as canEditRoleUtil,
+  canInstallHost as canInstallHostUtil,
+  canEnable as canEnableUtil,
+  canDisable as canDisableUtil,
+  canDelete as canDeleteUtil,
+  canEditHost as canEditHostUtil,
+  canEditHostname as canEditHostnameUtil,
+  canDownloadHostLogs,
+  canReset as canResetUtil,
+} from '../../../common';
+import {
+  forceReload,
+  setServerUpdateError,
+  updateCluster,
+  updateHost,
+  selectCurrentClusterPermissionsState,
+} from '../../store';
+import { useFeature } from '../../hooks';
+import { ClustersService, HostsService } from '../../services';
+import { downloadHostInstallationLogs, onAdditionalNtpSourceAction } from './utils';
+import { UpdateDay2ApiVipModalProps, useModalDialogsContext } from './modals';
+
+export const useHostsTable = (cluster: Cluster) => {
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
+  const { addAlert } = useAlerts();
+  const {
+    eventsDialog,
+    editHostDialog,
+    deleteHostDialog,
+    resetHostDialog,
+    massUpdateHostnameDialog,
+    massDeleteHostDialog,
+  } = useModalDialogsContext();
+  const { resetCluster } = React.useContext(AddHostsContext);
+  const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
+  const { t } = useTranslation();
+
+  const dispatch = useDispatch();
+
+  const hostActions = React.useMemo(
+    () => ({
+      onDeleteHost: (host: Host) => {
+        const inventory = getInventory(host);
+        deleteHostDialog.open({
+          hostId: host.id,
+          hostname: (host?.requestedHostname || inventory?.hostname) as string,
+        });
+      },
+      onInstallHost: async (host: Host) => {
+        const hostId = host.id;
+        try {
+          const { data } = await HostsService.install(host);
+          resetCluster ? void resetCluster() : dispatch(updateHost(data));
+        } catch (e) {
+          handleApiError(e, () =>
+            addAlert({ title: `Failed to enable host ${hostId}`, message: getApiErrorMessage(e) }),
+          );
+        }
+      },
+    }),
+    [dispatch, resetCluster, addAlert, deleteHostDialog],
+  );
+
+  const onViewHostEvents = React.useCallback(
+    (host: Host) => {
+      const { id, requestedHostname } = host;
+      const inventory = getInventory(host);
+      const hostname = requestedHostname || inventory?.hostname || id;
+      eventsDialog.open({ hostId: id, hostname });
+    },
+    [eventsDialog],
+  );
+
+  const onEditHost = React.useCallback(
+    (host: Host) => {
+      const inventory = getInventory(host);
+      editHostDialog.open({ host, inventory });
+    },
+    [editHostDialog],
+  );
+
+  const onHostReset = React.useCallback(
+    (host: Host) => {
+      const inventory = getInventory(host);
+      const hostname = host?.requestedHostname || inventory?.hostname || '';
+      resetHostDialog.open({ hostId: host.id, hostname });
+    },
+    [resetHostDialog],
+  );
+
+  const onDownloadHostLogs = React.useCallback(
+    (host: Host) => {
+      void downloadHostInstallationLogs(addAlert, host);
+    },
+    [addAlert],
+  );
+
+  const onDiskRole = React.useCallback(
+    async (hostId: Host['id'], diskId: Disk['id'], role: DiskRole) => {
+      try {
+        if (!diskId) {
+          // noinspection ExceptionCaughtLocallyJS
+          throw new Error(`Cannot update disk role in host ${hostId}\nMissing diskId`);
+        }
+
+        const host = ClustersService.findHost(cluster.hosts, hostId);
+        if (!host) {
+          throw new Error(`No host found with id:${hostId}`);
+        }
+
+        const { data } = await HostsService.updateDiskRole(host, diskId, role);
+
+        resetCluster ? void resetCluster() : dispatch(updateHost(data));
+      } catch (e) {
+        handleApiError(e, () =>
+          addAlert({ title: 'Failed to set disk role', message: getApiErrorMessage(e) }),
+        );
+        if (isUnknownServerError(e as Error)) {
+          dispatch(setServerUpdateError());
+        }
+      }
+    },
+    [dispatch, resetCluster, addAlert, cluster.hosts],
+  );
+
+  const onExcludedODF = React.useCallback(
+    async (hostId: Host['id'], nodeLabels: HostUpdateParams['nodeLabels']) => {
+      try {
+        const host = ClustersService.findHost(cluster.hosts, hostId);
+        if (!host) {
+          throw new Error(`No host found with id:${hostId}`);
+        }
+
+        const { data } = await HostsService.updateHostODF(host, nodeLabels);
+        resetCluster ? await resetCluster() : dispatch(updateHost(data));
+      } catch (e) {
+        handleApiError(e, () =>
+          addAlert({ title: 'Failed to update ODF status', message: getApiErrorMessage(e) }),
+        );
+        if (isUnknownServerError(e as Error)) {
+          dispatch(setServerUpdateError());
+        }
+      }
+    },
+    [cluster.hosts, resetCluster, dispatch, addAlert],
+  );
+
+  const onUpdateDay2ApiVip: UpdateDay2ApiVipModalProps['onUpdateDay2ApiVip'] = React.useCallback(
+    async (apiVip: string, onError: (message: string) => void) => {
+      try {
+        const { data } = await ClustersService.update(cluster.id, cluster.tags, {
+          apiVipDnsName: apiVip,
+        });
+        dispatch(updateCluster(data));
+      } catch (e) {
+        handleApiError(e, () => onError(getApiErrorMessage(e)));
+        if (isUnknownServerError(e as Error)) {
+          dispatch(setServerUpdateError());
+        }
+      }
+    },
+    [cluster.id, cluster.tags, dispatch],
+  );
+
+  const onAdditionalNtpSource: AdditionalNTPSourcesFormProps['onAdditionalNtpSource'] =
+    React.useMemo(
+      () =>
+        async (...args) =>
+          await onAdditionalNtpSourceAction(dispatch, cluster, ...args),
+      [cluster, dispatch],
+    );
+
+  const updateDiskSkipFormatting = React.useCallback(
+    async (shouldFormatDisk: boolean, hostId: Host['id'], diskId: Disk['id']) => {
+      try {
+        if (!cluster.id) {
+          throw new Error(
+            `Failed to update disks skip formatting state in host ${hostId}\nMissing cluster id`,
+          );
+        }
+        if (!diskId) {
+          throw new Error(
+            `Failed to update disks skip formatting state in host ${hostId}\nMissing disk id`,
+          );
+        }
+
+        const host = ClustersService.findHost(cluster.hosts, hostId);
+        if (!host) {
+          throw new Error(`No host found with id:${hostId}`);
+        }
+
+        const { data } = await HostsService.updateFormattingDisks(host, diskId, !shouldFormatDisk);
+        resetCluster ? void resetCluster() : dispatch(updateHost(data));
+      } catch (e) {
+        handleApiError(e, () =>
+          addAlert({
+            title: 'Failed to set disks skip formatting',
+            message: getApiErrorMessage(e),
+          }),
+        );
+        if (isUnknownServerError(e as Error)) {
+          dispatch(setServerUpdateError());
+        }
+      }
+    },
+    [dispatch, addAlert, cluster, resetCluster],
+  );
+
+  const actionChecks = React.useMemo(
+    () => ({
+      canEditRole: (host: Host) => {
+        if (isSingleClusterFeatureEnabled && host.bootstrap) {
+          return false;
+        }
+        return !isViewerMode && canEditRoleUtil(cluster.status, host.status, isSNO(cluster));
+      },
+      canInstallHost: (host: Host) => !isViewerMode && canInstallHostUtil(cluster, host.status),
+      canEditDisks: (host: Host) => !isViewerMode && canEditDisksUtil(cluster.status, host.status),
+      canEnable: (host: Host) => !isViewerMode && canEnableUtil(cluster.status, host.status),
+      canDisable: (host: Host) => !isViewerMode && canDisableUtil(cluster.status, host.status),
+      canDelete: (host: Host) => !isViewerMode && canDeleteUtil(cluster.status, host.status),
+      canEditHost: (host: Host) => !isViewerMode && canEditHostUtil(cluster.status, host.status),
+      canReset: (host: Host) => !isViewerMode && canResetUtil(cluster.status, host.status),
+      canEditHostname: (host?: Host) => !isViewerMode && canEditHostnameUtil(cluster.status, host),
+    }),
+    [cluster, isViewerMode, isSingleClusterFeatureEnabled],
+  );
+
+  const onReset = React.useCallback(() => {
+    const reset = async (hostId: string | undefined) => {
+      if (hostId) {
+        try {
+          const host = ClustersService.findHost(cluster.hosts, hostId);
+          if (!host) {
+            throw new Error(`No host found with id:${hostId}`);
+          }
+
+          const { data } = await HostsService.reset(host);
+          resetCluster ? void resetCluster() : dispatch(updateHost(data));
+        } catch (e) {
+          handleApiError(e, () =>
+            addAlert({
+              title: `Failed to reset host ${hostId}`,
+              message: getApiErrorMessage(e),
+            }),
+          );
+        }
+      }
+    };
+    void reset(resetHostDialog.data?.hostId);
+    resetHostDialog.close();
+  }, [addAlert, cluster.hosts, dispatch, resetCluster, resetHostDialog]);
+
+  const onDelete = React.useCallback(() => {
+    const deleteHost = async (hostId: string | undefined) => {
+      if (hostId) {
+        try {
+          const host = ClustersService.findHost(cluster.hosts, hostId);
+          if (!host) {
+            throw new Error(`No host found with id:${hostId}`);
+          }
+
+          await HostsService.delete(host);
+          resetCluster ? void resetCluster() : dispatch(forceReload());
+        } catch (e) {
+          handleApiError(e, () =>
+            addAlert({
+              title: `Failed to delete host ${hostId}`,
+              message: getApiErrorMessage(e),
+            }),
+          );
+        }
+      }
+    };
+    void deleteHost(deleteHostDialog.data?.hostId);
+    deleteHostDialog.close();
+  }, [deleteHostDialog, cluster.hosts, resetCluster, dispatch, addAlert]);
+
+  const onEditRole = React.useCallback(
+    async (host: Host, role: HostUpdateParams['hostRole']) => {
+      try {
+        if (!host.clusterId) {
+          // noinspection ExceptionCaughtLocallyJS
+          throw new Error(`Failed to edit role in host: ${host.id}.\nMissing cluster_id`);
+        }
+        const { data } = await HostsService.updateRole(host, role);
+
+        if (resetCluster) {
+          void resetCluster();
+        } else {
+          dispatch(updateHost(data));
+          // Reload to obtain cluster-level validations that may be affected by role change
+          dispatch(forceReload());
+        }
+      } catch (e) {
+        handleApiError(e, () =>
+          addAlert({ title: 'Failed to set role', message: getApiErrorMessage(e) }),
+        );
+        if (isUnknownServerError(e as Error)) {
+          dispatch(setServerUpdateError());
+        }
+      }
+    },
+    [addAlert, dispatch, resetCluster],
+  );
+
+  const actionResolver = React.useMemo(
+    () =>
+      hostActionResolver({
+        t,
+        ...actionChecks,
+        onEditRole,
+        onDiskRole,
+        onExcludedODF,
+        onEditHost,
+        onHostReset,
+        onDownloadHostLogs,
+        onViewHostEvents,
+        canDownloadHostLogs,
+        ...hostActions,
+      }),
+    [
+      t,
+      actionChecks,
+      hostActions,
+      onEditRole,
+      onDiskRole,
+      onEditHost,
+      onHostReset,
+      onDownloadHostLogs,
+      onExcludedODF,
+      onViewHostEvents,
+    ],
+  );
+
+  const [selectedHostIDs, setSelectedHostIDs] = React.useState<string[]>([]);
+  const onSelect = React.useCallback(
+    (obj: Host, isSelected: boolean) => {
+      if (isSelected) {
+        setSelectedHostIDs([...selectedHostIDs, obj.id]);
+      } else {
+        setSelectedHostIDs(selectedHostIDs.filter((sh) => sh !== obj.id));
+      }
+    },
+    [selectedHostIDs],
+  );
+  const onMassChangeHostname = React.useCallback(() => {
+    if (selectedHostIDs.length === 1) {
+      const host = cluster.hosts?.find((host) => host.id === selectedHostIDs[0]);
+      return host && onEditHost(host);
+    }
+    return massUpdateHostnameDialog.open({
+      hostIDs: selectedHostIDs,
+      cluster,
+      reloadCluster: () => (resetCluster ? void resetCluster() : dispatch(forceReload())),
+    });
+  }, [selectedHostIDs, massUpdateHostnameDialog, cluster, onEditHost, resetCluster, dispatch]);
+
+  const onMassDeleteHost = React.useCallback(() => {
+    if (selectedHostIDs.length === 1) {
+      const host = cluster.hosts?.find((host) => host.id === selectedHostIDs[0]);
+
+      return (
+        host &&
+        deleteHostDialog.open({
+          hostId: host.id,
+          hostname: host?.requestedHostname as string,
+        })
+      );
+    } else {
+      return massDeleteHostDialog.open({
+        hosts: (cluster.hosts || []).filter((h) => selectedHostIDs.includes(h.id)),
+        onDelete: (host) => HostsService.delete(host),
+        reloadCluster: () => (resetCluster ? void resetCluster() : dispatch(forceReload())),
+      });
+    }
+  }, [
+    selectedHostIDs,
+    cluster.hosts,
+    deleteHostDialog,
+    massDeleteHostDialog,
+    resetCluster,
+    dispatch,
+  ]);
+
+  return {
+    onDiskRole,
+    onEditHost,
+    actionChecks,
+    onEditRole,
+    actionResolver,
+    onReset,
+    onDelete,
+    onAdditionalNtpSource,
+    onUpdateDay2ApiVip,
+    onSelect: isViewerMode ? undefined : onSelect,
+    selectedHostIDs,
+    setSelectedHostIDs,
+    onMassChangeHostname,
+    onMassDeleteHost,
+    updateDiskSkipFormatting,
+  };
+};

package/lib/ocm/components/hostsTable/utils.ts

@@ -0,0 +1,71 @@
+import { saveAs } from 'file-saver';
+import {
+  Host,
+  Cluster,
+  V2ClusterUpdateParams,
+  Inventory,
+} from '@openshift-assisted/types/assisted-installer-service';
+import {
+  AlertsContextType,
+  isInOcm,
+  ClustersAPI,
+  handleApiError,
+  getApiErrorMessage,
+  stringToJSON,
+} from '../../../common';
+import { ClustersService } from '../../services';
+import { updateCluster } from '../../store';
+
+export const downloadHostInstallationLogs = async (
+  addAlert: AlertsContextType['addAlert'],
+  host: Host,
+) => {
+  try {
+    if (!host.clusterId) {
+      throw new Error(
+        `Cannot download logs for host ${host.id}. Missing clusterId field value in host.`,
+      );
+    }
+    if (isInOcm) {
+      const { data } = await ClustersAPI.getPresignedForClusterFiles({
+        clusterId: host.clusterId,
+        fileName: 'logs',
+        hostId: host.id,
+        logsType: 'host',
+      });
+      saveAs(data.url);
+    } else {
+      const { data, fileName } = await ClustersService.downloadLogs(host.clusterId, host.id);
+      saveAs(data, fileName);
+    }
+  } catch (e) {
+    handleApiError(e, (e) => {
+      addAlert({ title: 'Could not download host logs.', message: getApiErrorMessage(e) });
+    });
+  }
+};
+
+export const onAdditionalNtpSourceAction = async (
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  dispatch: (payload: any) => void,
+  cluster: Cluster,
+  additionalNtpSource: string,
+  onError: (message: string) => void,
+) => {
+  try {
+    const values: V2ClusterUpdateParams = {
+      additionalNtpSource,
+    };
+
+    const { data } = await ClustersService.update(cluster.id, cluster.tags, values);
+    dispatch(updateCluster(data));
+  } catch (e) {
+    handleApiError(e, () => onError(getApiErrorMessage(e)));
+  }
+};
+
+export const isAHostVM = (hosts: Host[]) =>
+  hosts.some((host) => {
+    const inventory = stringToJSON<Inventory>(host.inventory || '') || {};
+    return inventory.systemVendor?.virtual;
+  });

package/lib/ocm/components/index.ts

@@ -1,10 +1,11 @@
 export * from './clusterDetail';
 export * from './clusters';
 export * from './ui';
-export * from './Routes';
+export * from './uiStates';
 export * from './AddHosts';
-export * from './clusterWizard';
-export * from './HostsClusterDetailTab';
 export * from './featureSupportLevels';
-export * from './clusterConfiguration/ClusterDefaultConfigurationContext';
-export * from './hosts/ModalDialogsContext';
+export * from './hostsTable';
+export * from './information';
+export * from './discoveryImage';
+export * from './clusterInstallation';
+export * from './wizard';

package/lib/ocm/components/information/HostRequirementsContent.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { List, ListItem, Content } from '@patternfly/react-core';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  DISK_WRITE_SPEED_LINK,
+  ErrorState,
+  ExternalLink,
+  LoadingState,
+  fileSize,
+} from '../../../common';
+import { useClusterPreflightRequirements } from '../../hooks';
+
+const parseRAM = (ramMib: number) => fileSize(ramMib * 1024 * 1024, 2, 'iec');
+
+type PreflightRequirementsContentProps = {
+  clusterId: Cluster['id'];
+  isSingleNode: boolean;
+  isAddingHosts: boolean;
+};
+
+export const HostRequirementsContent = ({
+  clusterId,
+  isSingleNode,
+  isAddingHosts,
+}: PreflightRequirementsContentProps) => {
+  const { preflightRequirements, error, isLoading } = useClusterPreflightRequirements(clusterId);
+
+  if (isLoading) {
+    return <LoadingState content="Loading hardware requirements ..." />;
+  }
+  if (error) {
+    return <ErrorState />;
+  }
+
+  const masterQuantitativeData = preflightRequirements?.ocp?.master?.quantitative;
+  const masterCpuCores = masterQuantitativeData?.cpuCores || 4;
+  const masterRam = parseRAM(masterQuantitativeData?.ramMib || 16 * 1024);
+  const masterDiskSizeGb = masterQuantitativeData?.diskSizeGb || 100;
+  const contentForControlPlaneNodes = `${masterCpuCores} CPU cores, ${masterRam} RAM, and ${masterDiskSizeGb} GB disk size.`;
+
+  const workerQuantitativeData = preflightRequirements?.ocp?.worker?.quantitative;
+  const workerCpuCores = workerQuantitativeData?.cpuCores || 2;
+  const workerRam = parseRAM(workerQuantitativeData?.ramMib || 16 * 1024);
+  const workerDiskSizeGb = workerQuantitativeData?.diskSizeGb || 100;
+  const contentForWorkerNodes = `${workerCpuCores} CPU cores, ${workerRam} RAM, and ${workerDiskSizeGb} GB disk size.`;
+
+  if (isAddingHosts) {
+    return (
+      <Content
+        component={'p'}
+      >{`Worker hosts must have at least ${contentForWorkerNodes}`}</Content>
+    );
+  }
+
+  let content: JSX.Element;
+  if (isSingleNode) {
+    content = (
+      <List>
+        <ListItem>{`One host is required with at least ${contentForControlPlaneNodes}`}</ListItem>
+        <ListItem>Operators might require additional resources.</ListItem>
+      </List>
+    );
+  } else {
+    content = (
+      <List>
+        <ListItem>{`Control plane nodes: At least ${contentForControlPlaneNodes}`}</ListItem>
+        <ListItem>{`Workers: At least ${contentForWorkerNodes}`}</ListItem>
+        <ListItem>
+          Also note that each host's disk write speed should meet the minimum requirements to run
+          OpenShift.
+          <br />
+          <ExternalLink href={DISK_WRITE_SPEED_LINK}>Learn more</ExternalLink>
+        </ListItem>
+        <ListItem>Operators might require additional resources.</ListItem>
+      </List>
+    );
+  }
+
+  return content;
+};

package/lib/ocm/components/information/InformationAndAlerts.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Alert, AlertVariant } from '@patternfly/react-core';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { isSNO } from '../../../common';
+import { isAddHostsCluster } from '../clusters';
+import { HostsDiscoveryTroubleshootingInfoLinkWithModal, isAHostVM } from '../hostsTable';
+import { InfoLinkWithModal } from '../ui';
+import { VMRebootConfigurationLinkWithModal } from './VMRebootConfigurationLinkWithModal';
+import { HostRequirementsContent } from './HostRequirementsContent';
+
+export const InformationAndAlerts = ({ cluster }: { cluster: Cluster }) => {
+  const isVM = React.useMemo(() => isAHostVM(cluster.hosts || []), [cluster.hosts]);
+  const isSNOCluster = isSNO(cluster);
+
+  return (
+    <Alert
+      title={'Information & Troubleshooting'}
+      data-testid="alert-information-troubleshooting"
+      variant={AlertVariant.info}
+      isInline
+      actionLinks={
+        <>
+          <InfoLinkWithModal
+            linkText={'Minimum hardware requirements'}
+            modalTitle={'Minimum hardware requirements'}
+            linkId="alert-information-troubleshooting__link-hwrequirements"
+            modalId="alert-information-troubleshooting__modal-hwrequirements"
+            isInline
+          >
+            <HostRequirementsContent
+              clusterId={cluster.id}
+              isSingleNode={isSNOCluster}
+              isAddingHosts={isAddHostsCluster(cluster)}
+            />
+          </InfoLinkWithModal>
+          <HostsDiscoveryTroubleshootingInfoLinkWithModal isSingleNode={isSNOCluster} isInline />
+          {isVM && <VMRebootConfigurationLinkWithModal />}
+        </>
+      }
+    />
+  );
+};

package/lib/ocm/components/information/VMRebootConfigurationLinkWithModal.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { VMRebootConfigurationContent, useTranslation } from '../../../common';
+import { InfoLinkWithModal } from '../ui';
+
+export const VMRebootConfigurationLinkWithModal = () => {
+  const { t } = useTranslation();
+  const title = t('ai:Check your VM reboot configuration');
+  return (
+    <InfoLinkWithModal
+      linkText={title}
+      modalTitle={title}
+      modalVariant={'medium'}
+      isInline
+      linkId="check-reboot-configuration"
+      modalId="check-reboot-configuration"
+    >
+      <VMRebootConfigurationContent />
+    </InfoLinkWithModal>
+  );
+};

package/lib/ocm/components/information/index.tsx

@@ -0,0 +1 @@
+export * from './InformationAndAlerts';

package/lib/ocm/components/ui/InfoLinkWithModal.tsx

@@ -22,7 +22,7 @@ export interface InfoLinkWithModalProps {
   modalId?: string;
 }
 
-const InfoLinkWithModal = ({
+export const InfoLinkWithModal = ({
   linkText,
   infoCircleSize = 'sm',
   modalTitle,
@@ -68,5 +68,3 @@ const InfoLinkWithModal = ({
     </>
   );
 };
-
-export default InfoLinkWithModal;

package/lib/ocm/components/ui/index.ts

@@ -1 +1,4 @@
 export * from './AssistedUILibVersion';
+export * from './BackButton';
+export * from './OcmFormFields';
+export * from './InfoLinkWithModal';

package/lib/ocm/components/uiStates/ClusterLoading.tsx

@@ -0,0 +1,9 @@
+import { PageSection } from '@patternfly/react-core';
+import { LoadingState } from '../../../common';
+import React from 'react';
+
+export const ClusterLoading = () => (
+  <PageSection hasBodyWrapper={false} isFilled>
+    <LoadingState />
+  </PageSection>
+);