@flightctl/ui-components 0.0.4 → 0.0.5

package/src/components/Fleet/ImportFleetWizard/ImportFleetWizard.tsx

@@ -0,0 +1,216 @@
+import {
+  Alert,
+  Breadcrumb,
+  BreadcrumbItem,
+  Bullseye,
+  Button,
+  PageSection,
+  PageSectionVariants,
+  Spinner,
+  Title,
+  Wizard,
+  WizardFooterWrapper,
+  WizardStep,
+  WizardStepType,
+  useWizardContext,
+} from '@patternfly/react-core';
+import * as React from 'react';
+import * as Yup from 'yup';
+import { TFunction } from 'i18next';
+import { Formik, useFormikContext } from 'formik';
+
+import RepositoryStep, { isRepoStepValid, repositoryStepId } from './steps/RepositoryStep';
+import ReviewStep, { reviewStepId } from './steps/ReviewStep';
+import ResourceSyncStep, { isResourceSyncStepValid, resourceSyncStepId } from './steps/ResourceSyncStep';
+import { ImportFleetFormValues } from './types';
+import { useFetch } from '../../../hooks/useFetch';
+import { RepoSpecType, Repository, RepositoryList, ResourceSync } from '@flightctl/types';
+import {
+  getInitValues,
+  getRepository,
+  getResourceSync,
+  handlePromises,
+  repoSyncSchema,
+  repositorySchema,
+} from '../../Repository/CreateRepository/utils';
+import { getErrorMessage } from '../../../utils/error';
+
+import { useFetchPeriodically } from '../../../hooks/useFetchPeriodically';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { Link, ROUTE, useNavigate } from '../../../hooks/useNavigate';
+import LeaveFormConfirmation from '../../common/LeaveFormConfirmation';
+import ErrorBoundary from '../../common/ErrorBoundary';
+
+import './ImportFleetWizard.css';
+
+const validationSchema = (t: TFunction) =>
+  Yup.lazy((values: ImportFleetFormValues) =>
+    values.useExistingRepo
+      ? Yup.object({
+          existingRepo: Yup.string().required(t('Repository is required')),
+          resourceSyncs: repoSyncSchema(t, values.resourceSyncs),
+        })
+      : repositorySchema(t, undefined)({ ...values, useResourceSyncs: true, exists: false }),
+  );
+
+const ImportFleetWizardFooter = () => {
+  const { t } = useTranslation();
+  const { goToNextStep, goToPrevStep, activeStep } = useWizardContext();
+  const { submitForm, isSubmitting, errors, values } = useFormikContext<ImportFleetFormValues>();
+  const navigate = useNavigate();
+
+  const isReviewStep = activeStep.id === reviewStepId;
+  let isStepValid = true;
+  if (activeStep.id === repositoryStepId) {
+    isStepValid = isRepoStepValid(values, errors);
+  } else if (activeStep.id === resourceSyncStepId) {
+    isStepValid = isResourceSyncStepValid(errors);
+  }
+  const primaryBtn = isReviewStep ? (
+    <Button variant="primary" onClick={submitForm} isDisabled={isSubmitting} isLoading={isSubmitting}>
+      {t('Import')}
+    </Button>
+  ) : (
+    <Button variant="primary" onClick={goToNextStep} isDisabled={!isStepValid}>
+      {t('Next')}
+    </Button>
+  );
+
+  return (
+    <WizardFooterWrapper>
+      {primaryBtn}
+      {activeStep.id !== repositoryStepId && (
+        <Button variant="secondary" onClick={goToPrevStep} isDisabled={isSubmitting}>
+          {t('Back')}
+        </Button>
+      )}
+      <Button variant="link" onClick={() => navigate(-1)} isDisabled={isSubmitting}>
+        {t('Cancel')}
+      </Button>
+    </WizardFooterWrapper>
+  );
+};
+
+const ImportFleetWizard = () => {
+  const { t } = useTranslation();
+  const { post } = useFetch();
+  const [errors, setErrors] = React.useState<string[]>();
+  const navigate = useNavigate();
+  const [currentStep, setCurrentStep] = React.useState<WizardStepType>();
+  const [repoList, isLoading, error] = useFetchPeriodically<RepositoryList>({ endpoint: 'repositories' });
+
+  const gitRepositories = (repoList?.items || []).filter((repo) => repo.spec.type === RepoSpecType.GIT);
+
+  let body;
+
+  if (isLoading) {
+    body = (
+      <Bullseye>
+        <Spinner />
+      </Bullseye>
+    );
+  } else if (error) {
+    body = (
+      <Alert isInline variant="danger" title={t('An error occurred')}>
+        {getErrorMessage(error)}
+      </Alert>
+    );
+  } else {
+    const repoInitValues = getInitValues({
+      options: {
+        allowedRepoTypes: [RepoSpecType.GIT],
+        showRepoTypes: false,
+      },
+    });
+    body = (
+      <Formik<ImportFleetFormValues>
+        initialValues={{
+          useExistingRepo: true,
+          existingRepo: '',
+          ...repoInitValues,
+        }}
+        validationSchema={validationSchema(t)}
+        validateOnMount
+        onSubmit={async (values) => {
+          setErrors(undefined);
+          if (!values.useExistingRepo) {
+            try {
+              await post<Repository>('repositories', getRepository(values));
+            } catch (e) {
+              setErrors([getErrorMessage(e)]);
+              return;
+            }
+          }
+          const resourceSyncPromises = values.resourceSyncs.map((rs) =>
+            post<ResourceSync>(
+              'resourcesyncs',
+              getResourceSync(values.useExistingRepo ? values.existingRepo : values.name, rs),
+            ),
+          );
+          const errors = await handlePromises(resourceSyncPromises);
+          if (errors.length) {
+            setErrors(errors);
+            return;
+          }
+          navigate(ROUTE.FLEETS);
+        }}
+      >
+        {({ values, errors: formikErrors }) => (
+          <>
+            <LeaveFormConfirmation />
+            <Wizard
+              footer={<ImportFleetWizardFooter />}
+              onStepChange={(_, step) => setCurrentStep(step)}
+              className="fctl-import-fleet"
+            >
+              <WizardStep name={t('Select or create repository')} id={repositoryStepId}>
+                {(!currentStep || currentStep?.id === repositoryStepId) && (
+                  <RepositoryStep repositories={gitRepositories} hasLoaded={!!repoList} />
+                )}
+              </WizardStep>
+              <WizardStep
+                name={t('Add resource sync')}
+                id={resourceSyncStepId}
+                isDisabled={
+                  (!currentStep || currentStep?.id === repositoryStepId) && !isRepoStepValid(values, formikErrors)
+                }
+              >
+                {currentStep?.id === resourceSyncStepId && <ResourceSyncStep />}
+              </WizardStep>
+              <WizardStep
+                name={t('Review')}
+                id={reviewStepId}
+                isDisabled={!isRepoStepValid(values, formikErrors) || !isResourceSyncStepValid(formikErrors)}
+              >
+                {currentStep?.id === reviewStepId && <ReviewStep errors={errors} />}
+              </WizardStep>
+            </Wizard>
+          </>
+        )}
+      </Formik>
+    );
+  }
+
+  return (
+    <>
+      <PageSection variant="light" type="breadcrumb">
+        <Breadcrumb>
+          <BreadcrumbItem>
+            <Link to={ROUTE.FLEETS}>{t('Fleets')}</Link>
+          </BreadcrumbItem>
+          <BreadcrumbItem isActive>{t('Import fleets')}</BreadcrumbItem>
+        </Breadcrumb>
+      </PageSection>
+      <PageSection variant={PageSectionVariants.light}>
+        <Title headingLevel="h1" size="3xl">
+          {t('Import fleets')}
+        </Title>
+      </PageSection>
+      <PageSection variant={PageSectionVariants.light} type="wizard">
+        <ErrorBoundary>{body}</ErrorBoundary>
+      </PageSection>
+    </>
+  );
+};
+
+export default ImportFleetWizard;

