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

package/lib/common/components/hosts/HostValidationGroups.tsx

@@ -0,0 +1,303 @@
+import React, { Fragment, ReactElement } from 'react';
+import { Alert, AlertGroup, AlertVariant, Level, LevelItem } from '@patternfly/react-core';
+import {
+  global_warning_color_100 as warningColor,
+  global_success_color_100 as okColor,
+} from '@patternfly/react-tokens';
+import { PendingIcon, CheckCircleIcon, ExclamationTriangleIcon } from '@patternfly/react-icons';
+
+import { Host, HostValidationId } from '../../api';
+import { Validation, ValidationsInfo } from '../../types/hosts';
+import {
+  hostValidationFailureHints,
+  hostValidationGroupLabels,
+  hostValidationLabels,
+} from '../../config';
+import { toSentence } from '../ui';
+import Hostname from './Hostname';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+import { getKeys } from '../../utils';
+
+import './HostValidationGroups.css';
+
+export type AdditionNtpSourcePropsType = {
+  AdditionalNTPSourcesDialogToggleComponent?: React.FC;
+};
+
+export type UpdateDay2ApiVipPropsType = {
+  UpdateDay2ApiVipDialogToggleComponent?: React.FC;
+};
+
+export type InvalidHostnameActionProps = {
+  onEditHostname?: () => void;
+  host: Host;
+};
+
+export type ValidationInfoActionProps = AdditionNtpSourcePropsType &
+  InvalidHostnameActionProps &
+  UpdateDay2ApiVipPropsType;
+
+type HostValidationGroupsProps = ValidationInfoActionProps & {
+  validationsInfo: ValidationsInfo;
+};
+
+type ValidationGroupAlertProps = ValidationInfoActionProps & {
+  variant: AlertVariant;
+  validations: Validation[];
+  title: string;
+};
+
+const ValidationsAlert = ({
+  validations,
+  variant,
+  title,
+  actionLinks = [],
+}: {
+  validations: Validation[];
+  variant: AlertVariant;
+  title: string;
+  actionLinks?: ReactElement[];
+}) => {
+  const { t } = useTranslation();
+  return (
+    <Alert title={title} variant={variant} actionLinks={actionLinks} isInline>
+      <ul>
+        {validations.map((v) => (
+          <li key={v.id}>
+            <strong>{hostValidationLabels(t)[v.id] || v.id}:</strong>&nbsp;{toSentence(v.message)}{' '}
+            {v.status === 'failure' && hostValidationFailureHints(t)[v.id]}
+          </li>
+        ))}
+      </ul>
+    </Alert>
+  );
+};
+
+const HostnameAlert = ({
+  onEditHostname,
+  host,
+  hostnameValidations,
+  variant,
+}: Required<InvalidHostnameActionProps> & {
+  hostnameValidations: Validation[];
+  variant: AlertVariant;
+}) => {
+  const { t } = useTranslation();
+  const actionLinks = [
+    <Hostname
+      key="change-hostname"
+      title={t('ai:Change hostname')}
+      onEditHostname={onEditHostname}
+      host={host}
+    />,
+  ];
+  const title = t('ai:Illegal hostname');
+  return hostnameValidations.length === 1 ? (
+    <Alert title={title} variant={variant} actionLinks={actionLinks} isInline>
+      {toSentence(hostnameValidations[0].message)}
+    </Alert>
+  ) : (
+    <ValidationsAlert
+      title={title}
+      validations={hostnameValidations}
+      variant={variant}
+      actionLinks={actionLinks}
+    />
+  );
+};
+
+const NtpSyncAlert = ({
+  AdditionalNTPSourcesDialogToggleComponent,
+  variant,
+  validation,
+}: Required<AdditionNtpSourcePropsType> & { variant: AlertVariant; validation: Validation }) => {
+  const actionLinks = [<AdditionalNTPSourcesDialogToggleComponent key="add-ntp-sources" />];
+  const { t } = useTranslation();
+  return (
+    <Alert
+      title={t('ai:NTP synchronization failure')}
+      variant={variant}
+      actionLinks={actionLinks}
+      isInline
+    >
+      {toSentence(validation.message)} {hostValidationFailureHints(t)[validation.id]}
+    </Alert>
+  );
+};
+
+const ApiVipConnectivityAlert = ({
+  UpdateDay2ApiVipDialogToggleComponent,
+  variant,
+  validation,
+}: Required<UpdateDay2ApiVipPropsType> & { variant: AlertVariant; validation: Validation }) => {
+  const actionLinks = [<UpdateDay2ApiVipDialogToggleComponent key="update-api-vip" />];
+  const { t } = useTranslation();
+  return (
+    <Alert
+      title={t('ai:API connectivity failure')}
+      variant={variant}
+      actionLinks={actionLinks}
+      isInline
+    >
+      {toSentence(validation.message)}
+    </Alert>
+  );
+};
+
+const ValidationGroupAlerts = ({
+  validations,
+  title,
+  variant,
+  onEditHostname,
+  AdditionalNTPSourcesDialogToggleComponent,
+  UpdateDay2ApiVipDialogToggleComponent,
+  host,
+}: ValidationGroupAlertProps) => {
+  if (!validations.length) {
+    return null;
+  }
+  const validationsWithActions: { [id in HostValidationId]?: Validation } = {
+    ['hostname-unique']: undefined,
+    ['hostname-valid']: undefined,
+    ['ntp-synced']: undefined,
+    ['ignition-downloadable']: undefined,
+  };
+  const alerts = [];
+  const validationsWithoutActions: Validation[] = [];
+  for (const v of validations) {
+    if (v.id in validationsWithActions && v.status === 'failure') {
+      validationsWithActions[v.id] = v;
+    } else {
+      validationsWithoutActions.push(v);
+    }
+  }
+  const hostnameValidations: Validation[] = [];
+  if (validationsWithActions['hostname-unique']) {
+    hostnameValidations.push(validationsWithActions['hostname-unique']);
+  }
+  if (validationsWithActions['hostname-valid']) {
+    hostnameValidations.push(validationsWithActions['hostname-valid']);
+  }
+  if (hostnameValidations.length > 0 && onEditHostname) {
+    alerts.push(
+      <HostnameAlert
+        hostnameValidations={hostnameValidations}
+        variant={variant}
+        onEditHostname={onEditHostname}
+        host={host}
+        key="hostname-alert"
+      />,
+    );
+  }
+  if (validationsWithActions['ignition-downloadable'] && UpdateDay2ApiVipDialogToggleComponent) {
+    alerts.push(
+      <ApiVipConnectivityAlert
+        UpdateDay2ApiVipDialogToggleComponent={UpdateDay2ApiVipDialogToggleComponent}
+        validation={validationsWithActions['ignition-downloadable']}
+        variant={variant}
+        key="ignition-downloadable-alert"
+      />,
+    );
+  }
+  if (validationsWithActions['ntp-synced'] && AdditionalNTPSourcesDialogToggleComponent) {
+    alerts.push(
+      <NtpSyncAlert
+        AdditionalNTPSourcesDialogToggleComponent={AdditionalNTPSourcesDialogToggleComponent}
+        validation={validationsWithActions['ntp-synced']}
+        variant={variant}
+        key="ntp-sync-alert"
+      />,
+    );
+  }
+  if (validationsWithoutActions.length > 0) {
+    alerts.push(
+      <ValidationsAlert
+        validations={validationsWithoutActions}
+        variant={variant}
+        title={title}
+        key="insufficient-alert"
+      />,
+    );
+  }
+  return <AlertGroup>{alerts}</AlertGroup>;
+};
+
+export const HostValidationGroups = ({ validationsInfo, ...props }: HostValidationGroupsProps) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      {getKeys(validationsInfo).map((groupName) => {
+        const validations = validationsInfo[groupName] || [];
+
+        const pendingValidations = validations.filter(
+          (v) => v.status === 'pending' && v.id !== 'ntp-synced',
+        );
+        const failedValidations = validations.filter(
+          (v) => (v.status === 'failure' || v.status === 'error') && v.id !== 'ntp-synced',
+        );
+
+        const softValidations = validations.filter(
+          (v) => ['pending', 'failure', 'error'].includes(v.status) && v.id === 'ntp-synced',
+        );
+
+        const getValidationGroupState = () => {
+          if (failedValidations.length) {
+            return (
+              <>
+                {t('ai:Failed')} <ExclamationTriangleIcon color={warningColor.value} />
+              </>
+            );
+          } else if (pendingValidations.length) {
+            return (
+              <>
+                {t('ai:Pending input')} <PendingIcon />
+              </>
+            );
+          }
+          return (
+            <>
+              {t('ai:Ready')} <CheckCircleIcon color={okColor.value} />
+            </>
+          );
+        };
+
+        const groupLabel = hostValidationGroupLabels(t)[groupName] as string;
+        return (
+          <Fragment key={groupName}>
+            <Level className="host-validation-groups__validation-group">
+              <LevelItem>
+                <strong>{groupLabel}</strong>
+              </LevelItem>
+              <LevelItem>{getValidationGroupState()}</LevelItem>
+            </Level>
+            {
+              // display pending and soft validations only if there are no failing validations
+              !failedValidations.length && (
+                <>
+                  <ValidationGroupAlerts
+                    variant={AlertVariant.info}
+                    title={t('ai:Pending validations:')}
+                    validations={pendingValidations}
+                    {...props}
+                  />
+                  <ValidationGroupAlerts
+                    variant={AlertVariant.info}
+                    validations={softValidations}
+                    title={''}
+                    {...props}
+                  />
+                </>
+              )
+            }
+            <ValidationGroupAlerts
+              variant={AlertVariant.warning}
+              title={t('ai:Failed validations:')}
+              validations={failedValidations}
+              {...props}
+            />
+          </Fragment>
+        );
+      })}
+    </>
+  );
+};

