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

package/lib/common/components/clusterConfiguration/DiscoveryTroubleshootingModal.tsx

@@ -0,0 +1,244 @@
+import React from 'react';
+import {
+  Button,
+  Modal,
+  ButtonVariant,
+  ModalVariant,
+  Text,
+  TextVariants,
+  List,
+  ListComponent,
+  ListItem,
+  OrderType,
+  HelperText,
+  HelperTextItem,
+} from '@patternfly/react-core';
+import { InfoCircleIcon } from '@patternfly/react-icons';
+import { PrismCode, SimpleAIPrismTheme } from '../ui';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+import { Trans } from 'react-i18next';
+import { saveAs } from 'file-saver';
+import { CHANGE_ISO_PASSWORD_FILE_LINK } from '../../config/constants';
+import * as Sentry from '@sentry/browser';
+
+export const DiscoveryTroubleshootingModalContent = () => {
+  const { t } = useTranslation();
+
+  const downloadIsoPasswordScript = async () => {
+    try {
+      const response = await fetch(CHANGE_ISO_PASSWORD_FILE_LINK);
+      const fileContent = await response.text();
+      const blob = new Blob([fileContent], { type: 'text/plain;charset=utf-8' });
+      saveAs(blob, 'change-iso-password.sh');
+    } catch (error) {
+      Sentry.captureException(error);
+    }
+  };
+
+  return (
+    <List component={ListComponent.ol} type={OrderType.number}>
+      <ListItem>
+        <Text component={TextVariants.p}>{t('ai:The host machine is powered on')}</Text>
+        <HelperText>
+          <HelperTextItem variant="indeterminate">
+            {t(
+              'ai:Boot time depends on several factors such as your hardware and network configuration, and if you are booting from an ISO.',
+            )}
+          </HelperTextItem>
+        </HelperText>
+      </ListItem>
+      <ListItem>
+        <Text component={TextVariants.p}>
+          {t('ai:If you used DHCP networking, verify that your DHCP server is enabled')}
+        </Text>
+      </ListItem>
+      <ListItem>
+        <Text component={TextVariants.p}>
+          {t(
+            'ai:If you used static IP, bridges, and bonds networking, verify that your configurations are correct',
+          )}
+        </Text>
+      </ListItem>
+      <ListItem>
+        <Text component={TextVariants.p}>{t('ai:SSH into your machine')}</Text>
+        <HelperText>
+          <HelperTextItem variant="indeterminate">
+            {t(
+              'ai:Verify that you can access your host machine using SSH, or a console such as BMC or virtual machine console. In the CLI, enter the following command:',
+            )}
+          </HelperTextItem>
+        </HelperText>
+        <PrismCode theme={SimpleAIPrismTheme} code="ssh -i <identity_file> core@<machine-ip>" />
+        <HelperText>
+          <HelperTextItem variant="indeterminate">
+            {t(
+              'ai:Authentication is provided by the discovery ISO, therefore when you access your host using SSH, a password is not required. Optional -i parameter can be used to specify the private key that matches the public key provided when generating Discovery ISO.',
+            )}
+          </HelperTextItem>
+        </HelperText>
+      </ListItem>
+      <ListItem>
+        <Text component={TextVariants.p}>
+          {t('ai:Unable to SSH into your hosts through the network?')}
+        </Text>
+        <HelperText>
+          <HelperTextItem variant="indeterminate">
+            {t(
+              'ai:Try logging into the machine directly through physical access, out-of-band management, or a virtual machine console. To generate a new bootable image file with password-based login enabled, download the full image file and patch it locally with a login password of your choice using',
+            )}{' '}
+            <Button
+              variant={ButtonVariant.link}
+              onClick={() => {
+                void downloadIsoPasswordScript();
+              }}
+              data-testid="download-script-btn"
+              isInline
+            >
+              {t('ai:this script.')}
+            </Button>
+          </HelperTextItem>
+        </HelperText>
+        <HelperText>
+          <HelperTextItem variant="indeterminate">
+            {t('ai:Run these commands to use the script:')}
+          </HelperTextItem>
+        </HelperText>
+        <PrismCode
+          theme={SimpleAIPrismTheme}
+          code={`chmod +x ./change-iso-password.sh
+./change-iso-password.sh <path_to_your_iso_file>`}
+        />
+      </ListItem>
+      <ListItem>
+        <Text component={TextVariants.p}>
+          {t('ai:The discovery agent is running with the correct parameters')}
+        </Text>
+        <PrismCode theme={SimpleAIPrismTheme} code={`ps -ef | grep agent`} />
+        <HelperText>
+          <HelperTextItem variant="indeterminate">
+            {t('ai:The output displays the following:')}
+          </HelperTextItem>
+        </HelperText>
+        <PrismCode
+          theme={SimpleAIPrismTheme}
+          code={`root        1786       1  0 08:03 ?        00:00:00 /usr/local/bin/agent --url https://api.openshift.com --cluster-id e4c85fbe-77c7-411e-b107-5120f615c4fb --agent-version registry.redhat.io/openshift4/assisted-installer-agent-rhel8:v4.6.0-17 --insecure=false
+core        2362    2311  0 08:04 pts/0    00:00:00 grep --color=auto agent`}
+        />
+      </ListItem>
+      <ListItem>
+        <Text component={TextVariants.p}>{t('ai:The agent ran successfully')}</Text>
+        <HelperText>
+          <HelperTextItem variant="indeterminate">
+            {t('ai:To verify that the agent ran successfully, check the logs:')}
+          </HelperTextItem>
+        </HelperText>
+        <PrismCode theme={SimpleAIPrismTheme} code="sudo journalctl -u agent.service" />
+        <HelperText>
+          <HelperTextItem variant="indeterminate">
+            {t('ai:In the following example, the errors indicate there is a network issue:')}
+          </HelperTextItem>
+        </HelperText>
+        <PrismCode
+          theme={{ ...SimpleAIPrismTheme, styles: [] }}
+          code={`Oct 15 11:26:35 localhost systemd[1]: agent.service: Service RestartSec=3s expired, scheduling restart.
+Oct 15 11:26:35 localhost systemd[1]: agent.service: Scheduled restart job, restart counter is at 9.
+Oct 15 11:26:35 localhost systemd[1]: Stopped agent.service.
+Oct 15 11:26:35 localhost systemd[1]: Starting agent.service...
+Oct 15 11:26:35 localhost podman[1834]: Trying to pull quay.io/ocpmetal/assisted-installer-agent:latest...
+Oct 15 11:26:35 localhost podman[1834]:   Get "https://quay.io/v2/": dial tcp: lookup quay.io on [::1]:53: read udp [::1]:58297->[::1]:53: read: connection refused
+Oct 15 11:26:35 localhost podman[1834]: Error: unable to pull quay.io/ocpmetal/assisted-installer-agent:latest: unable to pull image: Error initializing source docker://quay.io/ocpmetal/assisted-installer-agent:latest: error pinging dock>
+Oct 15 11:26:35 localhost systemd[1]: agent.service: Control process exited, code=exited status=125
+Oct 15 11:26:35 localhost systemd[1]: agent.service: Failed with result 'exit-code'.
+Oct 15 11:26:35 localhost systemd[1]: Failed to start agent.service.`}
+        />
+        <HelperText>
+          <HelperTextItem variant="indeterminate">
+            <Trans
+              t={t}
+              components={{ code: <code /> }}
+              i18nKey="ai:Check the proxy settings and verify that the assisted installer service is connected to a network. You can use <code>nmcli</code> to get additional information about your network configuration."
+            />
+          </HelperTextItem>
+        </HelperText>
+      </ListItem>
+      <ListItem>
+        <Text component={TextVariants.p}>{t('ai:Check agent logs')}</Text>
+        <HelperText>
+          <HelperTextItem variant="indeterminate">
+            {t('ai:To view detailed agent logs and communication use following command:')}
+          </HelperTextItem>
+        </HelperText>
+        <PrismCode theme={SimpleAIPrismTheme} code="sudo journalctl TAG=agent | less" />
+      </ListItem>
+      <ListItem>
+        <Text component={TextVariants.p}>{t('ai:Check assisted-installer logs')}</Text>
+        <PrismCode
+          theme={SimpleAIPrismTheme}
+          code={`sudo su
+podman ps -a | grep assisted-installer
+podman logs <container id>`}
+        />
+      </ListItem>
+      <ListItem>
+        <Text component={TextVariants.p}>{t('ai:Check bootkube logs')}</Text>
+        <PrismCode theme={SimpleAIPrismTheme} code={`sudo journalctl -u bootkube`} />
+      </ListItem>
+    </List>
+  );
+};
+
+export type HostsNotShowingLinkProps = {
+  setDiscoveryHintModalOpen: (isOpen: boolean) => void;
+  isSNO?: boolean;
+  isInline?: boolean;
+};
+
+type DiscoveryTroubleshootingModalProps = {
+  setDiscoveryHintModalOpen: (isOpen: boolean) => void;
+  isOpen: boolean;
+};
+
+export const HostsNotShowingLink = ({
+  setDiscoveryHintModalOpen,
+  isSNO = false,
+  isInline = false,
+}: HostsNotShowingLinkProps) => {
+  const { t } = useTranslation();
+  return (
+    <Button variant={ButtonVariant.link} onClick={() => setDiscoveryHintModalOpen(true)} isInline>
+      {!isInline && (
+        <>
+          <InfoCircleIcon size="sm" />
+          &nbsp;
+        </>
+      )}
+      {t('ai:Host not showing up?', { count: +isSNO })}
+    </Button>
+  );
+};
+
+export const DiscoveryTroubleshootingModal = ({
+  setDiscoveryHintModalOpen,
+  isOpen,
+}: DiscoveryTroubleshootingModalProps) => {
+  const onClose = React.useCallback(
+    () => setDiscoveryHintModalOpen(false),
+    [setDiscoveryHintModalOpen],
+  );
+  const { t } = useTranslation();
+  return (
+    <Modal
+      title={t('ai:Hosts not showing up troubleshooter')}
+      isOpen={isOpen}
+      actions={[
+        <Button key="close" variant={ButtonVariant.primary} onClick={onClose}>
+          {t('ai:Close')}
+        </Button>,
+      ]}
+      onClose={onClose}
+      variant={ModalVariant.large}
+    >
+      <DiscoveryTroubleshootingModalContent />
+    </Modal>
+  );
+};

