@flightctl/ui-components 0.0.3 → 0.0.5

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

@@ -0,0 +1,226 @@
+import ConditionsTable from '../../DetailsPage/Tables/ConditionsTable';
+import DetailsPage from '../../DetailsPage/DetailsPage';
+import IntegrityDetails from '../../DetailsPage/Tables/IntegrityDetails';
+import LabelsView from '../../common/LabelsView';
+import { useFetchPeriodically } from '../../../hooks/useFetchPeriodically';
+import { timeSinceText } from '../../../utils/dates';
+import {
+  EnrollmentRequestStatus as EnrollmentRequestStatusType,
+  getApprovalStatus,
+} from '../../../utils/status/enrollmentRequest';
+import {
+  Bullseye,
+  Card,
+  CardBody,
+  CardTitle,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DropdownItem,
+  DropdownList,
+  Grid,
+  GridItem,
+  TextArea,
+} from '@patternfly/react-core';
+import { EnrollmentRequest } from '@flightctl/types';
+import * as React from 'react';
+
+import { useFetch } from '../../../hooks/useFetch';
+import ApproveDeviceModal from '../../modals/ApproveDeviceModal/ApproveDeviceModal';
+import DetailsPageCard, { DetailsPageCardBody } from '../../DetailsPage/DetailsPageCard';
+import DetailsPageActions, { useDeleteAction } from '../../DetailsPage/DetailsPageActions';
+import EnrollmentRequestStatus from '../../Status/EnrollmentRequestStatus';
+import WithHelperText from '../../common/WithHelperText';
+import FlightControlDescriptionList from '../../common/FlightCtlDescriptionList';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { ROUTE, useNavigate } from '../../../hooks/useNavigate';
+import { useAppContext } from '../../../hooks/useAppContext';
+
+import './EnrollmentRequestDetails.css';
+
+const EnrollmentRequestDetails = () => {
+  const { t } = useTranslation();
+  const {
+    router: { useParams },
+  } = useAppContext();
+  const { enrollmentRequestId } = useParams() as { enrollmentRequestId: string };
+  const [er, loading, error, refetch] = useFetchPeriodically<EnrollmentRequest>({
+    endpoint: `enrollmentrequests/${enrollmentRequestId}`,
+  });
+  const { remove } = useFetch();
+  const navigate = useNavigate();
+  const [isApprovalModalOpen, setIsApprovalModalOpen] = React.useState(false);
+
+  const { deleteAction, deleteModal } = useDeleteAction({
+    resourceName: enrollmentRequestId,
+    resourceType: 'Enrollment request',
+    onDelete: async () => {
+      await remove(`enrollmentrequests/${enrollmentRequestId}`);
+      navigate(ROUTE.DEVICES);
+    },
+  });
+
+  const approvalStatus = er ? getApprovalStatus(er) : '-';
+  const isPendingApproval = approvalStatus === EnrollmentRequestStatusType.Pending;
+
+  return (
+    <DetailsPage
+      loading={loading}
+      error={error}
+      id={er?.metadata.name as string}
+      resourceLink={ROUTE.DEVICES}
+      resourceType="Devices"
+      resourceTypeLabel={t('Devices')}
+      actions={
+        <DetailsPageActions>
+          <DropdownList>
+            <DropdownItem onClick={() => setIsApprovalModalOpen(true)} isDisabled={!isPendingApproval}>
+              {t('Approve')}
+            </DropdownItem>
+            {deleteAction}
+          </DropdownList>
+        </DetailsPageActions>
+      }
+    >
+      <Grid hasGutter>
+        <GridItem md={12}>
+          <Card>
+            <CardTitle>{t('Details')}</CardTitle>
+            <CardBody>
+              <FlightControlDescriptionList columnModifier={{ lg: '3Col' }}>
+                <DescriptionListGroup>
+                  <DescriptionListTerm>{t('Name')}</DescriptionListTerm>
+                  <DescriptionListDescription>{er?.metadata.name || '-'}</DescriptionListDescription>
+                </DescriptionListGroup>
+                <DescriptionListGroup>
+                  <DescriptionListTerm>{t('Last seen')}</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    {timeSinceText(t, er?.metadata.creationTimestamp)}
+                  </DescriptionListDescription>
+                </DescriptionListGroup>
+                <DescriptionListGroup>
+                  <DescriptionListTerm>{t('OS')}</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    {er?.spec?.deviceStatus?.systemInfo?.operatingSystem || '-'}
+                  </DescriptionListDescription>
+                </DescriptionListGroup>
+                <DescriptionListGroup>
+                  <DescriptionListTerm>{t('Architecture')}</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    {er?.spec?.deviceStatus?.systemInfo?.architecture || '-'}
+                  </DescriptionListDescription>
+                </DescriptionListGroup>
+                <DescriptionListGroup>
+                  <DescriptionListTerm>{t('Labels')}</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    <LabelsView prefix="er" labels={er?.metadata.labels} />
+                  </DescriptionListDescription>
+                </DescriptionListGroup>
+                <DescriptionListGroup>
+                  <DescriptionListTerm>{t('Status')}</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    <EnrollmentRequestStatus er={er} />
+                  </DescriptionListDescription>
+                </DescriptionListGroup>
+              </FlightControlDescriptionList>
+            </CardBody>
+          </Card>
+        </GridItem>
+        <GridItem md={6}>
+          <DetailsPageCard>
+            <CardTitle>
+              <WithHelperText
+                showLabel
+                ariaLabel={t('Certificate signing request')}
+                content={t('A PEM-encoded PKCS#10 certificate signing request.')}
+              />
+            </CardTitle>
+            <DetailsPageCardBody>
+              {er?.spec.csr ? (
+                <TextArea
+                  aria-label={t('Certificate Signing Request')}
+                  value={er.spec.csr}
+                  readOnlyVariant="plain"
+                  autoResize
+                  className="fctl-enrollment-details__text-area"
+                />
+              ) : (
+                <Bullseye>{t('Not available')}</Bullseye>
+              )}
+            </DetailsPageCardBody>
+          </DetailsPageCard>
+        </GridItem>
+        <GridItem md={6}>
+          <DetailsPageCard>
+            <CardTitle>
+              <WithHelperText showLabel ariaLabel={t('Certificate')} content={t('A PEM-encoded signed certificate.')} />
+            </CardTitle>
+            <DetailsPageCardBody>
+              {er?.status?.certificate ? (
+                <TextArea
+                  aria-label={t('Certificate')}
+                  value={er.status.certificate}
+                  readOnlyVariant="plain"
+                  autoResize
+                  className="fctl-enrollment-details__text-area"
+                />
+              ) : (
+                <Bullseye>{t('Not available')}</Bullseye>
+              )}
+            </DetailsPageCardBody>
+          </DetailsPageCard>
+        </GridItem>
+        <GridItem md={6}>
+          <DetailsPageCard>
+            <CardTitle>{t('Conditions')}</CardTitle>
+            <DetailsPageCardBody>
+              {er && (
+                <ConditionsTable
+                  ariaLabel={t('Enrollment request conditions table')}
+                  conditions={er.status?.conditions}
+                />
+              )}
+            </DetailsPageCardBody>
+          </DetailsPageCard>
+        </GridItem>
+        {!isPendingApproval && (
+          <GridItem md={6}>
+            <DetailsPageCard>
+              <CardTitle>{t('Device conditions')}</CardTitle>
+              <DetailsPageCardBody>
+                {er && (
+                  <ConditionsTable
+                    ariaLabel={t('Device conditions table')}
+                    conditions={er.spec.deviceStatus?.conditions}
+                  />
+                )}
+              </DetailsPageCardBody>
+            </DetailsPageCard>
+          </GridItem>
+        )}
+        {!isPendingApproval && (
+          <GridItem md={6}>
+            <DetailsPageCard>
+              <CardTitle>{t('System integrity details')}</CardTitle>
+              <DetailsPageCardBody>
+                {er && <IntegrityDetails integrity={er.spec.deviceStatus?.integrity} />}
+              </DetailsPageCardBody>
+            </DetailsPageCard>
+          </GridItem>
+        )}
+      </Grid>
+      {er && isApprovalModalOpen && (
+        <ApproveDeviceModal
+          enrollmentRequest={er}
+          onClose={(updateList) => {
+            setIsApprovalModalOpen(false);
+            updateList && refetch();
+          }}
+        />
+      )}
+      {deleteModal}
+    </DetailsPage>
+  );
+};
+
+export default EnrollmentRequestDetails;

