@flightctl/ui-components 0.0.10 → 0.4.0-rc2

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

@@ -5,28 +5,40 @@ import { FleetFormValues } from './types';
 import { API_VERSION } from '../../../constants';
 import { toAPILabel } from '../../../utils/labels';
 import {
-  maxLengthString,
+  systemdUnitListValidationSchema,
   validApplicationsSchema,
   validConfigTemplatesSchema,
   validKubernetesDnsSubdomain,
   validLabelsSchema,
+  validOsImage,
 } from '../../form/validations';
-import { appendJSONPatch, getApplicationPatches, getLabelPatches, toAPIApplication } from '../../../utils/patch';
 import {
+  appendJSONPatch,
+  getApplicationPatches,
+  getLabelPatches,
+  getStringListPatches,
+  toAPIApplication,
+} from '../../../utils/patch';
+import {
+  ACMCrdConfig,
+  ACMImportConfig,
+  MicroshiftRegistrationHook,
   getAPIConfig,
   getApplicationValues,
   getConfigTemplatesValues,
   getDeviceSpecConfigPatches,
+  hasMicroshiftRegistrationConfig,
 } from '../../Device/EditDeviceWizard/deviceSpecUtils';
 
 export const getValidationSchema = (t: TFunction) => {
   return Yup.object<FleetFormValues>({
     name: validKubernetesDnsSubdomain(t, { isRequired: true }),
-    osImage: maxLengthString(t, { fieldName: t('System image'), maxLength: 2048 }),
+    osImage: validOsImage(t, { isFleet: true }),
     fleetLabels: validLabelsSchema(t),
     labels: validLabelsSchema(t),
     configTemplates: validConfigTemplatesSchema(t),
     applications: validApplicationsSchema(t),
+    systemdUnits: systemdUnitListValidationSchema(t),
   });
 };
 
@@ -94,6 +106,9 @@ export const getFleetPatches = (currentFleet: Fleet, updatedFleet: FleetFormValu
   // Configurations
   const currentConfigs = currentFleet.spec.template.spec.config || [];
   const newConfigs = updatedFleet.configTemplates.map(getAPIConfig);
+  if (updatedFleet.registerMicroShift) {
+    newConfigs.push(ACMCrdConfig, ACMImportConfig, MicroshiftRegistrationHook);
+  }
   const configPatches = getDeviceSpecConfigPatches(currentConfigs, newConfigs, '/spec/template/spec/config');
   allPatches = allPatches.concat(configPatches);
 
@@ -105,56 +120,93 @@ export const getFleetPatches = (currentFleet: Fleet, updatedFleet: FleetFormValu
   );
   allPatches = allPatches.concat(appPatches);
 
+  // Systemd services
+  const unitPatches = getStringListPatches(
+    '/spec/template/spec/systemd',
+    currentFleet.spec.template.spec.systemd?.matchPatterns || [],
+    updatedFleet.systemdUnits.map((unit) => unit.pattern),
+    (list) => ({ matchPatterns: list }),
+  );
+  allPatches = allPatches.concat(unitPatches);
+
   return allPatches;
 };
 
