feat(ui): kubernetes-volumes-list EE-3484 (#7290)

* feat(ui) volumes datatable styling EE-3484

* feat(ui): storage datatable styling EE-3484

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

@@ -104,9 +104,9 @@
       </div>
     </div>
     <div class="flex flex-row w-full">
-      <span class="small text-muted mt-1" ng-if="$ctrl.isAdmin && !$ctrl.settings.showSystem">
+      <span class="small text-muted mt-1 vertical-center" ng-if="!$ctrl.settings.showSystem" authorization="K8sAccessSystemNamespaces">
-        <pr-icon icon="'info'" feather="true" class-name="'icon'"></pr-icon>
+        <pr-icon icon="'info'" feather="true" mode="'primary'"></pr-icon>
-        System resources are hidden, this can be changed in the table settings.
+        <span> System resources are hidden, this can be changed in the table settings. </span>
       </span>
     </div>
   </div>
@@ -122,8 +122,8 @@
                 <label for="select_all"></label>
               </span>
               <div class="cursor-pointer vertical-center" ng-click="$ctrl.expandAll()">
-                <pr-icon ng-if="$ctrl.state.expandAll" icon="'chevron-down'" feather="true" class-name="'icon'"></pr-icon>
+                <pr-icon ng-if="$ctrl.state.expandAll" icon="'chevron-down'" feather="true"></pr-icon>
-                <pr-icon ng-if="!$ctrl.state.expandAll" icon="'chevron-right'" feather="true" class-name="'icon'"></pr-icon>
+                <pr-icon ng-if="!$ctrl.state.expandAll" icon="'chevron-right'" feather="true"></pr-icon>
               </div>
             </div>
           </th>
@@ -174,8 +174,8 @@
               ></table-column-header>
               <div class="flex flex-row no-wrap gap-1 items-center" uib-dropdown-toggle>
                 <span class="table-filter">Filters</span>
-                <pr-icon ng-if="!$ctrl.filters.state.enabled" icon="'filter'" class-name="'icon'" feather="true"></pr-icon>
+                <pr-icon ng-if="!$ctrl.filters.state.enabled" icon="'filter'" feather="true"></pr-icon>
-                <pr-icon ng-if="$ctrl.filters.state.enabled" icon="'check'" class-name="'icon'" feather="true"></pr-icon>
+                <pr-icon ng-if="$ctrl.filters.state.enabled" icon="'check'" feather="true"></pr-icon>
               </div>
               <div class="dropdown-menu" uib-dropdown-menu>
                 <div class="tableMenu">
@@ -231,8 +231,8 @@
               <label for="select_{{ $index }}"></label>
             </span>
             <div ng-if="$ctrl.isExpandable(item)" class="vertical-center">
-              <pr-icon ng-if="$ctrl.isItemExpanded(item)" icon="'chevron-down'" feather="true" class-name="'icon'"></pr-icon>
+              <pr-icon ng-if="$ctrl.isItemExpanded(item)" icon="'chevron-down'" feather="true"></pr-icon>
-              <pr-icon ng-if="!$ctrl.isItemExpanded(item)" icon="'chevron-right'" feather="true" class-name="'icon'"></pr-icon>
+              <pr-icon ng-if="!$ctrl.isItemExpanded(item)" icon="'chevron-right'" feather="true"></pr-icon>
             </div>
           </td>
           <td>

app/kubernetes/components/datatables/volumes-datatable/volumesDatatable.html

@@ -1,12 +1,38 @@
 <div class="datatable">
-  <rd-widget>
+  <!-- toolbar header actions and settings -->
-    <rd-widget-body classes="no-padding">
+  <div class="toolBar !flex-col gap-1">
-      <div class="toolBar">
+    <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap !p-0 w-full">
-        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i> {{ $ctrl.titleText }} </div>
+      <div class="toolBarTitle vertical-center">
-        <span class="small text-muted" style="float: left; margin-top: 5px" ng-if="$ctrl.isAdmin && !$ctrl.settings.showSystem">
+        <pr-icon icon="'database'" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
-          <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
+        Volumes
-          System resources are hidden, this can be changed in the table settings.
+      </div>
-        </span>
+      <div class="searchBar vertical-center">
+        <pr-icon icon="'search'" feather="true"></pr-icon>
+        <input
+          type="text"
+          class="searchInput !mr-0"
+          ng-model="$ctrl.state.textFilter"
+          ng-change="$ctrl.onTextFilterChange()"
+          placeholder="Search for a volume..."
+          auto-focus
+          ng-model-options="{ debounce: 300 }"
+        />
+      </div>
+      <div class="actionBar !gap-3 !mr-0">
+        <button
+          type="button"
+          class="btn btn-sm btn-dangerlight vertical-center !ml-0"
+          ng-disabled="$ctrl.state.selectedItemCount === 0"
+          ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
+        >
+          <pr-icon icon="'trash-2'" feather="true"></pr-icon>
+          Remove
+        </button>
+        <button type="button" class="btn btn-sm btn-primary vertical-center !ml-0" ui-sref="kubernetes.deploy" data-cy="k8sVolume-deployFromManifestButton">
+          <pr-icon icon="'plus'" feather="true" class-name="'!h-3'"></pr-icon>
+          Create from manifest
+        </button>
+      </div>
       <div class="settings">
         <span
           class="setting"
@@ -17,7 +43,9 @@
           is-open="$ctrl.settings.open"
           data-cy="k8s-vol-table-settings"
         >
-            <span uib-dropdown-toggle><i class="fa fa-cog" aria-hidden="true"></i> Table settings</span>
+          <span uib-dropdown-toggle aria-label="Settings">
+            <pr-icon icon="'more-vertical'" feather="true" class-name="'!mr-0 !h-4'"></pr-icon>
+          </span>
           <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
             <div class="tableMenu">
               <div class="menuHeader"> Table settings </div>
@@ -41,7 +69,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>
@@ -54,75 +82,76 @@
         </span>
       </div>
     </div>
-      <div class="actionBar">
+    <div class="flex flex-row w-full" ng-if="!ctrl.isAdmin && !$ctrl.settings.showSystem">
-        <button type="button" class="btn btn-sm btn-danger" ng-disabled="$ctrl.state.selectedItemCount === 0" ng-click="$ctrl.removeAction($ctrl.state.selectedItems)">
+      <span class="small text-muted mt-1 vertical-center">
-          <i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
+        <pr-icon icon="'info'" feather="true" mode="'primary'"></pr-icon>
-        </button>
+        <span> System resources are hidden, this can be changed in the table settings. </span>
-        <button type="button" class="btn btn-sm btn-primary" ui-sref="kubernetes.deploy" data-cy="k8sVolume-deployFromManifestButton">
+      </span>
-          <i class="fa fa-plus space-right" aria-hidden="true"></i>Create from manifest
-        </button>
     </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>
-                <span class="md-checkbox">
+            <div class="flex flex-no-wrap items-center">
+              <span class="md-checkbox vertical-center">
                 <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('PersistentVolumeClaim.Name')">
+              <table-column-header
-                  Name
+                col-title="'Name'"
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'PersistentVolumeClaim.Name' && !$ctrl.state.reverseOrder"></i>
+                can-sort="true"
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'PersistentVolumeClaim.Name' && $ctrl.state.reverseOrder"></i>
+                is-sorted="$ctrl.state.orderBy === 'PersistentVolumeClaim.Name'"
-                </a>
+                is-sorted-desc="$ctrl.state.orderBy === 'PersistentVolumeClaim.Name' && $ctrl.state.reverseOrder"
+                ng-click="$ctrl.changeOrderBy('PersistentVolumeClaim.Name')"
+              ></table-column-header>
+            </div>
           </th>
           <th>
-                <a ng-click="$ctrl.changeOrderBy('ResourcePool.Namespace.Name')">
+            <table-column-header
-                  Namespace
+              col-title="'Namespace'"
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourcePool.Namespace.Name' && !$ctrl.state.reverseOrder"></i>
+              can-sort="true"
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourcePool.Namespace.Name' && $ctrl.state.reverseOrder"></i>
+              is-sorted="$ctrl.state.orderBy === 'ResourcePool.Namespace.Name'"
-                </a>
+              is-sorted-desc="$ctrl.state.orderBy === 'ResourcePool.Namespace.Name' && $ctrl.state.reverseOrder"
+              ng-click="$ctrl.changeOrderBy('ResourcePool.Namespace.Name')"
+            ></table-column-header>
           </th>
           <th>
-                <a ng-click="$ctrl.changeOrderBy('PersistentVolumeClaim.Applications[0].Name')">
+            <table-column-header
-                  Used by
+              col-title="'Used by'"
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'PersistentVolumeClaim.Applications[0].Name' && !$ctrl.state.reverseOrder"></i>
+              can-sort="true"
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'PersistentVolumeClaim.Applications[0].Name' && $ctrl.state.reverseOrder"></i>
+              is-sorted="$ctrl.state.orderBy === 'PersistentVolumeClaim.Applications[0].Name'"
-                </a>
+              is-sorted-desc="$ctrl.state.orderBy === 'PersistentVolumeClaim.Applications[0].Name' && $ctrl.state.reverseOrder"
+              ng-click="$ctrl.changeOrderBy('PersistentVolumeClaim.Applications[0].Name')"
+            ></table-column-header>
           </th>
           <th>
-                <a ng-click="$ctrl.changeOrderBy('PersistentVolumeClaim.StorageClass.Name')">
+            <table-column-header
-                  Storage
+              col-title="'Storage'"
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'PersistentVolumeClaim.StorageClass.Name' && !$ctrl.state.reverseOrder"></i>
+              can-sort="true"
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'PersistentVolumeClaim.StorageClass.Name' && $ctrl.state.reverseOrder"></i>
+              is-sorted="$ctrl.state.orderBy === 'PersistentVolumeClaim.StorageClass.Name'"
-                </a>
+              is-sorted-desc="$ctrl.state.orderBy === 'PersistentVolumeClaim.StorageClass.Name' && $ctrl.state.reverseOrder"
+              ng-click="$ctrl.changeOrderBy('PersistentVolumeClaim.StorageClass.Name')"
+            ></table-column-header>
           </th>
           <th>
-                <a ng-click="$ctrl.changeOrderBy('PersistentVolumeClaim.Storage')">
+            <table-column-header
-                  Size
+              col-title="'Size'"
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'PersistentVolumeClaim.Storage' && !$ctrl.state.reverseOrder"></i>
+              can-sort="true"
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'PersistentVolumeClaim.Storage' && $ctrl.state.reverseOrder"></i>
+              is-sorted="$ctrl.state.orderBy === 'PersistentVolumeClaim.Storage'"
-                </a>
+              is-sorted-desc="$ctrl.state.orderBy === 'PersistentVolumeClaim.Storage' && $ctrl.state.reverseOrder"
+              ng-click="$ctrl.changeOrderBy('PersistentVolumeClaim.Storage')"
+            ></table-column-header>
           </th>
           <th>
-                <a ng-click="$ctrl.changeOrderBy('PersistentVolumeClaim.CreationDate')">
+            <table-column-header
-                  Created
+              col-title="'Created'"
-                  <i class="fa fa-sort-numeric-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'PersistentVolumeClaim.CreationDate' && !$ctrl.state.reverseOrder"></i>
+              can-sort="true"
-                  <i class="fa fa-sort-numeric-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'PersistentVolumeClaim.CreationDate' && $ctrl.state.reverseOrder"></i>
+              is-sorted="$ctrl.state.orderBy === 'PersistentVolumeClaim.CreationDate'"
-                </a>
+              is-sorted-desc="$ctrl.state.orderBy === 'PersistentVolumeClaim.CreationDate' && $ctrl.state.reverseOrder"
+              ng-click="$ctrl.changeOrderBy('PersistentVolumeClaim.CreationDate')"
+            ></table-column-header>
           </th>
         </tr>
       </thead>
@@ -136,9 +165,7 @@
               <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)" ng-disabled="$ctrl.disableRemove(item)" />
               <label for="select_{{ $index }}"></label>
             </span>
