foreman_resource_quota 0.1.0

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

@@ -0,0 +1,239 @@
+import PropTypes from 'prop-types';
+import React, { useState, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import {
+  Button,
+  Card,
+  CardActions,
+  CardExpandableContent,
+  CardHeader,
+  CardTitle,
+  CardBody,
+  Switch,
+  Flex,
+  FlexItem,
+  Grid,
+  GridItem,
+  FormGroup,
+} from '@patternfly/react-core';
+
+import LabelIcon from 'foremanReact/components/common/LabelIcon';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import './Resource.scss';
+import UnitInputField from './UnitInputField';
+import UtilizationProgress from './UtilizationProgress';
+
+import { resourceAttributesByIdentifier } from '../../ResourceQuotaFormConstants';
+import dispatchAPICallbackToast from '../../../../api_helper';
+
+// TODO: Visualize maximum resource (tooltip?)
+// TODO: Add error message if given quota limit exceeds present quota utilization (consumed resources)
+
+const Resource = ({
+  resourceIdentifier,
+  resourceUtilization,
+  initialValue,
+  isNewQuota,
+  handleInputValidation,
+  onChange,
+  onApply,
+}) => {
+  const dispatch = useDispatch();
+  const cardId = resourceIdentifier;
+  const resourceAttributes = resourceAttributesByIdentifier(resourceIdentifier);
+  const resourceTitle = resourceAttributes.name;
+  const resourceMinValue = resourceAttributes.minValue;
+  const resourceMaxValue = resourceAttributes.maxValue;
+  const resourceUnits = resourceAttributes.unit;
+  const [constInitialValue, setConstInitialValue] = useState(initialValue);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isInputValid, setIsInputValid] = useState(true);
+  const [isEnabled, setIsEnabled] = useState(initialValue !== null);
+  const [inputValue, setInputValue] = useState(
+    initialValue !== null ? initialValue : 0
+  );
+  const [isApplyLoading, setIsApplyLoading] = useState(false);
+  const [isUpdateApplicable, setIsUpdateApplicable] = useState(false);
+
+  /* in case of editing an existing quota: onApply action */
+  const onClickApply = () => {
+    if (isEnabled) onApply(applyCallback, { [resourceIdentifier]: inputValue });
+    else onApply(applyCallback, { [resourceIdentifier]: null });
+
+    setIsApplyLoading(true);
+  };
+  const applyCallback = (success, response) => {
+    setIsApplyLoading(false);
+    if (response.data.hasOwnProperty(resourceIdentifier)) {
+      setConstInitialValue(response.data[resourceIdentifier]);
+      setInputValue(response.data[resourceIdentifier]);
+      setIsEnabled(response.data[resourceIdentifier] !== null);
+    }
+    dispatchAPICallbackToast(
+      dispatch,
+      success,
+      response,
+      `Sucessfully applied ${resourceTitle}.`,
+      `An error occurred appyling ${resourceTitle}.`
+    );
+  };
+
+  /* apply user input changes to state variables */
+  const onChangeEnabled = value => {
+    setIsEnabled(value);
+  };
+  const onExpand = () => {
+    setIsExpanded(!isExpanded);
+  };
+  const onInputChange = value => {
+    setInputValue(value);
+  };
+  const handleInputValidationForInputField = isValid => {
+    if (isInputValid !== isValid) {
+      setIsInputValid(isValid);
+      handleInputValidation({ [resourceIdentifier]: isValid });
+    }
+  };
+
+  /* operations for changes on enabled, valid or inputValue */
+  useEffect(() => {
+    if (isEnabled) {
+      // card enabled
+      if (isInputValid) {
+        onChange({ [resourceIdentifier]: inputValue });
+        if (inputValue !== constInitialValue) {
+          setIsUpdateApplicable(true);
+        } else {
+          // same value as initial
+          setIsUpdateApplicable(false);
+        }
+      } else {
+        // no valid input
+        setIsUpdateApplicable(false);
+      }
+    } else {
+      // card disabled
+      onChange({ [resourceIdentifier]: null });
+      if (constInitialValue !== null) {
+        setIsUpdateApplicable(true);
+      } else {
+        // card has been disabled initially
+        setIsUpdateApplicable(false);
+      }
+    }
+  }, [
+    isEnabled,
+    isInputValid,
+    inputValue,
+    constInitialValue,
+    resourceIdentifier,
+    onChange,
+  ]);
+
+  return (
+    <Card
+      isExpanded={isExpanded}
+      isDisabledRaised={!isEnabled}
+      id={`resource-card-${cardId}`}
+    >
+      <CardHeader onExpand={onExpand} isToggleRightAligned={false}>
+        <Flex>
+          <FlexItem>
+            <Switch
+              id={`switch-${cardId}`}
+              aria-label={`switch-${cardId}`}
+              onChange={onChangeEnabled}
+              isChecked={isEnabled}
+            />
+          </FlexItem>
+          <FlexItem>
+            <CardTitle>{resourceTitle}</CardTitle>
+          </FlexItem>
+        </Flex>
+        {!isNewQuota && (
+          <CardActions>
+            <Button
+              isDisabled={!isUpdateApplicable}
+              isSmall
+              isActive={isApplyLoading}
+              variant="primary"
+              onClick={onClickApply}
+              isLoading={isApplyLoading}
+            >
+              {__('Apply')}
+            </Button>
+          </CardActions>
+        )}
+      </CardHeader>
+      <CardExpandableContent>
+        <CardBody>
+          <Grid hasGutter>
+            <GridItem span={6}>
+              <UnitInputField
+                initialValue={inputValue}
+                onChange={onInputChange}
+                isDisabled={!isEnabled}
+                handleInputValidation={handleInputValidationForInputField}
+                minValue={resourceMinValue}
+                maxValue={resourceMaxValue}
+                units={resourceUnits}
+                labelIcon={
+                  <LabelIcon
+                    text={__(
+                      `The total amount of ${resourceTitle} for this quota.`
+                    )}
+                  />
+                }
+              />
+            </GridItem>
+            <GridItem span={6}>
+              <FormGroup
+                label={__('Consumed resources')}
+                fieldId="card-resource-quota-progress-form-group"
+                labelIcon={
+                  <LabelIcon
+                    text={__(
+                      `Total ${resourceTitle} currently in use by all hosts assigned to this quota.`
+                    )}
+                  />
+                }
+              />
+              <UtilizationProgress
+                cardId={cardId}
+                isNewQuota={isNewQuota}
+                resourceUnits={resourceUnits}
+                resourceValue={initialValue}
+                resourceUtilization={resourceUtilization}
+                isEnabled={isEnabled}
+              />
+            </GridItem>
+          </Grid>
+        </CardBody>
+      </CardExpandableContent>
+    </Card>
+  );
+};
+
+Resource.propTypes = {
+  isNewQuota: PropTypes.bool.isRequired,
+  resourceIdentifier: PropTypes.string.isRequired,
+  initialValue: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.oneOf([null]),
+  ]),
+  resourceUtilization: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.oneOf([null]),
+  ]),
+  handleInputValidation: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onApply: PropTypes.func.isRequired,
+};
+
+Resource.defaultProps = {
+  resourceUtilization: null,
+  initialValue: null,
+};
+
+export default Resource;

