foreman_resource_quota 0.1.0

data/webpack/components/ResourceQuotaForm/components/QuotaState.js

@@ -0,0 +1,157 @@
+import { useState, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { deepEqual, deepCopy } from '../../../helper';
+import {
+  apiCreateResourceQuota,
+  apiUpdateResourceQuota,
+  apiGetResourceQuota,
+  apiGetResourceQuotaUtilization,
+} from '../../../api_helper';
+
+import {
+  RESOURCE_IDENTIFIER_ID,
+  RESOURCE_IDENTIFIER_NAME,
+  RESOURCE_IDENTIFIER_DESCRIPTION,
+  RESOURCE_IDENTIFIER_CPU,
+  RESOURCE_IDENTIFIER_MEMORY,
+  RESOURCE_IDENTIFIER_DISK,
+  RESOURCE_IDENTIFIER_STATUS_NUM_HOSTS,
+  RESOURCE_IDENTIFIER_STATUS_NUM_USERS,
+  RESOURCE_IDENTIFIER_STATUS_NUM_USERGROUPS,
+  RESOURCE_IDENTIFIER_STATUS_UTILIZATION,
+  RESOURCE_IDENTIFIER_STATUS_MISSING_HOSTS,
+} from '../ResourceQuotaFormConstants';
+
+const QuotaState = ({ initialProperties, initialStatus, changesCallback }) => {
+  const defaultProperties = {
+    [RESOURCE_IDENTIFIER_ID]: null,
+    [RESOURCE_IDENTIFIER_NAME]: '',
+    [RESOURCE_IDENTIFIER_DESCRIPTION]: '',
+    [RESOURCE_IDENTIFIER_CPU]: null,
+    [RESOURCE_IDENTIFIER_MEMORY]: null,
+    [RESOURCE_IDENTIFIER_DISK]: null,
+  };
+  const defaultStatus = {
+    [RESOURCE_IDENTIFIER_STATUS_NUM_HOSTS]: null,
+    [RESOURCE_IDENTIFIER_STATUS_NUM_USERS]: null,
+    [RESOURCE_IDENTIFIER_STATUS_NUM_USERGROUPS]: null,
+    [RESOURCE_IDENTIFIER_STATUS_MISSING_HOSTS]: null,
+    [RESOURCE_IDENTIFIER_STATUS_UTILIZATION]: {
+      [RESOURCE_IDENTIFIER_CPU]: null,
+      [RESOURCE_IDENTIFIER_MEMORY]: null,
+      [RESOURCE_IDENTIFIER_DISK]: null,
+    },
+  };
+  const dispatch = useDispatch();
+  const [quotaProperties, setQuotaProperties] = useState({
+    ...defaultProperties,
+    ...initialProperties,
+  });
+  const [quotaStatus, setQuotaStatus] = useState({
+    ...defaultStatus,
+    ...initialStatus,
+  });
+  const [isValid, setIsValid] = useState({
+    [RESOURCE_IDENTIFIER_NAME]: true,
+    [RESOURCE_IDENTIFIER_DESCRIPTION]: true,
+    [RESOURCE_IDENTIFIER_CPU]: true,
+    [RESOURCE_IDENTIFIER_MEMORY]: true,
+    [RESOURCE_IDENTIFIER_DISK]: true,
+  });
+
+  /* callback to notify outside listeners that the quota changed */
+  useEffect(() => {
+    // changesCallback is optional + check if name is defined (otherwise, it's most likely an empty re-render call)
+    if (changesCallback && quotaProperties[RESOURCE_IDENTIFIER_NAME])
+      changesCallback(quotaProperties, quotaStatus);
+  }, [quotaProperties, quotaStatus, changesCallback]);
+
+  /* callback to handle api response and update quota state */
+  const apiCallback = (success, response, callback) => {
+    if (response.hasOwnProperty('data')) {
+      const responseData = response.data;
+      const apiProperties = JSON.parse(JSON.stringify(quotaProperties));
+      const apiStatus = JSON.parse(JSON.stringify(quotaStatus));
+
+      deepCopy(apiProperties, responseData);
+      deepCopy(apiStatus, responseData);
+
+      if (!deepEqual(quotaProperties, apiProperties))
+        setQuotaProperties(apiProperties);
+      if (!deepEqual(quotaStatus, apiStatus)) setQuotaStatus(apiStatus);
+    }
+    callback(success, response);
+  };
+
+  /* update quotaProperties */
+  const onChange = changes => {
+    const updatedQuota = { ...quotaProperties, ...changes };
+    if (!deepEqual(quotaProperties, updatedQuota)) {
+      setQuotaProperties(updatedQuota);
+    }
+  };
+
+  /* perform API call: apply indidividual changes to existing quota */
+  const onApply = (callback, payload) => {
+    const quotaId = quotaProperties[RESOURCE_IDENTIFIER_ID];
+    dispatch(apiUpdateResourceQuota(quotaId, payload, apiCallback, callback));
+  };
+
+  /* perform API call: create a new Resource Quota */
+  const onCreate = callback => {
+    const payload = (({ [RESOURCE_IDENTIFIER_ID]: _, ...obj }) => obj)(
+      quotaProperties
+    );
+    dispatch(apiCreateResourceQuota(payload, apiCallback, callback));
+  };
+
+  /* perform API call: fetch basic information of a Resource Quota */
+  const onFetch = callback => {
+    const quotaId = quotaProperties[RESOURCE_IDENTIFIER_ID];
+    dispatch(apiGetResourceQuota(quotaId, apiCallback, callback));
+  };
+
+  /* perform API call: fetch basic information of a Resource Quota */
+  const onFetchUtilization = callback => {
+    const quotaId = quotaProperties[RESOURCE_IDENTIFIER_ID];
+    dispatch(apiGetResourceQuotaUtilization(quotaId, apiCallback, callback));
+  };
+
+  /* handle data validity response */
+  const handleInputValidation = changes => {
+    const isValidChanges = { ...isValid, ...changes };
+    if (!deepEqual(isValid, isValidChanges)) {
+      setIsValid(isValidChanges);
+    }
+  };
+
+  /* get the current quota properties */
+  const getQuotaProperties = (sub = null) => {
+    if (sub) return quotaProperties[sub];
+    return quotaProperties;
+  };
+
+  /* get the current quota status */
+  const getQuotaStatus = (sub = null) => {
+    if (sub) return quotaStatus[sub];
+    return quotaStatus;
+  };
+
+  /* get validity status of current data */
+  const getIsValid = () => isValid;
+
+  return {
+    getQuotaProperties,
+    getQuotaStatus,
+    getIsValid,
+    handleInputValidation,
+    onChange,
+    onApply,
+    onCreate,
+    onFetch,
+    onFetchUtilization,
+  };
+};
+
+export default QuotaState;

data/webpack/components/ResourceQuotaForm/components/Resource/Resource.scss

@@ -0,0 +1,13 @@
+//@import '~@theforeman/vendor/scss/variables';
+
+.pf-c-card__body:first-child {
+  padding-top: 1rem;
+}
+
+.pf-c-form__label {
+    font-size: var(--pf-global--FontSize--sm);
+}
+
+.pf-c-form__group-label-help {
+  font-size: var(--pf-global--FontSize--sm);
+}

data/webpack/components/ResourceQuotaForm/components/Resource/UnitInputField.js

@@ -0,0 +1,224 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import {
+  FormGroup,
+  TextInput,
+  InputGroup,
+  InputGroupText,
+  Dropdown,
+  DropdownItem,
+  DropdownToggle,
+} from '@patternfly/react-core';
+
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+
+import { findLargestFittingUnit } from '../../../../helper';
+
+const UnitInputField = ({
+  initialValue,
+  onChange,
+  isDisabled,
+  handleInputValidation,
+  minValue,
+  maxValue,
+  units,
+  labelIcon,
+}) => {
+  /* flexible unit adaption variables */
+  const [errorText, setErrorText] = useState('');
+  const [validated, setValidated] = useState('default');
+  const [isUnitOpen, setIsUnitOpen] = useState(false);
+  const bestFitUnit = findLargestFittingUnit(initialValue, units);
+  const [selectedUnit, setSelectedUnit] = useState(bestFitUnit);
+  const [inputValue, setInputValue] = useState(
+    initialValue / bestFitUnit.factor
+  );
+  let unitDropdownItems = [];
+
+  /* generate unitDropdownItems depending on unit */
+  if (units.length > 1) {
+    unitDropdownItems = units.map(unit => (
+      <DropdownItem
+        id={`unit-dropdownitem-${unit.symbol.toLowerCase()}`}
+        key={unit.symbol.toLowerCase()}
+      >
+        {unit.symbol}
+      </DropdownItem>
+    ));
+  }
+
+  /* text for bounds errors */
+  const errorTextBounds = useCallback(() => {
+    const boundsText = 'Value must be between %d and %d.';
+    let errorMin = minValue;
+    let errorMax = maxValue;
+    if (selectedUnit) {
+      errorMin = minValue / selectedUnit.factor;
+      errorMax = maxValue / selectedUnit.factor;
+    }
+    return __(sprintf(boundsText, errorMin, errorMax));
+  }, [minValue, maxValue, selectedUnit]);
+
+  /* text for float errors */
+  const errorTextNatural = useCallback(
+    () => __('Value must be a natural number.'),
+    []
+  );
+
+  /* text for float errors */
+  const errorTextFloating = useCallback(
+    () => __(`No floating point for smallest unit (${units[0].symbol}).`),
+    [units]
+  );
+
+  /* applies the selected unit and checks the bounds */
+  const isValid = useCallback(
+    val => {
+      if (Number.isNaN(Number(val))) {
+        setErrorText(errorTextNatural());
+        return false;
+      }
+      const baseValue = valueToBaseUnit(val);
+      if (baseValue < minValue || baseValue > maxValue) {
+        setErrorText(errorTextBounds());
+        return false;
+      }
+      if (baseValue !== Math.floor(baseValue)) {
+        setErrorText(errorTextFloating());
+        return false;
+      }
+      return true;
+    },
+    [
+      minValue,
+      maxValue,
+      valueToBaseUnit,
+      errorTextNatural,
+      errorTextBounds,
+      errorTextFloating,
+    ]
+  );
+
+  /* applies the selected unit and returns the base-unit value */
+  const valueToBaseUnit = useCallback(
+    val => {
+      if (units.length > 1) {
+        return selectedUnit.factor * val;
+      }
+      return Number(val);
+    },
+    [units, selectedUnit]
+  );
+
+  useEffect(() => {
+    if (isDisabled) {
+      handleInputValidation(true);
+      setValidated('default');
+    } else if (isValid(inputValue)) {
+      const baseValue = valueToBaseUnit(inputValue);
+      onChange(baseValue);
+      handleInputValidation(true);
+      setValidated('default');
+    } else {
+      handleInputValidation(false);
+      setValidated('error');
+    }
+  }, [
+    isDisabled,
+    inputValue,
+    selectedUnit,
+    handleInputValidation,
+    onChange,
+    isValid,
+    valueToBaseUnit,
+  ]);
+
+  /* set the selected unit */
+  const onUnitSelect = event => {
+    const { id } = event.currentTarget;
+    const selectedListItem = unitDropdownItems.find(
+      item => item.props.id === id
+    );
+    const unitItem = units.find(
+      item => item.symbol === selectedListItem.props.children
+    );
+    setSelectedUnit(unitItem);
+    setIsUnitOpen(false);
+    // FIXME: Fix input validation on unit selection
+  };
+
+  const onUnitToggle = () => {
+    setIsUnitOpen(!isUnitOpen);
+  };
+
+  /* return the unit view depending on the available units
+   *
+   * unit = null : don't print any unit
+   * unit = [.]  : print a single Textfield
+   * unit = [..] : print an editable Dropdown menu
+   * */
+  const unitView = () => {
+    if (units.length === 1) {
+      return <InputGroupText>{__(units[0].symbol)}</InputGroupText>;
+    }
+
+    return (
+      <Dropdown
+        onSelect={onUnitSelect}
+        toggle={
+          <DropdownToggle isDisabled={isDisabled} onToggle={onUnitToggle}>
+            {__(`${selectedUnit.symbol}`)}
+          </DropdownToggle>
+        }
+        isOpen={isUnitOpen}
+        dropdownItems={unitDropdownItems}
+      />
+    );
+  };
+
+  return (
+    <FormGroup
+      label={__('Quota Limit')}
+      validated={validated}
+      helperTextInvalid={errorText}
+      fieldId="quota-limit-resource-quota-form-group"
+      labelIcon={labelIcon || {}}
+    >
+      <InputGroup>
+        <TextInput
+          isDisabled={isDisabled}
+          value={inputValue}
+          min={minValue}
+          max={maxValue}
+          validated={validated}
+          id="reg_token_life_time_input"
+          onChange={setInputValue}
+        />
+        {unitView()}
+      </InputGroup>
+    </FormGroup>
+  );
+};
+
+UnitInputField.propTypes = {
+  initialValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  onChange: PropTypes.func.isRequired,
+  isDisabled: PropTypes.bool.isRequired,
+  handleInputValidation: PropTypes.func.isRequired,
+  units: PropTypes.arrayOf(
+    PropTypes.shape({
+      symbol: PropTypes.string,
+      factor: PropTypes.number,
+    })
+  ).isRequired,
+  labelIcon: PropTypes.node,
+  minValue: PropTypes.number.isRequired,
+  maxValue: PropTypes.number.isRequired,
+};
+
+UnitInputField.defaultProps = {
+  initialValue: 0,
+  labelIcon: null,
+};
+
+export default UnitInputField;

data/webpack/components/ResourceQuotaForm/components/Resource/UtilizationProgress.js

@@ -0,0 +1,151 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Progress,
+  ProgressSize,
+  ProgressVariant,
+  ProgressMeasureLocation,
+  Tooltip,
+} from '@patternfly/react-core';
+import SyncAltIcon from '@patternfly/react-icons/dist/esm/icons/sync-alt-icon';
+
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import './UtilizationProgress.scss';
+import {
+  findLargestFittingUnit,
+  areReactElementsEqual,
+} from '../../../../helper';
+
+const UtilizationProgress = ({
+  cardId,
+  resourceValue,
+  resourceUnits,
+  resourceUtilization,
+  isEnabled,
+  isNewQuota,
+}) => {
+  const [resourceUtilizationPercent, setResourceUtilizationPercent] = useState(
+    null
+  );
+  const [
+    resourceUtilizationTooltipText,
+    setResourceUtilizationTooltipText,
+  ] = useState(<div />);
+  const tooltipRefUtilization = React.useRef();
+
+  /* resource utilization bar */
+  const resourceProgressVariant = () => {
+    if (resourceUtilizationPercent < 80) return null;
+    else if (resourceUtilizationPercent < 100) return ProgressVariant.warning;
+    return ProgressVariant.danger;
+  };
+  const updateResourceUtilizationView = () => {
+    let newPercent;
+    let newTooltipText;
+
+    if (isNewQuota) {
+      newPercent = 0;
+      newTooltipText = (
+        <div>
+          <div>{__('New quota - no consumption to display.')}</div>
+        </div>
+      );
+    } else if (resourceUtilization == null) {
+      newPercent = 0;
+      newTooltipText = (
+        <div>
+          <div>{__('No consumption to display.')}</div>
+          <div>
+            {__('Click on "Fetch quota utilization": ')}
+            <SyncAltIcon />
+          </div>
+        </div>
+      );
+    } else if (resourceUtilization > resourceValue) {
+      const valueUnit = findLargestFittingUnit(resourceValue, resourceUnits);
+      const utilizationUnit = findLargestFittingUnit(
+        resourceUtilization,
+        resourceUnits
+      );
+      const utilizationInUnit = resourceUtilization / utilizationUnit.factor;
+      const valueInUnit = resourceValue / valueUnit.factor;
+      newPercent = 100;
+      newTooltipText = (
+        <div>
+          {`${utilizationInUnit} ${utilizationUnit.symbol} / ${valueInUnit} ${valueUnit.symbol}`}
+        </div>
+      );
+    } else {
+      const valueUnit = findLargestFittingUnit(resourceValue, resourceUnits);
+      const utilizationUnit = findLargestFittingUnit(
+        resourceUtilization,
+        resourceUnits
+      );
+      const utilizationInUnit = resourceUtilization / utilizationUnit.factor;
+      const valueInUnit = resourceValue / valueUnit.factor;
+      const percent = (100 * resourceUtilization) / resourceValue;
+      if (Number.isFinite(percent)) newPercent = percent;
+      else newPercent = 0;
+      newTooltipText = (
+        <div>
+          {`${utilizationInUnit} ${utilizationUnit.symbol} / ${valueInUnit} ${valueUnit.symbol}`}
+        </div>
+      );
+    }
+    if (resourceUtilizationPercent !== newPercent)
+      setResourceUtilizationPercent(newPercent);
+    if (!areReactElementsEqual(resourceUtilizationTooltipText, newTooltipText))
+      setResourceUtilizationTooltipText(newTooltipText);
+  };
+  // call it once
+  updateResourceUtilizationView();
+
+  return (
+    <div>
+      <Tooltip
+        content={resourceUtilizationTooltipText}
+        reference={tooltipRefUtilization}
+      />
+      <div
+        className={isEnabled ? '' : 'progress-disabled'}
+        ref={tooltipRefUtilization}
+      >
+        <Progress
+          aria-label={`resource-card-${cardId}-progress`}
+          value={resourceUtilizationPercent}
+          measureLocation={ProgressMeasureLocation.inside}
+          size={ProgressSize.lg}
+          variant={resourceProgressVariant()}
+        />
+      </div>
+    </div>
+  );
+};
+
+UtilizationProgress.propTypes = {
+  cardId: PropTypes.string.isRequired,
+  resourceUnits: PropTypes.arrayOf(
+    PropTypes.shape({
+      symbol: PropTypes.string,
+      factor: PropTypes.number,
+    })
+  ).isRequired,
+  resourceValue: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.oneOf([null]),
+  ]),
+  resourceUtilization: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.oneOf([null]),
+  ]),
+  isNewQuota: PropTypes.bool.isRequired,
+  isEnabled: PropTypes.bool.isRequired,
+};
+
+UtilizationProgress.defaultProps = {
+  resourceValue: 0,
+  resourceUtilization: null,
+};
+
+export default UtilizationProgress;

data/webpack/components/ResourceQuotaForm/components/Resource/UtilizationProgress.scss

@@ -0,0 +1,10 @@
+.progress-disabled {
+  background-color: transparent;
+  .pf-c-progress .pf-c-progress__bar::before {
+    background-color: var(--pf-global--disabled-color--100);
+  }
+}
+
+.progress-disabled .pf-c-progress.pf-m-inside .pf-c-progress__indicator {
+  background-color: var(--pf-global--palette--black-500);
+}