package/lib/common/components/clusterConfiguration/DiskEncryptionFields/DiskEncryptionControlGroup.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import isEqual from 'lodash-es/isEqual.js';
+import { Alert, AlertVariant, FlexItem, FormGroup, Stack, StackItem } from '@patternfly/react-core';
+import SwitchField from '../../ui/formik/SwitchField';
+import { DiskEncryptionMode } from './DiskEncryptionMode';
+import { RenderIf } from '../../ui';
+import { DiskEncryptionValues, TangServer } from './DiskEncryptionValues';
+import { useFormikContext } from 'formik';
+import { ClusterDetailsValues } from '../../clusterWizard/types';
+import { useTranslation } from '../../../hooks/use-translation-wrapper';
+
+const hasFilledTangServers = (tangServers: TangServer[]): boolean => {
+  if (!tangServers || tangServers.length === 0) {
+    return false;
+  }
+
+  const emptyServer = {
+    url: '',
+    thumbprint: '',
+  };
+  return (
+    tangServers.find(
+      (server: (typeof tangServers)[number]) =>
+        !isEqual(server, emptyServer) && !isEqual(server, {}),
+    ) !== undefined
+  );
+};
+
+export interface DiskEncryptionControlGroupProps {
+  values: DiskEncryptionValues;
+  isSNO: boolean;
+  isDisabled?: boolean;
+}
+
+const DiskEncryptionControlGroup = ({
+  values,
+  isSNO = false,
+  isDisabled = false,
+}: DiskEncryptionControlGroupProps) => {
+  const {
+    enableDiskEncryptionOnMasters,
+    enableDiskEncryptionOnWorkers,
+    diskEncryptionMode,
+    diskEncryptionTangServers,
+  } = values;
+
+  const hasEnabledDiskEncryption = enableDiskEncryptionOnMasters || enableDiskEncryptionOnWorkers;
+  const { setFieldValue, setFieldTouched } = useFormikContext<ClusterDetailsValues>();
+
+  React.useEffect(() => {
+    if (!enableDiskEncryptionOnWorkers && !enableDiskEncryptionOnMasters) {
+      if (diskEncryptionMode !== 'tpmv2') {
+        setFieldValue('diskEncryptionMode', 'tpmv2');
+      }
+      if (hasFilledTangServers(diskEncryptionTangServers)) {
+        setFieldTouched('diskEncryptionTangServers', false, false);
+        setFieldValue('diskEncryptionTangServers', [{}], false);
+      }
+    }
+  }, [
+    enableDiskEncryptionOnMasters,
+    enableDiskEncryptionOnWorkers,
+    diskEncryptionMode,
+    diskEncryptionTangServers,
+    setFieldTouched,
+    setFieldValue,
+  ]);
+
+  React.useEffect(() => {
+    if (isSNO) {
+      setFieldValue('enableDiskEncryptionOnWorkers', false);
+    }
+  }, [isSNO, setFieldValue]);
+  const { t } = useTranslation();
+  const disableMessage = t('ai:This option is not editable after the draft cluster is created');
+  const tooltipProps = {
+    hidden: !isDisabled,
+    content: disableMessage,
+  };
+
+  return (
+    <FormGroup label="Encryption of installation disks">
+      <Stack hasGutter>
+        <StackItem>
+          <SwitchField
+            tooltipProps={tooltipProps}
+            name="enableDiskEncryptionOnMasters"
+            label={isSNO ? t('ai:Control plane node, worker') : t('ai:Control plane nodes')}
+            isDisabled={isDisabled}
+          />
+        </StackItem>
+        <RenderIf condition={!isSNO}>
+          <StackItem>
+            <SwitchField
+              tooltipProps={tooltipProps}
+              name="enableDiskEncryptionOnWorkers"
+              isDisabled={isDisabled}
+              label={t('ai:Workers')}
+            />
+          </StackItem>
+        </RenderIf>
+        <RenderIf
+          condition={enableDiskEncryptionOnMasters || (enableDiskEncryptionOnWorkers && !isSNO)}
+        >
+          <StackItem>
+            <DiskEncryptionMode diskEncryptionMode={diskEncryptionMode} isDisabled={isDisabled} />
+          </StackItem>
+        </RenderIf>
+      </Stack>
+      {hasEnabledDiskEncryption && (
+        <Alert
+          variant={AlertVariant.warning}
+          data-testid="alert-tpmv2-bios"
+          isInline
+          title={
+            <FlexItem>
+              {diskEncryptionMode === 'tpmv2' && (
+                <>
+                  To use this encryption method, enable TPMv2 encryption in the BIOS of each
+                  selected host.
+                </>
+              )}
+              {diskEncryptionMode === 'tang' && (
+                <>
+                  The use of Tang encryption mode to encrypt your disks is only supported for bare
+                  metal or vSphere installations on user-provisioned infrastructure.
+                </>
+              )}
+            </FlexItem>
+          }
+        />
+      )}
+    </FormGroup>
+  );
+};
+
+export default DiskEncryptionControlGroup;

