RubyGems - foreman_resource_quota - Versions diffs - 0.3.1 → 0.5.0 - Mend

foreman_resource_quota 0.3.1 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (185) hide show

data/webpack/components/ResourceQuotaEmptyState/__test__/ResourceQuotaEmptyState.test.js ADDED Viewed

@@ -0,0 +1,35 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { mount, testComponentSnapshotsWithFixtures } from '@theforeman/test';
+// Notice: (not) importing Modal affects the snapshot test since it fills
+// the components data dynamically in snapshots as soon as it can find the component.
+import { Modal } from '@patternfly/react-core';
+import { withMockedProvider, withRedux } from '../../../test_helper';
+import ResourceQuotaForm from '../../ResourceQuotaForm';
+import ResourceQuotaEmptyState from '../index';
+const TestComponent = withRedux(withMockedProvider(ResourceQuotaEmptyState));
+describe('ResourceQuotaEmptyState', () => {
+  testComponentSnapshotsWithFixtures(ResourceQuotaEmptyState, {
+    'should render': {}, // component has no props
+  });
+  test('opens the modal on clicking "Create resource quota" button', () => {
+    const wrapper = mount(<TestComponent />);
+    expect(wrapper.find(Modal).prop('isOpen')).toBe(false); // check we provide the correct input to Modal
+    expect(wrapper.find(ResourceQuotaForm).exists()).toBe(false);
+    wrapper
+      .find('button')
+      .filterWhere(button => button.text() === 'Create resource quota')
+      .simulate('click');
+    wrapper.update();
+    expect(wrapper.find(Modal).prop('isOpen')).toBe(true);
+    expect(wrapper.find(ResourceQuotaForm).exists()).toBe(true);
+  });
+});

data/webpack/components/ResourceQuotaEmptyState/__test__/__snapshots__/ResourceQuotaEmptyState.test.js.snap ADDED Viewed

@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`ResourceQuotaEmptyState should render 1`] = `
+<div>
+  <EmptyStatePattern
+    action={
+      <Button
+        id="foreman-resource-quota-welcome-create-modal-button"
+        onClick={[Function]}
+        variant="primary"
+      >
+        Create resource quota
+      </Button>
+    }
+    description={
+      <span>
+        Resource Quotas help admins to manage resources including CPUs, memory, and disk space among users or user groups.
+        <br />
+        Define a Resource Quota here and apply it to users to guarantee a fair share of your resources.
+        <br />
+      </span>
+    }
+    documentation={
+      Object {
+        "url": "/links/docs/Administering_Project?chapter=limiting-host-resources",
+      }
+    }
+    header="Resource Quotas"
+    icon="pficon pficon-cluster"
+    iconType="pf"
+    secondaryActions={Array []}
+  />
+  <Modal
+    actions={Array []}
+    appendTo={<body />}
+    aria-describedby=""
+    aria-label=""
+    aria-labelledby=""
+    className=""
+    hasNoBodyWrapper={false}
+    isOpen={false}
+    onClose={[Function]}
+    ouiaId="foreman-resource-quota-create-modal"
+    ouiaSafe={true}
+    position="default"
+    showClose={true}
+    title="Create resource quota"
+    titleIconVariant={null}
+    titleLabel=""
+    variant="small"
+  >
+    <ResourceQuotaForm
+      initialProperties={
+        Object {
+          "cpu_cores": null,
+          "description": "",
+          "disk_gb": null,
+          "memory_mb": null,
+          "name": "",
+        }
+      }
+      initialStatus={
+        Object {
+          "missing_hosts": null,
+          "number_of_hosts": null,
+          "number_of_usergroups": null,
+          "number_of_users": null,
+          "utilization": Object {
+            "cpu_cores": null,
+            "disk_gb": null,
+            "memory_mb": null,
+          },
+        }
+      }
+      isNewQuota={true}
+      onSubmit={[Function]}
+      quotaChangesCallback={null}
+    />
+  </Modal>
+</div>
+`;

data/webpack/components/ResourceQuotaEmptyState/index.js CHANGED Viewed

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Button, Modal, ModalVariant } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
+import { getDocsURL } from 'foremanReact/common/helpers';
 import EmptyStatePattern from 'foremanReact/components/common/EmptyState/EmptyStatePattern';
 import ResourceQuotaForm from '../ResourceQuotaForm';
@@ -28,16 +29,32 @@ const ResourceQuotaEmptyState = () => {
       {__('Create resource quota')}
     </Button>
   );
+  const description = (
+    <span>
+      {__(
+        'Resource Quotas help admins to manage resources including CPUs, memory, and disk space among users or user groups.'
+      )}
+      <br />
+      {__(
+        'Define a Resource Quota here and apply it to users to guarantee a fair share of your resources.'
+      )}
+      <br />
+    </span>
+  );
+  const documentation = {
+    url: getDocsURL('Administering_Project', 'limiting-host-resources'),
+  };
   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.'
-        )}
+        description={description}
         action={ActionButton}
