@flightctl/ui-components 1.0.2 → 1.1.0-rc1

package/src/components/ImageBuilds/ImageExportCards.tsx

@@ -0,0 +1,226 @@
+import * as React from 'react';
+import {
+  Alert,
+  AlertActionCloseButton,
+  AlertGroup,
+  Button,
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  Content,
+  ContentVariants,
+  Flex,
+  FlexItem,
+  Icon,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { VirtualMachineIcon } from '@patternfly/react-icons/dist/js/icons/virtual-machine-icon';
+import { CloudSecurityIcon } from '@patternfly/react-icons/dist/js/icons/cloud-security-icon';
+import { ServerGroupIcon } from '@patternfly/react-icons/dist/js/icons/server-group-icon';
+import { BuilderImageIcon } from '@patternfly/react-icons/dist/js/icons/builder-image-icon';
+
+import { ExportFormatType, ImageExport, ImageExportConditionReason } from '@flightctl/types/imagebuilder';
+import { getExportFormatDescription, getExportFormatLabel, getImageExportStatusReason } from '../../utils/imageBuilds';
+import { getDateDisplay } from '../../utils/dates';
+import { useTranslation } from '../../hooks/useTranslation';
+import { ImageExportStatusDisplay } from './ImageBuildAndExportStatus';
+import { useAppContext } from '../../hooks/useAppContext';
+import { ROUTE } from '../../hooks/useNavigate';
+
+import './ImageExportCards.css';
+
+const iconMap: Record<ExportFormatType, React.ReactElement> = {
+  [ExportFormatType.ExportFormatTypeVMDK]: <VirtualMachineIcon />,
+  [ExportFormatType.ExportFormatTypeQCOW2]: <CloudSecurityIcon />,
+  [ExportFormatType.ExportFormatTypeQCOW2DiskContainer]: <BuilderImageIcon />,
+  [ExportFormatType.ExportFormatTypeISO]: <ServerGroupIcon />,
+};
+
+export type ImageExportFormatCardProps = {
+  imageBuildId: string;
+  imageReference: string | undefined;
+  format: ExportFormatType;
+  error?: { message: string; mode: 'export' | 'download' } | null;
+  imageExport?: ImageExport;
+  onExportImage: (format: ExportFormatType) => void;
+  onDownload: (format: ExportFormatType) => void;
+  onDismissError: VoidFunction;
+  isCreating: boolean;
+  isDownloading?: boolean;
+  isDisabled?: boolean;
+};
+
+type SelectImageBuildExportCardProps = {
+  format: ExportFormatType;
+  isChecked: boolean;
+  onToggle: (format: ExportFormatType, isChecked: boolean) => void;
+};
+
+export const SelectImageBuildExportCard = ({ format, isChecked, onToggle }: SelectImageBuildExportCardProps) => {
+  const { t } = useTranslation();
+
+  const title = getExportFormatLabel(t, format);
+  const description = getExportFormatDescription(t, format);
+
+  const id = `export-format-${format}`;
+  return (
+    <Card id={id} isSelectable isSelected={isChecked} className="fctl-imageexport-card">
+      <CardHeader
+        selectableActions={{
+          selectableActionId: format,
+          selectableActionAriaLabelledby: id,
+          name: format,
+          onChange: () => onToggle(format, !isChecked),
+        }}
+      >
+        <Flex direction={{ default: 'column' }} alignItems={{ default: 'alignItemsFlexStart' }}>
+          <FlexItem>
+            <Icon size="xl">{iconMap[format]}</Icon>
+          </FlexItem>
+          <FlexItem>
+            <Content>
+              <Content component={ContentVariants.h2}>{title}</Content>
+            </Content>
+          </FlexItem>
+        </Flex>
+      </CardHeader>
+      <CardBody>{description}</CardBody>
+    </Card>
+  );
+};
+
+export const ViewImageBuildExportCard = ({
+  imageBuildId,
+  format,
+  imageExport,
+  imageReference,
+  onExportImage,
+  onDownload,
+  onDismissError,
+  isCreating = false,
+  isDownloading = false,
+  isDisabled = false,
+  error,
+}: ImageExportFormatCardProps) => {
+  const { t } = useTranslation();
+  const {
+    router: { useNavigate: useRouterNavigate, appRoutes },
+  } = useAppContext();
+  const routerNavigate = useRouterNavigate();
+  const exists = !!imageExport;
+
+  const exportReason = exists ? getImageExportStatusReason(imageExport) : undefined;
+  const title = getExportFormatLabel(t, format);
+  const description = getExportFormatDescription(t, format);
+
+  const handleViewLogs = () => {
+    const baseRoute = appRoutes[ROUTE.IMAGE_BUILD_DETAILS];
+    routerNavigate(`${baseRoute}/${imageBuildId}/logs`);
+  };
+
+  return (
+    <Card isLarge className="fctl-imageexport-card">
+      <CardHeader>
+        <Flex direction={{ default: 'column' }} alignItems={{ default: 'alignItemsFlexStart' }}>
+          <FlexItem style={{ width: '100%' }}>
+            <Flex
+              justifyContent={{ default: 'justifyContentSpaceBetween' }}
+              alignItems={{ default: 'alignItemsCenter' }}
+            >
+              <FlexItem>
+                <Icon size="xl">{iconMap[format]}</Icon>
+              </FlexItem>
+              {exists && (
+                <FlexItem className="fctl-imageexport-card__status">
+                  <ImageExportStatusDisplay
+                    imageStatus={imageExport.status}
+                    imageReference={
+                      exportReason === ImageExportConditionReason.ImageExportConditionReasonCompleted
+                        ? imageReference
+                        : undefined
+                    }
+                  />
+                </FlexItem>
+              )}
+            </Flex>
+          </FlexItem>
+          <FlexItem>
+            <Content>
+              <Content component={ContentVariants.h2}>{title}</Content>
+            </Content>
+          </FlexItem>
+        </Flex>
+      </CardHeader>
+      <CardBody>{description}</CardBody>
+      <CardFooter>
+        <Stack hasGutter>
+          <StackItem>
+            <Flex>
+              {exportReason === ImageExportConditionReason.ImageExportConditionReasonFailed && (
+                <FlexItem>
+                  <Button
+                    variant="primary"
+                    onClick={() => onExportImage(format)}
+                    isDisabled={isDisabled}
+                    isLoading={isCreating}
+                  >
+                    {t('Retry')}
+                  </Button>
+                </FlexItem>
+              )}
+              {exportReason === ImageExportConditionReason.ImageExportConditionReasonCompleted && (
+                <FlexItem>
+                  <Button
+                    variant="secondary"
+                    onClick={() => onDownload(format)}
+                    isDisabled={isDisabled || isDownloading}
+                    isLoading={isDownloading}
+                  >
+                    {isDownloading ? t('Downloading...') : t('Download')}
+                  </Button>
+                </FlexItem>
+              )}
+              <FlexItem>
+                {exists ? (
+                  <Button variant="secondary" onClick={handleViewLogs}>
+                    {t('View logs')}
+                  </Button>
+                ) : (
+                  <Button
+                    variant="secondary"
+                    onClick={() => onExportImage(format)}
+                    isDisabled={isDisabled}
+                    isLoading={isCreating}
+                  >
+                    {t('Export image')}
+                  </Button>
+                )}
+              </FlexItem>
+            </Flex>
+          </StackItem>
+          <StackItem>
+            <Content component={ContentVariants.small}>
+              {t('Created: {{date}}', { date: getDateDisplay(imageExport?.metadata.creationTimestamp) })}
+            </Content>
+          </StackItem>
+          {error && (
+            <AlertGroup isToast>
+              <Alert
+                variant="danger"
+                title={
+                  error.mode === 'export' ? t("We couldn't export your image") : t("We couldn't download your image")
+                }
+                actionClose={<AlertActionCloseButton onClose={onDismissError} />}
+              >
+                {t('Something went wrong on our end. Please review the error details and try again.')}
+                <details>{error.message}</details>
+              </Alert>
+            </AlertGroup>
+          )}
+        </Stack>
+      </CardFooter>
+    </Card>
+  );
+};

package/src/components/ImageBuilds/ImageUrl.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import LearnMoreLink from '../common/LearnMoreLink';
+
+const getImageUrl = (url: string): string => {
+  if (!url || /^https?:\/\//i.test(url)) {
+    return url;
+  }
+  return `https://${url}`;
+};
+
+const ImageUrl = ({ imageReference }: { imageReference: string }) => (
+  <LearnMoreLink link={getImageUrl(imageReference)} text={imageReference} />
+);
+
+export default ImageUrl;

package/src/components/ImageBuilds/ImageUrlCard.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Content, Stack, StackItem } from '@patternfly/react-core';
+import { useTranslation } from '../../hooks/useTranslation';
+import ImageUrl from './ImageUrl';
+
+const ImageUrlCard = ({ imageReference }: { imageReference: string | undefined }) => {
+  const { t } = useTranslation();
+
+  let content: React.ReactNode;
+  if (imageReference) {
+    content = <ImageUrl imageReference={imageReference} />;
+  } else {
+    content = (
+      <Content component="small" style={{ fontStyle: 'italic' }}>
+        {t('Enter the image details to view the URL it resolves to')}
+      </Content>
+    );
+  }
+
+  return (
+    <Stack hasGutter>
+      <StackItem>{t('Image reference URL')}</StackItem>
+      <StackItem>{content}</StackItem>
+    </Stack>
+  );
+};
+
+export default ImageUrlCard;

