@openshift-assisted/ui-lib 2.7.11-cim → 2.8.2-cim

package/lib/ocm/config/constants.ts

@@ -0,0 +1,43 @@
+import {
+  AssistedInstallerOCMPermissionTypesListType,
+  AssistedInstallerPermissionTypesListType,
+  Cluster,
+} from '../../common';
+
+/* Used from Integration tests so we can mock the permissions */
+export type ExtendedCluster = Cluster & {
+  permissions: AssistedInstallerOCMPermissionTypesListType;
+};
+
+export const getBasePermissions = (
+  cluster: ExtendedCluster,
+): AssistedInstallerPermissionTypesListType => {
+  if (cluster.permissions) {
+    return { isViewerMode: !cluster.permissions.canEdit };
+  }
+
+  const basePermissions = { isViewerMode: false };
+  if (!process.env.AIUI_APP_CLUSTER_PERMISSIONS) {
+    return basePermissions;
+  }
+  const ocmPermissions = JSON.parse(
+    process.env.AIUI_APP_CLUSTER_PERMISSIONS,
+  ) as AssistedInstallerOCMPermissionTypesListType;
+
+  return {
+    ...basePermissions,
+    ...ocmPermissionsToAIPermissions(ocmPermissions),
+  };
+};
+
+export const ocmPermissionsToAIPermissions = (
+  ocmPermissions: AssistedInstallerOCMPermissionTypesListType,
+): Partial<AssistedInstallerPermissionTypesListType> => {
+  const permissions: Partial<AssistedInstallerPermissionTypesListType> = {};
+  if (ocmPermissions.canEdit !== undefined) {
+    permissions.isViewerMode = !ocmPermissions.canEdit;
+  }
+  return permissions;
+};
+
+export const OCM_CLUSTER_LIST_LINK = '/openshift'; // TODO(mlibra): Tweak it!!!

package/lib/ocm/config/routeBaseBath.ts

@@ -0,0 +1,5 @@
+export let routeBasePath = '';
+
+export const setRouteBasePath = (basePath: string) => {
+  routeBasePath = basePath;
+};

package/lib/ocm/hooks/useClusterCustomManifests.ts

@@ -0,0 +1,94 @@
+import React from 'react';
+import { alertsSlice } from '../../common/reducers';
+import { Cluster, ListManifests, Manifest } from '../../common/api/types';
+import { ClustersAPI } from '../services/apis';
+import { getApiErrorMessage, handleApiError } from '../api';
+import { getErrorMessage } from '../../common/utils';
+import { ListManifestsExtended } from '../components/clusterConfiguration/manifestsConfiguration/data/dataTypes';
+
+const { addAlert } = alertsSlice.actions;
+
+export const convertBlobToString = (blob: Blob): Promise<string> => {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.readAsText(blob, 'UTF-8');
+    reader.onload = (readerEvent) => {
+      const content = readerEvent.target?.result;
+      resolve(content as string);
+    };
+  });
+};
+
+const getManifestsInfo = async (customManifests: ListManifests, clusterId: string) => {
+  const manifestsExtended: ListManifestsExtended = [];
+  for (const manifest of customManifests) {
+    try {
+      const { data: yamlContent } = await ClustersAPI.getManifestContent(
+        clusterId,
+        manifest.folder || 'manifests',
+        manifest.fileName || '',
+      );
+      const yamlString = await convertBlobToString(yamlContent);
+      manifestsExtended.push({
+        folder: manifest.folder || 'manifests',
+        fileName: manifest.fileName || '',
+        yamlContent: yamlString,
+      });
+    } catch (e) {
+      manifestsExtended.push({
+        folder: manifest.folder || 'manifests',
+        fileName: manifest.fileName || '',
+        yamlContent: '',
+      });
+    }
+  }
+  return manifestsExtended;
+};
+
+const useClusterCustomManifests = (clusterId: Cluster['id'], extendedVersion: boolean) => {
+  const [customManifests, setCustomManifests] = React.useState<ListManifestsExtended>();
+  const [error, setError] = React.useState('');
+  const [extendedManifestsLoaded, setExtendedManifestsLoaded] = React.useState<boolean>(false);
+
+  const fetchCustomManifests = React.useCallback(async () => {
+    try {
+      if (clusterId !== '') {
+        const { data } = await ClustersAPI.getManifests(clusterId);
+        if (extendedVersion) {
+          await getManifestsInfo(data, clusterId).then((manifests) => {
+            setCustomManifests(manifests);
+            setExtendedManifestsLoaded(true);
+          });
+        } else {
+          const manifestsExtended = data.map((manifest: Manifest) => ({
+            folder: manifest.folder || 'manifests',
+            fileName: manifest.fileName || '',
+            yamlContent: '',
+          }));
+          setCustomManifests(manifestsExtended);
+        }
+      }
+    } catch (e) {
+      setError(getErrorMessage(e));
+      // report error systematically at one place show defaults instead
+      handleApiError(e, () =>
+        addAlert({
+          title: 'Failed to retrieve cluster custom manifests',
+          message: getApiErrorMessage(e),
+        }),
+      );
+    }
+  }, [clusterId, extendedVersion]);
+
+  React.useEffect(() => {
+    void fetchCustomManifests();
+  }, [fetchCustomManifests]);
+
+  return {
+    customManifests,
+    error,
+    isLoading: !error && !customManifests && (extendedVersion ? !extendedManifestsLoaded : true),
+  };
+};
+
+export default useClusterCustomManifests;

