katello 4.5.1 → 4.8.0.rc2

data/webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeCard.js

@@ -0,0 +1,175 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { STATUS } from 'foremanReact/constants';
+import {
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardBody,
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListDescription,
+  DescriptionListTerm,
+  Flex,
+  FlexItem,
+  GridItem,
+  Label,
+  List,
+  ListItem,
+  Tooltip,
+  Skeleton,
+} from '@patternfly/react-core';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { propsToCamelCase } from 'foremanReact/common/helpers';
+import './SystemPurposeCard.scss';
+import SystemPurposeEditModal from './SystemPurposeEditModal';
+import { selectHostDetailsStatus } from '../../HostDetailsSelectors';
+import { hasRequiredPermissions, hostIsNotRegistered } from '../../hostDetailsHelpers';
+
+const SystemPurposeCard = ({ hostDetails }) => {
+  const showEditButton = hasRequiredPermissions(['edit_hosts'], hostDetails?.permissions);
+  const orgId = hostDetails.organization_id;
+  const subscriptionFacetAttributes = hostDetails?.subscription_facet_attributes;
+  const {
+    purposeRole, purposeUsage, purposeAddons, releaseVersion, serviceLevel,
+  } = propsToCamelCase(subscriptionFacetAttributes ?? {});
+  const sysPurposeProps = {
+    purposeRole,
+    purposeUsage,
+    purposeAddons,
+    releaseVersion,
+    serviceLevel,
+  };
+  const hostDetailsStatus = useSelector(selectHostDetailsStatus);
+  const dataIsLoading = hostDetailsStatus === STATUS.PENDING;
+
+  const [editing, setEditing] = useState(false);
+  if (!hostDetails?.id) {
+    return (
+      <GridItem rowSpan={1} md={6} lg={4} xl2={3}>
+        <Card ouiaId="system-purpose-card">
+          <Skeleton />
+        </Card>
+      </GridItem>
+    );
+  }
+
+  if (hostIsNotRegistered({ hostDetails })) return null;
+
+  return (
+    <GridItem rowSpan={1} md={6} lg={4} xl2={3}>
+      <Card ouiaId="system-purpose-card">
+        <CardHeader>
+          <Flex
+            alignItems={{ default: 'alignItemsCenter' }}
+            justifyContent={{ default: 'justifyContentSpaceBetween' }}
+            style={{ width: '100%' }}
+          >
+            <FlexItem>
+              <Flex
+                alignItems={{ default: 'alignItemsCenter' }}
+                justifyContent={{ default: 'justifyContentSpaceBetween' }}
+              >
+                <FlexItem style={{ marginRight: '0.5em' }}>
+                  <CardTitle>{__('System purpose')}</CardTitle>
+                </FlexItem>
+                <FlexItem>
+                  <Tooltip
+                    content={__('System purpose enables you to set the system\'s intended use on your network and improves reporting accuracy in the Subscriptions service of the Red Hat Hybrid Cloud Console.')}
+                    position="top"
+                    enableFlip
+                    isContentLeftAligned
+                  >
+                    <OutlinedQuestionCircleIcon style={{ marginTop: '7px' }} color="gray" />
+                  </Tooltip>
+                </FlexItem>
+              </Flex>
+            </FlexItem>
+            {showEditButton && (
+              <FlexItem>
+                <Button variant="link" isSmall ouiaId="syspurpose-edit-button" onClick={() => setEditing(val => !val)}>{__('Edit')}</Button>
+              </FlexItem>)
+            }
+          </Flex>
+        </CardHeader>
+        <CardBody className="system-purpose-card-body">
+          <DescriptionList isHorizontal>
+            <DescriptionListGroup>
+              <DescriptionListTerm>{__('Role')}</DescriptionListTerm>
+              <DescriptionListDescription>
+                {dataIsLoading ? <Skeleton /> : purposeRole}
+              </DescriptionListDescription>
+              <DescriptionListTerm>{__('SLA')}</DescriptionListTerm>
+              <DescriptionListDescription>
+                {serviceLevel && (dataIsLoading ? <Skeleton /> : (
+                  <Label color="blue">{serviceLevel}</Label>
+                ))}
+              </DescriptionListDescription>
+              <DescriptionListTerm>{__('Usage type')}</DescriptionListTerm>
+              <DescriptionListDescription>
+                {purposeUsage && (dataIsLoading ? <Skeleton /> : (
+                  <Label color="blue">{purposeUsage}</Label>
+                ))}
+              </DescriptionListDescription>
+              <DescriptionListTerm>{__('Release version')}</DescriptionListTerm>
+              <DescriptionListDescription>
+                {dataIsLoading ? <Skeleton /> : releaseVersion}
+              </DescriptionListDescription>
+              {!!purposeAddons?.length && (
+                <>
+                  <DescriptionListTerm>{__('Add-ons')}</DescriptionListTerm>
+                  {dataIsLoading ? <Skeleton /> : (
+                    <DescriptionListDescription>
+                      <List isPlain>
+                        {purposeAddons.map(addon => (
+                          <ListItem key={addon}>{addon}</ListItem>
+                        ))}
+                      </List>
+                    </DescriptionListDescription>
+                  )}
+                </>
+              )
+              }
+            </DescriptionListGroup>
+          </DescriptionList>
+          {showEditButton && (
+            <SystemPurposeEditModal
+              isOpen={editing}
+              orgId={orgId}
+              closeModal={() => setEditing(false)}
+              hostName={hostDetails.name}
+              hostId={hostDetails.id}
+              {...sysPurposeProps}
+            />
+          )}
+        </CardBody>
+      </Card>
+    </GridItem>
+  );
+};
+
+SystemPurposeCard.propTypes = {
+  hostDetails: PropTypes.shape({
+    name: PropTypes.string,
+    organization_id: PropTypes.number,
+    id: PropTypes.number,
+    subscription_facet_attributes: PropTypes.shape({
+      installed_products: PropTypes.arrayOf(PropTypes.shape({
+        productId: PropTypes.string,
+        productName: PropTypes.string,
+      })),
+    }),
+    permissions: PropTypes.shape({
+      edit_hosts: PropTypes.bool,
+    }),
+  }),
+};
+
+SystemPurposeCard.defaultProps = {
+  hostDetails: {},
+};
+
+export default SystemPurposeCard;