-                <a ui-sref="kubernetes.volumes.volume({ namespace: item.ResourcePool.Namespace.Name, name: item.PersistentVolumeClaim.Name })">{{
+            <a ui-sref="kubernetes.volumes.volume({ namespace: item.ResourcePool.Namespace.Name, name: item.PersistentVolumeClaim.Name })">{{ item.PersistentVolumeClaim.Name }}</a>
-                  item.PersistentVolumeClaim.Name
-                }}</a>
             <span class="label label-info image-tag label-margins" ng-if="$ctrl.isSystemNamespace(item)">system</span>
             <span class="label label-primary image-tag label-margins" ng-if="!$ctrl.isSystemNamespace(item) && $ctrl.isExternalVolume(item)">external</span>
             <span class="label label-warning image-tag label-margins" ng-if="!$ctrl.isSystemNamespace(item) && !$ctrl.isUsed(item)">unused</span>
@@ -147,11 +174,9 @@
             <a ui-sref="kubernetes.resourcePools.resourcePool({ id: item.ResourcePool.Namespace.Name })">{{ item.ResourcePool.Namespace.Name }}</a>
           </td>
           <td>
-                <a
+            <a ng-if="item.Applications.length" ui-sref="kubernetes.applications.application({ name: item.Applications[0].Name, namespace: item.ResourcePool.Namespace.Name })">{{
-                  ng-if="item.Applications.length"
+              item.Applications[0].Name
-                  ui-sref="kubernetes.applications.application({ name: item.Applications[0].Name, namespace: item.ResourcePool.Namespace.Name })"
+            }}</a>
-                  >{{ item.Applications[0].Name }}</a
-                >
             <span ng-if="item.Applications.length > 1"> + {{ item.Applications.length - 1 }}</span>
             <span ng-if="!item.Applications.length">-</span>
           </td>
