katello 4.18.1 → 4.19.0.rc2

data/webpack/scenes/ContainerImages/Synced/Details/ManifestDetails.js

@@ -0,0 +1,218 @@
+import React, { useEffect } from 'react';
+import { useParams, useHistory, useLocation } from 'react-router-dom';
+import { useSelector, useDispatch, shallowEqual } from 'react-redux';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  Title,
+  PageSection,
+  Grid,
+  GridItem,
+  TextContent,
+  Text,
+  TextVariants,
+  ClipboardCopy,
+  Label,
+  Flex,
+  FlexItem,
+} from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { STATUS } from 'foremanReact/constants';
+import Loading from 'foremanReact/components/Loading';
+import LongDateTime from 'foremanReact/components/common/dates/LongDateTime';
+import EmptyStateMessage from '../../../../components/Table/EmptyStateMessage';
+import {
+  getManifest,
+  getShortDigest,
+  formatManifestType,
+} from '../../containerImagesHelpers';
+import getDockerTagDetails from './ManifestDetailsActions';
+import {
+  selectDockerTagDetails,
+  selectDockerTagDetailStatus,
+  selectDockerTagDetailError,
+} from './ManifestDetailsSelectors';
+
+const ManifestDetails = () => {
+  const { id } = useParams();
+  const tagId = Number(id);
+  const history = useHistory();
+  const location = useLocation();
+  const dispatch = useDispatch();
+
+  const searchParams = new URLSearchParams(location.search);
+  const manifestId = searchParams.get('manifest');
+
+  useEffect(() => {
+    dispatch(getDockerTagDetails(tagId));
+  }, [dispatch, tagId]);
+
+  const manifestData = useSelector(state =>
+    selectDockerTagDetails(state, tagId), shallowEqual) || {};
+  const status = useSelector(state =>
+    selectDockerTagDetailStatus(state, tagId));
+  const error = useSelector(state =>
+    selectDockerTagDetailError(state, tagId));
+
+  const getDisplayManifest = () => {
+    const parentManifest = getManifest(manifestData);
+
+    if (!manifestId || !parentManifest) {
+      return parentManifest;
+    }
+
+    if (parentManifest.manifest_type === 'list' && parentManifest.manifests) {
+      const childManifestId = parseInt(manifestId, 10);
+      return parentManifest.manifests.find(m => m.id === childManifestId);
+    }
+
+    return parentManifest;
+  };
+
+  if (status === STATUS.PENDING) {
+    return <Loading />;
+  }
+
+  if (status === STATUS.ERROR) {
+    return <EmptyStateMessage error={error} />;
+  }
+
+  const manifest = getDisplayManifest();
+  const digest = manifest?.digest || 'N/A';
+  const shortDigest = getShortDigest(digest);
+  const manifestType = formatManifestType(manifest);
+
+  // Filter to show only library repositories
+  const libraryRepositories = manifestData.repositories?.filter(repo =>
+    repo.library_instance) || [];
+
+  const labels = manifest?.labels || {};
+  const labelKeys = Object.keys(labels);
+
+  return (
+    <PageSection variant="light">
+      <Grid hasGutter span={12}>
+        <GridItem span={12}>
+          <Breadcrumb ouiaId="manifest-details-breadcrumb">
+            <BreadcrumbItem
+              to="/labs/container_images"
+              onClick={(e) => {
+                e.preventDefault();
+                history.push('/labs/container_images');
+              }}
+            >
+              {__('Container images')}
+            </BreadcrumbItem>
+            <BreadcrumbItem isActive>{shortDigest}</BreadcrumbItem>
+          </Breadcrumb>
+        </GridItem>
+
+        <GridItem span={12}>
+          <Title headingLevel="h1" size="2xl" ouiaId="manifest-details-title">
+            {shortDigest}
+          </Title>
+        </GridItem>
+
+        <GridItem span={12}>
+          <Grid hasGutter>
+            <GridItem span={6}>
+              <TextContent>
+                <Text component={TextVariants.h6} ouiaId="manifest-name-label">{__('Name')}</Text>
+                <Text ouiaId="manifest-name-value">{manifestData.name || 'N/A'}</Text>
+              </TextContent>
+            </GridItem>
+
+            <GridItem span={6}>
+              <TextContent>
+                <Text component={TextVariants.h6} ouiaId="manifest-creation-label">{__('Creation')}</Text>
+                {manifest?.created_at ? (
+                  <LongDateTime date={manifest.created_at} showRelativeTimeTooltip />
+                ) : (
+                  <Text ouiaId="manifest-creation-value">N/A</Text>
+                )}
+              </TextContent>
+            </GridItem>
+
+            <GridItem span={6}>
+              <TextContent>
+                <Text component={TextVariants.h6} ouiaId="manifest-repository-label">{__('Repositories')}</Text>
+                <Text ouiaId="manifest-repository-value">
+                  {libraryRepositories.length === 0 ? (
+                    'N/A'
+                  ) : (
+                    libraryRepositories.map((repo, index) => (
+                      <React.Fragment key={repo.id}>
+                        {index > 0 && ', '}
+                        <a
+                          href={`/products/${repo.product_id}/repositories/${repo.id}`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          {repo.name}
+                        </a>
+                      </React.Fragment>
+                    ))
+                  )}
+                </Text>
+              </TextContent>
+            </GridItem>
+
+            <GridItem span={6}>
+              <TextContent>
+                <Text component={TextVariants.h6} ouiaId="manifest-modified-label">{__('Modified')}</Text>
+                {manifest?.updated_at ? (
+                  <LongDateTime date={manifest.updated_at} showRelativeTimeTooltip />
+                ) : (
+                  <Text ouiaId="manifest-modified-value">N/A</Text>
+                )}
+              </TextContent>
+            </GridItem>
+
+            <GridItem span={6}>
+              <TextContent>
+                <Text component={TextVariants.h6} ouiaId="manifest-digest-label">{__('Digest')}</Text>
+                {digest !== 'N/A' ? (
+                  <ClipboardCopy variant="inline-compact" clickTip="Copied">
+                    {digest}
+                  </ClipboardCopy>
+                ) : (
+                  <Text ouiaId="manifest-digest-value">N/A</Text>
+                )}
+              </TextContent>
+            </GridItem>
+
+            <GridItem span={6}>
+              <TextContent>
+                <Text component={TextVariants.h6} ouiaId="manifest-type-label">{__('Type')}</Text>
+                <Text ouiaId="manifest-type-value">{manifestType}</Text>
+              </TextContent>
+            </GridItem>
+
+            <GridItem span={6} />
+
+            <GridItem span={6}>
+              <TextContent>
+                <Text component={TextVariants.h6} ouiaId="manifest-labels-label">{__('Labels')}</Text>
+                {labelKeys.length === 0 ? (
+                  <div>{__('No labels')}</div>
+                ) : (
+                  <Flex spaceItems={{ default: 'spaceItemsSm' }} flexWrap={{ default: 'wrap' }}>
+                    {labelKeys.map(key => (
+                      <FlexItem key={key}>
+                        <Label color="grey">
+                          {key} = {labels[key]}
+                        </Label>
+                      </FlexItem>
+                    ))}
+                  </Flex>
+                )}
+              </TextContent>
+            </GridItem>
+          </Grid>
+        </GridItem>
+      </Grid>
+    </PageSection>
+  );
+};
+
+export default ManifestDetails;

data/webpack/scenes/ContainerImages/Synced/Details/ManifestDetailsActions.js

@@ -0,0 +1,15 @@
+import { API_OPERATIONS, get } from 'foremanReact/redux/API';
+import api, { orgId } from '../../../../services/api';
+
+export const DOCKER_TAG_DETAILS_KEY = 'DOCKER_TAG_DETAILS';
+
+export const dockerTagDetailsKey = id => `${DOCKER_TAG_DETAILS_KEY}_${id}`;
+
+const getDockerTagDetails = (id, extraParams = {}) => get({
+  type: API_OPERATIONS.GET,
+  key: dockerTagDetailsKey(id),
+  params: { organization_id: orgId(), ...extraParams },
+  url: api.getApiUrl(`/docker_tags/${id}`),
+});
+
+export default getDockerTagDetails;

data/webpack/scenes/ContainerImages/Synced/Details/ManifestDetailsSelectors.js

@@ -0,0 +1,16 @@
+import { STATUS } from 'foremanReact/constants';
+import {
+  selectAPIResponse,
+  selectAPIStatus,
+  selectAPIError,
+} from 'foremanReact/redux/API/APISelectors';
+import { dockerTagDetailsKey } from './ManifestDetailsActions';
+
+export const selectDockerTagDetails = (state, id) =>
+  selectAPIResponse(state, dockerTagDetailsKey(id)) || {};
+
+export const selectDockerTagDetailStatus =
+  (state, id) => selectAPIStatus(state, dockerTagDetailsKey(id)) || STATUS.PENDING;
+
+export const selectDockerTagDetailError =
+  (state, id) => selectAPIError(state, dockerTagDetailsKey(id));

data/webpack/scenes/ContainerImages/Synced/Details/__tests__/ManifestDetails.test.js

@@ -0,0 +1,395 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+import { renderWithRedux, patientlyWaitFor } from 'react-testing-lib-wrapper';
+import { nockInstance, assertNockRequest } from '../../../../../test-utils/nockWrapper';
+import api from '../../../../../services/api';
+import ManifestDetails from '../ManifestDetails';
+import { DOCKER_TAG_DETAILS_KEY } from '../ManifestDetailsActions';
+import manifestDetailsData from './manifestDetails.fixtures.json';
+import manifestListData from './manifestList.fixtures.json';
+
+const withManifestRoute = component => <Route path="/labs/container_images/:id([0-9]+)">{component}</Route>;
+
+const renderOptions = (tagId = 2) => ({
+  apiNamespace: `${DOCKER_TAG_DETAILS_KEY}_${tagId}`,
+  routerParams: {
+    initialEntries: [{ pathname: `/labs/container_images/${tagId}` }],
+    initialIndex: 1,
+  },
+});
+
+const manifestDetailsPath = id => api.getApiUrl(`/docker_tags/${id}`);
+
+describe('ManifestDetails', () => {
+  test('Can call API and display manifest details on load', async () => {
+    const scope = nockInstance
+      .get(manifestDetailsPath(2))
+      .query(true)
+      .reply(200, manifestDetailsData);
+
+    const { getByText, getAllByText } = renderWithRedux(
+      withManifestRoute(<ManifestDetails />),
+      renderOptions(2),
+    );
+
+    await patientlyWaitFor(() => {
+      expect(getByText('v1.0')).toBeInTheDocument();
+    });
+
+    // Check field labels
+    expect(getByText('Name')).toBeInTheDocument();
+    expect(getByText('Type')).toBeInTheDocument();
+    expect(getByText('Repositories')).toBeInTheDocument();
+    expect(getByText('Digest')).toBeInTheDocument();
+    expect(getByText('Creation')).toBeInTheDocument();
+    expect(getByText('Modified')).toBeInTheDocument();
+    expect(getByText('Labels')).toBeInTheDocument();
+
+    // Check values
+    expect(getAllByText('v1.0')[0]).toBeInTheDocument();
+    expect(getByText('ubi9-container')).toBeInTheDocument();
+
+    // Check labels are displayed
+    expect(getByText(/architecture/)).toBeInTheDocument();
+    expect(getByText(/x86_64/)).toBeInTheDocument();
+
+    assertNockRequest(scope);
+  });
+
+  test('Displays loading state initially', () => {
+    nockInstance
+      .get(manifestDetailsPath(2))
+      .query(true)
+      .delay(1000)
+      .reply(200, manifestDetailsData);
+
+    const { getByText } = renderWithRedux(
+      withManifestRoute(<ManifestDetails />),
+      renderOptions(2),
+    );
+
+    expect(getByText('Loading')).toBeInTheDocument();
+  });
+
+  test('Displays only library repositories', async () => {
+    const scope = nockInstance
+      .get(manifestDetailsPath(2))
+      .query(true)
+      .reply(200, manifestDetailsData);
+
+    const { getByText, queryByText } = renderWithRedux(
+      withManifestRoute(<ManifestDetails />),
+      renderOptions(2),
+    );
+
+    await patientlyWaitFor(() => {
+      expect(getByText('ubi9-container')).toBeInTheDocument();
+    });
+
+    // Should display Repositories label
+    expect(getByText('Repositories')).toBeInTheDocument();
+
+    // Should show library repository
+    expect(getByText('ubi9-container')).toBeInTheDocument();
+
+    // Should NOT show non-library repository
+    expect(queryByText('ubi9-container-dev')).not.toBeInTheDocument();
+
+    assertNockRequest(scope);
+  });
+
+  test('Repository links are clickable and have correct URLs', async () => {
+    const scope = nockInstance
+      .get(manifestDetailsPath(2))
+      .query(true)
+      .reply(200, manifestDetailsData);
+
+    const { getByText } = renderWithRedux(
+      withManifestRoute(<ManifestDetails />),
+      renderOptions(2),
+    );
+
+    await patientlyWaitFor(() => {
+      expect(getByText('ubi9-container')).toBeInTheDocument();
+    });
+
+    const repoLink = getByText('ubi9-container').closest('a');
+    expect(repoLink).toBeInTheDocument();
+    expect(repoLink).toHaveAttribute('href', '/products/5/repositories/10');
+    expect(repoLink).toHaveAttribute('target', '_blank');
+    expect(repoLink).toHaveAttribute('rel', 'noopener noreferrer');
+
+    assertNockRequest(scope);
+  });
+
+  test('Displays "No labels" when labels are empty', async () => {
+    const dataWithoutLabels = {
+      ...manifestDetailsData,
+      manifest: {
+        ...manifestDetailsData.manifest,
+        labels: {},
+      },
+    };
+
+    const scope = nockInstance
+      .get(manifestDetailsPath(2))
+      .query(true)
+      .reply(200, dataWithoutLabels);
+
+    const { getByText } = renderWithRedux(
+      withManifestRoute(<ManifestDetails />),
+      renderOptions(2),
+    );
+
+    await patientlyWaitFor(() => {
+      expect(getByText('No labels')).toBeInTheDocument();
+    });
+
+    assertNockRequest(scope);
+  });
+
+  test('Handles manifest list with child manifest query param', async () => {
+    const scope = nockInstance
+      .get(manifestDetailsPath(1))
+      .query(true)
+      .reply(200, manifestListData);
+
+    const customRenderOptions = {
+      apiNamespace: `${DOCKER_TAG_DETAILS_KEY}_1`,
+      routerParams: {
+        initialEntries: [{ pathname: '/labs/container_images/1', search: '?manifest=102' }],
+        initialIndex: 1,
+      },
+    };
+
+    const { getAllByText } = renderWithRedux(
+      withManifestRoute(<ManifestDetails />),
+      customRenderOptions,
+    );
+
+    await patientlyWaitFor(() => {
+      // Should display child manifest digest in short form
+      const elements = getAllByText(/sha256:1111aaaa2222/);
+      expect(elements.length).toBeGreaterThan(0);
+    });
+
+    assertNockRequest(scope);
+  });
+
+  test('Breadcrumb navigates back to container images list', async () => {
+    const scope = nockInstance
+      .get(manifestDetailsPath(2))
+      .query(true)
+      .reply(200, manifestDetailsData);
+
+    const { getByText } = renderWithRedux(
+      withManifestRoute(<ManifestDetails />),
+      renderOptions(2),
+    );
+
+    await patientlyWaitFor(() => {
+      expect(getByText('Container images')).toBeInTheDocument();
+    });
+
+    const breadcrumbLink = getByText('Container images');
+    expect(breadcrumbLink).toBeInTheDocument();
+
+    assertNockRequest(scope);
+  });
+
+  test('Displays error message on 404 API error', async () => {
+    const scope = nockInstance
+      .get(manifestDetailsPath(999))
+      .query(true)
+      .reply(404, {
+        error: { message: 'Not Found' },
+      });
+
+    const { getByText } = renderWithRedux(
+      withManifestRoute(<ManifestDetails />),
+      renderOptions(999),
+    );
+
+    await patientlyWaitFor(() => {
+      expect(getByText('Not Found')).toBeInTheDocument();
+    });
+
+    assertNockRequest(scope);
+  });
+
+  test('Displays error message on 500 API error', async () => {
+    const scope = nockInstance
+      .get(manifestDetailsPath(2))
+      .query(true)
+      .reply(500, {
+        error: { message: 'Internal Server Error' },
+      });
+
+    const { getByText } = renderWithRedux(
+      withManifestRoute(<ManifestDetails />),
+      renderOptions(2),
+    );
+
+    await patientlyWaitFor(() => {
+      expect(getByText(/error/i)).toBeInTheDocument();
+    });
+
+    assertNockRequest(scope);
+  });
+
+  test('Handles manifest list with no child manifests', async () => {
+    const dataWithEmptyManifests = {
+      ...manifestDetailsData,
+      manifest: {
+        ...manifestDetailsData.manifest,
+        manifest_type: 'list',
+        manifests: [],
+      },
+    };
+
+    const scope = nockInstance
+      .get(manifestDetailsPath(2))
+      .query(true)
+      .reply(200, dataWithEmptyManifests);
+
+    const { getByText } = renderWithRedux(
+      withManifestRoute(<ManifestDetails />),
+      renderOptions(2),
+    );
+
+    await patientlyWaitFor(() => {
+      expect(getByText('v1.0')).toBeInTheDocument();
+    });
+
+    // Should still display basic manifest information
+    expect(getByText('Name')).toBeInTheDocument();
+    expect(getByText('Repositories')).toBeInTheDocument();
+    expect(getByText('Digest')).toBeInTheDocument();
+
+    assertNockRequest(scope);
+  });
+
+  test('Displays N/A when no library repositories are present', async () => {
+    const dataWithoutLibraryRepos = {
+      ...manifestDetailsData,
+      repositories: [
+        {
+          id: 1,
+          name: 'non-library-repo',
+          library_instance: false,
+        },
+        {
+          id: 2,
+          name: 'another-non-library-repo',
+          library_instance: false,
+        },
+      ],
+    };
+
+    const scope = nockInstance
+      .get(manifestDetailsPath(2))
+      .query(true)
+      .reply(200, dataWithoutLibraryRepos);
+
+    const { getByText, queryByText } = renderWithRedux(
+      withManifestRoute(<ManifestDetails />),
+      renderOptions(2),
+    );
+
+    await patientlyWaitFor(() => {
+      expect(getByText('v1.0')).toBeInTheDocument();
+    });
+
+    // Repository field should show N/A when no library repositories
+    expect(getByText('Repositories')).toBeInTheDocument();
+    const repositoryValues = queryByText('N/A');
+    expect(repositoryValues).toBeInTheDocument();
+
+    // Non-library repos should not be displayed
+    expect(queryByText('non-library-repo')).not.toBeInTheDocument();
+    expect(queryByText('another-non-library-repo')).not.toBeInTheDocument();
+
+    assertNockRequest(scope);
+  });
+
+  test('Displays correct manifest types', async () => {
+    // Test bootable image
+    const bootableData = {
+      ...manifestDetailsData,
+      manifest: {
+        ...manifestDetailsData.manifest,
+        manifest_type: 'image',
+        is_bootable: true,
+        is_flatpak: false,
+      },
+    };
+
+    const bootableScope = nockInstance
+      .get(manifestDetailsPath(3))
+      .query(true)
+      .reply(200, bootableData);
+
+    const { getByText: getByTextBootable } = renderWithRedux(
+      withManifestRoute(<ManifestDetails />),
+      renderOptions(3),
+    );
+
+    await patientlyWaitFor(() => {
+      expect(getByTextBootable('Bootable')).toBeInTheDocument();
+    });
+
+    assertNockRequest(bootableScope);
+
+    // Test flatpak image
+    const flatpakData = {
+      ...manifestDetailsData,
+      manifest: {
+        ...manifestDetailsData.manifest,
+        manifest_type: 'image',
+        is_bootable: false,
+        is_flatpak: true,
+      },
+    };
+
+    const flatpakScope = nockInstance
+      .get(manifestDetailsPath(4))
+      .query(true)
+      .reply(200, flatpakData);
+
+    const { getByText: getByTextFlatpak } = renderWithRedux(
+      withManifestRoute(<ManifestDetails />),
+      renderOptions(4),
+    );
+
+    await patientlyWaitFor(() => {
+      expect(getByTextFlatpak('Flatpak')).toBeInTheDocument();
+    });
+
+    assertNockRequest(flatpakScope);
+
+    // Test manifest list
+    const listData = {
+      ...manifestDetailsData,
+      manifest: {
+        ...manifestDetailsData.manifest,
+        manifest_type: 'list',
+      },
+    };
+
+    const listScope = nockInstance
+      .get(manifestDetailsPath(5))
+      .query(true)
+      .reply(200, listData);
+
+    const { getByText: getByTextList } = renderWithRedux(
+      withManifestRoute(<ManifestDetails />),
+      renderOptions(5),
+    );
+
+    await patientlyWaitFor(() => {
+      expect(getByTextList('List')).toBeInTheDocument();
+    });
+
+    assertNockRequest(listScope);
+  });
+});

data/webpack/scenes/ContainerImages/Synced/Details/__tests__/manifestDetails.fixtures.json

@@ -0,0 +1,43 @@
+{
+  "id": 2,
+  "name": "v1.0",
+  "repositories": [
+    {
+      "id": 10,
+      "name": "ubi9-container",
+      "full_path": "Default_Organization/Library/ubi9-container",
+      "library_instance": true,
+      "product_id": 5,
+      "product_name": "Red Hat Universal Base Image"
+    },
+    {
+      "id": 11,
+      "name": "ubi9-container-dev",
+      "full_path": "Default_Organization/Dev/ubi9-container",
+      "library_instance": false,
+      "product_id": 5,
+      "product_name": "Red Hat Universal Base Image"
+    }
+  ],
+  "product": {
+    "id": 5,
+    "name": "Red Hat Universal Base Image"
+  },
+  "manifest": {
+    "id": 104,
+    "digest": "sha256:efgh5678901234efgh5678901234efgh5678901234efgh5678901234efgh5678",
+    "schema_version": 2,
+    "manifest_type": "image",
+    "labels": {
+      "architecture": "x86_64",
+      "build-date": "2024-08-21T11:28:48",
+      "io.buildah.version": "1.37.1",
+      "version": "v1.0"
+    },
+    "annotations": {},
+    "is_bootable": true,
+    "is_flatpak": false,
+    "created_at": "2024-08-21T11:28:48.000Z",
+    "updated_at": "2024-08-21T11:28:48.000Z"
+  }
+}