Fetch resource from manager

Author: KonradPietocha

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="3"
+          design="Neutral"
+        >
+          {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

@@ -4,6 +4,16 @@ import React, { useEffect, useState } from 'react';
 import { useFetch } from 'shared/hooks/BackendAPI/useFetch';
 import { ColumnLayoutState } from 'state/columnLayoutAtom';
 
+export const enum ModuleTemplateStatus {
+  Ready = 'Ready',
+  Processing = 'Processing',
+  Deleting = 'Deleting',
+  Unknown = 'Unknown',
+  Unmanaged = 'Unmanaged',
+  Warning = 'Warning',
+  Error = 'Error',
+}
+
 export type KymaResourceSpecModuleType = {
   name: string;
   channel?: string;
@@ -105,7 +115,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 +162,14 @@ export const findModuleSpec = (
   );
 };
 
+type ModuleManagerType = {
+  name: string;
+  namespace: string;
+  group: string;
+  version: string;
+  kind: string;
+};
+
 export type ModuleTemplateType = {
   metadata: {
     name: string;
@@ -167,6 +185,7 @@ export type ModuleTemplateType = {
     info?: {
       documentation?: string;
     };
+    manager: ModuleManagerType;
   };
 };
 
@@ -244,3 +263,57 @@ 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 fetchModule() {
+        try {
+          const response = await fetch({ relativeUrl: path });
+          const status = (await response.json())?.status;
+          setData(status?.conditions?.[0]?.type);
+        } catch (error) {
+          if (error instanceof Error) {
+            setError(error);
+          }
+        }
+      }
+
+      fetchModule();
+    }
+    // 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 'Not installed';
+  }
+
+  if (state === ModuleTemplateStatus.Unmanaged && managerExists) {
+    if (state !== managerResourceState) {
+      return ModuleTemplateStatus.Processing;
+    }
+    return managerResourceState || ModuleTemplateStatus.Unknown;
+  }
+
+  return state || ModuleTemplateStatus.Unknown;
+};