package/src/components/Fleet/ImportFleetWizard/steps/RepositoryStep.tsx

@@ -0,0 +1,115 @@
+import * as React from 'react';
+import { FormGroup, FormSection, Grid, Radio } from '@patternfly/react-core';
+import { FormikErrors, useFormikContext } from 'formik';
+import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+
+import { Repository } from '@flightctl/types';
+import { ImportFleetFormValues } from '../types';
+
+import { RepositoryForm } from '../../../Repository/CreateRepository/CreateRepositoryForm';
+import RepositoryStatus from '../../../Status/RepositoryStatus';
+import { getLastTransitionTimeText, getRepositorySyncStatus } from '../../../../utils/status/repository';
+import { useTranslation } from '../../../../hooks/useTranslation';
+import FormSelect from '../../../form/FormSelect';
+import FlightCtlForm from '../../../form/FlightCtlForm';
+
+export const repositoryStepId = 'repository';
+
+export const isRepoStepValid = (values: ImportFleetFormValues, errors: FormikErrors<ImportFleetFormValues>) => {
+  if (values.useExistingRepo) {
+    return !errors.existingRepo;
+  }
+  return (
+    !errors.name &&
+    !errors.url &&
+    !errors.configType &&
+    !errors.httpConfig &&
+    !errors.sshConfig &&
+    !errors.useAdvancedConfig
+  );
+};
+
+const ExistingRepoForm = ({ repositories }: { repositories: Repository[] }) => {
+  const { t } = useTranslation();
+  const { values } = useFormikContext<ImportFleetFormValues>();
+
+  const currentRepo = repositories.find((r) => r.metadata.name === values.existingRepo);
+
+  return (
+    <>
+      <FormGroup label={t('Repository')} fieldId="repository">
+        <FormSelect
+          name="existingRepo"
+          items={repositories.reduce((acc, curr) => {
+            acc[curr.metadata.name || ''] = curr.metadata.name || '';
+            return acc;
+          }, {})}
+          placeholderText={t('Select a repository')}
+        />
+      </FormGroup>
+      {currentRepo && (
+        <Table>
+          <Thead>
+            <Tr>
+              <Th>{t('URL')}</Th>
+              <Th>{t('Sync status')}</Th>
+              <Th>{t('Last transition')}</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            <Tr>
+              <Td dataLabel={t('URL')}>{currentRepo.spec.url}</Td>
+              <Td dataLabel={t('Sync status')}>
+                <RepositoryStatus statusInfo={getRepositorySyncStatus(currentRepo)} />
+              </Td>
+              <Td dataLabel={t('Last transition')}>{getLastTransitionTimeText(currentRepo, t).text}</Td>
+            </Tr>
+          </Tbody>
+        </Table>
+      )}
+    </>
+  );
+};
+
+const RepositoryStep = ({ repositories, hasLoaded }: { repositories: Repository[]; hasLoaded: boolean }) => {
+  const { t } = useTranslation();
+  const { values, setFieldValue } = useFormikContext<ImportFleetFormValues>();
+
+  const noRepositoriesExist = hasLoaded && repositories.length === 0;
+  React.useEffect(() => {
+    if (values.useExistingRepo && noRepositoriesExist) {
+      void setFieldValue('useExistingRepo', false);
+    }
+  }, [setFieldValue, values.useExistingRepo, noRepositoriesExist]);
+
+  return (
+    <FlightCtlForm>
+      <Grid span={8}>
+        <FormSection>
+          <FormGroup isInline>
+            <Radio
+              isChecked={values.useExistingRepo}
+              onChange={() => setFieldValue('useExistingRepo', true, true)}
+              id="existing-repo"
+              name="repo"
+              label={t('Use an existing Git repository')}
+              isDisabled={noRepositoriesExist}
+            />
+            <Radio
+              isChecked={!values.useExistingRepo}
+              onChange={() => setFieldValue('useExistingRepo', false, true)}
+              id="new-repo"
+              name="repo"
+              label={t('Use a new Git repository')}
+            />
+          </FormGroup>
+        </FormSection>
+        <FormSection>
+          {values.useExistingRepo ? <ExistingRepoForm repositories={repositories} /> : <RepositoryForm />}
+        </FormSection>
+      </Grid>
+    </FlightCtlForm>
+  );
+};
+
+export default RepositoryStep;

