Fix HPA UX issue

app/components/cru-hpa/component.js

@@ -67,7 +67,7 @@ export default Component.extend(ViewNewEdit, ChildHook, {
   deploymentsChoices: computed('namespace.id', 'deployments.[]', function() {
     const namespaceId = get(this, 'namespace.id');
 
-    return (get(this, 'deployments') || []).filter((w) => get(w, 'namespaceId') === namespaceId);
+    return (get(this, 'deployments') || []).filter((w) => get(w, 'namespaceId') === namespaceId).sortBy('displayName');
   }),
 
   resourceMetricsAvailable: computed('apiServices', function() {
@@ -76,6 +76,36 @@ export default Component.extend(ViewNewEdit, ChildHook, {
     return apiServices.find((api) => get(api, 'name').split('.').length === 4 && get(api, 'name').endsWith(RESOURCE_METRICS_API_GROUP));
   }),
 
+  validate() {
+    this._super();
+
+    const intl = get(this, 'intl');
+
+    const errors = get(this, 'errors') || [];
+
+    if ( get(this, 'model.minReplicas') === null ) {
+      errors.pushObject(intl.t('validation.required', { key: intl.t('cruHpa.minReplicas.label') }));
+    }
+
+    (get(this, 'model.metrics') || []).forEach((metric) => {
+      if ( get(metric, 'target.type') === 'Utilization' && (!get(metric, 'target.utilization')) ) {
+        errors.pushObject(intl.t('validation.required', { key: intl.t('cruHpa.metrics.value.label') }));
+      }
+
+      if ( get(metric, 'target.type') === 'AverageValue' && (!get(metric, 'target.averageValue')) ) {
+        errors.pushObject(intl.t('validation.required', { key: intl.t('cruHpa.metrics.value.label') }));
+      }
+
+      if ( get(metric, 'target.type') === 'Value' && (!get(metric, 'target.value')) ) {
+        errors.pushObject(intl.t('validation.required', { key: intl.t('cruHpa.metrics.value.label') }));
+      }
+    });
+
+    set(this, 'errors', errors.uniq());
+
+    return errors.length === 0;
+  },
+
   willSave() {
     set(this, 'model.namespaceId', get(this, 'namespace.id') || '__placeholder__');
     const self = this;

app/components/cru-hpa/template.hbs

@@ -122,6 +122,7 @@
           nameRequired=true
           descriptionPlaceholder="cruHpa.description.placeholder"
           editing=editing
+          bothColClass="col span-12 mb-0 mt-5"
         }}
       </div>
       <div class="col span-6">
@@ -129,6 +130,7 @@
           editable=isNew
           namespace=namespace
           errors=namespaceErrors
+          allowCreate=false
           registerHook=(action "registerHook")
           editing=editing
         }}
@@ -166,7 +168,7 @@
           {{/if}}
         </label>
         {{input-integer
-          min=0
+          min=1
           id="input-hpa-min-replicas"
           max=model.maxReplicas
           value=model.minReplicas

app/components/hpa-metric-row/component.js

@@ -186,7 +186,7 @@ export default Component.extend({
     }
 
     if ( metricName === MEMORY && metricTargetType === AVERAGE_VALUE && metricType === RESOURCE ) {
-      set(this, 'metric.target.averageValue', `${ stringValue }Mi`)
+      set(this, 'metric.target.averageValue', stringValue ? `${ stringValue }Mi` : null)
     }
   }),
 

app/components/hpa-metric-row/template.hbs

@@ -142,7 +142,7 @@
         }}
           <div class="input-group">
             {{input-integer
-              min=0
+              min=1
               id=(concat elementId "-input-metrics-target-type")
               value=metric.target.utilization
               classNames="form-control"

lib/shared/addon/components/form-namespace/component.js

@@ -25,10 +25,11 @@ export default Component.extend({
   reuseNamespaceId: null,
   createNamespace:  null,
 
-  mode:     REUSE,
-  editing:  true,
-  required: true,
-  hookName: 'saveNamespace',
+  mode:        REUSE,
+  editing:     true,
+  required:    true,
+  allowCreate: true,
+  hookName:    'saveNamespace',
 
   classNames: ['inline-form'],
   choices:    null,

lib/shared/addon/components/form-namespace/template.hbs

@@ -1,14 +1,16 @@
 {{#if editing}}
   <div class="clearfix">
-    <label class="acc-label pb-5">
+    <label class="acc-label pb-5 {{unless allowCreate "pt-5"}}">
       {{t (if isReuse reuseLabel createLabel)}}
       {{field-required}}
     </label>
-    <div class="pull-right text-small">
-      <a role="button" class="btn bg-transparent p-0" {{action "toggle"}}>
-        {{t (if isReuse "formNamespace.toggle.create" "formNamespace.toggle.reuse")}}
-      </a>
-    </div>
+    {{#if allowCreate}}
+      <div class="pull-right text-small">
+        <a role="button" class="btn bg-transparent p-0" {{action "toggle"}}>
+          {{t (if isReuse "formNamespace.toggle.create" "formNamespace.toggle.reuse")}}
+        </a>
+      </div>
+    {{/if}}
   </div>
 
   <div>

translations/en-us.yaml

@@ -1063,7 +1063,7 @@ cruHpa:
   status:
     label: Current Status
   target:
-    label: Scale Target
+    label: Workload
   name:
     placeholder: e.g. myscaler
   description:
@@ -1071,10 +1071,10 @@ cruHpa:
   prompt:
     deployment: Select a Deployment...
   minReplicas:
-    label: Minimum Scale
+    label: Min Replicas
     placeholder: e.g. 1
   maxReplicas:
-    label: Maximum Scale
+    label: Max Replicas
     placeholder: e.g. 10
   metrics:
     label: Metrics