@flightctl/ui-components 1.1.0-rc3 → 1.1.0-rc5

package/src/components/Catalog/EditWizard/EditWizard.tsx

@@ -0,0 +1,287 @@
+import * as React from 'react';
+import {
+  Alert,
+  Breadcrumb,
+  BreadcrumbItem,
+  Button,
+  Content,
+  ContentVariants,
+  EmptyState,
+  PageSection,
+  Spinner,
+  Stack,
+  StackItem,
+  Title,
+} from '@patternfly/react-core';
+import { CatalogItemCategory } from '@flightctl/types/alpha';
+import { ApplicationProviderSpec, ContainerApplication, Device, Fleet } from '@flightctl/types';
+import { load } from 'js-yaml';
+
+import ErrorBoundary from '../../common/ErrorBoundary';
+import { getErrorMessage } from '../../../utils/error';
+import { getAppPatches, getFullContainerURI, getOsPatches } from '../utils';
+import EditOsWizard from './EditOsWizard';
+import { APP_CHANNEL_LABEL_KEY, OS_CHANNEL_LABEL_KEY } from '../const';
+import EditAppWizard from './EditAppWizard';
+import { useAppContext } from '../../../hooks/useAppContext';
+import { useFetch } from '../../../hooks/useFetch';
+import { Link, ROUTE, useNavigate } from '../../../hooks/useNavigate';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { useCatalogItem } from '../useCatalogs';
+import { useFetchPeriodically } from '../../../hooks/useFetchPeriodically';
+import { UpdateSuccessPageContent } from '../InstallWizard/UpdateSuccessPage';
+
+type EditWizardProps = {
+  specPath: string;
+  currentLabels: Record<string, string> | undefined;
+  currentOsImage: string | undefined;
+  currentApps: ApplicationProviderSpec[] | undefined;
+  loading: boolean;
+  error: unknown;
+  resourceId: string;
+  isDevice: boolean;
+  resourceName?: string;
+};
+
+const EditWizard = ({
+  specPath,
+  currentLabels,
+  currentOsImage,
+  currentApps,
+  error,
+  loading,
+  resourceId,
+  isDevice,
+  resourceName,
+}: EditWizardProps) => {
+  const [isSuccess, setIsSuccess] = React.useState(false);
+  const { t } = useTranslation();
+  const { patch } = useFetch();
+  const {
+    router: { useParams },
+  } = useAppContext();
+  const { catalogId, itemId } = useParams() as { catalogId: string; itemId: string };
+
+  const [catalogItem, catalogItemLoading, catalogItemErr] = useCatalogItem(catalogId, itemId);
+
+  const {
+    router: { useSearchParams },
+  } = useAppContext();
+  const [searchParams] = useSearchParams();
+  const appName = searchParams.get('appName') || '';
+  const version = searchParams.get('version') || '';
+  const channel = searchParams.get('channel') || '';
+  const navigate = useNavigate();
+
+  let content: React.ReactNode;
+  if (catalogItemErr) {
+    content = (
+      <Alert isInline variant="danger" title={t('Failed to load catalog item')}>
+        {getErrorMessage(catalogItemErr)}
+      </Alert>
+    );
+  } else if (error) {
+    content = (
+      <Alert isInline variant="danger" title={isDevice ? t('Failed to load device') : t('Failed to load fleet')}>
+        {getErrorMessage(error)}
+      </Alert>
+    );
+  } else if (catalogItemLoading || loading) {
+    content = <EmptyState titleText={t('Loading')} headingLevel="h4" icon={Spinner} />;
+  } else if (catalogItem?.spec.category === CatalogItemCategory.CatalogItemCategorySystem) {
+    const currentVersion = version
+      ? catalogItem.spec.versions.find((v) => v.version === version)
+      : catalogItem.spec.versions.find((v) => {
+          const imgUri = getFullContainerURI(catalogItem.spec.artifacts, v);
+          return !!currentOsImage && !!imgUri && imgUri === currentOsImage;
+        });
+    const currentChannel = channel || currentLabels?.[OS_CHANNEL_LABEL_KEY];
+    if (!currentVersion || !currentChannel) {
+      content = <Alert isInline variant="danger" title={t('Failed to find operating system')} />;
+    } else {
+      content = (
+        <EditOsWizard
+          isEdit={!version}
+          catalogItem={catalogItem}
+          currentChannel={currentChannel}
+          currentVersion={currentVersion}
+          currentLabels={currentLabels}
+          version={version}
+          channel={channel}
+          onUpdate={async (catalogItemVersion, values) => {
+            const allPatches = getOsPatches({
+              catalogItem,
+              catalogItemVersion,
+              channel: values.channel,
+              currentLabels,
+              specPath,
+              currentOsImage,
+            });
+            await patch(`${isDevice ? 'devices' : 'fleets'}/${resourceId}`, allPatches);
+            setIsSuccess(true);
+          }}
+        />
+      );
+    }
+  } else if (catalogItem?.spec.category === CatalogItemCategory.CatalogItemCategoryApplication) {
+    const appSpec = appName ? currentApps?.find((app) => app.name === appName) : undefined;
+
+    if (!!appName && !appSpec) {
+      content = <Alert isInline variant="danger" title={t('Failed to find application')} />;
+    } else {
+      const currentVersion = appSpec
+        ? catalogItem.spec.versions.find((v) => {
+            const imgUri = getFullContainerURI(catalogItem.spec.artifacts, v);
+            return !!imgUri && imgUri === (appSpec as ContainerApplication).image;
+          })
+        : catalogItem.spec.versions.find((v) => v.version === version);
+      const currentChannel = appSpec ? currentLabels?.[`${appName}.${APP_CHANNEL_LABEL_KEY}`] : channel;
+
+      if (!currentVersion || !currentChannel) {
+        content = <Alert isInline variant="danger" title={t('Failed to find application')} />;
+      } else {
+        content = (
+          <EditAppWizard
+            catalogItem={catalogItem}
+            appSpec={appName ? appSpec : undefined}
+            currentApps={currentApps}
+            currentLabels={currentLabels}
+            currentVersion={currentVersion}
+            currentChannel={currentChannel}
+            version={version}
+            channel={channel}
+            onUpdate={async (catalogItemVersion, values) => {
+              const allPatches = getAppPatches({
+                appName: values.appName,
+                catalogItem,
+                catalogItemVersion,
+                channel: values.channel,
+                currentApps,
+                currentLabels,
+                formValues:
+                  values.configureVia === 'editor'
+                    ? (load(values.editorContent) as Record<string, unknown>)
+                    : values.formValues,
+                selectedAssets: values.selectedAssets,
+                specPath,
+              });
+              await patch(`${isDevice ? 'devices' : 'fleets'}/${resourceId}`, allPatches);
+              setIsSuccess(true);
+            }}
+          />
+        );
+      }
+    }
+  }
+
+  return (
+    <>
+      <PageSection hasBodyWrapper={false} type="breadcrumb">
+        <Breadcrumb>
+          <BreadcrumbItem>
+            <Link to={isDevice ? ROUTE.DEVICES : ROUTE.FLEETS}>{isDevice ? t('Devices') : t('Fleets')}</Link>
+          </BreadcrumbItem>
+          <BreadcrumbItem>
+            <Link to={{ route: isDevice ? ROUTE.DEVICE_DETAILS : ROUTE.FLEET_DETAILS, postfix: resourceId }}>
+              {resourceName || resourceId}
+            </Link>
+          </BreadcrumbItem>
+          <BreadcrumbItem>
+            <Link
+              to={{ route: isDevice ? ROUTE.DEVICE_DETAILS : ROUTE.FLEET_DETAILS, postfix: `${resourceId}/catalog` }}
+            >
+              {t('Software catalog')}
+            </Link>
+          </BreadcrumbItem>
+          <BreadcrumbItem
+            isActive
+          >{`${catalogItem?.spec.displayName || itemId}${appName ? ` (${appName})` : ''}`}</BreadcrumbItem>
+        </Breadcrumb>
+      </PageSection>
+      <PageSection hasBodyWrapper={false}>
+        <Stack>
+          <StackItem>
+            <Title headingLevel="h1" size="3xl">
+              {version
+                ? t('Deploy {{ name }}', { name: catalogItem?.spec.displayName || itemId })
+                : t('Edit {{name}}', { name: catalogItem?.spec.displayName || itemId })}
+            </Title>
+          </StackItem>
+          <StackItem>
+            {catalogItem?.spec.shortDescription && (
+              <Content component={ContentVariants.small}>{catalogItem.spec.shortDescription}</Content>
+            )}
+          </StackItem>
+        </Stack>
+      </PageSection>
+      <PageSection hasBodyWrapper={false} type="wizard">
+        <ErrorBoundary>
+          {isSuccess ? (
+            <UpdateSuccessPageContent isDevice={isDevice}>
+              <Button
+                variant="link"
+                onClick={() => {
+                  navigate({
+                    route: isDevice ? ROUTE.DEVICE_DETAILS : ROUTE.FLEET_DETAILS,
+                    postfix: `${resourceId}/catalog`,
+                  });
+                }}
+              >
+                {isDevice ? t('Return to device catalog') : t('Return to fleet catalog')}
+              </Button>
+            </UpdateSuccessPageContent>
+          ) : (
+            content
+          )}
+        </ErrorBoundary>
+      </PageSection>
+    </>
+  );
+};
+
+export const EditDeviceWizard = () => {
+  const {
+    router: { useParams },
+  } = useAppContext();
+  const { deviceId } = useParams() as { deviceId: string };
+
+  const [device, loading, error] = useFetchPeriodically<Required<Device>>({
+    endpoint: `devices/${deviceId}`,
+  });
+  return (
+    <EditWizard
+      currentApps={device?.spec.applications}
+      currentLabels={device?.metadata.labels}
+      currentOsImage={device?.spec.os?.image}
+      error={error}
+      loading={loading}
+      specPath="/"
+      resourceId={deviceId}
+      resourceName={device?.metadata.labels?.alias}
+      isDevice
+    />
+  );
+};
+
+export const EditFleetWizard = () => {
+  const {
+    router: { useParams },
+  } = useAppContext();
+  const params = useParams() as { fleetId: string };
+
+  const [fleet, loading, error] = useFetchPeriodically<Required<Fleet>>({
+    endpoint: `fleets/${params.fleetId}`,
+  });
+  return (
+    <EditWizard
+      currentApps={fleet?.spec.template.spec.applications}
+      currentLabels={fleet?.metadata.labels}
+      currentOsImage={fleet?.spec.template.spec.os?.image}
+      error={error}
+      loading={loading}
+      specPath="/spec/template/"
+      resourceId={params.fleetId}
+      isDevice={false}
+    />
+  );
+};