package/lib/ocm/hooks/useClusterPreflightRequirements.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { alertsSlice } from '../../common/reducers';
+import { Cluster, PreflightHardwareRequirements } from '../../common/api/types';
+import { ClustersAPI } from '../services/apis';
+import { getApiErrorMessage, handleApiError } from '../api';
+import { getErrorMessage } from '../../common/utils';
+
+const { addAlert } = alertsSlice.actions;
+
+const useClusterPreflightRequirements = (clusterId: Cluster['id']) => {
+  const [preflightRequirements, setPreflightRequirements] =
+    React.useState<PreflightHardwareRequirements>();
+  const [error, setError] = React.useState('');
+
+  React.useEffect(() => {
+    const fetchFunc = async () => {
+      try {
+        const { data } = await ClustersAPI.getPreflightRequirements(clusterId);
+        setPreflightRequirements(data);
+      } catch (e) {
+        setError(getErrorMessage(e));
+        // report error systematically at one place show defaults instead
+        handleApiError(e, () =>
+          addAlert({
+            title: 'Failed to retrieve preflight cluster requirements',
+            message: getApiErrorMessage(e),
+          }),
+        );
+      }
+    };
+    void fetchFunc();
+  }, [setPreflightRequirements, setError, clusterId]);
+
+  return {
+    preflightRequirements,
+    error,
+    isLoading: !error && !preflightRequirements,
+  };
+};
+
+export default useClusterPreflightRequirements;

package/lib/ocm/hooks/useClusterSupportedPlatforms.ts