@@ -175,8 +200,8 @@
       </tbody>
     </table>
   </div>
-      <div class="footer" ng-if="$ctrl.dataset">
+  <div class="footer pl-5" ng-if="$ctrl.dataset">
-        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
+    <div class="infoBar !ml-0" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
     <div class="paginationControls">
       <form class="form-inline">
         <span class="limitSelector">
@@ -193,6 +218,4 @@
       </form>
     </div>
   </div>
-    </rd-widget-body>
-  </rd-widget>
 </div>

app/kubernetes/views/volumes/components/volumes-storages-datatable/template.html

@@ -1,11 +1,28 @@
 <div class="datatable">
-  <rd-widget>
+  <!-- toolbar header actions and settings -->
-    <rd-widget-body classes="no-padding">
+  <div class="toolBar !flex-col gap-1">
-      <div class="toolBar">
+    <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap !p-0 w-full">
-        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i> {{ $ctrl.titleText }} </div>
+      <div class="toolBarTitle vertical-center">
+        <pr-icon icon="'database'" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
+        Storage
+      </div>
+      <div class="searchBar vertical-center !mr-0">
+        <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 storage..."
+          auto-focus
+          ng-model-options="{ debounce: 300 }"
+        />
+      </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">
+        <div 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>
+          <span uib-dropdown-toggle aria-label="Settings">
+            <pr-icon icon="'more-vertical'" feather="true" class-name="'!mr-0 !h-4'"></pr-icon>
+          </span>
           <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
             <div class="tableMenu">
               <div class="menuHeader"> Table settings </div>
