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

package/src/components/Catalog/InstallWizard/utils.ts

@@ -0,0 +1,106 @@
+import { CatalogItem } from '@flightctl/types/alpha';
+import validator from '@rjsf/validator-ajv8';
+import { createSchemaUtils } from '@rjsf/utils';
+import { ApplicationProviderSpec, ApplicationVolume } from '@flightctl/types';
+import merge from 'lodash/merge';
+import { FormikHelpers } from 'formik';
+
+import {
+  APP_VOLUME_CATALOG_LABEL_KEY,
+  APP_VOLUME_CHANNEL_LABEL_KEY,
+  APP_VOLUME_ITEM_LABEL_KEY,
+  getAppVolumeName,
+} from '../const';
+import { AssetSelection } from '../../DynamicForm/DynamicForm';
+import { DynamicFormConfigFormik } from './types';
+import { convertObjToYAMLString } from '../../common/CodeEditor/YamlEditor';
+
+const appSpecFilteredKeys = ['name', 'image', 'appType'];
+
+export const getInitialAppConfig = (
+  catalogItem: CatalogItem,
+  version: string | undefined,
+  existingApp?: ApplicationProviderSpec,
+  currentLabels?: Record<string, string>,
+): DynamicFormConfigFormik => {
+  const configSchema =
+    catalogItem.spec.versions.find((v) => v.version === version)?.configSchema ??
+    catalogItem?.spec.defaults?.configSchema;
+  let defaultConfig =
+    catalogItem.spec.versions.find((v) => v.version === version)?.config ?? catalogItem?.spec.defaults?.config;
+
+  let formValues: Record<string, unknown> = {};
+  if (configSchema) {
+    const schemaUtils = createSchemaUtils(validator, configSchema);
+    formValues = schemaUtils.getDefaultFormState(configSchema) as Record<string, unknown>;
+  }
+
+  const selectedAssets: AssetSelection[] = [];
+  if (existingApp) {
+    const appConfig = Object.keys(existingApp).reduce(
+      (acc, key) => {
+        if (!appSpecFilteredKeys.includes(key)) {
+          acc[key] = existingApp[key] as unknown;
+        }
+        return acc;
+      },
+      {} as Record<string, unknown>,
+    );
+
+    formValues = merge({}, formValues, appConfig);
+    defaultConfig = merge({}, defaultConfig || {}, appConfig);
+
+    if (currentLabels) {
+      const existingVolumes = formValues['volumes'];
+      if (Array.isArray(existingVolumes)) {
+        (existingVolumes as ApplicationVolume[]).forEach((vol, idx) => {
+          const volumeName = vol.name;
+          if (volumeName) {
+            const volumeCatalog =
+              currentLabels[`${getAppVolumeName(existingApp.name, volumeName, APP_VOLUME_CATALOG_LABEL_KEY)}`];
+            const volumeChannel =
+              currentLabels[`${getAppVolumeName(existingApp.name, volumeName, APP_VOLUME_CHANNEL_LABEL_KEY)}`];
+            const volumeItem =
+              currentLabels[`${getAppVolumeName(existingApp.name, volumeName, APP_VOLUME_ITEM_LABEL_KEY)}`];
+
+            if (volumeCatalog && volumeChannel && volumeItem) {
+              selectedAssets.push({
+                assetCatalog: volumeCatalog,
+                assetChannel: volumeChannel,
+                assetItemName: volumeItem,
+                volumeIndex: idx,
+                assetVersion: '', // populated async by the parent
+              } as AssetSelection);
+            }
+          }
+        });
+      }
+    }
+  }
+
+  const dynamicFormValid = configSchema
+    ? validator.validateFormData(formValues, configSchema).errors?.length === 0
+    : true;
+
+  return {
+    appName: existingApp?.name || '',
+    configureVia: configSchema ? 'form' : 'editor',
+    editorContent: defaultConfig ? convertObjToYAMLString(defaultConfig) : '',
+    selectedAssets,
+    formValues,
+    configSchema,
+    dynamicFormValid,
+  };
+};
+
+export const applyInitialConfig = (
+  setFieldValue: FormikHelpers<unknown>['setFieldValue'],
+  appConfig: DynamicFormConfigFormik,
+) => {
+  setFieldValue('configSchema', appConfig.configSchema, true);
+  setFieldValue('configureVia', appConfig.configureVia, true);
+  setFieldValue('dynamicFormValid', appConfig.dynamicFormValid, true);
+  setFieldValue('editorContent', appConfig.editorContent, true);
+  setFieldValue('formValues', appConfig.formValues, true);
+  setFieldValue('selectedAssets', appConfig.selectedAssets, true);
+};