package/src/components/ImageBuilds/OciRegistriesContext.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+import { RepoSpecType, Repository, RepositoryList } from '@flightctl/types';
+
+import { useFetchPeriodically } from '../../hooks/useFetchPeriodically';
+
+export type OciRegistriesContextType = {
+  ociRegistries: Repository[];
+  isLoading: boolean;
+  error: unknown;
+  refetch: VoidFunction;
+};
+
+const OciRegistriesContext = React.createContext<OciRegistriesContextType | undefined>(undefined);
+
+export const OciRegistriesContextProvider = ({ children }: React.PropsWithChildren) => {
+  const [repoList, isLoading, error, refetch] = useFetchPeriodically<RepositoryList>({
+    endpoint: `repositories?fieldSelector=spec.type=${RepoSpecType.RepoSpecTypeOci}`,
+  });
+
+  const ociRegistries = React.useMemo(() => repoList?.items || [], [repoList]);
+
+  const context = React.useMemo(
+    () => ({
+      ociRegistries,
+      isLoading,
+      error,
+      refetch,
+    }),
+    [ociRegistries, isLoading, error, refetch],
+  );
+
+  return <OciRegistriesContext.Provider value={context}>{children}</OciRegistriesContext.Provider>;
+};
+
+export const useOciRegistriesContext = (): OciRegistriesContextType => {
+  const context = React.useContext(OciRegistriesContext);
+  if (context === undefined) {
+    throw new Error('useOciRegistriesContext must be used within an OciRegistriesContextProvider');
+  }
+  return context;
+};