@@ -0,0 +1,70 @@
+import React from 'react';
+import { AxiosError } from 'axios';
+import useSWR from 'swr';
+import { getApiErrorMessage, handleApiError } from '../api';
+import { ClustersAPI } from '../services/apis';
+import {
+  PlatformType,
+  POLLING_INTERVAL,
+  NonPlatformIntegrations,
+  isClusterPlatformTypeVM,
+  useAlerts,
+  SupportedPlatformType,
+} from '../../common';
+import { APIErrorMixin } from '../api/types';
+
+export type SupportedPlatformIntegrationType = 'no-active-integrations' | SupportedPlatformType;
+
+function getIntegrablePlatformIntegration(allClusterPlatforms: PlatformType[]) {
+  const integrationPlatforms = allClusterPlatforms.filter(
+    (platform) => !NonPlatformIntegrations.includes(platform),
+  );
+  const uniqueIntegrationPlatforms = Array.from(new Set(integrationPlatforms));
+  if (integrationPlatforms.length === 1) {
+    const [exclusivelyAvailablePlatform] = uniqueIntegrationPlatforms;
+    return isClusterPlatformTypeVM({ platform: { type: exclusivelyAvailablePlatform } })
+      ? exclusivelyAvailablePlatform
+      : undefined;
+  }
+  return undefined;
+}
+
+export default function useClusterSupportedPlatforms(clusterId: string) {
+  const { addAlert, alerts } = useAlerts();
+  const url = ClustersAPI.makeSupportedPlatformsBaseURI(clusterId);
+  const fetcher = () => ClustersAPI.getSupportedPlatforms(clusterId).then((res) => res.data);
+  const { data, error } = useSWR<PlatformType[], AxiosError<APIErrorMixin>>(url, fetcher, {
+    refreshInterval: POLLING_INTERVAL,
+    errorRetryCount: 0,
+    revalidateOnFocus: false,
+  });
+
+  const isLoading = !error && !data;
+
+  const supportedPlatformIntegration =
+    isLoading || !data ? undefined : getIntegrablePlatformIntegration(data);
+
+  React.useEffect(() => {
+    if (error) {
+      const title = `Failed to retrieve supported platforms (clusterId: ${clusterId})`;
+      //TODO(brotman) add handling of existing errors to alerts context
+      if (alerts.find((alert) => alert.title === title)) {
+        return;
+      }
+      handleApiError(error, () =>
+        addAlert({
+          title,
+          message: getApiErrorMessage(error),
+        }),
+      );
+    }
+  }, [error, addAlert, clusterId, alerts]);
+
+  return {
+    isPlatformIntegrationSupported: supportedPlatformIntegration !== undefined,
+    supportedPlatformIntegration: (supportedPlatformIntegration ||
+      'no-active-integrations') as SupportedPlatformIntegrationType,
+    isLoading,
+    error,
+  };
+}

package/lib/ocm/hooks/useInfraEnv.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import { useInfraEnvId } from '.';
+import { Cluster, CpuArchitecture, InfraEnv, InfraEnvUpdateParams } from '../../common';
+import { getErrorMessage } from '../../common/utils';
+import { InfraEnvsAPI } from '../services/apis';
+import InfraEnvIdsCacheService from '../services/InfraEnvIdsCacheService';
+
+export default function useInfraEnv(
+  clusterId: Cluster['id'],
+  cpuArchitecture: CpuArchitecture,
+): {
+  infraEnv?: InfraEnv;
+  error?: string;
+  isLoading: boolean;
+  updateInfraEnv: (infraEnvUpdateParams: InfraEnvUpdateParams) => Promise<InfraEnv>;
+} {
+  const [infraEnv, setInfraEnv] = React.useState<InfraEnv>();
+  const [error, setError] = React.useState('');
+  const { infraEnvId, error: infraEnvIdError } = useInfraEnvId(clusterId, cpuArchitecture);
+
+  const getInfraEnv = React.useCallback(async () => {
+    try {
+      if (infraEnvId) {
+        const { data: infraEnv } = await InfraEnvsAPI.get(infraEnvId);
+        setInfraEnv(infraEnv);
+      }
+    } catch (e) {
+      // Invalidate this cluster's cached data
+      InfraEnvIdsCacheService.removeInfraEnvId(clusterId, CpuArchitecture.USE_DAY1_ARCHITECTURE);
+      setError(getErrorMessage(e));
+    }
+  }, [clusterId, infraEnvId]);
+
+  const updateInfraEnv = React.useCallback(
+    async (infraEnvUpdateParams: InfraEnvUpdateParams) => {
+      if (!infraEnvId) {
+        throw 'updateInfraEnv should not be called before infra env was loaded';
+      }
+      InfraEnvsAPI.abortLastGetRequest();
+      const { data } = await InfraEnvsAPI.update(infraEnvId, infraEnvUpdateParams);
+      setInfraEnv(data);
+      return data;
+    },
+    [infraEnvId],
+  );
+
+  React.useEffect(() => {
+    if (infraEnvIdError) {
+      setError(infraEnvIdError);
+    } else {
+      if (!infraEnv) {
+        void getInfraEnv();
+      }
+    }
+  }, [getInfraEnv, infraEnv, infraEnvId, infraEnvIdError]);
+
+  return { infraEnv, error, isLoading: !infraEnv && !error, updateInfraEnv };
+}

