foreman_resource_quota 0.1.0

data/webpack/components/ResourceQuotaEmptyState/index.js

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { Button, Modal, ModalVariant } from '@patternfly/react-core';
+
+import { translate as __ } from 'foremanReact/common/I18n';
+import EmptyStatePattern from 'foremanReact/components/common/EmptyState/EmptyStatePattern';
+
+import ResourceQuotaForm from '../ResourceQuotaForm';
+import { MODAL_ID_CREATE_RESOURCE_QUOTA } from '../ResourceQuotaForm/ResourceQuotaFormConstants';
+
+const ResourceQuotaEmptyState = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onSubmitSuccessCallback = success => {
+    if (success) {
+      setIsOpen(false);
+      window.location.reload();
+    }
+  };
+
+  const ActionButton = (
+    <Button
+      id="foreman-resource-quota-welcome-create-modal-button"
+      variant="primary"
+      onClick={() => {
+        setIsOpen(true);
+      }}
+    >
+      {__('Create resource quota')}
+    </Button>
+  );
+  return (
+    <div>
+      <EmptyStatePattern
+        icon="pficon pficon-cluster"
+        iconType="pf"
+        header={__('Resource Quotas')}
+        description={__(
+          'Resource Quotas help admins to manage hardware resources (like CPUs, RAM, and disk space) among users or usergroups. \n\rDefine a Resource Quota here and apply it to users in order to guarantee a free share of your resources.'
+        )}
+        action={ActionButton}
+      />
+      <Modal
+        ouiaId={MODAL_ID_CREATE_RESOURCE_QUOTA}
+        title={__('Create resource quota')}
+        variant={ModalVariant.small}
+        isOpen={isOpen}
+        onClose={() => {
+          setIsOpen(false);
+        }}
+        appendTo={document.body}
+      >
+        <ResourceQuotaForm isNewQuota onSubmit={onSubmitSuccessCallback} />
+      </Modal>
+    </div>
+  );
+};
+
+export default ResourceQuotaEmptyState;

data/webpack/components/ResourceQuotaForm/ResourceQuotaForm.scss

@@ -0,0 +1 @@
+@import '~@theforeman/vendor/scss/variables';

data/webpack/components/ResourceQuotaForm/ResourceQuotaFormConstants.js

@@ -0,0 +1,71 @@
+/* Resource identifier */
+export const RESOURCE_IDENTIFIER_ID = 'id';
+export const RESOURCE_IDENTIFIER_NAME = 'name';
+export const RESOURCE_IDENTIFIER_DESCRIPTION = 'description';
+export const RESOURCE_IDENTIFIER_CPU = 'cpu_cores';
+export const RESOURCE_IDENTIFIER_MEMORY = 'memory_mb';
+export const RESOURCE_IDENTIFIER_DISK = 'disk_gb';
+export const RESOURCE_IDENTIFIER_STATUS_NUM_HOSTS = 'number_of_hosts';
+export const RESOURCE_IDENTIFIER_STATUS_NUM_USERS = 'number_of_users';
+export const RESOURCE_IDENTIFIER_STATUS_NUM_USERGROUPS = 'number_of_usergroups';
+export const RESOURCE_IDENTIFIER_STATUS_UTILIZATION = 'utilization';
+export const RESOURCE_IDENTIFIER_STATUS_MISSING_HOSTS = 'missing_hosts';
+
+/* Resource names */
+export const RESOURCE_NAME_CPU = 'CPU cores';
+export const RESOURCE_NAME_MEMORY = 'Memory';
+export const RESOURCE_NAME_DISK = 'Disk space';
+
+/* Resource units (order the units with increasing factor!) */
+export const RESOURCE_UNIT_CPU = [{ symbol: 'cores', factor: 1 }];
+export const RESOURCE_UNIT_MEMORY = [
+  { symbol: 'MB', factor: 1 },
+  { symbol: 'GB', factor: 1024 },
+  { symbol: 'TB', factor: 1024 * 1024 },
+];
+export const RESOURCE_UNIT_DISK = [
+  { symbol: 'GB', factor: 1 },
+  { symbol: 'TB', factor: 1024 },
+  { symbol: 'PB', factor: 1024 * 1024 },
+];
+
+/* Resource value bounds */
+export const RESOURCE_VALUE_MIN_CPU = 0;
+export const RESOURCE_VALUE_MAX_CPU = 1999999999;
+export const RESOURCE_VALUE_MIN_MEMORY = 0;
+export const RESOURCE_VALUE_MAX_MEMORY = 1999999999;
+export const RESOURCE_VALUE_MIN_DISK = 0;
+export const RESOURCE_VALUE_MAX_DISK = 1999999999;
+
+/* Map attributes to given resource identifier (name, unit, minValue, maxValue) */
+export const resourceAttributesByIdentifier = identifier => {
+  switch (identifier) {
+    case RESOURCE_IDENTIFIER_CPU:
+      return {
+        name: RESOURCE_NAME_CPU,
+        unit: RESOURCE_UNIT_CPU,
+        minValue: RESOURCE_VALUE_MIN_CPU,
+        maxValue: RESOURCE_VALUE_MAX_CPU,
+      };
+    case RESOURCE_IDENTIFIER_MEMORY:
+      return {
+        name: RESOURCE_NAME_MEMORY,
+        unit: RESOURCE_UNIT_MEMORY,
+        minValue: RESOURCE_VALUE_MIN_MEMORY,
+        maxValue: RESOURCE_VALUE_MAX_MEMORY,
+      };
+    case RESOURCE_IDENTIFIER_DISK:
+      return {
+        name: RESOURCE_NAME_DISK,
+        unit: RESOURCE_UNIT_DISK,
+        minValue: RESOURCE_VALUE_MIN_DISK,
+        maxValue: RESOURCE_VALUE_MAX_DISK,
+      };
+    default:
+      return null;
+  }
+};
+
+/* HTML constants */
+export const MODAL_ID_CREATE_RESOURCE_QUOTA = `foreman-resource-quota-create-modal`;
+export const MODAL_ID_UPDATE_RESOURCE_QUOTA = `foreman-resource-quota-create-modal`;