package/src/components/Fleet/ImportFleetWizard/steps/ResourceSyncStep.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Grid, Stack, StackItem, Text, TextContent } from '@patternfly/react-core';
+import { FormikErrors } from 'formik';
+
+import { useTranslation } from '../../../../hooks/useTranslation';
+import FlightControlForm from '../../../form/FlightCtlForm';
+import CreateResourceSyncsForm from '../../../Repository/CreateRepository/CreateResourceSyncsForm';
+import { ImportFleetFormValues } from '../types';
+
+export const resourceSyncStepId = 'resource-sync';
+export const isResourceSyncStepValid = (errors: FormikErrors<ImportFleetFormValues>) => {
+  if (Array.isArray(errors.resourceSyncs)) {
+    return !errors.resourceSyncs?.some((e) => !!e);
+  }
+  return !errors.resourceSyncs;
+};
+
+const ResourceSyncStep = () => {
+  const { t } = useTranslation();
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <TextContent>
+          <Text>
+            {t(
+              "A resource sync is an automated Gitops way to manage imported fleets. The resource sync monitors changes made to the source repository and update the fleet's configurations accordingly.",
+            )}
+          </Text>
+        </TextContent>
+      </StackItem>
+      <StackItem>
+        <FlightControlForm>
+          <Grid span={8}>
+            <CreateResourceSyncsForm />
+          </Grid>
+        </FlightControlForm>
+      </StackItem>
+    </Stack>
+  );
+};
+
+export default ResourceSyncStep;

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

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { Alert, FormGroup, Stack, StackItem, TextInput } from '@patternfly/react-core';
+import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import { useFormikContext } from 'formik';
+
+import { ImportFleetFormValues } from '../types';
+import FlightCtlForm from '../../../form/FlightCtlForm';
+
+import { useTranslation } from '../../../../hooks/useTranslation';
+
+export const reviewStepId = 'review';
+
+const ReviewStep = ({ errors }: { errors?: string[] }) => {
+  const { t } = useTranslation();
+  const { values } = useFormikContext<ImportFleetFormValues>();
+  return (
+    <Stack hasGutter>
+      <StackItem isFilled>
+        <FlightCtlForm>
+          <FormGroup label={t('Repository')}>
+            <TextInput
+              value={values.useExistingRepo ? values.existingRepo : values.name}
+              type="text"
+              aria-label={t('disabled repository input')}
+              isDisabled
+            />
+          </FormGroup>
+          <FormGroup label={t('Resource syncs')}>
+            <Table>
+              <Thead>
+                <Tr>
+                  <Th>{t('Name')}</Th>
+                  <Th>{t('Path')}</Th>
+                  <Th>{t('Target revision')}</Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {values.resourceSyncs.map((rs) => (
+                  <Tr key={rs.name}>
+                    <Td>{rs.name}</Td>
+                    <Td>{rs.path}</Td>
+                    <Td>{rs.targetRevision}</Td>
+                  </Tr>
+                ))}
+              </Tbody>
+            </Table>
+          </FormGroup>
+        </FlightCtlForm>
+      </StackItem>
+      <StackItem>
+        <Alert
+          isInline
+          variant="info"
+          title={t(
+            'Fleets will appear in the fleets table list and their status will be reflecting the resource sync process status. After a few minutes, they should be synced and enabled.',
+          )}
+        />
+      </StackItem>
+      {errors?.length && (
+        <StackItem>
+          <Alert isInline variant="danger" title={t('An error occurred')}>
+            {errors?.map((e, index) => <div key={index}>{e}</div>)}
+          </Alert>
+        </StackItem>
+      )}
+    </Stack>
+  );
+};
+
+export default ReviewStep;

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

