foreman_resource_quota 0.4.0 → 0.6.0

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

@@ -8,15 +8,16 @@ import {
   Card,
   CardBody,
   CardHeader,
-  CardActions,
   CardTitle,
-  Level,
+  Flex,
+  FlexItem,
   LabelGroup,
   Button,
   Tooltip,
 } from '@patternfly/react-core';
 
 import {
+  ExclamationCircleIcon,
   UserIcon,
   UsersIcon,
   ClusterIcon,
@@ -42,6 +43,8 @@ const Properties = ({
   initialName,
   initialDescription,
   initialStatus,
+  unassigned,
+  showAssignmentWarning,
   handleInputValidation,
   onChange,
   onApply,
@@ -70,48 +73,70 @@ const Properties = ({
     );
   };
 
-  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>
+  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
+          id="resource-quota-index-button"
+          ouiaId="resource-quota-index-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={showAssignmentWarning ? 'red' : 'blue'}
+              iconChild={
+                showAssignmentWarning ? (
+                  <ExclamationCircleIcon />
+                ) : (
+                  <ClusterIcon />
+                )
+              }
+              statusContent={
+                statusProperties[RESOURCE_IDENTIFIER_STATUS_NUM_HOSTS]
+              }
+              linkUrl={`/hosts?search=resource_quota="${initialName}"`}
+              tooltipText={
+                showAssignmentWarning
+                  ? __(
+                      "The setting 'resource_quota_optional_assignment' is set to 'No' but there are hosts with no quota assignment. Please check your hosts' quota assignments!"
+                    )
+                  : __('Number of assigned hosts')
               }
-              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"
-              />
+            {!unassigned && (
               <StatusPropertiesLabel
                 color="blue"
                 iconChild={<UserIcon />}
@@ -121,6 +146,8 @@ const Properties = ({
                 linkUrl={`/users?search=resource_quota="${initialName}"`}
                 tooltipText="Number of assigned users"
               />
+            )}
+            {!unassigned && (
               <StatusPropertiesLabel
                 color="blue"
                 iconChild={<UsersIcon />}
@@ -130,9 +157,17 @@ const Properties = ({
                 linkUrl={`/usergroups?search=resource_quota="${initialName}"`}
                 tooltipText="Number of assigned usergroups"
               />
-            </LabelGroup>
-          </Level>
-        )}
+            )}
+          </LabelGroup>
+        </FlexItem>
+      </Flex>
+    );
+  };
+
+  return (
+    <Card id="resource-quota-index-card" ouiaId="resource-quota-index-card">
+      <CardHeader actions={{ actions: renderSyncButton() }}>
+        {renderHeaderTitle()}
       </CardHeader>
       <CardBody>
         <TextContent>
@@ -147,6 +182,7 @@ const Properties = ({
               onChange={onChange}
               isRestrictInputValidation
               isRequired
+              isDisabled={unassigned}
             />
             <TextInputField
               initialValue={initialDescription}
@@ -157,6 +193,7 @@ const Properties = ({
               onApply={onApply}
               onChange={onChange}
               isTextArea
+              isDisabled={unassigned}
             />
           </TextList>
         </TextContent>
@@ -173,6 +210,8 @@ Properties.defaultProps = {
     [RESOURCE_IDENTIFIER_STATUS_NUM_USERS]: null,
     [RESOURCE_IDENTIFIER_STATUS_NUM_USERGROUPS]: null,
   },
+  unassigned: false,
+  showAssignmentWarning: false,
 };
 
 Properties.propTypes = {
@@ -184,6 +223,8 @@ Properties.propTypes = {
     [RESOURCE_IDENTIFIER_STATUS_NUM_USERS]: PropTypes.number,
     [RESOURCE_IDENTIFIER_STATUS_NUM_USERGROUPS]: PropTypes.number,
   }),
+  unassigned: PropTypes.bool,
+  showAssignmentWarning: PropTypes.bool,
   handleInputValidation: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,
   onApply: PropTypes.func.isRequired,

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

@@ -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

@@ -3,16 +3,24 @@ 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 = ({
@@ -41,6 +49,7 @@ const UnitInputField = ({
     unitDropdownItems = units.map(unit => (
       <DropdownItem
         id={`unit-dropdownitem-${unit.symbol.toLowerCase()}`}
+        ouiaId={`unit-dropdownitem-${unit.symbol.toLowerCase()}`}
         key={unit.symbol.toLowerCase()}
       >
         {unit.symbol}
@@ -69,11 +78,6 @@ const UnitInputField = ({
     [units]
   );
 
-  /* warning text displayed beneath value input field (built-in is used for errors) */
-  const helperTextWarning = (text, isHidden) => (
-    <FormHelperText isHidden={isHidden}>{text}</FormHelperText>
-  );
-
   /* applies the selected unit and checks the bounds */
   const isValid = useCallback(
     val => {
@@ -164,41 +168,84 @@ const UnitInputField = ({
     }
 
     return (
-      <Dropdown
-        onSelect={onUnitSelect}
-        toggle={
-          <DropdownToggle isDisabled={isDisabled} onToggle={onUnitToggle}>
-            {__(`${selectedUnit.symbol}`)}
-          </DropdownToggle>
-        }
-        isOpen={isUnitOpen}
-        dropdownItems={unitDropdownItems}
-      />
+      <InputGroupItem>
+        <Dropdown
+          ouiaId="resource-quota-unit-input-field-input-group-item-dropdown"
+          onSelect={onUnitSelect}
+          toggle={
+            <DropdownToggle
+              isDisabled={isDisabled}
+              ouiaId="resource-quota-unit-input-field-input-group-item-dropdowni-toggle"
+              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}
-      helperText={helperTextWarning(errorText, validated !== 'warning')}
-      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="resource-quota-reg-token-life-time-input"
+              ouiaId="resource-quota-reg-token-life-time-input"
+              onChange={(_event, val) => setInputValue(val)}
+            />
+          </InputGroupItem>
+          {unitView()}
+        </InputGroup>
+        {renderFormHelperText()}
+      </FormGroup>
+    </div>
   );
 };
 

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

@@ -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

@@ -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';
 
@@ -105,19 +105,20 @@ const UtilizationProgress = ({
       <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
+          className={isEnabled ? '' : 'progress-disabled'}
+          ref={tooltipRefUtilization}
+        >
+          <Progress
+            aria-label={`resource-card-${cardId}-progress`}
+            value={resourceUtilizationPercent}
+            measureLocation={ProgressMeasureLocation.inside}
+            size={ProgressSize.lg}
+            variant={resourceProgressVariant()}
+          />
+        </div>
+      </Tooltip>
     </div>
   );
 };

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

@@ -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);
 }