data/webpack/components/ResourceQuotaForm/components/Properties/Properties.scss

@@ -0,0 +1,9 @@
+@import '~@theforeman/vendor/scss/variables';
+
+.pf-c-card__body {
+  padding-top: 1rem;
+}
+
+.pf-c-content dl {
+  margin-bottom: 0px;
+}

data/webpack/components/ResourceQuotaForm/components/Properties/StaticDetail.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  TextListItem,
+  TextListItemVariants,
+  TextInput,
+  TextArea,
+} from '@patternfly/react-core';
+
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import '../../../../lib/EditableTextInput/editableTextInput.scss';
+
+const StaticDetail = ({
+  value,
+  label,
+  id,
+  onChange,
+  isTextArea,
+  validated,
+  isRequired,
+}) => {
+  const finalLabel = isRequired ? __(`${label} *`) : __(`${label}`);
+
+  return (
+    <React.Fragment key={label}>
+      <TextListItem component={TextListItemVariants.dt}>
+        {finalLabel}
+      </TextListItem>
+      <TextListItem
+        component={TextListItemVariants.dd}
+        className="foreman-spaced-list"
+      >
+        {isTextArea ? (
+          <TextArea
+            id={id}
+            onChange={onChange}
+            value={value}
+            validated={validated}
+            isRequired={isRequired}
+          />
+        ) : (
+          <TextInput
+            id={id}
+            onChange={onChange}
+            value={value}
+            validated={validated}
+            isRequired={isRequired}
+          />
+        )}
+      </TextListItem>
+    </React.Fragment>
+  );
+};
+
+StaticDetail.defaultProps = {
+  value: '',
+  isTextArea: false,
+  isRequired: false,
+};
+
+StaticDetail.propTypes = {
+  value: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  validated: PropTypes.string.isRequired,
+  isTextArea: PropTypes.bool,
+  isRequired: PropTypes.bool,
+};
+
+export default StaticDetail;

data/webpack/components/ResourceQuotaForm/components/Properties/StatusPropertiesLabel.js