package/src/components/ImageBuilds/useImageBuildLogs.ts

@@ -0,0 +1,162 @@
+import * as React from 'react';
+import { useFetch } from '../../hooks/useFetch';
+
+export enum LogResourceType {
+  BUILD = 'build',
+  EXPORT = 'export',
+}
+
+/**
+ * Extracts the content of log lines from SSE format.
+ * Lines can start with 'data:' or 'data: ', and we remove the prefix.
+ * @param lines - Array of lines to process
+ * @returns Log text content
+ */
+const getLogContent = (lines: string[]): string => {
+  const logLines: string[] = [];
+
+  for (const line of lines) {
+    if (line.startsWith('data:')) {
+      const prefixLen = line.startsWith('data: ') ? 6 : 5;
+      const logLine = line.slice(prefixLen);
+      logLines.push(logLine);
+    }
+  }
+
+  return logLines.join('\n');
+};
+
+export const useImageBuildLogs = (
+  resourceId: string,
+  resourceType: LogResourceType = LogResourceType.BUILD,
+  isActive: boolean,
+) => {
+  const { proxyFetch } = useFetch();
+
+  const [logs, setLogs] = React.useState<string>('');
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [error, setError] = React.useState<Error | null>(null);
+  const [isStreaming, setIsStreaming] = React.useState(false);
+  const abortControllerRef = React.useRef<AbortController | null>(null);
+  const readerRef = React.useRef<ReadableStreamDefaultReader<Uint8Array> | null>(null);
+
+  const endpoint = React.useMemo(() => {
+    if (!resourceId) {
+      return '';
+    }
+
+    const entityType = resourceType === LogResourceType.EXPORT ? 'imageexports' : 'imagebuilds';
+    return `imagebuilder/api/v1/${entityType}/${resourceId}/log${isActive ? '?follow=true' : ''}`;
+  }, [resourceId, resourceType, isActive]);
+
+  React.useEffect(() => {
+    if (!endpoint) {
+      setIsLoading(false);
+      setLogs('');
+      setError(null);
+      setIsStreaming(false);
+      return;
+    }
+
+    const fetchLogs = async () => {
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        abortControllerRef.current = new AbortController();
+
+        const response = await proxyFetch(endpoint, {
+          method: 'GET',
+          credentials: 'include',
+          signal: abortControllerRef.current.signal,
+        });
+
+        if (!response.ok) {
+          throw new Error(`Failed to fetch logs: ${response.status} ${response.statusText}`);
+        }
+
+        const contentType = response.headers.get('content-type') || '';
+        const isSSE = contentType.includes('text/event-stream');
+
+        if (isSSE && isActive) {
+          // Handle SSE streaming
+          if (!response.body) {
+            throw new Error('Response body is null');
+          }
+
+          setIsStreaming(true);
+          setIsLoading(false); // Stop showing spinner once streaming starts
+
+          const reader = response.body.getReader();
+          const decoder = new TextDecoder();
+          readerRef.current = reader;
+          let buffer = '';
+
+          const readStream = async () => {
+            try {
+              while (true) {
+                const { done, value } = await reader.read();
+
+                if (done) {
+                  // Process any remaining buffer content
+                  if (buffer.trim()) {
+                    const logText = getLogContent(buffer.split('\n'));
+                    if (logText) {
+                      setLogs((prev) => (prev ? `${prev}\n${logText}` : logText));
+                    }
+                  }
+                  break;
+                }
+
+                buffer += decoder.decode(value, { stream: true });
+                const lines = buffer.split('\n');
+                buffer = lines.pop() || '';
+
+                const logText = getLogContent(lines);
+                if (logText) {
+                  setLogs((prev) => (prev ? `${prev}\n${logText}` : logText));
+                }
+              }
+            } catch (err) {
+              if (err instanceof Error && err.name !== 'AbortError') {
+                setError(err);
+              }
+            } finally {
+              setIsStreaming(false);
+            }
+          };
+
+          readStream();
+        } else {
+          // Handle regular text response
+          setIsStreaming(false);
+          const text = await response.text();
+          setLogs(text);
+          setIsLoading(false);
+        }
+      } catch (err) {
+        if (err instanceof Error && err.name !== 'AbortError') {
+          setError(err);
+        }
+        setIsLoading(false);
+      }
+    };
+
+    // Clear stale logs when the entity changes (another one is selected or it's the same one but it changes to inactive)
+    setLogs('');
+    void fetchLogs();
+
+    return () => {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+      if (readerRef.current) {
+        readerRef.current.cancel().catch(() => {
+          // Ignore cancellation errors
+        });
+      }
+    };
+  }, [endpoint, proxyFetch, isActive]);
+
+  return { logs, isLoading, error, isStreaming };
+};

