From ce7d234cba89fa74cef778c8d1f88c6d6f1996b1 Mon Sep 17 00:00:00 2001
From: Prabhat Khera <91852476+prabhat-org@users.noreply.github.com>
Date: Thu, 14 Jul 2022 13:50:23 +1200
Subject: [PATCH] feat(ui): ui improvements on cluster landing page EE-3467
 (#7245)

---
 .../nodes-datatable/nodesDatatable.html       | 138 +++++++++++-------
 1 file changed, 83 insertions(+), 55 deletions(-)

diff --git a/app/kubernetes/components/datatables/nodes-datatable/nodesDatatable.html b/app/kubernetes/components/datatables/nodes-datatable/nodesDatatable.html
index cea99f863..7105c4d58 100644
--- a/app/kubernetes/components/datatables/nodes-datatable/nodesDatatable.html
+++ b/app/kubernetes/components/datatables/nodes-datatable/nodesDatatable.html
@@ -2,10 +2,36 @@
   <rd-widget>
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
-        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i> {{ $ctrl.titleText }} </div>
+        <div class="toolBarTitle flex">
+          <div class="flex justify-center content-center mr-2 icon-nested-blue vertical-center">
+            <i class="fa icon icon-primary icon-sm" ng-class="$ctrl.titleIcon" aria-hidden="true"></i>
+          </div>
+          <span class="vertical-center">
+            {{ $ctrl.titleText }}
+          </span>
+        </div>
         <div class="settings">
-          <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><i class="fa fa-cog" aria-hidden="true"></i> Table settings</span>
+          <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..."
+              auto-focus
+              ng-model-options="{ debounce: 300 }"
+            />
+          </div>
+          <span
+            class="setting vertical-center"
+            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>
               <div class="tableMenu">
                 <div class="menuHeader"> Table settings </div>
@@ -25,7 +51,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'" mode="'success'" style="display: none" feather="true"></pr-icon>
                       </span>
                     </div>
                   </div>
@@ -38,70 +64,72 @@
           </span>
         </div>
       </div>
-      <div class="searchBar">
-        <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input
-          type="text"
-          class="searchInput"
-          ng-model="$ctrl.state.textFilter"
-          ng-change="$ctrl.onTextFilterChange()"
-          placeholder="Search..."
-          auto-focus
-          ng-model-options="{ debounce: 300 }"
-        />
-      </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Name')">
-                  Name
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Name'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Name'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Name')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Role')">
-                  Role
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Role' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Role' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Role'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Role'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Role' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Role')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Status')">
-                  Status
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Status' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Status' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Status'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Status'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Status' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Status')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('CPU')">
-                  CPU
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'CPU' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'CPU' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'CPU'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'CPU'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'CPU' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('CPU')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Memory')">
-                  Memory
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Memory' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Memory' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Memory'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Memory'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Memory' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Memory')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Version')">
-                  Version
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Version' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Version' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Version'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Version'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Version' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Version')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('IPAddress')">
-                  IP Address
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IPAddress' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IPAddress' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'IP Address'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'IPAddress'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'IPAddress' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('IPAddress')"
+                ></table-column-header>
               </th>
               <th ng-if="$ctrl.useServerMetrics"> Actions </th>
             </tr>
@@ -110,13 +138,13 @@
             <tr
               dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
             >
-              <td ng-if="$ctrl.isAdmin">
-                <a ui-sref="kubernetes.cluster.node({ name: item.Name })">
+              <td>
+                <a ui-sref="kubernetes.cluster.node({ name: item.Name })" ng-if="$ctrl.hasK8sClusterNodeR">
                   {{ item.Name }}
                 </a>
-                <span class="label label-primary image-tag" style="margin-left: 5px" ng-if="item.Api">api</span>
+                <span ng-if="!$ctrl.hasK8sClusterNodeR">{{ item.Name }}</span>
+                <span class="label label-primary image-tag" style="margin-left: 5px" ng-if="item.Api" authorization="K8sClusterNodeR">api</span>
               </td>
-              <td ng-if="!$ctrl.isAdmin"> {{ item.Name }}</td>
               <td>{{ item.Role }}</td>
               <td
                 ><span class="label label-{{ item.Status | kubernetesNodeStatusColor }}">{{ item.Status }}</span></td