package/lib/common/components/hosts/Hostname.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Button, ButtonVariant, Flex, FlexItem, Popover } from '@patternfly/react-core';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons';
+import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens';
+import { Host, Inventory, stringToJSON } from '../../api';
+import { getHostname } from './utils';
+import { DASH } from '../constants';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+
+type HostnameProps = {
+  host: Host;
+  onEditHostname?: () => void;
+  className?: string;
+  // Provide either inventory or title
+  inventory?: Inventory;
+  title?: string;
+  hosts?: Host[];
+  readonly?: boolean;
+};
+
+const Hostname: React.FC<HostnameProps> = ({
+  host,
+  inventory = {},
+  onEditHostname,
+  title,
+  className,
+  hosts,
+  readonly = false,
+}) => {
+  const hostname = title || getHostname(host, inventory) || DASH;
+
+  const isNotLocalhost = hostname !== 'localhost';
+  const isUnique = hosts
+    ? !hosts.find((h) => {
+        const hostInventory = stringToJSON<Inventory>(h.inventory || '') || {};
+        return h.id !== host.id && getHostname(h, hostInventory) === hostname;
+      })
+    : true;
+
+  const isValid = isUnique && isNotLocalhost;
+
+  const body = (
+    <Flex alignItems={{ default: 'alignItemsCenter' }}>
+      {onEditHostname && !isValid && (
+        <FlexItem className={'pf-u-mr-xs'}>
+          <ExclamationTriangleIcon color={warningColor.value} />
+        </FlexItem>
+      )}
+      <FlexItem>{hostname}</FlexItem>
+    </Flex>
+  );
+  const { t } = useTranslation();
+  return !readonly && onEditHostname ? (
+    isValid ? (
+      <Button variant={ButtonVariant.link} isInline onClick={onEditHostname} className={className}>
+        {body}
+      </Button>
+    ) : (
+      <Popover
+        headerContent={
+          <Flex alignItems={{ default: 'alignItemsCenter' }}>
+            <FlexItem className={'pf-u-mr-xs'}>
+              <ExclamationTriangleIcon color={warningColor.value} />
+            </FlexItem>
+            <FlexItem>{t('ai:Hostname is not valid')}</FlexItem>
+          </Flex>
+        }
+        bodyContent={
+          !isNotLocalhost ? t('ai:Hostname can not be localhost') : t('ai:Hostname is not unique')
+        }
+        footerContent={
+          <Button
+            variant={ButtonVariant.link}
+            isInline
+            className={className}
+            onClick={onEditHostname}
+          >
+            {t('ai:Change hostname')}
+          </Button>
+        }
+        minWidth="30rem"
+        maxWidth="50rem"
+        hideOnOutsideClick
+        zIndex={300}
+      >
+        <Button variant={ButtonVariant.link} isInline className={className}>
+          {body}
+        </Button>
+      </Popover>
+    )
+  ) : (
+    body
+  );
+};
+export default Hostname;