@@ -25,7 +42,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>
@@ -35,43 +52,37 @@
               </div>
             </div>
           </div>
-          </span>
         </div>
       </div>
-      <div class="searchBar">
+    </div>
-        <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 style="width: 20px">
+          <th class="datatable-wide dropdown" ng-if="$ctrl.hasExpandableItems()">
-                <a ng-click="$ctrl.expandAll()" ng-if="$ctrl.hasExpandableItems()">
+            <div class="cursor-pointer vertical-center" ng-click="$ctrl.expandAll()">
-                  <i ng-class="{ 'fas fa-angle-down': $ctrl.state.expandAll, 'fas fa-angle-right': !$ctrl.state.expandAll }" aria-hidden="true"></i>
+              <pr-icon ng-if="$ctrl.state.expandAll" icon="'chevron-down'" feather="true"></pr-icon>
-                </a>
+              <pr-icon ng-if="!$ctrl.state.expandAll" icon="'chevron-right'" feather="true"></pr-icon>
+            </div>
           </th>
           <th style="width: 60%">
-                <a ng-click="$ctrl.changeOrderBy('Name')">
+            <table-column-header
-                  Storage
+              col-title="'Storage'"
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i>
+              can-sort="true"
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i>
+              is-sorted="$ctrl.state.orderBy === 'Name'"
-                </a>
+              is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
+              ng-click="$ctrl.changeOrderBy('Name')"
+            ></table-column-header>
           </th>
           <th style="width: 38%">
