feat(k8s/volumes): introduce storage rollup panel (#4055)

* feat(k8s/applications): storages rollup panel

* feat(k8s/volumes): move storages table to volumes view

* feat(k8s/volumes): minor UI update

* feat(k8s/volumes): remember the selected tab

* feat(api/k8s): update user default policies

* feat(k8s/ui): minor UI update

Co-authored-by: Anthony Lapenna <lapenna.anthony@gmail.com>

api/kubernetes/cli/role.go

@@ -13,6 +13,11 @@ func getPortainerUserDefaultPolicies() []rbacv1.PolicyRule {
 			Resources: []string{"namespaces", "nodes"},
 			APIGroups: []string{""},
 		},
+		{
+			Verbs:     []string{"list"},
+			Resources: []string{"storageclasses"},
+			APIGroups: []string{"storage.k8s.io"},
+		},
 	}
 }
 

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

@@ -168,10 +168,10 @@
               <td>{{ item.CreationDate | getisodate }} {{ item.ApplicationOwner ? 'by ' + item.ApplicationOwner : '' }}</td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="7" class="text-center text-muted">Loading...</td>
+              <td colspan="8" class="text-center text-muted">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="7" class="text-center text-muted">No application available.</td>
+              <td colspan="8" class="text-center text-muted">No application available.</td>
             </tr>
           </tbody>
         </table>

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

@@ -159,10 +159,10 @@
               </td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="5" class="text-center text-muted">Loading...</td>
+              <td colspan="6" class="text-center text-muted">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="5" class="text-center text-muted">No volume available.</td>
+              <td colspan="6" class="text-center text-muted">No volume available.</td>
             </tr>
           </tbody>
         </table>

app/kubernetes/converters/persistentVolumeClaim.js