package/lib/common/components/clusterConfiguration/DiskEncryptionFields/DiskEncryptionMode.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import {
+  Flex,
+  FlexItem,
+  Stack,
+  StackItem,
+  Text,
+  TextVariants,
+  TextContent,
+} from '@patternfly/react-core';
+import { ENCRYPTING_DISK_DURING_INSTALLATION } from '../../../config';
+import PopoverIcon from '../../ui/PopoverIcon';
+import { RadioField } from '../../ui/formik';
+import { TangServers } from './TangServers';
+import { DiskEncryption } from '../../../api';
+import { useTranslation } from '../../../hooks/use-translation-wrapper';
+
+const DiskEncryptionModeTPMv2 = () => {
+  const { t } = useTranslation();
+  return (
+    <>
+      TPM v2{' '}
+      <PopoverIcon
+        component={'a'}
+        minWidth="22rem"
+        bodyContent={
+          <p>
+            {t(
+              'ai:TPM v2 stores passphrases in a secure cryptoprocessor contained within as server.',
+            )}
+            &nbsp;
+            <a href={ENCRYPTING_DISK_DURING_INSTALLATION} target="_blank" rel="noopener noreferrer">
+              {t('ai:Learn more')} <ExternalLinkAltIcon />
+            </a>
+          </p>
+        }
+      />
+    </>
+  );
+};
+
+const DiskEncryptionModeTang = () => {
+  const { t } = useTranslation();
+  return (
+    <>
+      Tang{' '}
+      <PopoverIcon
+        component={'a'}
+        minWidth="25rem"
+        bodyContent={
+          <p>
+            {t('ai:Tang server component that enable network-bound disk encryption (NBDE).')} &nbsp;
+            <a href={ENCRYPTING_DISK_DURING_INSTALLATION} target="_blank" rel="noopener noreferrer">
+              {t('ai:Learn more')} <ExternalLinkAltIcon />
+            </a>
+          </p>
+        }
+      />
+    </>
+  );
+};
+
+export interface DiskEncryptionModeProps {
+  isDisabled: boolean;
+  diskEncryptionMode: DiskEncryption['mode'];
+}
+
+export const DiskEncryptionMode = ({ diskEncryptionMode, isDisabled }: DiskEncryptionModeProps) => {
+  const { t } = useTranslation();
+  return (
+    <Stack>
+      <StackItem>
+        <Flex>
+          <FlexItem spacer={{ default: 'spacer3xl' }}>
+            <RadioField
+              isDisabled={isDisabled}
+              name="diskEncryptionMode"
+              label={<DiskEncryptionModeTPMv2 />}
+              id="TPMV2-button"
+              value="tpmv2"
+            />
+          </FlexItem>
+          <FlexItem spacer={{ default: 'spacer3xl' }}>
+            <RadioField
+              isDisabled={isDisabled}
+              name="diskEncryptionMode"
+              label={<DiskEncryptionModeTang />}
+              id="tang-button"
+              value="tang"
+            />
+          </FlexItem>
+        </Flex>
+      </StackItem>
+      {diskEncryptionMode === 'tang' && (
+        <Stack>
+          &nbsp;
+          <StackItem>
+            <TextContent>
+              <Text component={TextVariants.h6}>{t('ai:Tang servers')}</Text>
+            </TextContent>
+          </StackItem>
+          &nbsp;
+          <TangServers isDisabled={isDisabled} />
+        </Stack>
+      )}
+    </Stack>
+  );
+};

