Merge pull request #3252 from a2batic/expand-osd-bug

Bug 1763581: Increase OSD size from 1TiB to 2TiB
openshift · Nov 20, 2019 · fbcfd5d · fbcfd5d
2 parents dd8bf17 + 0f4080f
commit fbcfd5d
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 28 deletions.
diff --git a/...ges/ceph-storage-plugin/src/components/modals/add-capacity-modal/_add-capacity-modal.scss b/...ges/ceph-storage-plugin/src/components/modals/add-capacity-modal/_add-capacity-modal.scss
@@ -4,30 +4,34 @@
   display: none;
 }
 
+.add-capacity-modal__input--width {
+  max-width: 250px !important;
+}
+
+.add-capacity-modal__input .dropdown {
+  margin-left: var(--pf-global--spacer--md);
+}
+
+.add-capacity-modal__help-text-error {
+  color: $pf-color-red-100;  
+}
+
+.add-capacity-modal__help-text {
+  margin-top: -15px;
+}
+
 .add-capacity-modal--padding {
   .co-storage-class-dropdown {
     .dropdown {
-      width: 21.5rem;
+      width: 340px;
         button {
           width: 100%;
         }
     }
   }
-  .form-group input {
-    max-width: 17rem;
-    margin-right: 5px;
-  }
-  .toolTip_dropdown {
-    button {
-      position: absolute;
-      left: 6.6rem;
-      top: 8.5rem;
-    }
-  }
   padding-top: 2em;
 }
 
 .add-capacity-modal__span {
-  margin-left: 3em;
-  color: $pf-color-black-500;
+  margin-left: 3.5rem;
 }
diff --git a/...kages/ceph-storage-plugin/src/components/modals/add-capacity-modal/add-capacity-modal.tsx b/...kages/ceph-storage-plugin/src/components/modals/add-capacity-modal/add-capacity-modal.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash';
+import * as classNames from 'classnames';
 import {
   FieldLevelHelp,
   RequestSizeInput,
@@ -19,11 +20,11 @@ import { OCSStorageClassDropdown } from '../storage-class-dropdown';
 export const AddCapacityModal = withHandlePromise((props: AddCapacityModalProps) => {
   const { ocsConfig, close, cancel } = props;
   const dropdownUnits = {
-    Ti: 'Ti',
+    TiB: 'TiB',
   };
-  const requestSizeUnit = dropdownUnits.Ti;
+  const requestSizeUnit = dropdownUnits.TiB;
   const [buttonDisabled, setButton] = React.useState(false);
-  const [requestSizeValue, setRequestSizeValue] = React.useState('1');
+  const [requestSizeValue, setRequestSizeValue] = React.useState('2');
   const [storageClass, setStorageClass] = React.useState('');
   const [inProgress, setProgress] = React.useState(false);
   const [errorMessage, setError] = React.useState('');
@@ -39,7 +40,7 @@ export const AddCapacityModal = withHandlePromise((props: AddCapacityModalProps)
     setProgress(true);
     const negativeValue = Number(requestSizeValue) < 0 ? -1 : 1;
     const newValue =
-      (Number(presentCount) + Math.abs(Number(requestSizeValue)) * 3) * negativeValue;
+      (Number(presentCount) + Math.abs(Number(requestSizeValue)) / 2) * negativeValue;
     const patch = {
       op: 'replace',
       path: `/spec/storageDeviceSets/0/count`,
@@ -61,6 +62,7 @@ export const AddCapacityModal = withHandlePromise((props: AddCapacityModalProps)
 
   const handleRequestSizeInputChange = (capacityObj: any) => {
     setRequestSizeValue(capacityObj.value);
+    setButton(capacityObj.value % 2 !== 0);
   };
 
   const handleStorageClass = (sc: K8sResourceKind) => {
@@ -73,14 +75,14 @@ export const AddCapacityModal = withHandlePromise((props: AddCapacityModalProps)
       <ModalBody>
         Increase the capacity of <strong>{ocsConfig.metadata.name}</strong>.
         <div className="add-capacity-modal--padding">
-          <div className="form-group">
+          <div className="add-capacity-modal__input form-group">
             <label className="control-label" htmlFor="request-size-input">
-              Requested Capacity
+              Capacity
               <FieldLevelHelp>{labelTooltip}</FieldLevelHelp>
-              <span className="add-capacity-modal__span">
+              <span className="text-secondary add-capacity-modal__span">
                 <span>
-                  Provisioned Capacity:
-                  {presentCount ? ` ${presentCount / 3}Ti` : ' Unavailable'}
+                  Provisioned:
+                  {presentCount ? ` ${presentCount * 2}TiB` : ' Unavailable'}
                 </span>
               </span>
             </label>
@@ -91,8 +93,18 @@ export const AddCapacityModal = withHandlePromise((props: AddCapacityModalProps)
               defaultRequestSizeUnit={requestSizeUnit}
               defaultRequestSizeValue={requestSizeValue}
               dropdownUnits={dropdownUnits}
+              step={2}
+              minValue={2}
+              inputClassName="add-capacity-modal__input--width"
               required
             />
+            <p
+              className={classNames('text-secondary add-capacity-modal__help-text', {
+                'add-capacity-modal__help-text-error': buttonDisabled,
+              })}
+            >
+              Please enter an even number
+            </p>
           </div>
           <label className="control-label">
             Storage Class

diff --git a/frontend/packages/ceph-storage-plugin/src/constants/ocs-install.ts b/frontend/packages/ceph-storage-plugin/src/constants/ocs-install.ts
@@ -16,11 +16,12 @@ export const ocsRequestData: K8sResourceKind = {
     namespace: 'openshift-storage',
   },
   spec: {
-    managedNodes: false,
+    manageNodes: false,
     storageDeviceSets: [
       {
         name: 'ocs-deviceset',
-        count: 3,
+        count: 1,
+        replica: 3,
         resources: {},
         placement: {},
         portable: true,
@@ -31,7 +32,7 @@ export const ocsRequestData: K8sResourceKind = {
             volumeMode: 'Block',
             resources: {
               requests: {
-                storage: '1Ti',
+                storage: '2Ti',
               },
             },
           },

diff --git a/frontend/public/components/utils/request-size-input.tsx b/frontend/public/components/utils/request-size-input.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Dropdown } from '.';
+import * as classNames from 'classnames';
 
 export class RequestSizeInput extends React.Component<RequestSizeInputProps> {
   state = {
@@ -25,15 +26,16 @@ export class RequestSizeInput extends React.Component<RequestSizeInputProps> {
       <div className="form-group">
         <div className="pf-c-input-group">
           <input
-            className="pf-c-form-control"
+            className={classNames('pf-c-form-control', this.props.inputClassName)}
             type="number"
-            step="any"
+            step={this.props.step || 'any'}
             onChange={this.onValueChange}
             placeholder={this.props.placeholder}
             aria-describedby={describedBy}
             name={inputName}
             required={this.props.required}
             value={this.props.defaultRequestSizeValue}
+            min={this.props.minValue}
           />
           <Dropdown
             title={this.props.defaultRequestSizeUnit}
@@ -59,4 +61,7 @@ export type RequestSizeInputProps = {
   defaultRequestSizeUnit: string;
   defaultRequestSizeValue: string;
   describedBy?: string;
+  step?: number;
+  minValue?: number;
+  inputClassName?: string;
 };