@openshift-assisted/ui-lib 2.17.0-cim → 2.17.3-cim

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

@@ -1,414 +1,9 @@
 import * as React from 'react';
-import { Label, LabelGroup } from '@patternfly/react-core';
-import { Address4, Address6 } from 'ip-address';
-import type {
-  Cluster,
-  Host,
-  HostUpdateParams,
-  Interface,
-} from '@openshift-assisted/types/assisted-installer-service';
-import type { ValidationsInfo as HostValidationsInfo } from '../../types/hosts';
-import { getSubnet } from '../clusterConfiguration';
-import { DASH } from '../constants';
-import { getDateTimeCell } from '../ui';
-import { ActionsResolver, TableRow } from './AITable';
-import { getHostRowHardwareInfo } from './hardwareInfo';
-import Hostname from './Hostname';
-import HostPropertyValidationPopover from './HostPropertyValidationPopover';
-import HostsCount from './HostsCount';
-import { HostsTableActions } from './types';
-import HostStatus from './HostStatus';
-import RoleCell from './RoleCell';
-import {
-  areOnlySoftValidationsFailing,
-  getHostLabels,
-  getHostname,
-  getHostRole,
-  getHostStatus,
-  getInventory,
-} from './utils';
-import { selectMachineNetworkCIDR } from '../../selectors/clusterSelectors';
-import { hostStatus } from './status';
 import { TFunction } from 'i18next';
