@flightctl/ui-components 0.4.0 → 0.5.0-rc2

package/src/components/Fleet/CreateFleet/steps/UpdateConfirmChangesModal.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { Button, Modal, Stack, StackItem } from '@patternfly/react-core';
+import { TFunction } from 'react-i18next';
+
+import { useTranslation } from '../../../../hooks/useTranslation';
+
+export type StepSetting = 'all-settings' | 'rollout-policies' | 'disruption-budget';
+
+type UpdateConfirmChangesModalProps = {
+  setting: StepSetting;
+  onClose: (doSwitch: boolean) => void;
+};
+
+const getModalContent = (setting: StepSetting, t: TFunction) => {
+  switch (setting) {
+    case 'all-settings':
+      return {
+        title: t('Switch to basic update configuration?'),
+        primaryAction: t('Switch to basic configurations'),
+        question: t('Are you sure you want to switch to basic update configurations?'),
+        result: t('If you confirm, all advanced configurations will be lost.'),
+      };
+    case 'rollout-policies': {
+      const title = t("Don't use rollout policies configurations");
+      return {
+        title,
+        primaryAction: title,
+        question: t('Are you sure you want to remove the rollout policies configurations?'),
+        result: t('If you confirm, all rollout policies configurations will be lost.'),
+      };
+    }
+
+    case 'disruption-budget': {
+      const title = t("Don't use disruption budget configurations");
+      return {
+        title,
+        primaryAction: title,
+        question: t('Are you sure you want to remove the disruption budget configurations?'),
+        result: t('If you confirm, all disruption budget configurations will be lost.'),
+      };
+    }
+  }
+};
+
+const UpdateConfirmChangesModal = ({ setting, onClose }: UpdateConfirmChangesModalProps) => {
+  const { t } = useTranslation();
+
+  const modalContentProps = getModalContent(setting, t);
+
+  return (
+    <Modal
+      variant={setting === 'disruption-budget' ? 'medium' : 'small'}
+      title={modalContentProps.title}
+      titleIconVariant="warning"
+      isOpen
+    >
+      <Stack hasGutter>
+        <StackItem>{modalContentProps.question}</StackItem>
+        <StackItem>{modalContentProps.result}</StackItem>
+        <StackItem>
+          <Button
+            key="confirm"
+            variant="primary"
+            tabIndex={0}
+            onClick={() => {
+              onClose(true);
+            }}
+          >
+            {modalContentProps.primaryAction}
+          </Button>
+          <Button
+            key="cancel"
+            variant="link"
+            tabIndex={0}
+            onClick={() => {
+              onClose(false);
+            }}
+          >
+            {t('Cancel')}
+          </Button>
+        </StackItem>
+      </Stack>
+    </Modal>
+  );
+};
+
+export default UpdateConfirmChangesModal;

package/src/components/Fleet/CreateFleet/steps/UpdatePolicyStep.tsx