@@ -0,0 +1,6 @@
+import { RepositoryFormValues } from '../../Repository/CreateRepository/types';
+
+export type ImportFleetFormValues = RepositoryFormValues & {
+  useExistingRepo: boolean;
+  existingRepo: string;
+};

package/src/components/ListPage/ListPage.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { PageSection, PageSectionVariants, Title, TitleProps } from '@patternfly/react-core';
+
+type ListPageProps = {
+  title: string;
+  headingLevel?: TitleProps['headingLevel'];
+  children: React.ReactNode;
+};
+
+const ListPage: React.FC<ListPageProps> = ({ title, headingLevel = 'h1', children }) => {
+  return (
+    <PageSection variant={PageSectionVariants.light}>
+      <Title headingLevel={headingLevel} size="3xl">
+        {title}
+      </Title>
+      {children}
+    </PageSection>
+  );
+};
+
+export default ListPage;

package/src/components/ListPage/ListPageActions.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import DeleteModal from '../modals/DeleteModal/DeleteModal';
+import { IAction } from '@patternfly/react-table';
+import { useTranslation } from '../../hooks/useTranslation';
+import { TFunction } from 'react-i18next';
+
+export type DeleteListActionResult = {
+  deleteAction: (params: { resourceId: string; resourceName?: string; disabledReason?: string | boolean }) => IAction;
+  deleteModal: React.ReactNode;
+};
+
+type ResourceType = 'Device' | 'EnrollmentRequest' | 'ResourceSync';
+
+type DeleteListActionProps = {
+  onDelete: (resourceId: string) => Promise<unknown>;
+  resourceType: 'Device' | 'EnrollmentRequest' | 'ResourceSync';
+};
+
+const getResourceTypeLabel = (t: TFunction, resourceType: ResourceType) => {
+  switch (resourceType) {
+    case 'Device':
+      return t('device');
+    case 'EnrollmentRequest':
+      return t('pending device');
+    case 'ResourceSync':
+      return t('resource sync');
+  }
+};
+
+export const useDeleteListAction = ({ resourceType, onDelete }: DeleteListActionProps): DeleteListActionResult => {
+  const { t } = useTranslation();
+  const [deleteResourceId, setDeleteResourceId] = React.useState<string>();
+  const [name, setName] = React.useState<string>();
+
+  const resourceTypeLabel = getResourceTypeLabel(t, resourceType);
+
+  const deleteAction: DeleteListActionResult['deleteAction'] = ({ resourceId, resourceName, disabledReason }) => {
+    const popperProps = disabledReason ? { tooltipProps: { content: disabledReason } } : undefined;
+    return {
+      title: t('Delete {{ resourceType }}', { resourceType: resourceTypeLabel }),
+      isAriaDisabled: !!disabledReason,
+      ...popperProps,
+      onClick: () => {
+        setDeleteResourceId(resourceId);
+        setName(resourceName);
+      },
+    };
+  };
+
+  const onClose = () => {
+    setDeleteResourceId(undefined);
+    setName(undefined);
+  };
+
+  const deleteModal = deleteResourceId && (
+    <DeleteModal
+      resourceType={resourceTypeLabel}
+      resourceName={name || deleteResourceId}
+      onClose={onClose}
+      onDelete={async () => {
+        await onDelete(deleteResourceId);
+        onClose();
+      }}
+    />
+  );
+
+  return { deleteAction, deleteModal };
+};

