feat: Fetch resource from manager (#3875)

* Fetch resource from manager

* Take status from latest condition

* Compare resolved types of status

* Correction

* Correct style for badge

Author: KonradPietocha

src/components/KymaModules/components/ModuleStatus.tsx

@@ -2,8 +2,22 @@ import { StatusBadge } from 'shared/components/StatusBadge/StatusBadge';
 import { useModuleStatus } from '../support';
 
 export const resolveType = (status: string) => {
+  if (typeof status !== 'string') {
+    return 'None';
+  }
+
   switch (status) {
+    case 'Initial':
+    case 'Pending':
+    case 'Available':
+    case 'Released':
+      return 'Information';
     case 'Ready':
+    case 'Bound':
+    case 'Running':
+    case 'Success':
+    case 'Succeeded':
+    case 'Ok':
       return 'Positive';
     case 'Processing':
     case 'Deleting':
@@ -12,7 +26,10 @@ export const resolveType = (status: string) => {
       return 'None';
     case 'Warning':
       return 'Critical';
+    case 'Failed':
     case 'Error':
+    case 'Failure':
+    case 'Invalid':
       return 'Negative';
     default:
       return 'None';

src/components/KymaModules/components/ModulesListRows.tsx

@@ -4,7 +4,10 @@ import {
   findModuleTemplate,
   KymaResourceType,
   ModuleTemplateListType,
+  ModuleTemplateStatus,
   ModuleTemplateType,
+  resolveInstallationStateName,
+  useGetManagerStatus,
 } from '../support';
 import { EMPTY_TEXT_PLACEHOLDER } from 'shared/constants';
 import { useTranslation } from 'react-i18next';
@@ -74,6 +77,10 @@ export const ModulesListRows = ({
     resource?.version,
   );
 
+  const { data: managerResourceState } = useGetManagerStatus(
+    currentModuleTemplate?.spec?.manager,
+  );
+
   if (
     moduleStatus &&
     !moduleStatus.resource &&
@@ -99,7 +106,7 @@ export const ModulesListRows = ({
 
   const currentModuleReleaseMeta = findModuleReleaseMeta(resource.name);
 
-  const isChannelOverriden =
+  const isChannelOverridden =
     kymaResource?.spec?.modules?.[moduleIndex]?.channel !== undefined;
 
   return [
@@ -122,6 +129,16 @@ export const ModulesListRows = ({
           {t('kyma-modules.beta')}
         </Tag>
       ) : null}
+      {moduleStatus?.state === ModuleTemplateStatus.Unmanaged && (
+        <Tag
+          className="sap-margin-begin-tiny"
+          hideStateIcon
+          colorScheme="5"
+          design="Set2"
+        >
+          {moduleStatus.state}
+        </Tag>
+      )}
     </>,
     // Namespace
     moduleStatus?.resource?.metadata?.namespace || EMPTY_TEXT_PLACEHOLDER,
@@ -131,7 +148,7 @@ export const ModulesListRows = ({
         ? moduleStatus?.channel
         : kymaResource?.spec?.modules?.[moduleIndex]?.channel ||
           kymaResource?.spec?.channel}
-      {isChannelOverriden ? (
+      {isChannelOverridden ? (
         <Tag
           hideStateIcon
           design="Set2"
@@ -155,7 +172,11 @@ export const ModulesListRows = ({
       type={resolveType(moduleStatus?.state ?? '')}
       tooltipContent={moduleStatus?.message}
     >
-      {moduleStatus?.state || 'Unknown'}
+      {resolveInstallationStateName(
+        moduleStatus?.state,
+        !!currentModuleTemplate?.spec?.manager,
+        managerResourceState,
+      )}
     </StatusBadge>,
     // Documentation
     moduleDocs ? (

src/components/KymaModules/support.ts

@@ -3,6 +3,27 @@ import React, { useEffect, useState } from 'react';
 
 import { useFetch } from 'shared/hooks/BackendAPI/useFetch';
 import { ColumnLayoutState } from 'state/columnLayoutAtom';
+import { resolveType } from './components/ModuleStatus';
+
+export const enum ModuleTemplateStatus {
+  Ready = 'Ready',
+  Processing = 'Processing',
+  Deleting = 'Deleting',
+  Unknown = 'Unknown',
+  Unmanaged = 'Unmanaged',
+  Warning = 'Warning',
+  Error = 'Error',
+  NotInstalled = 'Not installed',
+}
+
+type ConditionType = {
+  lastTransitionTime: string;
+  lastUpdateTime: string;
+  message: string;
+  reason: string;
+  status: string;
+  type: string;
+};
 
 export type KymaResourceSpecModuleType = {
   name: string;
@@ -105,7 +126,7 @@ export function useGetAllModulesStatuses(modules: any[]) {
               const status = (await response.json())?.status;
               return {
                 key: resource?.metadata?.name ?? resource?.name,
-                status: status?.state || 'Unknown',
+                status: status?.state || ModuleTemplateStatus.Unknown,
               };
             } catch (e) {
               return {
@@ -152,6 +173,14 @@ export const findModuleSpec = (
   );
 };
 
+type ModuleManagerType = {
+  name: string;
+  namespace: string;
+  group: string;
+  version: string;
+  kind: string;
+};
+
 export type ModuleTemplateType = {
   metadata: {
     name: string;
@@ -167,6 +196,7 @@ export type ModuleTemplateType = {
     info?: {
       documentation?: string;
     };
+    manager: ModuleManagerType;
   };
 };
 
@@ -244,3 +274,69 @@ export const checkSelectedModule = (
   }
   return false;
 };
+
+export function useGetManagerStatus(manager?: ModuleManagerType) {
+  const fetch = useFetch();
+  const [data, setData] = useState<any>(ModuleTemplateStatus.Unknown);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    if (manager) {
+      const path = getResourcePath({
+        apiVersion: `${manager?.group}/${manager?.version}`,
+        kind: manager?.kind,
+        metadata: {
+          name: manager?.name,
+          namespace: manager?.namespace,
+        },
+      } as KymaResourceType);
+      async function fetchResource() {
+        try {
+          const response = await fetch({ relativeUrl: path });
+          const status = (await response.json())?.status;
+          const latest = status?.conditions
+            ?.filter((condition: ConditionType) => condition?.status === 'True')
+            ?.reduce(
+              (acc: ConditionType, condition: ConditionType) =>
+                new Date(acc?.lastUpdateTime).getTime() >
+                new Date(condition?.lastUpdateTime).getTime()
+                  ? acc
+                  : condition,
+              {},
+            );
+          if (latest?.type) {
+            setData(latest.type);
+          }
+        } catch (error) {
+          if (error instanceof Error) {
+            setError(error);
+          }
+        }
+      }
+
+      fetchResource();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [manager]);
+
+  return { data, error };
+}
+
+export const resolveInstallationStateName = (
+  state?: string,
+  managerExists?: boolean,
+  managerResourceState?: string,
+) => {
+  if (state === ModuleTemplateStatus.Unmanaged && !managerExists) {
+    return ModuleTemplateStatus.NotInstalled;
+  }
+
+  if (state === ModuleTemplateStatus.Unmanaged && managerExists) {
+    if (resolveType(state) !== resolveType(managerResourceState ?? '')) {
+      return ModuleTemplateStatus.Processing;
+    }
+    return managerResourceState || ModuleTemplateStatus.Unknown;
+  }
+
+  return state || ModuleTemplateStatus.Unknown;
+};