@flightctl/ui-components 0.8.0 → 0.9.0-rc1

package/dist/src/utils/status/integrity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"integrity.js","sourceRoot":"","sources":["../../../../src/utils/status/integrity.ts"],"names":[],"mappings":";;;AAEA,4CAAoG;AAG7F,MAAM,uBAAuB,GAAG,CAAC,CAAY,EAAkD,EAAE,CAAC;IACvG;QACE,EAAE,EAAE,wCAAgC,CAAC,2BAA2B;QAChE,KAAK,EAAE,CAAC,CAAC,QAAQ,CAAC;QAClB,KAAK,EAAE,SAAS;KACjB;IACD;QACE,EAAE,EAAE,wCAAgC,CAAC,gCAAgC;QACrE,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC;QACvB,KAAK,EAAE,SAAS;KACjB;IACD;QACE,EAAE,EAAE,wCAAgC,CAAC,4BAA4B;QACjE,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC;QACnB,KAAK,EAAE,SAAS;KACjB;IACD;QACE,EAAE,EAAE,wCAAgC,CAAC,6BAA6B;QAClE,KAAK,EAAE,CAAC,CAAC,UAAU,CAAC;QACpB,KAAK,EAAE,SAAS;KACjB;CACF,CAAC;AArBW,QAAA,uBAAuB,2BAqBlC;AAEK,MAAM,2BAA2B,GAAG,CACzC,MAAsC,EACJ,EAAE;IACpC,QAAQ,MAAM,EAAE,CAAC;QACf,KAAK,sCAA8B,CAAC,kCAAkC;YACpE,OAAO,wCAAgC,CAAC,6BAA6B,CAAC;QACxE,KAAK,sCAA8B,CAAC,gCAAgC;YAClE,OAAO,wCAAgC,CAAC,2BAA2B,CAAC;QACtE,KAAK,sCAA8B,CAAC,iCAAiC;YACnE,OAAO,wCAAgC,CAAC,4BAA4B,CAAC;QACvE,KAAK,sCAA8B,CAAC,qCAAqC;YACvE,OAAO,wCAAgC,CAAC,gCAAgC,CAAC;IAC7E,CAAC;AACH,CAAC,CAAC;AAbW,QAAA,2BAA2B,+BAatC;AAEW,QAAA,oBAAoB,GAAG,IAAA,+BAAuB,EAAC,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flightctl/ui-components",
-  "version": "0.8.0",
+  "version": "0.9.0-rc1",
   "description": "Components for Flightctl UI",
   "repository": "https://github.com/flightctl/flightctl-ui.git",
   "homepage": "https://github.com/flightctl/flightctl-ui.git",

package/src/components/Device/DeviceDetails/DeviceDetailsTabContent/StatusContent.tsx

@@ -15,6 +15,7 @@ import LabelWithHelperText from '../../../common/WithHelperText';
 import ApplicationSummaryStatus from '../../../Status/ApplicationSummaryStatus';
 import DeviceStatus from '../../../Status/DeviceStatus';
 import SystemUpdateStatus from '../../../Status/SystemUpdateStatus';