package/src/components/ListPage/ListPageBody.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { Alert, Bullseye, Spinner } from '@patternfly/react-core';
+
+import { getErrorMessage } from '../../utils/error';
+import { useTranslation } from '../../hooks/useTranslation';
+import ErrorBoundary from '../common/ErrorBoundary';
+
+type ListPageBodyProps = {
+  error: unknown;
+  loading: boolean;
+  children: React.ReactNode;
+};
+
+const ListPageBody: React.FC<ListPageBodyProps> = ({ error, loading, children }) => {
+  const { t } = useTranslation();
+  if (error) {
+    return (
+      <Alert variant="danger" title={t('An error occurred')} isInline>
+        {getErrorMessage(error)}
+      </Alert>
+    );
+  }
+
+  if (loading) {
+    return (
+      <Bullseye>
+        <Spinner />
+      </Bullseye>
+    );
+  }
+  return <ErrorBoundary>{children}</ErrorBoundary>;
+};
+
+export default ListPageBody;

package/src/components/ListPage/types.ts

@@ -0,0 +1,13 @@
+import { IAction } from '@patternfly/react-table';
+
+export type DeleteListActionResult = {
+  deleteAction: (params: { resourceId: string; resourceName?: string; disabledReason?: string }) => IAction;
+  deleteModal: React.ReactNode;
+};
+
+export type DeleteListActionProps = {
+  onDelete: (resourceId: string) => Promise<unknown>;
+  resourceType: string;
+};
+
+export type DeleteListActionHook = (args: DeleteListActionProps) => DeleteListActionResult;

