feat(heureka): Add filtering and searching for issueMatches tab (#327)

* Merge branch 'main' into renovate/npm-dependencies * feat(heureka): add filtering and search functionality for services tab * adjust store actions and update package-lock.json * CleanUp * CleanUp * add fetch filters value queries and change respective files * Automatic application of license header * fix (heureka): Update the package-lock.json (#164) * fix (heureka): Update the package-lock.json to be able to build it on mac * Update the version * feat(heureka): Substitute vulnerabilities with issues tab using the new issueMatch entity (#175) * fix(heureka): Add the left behind issueMatches.js file (#178) * fix(heureka): Fix merge conflicts in package-lock.json * Adjust relevant imports to use juno npm packages * Correct filter query * 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]> * Add default filtering * feat(heureka): add filtering and search functionality for services tab * adjust store actions and update package-lock.json * Correct filter query * Automatic application of license header * feat(heureka): Add msg handling per tab and mem tabs to prevent unnecessary re-rendering (#281) * feat(heureka): Add error handling per tab and mem tabs to prevent unnecessary re-rendering * remove error considition to render Messages * move messages inside each tab and add resetMessages * remove unnecessary resetMessages and correct queries * feat(heureka): Refactor controllers and reduce redundencies (#295) * feat(heureka): Refactor controllers and reduce redundencies * Automatic application of license header --------- Co-authored-by: License Bot <[email protected]> * Remove merge conflicts in utils * Remove not adjusted filter test * Resolve test errors * Refactoring store using slices * complete filtering for services tab * generalize filtering for all tabs * Activate the working filter select for services tab * Automatic application of license header * Adjust panel manager and services and issue details impl based on new store slices * CleanUp console.logs * Display search input only on issues tab for now * Display right icon on filter button * feat(heureka): Add filtering and searching for issueMatches tab * update version * Add a comment for search prop in filter slice * Change formatDate helper func and fix code review comments * Update package-lock.json * Remove filterLabels from package.json * Remove un-used helper func --------- Co-authored-by: License Bot <[email protected]>
cloudoperators · Aug 21, 2024 · 0971b5c · 0971b5c
1 parent d179515
commit 0971b5c
Show file tree

Hide file tree

Showing 18 changed files with 122 additions and 111 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
@@ -1,6 +1,6 @@
 {
   "name": "heureka",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "author": "UI-Team",
   "contributors": [
     "Hoda Noori, Arturo Reuschenbach Pucernau"

diff --git a/heureka/ui/src/App.js b/heureka/ui/src/App.js
@@ -15,16 +15,10 @@ import { MessagesProvider } from "@cloudoperators/juno-messages-provider"
 import AsyncWorker from "./components/AsyncWorker"
 import TabContext from "./components/tabs/TabContext"
 import { ErrorBoundary } from "react-error-boundary"
-import {
-  useGlobalsActions,
-  useFilterActions,
-  StoreProvider,
-} from "./hooks/useAppStore"
+import { useGlobalsActions, StoreProvider } from "./hooks/useAppStore"
 import PanelManager from "./components/shared/PanelManager"
 
 function App(props = {}) {
-  const { setLabels, setPredefinedFilters, setActivePredefinedFilter } =
-    useFilterActions()
   const { setEmbedded, setApiEndpoint } = useGlobalsActions()
   const preErrorClasses = `
   custom-error-pre

diff --git a/heureka/ui/src/components/filters/FilterSelect.jsx b/heureka/ui/src/components/filters/FilterSelect.jsx
@@ -53,7 +53,7 @@ const FilterSelect = ({ entityName, isLoading }) => {
   const handleSearchChange = (value) => {
     // Debounce search term to avoid unnecessary re-renders
     const debouncedSearchTerm = setTimeout(() => {
-      setSearchTerm(value.target.value)
+      setSearchTerm(entityName, value.target.value)
     }, 500)
     return () => clearTimeout(debouncedSearchTerm)
   }

diff --git a/...i/src/components/issues/IssuesDetails.jsx → ...ents/issueMatches/IssueMatchesDetails.jsx b/...i/src/components/issues/IssuesDetails.jsx → ...ents/issueMatches/IssueMatchesDetails.jsx
@@ -7,7 +7,6 @@ import React, { useMemo } from "react"
 import {
   Pill,
   Stack,
-  ContentHeading,
   DataGrid,
   DataGridCell,
   DataGridHeadCell,
@@ -18,16 +17,20 @@ import {
   useGlobalsShowIssueDetail,
 } from "../../hooks/useAppStore"
 import { useQuery } from "@tanstack/react-query"
-import { listOfCommaSeparatedObjs, severityString } from "../shared/Helper"
+import {
+  listOfCommaSeparatedObjs,
+  severityString,
+  formatDate,
+} from "../shared/Helper"
 import LoadElement from "../shared/LoadElement"
 
-const IssuesDetails = () => {
+const IssueMatchesDetails = () => {
   const showIssueDetail = useGlobalsShowIssueDetail()
 
   const queryClientFnReady = useGlobalsQueryClientFnReady()
 
   const issueElem = useQuery({
-    queryKey: ["Issues", { filter: { id: [showIssueDetail] } }],
+    queryKey: ["IssueMatches", { filter: { id: [showIssueDetail] } }],
     enabled: !!queryClientFnReady,
   })
   const issue = useMemo(() => {
@@ -41,40 +44,77 @@ const IssuesDetails = () => {
       <Stack direction="vertical" gap="4">
         <DataGrid columns={2}>
           <DataGridRow>
-            <DataGridHeadCell>Component Name</DataGridHeadCell>
+            <DataGridHeadCell>Primary Name</DataGridHeadCell>
+
+            <DataGridCell>
+              <LoadElement elem={issue?.issue?.primaryName} />
+            </DataGridCell>
+          </DataGridRow>
+          <DataGridRow>
+            <DataGridHeadCell>Target Remediation Date</DataGridHeadCell>
 
             <DataGridCell>
               <LoadElement
-                elem={
-                  issue?.componentInstance?.componentVersion?.component?.name
-                }
+                elem={formatDate(issue?.node?.targetRemediationDate)}
               />
             </DataGridCell>
           </DataGridRow>
+          <DataGridRow>
+            <DataGridHeadCell>Status</DataGridHeadCell>
+
+            <DataGridCell>
+              <LoadElement elem={issue?.status} />
+            </DataGridCell>
+          </DataGridRow>
 
           <DataGridRow>
-            <DataGridHeadCell>CVE</DataGridHeadCell>
+            <DataGridHeadCell>Severity</DataGridHeadCell>
 
             <DataGridCell>
-              <LoadElement elem={issue?.issue?.primaryName} />
+              <LoadElement elem={severityString(issue?.severity)} />
             </DataGridCell>
           </DataGridRow>
 
           <DataGridRow>
-            <DataGridHeadCell>Component Version</DataGridHeadCell>
+            <DataGridHeadCell>Service Name</DataGridHeadCell>
+
+            <DataGridCell>
+              <LoadElement elem={issue?.componentInstance?.service?.name} />
+            </DataGridCell>
+          </DataGridRow>
+
+          <DataGridRow>
+            <DataGridHeadCell>Support Group Name</DataGridHeadCell>
 
             <DataGridCell>
               <LoadElement
-                elem={issue?.componentInstance?.componentVersion.version}
+                elem={listOfCommaSeparatedObjs(
+                  issue?.componentInstance?.service?.supportGroups,
+                  "name"
+                )}
               />
             </DataGridCell>
           </DataGridRow>
 
           <DataGridRow>
-            <DataGridHeadCell>Services</DataGridHeadCell>
+            <DataGridHeadCell>Component Name</DataGridHeadCell>
 
             <DataGridCell>
-              <LoadElement elem={issue?.componentInstance?.service?.name} />
+              <LoadElement
+                elem={
+                  issue?.componentInstance?.componentVersion?.component?.name
+                }
+              />
+            </DataGridCell>
+          </DataGridRow>
+
+          <DataGridRow>
+            <DataGridHeadCell>Component Version</DataGridHeadCell>
+
+            <DataGridCell>
+              <LoadElement
+                elem={issue?.componentInstance?.componentVersion.version}
+              />
             </DataGridCell>
           </DataGridRow>
 
@@ -88,10 +128,10 @@ const IssuesDetails = () => {
                     (owner, i) => (
                       <Pill
                         key={i}
-                        pillKey={owner.node.uniqueUserId}
-                        pillKeyLabel={owner.node.uniqueUserId}
-                        pillValue={owner.node.name}
-                        pillValueLabel={owner.node.name}
+                        pillKey={owner?.node?.uniqueUserId}
+                        pillKeyLabel={owner?.node?.uniqueUserId}
+                        pillValue={owner?.node?.name}
+                        pillValueLabel={owner?.node?.name}
                       />
                     )
                   )}
@@ -102,42 +142,17 @@ const IssuesDetails = () => {
             </DataGridCell>
           </DataGridRow>
 
-          <DataGridRow>
-            <DataGridHeadCell>Support Group</DataGridHeadCell>
-
-            <DataGridCell>
-              <LoadElement
-                elem={
-                  <ul>
-                    {listOfCommaSeparatedObjs(
-                      issue?.componentInstance?.service?.supportGroups,
-                      "name"
-                    )}
-                  </ul>
-                }
-              />
-            </DataGridCell>
-          </DataGridRow>
-
           <DataGridRow>
             <DataGridHeadCell>Issue Variant</DataGridHeadCell>
 
             <DataGridCell>
               {<LoadElement elem={issue?.issue?.type} />}
             </DataGridCell>
           </DataGridRow>
-
-          <DataGridRow>
-            <DataGridHeadCell>Issue Severity</DataGridHeadCell>
-
-            <DataGridCell>
-              {<LoadElement elem={severityString(issue?.severity)} />}
-            </DataGridCell>
-          </DataGridRow>
         </DataGrid>
       </Stack>
     </>
   )
 }
 
-export default IssuesDetails
+export default IssueMatchesDetails
diff --git a/...a/ui/src/components/issues/IssuesList.jsx → ...ponents/issueMatches/IssueMatchesList.jsx b/...a/ui/src/components/issues/IssuesList.jsx → ...ponents/issueMatches/IssueMatchesList.jsx
@@ -12,44 +12,43 @@ import {
 } from "@cloudoperators/juno-ui-components"
 import HintNotFound from "../shared/HintNotFound"
 import HintLoading from "../shared/HintLoading"
-import IssuesListItem from "./IssuesListItem"
+import IssueMatchesListItem from "./IssueMatchesListItem"
 
-const IssuesList = ({ items, isLoading }) => {
+const IssueMatchesList = ({ items, isLoading }) => {
   return (
     <>
       {/* clickableTable Table allow changes the background by css when hovering or active*/}
-      <DataGrid columns={10} className="clickableTable">
+      <DataGrid columns={6} className="clickableTable">
         <DataGridRow>
           <DataGridHeadCell>Primary Name</DataGridHeadCell>
-          <DataGridHeadCell>Type</DataGridHeadCell>
           {/* <DataGridHeadCell>Secondary Name</DataGridHeadCell> */}
           <DataGridHeadCell>Target Remediation Date</DataGridHeadCell>
           <DataGridHeadCell>Status</DataGridHeadCell>
           <DataGridHeadCell>Severity</DataGridHeadCell>
-          <DataGridHeadCell>Component Name</DataGridHeadCell>
-          <DataGridHeadCell>Component Version</DataGridHeadCell>
           <DataGridHeadCell>Service Name</DataGridHeadCell>
           <DataGridHeadCell>Support Group Name</DataGridHeadCell>
-          <DataGridHeadCell>Instance Count</DataGridHeadCell>
         </DataGridRow>
         {isLoading && !items ? (
           <DataGridRow>
-            <DataGridCell colSpan={10}>
-              <HintLoading className="my-4" text="Loading issues..." />
+            <DataGridCell colSpan={6}>
+              <HintLoading className="my-4" text="Loading issue matches..." />
             </DataGridCell>
           </DataGridRow>
         ) : (
           <>
             {items?.length > 0 ? (
               <>
                 {items.map((item, index) => (
-                  <IssuesListItem key={index} item={item}></IssuesListItem>
+                  <IssueMatchesListItem
+                    key={index}
+                    item={item}
+                  ></IssueMatchesListItem>
                 ))}
               </>
             ) : (
               <DataGridRow>
-                <DataGridCell colSpan={10}>
-                  <HintNotFound text="No issues found" />
+                <DataGridCell colSpan={6}>
+                  <HintNotFound text="No issue matches found" />
                 </DataGridCell>
               </DataGridRow>
             )}
@@ -60,4 +59,4 @@ const IssuesList = ({ items, isLoading }) => {
   )
 }
 
-export default IssuesList
+export default IssueMatchesList
diff --git a/...omponents/issues/IssuesListController.jsx → ...sueMatches/IssueMatchesListController.jsx b/...omponents/issues/IssuesListController.jsx → ...sueMatches/IssueMatchesListController.jsx
@@ -4,17 +4,17 @@
  */
 
 import React from "react"
-import IssuesList from "./IssuesList"
+import IssueMatchesList from "./IssueMatchesList"
 import ListController from "../shared/ListController"
 
-const IssuesListController = () => {
+const IssueMatchesListController = () => {
   return (
     <ListController
-      queryKey="Issues"
+      queryKey="IssueMatches"
       entityName="IssueMatches"
-      ListComponent={IssuesList}
+      ListComponent={IssueMatchesList}
     />
   )
 }
 
-export default IssuesListController
+export default IssueMatchesListController
diff --git a/.../src/components/issues/IssuesListItem.jsx → ...nts/issueMatches/IssueMatchesListItem.jsx b/.../src/components/issues/IssuesListItem.jsx → ...nts/issueMatches/IssueMatchesListItem.jsx
@@ -5,25 +5,19 @@
 
 import React from "react"
 import { DataGridRow, DataGridCell } from "@cloudoperators/juno-ui-components"
-import { listOfCommaSeparatedObjs } from "../shared/Helper"
-import { DateTime } from "luxon"
+import { listOfCommaSeparatedObjs, formatDate } from "../shared/Helper"
 import constants from "../shared/constants"
 import {
   useGlobalsActions,
   useGlobalsShowPanel,
   useGlobalsShowIssueDetail,
 } from "../../hooks/useAppStore"
 
-const IssuesListItem = ({ item }) => {
+const IssueMatchesListItem = ({ item }) => {
   const { setShowPanel, setShowIssueDetail } = useGlobalsActions()
   const showPanel = useGlobalsShowPanel()
   const showIssueDetail = useGlobalsShowIssueDetail()
 
-  const formatDate = (dateStr) => {
-    const dateObj = DateTime.fromISO(dateStr)
-    return dateObj.toFormat("yyyy.MM.dd.HH:mm:ss")
-  }
-
   const handleClick = () => {
     if (
       showPanel === constants.PANEL_ISSUE &&
@@ -50,7 +44,6 @@ const IssuesListItem = ({ item }) => {
       onClick={() => handleClick()}
     >
       <DataGridCell>{item?.node?.issue?.primaryName}</DataGridCell>
-      <DataGridCell>{item?.node?.issue?.type}</DataGridCell>
       {/* <DataGridCell>
         {listOfCommaSeparatedObjs(
           item?.node?.effectiveIssueVariants,
@@ -62,12 +55,6 @@ const IssuesListItem = ({ item }) => {
       </DataGridCell>
       <DataGridCell>{item?.node?.status}</DataGridCell>
       <DataGridCell>{item?.node?.severity?.value}</DataGridCell>
-      <DataGridCell>
-        {item?.node?.componentInstance?.componentVersion?.component?.name}
-      </DataGridCell>
-      <DataGridCell>
-        {item?.node?.componentInstance?.componentVersion?.version}
-      </DataGridCell>
       <DataGridCell>
         {item?.node?.componentInstance?.service?.name}
       </DataGridCell>
@@ -77,9 +64,8 @@ const IssuesListItem = ({ item }) => {
           "name"
         )}
       </DataGridCell>
-      <DataGridCell>{item?.node?.componentInstance?.count}</DataGridCell>
     </DataGridRow>
   )
 }
 
-export default IssuesListItem
+export default IssueMatchesListItem
diff --git a/...ka/ui/src/components/issues/IssuesTab.jsx → ...mponents/issueMatches/IssueMatchesTab.jsx b/...ka/ui/src/components/issues/IssuesTab.jsx → ...mponents/issueMatches/IssueMatchesTab.jsx
@@ -4,7 +4,7 @@
  */
 
 import React from "react"
-import IssuesListController from "./IssuesListController"
+import IssueMatchesListController from "./IssueMatchesListController"
 import Filters from "../filters/Filters"
 import {
   Messages,
@@ -16,8 +16,8 @@ const IssuesTab = () => {
     <>
       <MessagesProvider>
         <Messages />
-        {/* <Filters queryKey="IssueMatchFilterValues" entityName="issues" /> */}
-        <IssuesListController />
+        <Filters queryKey="IssueMatchFilterValues" entityName="IssueMatches" />
+        <IssueMatchesListController />
       </MessagesProvider>
     </>
   )

diff --git a/...rc/components/services/ServicesDetail.jsx → ...c/components/services/ServicesDetails.jsx b/...rc/components/services/ServicesDetail.jsx → ...c/components/services/ServicesDetails.jsx