Merge branch 'main' into artie-preview-fail

cloudoperators · Oct 18, 2024 · b80e3a8 · b80e3a8
2 parents 0c95e79 + e1eac39
commit b80e3a8
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 100 deletions.
diff --git a/.changeset/stale-wasps-hammer.md b/.changeset/stale-wasps-hammer.md
@@ -0,0 +1,6 @@
+---
+"@cloudoperators/juno-app-heureka": minor
+"@cloudoperators/juno-app-greenhouse": patch
+---
+
+Improved overall performance of Services and IssueMatches views by optimizing the underlying GraphQL queries
diff --git a/apps/heureka/src/components/issueMatches/IssueMatchesDetails.jsx b/apps/heureka/src/components/issueMatches/IssueMatchesDetails.jsx
@@ -16,7 +16,7 @@ const IssueMatchesDetails = () => {
   const queryClientFnReady = useGlobalsQueryClientFnReady()
 
   const issueElem = useQuery({
-    queryKey: ["IssueMatchesMain", { filter: { id: [showIssueDetail] } }],
+    queryKey: ["IssueMatchesDetails", { filter: { id: [showIssueDetail] } }],
     enabled: !!queryClientFnReady && !!showIssueDetail,
   })
   const issue = useMemo(() => {
@@ -101,7 +101,7 @@ const IssueMatchesDetails = () => {
             <DataGridHeadCell>Component Version</DataGridHeadCell>
 
             <DataGridCell>
-              <LoadElement elem={issue?.componentInstance?.componentVersion.version} />
+              <LoadElement elem={issue?.componentInstance?.componentVersion?.version} />
             </DataGridCell>
           </DataGridRow>
 
@@ -128,7 +128,7 @@ const IssueMatchesDetails = () => {
           </DataGridRow>
 
           <DataGridRow>
-            <DataGridHeadCell>Issue Variant</DataGridHeadCell>
+            <DataGridHeadCell>Issue Type</DataGridHeadCell>
 
             <DataGridCell>{<LoadElement elem={issue?.issue?.type} />}</DataGridCell>
           </DataGridRow>

diff --git a/apps/heureka/src/components/services/ServicesDetails.jsx b/apps/heureka/src/components/services/ServicesDetails.jsx
@@ -32,7 +32,7 @@ const ServicesDetail = () => {
   const { addMessage, resetMessages } = messageActions()
 
   const serviceElem = useQuery({
-    queryKey: ["ServicesMain", { filter: { serviceName: [showServiceDetail] } }],
+    queryKey: ["ServicesDetails", { filter: { serviceName: [showServiceDetail] } }],
     enabled: !!queryClientFnReady && !!showServiceDetail,
   })
 
@@ -239,7 +239,7 @@ const ServicesDetail = () => {
 
         {service?.componentInstances?.edges?.map((componentInstance, i) => (
           <DataGridRow key={i}>
-            <DataGridCell>{componentInstance?.node?.componentVersion?.component?.name}</DataGridCell>
+            <DataGridCell>{componentInstance?.node?.ccrn}</DataGridCell>
             <DataGridCell className="break-all overflow-hidden">
               {componentInstance?.node?.componentVersion?.version}
             </DataGridCell>

diff --git a/apps/heureka/src/components/services/ServicesListItem.jsx b/apps/heureka/src/components/services/ServicesListItem.jsx
@@ -9,12 +9,6 @@ import { listOfCommaSeparatedObjs } from "../shared/Helper"
 import constants from "../shared/constants"
 import { useGlobalsActions, useGlobalsShowPanel, useGlobalsShowServiceDetail } from "../StoreProvider"
 
-const countIssueMatches = (service) => {
-  return service?.componentInstances?.edges?.reduce((acc, edge) => {
-    return acc + (edge?.node?.issueMatches?.edges?.length || 0)
-  }, 0)
-}
-
 const ServicesListItem = ({ item }) => {
   const { setShowServiceDetail, setShowPanel } = useGlobalsActions()
   const showServiceDetail = useGlobalsShowServiceDetail()
@@ -24,8 +18,6 @@ const ServicesListItem = ({ item }) => {
     return item?.node
   }, [item])
 
-  const issueMatchesCount = useMemo(() => countIssueMatches(service), [service])
-
   const handleClick = () => {
     if (showServiceDetail === service?.name && showPanel === constants.PANEL_SERVICE) {
       {
@@ -48,8 +40,8 @@ const ServicesListItem = ({ item }) => {
       <DataGridCell>{service?.name}</DataGridCell>
       <DataGridCell>{listOfCommaSeparatedObjs(service?.owners, "name")}</DataGridCell>
       <DataGridCell>{listOfCommaSeparatedObjs(service?.supportGroups, "name")}</DataGridCell>
-      <DataGridCell>{service?.componentInstances?.edges?.length || 0}</DataGridCell>
-      <DataGridCell>{issueMatchesCount}</DataGridCell>
+      <DataGridCell>{service?.metadata?.componentInstanceCount}</DataGridCell>
+      <DataGridCell>{service?.metadata?.issueMatchCount}</DataGridCell>
     </DataGridRow>
   )
 }

diff --git a/apps/heureka/src/hooks/useQueryClientFn.js b/apps/heureka/src/hooks/useQueryClientFn.js
@@ -7,9 +7,9 @@ import { useEffect } from "react"
 import { useQueryClient } from "@tanstack/react-query"
 import { useGlobalsApiEndpoint, useGlobalsActions } from "../components/StoreProvider"
 import { request } from "graphql-request"
-import { servicesMainQuery, servicesCountQuery } from "../lib/queries/services"
+import { servicesMainQuery, servicesDetailsQuery, servicesCountQuery } from "../lib/queries/services"
 import { componentsMainQuery, componentsCountQuery } from "../lib/queries/components"
-import { issueMatchesMainQuery, issueMatchesCountQuery } from "../lib/queries/issueMatches"
+import { issueMatchesMainQuery, issueMatchesDetailsQuery, issueMatchesCountQuery } from "../lib/queries/issueMatches"
 import serviceFilterValuesQuery from "../lib/queries/serviceFilterValues"
 import issueMatchesFilterValuesQuery from "../lib/queries/issueMatchesFilterValues"
 import addRemoveServiceOwners from "../lib/queries/addRemoveServiceOwners"
@@ -33,6 +33,13 @@ const useQueryClientFn = () => {
         return await request(endpoint, servicesMainQuery(), options)
       },
     })
+    // Services details query
+    queryClient.setQueryDefaults(["ServicesDetails"], {
+      queryFn: async ({ queryKey }) => {
+        const [_key, options] = queryKey
+        return await request(endpoint, servicesDetailsQuery(), options)
+      },
+    })
 
     // Services count query (for totalCount and pageInfo)
     queryClient.setQueryDefaults(["ServicesCount"], {
@@ -58,14 +65,22 @@ const useQueryClientFn = () => {
       },
     })
 
-    // Main IssueMatches query
+    // IssueMatches main query
     queryClient.setQueryDefaults(["IssueMatchesMain"], {
       queryFn: async ({ queryKey }) => {
         const [_key, options] = queryKey
         return await request(endpoint, issueMatchesMainQuery(), options)
       },
     })
 
+    // IssueMatches details query
+    queryClient.setQueryDefaults(["IssueMatchesDetails"], {
+      queryFn: async ({ queryKey }) => {
+        const [_key, options] = queryKey
+        return await request(endpoint, issueMatchesDetailsQuery(), options)
+      },
+    })
+
     // IssueMatches count query (for totalCount and pageInfo)
     queryClient.setQueryDefaults(["IssueMatchesCount"], {
       queryFn: async ({ queryKey }) => {

diff --git a/apps/heureka/src/lib/queries/components.js b/apps/heureka/src/lib/queries/components.js
@@ -24,9 +24,6 @@ export const componentsMainQuery = () => gql`
               node {
                 id
                 version
-                issues {
-                  totalCount
-                }
                 componentInstances {
                   totalCount
                   edges {

diff --git a/apps/heureka/src/lib/queries/issueMatches.js b/apps/heureka/src/lib/queries/issueMatches.js
@@ -11,6 +11,57 @@ import { gql } from "graphql-request"
 
 // Main query for fetching IssueMatches data excluding totalCount and pageInfo
 export const issueMatchesMainQuery = () => gql`
+  query ($filter: IssueMatchFilter, $first: Int, $after: String) {
+    IssueMatches(filter: $filter, first: $first, after: $after) {
+      __typename
+      edges {
+        node {
+          id
+          status
+          targetRemediationDate
+          severity {
+            value
+            score
+          }
+          issue {
+            id
+            primaryName
+            lastModified
+            type
+          }
+          componentInstance {
+            id
+            ccrn
+            count
+            service {
+              name
+              owners {
+                edges {
+                  node {
+                    id
+                    uniqueUserId
+                    name
+                  }
+                  cursor
+                }
+              }
+              supportGroups {
+                edges {
+                  node {
+                    name
+                  }
+                }
+              }
+            }
+          }
+        }
+        cursor
+      }
+    }
+  }
+`
+// The query for fetching IssueMatches details data
+export const issueMatchesDetailsQuery = () => gql`
   query ($filter: IssueMatchFilter, $first: Int, $after: String) {
     IssueMatches(filter: $filter, first: $first, after: $after) {
       __typename
@@ -34,28 +85,12 @@ export const issueMatchesMainQuery = () => gql`
               }
             }
           }
-          evidences {
-            totalCount
-            edges {
-              node {
-                id
-                description
-              }
-              cursor
-            }
-            pageInfo {
-              hasNextPage
-              nextPageAfter
-            }
-          }
-          issueId
           issue {
             id
             primaryName
             lastModified
             type
           }
-          componentInstanceId
           componentInstance {
             id
             ccrn
@@ -69,7 +104,6 @@ export const issueMatchesMainQuery = () => gql`
             service {
               name
               owners {
-                totalCount
                 edges {
                   node {
                     id
@@ -78,10 +112,6 @@ export const issueMatchesMainQuery = () => gql`
                   }
                   cursor
                 }
-                pageInfo {
-                  hasNextPage
-                  nextPageAfter
-                }
               }
               supportGroups {
                 edges {
@@ -92,29 +122,12 @@ export const issueMatchesMainQuery = () => gql`
               }
             }
           }
-          issueMatchChanges {
-            totalCount
-            edges {
-              node {
-                id
-                action
-                issueMatchId
-                activityId
-              }
-              cursor
-            }
-            pageInfo {
-              hasNextPage
-              nextPageAfter
-            }
-          }
         }
         cursor
       }
     }
   }
 `
-
 // Separate query for fetching totalCount and pageInfo only
 export const issueMatchesCountQuery = () => gql`
   query ($filter: IssueMatchFilter, $first: Int, $after: String) {