package/lib/common/components/hosts/HostsCount.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Popover, Level, LevelItem } from '@patternfly/react-core';
+import { Cluster } from '../../api';
+import { getEnabledHostCount, getReadyHostCount, getTotalHostCount } from './utils';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+
+type HostsCountProps = {
+  cluster: Cluster;
+  inParenthesis?: boolean;
+  valueId?: string;
+};
+
+const HostsCount: React.FC<HostsCountProps> = ({
+  cluster,
+  inParenthesis = false,
+  valueId = 'hosts-count',
+}) => {
+  const { t } = useTranslation();
+  const body = (
+    <>
+      {'readyHostCount' in cluster && (
+        <Level>
+          <LevelItem>{t('ai:Ready for the installation')}</LevelItem>
+          <LevelItem>{getReadyHostCount(cluster)}</LevelItem>
+        </Level>
+      )}
+      {'enabledHostCount' in cluster && (
+        <Level>
+          <LevelItem>{t('ai:Enabled for the installation')}</LevelItem>
+          <LevelItem>{getEnabledHostCount(cluster)}</LevelItem>
+        </Level>
+      )}
+      <Level>
+        <LevelItem>{t('ai:All discovered')}</LevelItem>
+        <LevelItem>{getTotalHostCount(cluster)}</LevelItem>
+      </Level>
+    </>
+  );
+
+  const summary =
+    'enabledHostCount' in cluster ? getEnabledHostCount(cluster) : getTotalHostCount(cluster);
+  return (
+    <Popover headerContent={t('ai:Hosts in the cluster')} bodyContent={body}>
+      <a id={valueId}>
+        {inParenthesis && '('}
+        {summary}
+        {inParenthesis && ')'}
+      </a>
+    </Popover>
+  );
+};
+
+export default HostsCount;