package/lib/ocm/hooks/useInfraEnvId.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Cluster, CpuArchitecture, InfraEnv } from '../../common';
+import { getErrorMessage } from '../../common/utils';
+import { InfraEnvsService } from '../services';
+
+export default function useInfraEnvId(clusterId: Cluster['id'], cpuArchitecture: CpuArchitecture) {
+  const [infraEnvId, setInfraEnv] = React.useState<InfraEnv['id']>();
+  const [error, setError] = React.useState('');
+
+  const findInfraEnvId = React.useCallback(async () => {
+    try {
+      const infraEnvId = await InfraEnvsService.getInfraEnvId(clusterId, cpuArchitecture);
+      setInfraEnv(infraEnvId);
+    } catch (e) {
+      setError(getErrorMessage(e));
+    }
+  }, [clusterId, cpuArchitecture]);
+
+  React.useEffect(() => {
+    if (!clusterId) {
+      setError('Missing clusterId to load infrastructure environment');
+    } else if (!infraEnvId) {
+      void findInfraEnvId();
+    }
+  }, [clusterId, findInfraEnvId, infraEnvId]);
+
+  return { infraEnvId, error };
+}

package/lib/ocm/hooks/useInfraEnvImageUrl.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Cluster, CpuArchitecture, PresignedUrl } from '../../common';
+import { InfraEnvsAPI } from '../services/apis';
+import { getErrorMessage } from '../../common/utils';
+import { InfraEnvsService } from '../services';
+
+type ImgUrl = {
+  url: PresignedUrl['url'];
+  error: string;
+};
+
+export default function useInfraEnvImageUrl() {
+  const getIsoImageUrl = React.useCallback(
+    async (clusterId: Cluster['id'], cpuArchitecture: CpuArchitecture): Promise<ImgUrl> => {
+      try {
+        const infraEnvId = await InfraEnvsService.getInfraEnvId(clusterId, cpuArchitecture);
+        if (!infraEnvId) {
+          return { url: '', error: `Failed to retrieve the infraEnv for ${clusterId}` };
+        }
+
+        const {
+          data: { url },
+        } = await InfraEnvsAPI.getImageUrl(infraEnvId);
+        return {
+          url,
+          error: url ? '' : 'Failed to retrieve the image URL, the API returned an invalid URL',
+        };
+      } catch (e) {
+        return { url: '', error: getErrorMessage(e) };
+      }
+    },
+    [],
+  );
+
+  return { getIsoImageUrl };
+}

package/lib/ocm/hooks/useInfraEnvIpxeImageUrl.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Cluster, CpuArchitecture, PresignedUrl } from '../../common';
+import { InfraEnvsAPI } from '../services/apis';
+import { getErrorMessage } from '../../common/utils';
+import { InfraEnvsService } from '../services';
+
+type ImgUrl = {
+  url: PresignedUrl['url'];
+  error: string;
+};
+
+export default function useInfraEnvIpxeImageUrl() {
+  const getIpxeImageUrl = React.useCallback(
+    async (clusterId: Cluster['id'], cpuArchitecture: CpuArchitecture): Promise<ImgUrl> => {
+      try {
+        const infraEnvId = await InfraEnvsService.getInfraEnvId(clusterId, cpuArchitecture);
+        if (!infraEnvId) {
+          return { url: '', error: `Failed to retrieve the infraEnv for ${clusterId}` };
+        }
+
+        const {
+          data: { url },
+        } = await InfraEnvsAPI.getIpxeImageUrl(infraEnvId);
+        return {
+          url,
+          error: url
+            ? ''
+            : 'Failed to retrieve the Ipxe image URL, the API returned an invalid URL',
+        };
+      } catch (e) {
+        return { url: '', error: getErrorMessage(e) };
+      }
+    },
+    [],
+  );
+
+  return { getIpxeImageUrl };
+}

