fix: fixed cvelist request params, removed id/title from vulnerability ui

Signed-off-by: Raul Kele <raulkeleblk@gmail.com>

src/__tests__/TagPage/VulnerabilitiesDetails.test.js

@@ -456,7 +456,7 @@ describe('Vulnerabilties page', () => {
     jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: { data: mockCVEList } });
     render(<StateVulnerabilitiesWrapper />);
     await waitFor(() => expect(screen.getAllByText('Vulnerabilities')).toHaveLength(1));
-    await waitFor(() => expect(screen.getAllByText(/Title/i)).toHaveLength(20));
+    await waitFor(() => expect(screen.getAllByText(/Fixed in/i)).toHaveLength(20));
   });
 
   it('renders no vulnerabilities if there are not any', async () => {

src/api.js

@@ -26,36 +26,36 @@ const api = {
     };
   },
 
-  get(urli, cfg) {
-    if (isEmpty(cfg)) {
-      return axios.get(urli, this.getRequestCfg());
-    } else {
-      return axios.get(urli, cfg);
+  get(urli, abortSignal, cfg) {
+    let config = isEmpty(cfg) ? this.getRequestCfg() : cfg;
+    if (!isEmpty(abortSignal) && isEmpty(config.signal)) {
+      config = { ...config, signal: abortSignal };
     }
+    return axios.get(urli, config);
   },
 
-  // This method creates the POST request with axios
-  // If caller specifies the request configuration to be sent (@param cfg), it adds it to the request
-  // If caller doesn't specfiy the request configuration, it adds the default config to the request
-  // This allows caller to pass in any desired request configuration, based on the specifc need
-  post(urli, payload, cfg) {
-    // generic post - generate config for request
-    if (isEmpty(cfg)) {
-      return axios.post(urli, payload, this.getRequestCfg());
-      // custom post - use passed in config
-      // TODO:: validate config object before sending request
-    } else {
-      return axios.post(urli, payload, cfg);
+  post(urli, payload, abortSignal, cfg) {
+    let config = isEmpty(cfg) ? this.getRequestCfg() : cfg;
+    if (!isEmpty(abortSignal) && isEmpty(config.signal)) {
+      config = { ...config, signal: abortSignal };
     }
+    return axios.post(urli, payload, config);
   },
 
-  put(urli, payload) {
-    return axios.put(urli, payload, this.getRequestCfg());
+  put(urli, payload, abortSignal, cfg) {
+    let config = isEmpty(cfg) ? this.getRequestCfg() : cfg;
+    if (!isEmpty(abortSignal) && isEmpty(config.signal)) {
+      config = { ...config, signal: abortSignal };
+    }
+    return axios.put(urli, payload, config);
   },
 
-  delete(urli, cfg) {
-    let requestCfg = isEmpty(cfg) ? this.getRequestCfg() : cfg;
-    return axios.delete(urli, requestCfg);
+  delete(urli, abortSignal, cfg) {
+    let config = isEmpty(cfg) ? this.getRequestCfg() : cfg;
+    if (!isEmpty(abortSignal) && isEmpty(config.signal)) {
+      config = { ...config, signal: abortSignal };
+    }
+    return axios.delete(urli, config);
   }
 };
 

src/components/TagDetails.jsx

@@ -315,7 +315,7 @@ function TagDetails() {
                         <IsDependentOn name={fullName} />
                       </TabPanel>
                       <TabPanel value="Vulnerabilities" className={classes.tabPanel}>
-                        <VulnerabilitiesDetails name={name} />
+                        <VulnerabilitiesDetails name={name} tag={tag} />
                       </TabPanel>
                     </Grid>
                   </Grid>

src/components/VulnerabilitiesDetails.jsx

@@ -204,9 +204,6 @@ function VulnerabilitiyCard(props) {
     <Card className={classes.card} raised>
       <CardContent className={classes.content}>
         <Stack sx={{ flexDirection: 'row' }}>
-          <Typography variant="body1" align="left" className={classes.title}>
-            ID:{' '}
-          </Typography>
           <Typography variant="body1" align="left" className={classes.values}>
             {' '}
             {cve.Id}
@@ -214,9 +211,6 @@ function VulnerabilitiyCard(props) {
         </Stack>
         {vulnerabilityCheck(cve.Severity)}
         <Stack sx={{ flexDirection: 'row' }}>
-          <Typography variant="body1" align="left" className={classes.title}>
-            Title:{' '}
-          </Typography>
           <Typography variant="body1" align="left" className={classes.values}>
             {' '}
             {cve.Title}
@@ -261,12 +255,12 @@ function VulnerabilitiesDetails(props) {
   const [cveData, setCveData] = useState({});
   const [isLoading, setIsLoading] = useState(true);
   const abortController = useMemo(() => new AbortController(), []);
-  const { name } = props;
+  const { name, tag } = props;
 
   useEffect(() => {
     setIsLoading(true);
     api
-      .get(`${host()}${endpoints.vulnerabilitiesForRepo(name)}`, abortController.signal)
+      .get(`${host()}${endpoints.vulnerabilitiesForRepo(`${name}:${tag}`)}`, abortController.signal)
       .then((response) => {
         if (response.data && response.data.data) {
           let cveInfo = response.data.data.CVEListForImage;