@@ -0,0 +1,71 @@
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { Label, Tooltip } from '@patternfly/react-core';
+
+import withReactRoutes from 'foremanReact/common/withReactRoutes';
+
+const NULL_COLOR = 'gray';
+const NULL_TEXT = 'none';
+
+const StatusPropertiesLabel = ({
+  iconChild,
+  statusContent,
+  linkUrl,
+  color,
+  tooltipText,
+}) => {
+  const [text, setText] = useState(
+    statusContent !== null ? statusContent : NULL_TEXT
+  );
+  const [iconColor, setIconColor] = useState(
+    statusContent !== null ? color : NULL_COLOR
+  );
+
+  if (statusContent !== null && text !== `${statusContent}`) {
+    setText(`${statusContent}`);
+    setIconColor(color);
+  }
+
+  return (
+    <Tooltip content={tooltipText}>
+      <Label
+        isCompact
+        icon={iconChild}
+        color={iconColor}
+        render={({ className, content, componentRef }) => (
+          <Link
+            to={`${linkUrl}`}
+            className={className}
+            innerRef={componentRef}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {content}
+          </Link>
+        )}
+      >
+        {text}
+      </Label>
+    </Tooltip>
+  );
+};
+
+StatusPropertiesLabel.defaultProps = {
+  color: 'blue',
+  statusContent: null,
+};
+
+StatusPropertiesLabel.propTypes = {
+  iconChild: PropTypes.element.isRequired,
+  statusContent: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.oneOf([null]),
+  ]),
+  linkUrl: PropTypes.string.isRequired,
+  color: PropTypes.string,
+  tooltipText: PropTypes.string.isRequired,
+};
+
+export default withReactRoutes(StatusPropertiesLabel);

data/webpack/components/ResourceQuotaForm/components/Properties/StatusPropertiesLabel.test.js

@@ -0,0 +1,50 @@
+/* eslint-disable promise/prefer-await-to-then */
+// Configure Enzyme
+import { mount } from '@theforeman/test';
+import React from 'react';
+import { Provider } from 'react-redux';
+import store from 'foremanReact/redux';
+import LabelIcon from 'foremanReact/components/common/LabelIcon';
+import StatusPropertiesLabel from './StatusPropertiesLabel';
+
+const defaultProps = {
+  color: 'blue',
+  iconChild: <LabelIcon text="test" />,
+  statusContent: 'some content',
+  linkUrl: '/test/link',
+  tooltipText: 'Some nice tooltip',
+};
+
+describe('StatusPropertiesLabel', () => {
+  const wrapper = mount(
+    <Provider store={store}>
+      <StatusPropertiesLabel {...defaultProps} />
+    </Provider>
+  );
+
+  it('includes components', () => {
+    expect(wrapper.find('Tooltip').exists()).toBe(true);
+    expect(wrapper.find('Tooltip')).toHaveLength(1);
+    expect(wrapper.find('Label').exists()).toBe(true);
+    expect(wrapper.find('Label')).toHaveLength(1);
+    expect(wrapper.find('Link').exists()).toBe(true);
+    expect(wrapper.find('Link')).toHaveLength(1);
+  });
+
+  it('passes properties', () => {
+    // ToolTip
+    const tooltip = wrapper.find('Tooltip');
+    expect(tooltip.props()).toHaveProperty('content');
+    expect(tooltip.prop('content')).toContain(defaultProps.tooltipText);
+    // Label
+    const label = wrapper.find('Label');
+    expect(label.props()).toHaveProperty('icon');
+    expect(label.prop('icon')).toEqual(defaultProps.iconChild);
+    expect(label.props()).toHaveProperty('color');
+    expect(label.prop('color')).toEqual(defaultProps.color);
+    // Link
+    const link = wrapper.find('Link');
+    expect(link.props()).toHaveProperty('to');
+    expect(link.prop('to')).toEqual(defaultProps.linkUrl);
+  });
+});

data/webpack/components/ResourceQuotaForm/components/Properties/TextInputField.js

