Merge branch 'release/1.3.0'

2016-07-08 16:06:53 +12:00 · 2016-07-08 16:06:53 +12:00 · b59c102098
parent 56ef453203 afaa1433ff
commit b59c102098
29 changed files with 225 additions and 182 deletions
--- a/app/app.js
+++ b/app/app.js
@ -144,4 +144,4 @@ angular.module('uifordocker', [
  .constant('DOCKER_ENDPOINT', 'dockerapi')
  .constant('DOCKER_PORT', '') // Docker port, leave as an empty string if no port is requred.  If you have a port, prefix it with a ':' i.e. :4243
  .constant('CONFIG_ENDPOINT', '/config')
-  .constant('UI_VERSION', 'v1.2.0');
+  .constant('UI_VERSION', 'v1.3.0');
--- a/app/components/container/container.html
+++ b/app/components/container/container.html
@ -1,5 +1,7 @@
 <rd-header>
-  <rd-header-title title="Container details"></rd-header-title>
+  <rd-header-title title="Container details">
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
+  </rd-header-title>
  <rd-header-content>
    Containers > <a ui-sref="container({id: container.Id})">{{ container.Name|trimcontainername }}</a>
  </rd-header-content>
--- a/app/components/container/containerController.js
+++ b/app/components/container/containerController.js
@ -1,6 +1,6 @@
 angular.module('container', [])
-.controller('ContainerController', ['$scope', '$stateParams', '$state', '$filter', 'Container', 'ContainerCommit', 'Image', 'Messages', 'ViewSpinner', '$timeout',
-function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Image, Messages, ViewSpinner, $timeout) {
+.controller('ContainerController', ['$scope', '$stateParams', '$state', '$filter', 'Container', 'ContainerCommit', 'Image', 'Messages', '$timeout',
+function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Image, Messages, $timeout) {
  $scope.changes = [];
  $scope.editEnv = false;
  $scope.editPorts = false;
@ -11,7 +11,7 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
  };

  var update = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
    Container.get({id: $stateParams.id}, function (d) {
      $scope.container = d;
      $scope.container.edit = false;
@ -61,7 +61,7 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
        $scope.newCfg.Binds.push(bind);
      });

-      ViewSpinner.stop();
+      $('#loadingViewSpinner').hide();
    }, function (e) {
      if (e.status === 404) {
        $('.detail').hide();
@ -69,13 +69,13 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
      } else {
        Messages.error("Failure", e.data);
      }
-      ViewSpinner.stop();
+      $('#loadingViewSpinner').hide();
    });

  };

  $scope.start = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
    Container.start({
      id: $scope.container.Id,
      HostConfig: $scope.container.HostConfig
@ -89,7 +89,7 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
  };

  $scope.stop = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
    Container.stop({id: $stateParams.id}, function (d) {
      update();
      Messages.send("Container stopped", $stateParams.id);
@ -100,7 +100,7 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
  };

  $scope.kill = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
    Container.kill({id: $stateParams.id}, function (d) {
      update();
      Messages.send("Container killed", $stateParams.id);
@ -111,7 +111,7 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
  };

  $scope.commit = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
    ContainerCommit.commit({id: $stateParams.id, repo: $scope.container.Config.Image}, function (d) {
      update();
      Messages.send("Container commited", $stateParams.id);
@ -121,7 +121,7 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
    });
  };
  $scope.pause = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
    Container.pause({id: $stateParams.id}, function (d) {
      update();
      Messages.send("Container paused", $stateParams.id);
@ -132,7 +132,7 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
  };

  $scope.unpause = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
    Container.unpause({id: $stateParams.id}, function (d) {
      update();
      Messages.send("Container unpaused", $stateParams.id);
@ -143,7 +143,7 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
  };

  $scope.remove = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
    Container.remove({id: $stateParams.id}, function (d) {
      update();
      $state.go('containers', {}, {reload: true});
@ -155,7 +155,7 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
  };

  $scope.restart = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
    Container.restart({id: $stateParams.id}, function (d) {
      update();
      Messages.send("Container restarted", $stateParams.id);
@ -170,10 +170,10 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
  };

  $scope.getChanges = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
    Container.changes({id: $stateParams.id}, function (d) {
      $scope.changes = d;
-      ViewSpinner.stop();
+      $('#loadingViewSpinner').hide();
    });
  };

--- a/app/components/containerLogs/containerLogsController.js
+++ b/app/components/containerLogs/containerLogsController.js
@ -1,6 +1,6 @@
 angular.module('containerLogs', [])
-.controller('ContainerLogsController', ['$scope', '$stateParams', '$anchorScroll', 'ContainerLogs', 'Container', 'ViewSpinner',
-function ($scope, $stateParams, $anchorScroll, ContainerLogs, Container, ViewSpinner) {
+.controller('ContainerLogsController', ['$scope', '$stateParams', '$anchorScroll', 'ContainerLogs', 'Container',
+function ($scope, $stateParams, $anchorScroll, ContainerLogs, Container) {
  $scope.state = {};
  $scope.state.displayTimestampsOut = false;
  $scope.state.displayTimestampsErr = false;
@ -8,24 +8,24 @@ function ($scope, $stateParams, $anchorScroll, ContainerLogs, Container, ViewSpi
  $scope.stderr = '';
  $scope.tailLines = 2000;

-  ViewSpinner.spin();
+  $('#loadingViewSpinner').show();
  Container.get({id: $stateParams.id}, function (d) {
    $scope.container = d;
-    ViewSpinner.stop();
+    $('#loadingViewSpinner').hide();
  }, function (e) {
    if (e.status === 404) {
      Messages.error("Not found", "Container not found.");
    } else {
      Messages.error("Failure", e.data);
    }
-    ViewSpinner.stop();
+    $('#loadingViewSpinner').hide();
  });

  function getLogs() {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
    getLogsStdout();
    getLogsStderr();
-    ViewSpinner.stop();
+    $('#loadingViewSpinner').hide();
  }

  function getLogsStderr() {
--- a/app/components/containerLogs/containerlogs.html
+++ b/app/components/containerLogs/containerlogs.html
@ -1,5 +1,7 @@
 <rd-header>
-  <rd-header-title title="Container logs"></rd-header-title>
+  <rd-header-title title="Container logs">
+      <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
+  </rd-header-title>
  <rd-header-content>
    Containers > <a ui-sref="container({id: container.Id})">{{ container.Name|trimcontainername }}</a> > Logs
  </rd-header-content>
--- a/app/components/containers/containers.html
+++ b/app/components/containers/containers.html
@ -10,6 +10,9 @@
 <div class="col-lg-12">
  <rd-widget>
    <rd-widget-header icon="fa-tasks" title="Containers">
+      <div class="pull-right">
+        <i id="loadContainersSpinner" class="fa fa-cog fa-2x fa-spin" style="margin-top: 5px;"></i>
+      </div>
    </rd-widget-header>
    <rd-widget-taskbar classes="col-lg-12">
      <div class="pull-left">
@ -25,7 +28,7 @@
        <a class="btn btn-default" type="button" ui-sref="actions.create.container">Add container</a>
      </div>
      <div class="pull-right">
-        <input type="checkbox" ng-model="state.displayAll" id="displayAll" ng-change="toggleGetAll()"/><label for="displayAll">Display All</label>
+        <input type="checkbox" ng-model="state.displayAll" id="displayAll" ng-change="toggleGetAll()" style="margin-top: -2px; margin-right: 5px;"/><label for="displayAll">Show all containers</label>
        <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
      </div>
    </rd-widget-taskbar>
--- a/app/components/containers/containersController.js
+++ b/app/components/containers/containersController.js
@ -1,6 +1,6 @@
 angular.module('containers', [])
-.controller('ContainersController', ['$scope', 'Container', 'Settings', 'Messages', 'ViewSpinner', 'Config', 'errorMsgFilter',
-function ($scope, Container, Settings, Messages, ViewSpinner, Config, errorMsgFilter) {
+.controller('ContainersController', ['$scope', 'Container', 'Settings', 'Messages', 'Config', 'errorMsgFilter',
+function ($scope, Container, Settings, Messages, Config, errorMsgFilter) {

  $scope.state = {};
  $scope.state.displayAll = Settings.displayAll;
@ -14,7 +14,7 @@ function ($scope, Container, Settings, Messages, ViewSpinner, Config, errorMsgFi
  };

  var update = function (data) {
-    ViewSpinner.spin();
+    $('#loadContainersSpinner').show();
    $scope.state.selectedItemCount = 0;
    Container.query(data, function (d) {
      var containers = d;
@ -24,17 +24,17 @@ function ($scope, Container, Settings, Messages, ViewSpinner, Config, errorMsgFi
      $scope.containers = containers.map(function (container) {
        return new ContainerViewModel(container);
      });
-      ViewSpinner.stop();
+      $('#loadContainersSpinner').hide();
    });
  };

  var batch = function (items, action, msg) {
-    ViewSpinner.spin();
+    $('#loadContainersSpinner').show();
    var counter = 0;
    var complete = function () {
      counter = counter - 1;
      if (counter === 0) {
-        ViewSpinner.stop();
+        $('#loadContainersSpinner').hide();
        update({all: Settings.displayAll ? 1 : 0});
      }
    };
@ -89,7 +89,7 @@ function ($scope, Container, Settings, Messages, ViewSpinner, Config, errorMsgFi
      }
    });
    if (counter === 0) {
-      ViewSpinner.stop();
+      $('#loadContainersSpinner').hide();
    }
  };

--- a/app/components/createContainer/createContainerController.js
+++ b/app/components/createContainer/createContainerController.js
@ -1,6 +1,6 @@
 angular.module('createContainer', [])
-.controller('CreateContainerController', ['$scope', '$state', 'Config', 'Container', 'Image', 'Volume', 'Network', 'Messages', 'ViewSpinner', 'errorMsgFilter',
-function ($scope, $state, Config, Container, Image, Volume, Network, Messages, ViewSpinner, errorMsgFilter) {
+.controller('CreateContainerController', ['$scope', '$state', 'Config', 'Container', 'Image', 'Volume', 'Network', 'Messages', 'errorMsgFilter',
+function ($scope, $state, Config, Container, Image, Volume, Network, Messages, errorMsgFilter) {

  $scope.state = {
    alwaysPull: true
@ -8,9 +8,12 @@ function ($scope, $state, Config, Container, Image, Volume, Network, Messages, V

  $scope.formValues = {
    Console: 'none',
-    Volumes: []
+    Volumes: [],
+    Registry: ''
  };

+  $scope.imageConfig = {};
+
  $scope.config = {
    Env: [],
    HostConfig: {
@ -80,59 +83,67 @@ function ($scope, $state, Config, Container, Image, Volume, Network, Messages, V
  });

  function createContainer(config) {
-    ViewSpinner.spin();
+    $('#createContainerSpinner').show();
    Container.create(config, function (d) {
      if (d.Id) {
        var reqBody = config.HostConfig || {};
        reqBody.id = d.Id;
        Container.start(reqBody, function (cd) {
-          ViewSpinner.stop();
+          $('#createContainerSpinner').hide();
          Messages.send('Container Started', d.Id);
          $state.go('containers', {}, {reload: true});
        }, function (e) {
-          ViewSpinner.stop();
+          $('#createContainerSpinner').hide();
          Messages.error('Error', errorMsgFilter(e));
        });
      } else {
-        ViewSpinner.stop();
+        $('#createContainerSpinner').hide();
        Messages.error('Error', errorMsgFilter(d));
      }
    }, function (e) {
-      ViewSpinner.stop();
+      $('#createContainerSpinner').hide();
      Messages.error('Error', errorMsgFilter(e));
    });
  }

-  function createImageConfig(imageName) {
-    var imageNameAndTag = imageName.split(':');
-    var imageConfig = {
-      fromImage: imageNameAndTag[0],
-      tag: imageNameAndTag[1] ? imageNameAndTag[1] : 'latest'
-    };
-    return imageConfig;
-  }
-
  function pullImageAndCreateContainer(config) {
-    ViewSpinner.spin();
-
-    var image = _.toLower(config.Image);
-    var imageConfig = createImageConfig(image);
-
-    Image.create(imageConfig, function (data) {
+    $('#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];
-          ViewSpinner.stop();
+          $('#createContainerSpinner').hide();
          Messages.error('Error', detail.error);
        } else {
          createContainer(config);
        }
    }, function (e) {
-      ViewSpinner.stop();
+      $('#createContainerSpinner').hide();
      Messages.error('Error', 'Unable to pull image ' + image);
    });
  }

+  function createImageConfig(imageName, registry) {
+    var imageNameAndTag = imageName.split(':');
+    var image = imageNameAndTag[0];
+    if (registry) {
+      image = registry + '/' + imageNameAndTag[0];
+    }
+    var imageConfig = {
+      fromImage: image,
+      tag: imageNameAndTag[1] ? imageNameAndTag[1] : 'latest'
+    };
+    return imageConfig;
+  }
+
+  function prepareImageConfig(config) {
+    var image = _.toLower(config.Image);
+    var registry = $scope.formValues.Registry;
+    var imageConfig = createImageConfig(image, registry);
+    config.Image = imageConfig.fromImage + ':' + imageConfig.tag;
+    $scope.imageConfig = imageConfig;
+  }
+
  function preparePortBindings(config) {
    var bindings = {};
    config.HostConfig.PortBindings.forEach(function (portBinding) {
@ -192,6 +203,7 @@ function ($scope, $state, Config, Container, Image, Volume, Network, Messages, V

  function prepareConfiguration() {
    var config = angular.copy($scope.config);
+    prepareImageConfig(config);
    preparePortBindings(config);
    prepareConsole(config);
    prepareEnvironmentVariables(config);
--- a/app/components/createContainer/createcontainer.html
+++ b/app/components/createContainer/createcontainer.html
@ -18,11 +18,15 @@
            </div>
          </div>
          <!-- !name-input -->
-          <!-- image input -->
+          <!-- image-and-registry-inputs -->
          <div class="form-group">
-            <label for="container_image" class="col-sm-1 control-label text-left">Image</label>
-            <div class="col-sm-11">
-              <input type="text" class="form-control" ng-model="config.Image" id="container_image" placeholder="ubuntu:trusty">
+            <label for="container_image" class="col-sm-1 control-label text-left">Name</label>
+            <div class="col-sm-7">
+              <input type="text" class="form-control" ng-model="config.Image" id="container_image" placeholder="e.g. ubuntu:trusty">
+            </div>
+            <label for="image_registry" class="col-sm-1 control-label text-left">Registry</label>
+            <div class="col-sm-3">
+              <input type="text" class="form-control" ng-model="formValues.Registry" id="image_registry" placeholder="leave empty to use DockerHub">
            </div>
            <div class="col-sm-offset-1 col-sm-11">
              <div class="checkbox">
@ -32,7 +36,7 @@
              </div>
            </div>
          </div>
-          <!-- !image-input -->
+          <!-- !image-and-registry-inputs -->
          <!-- restart-policy -->
          <div class="form-group">
            <label class="col-sm-1 control-label text-left">Restart policy</label>
@ -306,6 +310,9 @@

 <div class="row">
  <div class="col-lg-12 col-md-12 col-xs-12" style="text-align: center;">
+    <div>
+      <i id="createContainerSpinner" class="fa fa-cog fa-3x fa-spin" style="margin-bottom: 5px; display: none;"></i>
+    </div>
    <button type="button" class="btn btn-default btn-lg" ng-click="create()">Create</button>
    <a type="button" class="btn btn-default btn-lg" ui-sref="containers">Cancel</a>
  </div>
--- a/app/components/createNetwork/createNetworkController.js
+++ b/app/components/createNetwork/createNetworkController.js
@ -1,6 +1,6 @@
 angular.module('createNetwork', [])
-.controller('CreateNetworkController', ['$scope', '$state', 'Messages', 'Network', 'ViewSpinner', 'errorMsgFilter',
-function ($scope, $state, Messages, Network, ViewSpinner, errorMsgFilter) {
+.controller('CreateNetworkController', ['$scope', '$state', 'Messages', 'Network', 'errorMsgFilter',
+function ($scope, $state, Messages, Network, errorMsgFilter) {
  $scope.formValues = {
    DriverOptions: []
  };
@ -20,18 +20,18 @@ function ($scope, $state, Messages, Network, ViewSpinner, errorMsgFilter) {
  };

  function createNetwork(config) {
-    ViewSpinner.spin();
+    $('#createNetworkSpinner').show();
    Network.create(config, function (d) {
      if (d.Id) {
        Messages.send("Network created", d.Id);
-        ViewSpinner.stop();
+        $('#createNetworkSpinner').hide();
        $state.go('networks', {}, {reload: true});
      } else {
-        ViewSpinner.stop();
+        $('#createNetworkSpinner').hide();
        Messages.error('Unable to create network', errorMsgFilter(d));
      }
    }, function (e) {
-      ViewSpinner.stop();
+      $('#createNetworkSpinner').hide();
      Messages.error('Unable to create network', e.data);
    });
  }
--- a/app/components/createNetwork/createnetwork.html
+++ b/app/components/createNetwork/createnetwork.html
@ -74,6 +74,9 @@

 <div class="row">
  <div class="col-lg-12 col-md-12 col-xs-12" style="text-align: center;">
+    <div>
+      <i id="createNetworkSpinner" class="fa fa-cog fa-3x fa-spin" style="margin-bottom: 5px; display: none;"></i>
+    </div>
    <button type="button" class="btn btn-default btn-lg" ng-click="create()">Create</button>
    <a type="button" class="btn btn-default btn-lg" ui-sref="networks">Cancel</a>
  </div>
--- a/app/components/createVolume/createVolumeController.js
+++ b/app/components/createVolume/createVolumeController.js
@ -1,6 +1,6 @@
 angular.module('createVolume', [])
-.controller('CreateVolumeController', ['$scope', '$state', 'Volume', 'Messages', 'ViewSpinner', 'errorMsgFilter',
-function ($scope, $state, Volume, Messages, ViewSpinner, errorMsgFilter) {
+.controller('CreateVolumeController', ['$scope', '$state', 'Volume', 'Messages', 'errorMsgFilter',
+function ($scope, $state, Volume, Messages, errorMsgFilter) {

  $scope.formValues = {
    DriverOptions: []
@ -19,18 +19,18 @@ function ($scope, $state, Volume, Messages, ViewSpinner, errorMsgFilter) {
  };

  function createVolume(config) {
-    ViewSpinner.spin();
+    $('#createVolumeSpinner').show();
    Volume.create(config, function (d) {
      if (d.Name) {
        Messages.send("Volume created", d.Name);
-        ViewSpinner.stop();
+        $('#createVolumeSpinner').hide();
        $state.go('volumes', {}, {reload: true});
      } else {
-        ViewSpinner.stop();
+        $('#createVolumeSpinner').hide();
        Messages.error('Unable to create volume', errorMsgFilter(d));
      }
    }, function (e) {
-      ViewSpinner.stop();
+      $('#createVolumeSpinner').hide();
      Messages.error('Unable to create volume', e.data);
    });
  }
--- a/app/components/createVolume/createvolume.html
+++ b/app/components/createVolume/createvolume.html
@ -63,6 +63,9 @@

 <div class="row">
  <div class="col-lg-12 col-md-12 col-xs-12" style="text-align: center;">
+    <div>
+      <i id="createVolumeSpinner" class="fa fa-cog fa-3x fa-spin" style="margin-bottom: 5px; display: none;"></i>
+    </div>
    <button type="button" class="btn btn-default btn-lg" ng-click="create()">Create</button>
    <a type="button" class="btn btn-default btn-lg" ui-sref="volumes">Cancel</a>
  </div>
--- a/app/components/dashboard/dashboardController.js
+++ b/app/components/dashboard/dashboardController.js
@ -1,5 +1,6 @@
 angular.module('dashboard', [])
-  .controller('DashboardController', ['$scope', 'Container', 'Image', 'Settings', 'LineChart', function ($scope, Container, Image, Settings, LineChart) {
+.controller('DashboardController', ['$scope', 'Config', 'Container', 'Image', 'Settings', 'LineChart',
+function ($scope, Config, Container, Image, Settings, LineChart) {

  $scope.containerData = {};

@ -17,30 +18,52 @@ angular.module('dashboard', [])
    });
  };

-  Container.query({all: 1}, function (d) {
-    var running = 0;
-    var ghost = 0;
-    var stopped = 0;
+  function fetchDashboardData() {
+    Container.query({all: 1}, function (d) {
+      var running = 0;
+      var ghost = 0;
+      var stopped = 0;

-    // TODO: centralize that
-    var containers = d.filter(function (container) {
-      return container.Image !== 'swarm';
-    });
-
-    for (var i = 0; i < containers.length; i++) {
-      var item = containers[i];
-      if (item.Status === "Ghost") {
-        ghost += 1;
-      } else if (item.Status.indexOf('Exit') !== -1) {
-        stopped += 1;
-      } else {
-        running += 1;
+      var containers = d;
+      if (hiddenLabels) {
+        containers = hideContainers(d);
      }
-    }
-    $scope.containerData.running = running;
-    $scope.containerData.stopped = stopped;
-    $scope.containerData.ghost = ghost;

-    buildCharts(containers);
+      for (var i = 0; i < containers.length; i++) {
+        var item = containers[i];
+        if (item.Status === "Ghost") {
+          ghost += 1;
+        } else if (item.Status.indexOf('Exit') !== -1) {
+          stopped += 1;
+        } else {
+          running += 1;
+        }
+      }
+      $scope.containerData.running = running;
+      $scope.containerData.stopped = stopped;
+      $scope.containerData.ghost = ghost;
+
+      buildCharts(containers);
+    });
+  }
+
+  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) {
+    hiddenLabels = c.hiddenLabels;
+    fetchDashboardData();
  });
 }]);
--- a/app/components/images/images.html
+++ b/app/components/images/images.html
@ -4,7 +4,6 @@
      <i class="fa fa-refresh" aria-hidden="true"></i>
    </a>
  </rd-header-title>
-
  <rd-header-content>Images</rd-header-content>
 </rd-header>

@ -15,14 +14,18 @@
      </rd-widget-header>
      <rd-widget-body>
        <form class="form-horizontal">
-          <!-- name-input -->
+          <!-- name-and-registry-inputs -->
          <div class="form-group">
            <label for="image_name" class="col-sm-1 control-label text-left">Name</label>
-            <div class="col-sm-11">
+            <div class="col-sm-7">
              <input type="text" class="form-control" ng-model="config.Image" id="image_name" placeholder="e.g. ubuntu:trusty">
            </div>
+            <label for="image_registry" class="col-sm-1 control-label text-left">Registry</label>
+            <div class="col-sm-3">
+              <input type="text" class="form-control" ng-model="config.Registry" id="image_registry" placeholder="leave empty to use DockerHub">
+            </div>
          </div>
-          <!-- !name-input -->
+          <!-- !name-and-registry-inputs -->
          <!-- tag-note -->
          <div class="form-group">
            <div class="col-sm-12">
@ -33,6 +36,7 @@
          <div class="form-group">
            <div class="col-sm-12">
              <button type="button" class="btn btn-default btn-sm" ng-disabled="!config.Image" ng-click="pullImage()">Pull</button>
+              <i id="pullImageSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
            </div>
          </div>
        </form>
@ -45,6 +49,9 @@
  <div class="col-lg-12 col-md-12 col-xs-12">
    <rd-widget>
      <rd-widget-header icon="fa-clone" title="Images">
+        <div class="pull-right">
+          <i id="loadImagesSpinner" class="fa fa-cog fa-2x fa-spin" style="margin-top: 5px;"></i>
+        </div>
      </rd-widget-header>
      <rd-widget-taskbar classes="col-lg-12">
        <div class="pull-left">
--- a/app/components/images/imagesController.js
+++ b/app/components/images/imagesController.js
@ -1,6 +1,6 @@
 angular.module('images', [])
-.controller('ImagesController', ['$scope', '$state', 'Image', 'ViewSpinner', 'Messages',
-function ($scope, $state, Image, ViewSpinner, Messages) {
+.controller('ImagesController', ['$scope', '$state', 'Image', 'Messages',
+function ($scope, $state, Image, Messages) {
  $scope.state = {};
  $scope.sortType = 'Created';
  $scope.sortReverse = true;
@ -8,7 +8,8 @@ function ($scope, $state, Image, ViewSpinner, Messages) {
  $scope.state.selectedItemCount = 0;

  $scope.config = {
-    Image: ''
+    Image: '',
+    Registry: '',
  };

  $scope.order = function(sortType) {
@ -35,42 +36,47 @@ function ($scope, $state, Image, ViewSpinner, Messages) {
    }
  };

-  function createImageConfig(imageName) {
+  function createImageConfig(imageName, registry) {
    var imageNameAndTag = imageName.split(':');
+    var image = imageNameAndTag[0];
+    if (registry) {
+      image = registry + '/' + imageNameAndTag[0];
+    }
    var imageConfig = {
-      fromImage: imageNameAndTag[0],
+      fromImage: image,
      tag: imageNameAndTag[1] ? imageNameAndTag[1] : 'latest'
    };
    return imageConfig;
  }

  $scope.pullImage = function() {
-    ViewSpinner.spin();
+    $('#pullImageSpinner').show();
    var image = _.toLower($scope.config.Image);
-    var imageConfig = createImageConfig(image);
+    var registry = _.toLower($scope.config.Registry);
+    var imageConfig = createImageConfig(image, registry);
    Image.create(imageConfig, function (data) {
        var err = data.length > 0 && data[data.length - 1].hasOwnProperty('error');
        if (err) {
          var detail = data[data.length - 1];
-          ViewSpinner.stop();
+          $('#pullImageSpinner').hide();
          Messages.error('Error', detail.error);
        } else {
-          ViewSpinner.stop();
+          $('#pullImageSpinner').hide();
          $state.go('images', {}, {reload: true});
        }
    }, function (e) {
-      ViewSpinner.stop();
+      $('#pullImageSpinner').hide();
      Messages.error('Error', 'Unable to pull image ' + image);
    });
  };

  $scope.removeAction = function () {
-    ViewSpinner.spin();
+    $('#loadImagesSpinner').show();
    var counter = 0;
    var complete = function () {
      counter = counter - 1;
      if (counter === 0) {
-        ViewSpinner.stop();
+        $('#loadImagesSpinner').hide();
      }
    };
    angular.forEach($scope.images, function (i) {
@ -85,6 +91,7 @@ function ($scope, $state, Image, ViewSpinner, Messages) {
          complete();
        }, function (e) {
          Messages.error("Failure", e.data);
+          $('#loadImagesSpinner').hide();
          complete();
        });
      }
@ -92,15 +99,14 @@ function ($scope, $state, Image, ViewSpinner, Messages) {
  };

  function fetchImages() {
-    ViewSpinner.spin();
    Image.query({}, function (d) {
      $scope.images = d.map(function (item) {
        return new ImageViewModel(item);
      });
-      ViewSpinner.stop();
+      $('#loadImagesSpinner').hide();
    }, function (e) {
      Messages.error("Failure", e.data);
-      ViewSpinner.stop();
+      $('#loadImagesSpinner').hide();
    });
  }

--- a/app/components/network/network.html
+++ b/app/components/network/network.html
@ -1,5 +1,7 @@
 <rd-header>
-  <rd-header-title title="Network details"></rd-header-title>
+  <rd-header-title title="Network details">
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
+  </rd-header-title>
  <rd-header-content>
    Networks > <a ui-sref="network({id: network.Id})">{{ network.Name }}</a>
  </rd-header-content>
--- a/app/components/network/networkController.js
+++ b/app/components/network/networkController.js
@ -1,37 +1,37 @@
 angular.module('network', [])
-.controller('NetworkController', ['$scope', 'Network', 'ViewSpinner', 'Messages', '$state', '$stateParams', 'errorMsgFilter',
-function ($scope, Network, ViewSpinner, Messages, $state, $stateParams, errorMsgFilter) {
+.controller('NetworkController', ['$scope', 'Network', 'Messages', '$state', '$stateParams', 'errorMsgFilter',
+function ($scope, Network, Messages, $state, $stateParams, errorMsgFilter) {

  $scope.disconnect = function disconnect(networkId, containerId) {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
    Network.disconnect({id: $stateParams.id}, {Container: containerId}, function (d) {
-      ViewSpinner.stop();
+      $('#loadingViewSpinner').hide();
      Messages.send("Container disconnected", containerId);
      $state.go('network', {id: $stateParams.id}, {reload: true});
    }, function (e) {
-      ViewSpinner.stop();
+      $('#loadingViewSpinner').hide();
      Messages.error("Failure", e.data);
    });
  };

  $scope.remove = function remove(networkId) {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
    Network.remove({id: $stateParams.id}, function (d) {
-      ViewSpinner.stop();
+      $('#loadingViewSpinner').hide();
      Messages.send("Network removed", "");
      $state.go('networks', {});
    }, function (e) {
-      ViewSpinner.stop();
+      $('#loadingViewSpinner').hide();
      Messages.error("Failure", e.data);
    });
  };

-  ViewSpinner.spin();
+  $('#loadingViewSpinner').show();
  Network.get({id: $stateParams.id}, function (d) {
    $scope.network = d;
-    ViewSpinner.stop();
+    $('#loadingViewSpinner').hide();
  }, function (e) {
    Messages.error("Failure", e.data);
-    ViewSpinner.stop();
+    $('#loadingViewSpinner').hide();
  });
 }]);
--- a/app/components/networks/networks.html
+++ b/app/components/networks/networks.html
@ -1,5 +1,3 @@
-<div ng-include="template" ng-controller="CreateNetworkController"></div>
-
 <rd-header>
  <rd-header-title title="Network list">
    <a data-toggle="tooltip" title="Refresh" ui-sref="networks" ui-sref-opts="{reload: true}">
@ -9,10 +7,12 @@
  <rd-header-content>Networks</rd-header-content>
 </rd-header>

-
 <div class="col-lg-12">
  <rd-widget>
    <rd-widget-header icon="fa-sitemap" title="Networks">
+      <div class="pull-right">
+        <i id="loadNetworksSpinner" class="fa fa-cog fa-2x fa-spin" style="margin-top: 5px;"></i>
+      </div>
    </rd-widget-header>
    <rd-widget-taskbar classes="col-lg-12">
      <div class="pull-left">
--- a/app/components/networks/networksController.js
+++ b/app/components/networks/networksController.js
@ -1,6 +1,6 @@
 angular.module('networks', [])
-.controller('NetworksController', ['$scope', 'Network', 'ViewSpinner', 'Messages', 'errorMsgFilter',
-function ($scope, Network, ViewSpinner, Messages, errorMsgFilter) {
+.controller('NetworksController', ['$scope', 'Network', 'Messages', 'errorMsgFilter',
+function ($scope, Network, Messages, errorMsgFilter) {

  $scope.state = {};
  $scope.state.toggle = false;
@ -33,12 +33,12 @@ function ($scope, Network, ViewSpinner, Messages, errorMsgFilter) {
  };

  $scope.removeAction = function () {
-    ViewSpinner.spin();
+    $('#loadNetworksSpinner').show();
    var counter = 0;
    var complete = function () {
      counter = counter - 1;
      if (counter === 0) {
-        ViewSpinner.stop();
+        $('#loadNetworksSpinner').hide();
      }
    };
    angular.forEach($scope.networks, function (network) {
@ -58,13 +58,13 @@ function ($scope, Network, ViewSpinner, Messages, errorMsgFilter) {
  };

  function fetchNetworks() {
-    ViewSpinner.spin();
+    $('#loadNetworksSpinner').show();
    Network.query({}, function (d) {
      $scope.networks = d;
-      ViewSpinner.stop();
+      $('#loadNetworksSpinner').hide();
    }, function (e) {
      Messages.error("Failure", e.data);
-      ViewSpinner.stop();
+      $('#loadNetworksSpinner').hide();
    });
  }
  fetchNetworks();
--- a/app/components/swarm/swarm.html
+++ b/app/components/swarm/swarm.html
@ -54,10 +54,6 @@
              <td>Nodes</td>
              <td>{{ swarm.Nodes }}</td>
            </tr>
-            <tr>
-              <td>Containers</td>
-              <td>{{ info.Containers }}</td>
-            </tr>
            <tr>
              <td>Images</td>
              <td>{{ info.Images }}</td>
@ -108,13 +104,6 @@
                  <span ng-show="sortType == 'IP' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                </a>
              </th>
-              <th>
-                <a ui-sref="swarm" ng-click="order('Containers')">
-                  Containers
-                  <span ng-show="sortType == 'Containers' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'Containers' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
-                </a>
-              </th>
              <th>
                <a ui-sref="swarm" ng-click="order('Engine')">
                  Engine
@ -135,7 +124,6 @@
            <tr ng-repeat="node in (state.filteredNodes = (swarm.Status | filter:state.filter | orderBy:sortType:sortReverse))">
              <td>{{ node.name }}</td>
              <td>{{ node.ip }}</td>
-              <td>{{ node.containers }}</td>
              <td>{{ node.version }}</td>
              <td><span class="label label-{{ node.status|nodestatusbadge }}">{{ node.status }}</span></td>
            </tr>
--- a/app/components/swarm/swarmController.js
+++ b/app/components/swarm/swarmController.js
@ -42,7 +42,7 @@ angular.module('swarm', [])
        var node_offset = 4;
        for (i = 0; i < node_count; i++) {
          extractNodeInfo(info, node_offset);
-          node_offset += 10;
+          node_offset += 9;
        }
      }

--- a/app/components/volumes/volumes.html
+++ b/app/components/volumes/volumes.html
@ -1,5 +1,3 @@
-<div ng-include="template" ng-controller="CreateVolumeController"></div>
-
 <rd-header>
  <rd-header-title title="Volume list">
    <a data-toggle="tooltip" title="Refresh" ui-sref="volumes" ui-sref-opts="{reload: true}">
@ -12,6 +10,9 @@
 <div class="col-lg-12">
  <rd-widget>
    <rd-widget-header icon="fa-cubes" title="Volumes">
+      <div class="pull-right">
+        <i id="loadVolumesSpinner" class="fa fa-cog fa-2x fa-spin" style="margin-top: 5px;"></i>
+      </div>
    </rd-widget-header>
    <rd-widget-taskbar classes="col-lg-12">
      <div class="pull-left">
--- a/app/components/volumes/volumesController.js
+++ b/app/components/volumes/volumesController.js
@ -1,6 +1,6 @@
 angular.module('volumes', [])
-.controller('VolumesController', ['$scope', 'Volume', 'ViewSpinner', 'Messages', 'errorMsgFilter',
-function ($scope, Volume, ViewSpinner, Messages, errorMsgFilter) {
+.controller('VolumesController', ['$scope', 'Volume', 'Messages', 'errorMsgFilter',
+function ($scope, Volume, Messages, errorMsgFilter) {
  $scope.state = {};
  $scope.state.toggle = false;
  $scope.state.selectedItemCount = 0;
@ -32,12 +32,12 @@ function ($scope, Volume, ViewSpinner, Messages, errorMsgFilter) {
  };

  $scope.removeAction = function () {
-    ViewSpinner.spin();
+    $('#loadVolumesSpinner').show();
    var counter = 0;
    var complete = function () {
      counter = counter - 1;
      if (counter === 0) {
-        ViewSpinner.stop();
+        $('#loadVolumesSpinner').hide();
      }
    };
    angular.forEach($scope.volumes, function (volume) {
@ -57,13 +57,13 @@ function ($scope, Volume, ViewSpinner, Messages, errorMsgFilter) {
  };

  function fetchVolumes() {
-    ViewSpinner.spin();
+    $('#loadVolumesSpinner').show();
    Volume.query({}, function (d) {
      $scope.volumes = d.Volumes;
-      ViewSpinner.stop();
+      $('#loadVolumesSpinner').hide();
    }, function (e) {
      Messages.error("Failure", e.data);
-      ViewSpinner.stop();
+      $('#loadVolumesSpinner').hide();
    });
  }
  fetchVolumes();
--- a/app/shared/services.js
+++ b/app/shared/services.js
@ -153,27 +153,13 @@ angular.module('dockerui.services', ['ngResource', 'ngSanitize'])
        }
        var firstLoad = (localStorage.getItem('firstLoad') || 'true') === 'true';
        return {
-          displayAll: false,
+          displayAll: true,
          endpoint: DOCKER_ENDPOINT,
          uiVersion: UI_VERSION,
          url: url,
          firstLoad: firstLoad
        };
    }])
-    .factory('ViewSpinner', function ViewSpinnerFactory() {
-        'use strict';
-        var spinner = new Spinner();
-        var target = document.getElementById('view');
-
-        return {
-            spin: function () {
-                spinner.spin(target);
-            },
-            stop: function () {
-                spinner.stop();
-            }
-        };
-    })
    .factory('Messages', ['$rootScope', '$sanitize', function MessagesFactory($rootScope, $sanitize) {
        'use strict';
        return {
--- a/bower.json
+++ b/bower.json
@ -1,6 +1,6 @@
 {
  "name": "uifordocker",
-  "version": "1.2.0",
+  "version": "1.3.0",
  "homepage": "https://github.com/kevana/ui-for-docker",
  "authors": [
    "Michael Crosby <crosbymichael@gmail.com>",
@ -34,12 +34,11 @@
    "angular-resource": "~1.5.0",
    "angular-ui-select": "~0.17.1",
    "bootstrap": "~3.3.6",
-    "font-awesome": "~4.5.0",
+    "font-awesome": "~4.6.3",
    "jquery": "1.11.1",
    "jquery.gritter": "1.7.4",
    "lodash": "4.12.0",
    "rdash-ui": "1.0.*",
-    "spin.js": "1.3"
  },
  "resolutions": {
    "angular": "1.5.5"
--- a/dockerui.go
+++ b/dockerui.go
@ -173,7 +173,7 @@ func csrfWrapper(h http.Handler) http.Handler {
 }

 func main() {
-	kingpin.Version("1.2.0")
+	kingpin.Version("1.3.0")
 	kingpin.Parse()

 	configuration := Config{
--- a/gruntFile.js
+++ b/gruntFile.js
@ -69,7 +69,6 @@ module.exports = function (grunt) {
                'bower_components/jquery/dist/jquery.min.js',
                'assets/js/jquery.gritter.js', // Using custom version to fix error in minified build due to "use strict"
                'bower_components/bootstrap/dist/js/bootstrap.min.js',
-                'bower_components/spin.js/spin.js',
                'bower_components/Chart.js/Chart.min.js',
                'bower_components/lodash/dist/lodash.min.js',
                'bower_components/oboe/dist/oboe-browser.js',
--- a/package.json
+++ b/package.json
@ -2,7 +2,7 @@
  "author": "Michael Crosby & Kevan Ahlquist",
  "name": "uifordocker",
  "homepage": "https://github.com/kevana/ui-for-docker",
-  "version": "1.2.0",
+  "version": "1.3.0",
  "repository": {
    "type": "git",
    "url": "git@github.com:kevana/ui-for-docker.git"