-                <a ng-click="$ctrl.changeOrderBy('Size')">
+            <table-column-header
-                  Usage
+              col-title="'Usage'"
-                  <i class="fa fa-sort-numeric-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Size' && !$ctrl.state.reverseOrder"></i>
+              can-sort="true"
-                  <i class="fa fa-sort-numeric-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Size' && $ctrl.state.reverseOrder"></i>
+              is-sorted="$ctrl.state.orderBy === 'Size'"
-                </a>
+              is-sorted-desc="$ctrl.state.orderBy === 'Size' && $ctrl.state.reverseOrder"
+              ng-click="$ctrl.changeOrderBy('Size')"
+            ></table-column-header>
           </th>
         </tr>
       </thead>
@@ -82,10 +93,11 @@
           ng-click="$ctrl.expandItem(item, !item.Expanded)"
           pagination-id="$ctrl.tableKey"
         >
-              <td>
+          <td ng-if="$ctrl.hasExpandableItems()">
-                <a ng-if="$ctrl.itemCanExpand(item)">
+            <div ng-if="$ctrl.itemCanExpand(item)" class="vertical-center">
-                  <i ng-class="{ 'fas fa-angle-down': item.Expanded, 'fas fa-angle-right': !item.Expanded }" class="space-right" aria-hidden="true"></i>
+              <pr-icon ng-if="item.Expanded" icon="'chevron-down'" feather="true"></pr-icon>
-                </a>
+              <pr-icon ng-if="!item.Expanded" icon="'chevron-right'" feather="true"></pr-icon>
+            </div>
           </td>
           <td>{{ item.Name }}</td>
           <td>{{ item.Size }}</td>
@@ -115,8 +127,8 @@
       </tbody>
     </table>
   </div>
-      <div class="footer" ng-if="$ctrl.dataset">
+  <div class="footer pl-5" ng-if="$ctrl.dataset">
-        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
+    <div class="infoBar !ml-0" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
     <div class="paginationControls">
       <form class="form-inline">
         <span class="limitSelector">
@@ -133,6 +145,4 @@
       </form>
     </div>
   </div>
-    </rd-widget-body>
-  </rd-widget>
 </div>

app/kubernetes/views/volumes/volumes.html

@@ -9,7 +9,10 @@
         <rd-widget-body classes="no-padding">
           <uib-tabset active="ctrl.state.activeTab" justified="true" type="pills">
             <uib-tab index="0" classes="btn-sm" select="ctrl.selectTab(0)">
-              <uib-tab-heading> <i class="fa fa-database space-right" aria-hidden="true"></i> Volumes</uib-tab-heading>
+              <uib-tab-heading class="vertical-center">
+                <pr-icon icon="'database'" feather="true"></pr-icon>
+                Volumes
+              </uib-tab-heading>
               <kubernetes-volumes-datatable
                 dataset="ctrl.volumes"
                 table-key="kubernetes.volumes"
@@ -21,7 +24,10 @@
               </kubernetes-volumes-datatable>
             </uib-tab>
             <uib-tab index="1" classes="btn-sm" select="ctrl.selectTab(1)">
-              <uib-tab-heading> <i class="fa fa-hdd space-right" aria-hidden="true"></i> Storage</uib-tab-heading>
+              <uib-tab-heading class="vertical-center">
+                <pr-icon icon="'hard-drive'" feather="true"></pr-icon>
+                Storage
+              </uib-tab-heading>
               <kubernetes-volumes-storages-datatable dataset="ctrl.storages" table-key="kubernetes.volumes.storages" order-by="Name" refresh-callback="ctrl.getVolumes">
               </kubernetes-volumes-storages-datatable>
             </uib-tab>