@@ -0,0 +1,155 @@
+import * as React from 'react';
+import { Alert, Checkbox, FormGroup, FormSection, Grid } from '@patternfly/react-core';
+import { FormikErrors, useFormikContext } from 'formik';
+
+import { FleetFormValues } from '../types';
+import { DEFAULT_BACKEND_UPDATE_TIMEOUT_MINUTES, getEmptyInitializedBatch } from '../fleetSpecUtils';
+import { useTranslation } from '../../../../hooks/useTranslation';
+import WithHelperText from '../../../common/WithHelperText';
+
+import FlightCtlForm from '../../../form/FlightCtlForm';
+import UpdateStepRolloutPolicy from './UpdateStepRolloutPolicy';
+import UpdateStepDisruptionBudget from './UpdateStepDisruptionBudget';
+import UpdateConfirmChangesModal, { StepSetting } from './UpdateConfirmChangesModal';
+
+export const updatePolicyStepId = 'update-policy';
+
+export const isUpdatePolicyStepValid = (errors: FormikErrors<FleetFormValues>) =>
+  !errors.rolloutPolicy && !errors.disruptionBudget;
+
+const UpdatePolicyStep = () => {
+  const { t } = useTranslation();
+
+  const {
+    values: { rolloutPolicy, disruptionBudget },
+    setFieldValue,
+  } = useFormikContext<FleetFormValues>();
+
+  const [forceShowAdvancedMode, setForceShowAdvancedMode] = React.useState<boolean>(false);
+  const [alertSwitchToBasic, setAlertSwitchToBasic] = React.useState<StepSetting>();
+  const hasAdvancedMode = rolloutPolicy.isAdvanced || disruptionBudget.isAdvanced;
+
+  const onSettingsChange = (setting: StepSetting, toAdvanced: boolean) => {
+    if (toAdvanced) {
+      switch (setting) {
+        case 'all-settings':
+          setForceShowAdvancedMode(true);
+          break;
+        case 'rollout-policies':
+          setFieldValue('rolloutPolicy.isAdvanced', true);
+          onChangePolicyType(true);
+          break;
+        case 'disruption-budget':
+          setFieldValue('disruptionBudget.isAdvanced', true);
+          onChangeDisruptionBudget(true);
+          break;
+      }
+    } else {
+      setAlertSwitchToBasic(setting);
+    }
+  };
+
+  const onChangePolicyType = async (toAdvanced: boolean) => {
+    await setFieldValue('rolloutPolicy', {
+      isAdvanced: toAdvanced,
+      batches: toAdvanced ? [getEmptyInitializedBatch()] : [],
+      updateTimeout: DEFAULT_BACKEND_UPDATE_TIMEOUT_MINUTES,
+    });
+  };
+
+  const onChangeDisruptionBudget = async (toAdvanced: boolean) => {
+    if (!toAdvanced) {
+      await setFieldValue('disruptionBudget', {
+        isAdvanced: false,
+        groupBy: [],
+        minAvailable: '',
+        maxUnavailable: '',
+      });
+    }
+  };
+
+  const onModalClose = async (doSwitch: boolean) => {
+    setAlertSwitchToBasic(undefined);
+    if (!doSwitch) {
+      return;
+    }
+
+    // When the user confirms switching a setting to its basic mode
+    switch (alertSwitchToBasic) {
+      case 'all-settings':
+        await onChangePolicyType(false);
+        await onChangeDisruptionBudget(false);
+        break;
+      case 'rollout-policies':
+        void onChangePolicyType(false);
+        break;
+      case 'disruption-budget':
+        void onChangeDisruptionBudget(false);
+        break;
+    }
+    setForceShowAdvancedMode(false);
+  };
+
+  return (
+    <Grid lg={8}>
+      <FlightCtlForm>
+        <FormGroup>
+          <Checkbox
+            label={t('Use basic configurations')}
+            isChecked={!hasAdvancedMode && !forceShowAdvancedMode}
+            id="all-settings"
+            onChange={(_ev: React.FormEvent<HTMLInputElement>, toBasic: boolean) => {
+              onSettingsChange('all-settings', !toBasic);
+            }}
+          />
+        </FormGroup>
+        {hasAdvancedMode || forceShowAdvancedMode ? (
+          <FormSection title={t('Advanced configurations')} titleElement="h1" className="pf-v5-u-mt-sm">
+            {/* Rollout policies */}
+            <Checkbox
+              label={
+                <WithHelperText
+                  showLabel
+                  ariaLabel={t('Set rollout policies')}
+                  content={t('Rollout policies allow you to control the order of updates for the fleet devices.')}
+                />
+              }
+              isChecked={rolloutPolicy.isAdvanced}
+              id="advRolloutPolicy"
+              onChange={(_ev: React.FormEvent<HTMLInputElement>, toAdvanced: boolean) =>
+                onSettingsChange('rollout-policies', toAdvanced)
+              }
+            />
+            {rolloutPolicy.isAdvanced && <UpdateStepRolloutPolicy />}
+
+            {/* Disruption budget */}
+            <Checkbox
+              label={
+                <WithHelperText
+                  showLabel
+                  ariaLabel={t('Set disruption budget')}
+                  content={t(
+                    'Disruption budget allows you to limit the number of similar devices that may be updating simultaneously.',
+                  )}
+                />
+              }
+              isChecked={disruptionBudget.isAdvanced}
+              id="advDisruptionBudget"
+              onChange={(_ev: React.FormEvent<HTMLInputElement>, toAdvanced: boolean) =>
+                onSettingsChange('disruption-budget', toAdvanced)
+              }
+            />
+            {disruptionBudget.isAdvanced && <UpdateStepDisruptionBudget />}
+          </FormSection>
+        ) : (
+          <Alert isInline variant="info" title={t('Default update policy')}>
+            {t('All the devices that are part of this fleet will receive updates as soon as they are available.')}
+          </Alert>
+        )}
+        {alertSwitchToBasic && <UpdateConfirmChangesModal setting={alertSwitchToBasic} onClose={onModalClose} />}
+      </FlightCtlForm>
+    </Grid>
+  );
+};
+
+export default UpdatePolicyStep;