@@ -0,0 +1,131 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import ActionableDetail from '../../../../lib/ActionableDetail';
+import StaticDetail from './StaticDetail';
+import dispatchAPICallbackToast from '../../../../api_helper';
+
+const TextInputField = ({
+  initialValue,
+  label,
+  attribute,
+  onChange,
+  onApply,
+  handleInputValidation,
+  isRestrictInputValidation,
+  isRequired,
+  isTextArea,
+  isNewQuota,
+}) => {
+  const dispatch = useDispatch();
+  const [currentAttribute, setCurrentAttribute] = useState();
+  const [isLoading, setIsLoading] = useState(false);
+  const [isInputValid, setIsInputValid] = useState(!isRequired);
+  const [validated, setValidated] = useState(isRequired ? 'error' : 'default');
+  const [value, setValue] = useState(initialValue || '');
+  const staticKey = `properties-resource-quota-${attribute}-static`;
+  const actionKey = `properties-resource-quota-${attribute}-actionable`;
+
+  const isValid = checkValue => {
+    if (isRequired && checkValue === '') return false;
+    return true;
+  };
+
+  const callback = (success, response) => {
+    setIsLoading(false);
+    dispatchAPICallbackToast(
+      dispatch,
+      success,
+      response,
+      `Sucessfully applied ${label}.`,
+      `An error occurred appyling ${label}.`
+    );
+  };
+
+  /* Guard setting of isInputValid to prevent re-render reace condition */
+  const localHandleInputValidation = useCallback(
+    (valid, firstCall = false) => {
+      if (firstCall) {
+        setIsInputValid(isInputValid);
+        handleInputValidation({ [attribute]: isInputValid });
+      } else if (valid !== isInputValid || firstCall) {
+        setIsInputValid(valid);
+        handleInputValidation({ [attribute]: valid });
+      }
+    },
+    [attribute, handleInputValidation, isInputValid]
+  );
+
+  useEffect(() => {
+    localHandleInputValidation(false, true); // this will be executed only on the first render (valid is ignored)
+  }, [localHandleInputValidation]);
+
+  const onEdit = val => {
+    if (val === value) return;
+    setValue(val);
+    if (isValid(val)) {
+      localHandleInputValidation(true);
+      setValidated('default');
+      if (isNewQuota) {
+        onChange({ [attribute]: val });
+      } else {
+        onApply(callback, { [attribute]: val });
+        setIsLoading(true);
+      }
+    } else {
+      localHandleInputValidation(false);
+      setValidated('error');
+    }
+  };
+
+  return isNewQuota ? (
+    <StaticDetail
+      id={staticKey}
+      value={value}
+      label={label}
+      onChange={onEdit}
+      isRequired={isRequired}
+      validated={validated}
+      isTextArea={isTextArea}
+    />
+  ) : (
+    <ActionableDetail
+      key={actionKey}
+      label={isRequired ? __(`${label} *`) : __(`${label}`)}
+      attribute={attribute}
+      loading={isLoading && currentAttribute === attribute}
+      onEdit={onEdit}
+      value={value}
+      disabled={false}
+      textArea={isTextArea}
+      validated={validated}
+      {...{ currentAttribute, setCurrentAttribute }}
+    />
+  );
+};
+
+TextInputField.defaultProps = {
+  initialValue: '',
+  isTextArea: false,
+  isRequired: false,
+  isRestrictInputValidation: false,
+  isNewQuota: false,
+};
+
+TextInputField.propTypes = {
+  initialValue: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  attribute: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onApply: PropTypes.func.isRequired,
+  handleInputValidation: PropTypes.func.isRequired,
+  isRestrictInputValidation: PropTypes.bool,
+  isTextArea: PropTypes.bool,
+  isRequired: PropTypes.bool,
+  isNewQuota: PropTypes.bool,
+};
+
+export default TextInputField;

data/webpack/components/ResourceQuotaForm/components/Properties/index.js

