From 68851aada4f174faecd6f88a8747218b2ee50a05 Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chiptus@users.noreply.github.com>
Date: Wed, 19 Aug 2020 02:50:16 +0300
Subject: [PATCH]  fix(containers): persist column settings (#4234)

* feat(containers): remove ip column

* fix(containers): persist column settings
---
 .../containersDatatable.html                  | 63 ++++++++++++++-----
 .../containersDatatableController.js          |  8 +--
 2 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/app/docker/components/datatables/containers-datatable/containersDatatable.html b/app/docker/components/datatables/containers-datatable/containersDatatable.html
index 72e7e4a11..9ba136c4c 100644
--- a/app/docker/components/datatables/containers-datatable/containersDatatable.html
+++ b/app/docker/components/datatables/containers-datatable/containersDatatable.html
@@ -20,48 +20,81 @@
                 </div>
                 <div class="menuContent">
                   <div class="md-checkbox">
-                    <input id="col_vis_state" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.state.display" />
+                    <input
+                      id="col_vis_state"
+                      ng-change="$ctrl.onColumnVisibilityChange($ctrl.columnVisibility)"
+                      type="checkbox"
+                      ng-model="$ctrl.columnVisibility.columns.state.display"
+                    />
                     <label for="col_vis_state" ng-bind="$ctrl.columnVisibility.columns.state.label"></label>
                   </div>
                   <div class="md-checkbox">
-                    <input id="col_vis_actions" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.actions.display" />
+                    <input
+                      id="col_vis_actions"
+                      ng-change="$ctrl.onColumnVisibilityChange($ctrl.columnVisibility)"
+                      type="checkbox"
+                      ng-model="$ctrl.columnVisibility.columns.actions.display"
+                    />
                     <label for="col_vis_actions" ng-bind="$ctrl.columnVisibility.columns.actions.label"></label>
                   </div>
                   <div class="md-checkbox">
-                    <input id="col_vis_stack" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.stack.display" />
+                    <input
+                      id="col_vis_stack"
+                      ng-change="$ctrl.onColumnVisibilityChange($ctrl.columnVisibility)"
+                      type="checkbox"
+                      ng-model="$ctrl.columnVisibility.columns.stack.display"
+                    />
                     <label for="col_vis_stack" ng-bind="$ctrl.columnVisibility.columns.stack.label"></label>
                   </div>
                   <div class="md-checkbox">
-                    <input id="col_vis_image" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.image.display" />
+                    <input
+                      id="col_vis_image"
+                      ng-change="$ctrl.onColumnVisibilityChange($ctrl.columnVisibility)"
+                      type="checkbox"
+                      ng-model="$ctrl.columnVisibility.columns.image.display"
+                    />
                     <label for="col_vis_image" ng-bind="$ctrl.columnVisibility.columns.image.label"></label>
                   </div>
                   <div class="md-checkbox">
-                    <input id="col_vis_created" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.created.display" />
+                    <input
+                      id="col_vis_created"
+                      ng-change="$ctrl.onColumnVisibilityChange($ctrl.columnVisibility)"
+                      type="checkbox"
+                      ng-model="$ctrl.columnVisibility.columns.created.display"
+                    />
                     <label for="col_vis_created" ng-bind="$ctrl.columnVisibility.columns.created.label"></label>
                   </div>
-                  <div class="md-checkbox">
-                    <input id="col_vis_ip" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.ip.display" />
-                    <label for="col_vis_ip" ng-bind="$ctrl.columnVisibility.columns.ip.label"></label>
-                  </div>
                   <div class="md-checkbox" ng-if="$ctrl.showHostColumn">
-                    <input id="col_vis_host" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.host.display" />
+                    <input
+                      id="col_vis_host"
+                      ng-change="$ctrl.onColumnVisibilityChange($ctrl.columnVisibility)"
+                      type="checkbox"
+                      ng-model="$ctrl.columnVisibility.columns.host.display"
+                    />
                     <label for="col_vis_host" ng-bind="$ctrl.columnVisibility.columns.host.label"></label>
                   </div>
                   <div class="md-checkbox">
-                    <input id="col_vis_ports" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.ports.display" />
+                    <input
+                      id="col_vis_ports"
+                      ng-change="$ctrl.onColumnVisibilityChange($ctrl.columnVisibility)"
+                      type="checkbox"
+                      ng-model="$ctrl.columnVisibility.columns.ports.display"
+                    />
                     <label for="col_vis_ports" ng-bind="$ctrl.columnVisibility.columns.ports.label"></label>
                   </div>
                   <div class="md-checkbox">
-                    <input id="col_vis_ownership" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.ownership.display" />
+                    <input
+                      id="col_vis_ownership"
+                      ng-change="$ctrl.onColumnVisibilityChange($ctrl.columnVisibility)"
+                      type="checkbox"
+                      ng-model="$ctrl.columnVisibility.columns.ownership.display"
+                    />
                     <label for="col_vis_ownership" ng-bind="$ctrl.columnVisibility.columns.ownership.label"></label>
                   </div>
                 </div>
                 <div>
                   <a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.columnVisibility.state.open = false;">Close</a>
                 </div>
-                <div>
-                  <a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.columnVisibility.state.open = false;">Close</a>
-                </div>
               </div>
             </div>
           </span>
diff --git a/app/docker/components/datatables/containers-datatable/containersDatatableController.js b/app/docker/components/datatables/containers-datatable/containersDatatableController.js
index aeb098889..cc02ab678 100644
--- a/app/docker/components/datatables/containers-datatable/containersDatatableController.js
+++ b/app/docker/components/datatables/containers-datatable/containersDatatableController.js
@@ -60,10 +60,6 @@ angular.module('portainer.docker').controller('ContainersDatatableController', [
           label: 'Created',
           display: true,
         },
-        ip: {
-          label: 'IP Address',
-          display: true,
-        },
         host: {
           label: 'Host',
           display: true,
@@ -79,8 +75,8 @@ angular.module('portainer.docker').controller('ContainersDatatableController', [
       },
     };
 
-    this.onColumnVisibilityChange = function () {
-      DatatableService.setColumnVisibilitySettings(this.tableKey, this.columnVisibility);
+    this.onColumnVisibilityChange = function (columnVisibility) {
+      DatatableService.setColumnVisibilitySettings(this.tableKey, columnVisibility);
     };
 
     this.onSelectionChanged = function () {