package/lib/common/components/clusterConfiguration/DiskEncryptionFields/DiskEncryptionValues.ts

@@ -0,0 +1,13 @@
+import { DiskEncryption } from '../../../api';
+
+export type TangServer = {
+  url: string;
+  thumbprint: string;
+};
+
+export interface DiskEncryptionValues {
+  enableDiskEncryptionOnMasters?: boolean;
+  enableDiskEncryptionOnWorkers: boolean;
+  diskEncryptionMode: DiskEncryption['mode'];
+  diskEncryptionTangServers: TangServer[];
+}

package/lib/common/components/clusterConfiguration/DiskEncryptionFields/TangServers.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { FieldArray, useFormikContext } from 'formik';
+import { Stack, StackItem, TextInputTypes } from '@patternfly/react-core';
+import { ClusterDetailsValues } from '../../clusterWizard';
+import { InputField } from '../../ui';
+import { AddButton, RemovableField } from '../../ui/formik';
+import { useTranslation } from '../../../hooks/use-translation-wrapper';
+
+export const TangServers = ({ isDisabled = false }: { isDisabled: boolean }) => {
+  const { values } = useFormikContext<ClusterDetailsValues>();
+  const { t } = useTranslation();
+  return (
+    <FieldArray name="diskEncryptionTangServers">
+      {({ remove, push }) => (
+        <Stack hasGutter>
+          {values.diskEncryptionTangServers.map((tang, index) => (
+            <StackItem key={index}>
+              <RemovableField
+                hideRemoveButton={index === 0 || isDisabled}
+                onRemove={() => remove(index)}
+              >
+                <div>
+                  <InputField
+                    type={TextInputTypes.url}
+                    name={`diskEncryptionTangServers.${index}.url`}
+                    helperText={`Must start with "http://" or "https://". Optionally, end with ":<port>"`}
+                    label="Server URL"
+                    isRequired
+                    isDisabled={isDisabled}
+                  />
+                  &thinsp;
+                  <InputField
+                    type={TextInputTypes.text}
+                    name={`diskEncryptionTangServers.${index}.thumbprint`}
+                    label="Server Thumbprint"
+                    isRequired
+                    isDisabled={isDisabled}
+                  />
+                </div>
+              </RemovableField>{' '}
+            </StackItem>
+          ))}
+
+          {!isDisabled && (
+            <StackItem>
+              <AddButton onAdd={() => push({ url: '', thumbprint: '' })} isInline>
+                {t('ai:Add another Tang server')}
+              </AddButton>
+            </StackItem>
+          )}
+        </Stack>
+      )}
+    </FieldArray>
+  );
+};

