From f020e5a633ebf1351c590281a5acd0315a052e8d Mon Sep 17 00:00:00 2001 From: Anthony Lapenna Date: Wed, 31 Aug 2016 18:03:41 +1200 Subject: [PATCH] refactor(ui): introduce helpers functions to centralize code --- app/app.js | 1 + .../container/containerController.js | 20 +- .../containers/containersController.js | 32 +- .../createContainerController.js | 22 +- .../dashboard/dashboardController.js | 32 +- app/components/image/imageController.js | 20 +- .../templates/templatesController.js | 356 +++++++++--------- app/shared/helpers.js | 37 ++ 8 files changed, 241 insertions(+), 279 deletions(-) create mode 100644 app/shared/helpers.js diff --git a/app/app.js b/app/app.js index 6130f5cc4..8467cc621 100644 --- a/app/app.js +++ b/app/app.js @@ -6,6 +6,7 @@ angular.module('uifordocker', [ 'ngCookies', 'ngSanitize', 'uifordocker.services', + 'uifordocker.helpers', 'uifordocker.filters', 'dashboard', 'container', diff --git a/app/components/container/containerController.js b/app/components/container/containerController.js index 2cca1ab25..6d49eab16 100644 --- a/app/components/container/containerController.js +++ b/app/components/container/containerController.js @@ -1,6 +1,6 @@ angular.module('container', []) -.controller('ContainerController', ['$scope', '$state','$stateParams', '$filter', 'Container', 'ContainerCommit', 'Messages', 'errorMsgFilter', -function ($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, 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(); diff --git a/app/components/containers/containersController.js b/app/components/containers/containersController.js index 773d753d2..47fd473c2 100644 --- a/app/components/containers/containersController.js +++ b/app/components/containers/containersController.js @@ -1,6 +1,6 @@ angular.module('containers', []) -.controller('ContainersController', ['$scope', 'Container', 'Info', 'Settings', 'Messages', 'Config', 'errorMsgFilter', -function ($scope, Container, Info, Settings, Messages, Config, errorMsgFilter) { +.controller('ContainersController', ['$scope', 'Container', 'ContainerHelper', '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) { - containers = hideContainers(d); + if (containersToHideLabels) { + 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); } }); }]); diff --git a/app/components/createContainer/createContainerController.js b/app/components/createContainer/createContainerController.js index 623da4eb8..40206ee71 100644 --- a/app/components/createContainer/createContainerController.js +++ b/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,17 +107,17 @@ 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) { - var detail = data[data.length - 1]; - $('#createContainerSpinner').hide(); - Messages.error('Error', detail.error); - } else { - createContainer(config); - } + var err = data.length > 0 && data[data.length - 1].hasOwnProperty('error'); + if (err) { + var detail = data[data.length - 1]; + $('#createContainerSpinner').hide(); + Messages.error('Error', detail.error); + } else { + createContainer(config); + } }, function (e) { $('#createContainerSpinner').hide(); Messages.error('Error', 'Unable to pull image ' + image); @@ -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 { diff --git a/app/components/dashboard/dashboardController.js b/app/components/dashboard/dashboardController.js index 0368f3ee2..13b2c8617 100644 --- a/app/components/dashboard/dashboardController.js +++ b/app/components/dashboard/dashboardController.js @@ -1,6 +1,6 @@ angular.module('dashboard', []) -.controller('DashboardController', ['$scope', '$q', 'Config', 'Container', 'Image', 'Network', 'Volume', 'Info', -function ($scope, $q, Config, Container, Image, Network, Volume, Info) { +.controller('DashboardController', ['$scope', '$q', 'Config', 'Container', 'ContainerHelper', '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) { - containers = hideContainers(d); + if (containersToHideLabels) { + 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(); + fetchDashboardData(c.hiddenLabels); }); }]); diff --git a/app/components/image/imageController.js b/app/components/image/imageController.js index 0e8db67ab..2eeb4aea6 100644 --- a/app/components/image/imageController.js +++ b/app/components/image/imageController.js @@ -1,6 +1,6 @@ angular.module('image', []) -.controller('ImageController', ['$scope', '$stateParams', '$state', 'Image', 'Messages', -function ($scope, $stateParams, $state, Image, Messages) { +.controller('ImageController', ['$scope', '$stateParams', '$state', 'Image', 'ImageHelper', '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(); diff --git a/app/components/templates/templatesController.js b/app/components/templates/templatesController.js index 0bebf9754..69d7a0e43 100644 --- a/app/components/templates/templatesController.js +++ b/app/components/templates/templatesController.js @@ -1,42 +1,42 @@ angular.module('templates', []) -.controller('TemplatesController', ['$scope', '$q', '$state', '$filter', 'Config', 'Container', 'Image', 'Volume', 'Network', 'Templates', 'Messages', 'errorMsgFilter', -function ($scope, $q, $state, $filter, Config, Container, Image, Volume, Network, Templates, Messages, errorMsgFilter) { -$scope.templates = []; -$scope.selectedTemplate = null; -$scope.formValues = { - network: "", - name: "" -}; +.controller('TemplatesController', ['$scope', '$q', '$state', '$filter', 'Config', 'Container', 'ContainerHelper', '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 = { + network: "", + name: "" + }; -var selectedItem = -1; + var selectedItem = -1; -// TODO: centralize, already present in createContainerController -function createContainer(config) { - Container.create(config, function (d) { - if (d.Id) { - var reqBody = config.HostConfig || {}; - reqBody.id = d.Id; - Container.start(reqBody, function (cd) { + // TODO: centralize, already present in createContainerController + function createContainer(config) { + Container.create(config, function (d) { + if (d.Id) { + var reqBody = config.HostConfig || {}; + reqBody.id = d.Id; + Container.start(reqBody, function (cd) { + $('#createContainerSpinner').hide(); + Messages.send('Container Started', d.Id); + $state.go('containers', {}, {reload: true}); + }, function (e) { + $('#createContainerSpinner').hide(); + Messages.error('Error', errorMsgFilter(e)); + }); + } else { $('#createContainerSpinner').hide(); - Messages.send('Container Started', d.Id); - $state.go('containers', {}, {reload: true}); - }, function (e) { - $('#createContainerSpinner').hide(); - Messages.error('Error', errorMsgFilter(e)); - }); - } else { + Messages.error('Error', errorMsgFilter(d)); + } + }, function (e) { $('#createContainerSpinner').hide(); - Messages.error('Error', errorMsgFilter(d)); - } - }, function (e) { - $('#createContainerSpinner').hide(); - Messages.error('Error', errorMsgFilter(e)); - }); -} + Messages.error('Error', errorMsgFilter(e)); + }); + } -// TODO: centralize, already present in createContainerController -function pullImageAndCreateContainer(imageConfig, containerConfig) { - Image.create(imageConfig, function (data) { + // TODO: centralize, already present in createContainerController + function pullImageAndCreateContainer(imageConfig, containerConfig) { + Image.create(imageConfig, function (data) { var err = data.length > 0 && data[data.length - 1].hasOwnProperty('error'); if (err) { var detail = data[data.length - 1]; @@ -45,167 +45,151 @@ function pullImageAndCreateContainer(imageConfig, containerConfig) { } else { createContainer(containerConfig); } - }, function (e) { - $('#createContainerSpinner').hide(); - Messages.error('Error', 'Unable to pull image ' + image); - }); -} + }, function (e) { + $('#createContainerSpinner').hide(); + Messages.error('Error', 'Unable to pull image ' + image); + }); + } -function getInitialConfiguration() { - return { - Env: [], - OpenStdin: false, - Tty: false, - ExposedPorts: {}, - HostConfig: { - RestartPolicy: { - Name: 'no' + function getInitialConfiguration() { + return { + Env: [], + OpenStdin: false, + Tty: false, + ExposedPorts: {}, + HostConfig: { + RestartPolicy: { + Name: 'no' + }, + PortBindings: {}, + Binds: [], + NetworkMode: $scope.formValues.network.Name, + Privileged: false }, - PortBindings: {}, - Binds: [], - NetworkMode: $scope.formValues.network.Name, - Privileged: false - }, - Volumes: {}, - name: $scope.formValues.name - }; -} + Volumes: {}, + name: $scope.formValues.name + }; + } -function createConfigFromTemplate(template) { - var containerConfig = getInitialConfiguration(); - containerConfig.Image = template.image; - if (template.env) { - template.env.forEach(function (v) { - if (v.value || v.set) { - var val; - if (v.type && v.type === 'container') { - if ($scope.swarm && $scope.formValues.network.Scope === 'global') { - val = $filter('swarmcontainername')(v.value); + function createConfigFromTemplate(template) { + var containerConfig = getInitialConfiguration(); + containerConfig.Image = template.image; + if (template.env) { + template.env.forEach(function (v) { + if (v.value || v.set) { + var val; + if (v.type && v.type === 'container') { + if ($scope.swarm && $scope.formValues.network.Scope === 'global') { + val = $filter('swarmcontainername')(v.value); + } else { + var container = v.value; + val = container.NetworkSettings.Networks[Object.keys(container.NetworkSettings.Networks)[0]].IPAddress; + } } else { - var container = v.value; - val = container.NetworkSettings.Networks[Object.keys(container.NetworkSettings.Networks)[0]].IPAddress; + val = v.set ? v.set : v.value; } - } else { - val = v.set ? v.set : v.value; - } - containerConfig.Env.push(v.name + "=" + val); - } - }); - } - if (template.ports) { - template.ports.forEach(function (p) { - containerConfig.ExposedPorts[p] = {}; - containerConfig.HostConfig.PortBindings[p] = [{ HostPort: ""}]; - }); - } - return containerConfig; -} - -function prepareVolumeQueries(template, containerConfig) { - var volumeQueries = []; - if (template.volumes) { - template.volumes.forEach(function (vol) { - volumeQueries.push( - Volume.create({}, function (d) { - if (d.Name) { - Messages.send("Volume created", d.Name); - containerConfig.Volumes[vol] = {}; - containerConfig.HostConfig.Binds.push(d.Name + ':' + vol); - } else { - Messages.error('Unable to create volume', errorMsgFilter(d)); - } - }, function (e) { - Messages.error('Unable to create volume', e.data); - }).$promise - ); - }); - } - return volumeQueries; -} - -$scope.createTemplate = function() { - $('#createContainerSpinner').show(); - var template = $scope.selectedTemplate; - var containerConfig = createConfigFromTemplate(template); - var imageConfig = { - fromImage: template.image.split(':')[0], - tag: template.image.split(':')[1] ? template.image.split(':')[1] : 'latest' - }; - var createVolumeQueries = prepareVolumeQueries(template, containerConfig); - $q.all(createVolumeQueries).then(function (d) { - pullImageAndCreateContainer(imageConfig, containerConfig); - }); -}; - -$scope.selectTemplate = function(id) { - $('#template_' + id).toggleClass("container-template--selected"); - if (selectedItem === id) { - selectedItem = -1; - $scope.selectedTemplate = null; - } else { - $('#template_' + selectedItem).toggleClass("container-template--selected"); - selectedItem = id; - $scope.selectedTemplate = $scope.templates[id]; - } -}; - -function initTemplates() { - Templates.get(function (data) { - $scope.templates = data; - $('#loadTemplatesSpinner').hide(); - }, function (e) { - $('#loadTemplatesSpinner').hide(); - Messages.error("Unable to retrieve apps list", e.data); - }); -} - -// 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; - Network.query({}, function (d) { - var networks = d; - if ($scope.swarm) { - networks = d.filter(function (network) { - if (network.Scope === 'global') { - return network; + containerConfig.Env.push(v.name + "=" + val); } }); - $scope.globalNetworkCount = networks.length; - networks.push({Scope: "local", Name: "bridge"}); - networks.push({Scope: "local", Name: "host"}); - networks.push({Scope: "local", Name: "none"}); + } + if (template.ports) { + template.ports.forEach(function (p) { + containerConfig.ExposedPorts[p] = {}; + containerConfig.HostConfig.PortBindings[p] = [{ HostPort: ""}]; + }); + } + return containerConfig; + } + + function prepareVolumeQueries(template, containerConfig) { + var volumeQueries = []; + if (template.volumes) { + template.volumes.forEach(function (vol) { + volumeQueries.push( + Volume.create({}, function (d) { + if (d.Name) { + Messages.send("Volume created", d.Name); + containerConfig.Volumes[vol] = {}; + containerConfig.HostConfig.Binds.push(d.Name + ':' + vol); + } else { + Messages.error('Unable to create volume', errorMsgFilter(d)); + } + }, function (e) { + Messages.error('Unable to create volume', e.data); + }).$promise + ); + }); + } + return volumeQueries; + } + + $scope.createTemplate = function() { + $('#createContainerSpinner').show(); + var template = $scope.selectedTemplate; + var containerConfig = createConfigFromTemplate(template); + var imageConfig = { + fromImage: template.image.split(':')[0], + tag: template.image.split(':')[1] ? template.image.split(':')[1] : 'latest' + }; + var createVolumeQueries = prepareVolumeQueries(template, containerConfig); + $q.all(createVolumeQueries).then(function (d) { + pullImageAndCreateContainer(imageConfig, containerConfig); + }); + }; + + $scope.selectTemplate = function(id) { + $('#template_' + id).toggleClass("container-template--selected"); + if (selectedItem === id) { + selectedItem = -1; + $scope.selectedTemplate = null; } else { - $scope.formValues.network = _.find(networks, function(o) { return o.Name === "bridge"; }); + $('#template_' + selectedItem).toggleClass("container-template--selected"); + selectedItem = id; + $scope.selectedTemplate = $scope.templates[id]; } - $scope.availableNetworks = networks; - }, function (e) { - Messages.error("Unable to retrieve available networks", e.data); + }; + + function initTemplates() { + Templates.get(function (data) { + $scope.templates = data; + $('#loadTemplatesSpinner').hide(); + }, function (e) { + $('#loadTemplatesSpinner').hide(); + Messages.error("Unable to retrieve apps list", e.data); + }); + } + + Config.$promise.then(function (c) { + $scope.swarm = c.swarm; + var containersToHideLabels = c.hiddenLabels; + Network.query({}, function (d) { + var networks = d; + if ($scope.swarm) { + networks = d.filter(function (network) { + if (network.Scope === 'global') { + return network; + } + }); + $scope.globalNetworkCount = networks.length; + networks.push({Scope: "local", Name: "bridge"}); + networks.push({Scope: "local", Name: "host"}); + networks.push({Scope: "local", Name: "none"}); + } else { + $scope.formValues.network = _.find(networks, function(o) { return o.Name === "bridge"; }); + } + $scope.availableNetworks = networks; + }, function (e) { + Messages.error("Unable to retrieve available networks", e.data); + }); + Container.query({all: 0}, function (d) { + var containers = d; + if (containersToHideLabels) { + containers = ContainerHelper.hideContainers(d, containersToHideLabels); + } + $scope.runningContainers = containers; + }, function (e) { + Messages.error("Unable to retrieve running containers", e.data); + }); + initTemplates(); }); - Container.query({all: 0}, function (d) { - var containers = d; - if (hiddenLabels) { - containers = hideContainers(d); - } - $scope.runningContainers = containers; - }, function (e) { - Messages.error("Unable to retrieve running containers", e.data); - }); - initTemplates(); -}); }]); diff --git a/app/shared/helpers.js b/app/shared/helpers.js new file mode 100644 index 000000000..02d787d2a --- /dev/null +++ b/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; + } + }); + }, + }; +}]);