From 1e78234f04d592cebee7f40e0b5672558053dd55 Mon Sep 17 00:00:00 2001
From: andres-portainer <91705312+andres-portainer@users.noreply.github.com>
Date: Mon, 1 Aug 2022 14:44:44 -0300
Subject: [PATCH] feat(ui): renovate the Docker volume list page EE-3513
 (#7377)

---
 .../volumes-datatable/volumesDatatable.html   | 108 ++++++++++--------
 1 file changed, 62 insertions(+), 46 deletions(-)

diff --git a/app/docker/components/datatables/volumes-datatable/volumesDatatable.html b/app/docker/components/datatables/volumes-datatable/volumesDatatable.html
index 183ced492..7995e0033 100644
--- a/app/docker/components/datatables/volumes-datatable/volumesDatatable.html
+++ b/app/docker/components/datatables/volumes-datatable/volumesDatatable.html
@@ -7,7 +7,7 @@
           {{ $ctrl.titleText }}
         </div>
         <div class="searchBar vertical-center">
-          <pr-icon icon="'search'" feather="true"></pr-icon>
+          <pr-icon icon="'search'" feather="true" class="leading-none"></pr-icon>
           <input
             type="text"
             class="searchInput"
@@ -28,7 +28,7 @@
             ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
             data-cy="volume-removeVolumeButton"
           >
-            <pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Remove
+            <pr-icon icon="'trash-2'" feather="true" mode="'danger'" class="leading-none"></pr-icon>Remove
           </button>
           <button
             type="button"
@@ -37,7 +37,7 @@
             authorization="DockerVolumeCreate"
             data-cy="volume-addVolumeButton"
           >
-            <pr-icon icon="'plus'" feather="true"></pr-icon>Add volume
+            <pr-icon icon="'plus'" feather="true" class="leading-none"></pr-icon>Add volume
           </button>
         </div>
         <div class="settings">
@@ -63,8 +63,8 @@
                         <option value="120">2min</option>
                         <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>
+                      <span class="inline-block w-3">
+                        <pr-icon id="refreshRateChange" icon="'check'" style="display: none" mode="'success'" feather="true"></pr-icon>
                       </span>
                     </div>
                   </div>
@@ -81,20 +81,24 @@
         <table class="table table-hover table-filters nowrap-cells">
           <thead>
             <tr>
-              <th uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.filters.state.open">
+              <th uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.filters.state.open" class="flex gap-1">
                 <span class="md-checkbox" ng-if="!$ctrl.offlineMode" authorization="DockerVolumeDelete, DockerVolumeCreate">
                   <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
                   <label for="select_all"></label>
                 </span>
-                <a ng-click="$ctrl.changeOrderBy('Id')">
-                  Name
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Id' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Id' && $ctrl.state.reverseOrder"></i>
-                </a>
-                <div>
-                  <span uib-dropdown-toggle class="table-filter" ng-if="!$ctrl.filters.state.enabled">Filter <i class="fa fa-filter" aria-hidden="true"></i></span>
-                  <span uib-dropdown-toggle class="table-filter filter-active" ng-if="$ctrl.filters.state.enabled">Filter <i class="fa fa-check" aria-hidden="true"></i></span>
-                </div>
+                <table-column-header
+                  col-title="'Name'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Id'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Id' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Id')"
+                ></table-column-header>
+                <span uib-dropdown-toggle class="table-filter flex gap-1 self-end" ng-if="!$ctrl.filters.state.enabled"
+                  >Filter <pr-icon icon="'filter'" feather="true"></pr-icon
+                ></span>
+                <span uib-dropdown-toggle class="table-filter filter-active flex gap-1 self-end" ng-if="$ctrl.filters.state.enabled"
+                  >Filter <pr-icon icon="'check'" feather="true"></pr-icon
+                ></span>
                 <div class="dropdown-menu" uib-dropdown-menu>
                   <div class="tableMenu">
                     <div class="menuHeader"> Filter by usage </div>
@@ -115,46 +119,58 @@
                 </div>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('StackName')">
-                  Stack
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'StackName' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Stack'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'StackName'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('StackName')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Driver')">
-                  Driver
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Driver' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Driver' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Driver'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Driver'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Driver' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Driver')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Mountpoint')">
-                  Mount point
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Mountpoint' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Mountpoint' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Mount point'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Mountpoint'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Mountpoint' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Mountpoint')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('CreatedAt')">
-                  Created
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'CreatedAt' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'CreatedAt' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Created'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'CreatedAt'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'CreatedAt' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('CreatedAt')"
+                ></table-column-header>
               </th>
               <th ng-if="$ctrl.showHostColumn">
-                <a ng-click="$ctrl.changeOrderBy('NodeName')">
-                  Host
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'NodeName' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'NodeName' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Host'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'NodeName'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'NodeName' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('NodeName')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')">
-                  Ownership
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Ownership'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'ResourceControl.Ownership'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')"
+                ></table-column-header>
               </th>
             </tr>
           </thead>
@@ -174,7 +190,7 @@
                 <span ng-if="$ctrl.offlineMode">{{ item.Id | truncate: 40 }}</span>
                 <btn authorization="DockerAgentBrowseList" ng-if="$ctrl.showBrowseAction && !$ctrl.offlineMode">
                   <a ui-sref="docker.volumes.volume.browse({ id: item.Id, nodeName: item.NodeName })" class="btn btn-xs btn-primary space-left">
-                    <i class="fa fa-search"></i> browse
+                    <pr-icon icon="'search'" feather="true"></pr-icon> browse
                   </a>
                 </btn>
                 <span style="margin-left: 10px" class="label label-warning image-tag space-left" ng-if="item.dangling">Unused</span>