feat(docker/stacks): introduce date info for stacks (#4660)

* feat(docker/stacks): add creation and update dates

* feat(docker/stacks): put ownership column as the last column

* feat(docker/stacks): fix the no stacks message

* refactor(docker/stacks): make external stacks helpers more readable

* feat(docker/stacks): add updated and created by

* feat(docker/stacks): toggle updated column

* refactor(datatable): create column visibility component

Co-authored-by: alice groux <alice.grx@gmail.com>

app/portainer/components/datatables/datatable-columns-visibility/datatable-columns-visibility.controller.js

@@ -0,0 +1,7 @@
+export default class DatatableColumnsVisibilityController {
+  constructor() {
+    this.state = {
+      isOpen: false,
+    };
+  }
+}

app/portainer/components/datatables/datatable-columns-visibility/datatable-columns-visibility.html

@@ -0,0 +1,19 @@
+<span class="setting" ng-class="{ 'setting-active': $ctrl.state.isOpen }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.state.isOpen">
+  <span uib-dropdown-toggle><i class="fa fa-columns space-right" aria-hidden="true"></i>Columns</span>
+  <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
+    <div class="tableMenu">
+      <div class="menuHeader">
+        Show / Hide Columns
+      </div>
+      <div class="menuContent">
+        <div class="md-checkbox" ng-repeat="(key, value) in $ctrl.columns">
+          <input id="col_vis_{{::key}}" ng-change="$ctrl.onChange($ctrl.columns)" type="checkbox" ng-model="value.display" />
+          <label for="col_vis_{{::key}}">{{ value.label }}</label>
+        </div>
+      </div>
+      <div>
+        <a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.state.isOpen = false;">Close</a>
+      </div>
+    </div>
+  </div>
+</span>

app/portainer/components/datatables/datatable-columns-visibility/index.js

@@ -0,0 +1,12 @@
+import angular from 'angular';
+
+import controller from './datatable-columns-visibility.controller';
+
+angular.module('portainer.app').component('datatableColumnsVisibility', {
+  templateUrl: './datatable-columns-visibility.html',
+  controller,
+  bindings: {
+    columns: '<',
+    onChange: '<',
+  },
+});

app/portainer/components/datatables/genericDatatableController.js

@@ -33,6 +33,7 @@ angular.module('portainer.app').controller('GenericDatatableController', [
         refreshRate: '30',
       },
     };
+
     this.resetSelectionState = function () {
       this.state.selectAll = false;
       this.state.selectedItems = [];
@@ -158,6 +159,11 @@ angular.module('portainer.app').controller('GenericDatatableController', [
         this.settings.open = false;
       }
       this.onSettingsRepeaterChange();
+
+      var storedColumnVisibility = DatatableService.getColumnVisibilitySettings(this.tableKey);
+      if (storedColumnVisibility !== null) {
+        this.columnVisibility = storedColumnVisibility;
+      }
     };
 
     /**

app/portainer/components/datatables/stacks-datatable/stacksDatatable.html

@@ -4,6 +4,7 @@
       <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">
+          <datatable-columns-visibility columns="$ctrl.columnVisibility.columns" on-change="($ctrl.onColumnVisibilityChange)"></datatable-columns-visibility>
           <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> Settings</span>
             <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
@@ -117,6 +118,20 @@
                 </a>
               </th>
               <th>Control</th>
+              <th>
+                <a ng-click="$ctrl.changeOrderBy('ResourceControl.CreationDate')">
+                  Created
+                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.CreationDate' && !$ctrl.state.reverseOrder"></i>
+                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.CreationDate' && $ctrl.state.reverseOrder"></i>
+                </a>
+              </th>
+              <th ng-if="$ctrl.columnVisibility.columns.updated.display">
+                <a ng-click="$ctrl.changeOrderBy('ResourceControl.UpdateDate')">
+                  Updated
+                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.UpdateDate' && !$ctrl.state.reverseOrder"></i>
+                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.UpdateDate' && $ctrl.state.reverseOrder"></i>
+                </a>
+              </th>
               <th>
                 <a ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')">
                   Ownership
@@ -154,6 +169,14 @@
                 </span>
                 <span ng-if="!item.External">Total</span>
               </td>
+              <td>
+                <span ng-if="item.CreationDate">{{ item.CreationDate | getisodatefromtimestamp }} {{ item.CreatedBy ? 'by ' + item.CreatedBy : '' }}</span>
+                <span ng-if="!item.CreationDate"> - </span>
+              </td>
+              <td ng-if="$ctrl.columnVisibility.columns.updated.display">
+                <span ng-if="item.UpdateDate">{{ item.UpdateDate | getisodatefromtimestamp }} {{ item.UpdatedBy ? 'by ' + item.UpdatedBy : '' }}</span>
+                <span ng-if="!item.UpdateDate"> - </span>
+              </td>
               <td>
                 <span>
                   <i ng-class="item.ResourceControl.Ownership | ownershipicon" aria-hidden="true"></i>
@@ -162,10 +185,10 @@
               </td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="4" 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="4" class="text-center text-muted">No stack available.</td>
+              <td colspan="6" class="text-center text-muted">No stack available.</td>
             </tr>
           </tbody>
         </table>

app/portainer/components/datatables/stacks-datatable/stacksDatatableController.js

@@ -15,6 +15,24 @@ angular.module('portainer.app').controller('StacksDatatableController', [
       },
     };
 
+    this.columnVisibility = {
+      state: {
+        open: false,
+      },
+      columns: {
+        updated: {
+          label: 'Updated',
+          display: false,
+        },
+      },
+    };
+
+    this.onColumnVisibilityChange = onColumnVisibilityChange.bind(this);
+    function onColumnVisibilityChange(columns) {
+      this.columnVisibility.columns = columns;
+      DatatableService.setColumnVisibilitySettings(this.tableKey, this.columnVisibility);
+    }
+
     /**
      * Do not allow external items
      */
@@ -71,6 +89,11 @@ angular.module('portainer.app').controller('StacksDatatableController', [
         this.settings.open = false;
       }
       this.onSettingsRepeaterChange();
+
+      var storedColumnVisibility = DatatableService.getColumnVisibilitySettings(this.tableKey);
+      if (storedColumnVisibility !== null) {
+        this.columnVisibility = storedColumnVisibility;
+      }
     };
   },
 ]);