package/src/components/ImageBuilds/useImageBuilds.ts

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { useDebounce } from 'use-debounce';
+
+import { ImageBuild, ImageBuildList } from '@flightctl/types/imagebuilder';
+import { ImageBuildWithExports } from '../../types/extraTypes';
+import { useAppContext } from '../../hooks/useAppContext';
+import { useFetchPeriodically } from '../../hooks/useFetchPeriodically';
+import { PaginationDetails, useTablePagination } from '../../hooks/useTablePagination';
+import { PAGE_SIZE } from '../../constants';
+import { toImageBuildWithExports } from './CreateImageBuildWizard/utils';
+
+export enum ImageBuildsSearchParams {
+  Name = 'name',
+}
+
+type ImageBuildsEndpointArgs = {
+  name?: string;
+  nextContinue?: string;
+};
+
+export const useImageBuildsBackendFilters = () => {
+  const {
+    router: { useSearchParams },
+  } = useAppContext();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const paramsRef = React.useRef(searchParams);
+  const name = searchParams.get(ImageBuildsSearchParams.Name) || undefined;
+
+  const setName = React.useCallback(
+    (nameVal: string) => {
+      const newParams = new URLSearchParams({
+        [ImageBuildsSearchParams.Name]: nameVal,
+      });
+      paramsRef.current = newParams;
+      setSearchParams(newParams);
+    },
+    [setSearchParams],
+  );
+
+  const hasFiltersEnabled = !!name;
+
+  return {
+    name,
+    setName,
+    hasFiltersEnabled,
+  };
+};
+
+const getImageBuildsEndpoint = ({ name, nextContinue }: { name?: string; nextContinue?: string }) => {
+  const params = new URLSearchParams({
+    limit: `${PAGE_SIZE}`,
+    withExports: 'true',
+  });
+  if (name) {
+    params.set('fieldSelector', `metadata.name contains ${name}`);
+  }
+  if (nextContinue) {
+    params.set('continue', nextContinue);
+  }
+  return `imagebuilds?${params.toString()}`;
+};
+
+const useImageBuildsEndpoint = (args: ImageBuildsEndpointArgs): [string, boolean] => {
+  const endpoint = getImageBuildsEndpoint(args);
+  const [ibEndpointDebounced] = useDebounce(endpoint, 1000);
+  return [ibEndpointDebounced, endpoint !== ibEndpointDebounced];
+};
+
+export type ImageBuildsLoadBase = {
+  isLoading: boolean;
+  error: unknown;
+  isUpdating: boolean;
+  refetch: VoidFunction;
+};
+
+export type ImageBuildsLoad = ImageBuildsLoadBase & {
+  imageBuilds: ImageBuildWithExports[];
+  pagination: PaginationDetails<ImageBuildList>;
+};
+
+export type ImageBuildLoad = ImageBuildsLoadBase & {
+  imageBuild: ImageBuildWithExports;
+};
+
+export const useImageBuilds = (args: ImageBuildsEndpointArgs): ImageBuildsLoad => {
+  const pagination = useTablePagination<ImageBuildList>();
+  const [imageBuildsEndpoint, imageBuildsDebouncing] = useImageBuildsEndpoint({
+    ...args,
+    nextContinue: pagination.nextContinue,
+  });
+  const [imageBuildsList, isLoading, error, refetch, updating] = useFetchPeriodically<ImageBuildList>(
+    {
+      endpoint: imageBuildsEndpoint,
+    },
+    pagination.onPageFetched,
+  );
+
+  return {
+    imageBuilds: (imageBuildsList?.items || []).map(toImageBuildWithExports),
+    isLoading,
+    error,
+    isUpdating: updating || imageBuildsDebouncing,
+    refetch,
+    pagination,
+  };
+};
+
+export const useImageBuild = (
+  imageBuildId: string,
+): [ImageBuildWithExports | undefined, boolean, unknown, VoidFunction] => {
+  const [imageBuild, isLoading, error, refetch] = useFetchPeriodically<ImageBuild>({
+    endpoint: `imagebuilds/${imageBuildId}?withExports=true`,
+  });
+
+  return [imageBuild ? toImageBuildWithExports(imageBuild) : undefined, isLoading, error, refetch];
+};

package/src/components/ListPage/ListPage.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Flex, FlexItem, PageSection, PageSectionVariants, Title, TitleProps } from '@patternfly/react-core';
+import { Flex, FlexItem, PageSection, Title, TitleProps } from '@patternfly/react-core';
 
 type ListPageProps = {
   title: string;
@@ -10,7 +10,7 @@ type ListPageProps = {
 
 const ListPage: React.FC<ListPageProps> = ({ title, headingLevel = 'h1', children }) => {
   return (
-    <PageSection variant={PageSectionVariants.light}>
+    <PageSection hasBodyWrapper={false}>
       <Flex gap={{ default: 'gapMd' }} alignItems={{ default: 'alignItemsCenter' }}>
         <FlexItem>
           <Title headingLevel={headingLevel} size="3xl">