From 50020dae893bc59c0bddd2eb9a1175fa6f7681f3 Mon Sep 17 00:00:00 2001 From: Parag Jayant Datar Date: Thu, 5 Jul 2018 01:24:53 -0600 Subject: [PATCH] feat(containers): add column visibility dropdown in containers view (#1977) --- .../containersDatatable.html | 93 +++++++++++++++---- .../containersDatatableController.js | 54 +++++++++++ app/docker/models/container.js | 1 + app/portainer/services/datatableService.js | 8 ++ app/portainer/services/localStorage.js | 6 ++ 5 files changed, 146 insertions(+), 16 deletions(-) diff --git a/app/docker/components/datatables/containers-datatable/containersDatatable.html b/app/docker/components/datatables/containers-datatable/containersDatatable.html index cfaae7d8c..20e25cbb5 100644 --- a/app/docker/components/datatables/containers-datatable/containersDatatable.html +++ b/app/docker/components/datatables/containers-datatable/containersDatatable.html @@ -9,6 +9,57 @@ Search + + Columns +
+
+
+ Show / Hide Columns +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ Close +
+
+
+ Settings
@@ -78,7 +129,7 @@ - + State @@ -105,45 +156,52 @@
- + Quick actions - + Stack - + Image - + + + + + Created + + + IP Address - + Host - + Published Ports - + Ownership @@ -161,11 +219,11 @@ {{ item | containername | truncate: $ctrl.settings.containerNameTruncateSize }} - + {{ item.Status }} {{ item.Status }} - +
@@ -173,17 +231,20 @@
- {{ item.StackName ? item.StackName : '-' }} - {{ item.Image | trimshasum }} - {{ item.IP ? item.IP : '-' }} - {{ item.NodeName ? item.NodeName : '-' }} - + {{ item.StackName ? item.StackName : '-' }} + {{ item.Image | trimshasum }} + + {{item.Created | getisodatefromtimestamp}} + + {{ item.IP ? item.IP : '-' }} + {{ item.NodeName ? item.NodeName : '-' }} + {{ p.public }}:{{ p.private }} - - + {{ item.ResourceControl.Ownership ? item.ResourceControl.Ownership : item.ResourceControl.Ownership = 'public' }} diff --git a/app/docker/components/datatables/containers-datatable/containersDatatableController.js b/app/docker/components/datatables/containers-datatable/containersDatatableController.js index fe97f901a..d8b2ef00e 100644 --- a/app/docker/components/datatables/containers-datatable/containersDatatableController.js +++ b/app/docker/components/datatables/containers-datatable/containersDatatableController.js @@ -34,6 +34,54 @@ function (PaginationService, DatatableService, EndpointProvider) { } }; + this.columnVisibility = { + state: { + open: false + }, + columns: { + state: { + label: 'State', + display: true + }, + actions: { + label: 'Quick Actions', + display: true + }, + stack: { + label: 'Stack', + display: true + }, + image: { + label: 'Image', + display: true + }, + created: { + label: 'Created', + display: true + }, + ip: { + label: 'IP Address', + display: true + }, + host: { + label: 'Host', + display: true + }, + ports: { + label: 'Published Ports', + display: true + }, + ownership: { + label: 'Ownership', + display: true + } + } + }; + + this.onColumnVisibilityChange = function() { + DatatableService.setColumnVisibilitySettings(this.tableKey, this.columnVisibility); + }; + this.changeOrderBy = function(orderField) { this.state.reverseOrder = this.state.orderBy === orderField ? !this.state.reverseOrder : false; this.state.orderBy = orderField; @@ -181,6 +229,12 @@ function (PaginationService, DatatableService, EndpointProvider) { this.settings = storedSettings; } this.settings.open = false; + + var storedColumnVisibility = DatatableService.getColumnVisibilitySettings(this.tableKey); + if (storedColumnVisibility !== null) { + this.columnVisibility = storedColumnVisibility; + } + this.columnVisibility.state.open = false; }; function setDefaults(ctrl) { diff --git a/app/docker/models/container.js b/app/docker/models/container.js index 1c1130456..015223ad8 100644 --- a/app/docker/models/container.js +++ b/app/docker/models/container.js @@ -23,6 +23,7 @@ function ContainerViewModel(data) { this.Id = data.Id; this.Status = createStatus(data.Status); this.State = data.State; + this.Created = data.Created; this.Names = data.Names; // Unavailable in Docker < 1.10 if (data.NetworkSettings && !_.isEmpty(data.NetworkSettings.Networks)) { diff --git a/app/portainer/services/datatableService.js b/app/portainer/services/datatableService.js index 7809c4b1a..2842c948d 100644 --- a/app/portainer/services/datatableService.js +++ b/app/portainer/services/datatableService.js @@ -37,6 +37,10 @@ function DatatableServiceFactory(LocalStorage) { LocalStorage.storeDataTableExpandedItems(key, expandedItems); }; + service.setColumnVisibilitySettings = function(key, columnVisibility) { + LocalStorage.storeColumnVisibilitySettings(key, columnVisibility); + }; + service.getDataTableExpandedItems = function(key) { return LocalStorage.getDataTableExpandedItems(key); }; @@ -49,5 +53,9 @@ function DatatableServiceFactory(LocalStorage) { return LocalStorage.getDataTableSelectedItems(key); }; + service.getColumnVisibilitySettings = function(key) { + return LocalStorage.getColumnVisibilitySettings(key); + }; + return service; }]); diff --git a/app/portainer/services/localStorage.js b/app/portainer/services/localStorage.js index c94e0cadc..cb1dadceb 100644 --- a/app/portainer/services/localStorage.js +++ b/app/portainer/services/localStorage.js @@ -77,6 +77,12 @@ angular.module('portainer.app') getSwarmVisualizerSettings: function(key) { return localStorageService.get('swarmvisualizer_' + key); }, + storeColumnVisibilitySettings: function(key, data) { + localStorageService.set('col_visibility_' + key, data); + }, + getColumnVisibilitySettings: function(key) { + return localStorageService.get('col_visibility_' + key); + }, clean: function() { localStorageService.clearAll(); }