adding executions and deploy items

Author: Hubert-Szczepanski-SAP

src/components/ControlPlane/Landscapers.tsx

@@ -8,12 +8,12 @@ import {
   MultiComboBoxItem,
 } from '@ui5/webcomponents-react';
 import useResource from '../../lib/api/useApiResource';
-import '@ui5/webcomponents-icons/dist/sys-enter-2';
-import '@ui5/webcomponents-icons/dist/sys-cancel-2';
 import { ListNamespaces } from '../../lib/api/types/k8s/listNamespaces';
 import { useEffect, useState, useContext } from 'react';
 import { resourcesInterval } from '../../lib/shared/constants';
 import { InstalationsRequest } from '../../lib/api/types/landscaper/listInstallations';
+import { ExecutionsRequest } from '../../lib/api/types/landscaper/listExecutions';
+import { DeployItemsRequest } from '../../lib/api/types/landscaper/listDeployItems';
 import { ApiConfigContext } from '../../components/Shared/k8s';
 import { fetchApiServerJson } from '../../lib/api/fetch';
 
@@ -27,6 +27,8 @@ export function Landscapers() {
 
   const [selectedNamespaces, setSelectedNamespaces] = useState<string[]>([]);
   const [installations, setInstallations] = useState<any[]>([]);
+  const [executions, setExecutions] = useState<any[]>([]);
+  const [deployItems, setDeployItems] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
 
   const handleSelectionChange = (e: CustomEvent) => {
@@ -36,34 +38,67 @@ export function Landscapers() {
   };
 
   useEffect(() => {
-    const fetchInstallations = async () => {
+    const fetchAllResources = async () => {
       if (selectedNamespaces.length === 0) {
         setInstallations([]);
+        setExecutions([]);
+        setDeployItems([]);
         return;
       }
 
       setLoading(true);
 
       try {
-        const paths = selectedNamespaces
+        // === INSTALLATIONS ===
+        const installationPaths = selectedNamespaces
           .map((ns) => InstalationsRequest(ns).path)
           .filter((p): p is string => p !== null && p !== undefined);
 
-        const allResponses = await Promise.all(
-          paths.map((path) => fetchApiServerJson(path, apiConfig)),
+        const installationResponses = await Promise.all(
+          installationPaths.map((path) => fetchApiServerJson(path, apiConfig)),
         );
 
-        const allItems = allResponses.flatMap((res) => res.items || []);
-        setInstallations(allItems);
+        const installationsData = installationResponses.flatMap(
+          (res) => res.items || [],
+        );
+        setInstallations(installationsData);
+
+        // === EXECUTIONS ===
+        const executionPaths = selectedNamespaces
+          .map((ns) => ExecutionsRequest(ns).path)
+          .filter((p): p is string => p !== null && p !== undefined);
+
+        const executionResponses = await Promise.all(
+          executionPaths.map((path) => fetchApiServerJson(path, apiConfig)),
+        );
+
+        const executionsData = executionResponses.flatMap(
+          (res) => res.items || [],
+        );
+        setExecutions(executionsData);
+
+        // === DEPLOY ITEMS ===
+        const deployPaths = selectedNamespaces
+          .map((ns) => DeployItemsRequest(ns).path)
+          .filter((p): p is string => p !== null && p !== undefined);
+
+        const deployResponses = await Promise.all(
+          deployPaths.map((path) => fetchApiServerJson(path, apiConfig)),
+        );
+
+        const deployItemsData = deployResponses.flatMap((res) => res.items || []);
+        setDeployItems(deployItemsData);
       } catch (error) {
         console.error(error);
         setInstallations([]);
+        setExecutions([]);
+        setDeployItems([]);
       } finally {
         setLoading(false);
       }
     };
 
-    fetchInstallations();
+    fetchAllResources();
   }, [selectedNamespaces, apiConfig]);
 
   const columns: AnalyticalTableColumnDefinition[] = [
@@ -85,6 +120,52 @@ export function Landscapers() {
     },
   ];
 
+  const renderRowSubComponent = (row: any) => {
+    const installation = row.original;
+
+    const relatedExecutions = executions.filter((execution) =>
+      execution.metadata.ownerReferences?.some(
+        (ref) => ref.uid === installation.metadata.uid,
+      ),
+    );
+
+    const relatedDeployItems = deployItems.filter((deploy) =>
+      deploy.metadata.ownerReferences?.some(
+        (ref) => ref.uid === installation.metadata.uid,
+      ),
+    );
+
+    return (
+      <div style={{ padding: '10px', backgroundColor: '#f4f4f4' }}>
+        <h5>{t('Executions')}</h5>
+        {relatedExecutions.length > 0 ? (
+          <ul>
+            {relatedExecutions.map((execution: any) => (
+              <li key={execution.metadata.uid}>
+                {execution.metadata.name} – {execution.status.phase}
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <p>{t('No executions found')}</p>
+        )}
+
+        <h5 style={{ marginTop: '1rem' }}>{t('Deploy Items')}</h5>
+        {relatedDeployItems.length > 0 ? (
+          <ul>
+            {relatedDeployItems.map((deploy: any) => (
+              <li key={deploy.metadata.uid}>
+                {deploy.metadata.name} – {deploy.status.phase}
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <p>{t('No deploy items found')}</p>
+        )}
+      </div>
+    );
+  };
+
   return (
     <>
       <Title level="H4">{t('Providers.headerProviders')}</Title>
@@ -109,6 +190,8 @@ export function Landscapers() {
         scaleWidthMode={AnalyticalTableScaleWidthMode.Smart}
         filterable
         retainColumnWidth
+        renderRowSubComponent={renderRowSubComponent}
+        subComponentsBehavior="IncludeHeightExpandable"
         reactTableOptions={{
           autoResetHiddenColumns: false,
           autoResetPage: false,

src/lib/api/types/landscaper/listExecutions.ts

@@ -21,5 +21,5 @@ interface ExecutionsListResponse {
 export const ExecutionsRequest = (
   namespace: string,
 ): Resource<ExecutionsListResponse> => ({
-  path: `/apis/landscaper.gardener.cloud/v1alpha1/namespaces/${namespace}/installations`,
+  path: `/apis/landscaper.gardener.cloud/v1alpha1/namespaces/${namespace}/executions`,
 });