From b997b787c48e97cb7b9462d14be8e1526107969d Mon Sep 17 00:00:00 2001 From: Anthony Lapenna Date: Wed, 6 Jul 2016 19:04:45 +1200 Subject: [PATCH] feat(ui): simplify views for internal usage --- app/app.js | 4 +- .../createContainerController.js | 14 ++-- .../createContainer/createcontainer.html | 23 +++--- .../createNetwork/createNetworkController.js | 57 ------------- .../createNetwork/createnetwork.html | 80 ------------------- .../createVolume/createVolumeController.js | 56 ------------- app/components/createVolume/createvolume.html | 69 ---------------- app/components/images/images.html | 10 +-- app/components/images/imagesController.js | 2 +- app/components/networks/networks.html | 68 +++++++++------- app/components/networks/networksController.js | 37 +++++++-- app/components/volumes/volumes.html | 44 +++++++--- app/components/volumes/volumesController.js | 38 ++++++++- gruntFile.js | 2 +- 14 files changed, 161 insertions(+), 343 deletions(-) delete mode 100644 app/components/createNetwork/createNetworkController.js delete mode 100644 app/components/createNetwork/createnetwork.html delete mode 100644 app/components/createVolume/createVolumeController.js delete mode 100644 app/components/createVolume/createvolume.html diff --git a/app/app.js b/app/app.js index 9c98988a7..8f668751f 100644 --- a/app/app.js +++ b/app/app.js @@ -19,9 +19,7 @@ angular.module('uifordocker', [ 'swarm', 'network', 'networks', - 'createNetwork', - 'volumes', - 'createVolume']) + 'volumes']) .config(['$stateProvider', '$urlRouterProvider', '$httpProvider', function ($stateProvider, $urlRouterProvider, $httpProvider) { 'use strict'; diff --git a/app/components/createContainer/createContainerController.js b/app/components/createContainer/createContainerController.js index ba4d929db..e990c04be 100644 --- a/app/components/createContainer/createContainerController.js +++ b/app/components/createContainer/createContainerController.js @@ -24,12 +24,8 @@ function ($scope, $state, Config, Container, Image, Volume, Network, Messages, V } }; - $scope.resetVolumePath = function(index) { - $scope.formValues.Volumes[index].name = ''; - }; - $scope.addVolume = function() { - $scope.formValues.Volumes.push({ name: '', containerPath: '', readOnly: false, isPath: false }); + $scope.formValues.Volumes.push({ name: '', containerPath: '' }); }; $scope.removeVolume = function(index) { @@ -56,7 +52,12 @@ function ($scope, $state, Config, Container, Image, Volume, Network, Messages, V var swarm = c.swarm; Volume.query({}, function (d) { - $scope.availableVolumes = d.Volumes; + var persistedVolumes = d.Volumes.filter(function (volume) { + if (volume.Driver === 'local-persist') { + return volume; + } + }); + $scope.availableVolumes = _.uniqBy(persistedVolumes, 'Name'); }, function (e) { Messages.error("Failure", e.data); }); @@ -69,6 +70,7 @@ function ($scope, $state, Config, Container, Image, Volume, Network, Messages, V return network; } }); + $scope.globalNetworkCount = networks.length; networks.push({Name: "bridge"}); networks.push({Name: "host"}); networks.push({Name: "none"}); diff --git a/app/components/createContainer/createcontainer.html b/app/components/createContainer/createcontainer.html index b1b1f5a3f..5d6ec5dc4 100644 --- a/app/components/createContainer/createcontainer.html +++ b/app/components/createContainer/createcontainer.html @@ -208,28 +208,22 @@
-
+
volume
+
+ You don't have any persistent volumes. Head over the volumes view to create one. +
-
-
- -
-
- Path - - + -
container @@ -251,6 +245,11 @@
+
+
+ You don't have any shared network. Head over the networks view to create one. +
+
diff --git a/app/components/createNetwork/createNetworkController.js b/app/components/createNetwork/createNetworkController.js deleted file mode 100644 index 44a7bd858..000000000 --- a/app/components/createNetwork/createNetworkController.js +++ /dev/null @@ -1,57 +0,0 @@ -angular.module('createNetwork', []) -.controller('CreateNetworkController', ['$scope', '$state', 'Messages', 'Network', 'ViewSpinner', 'errorMsgFilter', -function ($scope, $state, Messages, Network, ViewSpinner, errorMsgFilter) { - $scope.formValues = { - DriverOptions: [] - }; - - $scope.config = { - Driver: 'bridge', - CheckDuplicate: true, - Internal: false - }; - - $scope.addDriverOption = function() { - $scope.formValues.DriverOptions.push({ name: '', value: '' }); - }; - - $scope.removeDriverOption = function(index) { - $scope.formValues.DriverOptions.splice(index, 1); - }; - - function createNetwork(config) { - ViewSpinner.spin(); - Network.create(config, function (d) { - if (d.Id) { - Messages.send("Network created", d.Id); - ViewSpinner.stop(); - $state.go('networks', {}, {reload: true}); - } else { - ViewSpinner.stop(); - Messages.error('Unable to create network', errorMsgFilter(d)); - } - }, function (e) { - ViewSpinner.stop(); - Messages.error('Unable to create network', e.data); - }); - } - - function prepareDriverOptions(config) { - var options = {}; - $scope.formValues.DriverOptions.forEach(function (option) { - options[option.name] = option.value; - }); - config.Options = options; - } - - function prepareConfiguration() { - var config = angular.copy($scope.config); - prepareDriverOptions(config); - return config; - } - - $scope.create = function () { - var config = prepareConfiguration(); - createNetwork(config); - }; -}]); diff --git a/app/components/createNetwork/createnetwork.html b/app/components/createNetwork/createnetwork.html deleted file mode 100644 index f4ae1d756..000000000 --- a/app/components/createNetwork/createnetwork.html +++ /dev/null @@ -1,80 +0,0 @@ - - - - Networks > Add network - - - -
-
- - - - -
- -
- -
-
- - -
- -
- -
-
- - -
- -
- - driver option - -
- -
-
-
- name - -
-
- value - - - - -
-
-
- -
- - -
-
-
- -
-
-
- - - - -
-
- -
-
- - Cancel -
-
diff --git a/app/components/createVolume/createVolumeController.js b/app/components/createVolume/createVolumeController.js deleted file mode 100644 index d33d4c7e1..000000000 --- a/app/components/createVolume/createVolumeController.js +++ /dev/null @@ -1,56 +0,0 @@ -angular.module('createVolume', []) -.controller('CreateVolumeController', ['$scope', '$state', 'Volume', 'Messages', 'ViewSpinner', 'errorMsgFilter', -function ($scope, $state, Volume, Messages, ViewSpinner, errorMsgFilter) { - - $scope.formValues = { - DriverOptions: [] - }; - - $scope.config = { - Driver: 'local' - }; - - $scope.addDriverOption = function() { - $scope.formValues.DriverOptions.push({ name: '', value: '' }); - }; - - $scope.removeDriverOption = function(index) { - $scope.formValues.DriverOptions.splice(index, 1); - }; - - function createVolume(config) { - ViewSpinner.spin(); - Volume.create(config, function (d) { - if (d.Name) { - Messages.send("Volume created", d.Name); - ViewSpinner.stop(); - $state.go('volumes', {}, {reload: true}); - } else { - ViewSpinner.stop(); - Messages.error('Unable to create volume', errorMsgFilter(d)); - } - }, function (e) { - ViewSpinner.stop(); - Messages.error('Unable to create volume', e.data); - }); - } - - function prepareDriverOptions(config) { - var options = {}; - $scope.formValues.DriverOptions.forEach(function (option) { - options[option.name] = option.value; - }); - config.DriverOpts = options; - } - - function prepareConfiguration() { - var config = angular.copy($scope.config); - prepareDriverOptions(config); - return config; - } - - $scope.create = function () { - var config = prepareConfiguration(); - createVolume(config); - }; -}]); diff --git a/app/components/createVolume/createvolume.html b/app/components/createVolume/createvolume.html deleted file mode 100644 index d6fb53e5a..000000000 --- a/app/components/createVolume/createvolume.html +++ /dev/null @@ -1,69 +0,0 @@ - - - - Volumes > Add volume - - - -
-
- - -
- -
- -
- -
-
- - -
- -
- -
-
- - -
- -
- - driver option - -
- -
-
-
- name - -
-
- value - - - - -
-
-
- -
- -
- - -
-
- -
-
- - Cancel -
-
diff --git a/app/components/images/images.html b/app/components/images/images.html index 0a539ee8a..14b84161c 100644 --- a/app/components/images/images.html +++ b/app/components/images/images.html @@ -76,18 +76,11 @@ - VirtualSize + Size - - - Created - - - - @@ -96,7 +89,6 @@ {{ image.Id|truncate:20}} {{ image|repotag }} {{ image.VirtualSize|humansize }} - {{ image.Created|getdate }} diff --git a/app/components/images/imagesController.js b/app/components/images/imagesController.js index 20dbf294f..fc39c46c2 100644 --- a/app/components/images/imagesController.js +++ b/app/components/images/imagesController.js @@ -2,7 +2,7 @@ angular.module('images', []) .controller('ImagesController', ['$scope', '$state', 'Image', 'ViewSpinner', 'Messages', function ($scope, $state, Image, ViewSpinner, Messages) { $scope.state = {}; - $scope.sortType = 'Created'; + $scope.sortType = 'RepoTags'; $scope.sortReverse = true; $scope.state.toggle = false; $scope.state.selectedItemCount = 0; diff --git a/app/components/networks/networks.html b/app/components/networks/networks.html index 381fd500e..ecfdd1559 100644 --- a/app/components/networks/networks.html +++ b/app/components/networks/networks.html @@ -7,6 +7,39 @@ Networks +
+
+ + + + +
+ +
+ +
+ +
+
+ + +
+
+ Note: The network will be created using the overlay driver and will allow containers to communicate across the hosts of your cluster. +
+
+ +
+
+ +
+
+
+ + +
+
+
@@ -14,7 +47,6 @@
- Add network
@@ -33,13 +65,6 @@ - - - Id - - - - Scope @@ -47,30 +72,16 @@ - - - Driver - - - - - - - IPAM Driver - - - - - IPAM Subnet + Subnet - IPAM Gateway + Gateway @@ -80,13 +91,10 @@ - {{ network.Name|truncate:20}} - {{ network.Id }} + {{ network.Name|truncate:40}} {{ network.Scope }} - {{ network.Driver }} - {{ network.IPAM.Driver }} - {{ network.IPAM.Config[0].Subnet }} - {{ network.IPAM.Config[0].Gateway }} + {{ network.IPAM.Config[0].Subnet ? network.IPAM.Config[0].Subnet : '-' }} + {{ network.IPAM.Config[0].Gateway ? network.IPAM.Config[0].Gateway : '-' }} diff --git a/app/components/networks/networksController.js b/app/components/networks/networksController.js index c3e8dbc8b..7d8f9f4e6 100644 --- a/app/components/networks/networksController.js +++ b/app/components/networks/networksController.js @@ -1,12 +1,15 @@ angular.module('networks', []) -.controller('NetworksController', ['$scope', 'Network', 'ViewSpinner', 'Messages', 'errorMsgFilter', -function ($scope, Network, ViewSpinner, Messages, errorMsgFilter) { - +.controller('NetworksController', ['$scope', '$state', 'Network', 'ViewSpinner', 'Messages', 'errorMsgFilter', +function ($scope, $state, Network, ViewSpinner, Messages, errorMsgFilter) { $scope.state = {}; $scope.state.toggle = false; $scope.state.selectedItemCount = 0; - $scope.sortType = 'Name'; - $scope.sortReverse = true; + $scope.sortType = 'Scope'; + $scope.sortReverse = false; + + $scope.config = { + Name: '' + }; $scope.order = function(sortType) { $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false; @@ -32,6 +35,30 @@ function ($scope, Network, ViewSpinner, Messages, errorMsgFilter) { } }; + function prepareNetworkConfiguration() { + var config = angular.copy($scope.config); + config.Driver = 'overlay'; + return config; + } + + $scope.createNetwork = function() { + ViewSpinner.spin(); + var config = prepareNetworkConfiguration(); + Network.create(config, function (d) { + if (d.Id) { + Messages.send("Network created", d.Id); + ViewSpinner.stop(); + $state.go('networks', {}, {reload: true}); + } else { + ViewSpinner.stop(); + Messages.error('Unable to create network', errorMsgFilter(d)); + } + }, function (e) { + ViewSpinner.stop(); + Messages.error('Unable to create network', e.data); + }); + }; + $scope.removeAction = function () { ViewSpinner.spin(); var counter = 0; diff --git a/app/components/volumes/volumes.html b/app/components/volumes/volumes.html index b4f55107e..3ce2824d0 100644 --- a/app/components/volumes/volumes.html +++ b/app/components/volumes/volumes.html @@ -7,6 +7,39 @@ Volumes +
+
+ + + + +
+ +
+ +
+ +
+
+ + +
+
+ Note: The volume will be created in our persisted storage and will be available across all the hosts of your cluster. +
+
+ +
+
+ +
+
+
+ + +
+
+
@@ -14,7 +47,6 @@
- Add volume
@@ -40,21 +72,13 @@ - - - Mountpoint - - - - - {{ volume.Name|truncate:20 }} + {{ volume.Name|truncate:50 }} {{ volume.Driver }} - {{ volume.Mountpoint }} diff --git a/app/components/volumes/volumesController.js b/app/components/volumes/volumesController.js index 750c683f7..dbac34fd2 100644 --- a/app/components/volumes/volumesController.js +++ b/app/components/volumes/volumesController.js @@ -1,12 +1,16 @@ angular.module('volumes', []) -.controller('VolumesController', ['$scope', 'Volume', 'ViewSpinner', 'Messages', 'errorMsgFilter', -function ($scope, Volume, ViewSpinner, Messages, errorMsgFilter) { +.controller('VolumesController', ['$scope', '$state', 'Volume', 'ViewSpinner', 'Messages', 'errorMsgFilter', +function ($scope, $state, Volume, ViewSpinner, Messages, errorMsgFilter) { $scope.state = {}; $scope.state.toggle = false; $scope.state.selectedItemCount = 0; - $scope.sortType = 'Name'; + $scope.sortType = 'Driver'; $scope.sortReverse = true; + $scope.config = { + Name: '' + }; + $scope.order = function(sortType) { $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false; $scope.sortType = sortType; @@ -31,6 +35,32 @@ function ($scope, Volume, ViewSpinner, Messages, errorMsgFilter) { } }; + function prepareVolumeConfiguration() { + var config = angular.copy($scope.config); + config.Driver = 'local-persist'; + config.DriverOpts = {}; + config.DriverOpts.mountpoint = '/volume/' + config.Name; + return config; + } + + $scope.createVolume = function() { + ViewSpinner.spin(); + var config = prepareVolumeConfiguration(); + Volume.create(config, function (d) { + if (d.Name) { + Messages.send("Volume created", d.Name); + ViewSpinner.stop(); + $state.go('volumes', {}, {reload: true}); + } else { + ViewSpinner.stop(); + Messages.error('Unable to create volume', errorMsgFilter(d)); + } + }, function (e) { + ViewSpinner.stop(); + Messages.error('Unable to create volume', e.data); + }); + }; + $scope.removeAction = function () { ViewSpinner.spin(); var counter = 0; @@ -59,7 +89,7 @@ function ($scope, Volume, ViewSpinner, Messages, errorMsgFilter) { function fetchVolumes() { ViewSpinner.spin(); Volume.query({}, function (d) { - $scope.volumes = d.Volumes; + $scope.volumes = _.uniqBy(d.Volumes, 'Name'); ViewSpinner.stop(); }, function (e) { Messages.error("Failure", e.data); diff --git a/gruntFile.js b/gruntFile.js index 606b7fc73..5091c709d 100644 --- a/gruntFile.js +++ b/gruntFile.js @@ -268,7 +268,7 @@ module.exports = function (grunt) { command: [ 'docker stop ui-for-docker', 'docker rm ui-for-docker', - 'docker run --privileged -d -p 9000:9000 -v /tmp/docker-ui:/data --name ui-for-docker ui-for-docker -e http://10.0.7.10:4000 --swarm -d /data' + 'docker run --privileged -d -p 9000:9000 -v /tmp/docker-ui:/data --name ui-for-docker ui-for-docker -e http://10.0.7.11:4000 --swarm -d /data' ].join(';') }, cleanImages: {