feat(heureka): adds vulnerabilities list view (#1081)

* feat(heureka): adds vulnerabilities list view

* fix(heureka): adjusts formats

* feat(heureka): select the top navigation based on given root in url

* feat(heureka): adds tests for vulnerabilities list

* Delete .tool-versions

This is a local file to manage the different node installation

* fix(heureka): adjusts license header of graphql.ts

* chore(heureka): adds changeset

* chore(heureka): display showmore btn when its needed and remove clear all from input group

* chore(heureka): parallelize filter request with fetch vulnerabilities request

* chore(heureka): cleanup

* chore(heureka): add empty lines

* chore(heureka): change issue to vulnerability column name in list view

Author: hodanoori

.changeset/polite-jobs-juggle.md

@@ -0,0 +1,6 @@
+---
+"@cloudoperators/juno-app-heureka": minor
+"@cloudoperators/juno-app-greenhouse": patch
+---
+
+Heureka: Add vulnerabilities list view

apps/heureka/src/api/fetchVulnerabilities.tsx

@@ -0,0 +1,38 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ApolloQueryResult } from "@apollo/client"
+import { GetVulnerabilitiesDocument, GetVulnerabilitiesQuery } from "../generated/graphql"
+import { RouteContext } from "../routes/-types"
+import { FilterSettings } from "../components/common/Filters/types"
+import { getActiveVulnerabilityFilter } from "../components/Vulnerabilities/utils"
+
+type FetchVulnerabilitiesParams = Pick<RouteContext, "queryClient" | "apiClient"> & {
+  filterSettings: FilterSettings
+  after?: string | null
+}
+
+export const fetchVulnerabilities = ({
+  queryClient,
+  apiClient,
+  filterSettings,
+  after,
+}: FetchVulnerabilitiesParams): Promise<ApolloQueryResult<GetVulnerabilitiesQuery>> => {
+  const filter = getActiveVulnerabilityFilter(filterSettings)
+  return queryClient.ensureQueryData({
+    queryKey: ["vulnerabilities", JSON.stringify(filter), after],
+    queryFn: () =>
+      apiClient.query({
+        query: GetVulnerabilitiesDocument,
+        variables: {
+          first: 20,
+          after,
+          filter,
+          firstServices: 10,
+          afterServices: null,
+        },
+      }),
+  })
+}

apps/heureka/src/api/fetchVulnerabilityFilters.tsx

@@ -0,0 +1,19 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ApolloQueryResult } from "@apollo/client"
+import { GetVulnerabilityFiltersDocument, GetVulnerabilityFiltersQuery } from "../generated/graphql"
+import { RouteContext } from "../routes/-types"
+
+type FetchVulnerabilityFiltersParams = Pick<RouteContext, "queryClient" | "apiClient">
+
+export const fetchVulnerabilityFilters = ({
+  queryClient,
+  apiClient,
+}: FetchVulnerabilityFiltersParams): Promise<ApolloQueryResult<GetVulnerabilityFiltersQuery>> =>
+  queryClient.ensureQueryData({
+    queryKey: ["vulnerabilityFilters"],
+    queryFn: () => apiClient.query({ query: GetVulnerabilityFiltersDocument }),
+  })

apps/heureka/src/components/Service/ImageVersionDetailsPanel/ImageVersionIssuesList/IssuesDataRows/IssuesDataRow/index.tsx

@@ -6,9 +6,10 @@
 import React, { useState } from "react"
 import { DataGridRow, DataGridCell, Stack } from "@cloudoperators/juno-ui-components"
 import { Icon } from "@cloudoperators/juno-ui-components"
