@flightctl/ui-components 0.5.1 → 0.6.0-rc2

package/dist/src/utils/time.js

@@ -0,0 +1,134 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStartGraceDuration = exports.getUpdateCronExpression = exports.getWeekDays = exports.getTime = exports.getEndTime = exports.durationToMinutes = exports.Weekday = exports.UpdateScheduleMode = exports.localDeviceTimezone = exports.defaultEndTime = exports.defaultStartTime = exports.formatted24HourClockRegExp = exports.valid24HourClockRegExp = exports.getSelectableTimes = exports.formatTimePart = void 0;
+const formatTimePart = (val) => val.toString().padStart(2, '0');
+exports.formatTimePart = formatTimePart;
+const getSelectableTimes = () => {
+    const times = {};
+    for (let hour = 0; hour < 24; hour++) {
+        for (let minute = 0; minute < 60; minute += 15) {
+            const timeString = `${(0, exports.formatTimePart)(hour)}:${(0, exports.formatTimePart)(minute)}`;
+            times[timeString] = timeString;
+        }
+    }
+    return times;
+};
+exports.getSelectableTimes = getSelectableTimes;
+exports.valid24HourClockRegExp = /^([01]?[0-9]|2[0-3]):?([0-5][0-9])$/;
+exports.formatted24HourClockRegExp = /^([01][0-9]|2[0-3]):([0-5][0-9])$/;
+exports.defaultStartTime = '00:00';
+exports.defaultEndTime = '23:59';
+exports.localDeviceTimezone = 'Local'; // matches the API's default value
+const defaultUpdateDuration = '30m';
+var UpdateScheduleMode;
+(function (UpdateScheduleMode) {
+    UpdateScheduleMode["Weekly"] = "weekly";
+    UpdateScheduleMode["Daily"] = "daily";
+})(UpdateScheduleMode || (exports.UpdateScheduleMode = UpdateScheduleMode = {}));
+var Weekday;
+(function (Weekday) {
+    Weekday[Weekday["Sunday"] = 0] = "Sunday";
+    Weekday[Weekday["Monday"] = 1] = "Monday";
+    Weekday[Weekday["Tuesday"] = 2] = "Tuesday";
+    Weekday[Weekday["Wednesday"] = 3] = "Wednesday";
+    Weekday[Weekday["Thursday"] = 4] = "Thursday";
+    Weekday[Weekday["Friday"] = 5] = "Friday";
+    Weekday[Weekday["Saturday"] = 6] = "Saturday";
+})(Weekday || (exports.Weekday = Weekday = {}));
+var CronParts;
+(function (CronParts) {
+    CronParts[CronParts["Minutes"] = 0] = "Minutes";
+    CronParts[CronParts["Hours"] = 1] = "Hours";
+    CronParts[CronParts["Days"] = 2] = "Days";
+    CronParts[CronParts["Months"] = 3] = "Months";
+    CronParts[CronParts["WeekDays"] = 4] = "WeekDays";
+})(CronParts || (CronParts = {}));
+const durationToMinutes = (duration) => {
+    const timeoutVal = Number(duration.replace(/[shm]/, ''));
+    if (!timeoutVal) {
+        return 0;
+    }
+    if (duration.includes('s')) {
+        return Math.round(timeoutVal / 60);
+    }
+    if (duration.includes('h')) {
+        return Math.round(timeoutVal * 60);
+    }
+    return timeoutVal;
+};
+exports.durationToMinutes = durationToMinutes;
+const getEndTime = (startTime, duration) => {
+    if (startTime === exports.defaultStartTime && !duration) {
+        return exports.defaultEndTime;
+    }
+    const [hours, minutes] = startTime.split(':').map(Number);
+    const durationMinutes = (0, exports.durationToMinutes)(duration || defaultUpdateDuration);
+    const totalMinutes = hours * 60 + minutes + durationMinutes;
+    const newHours = Math.floor(totalMinutes / 60) % 24;
+    const newMinutes = totalMinutes % 60;
+    return `${(0, exports.formatTimePart)(newHours)}:${(0, exports.formatTimePart)(newMinutes)}`;
+};
+exports.getEndTime = getEndTime;
+// Cron expression example: "0 4 * * 2,5"
+const getTime = (cronExp) => {
+    const tokens = (cronExp || '').split(' ').filter(Boolean);
+    if (tokens.length !== 5) {
+        return exports.defaultStartTime;
+    }
+    const hours = tokens[CronParts.Hours];
+    const minutes = tokens[CronParts.Minutes];
+    // Ensure hours and minutes are valid numbers (eg. fails when specifying ranges or steps)
+    if (Number.isNaN(Number(hours)) || Number.isNaN(Number(minutes))) {
+        return exports.defaultStartTime;
+    }
+    return `${(0, exports.formatTimePart)(hours)}:${(0, exports.formatTimePart)(minutes)}`;
+};
+exports.getTime = getTime;
+const getMinuteDifference = (timeA, timeB) => {
+    const [aHours, aMinutes] = timeA.split(':').map(Number);
+    const [bHours, bMinutes] = timeB.split(':').map(Number);
+    const totalMinutesA = aHours * 60 + aMinutes;
+    const totalMinutesB = bHours * 60 + bMinutes;
+    let difference = totalMinutesB - totalMinutesA;
+    // Adjust for crossing midnight by adding 24 hours if A is after B
+    if (difference < 0) {
+        difference += 24 * 60;
+    }
+    return difference;
+};
+const getWeekDays = (cronExp) => {
+    const defaultDays = [true, true, true, true, true, true, true];
+    let selectedDays = defaultDays;
+    if (cronExp) {
+        const weekDayExp = cronExp.split(' ')[CronParts.WeekDays];
+        if (weekDayExp !== '*') {
+            const days = weekDayExp.split(',').map(Number);
+            selectedDays = defaultDays.map((_, index) => {
+                return days.includes(index);
+            });
+        }
+    }
+    return {
+        allSelected: selectedDays.every(Boolean),
+        selectedDays,
+    };
+};
+exports.getWeekDays = getWeekDays;
+const getUpdateCronExpression = (startTime, scheduleMode, weekDays) => {
+    const [hours, minutes] = startTime.split(':').map(Number);
+    const weekDayVals = weekDays
+        .map((isActive, index) => {
+        return isActive || scheduleMode === UpdateScheduleMode.Daily ? index : null;
+    })
+        .filter((num) => num !== null);
+    return `${minutes} ${hours} * * ${weekDayVals.join(',')}`;
+};
+exports.getUpdateCronExpression = getUpdateCronExpression;
+const getStartGraceDuration = (startTime, endTime) => {
+    if (startTime && startTime === endTime) {
+        return '24h';
+    }
+    return `${getMinuteDifference(startTime, endTime)}m`;
+};
+exports.getStartGraceDuration = getStartGraceDuration;
+//# sourceMappingURL=time.js.map