data/webpack/components/ResourceQuotaForm/components/Resources.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Grid, GridItem } from '@patternfly/react-core';
+
+import Resource from './Resource/';
+import {
+  RESOURCE_IDENTIFIER_CPU,
+  RESOURCE_IDENTIFIER_MEMORY,
+  RESOURCE_IDENTIFIER_DISK,
+} from '../ResourceQuotaFormConstants';
+
+const Resources = ({
+  initialStatus,
+  initialProperties,
+  isNewQuota,
+  handleInputValidation,
+  onChange,
+  onApply,
+}) => (
+  <Grid span={12} hasGutter>
+    <GridItem span={12} key="resources-resource-quota-cpu-item">
+      <Resource
+        isNewQuota={isNewQuota}
+        resourceIdentifier={RESOURCE_IDENTIFIER_CPU}
+        initialValue={initialProperties[RESOURCE_IDENTIFIER_CPU]}
+        resourceUtilization={initialStatus[RESOURCE_IDENTIFIER_CPU]}
+        handleInputValidation={handleInputValidation}
+        onChange={onChange}
+        onApply={onApply}
+      />
+    </GridItem>
+    <GridItem span={12} key="resources-resource-quota-memory-item">
+      <Resource
+        isNewQuota={isNewQuota}
+        resourceIdentifier={RESOURCE_IDENTIFIER_MEMORY}
+        initialValue={initialProperties[RESOURCE_IDENTIFIER_MEMORY]}
+        resourceUtilization={initialStatus[RESOURCE_IDENTIFIER_MEMORY]}
+        handleInputValidation={handleInputValidation}
+        onChange={onChange}
+        onApply={onApply}
+      />
+    </GridItem>
+    <GridItem span={12} key="resources-resource-quota-disk-item">
+      <Resource
+        isNewQuota={isNewQuota}
+        resourceIdentifier={RESOURCE_IDENTIFIER_DISK}
+        initialValue={initialProperties[RESOURCE_IDENTIFIER_DISK]}
+        resourceUtilization={initialStatus[RESOURCE_IDENTIFIER_DISK]}
+        handleInputValidation={handleInputValidation}
+        onChange={onChange}
+        onApply={onApply}
+      />
+    </GridItem>
+  </Grid>
+);
+
+Resources.defaultProps = {
+  initialStatus: {
+    [RESOURCE_IDENTIFIER_CPU]: null,
+    [RESOURCE_IDENTIFIER_MEMORY]: null,
+    [RESOURCE_IDENTIFIER_DISK]: null,
+  },
+  initialProperties: {
+    [RESOURCE_IDENTIFIER_CPU]: null,
+    [RESOURCE_IDENTIFIER_MEMORY]: null,
+    [RESOURCE_IDENTIFIER_DISK]: null,
+  },
+};
+
+Resources.propTypes = {
+  initialStatus: PropTypes.shape({
+    [RESOURCE_IDENTIFIER_CPU]: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.oneOf([null]),
+    ]),
+    [RESOURCE_IDENTIFIER_MEMORY]: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.oneOf([null]),
+    ]),
+    [RESOURCE_IDENTIFIER_DISK]: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.oneOf([null]),
+    ]),
+  }),
+  initialProperties: PropTypes.shape({
+    [RESOURCE_IDENTIFIER_CPU]: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.oneOf([null]),
+    ]),
+    [RESOURCE_IDENTIFIER_MEMORY]: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.oneOf([null]),
+    ]),
+    [RESOURCE_IDENTIFIER_DISK]: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.oneOf([null]),
+    ]),
+  }),
+  isNewQuota: PropTypes.bool.isRequired,
+  handleInputValidation: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onApply: PropTypes.func.isRequired,
+};
+
+export default Resources;