package/src/components/Catalog/InstalledSoftware.tsx

@@ -0,0 +1,359 @@
+import { ContainerApplication, DeviceSpec } from '@flightctl/types';
+import { ArrowCircleUpIcon } from '@patternfly/react-icons/dist/js/icons/arrow-circle-up-icon';
+import { ActionsColumn, IAction } from '@patternfly/react-table';
+import * as React from 'react';
+import { CatalogItem, CatalogItemVersion } from '@flightctl/types/alpha';
+import {
+  Button,
+  Card,
+  CardBody,
+  CardTitle,
+  Content,
+  ContentVariants,
+  Divider,
+  EmptyState,
+  EmptyStateBody,
+  Flex,
+  FlexItem,
+  Label,
+  Popover,
+  Spinner,
+  Stack,
+  StackItem,
+  Title,
+} from '@patternfly/react-core';
+import { CubeIcon } from '@patternfly/react-icons/dist/js/icons/cube-icon';
+
+import { getCatalogItemIcon, getFullContainerURI, getUpdates } from './utils';
+import { useFetch } from '../../hooks/useFetch';
+import { useTranslation } from '../../hooks/useTranslation';
+import DeleteModal from '../modals/DeleteModal/DeleteModal';
+import {
+  APP_CATALOG_LABEL_KEY,
+  APP_CHANNEL_LABEL_KEY,
+  APP_ITEM_LABEL_KEY,
+  OS_CATALOG_LABEL_KEY,
+  OS_CHANNEL_LABEL_KEY,
+  OS_ITEM_LABEL_KEY,
+} from './const';
+import { useCatalogItem } from './useCatalogs';
+
+type UpdateInfoProps = {
+  catalogItem: CatalogItem;
+  channel: string;
+  catalogItemVersion: CatalogItemVersion;
+  onClick: VoidFunction;
+  canEdit: boolean;
+};
+
+const UpdateInfo = ({ onClick, catalogItem, channel, catalogItemVersion, canEdit }: UpdateInfoProps) => {
+  const { t } = useTranslation();
+  const updates = getUpdates(catalogItem, channel, catalogItemVersion.version);
+
+  if (!updates.length) {
+    return false;
+  }
+
+  return canEdit ? (
+    <Button variant="link" isInline onClick={onClick} icon={<ArrowCircleUpIcon />}>
+      {t('Update available')}
+    </Button>
+  ) : (
+    <Label variant="outline" color="blue">
+      {t('Update available')}
+    </Label>
+  );
+};
+
+export const CatalogItemTitle = ({
+  item,
+  appName,
+  version,
+  channel,
+}: {
+  item: CatalogItem;
+  appName?: string;
+  version?: string;
+  channel: string;
+}) => {
+  const { t } = useTranslation();
+  return (
+    <Flex alignItems={{ default: 'alignItemsCenter' }} alignContent={{ default: 'alignContentCenter' }}>
+      <FlexItem>
+        <img src={getCatalogItemIcon(item)} alt={`${item.metadata.name} icon`} style={{ maxWidth: '40px' }} />
+      </FlexItem>
+      <FlexItem>
+        <Stack>
+          <StackItem>
+            <Title headingLevel="h3">{item.spec.displayName || item.metadata.name}</Title>
+          </StackItem>
+          {appName && (
+            <StackItem>
+              <Title headingLevel="h6">{appName}</Title>
+            </StackItem>
+          )}
+          {version && (
+            <StackItem>
+              <Content component={ContentVariants.small}>
+                {t('Version: {{version}}, Channel: {{channel}}', { version, channel })}
+              </Content>
+            </StackItem>
+          )}
+        </Stack>
+      </FlexItem>
+    </Flex>
+  );
+};
+
+type InstalledSoftwareProps = {
+  labels: Record<string, string> | undefined;
+  spec: DeviceSpec | undefined;
+  onDeleteOs: () => Promise<void>;
+  onDeleteApp: (appName: string) => Promise<void>;
+  onEdit: (catalogId: string, catalogItemId: string, appName?: string) => void;
+  canEdit: boolean;
+};
+
+type AppItem = { item: CatalogItem; name: string };
+
+const InstalledSoftware = ({ labels, spec, onDeleteOs, onDeleteApp, onEdit, canEdit }: InstalledSoftwareProps) => {
+  const { t } = useTranslation();
+  const [appItems, setAppItems] = React.useState<AppItem[]>();
+  const [appsLoading, setAppsLoading] = React.useState(true);
+  const [deleteOs, setDeleteOs] = React.useState(false);
+  const [appToDelete, setAppToDelete] = React.useState<string>();
+  const osItemId = labels?.[OS_ITEM_LABEL_KEY];
+  const osChannel = labels?.[OS_CHANNEL_LABEL_KEY];
+  const osCatalog = labels?.[OS_CATALOG_LABEL_KEY];
+
+  const { get } = useFetch();
+
+  const apps = React.useMemo(() => {
+    if (!labels) {
+      return [];
+    }
+    return Object.keys(labels).reduce(
+      (acc, key) => {
+        if (key.endsWith(APP_ITEM_LABEL_KEY)) {
+          const appName = key.slice(0, -(APP_ITEM_LABEL_KEY.length + 1));
+          const item = labels[`${appName}.${APP_ITEM_LABEL_KEY}`];
+          const catalog = labels[`${appName}.${APP_CATALOG_LABEL_KEY}`];
+          const channel = labels[`${appName}.${APP_CHANNEL_LABEL_KEY}`];
+          if (item && catalog && channel && spec?.applications?.find((a) => a.name === appName)) {
+            acc.push({
+              item,
+              catalog,
+              channel,
+              name: appName,
+            });
+          }
+        }
+        return acc;
+      },
+      [] as {
+        item: string;
+        catalog: string;
+        channel: string;
+        name: string;
+      }[],
+    );
+  }, [labels, spec?.applications]);
+
+  React.useEffect(() => {
+    (async () => {
+      const appRequests = apps.map((app) => get<CatalogItem>(`catalogs/${app.catalog}/items/${app.item}`));
+      const results = await Promise.allSettled(appRequests);
+
+      const items: AppItem[] = [];
+      results.forEach((r, idx) => {
+        if (r.status === 'rejected') {
+          // eslint-disable-next-line no-console
+          console.warn(`Failed to fetch catalog item ${apps[idx].catalog}/${apps[idx].item}`);
+        } else {
+          items.push({
+            item: r.value,
+            name: apps[idx].name,
+          });
+        }
+      });
+      setAppItems(items);
+      setAppsLoading(false);
+    })();
+  }, [apps, get]);
+
+  const [osItem, osLoading] = useCatalogItem(osCatalog, osItemId);
+
+  if (osLoading || appsLoading) {
+    return <EmptyState titleText={t('Loading installed software')} headingLevel="h4" icon={Spinner} />;
+  }
+
+  const catalogItemVersion = osItem?.spec.versions.find((v) => {
+    const imageUri = getFullContainerURI(osItem.spec.artifacts, v);
+    return !!imageUri && !!spec?.os?.image && imageUri === spec.os.image && v.channels.includes(osChannel || '');
+  });
+
+  const hasOs = !!(osItem && osCatalog && osChannel && catalogItemVersion && spec);
+  const hasApps = !!(appItems && appItems.length > 0);
+  const isEmpty = !hasOs && !hasApps;
+
+  return (
+    <>
+      <Card>
+        <CardTitle>{t('Deployed Software')}</CardTitle>
+        <CardBody>
+          {isEmpty ? (
+            <EmptyState headingLevel="h4" icon={CubeIcon} titleText={t('No software deployed')}>
+              <EmptyStateBody>{t('Select an operating system or application from the catalog below.')}</EmptyStateBody>
+            </EmptyState>
+          ) : (
+            <Stack hasGutter>
+              {osItem && osCatalog && osChannel && catalogItemVersion && spec && (
+                <StackItem key={osItem.metadata.name}>
+                  <Flex alignItems={{ default: 'alignItemsCenter' }}>
+                    <FlexItem grow={{ default: 'grow' }}>
+                      <CatalogItemTitle item={osItem} channel={osChannel} version={catalogItemVersion.version} />
+                    </FlexItem>
+                    <FlexItem>
+                      <UpdateInfo
+                        catalogItem={osItem}
+                        catalogItemVersion={catalogItemVersion}
+                        channel={osChannel}
+                        onClick={() => onEdit(osItem.metadata.catalog, osItem.metadata.name || '')}
+                        canEdit={canEdit}
+                      />
+                    </FlexItem>
+                    {(osItem.spec.deprecation || catalogItemVersion.deprecation) && (
+                      <FlexItem>
+                        <Popover
+                          bodyContent={osItem.spec.deprecation?.message || catalogItemVersion.deprecation?.message}
+                          withFocusTrap
+                          triggerAction="click"
+                        >
+                          <Label variant="outline" color="orange">
+                            {t('Deprecated')}
+                          </Label>
+                        </Popover>
+                      </FlexItem>
+                    )}
+                    {canEdit && (
+                      <FlexItem>
+                        <ActionsColumn
+                          items={[
+                            {
+                              title: t('Edit'),
+                              onClick: () => onEdit(osItem.metadata.catalog, osItem.metadata.name || ''),
+                            },
+                            {
+                              title: t('Delete'),
+                              onClick: () => setDeleteOs(true),
+                            },
+                          ]}
+                        />
+                      </FlexItem>
+                    )}
+                  </Flex>
+                </StackItem>
+              )}
+              {appItems?.map((app, index) => {
+                const appChannel = labels?.[`${app.name}.${APP_CHANNEL_LABEL_KEY}`] || '';
+                const appSpec = spec?.applications?.find((a) => a.name === app.name);
+                const itemVersion =
+                  appSpec &&
+                  app.item.spec.versions.find((v) => {
+                    const refUri = getFullContainerURI(app.item.spec.artifacts, v);
+                    const imageMatches = refUri === (appSpec as ContainerApplication).image;
+                    return imageMatches && v.channels.includes(appChannel);
+                  });
+                const actions: IAction[] = [
+                  ...(itemVersion
+                    ? [
+                        {
+                          title: t('Edit'),
+                          onClick: () => onEdit(app.item.metadata.catalog, app.item.metadata.name || '', app.name),
+                        },
+                      ]
+                    : []),
+                  {
+                    title: t('Delete'),
+                    onClick: () => setAppToDelete(app.name),
+                  },
+                ];
+
+                return (
+                  <React.Fragment key={app.name}>
+                    {(hasOs || index > 0) && <Divider />}
+                    <StackItem>
+                      <Flex alignItems={{ default: 'alignItemsCenter' }}>
+                        <FlexItem grow={{ default: 'grow' }}>
+                          <CatalogItemTitle
+                            item={app.item}
+                            channel={appChannel}
+                            version={itemVersion?.version}
+                            appName={app.name}
+                          />
+                        </FlexItem>
+                        <FlexItem>
+                          {itemVersion && (
+                            <UpdateInfo
+                              catalogItem={app.item}
+                              catalogItemVersion={itemVersion}
+                              channel={appChannel}
+                              onClick={() => onEdit(app.item.metadata.catalog, app.item.metadata.name || '', app.name)}
+                              canEdit={canEdit}
+                            />
+                          )}
+                        </FlexItem>
+                        {(app.item.spec.deprecation || itemVersion?.deprecation) && (
+                          <FlexItem>
+                            <Popover
+                              bodyContent={app.item.spec.deprecation?.message || itemVersion?.deprecation?.message}
+                              withFocusTrap
+                              triggerAction="click"
+                            >
+                              <Label variant="outline" color="orange">
+                                {t('Deprecated')}
+                              </Label>
+                            </Popover>
+                          </FlexItem>
+                        )}
+                        {canEdit && (
+                          <FlexItem>
+                            <ActionsColumn items={actions} />
+                          </FlexItem>
+                        )}
+                      </Flex>
+                    </StackItem>
+                  </React.Fragment>
+                );
+              })}
+            </Stack>
+          )}
+        </CardBody>
+      </Card>
+      {deleteOs && (
+        <DeleteModal
+          onClose={() => setDeleteOs(false)}
+          onDelete={async () => {
+            await onDeleteOs();
+            setDeleteOs(false);
+          }}
+          resourceName={osItem?.spec.displayName || osItem?.metadata.name || ''}
+          resourceType={t('operating system')}
+        />
+      )}
+      {appToDelete && (
+        <DeleteModal
+          onClose={() => setAppToDelete(undefined)}
+          onDelete={async () => {
+            await onDeleteApp(appToDelete);
+            setAppToDelete(undefined);
+          }}
+          resourceName={appToDelete}
+          resourceType={t('application')}
+        />
+      )}
+    </>
+  );
+};
+
+export default InstalledSoftware;