data/webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeCard.scss

@@ -0,0 +1,6 @@
+.system-purpose-card-body {
+  font-size: small;
+  .pf-c-label {
+    font-size: smaller;
+  }
+}

data/webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeConstants.js

@@ -0,0 +1,6 @@
+export const defaultUsages = ['Production', 'Development/Test', 'Disaster Recovery'];
+export const defaultRoles = ['Red Hat Enterprise Linux Server', 'Red Hat Enterprise Linux Workstation', 'Red Hat Enterprise Linux Compute Node'];
+export const defaultServiceLevels = ['Self-Support', 'Standard', 'Premium'];
+
+export const ORGANIZATION = 'ORGANIZATION';
+export const AVAILABLE_RELEASE_VERSIONS = 'AVAILABLE_RELEASE_VERSIONS';

data/webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeEditModal.js

@@ -0,0 +1,307 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { isEqual } from 'lodash';
+import PropTypes from 'prop-types';
+import { STATUS } from 'foremanReact/constants';
+import { propsToCamelCase } from 'foremanReact/common/helpers';
+import {
+  Modal,
+  Button,
+  Form,
+  FormGroup,
+  FormSelect,
+  FormSelectOption,
+  Select,
+  SelectOption,
+  SelectVariant,
+} from '@patternfly/react-core';
+import { FormattedMessage } from 'react-intl';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { selectOrganizationStatus, selectOrganization, selectAvailableReleaseVersions, selectAvailableReleaseVersionsStatus } from './SystemPurposeSelectors';
+import { getAvailableReleaseVersions, getOrganization, updateSystemPurposeAttributes } from './SystemPurposeActions';
+import HOST_DETAILS_KEY from '../../HostDetailsConstants';
+import { defaultUsages, defaultRoles, defaultServiceLevels } from './SystemPurposeConstants';
+
+const SystemPurposeEditModal = ({
+  closeModal, hostName, purposeRole, purposeUsage, purposeAddons,
+  serviceLevel, releaseVersion, isOpen, orgId, hostId,
+}) => {
+  const initialPurposeRole = purposeRole ?? '';
+  const initialServiceLevel = serviceLevel ?? '';
+  const initialPurposeUsage = purposeUsage ?? '';
+  const initialReleaseVersion = releaseVersion ?? '';
+  const initialPurposeAddons = purposeAddons ?? [];
+  const [selectedRole, setSelectedRole] = useState(initialPurposeRole);
+  const [selectedServiceLevel, setSelectedServiceLevel] = useState(initialServiceLevel);
+  const [selectedUsage, setSelectedUsage] = useState(initialPurposeUsage);
+  const [addonSelectOpen, setAddonSelectOpen] = useState(false);
+  const [selectedAddons, setSelectedAddons] = useState(initialPurposeAddons);
+  const [selectedReleaseVersion, setSelectedReleaseVersion] = useState(initialReleaseVersion);
+
+  const unmodified = (
+    selectedRole === initialPurposeRole &&
+    selectedServiceLevel === initialServiceLevel &&
+    selectedUsage === initialPurposeUsage &&
+    selectedReleaseVersion === initialReleaseVersion &&
+    isEqual(selectedAddons, initialPurposeAddons)
+  );
+  const dispatch = useDispatch();
+
+  const orgStatus = useSelector(state => selectOrganizationStatus(state, orgId));
+  const organizationDetails = useSelector(state => selectOrganization(state, orgId));
+  const orgDetails = propsToCamelCase(organizationDetails ?? { systemPurposes: {} });
+  const availableSyspurposeAttributes = orgDetails?.systemPurposes ?? {};
+  const availableServiceLevels = orgDetails?.serviceLevels ?? [];
+  const { addons: availableAddons, roles: availableRoles, usage: availableUsages }
+    = availableSyspurposeAttributes;
+
+  const availableReleaseVersionsStatus
+    = useSelector(state => selectAvailableReleaseVersionsStatus(state, orgId));
+  const availableReleaseVersions = useSelector(state =>
+    selectAvailableReleaseVersions(state, hostId))?.results ?? [];
+  useEffect(() => {
+    if (orgId && orgStatus !== STATUS.RESOLVED) {
+      dispatch(getOrganization({ orgId }));
+    }
+  }, [orgId, orgStatus, dispatch]);
+
+  useEffect(() => {
+    if (hostId && availableReleaseVersionsStatus !== STATUS.RESOLVED) {
+      dispatch(getAvailableReleaseVersions({ hostId }));
+    }
+  }, [hostId, availableReleaseVersionsStatus, dispatch]);
+
+  const toggleAddonSelect = isOpenState => setAddonSelectOpen(isOpenState);
+
+  const onAddonSelect = (_event, selected) => {
+    const newSelectedAddons = new Set(selectedAddons);
+    if (!selected) return;
+    if (newSelectedAddons.has(selected)) {
+      newSelectedAddons.delete(selected);
+    } else {
+      newSelectedAddons.add(selected);
+    }
+    setSelectedAddons([...newSelectedAddons]);
+  };
+
+  const refreshHostDetails = () => dispatch({
+    type: 'API_GET',
+    payload: {
+      key: HOST_DETAILS_KEY,
+      url: `/api/hosts/${hostName}`,
+    },
+  });
+
+  // Building the dropdown options is a bit complex because they come from several sources:
+  // 1. The hard-coded set of default values (defaultOptions)
+  // 2. The set of available values from the API (additionalOptions)
+  // 3. The value actually set on the host (initialOption - this need not be a value from 1 or 2)
+  // We then need to combine these values into a single set of options, and ensure that
+  // (a) (unset) appears first;
+  // (b) there are no duplicate options;
+  // (c) that the currently selected option always appears (currentSelected); and
+  // (d) that the order of the items doesn't change unexpectedly.
+  const buildOptions = (defaultOptions, additionalOptions, currentSelected, initialOption) => {
+    const optionToObject = option => ({ label: option || __('(unset)'), value: option });
+    const uniqOptions = new Set(['', ...defaultOptions ?? [], ...additionalOptions ?? [], currentSelected, initialOption]);
+    uniqOptions.delete(null);
+    uniqOptions.delete(undefined);
+    return [...[...uniqOptions]?.map(optionToObject)];
+  };
+
+  const roleOptions =
+    buildOptions(defaultRoles, availableRoles, selectedRole, purposeRole);
+  const usageOptions =
+    buildOptions(defaultUsages, availableUsages, selectedUsage, purposeUsage);
+
+  // addons may be present on the host but not available from subscriptions,
+  // so we combine the options here
+  const addonToObject = addon => ({ label: addon, value: addon });
+  const addonsOptions =
+    [...new Set([ // don't repeat addons if they are already selected
+      ...purposeAddons.map(addonToObject), ...availableAddons?.map(addonToObject) ?? [],
+    ])];
+
+  const serviceLevelOptions =
+    buildOptions(defaultServiceLevels, availableServiceLevels, selectedServiceLevel, serviceLevel);
+
+  const releaseVersionOptions =
+    buildOptions([], availableReleaseVersions, selectedReleaseVersion, releaseVersion);
+
+  const handleSave = (event) => {
+    event.preventDefault();
+    closeModal();
+    const optionsToValue = (options, stateValue) =>
+      options.find(option => option.value === stateValue)?.value;
+    dispatch(updateSystemPurposeAttributes({
+      hostId,
+      attributes: {
+        autoheal: true,
+        purpose_role: optionsToValue(roleOptions, selectedRole),
+        purpose_usage: optionsToValue(usageOptions, selectedUsage),
+        purpose_addons: selectedAddons,
+        release_version: optionsToValue(releaseVersionOptions, selectedReleaseVersion),
+        service_level: optionsToValue(serviceLevelOptions, selectedServiceLevel),
+      },
+      refreshHostDetails,
+    }));
+  };
+
+  const handleCancel = () => {
+    setSelectedRole(initialPurposeRole);
+    setSelectedServiceLevel(initialServiceLevel);
+    setSelectedUsage(initialPurposeUsage);
+    setSelectedAddons(initialPurposeAddons);
+    setSelectedReleaseVersion(initialReleaseVersion);
+    closeModal();
+  };
+
+  const modalActions = ([
+    <Button ouiaId="save-syspurpose" key="save-syspurpose" variant="primary" onClick={handleSave} isDisabled={unmodified}>
+      {__('Save')}
+    </Button>,
+    <Button ouiaId="cancel-syspurpose" key="cancel" variant="link" onClick={handleCancel}>
+      {__('Cancel')}
+    </Button>,
+  ]);
+
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleCancel}
+      title={__('Edit system purpose attributes')}
+      width="40%"
+      position="top"
+      actions={modalActions}
+      id="syspurpose-edit-modal"
+      ouiaId="syspurpose-edit-modal"
+    >
+      <FormattedMessage
+        className="syspurpose-edit-modal-blurb"
+        id="syspurpose-edit-modal-blurb"
+        defaultMessage={__('Select system purpose attributes for host {hostName}.')}
+        values={{
+          hostName: <strong>{hostName}</strong>,
+        }}
+      />
+      <Form isHorizontal style={{ marginTop: '1.3rem' }}>
+        <FormGroup label={__('Role')} fieldId="role">
+          <FormSelect
+            id="role"
+            name="role"
+            ouiaId="role-select"
+            value={selectedRole}
+            onChange={setSelectedRole}
+          >
+            {roleOptions.map(option => (
+              <FormSelectOption
+                key={option.value}
+                value={option.value}
+                label={option.label}
+              />
+            ))}
+          </FormSelect>
+        </FormGroup>
+        <FormGroup label={__('SLA')} fieldId="serviceLevel">
+          <FormSelect
+            id="serviceLevel"
+            name="serviceLevel"
+            ouiaId="service-level-select"
+            value={selectedServiceLevel}
+            onChange={setSelectedServiceLevel}
+          >
+            {serviceLevelOptions.map(option => (
+              <FormSelectOption
+                key={option.value}
+                value={option.value}
+                label={option.label}
+              />
+            ))}
+          </FormSelect>
+        </FormGroup>
+        <FormGroup label={__('Usage')} fieldId="usage">
+          <FormSelect
+            id="usage"
+            name="usage"
+            ouiaId="usage-select"
+            value={selectedUsage}
+            onChange={setSelectedUsage}
+          >
+            {usageOptions.map(option => (
+              <FormSelectOption
+                key={option.value}
+                value={option.value}
+                label={option.label}
+              />
+            ))}
+          </FormSelect>
+        </FormGroup>
+        <FormGroup label={__('Release version')} fieldId="releaseVersion">
+          <FormSelect
+            id="release_version"
+            name="release_version"
+            ouiaId="release-version-select"
+            value={selectedReleaseVersion}
+            onChange={setSelectedReleaseVersion}
+          >
+            {releaseVersionOptions.map(option => (
+              <FormSelectOption
+                key={option.value}
+                value={option.value}
+                label={option.label}
+              />
+            ))}
+          </FormSelect>
+        </FormGroup>
+        <FormGroup label={__('Add-ons')} fieldId="addons">
+          <span id="syspurpose-addons-title" hidden>
+            Checkbox Title
+          </span>
+          <Select
+            variant={SelectVariant.typeaheadMulti}
+            aria-label="syspurpose-addons"
+            ouiaId="syspurpose-addons-select"
+            onToggle={toggleAddonSelect}
+            onSelect={onAddonSelect}
+            selections={selectedAddons}
+            isOpen={addonSelectOpen}
+            placeholderText={__('Select add-ons')}
+            aria-labelledby="syspurpose-addons-title"
+            menuAppendTo="parent"
+          >
+            {addonsOptions.map(option => (
+              <SelectOption
+                key={option.value}
+                value={option.value}
+                label={option.label}
+              />
+            ))}
+          </Select>
+        </FormGroup>
+      </Form>
+    </Modal>
+  );
+};
+
+export default SystemPurposeEditModal;
+
+SystemPurposeEditModal.propTypes = {
+  closeModal: PropTypes.func.isRequired,
+  hostName: PropTypes.string,
+  purposeRole: PropTypes.string.isRequired,
+  purposeUsage: PropTypes.string.isRequired,
+  purposeAddons: PropTypes.arrayOf(PropTypes.string).isRequired,
+  serviceLevel: PropTypes.string.isRequired,
+  releaseVersion: PropTypes.string,
+  isOpen: PropTypes.bool.isRequired,
+  orgId: PropTypes.number,
+  hostId: PropTypes.number,
+};
+
+SystemPurposeEditModal.defaultProps = {
+  hostName: '',
+  orgId: null,
+  hostId: null,
+  releaseVersion: '',
+};