package/lib/common/components/hosts/HostsTable.css

@@ -0,0 +1,15 @@
+.host-table-alerts {
+  padding-top: var(--pf-global--spacer--lg) !important;
+}
+
+.hosts-table .pf-c-dropdown__toggle-text {
+  color: var(--pf-global--Color--100) !important;
+}
+
+.hosts-table button {
+  font-size: var(--pf-c-table-cell--FontSize);
+}
+
+.hosts-table {
+  height: 1rem; /* Workaround for: https://bugzilla.redhat.com/show_bug.cgi?id=1879378 in FF; The actual table height will be recalculated accordingly. */
+}

package/lib/common/components/hosts/HostsTable.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { ConnectedIcon } from '@patternfly/react-icons';
+import { HostsNotShowingLink, HostsNotShowingLinkProps } from '../clusterConfiguration';
+import { Host } from '../../api';
+import AITable, {
+  ExpandComponentProps,
+  AITableProps,
+} from '../../../common/components/hosts/AITable';
+import { HostDetail } from './HostRowDetail';
+import { WithTestID } from '../../types';
+import EmptyState from '../ui/uiState/EmptyState';
+import { usePagination } from './usePagination';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+
+const getHostId = (host: Host) => host.id;
+
+type HostsTableEmptyStateProps = {
+  setDiscoveryHintModalOpen?: HostsNotShowingLinkProps['setDiscoveryHintModalOpen'];
+  isSNO?: boolean;
+};
+
+export const HostsTableEmptyState = ({
+  setDiscoveryHintModalOpen,
+  isSNO = false,
+}: HostsTableEmptyStateProps) => {
+  const { t } = useTranslation();
+  return (
+    <EmptyState
+      icon={ConnectedIcon}
+      title={t('ai:Waiting for host...', { count: +isSNO })}
+      content={t('ai:Hosts may take a few minutes to appear here after booting.')}
+      secondaryActions={
+        setDiscoveryHintModalOpen && [
+          <HostsNotShowingLink
+            key="hosts-not-showing"
+            isSNO={isSNO}
+            setDiscoveryHintModalOpen={setDiscoveryHintModalOpen}
+          />,
+        ]
+      }
+    />
+  );
+};
+
+export const DefaultExpandComponent = ({ obj }: ExpandComponentProps<Host>) => (
+  <HostDetail key={obj.id} host={obj} />
+);
+
+type HostsTableProps = ReturnType<typeof usePagination> &
+  Pick<
+    AITableProps<Host>,
+    | 'content'
+    | 'actionResolver'
+    | 'onSelect'
+    | 'selectedIDs'
+    | 'setSelectedIDs'
+    | 'ExpandComponent'
+    | 'className'
+    | 'canSelectAll'
+    | 'variant'
+  > & {
+    hosts: Host[];
+    skipDisabled?: boolean;
+    children: React.ReactNode;
+  };
+
+const HostsTable = ({ hosts, skipDisabled, ...rest }: HostsTableProps & WithTestID) => {
+  const data = React.useMemo(
+    () =>
+      (hosts || [])
+        .filter((host) => !skipDisabled || host.status !== 'disabled')
+        .sort((a, b) => (a.createdAt && b.createdAt && a.createdAt < b.createdAt ? -1 : 1)),
+    [hosts, skipDisabled],
+  );
+
+  return <AITable<Host> getDataId={getHostId} data={data} {...rest} />;
+};
+
+export default HostsTable;