package/src/components/Catalog/EditWizard/steps/ReviewStep.tsx

@@ -0,0 +1,83 @@
+import {
+  Alert,
+  Card,
+  CardBody,
+  CardTitle,
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  List,
+  ListItem,
+  Stack,
+  StackItem,
+  Title,
+} from '@patternfly/react-core';
+import * as React from 'react';
+
+import FlightCtlForm from '../../../form/FlightCtlForm';
+import { useTranslation } from '../../../../hooks/useTranslation';
+import { InstallSpecFormik } from '../../InstallWizard/types';
+import { useFormikContext } from 'formik';
+import { RJSFValidationError } from '@rjsf/utils';
+
+type ReviewStepProps = {
+  error?: string;
+  schemaErrors?: RJSFValidationError[];
+  isEdit: boolean;
+};
+
+const ReviewStep = ({ error, schemaErrors, isEdit }: ReviewStepProps) => {
+  const { t } = useTranslation();
+  const { values } = useFormikContext<InstallSpecFormik>();
+  return (
+    <FlightCtlForm>
+      <Stack hasGutter>
+        <StackItem>
+          <Title headingLevel="h3">
+            {isEdit ? t('Review update specifications') : t('Review deployment specifications')}
+          </Title>
+        </StackItem>
+        <StackItem>
+          <Card>
+            <CardTitle>{isEdit ? t('Update specifications') : t('Deployment specifications')}</CardTitle>
+            <CardBody>
+              <DescriptionList>
+                <DescriptionListGroup>
+                  <DescriptionListTerm>{t('Channel')}</DescriptionListTerm>
+                  <DescriptionListDescription>{values.channel}</DescriptionListDescription>
+                </DescriptionListGroup>
+                <DescriptionListGroup>
+                  <DescriptionListTerm>{t('Version')}</DescriptionListTerm>
+                  <DescriptionListDescription>{values.version}</DescriptionListDescription>
+                </DescriptionListGroup>
+              </DescriptionList>
+            </CardBody>
+          </Card>
+        </StackItem>
+        {error && (
+          <StackItem>
+            <Alert variant="danger" title={isEdit ? t('Failed to update') : t('Failed to deploy')} isInline>
+              {error}
+            </Alert>
+          </StackItem>
+        )}
+        {!!schemaErrors?.length && (
+          <StackItem>
+            <Alert variant="danger" title={t('Configuration is not valid')} isInline>
+              <List>
+                {schemaErrors.map((e, index) => (
+                  <ListItem key={index}>
+                    {e.property}: {e.message}
+                  </ListItem>
+                ))}
+              </List>
+            </Alert>
+          </StackItem>
+        )}
+      </Stack>
+    </FlightCtlForm>
+  );
+};
+
+export default ReviewStep;

