chore(heureka): adds support groups

Author: hodanoori

apps/heureka/src/components/Vulnerabilities/VulnerabilitiesList/VulnerabilityDetailsPanel/VulnerabilityServicesList.tsx

@@ -0,0 +1,65 @@
+/*
+ * 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 { useNavigate } from "@tanstack/react-router"
+import { DataGridRow, DataGridCell } from "@cloudoperators/juno-ui-components"
+import { Vulnerability } from "../../../utils"
+import { ApolloQueryResult } from "@apollo/client"
+import { GetVulnerabilitiesQuery } from "../../../../../generated/graphql"
+import { getNormalizedVulnerabilitiesResponse } from "../../../utils"
+
+type VulnerabilityServicesDataRowsProps = {
+  vulnerabilitiesPromise: Promise<ApolloQueryResult<GetVulnerabilitiesQuery>>
+  vulnerabilityName: string
+  onServiceClick?: (serviceCcrn: string) => void
+}
+
+export const VulnerabilityServicesDataRows = ({
+  vulnerabilitiesPromise,
+  vulnerabilityName,
+  onServiceClick,
+}: VulnerabilityServicesDataRowsProps) => {
+  const navigate = useNavigate()
+
+  const handleServiceClick = (serviceCcrn: string) => {
+    if (onServiceClick) {
+      onServiceClick(serviceCcrn)
+    } else {
+      navigate({
+        to: "/services/$service",
+        params: { service: serviceCcrn },
+      })
+    }
+  }
+
+  // Use the promise passed from the parent
+  const { data } = use(vulnerabilitiesPromise)
+
+  // Get vulnerability data from the response
+  const { vulnerabilities } = getNormalizedVulnerabilitiesResponse(data)
+  const vulnerabilityData = vulnerabilities.find((vuln: Vulnerability) => vuln.name === vulnerabilityName)
+
+  if (!vulnerabilityData) {
+    return <div className="text-sm text-theme-light">Vulnerability not found: {vulnerabilityName}</div>
+  }
+
+  const services = vulnerabilityData.services || []
+  const totalCount = vulnerabilityData.servicesCount || 0
+
+  if (totalCount === 0) {
+    return <div className="text-sm text-theme-light">No services affected by this vulnerability.</div>
+  }
+
+  return (
+    <>
+      {services.map((service, index) => (
+        <DataGridRow key={index} className="cursor-pointer" onClick={() => handleServiceClick(service.ccrn)}>
+          <DataGridCell className="whitespace-nowrap">{service.ccrn}</DataGridCell>
+        </DataGridRow>
+      ))}
+    </>
+  )
+}

apps/heureka/src/components/Vulnerabilities/VulnerabilitiesList/VulnerabilityDetailsPanel/VulnerabilityServicesList/VulnerabilityServicesDataRows.tsx

@@ -0,0 +1,27 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { use } from "react"
+import { Vulnerability } from "../../../utils"
+import { ApolloQueryResult } from "@apollo/client"
+import { GetVulnerabilitiesQuery } from "../../../../../generated/graphql"
+import { getNormalizedVulnerabilitiesResponse } from "../../../utils"
+
+type VulnerabilityServicesTotalCountProps = {
+  vulnerabilitiesPromise: Promise<ApolloQueryResult<GetVulnerabilitiesQuery>>
+  vulnerabilityName: string
+}
+
+export const VulnerabilityServicesTotalCount = ({
+  vulnerabilitiesPromise,
+  vulnerabilityName,
+}: VulnerabilityServicesTotalCountProps) => {
+  const { data } = use(vulnerabilitiesPromise)
+  const { vulnerabilities } = getNormalizedVulnerabilitiesResponse(data)
+  const vulnerabilityData = vulnerabilities.find((vuln: Vulnerability) => vuln.name === vulnerabilityName)
+  const { servicesCount } = vulnerabilityData || { servicesCount: 0 }
+
+  return servicesCount
+}

apps/heureka/src/components/Vulnerabilities/VulnerabilitiesList/VulnerabilityDetailsPanel/VulnerabilityServicesList/VulnerabilityServicesTotalCount.tsx

@@ -0,0 +1,84 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { Suspense } from "react"
+import {
+  Stack,
+  DataGrid,
+  DataGridRow,
+  DataGridHeadCell,
+  DataGridCell,
+  Spinner,
+} from "@cloudoperators/juno-ui-components"
+import SectionContentHeading from "../../../../common/SectionContentHeading"
+import { CursorPagination } from "../../../../common/CursorPagination"
+import { ApolloQueryResult } from "@apollo/client"
+import { GetVulnerabilitiesQuery } from "../../../../../generated/graphql"
+import { getNormalizedVulnerabilityServicesResponse } from "../../../utils"
+import { VulnerabilityServicesDataRows } from "./VulnerabilityServicesDataRows"
+import { VulnerabilityServicesTotalCount } from "./VulnerabilityServicesTotalCount"
+
+type VulnerabilityServicesListProps = {
+  vulnerabilityName: string
+  vulnerabilitiesPromise: Promise<ApolloQueryResult<GetVulnerabilitiesQuery>>
+  onServiceClick?: (serviceCcrn: string) => void
+  goToPage: (after?: string | null) => void
+}
+
+export const VulnerabilityServicesList = ({
+  vulnerabilityName,
+  vulnerabilitiesPromise,
+  onServiceClick,
+  goToPage,
+}: VulnerabilityServicesListProps) => {
+  return (
+    <Suspense>
+      <SectionContentHeading>
+        Services
+        <Suspense>
+          (
+          <VulnerabilityServicesTotalCount
+            vulnerabilitiesPromise={vulnerabilitiesPromise}
+            vulnerabilityName={vulnerabilityName}
+          />
+          )
+        </Suspense>
+      </SectionContentHeading>
+
+      <div className="datagrid-hover">
+        <DataGrid columns={1}>
+          <DataGridRow>
+            <DataGridHeadCell>Service</DataGridHeadCell>
+          </DataGridRow>
+          <Suspense
+            fallback={
+              <DataGridRow>
+                <DataGridCell colSpan={1}>
+                  <Stack gap="2" alignment="center">
+                    <div>Loading</div>
+                    <Spinner variant="primary"></Spinner>
+                  </Stack>
+                </DataGridCell>
+              </DataGridRow>
+            }
+          >
+            <VulnerabilityServicesDataRows
+              vulnerabilitiesPromise={vulnerabilitiesPromise}
+              vulnerabilityName={vulnerabilityName}
+              onServiceClick={onServiceClick}
+            />
+          </Suspense>
+        </DataGrid>
+      </div>
+      <Suspense>
+        <CursorPagination
+          dataNormalizationMethod={getNormalizedVulnerabilityServicesResponse}
+          dataPromise={vulnerabilitiesPromise}
+          goToPage={goToPage}
+        />
+      </Suspense>
+    </Suspense>
+  )
+}

apps/heureka/src/components/Vulnerabilities/VulnerabilitiesList/VulnerabilityDetailsPanel/VulnerabilityServicesList/index.tsx

@@ -0,0 +1,50 @@
+/*
+ * 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 { DataGridRow, DataGridCell, Stack, Pill, DataGridHeadCell, DataGrid } from "@cloudoperators/juno-ui-components"
+import { Vulnerability } from "../../utils"
+import { ApolloQueryResult } from "@apollo/client"
+import { GetVulnerabilitiesQuery } from "../../../../generated/graphql"
+import { getNormalizedVulnerabilitiesResponse } from "../../utils"
+
+type VulnerabilitySupportGroupsProps = {
+  vulnerabilitiesPromise: Promise<ApolloQueryResult<GetVulnerabilitiesQuery>>
+  vulnerabilityName: string
+}
+
+export const VulnerabilitySupportGroups = ({
+  vulnerabilitiesPromise,
+  vulnerabilityName,
+}: VulnerabilitySupportGroupsProps) => {
+  const { data } = use(vulnerabilitiesPromise)
+  const { vulnerabilities } = getNormalizedVulnerabilitiesResponse(data)
+  const vulnerabilityData = vulnerabilities.find((vuln: Vulnerability) => vuln.name === vulnerabilityName)
+
+  if (!vulnerabilityData) {
+    return null
+  }
+
+  return (
+    <DataGrid columns={2} gridColumnTemplate="10% auto" className="mb-6">
+      <DataGridRow>
+        <DataGridHeadCell>Support Groups</DataGridHeadCell>
+        <DataGridCell>
+          <Stack gap="1" direction="horizontal" wrap>
+            {vulnerabilityData.supportGroups?.map((group: string) => (
+              <Pill
+                key={group}
+                pillKey="support_group"
+                pillKeyLabel="support_group"
+                pillValue={group}
+                pillValueLabel={group}
+              />
+            ))}
+          </Stack>
+        </DataGridCell>
+      </DataGridRow>
+    </DataGrid>
+  )
+}