@openshift-assisted/ui-lib 2.7.12-cim → 2.9.0-cim

package/lib/common/components/clusterConfiguration/utils.ts

@@ -0,0 +1,280 @@
+import { Address4, Address6 } from 'ip-address';
+import { TFunction } from 'i18next';
+import {
+  Cluster,
+  ClusterDefaultConfig,
+  ClusterNetwork,
+  Host,
+  Inventory,
+  MachineNetwork,
+  ServiceNetwork,
+  stringToJSON,
+} from '../../api';
+import { NETWORK_TYPE_OVN, NETWORK_TYPE_SDN, NO_SUBNET_SET } from '../../config';
+import {
+  selectClusterNetworkCIDR,
+  selectClusterNetworkHostPrefix,
+  selectServiceNetworkCIDR,
+  selectSchedulableMasters,
+  isClusterPlatformTypeVM,
+} from '../../selectors';
+import {
+  ClusterCpuArchitecture,
+  CpuArchitecture,
+  HostDiscoveryValues,
+  HostSubnets,
+  OpenshiftVersionOptionType,
+  StorageValues,
+  Validation,
+  ValidationGroup,
+  ValidationsInfo,
+  WithRequired,
+} from '../../types';
+import { getHostname } from '../hosts/utils';
+
+type VersionConfig = WithRequired<Pick<Cluster, 'openshiftVersion'>, 'openshiftVersion'> & {
+  cpuArchitecture?: ClusterCpuArchitecture;
+  versions?: OpenshiftVersionOptionType[];
+  withPreviewText?: boolean;
+  withMultiText?: boolean;
+};
+
+const getBetaVersionText = (
+  openshiftVersion: string,
+  versions: OpenshiftVersionOptionType[],
+): string => {
+  const versionSelected = versions.find((version) => version.version === openshiftVersion);
+  return versionSelected?.supportLevel === 'beta' ? '- Developer preview release' : '';
+};
+
+const getMultiVersionText = (
+  openshiftVersion: string,
+  cpuArchitecture?: ClusterCpuArchitecture,
+) => {
+  if (!cpuArchitecture || openshiftVersion.includes('multi')) {
+    return '';
+  }
+  return cpuArchitecture === CpuArchitecture.MULTI ? ' (multi)' : '';
+};
+
+export const getOpenshiftVersionText = (params: VersionConfig) => {
+  return `${params.openshiftVersion} ${
+    params.withPreviewText && params.versions
+      ? getBetaVersionText(params.openshiftVersion, params.versions)
+      : ''
+  } ${
+    params.withMultiText ? getMultiVersionText(params.openshiftVersion, params.cpuArchitecture) : ''
+  }`;
+};
+
+export const getSubnet = (cidr: string): Address6 | Address4 | null => {
+  if (Address4.isValid(cidr)) {
+    return new Address4(cidr);
+  } else if (Address6.isValid(cidr)) {
+    return new Address6(cidr);
+  } else {
+    return null;
+  }
+};
+
+export const getHumanizedSubnetRange = (subnet: Address6 | Address4 | null) => {
+  if (subnet) {
+    const subnetStart = subnet.startAddress().correctForm();
+    const subnetEnd = subnet.endAddress().correctForm();
+    return `(${subnetStart} - ${subnetEnd})`;
+  }
+
+  return '';
+};
+
+export const getHumanizedSubnet = (subnet: Address6 | Address4 | null) => {
+  if (subnet) {
+    return `${subnet.address} ${getHumanizedSubnetRange(subnet)}`;
+  }
+  return '';
+};
+
+const buildHostnameMap = (hosts: Host[]): { [id: string]: string } => {
+  return hosts.reduce((acc, host) => {
+    const inventory = stringToJSON<Inventory>(host.inventory) || {};
+    acc = {
+      ...acc,
+      [host.id]: getHostname(host, inventory),
+    };
+    return acc;
+  }, {});
+};
+
+export const getHostSubnets = (cluster: Cluster, addInvalidNetworks?: boolean): HostSubnets => {
+  const hostnameMap = buildHostnameMap(cluster.hosts || []);
+
+  // Transform the data to handle the optional values
+  const hostNetworkList =
+    cluster.hostNetworks?.map((hn) => ({
+      cidr: hn.cidr || '',
+      hostIds: hn.hostIds || [],
+      isValid: true,
+    })) || [];
+
+  const hostNetworkCidrs = hostNetworkList.map((item) => item.cidr);
+  if (addInvalidNetworks) {
+    cluster.machineNetworks?.forEach((mn) => {
+      // If the machine networks are not present in the hostNetworks (the interface may have changed),
+      // it must be added so that it's shown as selected and the user can select the correct one
+      if (!hostNetworkCidrs.includes(mn.cidr || '')) {
+        hostNetworkList.push({
+          cidr: mn.cidr || '',
+          hostIds: [],
+          isValid: false,
+        });
+      }
+    });
+  }
+
+  return hostNetworkList.map((networkItem) => {
+    return {
+      subnet: networkItem.cidr,
+      hostIDs: networkItem.hostIds.map((id) => hostnameMap[id] || id),
+      humanized: getHumanizedSubnet(getSubnet(networkItem.cidr)),
+      isValid: networkItem.isValid,
+    };
+  });
+};
+
+export const getSubnetFromMachineNetworkCidr = (machineNetworkCidr?: string) => {
+  if (!machineNetworkCidr) {
+    return NO_SUBNET_SET;
+  }
+
+  const subnet = getSubnet(machineNetworkCidr);
+  return subnet?.address;
+};
+
+export const serviceNetworksEqual = (array1: ServiceNetwork[], array2: ServiceNetwork[]) => {
+  const cidrs = array2.map((elem) => elem.cidr);
+  return array1.length === array2.length && array1.every((network) => cidrs.includes(network.cidr));
+};
+
+export const clusterNetworksEqual = (array1: ClusterNetwork[], array2: ClusterNetwork[]) =>
+  array1.length === array2.length &&
+  array1.every((clusterNetwork) =>
+    array2.find(
+      (network) =>
+        network.cidr === clusterNetwork.cidr && network.hostPrefix === clusterNetwork.hostPrefix,
+    ),
+  );
+
+export const isAdvNetworkConf = (cluster: Cluster, defaultNetworkSettings: ClusterDefaultConfig) =>
+  selectClusterNetworkCIDR(cluster) !== defaultNetworkSettings.clusterNetworkCidr ||
+  selectClusterNetworkHostPrefix(cluster) !== defaultNetworkSettings.clusterNetworkHostPrefix ||
+  selectServiceNetworkCIDR(cluster) !== defaultNetworkSettings.serviceNetworkCidr;
+
+export const canSelectNetworkTypeSDN = (isSNO: boolean, isIPv6 = false) => {
+  return !(isSNO || isIPv6);
+};
+
+export const getDefaultNetworkType = (isSNO: boolean, isIPv6 = false) => {
+  return isSNO || isIPv6 ? NETWORK_TYPE_OVN : NETWORK_TYPE_SDN;
+};
+
+export const canBeDualStack = (subnets: HostSubnets) =>
+  subnets.some((subnet) => Address4.isValid(subnet.subnet)) &&
+  subnets.some((subnet) => Address6.isValid(subnet.subnet));
+
+const areNetworksDualStack = (
+  networks: (MachineNetwork | ClusterNetwork | ServiceNetwork)[] | undefined,
+) =>
+  networks &&
+  networks.length > 1 &&
+  Address4.isValid(networks[0].cidr || '') &&
+  Address6.isValid(networks[1].cidr || '');
+
+export const isDualStack = ({
+  machineNetworks,
+  clusterNetworks,
+  serviceNetworks,
+}: Pick<Cluster, 'machineNetworks' | 'clusterNetworks' | 'serviceNetworks'>) =>
+  areNetworksDualStack(machineNetworks) &&
+  areNetworksDualStack(clusterNetworks) &&
+  areNetworksDualStack(serviceNetworks);
+
+export const isSubnetInIPv6 = ({
+  clusterNetworkCidr,
+  machineNetworkCidr,
+  serviceNetworkCidr,
+}: Pick<Cluster, 'clusterNetworkCidr' | 'machineNetworkCidr' | 'serviceNetworkCidr'>) =>
+  Address6.isValid(clusterNetworkCidr || '') ||
+  Address6.isValid(machineNetworkCidr || '') ||
+  Address6.isValid(serviceNetworkCidr || '');
+
+export const getHostDiscoveryInitialValues = (cluster: Cluster): HostDiscoveryValues => {
+  return {
+    usePlatformIntegration: isClusterPlatformTypeVM(cluster),
+    schedulableMasters: selectSchedulableMasters(cluster),
+  };
+};
+
+export const getStorageInitialValues = (): StorageValues => {
+  // TODO (dchason): add initial values to node labeling
+  return {
+    nodeLabeling: '',
+  };
+};
+
+export function filterValidationsInfoByGroup(
+  validationsInfo: ValidationsInfo,
+  selectedGroups: ValidationGroup[] = ['configuration', 'hosts-data', 'network', 'operators'],
+): ValidationsInfo {
+  const result: ValidationsInfo = {};
+  Object.keys(validationsInfo).forEach((groupKeyStr) => {
+    const groupKey = groupKeyStr as ValidationGroup;
+    if (selectedGroups.includes(groupKey)) {
+      result[groupKey] = validationsInfo[groupKey];
+    }
+  });
+  return result;
+}
+
+export function filterValidationsInfoByStatus(
+  validationsInfo: ValidationsInfo,
+  selectedStatuses: Validation['status'][] = ['failure', 'pending', 'error'],
+): ValidationsInfo {
+  const result: ValidationsInfo = {};
+  Object.entries(validationsInfo).forEach(([groupKeyStr, validations = []]) => {
+    const filteredValidations = validations.filter((validation) =>
+      selectedStatuses.includes(validation.status),
+    );
+    if (filteredValidations.length) {
+      const groupKey = groupKeyStr as ValidationGroup;
+      result[groupKey] = filteredValidations;
+    }
+  });
+  return result;
+}
+
+type VipValidations = {
+  'api-vip-defined': string | undefined;
+  'ingress-vip-defined': string | undefined;
+};
+
+export const getVipValidationsById = (
+  t: TFunction,
+  validationsInfoString?: Cluster['validationsInfo'],
+): { [key: string]: string | undefined } => {
+  const validationsInfo = stringToJSON<ValidationsInfo>(validationsInfoString) || {};
+  const failedDhcpAllocationMessageStubs = [
+    t('ai:VIP IP allocation from DHCP server has been timed out'), // TODO(jtomasek): remove this one once it is no longer in backend
+    t('ai:IP allocation from the DHCP server timed out.'),
+  ];
+  return (validationsInfo.network || []).reduce((lookup, validation) => {
+    if (['api-vip-defined', 'ingress-vip-defined'].includes(validation.id)) {
+      const vipId = validation.id as keyof VipValidations;
+      lookup[vipId] =
+        validation.status === 'failure' &&
+        failedDhcpAllocationMessageStubs.find((stub) => validation.message.match(stub))
+          ? validation.message
+          : undefined;
+    }
+    return lookup;
+  }, {} as VipValidations);
+};

