@flightctl/ui-components 0.0.4 → 0.0.5

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

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { FormGroup, Grid } from '@patternfly/react-core';
+import { FormikErrors } from 'formik';
+
+import { FleetFormValues } from '../types';
+import { useTranslation } from '../../../../hooks/useTranslation';
+import NameField from '../../../form/NameField';
+import LabelsField from '../../../form/LabelsField';
+import FlightCtlForm from '../../../form/FlightCtlForm';
+import { getDnsSubdomainValidations } from '../../../form/validations';
+import WithHelperText from '../../../common/WithHelperText';
+import DeviceLabelSelector from './DeviceLabelSelector';
+
+export const generalInfoStepId = 'general-info';
+
+export const isGeneralInfoStepValid = (errors: FormikErrors<FleetFormValues>) => {
+  return !errors.name && !errors.labels && !errors.fleetLabels;
+};
+
+const GeneralInfoStep = ({ isEdit }: { isEdit: boolean }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Grid lg={5} span={8}>
+      <FlightCtlForm>
+        <NameField
+          name="name"
+          aria-label={t('Name')}
+          isRequired
+          isDisabled={isEdit}
+          resourceType="fleets"
+          validations={getDnsSubdomainValidations(t)}
+        />
+        <FormGroup label={t('Fleet labels')}>
+          <LabelsField name="fleetLabels" />
+        </FormGroup>
+        <FormGroup
+          label={
+            <WithHelperText
+              content={t(
+                'Devices matching these labels will be selected by the fleet. If left empty, no devices will be selected.',
+              )}
+              ariaLabel={t('Device selector')}
+              showLabel
+            />
+          }
+        >
+          <DeviceLabelSelector />
+        </FormGroup>
+      </FlightCtlForm>
+    </Grid>
+  );
+};
+
+export default GeneralInfoStep;

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

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import {
+  Alert,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { useFormikContext } from 'formik';
+
+import { useTranslation } from '../../../../hooks/useTranslation';
+import { FleetFormValues } from '../types';
+import LabelsView from '../../../common/LabelsView';
+import FlightControlDescriptionList from '../../../common/FlightCtlDescriptionList';
+import { toAPILabel } from '../../../../utils/labels';
+import RepositorySourceList from '../../../Repository/RepositoryDetails/RepositorySourceList';
+import { getErrorMessage } from '../../../../utils/error';
+import { getAPIConfig } from '../../../Device/EditDeviceWizard/deviceSpecUtils';
+import ReviewApplications from '../../../Device/EditDeviceWizard/steps/ReviewApplications';
+
+export const reviewStepId = 'review';
+
+const ReviewStep = ({ error }: { error?: unknown }) => {
+  const { t } = useTranslation();
+  const { values } = useFormikContext<FleetFormValues>();
+  return (
+    <Stack hasGutter>
+      <StackItem isFilled>
+        <FlightControlDescriptionList
+          isHorizontal
+          horizontalTermWidthModifier={{
+            default: '25ch',
+          }}
+        >
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Name')}</DescriptionListTerm>
+            <DescriptionListDescription>{values.name}</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Fleet labels')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              <LabelsView prefix="fleet" labels={toAPILabel(values.fleetLabels)} />
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Device selector')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              <LabelsView prefix="device" labels={toAPILabel(values.labels)} />
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('System image')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {values.osImage || t(`The fleet will not manage system image`)}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Configurations')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              <RepositorySourceList configs={values.configTemplates.map(getAPIConfig)} />
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Applications')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              <ReviewApplications apps={values.applications} />
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+        </FlightControlDescriptionList>
+      </StackItem>
+      {!!error && (
+        <StackItem>
+          <Alert isInline variant="danger" title={t('An error occurred')}>
+            {getErrorMessage(error)}
+          </Alert>
+        </StackItem>
+      )}
+    </Stack>
+  );
+};
+
+export default ReviewStep;

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

@@ -0,0 +1,8 @@
+import { FlightCtlLabel } from '../../../types/extraTypes';
+import { DeviceSpecConfigFormValues } from '../../Device/EditDeviceWizard/types';
+
+export type FleetFormValues = DeviceSpecConfigFormValues & {
+  name: string;
+  fleetLabels: FlightCtlLabel[];
+  labels: FlightCtlLabel[];
+};

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { useAppContext } from '../../../hooks/useAppContext';
+import { useFetch } from '../../../hooks/useFetch';
+import { Fleet } from '@flightctl/types';
+
+export const useEditFleet = (): [string | undefined, Fleet | undefined, boolean, unknown] => {
+  const {
+    router: { useParams },
+  } = useAppContext();
+  const { fleetId } = useParams<{ fleetId: string }>();
+
+  const { get } = useFetch();
+  const [fleet, setFleet] = React.useState<Fleet>();
+  const [isLoading, setIsLoading] = React.useState<boolean>(!!fleetId);
+  const [error, setError] = React.useState<unknown>();
+
+  React.useEffect(() => {
+    const fetch = async () => {
+      try {
+        const result = await get<Fleet>(`fleets/${fleetId}`);
+        setFleet(result);
+      } catch (err) {
+        setError(err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    if (fleetId && !fleet) {
+      fetch();
+    }
+  }, [fleetId, get, fleet]);
+
+  return [fleetId, fleet, isLoading, error];
+};

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

@@ -0,0 +1,160 @@
+import { Fleet, PatchRequest } from '@flightctl/types';
+import { TFunction } from 'i18next';
+import * as Yup from 'yup';
+import { FleetFormValues } from './types';
+import { API_VERSION } from '../../../constants';
+import { toAPILabel } from '../../../utils/labels';
+import {
+  maxLengthString,
+  validApplicationsSchema,
+  validConfigTemplatesSchema,
+  validKubernetesDnsSubdomain,
+  validLabelsSchema,
+} from '../../form/validations';
+import { appendJSONPatch, getApplicationPatches, getLabelPatches, toAPIApplication } from '../../../utils/patch';
+import {
+  getAPIConfig,
+  getApplicationValues,
+  getConfigTemplatesValues,
+  getDeviceSpecConfigPatches,
+} 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 }),
+    fleetLabels: validLabelsSchema(t),
+    labels: validLabelsSchema(t),
+    configTemplates: validConfigTemplatesSchema(t),
+    applications: validApplicationsSchema(t),
+  });
+};
+
+export const getFleetPatches = (currentFleet: Fleet, updatedFleet: FleetFormValues) => {
+  let allPatches: PatchRequest = [];
+
+  // Fleet labels
+  const currentLabels = currentFleet.metadata.labels || {};
+  const updatedLabels = updatedFleet.fleetLabels || {};
+
+  const fleetLabelPatches = getLabelPatches('/metadata/labels', currentLabels, updatedLabels);
+  allPatches = allPatches.concat(fleetLabelPatches);
+
+  // Device label selector
+  const currentDeviceSelectLabels = currentFleet.spec.selector?.matchLabels || {};
+  const updatedDeviceSelectLabels = updatedFleet.labels || {};
+  const updatedDeviceSelectLabelCount = Object.keys(updatedDeviceSelectLabels).length;
+
+  if (updatedDeviceSelectLabelCount > 0) {
+    if (currentFleet.spec.selector) {
+      const deviceSelectLabelPatches = getLabelPatches(
+        '/spec/selector/matchLabels',
+        currentDeviceSelectLabels,
+        updatedDeviceSelectLabels,
+      );
+      allPatches = allPatches.concat(deviceSelectLabelPatches);
+    } else {
+      const newLabelMap = toAPILabel(updatedDeviceSelectLabels);
+      allPatches.push({
+        path: '/spec/selector',
+        op: 'add',
+        value: { matchLabels: newLabelMap },
+      });
+    }
+  } else if (currentFleet.spec.selector) {
+    allPatches.push({
+      path: '/spec/selector',
+      op: 'remove',
+    });
+  }
+
+  // OS image
+  const currentOsImage = currentFleet.spec.template.spec.os?.image;
+  const newOsImage = updatedFleet.osImage;
+  if (!currentOsImage && newOsImage) {
+    allPatches.push({
+      path: '/spec/template/spec/os',
+      op: 'add',
+      value: { image: newOsImage },
+    });
+  } else if (!newOsImage && currentOsImage) {
+    allPatches.push({
+      path: '/spec/template/spec/os',
+      op: 'remove',
+    });
+  } else if (newOsImage && currentOsImage !== newOsImage) {
+    appendJSONPatch({
+      path: '/spec/template/spec/os/image',
+      patches: allPatches,
+      newValue: newOsImage,
+      originalValue: currentOsImage,
+    });
+  }
+
+  // Configurations
+  const currentConfigs = currentFleet.spec.template.spec.config || [];
+  const newConfigs = updatedFleet.configTemplates.map(getAPIConfig);
+  const configPatches = getDeviceSpecConfigPatches(currentConfigs, newConfigs, '/spec/template/spec/config');
+  allPatches = allPatches.concat(configPatches);
+
+  // Applications
+  const appPatches = getApplicationPatches(
+    '/spec/template/spec',
+    currentFleet.spec.template.spec.applications || [],
+    updatedFleet.applications,
+  );
+  allPatches = allPatches.concat(appPatches);
+
+  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),
+    },
+    template: {
+      metadata: {
+        labels: {
+          fleet: values.name,
+        },
+      },
+      spec: {
+        os: values.osImage ? { image: values.osImage || '' } : undefined,
+        config: values.configTemplates.map(getAPIConfig),
+        applications: values.applications.map(toAPIApplication),
+      },
+    },
+  },
+});
+
+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: [],
+      };

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

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { Alert, Button, Modal, Stack, StackItem } from '@patternfly/react-core';
+import { Trans } from 'react-i18next';
+
+import { useTranslation } from '../../../hooks/useTranslation';
+import { useFetch } from '../../../hooks/useFetch';
+import { getErrorMessage } from '../../../utils/error';
+
+const DeleteFleetModal = ({ fleetId, onClose }: { fleetId: string; onClose: (hasDeleted?: boolean) => void }) => {
+  const { t } = useTranslation();
+  const { remove } = useFetch();
+
+  const [error, setError] = React.useState<{ text: string; details?: string }>();
+  const [isDeleting, setIsDeleting] = React.useState<boolean>();
+
+  const onDelete = async () => {
+    try {
+      await remove(`fleets/${fleetId}`);
+    } catch (fleetErr) {
+      setError({ text: t('Deletion of fleet {{fleetId}} failed.'), details: getErrorMessage(fleetErr) });
+    }
+  };
+
+  return (
+    <Modal
+      title={t('Delete fleet ?')}
+      isOpen
+      onClose={() => {
+        onClose();
+      }}
+      variant="small"
+      titleIconVariant="warning"
+      actions={[
+        <Button
+          key="confirm"
+          variant="danger"
+          isDisabled={isDeleting || !!error}
+          isLoading={isDeleting}
+          onClick={async () => {
+            setError(undefined);
+            try {
+              setIsDeleting(true);
+              await onDelete();
+              setIsDeleting(false);
+              onClose(true);
+            } catch {
+              setIsDeleting(false);
+            }
+          }}
+        >
+          {t('Delete fleet')}
+        </Button>,
+        <Button
+          key="cancel"
+          variant="link"
+          onClick={() => {
+            onClose();
+          }}
+          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>
+    </Modal>
+  );
+};
+
+export default DeleteFleetModal;

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

@@ -0,0 +1,97 @@
+import React from 'react';
+import { DropdownItem, DropdownList } from '@patternfly/react-core';
+import { Fleet } from '@flightctl/types';
+
+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 { useAppContext } from '../../../hooks/useAppContext';
+import DeleteFleetModal from '../DeleteFleetModal/DeleteFleetModal';
+
+const FleetDetails = () => {
+  const { t } = useTranslation();
+
+  const {
+    router: { useParams },
+  } = useAppContext();
+  const { fleetId } = useParams() as { fleetId: string };
+  const [fleet, isLoading, error, refetch] = useFetchPeriodically<Required<Fleet>>({
+    endpoint: `fleets/${fleetId}?addDevicesSummary=true`,
+  });
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = React.useState<boolean>();
+
+  const navigate = useNavigate();
+
+  const isManaged = !!fleet?.metadata?.owner;
+
+  return (
+    <DetailsPage
+      loading={isLoading}
+      error={error}
+      id={fleetId}
+      resourceLink={ROUTE.FLEETS}
+      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>
+      }
+    >
+      {fleet && (
+        <>
+          <FleetDetailsContent fleet={fleet} />
+          {isDeleteModalOpen && (
+            <DeleteFleetModal
+              fleetId={fleetId}
+              onClose={(hasDeleted?: boolean) => {
+                if (hasDeleted) {
+                  refetch();
+                  navigate(ROUTE.FLEETS);
+                }
+                setIsDeleteModalOpen(false);
+              }}
+            />
+          )}
+        </>
+      )}
+    </DetailsPage>
+  );
+};
+
+export default FleetDetails;

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

@@ -0,0 +1,97 @@
+import * as React from 'react';
+
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Grid,
+  GridItem,
+} 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 { useTranslation } from '../../../hooks/useTranslation';
+import RepositorySourceList from '../../Repository/RepositoryDetails/RepositorySourceList';
+
+const FleetDetailsContent = ({ fleet }: { fleet: Fleet }) => {
+  const { t } = useTranslation();
+  const fleetId = fleet.metadata.name as string;
+  const devicesSummary = fleet.status?.devicesSummary;
+  return (
+    <Grid hasGutter>
+      <GridItem md={12}>
+        <Card>
+          <CardTitle>{t('Details')}</CardTitle>
+          <CardBody>
+            <FlightControlDescriptionList columnModifier={{ lg: '3Col' }}>
+              <DescriptionListGroup>
+                <DescriptionListTerm>{t('Created')}</DescriptionListTerm>
+                <DescriptionListDescription>
+                  {getDateDisplay(fleet.metadata.creationTimestamp || '')}
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+              <DescriptionListGroup>
+                <DescriptionListTerm>{t('Status')}</DescriptionListTerm>
+                <DescriptionListDescription>
+                  <FleetStatus fleet={fleet} />
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+              <DescriptionListGroup>
+                <DescriptionListTerm>{t('System image')}</DescriptionListTerm>
+                <DescriptionListDescription>{fleet.spec.template.spec.os?.image || '-'}</DescriptionListDescription>
+              </DescriptionListGroup>
+              <DescriptionListGroup>
+                <DescriptionListTerm>{t('Device selector')}</DescriptionListTerm>
+                <DescriptionListDescription>
+                  <LabelsView prefix="device" labels={fleet.spec.selector?.matchLabels} />
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+              <DescriptionListGroup>
+                <DescriptionListTerm>{t('Associated devices')}</DescriptionListTerm>
+                <DescriptionListDescription>
+                  <FleetDevicesLink fleetId={fleetId} count={devicesSummary?.total} />
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+              <DescriptionListGroup>
+                <DescriptionListTerm>{t('Managed by')}</DescriptionListTerm>
+                <DescriptionListDescription>
+                  <FleetOwnerLink owner={fleet.metadata.owner} />
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+              <DescriptionListGroup>
+                <DescriptionListTerm>
+                  {t('Sources ({{size}})', { size: fleet.spec.template.spec.config?.length || 0 })}
+                </DescriptionListTerm>
+                <DescriptionListDescription>
+                  <RepositorySourceList configs={fleet.spec.template.spec.config || []} />
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+            </FlightControlDescriptionList>
+          </CardBody>
+        </Card>
+      </GridItem>
+      {devicesSummary && (
+        <GridItem md={12}>
+          <Card>
+            <CardTitle>{t('Fleet devices')}</CardTitle>
+
+            <CardBody>
+              <FleetDevices fleetId={fleetId} devicesSummary={devicesSummary} />
+            </CardBody>
+          </Card>
+        </GridItem>
+      )}
+    </Grid>
+  );
+};
+
+export default FleetDetailsContent;