@flightctl/ui-components 0.7.2 → 0.8.0-rc2

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

@@ -24,9 +24,10 @@ type ScheduleBlockProps = {
   blockType: ScheduleBlockType;
   weekDayError?: string[] | string | Weekday;
   onScheduleModeSwitch: (blockType: ScheduleBlockType) => void;
+  isReadOnly?: boolean;
 };
 
-const ScheduleTimeZone = ({ blockType }: { blockType: ScheduleBlockType }) => {
+const ScheduleTimeZone = ({ blockType, isReadOnly }: { blockType: ScheduleBlockType; isReadOnly?: boolean }) => {
   const { t } = useTranslation();
 
   const id = `updatePolicy.${blockType}TimeZone`;
@@ -49,14 +50,23 @@ const ScheduleTimeZone = ({ blockType }: { blockType: ScheduleBlockType }) => {
         id={id}
         onChange={onChangeTimezoneCheckbox}
         label={t("Use device's local timezone")}
+        isDisabled={isReadOnly}
       />
 
-      {timeZone !== timeUtils.localDeviceTimezone && <FormSelectTypeahead name={id} defaultId="" items={zones} />}
+      {timeZone !== timeUtils.localDeviceTimezone && (
+        <FormSelectTypeahead name={id} defaultId="" items={zones} isDisabled={isReadOnly} />
+      )}
     </FormGroup>
   );
 };
 
-const ScheduleBlock = ({ blockType, updatePolicy, onScheduleModeSwitch, weekDayError }: ScheduleBlockProps) => {
+const ScheduleBlock = ({
+  blockType,
+  updatePolicy,
+  onScheduleModeSwitch,
+  weekDayError,
+  isReadOnly,
+}: ScheduleBlockProps) => {
   const { t } = useTranslation();
 
   let ariaLabel: string;
@@ -115,6 +125,7 @@ const ScheduleBlock = ({ blockType, updatePolicy, onScheduleModeSwitch, weekDayE
                 items={selectableTimes}
                 isValidTypedItem={isValidTypedItem}
                 transformTypedItem={transformTypedItem}
+                isDisabled={isReadOnly}
               />
             </FlexItem>
             <FlexItem>
@@ -125,6 +136,7 @@ const ScheduleBlock = ({ blockType, updatePolicy, onScheduleModeSwitch, weekDayE
                 items={selectableTimes}
                 isValidTypedItem={isValidTypedItem}
                 transformTypedItem={transformTypedItem}
+                isDisabled={isReadOnly}
               />
             </FlexItem>
             <FlexItem>
@@ -133,6 +145,7 @@ const ScheduleBlock = ({ blockType, updatePolicy, onScheduleModeSwitch, weekDayE
                 name={`updatePolicy.${blockType}ScheduleMode`}
                 label={t('Daily')}
                 checkedValue={timeUtils.UpdateScheduleMode.Daily}
+                isDisabled={isReadOnly}
               />
             </FlexItem>
             <FlexItem>
@@ -142,6 +155,7 @@ const ScheduleBlock = ({ blockType, updatePolicy, onScheduleModeSwitch, weekDayE
                 label={t('Weekly')}
                 checkedValue={timeUtils.UpdateScheduleMode.Weekly}
                 onChangeCustom={() => onScheduleModeSwitch(blockType)}
+                isDisabled={isReadOnly}
               />
             </FlexItem>
           </Flex>
@@ -153,25 +167,53 @@ const ScheduleBlock = ({ blockType, updatePolicy, onScheduleModeSwitch, weekDayE
                 <StackItem>
                   <Flex>
                     <FlexItem>
-                      <CheckboxFieldGroupValidation name={`updatePolicy.${blockType}WeekDays[0]`} label={t('Sun')} />
+                      <CheckboxFieldGroupValidation
+                        name={`updatePolicy.${blockType}WeekDays[0]`}
+                        label={t('Sun')}
+                        isDisabled={isReadOnly}
+                      />
                     </FlexItem>
                     <FlexItem>
-                      <CheckboxFieldGroupValidation name={`updatePolicy.${blockType}WeekDays[1]`} label={t('Mon')} />
+                      <CheckboxFieldGroupValidation
+                        name={`updatePolicy.${blockType}WeekDays[1]`}
+                        label={t('Mon')}
+                        isDisabled={isReadOnly}
+                      />
                     </FlexItem>
                     <FlexItem>
-                      <CheckboxFieldGroupValidation name={`updatePolicy.${blockType}WeekDays[2]`} label={t('Tue')} />
+                      <CheckboxFieldGroupValidation
+                        name={`updatePolicy.${blockType}WeekDays[2]`}
+                        label={t('Tue')}
+                        isDisabled={isReadOnly}
+                      />
                     </FlexItem>
                     <FlexItem>
-                      <CheckboxFieldGroupValidation name={`updatePolicy.${blockType}WeekDays[3]`} label={t('Wed')} />
+                      <CheckboxFieldGroupValidation
+                        name={`updatePolicy.${blockType}WeekDays[3]`}
+                        label={t('Wed')}
+                        isDisabled={isReadOnly}
+                      />
                     </FlexItem>
                     <FlexItem>
-                      <CheckboxFieldGroupValidation name={`updatePolicy.${blockType}WeekDays[4]`} label={t('Thu')} />
+                      <CheckboxFieldGroupValidation
+                        name={`updatePolicy.${blockType}WeekDays[4]`}
+                        label={t('Thu')}
+                        isDisabled={isReadOnly}
+                      />
                     </FlexItem>
                     <FlexItem>
-                      <CheckboxFieldGroupValidation name={`updatePolicy.${blockType}WeekDays[5]`} label={t('Fri')} />
+                      <CheckboxFieldGroupValidation
+                        name={`updatePolicy.${blockType}WeekDays[5]`}
+                        label={t('Fri')}
+                        isDisabled={isReadOnly}
+                      />
                     </FlexItem>
                     <FlexItem>
-                      <CheckboxFieldGroupValidation name={`updatePolicy.${blockType}WeekDays[6]`} label={t('Sat')} />
+                      <CheckboxFieldGroupValidation
+                        name={`updatePolicy.${blockType}WeekDays[6]`}
+                        label={t('Sat')}
+                        isDisabled={isReadOnly}
+                      />
                     </FlexItem>
                   </Flex>
                 </StackItem>
@@ -183,14 +225,14 @@ const ScheduleBlock = ({ blockType, updatePolicy, onScheduleModeSwitch, weekDayE
           </FieldArray>
         )}
         <StackItem style={{ maxWidth: 500 }}>
-          <ScheduleTimeZone blockType={blockType} />
+          <ScheduleTimeZone blockType={blockType} isReadOnly={isReadOnly} />
         </StackItem>
       </Stack>
     </FormGroupWithHelperText>
   );
 };
 
-const UpdateStepUpdatePolicy = () => {
+const UpdateStepUpdatePolicy = ({ isReadOnly }: { isReadOnly?: boolean }) => {
   const { t } = useTranslation();
 
   const {
@@ -217,6 +259,7 @@ const UpdateStepUpdatePolicy = () => {
         <CheckboxField
           label={t('Use different update schedules for downloading and installing updates')}
           name="updatePolicy.downloadAndInstallDiffer"
+          isDisabled={isReadOnly}
         />
       </StackItem>
 
@@ -226,6 +269,7 @@ const UpdateStepUpdatePolicy = () => {
           updatePolicy={updatePolicy}
           weekDayError={errors.updatePolicy?.downloadWeekDays}
           onScheduleModeSwitch={onSwitchToWeeklyMode}
+          isReadOnly={isReadOnly}
         />
       </StackItem>
 
@@ -236,6 +280,7 @@ const UpdateStepUpdatePolicy = () => {
             updatePolicy={updatePolicy}
             weekDayError={errors.updatePolicy?.installWeekDays}
             onScheduleModeSwitch={onSwitchToWeeklyMode}
+            isReadOnly={isReadOnly}
           />
         </StackItem>
       )}

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

@@ -39,18 +39,27 @@ import { getDisruptionBudgetValues, getRolloutPolicyValues, getUpdatePolicyValue
 import { FleetFormValues, UpdatePolicyForm } from '../../../types/deviceSpec';
 
 export const getValidationSchema = (t: TFunction) => {
-  return Yup.object<FleetFormValues>({
-    name: validKubernetesDnsSubdomain(t, { isRequired: true }),
-    osImage: validOsImage(t, { isFleet: true }),
-    fleetLabels: validLabelsSchema(t),
-    labels: validLabelsSchema(t),
-    configTemplates: validConfigTemplatesSchema(t),
-    applications: validApplicationsSchema(t),
-    systemdUnits: systemdUnitListValidationSchema(t),
-    rolloutPolicy: validFleetRolloutPolicySchema(t),
-    disruptionBudget: validFleetDisruptionBudgetSchema(t),
-    updatePolicy: validUpdatePolicySchema(t),
-  });
+  return Yup.lazy((values: FleetFormValues) =>
+    Yup.object<FleetFormValues>({
+      name: validKubernetesDnsSubdomain(t, { isRequired: true }),
+      osImage: validOsImage(t, { isFleet: true }),
+      fleetLabels: validLabelsSchema(t),
+      labels: validLabelsSchema(t),
+      configTemplates: validConfigTemplatesSchema(t),
+      applications: validApplicationsSchema(t),
+      systemdUnits: systemdUnitListValidationSchema(t),
+      rolloutPolicy:
+        !values.useBasicUpdateConfig && values.rolloutPolicy?.isAdvanced
+          ? validFleetRolloutPolicySchema(t)
+          : Yup.object(),
+      disruptionBudget:
+        !values.useBasicUpdateConfig && values.disruptionBudget?.isAdvanced
+          ? validFleetDisruptionBudgetSchema(t)
+          : Yup.object(),
+      updatePolicy:
+        !values.useBasicUpdateConfig && values.updatePolicy?.isAdvanced ? validUpdatePolicySchema(t) : Yup.object(),
+    }),
+  );
 };
 
 export const getFleetPatches = (currentFleet: Fleet, updatedFleet: FleetFormValues) => {
@@ -149,7 +158,10 @@ export const getFleetPatches = (currentFleet: Fleet, updatedFleet: FleetFormValu
   const updatePolicyPatches = getUpdatePolicyPatches(
     '/spec/template/spec/updatePolicy',
     currentFleet.spec.template.spec.updatePolicy,
-    updatedFleet.updatePolicy as Required<UpdatePolicyForm>,
+    {
+      ...updatedFleet.updatePolicy,
+      isAdvanced: !updatedFleet.useBasicUpdateConfig && updatedFleet.updatePolicy.isAdvanced,
+    } as Required<UpdatePolicyForm>,
   );
   allPatches = allPatches.concat(updatePolicyPatches);
   return allPatches;
@@ -194,19 +206,23 @@ 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);
-  }
-  if (values.updatePolicy.isAdvanced) {
-    fleet.spec.template.spec.updatePolicy = updatePolicyFormToApi(values.updatePolicy as Required<UpdatePolicyForm>);
+  if (!values.useBasicUpdateConfig) {
+    if (values.rolloutPolicy.isAdvanced || values.disruptionBudget.isAdvanced) {
+      fleet.spec.rolloutPolicy = getRolloutPolicyData(values);
+    }
+    if (values.updatePolicy.isAdvanced) {
+      fleet.spec.template.spec.updatePolicy = updatePolicyFormToApi(values.updatePolicy as Required<UpdatePolicyForm>);
+    }
   }
-
   return fleet;
 };
 
 export const getInitialValues = (fleet?: Fleet): FleetFormValues => {
   if (fleet) {
     const registerMicroShift = hasMicroshiftRegistrationConfig(fleet.spec.template.spec);
+    const rolloutPolicy = getRolloutPolicyValues(fleet.spec);
+    const disruptionBudget = getDisruptionBudgetValues(fleet.spec);
+    const updatePolicy = getUpdatePolicyValues(fleet.spec.template?.spec?.updatePolicy);
     return {
       name: fleet.metadata.name || '',
       labels: Object.keys(fleet.spec.selector?.matchLabels || {}).map((key) => ({
@@ -225,9 +241,10 @@ export const getInitialValues = (fleet?: Fleet): FleetFormValues => {
         exists: true,
       })),
       registerMicroShift,
-      rolloutPolicy: getRolloutPolicyValues(fleet.spec),
-      disruptionBudget: getDisruptionBudgetValues(fleet.spec),
-      updatePolicy: getUpdatePolicyValues(fleet.spec.template?.spec?.updatePolicy),
+      rolloutPolicy,
+      disruptionBudget,
+      updatePolicy,
+      useBasicUpdateConfig: !rolloutPolicy.isAdvanced && !disruptionBudget.isAdvanced && !updatePolicy.isAdvanced,
     };
   }
 
@@ -243,5 +260,6 @@ export const getInitialValues = (fleet?: Fleet): FleetFormValues => {
     rolloutPolicy: getRolloutPolicyValues(undefined),
     disruptionBudget: getDisruptionBudgetValues(undefined),
     updatePolicy: getUpdatePolicyValues(undefined),
+    useBasicUpdateConfig: true,
   };
 };

package/src/components/Fleet/DeleteFleetModal/DeleteFleetModal.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { Alert, Button, Modal, Stack, StackItem } from '@patternfly/react-core';
 import { Trans } from 'react-i18next';
+import { Alert, Button, Stack, StackItem } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core/next';
 
 import { useTranslation } from '../../../hooks/useTranslation';
 import { useFetch } from '../../../hooks/useFetch';
@@ -23,14 +24,34 @@ const DeleteFleetModal = ({ fleetId, onClose }: { fleetId: string; onClose: (has
 
   return (
     <Modal
-      title={t('Delete fleet ?')}
       isOpen
       onClose={() => {
         onClose();
       }}
       variant="small"
-      titleIconVariant="warning"
-      actions={[
+    >
+      <ModalHeader title={t('Delete fleet?')} titleIconVariant="warning" />
+      <ModalBody>
+        <Stack hasGutter>
+          <StackItem>
+            <Trans t={t}>
+              <strong>{fleetId}</strong> will be deleted permanently. If the device selector of a remaining fleet
+              matches a device in <strong>{fleetId}</strong>, the device will be moved to the new fleet. If there&apos;s
+              no matching fleet for a device, it will be unlinked from any fleet.
+            </Trans>
+          </StackItem>
+          <StackItem>{t('Are you sure you want to delete?')}</StackItem>
+          {error && (
+            <StackItem>
+              <Alert isInline variant="danger" title={t('An error occurred')}>
+                <div>{error.text}</div>
+                {error.details && <div>{t('Details: {{errorDetails}}', { errorDetails: error.details })}</div>}
+              </Alert>
+            </StackItem>
+          )}
+        </Stack>
+      </ModalBody>
+      <ModalFooter>
         <Button
           key="confirm"
           variant="danger"
@@ -49,7 +70,7 @@ const DeleteFleetModal = ({ fleetId, onClose }: { fleetId: string; onClose: (has
           }}
         >
           {t('Delete fleet')}
-        </Button>,
+        </Button>
         <Button
           key="cancel"
           variant="link"
@@ -59,29 +80,8 @@ const DeleteFleetModal = ({ fleetId, onClose }: { fleetId: string; onClose: (has
           isDisabled={isDeleting}
         >
           {t('Cancel')}
-        </Button>,
-      ]}
-    >
-      <Stack hasGutter>
-        <StackItem>
-          <Trans t={t}>
-            Are you sure you want to delete fleet <strong>{fleetId}</strong>?
-          </Trans>
-        </StackItem>
-        <StackItem>
-          {t(
-            'Devices bound to this fleet may join another fleet matching their labels, otherwise they will remain unlinked from any fleet.',
-          )}
-        </StackItem>
-        {error && (
-          <StackItem>
-            <Alert isInline variant="danger" title={t('An error occurred')}>
-              <div>{error.text}</div>
-              {error.details && <div>{t('Details: {{errorDetails}}', { errorDetails: error.details })}</div>}
-            </Alert>
-          </StackItem>
-        )}
-      </Stack>
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

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

@@ -11,7 +11,7 @@ import {
   GridItem,
 } from '@patternfly/react-core';
 
-import { Fleet } from '@flightctl/types';
+import { Fleet, ResourceKind } from '@flightctl/types';
 import FlightControlDescriptionList from '../../common/FlightCtlDescriptionList';
 import LabelsView from '../../common/LabelsView';
 import { getDateDisplay } from '../../../utils/dates';
@@ -22,6 +22,7 @@ import FleetOwnerLink from './FleetOwnerLink';
 import FleetDevicesCharts from './FleetDevicesCharts';
 import FleetStatus from '../FleetStatus';
 import FleetDevicesCount from './FleetDevicesCount';
+import EventsCard from '../../Events/EventsCard';
 
 const FleetDetailsContent = ({ fleet }: { fleet: Fleet }) => {
   const { t } = useTranslation();
@@ -31,7 +32,7 @@ const FleetDetailsContent = ({ fleet }: { fleet: Fleet }) => {
 
   return (
     <Grid hasGutter>
-      <GridItem md={12}>
+      <GridItem md={9}>
         <Card>
           <CardTitle>{t('Details')}</CardTitle>
           <CardBody>
@@ -81,18 +82,18 @@ const FleetDetailsContent = ({ fleet }: { fleet: Fleet }) => {
             </FlightControlDescriptionList>
           </CardBody>
         </Card>
-      </GridItem>
-      {devicesSummary && (
-        <GridItem md={12}>
-          <Card>
+        {devicesSummary && (
+          <Card className="pf-v5-u-mt-md">
             <CardTitle>{t('Fleet devices')}</CardTitle>
-
             <CardBody>
               <FleetDevicesCharts fleetId={fleetId} devicesSummary={devicesSummary} />
             </CardBody>
           </Card>
-        </GridItem>
-      )}
+        )}
+      </GridItem>
+      <GridItem md={3}>
+        <EventsCard kind={ResourceKind.FLEET} objId={fleetId} />
+      </GridItem>
     </Grid>
   );
 };

package/src/components/Fleet/FleetDetails/{FleetDetails.tsx → FleetDetailsPage.tsx}

@@ -1,25 +1,28 @@
 import React from 'react';
-import { DropdownItem, DropdownList } from '@patternfly/react-core';
+import { DropdownItem, DropdownList, Nav, NavList } from '@patternfly/react-core';
 import { Fleet } from '@flightctl/types';
 
+import { RESOURCE, VERB } from '../../../types/rbac';
+import PageWithPermissions from '../../common/PageWithPermissions';
 import { useFetchPeriodically } from '../../../hooks/useFetchPeriodically';
-import DetailsPage from '../../DetailsPage/DetailsPage';
-import DetailsPageActions from '../../DetailsPage/DetailsPageActions';
-import FleetDetailsContent from './FleetDetailsContent';
 import { useTranslation } from '../../../hooks/useTranslation';
 import { ROUTE, useNavigate } from '../../../hooks/useNavigate';
+import { useAccessReview } from '../../../hooks/useAccessReview';
 import { useAppContext } from '../../../hooks/useAppContext';
+import NavItem from '../../NavItem/NavItem';
+import DetailsPage from '../../DetailsPage/DetailsPage';
+import DetailsPageActions from '../../DetailsPage/DetailsPageActions';
 import DeleteFleetModal from '../DeleteFleetModal/DeleteFleetModal';
-import { useAccessReview } from '../../../hooks/useAccessReview';
-import { RESOURCE, VERB } from '../../../types/rbac';
-import PageWithPermissions from '../../common/PageWithPermissions';
+import FleetDetailsContent from './FleetDetailsContent';
+import YamlEditor from '../../common/CodeEditor/YamlEditor';
 
-const FleetDetails = () => {
+const FleetDetailPage = () => {
   const { t } = useTranslation();
 
   const {
-    router: { useParams },
+    router: { useParams, Routes, Route, Navigate },
   } = useAppContext();
+
   const { fleetId } = useParams() as { fleetId: string };
   const [fleet, isLoading, error, refetch] = useFetchPeriodically<Required<Fleet>>({
     endpoint: `fleets/${fleetId}?addDevicesSummary=true`,
@@ -32,6 +35,7 @@ const FleetDetails = () => {
   const [canEdit] = useAccessReview(RESOURCE.FLEET, VERB.PATCH);
 
   const isManaged = !!fleet?.metadata?.owner;
+  const hasActions = canDelete || (canEdit && !isManaged) || isManaged;
 
   return (
     <DetailsPage
@@ -41,25 +45,29 @@ const FleetDetails = () => {
       resourceLink={ROUTE.FLEETS}
       resourceType="Fleets"
       resourceTypeLabel={t('Fleets')}
+      nav={
+        <Nav variant="tertiary">
+          <NavList>
+            <NavItem to="details">{t('Details')}</NavItem>
+            <NavItem to="yaml">{t('YAML')}</NavItem>
+          </NavList>
+        </Nav>
+      }
       actions={
-        (canDelete || canEdit) && (
+        hasActions && (
           <DetailsPageActions>
             <DropdownList>
-              {canEdit && (
-                <DropdownItem
-                  isAriaDisabled={isManaged}
-                  tooltipProps={
-                    isManaged
-                      ? {
-                          content: t('Fleets managed by a resource sync cannot be edited'),
-                        }
-                      : undefined
-                  }
-                  onClick={() => navigate({ route: ROUTE.FLEET_EDIT, postfix: fleetId })}
-                >
-                  {t('Edit fleet')}
+              {isManaged && (
+                <DropdownItem onClick={() => navigate({ route: ROUTE.FLEET_EDIT, postfix: fleetId })}>
+                  {t('View fleet configurations')}
+                </DropdownItem>
+              )}
+              {canEdit && !isManaged && (
+                <DropdownItem onClick={() => navigate({ route: ROUTE.FLEET_EDIT, postfix: fleetId })}>
+                  {t('Edit fleet configurations')}
                 </DropdownItem>
               )}
+
               {canDelete && (
                 <DropdownItem
                   title={t('Delete fleet')}
@@ -87,7 +95,14 @@ const FleetDetails = () => {
     >
       {fleet && (
         <>
-          <FleetDetailsContent fleet={fleet} />
+          <Routes>
+            <Route index element={<Navigate to="details" replace />} />
+            <Route path="details" element={<FleetDetailsContent fleet={fleet} />} />
+            <Route
+              path="yaml"
+              element={<YamlEditor filename={fleet.metadata.name || 'fleet'} apiObj={fleet} refetch={refetch} />}
+            />
+          </Routes>
           {isDeleteModalOpen && (
             <DeleteFleetModal
               fleetId={fleetId}
@@ -110,7 +125,7 @@ const FleetDetailsWithPermissions = () => {
   const [allowed, loading] = useAccessReview(RESOURCE.FLEET, VERB.GET);
   return (
     <PageWithPermissions allowed={allowed} loading={loading}>
-      <FleetDetails />
+      <FleetDetailPage />
     </PageWithPermissions>
   );
 };

package/src/components/Fleet/FleetRow.tsx

@@ -26,17 +26,16 @@ const useFleetActions = (fleetName: string, isManaged: boolean, canEdit: boolean
   const navigate = useNavigate();
   const { t } = useTranslation();
 
-  if (isManaged || !canEdit) {
-    actions.push({
-      title: t("View fleet's configuration"),
-      onClick: () => navigate({ route: ROUTE.FLEET_DETAILS, postfix: fleetName }),
-    });
-  } else {
-    actions.push({
-      title: t('Edit fleet'),
-      onClick: () => navigate({ route: ROUTE.FLEET_EDIT, postfix: fleetName }),
-    });
-  }
+  actions.push({
+    title: t('View fleet details'),
+    onClick: () => navigate({ route: ROUTE.FLEET_DETAILS, postfix: fleetName }),
+  });
+
+  // If users can't edit, the wizard will be in read-only mode
+  actions.push({
+    title: isManaged || !canEdit ? t('View fleet configurations') : t('Edit fleet configurations'),
+    onClick: () => navigate({ route: ROUTE.FLEET_EDIT, postfix: fleetName }),
+  });
   return actions;
 };