package/src/components/Catalog/EditWizard/steps/UpdateGraph.css

@@ -0,0 +1,138 @@
+.fctl-channel {
+  align-items: center;
+  display: flex;
+}
+
+.fctl-channel-line {
+  align-items: center;
+  display: flex;
+  height: 30px;
+  justify-content: center;
+  position: relative;
+  min-width: 50px;
+  width: 100%;
+}
+
+.fctl-channel-line::before {
+  background-color: var(--pf-t--global--border--color--default);
+  content: '';
+  height: 4px;
+  position: absolute;
+  width: 100%;
+}
+
+.fctl-channel-line:last-child::after {
+  background: transparent;
+  border: 8px solid transparent;
+  border-left-color: var(--pf-t--global--border--color--default);
+  border-width: 8px 12px;
+  content: '';
+  position: absolute;
+  right: -15px;
+}
+
+.fctl-channel-more-versions {
+  background: var(--pf-t--global--background--color--primary--default) !important;
+  border: 1px solid !important;
+  border-radius: 15px !important;
+  display: inline-block !important;
+  font-size: 11px !important;
+  font-weight: bold !important;
+  justify-content: center;
+  padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--sm) !important;
+  position: absolute !important;
+}
+
+.fctl-channel-more-versions::after {
+  display: none;
+}
+
+.fctl-channel-more-versions:hover,
+.fctl-channel-more-versions:focus {
+  background: var(--pf-t--global--color--brand--default) !important;
+  border-color: var(--pf-t--global--color--brand--default) !important;
+  color: var(--pf-t--global--background--color--primary--default) !important;
+}
+
+.fctl-channel-more-versions:focus {
+  outline: 0 !important;
+}
+
+.fctl-channel-name {
+  padding: 0 10px 0 20px;
+  min-width: 150px;
+  white-space: nowrap;
+  color: inherit;
+  padding-top: 20px;
+}
+
+.fctl-channel-path {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  width: 100%;
+  margin-top: 20px;
+}
+
+.fctl-channel-path .fctl-channel-line::before {
+  background-color: var(--pf-t--global--color--brand--default);
+}
+
+.fctl-channel-path .fctl-channel-line:last-child::after {
+  border-left-color: var(--pf-t--global--color--brand--default);
+}
+
+.fctl-channel-version {
+  display: flex;
+  flex-direction: column;
+  height: 35px;
+  justify-content: flex-end;
+  line-height: 1;
+  padding: 0 5px;
+  position: absolute;
+  text-align: center;
+  top: -35px;
+  overflow-wrap: anywhere;
+  word-break: normal;
+}
+
+.fctl-channel-version-dot {
+  background: var(--pf-t--global--color--brand--default) !important;
+  border-radius: 18px !important;
+  height: 18px !important;
+  padding: 0 !important;
+  position: absolute;
+  min-width: auto;
+  width: 18px !important;
+  z-index: 2;
+}
+
+.fctl-channel-version-dot::after {
+  background: var(--pf-t--global--background--color--primary--default) !important;
+  border: 2px solid var(--pf-t--global--background--color--primary--default) !important;
+  border-radius: 12px !important;
+  bottom: 2px !important;
+  content: '';
+  left: 2px !important;
+  position: absolute;
+  right: 2px !important;
+  top: 2px !important;
+}
+
+.fctl-channel-version-dot--current::after {
+  background: transparent !important;
+}
+
+.fctl-channel-version-dot--selected::after {
+  display: none;
+}
+
+.fctl-channel-version-dot--selected svg {
+  fill: var(--pf-t--global--background--color--primary--default);
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+}

