foreman_resource_quota 0.1.0

data/webpack/components/UpdateResourceQuotaModal.js

@@ -0,0 +1,143 @@
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import { Modal, ModalVariant } from '@patternfly/react-core';
+
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import ResourceQuotaForm from './ResourceQuotaForm';
+import {
+  MODAL_ID_UPDATE_RESOURCE_QUOTA,
+  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 './ResourceQuotaForm/ResourceQuotaFormConstants';
+
+const UpdateResourceQuotaModal = ({ initialProperties, initialStatus }) => {
+  const staticId = `${MODAL_ID_UPDATE_RESOURCE_QUOTA}-${initialProperties[RESOURCE_IDENTIFIER_ID]}`;
+  const [isOpen, setIsOpen] = useState(false);
+  const [quotaProperties, setQuotaProperties] = useState(initialProperties);
+  const [quotaStatus, setQuotaStatus] = useState(initialStatus);
+
+  const onQuotaChangesCallback = (updatedProperties, updatedStatus) => {
+    setQuotaProperties(updatedProperties);
+    setQuotaStatus(updatedStatus);
+  };
+
+  return (
+    <div>
+      <a
+        onClick={() => {
+          setIsOpen(true);
+        }}
+      >
+        {quotaProperties[RESOURCE_IDENTIFIER_NAME]}
+      </a>
+      <Modal
+        ouiaId={staticId}
+        title={__(`Edit: ${quotaProperties[RESOURCE_IDENTIFIER_NAME]}`)}
+        variant={ModalVariant.small}
+        isOpen={isOpen}
+        onClose={() => {
+          setIsOpen(false);
+        }}
+        appendTo={document.body}
+      >
+        <ResourceQuotaForm
+          isNewQuota={false}
+          initialProperties={quotaProperties}
+          initialStatus={quotaStatus}
+          quotaChangesCallback={onQuotaChangesCallback}
+        />
+      </Modal>
+    </div>
+  );
+};
+
+UpdateResourceQuotaModal.defaultProps = {
+  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,
+    },
+  },
+};
+
+UpdateResourceQuotaModal.propTypes = {
+  initialProperties: PropTypes.shape({
+    [RESOURCE_IDENTIFIER_ID]: PropTypes.number.isRequired,
+    [RESOURCE_IDENTIFIER_NAME]: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.oneOf([null]),
+    ]),
+    [RESOURCE_IDENTIFIER_DESCRIPTION]: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.oneOf([null]),
+    ]),
+    [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]),
+    ]),
+  }),
+  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 UpdateResourceQuotaModal;

data/webpack/global_index.js

@@ -0,0 +1,15 @@
+// Placeholder to initialize routes (compare foreman_ansible)
+
+/*
+import { addGlobalFill } from 'foremanReact/components/common/Fill/GlobalFill';
+import { registerReducer } from 'foremanReact/common/MountingService';
+import { registerRoutes } from 'foremanReact/routes/RoutingService';
+import Routes from './src/Router/routes'
+
+register client routes
+registerRoutes('PluginTemplate', Routes);
+
+register fills for extending foreman core
+http://foreman.surge.sh/?path=/docs/introduction-slot-and-fill--page
+addGlobalFill('<slotId>', '<fillId>', <div key='plugin-template-example' />, 300);
+*/

data/webpack/global_test_setup.js

@@ -0,0 +1,11 @@
+// runs before each test to make sure console.error output will
+// fail a test (i.e. default PropType missing). Check the error
+// output and traceback for actual error.
+global.console.error = (error, stack) => {
+  /* eslint-disable-next-line no-console */
+  if (stack) console.log(stack); // Prints out original stack trace
+  throw new Error(error);
+};
+
+// Increase jest timeout as some tests using multiple http mocks can time out on CI systems.
+jest.setTimeout(10000);

data/webpack/helper.js