+import IntegrityStatus from '../../../Status/IntegrityStatus';
 
 const StatusContent = ({ device }: { device: Required<Device> }) => {
   const { t } = useTranslation();
@@ -59,6 +60,17 @@ const StatusContent = ({ device }: { device: Required<Device> }) => {
               <SystemUpdateStatus deviceStatus={device.status} />
             </DescriptionListDescription>
           </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>
+              <LabelWithHelperText
+                label={t('Integrity status')}
+                content={t('Indicates whether the device has been verified as secure and authentic.')}
+              />
+            </DescriptionListTerm>
+            <DescriptionListDescription>
+              <IntegrityStatus integrityStatus={device.status.integrity} />
+            </DescriptionListDescription>
+          </DescriptionListGroup>
           <DescriptionListGroup>
             <DescriptionListTerm>{t('Last seen')}</DescriptionListTerm>
             <DescriptionListDescription>{timeSinceText(t, device.status.lastSeen)}</DescriptionListDescription>

package/src/components/Device/DeviceDetails/DeviceFleet.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { Button, List, ListItem, Popover } from '@patternfly/react-core';
+import { Button, Icon, List, ListItem, Popover } from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/js/icons/outlined-question-circle-icon';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 
 import { Condition, ConditionType, Device } from '@flightctl/types';
 import { getDeviceFleet } from '../../../utils/devices';
@@ -10,44 +11,12 @@ import { Link, ROUTE } from '../../../hooks/useNavigate';
 
 import './DeviceFleet.css';
 
-const FleetLessDevice = ({ multipleOwnersCondition }: { multipleOwnersCondition?: Condition }) => {
+const FleetLessDevice = () => {
   const { t } = useTranslation();
-
-  let message = '';
-  let owners: string[] = [];
-  if (multipleOwnersCondition) {
-    message = t('Device is owned by more than one fleet');
-    owners = (multipleOwnersCondition.message || '').split(',');
-  } else {
-    message = t("Device labels don't match any fleet's selector labels");
-  }
-
-  const hasMultipleOwners = owners.length > 1;
-
   return (
     <div className="fctl-device-fleet">
-      {hasMultipleOwners ? t('Multiple owners') : t('None')}
-      <Popover
-        bodyContent={
-          <span>
-            {message}
-            {hasMultipleOwners && (
-              <span>
-                {': '}
-                <List>
-                  {owners.map((ownerFleet) => {
-                    return (
-                      <ListItem key={ownerFleet}>
-                        <Link to={{ route: ROUTE.FLEET_DETAILS, postfix: ownerFleet }}>{ownerFleet}</Link>
-                      </ListItem>
-                    );
-                  })}
-                </List>
-              </span>
-            )}
-          </span>
-        }
-      >
+      {t('None')}
+      <Popover bodyContent={<span>{t("Device labels don't match any fleet's selector labels")}</span>}>
         <Button
           isInline
           variant="plain"
@@ -59,18 +28,74 @@ const FleetLessDevice = ({ multipleOwnersCondition }: { multipleOwnersCondition?
   );
 };
 
+const MultipleDeviceOwners = ({ multipleOwnersCondition }: { multipleOwnersCondition: Condition }) => {
+  const { t } = useTranslation();
+
+  const owners: string[] = (multipleOwnersCondition.message || '').split(',');
+
+  const hasMultipleOwners = owners.length > 1;
+  if (!hasMultipleOwners) {
+    return null;
+  }
+
+  return (
+    <Popover
+      bodyContent={
+        <span>
+          {t('Device is owned by more than one fleet:')}
+          <span>
+            <List>
+              {owners.map((ownerFleet) => {
+                return (
+                  <ListItem key={ownerFleet}>
+                    <Link to={{ route: ROUTE.FLEET_DETAILS, postfix: ownerFleet }}>{ownerFleet}</Link>
+                  </ListItem>
+                );
+              })}
+            </List>
+          </span>
+        </span>
+      }
+    >
+      <Button
+        isInline
+        variant="plain"
+        icon={
+          <Icon status="warning">
+            <ExclamationTriangleIcon />
+          </Icon>
+        }
+        aria-label={t('Ownership information')}
+      />
+    </Popover>
+  );
+};
+
 const DeviceFleet = ({ device }: { device?: Device }) => {
+  const { t } = useTranslation();
   if (!device) {
     return '-';
   }
 
+  const multipleOwnersCondition = getCondition(device.status?.conditions, ConditionType.DeviceMultipleOwners);
+  let fleetNameEl: React.ReactNode = null;
   const fleetName = getDeviceFleet(device.metadata);
   if (fleetName) {
-    return <Link to={{ route: ROUTE.FLEET_DETAILS, postfix: fleetName }}>{fleetName}</Link>;
+    fleetNameEl = <Link to={{ route: ROUTE.FLEET_DETAILS, postfix: fleetName }}>{fleetName}</Link>;
+  } else if (multipleOwnersCondition) {
+    // Device has no owner set, but with the multiple owners condition. The warning icon should be displayed
+    fleetNameEl = t('None');
+  } else {
+    // Valid fleetless device
+    fleetNameEl = <FleetLessDevice />;
   }
 
-  const multipleOwnersCondition = getCondition(device.status?.conditions, ConditionType.DeviceMultipleOwners);
-  return <FleetLessDevice multipleOwnersCondition={multipleOwnersCondition} />;
+  return (
+    <>
+      {fleetNameEl}
+      {multipleOwnersCondition && <MultipleDeviceOwners multipleOwnersCondition={multipleOwnersCondition} />}
+    </>
+  );
 };
 
 export default DeviceFleet;

package/src/components/Events/useEvents.ts

@@ -43,19 +43,21 @@ export type EventSearchCriteria = Partial<ObjectReference> & {
 const getEventReasonTitles = (t: TFunction, kindType: string): Record<Event.reason, string> => {
   const params = { resourceType: kindType };
   return {
+    // Generic resource events
     [Event.reason.RESOURCE_CREATED]: t('{{ resourceType }} was created successfully', params),
     [Event.reason.RESOURCE_CREATION_FAILED]: t('{{ resourceType }} could not be created', params),
     [Event.reason.RESOURCE_DELETED]: t('{{ resourceType }} was deleted successfully', params),
     [Event.reason.RESOURCE_DELETION_FAILED]: t('{{ resourceType }} could not be deleted', params),
     [Event.reason.RESOURCE_UPDATED]: t('{{ resourceType }} was updated successfully', params),
     [Event.reason.RESOURCE_UPDATE_FAILED]: t('{{ resourceType }} could not be updated', params),
+    // Device events
     [Event.reason.DEVICE_DECOMMISSIONED]: t('Device decommissioned successfully'),
     [Event.reason.DEVICE_DECOMMISSION_FAILED]: t('Device could not be decommissioned'),
     [Event.reason.DEVICE_CPUNORMAL]: t('CPU utilization has returned to normal'),
     [Event.reason.DEVICE_CPUWARNING]: t('CPU utilization has reached a warning level'),
     [Event.reason.DEVICE_CPUCRITICAL]: t('CPU utilization has reached a critical level'),
     [Event.reason.DEVICE_MEMORY_NORMAL]: t('Memory utilization has returned to normal'),
-    [Event.reason.DEVICE_MEMORY_WARNING]: t('Memory utilization has reached a warning level '),
+    [Event.reason.DEVICE_MEMORY_WARNING]: t('Memory utilization has reached a warning level'),
     [Event.reason.DEVICE_MEMORY_CRITICAL]: t('Memory utilization has reached a critical level'),
     [Event.reason.DEVICE_DISK_NORMAL]: t('Disk utilization has returned to normal'),
     [Event.reason.DEVICE_DISK_WARNING]: t('Disk utilization has reached a warning level'),
@@ -65,9 +67,34 @@ const getEventReasonTitles = (t: TFunction, kindType: string): Record<Event.reas
     [Event.reason.DEVICE_APPLICATION_ERROR]: t('Some application workloads are in error state'),
     [Event.reason.DEVICE_CONNECTED]: t('Device reconnected'),
     [Event.reason.DEVICE_DISCONNECTED]: t('Device is disconnected'),
+    [Event.reason.DEVICE_IS_REBOOTING]: t('Device is rebooting'),
     [Event.reason.DEVICE_CONTENT_UP_TO_DATE]: t('Device returned to being up-to-date'),
     [Event.reason.DEVICE_CONTENT_UPDATING]: t('Device is updating'),
     [Event.reason.DEVICE_CONTENT_OUT_OF_DATE]: t('Device is out-of-date'),
+    [Event.reason.DEVICE_MULTIPLE_OWNERS_DETECTED]: t('Detected device ownership conflict'),
+    [Event.reason.DEVICE_MULTIPLE_OWNERS_RESOLVED]: t('Device ownership conflict has been resolved'),
+    [Event.reason.DEVICE_SPEC_VALID]: t('Device specification has returned to a valid state'),
+    [Event.reason.DEVICE_SPEC_INVALID]: t('Device specification is invalid'),
+    // Enrollment request events
+    [Event.reason.ENROLLMENT_REQUEST_APPROVED]: t('Enrollment request was approved'),
+    [Event.reason.ENROLLMENT_REQUEST_APPROVAL_FAILED]: t('Enrollment request approval failed'),
+    // Internal task events
+    [Event.reason.INTERNAL_TASK_FAILED]: t('Internal task failed'),
+    // Repository events
+    [Event.reason.REPOSITORY_ACCESSIBLE]: t('Repository is accessible'),
+    [Event.reason.REPOSITORY_INACCESSIBLE]: t('Repository is inaccessible'),
+    // Fleet events
+    [Event.reason.FLEET_ROLLOUT_STARTED]: t('Fleet rollout started'),
+    [Event.reason.FLEET_ROLLOUT_CREATED]: t('Fleet rollout created'),
+    [Event.reason.FLEET_ROLLOUT_BATCH_COMPLETED]: t('Fleet rollout batch completed'),
+    // Resource sync events
+    [Event.reason.RESOURCE_SYNC_SYNCED]: t('Resourcesync synchronization completed', params),
+    [Event.reason.RESOURCE_SYNC_SYNC_FAILED]: t('Resourcesync synchronization failed', params),
+    [Event.reason.RESOURCE_SYNC_PARSED]: t('Resourcesync parsed successfully', params),
+    [Event.reason.RESOURCE_SYNC_PARSING_FAILED]: t('Resourcesync parsing failed', params),
+    [Event.reason.RESOURCE_SYNC_ACCESSIBLE]: t('Resourcesync is accessible', params),
+    [Event.reason.RESOURCE_SYNC_INACCESSIBLE]: t('Resourcesync is not accessible', params),
+    [Event.reason.RESOURCE_SYNC_COMMIT_DETECTED]: t('Resourcesync new commit detected', params),
   };
 };
 

package/src/components/Fleet/FleetStatus.tsx

@@ -17,9 +17,6 @@ const FleetStatus = ({ fleet }: { fleet: Fleet }) => {
     case ConditionType.FleetValid:
       level = 'success';
       break;
-    case ConditionType.FleetOverlappingSelectors:
-      level = 'warning';
-      break;
     case 'SyncPending':
       level = 'info';
       break;

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

@@ -0,0 +1,182 @@
+import * as React from 'react';
+import {
+  Alert,
+  Card,
+  CardBody,
+  CardTitle,
+  Icon,
+  List,
+  ListItem,
+  Stack,
+  StackItem,
+  TextContent,
+} from '@patternfly/react-core';
+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 { useTranslation } from '../../../../hooks/useTranslation';
+import { getDateDisplay } from '../../../../utils/dates';
+import { getErrorMessage } from '../../../../utils/error';
+import ResourceLink from '../../../common/ResourceLink';
+
+import AlertsEmptyState from './AlertsEmptyState';
+
+// Define only the Event.reason values that correspond to alerts
+type AlertEventReason =
+  | Event.reason.DEVICE_APPLICATION_DEGRADED
+  | Event.reason.DEVICE_APPLICATION_ERROR
+  | Event.reason.DEVICE_APPLICATION_HEALTHY
+  | Event.reason.DEVICE_CPUCRITICAL
+  | Event.reason.DEVICE_CPUNORMAL
+  | Event.reason.DEVICE_CPUWARNING
+  | Event.reason.DEVICE_MEMORY_CRITICAL
+  | Event.reason.DEVICE_MEMORY_NORMAL
+  | Event.reason.DEVICE_MEMORY_WARNING
+  | Event.reason.DEVICE_DISK_CRITICAL
+  | Event.reason.DEVICE_DISK_NORMAL
+  | Event.reason.DEVICE_DISK_WARNING
+  | Event.reason.DEVICE_CONNECTED
+  | Event.reason.DEVICE_DISCONNECTED
+  | Event.reason.RESOURCE_DELETED
+  | Event.reason.DEVICE_DECOMMISSIONED;
+
+// Alert types that are processed by the alert exporter
+const getAlertTitles = (t: (key: string) => string): Record<AlertEventReason, string> => ({
+  // Application status alerts
+  [Event.reason.DEVICE_APPLICATION_DEGRADED]: t('Some application workloads are degraded'),
+  [Event.reason.DEVICE_APPLICATION_ERROR]: t('Some application workloads are in error state'),
+  [Event.reason.DEVICE_APPLICATION_HEALTHY]: t('All application workloads are healthy'),
+  // CPU alerts
+  [Event.reason.DEVICE_CPUCRITICAL]: t('CPU utilization has reached a critical level'),
+  [Event.reason.DEVICE_CPUNORMAL]: t('CPU utilization has returned to normal'),
+  [Event.reason.DEVICE_CPUWARNING]: t('CPU utilization has reached a warning level'),
+  // Memory alerts
+  [Event.reason.DEVICE_MEMORY_CRITICAL]: t('Memory utilization has reached a critical level'),
+  [Event.reason.DEVICE_MEMORY_NORMAL]: t('Memory utilization has returned to normal'),
+  [Event.reason.DEVICE_MEMORY_WARNING]: t('Memory utilization has reached a warning level'),
+  // Disk alerts
+  [Event.reason.DEVICE_DISK_CRITICAL]: t('Disk utilization has reached a critical level'),
+  [Event.reason.DEVICE_DISK_NORMAL]: t('Disk utilization has returned to normal'),
+  [Event.reason.DEVICE_DISK_WARNING]: t('Disk utilization has reached a warning level'),
+  // Other device-specific alerts
+  [Event.reason.DEVICE_CONNECTED]: t('Device reconnected'),
+  [Event.reason.DEVICE_DISCONNECTED]: t('Device is disconnected'),
+  [Event.reason.DEVICE_DECOMMISSIONED]: t('Device decommissioned successfully'),
+  // Resource lifecycle alerts
+  [Event.reason.RESOURCE_DELETED]: t('Resource was deleted successfully'),
+});
+
+const alertResourceKind: Record<AlertEventReason, ResourceKind | undefined> = {
+  // Application status alerts
+  [Event.reason.DEVICE_APPLICATION_DEGRADED]: ResourceKind.DEVICE,
+  [Event.reason.DEVICE_APPLICATION_ERROR]: ResourceKind.DEVICE,
+  [Event.reason.DEVICE_APPLICATION_HEALTHY]: ResourceKind.DEVICE,
+  // CPU alerts
+  [Event.reason.DEVICE_CPUCRITICAL]: ResourceKind.DEVICE,
+  [Event.reason.DEVICE_CPUNORMAL]: ResourceKind.DEVICE,
+  [Event.reason.DEVICE_CPUWARNING]: ResourceKind.DEVICE,
+  // Memory alerts
+  [Event.reason.DEVICE_MEMORY_CRITICAL]: ResourceKind.DEVICE,
+  [Event.reason.DEVICE_MEMORY_NORMAL]: ResourceKind.DEVICE,
+  [Event.reason.DEVICE_MEMORY_WARNING]: ResourceKind.DEVICE,
+  // Disk alerts
+  [Event.reason.DEVICE_DISK_CRITICAL]: ResourceKind.DEVICE,
+  [Event.reason.DEVICE_DISK_NORMAL]: ResourceKind.DEVICE,
+  [Event.reason.DEVICE_DISK_WARNING]: ResourceKind.DEVICE,
+  // Other device-specific alerts
+  [Event.reason.DEVICE_CONNECTED]: ResourceKind.DEVICE,
+  [Event.reason.DEVICE_DISCONNECTED]: ResourceKind.DEVICE,
+  [Event.reason.DEVICE_DECOMMISSIONED]: ResourceKind.DEVICE,
+  // Resource lifecycle alerts
+  [Event.reason.RESOURCE_DELETED]: undefined,
+};
+
+const resourceKindLabel = (t: TFunction, resourceKind: ResourceKind | undefined) => {
+  switch (resourceKind) {
+    case undefined:
+      return t('Resource');
+    case ResourceKind.DEVICE:
+      return t('Device');
+    case ResourceKind.ENROLLMENT_REQUEST:
+      return t('Enrollment request');
+    case ResourceKind.CERTIFICATE_SIGNING_REQUEST:
+      return t('Certificate signing request');
+    case ResourceKind.FLEET:
+      return t('Fleet');
+    case ResourceKind.REPOSITORY:
+      return t('Repository');
+    case ResourceKind.RESOURCE_SYNC:
+      return t('Resource sync');
+    case ResourceKind.TEMPLATE_VERSION:
+      return t('Template version');
+  }
+};
+
+const AlertsCard = () => {
+  const { t } = useTranslation();
+  const [alerts, isLoading, error] = useAlerts();
+  const alertTypes = React.useMemo(() => getAlertTitles(t), [t]);
+
+  let alertsBody: React.ReactNode;
+  if (isLoading) {
+    alertsBody = <CardBody>{t('Loading alerts...')}</CardBody>;
+  } else if (error) {
+    alertsBody = (
+      <CardBody>
+        <Alert variant="danger" title={t('Error loading alerts')}>
+          {getErrorMessage(error)}
+        </Alert>
+      </CardBody>
+    );
+  } else if (alerts.length === 0) {
+    alertsBody = <AlertsEmptyState />;
+  } else {
+    alertsBody = (
+      <List isPlain>
+        {alerts.map((alert) => {
+          const alertName = alert.labels.alertname as AlertEventReason;
+          const resourceKind = alertResourceKind[alertName];
+          const kindLabel = resourceKindLabel(t, resourceKind);
+          return (
+            <ListItem key={alert.fingerprint}>
+              <Stack>
+                <StackItem>
+                  <Icon status="danger" size="md">
+                    <ExclamationCircleIcon />
+                  </Icon>{' '}
+                  <strong>{alertTypes[alertName] || alertName}</strong>
+                </StackItem>
+                <StackItem>
+                  <TextContent>
+                    {kindLabel}{' '}
+                    {resourceKind === ResourceKind.DEVICE ? (
+                      <ResourceLink id={alert.labels.resource} />
+                    ) : (
+                      alert.labels.resource
+                    )}
+                  </TextContent>
+                </StackItem>
+                <StackItem>
+                  <TextContent>
+                    <small>{getDateDisplay(alert.startsAt || '')}</small>
+                  </TextContent>
+                </StackItem>
+              </Stack>
+            </ListItem>
+          );
+        })}
+      </List>
+    );
+  }
+
+  return (
+    <Card>
+      <CardTitle>{t('Alerts')}</CardTitle>
+      <CardBody>{alertsBody}</CardBody>
+    </Card>
+  );
+};
+
+export default AlertsCard;

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

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import {
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateHeader,
+  EmptyStateIcon,
+  EmptyStateVariant,
+  Text,
+} from '@patternfly/react-core';
+import { EmptyStateActions } from '@patternfly/react-core/dist/esm/components/EmptyState/EmptyStateActions';
+import { SearchIcon } from '@patternfly/react-icons/dist/js/icons/search-icon';
+
+import { useTranslation } from '../../../../hooks/useTranslation';
+import { Link, ROUTE } from '../../../../hooks/useNavigate';
+
+const AlertsEmptyState = () => {
+  const { t } = useTranslation();
+  return (
+    <EmptyState variant={EmptyStateVariant.sm}>
+      <EmptyStateHeader
+        titleText={t('There are no active Alerts at this time')}
+        headingLevel="h5"
+        icon={<EmptyStateIcon icon={SearchIcon} />}
+      />
+      <EmptyStateBody>
+        <Text>
+          {t('This area displays current notifications about your monitored devices and fleets.')}{' '}
+          {t('Alerts will appear here if an issue is detected.')}
+        </Text>
+      </EmptyStateBody>
+
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <Link to={ROUTE.DEVICES}>{t('View devices')}</Link>
+        </EmptyStateActions>
+      </EmptyStateFooter>
+    </EmptyState>
+  );
+};
+
+export default AlertsEmptyState;

package/src/components/OverviewPage/Overview.tsx

@@ -1,26 +1,40 @@
 import * as React from 'react';
 import { Grid, GridItem } from '@patternfly/react-core';
-import StatusCard from './Cards/Status/StatusCard';
-import TasksCard from './Cards/Tasks/TasksCard';
+
 import { useAccessReview } from '../../hooks/useAccessReview';
 import { RESOURCE, VERB } from '../../types/rbac';
 import PageWithPermissions from '../common/PageWithPermissions';
+import { useAlertsEnabled } from '../../hooks/useAlerts';
+
+import AlertsCard from './Cards/Alerts/AlertsCard';
+import StatusCard from './Cards/Status/StatusCard';
+import TasksCard from './Cards/Tasks/TasksCard';
 
 const Overview = () => {
   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}>
       <Grid hasGutter>
-        {canListDevices && (
-          <GridItem>
-            <StatusCard />
-          </GridItem>
-        )}
-        {canListErs && (
-          <GridItem md={6} lg={4}>
-            <TasksCard />
+        <GridItem md={alertsEnabled ? 9 : 12}>
+          <Grid hasGutter>
+            {canListDevices && (
+              <GridItem>
+                <StatusCard />
+              </GridItem>
+            )}
+            {canListErs && (
+              <GridItem md={9} lg={6}>
+                <TasksCard />
+              </GridItem>
+            )}
+          </Grid>
+        </GridItem>
+        {alertsEnabled && (
+          <GridItem md={3}>
+            <AlertsCard />
           </GridItem>
         )}
       </Grid>

package/src/components/Status/IntegrityStatus.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { TFunction } from 'react-i18next';
+
+import { Icon, Stack, StackItem } from '@patternfly/react-core';
+import {
+  DeviceIntegrityCheckStatusType,
+  DeviceIntegrityStatus,
+  DeviceIntegrityStatusSummaryType,
+} from '@flightctl/types';
+
+import { useTranslation } from '../../hooks/useTranslation';
+import { getIntegrityStatusItems, integrityCheckToSummaryType } from '../../utils/status/integrity';
+import { StatusItem, getDefaultStatusColor } from '../../utils/status/common';
+import { getDefaultStatusIcon } from '../../utils/status/common';
+import { getDateDisplay } from '../../utils/dates';
+import StatusDisplay from './StatusDisplay';
+
+const getIntegrityCheckItem = (
+  t: TFunction,
+  statusItems: StatusItem<DeviceIntegrityStatusSummaryType>[],
+  statusField: { status: DeviceIntegrityCheckStatusType; info?: string },
+  key: string,
+): React.ReactNode => {
+  const statusType = integrityCheckToSummaryType(statusField.status);
+  const levelItem = statusItems.find((statusItem) => statusItem.id === statusType) || {
+    id: DeviceIntegrityStatusSummaryType.DeviceIntegrityStatusUnknown,
+    label: t('Unknown'),
+    level: 'unknown' as const,
+  };
+
+  const IconComponent = levelItem.customIcon || getDefaultStatusIcon(levelItem.level);
+  const iconStatus = levelItem.level === 'unknown' ? undefined : levelItem.level;
+
+  const label =
+    key === 'device-identity'
+      ? t('Device identity - {{ status }}', { status: levelItem.label })
+      : t('TPM - {{ status }}', { status: levelItem.label });
+
+  return (
+    <StackItem key={key}>
+      <Icon
+        status={iconStatus}
+        style={{ '--pf-v5-c-icon__content--Color': getDefaultStatusColor(levelItem.level) } as React.CSSProperties}
+      >
+        <IconComponent />
+      </Icon>{' '}
+      {label}
+      {statusField.info ? `: ${statusField.info}` : ''}
+    </StackItem>
+  );
+};
+
+export const getIntegrityExtraDetails = (
+  t: TFunction,
+  integrityStatus: DeviceIntegrityStatus,
+  statusItems: StatusItem<DeviceIntegrityStatusSummaryType>[],
+): React.ReactNode | undefined => {
+  if (!integrityStatus) {
+    return undefined;
+  }
+
+  const extraDetails: React.ReactNode[] = [];
+
+  const deviceIdentity = integrityStatus.deviceIdentity;
+  if (deviceIdentity) {
+    extraDetails.push(getIntegrityCheckItem(t, statusItems, deviceIdentity, 'device-identity'));
+  }
+
+  const tpm = integrityStatus.tpm;
+  if (tpm) {
+    extraDetails.push(getIntegrityCheckItem(t, statusItems, tpm, 'tpm'));
+  }
+
+  return extraDetails.length > 0 ? <Stack hasGutter>{extraDetails}</Stack> : undefined;
+};
+
+const IntegrityStatus = ({ integrityStatus }: { integrityStatus?: DeviceIntegrityStatus }) => {
+  const { t } = useTranslation();
+
+  // Show unknown status if we don't receive any information
+  if (!integrityStatus) {
+    return <StatusDisplay />;
+  }
+
+  const statusItems = getIntegrityStatusItems(t);
+  const item = statusItems.find((statusItem) => {
+    return statusItem.id === (integrityStatus.status || DeviceIntegrityStatusSummaryType.DeviceIntegrityStatusUnknown);
+  });
+
+  let message: React.ReactNode = integrityStatus.info || '';
+
+  const extraDetails = item ? getIntegrityExtraDetails(t, integrityStatus, statusItems) : undefined;
+  if (extraDetails) {
+    message = (
+      <Stack hasGutter>
+        {integrityStatus.info && <StackItem>{integrityStatus.info}</StackItem>}
+        <StackItem>{extraDetails}</StackItem>
+        {integrityStatus.lastVerified && (
+          <StackItem>
+            <small>
+              {t('Last verification at: {{ timestamp }}', { timestamp: getDateDisplay(integrityStatus.lastVerified) })}
+            </small>
+          </StackItem>
+        )}
+      </Stack>
+    );
+  }
+  return <StatusDisplay item={item} message={message} />;
+};
+
+export default IntegrityStatus;

package/src/components/Status/StatusDisplay.tsx

@@ -68,7 +68,7 @@ type StatusDisplayProps = {
     level: StatusLevel;
     customIcon?: React.ComponentClass<SVGIconProps>;
   };
-  message?: string;
+  message?: React.ReactNode;
 };
 
 const StatusDisplay = ({ item, message }: StatusDisplayProps) => {