fix(ui): commits changes from merged main

cloudoperators · Nov 14, 2024 · 562c708 · 562c708
2 parents 3c3f933 + c9190d0
commit 562c708
Show file tree

Hide file tree

Showing 135 changed files with 3,670 additions and 1,759 deletions.
diff --git a/.changeset/silent-maps-attend.md → .changeset/neat-peaches-roll.md b/.changeset/silent-maps-attend.md → .changeset/neat-peaches-roll.md
@@ -2,4 +2,4 @@
 "@cloudoperators/juno-ui-components": minor
 ---
 
-Migrate AppShellProvider and CodeBlock to TypeScript
+Migrate the ContextMenu component to TypeScript
diff --git a/.changeset/nice-moons-watch.md b/.changeset/nice-moons-watch.md
@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-ui-components": minor
+---
+
+Migrate NativeSelect, NativeSelectionOption and NativeSelectOptionGroup components to TypeScript
diff --git a/.changeset/shaggy-pots-repeat.md b/.changeset/shaggy-pots-repeat.md
@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-ui-components": minor
+---
+
+Migrate Form, FormRow and FormSection components to TypeScript
diff --git a/apps/greenhouse/CHANGELOG.md b/apps/greenhouse/CHANGELOG.md
@@ -1,5 +1,18 @@
 # @cloudoperators/juno-app-greenhouse
 
+## 0.3.4
+
+### Patch Changes
+
+- eea5de6: The pagination is added to the list of component instances for a selected service on the service details page.
+- Updated dependencies [63a951c]
+- Updated dependencies [5a4e3d1]
+- Updated dependencies [7cb142d]
+- Updated dependencies [eea5de6]
+- Updated dependencies [a278544]
+  - @cloudoperators/juno-ui-components@2.29.0
+  - @cloudoperators/juno-app-heureka@2.10.0
+
 ## 0.3.3
 
 ### Patch Changes