package/src/components/EnrollmentRequest/EnrollmentRequestTableRow.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { ActionsColumn, OnSelect, Td, Tr } from '@patternfly/react-table';
+import { Button } from '@patternfly/react-core';
+
+import { EnrollmentRequest } from '@flightctl/types';
+import { timeSinceText } from '../../utils/dates';
+import { DeleteListActionResult } from '../ListPage/types';
+import { useTranslation } from '../../hooks/useTranslation';
+import { ROUTE } from '../../hooks/useNavigate';
+import ResourceLink from '../common/ResourceLink';
+
+type EnrollmentRequestTableRow = {
+  rowIndex: number;
+  onRowSelect: (er: EnrollmentRequest) => OnSelect;
+  isRowSelected: (er: EnrollmentRequest) => boolean;
+  er: EnrollmentRequest;
+  onApprove: (id: string) => void;
+  deleteAction: DeleteListActionResult['deleteAction'];
+};
+
+const EnrollmentRequestTableRow: React.FC<EnrollmentRequestTableRow> = ({
+  er,
+  deleteAction,
+  rowIndex,
+  onRowSelect,
+  isRowSelected,
+  onApprove,
+}) => {
+  const { t } = useTranslation();
+  const erName = er.metadata.name as string;
+
+  const approveEnrollment = () => {
+    onApprove(erName);
+  };
+
+  return (
+    <Tr data-testid={`enrollment-request-${rowIndex}`}>
+      <Td
+        select={{
+          rowIndex,
+          onSelect: onRowSelect(er),
+          isSelected: isRowSelected(er),
+        }}
+      />
+      <Td dataLabel={t('Name')}>
+        <ResourceLink id={erName} routeLink={ROUTE.ENROLLMENT_REQUEST_DETAILS} />
+      </Td>
+      <Td dataLabel={t('Created')}>{timeSinceText(t, er.metadata.creationTimestamp)}</Td>
+      <Td dataLabel={t('Approve')}>
+        <Button variant="link" onClick={approveEnrollment}>
+          {t('Approve')}
+        </Button>
+      </Td>
+      <Td isActionCell>
+        <ActionsColumn
+          items={[
+            {
+              title: t('Approve'),
+              onClick: approveEnrollment,
+            },
+            deleteAction({ resourceId: erName }),
+          ]}
+        />
+      </Td>
+    </Tr>
+  );
+};
+
+export default EnrollmentRequestTableRow;