package/lib/ocm/hooks/useManagedDomains.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ManagedDomain, useAlerts } from '../../common';
+import { getApiErrorMessage, handleApiError } from '../api';
+import { ManagedDomainsAPI } from '../services/apis';
+
+export default function useManagedDomains() {
+  const [managedDomains, setManagedDomains] = React.useState<ManagedDomain[]>();
+  const { addAlert } = useAlerts();
+
+  const fetchManagedDomains = React.useCallback(async () => {
+    try {
+      const { data: domains } = await ManagedDomainsAPI.list();
+      setManagedDomains(domains);
+    } catch (e) {
+      setManagedDomains([]);
+      handleApiError(e, () =>
+        addAlert({ title: 'Failed to retrieve managed domains', message: getApiErrorMessage(e) }),
+      );
+    }
+  }, [addAlert]);
+
+  React.useEffect(() => {
+    if (!managedDomains) {
+      void fetchManagedDomains();
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return managedDomains;
+}

package/lib/ocm/hooks/useOpenshiftVersions.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import {
+  Cluster,
+  CpuArchitecture,
+  ImportClusterParams,
+  OpenshiftVersion,
+  OpenshiftVersionOptionType,
+} from '../../common';
+import { getApiErrorMessage, handleApiError } from '../api';
+import { SupportedOpenshiftVersionsAPI } from '../services/apis';
+import { getKeys } from '../../common/utils';
+
+type OpenShiftVersion = Cluster['openshiftVersion'];
+
+type UseOpenshiftVersionsType = {
+  versions: OpenshiftVersionOptionType[];
+  normalizeClusterVersion: (version: OpenShiftVersion) => ImportClusterParams['openshiftVersion'];
+  isSupportedOpenShiftVersion: (version: OpenShiftVersion) => boolean;
+  getCpuArchitectures: (version: OpenShiftVersion) => CpuArchitecture[];
+  error?: { title: string; message: string };
+  loading: boolean;
+};
+
+const sortVersions = (versions: OpenshiftVersionOptionType[]) => {
+  return versions
+    .sort((version1, version2) =>
+      version1.label.localeCompare(version2.label, undefined, { numeric: true }),
+    )
+    .reverse();
+};
+
+const supportedVersionLevels = ['production', 'maintenance'];
+
+export default function useOpenshiftVersions(): UseOpenshiftVersionsType {
+  const [versions, setVersions] = React.useState<OpenshiftVersionOptionType[]>([]);
+  const [error, setError] = React.useState<UseOpenshiftVersionsType['error']>();
+
+  const findVersionItemByVersion = React.useCallback(
+    (version: OpenShiftVersion) => {
+      return versions.find(({ value: versionKey }) => {
+        // For version 4.10 match 4.10, 4.10.3, not 4.1, 4.1.5
+        const versionNameMatch = new RegExp(`^${versionKey}(\\..+)?$`);
+        return versionNameMatch.test(version || '');
+      });
+    },
+    [versions],
+  );
+
+  const fetchOpenshiftVersions = React.useCallback(async () => {
+    try {
+      const { data } = await SupportedOpenshiftVersionsAPI.list();
+
+      const versions: OpenshiftVersionOptionType[] = getKeys(data).map((key) => {
+        const versionItem = data[key] as OpenshiftVersion;
+        const version = versionItem.displayName;
+        return {
+          label: `OpenShift ${version}`,
+          value: key as string,
+          version,
+          default: Boolean(versionItem.default),
+          supportLevel: versionItem.supportLevel,
+          cpuArchitectures: versionItem.cpuArchitectures as CpuArchitecture[],
+        };
+      });
+      setVersions(sortVersions(versions));
+    } catch (e) {
+      handleApiError(e, (e) => {
+        setError({
+          title: 'Failed to retrieve list of supported OpenShift versions.',
+          message: getApiErrorMessage(e),
+        });
+      });
+    }
+  }, []);
+
+  const normalizeClusterVersion = React.useCallback(
+    (version: OpenShiftVersion) => {
+      const matchingVersion = findVersionItemByVersion(version);
+      return matchingVersion?.value || version;
+    },
+    [findVersionItemByVersion],
+  );
+
+  const isSupportedOpenShiftVersion = React.useCallback(
+    (version: OpenShiftVersion) => {
+      if (versions.length === 0) {
+        // Till the data are loaded
+        return true;
+      }
+      const selectedVersion = findVersionItemByVersion(version);
+      return supportedVersionLevels.includes(selectedVersion?.supportLevel || '');
+    },
+    [findVersionItemByVersion, versions.length],
+  );
+
+  const getCpuArchitectures = React.useCallback(
+    (version: OpenShiftVersion) => {
+      // TODO (multi-arch) confirm this is correctly retrieving the associated version
+      const matchingVersion = findVersionItemByVersion(version);
+      return matchingVersion?.cpuArchitectures ?? [];
+    },
+    [findVersionItemByVersion],
+  );
+
+  React.useEffect(() => {
+    void fetchOpenshiftVersions();
+  }, [fetchOpenshiftVersions]);
+
+  return {
+    error,
+    loading: !error && versions.length === 0,
+    versions,
+    normalizeClusterVersion,
+    isSupportedOpenShiftVersion,
+    getCpuArchitectures,
+  };
+}

package/lib/ocm/hooks/usePullSecret.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { getApiErrorMessage, handleApiError, ocmClient } from '../api';
+import { useAlerts } from '../../common';
+import { OcmClientRequestResponse } from '../types';
+
+export default function usePullSecret() {
+  const [pullSecret, setPullSecret] = React.useState<string>();
+  const { addAlert } = useAlerts();
+
+  const getPullSecret = React.useCallback(async () => {
+    try {
+      if (ocmClient) {
+        const response: OcmClientRequestResponse = await ocmClient.post<string>(
+          '/api/accounts_mgmt/v1/access_token',
+        );
+        const data = response?.request?.response;
+        setPullSecret(data || ''); // unmarshalled response as a string
+      } else {
+        setPullSecret('');
+      }
+    } catch (e) {
+      handleApiError(e, (e) => {
+        setPullSecret('');
+        addAlert({ title: 'Failed to retrieve pull secret', message: getApiErrorMessage(e) });
+      });
+    }
+  }, [addAlert]);
+
+  React.useEffect(() => {
+    if (!pullSecret) {
+      void getPullSecret();
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return pullSecret;
+}

package/lib/ocm/hooks/useSetClusterPermissions.ts

@@ -0,0 +1,23 @@
+import { useDispatch } from 'react-redux';
+import { AssistedInstallerOCMPermissionTypesListType, Cluster } from '../../common';
+import { ExtendedCluster, getBasePermissions, ocmPermissionsToAIPermissions } from '../config';
+import { updateClusterPermissions } from '../reducers/clusters';
+
+export default function useSetClusterPermissions() {
+  const dispatch = useDispatch();
+
+  return (cluster?: Cluster, ocmPermissions?: AssistedInstallerOCMPermissionTypesListType) => {
+    if (!cluster) {
+      // We must not update the permissions, the state is reset when the cluster is cleaned
+      return;
+    }
+    let newPermissions = getBasePermissions(cluster as ExtendedCluster);
+    if (ocmPermissions) {
+      newPermissions = {
+        ...newPermissions,
+        ...ocmPermissionsToAIPermissions(ocmPermissions || {}),
+      };
+    }
+    dispatch(updateClusterPermissions(newPermissions));
+  };
+}