package/lib/common/components/hosts/HostsTableDetailContext.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { OnDiskRoleType } from './DiskRole';
+import { HostsTableActions } from './types';
+
+type HostsTableDetailContextValue = {
+  onDiskRole: OnDiskRoleType | undefined;
+  canEditDisks: HostsTableActions['canEditDisks'];
+  updateDiskSkipFormatting?: HostsTableActions['updateSkipFormatting'];
+};
+
+const HostsTableDetailContext = React.createContext<HostsTableDetailContextValue | undefined>(
+  undefined,
+);
+
+const HostsTableDetailContextProvider: React.FC<HostsTableDetailContextValue> = ({
+  canEditDisks,
+  onDiskRole,
+  updateDiskSkipFormatting,
+  children,
+}) => {
+  const context = {
+    canEditDisks,
+    onDiskRole,
+    updateDiskSkipFormatting,
+  };
+
+  return (
+    <HostsTableDetailContext.Provider value={context as HostsTableDetailContextValue}>
+      {children}
+    </HostsTableDetailContext.Provider>
+  );
+};
+
+const useHostsTableDetailContext = () => {
+  const context = React.useContext(HostsTableDetailContext);
+  if (context === undefined) {
+    throw new Error(
+      'useHostTableDetailContext must be used within a HostsTableDetailContextProvider',
+    );
+  }
+  return context;
+};
+
+export { HostsTableDetailContextProvider, useHostsTableDetailContext };

package/lib/common/components/hosts/MassChangeHostnameModal.css

@@ -0,0 +1,16 @@
+.hostname-preview {
+  background-color: var(--pf-global--BackgroundColor--200);
+  padding: var(--pf-global--spacer--sm);
+  max-height: 10rem;
+  overflow-y: auto;
+}
+
+.hostname-column__text {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.hostname-column {
+  max-width: 30%;
+}