refactor(ui): introduce helpers functions to centralize code

app/app.js

@@ -6,6 +6,7 @@ angular.module('uifordocker', [
   'ngCookies',
   'ngSanitize',
   'uifordocker.services',
+  'uifordocker.helpers',
   'uifordocker.filters',
   'dashboard',
   'container',

app/components/container/containerController.js

@@ -1,6 +1,6 @@
 angular.module('container', [])
-.controller('ContainerController', ['$scope', '$state','$stateParams', '$filter', 'Container', 'ContainerCommit', 'Messages', 'errorMsgFilter',
+.controller('ContainerController', ['$scope', '$state','$stateParams', '$filter', 'Container', 'ContainerCommit', 'ImageHelper', 'Messages', 'errorMsgFilter',
-function ($scope, $state, $stateParams, $filter, Container, ContainerCommit, Messages, errorMsgFilter) {
+function ($scope, $state, $stateParams, $filter, Container, ContainerCommit, ImageHelper, Messages, errorMsgFilter) {
   $scope.activityTime = 0;
   $scope.portBindings = [];
   $scope.config = {
@@ -80,25 +80,11 @@ function ($scope, $state, $stateParams, $filter, Container, ContainerCommit, Mes
     });
   };
 
-  //TODO: centralize createImageConfig (also used in imageController)
-  function createImageConfig(imageName, registry) {
-    var imageNameAndTag = imageName.split(':');
-    var image = imageNameAndTag[0];
-    if (registry) {
-      image = registry + '/' + imageNameAndTag[0];
-    }
-    var imageConfig = {
-      repo: image,
-      tag: imageNameAndTag[1] ? imageNameAndTag[1] : 'latest'
-    };
-    return imageConfig;
-  }
-
   $scope.commit = function () {
     $('#createImageSpinner').show();
     var image = _.toLower($scope.config.Image);
     var registry = _.toLower($scope.config.Registry);
-    var imageConfig = createImageConfig(image, registry);
+    var imageConfig = ImageHelper.createImageConfig(image, registry);
     ContainerCommit.commit({id: $stateParams.id, tag: imageConfig.tag, repo: imageConfig.repo}, function (d) {
       update();
       $('#createImageSpinner').hide();

app/components/containers/containersController.js

@@ -1,6 +1,6 @@
 angular.module('containers', [])
-.controller('ContainersController', ['$scope', 'Container', 'Info', 'Settings', 'Messages', 'Config', 'errorMsgFilter',
+.controller('ContainersController', ['$scope', 'Container', 'ContainerHelper', 'Info', 'Settings', 'Messages', 'Config', 'errorMsgFilter',
-function ($scope, Container, Info, Settings, Messages, Config, errorMsgFilter) {
+function ($scope, Container, ContainerHelper, Info, Settings, Messages, Config, errorMsgFilter) {
 
   $scope.state = {};
   $scope.state.displayAll = Settings.displayAll;
@@ -14,13 +14,13 @@ function ($scope, Container, Info, Settings, Messages, Config, errorMsgFilter) {
     $scope.sortType = sortType;
   };
 
-  var update = function (data) {
+  var update = function (data, containersToHideLabels) {
     $('#loadContainersSpinner').show();
     $scope.state.selectedItemCount = 0;
     Container.query(data, function (d) {
       var containers = d;
-      if (hiddenLabels) {
+      if (containersToHideLabels) {
-        containers = hideContainers(d);
+        containers = ContainerHelper.hideContainers(d, containersToHideLabels);
       }
       $scope.containers = containers.map(function (container) {
         var model = new ContainerViewModel(container);
@@ -142,22 +142,6 @@ function ($scope, Container, Info, Settings, Messages, Config, errorMsgFilter) {
     batch($scope.containers, Container.remove, "Removed");
   };
 
-  // TODO: centralize (already exist in TemplatesController)
-  var hideContainers = function (containers) {
-    return containers.filter(function (container) {
-      var filterContainer = false;
-      hiddenLabels.forEach(function(label, index) {
-        if (_.has(container.Labels, label.name) &&
-        container.Labels[label.name] === label.value) {
-          filterContainer = true;
-        }
-      });
-      if (!filterContainer) {
-        return container;
-      }
-    });
-  };
-
   function retrieveSwarmHostsInfo(data) {
     var swarm_hosts = {};
     var systemStatus = data.SystemStatus;
@@ -175,15 +159,15 @@ function ($scope, Container, Info, Settings, Messages, Config, errorMsgFilter) {
 
   $scope.swarm = false;
   Config.$promise.then(function (c) {
-    hiddenLabels = c.hiddenLabels;
+    var containersToHideLabels = c.hiddenLabels;
     $scope.swarm = c.swarm;
     if (c.swarm) {
       Info.get({}, function (d) {
         $scope.swarm_hosts = retrieveSwarmHostsInfo(d);
-        update({all: Settings.displayAll ? 1 : 0});
+        update({all: Settings.displayAll ? 1 : 0}, containersToHideLabels);
       });
     } else {
-      update({all: Settings.displayAll ? 1 : 0});
+      update({all: Settings.displayAll ? 1 : 0}, containersToHideLabels);
     }
   });
 }]);

app/components/createContainer/createContainerController.js

@@ -83,8 +83,8 @@ function ($scope, $state, Config, Container, Image, Volume, Network, Messages, e
     });
   });
 
+  // TODO: centralize, already present in templatesController
   function createContainer(config) {
-    $('#createContainerSpinner').show();
     Container.create(config, function (d) {
       if (d.Id) {
         var reqBody = config.HostConfig || {};
@@ -107,8 +107,8 @@ function ($scope, $state, Config, Container, Image, Volume, Network, Messages, e
     });
   }
 
+  // TODO: centralize, already present in templatesController
   function pullImageAndCreateContainer(config) {
-    $('#createContainerSpinner').show();
     Image.create($scope.imageConfig, function (data) {
       var err = data.length > 0 && data[data.length - 1].hasOwnProperty('error');
       if (err) {
@@ -223,7 +223,7 @@ function ($scope, $state, Config, Container, Image, Volume, Network, Messages, e
 
   $scope.create = function () {
     var config = prepareConfiguration();
-
+    $('#createContainerSpinner').show();
     if ($scope.state.alwaysPull) {
       pullImageAndCreateContainer(config);
     } else {

app/components/dashboard/dashboardController.js

@@ -1,6 +1,6 @@
 angular.module('dashboard', [])
-.controller('DashboardController', ['$scope', '$q', 'Config', 'Container', 'Image', 'Network', 'Volume', 'Info',
+.controller('DashboardController', ['$scope', '$q', 'Config', 'Container', 'ContainerHelper', 'Image', 'Network', 'Volume', 'Info',
-function ($scope, $q, Config, Container, Image, Network, Volume, Info) {
+function ($scope, $q, Config, Container, ContainerHelper, Image, Network, Volume, Info) {
 
   $scope.containerData = {
     total: 0
@@ -15,13 +15,13 @@ function ($scope, $q, Config, Container, Image, Network, Volume, Info) {
     total: 0
   };
 
-  function prepareContainerData(d) {
+  function prepareContainerData(d, containersToHideLabels) {
     var running = 0;
     var stopped = 0;
 
     var containers = d;
-    if (hiddenLabels) {
+    if (containersToHideLabels) {
-      containers = hideContainers(d);
+      containers = ContainerHelper.hideContainers(d, containersToHideLabels);
     }
 
     for (var i = 0; i < containers.length; i++) {
@@ -65,7 +65,7 @@ function ($scope, $q, Config, Container, Image, Network, Volume, Info) {
     $scope.infoData = info;
   }
 
-  function fetchDashboardData() {
+  function fetchDashboardData(containersToHideLabels) {
     $('#loadingViewSpinner').show();
     $q.all([
       Container.query({all: 1}).$promise,
@@ -74,7 +74,7 @@ function ($scope, $q, Config, Container, Image, Network, Volume, Info) {
       Network.query({}).$promise,
       Info.get({}).$promise
     ]).then(function (d) {
-      prepareContainerData(d[0]);
+      prepareContainerData(d[0], containersToHideLabels);
       prepareImageData(d[1]);
       prepareVolumeData(d[2]);
       prepareNetworkData(d[3]);
@@ -83,24 +83,8 @@ function ($scope, $q, Config, Container, Image, Network, Volume, Info) {
     });
   }
 
-  var hideContainers = function (containers) {
-    return containers.filter(function (container) {
-      var filterContainer = false;
-      hiddenLabels.forEach(function(label, index) {
-        if (_.has(container.Labels, label.name) &&
-        container.Labels[label.name] === label.value) {
-          filterContainer = true;
-        }
-      });
-      if (!filterContainer) {
-        return container;
-      }
-    });
-  };
-
   Config.$promise.then(function (c) {
     $scope.swarm = c.swarm;
-    hiddenLabels = c.hiddenLabels;
+    fetchDashboardData(c.hiddenLabels);
-    fetchDashboardData();
   });
 }]);

app/components/image/imageController.js

@@ -1,6 +1,6 @@
 angular.module('image', [])
-.controller('ImageController', ['$scope', '$stateParams', '$state', 'Image', 'Messages',
+.controller('ImageController', ['$scope', '$stateParams', '$state', 'Image', 'ImageHelper', 'Messages',
-function ($scope, $stateParams, $state, Image, Messages) {
+function ($scope, $stateParams, $state, Image, ImageHelper, Messages) {
   $scope.RepoTags = [];
   $scope.config = {
     Image: '',
@@ -19,25 +19,11 @@ function ($scope, $stateParams, $state, Image, Messages) {
     });
   }
 
-  //TODO: centralize createImageConfig (also used in containerController)
-  function createImageConfig(imageName, registry) {
-    var imageNameAndTag = imageName.split(':');
-    var image = imageNameAndTag[0];
-    if (registry) {
-      image = registry + '/' + imageNameAndTag[0];
-    }
-    var imageConfig = {
-      repo: image,
-      tag: imageNameAndTag[1] ? imageNameAndTag[1] : 'latest'
-    };
-    return imageConfig;
-  }
-
   $scope.tagImage = function() {
     $('#loadingViewSpinner').show();
     var image = _.toLower($scope.config.Image);
     var registry = _.toLower($scope.config.Registry);
-    var imageConfig = createImageConfig(image, registry);
+    var imageConfig = ImageHelper.createImageConfig(image, registry);
     Image.tag({id: $stateParams.id, tag: imageConfig.tag, repo: imageConfig.repo}, function (d) {
       Messages.send('Image successfully tagged');
       $('#loadingViewSpinner').hide();

app/components/templates/templatesController.js

@@ -1,6 +1,6 @@
 angular.module('templates', [])
-.controller('TemplatesController', ['$scope', '$q', '$state', '$filter', 'Config', 'Container', 'Image', 'Volume', 'Network', 'Templates', 'Messages', 'errorMsgFilter',
+.controller('TemplatesController', ['$scope', '$q', '$state', '$filter', 'Config', 'Container', 'ContainerHelper', 'Image', 'Volume', 'Network', 'Templates', 'Messages', 'errorMsgFilter',
-function ($scope, $q, $state, $filter, Config, Container, Image, Volume, Network, Templates, Messages, errorMsgFilter) {
+function ($scope, $q, $state, $filter, Config, Container, ContainerHelper, Image, Volume, Network, Templates, Messages, errorMsgFilter) {
   $scope.templates = [];
   $scope.selectedTemplate = null;
   $scope.formValues = {
@@ -159,25 +159,9 @@ function initTemplates() {
     });
   }
 
-// TODO: centralize (already exist in containersController)
-var hideContainers = function (containers) {
-  return containers.filter(function (container) {
-    var filterContainer = false;
-    hiddenLabels.forEach(function(label, index) {
-      if (_.has(container.Labels, label.name) &&
-      container.Labels[label.name] === label.value) {
-        filterContainer = true;
-      }
-    });
-    if (!filterContainer) {
-      return container;
-    }
-  });
-};
-
   Config.$promise.then(function (c) {
     $scope.swarm = c.swarm;
-  hiddenLabels = c.hiddenLabels;
+    var containersToHideLabels = c.hiddenLabels;
     Network.query({}, function (d) {
       var networks = d;
       if ($scope.swarm) {
@@ -199,8 +183,8 @@ Config.$promise.then(function (c) {
     });
     Container.query({all: 0}, function (d) {
       var containers = d;
-    if (hiddenLabels) {
+      if (containersToHideLabels) {
-      containers = hideContainers(d);
+        containers = ContainerHelper.hideContainers(d, containersToHideLabels);
       }
       $scope.runningContainers = containers;
     }, function (e) {

app/shared/helpers.js

@@ -0,0 +1,37 @@
+angular.module('uifordocker.helpers', [])
+.factory('ImageHelper', [function ImageHelperFactory() {
+  'use strict';
+  return {
+    createImageConfig: function(imageName, registry) {
+      var imageNameAndTag = imageName.split(':');
+      var image = imageNameAndTag[0];
+      if (registry) {
+        image = registry + '/' + imageNameAndTag[0];
+      }
+      var imageConfig = {
+        repo: image,
+        tag: imageNameAndTag[1] ? imageNameAndTag[1] : 'latest'
+      };
+      return imageConfig;
+    }
+  };
+}])
+.factory('ContainerHelper', [function ContainerHelperFactory() {
+  'use strict';
+  return {
+    hideContainers: function(containers, containersToHideLabels) {
+      return containers.filter(function (container) {
+        var filterContainer = false;
+        containersToHideLabels.forEach(function(label, index) {
+          if (_.has(container.Labels, label.name) &&
+          container.Labels[label.name] === label.value) {
+            filterContainer = true;
+          }
+        });
+        if (!filterContainer) {
+          return container;
+        }
+      });
+    },
+  };
+}]);