@@ -12,7 +12,7 @@ class KubernetesPersistentVolumeClaimConverter {
     res.Name = data.metadata.name;
     res.Namespace = data.metadata.namespace;
     res.CreationDate = data.metadata.creationTimestamp;
-    res.Storage = data.spec.resources.requests.storage.replace('i', '') + 'B';
+    res.Storage = data.spec.resources.requests.storage.replace('i', 'B');
     res.StorageClass = _.find(storageClasses, { Name: data.spec.storageClassName });
     res.Yaml = yaml ? yaml.data : '';
     res.ApplicationOwner = data.metadata.labels ? data.metadata.labels[KubernetesPortainerApplicationOwnerLabel] : '';

app/kubernetes/views/applications/applications.js

@@ -2,4 +2,7 @@ angular.module('portainer.kubernetes').component('kubernetesApplicationsView', {
   templateUrl: './applications.html',
   controller: 'KubernetesApplicationsController',
   controllerAs: 'ctrl',
+  bindings: {
+    $transition$: '<',
+  },
 });

app/kubernetes/views/applications/applicationsController.js

@@ -1,5 +1,5 @@
 import angular from 'angular';
-import _ from 'lodash-es';
+import * as _ from 'lodash-es';
 import KubernetesStackHelper from 'Kubernetes/helpers/stackHelper';
 import KubernetesApplicationHelper from 'Kubernetes/helpers/application';
 
@@ -10,6 +10,7 @@ class KubernetesApplicationsController {
     this.$state = $state;
     this.Notifications = Notifications;
     this.KubernetesApplicationService = KubernetesApplicationService;
+
     this.Authentication = Authentication;
     this.ModalService = ModalService;
     this.LocalStorage = LocalStorage;
@@ -95,9 +96,10 @@ class KubernetesApplicationsController {
 
   async getApplicationsAsync() {
     try {
-      this.applications = await this.KubernetesApplicationService.get();
-      this.stacks = KubernetesStackHelper.stacksFromApplications(this.applications);
-      this.ports = KubernetesApplicationHelper.portMappingsFromApplications(this.applications);
+      const applications = await this.KubernetesApplicationService.get();
+      this.applications = applications;
+      this.stacks = KubernetesStackHelper.stacksFromApplications(applications);
+      this.ports = KubernetesApplicationHelper.portMappingsFromApplications(applications);
     } catch (err) {
       this.Notifications.error('Failure', err, 'Unable to retrieve applications');
     }
@@ -109,14 +111,12 @@ class KubernetesApplicationsController {
 
   async onInit() {
     this.state = {
-      activeTab: 0,
+      activeTab: this.LocalStorage.getActiveTab('applications'),
       currentName: this.$state.$current.name,
       isAdmin: this.Authentication.isAdmin(),
       viewReady: false,
     };
 
-    this.state.activeTab = this.LocalStorage.getActiveTab('applications');
-
     await this.getApplications();
 
     this.state.viewReady = true;

app/kubernetes/views/volumes/components/volumes-storages-datatable/controller.js

@@ -0,0 +1,79 @@
+import _ from 'lodash-es';
+
+angular.module('portainer.kubernetes').controller('KubernetesVolumesStoragesDatatableController', [
+  '$scope',
+  '$controller',
+  'DatatableService',
+  function ($scope, $controller, DatatableService) {
+    angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
+    this.state = Object.assign(this.state, {
+      expandedItems: [],
+      expandAll: false,
+    });
+
+    this.onSettingsRepeaterChange = function () {
+      DatatableService.setDataTableSettings(this.tableKey, this.settings);
+    };
+
+    this.expandItem = function (item, expanded) {
+      if (!this.itemCanExpand(item)) {
+        return;
+      }
+
+      item.Expanded = expanded;
+      if (!expanded) {
+        item.Highlighted = false;
+      }
+    };
+
+    this.itemCanExpand = function (item) {
+      return item.Volumes.length > 0;
+    };
+
+    this.hasExpandableItems = function () {
+      return _.filter(this.state.filteredDataSet, (item) => this.itemCanExpand(item)).length;
+    };
+
+    this.expandAll = function () {
+      this.state.expandAll = !this.state.expandAll;
+      _.forEach(this.state.filteredDataSet, (item) => {
+        if (this.itemCanExpand(item)) {
+          this.expandItem(item, this.state.expandAll);
+        }
+      });
+    };
+
+    this.$onInit = function () {
+      this.setDefaults();
+      this.prepareTableFromDataset();
+
+      this.state.orderBy = this.orderBy;
+      var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
+      if (storedOrder !== null) {
+        this.state.reverseOrder = storedOrder.reverse;
+        this.state.orderBy = storedOrder.orderBy;
+      }
+
+      var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
+      if (textFilter !== null) {
+        this.state.textFilter = textFilter;
+        this.onTextFilterChange();
+      }
+
+      var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
+      if (storedFilters !== null) {
+        this.filters = storedFilters;
+      }
+      if (this.filters && this.filters.state) {
+        this.filters.state.open = false;
+      }
+
+      var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
+      if (storedSettings !== null) {
+        this.settings = storedSettings;
+        this.settings.open = false;
+      }
+      this.onSettingsRepeaterChange();
+    };
+  },
+]);

app/kubernetes/views/volumes/components/volumes-storages-datatable/index.js

@@ -0,0 +1,13 @@
+angular.module('portainer.kubernetes').component('kubernetesVolumesStoragesDatatable', {
+  templateUrl: './template.html',
+  controller: 'KubernetesVolumesStoragesDatatableController',
+  bindings: {
+    titleText: '@',
+    titleIcon: '@',
+    dataset: '<',
+    tableKey: '@',
+    orderBy: '@',
+    reverseOrder: '<',
+    refreshCallback: '<',
+  },
+});

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

@@ -0,0 +1,139 @@
+<div class="datatable">
+  <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="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="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
+              <div class="tableMenu">
+                <div class="menuHeader">
+                  Table settings
+                </div>
+                <div class="menuContent">
+                  <div>
+                    <div class="md-checkbox">
+                      <input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()" />
+                      <label for="setting_auto_refresh">Auto refresh</label>
+                    </div>
+                    <div ng-if="$ctrl.settings.repeater.autoRefresh">
+                      <label for="settings_refresh_rate">
+                        Refresh rate
+                      </label>
+                      <select id="settings_refresh_rate" ng-model="$ctrl.settings.repeater.refreshRate" ng-change="$ctrl.onSettingsRepeaterChange()" class="small-select">
+                        <option value="10">10s</option>
+                        <option value="30">30s</option>
+                        <option value="60">1min</option>
+                        <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>
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.settings.open = false;">Close</a>
+                </div>
+              </div>
+            </div>
+          </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 style="width: 10%;">
+                <a ng-click="$ctrl.expandAll()" ng-if="$ctrl.hasExpandableItems()">
+                  <i ng-class="{ 'fas fa-angle-down': $ctrl.state.expandAll, 'fas fa-angle-right': !$ctrl.state.expandAll }" aria-hidden="true"></i>
+                </a>
+              </th>
+              <th style="width: 55%;">
+                <a ng-click="$ctrl.changeOrderBy('Name')">
+                  Storage
+                  <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>
+              </th>
+              <th style="width: 35%;">
+                <a ng-click="$ctrl.changeOrderBy('Size')">
+                  Usage
+                  <i class="fa fa-sort-numeric-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Size' && !$ctrl.state.reverseOrder"></i>
+                  <i class="fa fa-sort-numeric-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Size' && $ctrl.state.reverseOrder"></i>
+                </a>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              dir-paginate-start="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit: $ctrl.tableKey))"
+              ng-class="{ active: item.Checked }"
+              ng-style="{ background: item.Highlighted ? '#d5e8f3' : '' }"
+              ng-click="$ctrl.expandItem(item, !item.Expanded)"
+              pagination-id="$ctrl.tableKey"
+            >
+              <td>
+                <a ng-if="$ctrl.itemCanExpand(item)">
+                  <i ng-class="{ 'fas fa-angle-down': item.Expanded, 'fas fa-angle-right': !item.Expanded }" class="space-right" aria-hidden="true"></i>
+                </a>
+              </td>
+              <td>{{ item.Name }}</td>
+              <td>{{ item.Size }}</td>
+            </tr>
+            <tr dir-paginate-end ng-show="item.Expanded" ng-repeat="vol in item.Volumes" ng-style="{ background: item.Highlighted ? '#d5e8f3' : '#f5f5f5' }">
+              <td colspan="2">
+                <a ui-sref="kubernetes.volumes.volume({ name: vol.PersistentVolumeClaim.Name, namespace: vol.PersistentVolumeClaim.Namespace })" style="margin-left: 25px;">
+                  {{ vol.PersistentVolumeClaim.Name }}
+                </a>
+              </td>
+              <td>
+                {{ vol.PersistentVolumeClaim.Storage }}
+              </td>
+            </tr>
+            <tr ng-if="!$ctrl.dataset">
+              <td colspan="5" class="text-center text-muted">Loading...</td>
+            </tr>
+            <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
+              <td colspan="5" class="text-center text-muted">No storage available.</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="footer" ng-if="$ctrl.dataset">
+        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
+        <div class="paginationControls">
+          <form class="form-inline">
+            <span class="limitSelector">
+              <span style="margin-right: 5px;">
+                Items per page
+              </span>
+              <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()">
+                <option value="0">All</option>
+                <option value="10">10</option>
+                <option value="25">25</option>
+                <option value="50">50</option>
+                <option value="100">100</option>
+              </select>
+            </span>
+            <dir-pagination-controls max-size="5" pagination-id="$ctrl.tableKey"></dir-pagination-controls>
+          </form>
+        </div>
+      </div>
+    </rd-widget-body>
+  </rd-widget>
+</div>

app/kubernetes/views/volumes/volumes.html

@@ -7,14 +7,28 @@
 <div ng-if="ctrl.state.viewReady">
   <div class="row">
     <div class="col-sm-12">
-      <kubernetes-volumes-datatable
-        dataset="ctrl.volumes"
-        table-key="kubernetes.volumes"
-        order-by="PersistentVolumeClaim.Name"
-        remove-action="ctrl.removeAction"
-        refresh-callback="ctrl.getVolumes"
-      >
-      </kubernetes-volumes-datatable>
+      <rd-widget>
+        <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>
+              <kubernetes-volumes-datatable
+                dataset="ctrl.volumes"
+                table-key="kubernetes.volumes"
+                order-by="PersistentVolumeClaim.Name"
+                remove-action="ctrl.removeAction"
+                refresh-callback="ctrl.getVolumes"
+              >
+              </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>
+              <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>
+          </uib-tabset>
+        </rd-widget-body>
+      </rd-widget>
     </div>
   </div>
 </div>

app/kubernetes/views/volumes/volumes.js

@@ -2,4 +2,7 @@ angular.module('portainer.kubernetes').component('kubernetesVolumesView', {
   templateUrl: './volumes.html',
   controller: 'KubernetesVolumesController',
   controllerAs: 'ctrl',
+  bindings: {
+    $transition$: '<',
+  },
 });

app/kubernetes/views/volumes/volumesController.js

@@ -1,14 +1,52 @@
-import _ from 'lodash-es';
+import * as _ from 'lodash-es';
+import filesizeParser from 'filesize-parser';
 import angular from 'angular';
 import KubernetesVolumeHelper from 'Kubernetes/helpers/volumeHelper';
 
+function buildStorages(storages, volumes) {
+  _.forEach(storages, (s) => {
+    const filteredVolumes = _.filter(volumes, ['PersistentVolumeClaim.StorageClass.Name', s.Name, 'PersistentVolumeClaim.StorageClass.Provisioner', s.Provisioner]);
+    s.Volumes = filteredVolumes;
+    s.Size = computeSize(filteredVolumes);
+  });
+  return storages;
+}
+
+function computeSize(volumes) {
+  let hasT,
+    hasG,
+    hasM = false;
+  const size = _.sumBy(volumes, (v) => {
+    const storage = v.PersistentVolumeClaim.Storage;
+    if (!hasT && _.endsWith(storage, 'TB')) {
+      hasT = true;
+    } else if (!hasG && _.endsWith(storage, 'GB')) {
+      hasG = true;
+    } else if (!hasM && _.endsWith(storage, 'MB')) {
+      hasM = true;
+    }
+    return filesizeParser(storage, { base: 10 });
+  });
+  if (hasT) {
+    return size / 1000 / 1000 / 1000 / 1000 + 'TB';
+  } else if (hasG) {
+    return size / 1000 / 1000 / 1000 + 'GB';
+  } else if (hasM) {
+    return size / 1000 / 1000 + 'MB';
+  }
+  return size;
+}
+
 class KubernetesVolumesController {
   /* @ngInject */
-  constructor($async, $state, Notifications, ModalService, KubernetesVolumeService, KubernetesApplicationService) {
+  constructor($async, $state, Notifications, ModalService, LocalStorage, EndpointProvider, KubernetesStorageService, KubernetesVolumeService, KubernetesApplicationService) {
     this.$async = $async;
     this.$state = $state;
     this.Notifications = Notifications;
     this.ModalService = ModalService;
+    this.LocalStorage = LocalStorage;
+    this.EndpointProvider = EndpointProvider;
+    this.KubernetesStorageService = KubernetesStorageService;
     this.KubernetesVolumeService = KubernetesVolumeService;
     this.KubernetesApplicationService = KubernetesApplicationService;
 
@@ -19,6 +57,10 @@ class KubernetesVolumesController {
     this.removeActionAsync = this.removeActionAsync.bind(this);
   }
 
+  selectTab(index) {
+    this.LocalStorage.storeActiveTab('volumes', index);
+  }
+
   async removeActionAsync(selectedItems) {
     let actionCount = selectedItems.length;
     for (const volume of selectedItems) {
@@ -48,12 +90,17 @@ class KubernetesVolumesController {
 
   async getVolumesAsync() {
     try {
-      const [volumes, applications] = await Promise.all([this.KubernetesVolumeService.get(), this.KubernetesApplicationService.get()]);
+      const [volumes, applications, storages] = await Promise.all([
+        this.KubernetesVolumeService.get(),
+        this.KubernetesApplicationService.get(),
+        this.KubernetesStorageService.get(this.state.endpointId),
+      ]);
 
       this.volumes = _.map(volumes, (volume) => {
         volume.Applications = KubernetesVolumeHelper.getUsingApplications(volume, applications);
         return volume;
       });
+      this.storages = buildStorages(storages, volumes);
     } catch (err) {
       this.Notifications.error('Failure', err, 'Unable to retreive resource pools');
     }
@@ -66,6 +113,10 @@ class KubernetesVolumesController {
   async onInit() {
     this.state = {
       viewReady: false,
+      // endpointId: this.$transition$.params().endpointId, // TODO: use this when moving to endpointID in URL
+      currentName: this.$state.$current.name,
+      endpointId: this.EndpointProvider.endpointID(),
+      activeTab: this.LocalStorage.getActiveTab('volumes'),
     };
 
     await this.getVolumes();
@@ -76,6 +127,12 @@ class KubernetesVolumesController {
   $onInit() {
     return this.$async(this.onInit);
   }
+
+  $onDestroy() {
+    if (this.state.currentName !== this.$state.$current.name) {
+      this.LocalStorage.storeActiveTab('volumes', 0);
+    }
+  }
 }
 
 export default KubernetesVolumesController;