package/src/components/NavItem/NavItem.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+import { NavItem as PFNavItem } from '@patternfly/react-core';
+import { useAppContext } from '../../hooks/useAppContext';
+
+type ActiveChildrenProps = {
+  isActive: boolean;
+  children: React.ReactNode;
+  setIsActive: (isActive: boolean) => void;
+};
+
+const ActiveChildren: React.FC<ActiveChildrenProps> = ({ isActive, children, setIsActive }) => {
+  React.useEffect(() => {
+    setIsActive(isActive);
+  }, [isActive, setIsActive]);
+  return children;
+};
+
+type NavItemProps = {
+  to: string;
+  children: React.ReactNode;
+};
+
+const NavItem: React.FC<NavItemProps> = ({ to, children }) => {
+  const {
+    router: { NavLink },
+  } = useAppContext();
+  const [isActive, setIsActive] = React.useState(false);
+  return (
+    <PFNavItem id={to} isActive={isActive}>
+      <NavLink to={to}>
+        {({ isActive }) => (
+          <ActiveChildren setIsActive={setIsActive} isActive={isActive}>
+            {children}
+          </ActiveChildren>
+        )}
+      </NavLink>
+    </PFNavItem>
+  );
+};
+
+export default NavItem;

package/src/components/OverviewPage/Cards/Status/ApplicationStatusChart.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+
+import { ApplicationsSummaryStatusType } from '@flightctl/types';
+import { FlightCtlLabel } from '../../../../types/extraTypes';
+
+import { useTranslation } from '../../../../hooks/useTranslation';
+import { getApplicationStatusHelperText } from '../../../Status/utils';
+import { getApplicationSummaryStatusItems } from '../../../../utils/status/applications';
+import { FilterSearchParams } from '../../../../utils/status/devices';
+import { toOverviewChartData } from './utils';
+import DonutChart from '../../../charts/DonutChart';
+
+const ApplicationStatusChart = ({
+  applicationStatus,
+  labels,
+  fleets,
+}: {
+  applicationStatus: Record<string, number>;
+  labels: FlightCtlLabel[];
+  fleets: string[];
+}) => {
+  const { t } = useTranslation();
+
+  const statusItems = getApplicationSummaryStatusItems(t);
+
+  const appStatusData = toOverviewChartData<ApplicationsSummaryStatusType>(
+    applicationStatus,
+    statusItems,
+    labels,
+    fleets,
+    FilterSearchParams.AppStatus,
+  );
+
+  return (
+    <DonutChart title={t('Application status')} data={appStatusData} helperText={getApplicationStatusHelperText(t)} />
+  );
+};
+
+export default ApplicationStatusChart;