fix(ui): kubernetes-consistent-styling EE-3820 (#7425)

app/kubernetes/components/datatables/application/containers-datatable/containersDatatable.html

@@ -6,7 +6,6 @@
           <div class="widget-icon space-right">
             <pr-icon icon="'server'" feather="true"></pr-icon>
           </div>
-
           <span>
             {{ $ctrl.titleText }}
           </span>
@@ -162,15 +161,19 @@
                 <a
                   ng-if="item.Status === 'Running' && $ctrl.useServerMetrics"
                   ui-sref="kubernetes.applications.application.stats({ pod: item.PodName, container: item.Name })"
-                  style="margin-right: 10px"
+                  class="vertical-center mr-1"
                 >
-                  <pr-icon icon="'pie-chart'" class="mr-1" feather="true"></pr-icon>Stats
+                  <pr-icon icon="'bar-chart'" feather="true"></pr-icon>Stats
                 </a>
-                <a ui-sref="kubernetes.applications.application.logs({ pod: item.PodName, container: item.Name })">
-                  <pr-icon icon="'file-text'" class="mr-1" feather="true"></pr-icon>Logs
+                <a ui-sref="kubernetes.applications.application.logs({ pod: item.PodName, container: item.Name })" class="vertical-center mr-1">
+                  <pr-icon icon="'file-text'" feather="true"></pr-icon>Logs
                 </a>
-                <a ng-if="item.Status === 'Running'" ui-sref="kubernetes.applications.application.console({ pod: item.PodName, container: item.Name })" style="margin-left: 10px">
-                  <pr-icon icon="'terminal'" class="mr-1" feather="true"></pr-icon>Console
+                <a
+                  ng-if="item.Status === 'Running'"
+                  ui-sref="kubernetes.applications.application.console({ pod: item.PodName, container: item.Name })"
+                  class="vertical-center mr-1"
+                >
+                  <pr-icon icon="'terminal'" feather="true"></pr-icon>Console
                 </a>
               </td>
             </tr>

app/kubernetes/components/datatables/applications-datatable-url/applications-datatable-url.html

@@ -1,4 +1,7 @@
 <div class="published-url-container">
   <div class="text-muted"> Published URL </div>
-  <a ng-href="{{ $ctrl.publishedUrl }}" target="_blank" class="publish-url-link"> <i class="fa fa-external-link-alt" aria-hidden="true"></i> {{ $ctrl.publishedUrl }} </a>
+  <a ng-href="{{ $ctrl.publishedUrl }}" target="_blank" class="publish-url-link vertical-center">
+    <pr-icon icon="'external-link'" feather="true"></pr-icon>
+    {{ $ctrl.publishedUrl }}
+  </a>
 </div>

app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.html

@@ -8,7 +8,7 @@
         </div>
         Applications
       </div>
-      <div class="searchBar vertical-center">
+      <div class="searchBar vertical-center !mr-0 min-w-[280px]">
         <pr-icon icon="'search'" feather="true" class-name="'searchIcon'"></pr-icon>
         <input
           type="text"
@@ -105,10 +105,10 @@
         </span>
       </div>
     </div>
-    <div class="flex flex-row w-full">
-      <span class="small text-muted mt-1 vertical-center" ng-if="!$ctrl.settings.showSystem" authorization="K8sAccessSystemNamespaces">
-        <pr-icon icon="'info'" feather="true" mode="'primary'"></pr-icon>
-        <span> System resources are hidden, this can be changed in the table settings. </span>
+    <div class="flex flex-row w-full" ng-if="$ctrl.isAdmin && !$ctrl.settings.showSystem">
+      <span class="small text-muted mt-1 vertical-center">
+        <pr-icon icon="'info'" feather="true" mode="'primary'" class="vertical-center"></pr-icon>
+        System resources are hidden, this can be changed in the table settings.
       </span>
     </div>
   </div>

app/kubernetes/components/datatables/applications-ports-datatable/applicationsPortsDatatable.html

@@ -5,11 +5,11 @@
       <!-- title -->
       <div class="toolBarTitle vertical-center">
         <div class="widget-icon space-right">
-          <pr-icon icon="'repeat'" feather="true"></pr-icon>
+          <pr-icon icon="'svg-dataflow'" class-name="'[&>*]:mr-0.5'"></pr-icon>
         </div>
         Port mappings
       </div>
-      <div class="searchBar vertical-center">
+      <div class="searchBar vertical-center !mr-0 min-w-[300px]">
         <pr-icon icon="'search'" feather="true" class-name="'icon !h-3'"></pr-icon>
         <input
           type="text"
@@ -77,8 +77,8 @@
     </div>
     <!-- info text -->
     <div class="flex flex-row w-full">
-      <span class="small text-muted mt-1" ng-if="$ctrl.isAdmin && !$ctrl.settings.showSystem">
-        <pr-icon icon="'info'" feather="true" class-name="'icon'"></pr-icon>
+      <span class="small text-muted mt-1 vertical-center" ng-if="$ctrl.isAdmin && !$ctrl.settings.showSystem">
+        <pr-icon icon="'info'" feather="true" mode="'primary'"></pr-icon>
         System resources are hidden, this can be changed in the table settings.
       </span>
     </div>
@@ -162,7 +162,7 @@
               </span>
             </span>
             <!-- Internal -->
-            <span ng-if="item.ServiceType === $ctrl.KubernetesServiceTypes.CLUSTER_IP"> <i class="fa fa-list-alt mr-0.5" aria-hidden="true"></i> ClusterIP </span>
+            <span ng-if="item.ServiceType === $ctrl.KubernetesServiceTypes.CLUSTER_IP"> <pr-icon icon="'list'" feather="true"></pr-icon> ClusterIP </span>
             <!-- Cluster -->
             <span ng-if="item.ServiceType === $ctrl.KubernetesServiceTypes.NODE_PORT"> <pr-icon icon="'list'" feather="true" class-name="'icon'"></pr-icon> NodePort </span>
           </td>

app/kubernetes/components/datatables/applications-stacks-datatable/applicationsStacksDatatable.html

@@ -73,7 +73,7 @@
                         <option value="300">5min</option>
                       </select>
                       <span>
-                        <i id="refreshRateChange" class="fa fa-check green-icon mt-2" aria-hidden="true"></i>
+                        <pr-icon id="refreshRateChange" icon="'check'" feather="true" mode="'success'" size="'sm'"></pr-icon>
                       </span>
                     </div>
                   </div>
@@ -88,9 +88,9 @@
       </div>
     </div>
     <!-- info text -->
-    <div class="flex flex-row">
-      <span class="small text-muted mt-1" ng-if="$ctrl.isAdmin && !$ctrl.settings.showSystem">
-        <pr-icon icon="'info'" feather="true"></pr-icon>
+    <div class="flex flex-row w-full">
+      <span class="small text-muted mt-1 vertical-center" ng-if="$ctrl.isAdmin && !$ctrl.settings.showSystem">
+        <pr-icon icon="'info'" feather="true" mode="'primary'"></pr-icon>
         System resources are hidden, this can be changed in the table settings.
       </span>
     </div>

app/kubernetes/components/datatables/configurations-datatable/configurationsDatatable.html

@@ -75,7 +75,7 @@
                           <option value="300">5min</option>
                         </select>
                         <span>
-                          <i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-top: 7px; display: none"></i>
+                          <pr-icon id="refreshRateChange" icon="'check'" feather="true" mode="'success'" size="'sm'"></pr-icon>
                         </span>
                       </div>
                     </div>
@@ -90,7 +90,7 @@
         </div>
         <div ng-if="$ctrl.isAdmin && !$ctrl.settings.showSystem" class="flex flex-row w-full">
           <span class="small text-muted mt-1 vertical-center">
-            <pr-icon icon="'info'" feather="true" class-name="'!mb-0.5'" mode="'primary'"></pr-icon>
+            <pr-icon icon="'info'" feather="true" mode="'primary'" class="vertical-center"></pr-icon>
             <div> System resources are hidden, this can be changed in the table settings. </div>
           </span>
         </div>

app/kubernetes/components/datatables/events-datatable/eventsDatatable.html

@@ -2,9 +2,8 @@
   <div class="toolBar">
     <div class="toolBarTitle flex">
       <div class="widget-icon space-right">
-        <pr-icon icon="'rotate-ccw'" feather="true"></pr-icon>
+        <pr-icon icon="'svg-clockrewind'" feather="true"></pr-icon>
       </div>
-
       {{ $ctrl.titleText }}
     </div>
     <div class="searchBar">

app/kubernetes/components/datatables/integrated-applications-datatable/integratedApplicationsDatatable.html

@@ -1,14 +1,14 @@
 <div class="datatable">
   <rd-widget>
     <rd-widget-body classes="no-padding">
-      <div class="toolBar">
+      <div class="toolBar !gap-3">
         <div class="toolBarTitle vertical-center">
           <div class="widget-icon space-right">
             <pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
           </div>
           {{ $ctrl.titleText }}
         </div>
-        <div class="searchBar vertical-center">
+        <div class="searchBar vertical-center !mr-0 min-w-[280px]">
           <pr-icon icon="'search'" feather="true" class="vertical-center"></pr-icon>
           <input
             type="text"

app/kubernetes/components/datatables/node-applications-datatable/nodeApplicationsDatatable.html

@@ -4,26 +4,25 @@
       <div class="toolBar">
         <div class="toolBarTitle flex">
           <div class="widget-icon space-right">
-            <pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
+            <pr-icon icon="'svg-laptopcode'"></pr-icon>
           </div>
-
           <span class="vertical-center">
             {{ $ctrl.titleText }}
           </span>
         </div>
+        <div class="searchBar min-w-[260px]">
+          <pr-icon icon="'search'" class="vertical-center" class-name="'searchIcon'" feather="true"></pr-icon>
+          <input
+            type="text"
+            class="searchInput"
+            ng-model="$ctrl.state.textFilter"
+            ng-change="$ctrl.onTextFilterChange()"
+            placeholder="Search for an application..."
+            auto-focus
+            ng-model-options="{ debounce: 300 }"
+          />
+        </div>
         <div class="settings vertical-center">
-          <div class="searchBar">
-            <pr-icon icon="'search'" class="vertical-center" feather="true"></pr-icon>
-            <input
-              type="text"
-              class="searchInput ml-1"
-              ng-model="$ctrl.state.textFilter"
-              ng-change="$ctrl.onTextFilterChange()"
-              placeholder="Search for an application..."
-              auto-focus
-              ng-model-options="{ debounce: 300 }"
-            />
-          </div>
           <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
             <span uib-dropdown-toggle><pr-icon icon="'more-vertical'" feather="true"></pr-icon></span>
             <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>

app/kubernetes/components/datatables/node-applications-datatable/nodeApplicationsDatatable.js

@@ -3,7 +3,6 @@ angular.module('portainer.kubernetes').component('kubernetesNodeApplicationsData
   controller: 'KubernetesNodeApplicationsDatatableController',
   bindings: {
     titleText: '@',
-    titleIcon: '@',
     dataset: '<',
     tableKey: '@',
     orderBy: '@',

app/kubernetes/components/datatables/nodes-datatable/nodesDatatable.html

@@ -4,26 +4,25 @@
       <div class="toolBar">
         <div class="toolBarTitle flex">
           <div class="widget-icon space-right">
-            <pr-icon icon="$ctrl.titleIcon"></pr-icon>
+            <pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
           </div>
-
           <span class="vertical-center">
             {{ $ctrl.titleText }}
           </span>
         </div>
+        <div class="searchBar vertical-center">
+          <pr-icon icon="'search'" feather="true"></pr-icon>
+          <input
+            type="text"
+            class="searchInput"
+            ng-model="$ctrl.state.textFilter"
+            ng-change="$ctrl.onTextFilterChange()"
+            placeholder="Search for a node..."
+            auto-focus
+            ng-model-options="{ debounce: 300 }"
+          />
+        </div>
         <div class="settings">
-          <div class="searchBar vertical-center">
-            <pr-icon icon="'search'" feather="true" class-name="'searchIcon'"></pr-icon>
-            <input
-              type="text"
-              class="searchInput"
-              ng-model="$ctrl.state.textFilter"
-              ng-change="$ctrl.onTextFilterChange()"
-              placeholder="Search..."
-              auto-focus
-              ng-model-options="{ debounce: 300 }"
-            />
-          </div>
           <span
             class="setting vertical-center"
             ng-class="{ 'setting-active': $ctrl.settings.open }"
@@ -132,7 +131,9 @@
                   ng-click="$ctrl.changeOrderBy('IPAddress')"
                 ></table-column-header>
               </th>
-              <th ng-if="$ctrl.useServerMetrics"> Actions </th>
+              <th ng-if="$ctrl.useServerMetrics">
+                <table-column-header col-title="'Actions'" can-sort="false"></table-column-header>
+              </th>
             </tr>
           </thead>
           <tbody>
@@ -154,7 +155,7 @@
               <td>{{ item.Version }}</td>
               <td>{{ item.IPAddress }}</td>
               <td ng-if="$ctrl.useServerMetrics">
-                <a ui-sref="kubernetes.cluster.node.stats({ name: item.Name })" style="cursor: pointer"> <i class="fa fa-chart-area" aria-hidden="true"></i> Stats </a>
+                <a ui-sref="kubernetes.cluster.node.stats({ name: item.Name })" class="vertical-center"> <pr-icon icon="'bar-chart'" feather="true"></pr-icon> Stats </a>
               </td>
             </tr>
             <tr ng-if="!$ctrl.dataset">

app/kubernetes/components/datatables/resource-pool-applications-datatable/resourcePoolApplicationsDatatable.html

@@ -3,7 +3,7 @@
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
         <div class="toolBarTitle vertical-center">
-          <pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
+          <pr-icon icon="$ctrl.titleIcon" feather="true" mode="'primary'" class-name="'icon-nested-blue'"></pr-icon>
           {{ $ctrl.titleText }}
         </div>
         <div class="searchBar vertical-center">
@@ -13,7 +13,7 @@
             class="searchInput"
             ng-model="$ctrl.state.textFilter"
             ng-change="$ctrl.onTextFilterChange()"
-            placeholder="Search for an application"
+            placeholder="Search for an application..."
             auto-focus
             ng-model-options="{ debounce: 300 }"
           />

app/kubernetes/components/datatables/resource-pools-datatable/resourcePoolsDatatable.html

@@ -17,7 +17,7 @@
               class="searchInput"
               ng-model="$ctrl.state.textFilter"
               ng-change="$ctrl.onTextFilterChange()"
-              placeholder="Search for a namespace"
+              placeholder="Search for a namespace..."
               auto-focus
               ng-model-options="{ debounce: 300 }"
               data-cy="k8sNamespace-namespaceSearchInput"
@@ -68,7 +68,7 @@
                           <option value="300">5min</option>
                         </select>
                         <span>
-                          <i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-top: 7px; display: none"></i>
+                          <pr-icon id="refreshRateChange" icon="'check'" feather="true" mode="'success'" size="'sm'"></pr-icon>
                         </span>
                       </div>
                     </div>
@@ -82,9 +82,9 @@
           </div>
         </div>
 
-        <div class="flex flex-row w-full">
-          <span class="small text-muted mt-1 vertical-center" ng-if="!$ctrl.settings.showSystem && $ctrl.isAdmin">
-            <pr-icon icon="'info'" feather="true" class-name="'!mb-0.5'" mode="'primary'"></pr-icon>
+        <div class="flex flex-row w-full" ng-if="!$ctrl.settings.showSystem && $ctrl.isAdmin">
+          <span class="small text-muted mt-1 vertical-center">
+            <pr-icon icon="'info'" feather="true" mode="'primary'" class="vertical-center"></pr-icon>
             <div> System resources are hidden, this can be changed in the table settings. </div>
           </span>
         </div>