+        documentation={documentation}
       />
       <Modal
         ouiaId={MODAL_ID_CREATE_RESOURCE_QUOTA}

data/webpack/components/ResourceQuotaForm/ResourceQuotaForm.scss CHANGED Viewed

	@@ -1 +1 @@
1	- @import '~~~@theforeman~~/~~vendor~~/~~scss/~~variables';
1	+ @import 'foremanReact/common/variables';

data/webpack/components/ResourceQuotaForm/ResourceQuotaFormConstants.js CHANGED Viewed

@@ -19,14 +19,14 @@ 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 },
+  { symbol: 'MiB', factor: 1 },
+  { symbol: 'GiB', factor: 1024 },
+  { symbol: 'TiB', factor: 1024 * 1024 },
 ];
 export const RESOURCE_UNIT_DISK = [
-  { symbol: 'GB', factor: 1 },
-  { symbol: 'TB', factor: 1024 },
-  { symbol: 'PB', factor: 1024 * 1024 },
+  { symbol: 'GiB', factor: 1 },
+  { symbol: 'TiB', factor: 1024 },
+  { symbol: 'PiB', factor: 1024 * 1024 },
 ];
 /* Resource value bounds */

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

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

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

@@ -34,7 +34,7 @@ const StaticDetail = ({
         {isTextArea ? (
           <TextArea
             id={id}
-            onChange={onChange}
+            onChange={(_event, val) => onChange(val)}
             value={value}
             validated={validated}
             isRequired={isRequired}
@@ -42,7 +42,7 @@ const StaticDetail = ({
         ) : (
           <TextInput
             id={id}
-            onChange={onChange}
+            onChange={(_event, val) => onChange(val)}
             value={value}
             validated={validated}
             isRequired={isRequired}

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

@@ -40,7 +40,7 @@ const TextInputField = ({
       dispatchAPICallbackToast(
         success,
         response,
-        `Sucessfully applied ${label}.`,
+        `Successfully applied ${label}.`,
         `An error occurred appyling ${label}.`
       )
     );

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

@@ -8,9 +8,9 @@ import {
   Card,
   CardBody,
   CardHeader,
-  CardActions,
   CardTitle,
-  Level,
+  Flex,
+  FlexItem,
   LabelGroup,
   Button,
   Tooltip,
@@ -64,75 +64,89 @@ const Properties = ({
       dispatchAPICallbackToast(
         success,
         response,
-        `Sucessfully fetched latest data.`,
+        `Successfully fetched latest data.`,
         `An error occurred fetching quota information.`
       )
     );
   };
-  return (
-    <Card>
-      <CardHeader>
-        {!isNewQuota && (
-          <CardActions>
-            <Button
-              isLoading={isFetchLoading}
-              icon={<SyncAltIcon />}
-              isSmall
-              onClick={onClickFetch}
-              ref={tooltipRefFetchButton}
+  const renderSyncButton = () => {
+    if (isNewQuota) {
+      return <></>;
+    }
+    return (
+      <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}
+      >
+        <Button
+          isLoading={isFetchLoading}
+          icon={<SyncAltIcon />}
+          size="sm"
+          onClick={onClickFetch}
+          ref={tooltipRefFetchButton}
+        />
+      </Tooltip>
+    );
+  };
+  const renderHeaderTitle = () => {
+    if (isNewQuota) {
+      return <CardTitle>{__('Properties')}</CardTitle>;
+    }
+    return (
+      <Flex>
+        <FlexItem>
+          <CardTitle>{__('Properties')}</CardTitle>
+        </FlexItem>
+        <FlexItem>
+          <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"
             />
-            <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>
+            <StatusPropertiesLabel
+              color="blue"
+              iconChild={<UserIcon />}
+              statusContent={
+                statusProperties[RESOURCE_IDENTIFIER_STATUS_NUM_USERS]
               }
-              reference={tooltipRefFetchButton}
+              linkUrl={`/users?search=resource_quota="${initialName}"`}
+              tooltipText="Number of assigned users"
             />
-          </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>
-        )}
+            <StatusPropertiesLabel
+              color="blue"
+              iconChild={<UsersIcon />}
+              statusContent={
+                statusProperties[RESOURCE_IDENTIFIER_STATUS_NUM_USERGROUPS]
+              }
+              linkUrl={`/usergroups?search=resource_quota="${initialName}"`}
+              tooltipText="Number of assigned usergroups"
+            />
+          </LabelGroup>
+        </FlexItem>
+      </Flex>
+    );
+  };
+  return (
+    <Card>
+      <CardHeader actions={{ actions: renderSyncButton() }}>
+        {renderHeaderTitle()}
       </CardHeader>
       <CardBody>
         <TextContent>

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

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

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

@@ -2,16 +2,25 @@ import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import {
   FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
   TextInput,
   InputGroup,
+  InputGroupItem,
   InputGroupText,
+} from '@patternfly/react-core';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+import {
   Dropdown,
   DropdownItem,
   DropdownToggle,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+import './UnitInputField.scss';
 import { findLargestFittingUnit } from '../../../../helper';
 const UnitInputField = ({
@@ -60,14 +69,11 @@ const UnitInputField = ({
   }, [minValue, maxValue, selectedUnit]);
   /* text for float errors */
-  const errorTextNatural = useCallback(
-    () => __('Value must be a natural number.'),
-    []
-  );
+  const errorTextNatural = useCallback(() => __('Value must be a number.'), []);
-  /* text for float errors */
-  const errorTextFloating = useCallback(
-    () => __(`No floating point for smallest unit (${units[0].symbol}).`),
+  /* text for float inputs (rounding) */
+  const warningTextRounded = useCallback(
+    roundedValue => __(`Rounding to: ${roundedValue} (${units[0].symbol}).`),
     [units]
   );
@@ -83,20 +89,9 @@ const UnitInputField = ({
         setErrorText(errorTextBounds());
         return false;
       }
-      if (baseValue !== Math.floor(baseValue)) {
-        setErrorText(errorTextFloating());
-        return false;
-      }
       return true;
     },
-    [
-      minValue,
-      maxValue,
-      valueToBaseUnit,
-      errorTextNatural,
-      errorTextBounds,
-      errorTextFloating,
-    ]
+    [minValue, maxValue, valueToBaseUnit, errorTextNatural, errorTextBounds]
   );
   /* applies the selected unit and returns the base-unit value */
@@ -116,9 +111,17 @@ const UnitInputField = ({
       setValidated('default');
     } else if (isValid(inputValue)) {
       const baseValue = valueToBaseUnit(inputValue);
-      onChange(baseValue);
+      let validatedValue = baseValue;
+      if (baseValue !== Math.floor(baseValue)) {
+        validatedValue = Math.floor(baseValue);
+        setErrorText(warningTextRounded(validatedValue));
+        setValidated('warning');
+      } else {
+        // Keep baseValue as validatedValue
+        setValidated('default');
+      }
+      onChange(validatedValue);
       handleInputValidation(true);
-      setValidated('default');
     } else {
       handleInputValidation(false);
       setValidated('error');
@@ -131,6 +134,7 @@ const UnitInputField = ({
     onChange,
     isValid,
     valueToBaseUnit,
+    warningTextRounded,
   ]);
   /* set the selected unit */
@@ -163,40 +167,81 @@ const UnitInputField = ({
     }
     return (
-      <Dropdown
-        onSelect={onUnitSelect}
-        toggle={
-          <DropdownToggle isDisabled={isDisabled} onToggle={onUnitToggle}>
-            {__(`${selectedUnit.symbol}`)}
-          </DropdownToggle>
-        }
-        isOpen={isUnitOpen}
-        dropdownItems={unitDropdownItems}
-      />
+      <InputGroupItem>
+        <Dropdown
+          onSelect={onUnitSelect}
+          toggle={
+            <DropdownToggle
+              isDisabled={isDisabled}
+              onToggle={(_event, _val) => onUnitToggle()}
+            >
+              {__(`${selectedUnit.symbol}`)}
+            </DropdownToggle>
+          }
+          isOpen={isUnitOpen}
+          dropdownItems={unitDropdownItems}
+        />
+      </InputGroupItem>
     );
   };
+  const renderFormHelperText = () => {
+    if (validated === 'error') {
+      return (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem
+              icon={<ExclamationCircleIcon />}
+              variant={validated}
+            >
+              {errorText}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      );
+    }
+    if (validated === 'warning') {
+      return (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem
+              icon={<ExclamationCircleIcon />}
+              variant={validated}
+            >
+              {errorText}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      );
+    }
+    return <></>;
+  };
   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>
+    <div className="container-unit-input-field">
+      <FormGroup
+        label={__('Quota Limit')}
+        validated={validated}
+        fieldId="quota-limit-resource-quota-form-group"
+        labelIcon={labelIcon || {}}
+      >
+        <InputGroup>
+          <InputGroupItem>
+            <TextInput
+              isDisabled={isDisabled}
+              value={inputValue}
+              min={minValue}
+              max={maxValue}
+              validated={validated}
+              id="reg_token_life_time_input"
+              onChange={(_event, val) => setInputValue(val)}
+            />
+          </InputGroupItem>
+          {unitView()}
+        </InputGroup>
+        {renderFormHelperText()}
+      </FormGroup>
+    </div>
   );
 };

data/webpack/components/ResourceQuotaForm/components/Resource/UnitInputField.scss ADDED Viewed

@@ -0,0 +1,7 @@
+@import 'foremanReact/common/variables';
+.container-unit-input-field {
+  .pf-v5-c-input-group__text {
+    word-break: keep-all;
+  }
+}

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

@@ -7,7 +7,7 @@ import {
   ProgressMeasureLocation,
   Tooltip,
 } from '@patternfly/react-core';
-import SyncAltIcon from '@patternfly/react-icons';
+import { SyncAltIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';

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

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