-import { stringToJSON } from '../../utils';
-
-export const getSelectedNic = (nics: Interface[], currentSubnet: Address4 | Address6) => {
-  return nics.find((nic) => {
-    const ipv4Addresses = (nic.ipv4Addresses || []).reduce<Address4[]>((addresses, address) => {
-      if (Address4.isValid(address)) {
-        addresses.push(new Address4(address));
-      }
-      return addresses;
-    }, []);
-
-    if (ipv4Addresses.find((address) => address.isInSubnet(currentSubnet))) {
-      return true;
-    }
-
-    const ipv6Addresses = (nic.ipv6Addresses || []).reduce<Address6[]>((addresses, address) => {
-      if (Address6.isValid(address)) {
-        addresses.push(new Address6(address));
-      }
-      return addresses;
-    }, []);
-
-    return ipv6Addresses.find((address) => address.isInSubnet(currentSubnet));
-  });
-};
-
-export const hostnameColumn = (
-  t: TFunction,
-  onEditHostname?: HostsTableActions['onEditHost'],
-  hosts?: Host[],
-  canEditHostname?: HostsTableActions['canEditHostname'],
-): TableRow<Host> => {
-  return {
-    header: {
-      title: t('ai:Hostname'),
-      props: {
-        id: 'col-header-hostname', // ACM jest tests require id over testId
-      },
-      sort: true,
-    },
-    cell: (host) => {
-      const inventory = getInventory(host);
-      const editHostname = onEditHostname ? () => onEditHostname(host) : undefined;
-      const computedHostname = getHostname(host, inventory);
-      return {
-        title: (
-          <Hostname
-            host={host}
-            inventory={inventory}
-            onEditHostname={editHostname}
-            hosts={hosts}
-            readonly={canEditHostname ? !canEditHostname(host) : false}
-          />
-        ),
-        props: { 'data-testid': 'host-name' },
-        sortableValue: computedHostname || '',
-      };
-    },
-  };
-};
-
-export const roleColumn = (
-  t: TFunction,
-  canEditRole?: HostsTableActions['canEditRole'],
-  onEditRole?: HostsTableActions['onEditRole'],
-  schedulableMasters?: boolean,
-  clusterKind?: Cluster['kind'],
-): TableRow<Host> => {
-  return {
-    header: {
-      title: t('ai:Role'),
-      props: {
-        id: 'col-header-role',
-      },
-      sort: true,
-    },
-    cell: (host) => {
-      const editRole = onEditRole
-        ? (role: HostUpdateParams['hostRole']) => onEditRole(host, role)
-        : undefined;
-      const isRoleEditable = canEditRole?.(host);
-      const hostRole = getHostRole(host, t, schedulableMasters, clusterKind);
-      return {
-        title: (
-          <RoleCell host={host} readonly={!isRoleEditable} role={hostRole} onEditRole={editRole} />
-        ),
-        props: { 'data-testid': 'host-role' },
-        sortableValue: hostRole,
-      };
-    },
-  };
-};
-
-export const statusColumn = (
-  t: TFunction,
-  clusterStatus: Cluster['status'],
-  AdditionalNTPSourcesDialogToggleComponent?: React.FC,
-  onEditHostname?: HostsTableActions['onEditHost'],
-  UpdateDay2ApiVipDialogToggleComponent?: React.FC,
-): TableRow<Host> => {
-  return {
-    header: {
-      title: t('ai:Status'),
-      props: {
-        id: 'col-header-status',
-      },
-      sort: true,
-    },
-    cell: (host) => {
-      const validationsInfo = stringToJSON<HostValidationsInfo>(host.validationsInfo) || {};
-      const editHostname = onEditHostname ? () => onEditHostname(host) : undefined;
-      const sublabel =
-        areOnlySoftValidationsFailing(validationsInfo) &&
-        ['known', 'known-unbound'].includes(host.status)
-          ? t('ai:Some validations failed')
-          : undefined;
-
-      const actualHostStatus = getHostStatus(host.status, clusterStatus);
-
-      return {
-        title: (
-          <HostStatus
-            host={host}
-            status={{ ...hostStatus(t)[actualHostStatus], sublabel }}
-            onEditHostname={editHostname}
-            validationsInfo={validationsInfo}
-            AdditionalNTPSourcesDialogToggleComponent={AdditionalNTPSourcesDialogToggleComponent}
-            UpdateDay2ApiVipDialogToggleComponent={UpdateDay2ApiVipDialogToggleComponent}
-          />
-        ),
-        props: { 'data-testid': 'host-status' },
-        sortableValue: host.status,
-      };
-    },
-  };
-};
-
-export const discoveredAtColumn = (t: TFunction): TableRow<Host> => ({
-  header: {
-    title: t('ai:Discovered on'),
-    props: {
-      id: 'col-header-discoveredat',
-    },
-    sort: true,
-  },
-  cell: (host) => {
-    const { createdAt } = host;
-    const dateTimeCell = getDateTimeCell(createdAt);
-    return {
-      title: dateTimeCell.title,
-      props: { 'data-testid': 'host-discovered-time' },
-      sortableValue: dateTimeCell.sortableValue,
-    };
-  },
-});
-
-export const cpuArchitectureColumn = (t: TFunction): TableRow<Host> => ({
-  header: {
-    title: t('ai:CPU Architecture'),
-    props: {
-      id: 'col-header-cpuarchitecture',
-    },
-    sort: true,
-  },
-  cell: (host) => {
-    const inventory = getInventory(host);
-    return {
-      title: inventory.cpu?.architecture,
-      props: { 'data-testid': 'host-cpu-architecture' },
-      sortableValue: inventory.cpu?.architecture,
-    };
-  },
-});
-
-export const cpuCoresColumn = (t: TFunction): TableRow<Host> => ({
-  header: {
-    title: t('ai:CPU Cores'),
-    props: {
-      id: 'col-header-cpucores',
-    },
-    sort: true,
-  },
-  cell: (host) => {
-    const inventory = getInventory(host);
-    const { cores } = getHostRowHardwareInfo(inventory);
-    const validationsInfo = stringToJSON<HostValidationsInfo>(host.validationsInfo) || {};
-    const cpuCoresValidation = validationsInfo?.hardware?.find(
-      (v) => v.id === 'has-cpu-cores-for-role',
-    );
-    return {
-      title: (
-        <HostPropertyValidationPopover validation={cpuCoresValidation}>
-          {cores.title}
-        </HostPropertyValidationPopover>
-      ),
-      props: { 'data-testid': 'host-cpu-cores' },
-      sortableValue: cores.sortableValue,
-    };
-  },
-});
-
-export const memoryColumn = (t: TFunction): TableRow<Host> => ({
-  header: {
-    title: t('ai:Memory'),
-    props: {
-      id: 'col-header-memory',
-    },
-    sort: true,
-  },
-  cell: (host) => {
-    const inventory = getInventory(host);
-    const { memory } = getHostRowHardwareInfo(inventory);
-    const validationsInfo = stringToJSON<HostValidationsInfo>(host.validationsInfo) || {};
-    const memoryValidation = validationsInfo?.hardware?.find((v) => v.id === 'has-memory-for-role');
-    return {
-      title: (
-        <HostPropertyValidationPopover validation={memoryValidation}>
-          {memory.title}
-        </HostPropertyValidationPopover>
-      ),
-      props: { 'data-testid': 'host-memory' },
-      sortableValue: memory.sortableValue,
-    };
-  },
-});
-
-export const disksColumn = (t: TFunction): TableRow<Host> => ({
-  header: {
-    title: t('ai:Total storage'),
-    props: {
-      id: 'col-header-disk',
-    },
-    sort: true,
-  },
-  cell: (host) => {
-    const inventory = getInventory(host);
-    const { disk } = getHostRowHardwareInfo(inventory);
-    const validationsInfo = stringToJSON<HostValidationsInfo>(host.validationsInfo) || {};
-    const diskValidation = validationsInfo?.hardware?.find((v) => v.id === 'has-min-valid-disks');
-    return {
-      title: (
-        <HostPropertyValidationPopover validation={diskValidation}>
-          {disk.title}
-        </HostPropertyValidationPopover>
-      ),
-      props: { 'data-testid': 'host-disks' },
-      sortableValue: disk.sortableValue,
-    };
-  },
-});
-
-export const gpusColumn = (t: TFunction): TableRow<Host> => ({
-  header: {
-    title: t('ai:GPUs'),
-    props: {
-      id: 'col-header-gpus',
-    },
-    sort: true,
-  },
-  cell: (host) => {
-    const { gpus } = getInventory(host);
-    return {
-      title: <>{gpus?.length ?? '--'}</>,
-      props: { 'data-testid': 'host-gpus' },
-      sortableValue: gpus?.length ?? 0,
-    };
-  },
-});
-
-export const countColumn = (cluster: Cluster): TableRow<Host> => ({
-  header: { title: <HostsCount cluster={cluster} inParenthesis /> },
-});
-
-export const activeNICColumn = (cluster: Cluster, t: TFunction): TableRow<Host> => ({
-  header: {
-    title: t('ai:Active NIC'),
-    sort: true,
-  },
-  cell: (host) => {
-    const inventory = getInventory(host);
-    const nics = inventory.interfaces || [];
-    const machineNetworkCidr = selectMachineNetworkCIDR(cluster);
-    const currentSubnet = machineNetworkCidr ? getSubnet(machineNetworkCidr) : null;
-    const selectedNic = currentSubnet ? getSelectedNic(nics, currentSubnet) : null;
-    return {
-      title: selectedNic?.name || DASH,
-      props: { 'data-testid': 'nic-name' },
-      sortableValue: selectedNic?.name || DASH,
-    };
-  },
-});
-
-export const ipv4Column = (cluster: Cluster): TableRow<Host> => ({
-  header: {
-    title: 'IPv4 address',
-    sort: true,
-  },
-  cell: (host) => {
-    const inventory = getInventory(host);
-    const nics = inventory.interfaces || [];
-
-    const machineNetworkCidr = selectMachineNetworkCIDR(cluster);
-    const currentSubnet = machineNetworkCidr ? getSubnet(machineNetworkCidr) : null;
-    const selectedNic = currentSubnet ? getSelectedNic(nics, currentSubnet) : null;
-    return {
-      title: (selectedNic?.ipv4Addresses || []).join(', ') || DASH,
-      props: { 'data-testid': 'nic-ipv4' },
-      sortableValue: (selectedNic?.ipv4Addresses || []).join(', ') || DASH,
-    };
-  },
-});
-
-export const ipv6Column = (cluster: Cluster): TableRow<Host> => ({
-  header: {
-    title: 'IPv6 address',
-    sort: true,
-  },
-  cell: (host) => {
-    const inventory = getInventory(host);
-    const nics = inventory.interfaces || [];
-
-    const machineNetworkCidr = selectMachineNetworkCIDR(cluster);
-    const currentSubnet = machineNetworkCidr ? getSubnet(machineNetworkCidr) : null;
-    const selectedNic = currentSubnet ? getSelectedNic(nics, currentSubnet) : null;
-    return {
-      title: (selectedNic?.ipv6Addresses || []).join(', ') || DASH,
-      props: { 'data-testid': 'nic-ipv6' },
-      sortableValue: (selectedNic?.ipv6Addresses || []).join(', ') || DASH,
-    };
-  },
-});
-
-export const macAddressColumn = (cluster: Cluster): TableRow<Host> => ({
-  header: {
-    title: 'MAC address',
-    sort: true,
-  },
-  cell: (host) => {
-    const inventory = getInventory(host);
-    const nics = inventory.interfaces || [];
-
-    const machineNetworkCidr = selectMachineNetworkCIDR(cluster);
-    const currentSubnet = machineNetworkCidr ? getSubnet(machineNetworkCidr) : null;
-    const selectedNic = currentSubnet ? getSelectedNic(nics, currentSubnet) : null;
-    return {
-      title: selectedNic?.macAddress || DASH,
-      props: { 'data-testid': 'nic-mac-address' },
-      sortableValue: selectedNic?.macAddress || DASH,
-    };
-  },
-});
-
-export const labelsColumn = (t: TFunction): TableRow<Host> => ({
-  header: {
-    title: t('ai:Labels'),
-    props: {
-      id: 'col-header-labels',
-    },
-    sort: false,
-  },
-  cell: (host) => {
-    const labels = getHostLabels(host);
-    return {
-      title:
-        Object.entries(labels).length > 0 ? (
-          <LabelGroup>
-            {Object.entries(labels).map(([key, value], index) => (
-              <Label key={`${host.id}-host-label-${index}`} isCompact>
-                {key} = {value}
-              </Label>
-            ))}
-          </LabelGroup>
-        ) : (
-          '--'
-        ),
-      props: { 'data-testid': 'host-labels' },
-    };
-  },
-});
+import type { Host } from '@openshift-assisted/types/assisted-installer-service';
+import { ActionsResolver } from './AITable';
+import { HostsTableActions } from './types';
+import { getHostname, getInventory } from './utils';
 
 const ActionTitle: React.FC<{ disabled: boolean; description?: string; title: string }> = ({
   title,

package/lib/common/components/hosts/types.ts

@@ -91,5 +91,6 @@ export type HostStatusProps = AdditionNtpSourcePropsType &
     zIndex?: number;
     autoCSR?: boolean;
     additionalPopoverContent?: React.ReactNode;
+    additionalBMHInfo?: React.ReactNode;
     openshiftVersion?: string;
   };

package/lib/common/components/ui/EventsList.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, ButtonVariant, Label } from '@patternfly/react-core';
+import { Button, ButtonVariant, Content, Label } from '@patternfly/react-core';
 import { Table, TableText, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
@@ -71,7 +71,9 @@ const EventsList = ({ events, resetFilters }: EventsListProps) => {
       {
         title: (
           <TableText wrapModifier="fitContent" cellPadding={0}>
-            <strong>{getHumanizedDateTime(event.eventTime)}</strong>
+            <Content className="pf-v6-u-font-weight-bold">
+              {getHumanizedDateTime(event.eventTime)}
+            </Content>
           </TableText>
         ),
       },

package/lib/common/components/ui/PrismCode.tsx

@@ -3,42 +3,55 @@ import Highlight, { defaultProps, Language, PrismTheme } from 'prism-react-rende
 import { Content, ClipboardCopy, clipboardCopyFunc } from '@patternfly/react-core';
 import { t_global_color_nonstatus_purple_300 } from '@patternfly/react-tokens/dist/js/t_global_color_nonstatus_purple_300';
 import { t_global_color_nonstatus_blue_default as globalBlue } from '@patternfly/react-tokens/dist/js/t_global_color_nonstatus_blue_default';
-import defaultTheme from 'prism-react-renderer/themes/github';
+import lightTheme from 'prism-react-renderer/themes/github';
+import darkTheme from 'prism-react-renderer/themes/okaidia';
 import './PrismCode.css';
-export const SimpleAIPrismTheme = {
-  plain: {
-    color: '#333333',
-    backgroundColor: defaultTheme.plain.backgroundColor,
-    fontSize: '.93em',
-  },
-  styles: [
-    {
-      types: ['variable'],
-      style: {
-        color: globalBlue.value,
-      },
+
+export const getTheme = (styles?: PrismTheme['styles']) => {
+  let prefersTheme = window.localStorage.getItem('bridge/theme');
+  if (prefersTheme === 'systemDefault') {
+    prefersTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+
+  const theme = prefersTheme === 'dark' ? darkTheme : lightTheme;
+
+  return {
+    plain: {
+      color: theme.plain.color,
+      backgroundColor: theme.plain.backgroundColor,
+      fontSize: '.93em',
     },
-    {
-      types: ['class-name', 'function', 'tag', 'attr-name'],
-      style: {
-        color: t_global_color_nonstatus_purple_300.value,
+    styles: styles || [
+      {
+        types: ['variable'],
+        style: {
+          color: globalBlue.value,
+        },
       },
-    },
-  ],
+      {
+        types: ['class-name', 'function', 'tag', 'attr-name'],
+        style: {
+          color: t_global_color_nonstatus_purple_300.value,
+        },
+      },
+    ],
+  };
 };
+
 type PrismCodeProps = {
   code: string;
   language?: Language;
-  theme?: PrismTheme;
+  styles?: PrismTheme['styles'];
   copiable?: boolean;
 };
+
 const PrismCode: React.FC<PrismCodeProps> = ({
   code,
+  styles,
   language = 'bash',
-  theme = defaultTheme,
   copiable = false,
 }) => (
-  <Highlight {...defaultProps} code={code} language={language} theme={theme}>
+  <Highlight {...defaultProps} code={code} language={language} theme={getTheme(styles)}>
     {({ className, style, tokens, getLineProps, getTokenProps }) => (
       <Content component="pre" className={className} style={style}>
         {copiable && (

package/lib/common/components/ui/formik/LabelField.tsx

@@ -6,32 +6,15 @@ import {
   HelperText,
   HelperTextItem,
   Label,
+  TextInput,
 } from '@patternfly/react-core';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import TagsInput from 'react-tagsinput';
 import { InputFieldProps } from './types';
 import { getFieldId } from './utils';
-
-import './LabelField.css';
 import { useTranslation } from '../../../hooks/use-translation-wrapper';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-
-type LabelValueProps = {
-  value: React.ReactText;
-  onClose?: () => void;
-};
-
-export const LabelValue: React.FC<LabelValueProps> = ({ value, onClose }) => (
-  <Label className="label-field__value" variant="outline" onClose={onClose}>
-    {value}
-  </Label>
-);
 
-type LabelFieldProps = InputFieldProps & {
-  // eslint-disable-next-line
-  onChange?: (tags: any[]) => void;
-};
-
-export const LabelField: React.FC<LabelFieldProps> = ({
+export const LabelField = ({
   label,
   labelIcon,
   helperText,
@@ -40,6 +23,9 @@ export const LabelField: React.FC<LabelFieldProps> = ({
   validate,
   idPostfix,
   ...props
+}: InputFieldProps & {
+  // eslint-disable-next-line
+  onChange?: (tags: any[]) => void;
 }) => {
   const { t } = useTranslation();
   const [input, setInput] = React.useState('');
@@ -53,49 +39,80 @@ export const LabelField: React.FC<LabelFieldProps> = ({
 
   return (
     <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelHelp={labelIcon}>
-      {t("ai:Enter key=value and then press 'enter' or 'space' or use a ',' to input the label.")}
-      <div className="co-search-input pf-v6-c-form-control">
-        <TagsInput
-          {...field}
-          onChange={(tags) => {
-            setValue(tags);
-            setInput('');
-            onChange && onChange(tags);
-            !touched && setTouched(true);
-          }}
-          addKeys={[13, 32, 188]}
-          renderTag={({ tag, key, onRemove, getTagDisplayValue }) => (
-            <LabelValue key={key} onClose={() => onRemove(key)} value={getTagDisplayValue(tag)} />
-          )}
-          addOnBlur
-          inputProps={{
-            autoFocus: false,
-            className: 'label-field__input',
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-            placeholder: field.value?.length ? '' : 'app=frontend',
-            spellCheck: 'false',
-            id: 'tags-input',
-            value: input,
-            // eslint-disable-next-line
-            onChange: (e: any) => setInput(e.target.value),
-            ['data-test']: 'tags-input',
-          }}
-        />
-      </div>
-      {(errorMessage || helperText) && (
-        <FormHelperText>
-          <HelperText>
+      <TagsInput
+        {...field}
+        onChange={(tags) => {
+          setValue(tags);
+          setInput('');
+          onChange && onChange(tags);
+          !touched && setTouched(true);
+        }}
+        addKeys={[13, 32, 188]}
+        renderTag={({ tag, key, onRemove, getTagDisplayValue }) => (
+          <Label key={key} style={{ margin: 2 }} onClose={() => onRemove(key)}>
+            {getTagDisplayValue(tag)}
+          </Label>
+        )}
+        renderInput={({ value, onChange, ...rest }) => (
+          <TextInput
+            onChange={onChange as (e: unknown) => void}
+            value={value as string}
+            {...rest}
+          />
+        )}
+        renderLayout={(tagElements, inputElement) => (
+          <div
+            className="pf-v6-c-form-control"
+            style={{
+              padding: 0,
+              paddingTop: '1px',
+              display: 'flex',
+              alignItems: 'start',
+              flexWrap: 'wrap',
+              height: 'unset',
+              minHeight: '36px',
+            }}
+          >
+            <div>{tagElements}</div>
+            {inputElement}
+          </div>
+        )}
+        addOnBlur
+        inputProps={{
+          autoFocus: false,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+          placeholder: field.value?.length ? '' : 'app=frontend',
+          spellCheck: 'false',
+          value: input,
+          // eslint-disable-next-line
+          onChange: (e: any) => setInput(e.target.value),
+          ['data-test']: fieldId,
+        }}
+      />
+
+      <FormHelperText>
+        <HelperText>
+          <HelperTextItem
+            id={`${fieldId}-helper-text`}
+            data-testid={`input-label-${fieldId}-helper-text`}
+          >
+            {helperText ||
+              t(
+                "ai:Enter a key=value and then press 'enter' or 'space' or use a ',' to input the label.",
+              )}
+          </HelperTextItem>
+          {errorMessage && (
             <HelperTextItem
-              icon={errorMessage && <ExclamationCircleIcon />}
-              variant={errorMessage ? 'error' : 'default'}
-              id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
-              data-testid={`input-label-${fieldId}-helper-text`}
+              icon={<ExclamationCircleIcon />}
+              variant={'error'}
+              id={`${fieldId}-helper-error`}
+              data-testid={`input-label-${fieldId}-helper-error`}
             >
-              {errorMessage ? errorMessage : helperText}
+              {errorMessage}
             </HelperTextItem>
-          </HelperText>
-        </FormHelperText>
-      )}
+          )}
+        </HelperText>
+      </FormHelperText>
     </FormGroup>
   );
 };