diff --git a/apps/greenhouse/package.json b/apps/greenhouse/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cloudoperators/juno-app-greenhouse",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "orgAdminVersion": "latest",
   "author": "UI-Team",
   "contributors": [

diff --git a/apps/heureka/CHANGELOG.md b/apps/heureka/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @cloudoperators/juno-app-heureka
 
+## 2.10.0
+
+### Minor Changes
+
+- eea5de6: The pagination is added to the list of component instances for a selected service on the service details page.
+
+### Patch Changes
+
+- Updated dependencies [63a951c]
+- Updated dependencies [5a4e3d1]
+- Updated dependencies [7cb142d]
+- Updated dependencies [a278544]
+  - @cloudoperators/juno-ui-components@2.29.0
+
 ## 2.9.2
 
 ### Patch Changes

diff --git a/apps/heureka/package.json b/apps/heureka/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cloudoperators/juno-app-heureka",
-  "version": "2.9.2",
+  "version": "2.10.0",
   "author": "UI-Team",
   "contributors": [
     "Hoda Noori, Arturo Reuschenbach Pucernau",

diff --git a/apps/heureka/src/components/components/ComponentsListItem.jsx b/apps/heureka/src/components/components/ComponentsListItem.jsx
@@ -14,7 +14,7 @@ const sumTotalInstances = (versions) => {
 const ComponentsListItem = ({ item }) => {
   return (
     <DataGridRow>
-      <DataGridCell>{item?.node?.name}</DataGridCell>
+      <DataGridCell>{item?.node?.ccrn}</DataGridCell>
       <DataGridCell>{item?.node?.type}</DataGridCell>
       <DataGridCell>{item?.node?.componentVersions?.totalCount}</DataGridCell>
       <DataGridCell>{sumTotalInstances(item?.node?.componentVersions?.edges)}</DataGridCell>

diff --git a/apps/heureka/src/components/issueMatches/IssueMatchesDetails.jsx b/apps/heureka/src/components/issueMatches/IssueMatchesDetails.jsx
@@ -77,23 +77,23 @@ const IssueMatchesDetails = () => {
             <DataGridHeadCell>Service Name</DataGridHeadCell>
 
             <DataGridCell>
-              <LoadElement elem={issue?.componentInstance?.service?.name} />
+              <LoadElement elem={issue?.componentInstance?.service?.ccrn} />
             </DataGridCell>
           </DataGridRow>
 
           <DataGridRow>
             <DataGridHeadCell>Support Group Name</DataGridHeadCell>
 
             <DataGridCell>
-              <LoadElement elem={listOfCommaSeparatedObjs(issue?.componentInstance?.service?.supportGroups, "name")} />
+              <LoadElement elem={listOfCommaSeparatedObjs(issue?.componentInstance?.service?.supportGroups, "ccrn")} />
             </DataGridCell>
           </DataGridRow>
 
           <DataGridRow>
             <DataGridHeadCell>Component Name</DataGridHeadCell>
 
             <DataGridCell>
-              <LoadElement elem={issue?.componentInstance?.componentVersion?.component?.name} />
+              <LoadElement elem={issue?.componentInstance?.componentVersion?.component?.ccrn} />
             </DataGridCell>
           </DataGridRow>
 

diff --git a/apps/heureka/src/components/issueMatches/IssueMatchesListItem.jsx b/apps/heureka/src/components/issueMatches/IssueMatchesListItem.jsx
@@ -47,10 +47,10 @@ const IssueMatchesListItem = ({ item }) => {
         <div className={cellSeverityClasses(severity)}>{severity}</div>
       </DataGridCell>
       <DataGridCell>{item?.node?.issue?.primaryName}</DataGridCell>
-      <DataGridCell>{item?.node?.componentInstance?.service?.name}</DataGridCell>
+      <DataGridCell>{item?.node?.componentInstance?.service?.ccrn}</DataGridCell>
       <DataGridCell>{extractedCcrn}</DataGridCell>
       <DataGridCell>
-        {listOfCommaSeparatedObjs(item?.node?.componentInstance?.service?.supportGroups, "name")}
+        {listOfCommaSeparatedObjs(item?.node?.componentInstance?.service?.supportGroups, "ccrn")}
       </DataGridCell>
       <DataGridCell>{item?.node?.status}</DataGridCell>
       <DataGridCell>{formatDate(item?.node?.targetRemediationDate)}</DataGridCell>

diff --git a/apps/heureka/src/components/services/ComponentInstancesList.jsx b/apps/heureka/src/components/services/ComponentInstancesList.jsx
@@ -0,0 +1,86 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Greenhouse contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react"
+import { useQuery } from "@tanstack/react-query"
+import {
+  ContentHeading,
+  Container,
+  DataGrid,
+  DataGridRow,
+  DataGridCell,
+  DataGridHeadCell,
+} from "@cloudoperators/juno-ui-components"
+import { useGlobalsQueryClientFnReady, useGlobalsQueryOptions, useGlobalsActions } from "../StoreProvider"
+import LoadElement from "../shared/LoadElement"
+import { severityString, highestSeverity } from "../shared/Helper"
+import PaginationComponent from "../shared/PaginationComponent"
+import HintNotFound from "../shared/HintNotFound"
+
+const ComponentInstancesList = ({ serviceCcrn }) => {
+  const queryOptions = useGlobalsQueryOptions("ComponentInstancesOfService")
+  const { setQueryOptions } = useGlobalsActions()
+  const queryClientFnReady = useGlobalsQueryClientFnReady()
+
+  const { data, isLoading } = useQuery({
+    queryKey: [
+      "ComponentInstancesOfService",
+      {
+        ...queryOptions,
+        filter: { serviceCcrn: [serviceCcrn] },
+      },
+    ],
+    enabled: !!queryClientFnReady && !!serviceCcrn,
+  })
+
+  const items = data?.ComponentInstances?.edges || []
+
+  return (
+    <>
+      <ContentHeading className="mt-8 mb-2" heading="Component Instances" />
+      <DataGrid columns={4}>
+        <DataGridRow>
+          <DataGridHeadCell>Component</DataGridHeadCell>
+          <DataGridHeadCell>Version</DataGridHeadCell>
+          <DataGridHeadCell>Total Number of Issues</DataGridHeadCell>
+          <DataGridHeadCell>Highest Severity</DataGridHeadCell>
+        </DataGridRow>
+        {isLoading ? (
+          <DataGridRow>
+            <DataGridCell colSpan={4}>
+              <Container py>
+                <LoadElement />
+              </Container>
+            </DataGridCell>
+          </DataGridRow>
+        ) : items.length === 0 ? (
+          <HintNotFound text="No component instances available." />
+        ) : (
+          items.map((componentInstance, i) => (
+            <DataGridRow key={i}>
+              <DataGridCell>{componentInstance?.node?.ccrn}</DataGridCell>
+              <DataGridCell className="break-all overflow-hidden">
+                {componentInstance?.node?.componentVersion?.version}
+              </DataGridCell>
+              <DataGridCell>{componentInstance?.node?.issueMatches?.totalCount}</DataGridCell>
+              <DataGridCell>
+                {severityString(highestSeverity(componentInstance?.node?.issueMatches?.edges))}
+              </DataGridCell>
+            </DataGridRow>
+          ))
+        )}
+      </DataGrid>
+      <PaginationComponent
+        queryKey="ComponentInstancesOfService"
+        queryOptions={queryOptions}
+        entityName="ComponentInstances"
+        setQueryOptions={setQueryOptions}
+        countData={data}
+      />
+    </>
+  )
+}
+
+export default ComponentInstancesList
diff --git a/apps/heureka/src/components/services/ServicesDetails.jsx b/apps/heureka/src/components/services/ServicesDetails.jsx
@@ -24,15 +24,16 @@ import { useQuery, useMutation } from "@tanstack/react-query"
 import LoadElement from "../shared/LoadElement"
 import { useActions as messageActions } from "@cloudoperators/juno-messages-provider"
 import { parseError } from "../../helpers"
-import { listOfCommaSeparatedObjs, severityString, highestSeverity } from "../shared/Helper"
+import { listOfCommaSeparatedObjs } from "../shared/Helper"
+import ComponentInstancesList from "./ComponentInstancesList"
 
 const ServicesDetail = () => {
   const showServiceDetail = useGlobalsShowServiceDetail()
   const queryClientFnReady = useGlobalsQueryClientFnReady()
   const { addMessage, resetMessages } = messageActions()
 
   const serviceElem = useQuery({
-    queryKey: ["ServicesDetails", { filter: { serviceName: [showServiceDetail] } }],
+    queryKey: ["ServicesDetails", { filter: { serviceCcrn: [showServiceDetail] } }],
     enabled: !!queryClientFnReady && !!showServiceDetail,
   })
 
@@ -216,41 +217,13 @@ const ServicesDetail = () => {
         <DataGridRow>
           <DataGridHeadCell nowrap={true}>Support Group</DataGridHeadCell>
           <DataGridCell>
-            <LoadElement elem={<ul>{listOfCommaSeparatedObjs(service?.supportGroups, "name")}</ul>} />
+            <LoadElement elem={<ul>{listOfCommaSeparatedObjs(service?.supportGroups, "ccrn")}</ul>} />
           </DataGridCell>
         </DataGridRow>
       </DataGrid>
 
       <Container py px={false}>
-        <ContentHeading className="mt-8 mb-2" heading="Component Instances" />
-        <DataGrid columns={4}>
-          <DataGridRow>
-            <DataGridHeadCell>Component</DataGridHeadCell>
-            <DataGridHeadCell>Version</DataGridHeadCell>
-            <DataGridHeadCell>Total Number of Issues</DataGridHeadCell>
-            <DataGridHeadCell>Highest Severity</DataGridHeadCell>
-          </DataGridRow>
-          {!service?.componentInstances?.edges && (
-            <DataGridRow colSpan={4}>
-              <Container py>
-                <LoadElement />
-              </Container>
-            </DataGridRow>
-          )}
-
-          {service?.componentInstances?.edges?.map((componentInstance, i) => (
-            <DataGridRow key={i}>
-              <DataGridCell>{componentInstance?.node?.ccrn}</DataGridCell>
-              <DataGridCell className="break-all overflow-hidden">
-                {componentInstance?.node?.componentVersion?.version}
-              </DataGridCell>
-              <DataGridCell>{componentInstance?.node?.issueMatches?.totalCount}</DataGridCell>
-              <DataGridCell>
-                {severityString(highestSeverity(componentInstance?.node?.issueMatches?.edges))}
-              </DataGridCell>
-            </DataGridRow>
-          ))}
-        </DataGrid>
+        <ComponentInstancesList serviceCcrn={showServiceDetail} />
       </Container>
     </>
   )

diff --git a/apps/heureka/src/components/services/ServicesListItem.jsx b/apps/heureka/src/components/services/ServicesListItem.jsx
@@ -19,27 +19,27 @@ const ServicesListItem = ({ item }) => {
   }, [item])
 
   const handleClick = () => {
-    if (showServiceDetail === service?.name && showPanel === constants.PANEL_SERVICE) {
+    if (showServiceDetail === service?.ccrn && showPanel === constants.PANEL_SERVICE) {
       {
         setShowServiceDetail(null)
         setShowPanel(constants.PANEL_NONE)
       }
     } else {
-      setShowServiceDetail(service?.name)
+      setShowServiceDetail(service?.ccrn)
       setShowPanel(constants.PANEL_SERVICE)
     }
   }
 
   return (
     <DataGridRow
       className={`cursor-pointer ${
-        showServiceDetail === service?.name && showPanel === constants.PANEL_SERVICE ? "active" : ""
+        showServiceDetail === service?.ccrn && showPanel === constants.PANEL_SERVICE ? "active" : ""
       }`}
       onClick={() => handleClick()}
     >
-      <DataGridCell>{service?.name}</DataGridCell>
+      <DataGridCell>{service?.ccrn}</DataGridCell>
       <DataGridCell>{listOfCommaSeparatedObjs(service?.owners, "name")}</DataGridCell>
-      <DataGridCell>{listOfCommaSeparatedObjs(service?.supportGroups, "name")}</DataGridCell>
+      <DataGridCell>{listOfCommaSeparatedObjs(service?.supportGroups, "ccrn")}</DataGridCell>
       <DataGridCell>{service?.metadata?.componentInstanceCount}</DataGridCell>
       <DataGridCell>{service?.metadata?.issueMatchCount}</DataGridCell>
     </DataGridRow>

diff --git a/apps/heureka/src/components/shared/HintNotFound.jsx b/apps/heureka/src/components/shared/HintNotFound.jsx
@@ -4,13 +4,13 @@
  */
 
 import React from "react"
-import { Stack } from "@cloudoperators/juno-ui-components"
+import { Container } from "@cloudoperators/juno-ui-components"
 
 const HintNotFound = ({ text }) => {
   return (
-    <Stack alignment="center" distribution="center" direction="vertical" className="h-full">
+    <Container py px="false">
       <span>{text}</span>
-    </Stack>
+    </Container>
   )
 }