package/lib/common/components/clusterConfiguration/DownloadIpxeScript.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { saveAs } from 'file-saver';
+import {
+  Alert,
+  Button,
+  ButtonVariant,
+  ClipboardCopy,
+  clipboardCopyFunc,
+  ModalBoxBody,
+  ModalBoxFooter,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { DetailItem, DetailList } from '../ui';
+import DiscoveryIpxeInstructions from './DiscoveryIpxeInstructions';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+
+export type DownloadISOProps = {
+  isSNO?: boolean;
+  fileName?: string;
+  downloadUrl?: string;
+  onClose: () => void;
+  onReset?: () => void;
+};
+
+const DownloadIpxeScript = ({
+  fileName = 'ipxe-script.txt',
+  downloadUrl,
+  onClose,
+  onReset,
+}: DownloadISOProps) => {
+  const wgetCommand = `wget -O ${fileName} '${downloadUrl || ''}'`;
+  const { t } = useTranslation();
+  return (
+    <>
+      <ModalBoxBody>
+        <Stack hasGutter>
+          <StackItem>
+            <Alert
+              isInline
+              variant="success"
+              title={t('ai:iPXE script file is ready to be downloaded')}
+            >
+              <>
+                &nbsp;
+                <DiscoveryIpxeInstructions />
+              </>
+            </Alert>
+          </StackItem>
+          <StackItem>
+            <DetailList>
+              <DetailItem
+                title={t('ai:iPXE script file URL')}
+                value={
+                  <ClipboardCopy
+                    isReadOnly
+                    onCopy={(event) => clipboardCopyFunc(event, downloadUrl)}
+                  >
+                    {downloadUrl}
+                  </ClipboardCopy>
+                }
+              />
+              <DetailItem
+                title={t('ai:Command to download the iPXE script file')}
+                value={
+                  <ClipboardCopy
+                    isReadOnly
+                    onCopy={(event) => clipboardCopyFunc(event, wgetCommand)}
+                  >
+                    {wgetCommand}
+                  </ClipboardCopy>
+                }
+              />
+            </DetailList>
+          </StackItem>
+        </Stack>
+      </ModalBoxBody>
+      <ModalBoxFooter>
+        <Button
+          variant={ButtonVariant.primary}
+          onClick={() => downloadUrl && saveAs(downloadUrl)}
+          data-testid="download-ipxe-btn"
+          isDisabled={!downloadUrl}
+        >
+          {t('ai:Download script file')}
+        </Button>
+        {onReset && (
+          <Button variant={ButtonVariant.secondary} onClick={onReset} data-testid="close-ipxe-btn">
+            {t('ai:Back')}
+          </Button>
+        )}
+        <Button variant={ButtonVariant.link} onClick={onClose} data-testid="edit-ipxe-btn">
+          {t('ai:Cancel')}
+        </Button>
+      </ModalBoxFooter>
+    </>
+  );
+};
+
+export default DownloadIpxeScript;