@@ -0,0 +1,86 @@
+import ReactDOMServer from 'react-dom/server';
+
+/**
+ * Performs a deep equality comparison between two objects, including nested objects and arrays.
+ * @param {Object} obj1 - The first object to compare.
+ * @param {Object} obj2 - The second object to compare.
+ * @returns {boolean} True if the objects are deeply equal, false otherwise.
+ */
+const deepEqual = (obj1, obj2) => {
+  if (obj1 === obj2) {
+    return true;
+  }
+
+  if (
+    typeof obj1 !== 'object' ||
+    typeof obj2 !== 'object' ||
+    obj1 === null ||
+    obj2 === null
+  ) {
+    return false;
+  }
+
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+
+  // eslint-disable-next-line no-unused-vars
+  for (const key of keys1) {
+    if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
+      return false;
+    }
+  }
+
+  return true;
+};
+
+const areReactElementsEqual = (element1, element2) => {
+  const elementToStr = element =>
+    element && ReactDOMServer.renderToStaticMarkup(element);
+
+  const element1Str = elementToStr(element1);
+  const element2Str = elementToStr(element2);
+
+  return element1Str === element2Str;
+};
+
+/**
+ * Recursively copies values from the source hash (`src`) to the destination hash (`dest`).
+ * Only keys that are a member of dest will copied from src.
+ *
+ * @param {Object} dest - The destination hash to copy values into.
+ * @param {Object} src - The source hash from which values are copied.
+ * @returns {void} - The function modifies the destination hash in place.
+ */
+function deepCopy(dest, src) {
+  if (dest) {
+    Object.keys(dest).forEach(key => {
+      if (src.hasOwnProperty(key)) {
+        if (typeof dest[key] === 'object' && typeof src[key] === 'object') {
+          deepCopy(dest[key], src[key]);
+        } else if (dest[key] !== src[key]) {
+          dest[key] = src[key];
+        }
+      }
+    });
+  }
+}
+
+/**
+ * Finds the largest unit from a list that fits the given value.
+ *
+ * @param {number} value - The value to find the largest fitting unit for.
+ * @param {Array<Object>} unitList - An array of unit objects with 'factor' properties.
+ * @returns {Object} The largest unit object that fits the value.
+ */
+const findLargestFittingUnit = (value, unitList) => {
+  for (let i = unitList.length - 1; i >= 0; i--) {
+    if (value >= unitList[i].factor) return unitList[i];
+  }
+  return unitList[0];
+};
+
+export { deepEqual, deepCopy, findLargestFittingUnit, areReactElementsEqual };

data/webpack/index.js

@@ -0,0 +1,23 @@
+import componentRegistry from 'foremanReact/components/componentRegistry';
+import ResourceQuotaEmptyState from './components/ResourceQuotaEmptyState';
+import ResourceQuotaForm from './components/ResourceQuotaForm';
+import CreateResourceQuotaModal from './components/CreateResourceQuotaModal';
+import UpdateResourceQuotaModal from './components/UpdateResourceQuotaModal';
+
+/* register React components for erb mounting */
+componentRegistry.register({
+  name: 'ResourceQuotaEmptyState',
+  type: ResourceQuotaEmptyState,
+});
+componentRegistry.register({
+  name: 'ResourceQuotaForm',
+  type: ResourceQuotaForm,
+});
+componentRegistry.register({
+  name: 'UpdateResourceQuotaModal',
+  type: UpdateResourceQuotaModal,
+});
+componentRegistry.register({
+  name: 'CreateResourceQuotaModal',
+  type: CreateResourceQuotaModal,
+});

data/webpack/lib/ActionableDetail.js