data/webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeSelectors.js

@@ -0,0 +1,25 @@
+import {
+  selectAPIStatus,
+  selectAPIError,
+  selectAPIResponse,
+} from 'foremanReact/redux/API/APISelectors';
+import { STATUS } from 'foremanReact/constants';
+
+export const selectOrganization = (state, orgId) =>
+  selectAPIResponse(state, `ORGANIZATION_${orgId}`) ?? {};
+
+export const selectOrganizationStatus = (state, orgId) =>
+  selectAPIStatus(state, `ORGANIZATION_${orgId}`) ?? STATUS.PENDING;
+
+export const selectOrganizationError = (state, orgId) =>
+  selectAPIError(state, `ORGANIZATION_${orgId}`);
+
+export const selectAvailableReleaseVersions = (state, hostId) =>
+  selectAPIResponse(state, `AVAILABLE_RELEASE_VERSIONS_${hostId}`) ?? {};
+
+export const selectAvailableReleaseVersionsStatus = (state, hostId) =>
+  selectAPIStatus(state, `AVAILABLE_RELEASE_VERSIONS_${hostId}`) ??
+  STATUS.PENDING;
+
+export const selectAvailableReleaseVersionsError = (state, hostId) =>
+  selectAPIError(state, `AVAILABLE_RELEASE_VERSIONS_${hostId}`);