@@ -0,0 +1,190 @@
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import {
+  TextList,
+  TextContent,
+  TextListVariants,
+  Card,
+  CardBody,
+  CardHeader,
+  CardActions,
+  CardTitle,
+  Level,
+  LabelGroup,
+  Button,
+  Tooltip,
+} from '@patternfly/react-core';
+
+import UserIcon from '@patternfly/react-icons/dist/esm/icons/user-icon';
+import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
+import ClusterIcon from '@patternfly/react-icons/dist/esm/icons/cluster-icon';
+import SyncAltIcon from '@patternfly/react-icons/dist/esm/icons/sync-alt-icon';
+
+import { translate as __ } from 'foremanReact/common/I18n';
+import dispatchAPICallbackToast from '../../../../api_helper';
+
+import './Properties.scss';
+import StatusPropertiesLabel from './StatusPropertiesLabel';
+import TextInputField from './TextInputField';
+import {
+  RESOURCE_IDENTIFIER_NAME,
+  RESOURCE_IDENTIFIER_DESCRIPTION,
+  RESOURCE_IDENTIFIER_STATUS_NUM_HOSTS,
+  RESOURCE_IDENTIFIER_STATUS_NUM_USERS,
+  RESOURCE_IDENTIFIER_STATUS_NUM_USERGROUPS,
+} from '../../ResourceQuotaFormConstants';
+
+const Properties = ({
+  isNewQuota,
+  initialName,
+  initialDescription,
+  initialStatus,
+  handleInputValidation,
+  onChange,
+  onApply,
+  onFetch,
+}) => {
+  const dispatch = useDispatch();
+  const tooltipRefFetchButton = React.useRef();
+
+  const [isFetchLoading, setIsFetchLoading] = useState(false);
+  const [statusProperties] = useState(initialStatus);
+
+  const onClickFetch = () => {
+    onFetch(callbackFetch);
+    setIsFetchLoading(true);
+  };
+
+  const callbackFetch = (success, response) => {
+    setIsFetchLoading(false);
+    dispatchAPICallbackToast(
+      dispatch,
+      success,
+      response,
+      `Sucessfully fetched latest data.`,
+      `An error occurred fetching quota information.`
+    );
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        {!isNewQuota && (
+          <CardActions>
+            <Button
+              isLoading={isFetchLoading}
+              icon={<SyncAltIcon />}
+              isSmall
+              onClick={onClickFetch}
+              ref={tooltipRefFetchButton}
+            />
+            <Tooltip
+              content={
+                <div>
+                  <b> {__('Fetch quota utilization')} </b>
+                  <div>
+                    {__(
+                      'This can take some time since the resources of every host, assigned to this quota, must be requested.'
+                    )}
+                  </div>
+                </div>
+              }
+              reference={tooltipRefFetchButton}
+            />
+          </CardActions>
+        )}
+        {isNewQuota ? (
+          <CardTitle>{__('Properties')}</CardTitle>
+        ) : (
+          <Level hasGutter>
+            <CardTitle>{__('Properties')}</CardTitle>
+            <LabelGroup isCompact>
+              <StatusPropertiesLabel
+                color="blue"
+                iconChild={<ClusterIcon />}
+                statusContent={
+                  statusProperties[RESOURCE_IDENTIFIER_STATUS_NUM_HOSTS]
+                }
+                linkUrl={`/hosts?search=resource_quota="${initialName}"`}
+                tooltipText="Number of assigned hosts"
+              />
+              <StatusPropertiesLabel
+                color="blue"
+                iconChild={<UserIcon />}
+                statusContent={
+                  statusProperties[RESOURCE_IDENTIFIER_STATUS_NUM_USERS]
+                }
+                linkUrl={`/users?search=resource_quota="${initialName}"`}
+                tooltipText="Number of assigned users"
+              />
+              <StatusPropertiesLabel
+                color="blue"
+                iconChild={<UsersIcon />}
+                statusContent={
+                  statusProperties[RESOURCE_IDENTIFIER_STATUS_NUM_USERGROUPS]
+                }
+                linkUrl={`/usergroups?search=resource_quota="${initialName}"`}
+                tooltipText="Number of assigned usergroups"
+              />
+            </LabelGroup>
+          </Level>
+        )}
+      </CardHeader>
+      <CardBody>
+        <TextContent>
+          <TextList component={TextListVariants.dl}>
+            <TextInputField
+              initialValue={initialName}
+              isNewQuota={isNewQuota}
+              label={__('Name')}
+              attribute={RESOURCE_IDENTIFIER_NAME}
+              handleInputValidation={handleInputValidation}
+              onApply={onApply}
+              onChange={onChange}
+              isRestrictInputValidation
+              isRequired
+            />
+            <TextInputField
+              initialValue={initialDescription}
+              isNewQuota={isNewQuota}
+              label={__('Description')}
+              attribute={RESOURCE_IDENTIFIER_DESCRIPTION}
+              handleInputValidation={handleInputValidation}
+              onApply={onApply}
+              onChange={onChange}
+              isTextArea
+            />
+          </TextList>
+        </TextContent>
+      </CardBody>
+    </Card>
+  );
+};
+
+Properties.defaultProps = {
+  initialName: '',
+  initialDescription: '',
+  initialStatus: {
+    [RESOURCE_IDENTIFIER_STATUS_NUM_HOSTS]: null,
+    [RESOURCE_IDENTIFIER_STATUS_NUM_USERS]: null,
+    [RESOURCE_IDENTIFIER_STATUS_NUM_USERGROUPS]: null,
+  },
+};
+
+Properties.propTypes = {
+  isNewQuota: PropTypes.bool.isRequired,
+  initialName: PropTypes.string,
+  initialDescription: PropTypes.string,
+  initialStatus: PropTypes.shape({
+    [RESOURCE_IDENTIFIER_STATUS_NUM_HOSTS]: PropTypes.number,
+    [RESOURCE_IDENTIFIER_STATUS_NUM_USERS]: PropTypes.number,
+    [RESOURCE_IDENTIFIER_STATUS_NUM_USERGROUPS]: PropTypes.number,
+  }),
+  handleInputValidation: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onApply: PropTypes.func.isRequired,
+  onFetch: PropTypes.func.isRequired,
+};
+
+export default Properties;