package/src/components/Fleet/CreateFleet/steps/UpdateStepDisruptionBudget.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { useField } from 'formik';
+import { Flex, FlexItem, FormGroup, Stack, StackItem } from '@patternfly/react-core';
+
+import { useTranslation } from '../../../../hooks/useTranslation';
+import NumberField from '../../../form/NumberField';
+import TextListField from '../../../form/TextListField';
+import ErrorHelperText from '../../../form/FieldHelperText';
+import WithHelperText from '../../../common/WithHelperText';
+import { DisruptionBudgetForm } from '../types';
+
+const UpdateStepDisruptionBudget = () => {
+  const { t } = useTranslation();
+
+  const [, meta] = useField<DisruptionBudgetForm>('disruptionBudget');
+
+  return (
+    <>
+      <FormGroup
+        label={
+          <WithHelperText
+            ariaLabel={t('Group devices by label keys')}
+            content={t('The disruption budget will be applied to all group combinations independently.')}
+            showLabel
+          />
+        }
+      >
+        <TextListField
+          name="disruptionBudget.groupBy"
+          addButtonText={t('Add label key')}
+          helperText={
+            <Stack>
+              <StackItem>{t("Use only the 'key' part of the labels to group same values.")}</StackItem>
+              <StackItem>{t("Leaving this empty will apply the disruption budget to all fleet's devices.")}</StackItem>
+            </Stack>
+          }
+        />
+      </FormGroup>
+      <FormGroup>
+        <Flex>
+          <FlexItem>
+            <FormGroup
+              label={
+                <WithHelperText
+                  ariaLabel={t('Minimum number of available devices')}
+                  content={t(
+                    'At least this number of devices will be available at any given moment, for each group defined above.',
+                  )}
+                  showLabel
+                />
+              }
+            >
+              <NumberField
+                aria-label={t('Minimum number of available devices')}
+                name="disruptionBudget.minAvailable"
+                min={1}
+              />
+            </FormGroup>
+          </FlexItem>
+          <FlexItem>
+            <FormGroup
+              label={
+                <WithHelperText
+                  ariaLabel={t('Maximum number of unavailable devices')}
+                  content={t(
+                    'No more than this number of devices will be unavailable at any given moment, for each group defined above.',
+                  )}
+                  showLabel
+                />
+              }
+            >
+              <NumberField
+                aria-label={t('Maximum number of unavailable devices')}
+                name="disruptionBudget.maxUnavailable"
+                min={1}
+              />
+            </FormGroup>
+          </FlexItem>
+          {/* Show error when both numeric values are unset */}
+          {typeof meta.error === 'string' && <ErrorHelperText meta={meta} />}
+        </Flex>
+      </FormGroup>
+    </>
+  );
+};
+
+export default UpdateStepDisruptionBudget;

package/src/components/Fleet/CreateFleet/steps/UpdateStepRolloutPolicy.tsx