package/src/components/Catalog/EditWizard/steps/UpdateGraph.tsx

@@ -0,0 +1,169 @@
+import * as React from 'react';
+import { useField, useFormikContext } from 'formik';
+import { CatalogItemVersion } from '@flightctl/types/alpha';
+import semver from 'semver';
+import { Button, Popover, Stack } from '@patternfly/react-core';
+import { ArrowCircleUpIcon } from '@patternfly/react-icons/dist/js/icons';
+
+import { useTranslation } from '../../../../hooks/useTranslation';
+import { InstallSpecFormik } from '../../InstallWizard/types';
+
+import './UpdateGraph.css';
+
+const MoreVersions = ({ updates }: { updates: CatalogItemVersion[] }) => {
+  const { t } = useTranslation();
+  const [, , { setValue }] = useField<string>('version');
+  return (
+    <ChannelLine>
+      <Popover
+        headerContent={t('Other available paths')}
+        bodyContent={(hide) => {
+          return (
+            <Stack hasGutter>
+              {updates.map((u) => (
+                <Button
+                  key={u.version}
+                  variant="link"
+                  onClick={() => {
+                    setValue(u.version);
+                    hide();
+                  }}
+                >
+                  {u.version}
+                </Button>
+              ))}
+            </Stack>
+          );
+        }}
+      >
+        <Button variant="secondary" className="fctl-channel-more-versions">
+          {t('+ More')}
+        </Button>
+      </Popover>
+    </ChannelLine>
+  );
+};
+
+const Channel = ({ children }: React.PropsWithChildren) => {
+  return <div className="fctl-channel">{children}</div>;
+};
+
+const ChannelLine = ({ children }: React.PropsWithChildren) => {
+  return <li className="fctl-channel-line">{children}</li>;
+};
+
+export const ChannelName = ({ children }: React.PropsWithChildren) => {
+  return <span className="fctl-channel-name">{children}</span>;
+};
+
+const ChannelPath = ({ children }: React.PropsWithChildren) => {
+  return <ul className="fctl-channel-path">{children}</ul>;
+};
+
+const ChannelVersion = ({ children }: React.PropsWithChildren) => {
+  return <span className="fctl-channel-version">{children}</span>;
+};
+
+const ChannelVersionDot = ({ version, current }: { version: string; current?: boolean }) => {
+  const { t } = useTranslation();
+  const [{ value }, , { setValue }] = useField<string>('version');
+
+  const isSelected = version === value;
+
+  let className = 'fctl-channel-version-dot';
+  let icon: React.ReactNode = undefined;
+  if (current) {
+    className = `${className} fctl-channel-version-dot--current`;
+  } else if (isSelected) {
+    className = `${className} fctl-channel-version-dot--selected`;
+    icon = <ArrowCircleUpIcon />;
+  }
+
+  return (
+    <Button
+      variant="secondary"
+      className={className}
+      icon={icon}
+      aria-label={t('Version {{version}}', { version })}
+      onClick={() => setValue(version)}
+    />
+  );
+};
+
+type UpdateGraphProps = {
+  currentChannel: string;
+  updates: CatalogItemVersion[];
+  currentVersion: CatalogItemVersion;
+};
+
+const UpdateGraph = ({ currentChannel, updates, currentVersion }: UpdateGraphProps) => {
+  const { t } = useTranslation();
+  const { values } = useFormikContext<InstallSpecFormik>();
+
+  const sortedUpdates = updates.sort((a, b) => semver.compare(a.version, b.version));
+
+  let content: React.ReactNode;
+
+  if (sortedUpdates.length === 2) {
+    content = (
+      <ChannelLine>
+        <ChannelVersion>{sortedUpdates[0].version}</ChannelVersion>
+        <ChannelVersionDot version={sortedUpdates[0].version} />
+      </ChannelLine>
+    );
+  } else if (sortedUpdates.length > 2) {
+    const updateIdx = sortedUpdates.findIndex((v) => v.version === values.version);
+    if (updateIdx === -1 || updateIdx === sortedUpdates.length - 1) {
+      //current or latest is selected
+      content = <MoreVersions updates={sortedUpdates.slice(0, -1)} />;
+    } else {
+      const beforeSelectedUpd = sortedUpdates.slice(0, updateIdx);
+      const afterSelectedUpd = sortedUpdates.slice(updateIdx + 1, -1);
+
+      const getContent = (upd: CatalogItemVersion[]) => {
+        if (!upd.length) {
+          return undefined;
+        }
+        if (upd.length === 1) {
+          return (
+            <ChannelLine>
+              <ChannelVersion>{upd[0].version}</ChannelVersion>
+              <ChannelVersionDot version={upd[0].version} />
+            </ChannelLine>
+          );
+        }
+        return <MoreVersions updates={upd} />;
+      };
+
+      content = (
+        <>
+          {getContent(beforeSelectedUpd)}
+          <ChannelLine>
+            <ChannelVersion>{sortedUpdates[updateIdx].version}</ChannelVersion>
+            <ChannelVersionDot version={sortedUpdates[updateIdx].version} />
+          </ChannelLine>
+          {getContent(afterSelectedUpd)}
+        </>
+      );
+    }
+  }
+
+  return (
+    <Channel>
+      <ChannelPath>
+        <ChannelLine>
+          <ChannelVersion>{t('{{version}} (current)', { version: currentVersion.version })}</ChannelVersion>
+          <ChannelVersionDot version={currentVersion.version} current />
+        </ChannelLine>
+        {content}
+        <ChannelLine>
+          <ChannelVersion>{sortedUpdates[sortedUpdates.length - 1].version}</ChannelVersion>
+          <ChannelVersionDot version={sortedUpdates[sortedUpdates.length - 1].version} />
+        </ChannelLine>
+      </ChannelPath>
+      <ChannelName>{t('{{currentChannel}} channel', { currentChannel })}</ChannelName>
+    </Channel>
+  );
+};
+
+export default UpdateGraph;