package/dist/src/utils/time.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.js","sourceRoot":"","sources":["../../../src/utils/time.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flightctl/ui-components",
-  "version": "0.5.1",
+  "version": "0.6.0-rc2",
   "description": "Components for Flightctl UI",
   "repository": "https://github.com/flightctl/flightctl-ui.git",
   "homepage": "https://github.com/flightctl/flightctl-ui.git",
@@ -22,9 +22,6 @@
     "build": "tsc --build && npm run copy:css",
     "copy:css": "rsync -Rurv --include '*/' --include '*.css' --exclude '*' src  dist",
     "dev": "tsc -w",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
     "ts-node": "ts-node -O '{\"module\":\"commonjs\"}'"
   },
   "devDependencies": {

package/src/components/DetailsPage/DetailsPage.tsx

@@ -21,7 +21,8 @@ import './DetailsPage.css';
 
 export type DetailsPageProps = {
   id: string;
-  title?: string;
+  breadcrumbTitle?: string;
+  title?: React.ReactNode;
   children: React.ReactNode;
   error: unknown;
   loading: boolean;
@@ -32,8 +33,9 @@ export type DetailsPageProps = {
   nav?: React.ReactNode;
 };
 
-const DetailsPage: React.FC<DetailsPageProps> = ({
+const DetailsPage = ({
   id,
+  breadcrumbTitle,
   title,
   children,
   error,
@@ -43,7 +45,7 @@ const DetailsPage: React.FC<DetailsPageProps> = ({
   resourceTypeLabel,
   actions,
   nav,
-}) => {
+}: DetailsPageProps) => {
   const { t } = useTranslation();
   let content = children;
   if (error) {
@@ -71,7 +73,7 @@ const DetailsPage: React.FC<DetailsPageProps> = ({
           <BreadcrumbItem>
             <Link to={resourceLink}>{resourceTypeLabel}</Link>
           </BreadcrumbItem>
-          <BreadcrumbItem isActive>{title || id}</BreadcrumbItem>
+          <BreadcrumbItem isActive>{breadcrumbTitle || id}</BreadcrumbItem>
         </Breadcrumb>
       </PageSection>
       <PageSection variant="light">

package/src/components/DetailsPage/Tables/ApplicationsTable.tsx

@@ -104,20 +104,23 @@ const ApplicationsTable = ({
           if (!appDetails) {
             // It's an app or a systemd unit which has not been reported yet
             const appAddedTime = addedSystemdUnitDates[appName] || 0;
-            // For apps there are is no spinner since we don't when the app was added to the spec
+            // For apps there is no spinner since we don't know when the app was added to the spec
             const showSpinner = !isApp && Date.now() - appAddedTime < DELETE_SYSTED_TIMEOUT;
             return (
               <Tr key={appName} className="applications-table__row">
                 <Td dataLabel={t('Name')}>{appName}</Td>
-                <Td dataLabel={t('Status')} colSpan={3}>
+
+                <Td dataLabel={t('Status')} colSpan={showSpinner ? 3 : 1}>
                   {showSpinner ? (
                     <>
                       <Spinner size="sm" /> {t('Waiting for service to be reported...')}
                     </>
                   ) : (
-                    t('Information not available yet')
+                    '-'
                   )}
                 </Td>
+                {!showSpinner && <Td dataLabel={t('Ready')}>-</Td>}
+                {!showSpinner && <Td dataLabel={t('Restarts')}>-</Td>}
                 <Td dataLabel={t('Type')}>
                   {isApp ? (
                     <>{t('App')}</>

package/src/components/Device/AddDeviceModal/AddDeviceModal.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import { Button, List, ListComponent, ListItem, Modal, OrderType, Stack, StackItem } from '@patternfly/react-core';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
 import { useTranslation } from '../../../hooks/useTranslation';
+import { ADDING_NEW_DEVICES_LINK } from '../../../links';
+import LearnMoreLink from '../../common/LearnMoreLink';
 
 const AddDeviceModal = ({ onClose }: { onClose: VoidFunction }) => {
   const { t } = useTranslation();
 
   return (
-    <Modal variant="medium" title={t('Add devices')} onClose={onClose} isOpen>
+    <Modal variant="small" title={t('Add devices')} onClose={onClose} isOpen>
       <Stack hasGutter>
         <StackItem>{t('You can add devices following these steps:')}</StackItem>
         <StackItem>
@@ -20,17 +21,7 @@ const AddDeviceModal = ({ onClose }: { onClose: VoidFunction }) => {
           </List>
         </StackItem>
         <StackItem>
-          <Button
-            component="a"
-            variant="link"
-            isInline
-            href="https://github.com/flightctl/flightctl/blob/main/docs/user/getting-started.md#building-a-bootable-container-image-including-the-flight-control-agent"
-            target="_blank"
-            icon={<ExternalLinkAltIcon />}
-            iconPosition="end"
-          >
-            {t('Learn more about adding devices')}{' '}
-          </Button>
+          <LearnMoreLink link={ADDING_NEW_DEVICES_LINK} text={t('Learn more about adding devices')} />
         </StackItem>
         <StackItem className="pf-v5-u-mt-md">
           <Button variant="primary" isInline onClick={onClose}>

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

@@ -0,0 +1,180 @@
+import * as React from 'react';
+import { Alert, Button, Grid, GridItem, Icon } from '@patternfly/react-core';
+import { PencilAltIcon } from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon';
+import { Formik, useField } from 'formik';
+import * as Yup from 'yup';
+
+import { Device, PatchRequest } from '@flightctl/types';
+import { useFetch } from '../../../hooks/useFetch';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { getErrorMessage } from '../../../utils/error';
+import RichValidationTextField from '../../form/RichValidationTextField';
+import { getLabelValueValidations, validKubernetesLabelValue } from '../../form/validations';
+
+type DeviceAliasEditProps = { deviceId: string; hasLabels: boolean; alias?: string; onAliasEdited: VoidFunction };
+type DeviceAliasEditValues = { alias: string };
+
+const DeviceAliasInputField = ({
+  alias,
+  textInputRef,
+  toggleIsEditing,
+  onSubmit,
+}: {
+  alias?: string;
+  textInputRef: React.RefObject<HTMLInputElement>;
+  toggleIsEditing: VoidFunction;
+  onSubmit: ({ alias }: DeviceAliasEditValues) => void;
+}) => {
+  const { t } = useTranslation();
+
+  const [{ value }, , { setTouched, setValue }] = useField<string>('alias');
+
+  const onAliasKeyDown = React.useCallback(
+    async (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter' || e.key === 'Tab') {
+        e.preventDefault();
+        const newErrors = await setTouched(true, true);
+        if (Object.keys(newErrors || {}).length === 0) {
+          void onSubmit({ alias: (e.target as HTMLInputElement).value });
+        }
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        setValue(alias || t('Untitled'));
+        toggleIsEditing();
+      }
+    },
+    [t, onSubmit, alias, setValue, setTouched, toggleIsEditing],
+  );
+
+  return (
+    <RichValidationTextField
+      fieldName="alias"
+      ref={textInputRef}
+      validations={getLabelValueValidations(t)}
+      placeholder={alias || t('Untitled')}
+      onKeyDown={onAliasKeyDown}
+      onBlur={async () => {
+        const newErrors = await setTouched(true, true);
+        if (Object.keys(newErrors || {}).length === 0) {
+          void onSubmit({ alias: value });
+        }
+      }}
+    />
+  );
+};
+
+const DeviceAliasEdit = ({ deviceId, hasLabels, alias: originalAlias = '', onAliasEdited }: DeviceAliasEditProps) => {
+  const { t } = useTranslation();
+  const { patch } = useFetch();
+
+  const textInputRef = React.useRef<HTMLInputElement>(null);
+
+  const [isEditing, setIsEditing] = React.useState<boolean>();
+  const [isSubmitting, setIsSubmitting] = React.useState<boolean>();
+  const [submitError, setSubmitError] = React.useState<string>();
+
+  const toggleIsEditing = React.useCallback(() => {
+    setIsEditing((wasEditing) => !wasEditing);
+  }, []);
+
+  React.useEffect(() => {
+    // Focus the field after it became editable - before that, the input is not rendered
+    if (isEditing) {
+      textInputRef?.current?.focus();
+    }
+  }, [isEditing]);
+
+  const onSubmit = React.useCallback(
+    async ({ alias }: DeviceAliasEditValues) => {
+      if (alias === originalAlias || (!hasLabels && !alias)) {
+        toggleIsEditing();
+        return;
+      }
+
+      const req: PatchRequest = [];
+      if (!hasLabels) {
+        req.push({
+          path: '/metadata/labels',
+          op: 'add',
+          value: {
+            alias,
+          },
+        });
+      } else if (alias) {
+        req.push({
+          path: '/metadata/labels/alias',
+          op: 'replace',
+          value: alias,
+        });
+      } else {
+        req.push({
+          path: '/metadata/labels/alias',
+          op: 'remove',
+        });
+      }
+
+      try {
+        setSubmitError(undefined);
+        setIsSubmitting(true);
+        await patch<Device>(`devices/${deviceId}`, req);
+        onAliasEdited();
+        toggleIsEditing();
+      } catch (e) {
+        setSubmitError(getErrorMessage(e));
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [deviceId, originalAlias, hasLabels, onAliasEdited, patch, toggleIsEditing],
+  );
+
+  return (
+    <Grid hasGutter>
+      <Formik<DeviceAliasEditValues>
+        initialValues={{
+          alias: originalAlias,
+        }}
+        validationSchema={Yup.object({
+          alias: validKubernetesLabelValue(t, { isRequired: false, fieldName: t('Alias') }),
+        })}
+        validateOnBlur
+        onSubmit={onSubmit}
+      >
+        <GridItem md={6}>
+          {isEditing ? (
+            <DeviceAliasInputField
+              alias={originalAlias}
+              textInputRef={textInputRef}
+              onSubmit={onSubmit}
+              toggleIsEditing={toggleIsEditing}
+            />
+          ) : (
+            <>
+              {originalAlias || t('Untitled')}
+              <Button
+                variant="plain"
+                aria-label={t('Edit alias')}
+                onClick={toggleIsEditing}
+                isDisabled={isSubmitting}
+                icon={
+                  <Icon size="md">
+                    <PencilAltIcon />
+                  </Icon>
+                }
+              />
+            </>
+          )}
+        </GridItem>
+      </Formik>
+      <GridItem md={8}>
+        {submitError && (
+          <Alert isInline variant="danger" title={t('Device alias could not be updated')}>
+            {getErrorMessage(submitError)}
+          </Alert>
+        )}
+      </GridItem>
+    </Grid>
+  );
+};
+
+export default DeviceAliasEdit;

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

@@ -9,6 +9,7 @@ import { getDeviceFleet } from '../../../utils/devices';
 import SystemdUnitsModal from '../SystemdUnitsModal/SystemdUnitsModal';
 import ApplicationsTable from '../../DetailsPage/Tables/ApplicationsTable';
 import DetailsPageCard, { DetailsPageCardBody } from '../../DetailsPage/DetailsPageCard';
+import { isImageAppProvider } from '../../../types/deviceSpec';
 
 type DeviceDetailsTabProps = {
   device: Required<Device>;
@@ -40,7 +41,13 @@ const DeviceApplications = ({ device, refetch, canEdit }: React.PropsWithChildre
 
   const isManagedDevice = !!getDeviceFleet(device.metadata);
   const trackedSystemdUnits = device.spec?.systemd?.matchPatterns || [];
-  const specApps = device.spec?.applications?.map((app) => app.name || app.image) || [];
+  const specApps =
+    device.spec?.applications?.map((app) => {
+      if (isImageAppProvider(app)) {
+        return app.name || app.image;
+      }
+      return app.name as string;
+    }) || [];
   const apps = device.status.applications; // includes available systemdUnits
 
   const deleteSystemdUnit = isManagedDevice

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

@@ -18,6 +18,7 @@ import { getEditDisabledReason, isDeviceEnrolled } from '../../../utils/devices'
 import { RESOURCE, VERB } from '../../../types/rbac';
 import { useAccessReview } from '../../../hooks/useAccessReview';
 import PageWithPermissions from '../../common/PageWithPermissions';
+import DeviceAliasEdit from './DeviceAliasEdit';
 
 type DeviceDetailsPageProps = React.PropsWithChildren<{ hideTerminal?: boolean }>;
 
@@ -33,8 +34,9 @@ const DeviceDetailsPage = ({ children, hideTerminal }: DeviceDetailsPageProps) =
 
   const [showDebugInfo, setShowDebugInfo] = React.useState<boolean>(false);
 
-  const deviceAlias = device?.metadata.labels?.alias || deviceId;
-  const isEnrolled = device && isDeviceEnrolled(device);
+  const deviceLabels = device?.metadata.labels;
+  const deviceAlias = deviceLabels?.alias;
+  const isEnrolled = !device || isDeviceEnrolled(device);
 
   const [hasTerminalAccess] = useAccessReview(RESOURCE.DEVICE_CONSOLE, VERB.GET);
   const [canDelete] = useAccessReview(RESOURCE.DEVICE, VERB.DELETE);
@@ -48,7 +50,7 @@ const DeviceDetailsPage = ({ children, hideTerminal }: DeviceDetailsPageProps) =
       await remove(`devices/${deviceId}`);
       navigate(ROUTE.DEVICES);
     },
-    resourceName: deviceAlias,
+    resourceName: deviceAlias || deviceId,
     resourceType: 'device',
     buttonLabel: isEnrolled ? undefined : t('Delete forever'),
   });
@@ -70,7 +72,21 @@ const DeviceDetailsPage = ({ children, hideTerminal }: DeviceDetailsPageProps) =
       loading={loading}
       error={error}
       id={deviceId}
-      title={deviceAlias}
+      breadcrumbTitle={deviceAlias}
+      title={
+        canEdit ? (
+          /* key={deviceAlias} is needed for the input field to be initialized with the alias as its value */
+          <DeviceAliasEdit
+            key={deviceAlias}
+            deviceId={deviceId}
+            alias={deviceAlias}
+            hasLabels={!!deviceLabels}
+            onAliasEdited={refetch}
+          />
+        ) : (
+          deviceAlias
+        )
+      }
       resourceLink={ROUTE.DEVICES}
       resourceType="Devices"
       resourceTypeLabel={t('Devices')}
@@ -106,7 +122,7 @@ const DeviceDetailsPage = ({ children, hideTerminal }: DeviceDetailsPageProps) =
           </DetailsPageActions>
         ) : (
           canDelete && (
-            <Button aria-label={t('Delete device forever')} variant="danger">
+            <Button component="a" aria-label={t('Delete device forever')} variant="danger" tabIndex={0}>
               {deleteAction}
             </Button>
           )

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

@@ -19,7 +19,7 @@ import { timeSinceText } from '../../../utils/dates';
 import { useTranslation } from '../../../hooks/useTranslation';
 import EditLabelsForm, { ViewLabels } from '../../modals/EditLabelsModal/EditLabelsForm';
 import ResourceLink from '../../common/ResourceLink';
-import WithHelperText from '../../common/WithHelperText';
+import LabelWithHelperText from '../../common/WithHelperText';
 import FlightControlDescriptionList from '../../common/FlightCtlDescriptionList';
 import DetailsPageCard, { DetailsPageCardBody } from '../../DetailsPage/DetailsPageCard';
 import RepositorySourceList from '../../Repository/RepositoryDetails/RepositorySourceList';
@@ -137,12 +137,11 @@ const DecommissionedDeviceDetails = ({ device, children }: React.PropsWithChildr
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>
-                  <WithHelperText
+                  <LabelWithHelperText
+                    label={t('Status')}
                     content={t(
                       'Indicates whether the device is available to be managed and assigned to do work or is moving to an end-of-life state.',
                     )}
-                    ariaLabel={t('Status')}
-                    showLabel
                   />
                 </DescriptionListTerm>
                 <DescriptionListDescription>

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

@@ -11,7 +11,7 @@ import { timeSinceText } from '../../../../utils/dates';
 import { useTranslation } from '../../../../hooks/useTranslation';
 import DetailsPageCard, { DetailsPageCardBody } from '../../../DetailsPage/DetailsPageCard';
 import FlightControlDescriptionList from '../../../common/FlightCtlDescriptionList';
-import WithHelperText from '../../../common/WithHelperText';
+import LabelWithHelperText from '../../../common/WithHelperText';
 import ApplicationSummaryStatus from '../../../Status/ApplicationSummaryStatus';
 import DeviceStatus from '../../../Status/DeviceStatus';
 import SystemUpdateStatus from '../../../Status/SystemUpdateStatus';
@@ -26,10 +26,9 @@ const StatusContent = ({ device }: { device: Required<Device> }) => {
         <FlightControlDescriptionList columnModifier={{ default: '3Col' }}>
           <DescriptionListGroup>
             <DescriptionListTerm>
-              <WithHelperText
+              <LabelWithHelperText
+                label={t('Application status')}
                 content={t('Indicates the overall status of application workloads on the device.')}
-                ariaLabel={t('Application status')}
-                showLabel
               />
             </DescriptionListTerm>
             <DescriptionListDescription>
@@ -38,10 +37,9 @@ const StatusContent = ({ device }: { device: Required<Device> }) => {
           </DescriptionListGroup>
           <DescriptionListGroup>
             <DescriptionListTerm>
-              <WithHelperText
+              <LabelWithHelperText
+                label={t('Device status')}
                 content={t('Indicates the overall status of the device hardware and operating system.')}
-                ariaLabel={t('Device status')}
-                showLabel
               />{' '}
             </DescriptionListTerm>
             <DescriptionListDescription>
@@ -50,12 +48,11 @@ const StatusContent = ({ device }: { device: Required<Device> }) => {
           </DescriptionListGroup>
           <DescriptionListGroup>
             <DescriptionListTerm>
-              <WithHelperText
+              <LabelWithHelperText
+                label={t('Update status')}
                 content={t(
                   'Indicates whether a system is running the latest target configuration or is updating towards it.',
                 )}
-                ariaLabel={t('Update status')}
-                showLabel
               />
             </DescriptionListTerm>
             <DescriptionListDescription>

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

@@ -23,19 +23,19 @@ const SystemResourcesContent = ({ device }: { device: Required<Device> }) => {
           <DescriptionListGroup>
             <DescriptionListTerm>{t('CPU pressure')}</DescriptionListTerm>
             <DescriptionListDescription>
-              <DeviceResourceStatus device={device} monitorType="cpu" />
+              <DeviceResourceStatus device={device} monitorType="CPU" />
             </DescriptionListDescription>
           </DescriptionListGroup>
           <DescriptionListGroup>
             <DescriptionListTerm>{t('Disk pressure')}</DescriptionListTerm>
             <DescriptionListDescription>
-              <DeviceResourceStatus device={device} monitorType="disk" />
+              <DeviceResourceStatus device={device} monitorType="Disk" />
             </DescriptionListDescription>
           </DescriptionListGroup>
           <DescriptionListGroup>
             <DescriptionListTerm>{t('Memory pressure')}</DescriptionListTerm>
             <DescriptionListDescription>
-              <DeviceResourceStatus device={device} monitorType="memory" />
+              <DeviceResourceStatus device={device} monitorType="Memory" />
             </DescriptionListDescription>
           </DescriptionListGroup>
         </FlightControlDescriptionList>