data/webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/__tests__/SystemPurposeCard.test.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import { renderWithRedux, act } from 'react-testing-lib-wrapper';
+import HOST_DETAILS from '../../../HostDetailsConstants';
+import SystemPurposeCard from '../SystemPurposeCard';
+import katelloApi, { foremanApi } from '../../../../../../services/api';
+import { assertNockRequest, nockInstance } from '../../../../../../test-utils/nockWrapper';
+
+const organizationDetails = katelloApi.getApiUrl('/organizations/1');
+const availableReleaseVersions = foremanApi.getApiUrl('/hosts/1/subscriptions/available_release_versions');
+
+const baseHostDetails = {
+  id: 1,
+  organization_id: 1,
+  permissions: {
+    edit_hosts: true,
+  },
+  subscription_facet_attributes: {
+    purpose_addons: ['Addon1', 'Addon2'],
+    purpose_role: 'Red Hat Enterprise Linux Server',
+    purpose_usage: 'Production',
+    service_level: 'Premium',
+    release_version: '8',
+    uuid: '12345',
+  },
+};
+
+const renderOptions = () => ({
+  apiNamespace: HOST_DETAILS,
+  initialState: {
+    API: {
+      HOST_DETAILS: {
+        response: {
+          id: 1,
+          name: 'test-host',
+          ...baseHostDetails,
+        },
+        status: 'RESOLVED',
+      },
+    },
+  },
+});
+
+test('shows system purpose details', async (done) => {
+  const orgScope = nockInstance
+    .get(organizationDetails)
+    .reply(200, {
+      id: 1,
+    });
+  const availableReleaseVersionsScope = nockInstance
+    .get(availableReleaseVersions)
+    .reply(200, []);
+
+  const { getByText }
+    = renderWithRedux(<SystemPurposeCard hostDetails={baseHostDetails} />, renderOptions());
+  expect(getByText('Red Hat Enterprise Linux Server')).toBeInTheDocument();
+  expect(getByText('Production')).toBeInTheDocument();
+  expect(getByText('Premium')).toBeInTheDocument();
+  expect(getByText('Addon1')).toBeInTheDocument();
+  expect(getByText('Addon2')).toBeInTheDocument();
+  expect(getByText('8')).toBeInTheDocument();
+
+  assertNockRequest(orgScope);
+  assertNockRequest(availableReleaseVersionsScope, done);
+});
+
+
+test('shows edit button for a user with edit_hosts permission', async (done) => {
+  const orgScope = nockInstance
+    .get(organizationDetails)
+    .reply(200, {
+      id: 1,
+    });
+  const availableReleaseVersionsScope = nockInstance
+    .get(availableReleaseVersions)
+    .reply(200, []);
+
+  const { queryByText }
+    = renderWithRedux(<SystemPurposeCard hostDetails={baseHostDetails} />, renderOptions());
+  expect(queryByText('Edit')).toBeInTheDocument();
+
+  assertNockRequest(orgScope);
+  assertNockRequest(availableReleaseVersionsScope, done);
+});
+
+test('does not show edit button for a user without edit_hosts permission', (done) => {
+  const orgScope = nockInstance
+    .get(organizationDetails)
+    .reply(200, {
+      id: 1,
+    });
+  const availableReleaseVersionsScope = nockInstance
+    .get(availableReleaseVersions)
+    .reply(200, []);
+
+  const limitedUser = {
+    ...baseHostDetails,
+    permissions: {
+      edit_hosts: false,
+    },
+  };
+
+  const { queryByText }
+    = renderWithRedux(<SystemPurposeCard hostDetails={limitedUser} />);
+  expect(queryByText('Edit')).not.toBeInTheDocument();
+
+  assertNockRequest(orgScope);
+  assertNockRequest(availableReleaseVersionsScope, done);
+  act(done);
+});