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

package/lib/common/components/storage/StorageUtils.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { sortable } from '@patternfly/react-table';
+import { TFunction } from 'i18next';
+import { getHostRole, getInventory, Host, RoleCell } from '../../index';
+import { TableRow } from '../hosts/AITable';
+import { Popover, Text, TextContent, TextVariants } from '@patternfly/react-core';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons';
+import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
+
+const SkipFormattingDisks = () => (
+  <TextContent>
+    <Text component={TextVariants.p}>Some bootable disks will skip formatting</Text>
+  </TextContent>
+);
+
+export const roleColumn = (t: TFunction, schedulableMasters: boolean): TableRow<Host> => {
+  return {
+    header: {
+      title: 'Role',
+      props: {
+        id: 'col-header-role',
+      },
+      transforms: [sortable],
+    },
+    cell: (host) => {
+      const hostRole = getHostRole(host, t, schedulableMasters);
+      return {
+        title: <RoleCell host={host} role={hostRole} />,
+        props: { 'data-testid': 'host-role' },
+        sortableValue: hostRole,
+      };
+    },
+  };
+};
+
+export const numberOfDisksColumn: TableRow<Host> = {
+  header: {
+    title: 'Number of disks',
+    props: {
+      id: 'col-header-num-disks',
+    },
+    transforms: [sortable],
+  },
+  cell: (host) => {
+    const inventory = getInventory(host);
+    const disks = inventory.disks || [];
+    return {
+      title: (
+        <>
+          {' '}
+          {disks.length}
+          {'   '}
+          {host.skipFormattingDisks && (
+            <Popover bodyContent={<SkipFormattingDisks />} minWidth="20rem" maxWidth="30rem">
+              <ExclamationTriangleIcon color={warningColor.value} size="sm" />
+            </Popover>
+          )}
+        </>
+      ),
+      props: { 'data-testid': 'disk-number' },
+      sortableValue: disks.length,
+    };
+  },
+};
+
+export const odfUsageColumn = (excludeMasters: boolean): TableRow<Host> => {
+  return {
+    header: {
+      title: 'ODF Usage',
+      props: {
+        id: 'col-header-odf',
+      },
+      transforms: [sortable],
+    },
+    cell: (host) => {
+      const isMaster = host.role === 'master' || host.suggestedRole === 'master';
+      const isExcluded = excludeMasters && isMaster;
+      return {
+        title: isExcluded ? (
+          <div style={{ color: 'var(--pf-global--disabled-color--100)' }}>Excluded for ODF</div>
+        ) : (
+          'Use ODF'
+        ),
+        props: { 'data-testid': 'use-odf' },
+        sortableValue: Number(isExcluded),
+      };
+    },
+  };
+};

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { AlertGroup, AlertActionCloseButton, Alert } from '@patternfly/react-core';
+import { useAlerts } from '../AlertsContextProvider';
+import { AlertProps } from '../../reducers/alertsSlice';
+
+const Alerts: React.FC<{ className?: string }> = ({ className }) => {
+  const { alerts, removeAlert } = useAlerts();
+  const onClose = (alert: AlertProps) => removeAlert(alert.key);
+
+  if (alerts.length) {
+    return (
+      <AlertGroup className={className}>
+        {alerts.map((alert) => (
+          // eslint-disable-next-line react/jsx-key
+          <Alert
+            actionClose={<AlertActionCloseButton onClose={() => onClose(alert)} />}
+            isInline
+            {...alert}
+          >
+            {alert.message}
+          </Alert>
+        ))}
+      </AlertGroup>
+    );
+  }
+  return null;
+};
+
+export default Alerts;

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { DownloadIcon, IconSize } from '@patternfly/react-icons';
+
+export const getPadding = (size: IconSize | keyof typeof IconSize) => {
+  switch (size) {
+    case IconSize.sm:
+      return '0.3em';
+    case IconSize.md:
+      return '1.5em';
+    case IconSize.lg:
+      return '2em';
+    case IconSize.xl:
+      return '3em';
+    default:
+      return '1em';
+  }
+};
+
+export const getVerticalAlign = (size: IconSize | keyof typeof IconSize) => {
+  switch (size) {
+    case IconSize.sm:
+      return '-0.3em';
+    case IconSize.md:
+      return '-1.5em';
+    case IconSize.lg:
+      return '-2em';
+    case IconSize.xl:
+      return '-3em';
+    default:
+      return '-1em';
+  }
+};
+
+type BorderedIconProps = {
+  children: React.ReactElement<React.ComponentProps<typeof DownloadIcon>>;
+  iconSize?: IconSize;
+};
+
+const BorderedIcon = ({ children, iconSize = IconSize.sm }: BorderedIconProps) => {
+  const style: React.CSSProperties = {
+    padding: `${getPadding(iconSize)}`,
+    borderRadius: '50%',
+    border: '2px solid',
+    borderColor: '#D2D2D2',
+    boxSizing: 'content-box',
+    verticalAlign: `${getVerticalAlign(iconSize)}`,
+  };
+  return React.cloneElement(children, { style });
+};
+
+export default BorderedIcon;

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