-import { IssueIcon } from "./IssueIcon"
-import { IssueTimestamp } from "./IssueTimestamp"
-import { Issue, getSeverityColor } from "../../../../../Services/utils"
+import { IssueIcon } from "../../../../../common/IssueIcon"
+import { IssueTimestamp } from "../../../../../common/IssueTimestamp"
+import { Issue } from "../../../../../Services/utils"
+import { getSeverityColor, useTextOverflow } from "../../../../../../utils"
 
 const cellSeverityClasses = (severity: string) => {
   let borderColor = getSeverityColor(severity)
@@ -27,6 +28,7 @@ type IssuesDataRowProps = {
 
 export const IssuesDataRow = ({ issue }: IssuesDataRowProps) => {
   const [isExpanded, setIsExpanded] = useState(false)
+  const { needsExpansion, textRef } = useTextOverflow(issue.description)
 
   const toggleDescription = (e: React.MouseEvent) => {
     e.preventDefault()
@@ -59,15 +61,17 @@ export const IssuesDataRow = ({ issue }: IssuesDataRowProps) => {
       </DataGridCell>
       <DataGridCell>
         <Stack gap="2" direction="vertical">
-          <span className={isExpanded ? "" : "whitespace-nowrap overflow-hidden text-ellipsis"}>
+          <span ref={textRef} className={isExpanded ? "" : "whitespace-nowrap overflow-hidden text-ellipsis"}>
             {issue.description}
           </span>
-          <a href="#" onClick={toggleDescription} className="link-hover">
-            <Stack alignment="center">
-              {isExpanded ? "Show less" : "Show more"}
-              <Icon color="global-text" icon={isExpanded ? "expandLess" : "expandMore"} />
-            </Stack>
-          </a>
+          {issue.description && needsExpansion && (
+            <a href="#" onClick={toggleDescription} className="link-hover">
+              <Stack alignment="center">
+                {isExpanded ? "Show less" : "Show more"}
+                <Icon color="global-text" icon={isExpanded ? "expandLess" : "expandMore"} />
+              </Stack>
+            </a>
+          )}
         </Stack>
       </DataGridCell>
     </DataGridRow>

apps/heureka/src/components/Services/utils.ts

@@ -261,23 +261,6 @@ export const getNormalizedImageVersionIssuesResponse = (data: any): NormalizedIm
   }
 }
 
-export const getSeverityColor = (severity: string): string => {
-  switch (severity.toLowerCase()) {
-    case "critical":
-      return "text-theme-danger"
-    case "high":
-      return "text-theme-warning"
-    case "medium":
-      return "text-theme-warning"
-    case "low":
-      return "text-theme-info"
-    case "none":
-      return "text-theme-default"
-    default:
-      return "text-theme-default"
-  }
-}
-
 /**
  * This function converts the selected filters from the FilterSettings into a format that is accepted by the url-state-provider/v2/encode
  * Examples:

apps/heureka/src/components/Vulnerabilities/Vulnerabilities.test.tsx

@@ -0,0 +1,70 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react"
+import { render, screen, act } from "@testing-library/react"
+import { createMemoryHistory, createRootRoute, createRoute, Outlet, RouterProvider } from "@tanstack/react-router"
+import { PortalProvider } from "@cloudoperators/juno-ui-components/index"
+import { Vulnerabilities } from "./index"
+import { Filter, FilterSettings } from "../common/Filters/types"
+import { getTestRouter } from "../../mocks/getTestRouter"
+import { mockVulnerabilitiesPromise, mockVulnerabilityFiltersPromise } from "../../mocks/promises"
+
+const mockFilters: Filter[] = [
+  {
+    displayName: "Support Group",
+    filterName: "supportGroup",
+    values: ["containers", "platform", "network"],
+  },
+  {
+    displayName: "Severity",
+    filterName: "severity",
+    values: ["Critical", "High", "Medium", "Low", "None"],
+  },
+]
+
+const mockFilterSettings: FilterSettings = {
+  searchTerm: "",
+  selectedFilters: [],
+}
+
+const renderComponent = () => {
+  const rootRoute = createRootRoute({
+    component: () => <Outlet />,
+  })
+  const testRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: "/vulnerabilities/",
+    loader: async () => ({
+      vulnerabilitiesPromise: mockVulnerabilitiesPromise,
+      filters: mockFilters,
+      filterSettings: mockFilterSettings,
+    }),
+    component: () => (
+      <PortalProvider>
+        <Vulnerabilities />
+      </PortalProvider>
+    ),
+  })
+  const routeTree = rootRoute.addChildren([testRoute])
+  const router = getTestRouter({
+    routeTree,
+    history: createMemoryHistory({
+      initialEntries: ["/vulnerabilities/"],
+    }),
+  })
+
+  return {
+    ...render(<RouterProvider router={router} />),
+    router,
+  }
+}
+
+describe("Vulnerabilities", () => {
+  it("should render correctly", async () => {
+    await act(async () => renderComponent())
+    expect(await screen.findByText("CVE-2024-1234")).toBeInTheDocument()
+  })
+})

apps/heureka/src/components/Vulnerabilities/VulnerabilitiesFilters.tsx

@@ -0,0 +1,36 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useCallback } from "react"
+import { useLoaderData, useNavigate } from "@tanstack/react-router"
+import { Filters } from "../common/Filters"
+import { FilterSettings } from "../common/Filters/types"
+import { getFiltersForUrl } from "./utils"
+
+export const VulnerabilitiesFilters = () => {
+  const navigate = useNavigate()
+  const { filters, filterSettings } = useLoaderData({ from: "/vulnerabilities/" })
+
+  const handleFilterChange = useCallback(
+    (updatedFilterSettings: FilterSettings) => {
+      navigate({
+        to: "/vulnerabilities",
+        search: {
+          ...getFiltersForUrl(updatedFilterSettings),
+        },
+      })
+    },
+    [filterSettings, navigate]
+  )
+
+  return (
+    <Filters
+      filters={filters}
+      filterSettings={filterSettings}
+      onFilterChange={handleFilterChange}
+      searchInputPlaceholder="search term for vulnerabilities name"
+    />
+  )
+}

apps/heureka/src/components/Vulnerabilities/VulnerabilitiesList/VulnerabilitiesDataRows/VulnerabilityDataRow.tsx

@@ -0,0 +1,96 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from "react"
+import { DataGridRow, DataGridCell, Stack, Icon, KnownIcons } from "@cloudoperators/juno-ui-components"
+import { getSeverityColor, useTextOverflow } from "../../../../utils"
+import { IssueTimestamp } from "../../../common/IssueTimestamp"
+import { Vulnerability } from "../../utils"
+
+type VulnerabilityDataRowProps = {
+  vulnerability: Vulnerability
+}
+
+const cellSeverityClasses = (severity: string) => {
+  let borderColor = getSeverityColor(severity)
+
+  return `
+    border-l-2
+    ${borderColor}
+    h-full
+    pl-5
+  `
+}
+
+const getIconForSeverity = (severity: string) => {
+  const severityLower = severity.toLowerCase()
+  const iconColor = getSeverityColor(severity)
+
+  const iconMap: Record<string, KnownIcons> = {
+    critical: "danger",
+    high: "warning",
+    medium: "errorOutline",
+    low: "info",
+    none: "help",
+  }
+
+  return <Icon icon={iconMap[severityLower] || "help"} color={iconColor} />
+}
+
+export const VulnerabilityDataRow = ({ vulnerability }: VulnerabilityDataRowProps) => {
+  const [isExpanded, setIsExpanded] = useState(false)
+  const { needsExpansion, textRef } = useTextOverflow(vulnerability.description)
+
+  const toggleDescription = (e: React.MouseEvent) => {
+    e.preventDefault()
+    setIsExpanded(!isExpanded)
+  }
+
+  return (
+    <DataGridRow>
+      <DataGridCell className="pl-0">
+        <div className={cellSeverityClasses(vulnerability.severity)}>{getIconForSeverity(vulnerability.severity)}</div>
+      </DataGridCell>
+
+      <DataGridCell className="whitespace-nowrap">
+        <Stack gap="2" direction="vertical">
+          <span>{vulnerability.name}</span>
+          {vulnerability.sourceUrl && vulnerability.sourceUrl !== "-" && (
+            <a href={vulnerability.sourceUrl} target="_blank" rel="noopener noreferrer" className="link-hover">
+              <Stack gap="1.5" alignment="center">
+                <Icon icon="openInNew" size="16" />
+                <span>Issue source</span>
+              </Stack>
+            </a>
+          )}
+        </Stack>
+      </DataGridCell>
+
+      <DataGridCell className="whitespace-nowrap">
+        <span>{vulnerability.servicesCount}</span>
+      </DataGridCell>
+
+      <DataGridCell className="whitespace-nowrap">
+        <IssueTimestamp targetDate={vulnerability.earliestTargetRemediationDate} />
+      </DataGridCell>
+
+      <DataGridCell>
+        <Stack gap="2" direction="vertical">
+          <span ref={textRef} className={isExpanded ? "" : "whitespace-nowrap overflow-hidden text-ellipsis"}>
+            {vulnerability.description}
+          </span>
+          {vulnerability.description && needsExpansion && (
+            <a href="#" onClick={toggleDescription} className="link-hover">
+              <Stack alignment="center">
+                {isExpanded ? "Show less" : "Show more"}
+                <Icon color="global-text" icon={isExpanded ? "expandLess" : "expandMore"} />
+              </Stack>
+            </a>
+          )}
+        </Stack>
+      </DataGridCell>
+    </DataGridRow>
+  )
+}

apps/heureka/src/components/Vulnerabilities/VulnerabilitiesList/VulnerabilitiesDataRows/index.tsx

@@ -0,0 +1,30 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { use } from "react"
+import { EmptyDataGridRow } from "../../../common/EmptyDataGridRow"
+import { getNormalizedVulnerabilitiesResponse, Vulnerability } from "../../utils"
+import { ApolloQueryResult } from "@apollo/client"
+import { GetVulnerabilitiesQuery } from "../../../../generated/graphql"
+import { VulnerabilityDataRow } from "./VulnerabilityDataRow"
+
+type VulnerabilitiesDataRowsProps = {
+  vulnerabilitiesPromise: Promise<ApolloQueryResult<GetVulnerabilitiesQuery>>
+}
+
+export const VulnerabilitiesDataRows = ({ vulnerabilitiesPromise }: VulnerabilitiesDataRowsProps) => {
+  const { error, data } = use(vulnerabilitiesPromise)
+  const { vulnerabilities } = getNormalizedVulnerabilitiesResponse(data)
+
+  if (error) {
+    return <EmptyDataGridRow colSpan={5}>Error loading vulnerabilities: {error.message}</EmptyDataGridRow>
+  }
+
+  if (vulnerabilities.length === 0) {
+    return <EmptyDataGridRow colSpan={5}>No vulnerabilities found! 🚀</EmptyDataGridRow>
+  }
+
+  return vulnerabilities.map((vuln: Vulnerability) => <VulnerabilityDataRow key={vuln.name} vulnerability={vuln} />)
+}