@flightctl/ui-components 0.7.2 → 0.8.0-rc1

package/src/components/EnrollmentRequest/EnrollmentRequestDetails/EnrollmentRequestDetails.tsx

@@ -33,11 +33,11 @@ import LabelWithHelperText from '../../common/WithHelperText';
 import FlightControlDescriptionList from '../../common/FlightCtlDescriptionList';
 import { useTranslation } from '../../../hooks/useTranslation';
 import { ROUTE, useNavigate } from '../../../hooks/useNavigate';
+import { useDeviceSpecSystemInfo } from '../../../hooks/useDeviceSpecSystemInfo';
 import { useAppContext } from '../../../hooks/useAppContext';
 import { useAccessReview } from '../../../hooks/useAccessReview';
 import { RESOURCE, VERB } from '../../../types/rbac';
 import PageWithPermissions from '../../common/PageWithPermissions';
-import { useEnrollmentRequestSystemInfo } from './useEnrollmentRequestSystemInfo';
 
 import './EnrollmentRequestDetails.css';
 
@@ -47,7 +47,7 @@ const EnrollmentRequestDetails = () => {
     router: { useParams },
   } = useAppContext();
   const { enrollmentRequestId } = useParams() as { enrollmentRequestId: string };
-  const [er, loading, error, refetch] = useFetchPeriodically<EnrollmentRequest>({
+  const [er, loading, error] = useFetchPeriodically<EnrollmentRequest>({
     endpoint: `enrollmentrequests/${enrollmentRequestId}`,
   });
   const { remove } = useFetch();
@@ -56,8 +56,9 @@ const EnrollmentRequestDetails = () => {
   const [canDelete] = useAccessReview(RESOURCE.ENROLLMENT_REQUEST, VERB.DELETE);
 
   const [isApprovalModalOpen, setIsApprovalModalOpen] = React.useState(false);
-  const erSystemInfo = useEnrollmentRequestSystemInfo(er?.spec.deviceStatus?.systemInfo, t);
+  const erSystemInfo = useDeviceSpecSystemInfo(er?.spec.deviceStatus?.systemInfo, t);
   const hasDefaultLabels = Object.keys(er?.spec.labels || {}).length > 0;
+  const deviceId = er?.metadata.name as string;
 
   const { deleteAction, deleteModal } = useDeleteAction({
     resourceName: enrollmentRequestId,
@@ -74,7 +75,7 @@ const EnrollmentRequestDetails = () => {
     <DetailsPage
       loading={loading}
       error={error}
-      id={er?.metadata.name as string}
+      id={deviceId}
       resourceLink={ROUTE.DEVICES}
       resourceType="Devices"
       resourceTypeLabel={t('Devices')}
@@ -101,7 +102,7 @@ const EnrollmentRequestDetails = () => {
               <FlightControlDescriptionList columnModifier={{ lg: '3Col' }}>
                 <DescriptionListGroup>
                   <DescriptionListTerm>{t('Name')}</DescriptionListTerm>
-                  <DescriptionListDescription>{er?.metadata.name || '-'}</DescriptionListDescription>
+                  <DescriptionListDescription>{deviceId}</DescriptionListDescription>
                 </DescriptionListGroup>
                 <DescriptionListGroup>
                   <DescriptionListTerm>{t('Last seen')}</DescriptionListTerm>
@@ -109,18 +110,6 @@ const EnrollmentRequestDetails = () => {
                     {timeSinceText(t, er?.metadata.creationTimestamp)}
                   </DescriptionListDescription>
                 </DescriptionListGroup>
-                <DescriptionListGroup>
-                  <DescriptionListTerm>{t('Operating system')}</DescriptionListTerm>
-                  <DescriptionListDescription>
-                    {er?.spec?.deviceStatus?.systemInfo?.operatingSystem || '-'}
-                  </DescriptionListDescription>
-                </DescriptionListGroup>
-                <DescriptionListGroup>
-                  <DescriptionListTerm>{t('Architecture')}</DescriptionListTerm>
-                  <DescriptionListDescription>
-                    {er?.spec?.deviceStatus?.systemInfo?.architecture || '-'}
-                  </DescriptionListDescription>
-                </DescriptionListGroup>
                 {hasDefaultLabels && (
                   <DescriptionListGroup>
                     <DescriptionListTerm>{t('Labels')}</DescriptionListTerm>
@@ -221,9 +210,9 @@ const EnrollmentRequestDetails = () => {
       {er && isApprovalModalOpen && (
         <ApproveDeviceModal
           enrollmentRequest={er}
-          onClose={(updateList) => {
+          onClose={(isApproved) => {
             setIsApprovalModalOpen(false);
-            updateList && refetch();
+            isApproved && navigate({ route: ROUTE.DEVICE_DETAILS, postfix: deviceId });
           }}
         />
       )}

package/src/components/Events/EventItem.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Icon, Stack, StackItem, TextContent } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+
+import { Event } from '@flightctl/types';
+import { DisplayEvent } from './useEvents';
+
+const NormalEventIcon = () => (
+  <Icon status="info" size="md">
+    <InfoCircleIcon />
+  </Icon>
+);
+
+const WarningEventIcon = () => (
+  <Icon status="warning" size="md">
+    <ExclamationTriangleIcon />
+  </Icon>
+);
+
+const EventItem = ({ event }: { event: DisplayEvent }) => {
+  return (
+    <Stack>
+      <StackItem>
+        {event.type === Event.type.NORMAL ? <NormalEventIcon /> : <WarningEventIcon />}{' '}
+        <strong>{event.reasonText}</strong>
+      </StackItem>
+      {event.message && <StackItem>{event.message}</StackItem>}
+      <StackItem>
+        <TextContent>
+          <small>{event.dateText}</small>
+        </TextContent>
+      </StackItem>
+    </Stack>
+  );
+};
+
+export default EventItem;

package/src/components/Events/EventsCard.css

@@ -0,0 +1,5 @@
+.fctl-events-container {
+  /* Make space for the EmptyState content */
+  min-height: 300px;
+  overflow-y: auto;
+}

package/src/components/Events/EventsCard.tsx

@@ -0,0 +1,157 @@
+import * as React from 'react';
+import {
+  Button,
+  Card,
+  CardBody,
+  CardTitle,
+  Divider,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateHeader,
+  Flex,
+  FlexItem,
+  MenuToggle,
+  Select,
+  SelectList,
+  SelectOption,
+  Spinner,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import SyncAltIcon from '@patternfly/react-icons/dist/js/icons/sync-alt-icon';
+
+import { Event, ResourceKind } from '@flightctl/types';
+import { useTranslation } from '../../hooks/useTranslation';
+import { timeSinceEpochText } from '../../utils/dates';
+import useEvents, { DisplayEvent, SelectableEventType } from './useEvents';
+import EventItem from './EventItem';
+
+import './EventsCard.css';
+
+type EventListProps = {
+  kind: ResourceKind;
+  objId: string;
+  type?: Event.type;
+};
+
+const EventEmptyState = ({ hasFilters }: { hasFilters: boolean }) => {
+  const { t } = useTranslation();
+  return (
+    <EmptyState>
+      <EmptyStateHeader>{t('No matching events')}</EmptyStateHeader>
+      <EmptyStateBody>
+        {hasFilters ? t('No events were found based on the current filters') : t('No events were found')}
+      </EmptyStateBody>
+    </EmptyState>
+  );
+};
+
+const EventList = ({ events }: { events: DisplayEvent[] }) => {
+  // Reference used to give the events panel the correct height
+  const topRef = React.useRef<HTMLDivElement>(null);
+  const [topY, setTopY] = React.useState<number>(0);
+
+  React.useEffect(() => {
+    if (topRef.current) {
+      const boundingRect = topRef.current.getBoundingClientRect();
+      if (boundingRect.top > 0) {
+        setTopY(Math.ceil(boundingRect.top));
+      }
+    }
+  }, []);
+
+  return (
+    <div ref={topRef} style={{ height: `calc(97vh - ${topY}px)` }}>
+      <Stack hasGutter>
+        {events.map((event) => {
+          return (
+            <StackItem key={event.name}>
+              <EventItem event={event} />
+            </StackItem>
+          );
+        })}
+      </Stack>
+    </div>
+  );
+};
+
+const EventsCard = ({ kind, objId, type = Event.type.WARNING }: EventListProps) => {
+  const { t } = useTranslation();
+
+  const [selectedType, setSelectedType] = React.useState<SelectableEventType>(type);
+  const searchCriteria = React.useMemo(
+    () => ({
+      kind,
+      name: objId,
+      type: selectedType,
+    }),
+    [kind, objId, selectedType],
+  );
+  const [events, isLoading, refetch, isUpdating, lastUpdateTime] = useEvents(searchCriteria, t);
+  const [isTypeOpen, setIsTypeOpen] = React.useState<boolean>(false);
+  const title =
+    lastUpdateTime === 0
+      ? t('Events')
+      : t('Events (updated {{ lastUpdate}})', { lastUpdate: timeSinceEpochText(t, lastUpdateTime) });
+
+  let content: React.ReactNode;
+  if (isLoading && !events) {
+    content = <Spinner size="sm" />;
+  } else if (!isLoading && events?.length === 0) {
+    content = <EventEmptyState hasFilters={selectedType !== 'all'} />;
+  } else {
+    content = <EventList events={events || []} />;
+  }
+
+  return (
+    <Card>
+      <CardTitle>
+        <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
+          <FlexItem>{title}</FlexItem>
+          <FlexItem>
+            <Button
+              aria-label={t('Reload events')}
+              isDisabled={isLoading || isUpdating}
+              variant="plain"
+              icon={<SyncAltIcon />}
+              onClick={refetch}
+            />
+          </FlexItem>
+        </Flex>
+      </CardTitle>
+      <CardBody isFilled={false}>
+        <Select
+          isOpen={isTypeOpen}
+          selected={selectedType}
+          onSelect={(_, value) => {
+            setSelectedType(value as SelectableEventType);
+            setIsTypeOpen(false);
+          }}
+          toggle={(toggleRef) => (
+            <MenuToggle
+              ref={toggleRef}
+              isExpanded
+              onClick={() => {
+                setIsTypeOpen((open) => !open);
+              }}
+            >
+              {selectedType === 'all' ? t('All types') : selectedType}
+            </MenuToggle>
+          )}
+        >
+          <SelectList>
+            <SelectOption value="all">{t('All types')}</SelectOption>
+            <SelectOption value={Event.type.NORMAL}>{t('Normal')}</SelectOption>
+            <SelectOption value={Event.type.WARNING}>{t('Warning')}</SelectOption>
+          </SelectList>
+        </Select>
+      </CardBody>
+      <Divider />
+      <CardBody isFilled className="fctl-events-container">
+        {content}
+      </CardBody>
+    </Card>
+  );
+};
+
+export default EventsCard;

package/src/components/Events/useEvents.ts

@@ -0,0 +1,136 @@
+import * as React from 'react';
+import { TFunction } from 'react-i18next';
+
+import { Event, EventList, ObjectReference, ResourceKind } from '@flightctl/types';
+import { useFetchPeriodically } from '../../hooks/useFetchPeriodically';
+import { EVENT_PAGE_SIZE } from '../../constants';
+import { getDateDisplay } from '../../utils/dates';
+import * as queryUtils from '../../utils/query';
+
+const getTimeout = (kind?: ResourceKind) => {
+  switch (kind) {
+    case ResourceKind.DEVICE:
+      return 180000; // 3 minutes
+    case ResourceKind.FLEET:
+      return 300000; // 5 minutes
+    case ResourceKind.REPOSITORY:
+    default:
+      return 600000; // 10 minutes
+  }
+};
+
+type UseEventsResult = [
+  DisplayEvent[] | undefined, // Event list
+  boolean, // isLoading
+  VoidFunction, // refetch
+  boolean, // isUpdating
+  number, // Last update timestamp
+];
+
+export type SelectableEventType = Event.type | 'all';
+
+// Reduced Event object. All fields should be ready to be displayed in the UI.
+export type DisplayEvent = Pick<Event, 'type' | 'message'> & {
+  name: string;
+  dateText: string;
+  reasonText: string;
+};
+
+export type EventSearchCriteria = Partial<ObjectReference> & {
+  type: SelectableEventType;
+};
+
+const getEventReasonTitles = (t: TFunction, kindType: string): Record<Event.reason, string> => {
+  const params = { resourceType: kindType };
+  return {
+    [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),
+    [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_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'),
+    [Event.reason.DEVICE_DISK_CRITICAL]: t('Disk utilization has reached a critical level'),
+    [Event.reason.DEVICE_APPLICATION_HEALTHY]: t('All application workloads are healthy'),
+    [Event.reason.DEVICE_APPLICATION_DEGRADED]: t('Some applications workloads are degraded'),
+    [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_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'),
+  };
+};
+
+const redundantMessageReasons = [
+  Event.reason.RESOURCE_CREATED, // <kind> <name> created successfully
+  Event.reason.RESOURCE_UPDATED, // <kind> <name> updated successfully
+  Event.reason.RESOURCE_DELETED, // <kind> <name> deleted successfully
+];
+
+const displayEventMapper = (event: Event, reasonTxt: string): DisplayEvent => ({
+  name: event.metadata.name as string,
+  type: event.type,
+  dateText: getDateDisplay(event.metadata.creationTimestamp || ''),
+  reasonText: reasonTxt || event.reason,
+  message: redundantMessageReasons.includes(event.reason) ? '' : event.message,
+});
+
+const buildEndpoint = (criteria: EventSearchCriteria) => {
+  const params = new URLSearchParams({
+    limit: `${EVENT_PAGE_SIZE}`,
+  });
+  const fieldSelectors: string[] = [];
+  if (criteria.kind) {
+    queryUtils.addQueryConditions(fieldSelectors, 'involvedObject.kind', [criteria.kind]);
+  }
+  if (criteria.name) {
+    queryUtils.addQueryConditions(fieldSelectors, 'involvedObject.name', [criteria.name]);
+  }
+  if (criteria.type !== 'all') {
+    queryUtils.addQueryConditions(fieldSelectors, 'type', [criteria.type]);
+  }
+
+  if (fieldSelectors.length > 0) {
+    params.set('fieldSelector', fieldSelectors.join(','));
+  }
+  return `events?${params.toString()}`;
+};
+
+const useEvents = (criteria: EventSearchCriteria, t: TFunction): UseEventsResult => {
+  const [events, setEvents] = React.useState<DisplayEvent[]>();
+  const [lastDate, setLastDate] = React.useState<number>(0);
+  const timeout = getTimeout(criteria.kind as ResourceKind | undefined);
+
+  const [eventList, isLoading, , refetch, isUpdating] = useFetchPeriodically<EventList>({
+    endpoint: buildEndpoint(criteria),
+    timeout,
+  });
+
+  const eventReasonTitles = React.useMemo(() => {
+    return getEventReasonTitles(t, criteria.kind || t('Resource'));
+  }, [t, criteria.kind]);
+
+  React.useEffect(() => {
+    setEvents(() => {
+      return (eventList?.items || []).map((event) => {
+        const reason = eventReasonTitles[event.reason];
+        return displayEventMapper(event, reason);
+      });
+    });
+    setLastDate(Date.now());
+  }, [criteria, eventList?.items, eventReasonTitles]);
+
+  return [events, isLoading, refetch, isUpdating, lastDate];
+};
+
+export default useEvents;

package/src/components/Fleet/CreateFleet/CreateFleetWizard.tsx

@@ -78,8 +78,13 @@ const CreateFleetWizard = () => {
   const navigate = useNavigate();
   const [currentStep, setCurrentStep] = React.useState<WizardStepType>();
   const [fleetId, fleet, loading, editError] = useEditFleet();
+
+  const [canEdit] = useAccessReview(RESOURCE.FLEET, VERB.PATCH);
+
   const isEdit = !!fleetId;
-  let body;
+  const isReadOnly = !!fleet?.metadata.owner || (isEdit && !canEdit);
+
+  let body: React.ReactNode;
 
   if (loading) {
     body = (
@@ -93,12 +98,6 @@ const CreateFleetWizard = () => {
         {getErrorMessage(editError)}
       </Alert>
     );
-  } else if (!!fleet?.metadata.owner) {
-    body = (
-      <Alert isInline variant="info" title={t('Fleet is non-editable')}>
-        {t('This fleet is managed by a resource sync and it cannot be edited directly.')}
-      </Alert>
-    );
   } else {
     body = (
       <Formik<FleetFormValues>
@@ -125,12 +124,20 @@ const CreateFleetWizard = () => {
       >
         {({ errors: formikErrors }) => {
           const validStepIds = getValidStepIds(formikErrors);
+          let reviewStepLabel: string;
+          if (isReadOnly) {
+            reviewStepLabel = t('Review');
+          } else if (isEdit) {
+            reviewStepLabel = t('Review and save');
+          } else {
+            reviewStepLabel = t('Review and create');
+          }
 
           return (
             <>
               <LeaveFormConfirmation />
               <Wizard
-                footer={<CreateFleetWizardFooter isEdit={isEdit} />}
+                footer={<CreateFleetWizardFooter isReadOnly={isReadOnly} isEdit={isEdit} />}
                 onStepChange={(_, step) => {
                   if (error) {
                     setError(undefined);
@@ -140,24 +147,26 @@ const CreateFleetWizard = () => {
                 className="fctl-create-fleet"
               >
                 <WizardStep name={t('General info')} id={generalInfoStepId}>
-                  {(!currentStep || currentStep?.id === generalInfoStepId) && <GeneralInfoStep isEdit={isEdit} />}
+                  {(!currentStep || currentStep?.id === generalInfoStepId) && (
+                    <GeneralInfoStep isEdit={isEdit} isReadOnly={isReadOnly} />
+                  )}
                 </WizardStep>
                 <WizardStep
                   name={t('Device template')}
                   id={deviceTemplateStepId}
                   isDisabled={isDisabledStep(deviceTemplateStepId, validStepIds)}
                 >
-                  {currentStep?.id === deviceTemplateStepId && <DeviceTemplateStep isFleet />}
+                  {currentStep?.id === deviceTemplateStepId && <DeviceTemplateStep isFleet isReadOnly={isReadOnly} />}
                 </WizardStep>
                 <WizardStep
                   name={t('Updates')}
                   id={updatePolicyStepId}
                   isDisabled={isDisabledStep(updatePolicyStepId, validStepIds)}
                 >
-                  {currentStep?.id === updatePolicyStepId && <UpdatePolicyStep />}
+                  {currentStep?.id === updatePolicyStepId && <UpdatePolicyStep isReadOnly={isReadOnly} />}
                 </WizardStep>
                 <WizardStep
-                  name={isEdit ? t('Review and save') : t('Review and create')}
+                  name={reviewStepLabel}
                   id={reviewStepId}
                   isDisabled={isDisabledStep(reviewStepId, validStepIds)}
                 >
@@ -171,7 +180,14 @@ const CreateFleetWizard = () => {
     );
   }
 
-  const title = isEdit ? t('Edit fleet') : t('Create fleet');
+  let title: string;
+  if (isReadOnly) {
+    title = t('View fleet');
+  } else if (isEdit) {
+    title = t('Edit fleet');
+  } else {
+    title = t('Create fleet');
+  }
 
   return (
     <>

package/src/components/Fleet/CreateFleet/CreateFleetWizardFooter.tsx

@@ -13,10 +13,11 @@ import {
 import { isUpdatePolicyStepValid, updatePolicyStepId } from './steps/UpdatePolicyStep';
 
 type CreateFleetWizardFooterProps = {
+  isReadOnly: boolean;
   isEdit: boolean;
 };
 
-const CreateFleetWizardFooter = ({ isEdit }: CreateFleetWizardFooterProps) => {
+const CreateFleetWizardFooter = ({ isReadOnly, isEdit }: CreateFleetWizardFooterProps) => {
   const { t } = useTranslation();
   const { goToNextStep, goToPrevStep, activeStep } = useWizardContext();
   const { submitForm, isSubmitting, errors } = useFormikContext<FleetFormValues>();
@@ -39,15 +40,29 @@ const CreateFleetWizardFooter = ({ isEdit }: CreateFleetWizardFooterProps) => {
     buttonRef.current?.blur();
   };
 
-  const primaryBtn = isReviewStep ? (
-    <Button variant="primary" onClick={submitForm} isDisabled={isSubmitting} isLoading={isSubmitting}>
-      {isEdit ? t('Save') : t('Create fleet')}
-    </Button>
-  ) : (
-    <Button variant="primary" onClick={onMoveNext} isDisabled={!isStepValid} ref={buttonRef}>
-      {t('Next')}
-    </Button>
-  );
+  let primaryBtn: React.ReactNode;
+
+  if (isReviewStep) {
+    if (isReadOnly) {
+      primaryBtn = (
+        <Button variant="primary" onClick={() => navigate(-1)}>
+          {t('Close')}
+        </Button>
+      );
+    } else {
+      primaryBtn = (
+        <Button variant="primary" onClick={submitForm} isDisabled={isSubmitting} isLoading={isSubmitting}>
+          {isEdit ? t('Save') : t('Create fleet')}
+        </Button>
+      );
+    }
+  } else {
+    primaryBtn = (
+      <Button variant="primary" onClick={onMoveNext} isDisabled={!isReadOnly && !isStepValid} ref={buttonRef}>
+        {t('Next')}
+      </Button>
+    );
+  }
 
   return (
     <WizardFooterWrapper>

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

@@ -1,6 +1,6 @@
 import { type DeviceUpdatePolicySpec, FleetSpec, Percentage } from '@flightctl/types';
 
-import { BatchLimitType, UpdatePolicyForm } from './../../../types/deviceSpec';
+import { BatchForm, BatchLimitType, RolloutPolicyForm, UpdatePolicyForm } from './../../../types/deviceSpec';
 import { fromAPILabel } from '../../../utils/labels';
 import * as timeUtils from '../../../utils/time';
 import { schedulesAreEqual } from '../../../utils/patch';
@@ -15,32 +15,14 @@ const numberValue = (value: Percentage | number | undefined) => {
   return Number(value.replace(/[%]/, ''));
 };
 
-export const getEmptyInitializedBatch = () => ({
-  limit: '',
+export const getEmptyInitializedBatch = (): BatchForm => ({
+  limit: undefined,
   limitType: BatchLimitType.BatchLimitPercent,
   successThreshold: numberValue(DEFAULT_BACKEND_SUCCESS_THRESHOLD_PERCENTAGE),
   selector: [],
 });
 
-export const getEmptyUpdateFormParams = () => ({
-  isEditable: true,
-  isAdvanced: false,
-  downloadAndInstallDiffer: false,
-  // Download schedule
-  downloadStartsAt: timeUtils.defaultStartTime,
-  downloadEndsAt: timeUtils.defaultEndTime,
-  downloadScheduleMode: timeUtils.UpdateScheduleMode.Daily,
-  downloadWeekDays: [false, false, false, false, false, false, false],
-  downloadTimeZone: timeUtils.localDeviceTimezone,
-  // Install schedule (updateSchedule in the API)
-  installStartsAt: timeUtils.defaultStartTime,
-  installEndsAt: timeUtils.defaultEndTime,
-  installScheduleMode: timeUtils.UpdateScheduleMode.Daily,
-  installWeekDays: [false, false, false, false, false, false, false],
-  installTimeZone: timeUtils.localDeviceTimezone,
-});
-
-export const getRolloutPolicyValues = (fleetSpec?: FleetSpec) => {
+export const getRolloutPolicyValues = (fleetSpec?: FleetSpec): RolloutPolicyForm => {
   const batches = (fleetSpec?.rolloutPolicy?.deviceSelection?.sequence || []).map((batch) => ({
     selector: fromAPILabel(batch.selector?.matchLabels || {}),
     limit: numberValue(batch.limit),
@@ -52,7 +34,11 @@ export const getRolloutPolicyValues = (fleetSpec?: FleetSpec) => {
 
   // If the policy does not specify the timeout, we set the backend's default as the field is required in the UI
   const updateTimeout = fleetSpec?.rolloutPolicy?.defaultUpdateTimeout || `${DEFAULT_BACKEND_UPDATE_TIMEOUT_MINUTES}m`;
-  return { isAdvanced: batches.length > 0, batches, updateTimeout: timeUtils.durationToMinutes(updateTimeout) };
+  return {
+    isAdvanced: batches.length > 0,
+    batches: batches.length ? batches : [getEmptyInitializedBatch()],
+    updateTimeout: timeUtils.durationToMinutes(updateTimeout),
+  };
 };
 
 export const getDisruptionBudgetValues = (fleetSpec?: FleetSpec) => {

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

@@ -13,6 +13,8 @@ import { FlightCtlLabel } from '../../../../types/extraTypes';
 import { getApiListCount } from '../../../../utils/api';
 import { getErrorMessage } from '../../../../utils/error';
 import { commonQueries } from '../../../../utils/query';
+import LabelsView from '../../../common/LabelsView';
+import { toAPILabel } from '../../../../utils/labels';
 
 const validateLabels = (labels: FlightCtlLabel[]) =>
   hasUniqueLabelKeys(labels) && getInvalidKubernetesLabels(labels).length === 0;
@@ -108,4 +110,13 @@ const DeviceLabelSelector = () => {
   );
 };
 
-export default DeviceLabelSelector;
+const DeviceLabelSelectorWrapper = ({ isReadOnly }: { isReadOnly: boolean }) => {
+  const [{ value: labels }] = useField<FlightCtlLabel[]>('labels');
+
+  if (isReadOnly) {
+    return <LabelsView prefix="device-selector" labels={toAPILabel(labels)} />;
+  }
+  return <DeviceLabelSelector />;
+};
+
+export default DeviceLabelSelectorWrapper;