@@ -0,0 +1,315 @@
+import React from 'react';
+import capitalize from 'lodash-es/capitalize.js';
+import {
+  Toolbar,
+  ToolbarItem,
+  ToolbarContent,
+  ToolbarFilter,
+  ToolbarChip,
+  Button,
+  ButtonVariant,
+  InputGroup,
+  Select,
+  SelectOption,
+  TextInput,
+  ToolbarProps,
+  ToolbarFilterProps,
+  SelectProps,
+  TextInputProps,
+  Badge,
+  TextInputTypes,
+} from '@patternfly/react-core';
+import { SearchIcon, FilterIcon } from '@patternfly/react-icons';
+import { ClusterEventsFiltersType } from '../../types';
+import { Cluster, Event, Host, Inventory, stringToJSON } from '../../api';
+import { EVENT_SEVERITIES } from '../../config';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+import { isSelectEventChecked } from './utils';
+import { TFunction } from 'i18next';
+
+export type SeverityCountsType = { [severity in Event['severity']]: number };
+
+type ClustersListToolbarProps = {
+  filters: ClusterEventsFiltersType;
+  setFilters: (filters: ClusterEventsFiltersType) => void;
+  cluster: Cluster;
+  entityKind: 'cluster' | 'host';
+  events: Event[];
+  severityCounts: SeverityCountsType;
+  hostId?: Host['id'];
+};
+
+const CLUSTER_LEVEL = 'cluster-level-action';
+const DELETED_HOSTS = 'deleted-hosts-action';
+
+const Placeholder = ({ text }: { text: string }) => (
+  <>
+    <FilterIcon /> {text}
+  </>
+);
+
+const mapHosts = (hosts: Cluster['hosts']) =>
+  (hosts || []).map((host) => {
+    const inventory = stringToJSON<Inventory>(host.inventory) || {};
+    let hostname = host.requestedHostname;
+    if (inventory.hostname !== host.requestedHostname) {
+      hostname += ` (${inventory.hostname || ''})`;
+    }
+    return {
+      hostname,
+      id: host.id,
+    };
+  });
+
+export const getInitialClusterEventsFilters = (
+  entityKind: 'cluster' | 'host',
+  hostId?: Host['id'],
+): ClusterEventsFiltersType => ({
+  message: '',
+  hostIds: entityKind === 'host' && hostId ? [hostId] : [],
+  severities: [],
+  clusterLevel: false,
+  deletedHosts: false,
+});
+
+const mapHostsChips = (
+  t: TFunction,
+  filters: ClusterEventsFiltersType,
+  hosts: { id: string; hostname?: string }[],
+): ToolbarChip[] => {
+  const chips = [
+    filters.deletedHosts && { key: DELETED_HOSTS, node: t('ai:Deleted hosts') },
+    filters.clusterLevel && { key: CLUSTER_LEVEL, node: t('ai:Cluster-level events') },
+    ...(hosts || [])
+      .filter((host) => filters.hostIds?.includes(host.id))
+      .map((host): ToolbarChip => ({ key: host.id, node: host.hostname })),
+  ];
+  return chips.filter(Boolean) as ToolbarChip[];
+};
+
+const ClusterEventsToolbar = ({
+  filters,
+  setFilters,
+  cluster,
+  hostId,
+  entityKind,
+  severityCounts,
+}: ClustersListToolbarProps) => {
+  const { t } = useTranslation();
+  const [isHostExpanded, setHostExpanded] = React.useState(false);
+  const [isSeverityExpanded, setSeverityExpanded] = React.useState(false);
+  const [timer, setTimer] = React.useState<ReturnType<typeof setTimeout>>();
+
+  const [messageValue, setMessageValue] = React.useState(filters.message);
+
+  const allHosts = React.useMemo(() => mapHosts(cluster.hosts), [cluster.hosts]);
+  const onClearAllFilters: ToolbarProps['clearAllFilters'] = () => {
+    setFilters(getInitialClusterEventsFilters(entityKind, hostId));
+    setMessageValue('');
+  };
+
+  const onSelect = (
+    type: 'hostIds' | 'severities',
+    isChecked: boolean,
+    value: Host['id'] | Event['severity'],
+  ) => {
+    const setNextSelectedValues = (
+      type: 'hostIds' | 'severities',
+      isChecked: boolean,
+      value: Host['id'] | Event['severity'],
+      filters: ClusterEventsFiltersType,
+    ) => ({
+      ...filters,
+      [type]: isChecked
+        ? [...(filters[type] || []), value]
+        : filters[type]?.filter((val: string) => val !== value),
+    });
+
+    const nextFilters = setNextSelectedValues(type, isChecked, value, filters);
+
+    setFilters(nextFilters);
+  };
+
+  const onHostToggle: SelectProps['onToggle'] = () => setHostExpanded(!isHostExpanded);
+  const onHostSelect = (value: string, isChecked: boolean) => {
+    switch (value) {
+      case DELETED_HOSTS:
+        setFilters({
+          ...filters,
+          deletedHosts: isChecked,
+        });
+        break;
+      case CLUSTER_LEVEL:
+        setFilters({
+          ...filters,
+          clusterLevel: isChecked,
+        });
+        break;
+      default:
+        onSelect('hostIds', isChecked, value);
+    }
+  };
+
+  const onSeverityToggle: SelectProps['onToggle'] = () => setSeverityExpanded(!isSeverityExpanded);
+  const onSeveritySelect = (value: string, isChecked: boolean) => {
+    onSelect('severities', isChecked, value);
+  };
+
+  const onMessageChange: TextInputProps['onChange'] = (message) => {
+    setMessageValue(message);
+    clearTimeout(timer);
+
+    const newTimer = setTimeout(() => {
+      setMessageValue(message);
+      setFilters({ ...filters, message });
+    }, 500);
+
+    setTimer(newTimer);
+  };
+
+  const onDeleteChipGroup: ToolbarFilterProps['deleteChipGroup'] = (type) => {
+    if (type === 'Severity') {
+      setFilters({
+        ...filters,
+        severities: [],
+      });
+    } else {
+      setFilters({
+        ...filters,
+        deletedHosts: false,
+        clusterLevel: false,
+        hostIds: [],
+      });
+    }
+  };
+
+  const getSelections = (): string[] => {
+    let selections = filters.clusterLevel
+      ? [...(filters.hostIds || []), CLUSTER_LEVEL]
+      : filters.hostIds;
+    selections = filters.deletedHosts ? [...(selections || []), DELETED_HOSTS] : selections;
+
+    return selections || [];
+  };
+
+  const sortedHosts = allHosts.sort((a, b) =>
+    a.hostname && b.hostname && a.hostname < b.hostname ? -1 : 1,
+  );
+
+  return (
+    <Toolbar
+      id="clusters-events-toolbar"
+      className="pf-m-toggle-group-container"
+      collapseListedFiltersBreakpoint="xl"
+      clearAllFilters={onClearAllFilters}
+      numberOfFiltersText={(numberOfFilters) =>
+        t('ai:{{count}} filter applied', { count: numberOfFilters })
+      }
+    >
+      <ToolbarContent>
+        {entityKind === 'cluster' && (
+          <ToolbarFilter
+            categoryName="Hosts"
+            chips={mapHostsChips(t, filters, sortedHosts)}
+            deleteChip={(_, chip) =>
+              onHostSelect(typeof chip === 'string' ? chip : chip.key, false)
+            }
+            deleteChipGroup={onDeleteChipGroup}
+          >
+            <Select
+              variant="checkbox"
+              aria-label="hosts"
+              onToggle={onHostToggle}
+              onSelect={(e, value) => onHostSelect(value as string, isSelectEventChecked(e))}
+              selections={getSelections()}
+              customBadgeText={mapHostsChips(t, filters, sortedHosts).length}
+              isOpen={isHostExpanded}
+              placeholderText={<Placeholder text="Hosts" />}
+              isDisabled={allHosts.length === 0}
+              maxHeight={280}
+              zIndex={600}
+              menuAppendTo={document.body}
+            >
+              {[
+                <SelectOption
+                  inputId={`checkbox-${CLUSTER_LEVEL}`}
+                  key={CLUSTER_LEVEL}
+                  value={CLUSTER_LEVEL}
+                >
+                  {t('ai:Cluster-level events')}
+                </SelectOption>,
+                <SelectOption
+                  inputId={`checkbox-${DELETED_HOSTS}`}
+                  key={DELETED_HOSTS}
+                  value={DELETED_HOSTS}
+                >
+                  {t('ai:Deleted hosts')}
+                </SelectOption>,
+                ...sortedHosts.map((host) => (
+                  <SelectOption key={host.id} value={host.id}>
+                    {host.hostname}
+                  </SelectOption>
+                )),
+              ]}
+            </Select>
+          </ToolbarFilter>
+        )}
+
+        <ToolbarFilter
+          chips={filters.severities?.map(
+            (severity): ToolbarChip => ({
+              key: severity,
+              node: capitalize(severity),
+            }),
+          )}
+          deleteChip={(_, chip) =>
+            onSeveritySelect(typeof chip === 'string' ? chip : chip.key, false)
+          }
+          deleteChipGroup={onDeleteChipGroup}
+          categoryName="Severity"
+        >
+          <Select
+            variant="checkbox"
+            aria-label="Severity"
+            onToggle={onSeverityToggle}
+            onSelect={(event, value) =>
+              onSeveritySelect(value as string, isSelectEventChecked(event))
+            }
+            selections={filters.severities}
+            isOpen={isSeverityExpanded}
+            placeholderText={<Placeholder text="Severity" />}
+          >
+            {EVENT_SEVERITIES.map((severity) => (
+              <SelectOption
+                data-testid={`${severity}-filter-option`}
+                key={severity}
+                value={severity}
+              >
+                {capitalize(severity)} <Badge isRead>{severityCounts[severity]}</Badge>
+              </SelectOption>
+            ))}
+          </Select>
+        </ToolbarFilter>
+
+        <ToolbarItem>
+          <InputGroup>
+            <TextInput
+              name="search-text"
+              id="search-text"
+              type={TextInputTypes.search}
+              aria-label="text to be searched"
+              onChange={onMessageChange}
+              value={messageValue}
+              placeholder={t('ai:Filter by text')}
+            />
+            <Button variant={ButtonVariant.control} aria-label="search text button">
+              <SearchIcon />
+            </Button>
+          </InputGroup>
+        </ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  );
+};
+
+export default ClusterEventsToolbar;

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

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { Modal, Button, ModalVariant, ButtonProps, ModalProps } from '@patternfly/react-core';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+
+type ConfirmationModalProps = {
+  title: string;
+  titleIconVariant?: ModalProps['titleIconVariant'];
+  content: React.ReactNode;
+  confirmationButtonVariant?: ButtonProps['variant'];
+  confirmationButtonText?: string;
+  onClose: () => void;
+  onConfirm: () => void;
+};
+
+const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
+  title,
+  titleIconVariant,
+  content,
+  confirmationButtonText = 'Yes',
+  confirmationButtonVariant = 'danger',
+  onClose,
+  onConfirm,
+}) => {
+  const { t } = useTranslation();
+  return (
+    <Modal
+      title={title}
+      titleIconVariant={titleIconVariant}
+      isOpen={true}
+      onClose={onClose}
+      variant={ModalVariant.small}
+      actions={[
+        <Button
+          data-testid="confirm-modal-submit"
+          key="confirm"
+          variant={confirmationButtonVariant}
+          onClick={onConfirm}
+        >
+          {confirmationButtonText}
+        </Button>,
+        <Button key="cancel" variant="link" onClick={onClose}>
+          {t('ai:Cancel')}
+        </Button>,
+      ]}
+    >
+      {content}
+    </Modal>
+  );
+};
+
+export default ConfirmationModal;