package/src/components/Catalog/ResourceCatalog/ResourceCatalogPage.css

@@ -0,0 +1,3 @@
+.fctl-resource-catalog-page {
+  margin-top: var(--pf-t--global--spacer--4xl);
+}

package/src/components/Catalog/ResourceCatalog/ResourceCatalogPage.tsx

@@ -0,0 +1,69 @@
+import { DeviceSpec, PatchRequest } from '@flightctl/types';
+import * as React from 'react';
+import { Stack, StackItem } from '@patternfly/react-core';
+
+import { CatalogItem } from '@flightctl/types/alpha';
+import { getRemoveAppPatches, getRemoveOsPatches } from '../../Catalog/utils';
+import { CatalogPageContent } from '../../Catalog/CatalogPage';
+import InstalledSoftware from '../../Catalog/InstalledSoftware';
+
+import './ResourceCatalogPage.css';
+
+type ResourceCatalogPageProps = {
+  specPath: string;
+  canEdit: boolean;
+  hasOwner?: boolean;
+  spec: DeviceSpec | undefined;
+  currentLabels: Record<string, string> | undefined;
+  onPatch: (allPatches: PatchRequest) => Promise<void>;
+  onEdit: (catalogId: string, catalogItemId: string, appName?: string) => void;
+  onInstall: (installItem: { item: CatalogItem; channel: string; version: string }) => void;
+};
+
+const ResourceCatalogPage = ({
+  currentLabels,
+  spec,
+  onPatch,
+  specPath,
+  canEdit,
+  hasOwner,
+  onEdit,
+  onInstall,
+}: ResourceCatalogPageProps) => {
+  const onDeleteOs = async () => {
+    const allPatches = getRemoveOsPatches({ currentLabels, specPath });
+    await onPatch(allPatches);
+  };
+
+  const onDeleteApp = async (appName: string) => {
+    const allPatches = getRemoveAppPatches({
+      appName,
+      currentApps: spec?.applications,
+      currentLabels,
+      specPath,
+    });
+    await onPatch(allPatches);
+  };
+
+  return (
+    <>
+      <Stack>
+        <StackItem>
+          <InstalledSoftware
+            labels={currentLabels}
+            spec={spec}
+            onDeleteOs={onDeleteOs}
+            onEdit={onEdit}
+            onDeleteApp={onDeleteApp}
+            canEdit={canEdit}
+          />
+        </StackItem>
+        <StackItem className="fctl-resource-catalog-page">
+          <CatalogPageContent canInstall={canEdit} targetHasOwner={hasOwner} onInstall={onInstall} targetSet />
+        </StackItem>
+      </Stack>
+    </>
+  );
+};
+
+export default ResourceCatalogPage;