@@ -0,0 +1,190 @@
+import * as React from 'react';
+import {
+  Alert,
+  Button,
+  Flex,
+  FlexItem,
+  FormGroup,
+  FormSection,
+  Grid,
+  GridItem,
+  Split,
+  SplitItem,
+} from '@patternfly/react-core';
+import { FieldArray, useField, useFormikContext } from 'formik';
+import { MinusCircleIcon, PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons';
+
+import { BatchForm, BatchLimitType, FleetFormValues } from '../types';
+import ErrorHelperText from '../../../form/FieldHelperText';
+import ExpandableFormSection from '../../../form/ExpandableFormSection';
+import LabelsField from '../../../form/LabelsField';
+import FormSelect from '../../../form/FormSelect';
+import NumberField from '../../../form/NumberField';
+import WithHelperText from '../../../common/WithHelperText';
+import { useTranslation } from '../../../../hooks/useTranslation';
+import { getEmptyInitializedBatch } from '../fleetSpecUtils';
+
+const RolloutPolicyBatch = ({ index }: { index: number }) => {
+  const { t } = useTranslation();
+
+  const items = React.useMemo(
+    () => ({
+      percent: t('Percentage'),
+      value: t('Number of devices'),
+    }),
+    [t],
+  );
+
+  const [{ value: batch }, meta] = useField<BatchForm>(`rolloutPolicy.batches.${index}`);
+
+  const isPercent = batch.limitType === BatchLimitType.BatchLimitPercent;
+  return (
+    <ExpandableFormSection
+      title={t('Batch {{ batchNum }}', { batchNum: index + 1 })}
+      fieldName={`rolloutPolicy.batches.${index}`}
+    >
+      <Grid hasGutter>
+        {/* Show errors not related to an individual field */}
+        {typeof meta.error === 'string' && (
+          <GridItem>
+            <ErrorHelperText meta={meta} />
+          </GridItem>
+        )}
+        <FormGroup label={t('Select devices using labels')}>
+          <LabelsField aria-label={t('Label selector')} name={`rolloutPolicy.batches.${index}.selector`} />
+        </FormGroup>
+        <FormGroup label={t('Select a subset using')}>
+          <Split hasGutter>
+            <SplitItem>
+              <FormSelect items={items} name={`rolloutPolicy.batches.${index}.limitType`} />
+            </SplitItem>
+            <SplitItem>
+              <NumberField
+                aria-label={t('Numeric selector')}
+                name={`rolloutPolicy.batches.${index}.limit`}
+                min={1}
+                max={isPercent ? 100 : undefined}
+                widthChars={isPercent ? 3 : 8}
+                unit={isPercent ? '%' : undefined}
+              />
+            </SplitItem>
+          </Split>
+        </FormGroup>
+        <FormGroup
+          isRequired
+          label={
+            <WithHelperText
+              ariaLabel={t('Success threshold')}
+              content={t(
+                'The minimum percentage of devices that must be updated successfully in order to continue updating the next batch of devices.',
+              )}
+              showLabel
+            />
+          }
+        >
+          <Flex flexWrap={{ default: 'wrap' }}>
+            <FlexItem>{t('If')} </FlexItem>
+            <FlexItem>
+              <NumberField
+                aria-label={t('Success threshold')}
+                name={`rolloutPolicy.batches.${index}.successThreshold`}
+                min={1}
+                max={100}
+                isRequired
+              />
+            </FlexItem>
+            <FlexItem flex={{ lg: 'flex_1' }} style={{ minWidth: 200 }}>
+              {t(
+                "% of the batch devices pass the success threshold, move to next batch or the rest of fleet's devices.",
+              )}
+            </FlexItem>
+          </Flex>
+        </FormGroup>
+      </Grid>
+    </ExpandableFormSection>
+  );
+};
+
+const UpdateStepRolloutPolicy = () => {
+  const { t } = useTranslation();
+
+  const {
+    values: { rolloutPolicy },
+  } = useFormikContext<FleetFormValues>();
+
+  const batches = rolloutPolicy.batches || [];
+
+  return (
+    <>
+      <Alert isInline variant="info" title={t('Batch sequencing')}>
+        {t('Batches will be applied from first to last.')}
+        <br />
+        {t('Devices that are not part of any batch will be updated last.')}
+      </Alert>
+      <FormGroup
+        isRequired
+        label={
+          <WithHelperText
+            ariaLabel={t('Update timeout')}
+            content={t(
+              "The time-frame within which a device must be updated. If it exceeds it, device will be counted as a 'failed to update' in the batch success threshold.",
+            )}
+            showLabel
+          />
+        }
+      >
+        <Flex>
+          <FlexItem>{t('Timeout devices that fail to update after')}</FlexItem>
+          <FlexItem>
+            <NumberField aria-label={t('Update timeout')} name="rolloutPolicy.updateTimeout" min={1} isRequired />
+          </FlexItem>
+          <FlexItem>{t('minutes')}.</FlexItem>
+        </Flex>
+      </FormGroup>
+
+      <FormGroup>
+        <FieldArray name="rolloutPolicy.batches">
+          {({ push, remove }) => (
+            <>
+              {batches.map((_, index) => (
+                <FormSection key={index}>
+                  <Split hasGutter>
+                    <SplitItem isFilled>
+                      <RolloutPolicyBatch index={index} />
+                    </SplitItem>
+                    <SplitItem>
+                      <Button
+                        aria-label={t('Delete batch')}
+                        variant="link"
+                        icon={<MinusCircleIcon />}
+                        iconPosition="start"
+                        onClick={() => remove(index)}
+                        isDisabled={batches.length === 1}
+                      />
+                    </SplitItem>
+                  </Split>
+                </FormSection>
+              ))}
+              <FormSection>
+                <FormGroup>
+                  <Button
+                    variant="link"
+                    icon={<PlusCircleIcon />}
+                    iconPosition="start"
+                    onClick={() => {
+                      push(getEmptyInitializedBatch());
+                    }}
+                  >
+                    {t('Add batch')}
+                  </Button>
+                </FormGroup>
+              </FormSection>
+            </>
+          )}
+        </FieldArray>
+      </FormGroup>
+    </>
+  );
+};
+
+export default UpdateStepRolloutPolicy;

package/src/components/Fleet/CreateFleet/types.ts

@@ -1,8 +1,33 @@
+import { DisruptionBudget } from '@flightctl/types';
 import { FlightCtlLabel } from '../../../types/extraTypes';
 import { DeviceSpecConfigFormValues } from '../../Device/EditDeviceWizard/types';
 
+export enum BatchLimitType {
+  BatchLimitPercent = 'percent',
+  BatchLimitAbsoluteNumber = 'value',
+}
+
+export type BatchForm = {
+  selector: FlightCtlLabel[];
+  limit?: number;
+  limitType: BatchLimitType;
+  successThreshold?: number;
+};
+
+export type RolloutPolicyForm = {
+  isAdvanced: boolean;
+  updateTimeout: number;
+  batches: BatchForm[];
+};
+
+export type DisruptionBudgetForm = DisruptionBudget & {
+  isAdvanced: boolean;
+};
+
 export type FleetFormValues = DeviceSpecConfigFormValues & {
   name: string;
   fleetLabels: FlightCtlLabel[];
   labels: FlightCtlLabel[];
+  rolloutPolicy: RolloutPolicyForm;
+  disruptionBudget: DisruptionBudgetForm;
 };

package/src/components/Fleet/CreateFleet/utils.ts

@@ -8,6 +8,8 @@ import {
   systemdUnitListValidationSchema,
   validApplicationsSchema,
   validConfigTemplatesSchema,
+  validFleetDisruptionBudgetSchema,
+  validFleetRolloutPolicySchema,
   validKubernetesDnsSubdomain,
   validLabelsSchema,
   validOsImage,
@@ -16,6 +18,8 @@ import {
   appendJSONPatch,
   getApplicationPatches,
   getLabelPatches,
+  getRolloutPolicyData,
+  getRolloutPolicyPatches,
   getStringListPatches,
   toAPIApplication,
 } from '../../../utils/patch';
@@ -29,6 +33,7 @@ import {
   getDeviceSpecConfigPatches,
   hasMicroshiftRegistrationConfig,
 } from '../../Device/EditDeviceWizard/deviceSpecUtils';
+import { getDisruptionBudgetValues, getRolloutPolicyValues } from './fleetSpecUtils';
 
 export const getValidationSchema = (t: TFunction) => {
   return Yup.object<FleetFormValues>({
@@ -39,6 +44,8 @@ export const getValidationSchema = (t: TFunction) => {
     configTemplates: validConfigTemplatesSchema(t),
     applications: validApplicationsSchema(t),
     systemdUnits: systemdUnitListValidationSchema(t),
+    rolloutPolicy: validFleetRolloutPolicySchema(t),
+    disruptionBudget: validFleetDisruptionBudgetSchema(t),
   });
 };
 
@@ -56,6 +63,7 @@ export const getFleetPatches = (currentFleet: Fleet, updatedFleet: FleetFormValu
   const currentDeviceSelectLabels = currentFleet.spec.selector?.matchLabels || {};
   const updatedDeviceSelectLabels = updatedFleet.labels || {};
   const updatedDeviceSelectLabelCount = Object.keys(updatedDeviceSelectLabels).length;
+  const currentDeviceSelectLabelCount = Object.keys(currentDeviceSelectLabels).length;
 
   if (updatedDeviceSelectLabelCount > 0) {
     if (currentFleet.spec.selector) {
@@ -73,7 +81,7 @@ export const getFleetPatches = (currentFleet: Fleet, updatedFleet: FleetFormValu
         value: { matchLabels: newLabelMap },
       });
     }
-  } else if (currentFleet.spec.selector) {
+  } else if (currentDeviceSelectLabelCount > 0) {
     allPatches.push({
       path: '/spec/selector',
       op: 'remove',
@@ -129,6 +137,10 @@ export const getFleetPatches = (currentFleet: Fleet, updatedFleet: FleetFormValu
   );
   allPatches = allPatches.concat(unitPatches);
 
+  // Rollout policies (includes disruption budget)
+  const rolloutPolicyPatches = getRolloutPolicyPatches(currentFleet.spec.rolloutPolicy, updatedFleet);
+  allPatches = allPatches.concat(rolloutPolicyPatches);
+
   return allPatches;
 };
 
@@ -171,6 +183,9 @@ export const getFleetResource = (values: FleetFormValues): Fleet => {
   if (values.registerMicroShift) {
     fleet.spec.template.spec.config?.push(ACMCrdConfig, ACMImportConfig, MicroshiftRegistrationHook);
   }
+  if (values.rolloutPolicy.isAdvanced || values.disruptionBudget.isAdvanced) {
+    fleet.spec.rolloutPolicy = getRolloutPolicyData(values);
+  }
 
   return fleet;
 };
@@ -196,6 +211,8 @@ export const getInitialValues = (fleet?: Fleet): FleetFormValues => {
         exists: true,
       })),
       registerMicroShift,
+      rolloutPolicy: getRolloutPolicyValues(fleet.spec),
+      disruptionBudget: getDisruptionBudgetValues(fleet.spec),
     };
   }
 
@@ -208,5 +225,7 @@ export const getInitialValues = (fleet?: Fleet): FleetFormValues => {
     applications: [],
     systemdUnits: [],
     registerMicroShift: false,
+    rolloutPolicy: getRolloutPolicyValues(undefined),
+    disruptionBudget: getDisruptionBudgetValues(undefined),
   };
 };

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