package/lib/common/components/clusterDetail/ClusterCredentials.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { GridItem, ClipboardCopy, clipboardCopyFunc, Button, Alert } from '@patternfly/react-core';
+import { Credentials, Cluster } from '../../api/types';
+import { LoadingState, ErrorState } from '../../components/ui/uiState';
+import { DetailList, DetailItem } from '../../components/ui/DetailList';
+import { TroubleshootingOpenshiftConsoleButton } from './ConsoleModal';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+
+type ClusterCredentialsProps = {
+  cluster: Cluster;
+  error?: boolean;
+  retry?: () => void;
+  credentials?: Credentials;
+  idPrefix?: string;
+  credentialsError?: string;
+  notAvailable?: boolean;
+};
+
+const ClusterCredentials: React.FC<ClusterCredentialsProps> = ({
+  cluster,
+  credentials,
+  error = false,
+  retry,
+  idPrefix = 'cluster-creds',
+  credentialsError = '',
+  notAvailable = false,
+}) => {
+  let credentialsBody: JSX.Element;
+  const { t } = useTranslation();
+  if (error) {
+    //Unauthorized users can't fetch cluster credentials
+    if (credentialsError.includes('403')) {
+      credentialsBody = (
+        <Alert
+          variant="info"
+          isInline
+          title={'You do not have permission to view the cluster credentials'}
+        >
+          For more information, contact your organization administrator
+        </Alert>
+      );
+    } else {
+      credentialsBody = (
+        <ErrorState title={t('ai:Failed to fetch cluster credentials.')} fetchData={retry} />
+      );
+    }
+  } else if (notAvailable) {
+    credentialsBody = (
+      <Alert variant="info" isInline title={t('ai:Admin credentials are not available.')} />
+    );
+  } else if (!credentials) {
+    credentialsBody = <LoadingState />;
+  } else if (!credentials.username && !credentials.consoleUrl) {
+    return <>N/A</>;
+  } else {
+    credentialsBody = (
+      <DetailList>
+        {credentials.consoleUrl && (
+          <DetailItem
+            title={t('ai:Web Console URL')}
+            value={
+              <>
+                <Button
+                  variant="link"
+                  icon={<ExternalLinkAltIcon />}
+                  iconPosition="right"
+                  isInline
+                  onClick={() => window.open(credentials.consoleUrl, '_blank', 'noopener')}
+                  data-testid={`${idPrefix}-link-console-url`}
+                >
+                  {credentials.consoleUrl}
+                </Button>
+                <br />
+                {cluster.apiVip && cluster.ingressVip && (
+                  <TroubleshootingOpenshiftConsoleButton
+                    consoleUrl={credentials.consoleUrl}
+                    cluster={cluster}
+                    idPrefix={idPrefix}
+                  />
+                )}
+              </>
+            }
+          />
+        )}
+        {credentials.username && (
+          <>
+            <DetailItem title="Username" value={credentials.username} />
+            <DetailItem
+              title={t('ai:Password')}
+              value={
+                <ClipboardCopy
+                  isReadOnly
+                  onCopy={(event) => clipboardCopyFunc(event, credentials.password)}
+                >
+                  &bull;&bull;&bull;&bull;&bull;
+                </ClipboardCopy>
+              }
+            />
+          </>
+        )}
+      </DetailList>
+    );
+  }
+
+  return <GridItem span={12}>{credentialsBody}</GridItem>;
+};
+
+export default ClusterCredentials;