package/src/components/Catalog/const.ts

@@ -0,0 +1,16 @@
+export const CATALOG_LABEL = 'catalog.flightctl.io/';
+
+export const OS_CHANNEL_LABEL_KEY = 'os.catalog.flightctl.io/channel';
+export const OS_CATALOG_LABEL_KEY = 'os.catalog.flightctl.io/catalog';
+export const OS_ITEM_LABEL_KEY = 'os.catalog.flightctl.io/item';
+export const APP_CHANNEL_LABEL_KEY = 'app.catalog.flightctl.io/channel';
+export const APP_CATALOG_LABEL_KEY = 'app.catalog.flightctl.io/catalog';
+export const APP_ITEM_LABEL_KEY = 'app.catalog.flightctl.io/item';
+export const APP_VOLUME_CHANNEL_LABEL_KEY = 'volume.catalog.flightctl.io/channel';
+export const APP_VOLUME_CATALOG_LABEL_KEY = 'volume.catalog.flightctl.io/catalog';
+export const APP_VOLUME_ITEM_LABEL_KEY = 'volume.catalog.flightctl.io/item';
+
+export const getAppVolumeName = (appName: string | undefined, volumeName: string, label: string) => {
+  const appPrefix = appName ? `${appName}.` : '';
+  return `${appPrefix}${volumeName}.${label}`;
+};

package/src/components/Catalog/useCatalogFilter.ts

@@ -0,0 +1,26 @@
+import { CatalogItemType } from '@flightctl/types/alpha';
+import * as React from 'react';
+
+export type CatalogFilter = {
+  nameFilter: string;
+  setNameFilter: (name: string) => void;
+  itemType: CatalogItemType[];
+  setItemType: (type: CatalogItemType[]) => void;
+  catalogs: string[];
+  setCatalogs: React.Dispatch<React.SetStateAction<string[]>>;
+};
+
+export const useCatalogFilter = (): CatalogFilter => {
+  const [nameFilter, setNameFilter] = React.useState('');
+  const [itemType, setItemType] = React.useState<CatalogItemType[]>([]);
+  const [catalogs, setCatalogs] = React.useState<string[]>([]);
+
+  return {
+    nameFilter,
+    setNameFilter,
+    itemType,
+    setItemType,
+    catalogs,
+    setCatalogs,
+  };
+};