feat(heureka) : Add components view (#263)

* feat(heureka) : add components view * Automatic application of license header * Install date-fns * feat(heureka): Add the total number of component versions and fix some errors * feat)heureka): Add pagination info to the components query * Using container and stack for styling and some cleanup * add componentInstances to componentVersion in the component query * Change the setting to put pagination on the right side of the page --------- Co-authored-by: License Bot <[email protected]>
cloudoperators · Aug 11, 2024 · f652e1b · f652e1b
1 parent ba74c1d
commit f652e1b
Show file tree

Hide file tree

Showing 14 changed files with 391 additions and 32 deletions.
diff --git a/heureka/ui/package-lock.json b/heureka/ui/package-lock.json
diff --git a/heureka/ui/package.json b/heureka/ui/package.json
@@ -31,9 +31,13 @@
     "immer": "^10.0.0",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
+<<<<<<< HEAD
     "juno-ui-components": "https://assets.juno.global.cloud.sap/libs/[email protected]/package.tgz",
     "luxon": "^3.0.0",
     "messages-provider": "https://assets.juno.global.cloud.sap/libs/[email protected]/package.tgz",
+=======
+    "luxon": "^3.4.4",
+>>>>>>> 01cf4521 (feat(heureka) : Add components view (#263))
     "postcss": "^8.4.21",
     "postcss-url": "^10.1.3",
     "prop-types": "^15.8.1",

diff --git a/heureka/ui/src/components/components/ComponentsList.jsx b/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
diff --git a/heureka/ui/src/components/components/ComponentsListController.jsx b/heureka/ui/src/components/components/ComponentsListController.jsx
@@ -0,0 +1,96 @@
+/*
+ * 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,
+  Container,
+  Stack,
+} 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 (
+    <>
+      <Container py>
+        <ComponentsList components={components} isLoading={isLoading} />
+      </Container>
+      <Stack className="flex justify-end">
+        <Pagination
+          currentPage={currentPage}
+          isFirstPage={currentPage === 1}
+          isLastPage={currentPage === totalPages}
+          onPressNext={onPressNext}
+          onPressPrevious={onPressPrevious}
+          onKeyPress={onKeyPress}
+          onSelectChange={onPaginationChanged}
+          pages={totalPages}
+          variant="input"
+        />
+      </Stack>
+    </>
+  )
+}
+
+export default ComponentsListController
diff --git a/heureka/ui/src/components/components/ComponentsListItem.jsx b/heureka/ui/src/components/components/ComponentsListItem.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 { DataGridRow, DataGridCell } from "@cloudoperators/juno-ui-components"
+
+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
diff --git a/heureka/ui/src/components/components/ComponentsTab.jsx b/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
diff --git a/heureka/ui/src/components/issues/IssuesList.jsx b/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>

diff --git a/heureka/ui/src/components/issues/IssuesListController.jsx b/heureka/ui/src/components/issues/IssuesListController.jsx
@@ -11,7 +11,11 @@ import {
   useActions,
 } from "../StoreProvider"
 import IssuesList from "./IssuesList"
-import { Pagination } from "juno-ui-components"
+import {
+  Container,
+  Pagination,
+  Stack,
+} from "@cloudoperators/juno-ui-components"
 
 const IssuesListController = () => {
   const queryClientFnReady = useQueryClientFnReady()
@@ -69,18 +73,22 @@ const IssuesListController = () => {
 
   return (
     <>
-      <IssuesList issues={issues} isLoading={isLoading} />
-      <Pagination
-        currentPage={currentPage}
-        isFirstPage={currentPage === 1}
-        isLastPage={currentPage === totalPages}
-        onPressNext={onPressNext}
-        onPressPrevious={onPressPrevious}
-        onKeyPress={onKeyPress}
-        onSelectChange={onPaginationChanged}
-        pages={totalPages}
-        variant="input"
-      />
+      <Container py>
+        <IssuesList issues={issues} isLoading={isLoading} />
+      </Container>
+      <Stack className="flex justify-end">
+        <Pagination
+          currentPage={currentPage}
+          isFirstPage={currentPage === 1}
+          isLastPage={currentPage === totalPages}
+          onPressNext={onPressNext}
+          onPressPrevious={onPressPrevious}
+          onKeyPress={onKeyPress}
+          onSelectChange={onPaginationChanged}
+          pages={totalPages}
+          variant="input"
+        />
+      </Stack>
     </>
   )
 }

diff --git a/heureka/ui/src/components/issues/IssuesListItem.jsx b/heureka/ui/src/components/issues/IssuesListItem.jsx
@@ -6,17 +6,24 @@
 import React from "react"
 import { DataGridRow, DataGridCell } from "juno-ui-components"
 import { listOfCommaSeparatedObjs } from "../shared/Helper"
+import { DateTime } from "luxon"
 
 const IssuesListItem = ({ item }) => {
+  const formatDate = (dateStr) => {
+    const dateObj = DateTime.fromISO(dateStr)
+    return dateObj.toFormat("yyyy.MM.dd.HH:mm:ss")
+  }
   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>