package/lib/common/components/clusterDetail/ClusterProgress.css

@@ -0,0 +1,3 @@
+.cluster-progress-bar {
+  margin-top: -2rem; /* Progress.title property is string-only, we need to stack components as a workaround */
+}

package/lib/common/components/clusterDetail/ClusterProgress.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import {
+  Flex,
+  FlexItem,
+  Progress,
+  ProgressMeasureLocation,
+  ProgressVariant,
+} from '@patternfly/react-core';
+import { Cluster } from '../../api/types';
+import { DetailItem, DetailList, getHumanizedDateTime } from '../ui';
+import { clusterStatusLabels } from '../../config';
+import './ClusterProgress.css';
+import { TFunction } from 'i18next';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+
+const getProgressVariant = (status: Cluster['status']) => {
+  switch (status) {
+    case 'cancelled':
+    case 'error':
+      return ProgressVariant.danger;
+    case 'installed':
+    case 'adding-hosts':
+      return ProgressVariant.success;
+    default:
+      return undefined;
+  }
+};
+
+const getMeasureLocation = (status: Cluster['status']) =>
+  ['installed', 'adding-hosts'].includes(status)
+    ? ProgressMeasureLocation.none
+    : ProgressMeasureLocation.top;
+
+const getInstallationStatus = (
+  status: Cluster['status'],
+  installCompletedAt: Cluster['installCompletedAt'],
+  t: TFunction,
+) => {
+  if (status === 'installed' || status === 'adding-hosts') {
+    return t('ai:Installed on {{humanizedDataTime}}', {
+      humanizedDataTime: getHumanizedDateTime(installCompletedAt),
+    });
+  }
+  if (status === 'error') {
+    return t('ai:Failed on {{humanizedDataTime}}', {
+      humanizedDataTime: getHumanizedDateTime(installCompletedAt),
+    });
+  }
+  if (status === 'cancelled') {
+    return t('ai:Cancelled on {{humanizedDataTime}}', {
+      humanizedDataTime: getHumanizedDateTime(installCompletedAt),
+    });
+  }
+
+  return clusterStatusLabels(t)[status] || status;
+};
+
+type ClusterProgressProps = {
+  cluster: Cluster;
+  minimizedView?: boolean;
+  totalPercentage?: number;
+};
+
+const ClusterProgress = ({
+  cluster,
+  minimizedView = false,
+  totalPercentage,
+}: ClusterProgressProps) => {
+  const { status } = cluster;
+  const { t } = useTranslation();
+  return (
+    <>
+      <DetailList>
+        <Flex direction={{ default: minimizedView ? 'row' : 'column' }}>
+          <FlexItem>
+            <DetailItem
+              title={t('ai:Started on')}
+              value={getHumanizedDateTime(cluster.installStartedAt)}
+              idPrefix="cluster-progress-started-on"
+            />
+          </FlexItem>
+          <FlexItem>
+            <DetailItem
+              value={getInstallationStatus(cluster.status, cluster.installCompletedAt, t)}
+              idPrefix="cluster-progress-status"
+            />
+          </FlexItem>
+        </Flex>
+      </DetailList>
+      {!minimizedView && (
+        <Progress
+          id="cluster-progress-bar"
+          value={totalPercentage || 0}
+          label={`${totalPercentage || 0}%`}
+          title=" "
+          measureLocation={getMeasureLocation(status)}
+          variant={getProgressVariant(status)}
+          className="cluster-progress-bar"
+        />
+      )}
+    </>
+  );
+};
+
+export default ClusterProgress;