@@ -0,0 +1,115 @@
+/* Credits: https://github.com/Katello/katello/blob/631d5bb83dc5d87320ee9002a6de33809a281b3e/webpack/components/ActionableDetail.js */
+import React from 'react';
+import {
+  TextListItem,
+  TextListItemVariants,
+  Tooltip,
+  TooltipPosition,
+  Spinner,
+} from '@patternfly/react-core';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
+import PropTypes from 'prop-types';
+
+import './ActionableDetail.scss';
+import EditableTextInput from './EditableTextInput';
+import EditableSwitch from './EditableSwitch';
+
+// To be used within a TextList
+const ActionableDetail = ({
+  attribute,
+  label,
+  value,
+  textArea,
+  boolean,
+  tooltip,
+  onEdit,
+  currentAttribute,
+  setCurrentAttribute,
+  disabled,
+  loading,
+  ...rest
+}) => {
+  const displayProps = {
+    attribute,
+    value,
+    onEdit,
+    disabled,
+    currentAttribute,
+    setCurrentAttribute,
+    ...rest,
+  };
+
+  return (
+    <React.Fragment key={label}>
+      {label && (
+        <TextListItem component={TextListItemVariants.dt}>
+          {label}
+          {tooltip && (
+            <span className="foreman-spaced-icon">
+              <Tooltip position={TooltipPosition.top} content={tooltip}>
+                <OutlinedQuestionCircleIcon />
+              </Tooltip>
+            </span>
+          )}
+        </TextListItem>
+      )}
+      <TextListItem
+        component={TextListItemVariants.dd}
+        className="foreman-spaced-list"
+      >
+        {loading ? (
+          <Spinner
+            key={label + currentAttribute}
+            size="lg"
+            diameter={textArea ? '53px' : '1.5rem'}
+          />
+        ) : (
+          <>
+            {boolean ? (
+              <EditableSwitch {...displayProps} />
+            ) : (
+              <EditableTextInput
+                {...{
+                  ...displayProps,
+                  textArea,
+                }}
+              />
+            )}
+          </>
+        )}
+      </TextListItem>
+    </React.Fragment>
+  );
+};
+
+ActionableDetail.propTypes = {
+  attribute: PropTypes.string.isRequired, // back-end name for API call
+  label: PropTypes.string,
+  value: PropTypes.oneOfType([
+    // displayed value
+    PropTypes.string,
+    PropTypes.bool,
+  ]),
+  onEdit: PropTypes.func.isRequired,
+  textArea: PropTypes.bool,
+  boolean: PropTypes.bool,
+  tooltip: PropTypes.string,
+  currentAttribute: PropTypes.string,
+  setCurrentAttribute: PropTypes.func,
+  disabled: PropTypes.bool,
+  loading: PropTypes.bool,
+};
+
+ActionableDetail.defaultProps = {
+  label: undefined,
+  textArea: false,
+  boolean: false,
+  tooltip: null,
+  value: null,
+  currentAttribute: undefined,
+  setCurrentAttribute: undefined,
+  disabled: false,
+  loading: false,
+};
+
+export default ActionableDetail;

data/webpack/lib/ActionableDetail.scss

@@ -0,0 +1,4 @@
+
+dt {
+  font-size: var(--pf-global--FontSize--sm);
+}

data/webpack/lib/EditableSwitch.js

@@ -0,0 +1,47 @@
+/* Credits: https://github.com/Katello/katello/blob/631d5bb83dc5d87320ee9002a6de33809a281b3e/webpack/components/EditableSwitch.js */
+import React from 'react';
+import { Switch } from '@patternfly/react-core';
+import { noop } from 'foremanReact/common/helpers';
+import PropTypes from 'prop-types';
+
+const EditableSwitch = ({
+  value,
+  attribute,
+  onEdit,
+  disabled,
+  setCurrentAttribute,
+}) => {
+  const identifier = `${attribute} switch`;
+  const onSwitch = val => {
+    if (setCurrentAttribute) setCurrentAttribute(attribute);
+    onEdit(val, attribute);
+  };
+
+  return (
+    <Switch
+      id={identifier}
+      aria-label={identifier}
+      ouiaId={`switch-${identifier}`}
+      isChecked={value}
+      onChange={onSwitch}
+      disabled={disabled}
+    />
+  );
+};
+
+EditableSwitch.propTypes = {
+  value: PropTypes.bool.isRequired,
+  attribute: PropTypes.string,
+  onEdit: PropTypes.func,
+  disabled: PropTypes.bool,
+  setCurrentAttribute: PropTypes.func,
+};
+
+EditableSwitch.defaultProps = {
+  attribute: '',
+  onEdit: noop,
+  disabled: false,
+  setCurrentAttribute: undefined,
+};
+
+export default EditableSwitch;

