feat(heureka) : Add components view

heureka/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "heureka",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "author": "UI-Team",
   "contributors": [
     "Hoda Noori, Arturo Reuschenbach Pucernau"
@@ -80,6 +80,7 @@
     "@cloudoperators/juno-communicator": "^2.2.11",
     "@cloudoperators/juno-messages-provider": "^0.1.17",
     "@cloudoperators/juno-ui-components": "^2.15.4",
-    "@cloudoperators/juno-url-state-provider-v1": "^1.3.2"
+    "@cloudoperators/juno-url-state-provider-v1": "^1.3.2",
+    "date-fns": "^3.6.0"
   }
 }

heureka/ui/src/components/components/ComponentsList.jsx

@@ -0,0 +1,51 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Greenhouse contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react"
+import {
+  DataGrid,
+  DataGridRow,
+  DataGridHeadCell,
+  DataGridCell,
+} from "@cloudoperators/juno-ui-components"
+import HintNotFound from "../shared/HintNotFound"
+import HintLoading from "../shared/HintLoading"
+import ComponentsListItem from "./ComponentsListItem"
+
+const ComponentsList = ({ components, isLoading }) => {
+  return (
+    <DataGrid columns={3}>
+      <DataGridRow>
+        <DataGridHeadCell>Name</DataGridHeadCell>
+        <DataGridHeadCell>Type</DataGridHeadCell>
+        <DataGridHeadCell>Total Number of Versions</DataGridHeadCell>
+      </DataGridRow>
+      {isLoading && !components ? (
+        <HintLoading className="my-4" text="Loading components..." />
+      ) : (
+        <>
+          {components?.length > 0 ? (
+            <>
+              {components.map((item, index) => (
+                <ComponentsListItem
+                  key={index}
+                  item={item}
+                ></ComponentsListItem>
+              ))}
+            </>
+          ) : (
+            <DataGridRow>
+              <DataGridCell colSpan={10}>
+                <HintNotFound text="No components found" />
+              </DataGridCell>
+            </DataGridRow>
+          )}
+        </>
+      )}
+    </DataGrid>
+  )
+}
+
+export default ComponentsList

heureka/ui/src/components/components/ComponentsListController.jsx

@@ -0,0 +1,88 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Greenhouse contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useMemo, useState } from "react"
+import { useQuery } from "@tanstack/react-query"
+import {
+  useQueryClientFnReady,
+  useQueryOptions,
+  useActions,
+} from "../StoreProvider"
+import ComponentsList from "./ComponentsList"
+import { Pagination } from "@cloudoperators/juno-ui-components"
+
+const ComponentsListController = () => {
+  const queryClientFnReady = useQueryClientFnReady()
+  const queryOptions = useQueryOptions("components")
+  const { setQueryOptions } = useActions()
+
+  const { isLoading, isFetching, isError, data, error } = useQuery({
+    queryKey: [`components`, queryOptions],
+    enabled: !!queryClientFnReady,
+  })
+
+  const [currentPage, setCurrentPage] = useState(1) // State for current page
+
+  const components = useMemo(() => {
+    if (!data) return null
+    return data?.Components?.edges
+  }, [data])
+
+  const pageInfo = useMemo(() => {
+    if (!data) return null
+    return data?.Components?.pageInfo
+  }, [data])
+
+  const totalPages = useMemo(() => {
+    if (!data?.Components?.pageInfo?.pages) return 0
+    return data?.Components?.pageInfo?.pages.length
+  }, [data?.Components?.pageInfo])
+  const onPaginationChanged = (newPage) => {
+    setCurrentPage(newPage) // Update currentPage
+    if (!data?.Components?.pageInfo?.pages) return
+    const pages = data?.Components?.pageInfo?.pages
+    const currentPageIndex = pages?.findIndex(
+      (page) => page?.pageNumber === parseInt(newPage)
+    )
+    if (currentPageIndex > -1) {
+      const after = pages[currentPageIndex]?.after
+      setQueryOptions("components", {
+        ...queryOptions,
+        after: `${after}`,
+      })
+    }
+  }
+
+  const onPressNext = () => {
+    onPaginationChanged(parseInt(currentPage) + 1)
+  }
+  const onPressPrevious = () => {
+    onPaginationChanged(parseInt(currentPage) - 1)
+  }
+  const onKeyPress = (oKey) => {
+    if (oKey.code === "Enter") {
+      onPaginationChanged(parseInt(oKey.currentTarget.value))
+    }
+  }
+
+  return (
+    <>
+      <ComponentsList components={components} isLoading={isLoading} />
+      <Pagination
+        currentPage={currentPage}
+        isFirstPage={currentPage === 1}
+        isLastPage={currentPage === totalPages}
+        onPressNext={onPressNext}
+        onPressPrevious={onPressPrevious}
+        onKeyPress={onKeyPress}
+        onSelectChange={onPaginationChanged}
+        pages={totalPages}
+        variant="input"
+      />
+    </>
+  )
+}
+
+export default ComponentsListController

heureka/ui/src/components/components/ComponentsListItem.jsx

