From 735b2063ea2e79c1757f6496f9f08057d27ba944 Mon Sep 17 00:00:00 2001
From: Prabhat Khera <91852476+prabhat-org@users.noreply.github.com>
Date: Tue, 23 Aug 2022 08:54:40 +1200
Subject: [PATCH] fix(ui): minor ui issues EE-4004 (#7512)

---
 .../kube-services-item.html                   |   2 +-
 .../create/createApplication.html             | 186 +++++++++---------
 2 files changed, 98 insertions(+), 90 deletions(-)

diff --git a/app/kubernetes/components/kube-services/kube-services-item/kube-services-item.html b/app/kubernetes/components/kube-services/kube-services-item/kube-services-item.html
index 62db1395a..963dfc77a 100644
--- a/app/kubernetes/components/kube-services/kube-services-item/kube-services-item.html
+++ b/app/kubernetes/components/kube-services/kube-services-item/kube-services-item.html
@@ -196,7 +196,7 @@
 
       <div class="form-group !mx-0 !pl-0 col-sm-3 clear-both" ng-if="$ctrl.serviceType === $ctrl.KubernetesApplicationPublishingTypes.CLUSTER_IP && $ctrl.ingressType">
         <div class="input-group input-group-sm">
-          <span class="input-group-addon">Route</span>
+          <span class="input-group-addon required">Route</span>
           <input
             class="form-control"
             name="ingress_route_{{ $index }}"
diff --git a/app/kubernetes/views/applications/create/createApplication.html b/app/kubernetes/views/applications/create/createApplication.html
index 7c472ff11..ec6719723 100644
--- a/app/kubernetes/views/applications/create/createApplication.html
+++ b/app/kubernetes/views/applications/create/createApplication.html
@@ -145,7 +145,7 @@
                 </div>
                 <div class="form-group" ng-show="kubernetesApplicationCreationForm.application_name.$invalid || ctrl.state.alreadyExists">
                   <div class="small">
-                    <div class="col-sm-3 col-lg-2"></div>
+                    <div class="col-sm-3 col-lg-2">&nbsp;</div>
                     <div class="col-sm-8" ng-messages="kubernetesApplicationCreationForm.application_name.$error">
                       <p class="text-muted vertical-center" ng-message="required"
                         ><pr-icon class="vertical-center" icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> This field is required.</p
@@ -156,10 +156,12 @@
                         alphanumeric character (e.g. 'my-name', or 'abc-123').
                       </p>
                     </div>
-                    <p class="text-muted vertical-center" ng-if="ctrl.state.alreadyExists">
-                      <pr-icon class="vertical-center" icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon>
-                      An application with the same name already exists inside the selected namespace.
-                    </p>
+                    <div class="col-sm-8" ng-if="ctrl.state.alreadyExists">
+                      <p class="text-muted vertical-center">
+                        <pr-icon class="vertical-center" icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon>
+                        An application with the same name already exists inside the selected namespace.
+                      </p>
+                    </div>
                   </div>
                 </div>
                 <!-- #endregion -->
@@ -1059,90 +1061,96 @@
                   </div>
 
                   <div class="form-inline" ng-if="ctrl.formValues.DeploymentType !== ctrl.ApplicationDeploymentTypes.GLOBAL && ctrl.formValues.AutoScaler.IsUsed">
-                    <table class="table" style="margin-bottom: 0px">
-                      <tbody>
-                        <tr class="small">
-                          <td style="width: 33%; border: none; padding: 2px 0 2px 0">Minimum instances</td>
-                          <td style="width: 33%; border: none; padding: 2px 0 2px 0">Maximum instances</td>
-                          <td style="width: 33%; border: none; padding: 2px 0 2px 0">
-                            Target CPU usage (<b>%</b>)
-                            <portainer-tooltip message="'The autoscaler will ensure enough instances are running to maintain an average CPU usage across all instances.'">
-                            </portainer-tooltip>
-                          </td>
-                        </tr>
-                        <tr>
-                          <td style="padding: 8px 5px 5px 0; border: none">
-                            <div class="input-group input-group-sm" style="width: 100%">
-                              <input
-                                type="number"
-                                class="form-control"
-                                name="auto_scaler_min"
-                                min="0"
-                                ng-max="ctrl.formValues.AutoScaler.MaxReplicas"
-                                ng-model="ctrl.formValues.AutoScaler.MinReplicas"
-                                data-cy="k8sAppCreate-autoScaleMin"
-                                required
-                              />
-                            </div>
-                            <div class="input-group input-group-sm" ng-show="kubernetesApplicationCreationForm['auto_scaler_min'].$invalid">
-                              <div class="small text-warning" style="margin-top: 5px">
-                                <ng-messages for="kubernetesApplicationCreationForm['auto_scaler_min'].$error">
-                                  <p ng-message="required"><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Minimum instances is required.</p>
-                                  <p ng-message="min"><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Minimum instances must be greater than 0.</p>
-                                  <p ng-message="max"
-                                    ><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Minimum instances must be smaller than maximum instances.</p
-                                  >
-                                </ng-messages>
-                              </div>
-                            </div>
-                          </td>
-                          <td style="padding: 8px 5px 5px 0; border: none">
-                            <div class="input-group input-group-sm" style="width: 100%">
-                              <input
-                                type="number"
-                                class="form-control"
-                                name="auto_scaler_max"
-                                ng-min="ctrl.formValues.AutoScaler.MinReplicas"
-                                ng-model="ctrl.formValues.AutoScaler.MaxReplicas"
-                              />
-                            </div>
-                            <div class="input-group input-group-sm" ng-show="kubernetesApplicationCreationForm['auto_scaler_max'].$invalid || ctrl.autoScalerOverflow()">
-                              <div class="small text-warning" style="margin-top: 5px">
-                                <ng-messages for="kubernetesApplicationCreationForm['auto_scaler_max'].$error">
-                                  <p ng-message="required"><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Maximum instances is required.</p>
-                                  <p ng-message="min"
-                                    ><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Maximum instances must be greater than minimum instances.</p
-                                  >
-                                </ng-messages>
-                              </div>
-                            </div>
-                          </td>
-                          <td style="padding: 8px 5px 5px 0; border: none">
-                            <div class="input-group input-group-sm" style="width: 100%">
-                              <input
-                                type="number"
-                                class="form-control"
-                                name="auto_scaler_cpu"
-                                ng-model="ctrl.formValues.AutoScaler.TargetCPUUtilization"
-                                min="1"
-                                max="100"
-                                required
-                                data-cy="k8sAppCreate-targetCPUInput"
-                              />
-                            </div>
-                            <div class="input-group input-group-sm" ng-show="kubernetesApplicationCreationForm['auto_scaler_cpu'].$invalid">
-                              <div class="small text-warning" style="margin-top: 5px">
-                                <ng-messages for="kubernetesApplicationCreationForm['auto_scaler_cpu'].$error">
-                                  <p ng-message="required"><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Target CPU usage is required.</p>
-                                  <p ng-message="min"><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Target CPU usage must be greater than 0.</p>
-                                  <p ng-message="max"><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Target CPU usage must be smaller than 100.</p>
-                                </ng-messages>
-                              </div>
-                            </div>
-                          </td>
-                        </tr>
-                      </tbody>
-                    </table>
+                    <div class="row">
+                      <div class="col-sm-4 pl-0">
+                        <label class="control-label text-left pb-2" for="auto_scaler_min">Minimum instances</label>
+                        <div class="input-group input-group-sm" style="width: 100%">
+                          <input
+                            type="number"
+                            class="form-control"
+                            name="auto_scaler_min"
+                            min="0"
+                            ng-max="ctrl.formValues.AutoScaler.MaxReplicas"
+                            ng-model="ctrl.formValues.AutoScaler.MinReplicas"
+                            data-cy="k8sAppCreate-autoScaleMin"
+                            required
+                          />
+                        </div>
+                        <span ng-show="kubernetesApplicationCreationForm['auto_scaler_min'].$invalid">
+                          <div class="small text-muted" style="margin-top: 5px">
+                            <ng-messages for="kubernetesApplicationCreationForm['auto_scaler_min'].$error">
+                              <p ng-message="required" class="vertical-center">
+                                <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Minimum instances is required.
+                              </p>
+                              <p ng-message="min" class="vertical-center">
+                                <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Minimum instances must be greater than 0.
+                              </p>
+                              <p ng-message="max" class="vertical-center">
+                                <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Minimum instances must be smaller than maximum instances.
+                              </p>
+                            </ng-messages>
+                          </div>
+                        </span>
+                      </div>
+                      <div class="col-sm-4 pl-0">
+                        <label class="control-label text-left pb-2" for="auto_scaler_max">Maximum instances</label>
+                        <div class="input-group input-group-sm" style="width: 100%">
+                          <input
+                            type="number"
+                            class="form-control"
+                            name="auto_scaler_max"
+                            ng-min="ctrl.formValues.AutoScaler.MinReplicas"
+                            ng-model="ctrl.formValues.AutoScaler.MaxReplicas"
+                          />
+                        </div>
+                        <span ng-show="kubernetesApplicationCreationForm['auto_scaler_max'].$invalid || ctrl.autoScalerOverflow()">
+                          <div class="small text-muted" style="margin-top: 5px">
+                            <ng-messages for="kubernetesApplicationCreationForm['auto_scaler_max'].$error">
+                              <p ng-message="required" class="vertical-center">
+                                <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Maximum instances is required.
+                              </p>
+                              <p ng-message="min" class="vertical-center">
+                                <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Maximum instances must be greater than minimum instances.
+                              </p>
+                            </ng-messages>
+                          </div>
+                        </span>
+                      </div>
+                      <div class="col-sm-4 pl-0">
+                        <label class="control-label text-left pb-2" for="auto_scaler_cpu">
+                          Target CPU usage (<b>%</b>)
+                          <portainer-tooltip message="'The autoscaler will ensure enough instances are running to maintain an average CPU usage across all instances.'">
+                          </portainer-tooltip>
+                        </label>
+                        <div class="input-group input-group-sm" style="width: 100%">
+                          <input
+                            type="number"
+                            class="form-control"
+                            name="auto_scaler_cpu"
+                            ng-model="ctrl.formValues.AutoScaler.TargetCPUUtilization"
+                            min="1"
+                            max="100"
+                            required
+                            data-cy="k8sAppCreate-targetCPUInput"
+                          />
+                        </div>
+                        <span ng-show="kubernetesApplicationCreationForm['auto_scaler_cpu'].$invalid">
+                          <div class="small text-muted" style="margin-top: 5px">
+                            <ng-messages for="kubernetesApplicationCreationForm['auto_scaler_cpu'].$error">
+                              <p ng-message="required" class="vertical-center">
+                                <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Target CPU usage is required.
+                              </p>
+                              <p ng-message="min" class="vertical-center">
+                                <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Target CPU usage must be greater than 0.
+                              </p>
+                              <p ng-message="max" class="vertical-center">
+                                <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Target CPU usage must be smaller than 100.
+                              </p>
+                            </ng-messages>
+                          </div>
+                        </span>
+                      </div>
+                    </div>
 
                     <div class="form-group" ng-if="ctrl.autoScalerOverflow()" style="margin-bottom: 10px">
                       <div class="col-sm-12 small text-danger">