package/lib/common/components/clusterDetail/ClusterProgressItem.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Stack, StackItem, TextContent } from '@patternfly/react-core';
+import BorderedIcon from '../ui/BorderedIcon/BorderedIcon';
+
+const ClusterProgressItem = ({
+  icon,
+  children,
+}: {
+  icon: React.ReactElement;
+  children: React.ReactNode;
+}) => (
+  <Stack>
+    <StackItem>
+      <BorderedIcon>{icon}</BorderedIcon>
+    </StackItem>
+    <StackItem>
+      <TextContent>{children}</TextContent>
+    </StackItem>
+  </Stack>
+);
+
+export default ClusterProgressItem;

package/lib/common/components/clusterDetail/ClusterProgressItems.tsx

@@ -0,0 +1,65 @@
+import { getEnabledHosts } from '../hosts';
+import { RenderIf } from '../ui';
+import { Grid, GridItem } from '@patternfly/react-core';
+import { ProgressBarTexts } from './ProgressBarTexts';
+import { FinalizingProgress } from './FinalizingProgress';
+import OperatorsProgressItem from './OperatorsProgressItem';
+import React from 'react';
+import { Cluster } from '../../api';
+import { EventListFetchProps } from '../../types';
+import { selectOlmOperators } from '../../../common';
+
+type ClusterProgressItemsProps = {
+  cluster: Cluster;
+  minimizedView?: boolean;
+  onFetchEvents: EventListFetchProps['onFetchEvents'];
+  totalPercentage?: number;
+  fallbackEventsURL?: string;
+};
+
+const ClusterProgressItems = ({
+  cluster,
+  minimizedView = false,
+  onFetchEvents,
+  fallbackEventsURL,
+}: ClusterProgressItemsProps) => {
+  const enabledHosts = getEnabledHosts(cluster.hosts);
+  const olmOperators = selectOlmOperators(cluster);
+
+  const masterHosts = enabledHosts.filter((host) => host.role && 'master' === host.role);
+  const workerHosts = enabledHosts.filter((host) => host.role && 'worker' === host.role);
+
+  return (
+    <>
+      <RenderIf condition={!minimizedView}>
+        <Grid hasGutter>
+          <GridItem span={3}>
+            <ProgressBarTexts hosts={masterHosts} hostRole="master" />
+          </GridItem>
+          <RenderIf condition={workerHosts.length > 0}>
+            <GridItem span={3}>
+              <ProgressBarTexts hosts={workerHosts} hostRole="worker" />
+            </GridItem>
+          </RenderIf>
+          <GridItem span={3}>
+            <FinalizingProgress
+              cluster={cluster}
+              onFetchEvents={onFetchEvents}
+              fallbackEventsURL={fallbackEventsURL}
+            />
+          </GridItem>
+          <RenderIf condition={olmOperators.length > 0}>
+            <GridItem span={3}>
+              <OperatorsProgressItem
+                operators={olmOperators}
+                openshiftVersion={cluster.openshiftVersion}
+              />
+            </GridItem>
+          </RenderIf>
+        </Grid>
+      </RenderIf>
+    </>
+  );
+};
+
+export default ClusterProgressItems;