data/webpack/components/ResourceQuotaForm/components/Submit.js

@@ -0,0 +1,72 @@
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { Button, Flex, FlexItem } from '@patternfly/react-core';
+
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import dispatchAPICallbackToast from '../../../api_helper';
+
+import {
+  RESOURCE_IDENTIFIER_ID,
+  RESOURCE_IDENTIFIER_NAME,
+  RESOURCE_IDENTIFIER_DESCRIPTION,
+  RESOURCE_IDENTIFIER_CPU,
+  RESOURCE_IDENTIFIER_MEMORY,
+  RESOURCE_IDENTIFIER_DISK,
+} from '../ResourceQuotaFormConstants';
+
+const Submit = ({ isValid, onCreate, onSubmit }) => {
+  const dispatch = useDispatch();
+  const [isSubmitLoading, setIsSubmitLoading] = useState(false);
+
+  const handleOnSubmit = () => {
+    setIsSubmitLoading(true);
+    onCreate(onCreateCallback);
+  };
+
+  const onCreateCallback = (success, response) => {
+    setIsSubmitLoading(false);
+    dispatchAPICallbackToast(
+      dispatch,
+      success,
+      response,
+      `Sucessfully created new Resource Quota`,
+      `An error occurred while creating new Resource Quota.`
+    );
+    if (onSubmit) onSubmit(success);
+  };
+
+  const isAnyInvalid = () => Object.values(isValid).some(value => !value);
+
+  return (
+    <Flex>
+      <FlexItem align={{ default: 'alignLeft' }}>
+        <Button
+          isDisabled={isAnyInvalid()}
+          onClick={handleOnSubmit}
+          isLoading={isSubmitLoading}
+          variant="primary"
+          id="submit-button"
+        >
+          {__('Create resource quota')}
+        </Button>
+      </FlexItem>
+    </Flex>
+  );
+};
+
+Submit.propTypes = {
+  isValid: PropTypes.shape({
+    [RESOURCE_IDENTIFIER_NAME]: PropTypes.bool,
+    [RESOURCE_IDENTIFIER_ID]: PropTypes.bool,
+    [RESOURCE_IDENTIFIER_DESCRIPTION]: PropTypes.bool,
+    [RESOURCE_IDENTIFIER_CPU]: PropTypes.bool,
+    [RESOURCE_IDENTIFIER_MEMORY]: PropTypes.bool,
+    [RESOURCE_IDENTIFIER_DISK]: PropTypes.bool,
+  }).isRequired,
+  onCreate: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+};
+
+export default Submit;