data/webpack/lib/EditableTextInput/EditableTextInput.js

@@ -0,0 +1,206 @@
+/* Credits: https://github.com/Katello/katello/blob/631d5bb83dc5d87320ee9002a6de33809a281b3e/webpack/components/EditableTextInput/EditableTextInput.js */
+import React, { useState, useEffect } from 'react';
+import {
+  TextInput,
+  TextArea,
+  Text,
+  Button,
+  Split,
+  SplitItem,
+} from '@patternfly/react-core';
+import {
+  EyeIcon,
+  EyeSlashIcon,
+  TimesIcon,
+  CheckIcon,
+} from '@patternfly/react-icons';
+import { translate as __ } from 'foremanReact/common/I18n';
+import PropTypes from 'prop-types';
+import './editableTextInput.scss';
+import PencilEditButton from './PencilEditButton';
+
+const PASSWORD_MASK = '••••••••';
+
+const EditableTextInput = ({
+  onEdit,
+  value,
+  textArea,
+  attribute,
+  placeholder,
+  isPassword,
+  hasPassword,
+  component,
+  currentAttribute,
+  setCurrentAttribute,
+  disabled,
+  ouiaId,
+  valid,
+}) => {
+  const [inputValue, setInputValue] = useState(value);
+  const [editing, setEditing] = useState(false);
+  const [passwordPlaceholder, setPasswordPlaceholder] = useState(
+    hasPassword ? PASSWORD_MASK : null
+  );
+  const [showPassword, setShowPassword] = useState(false);
+
+  useEffect(() => {
+    if (setCurrentAttribute && currentAttribute) {
+      if (attribute !== currentAttribute) {
+        setEditing(false);
+      }
+    }
+  }, [attribute, currentAttribute, setCurrentAttribute]);
+
+  const onEditClick = () => {
+    setEditing(true);
+    if (isPassword) setPasswordPlaceholder(null);
+    if (setCurrentAttribute && attribute !== currentAttribute)
+      setCurrentAttribute(attribute);
+  };
+
+  const onSubmit = async () => {
+    setEditing(false);
+    if (isPassword) {
+      if (inputValue?.length > 0) {
+        setPasswordPlaceholder(PASSWORD_MASK);
+      }
+    }
+    await onEdit(inputValue, attribute);
+  };
+
+  const onClear = () => {
+    if (isPassword) {
+      if (hasPassword || inputValue?.length > 0) {
+        setPasswordPlaceholder(PASSWORD_MASK);
+      }
+    }
+    setInputValue(value);
+    setEditing(false);
+  };
+
+  const toggleShowPassword = () => {
+    setShowPassword(prevShowPassword => !prevShowPassword);
+  };
+
+  const onKeyUp = ({ key, charCode }) =>
+    (key === 'Enter' || charCode === '13') && onSubmit();
+
+  const inputProps = {
+    onKeyUp,
+    component,
+    value: inputValue || '',
+    onChange: setInputValue,
+    validated: valid,
+  };
+
+  return editing ? (
+    <Split>
+      <SplitItem>
+        {textArea ? (
+          <TextArea {...inputProps} aria-label={`${attribute} text area`} />
+        ) : (
+          <TextInput
+            {...inputProps}
+            type={isPassword && !showPassword ? 'password' : 'text'}
+            aria-label={`${attribute} text input`}
+            ouiaId={ouiaId}
+          />
+        )}
+      </SplitItem>
+      <SplitItem>
+        <Button
+          ouiaId={`submit-button-${attribute}`}
+          aria-label={`submit ${attribute}`}
+          variant="plain"
+          onClick={onSubmit}
+        >
+          <CheckIcon />
+        </Button>
+      </SplitItem>
+      <SplitItem>
+        <Button
+          ouiaId={`clear-button-${attribute}`}
+          aria-label={`clear ${attribute}`}
+          variant="plain"
+          onClick={onClear}
+        >
+          <TimesIcon />
+        </Button>
+      </SplitItem>
+      {isPassword ? (
+        <SplitItem>
+          <Button
+            ouiaId={`show-button-${attribute}`}
+            aria-label={`show-password ${attribute}`}
+            variant="plain"
+            isDisabled={!inputValue?.length}
+            onClick={toggleShowPassword}
+          >
+            {showPassword ? <EyeSlashIcon /> : <EyeIcon />}
+          </Button>
+        </SplitItem>
+      ) : null}
+    </Split>
+  ) : (
+    <Split>
+      <SplitItem>
+        {inputValue ? (
+          <Text
+            className={`text${textArea ? 'Area' : 'Input'}-value`}
+            ouiaId={`${attribute}-text-value`}
+            aria-label={`${attribute} text value`}
+            component={component}
+          >
+            {editing ? inputValue : passwordPlaceholder || inputValue}
+          </Text>
+        ) : (
+          <Text
+            className={`text${textArea ? 'Area' : 'Input'}-placeholder`}
+            ouiaId={`${attribute}-text-value`}
+            aria-label={`${attribute} text value`}
+            component={component}
+          >
+            {passwordPlaceholder || placeholder}
+          </Text>
+        )}
+      </SplitItem>
+      {!disabled && (
+        <SplitItem>
+          <PencilEditButton {...{ attribute, onEditClick }} />
+        </SplitItem>
+      )}
+    </Split>
+  );
+};
+
+EditableTextInput.propTypes = {
+  onEdit: PropTypes.func.isRequired,
+  value: PropTypes.string,
+  attribute: PropTypes.string.isRequired,
+  textArea: PropTypes.bool, // Is a text area instead of input when editing
+  placeholder: PropTypes.string,
+  component: PropTypes.string,
+  currentAttribute: PropTypes.string,
+  setCurrentAttribute: PropTypes.func,
+  disabled: PropTypes.bool,
+  isPassword: PropTypes.bool,
+  hasPassword: PropTypes.bool,
+  ouiaId: PropTypes.string,
+  valid: PropTypes.string,
+};
+
+EditableTextInput.defaultProps = {
+  textArea: false,
+  placeholder: __('None provided'),
+  value: '', // API can return null, so default to empty string
+  component: undefined,
+  currentAttribute: undefined,
+  setCurrentAttribute: undefined,
+  disabled: false,
+  isPassword: false,
+  hasPassword: false,
+  ouiaId: undefined,
+  valid: 'default',
+};
+
+export default EditableTextInput;

data/webpack/lib/EditableTextInput/PencilEditButton.js

@@ -0,0 +1,27 @@
+/* Credits: https://github.com/Katello/katello/blob/631d5bb83dc5d87320ee9002a6de33809a281b3e/webpack/components/EditableTextInput/PencilEditButton.js */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Tooltip, TooltipPosition } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { PencilAltIcon } from '@patternfly/react-icons';
+
+const PencilEditButton = ({ attribute, onEditClick }) => (
+  <Tooltip position={TooltipPosition.top} content={__('Edit')}>
+    <Button
+      className="foreman-edit-icon"
+      ouiaId={`edit-button-${attribute}`}
+      aria-label={`edit ${attribute}`}
+      variant="plain"
+      onClick={onEditClick}
+    >
+      <PencilAltIcon />
+    </Button>
+  </Tooltip>
+);
+
+export default PencilEditButton;
+
+PencilEditButton.propTypes = {
+  attribute: PropTypes.string.isRequired,
+  onEditClick: PropTypes.func.isRequired,
+};