fix(cf): provide meaningful labels in resize dialog (#6704)

spinnaker · Mar 15, 2019 · facc737 · facc737
1 parent 51eeba4
commit facc737
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 11 deletions.
diff --git a/...s/modules/cloudfoundry/src/pipeline/stages/resizeAsg/CloudfoundryResizeAsgStageConfig.tsx b/...s/modules/cloudfoundry/src/pipeline/stages/resizeAsg/CloudfoundryResizeAsgStageConfig.tsx
@@ -161,8 +161,8 @@ export class CloudfoundryResizeAsgStageConfig extends React.Component<
           <span className="col-md-3 sm-label-right" />
           <div className="col-md-9">
             <div className="col-md-3 sm-label-left">Instances</div>
-            <div className="col-md-3 sm-label-left">Mem Mb</div>
-            <div className="col-md-3 sm-label-left">Disk Mb</div>
+            <div className="col-md-3 sm-label-left">Mem (MB)</div>
+            <div className="col-md-3 sm-label-left">Disk (MB)</div>
           </div>
           <StageConfigField label={resizeLabel}>
             <div className="col-md-3">

diff --git a/...odules/cloudfoundry/src/serverGroup/details/resize/CloudFoundryResizeServerGroupModal.tsx b/...odules/cloudfoundry/src/serverGroup/details/resize/CloudFoundryResizeServerGroupModal.tsx
@@ -147,22 +147,25 @@ export class CloudFoundryResizeServerGroupModal extends React.Component<
   private renderQuota(
     formik: FormikProps<ICloudFoundryResizeServerGroupValues>,
     field: string,
+    fieldLabel: string,
     initialValue: number,
   ): JSX.Element {
     return (
       <div>
         <div className="form-group">
           <div className="col-md-3 sm-label-right">Current size</div>
-          <div className="col-md-4">
+          <div className="col-md-5">
             <div className="horizontal middle">
-              <input type="number" className="NumberInput form-control" value={initialValue} disabled={true} />
-              <div className="sp-padding-xs-xaxis">MB</div>
+              <div className="StandardFieldLayout flex-container-h baseline margin-between-lg">
+                <input type="number" className="NumberInput form-control" value={initialValue} disabled={true} />
+              </div>
+              <div className="sp-padding-xs-xaxis">{fieldLabel}</div>
             </div>
           </div>
         </div>
         <div className="form-group">
           <div className="col-md-3 sm-label-right">Resize to</div>
-          <div className="col-md-4">
+          <div className="col-md-5">
             <div className="horizontal middle">
               <FormikFormField
                 name={field}
@@ -174,7 +177,7 @@ export class CloudFoundryResizeServerGroupModal extends React.Component<
                   formik.setFieldValue('max', value);
                 }}
               />
-              <div className="sp-padding-xs-xaxis">MB</div>
+              <div className="sp-padding-xs-xaxis">{fieldLabel}</div>
             </div>
           </div>
         </div>
@@ -204,8 +207,8 @@ export class CloudFoundryResizeServerGroupModal extends React.Component<
                 <Modal.Body>
                   <Form className="form-horizontal">
                     {this.renderDesired(formik)}
-                    {this.renderQuota(formik, 'diskQuota', diskQuota)}
-                    {this.renderQuota(formik, 'memory', memory)}
+                    {this.renderQuota(formik, 'diskQuota', 'Disk (MB)', diskQuota)}
+                    {this.renderQuota(formik, 'memory', 'Mem (MB)', memory)}
                     <TaskReason reason={formik.values.reason} onChange={val => formik.setFieldValue('reason', val)} />
                   </Form>
                 </Modal.Body>

diff --git a/...cripts/modules/cloudfoundry/src/serverGroup/details/sections/ServerGroupSizingSection.tsx b/...cripts/modules/cloudfoundry/src/serverGroup/details/sections/ServerGroupSizingSection.tsx
@@ -16,9 +16,9 @@ export class ServerGroupSizingSection extends React.Component<ICloudFoundryServe
         <dl className="dl-horizontal dl-flex">
           <dt>Instances</dt>
           <dd>{serverGroup.instances.length}</dd>
-          <dt>Disk Mb</dt>
+          <dt>Disk (MB)</dt>
           <dd>{serverGroup.diskQuota}</dd>
-          <dt>Memory Mb</dt>
+          <dt>Memory (MB)</dt>
           <dd>{serverGroup.memory}</dd>
         </dl>
       </CollapsibleSection>