data/webpack/components/ResourceQuotaForm/index.js

@@ -0,0 +1,185 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { Gallery, GalleryItem } from '@patternfly/react-core';
+
+import SkeletonLoader from 'foremanReact/components/common/SkeletonLoader';
+import { STATUS } from 'foremanReact/constants';
+
+import Properties from './components/Properties/';
+import Resources from './components/Resources';
+import Submit from './components/Submit';
+import QuotaState from './components/QuotaState';
+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_MISSING_HOSTS,
+  RESOURCE_IDENTIFIER_STATUS_UTILIZATION,
+} from './ResourceQuotaFormConstants';
+
+const ResourceQuotaForm = ({
+  isNewQuota,
+  initialProperties,
+  initialStatus,
+  onSubmit,
+  quotaChangesCallback,
+}) => {
+  const modelState = QuotaState({
+    initialProperties,
+    initialStatus,
+    changesCallback: quotaChangesCallback,
+  });
+
+  const [isLoading, setIsLoading] = useState(!isNewQuota);
+  const [fetchedOnce, setFetchedOnce] = useState(false);
+
+  const fetchCallback = useCallback(() => {
+    setIsLoading(false);
+  }, []);
+
+  const fetchQuotaOnce = useCallback(() => {
+    if (!isNewQuota && !fetchedOnce) {
+      modelState.onFetch(fetchCallback);
+      setFetchedOnce(true);
+    }
+  }, [modelState, isNewQuota, fetchedOnce, fetchCallback]);
+
+  useEffect(() => {
+    fetchQuotaOnce(); // this will be executed only on the first render (valid is ignored)
+  }, [fetchQuotaOnce]);
+
+  return (
+    <Gallery maxWidths={{ md: '800px' }}>
+      <Gallery hasGutter>
+        <GalleryItem key="edit-resource-quota-properties-item">
+          <SkeletonLoader
+            skeletonProps={{ width: 300 }}
+            status={isNewQuota || !isLoading ? STATUS.RESOLVED : STATUS.PENDING}
+          >
+            {(!isLoading || isNewQuota) && (
+              <Properties
+                isNewQuota={isNewQuota}
+                initialName={modelState.getQuotaProperties(
+                  RESOURCE_IDENTIFIER_NAME
+                )}
+                initialDescription={modelState.getQuotaProperties(
+                  RESOURCE_IDENTIFIER_DESCRIPTION
+                )}
+                initialStatus={modelState.getQuotaStatus()}
+                handleInputValidation={modelState.handleInputValidation}
+                onChange={modelState.onChange}
+                onApply={modelState.onApply}
+                onFetch={modelState.onFetchUtilization}
+              />
+            )}
+          </SkeletonLoader>
+        </GalleryItem>
+        <GalleryItem key="edit-resource-quota-resources-item">
+          <SkeletonLoader
+            skeletonProps={{ width: 400 }}
+            status={isNewQuota || !isLoading ? STATUS.RESOLVED : STATUS.PENDING}
+          >
+            {(!isLoading || isNewQuota) && (
+              <Resources
+                isNewQuota={isNewQuota}
+                initialProperties={modelState.getQuotaProperties()}
+                initialStatus={modelState.getQuotaStatus(
+                  RESOURCE_IDENTIFIER_STATUS_UTILIZATION
+                )}
+                handleInputValidation={modelState.handleInputValidation}
+                onChange={modelState.onChange}
+                onApply={modelState.onApply}
+              />
+            )}
+          </SkeletonLoader>
+        </GalleryItem>
+        {isNewQuota && (
+          <GalleryItem key="edit-resource-quota-submit-item">
+            <Submit
+              isValid={modelState.getIsValid()}
+              onCreate={modelState.onCreate}
+              onSubmit={onSubmit}
+            />
+          </GalleryItem>
+        )}
+      </Gallery>
+    </Gallery>
+  );
+};
+
+ResourceQuotaForm.defaultProps = {
+  onSubmit: null,
+  quotaChangesCallback: null,
+  initialProperties: {
+    [RESOURCE_IDENTIFIER_NAME]: '',
+    [RESOURCE_IDENTIFIER_DESCRIPTION]: '',
+    [RESOURCE_IDENTIFIER_CPU]: null,
+    [RESOURCE_IDENTIFIER_MEMORY]: null,
+    [RESOURCE_IDENTIFIER_DISK]: null,
+  },
+  initialStatus: {
+    [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,
+    },
+  },
+};
+
+ResourceQuotaForm.propTypes = {
+  isNewQuota: PropTypes.bool.isRequired,
+  onSubmit: PropTypes.func,
+  quotaChangesCallback: PropTypes.func,
+  initialProperties: PropTypes.shape({
+    [RESOURCE_IDENTIFIER_ID]: PropTypes.number,
+    [RESOURCE_IDENTIFIER_NAME]: PropTypes.string,
+    [RESOURCE_IDENTIFIER_DESCRIPTION]: PropTypes.string,
+    [RESOURCE_IDENTIFIER_CPU]: PropTypes.number,
+    [RESOURCE_IDENTIFIER_MEMORY]: PropTypes.number,
+    [RESOURCE_IDENTIFIER_DISK]: PropTypes.number,
+  }),
+  initialStatus: PropTypes.shape({
+    [RESOURCE_IDENTIFIER_STATUS_NUM_HOSTS]: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.oneOf([null]),
+    ]),
+    [RESOURCE_IDENTIFIER_STATUS_NUM_USERS]: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.oneOf([null]),
+    ]),
+    [RESOURCE_IDENTIFIER_STATUS_NUM_USERGROUPS]: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.oneOf([null]),
+    ]),
+    [RESOURCE_IDENTIFIER_STATUS_MISSING_HOSTS]: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.oneOf([null]),
+    ]),
+    [RESOURCE_IDENTIFIER_STATUS_UTILIZATION]: PropTypes.shape({
+      [RESOURCE_IDENTIFIER_CPU]: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.oneOf([null]),
+      ]),
+      [RESOURCE_IDENTIFIER_MEMORY]: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.oneOf([null]),
+      ]),
+      [RESOURCE_IDENTIFIER_DISK]: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.oneOf([null]),
+      ]),
+    }),
+  }),
+};
+
+export default ResourceQuotaForm;