@flightctl/ui-components 0.9.2 → 0.10.0-rc1

package/src/components/Fleet/FleetDetails/FleetDetailsPage.tsx

@@ -13,8 +13,9 @@ import NavItem from '../../NavItem/NavItem';
 import DetailsPage from '../../DetailsPage/DetailsPage';
 import DetailsPageActions from '../../DetailsPage/DetailsPageActions';
 import DeleteFleetModal from '../DeleteFleetModal/DeleteFleetModal';
-import FleetDetailsContent from './FleetDetailsContent';
 import YamlEditor from '../../common/CodeEditor/YamlEditor';
+import FleetDetailsContent from './FleetDetailsContent';
+import FleetRestoreBanner from './FleetRestoreBanner';
 
 const FleetDetailPage = () => {
   const { t } = useTranslation();
@@ -45,6 +46,7 @@ const FleetDetailPage = () => {
       resourceLink={ROUTE.FLEETS}
       resourceType="Fleets"
       resourceTypeLabel={t('Fleets')}
+      banner={<FleetRestoreBanner fleet={fleet} refetch={refetch} />}
       nav={
         <Nav variant="tertiary">
           <NavList>
@@ -98,10 +100,7 @@ const FleetDetailPage = () => {
           <Routes>
             <Route index element={<Navigate to="details" replace />} />
             <Route path="details" element={<FleetDetailsContent fleet={fleet} />} />
-            <Route
-              path="yaml"
-              element={<YamlEditor filename={fleet.metadata.name || 'fleet'} apiObj={fleet} refetch={refetch} />}
-            />
+            <Route path="yaml" element={<YamlEditor filename={fleetId} apiObj={fleet} refetch={refetch} />} />
           </Routes>
           {isDeleteModalOpen && (
             <DeleteFleetModal

package/src/components/Fleet/FleetDetails/FleetDevicesCharts.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { Flex, FlexItem } from '@patternfly/react-core';
 
-import { DevicesSummary } from '@flightctl/types';
+import { DeviceSummaryStatusType, DevicesSummary } from '@flightctl/types';
 import { useTranslation } from '../../../hooks/useTranslation';
-import { FilterSearchParams, getDeviceStatusItems } from '../../../utils/status/devices';
+import { FilterSearchParams, getOverviewDeviceStatusItems } from '../../../utils/status/devices';
 import { getSystemUpdateStatusItems } from '../../../utils/status/system';
 import {
   getApplicationStatusHelperText,
@@ -19,6 +19,11 @@ interface FleetDevicesChartsProps {
   devicesSummary: DevicesSummary;
 }
 
+const systemRestoreStatuses = [
+  DeviceSummaryStatusType.DeviceSummaryStatusAwaitingReconnect,
+  DeviceSummaryStatusType.DeviceSummaryStatusConflictPaused,
+];
+
 const getBaseFleetQuery = (fleetId: string) => {
   const baseQuery = new URLSearchParams();
   baseQuery.set(FilterSearchParams.Fleet, fleetId);
@@ -78,7 +83,8 @@ const DevicesByDeviceStatusChart = ({
 }) => {
   const { t } = useTranslation();
 
-  const statusItems = getDeviceStatusItems(t);
+  const excludeStatuses = systemRestoreStatuses.filter((status) => !deviceStatus[status]);
+  const statusItems = getOverviewDeviceStatusItems(t, excludeStatuses);
 
   const deviceStatusData = toChartData(
     deviceStatus,

package/src/components/Fleet/FleetDetails/FleetRestoreBanner.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { Trans } from 'react-i18next';
+import { DeviceSummaryStatusType, Fleet } from '@flightctl/types';
+
+import { SystemRestoreBanners } from '../../SystemRestore/SystemRestoreBanners';
+import { fromAPILabel, labelToExactApiMatchString } from '../../../utils/labels';
+import { useTranslation } from '../../../hooks/useTranslation';
+
+const FleetRestoreBanner = ({ fleet, refetch }: { fleet?: Fleet; refetch: VoidFunction }) => {
+  const { t } = useTranslation();
+  if (!fleet) {
+    return null;
+  }
+
+  const fleetId = fleet.metadata.name as string;
+
+  const fleetDeviceStatuses = fleet?.status?.devicesSummary?.summaryStatus;
+  const suspendedDevicesCountNum =
+    fleetDeviceStatuses?.[DeviceSummaryStatusType.DeviceSummaryStatusConflictPaused] || 0;
+  const suspendedDevicesCount = suspendedDevicesCountNum.toString();
+
+  return (
+    <SystemRestoreBanners
+      mode="fleet"
+      summaryStatus={fleetDeviceStatuses}
+      resumeAction={{
+        actionText: t('Resume all'),
+        title: (
+          <Trans t={t} count={suspendedDevicesCountNum}>
+            You are about to resume all<strong>{suspendedDevicesCount}</strong> suspended devices in{' '}
+            <strong>{fleetId}</strong>
+          </Trans>
+        ),
+        requestSelector: {
+          labelSelector: fromAPILabel(fleet.spec.selector?.matchLabels || {})
+            .map(labelToExactApiMatchString)
+            .join(','),
+        },
+      }}
+      onResumeComplete={refetch}
+      className="pf-v5-u-pt-0 pf-v5-u-px-lg"
+    />
+  );
+};
+
+export default FleetRestoreBanner;

package/src/components/Fleet/FleetsPage.tsx

@@ -37,6 +37,7 @@ import ButtonWithPermissions from '../common/ButtonWithPermissions';
 import { RESOURCE, VERB } from '../../types/rbac';
 import PageWithPermissions from '../common/PageWithPermissions';
 import { useFleetImportAccessReview } from '../../hooks/useFleetImportAccessReview';
+import { GlobalSystemRestoreBanners } from '../SystemRestore/SystemRestoreBanners';
 
 const FleetPageActions = ({ createText }: { createText?: string }) => {
   const { t } = useTranslation();
@@ -122,6 +123,7 @@ const FleetTable = () => {
 
   return (
     <ListPageBody error={error} loading={isLoading}>
+      <GlobalSystemRestoreBanners onResumeComplete={refetch} />
       <Toolbar inset={{ default: 'insetNone' }}>
         <ToolbarContent>
           <ToolbarGroup>

package/src/components/ListPage/ListPageActions.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TFunction } from 'react-i18next';
+import { TFunction, Trans } from 'react-i18next';
 
 import { DeviceDecommissionTargetType } from '@flightctl/types';
 import { ListAction, ListActionProps, ListActionResult } from './types';
@@ -8,9 +8,10 @@ import { useTranslation } from '../../hooks/useTranslation';
 import { getDisabledTooltipProps } from '../../utils/tooltip';
 import DeleteModal from '../modals/DeleteModal/DeleteModal';
 import DecommissionModal from '../modals/DecommissionModal/DecommissionModal';
+import ResumeDevicesModal from '../modals/ResumeDevicesModal/ResumeDevicesModal';
 
 type DeleteResourceType = 'EnrollmentRequest' | 'ResourceSync' | 'Device';
-type DecommissionResourceType = 'Device';
+type DeviceOnlyResourceType = 'Device';
 
 type ResourceType = 'Device' | 'EnrollmentRequest' | 'ResourceSync';
 
@@ -70,7 +71,7 @@ export const useDeleteListAction = ({
 
 export const useDecommissionListAction = ({
   onConfirm,
-}: ListActionProps<DecommissionResourceType, { target: DeviceDecommissionTargetType }>): ListActionResult => {
+}: ListActionProps<DeviceOnlyResourceType, { target: DeviceDecommissionTargetType }>): ListActionResult => {
   const { t } = useTranslation();
   const [decommissionDeviceId, setDecommissionDeviceId] = React.useState<string>();
 
@@ -100,3 +101,45 @@ export const useDecommissionListAction = ({
 
   return { action: decommissionAction, modal: decommissionModal };
 };
+
+export const useResumeListAction = (onResumeComplete?: VoidFunction): ListActionResult => {
+  const { t } = useTranslation();
+  const [deviceId, setDeviceId] = React.useState<string>();
+  const [deviceName, setDeviceName] = React.useState<string>();
+
+  const resumeAction: ListAction = ({ resourceId, resourceName, disabledReason }) => {
+    const popperProps = getDisabledTooltipProps(disabledReason);
+    return {
+      title: t('Resume device'),
+      ...popperProps,
+      onClick: () => {
+        setDeviceId(resourceId);
+        setDeviceName(resourceName || resourceId);
+      },
+    };
+  };
+
+  const onClose = (hasResumed?: boolean) => {
+    setDeviceId(undefined);
+    setDeviceName(undefined);
+    if (hasResumed) {
+      onResumeComplete?.();
+    }
+  };
+
+  const resumeModal = deviceId && (
+    <ResumeDevicesModal
+      mode="device"
+      title={
+        <Trans t={t}>
+          You are about to resume device <strong>{deviceName}</strong>
+        </Trans>
+      }
+      selector={{ fieldSelector: `metadata.name=${deviceId}` }}
+      expectedCount={1}
+      onClose={onClose}
+    />
+  );
+
+  return { action: resumeAction, modal: resumeModal };
+};

package/src/components/Masthead/CommandLineToolsPage.tsx

@@ -31,9 +31,6 @@ type CommandLineToolsContentProps = {
 
 type CommandLineArtifact = CliArtifactsResponse['artifacts'][0];
 
-// "Not implemented" response from the UI Proxy when artifact functionality is disabled
-const cliArtifactsDisabledError = 'Error 501';
-
 const getArtifactUrl = (baseUrl: string, artifact: CommandLineArtifact) => {
   const normalizedBaseUrl = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
   return `${normalizedBaseUrl}/${artifact.arch}/${artifact.os}/${artifact.filename}`;
@@ -103,7 +100,8 @@ const CommandLineToolsContent = ({
 
 const CommandLineToolsPage = () => {
   const { t } = useTranslation();
-  const { getCliArtifacts, settings } = useAppContext();
+  const { fetch, settings } = useAppContext();
+  const proxyFetch = fetch.proxyFetch;
 
   const [loading, setLoading] = React.useState<boolean>(true);
   const [loadError, setLoadError] = React.useState<string>();
@@ -113,23 +111,28 @@ const CommandLineToolsPage = () => {
   React.useEffect(() => {
     const getLinks = async () => {
       try {
-        if (getCliArtifacts) {
-          const apiResponse = await getCliArtifacts();
-          setCliArtifactsResponse(apiResponse);
+        const response = await proxyFetch('cli-artifacts', {
+          method: 'GET',
+        });
+        if (!response.ok) {
+          if (response.status === 501) {
+            // Response that indicatest that the feature is disabled
+            setArtifactsEnabled(false);
+          } else {
+            setLoadError(getErrorMessage(response.statusText));
+          }
+          return;
         }
+        const apiResponse = (await response.json()) as CliArtifactsResponse;
+        setCliArtifactsResponse(apiResponse);
       } catch (e) {
-        const msg = getErrorMessage(e);
-        if (msg.includes(cliArtifactsDisabledError)) {
-          setArtifactsEnabled(false);
-        } else {
-          setLoadError(msg);
-        }
+        setArtifactsEnabled(false);
       } finally {
         setLoading(false);
       }
     };
     void getLinks();
-  }, [getCliArtifacts]);
+  }, [proxyFetch]);
 
   const productName = settings.isRHEM ? t('Red Hat Edge Manager') : t('Flight Control');
 

package/src/components/OverviewPage/Cards/Alerts/AlertsCard.tsx

@@ -15,7 +15,8 @@ import { TFunction } from 'react-i18next';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 
 import { Event, ResourceKind } from '@flightctl/types';
-import { useAlerts } from '../../../../hooks/useAlerts';
+import { AlertManagerAlert } from '../../../../types/extraTypes';
+import { useFetchPeriodically } from '../../../../hooks/useFetchPeriodically';
 import { useTranslation } from '../../../../hooks/useTranslation';
 import { getDateDisplay } from '../../../../utils/dates';
 import { getErrorMessage } from '../../../../utils/error';
@@ -23,6 +24,8 @@ import ResourceLink from '../../../common/ResourceLink';
 
 import AlertsEmptyState from './AlertsEmptyState';
 
+const ALERTS_TIMEOUT = 20000; // 20 seconds
+
 // Define only the Event.reason values that correspond to alerts
 type AlertEventReason =
   | Event.reason.DEVICE_APPLICATION_DEGRADED
@@ -113,10 +116,21 @@ const resourceKindLabel = (t: TFunction, resourceKind: ResourceKind | undefined)
       return t('Template version');
   }
 };
+const getAlertTitle = (alert: AlertManagerAlert, defaultTitle: string) => {
+  if (alert.annotations.summary) {
+    return alert.annotations.summary;
+  }
+  return defaultTitle;
+};
 
 const AlertsCard = () => {
   const { t } = useTranslation();
-  const [alerts, isLoading, error] = useAlerts();
+
+  const [alerts, isLoading, error] = useFetchPeriodically<AlertManagerAlert[]>({
+    endpoint: 'alerts',
+    timeout: ALERTS_TIMEOUT,
+  });
+
   const alertTypes = React.useMemo(() => getAlertTitles(t), [t]);
 
   let alertsBody: React.ReactNode;
@@ -130,12 +144,12 @@ const AlertsCard = () => {
         </Alert>
       </CardBody>
     );
-  } else if (alerts.length === 0) {
+  } else if (alerts?.length === 0) {
     alertsBody = <AlertsEmptyState />;
   } else {
     alertsBody = (
       <List isPlain>
-        {alerts.map((alert) => {
+        {alerts?.map((alert) => {
           const alertName = alert.labels.alertname as AlertEventReason;
           const resourceKind = alertResourceKind[alertName];
           const kindLabel = resourceKindLabel(t, resourceKind);
@@ -146,7 +160,7 @@ const AlertsCard = () => {
                   <Icon status="danger" size="md">
                     <ExclamationCircleIcon />
                   </Icon>{' '}
-                  <strong>{alertTypes[alertName] || alertName}</strong>
+                  <strong>{getAlertTitle(alert, alertTypes[alertName] || alertName)}</strong>
                 </StackItem>
                 <StackItem>
                   <TextContent>

package/src/components/OverviewPage/Cards/Status/DeviceStatusChart.tsx

@@ -5,11 +5,16 @@ import { FlightCtlLabel } from '../../../../types/extraTypes';
 
 import { useTranslation } from '../../../../hooks/useTranslation';
 import { getDeviceStatusHelperText } from '../../../Status/utils';
-import { getDeviceStatusItems } from '../../../../utils/status/devices';
+import { getOverviewDeviceStatusItems } from '../../../../utils/status/devices';
 import { FilterSearchParams } from '../../../../utils/status/devices';
 import { toOverviewChartData } from './utils';
 import DonutChart from '../../../charts/DonutChart';
 
+const systemRestoreStatuses = [
+  DeviceSummaryStatusType.DeviceSummaryStatusAwaitingReconnect,
+  DeviceSummaryStatusType.DeviceSummaryStatusConflictPaused,
+];
+
 const DeviceStatusChart = ({
   deviceStatus,
   labels,
@@ -21,7 +26,8 @@ const DeviceStatusChart = ({
 }) => {
   const { t } = useTranslation();
 
-  const statusItems = getDeviceStatusItems(t);
+  const excludeStatuses = systemRestoreStatuses.filter((status) => !deviceStatus[status]);
+  const statusItems = getOverviewDeviceStatusItems(t, excludeStatuses);
 
   const devStatusData = toOverviewChartData<DeviceSummaryStatusType>(
     deviceStatus,

package/src/components/OverviewPage/Overview.tsx

@@ -2,21 +2,24 @@ import * as React from 'react';
 import { Grid, GridItem } from '@patternfly/react-core';
 
 import { useAccessReview } from '../../hooks/useAccessReview';
+import { useAlertsEnabled } from '../../hooks/useAlertsEnabled';
 import { RESOURCE, VERB } from '../../types/rbac';
 import PageWithPermissions from '../common/PageWithPermissions';
-import { useAlertsEnabled } from '../../hooks/useAlerts';
+import { GlobalSystemRestoreBanners } from '../SystemRestore/SystemRestoreBanners';
 
 import AlertsCard from './Cards/Alerts/AlertsCard';
 import StatusCard from './Cards/Status/StatusCard';
 import TasksCard from './Cards/Tasks/TasksCard';
 
 const Overview = () => {
+  const alertsEnabled = useAlertsEnabled();
   const [canListDevices, devicesLoading] = useAccessReview(RESOURCE.DEVICE, VERB.LIST);
   const [canListErs, erLoading] = useAccessReview(RESOURCE.ENROLLMENT_REQUEST, VERB.LIST);
-  const alertsEnabled = useAlertsEnabled();
 
   return (
     <PageWithPermissions allowed={canListDevices || canListErs} loading={devicesLoading || erLoading}>
+      <GlobalSystemRestoreBanners className="pf-v5-u-py-0" />
+
       <Grid hasGutter>
         <GridItem md={alertsEnabled ? 9 : 12}>
           <Grid hasGutter>

package/src/components/Status/StatusDisplay.tsx

@@ -14,11 +14,29 @@ type StatusLabelProps = {
   messageTitle?: string;
   level: StatusLevel;
   customIcon?: React.ComponentClass<SVGIconProps>;
+  customColor?: string;
 };
 
-export const StatusDisplayContent = ({ label, messageTitle, message, level, customIcon }: StatusLabelProps) => {
-  const iconStatus = level === 'unknown' ? undefined : level;
+export const StatusDisplayContent = ({
+  label,
+  messageTitle,
+  message,
+  level,
+  customIcon,
+  customColor,
+}: StatusLabelProps) => {
+  const overrideStatus = level === 'unknown' || (level === 'custom' && customColor);
   const IconComponent = customIcon || getDefaultStatusIcon(level);
+  const iconColor = customColor || getDefaultStatusColor(level);
+
+  const icon = (
+    <Icon
+      status={overrideStatus ? undefined : level}
+      style={{ '--pf-v5-c-icon__content--Color': iconColor } as React.CSSProperties}
+    >
+      <IconComponent />
+    </Icon>
+  );
 
   if (message) {
     return (
@@ -29,18 +47,7 @@ export const StatusDisplayContent = ({ label, messageTitle, message, level, cust
         className="fctl-status-display-content__popover"
         hasAutoWidth={false}
       >
-        <Button
-          variant="link"
-          isInline
-          icon={
-            <Icon
-              status={iconStatus}
-              style={{ '--pf-v5-c-icon__content--Color': getDefaultStatusColor(level) } as React.CSSProperties}
-            >
-              <IconComponent />
-            </Icon>
-          }
-        >
+        <Button variant="link" isInline icon={icon}>
           {label}
         </Button>
       </Popover>
@@ -49,14 +56,7 @@ export const StatusDisplayContent = ({ label, messageTitle, message, level, cust
 
   return (
     <Flex className="ftcl_status-label">
-      <FlexItem>
-        <Icon
-          status={iconStatus}
-          style={{ '--pf-v5-c-icon__content--Color': getDefaultStatusColor(level) } as React.CSSProperties}
-        >
-          <IconComponent />
-        </Icon>
-      </FlexItem>
+      <FlexItem>{icon}</FlexItem>
       <FlexItem>{label}</FlexItem>
     </Flex>
   );
@@ -67,6 +67,7 @@ type StatusDisplayProps = {
     label: string;
     level: StatusLevel;
     customIcon?: React.ComponentClass<SVGIconProps>;
+    customColor?: string;
   };
   message?: React.ReactNode;
 };
@@ -77,7 +78,15 @@ const StatusDisplay = ({ item, message }: StatusDisplayProps) => {
     return <StatusDisplayContent level="unknown" label={t('Unknown')} />;
   }
 
-  return <StatusDisplayContent level={item.level} customIcon={item.customIcon} label={item.label} message={message} />;
+  return (
+    <StatusDisplayContent
+      level={item.level}
+      customIcon={item.customIcon}
+      customColor={item.customColor}
+      label={item.label}
+      message={message}
+    />
+  );
 };
 
 export default StatusDisplay;

package/src/components/SystemRestore/PendingSyncDevicesAlert.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Alert } from '@patternfly/react-core';
+
+import { useAppContext } from '../../hooks/useAppContext';
+import { useTranslation } from '../../hooks/useTranslation';
+
+interface PendingSyncDevicesAlertProps {
+  forSingleDevice?: boolean;
+}
+
+const getBrand = (isRHEM: boolean | undefined) => (isRHEM ? 'RHEM' : 'Flight Control');
+
+export const PendingSyncDevicesAlert = ({ forSingleDevice }: PendingSyncDevicesAlertProps) => {
+  const { t } = useTranslation();
+  const { settings } = useAppContext();
+
+  const getMessage = () => {
+    if (forSingleDevice) {
+      return t(
+        '{{brand}} is waiting for the device to connect and report its status. It will report a ʼPending syncʼ status until it is able to reconnect. If it has configuration conflicts, it will report a ʼSuspendedʼ status and require manual action to resume.',
+        { brand: getBrand(settings.isRHEM) },
+      );
+    }
+
+    return t(
+      '{{brand}} is waiting for devices to connect and report their status. Devices will report a ʼPending syncʼ status until they are able to connect. Devices with configuration conflicts will report a ʼSuspendedʼ status and require manual action to resume.',
+      { brand: getBrand(settings.isRHEM) },
+    );
+  };
+
+  return (
+    <Alert variant="warning" isInline title={t('System recovery complete')}>
+      {getMessage()}
+    </Alert>
+  );
+};

package/src/components/SystemRestore/SuspendedDevicesAlert.tsx

@@ -0,0 +1,144 @@
+import * as React from 'react';
+import { Trans } from 'react-i18next';
+import { Alert, AlertActionLink, Stack, StackItem } from '@patternfly/react-core';
+
+import { useTranslation } from '../../hooks/useTranslation';
+import MassResumeDevicesModal from '../modals/massModals/ResumeDevicesModal/MassResumeDevicesModal';
+import ResumeDevicesModal from '../modals/ResumeDevicesModal/ResumeDevicesModal';
+import { DeviceResumeRequest } from '@flightctl/types';
+
+export type ResumeMode = 'global' | 'device' | 'fleet';
+
+type ModalType = 'mass' | 'confirm';
+
+interface SuspendedDevicesAlertProps {
+  mode: ResumeMode;
+  suspendedCount?: number;
+  extraAction?: {
+    actionText: string;
+    title: React.ReactNode;
+    requestSelector: DeviceResumeRequest;
+  };
+  onResumeComplete?: VoidFunction;
+}
+
+const SuspendedDevicesAlert = ({
+  mode,
+  suspendedCount = 0,
+  extraAction,
+  onResumeComplete,
+}: SuspendedDevicesAlertProps) => {
+  const { t } = useTranslation();
+  const [isMassModalOpen, setIsMassModalOpen] = React.useState(false);
+  const [isConfirmModalOpen, setIsConfirmModalOpen] = React.useState(false);
+
+  const openResumeModal = React.useCallback((modalType: ModalType) => {
+    if (modalType === 'mass') {
+      setIsMassModalOpen(true);
+    } else {
+      setIsConfirmModalOpen(true);
+    }
+  }, []);
+
+  const closeResumeModal = React.useCallback(
+    (modalType: ModalType, hasResumed?: boolean) => {
+      if (hasResumed) {
+        onResumeComplete?.();
+      }
+      if (modalType === 'mass') {
+        setIsMassModalOpen(false);
+      } else {
+        setIsConfirmModalOpen(false);
+      }
+    },
+    [onResumeComplete],
+  );
+
+  const getMainMessage = () => {
+    const suspendedCountStr = suspendedCount.toString();
+    switch (mode) {
+      case 'device':
+        return t(
+          "This device is suspended because its local configuration is newer than the server's record. It will not receive updates until it is resumed.",
+        );
+      case 'fleet':
+        return (
+          <Trans t={t} count={suspendedCount}>
+            <strong>{suspendedCountStr}</strong> <strong>devices in this fleet</strong> are suspended because their
+            local configuration is newer than the server&apos;s record. These devices will not receive updates until
+            they are resumed.
+          </Trans>
+        );
+      default:
+        return (
+          <Trans t={t} count={suspendedCount}>
+            <strong>{suspendedCountStr}</strong> devices are suspended because their local configuration is newer than
+            the server&apos;s record. These devices will not receive updates until they are resumed.
+          </Trans>
+        );
+    }
+  };
+
+  const getActions = () => {
+    const actionButtons: React.ReactElement[] = [];
+
+    if (extraAction) {
+      actionButtons.push(
+        <AlertActionLink key="extra-resume-action" onClick={() => openResumeModal('confirm')}>
+          {extraAction.actionText}
+        </AlertActionLink>,
+      );
+    }
+
+    actionButtons.push(
+      <AlertActionLink key="resume-suspended-devices" onClick={() => openResumeModal('mass')}>
+        {t('Resume suspended devices')}
+      </AlertActionLink>,
+    );
+
+    return actionButtons;
+  };
+
+  return (
+    <>
+      <Alert variant="danger" isInline title={t('Suspended devices detected')} actionLinks={getActions()}>
+        <Stack hasGutter>
+          <StackItem>{getMainMessage()}</StackItem>
+          <StackItem>
+            {mode === 'fleet' ? (
+              <Trans t={t}>
+                <strong>Warning:</strong> Please review this fleet&apos;s configuration before taking action. Resuming a
+                device will cause it to apply the current specification, which may be older than what is on the device.
+              </Trans>
+            ) : (
+              <Trans t={t}>
+                <strong>Warning:</strong> Please review device configurations before taking action. Resuming a device
+                will cause it to apply the current specification, which may be older than what is on the device.
+              </Trans>
+            )}
+          </StackItem>
+        </Stack>
+      </Alert>
+      {isMassModalOpen && (
+        <MassResumeDevicesModal
+          onClose={(hasResumed) => {
+            closeResumeModal('mass', hasResumed);
+          }}
+        />
+      )}
+      {isConfirmModalOpen && extraAction && (
+        <ResumeDevicesModal
+          mode={mode === 'global' ? 'device' : mode}
+          title={extraAction.title}
+          selector={extraAction.requestSelector}
+          expectedCount={suspendedCount}
+          onClose={(hasResumed) => {
+            closeResumeModal('confirm', hasResumed);
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export default SuspendedDevicesAlert;

package/src/components/SystemRestore/SystemRestoreBanners.css

@@ -0,0 +1,6 @@
+.fctl-system-restore-banners {
+  padding: 1rem 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}