package/lib/common/components/ui/DetailList.css

@@ -0,0 +1,12 @@
+.detail-list {
+  display: block !important;
+}
+
+.detail-list dd {
+  margin-bottom: var(--pf-global--spacer--sm);
+}
+
+.detail-list ul ul,
+.detail-list ul li {
+  margin-top: var(--pf-c-content--dt--sm--MarginTop);
+}

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

@@ -0,0 +1,101 @@
+import React, { ReactChild, ReactNode } from 'react';
+import {
+  TextContent,
+  TextList,
+  TextListVariants,
+  TextListItem,
+  TextListItemVariants,
+  Text,
+  TextProps,
+} from '@patternfly/react-core';
+import { WithTestID } from '../../types';
+
+import './DetailList.css';
+import { RenderIf } from './RenderIf';
+
+export type DetailListProps = {
+  children: ReactChild | (ReactChild | undefined)[];
+  title?: string;
+  titleComponent?: TextProps['component'];
+};
+
+export type DetailItemList = {
+  title: string;
+  value?: string;
+}[];
+
+export type DetailItemProps = {
+  title?: string | ReactNode;
+  value?: DetailItemList | React.ReactNode;
+  idPrefix?: string;
+  isHidden?: boolean;
+  classNameValue?: string;
+};
+
+export const DetailList: React.FC<DetailListProps> = ({
+  children,
+  title,
+  titleComponent = 'h2',
+}) => (
+  <TextContent>
+    {title && <Text component={titleComponent}>{title}</Text>}
+    <TextList component={TextListVariants.dl} className="detail-list">
+      {children}
+    </TextList>
+  </TextContent>
+);
+
+const hasDetailItemList = (data: DetailItemProps['value']): data is DetailItemList => {
+  return Array.isArray(data);
+};
+
+export const DetailItem: React.FC<DetailItemProps & WithTestID> = ({
+  title,
+  value = '',
+  idPrefix,
+  testId,
+  isHidden = false,
+  classNameValue,
+}) =>
+  isHidden ? null : (
+    <>
+      <RenderIf condition={title !== undefined}>
+        <TextListItem
+          component={TextListItemVariants.dt}
+          id={idPrefix ? `${idPrefix}-title` : undefined}
+          data-testid={testId ? `${testId}-title` : undefined}
+        >
+          {title}
+        </TextListItem>
+      </RenderIf>
+      <TextListItem
+        component={TextListItemVariants.dd}
+        id={idPrefix ? `${idPrefix}-value` : undefined}
+        data-testid={testId ? `${testId}-value` : undefined}
+        className={classNameValue}
+      >
+        {hasDetailItemList(value) ? (
+          <TextList component={TextListVariants.dl}>
+            {value.map((item, idx) => [
+              <TextListItem
+                data-testid={testId ? `${testId}-title-${idx}` : undefined}
+                key={item.title}
+                component={TextListItemVariants.dt}
+              >
+                {item.title}
+              </TextListItem>,
+              <TextListItem
+                data-testid={testId ? `${testId}-value-${idx}` : undefined}
+                key={`dd-${item.title}`}
+                component={TextListItemVariants.dd}
+              >
+                {item.value}
+              </TextListItem>,
+            ])}
+          </TextList>
+        ) : (
+          value
+        )}
+      </TextListItem>
+    </>
+  );