package/lib/common/components/clusterDetail/ClusterPropertiesList.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import {
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Grid,
+  GridItem,
+} from '@patternfly/react-core';
+import { DASH } from '../constants';
+
+type ClusterPropertyItem = {
+  key: string;
+  value?: React.ReactNode;
+};
+
+const ListItem = ({ item }: { item: ClusterPropertyItem }) => (
+  <DescriptionListGroup>
+    <DescriptionListTerm>{item.key}</DescriptionListTerm>
+    <DescriptionListDescription>{item.value || DASH}</DescriptionListDescription>
+  </DescriptionListGroup>
+);
+
+type ClusterPropertiesListProps = {
+  leftItems: ClusterPropertyItem[];
+  rightItems?: ClusterPropertyItem[];
+};
+
+const ClusterPropertiesList = ({ leftItems, rightItems = [] }: ClusterPropertiesListProps) => {
+  return (
+    <Grid hasGutter>
+      <GridItem span={rightItems.length ? 6 : 12}>
+        <DescriptionList>
+          {leftItems.map((item) => (
+            <ListItem key={item.key} item={item} />
+          ))}
+        </DescriptionList>
+      </GridItem>
+      {rightItems.length && (
+        <GridItem span={6}>
+          <DescriptionList>
+            {rightItems.map((item) => (
+              <ListItem key={item.key} item={item} />
+            ))}
+          </DescriptionList>
+        </GridItem>
+      )}
+    </Grid>
+  );
+};
+
+export default ClusterPropertiesList;