patch: update placeholder image logic

Signed-off-by: Raul Kele <raulkeleblk@gmail.com>
patch: referrers from image query
2023-04-03 11:53:32 +03:00 · 2023-03-22 14:12:15 +02:00 · 2023-03-21 12:51:16 +02:00
10 changed files with 155 additions and 112 deletions
--- a/src/tests/TagPage/ReferredBy.test.js
+++ b/src/tests/TagPage/ReferredBy.test.js
@@ -1,47 +1,42 @@
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { api } from 'api';
 import ReferredBy from 'components/Tag/Tabs/ReferredBy';
 import React from 'react';

-const mockReferrersList = {
-  data: {
-    Referrers: [
+const mockReferrersList = [
+  {
+    MediaType: 'application/vnd.oci.artifact.manifest.v1+json',
+    ArtifactType: 'application/vnd.example.icecream.v1',
+    Size: 466,
+    Digest: 'sha256:be7a3d01c35a2cf53c502e9dc50cdf36b15d9361c81c63bf319f1d5cbe44ab7c',
+    Annotations: [
      {
-        MediaType: 'application/vnd.oci.artifact.manifest.v1+json',
-        ArtifactType: 'application/vnd.example.icecream.v1',
-        Size: 466,
-        Digest: 'sha256:be7a3d01c35a2cf53c502e9dc50cdf36b15d9361c81c63bf319f1d5cbe44ab7c',
-        Annotations: [
-          {
-            Key: 'demo',
-            Value: 'true'
-          },
-          {
-            Key: 'format',
-            Value: 'oci'
-          }
-        ]
+        Key: 'demo',
+        Value: 'true'
      },
      {
-        MediaType: 'application/vnd.oci.artifact.manifest.v1+json',
-        ArtifactType: 'application/vnd.example.icecream.v1',
-        Size: 466,
-        Digest: 'sha256:d9ad22f41d9cb9797c134401416eee2a70446cee1a8eb76fc6b191f4320dade2',
-        Annotations: [
-          {
-            Key: 'demo',
-            Value: 'true'
-          },
-          {
-            Key: 'format',
-            Value: 'oci'
-          }
-        ]
+        Key: 'format',
+        Value: 'oci'
+      }
+    ]
+  },
+  {
+    MediaType: 'application/vnd.oci.artifact.manifest.v1+json',
+    ArtifactType: 'application/vnd.example.icecream.v1',
+    Size: 466,
+    Digest: 'sha256:d9ad22f41d9cb9797c134401416eee2a70446cee1a8eb76fc6b191f4320dade2',
+    Annotations: [
+      {
+        Key: 'demo',
+        Value: 'true'
+      },
+      {
+        Key: 'format',
+        Value: 'oci'
      }
    ]
  }
-};
+];

 // useNavigate mock
 const mockedUsedNavigate = jest.fn();
@@ -57,27 +52,17 @@ afterEach(() => {

 describe('Referred by tab', () => {
  it('should render referrers if there are any', async () => {
-    jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: mockReferrersList });
-    render(<ReferredBy repoName="golang" digest="test" />);
+    render(<ReferredBy referrers={mockReferrersList} />);
    expect(await screen.findAllByText('Media type: application/vnd.oci.artifact.manifest.v1+json')).toHaveLength(2);
  });

  it("renders no referrers if there aren't any", async () => {
-    jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: { data: { Referrers: [] } } });
-    render(<ReferredBy repoName="golang" digest="test" />);
+    render(<ReferredBy referrers={[]} />);
    expect(await screen.findByText(/Nothing found/i)).toBeInTheDocument();
  });

-  it('should log an error if the request fails', async () => {
-    jest.spyOn(api, 'get').mockRejectedValue({ status: 500, data: {} });
-    const error = jest.spyOn(console, 'error').mockImplementation(() => {});
-    render(<ReferredBy repoName="golang" digest="test" />);
-    await waitFor(() => expect(error).toBeCalledTimes(1));
-  });
-
  it('should display the digest when clicking the dropdowns', async () => {
-    jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: mockReferrersList });
-    render(<ReferredBy repoName="golang" digest="test" />);
+    render(<ReferredBy referrers={mockReferrersList} />);
    const firstDigest = (await screen.findAllByText(/digest/i))[0];
    expect(firstDigest).toBeInTheDocument();
    await userEvent.click(firstDigest);
@@ -91,8 +76,7 @@ describe('Referred by tab', () => {
  });

  it('should display the annotations when clicking the dropdown', async () => {
-    jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: mockReferrersList });
-    render(<ReferredBy repoName="golang" digest="test" />);
+    render(<ReferredBy referrers={mockReferrersList} />);
    const firstAnnotations = (await screen.findAllByText(/ANNOTATIONS/i))[0];
    expect(firstAnnotations).toBeInTheDocument();
    await userEvent.click(firstAnnotations);
--- a/src/tests/TagPage/VulnerabilitiesDetails.test.js
+++ b/src/tests/TagPage/VulnerabilitiesDetails.test.js
@@ -1,4 +1,5 @@
 import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { api } from 'api';
 import VulnerabilitiesDetails from 'components/Tag/Tabs/VulnerabilitiesDetails';
 import React from 'react';
@@ -432,6 +433,14 @@ const mockCVEList = {
  }
 };

+const mockCVEListFiltered = {
+  CVEListForImage: {
+    Tag: '',
+    Page: { ItemCount: 20, TotalCount: 20 },
+    CVEList: mockCVEList.CVEListForImage.CVEList.filter((e) => e.Id.includes('2022'))
+  }
+};
+
 const mockCVEFixed = {
  pageOne: {
    ImageListWithCVEFixed: {
@@ -488,6 +497,16 @@ describe('Vulnerabilties page', () => {
    await waitFor(() => expect(screen.getAllByText(/fixed in/i)).toHaveLength(20));
  });

+  it('sends filtered query if user types in the search bar', async () => {
+    jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: { data: mockCVEList } });
+    render(<StateVulnerabilitiesWrapper />);
+    const cveSearchInput = screen.getByPlaceholderText(/search for/i);
+    jest.spyOn(api, 'get').mockRejectedValueOnce({ status: 200, data: { data: mockCVEListFiltered } });
+    await userEvent.type(cveSearchInput, '2022');
+    expect((await screen.queryAllByText(/2023/i).length) === 0);
+    expect((await screen.findAllByText(/2022/i)).length === 6);
+  });
+
  it('renders no vulnerabilities if there are not any', async () => {
    jest.spyOn(api, 'get').mockResolvedValue({
      status: 200,
--- a/src/api.js
+++ b/src/api.js
@@ -78,11 +78,16 @@ const endpoints = {
  detailedRepoInfo: (name) =>
    `/v2/_zot/ext/search?query={ExpandedRepoInfo(repo:"${name}"){Images {Manifests {Digest Platform {Os Arch} Size} Vulnerabilities {MaxSeverity Count} Tag LastUpdated Vendor } Summary {Name LastUpdated Size Platforms {Os Arch} Vendors NewestImage {RepoName IsSigned Vulnerabilities {MaxSeverity Count} Manifests {Digest} Tag Title Documentation DownloadCount Source Description Licenses}}}}`,
  detailedImageInfo: (name, tag) =>
-    `/v2/_zot/ext/search?query={Image(image: "${name}:${tag}"){RepoName IsSigned Vulnerabilities {MaxSeverity Count} Tag Manifests {History {Layer {Size Digest} HistoryDescription {CreatedBy EmptyLayer}} Digest ConfigDigest LastUpdated Size  Platform {Os Arch}} Vendor Licenses }}`,
-  vulnerabilitiesForRepo: (name, { pageNumber = 1, pageSize = 15 }) =>
-    `/v2/_zot/ext/search?query={CVEListForImage(image: "${name}", requestedPage: {limit:${pageSize} offset:${
+    `/v2/_zot/ext/search?query={Image(image: "${name}:${tag}"){RepoName IsSigned Vulnerabilities {MaxSeverity Count}  Referrers {MediaType ArtifactType Size Digest Annotations{Key Value}} Tag Manifests {History {Layer {Size Digest} HistoryDescription {CreatedBy EmptyLayer}} Digest ConfigDigest LastUpdated Size Platform {Os Arch}} Vendor Licenses }}`,
+  vulnerabilitiesForRepo: (name, { pageNumber = 1, pageSize = 15 }, searchTerm = '') => {
+    let query = `/v2/_zot/ext/search?query={CVEListForImage(image: "${name}", requestedPage: {limit:${pageSize} offset:${
      (pageNumber - 1) * pageSize
-    }}){Tag Page {TotalCount ItemCount} CVEList {Id Title Description Severity PackageList {Name InstalledVersion FixedVersion}}}}`,
+    }}`;
+    if (!isEmpty(searchTerm)) {
+      query += `, searchedCVE: "${searchTerm}"`;
+    }
+    return `${query}){Tag Page {TotalCount ItemCount} CVEList {Id Title Description Severity PackageList {Name InstalledVersion FixedVersion}}}}`;
+  },
  imageListWithCVEFixed: (cveId, repoName, { pageNumber = 1, pageSize = 3 }) =>
    `/v2/_zot/ext/search?query={ImageListWithCVEFixed(id:"${cveId}", image:"${repoName}", requestedPage: {limit:${pageSize} offset:${
      (pageNumber - 1) * pageSize
--- a/src/components/Explore/Explore.jsx
+++ b/src/components/Explore/Explore.jsx
@@ -269,7 +269,7 @@ function Explore({ searchInputValue }) {
    if (!isLoading && !isEndOfList) {
      return <div ref={listBottom} />;
    }
-    return '';
+    return;
  };

  return (
--- a/src/components/Repo/RepoDetails.jsx
+++ b/src/components/Repo/RepoDetails.jsx
@@ -1,5 +1,5 @@
 // react global
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';

 // utility
 import { api, endpoints } from '../../api';
@@ -154,7 +154,7 @@ const randomImage = () => {
 function RepoDetails() {
  const [repoDetailData, setRepoDetailData] = useState({});
  const [tags, setTags] = useState([]);
-
+  const placeholderImage = useRef(randomImage());
  const [isLoading, setIsLoading] = useState(true);
  const [selectedTab, setSelectedTab] = useState('Overview');
  // get url param from <Route here (i.e. image name)
@@ -261,7 +261,7 @@ function RepoDetails() {
                      image={
                          !isEmpty(repoDetailData?.logo)
                            ? `data:image/png;base64, ${repoDetailData?.logo}`
-                            : randomImage()
+                            : placeholderImage.current
                        }
                        alt="icon"
                      />
--- a/src/components/Shared/RepoCard.jsx
+++ b/src/components/Shared/RepoCard.jsx
@@ -1,5 +1,5 @@
 // react global
-import React from 'react';
+import React, { useRef } from 'react';
 import { useNavigate, createSearchParams } from 'react-router-dom';

 // utility
@@ -104,6 +104,7 @@ const useStyles = makeStyles(() => ({
 function RepoCard(props) {
  const classes = useStyles();
  const navigate = useNavigate();
+  const placeholderImage = useRef(randomImage());
  const { name, vendor, platforms, description, downloads, isSigned, lastUpdated, logo, version, vulnerabilityData } =
    props;

@@ -166,7 +167,7 @@ function RepoCard(props) {
                    img: classes.avatar
                  }}
                  component="img"
-                  image={!isEmpty(logo) ? `data:image/png;base64, ${logo}` : randomImage()}
+                  image={!isEmpty(logo) ? `data:image/png;base64, ${logo}` : placeholderImage.current}
                  alt="icon"
                />
                <Tooltip title={name} placement="top">
--- a/src/components/Tag/Tabs/ReferredBy.jsx
+++ b/src/components/Tag/Tabs/ReferredBy.jsx
@@ -1,11 +1,9 @@
-import React, { useEffect, useState, useMemo } from 'react';
+import React, { useEffect, useState } from 'react';
 import { makeStyles } from '@mui/styles';
 import { isEmpty } from 'lodash';
 import { Divider, Typography, Stack } from '@mui/material';
 import ReferrerCard from '../../Shared/ReferrerCard';
 import Loading from '../../Shared/Loading';
-import { api, endpoints } from 'api';
-import { host } from '../../../host';
 import { mapReferrer } from 'utilities/objectModels';

 const useStyles = makeStyles(() => ({
@@ -17,36 +15,24 @@ const useStyles = makeStyles(() => ({
 }));

 function ReferredBy(props) {
-  const { repoName, digest } = props;
-  const [referrers, setReferrers] = useState([]);
+  const { referrers } = props;
+  const [referrersData, setReferrersData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const classes = useStyles();
-  const abortController = useMemo(() => new AbortController(), []);

  useEffect(() => {
-    api
-      .get(`${host()}${endpoints.referrers({ repo: repoName, digest })}`, abortController.signal)
-      .then((response) => {
-        if (response.data && response.data.data) {
-          let referrersData = response.data.data.Referrers?.map((referrer) => mapReferrer(referrer));
-          if (!isEmpty(referrersData)) {
-            setReferrers(referrersData);
-          }
-        }
-        setIsLoading(false);
-      })
-      .catch((e) => {
-        console.error(e);
-        setIsLoading(false);
-      });
-    return () => {
-      abortController.abort();
-    };
+    if (!isEmpty(referrers)) {
+      const mappedReferrersData = referrers.map((referrer) => mapReferrer(referrer));
+      setReferrersData(mappedReferrersData);
+    } else {
+      setReferrersData([]);
+    }
+    setIsLoading(false);
  }, []);

  const renderReferrers = () => {
-    return !isEmpty(referrers) ? (
-      referrers.map((referrer, index) => {
+    return !isEmpty(referrersData) ? (
+      referrersData.map((referrer, index) => {
        return (
          <ReferrerCard
            key={index}
@@ -63,16 +49,6 @@ function ReferredBy(props) {
    );
  };

-  const renderListBottom = () => {
-    if (isLoading) {
-      return <Loading />;
-    }
-    if (!isLoading) {
-      return <div />;
-    }
-    return;
-  };
-
  return (
    <div data-testid="referred-by-container">
      <Typography
@@ -95,8 +71,7 @@ function ReferredBy(props) {
      />
      <Stack direction="column" spacing={2}>
        <Stack direction="column" spacing={2}>
-          {renderReferrers()}
-          {renderListBottom()}
+          {isLoading ? <Loading /> : renderReferrers()}
        </Stack>
      </Stack>
    </div>
--- a/src/components/Tag/Tabs/VulnerabilitiesDetails.jsx
+++ b/src/components/Tag/Tabs/VulnerabilitiesDetails.jsx
@@ -5,16 +5,17 @@ import { api, endpoints } from '../../../api';

 // components
 import Collapse from '@mui/material/Collapse';
-import { Box, Card, CardContent, Divider, Stack, Typography } from '@mui/material';
+import { Box, Card, CardContent, Divider, Stack, Typography, InputBase } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import { host } from '../../../host';
-import { isEmpty } from 'lodash';
+import { debounce, isEmpty } from 'lodash';
 import { Link } from 'react-router-dom';
 import Loading from '../../Shared/Loading';
 import { KeyboardArrowDown, KeyboardArrowRight } from '@mui/icons-material';
 import { VulnerabilityChipCheck } from 'utilities/vulnerabilityAndSignatureCheck';
 import { mapCVEInfo } from 'utilities/objectModels';
 import { CVE_FIXEDIN_PAGE_SIZE, EXPLORE_PAGE_SIZE } from 'utilities/paginationConstants';
+import SearchIcon from '@mui/icons-material/Search';

 const useStyles = makeStyles(() => ({
  card: {
@@ -81,6 +82,25 @@ const useStyles = makeStyles(() => ({
    fontWeight: '600',
    cursor: 'pointer',
    textAlign: 'center'
+  },
+  search: {
+    position: 'relative',
+    minWidth: '100%',
+    flexDirection: 'row',
+    marginBottom: '1.7rem',
+    boxShadow: '0rem 0.3125rem 0.625rem rgba(131, 131, 131, 0.08)',
+    border: '0.125rem solid #E7E7E7',
+    borderRadius: '1rem',
+    zIndex: 1155
+  },
+  searchIcon: {
+    color: '#52637A',
+    paddingRight: '3%'
+  },
+  input: {
+    color: '#464141',
+    marginLeft: 1,
+    width: '90%'
  }
 }));

@@ -236,27 +256,27 @@ function VulnerabilitiesDetails(props) {
  const { name, tag } = props;

  // pagination props
+  const [cveFilter, setCveFilter] = useState('');
  const [pageNumber, setPageNumber] = useState(1);
  const [isEndOfList, setIsEndOfList] = useState(false);
  const listBottom = useRef(null);

  const getPaginatedCVEs = () => {
-    setIsLoading(true);
    api
      .get(
-        `${host()}${endpoints.vulnerabilitiesForRepo(`${name}:${tag}`, { pageNumber, pageSize: EXPLORE_PAGE_SIZE })}`,
+        `${host()}${endpoints.vulnerabilitiesForRepo(
+          `${name}:${tag}`,
+          { pageNumber, pageSize: EXPLORE_PAGE_SIZE },
+          cveFilter
+        )}`,
        abortController.signal
      )
      .then((response) => {
        if (response.data && response.data.data) {
          let cveInfo = response.data.data.CVEListForImage?.CVEList;
          let cveListData = mapCVEInfo(cveInfo);
-          const newCVEList = [...cveData, ...cveListData];
-          setCveData(newCVEList);
-          setIsEndOfList(
-            response.data.data.CVEListForImage.Page?.ItemCount < EXPLORE_PAGE_SIZE ||
-              newCVEList.length >= response.data.data.CVEListForImage?.Page?.TotalCount
-          );
+          setCveData((previousState) => (pageNumber === 1 ? cveListData : [...previousState, ...cveListData]));
+          setIsEndOfList(response.data.data.CVEListForImage.Page?.ItemCount < EXPLORE_PAGE_SIZE);
        } else if (response.data.errors) {
          setIsEndOfList(true);
        }
@@ -270,11 +290,25 @@ function VulnerabilitiesDetails(props) {
      });
  };

+  const resetPagination = () => {
+    setIsLoading(true);
+    setIsEndOfList(false);
+    if (pageNumber !== 1) {
+      setPageNumber(1);
+    } else {
+      getPaginatedCVEs();
+    }
+  };
+
+  const handleCveFilterChange = (e) => {
+    const { value } = e.target;
+    setCveFilter(value);
+  };
+
+  const debouncedChangeHandler = useMemo(() => debounce(handleCveFilterChange, 300));
+
  useEffect(() => {
    getPaginatedCVEs();
-    return () => {
-      abortController.abort();
-    };
  }, [pageNumber]);

  // setup intersection obeserver for infinite scroll
@@ -302,6 +336,18 @@ function VulnerabilitiesDetails(props) {
    };
  }, [isLoading, isEndOfList]);

+  useEffect(() => {
+    if (isLoading) return;
+    resetPagination();
+  }, [cveFilter]);
+
+  useEffect(() => {
+    return () => {
+      abortController.abort();
+      debouncedChangeHandler.cancel();
+    };
+  }, []);
+
  const renderCVEs = () => {
    return !isEmpty(cveData) ? (
      cveData.map((cve, index) => {
@@ -347,6 +393,17 @@ function VulnerabilitiesDetails(props) {
          width: '100%'
        }}
      />
+      <Stack className={classes.search} direction="row" alignItems="center" justifyContent="space-between" spacing={2}>
+        <InputBase
+          style={{ paddingLeft: 10, height: 46, color: 'rgba(0, 0, 0, 0.6)' }}
+          placeholder={'Search for Vulnerabilities...'}
+          className={classes.input}
+          onChange={debouncedChangeHandler}
+        />
+        <div className={classes.searchIcon}>
+          <SearchIcon />
+        </div>
+      </Stack>
      <Stack direction="column" spacing={2}>
        <Stack direction="column" spacing={2}>
          {renderCVEs()}
--- a/src/components/Tag/TagDetails.jsx
+++ b/src/components/Tag/TagDetails.jsx
@@ -217,6 +217,7 @@ function TagDetails() {
  const [isLoading, setIsLoading] = useState(true);
  const [selectedTab, setSelectedTab] = useState('Layers');
  const [selectedPullTab, setSelectedPullTab] = useState('');
+  const placeholderImage = useRef(randomImage());
  const abortController = useMemo(() => new AbortController(), []);
  const mounted = useRef(false);
  const navigate = useNavigate();
@@ -331,7 +332,7 @@ function TagDetails() {
                        image={
                          !isEmpty(imageDetailData?.logo)
                            ? `data:image/  png;base64, ${imageDetailData?.logo}`
-                            : randomImage()
+                            : placeholderImage.current
                        }
                        alt="icon"
                      />
@@ -580,7 +581,7 @@ function TagDetails() {
                            <VulnerabilitiesDetails name={reponame} tag={tag} />
                          </TabPanel>
                          <TabPanel value="ReferredBy" className={classes.tabPanel}>
-                            <ReferredBy repoName={reponame} digest={selectedManifest?.digest} />
+                            <ReferredBy referrers={imageDetailData.referrers} />
                          </TabPanel>
                        </Grid>
                      </Grid>
--- a/src/utilities/objectModels.js
+++ b/src/utilities/objectModels.js
@@ -44,6 +44,7 @@ const mapToImage = (responseImage) => {
    repoName: responseImage.RepoName,
    tag: responseImage.Tag,
    manifests: responseImage.Manifests?.map((manifest) => mapToManifest(manifest)) || [],
+    referrers: responseImage.Referrers,
    size: responseImage.Size,
    downloadCount: responseImage.DownloadCount,
    lastUpdated: responseImage.LastUpdated,
Author	SHA1	Message	Date
Raul Kele	089d79087f	patch: update placeholder image logic Signed-off-by: Raul Kele <raulkeleblk@gmail.com>	2023-04-03 11:53:32 +03:00
Raul Kele	2f94cc30ae	patch: referrers from image query Signed-off-by: Raul Kele <raulkeleblk@gmail.com>	2023-03-22 14:12:15 +02:00
Raul Kele	ddf1d9224b	feat: cve list filtering Signed-off-by: Raul Kele <raulkeleblk@gmail.com>	2023-03-21 12:51:16 +02:00