-export const getFleetResource = (values: FleetFormValues): Fleet => ({
-  apiVersion: API_VERSION,
-  kind: 'Fleet',
-  metadata: {
-    name: values.name,
-    labels: toAPILabel(values.fleetLabels),
-  },
-  spec: {
-    selector: {
-      matchLabels: toAPILabel(values.labels),
+export const getFleetResource = (values: FleetFormValues): Fleet => {
+  const systemdPatterns =
+    values.systemdUnits.length === 0
+      ? undefined
+      : {
+          systemd: {
+            matchPatterns: values.systemdUnits.map((unit) => unit.pattern),
+          },
+        };
+  const fleet: Fleet = {
+    apiVersion: API_VERSION,
+    kind: 'Fleet',
+    metadata: {
+      name: values.name,
+      labels: toAPILabel(values.fleetLabels),
     },
-    template: {
-      metadata: {
-        labels: {
-          fleet: values.name,
-        },
+    spec: {
+      selector: {
+        matchLabels: toAPILabel(values.labels),
       },
-      spec: {
-        os: values.osImage ? { image: values.osImage || '' } : undefined,
-        config: values.configTemplates.map(getAPIConfig),
-        applications: values.applications.map(toAPIApplication),
+      template: {
+        metadata: {
+          labels: {
+            fleet: values.name,
+          },
+        },
+        spec: {
+          os: values.osImage ? { image: values.osImage || '' } : undefined,
+          config: values.configTemplates.map(getAPIConfig),
+          applications: values.applications.map(toAPIApplication),
+          ...systemdPatterns,
+        },
       },
     },
-  },
-});
-
-export const getInitialValues = (fleet?: Fleet): FleetFormValues =>
-  fleet
-    ? {
-        name: fleet.metadata.name || '',
-        labels: Object.keys(fleet.spec.selector?.matchLabels || {}).map((key) => ({
-          key,
-          value: fleet.spec.selector?.matchLabels?.[key],
-        })),
-        fleetLabels: Object.keys(fleet.metadata.labels || {}).map((key) => ({
-          key,
-          value: fleet.metadata.labels?.[key],
-        })),
-        osImage: fleet.spec.template.spec.os?.image || '',
-        configTemplates: getConfigTemplatesValues(fleet.spec.template.spec),
-        applications: getApplicationValues(fleet.spec.template.spec),
-      }
-    : {
-        name: '',
-        labels: [],
-        fleetLabels: [],
-        osImage: '',
-        configTemplates: [],
-        applications: [],
-      };
+  };
+
+  if (values.registerMicroShift) {
+    fleet.spec.template.spec.config?.push(ACMCrdConfig, ACMImportConfig, MicroshiftRegistrationHook);
+  }
+
+  return fleet;
+};
+
+export const getInitialValues = (fleet?: Fleet): FleetFormValues => {
+  if (fleet) {
+    const registerMicroShift = hasMicroshiftRegistrationConfig(fleet.spec.template.spec);
+    return {
+      name: fleet.metadata.name || '',
+      labels: Object.keys(fleet.spec.selector?.matchLabels || {}).map((key) => ({
+        key,
+        value: fleet.spec.selector?.matchLabels?.[key],
+      })),
+      fleetLabels: Object.keys(fleet.metadata.labels || {}).map((key) => ({
+        key,
+        value: fleet.metadata.labels?.[key],
+      })),
+      osImage: fleet.spec.template.spec.os?.image || '',
+      configTemplates: getConfigTemplatesValues(fleet.spec.template.spec, registerMicroShift),
+      applications: getApplicationValues(fleet.spec.template.spec),
+      systemdUnits: (fleet.spec.template.spec.systemd?.matchPatterns || []).map((p) => ({
+        pattern: p,
+        exists: true,
+      })),
+      registerMicroShift,
+    };
+  }
+
+  return {
+    name: '',
+    labels: [],
+    fleetLabels: [],
+    osImage: '',
+    configTemplates: [],
+    applications: [],
+    systemdUnits: [],
+    registerMicroShift: false,
+  };
+};

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

@@ -10,6 +10,9 @@ import { useTranslation } from '../../../hooks/useTranslation';
 import { ROUTE, useNavigate } from '../../../hooks/useNavigate';
 import { useAppContext } from '../../../hooks/useAppContext';
 import DeleteFleetModal from '../DeleteFleetModal/DeleteFleetModal';
+import { useAccessReview } from '../../../hooks/useAccessReview';
+import { RESOURCE, VERB } from '../../../types/rbac';
+import PageWithPermissions from '../../common/PageWithPermissions';
 
 const FleetDetails = () => {
   const { t } = useTranslation();
@@ -25,6 +28,9 @@ const FleetDetails = () => {
 
   const navigate = useNavigate();
 
+  const [canDelete] = useAccessReview(RESOURCE.FLEET, VERB.DELETE);
+  const [canEdit] = useAccessReview(RESOURCE.FLEET, VERB.PATCH);
+
   const isManaged = !!fleet?.metadata?.owner;
 
   return (
@@ -36,41 +42,47 @@ const FleetDetails = () => {
       resourceType="Fleets"
       resourceTypeLabel={t('Fleets')}
       actions={
-        <DetailsPageActions>
-          <DropdownList>
-            <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')}
-            </DropdownItem>
-            <DropdownItem
-              title={t('Delete fleet')}
-              onClick={() => {
-                setIsDeleteModalOpen(true);
-              }}
-              isAriaDisabled={isManaged}
-              tooltipProps={
-                isManaged
-                  ? {
-                      content: t(
-                        "This fleet is managed by a resource sync and cannot be directly deleted. Either remove this fleet's definition from the resource sync configuration, or delete the resource sync first.",
-                      ),
-                    }
-                  : undefined
-              }
-            >
-              {t('Delete fleet')}
-            </DropdownItem>
-          </DropdownList>
-        </DetailsPageActions>
+        (canDelete || canEdit) && (
+          <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')}
+                </DropdownItem>
+              )}
+              {canDelete && (
+                <DropdownItem
+                  title={t('Delete fleet')}
+                  onClick={() => {
+                    setIsDeleteModalOpen(true);
+                  }}
+                  isAriaDisabled={isManaged}
+                  tooltipProps={
+                    isManaged
+                      ? {
+                          content: t(
+                            "This fleet is managed by a resource sync and cannot be directly deleted. Either remove this fleet's definition from the resource sync configuration, or delete the resource sync first.",
+                          ),
+                        }
+                      : undefined
+                  }
+                >
+                  {t('Delete fleet')}
+                </DropdownItem>
+              )}
+            </DropdownList>
+          </DetailsPageActions>
+        )
       }
     >
       {fleet && (
@@ -94,4 +106,13 @@ const FleetDetails = () => {
   );
 };
 
-export default FleetDetails;
+const FleetDetailsWithPermissions = () => {
+  const [allowed, loading] = useAccessReview(RESOURCE.FLEET, VERB.GET);
+  return (
+    <PageWithPermissions allowed={allowed} loading={loading}>
+      <FleetDetails />
+    </PageWithPermissions>
+  );
+};
+
+export default FleetDetailsWithPermissions;

package/src/components/Fleet/FleetResourceSyncs.tsx

@@ -7,14 +7,16 @@ import {
   Stack,
   StackItem,
 } from '@patternfly/react-core';
-import { TFunction, Trans } from 'react-i18next';
+import { Trans } from 'react-i18next';
 
-import { Fleet, ResourceSync, ResourceSyncList } from '@flightctl/types';
+import { ConditionType, ResourceSync, ResourceSyncList } from '@flightctl/types';
 
 import { useTranslation } from '../../hooks/useTranslation';
 import { useFetchPeriodically } from '../../hooks/useFetchPeriodically';
 import { Link, ROUTE } from '../../hooks/useNavigate';
 import { getLastTransitionTime, getRepositorySyncStatus } from '../../utils/status/repository';
+import { useAccessReview } from '../../hooks/useAccessReview';
+import { RESOURCE, VERB } from '../../types/rbac';
 
 // Entries format: <rs0Name>@@<rs0LastSync>,<rs1Name>@@<rs1LastSync>,...
 const RS_DISMISS_STORAGE_KEY = 'FC_DISMISS_SYNCS';
@@ -39,11 +41,16 @@ const isDismissed = (rs: ResourceSync) => {
   return dismissedEntries.includes(rsDismissKey);
 };
 
-const hasError = (rs: ResourceSync, t: TFunction) => {
-  const rsStatus = getRepositorySyncStatus(rs, t);
+const hasError = (rs: ResourceSync) => {
+  const rsStatus = getRepositorySyncStatus(rs, (msg: string) => msg);
   return ['Not parsed', 'Not synced', 'Not accessible'].includes(rsStatus.status);
 };
 
+const isPending = (rs: ResourceSync) => {
+  const rsStatus = getRepositorySyncStatus(rs, (msg: string) => msg);
+  return rsStatus?.status !== ConditionType.ResourceSyncSynced;
+};
+
 const ResourceSyncInfoAlert = ({ rs }: { rs: ResourceSync }) => {
   const { t } = useTranslation();
   const name = rs.metadata.name as string;
@@ -108,54 +115,59 @@ const ResourceSyncErrorAlert = ({ rs, refetch }: { rs: ResourceSync; refetch: Vo
   );
 };
 
-const FleetResourceSyncs = ({ fleets }: { fleets: Fleet[] }) => {
-  const { t } = useTranslation();
+const getVisibleResourceSyncs = (rsList: ResourceSync[]) => {
+  const pendingRs: ResourceSync[] = [];
+  const errorRs: ResourceSync[] = [];
+
+  rsList.forEach((rs) => {
+    if (isDismissed(rs)) {
+      return;
+    }
+    if (hasError(rs)) {
+      errorRs.push(rs);
+    } else if (isPending(rs)) {
+      pendingRs.push(rs);
+    }
+  });
+  return { pendingRs, errorRs };
+};
 
-  const [rsList, , , rsRefetch] = useFetchPeriodically<ResourceSyncList>({ endpoint: 'resourcesyncs' });
+const FleetResourceSyncs = () => {
+  const [rsList, , , rsRefetch] = useFetchPeriodically<ResourceSyncList>({
+    endpoint: 'resourcesyncs',
+  });
 
   // TODO Remove the client-side filtering once the API filter is available
-  const pendingResourceSyncs = React.useMemo(
-    () => [
-      ...(rsList?.items || []).filter((rs) => {
-        if (isDismissed(rs)) {
-          return false;
-        }
-        if (hasError(rs, t)) {
-          return true;
-        }
-        return !fleets.some((fleet) => fleet.metadata.owner === `ResourceSync/${rs.metadata.name}`);
-      }),
-    ],
-    [fleets, rsList, t],
-  );
+  const { pendingRs, errorRs } = React.useMemo(() => getVisibleResourceSyncs(rsList?.items || []), [rsList]);
 
-  if (pendingResourceSyncs.length === 0) {
+  if (pendingRs.length === 0 && errorRs.length === 0) {
     return null;
   }
   return (
     <PageSection variant={PageSectionVariants.light}>
       <Stack hasGutter>
-        {pendingResourceSyncs
-          .filter((rs) => !hasError(rs, t))
-          .map((rs) => {
-            return (
-              <StackItem key={rs.metadata.name as string}>
-                <ResourceSyncInfoAlert rs={rs} />
-              </StackItem>
-            );
-          })}
-        {pendingResourceSyncs
-          .filter((rs) => hasError(rs, t))
-          .map((rs) => {
-            return (
-              <StackItem key={rs.metadata.name as string}>
-                <ResourceSyncErrorAlert rs={rs} refetch={rsRefetch} />
-              </StackItem>
-            );
-          })}
+        {errorRs.map((rs) => {
+          return (
+            <StackItem key={rs.metadata.name as string}>
+              <ResourceSyncInfoAlert rs={rs} />
+            </StackItem>
+          );
+        })}
+        {pendingRs.map((rs) => {
+          return (
+            <StackItem key={rs.metadata.name as string}>
+              <ResourceSyncErrorAlert rs={rs} refetch={rsRefetch} />
+            </StackItem>
+          );
+        })}
       </Stack>
     </PageSection>
   );
 };
 
-export default FleetResourceSyncs;
+const FleetResourceSyncsWithPermissions = () => {
+  const [allowed] = useAccessReview(RESOURCE.RESOURCE_SYNC, VERB.LIST);
+  return allowed && <FleetResourceSyncs />;
+};
+
+export default FleetResourceSyncsWithPermissions;

package/src/components/Fleet/FleetRow.tsx

@@ -15,14 +15,16 @@ type FleetRowProps = {
   onRowSelect: (fleet: Fleet) => OnSelect;
   isRowSelected: (fleet: Fleet) => boolean;
   onDeleteClick: () => void;
+  canDelete: boolean;
+  canEdit: boolean;
 };
 
-const useFleetActions = (fleetName: string, isManaged: boolean) => {
+const useFleetActions = (fleetName: string, isManaged: boolean, canEdit: boolean) => {
   const actions: IAction[] = [];
   const navigate = useNavigate();
   const { t } = useTranslation();
 
-  if (isManaged) {
+  if (isManaged || !canEdit) {
     actions.push({
       title: t("View fleet's configuration"),
       onClick: () => navigate({ route: ROUTE.FLEET_DETAILS, postfix: fleetName }),
@@ -36,24 +38,34 @@ const useFleetActions = (fleetName: string, isManaged: boolean) => {
   return actions;
 };
 
-const FleetRow: React.FC<FleetRowProps> = ({ fleet, rowIndex, onRowSelect, isRowSelected, onDeleteClick }) => {
+const FleetRow: React.FC<FleetRowProps> = ({
+  fleet,
+  rowIndex,
+  onRowSelect,
+  isRowSelected,
+  onDeleteClick,
+  canDelete,
+  canEdit,
+}) => {
   const { t } = useTranslation();
   const fleetName = fleet.metadata.name || '';
 
   const isManaged = !!fleet.metadata?.owner;
-  const actions = useFleetActions(fleetName, isManaged);
-  actions.push({
-    title: t('Delete fleet'),
-    onClick: onDeleteClick,
-    tooltipProps: isManaged
-      ? {
-          content: t(
-            "This fleet is managed by a resource sync and cannot be directly deleted. Either remove this fleet's definition from the resource sync configuration, or delete the resource sync first.",
-          ),
-        }
-      : undefined,
-    isAriaDisabled: isManaged,
-  });
+  const actions = useFleetActions(fleetName, isManaged, canEdit);
+  if (canDelete) {
+    actions.push({
+      title: t('Delete fleet'),
+      onClick: onDeleteClick,
+      tooltipProps: isManaged
+        ? {
+            content: t(
+              "This fleet is managed by a resource sync and cannot be directly deleted. Either remove this fleet's definition from the resource sync configuration, or delete the resource sync first.",
+            ),
+          }
+        : undefined,
+      isAriaDisabled: isManaged,
+    });
+  }
 
   return (
     <Tr>