From cc6c5d45b7b206318cf487355a18a1336b6e99df Mon Sep 17 00:00:00 2001
From: Rex Wang <109048808+RexWangPT@users.noreply.github.com>
Date: Wed, 17 Aug 2022 23:37:35 +0800
Subject: [PATCH] Fix(UI) UI fixes on docker container screens EE-3915 (#7500)

* EE-3915 ui fixes on docker container pages

* Update createcontainer.html

Update label
---
 .../components/log-viewer/logViewer.html      | 14 ++--
 .../containers/create/createcontainer.html    | 73 +++++++++++++------
 .../views/containers/edit/container.html      |  2 +-
 3 files changed, 59 insertions(+), 30 deletions(-)

diff --git a/app/docker/components/log-viewer/logViewer.html b/app/docker/components/log-viewer/logViewer.html
index 2a41477e6..c72453296 100644
--- a/app/docker/components/log-viewer/logViewer.html
+++ b/app/docker/components/log-viewer/logViewer.html
@@ -31,7 +31,7 @@
             </div>
           </div>
           <div class="form-group">
-            <label for="logs_since" class="col-sm-1 control-label text-left"> Fetch </label>
+            <label for="logs_since" class="col-sm-2 control-label text-left"> Fetch </label>
             <div class="col-sm-2">
               <select class="form-control" ng-model="$ctrl.sinceTimestamp" id="logs_since">
                 <option selected value="">All logs</option>
@@ -40,20 +40,20 @@
             </div>
           </div>
           <div class="form-group">
-            <label for="logs_search" class="col-sm-1 control-label text-left"> Search </label>
-            <div class="col-sm-11">
+            <label for="logs_search" class="col-sm-2 control-label text-left"> Search </label>
+            <div class="col-sm-8">
               <input class="form-control" type="text" name="logs_search" ng-model="$ctrl.state.search" ng-change="$ctrl.state.selectedLines.length = 0;" placeholder="Filter..." />
             </div>
           </div>
           <div class="form-group">
-            <label for="lines_count" class="col-sm-1 control-label text-left"> Lines </label>
-            <div class="col-sm-11">
+            <label for="lines_count" class="col-sm-2 control-label text-left"> Lines </label>
+            <div class="col-sm-8">
               <input class="form-control" type="number" name="lines_count" ng-model="$ctrl.lineCount" placeholder="Enter no of lines..." />
             </div>
           </div>
           <div class="form-group" ng-if="$ctrl.state.copySupported">
-            <label class="col-sm-1 control-label text-left"> Actions </label>
-            <div class="col-sm-11">
+            <label class="col-sm-2 control-label text-left"> Actions </label>
+            <div class="col-sm-10">
               <button class="btn btn-primary btn-sm" type="button" ng-click="$ctrl.downloadLogs()" style="margin-left: 0"
                 ><pr-icon icon="'download'" feather="true"></pr-icon> Download logs</button
               >
diff --git a/app/docker/views/containers/create/createcontainer.html b/app/docker/views/containers/create/createcontainer.html
index 56dda9540..4ca53836a 100644
--- a/app/docker/views/containers/create/createcontainer.html
+++ b/app/docker/views/containers/create/createcontainer.html
@@ -640,7 +640,7 @@
               </div>
               <!-- !runtimes -->
             </form>
-            <form class="form-horizontal" style="margin-top: 15px">
+            <form class="form-horizontal" style="margin-top: 15px" name="resourceForm">
               <!-- devices -->
               <div ng-if="showDeviceMapping" class="form-group">
                 <div class="col-sm-12" style="margin-top: 5px">
@@ -712,9 +712,9 @@
               <div ng-class="{ 'edit-resources': state.mode == 'duplicate' }">
                 <div class="col-sm-12 form-section-title"> Resources </div>
                 <!-- memory-reservation-input -->
-                <div class="form-group">
-                  <label for="memory-reservation" class="col-sm-3 col-lg-2 control-label text-left mt-8"> Memory reservation </label>
-                  <div class="col-sm-3">
+                <div class="form-group flex">
+                  <label for="memory-reservation" class="col-sm-3 col-lg-2 control-label text-left vertical-center"> Memory reservation (MB) </label>
+                  <div class="col-sm-6">
                     <slider
                       on-change="(handleResourceChange)"
                       model="formValues.MemoryReservation"
@@ -724,18 +724,34 @@
                       ng-if="state.sliderMaxMemory"
                     ></slider>
                   </div>
-                  <div class="col-sm-2">
-                    <input type="number" min="0" class="form-control" ng-model="formValues.MemoryReservation" id="memory-reservation" />
+                  <div class="col-sm-2 vertical-center">
+                    <input
+                      name="memory_reservation"
+                      type="number"
+                      min="0"
+                      max="{{ state.sliderMaxMemory }}"
+                      class="form-control"
+                      ng-model="formValues.MemoryReservation"
+                      id="memory-reservation"
+                      required
+                    />
                   </div>
-                  <div class="col-sm-4">
-                    <p class="small text-muted mt-2"> Memory soft limit (<b>MB</b>) </p>
+                </div>
+                <div class="form-group" ng-show="resourceForm.memory_reservation.$invalid">
+                  <div class="col-sm-3 col-lg-2"></div>
+                  <div class="col-sm-8 small text-muted">
+                    <div ng-messages="resourceForm.memory-reservation.$error">
+                      <p class="vertical-center text-warning">
+                        <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> Value must be between 0 and {{ state.sliderMaxMemory }}.
+                      </p>
+                    </div>
                   </div>
                 </div>
                 <!-- !memory-reservation-input -->
                 <!-- memory-limit-input -->
-                <div class="form-group">
-                  <label for="memory-limit" class="col-sm-3 col-lg-2 control-label text-left mt-8"> Memory limit </label>
-                  <div class="col-sm-3">
+                <div class="form-group flex">
+                  <label for="memory-limit" class="col-sm-3 col-lg-2 control-label text-left vertical-center"> Memory limit (MB) </label>
+                  <div class="col-sm-6">
                     <slider
                       on-change="(handleResourceChange)"
                       model="formValues.MemoryLimit"
@@ -745,31 +761,44 @@
                       ng-if="state.sliderMaxMemory"
                     ></slider>
                   </div>
-                  <div class="col-sm-2">
-                    <input type="number" min="0" class="form-control" ng-model="formValues.MemoryLimit" id="memory-limit" />
+                  <div class="col-sm-2 vertical-center">
+                    <input
+                      name="memory_Limit"
+                      type="number"
+                      min="0"
+                      max="{{ state.sliderMaxMemory }}"
+                      class="form-control"
+                      ng-model="formValues.MemoryLimit"
+                      id="memory-limit"
+                      required
+                    />
                   </div>
-                  <div class="col-sm-4">
-                    <p class="small text-muted mt-7"> Memory limit (<b>MB</b>) </p>
+                </div>
+                <div class="form-group" ng-show="resourceForm.memory_Limit.$invalid">
+                  <div class="col-sm-3 col-lg-2"></div>
+                  <div class="col-sm-8 small text-muted">
+                    <div ng-messages="resourceForm.memory-limit.$error">
+                      <p class="vertical-center text-warning">
+                        <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> Value must be between 0 and {{ state.sliderMaxMemory }}.
+                      </p>
+                    </div>
                   </div>
                 </div>
                 <!-- !memory-limit-input -->
                 <!-- cpu-limit-input -->
-                <div class="form-group">
-                  <label for="cpu-limit" class="col-sm-3 col-lg-2 control-label text-left mt-8"> CPU limit </label>
-                  <div class="col-sm-5">
+                <div class="form-group flex">
+                  <label for="cpu-limit" class="col-sm-3 col-lg-2 control-label text-left vertical-center"> Maximum CPU usage </label>
+                  <div class="col-sm-8">
                     <slider
                       on-change="(handleResourceChange)"
                       model="formValues.CpuLimit"
                       floor="0"
                       ceil="state.sliderMaxCpu"
-                      step="0.25"
+                      step="0.1"
                       precision="2"
                       ng-if="state.sliderMaxCpu"
                     ></slider>
                   </div>
-                  <div class="col-sm-4 mt-8">
-                    <p class="small text-muted"> Maximum CPU usage </p>
-                  </div>
                 </div>
                 <!-- !cpu-limit-input -->
 
diff --git a/app/docker/views/containers/edit/container.html b/app/docker/views/containers/edit/container.html
index 5a3872b87..f0cae974f 100644
--- a/app/docker/views/containers/edit/container.html
+++ b/app/docker/views/containers/edit/container.html
@@ -65,7 +65,7 @@
         <table class="table">
           <tbody>
             <tr>
-              <td>ID</td>
+              <td class="col-xs-6 col-sm-4 col-md-3 col-lg-3">ID</td>
               <td>{{ container.Id }}</td>
             </tr>
             <tr>