app/portainer/helpers/stackHelper.js

@@ -1,37 +1,27 @@
 import _ from 'lodash-es';
 
+import { ExternalStackViewModel } from '@/portainer/models/stack';
+
 angular.module('portainer.app').factory('StackHelper', [
   function StackHelperFactory() {
     'use strict';
     var helper = {};
 
-    helper.getExternalStackNamesFromContainers = function (containers) {
-      var stackNames = [];
-
-      for (var i = 0; i < containers.length; i++) {
-        var container = containers[i];
-        if (!container.Labels || !container.Labels['com.docker.compose.project']) continue;
-        var stackName = container.Labels['com.docker.compose.project'];
-        stackNames.push(stackName);
-      }
-
-      return _.uniq(stackNames);
+    helper.getExternalStacksFromContainers = function (containers) {
+      return getExternalStacksFromLabel(containers, 'com.docker.compose.project', 2);
     };
 
-    helper.getExternalStackNamesFromServices = function (services) {
-      var stackNames = [];
-
-      for (var i = 0; i < services.length; i++) {
-        var service = services[i];
-        if (!service.Labels || !service.Labels['com.docker.stack.namespace']) continue;
-
-        var stackName = service.Labels['com.docker.stack.namespace'];
-        stackNames.push(stackName);
-      }
-
-      return _.uniq(stackNames);
+    helper.getExternalStacksFromServices = function (services) {
+      return getExternalStacksFromLabel(services, 'com.docker.stack.namespace', 1);
     };
 
+    function getExternalStacksFromLabel(items, label, type) {
+      return _.uniqBy(
+        items.filter((item) => item.Labels && item.Labels[label]).map((item) => new ExternalStackViewModel(item.Labels[label], type, item.Created)),
+        'Name'
+      );
+    }
+
     return helper;
   },
 ]);

app/portainer/models/stack.js

@@ -13,11 +13,16 @@ export function StackViewModel(data) {
   }
   this.External = false;
   this.Status = data.Status;
+  this.CreationDate = data.CreationDate;
+  this.CreatedBy = data.CreatedBy;
+  this.UpdateDate = data.UpdateDate;
+  this.UpdatedBy = data.UpdatedBy;
 }
 
-export function ExternalStackViewModel(name, type) {
+export function ExternalStackViewModel(name, type, creationDate) {
   this.Name = name;
   this.Type = type;
   this.External = true;
   this.Checked = false;
+  this.CreationDate = creationDate;
 }

app/portainer/services/api/stackService.js

@@ -1,5 +1,5 @@
 import _ from 'lodash-es';
-import { ExternalStackViewModel, StackViewModel } from '../../models/stack';
+import { StackViewModel } from '../../models/stack';
 
 angular.module('portainer.app').factory('StackService', [
   '$q',
@@ -121,13 +121,8 @@ angular.module('portainer.app').factory('StackService', [
       var deferred = $q.defer();
 
       ServiceService.services()
-        .then(function success(data) {
-          var services = data;
-          var stackNames = StackHelper.getExternalStackNamesFromServices(services);
-          var stacks = stackNames.map(function (name) {
-            return new ExternalStackViewModel(name, 1);
-          });
-          deferred.resolve(stacks);
+        .then(function success(services) {
+          deferred.resolve(StackHelper.getExternalStacksFromServices(services));
         })
         .catch(function error(err) {
           deferred.reject({ msg: 'Unable to retrieve external stacks', err: err });
@@ -140,13 +135,8 @@ angular.module('portainer.app').factory('StackService', [
       var deferred = $q.defer();
 
       ContainerService.containers(1)
-        .then(function success(data) {
-          var containers = data;
-          var stackNames = StackHelper.getExternalStackNamesFromContainers(containers);
-          var stacks = stackNames.map(function (name) {
-            return new ExternalStackViewModel(name, 2);
-          });
-          deferred.resolve(stacks);
+        .then(function success(containers) {
+          deferred.resolve(StackHelper.getExternalStacksFromContainers(containers));
         })
         .catch(function error(err) {
           deferred.reject({ msg: 'Unable to retrieve external stacks', err: err });