@@ -0,0 +1,20 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Greenhouse contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react"
+import { DataGridRow, DataGridCell } from "@cloudoperators/juno-ui-components"
+import { listOfCommaSeparatedObjs } from "../shared/Helper"
+
+const ComponentsListItem = ({ item }) => {
+  return (
+    <DataGridRow>
+      <DataGridCell>{item?.node?.name}</DataGridCell>
+      <DataGridCell>{item?.node?.type}</DataGridCell>
+      <DataGridCell>{item?.node?.componentVersions?.totalCount}</DataGridCell>
+    </DataGridRow>
+  )
+}
+
+export default ComponentsListItem

heureka/ui/src/components/components/ComponentsTab.jsx

@@ -0,0 +1,19 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Greenhouse contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react"
+import ComponentsListController from "./ComponentsListController"
+import Filters from "../filters/Filters"
+
+const ComponentsTab = () => {
+  return (
+    <>
+      <Filters />
+      <ComponentsListController />
+    </>
+  )
+}
+
+export default ComponentsTab

heureka/ui/src/components/issues/IssuesList.jsx

@@ -16,10 +16,12 @@ import IssuesListItem from "./IssuesListItem"
 
 const IssuesList = ({ issues, isLoading }) => {
   return (
-    <DataGrid columns={9}>
+    <DataGrid columns={10}>
       <DataGridRow>
         <DataGridHeadCell>Primary Name</DataGridHeadCell>
-        <DataGridHeadCell>Secondary Name</DataGridHeadCell>
+        <DataGridHeadCell>Type</DataGridHeadCell>
+        {/* <DataGridHeadCell>Secondary Name</DataGridHeadCell> */}
+        <DataGridHeadCell>Remediation Date</DataGridHeadCell>
         <DataGridHeadCell>Status</DataGridHeadCell>
         <DataGridHeadCell>Severity</DataGridHeadCell>
         <DataGridHeadCell>Component Name</DataGridHeadCell>
@@ -40,7 +42,7 @@ const IssuesList = ({ issues, isLoading }) => {
             </>
           ) : (
             <DataGridRow>
-              <DataGridCell colSpan={9}>
+              <DataGridCell colSpan={10}>
                 <HintNotFound text="No issues found" />
               </DataGridCell>
             </DataGridRow>

heureka/ui/src/components/issues/IssuesListItem.jsx

@@ -6,19 +6,26 @@
 import React from "react"
 import { DataGridRow, DataGridCell } from "@cloudoperators/juno-ui-components"
 import { listOfCommaSeparatedObjs } from "../shared/Helper"
+import { parseISO, format } from "date-fns"
 
 const IssuesListItem = ({ item }) => {
+  const formatDate = (dateStr) => {
+    const dateObj = parseISO(dateStr)
+    return format(dateObj, "yyyy.MM.dd.HH:mm:ss")
+  }
   // Log the item structure
   console.log("Item structure:", item)
   return (
     <DataGridRow>
       <DataGridCell>{item?.node?.issue?.primaryName}</DataGridCell>
-      <DataGridCell>
+      <DataGridCell>{item?.node?.issue?.type}</DataGridCell>
+      {/* <DataGridCell>
         {listOfCommaSeparatedObjs(
           item?.node?.effectiveIssueVariants,
           "secondaryName"
-        )}
-      </DataGridCell>
+          )}
+          </DataGridCell> */}
+      <DataGridCell>{formatDate(item?.node?.remediationDate)}</DataGridCell>
       <DataGridCell>{item?.node?.status}</DataGridCell>
       <DataGridCell>{item?.node?.severity?.value}</DataGridCell>
       <DataGridCell>

heureka/ui/src/components/tabs/TabContext.jsx

@@ -14,6 +14,7 @@ import { useActions, useActiveTab } from "../StoreProvider"
 
 import ServicesTab from "../services/ServicesTab"
 import IssuesTab from "../issues/IssuesTab"
+import ComponentsTab from "../components/ComponentsTab"
 
 const TAB_CONFIG = [
   {
@@ -28,6 +29,12 @@ const TAB_CONFIG = [
     icon: "autoAwesomeMotion",
     component: IssuesTab,
   },
+  {
+    label: "Components",
+    value: "components",
+    icon: "autoAwesomeMotion",
+    component: ComponentsTab,
+  },
 ]
 
 const TabContext = () => {

heureka/ui/src/hooks/useQueryClientFn.js

@@ -10,6 +10,7 @@ import { request } from "graphql-request"
 import sevicesQuery from "../lib/queries/services"
 import issueMatchesQuery from "../lib/queries/issueMatches"
 import ServiceFilterQuery from "../lib/queries/serviceFilters"
+import componentsQuery from "../lib/queries/components"
 
 // hook to register query defaults that depends on the queryClient and options
 const useQueryClientFn = () => {
@@ -40,6 +41,14 @@ const useQueryClientFn = () => {
       },
     })
 
+    queryClient.setQueryDefaults(["components"], {
+      queryFn: async ({ queryKey }) => {
+        const [_key, options] = queryKey
+        console.log("useQueryClientFn::: queryKey: ", queryKey)
+        return await request(endpoint, componentsQuery(), options)
+      },
+    })
+
     queryClient.setQueryDefaults(["serviceFilters"], {
       queryFn: async ({ queryKey }) => {
         console.log("useQueryClientFn::: queryKey: ", queryKey)