package/src/components/ErrorAlert/ErrorAlert.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { Alert } from '@patternfly/react-core';
+import { useTranslation } from '../../hooks/useTranslation';
+import { getErrorMessage } from '../../utils/error';
+
+const ErrorAlert = ({ error }: { error: unknown }) => {
+  const { t } = useTranslation();
+  return (
+    <Alert isInline variant="danger" title={t('Unexpected error occurred')}>
+      {getErrorMessage(error)}
+    </Alert>
+  );
+};
+
+export default ErrorAlert;

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

@@ -0,0 +1,3 @@
+.fctl-create-fleet .pf-v5-c-wizard__main-body {
+    height: 100%
+}

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

@@ -0,0 +1,152 @@
+import {
+  Alert,
+  Breadcrumb,
+  BreadcrumbItem,
+  Bullseye,
+  PageSection,
+  PageSectionVariants,
+  Spinner,
+  Title,
+  Wizard,
+  WizardStep,
+  WizardStepType,
+} from '@patternfly/react-core';
+import * as React from 'react';
+import { Fleet } from '@flightctl/types';
+import { Formik } from 'formik';
+import { FleetFormValues } from './types';
+import { useFetch } from '../../../hooks/useFetch';
+import { getErrorMessage } from '../../../utils/error';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { Link, ROUTE, useNavigate } from '../../../hooks/useNavigate';
+import GeneralInfoStep, { generalInfoStepId, isGeneralInfoStepValid } from './steps/GeneralInfoStep';
+import DeviceTemplateStep, {
+  deviceTemplateStepId,
+  isDeviceTemplateStepValid,
+} from '../../Device/EditDeviceWizard/steps/DeviceTemplateStep';
+import ReviewStep, { reviewStepId } from './steps/ReviewStep';
+import { getFleetPatches, getFleetResource, getInitialValues, getValidationSchema } from './utils';
+import CreateFleetWizardFooter from './CreateFleetWizardFooter';
+import { useEditFleet } from './useEditFleet';
+import LeaveFormConfirmation from '../../common/LeaveFormConfirmation';
+import ErrorBoundary from '../../common/ErrorBoundary';
+
+import './CreateFleetWizard.css';
+
+const CreateFleetWizard = () => {
+  const { t } = useTranslation();
+  const { post, patch } = useFetch();
+  const [error, setError] = React.useState<unknown>();
+  const navigate = useNavigate();
+  const [currentStep, setCurrentStep] = React.useState<WizardStepType>();
+  const [fleetId, fleet, loading, editError] = useEditFleet();
+  const isEdit = !!fleetId;
+  let body;
+
+  if (loading) {
+    body = (
+      <Bullseye>
+        <Spinner />
+      </Bullseye>
+    );
+  } else if (editError) {
+    body = (
+      <Alert isInline variant="danger" title={t('An error occurred')}>
+        {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>
+        initialValues={getInitialValues(fleet)}
+        validationSchema={getValidationSchema(t)}
+        validateOnMount
+        onSubmit={async (values) => {
+          setError(undefined);
+          try {
+            if (isEdit) {
+              const fleetPatches = getFleetPatches(fleet as Fleet, values);
+              if (fleetPatches.length > 0) {
+                await patch<Fleet>(`fleets/${fleetId}`, fleetPatches);
+              }
+            } else {
+              await post<Fleet>('fleets', getFleetResource(values));
+            }
+
+            navigate({ route: ROUTE.FLEET_DETAILS, postfix: values.name });
+          } catch (e) {
+            setError(e);
+          }
+        }}
+      >
+        {({ errors: formikErrors }) => {
+          const generalStepValid = isGeneralInfoStepValid(formikErrors);
+          return (
+            <>
+              <LeaveFormConfirmation />
+              <Wizard
+                footer={<CreateFleetWizardFooter isEdit={isEdit} />}
+                onStepChange={(_, step) => setCurrentStep(step)}
+                className="fctl-create-fleet"
+              >
+                <WizardStep name={t('General info')} id={generalInfoStepId}>
+                  {(!currentStep || currentStep?.id === generalInfoStepId) && <GeneralInfoStep isEdit={isEdit} />}
+                </WizardStep>
+                <WizardStep
+                  name={t('Device template')}
+                  id={deviceTemplateStepId}
+                  isDisabled={(!currentStep || currentStep?.id === generalInfoStepId) && !generalStepValid}
+                >
+                  {currentStep?.id === deviceTemplateStepId && <DeviceTemplateStep isFleet />}
+                </WizardStep>
+                <WizardStep
+                  name={isEdit ? t('Review and update') : t('Review and create')}
+                  id={reviewStepId}
+                  isDisabled={!generalStepValid || !isDeviceTemplateStepValid(formikErrors)}
+                >
+                  {currentStep?.id === reviewStepId && <ReviewStep error={error} />}
+                </WizardStep>
+              </Wizard>
+            </>
+          );
+        }}
+      </Formik>
+    );
+  }
+
+  const title = isEdit ? t('Edit fleet') : t('Create fleet');
+
+  return (
+    <>
+      <PageSection variant="light" type="breadcrumb">
+        <Breadcrumb>
+          <BreadcrumbItem>
+            <Link to={ROUTE.FLEETS}>{t('Fleets')}</Link>
+          </BreadcrumbItem>
+          {fleetId && (
+            <BreadcrumbItem>
+              <Link to={{ route: ROUTE.FLEET_DETAILS, postfix: fleetId }}>{fleetId}</Link>
+            </BreadcrumbItem>
+          )}
+          <BreadcrumbItem isActive>{title}</BreadcrumbItem>
+        </Breadcrumb>
+      </PageSection>
+      <PageSection variant={PageSectionVariants.light}>
+        <Title headingLevel="h1" size="3xl">
+          {title}
+        </Title>
+      </PageSection>
+      <PageSection variant={PageSectionVariants.light} type="wizard">
+        <ErrorBoundary>{body}</ErrorBoundary>
+      </PageSection>
+    </>
+  );
+};
+
+export default CreateFleetWizard;

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

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { Button, WizardFooterWrapper, useWizardContext } from '@patternfly/react-core';
+import { useFormikContext } from 'formik';
+import { FleetFormValues } from './types';
+import { useNavigate } from '../../../hooks/useNavigate';
+import { reviewStepId } from './steps/ReviewStep';
+import { generalInfoStepId, isGeneralInfoStepValid } from './steps/GeneralInfoStep';
+import {
+  deviceTemplateStepId,
+  isDeviceTemplateStepValid,
+} from '../../Device/EditDeviceWizard/steps/DeviceTemplateStep';
+
+type CreateFleetWizardFooterProps = {
+  isEdit: boolean;
+};
+
+const CreateFleetWizardFooter = ({ isEdit }: CreateFleetWizardFooterProps) => {
+  const { t } = useTranslation();
+  const { goToNextStep, goToPrevStep, activeStep } = useWizardContext();
+  const { submitForm, isSubmitting, errors } = useFormikContext<FleetFormValues>();
+  const navigate = useNavigate();
+
+  const isReviewStep = activeStep.id === reviewStepId;
+  let isStepValid = true;
+  if (activeStep.id === generalInfoStepId) {
+    isStepValid = isGeneralInfoStepValid(errors);
+  } else if (activeStep.id === deviceTemplateStepId) {
+    isStepValid = isDeviceTemplateStepValid(errors);
+  }
+  const primaryBtn = isReviewStep ? (
+    <Button variant="primary" onClick={submitForm} isDisabled={isSubmitting} isLoading={isSubmitting}>
+      {isEdit ? t('Save') : t('Create fleet')}
+    </Button>
+  ) : (
+    <Button variant="primary" onClick={goToNextStep} isDisabled={!isStepValid}>
+      {t('Next')}
+    </Button>
+  );
+
+  return (
+    <WizardFooterWrapper>
+      {primaryBtn}
+      {activeStep.id !== generalInfoStepId && (
+        <Button variant="secondary" onClick={goToPrevStep} isDisabled={isSubmitting}>
+          {t('Back')}
+        </Button>
+      )}
+      <Button variant="link" onClick={() => navigate(-1)} isDisabled={isSubmitting}>
+        {t('Cancel')}
+      </Button>
+    </WizardFooterWrapper>
+  );
+};
+
+export default CreateFleetWizardFooter;

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

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import { useField } from 'formik';
+import { Alert, Button, Spinner, Stack, StackItem } from '@patternfly/react-core';
+import { RedoIcon } from '@patternfly/react-icons/dist/js/icons/redo-icon';
+import debounce from 'lodash/debounce';
+
+import { DeviceList } from '@flightctl/types';
+import LabelsField from '../../../form/LabelsField';
+import { getInvalidKubernetesLabels, hasUniqueLabelKeys } from '../../../form/validations';
+import { useTranslation } from '../../../../hooks/useTranslation';
+import { useFetch } from '../../../../hooks/useFetch';
+import { FlightCtlLabel } from '../../../../types/extraTypes';
+import { getApiListCount } from '../../../../utils/api';
+import { getErrorMessage } from '../../../../utils/error';
+import { labelToString } from '../../../../utils/labels';
+
+const validateLabels = (labels: FlightCtlLabel[]) =>
+  hasUniqueLabelKeys(labels) && getInvalidKubernetesLabels(labels).length === 0;
+
+const DeviceLabelSelector = () => {
+  const { t } = useTranslation();
+  const { get } = useFetch();
+  const [{ value: labels }] = useField<FlightCtlLabel[]>('labels');
+
+  const [isLoading, setIsLoading] = React.useState<boolean>(false);
+  const [deviceCountError, setDeviceCountError] = React.useState<string>();
+  const [deviceCount, setDeviceCount] = React.useState<number>(0);
+
+  const updateDeviceCount = async (matchLabels: FlightCtlLabel[]) => {
+    const labelSelector = matchLabels.map(labelToString);
+
+    try {
+      // TODO remove sortBy when https://issues.redhat.com/browse/EDM-624 is fixed. Otherwise the device count can be wrong.
+      const deviceListResp = await get<DeviceList>(
+        `devices?labelSelector=${labelSelector.join(',')}&limit=1&sortBy=metadata.name`,
+      );
+      const num = getApiListCount(deviceListResp);
+      setDeviceCount(num || 0);
+    } catch (e) {
+      setDeviceCountError(getErrorMessage(e));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedUpdateCount = React.useCallback(debounce(updateDeviceCount, 800), []);
+
+  const reloadDeviceSelection = React.useCallback(
+    (labels: FlightCtlLabel[]) => {
+      const hasLabels = labels.length > 0;
+
+      // The error field is not set on time, we manually validate the labels
+      // to make sure we only trigger requests when labels are valid
+      const validLabels = validateLabels(labels);
+      if (validLabels && hasLabels) {
+        setIsLoading(true);
+        setDeviceCountError(undefined);
+        void debouncedUpdateCount(labels);
+      } else if (!hasLabels) {
+        setDeviceCount(0);
+      }
+    },
+    [debouncedUpdateCount],
+  );
+
+  React.useEffect(() => {
+    reloadDeviceSelection(labels);
+  }, [labels, reloadDeviceSelection]);
+
+  let message: React.ReactNode;
+  let showHelperText = true;
+  if (isLoading) {
+    message = <Spinner size="sm" />;
+  } else if (deviceCountError) {
+    showHelperText = false;
+    message = (
+      <Alert isInline variant="danger" title={t('Failed to determine the number of selected devices')}>
+        {deviceCountError}
+        <Button
+          variant="link"
+          icon={<RedoIcon />}
+          onClick={() => {
+            reloadDeviceSelection(labels);
+          }}
+        >
+          {t('Try again')}
+        </Button>
+      </Alert>
+    );
+  } else if (labels.length > 0) {
+    showHelperText = false;
+    message = (
+      <Alert
+        isInline
+        variant={deviceCount === 0 ? 'warning' : 'info'}
+        title={t('{{ count }} devices matching the labels were selected.', { count: deviceCount })}
+      />
+    );
+  } else {
+    message = t('Add labels to select devices to be included in this fleet.');
+  }
+
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <LabelsField name="labels" helperText={showHelperText ? message : undefined} />
+      </StackItem>
+      {!showHelperText && message && <StackItem>{message}</StackItem>}
+    </Stack>
+  );
+};
+
+export default DeviceLabelSelector;