@@ -12,20 +12,23 @@ import {
 } from '@patternfly/react-core';
 
 import { Fleet } from '@flightctl/types';
-import FleetOwnerLink from './FleetOwnerLink';
-import FleetDevices from './FleetDevices';
-import FleetStatus from '../FleetStatus';
-import FleetDevicesLink from './FleetDevicesLink';
 import FlightControlDescriptionList from '../../common/FlightCtlDescriptionList';
 import LabelsView from '../../common/LabelsView';
 import { getDateDisplay } from '../../../utils/dates';
+import { getFleetRolloutStatusWarning } from '../../../utils/status/fleet';
 import { useTranslation } from '../../../hooks/useTranslation';
 import RepositorySourceList from '../../Repository/RepositoryDetails/RepositorySourceList';
+import FleetOwnerLink from './FleetOwnerLink';
+import FleetDevicesCharts from './FleetDevicesCharts';
+import FleetStatus from '../FleetStatus';
+import FleetDevicesCount from './FleetDevicesCount';
 
 const FleetDetailsContent = ({ fleet }: { fleet: Fleet }) => {
   const { t } = useTranslation();
   const fleetId = fleet.metadata.name as string;
   const devicesSummary = fleet.status?.devicesSummary;
+  const rolloutError = getFleetRolloutStatusWarning(fleet, t);
+
   return (
     <Grid hasGutter>
       <GridItem md={12}>
@@ -56,9 +59,9 @@ const FleetDetailsContent = ({ fleet }: { fleet: Fleet }) => {
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
-                <DescriptionListTerm>{t('Associated devices')}</DescriptionListTerm>
+                <DescriptionListTerm>{t('Up-to-date/devices')}</DescriptionListTerm>
                 <DescriptionListDescription>
-                  <FleetDevicesLink fleetId={fleetId} count={devicesSummary?.total} />
+                  <FleetDevicesCount fleetId={fleetId} devicesSummary={devicesSummary} error={rolloutError} />
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
@@ -85,7 +88,7 @@ const FleetDetailsContent = ({ fleet }: { fleet: Fleet }) => {
             <CardTitle>{t('Fleet devices')}</CardTitle>
 
             <CardBody>
-              <FleetDevices fleetId={fleetId} devicesSummary={devicesSummary} />
+              <FleetDevicesCharts fleetId={fleetId} devicesSummary={devicesSummary} />
             </CardBody>
           </Card>
         </GridItem>