Merge branch 'release/1.2.0'

app/app.js

@@ -14,7 +14,6 @@ angular.module('uifordocker', [
   'docker',
   'images',
   'image',
-  'pullImage',
   'containerLogs',
   'stats',
   'swarm',
@@ -72,6 +71,16 @@ angular.module('uifordocker', [
       templateUrl: 'app/components/createContainer/createcontainer.html',
       controller: 'CreateContainerController'
     })
+    .state('actions.create.volume', {
+      url: "/volume",
+      templateUrl: 'app/components/createVolume/createvolume.html',
+      controller: 'CreateVolumeController'
+    })
+    .state('actions.create.network', {
+      url: "/network",
+      templateUrl: 'app/components/createNetwork/createnetwork.html',
+      controller: 'CreateNetworkController'
+    })
     .state('docker', {
       url: '/docker/',
       templateUrl: 'app/components/docker/docker.html',
@@ -135,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.1.0');
+  .constant('UI_VERSION', 'v1.2.0');

app/components/createContainer/createContainerController.js

@@ -8,7 +8,7 @@ function ($scope, $state, Config, Container, Image, Volume, Network, Messages, V
 
   $scope.formValues = {
     Console: 'none',
-    Volumes: [],
+    Volumes: []
   };
 
   $scope.config = {
@@ -201,7 +201,6 @@ function ($scope, $state, Config, Container, Image, Volume, Network, Messages, V
 
   $scope.create = function () {
     var config = prepareConfiguration();
-    console.log(JSON.stringify(config, null, 4));
 
     if ($scope.state.alwaysPull) {
       pullImageAndCreateContainer(config);

app/components/createNetwork/createNetwork.html

@@ -1,45 +0,0 @@
-<div id="create-network-modal" class="modal fade">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times" aria-hidden="true"></i></button>
-        <h3>Create network</h3>
-      </div>
-      <div class="modal-body">
-        <form novalidate role="form" name="createNetworkForm">
-          <div class="form-group">
-            <label>Name:</label>
-            <input type="text" placeholder='my_network'
-            ng-model="createNetworkConfig.Name" class="form-control"/>
-          </div>
-          <div class="form-group">
-            <label>Driver:</label>
-            <input type="text" placeholder='bridge'
-            ng-model="createNetworkConfig.Driver" class="form-control"/>
-          </div>
-          <div class="form-group">
-            <label>Subnet:</label>
-            <input type="text" placeholder='172.20.0.0/16'
-            ng-model="createNetworkConfig.IPAM.Config[0].Subnet" class="form-control"/>
-          </div>
-          <div class="form-group">
-            <label>IPRange:</label>
-            <input type="text" placeholder='172.20.10.0/24'
-            ng-model="createNetworkConfig.IPAM.Config[0].IPRange" class="form-control"/>
-          </div>
-          <div class="form-group">
-            <label>Gateway:</label>
-            <input type="text" placeholder='172.20.10.11'
-            ng-model="createNetworkConfig.IPAM.Config[0].Gateway" class="form-control"/>
-          </div>
-        </form>
-      </div>
-      <div class="alert alert-error" id="error-message" style="display:none">
-        {{ error }}
-      </div>
-      <div class="modal-footer">
-        <a href="" class="btn btn-primary" ng-click="createNetwork(createNetworkConfig)">Create</a>
-      </div>
-    </div>
-  </div>
-</div>

app/components/createNetwork/createNetworkController.js

@@ -1,41 +1,57 @@
 angular.module('createNetwork', [])
 .controller('CreateNetworkController', ['$scope', '$state', 'Messages', 'Network', 'ViewSpinner', 'errorMsgFilter',
 function ($scope, $state, Messages, Network, ViewSpinner, errorMsgFilter) {
-  $scope.template = 'app/components/createNetwork/createNetwork.html';
-
-  $scope.init = function () {
-    $scope.createNetworkConfig = {
-      "Name": '',
-      "Driver": '',
-      "IPAM": {
-        "Config": [{}]
-      }
-    };
+  $scope.formValues = {
+    DriverOptions: []
   };
 
-  $scope.init();
+  $scope.config = {
+    Driver: 'bridge',
+    CheckDuplicate: true,
+    Internal: false
+  };
 
-  $scope.createNetwork = function addNetwork(createNetworkConfig) {
-    if (_.isEmpty(createNetworkConfig.IPAM.Config[0])) {
-      delete createNetworkConfig.IPAM;
-    }
-    $('#error-message').hide();
+  $scope.addDriverOption = function() {
+    $scope.formValues.DriverOptions.push({ name: '', value: '' });
+  };
+
+  $scope.removeDriverOption = function(index) {
+    $scope.formValues.DriverOptions.splice(index, 1);
+  };
+
+  function createNetwork(config) {
     ViewSpinner.spin();
-    $('#create-network-modal').modal('hide');
-    Network.create(createNetworkConfig, function (d) {
+    Network.create(config, function (d) {
       if (d.Id) {
         Messages.send("Network created", d.Id);
+        ViewSpinner.stop();
+        $state.go('networks', {}, {reload: true});
       } else {
-        Messages.error('Failure', errorMsgFilter(d));
+        ViewSpinner.stop();
+        Messages.error('Unable to create network', errorMsgFilter(d));
       }
-      ViewSpinner.stop();
-      $scope.init();
-      $state.go('networks', {}, {reload: true});
     }, function (e) {
       ViewSpinner.stop();
-      $scope.error = "Cannot pull image " + imageName + " Reason: " + e.data;
-      $('#create-network-modal').modal('show');
-      $('#error-message').show();
+      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);
   };
 }]);

app/components/createNetwork/createnetwork.html

@@ -0,0 +1,80 @@
+<rd-header>
+  <rd-header-title title="Create network"></rd-header-title>
+  <rd-header-content>
+    Networks > Add network
+  </rd-header-content>
+</rd-header>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-body>
+        <form class="form-horizontal">
+          <!-- name-input -->
+          <div class="form-group">
+            <label for="network_name" class="col-sm-1 control-label text-left">Name</label>
+            <div class="col-sm-11">
+              <input type="text" class="form-control" ng-model="config.Name" id="network_name" placeholder="e.g. myNetwork">
+            </div>
+          </div>
+          <!-- !name-input -->
+          <!-- driver-input -->
+          <div class="form-group">
+            <label for="network_driver" class="col-sm-1 control-label text-left">Driver</label>
+            <div class="col-sm-11">
+              <input type="text" class="form-control" ng-model="config.Driver" id="network_driver" placeholder="e.g. driverName">
+            </div>
+          </div>
+          <!-- !driver-input -->
+          <!-- driver-options -->
+          <div class="form-group">
+            <label for="network_driveropts" class="col-sm-1 control-label text-left">Driver options</label>
+            <div class="col-sm-11">
+              <span class="label label-default clickable" ng-click="addDriverOption()">
+                <i class="fa fa-plus-circle" aria-hidden="true"></i> driver option
+              </span>
+            </div>
+            <!-- driver-options-input-list -->
+            <div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;">
+              <div ng-repeat="option in formValues.DriverOptions" style="margin-top: 2px;">
+                <div class="input-group col-sm-5 input-group-sm">
+                  <span class="input-group-addon">name</span>
+                  <input type="text" class="form-control" ng-model="option.name" placeholder="e.g. com.docker.network.bridge.enable_icc">
+                </div>
+                <div class="input-group col-sm-5 input-group-sm">
+                  <span class="input-group-addon">value</span>
+                  <input type="text" class="form-control" ng-model="option.value" placeholder="e.g. true">
+                  <span class="input-group-btn">
+                    <button class="btn btn-default" type="button" ng-click="removeDriverOption($index)">
+                      <i class="fa fa-minus" aria-hidden="true"></i>
+                    </button>
+                  </span>
+                </div>
+              </div>
+            </div>
+            <!-- !driver-options-input-list -->
+          </div>
+          <!-- !driver-options -->
+          <!-- internal -->
+          <div class="form-group">
+            <div class="col-sm-12">
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" ng-model="config.Internal"> Restrict external access to the network
+                </label>
+              </div>
+            </div>
+          </div>
+          <!-- !internal -->
+        </form>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12" style="text-align: center;">
+    <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>
+</div>

app/components/createVolume/createVolume.html

@@ -1,40 +0,0 @@
-<div id="create-volume-modal" class="modal fade">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times" aria-hidden="true"></i></button>
-        <h3>Create volume</h3>
-      </div>
-      <div class="modal-body">
-        <form novalidate role="form" name="createVolumeForm">
-          <div class="form-group">
-            <label>Name:</label>
-            <input type="text" placeholder='my_volume'
-            ng-model="createVolumeConfig.Name" class="form-control"/>
-          </div>
-          <div class="form-group">
-            <label>Driver:</label>
-            <ui-select ng-model="selectedDriver.value" theme="bootstrap">
-              <ui-select-match>
-                  <span ng-bind="$select.selected"></span>
-              </ui-select-match>
-              <ui-select-choices repeat="driver in availableDrivers">
-                  <span ng-bind="driver"></span>
-              </ui-select-choices>
-          </ui-select>
-          </div>
-          <div class="form-group" ng-show="selectedDriver.value == 'local-persist'">
-              <label>Mount point:</label>
-              <input type="text" ng-model="createVolumeConfig.DriverOpts.mountpoint" name="" placeholder="/volume/my_volume" class="form-control">
-          </div>
-        </form>
-      </div>
-      <div class="alert alert-error" id="error-message" style="display:none">
-        {{ error }}
-      </div>
-      <div class="modal-footer">
-        <a href="" class="btn btn-primary" ng-click="addVolume(createVolumeConfig)">Create</a>
-      </div>
-    </div>
-  </div>
-</div>

app/components/createVolume/createVolumeController.js

@@ -1,39 +1,56 @@
 angular.module('createVolume', [])
-.controller('CreateVolumeController', ['$scope', '$state', 'Messages', 'Volume', 'ViewSpinner', 'errorMsgFilter',
-function ($scope, $state, Messages, Volume, ViewSpinner, errorMsgFilter) {
-  $scope.template = 'app/components/createVolume/createVolume.html';
+.controller('CreateVolumeController', ['$scope', '$state', 'Volume', 'Messages', 'ViewSpinner', 'errorMsgFilter',
+function ($scope, $state, Volume, Messages, ViewSpinner, errorMsgFilter) {
 
-  $scope.init = function () {
-    $scope.createVolumeConfig = {
-      "Name": "",
-      "Driver": "",
-      "DriverOpts": {}
-    };
-    $scope.availableDrivers = ['local', 'local-persist'];
-    $scope.selectedDriver = { value: $scope.availableDrivers[0] };
+  $scope.formValues = {
+    DriverOptions: []
   };
 
-  $scope.init();
+  $scope.config = {
+    Driver: 'local'
+  };
 
-  $scope.addVolume = function addVolume(createVolumeConfig) {
-    $('#error-message').hide();
+  $scope.addDriverOption = function() {
+    $scope.formValues.DriverOptions.push({ name: '', value: '' });
+  };
+
+  $scope.removeDriverOption = function(index) {
+    $scope.formValues.DriverOptions.splice(index, 1);
+  };
+
+  function createVolume(config) {
     ViewSpinner.spin();
-    $('#create-volume-modal').modal('hide');
-    createVolumeConfig.Driver = $scope.selectedDriver.value;
-    console.log(JSON.stringify(createVolumeConfig, null, 4));
-    Volume.create(createVolumeConfig, function (d) {
+    Volume.create(config, function (d) {
       if (d.Name) {
         Messages.send("Volume created", d.Name);
+        ViewSpinner.stop();
+        $state.go('volumes', {}, {reload: true});
       } else {
-        Messages.error('Failure', errorMsgFilter(d));
+        ViewSpinner.stop();
+        Messages.error('Unable to create volume', errorMsgFilter(d));
       }
-      ViewSpinner.stop();
-      $state.go('volumes', {}, {reload: true});
     }, function (e) {
       ViewSpinner.stop();
-      $scope.error = "Cannot create volume " + createVolumeConfig.Name + " Reason: " + e.data;
-      $('#create-volume-modal').modal('show');
-      $('#error-message').show();
+      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);
   };
 }]);

app/components/createVolume/createvolume.html

@@ -0,0 +1,69 @@
+<rd-header>
+  <rd-header-title title="Create volume"></rd-header-title>
+  <rd-header-content>
+    Volumes > Add volume
+  </rd-header-content>
+</rd-header>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-body>
+        <form class="form-horizontal">
+          <!-- name-input -->
+          <div class="form-group">
+            <label for="volume_name" class="col-sm-1 control-label text-left">Name</label>
+            <div class="col-sm-11">
+              <input type="text" class="form-control" ng-model="config.Name" id="volume_name" placeholder="e.g. myVolume">
+            </div>
+          </div>
+          <!-- !name-input -->
+          <!-- driver-input -->
+          <div class="form-group">
+            <label for="volume_driver" class="col-sm-1 control-label text-left">Driver</label>
+            <div class="col-sm-11">
+              <input type="text" class="form-control" ng-model="config.Driver" id="volume_driver" placeholder="e.g. driverName">
+            </div>
+          </div>
+          <!-- !driver-input -->
+          <!-- driver-options -->
+          <div class="form-group">
+            <label for="volume_driveropts" class="col-sm-1 control-label text-left">Driver options</label>
+            <div class="col-sm-11">
+              <span class="label label-default clickable" ng-click="addDriverOption()">
+                <i class="fa fa-plus-circle" aria-hidden="true"></i> driver option
+              </span>
+            </div>
+            <!-- driver-options-input-list -->
+            <div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;">
+              <div ng-repeat="option in formValues.DriverOptions" style="margin-top: 2px;">
+                <div class="input-group col-sm-5 input-group-sm">
+                  <span class="input-group-addon">name</span>
+                  <input type="text" class="form-control" ng-model="option.name" placeholder="e.g. mountpoint">
+                </div>
+                <div class="input-group col-sm-5 input-group-sm">
+                  <span class="input-group-addon">value</span>
+                  <input type="text" class="form-control" ng-model="option.value" placeholder="e.g. /path/on/host">
+                  <span class="input-group-btn">
+                    <button class="btn btn-default" type="button" ng-click="removeDriverOption($index)">
+                      <i class="fa fa-minus" aria-hidden="true"></i>
+                    </button>
+                  </span>
+                </div>
+              </div>
+            </div>
+            <!-- !driver-options-input-list -->
+          </div>
+          <!-- !driver-options -->
+        </form>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12" style="text-align: center;">
+    <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>
+</div>

app/components/images/images.html

@@ -1,5 +1,3 @@
-<div ng-include="template" ng-controller="PullImageController"></div>
-
 <rd-header>
   <rd-header-title title="Image list">
     <a data-toggle="tooltip" title="Refresh" ui-sref="images" ui-sref-opts="{reload: true}">
@@ -10,68 +8,100 @@
   <rd-header-content>Images</rd-header-content>
 </rd-header>
 
-<div class="col-lg-12">
-  <rd-widget>
-    <rd-widget-header icon="fa-clone" title="Images">
-    </rd-widget-header>
-    <rd-widget-taskbar classes="col-lg-12">
-      <div class="pull-left">
-        <div class="btn-group" role="group" aria-label="...">
-          <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount">Remove</button>
-          <button type="button" class="btn btn-default" data-toggle="modal" data-target="#pull-modal">Pull new image...</button>
-        </div>
-      </div>
-      <div class="pull-right">
-        <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
-      </div>
-    </rd-widget-taskbar>
-    <rd-widget-body classes="no-padding">
-      <div class="table-responsive">
-        <table class="table">
-          <thead>
-            <tr>
-              <th><label><input type="checkbox" ng-model="state.toggle" ng-change="toggleSelectAll()" /> Select</label></th>
-              <th>
-                <a ui-sref="images" ng-click="order('Id')">
-                  Id
-                  <span ng-show="sortType == 'Id' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'Id' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
-                </a>
-              </th>
-              <th>
-                <a ui-sref="images" ng-click="order('RepoTags')">
-                  Repository
-                  <span ng-show="sortType == 'RepoTags' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'RepoTags' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
-                </a>
-              </th>
-              <th>
-                <a ui-sref="images" ng-click="order('VirtualSize')">
-                  VirtualSize
-                  <span ng-show="sortType == 'VirtualSize' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'VirtualSize' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
-                </a>
-              </th>
-              <th>
-                <a ui-sref="images" ng-click="order('Created')">
-                  Created
-                  <span ng-show="sortType == 'Created' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'Created' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
-                </a>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr ng-repeat="image in (state.filteredImages = (images | filter:state.filter | orderBy:sortType:sortReverse))">
-              <td><input type="checkbox" ng-model="image.Checked" ng-change="selectItem(image)" /></td>
-              <td><a ui-sref="image({id: image.Id})">{{ image.Id|truncate:20}}</a></td>
-              <td>{{ image|repotag }}</td>
-              <td>{{ image.VirtualSize|humansize }}</td>
-              <td>{{ image.Created|getdate }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </rd-widget-body>
-  <rd-widget>
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-download" title="Pull image ">
+      </rd-widget-header>
+      <rd-widget-body>
+        <form class="form-horizontal">
+          <!-- name-input -->
+          <div class="form-group">
+            <label for="image_name" class="col-sm-1 control-label text-left">Name</label>
+            <div class="col-sm-11">
+              <input type="text" class="form-control" ng-model="config.Image" id="image_name" placeholder="e.g. ubuntu:trusty">
+            </div>
+          </div>
+          <!-- !name-input -->
+          <!-- tag-note -->
+          <div class="form-group">
+            <div class="col-sm-12">
+              <span class="small text-muted">Note: if you don't specify the tag in the image name, <span class="label label-default">latest</span> will be used.</span>
+            </div>
+          </div>
+          <!-- !tag-note -->
+          <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>
+            </div>
+          </div>
+        </form>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-clone" title="Images">
+      </rd-widget-header>
+      <rd-widget-taskbar classes="col-lg-12">
+        <div class="pull-left">
+          <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount">Remove</button>
+        </div>
+        <div class="pull-right">
+          <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
+        </div>
+      </rd-widget-taskbar>
+      <rd-widget-body classes="no-padding">
+        <div class="table-responsive">
+          <table class="table">
+            <thead>
+              <tr>
+                <th><label><input type="checkbox" ng-model="state.toggle" ng-change="toggleSelectAll()" /> Select</label></th>
+                <th>
+                  <a ui-sref="images" ng-click="order('Id')">
+                    Id
+                    <span ng-show="sortType == 'Id' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'Id' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
+                <th>
+                  <a ui-sref="images" ng-click="order('RepoTags')">
+                    Repository
+                    <span ng-show="sortType == 'RepoTags' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'RepoTags' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
+                <th>
+                  <a ui-sref="images" ng-click="order('VirtualSize')">
+                    VirtualSize
+                    <span ng-show="sortType == 'VirtualSize' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'VirtualSize' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
+                <th>
+                  <a ui-sref="images" ng-click="order('Created')">
+                    Created
+                    <span ng-show="sortType == 'Created' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'Created' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr ng-repeat="image in (state.filteredImages = (images | filter:state.filter | orderBy:sortType:sortReverse))">
+                <td><input type="checkbox" ng-model="image.Checked" ng-change="selectItem(image)" /></td>
+                <td><a ui-sref="image({id: image.Id})">{{ image.Id|truncate:20}}</a></td>
+                <td>{{ image|repotag }}</td>
+                <td>{{ image.VirtualSize|humansize }}</td>
+                <td>{{ image.Created|getdate }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </rd-widget-body>
+    <rd-widget>
+  </div>
 </div>

app/components/images/imagesController.js

@@ -1,12 +1,16 @@
 angular.module('images', [])
-.controller('ImagesController', ['$scope', 'Image', 'ViewSpinner', 'Messages',
-function ($scope, Image, ViewSpinner, Messages) {
+.controller('ImagesController', ['$scope', '$state', 'Image', 'ViewSpinner', 'Messages',
+function ($scope, $state, Image, ViewSpinner, Messages) {
   $scope.state = {};
   $scope.sortType = 'Created';
   $scope.sortReverse = true;
   $scope.state.toggle = false;
   $scope.state.selectedItemCount = 0;
 
+  $scope.config = {
+    Image: ''
+  };
+
   $scope.order = function(sortType) {
     $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
     $scope.sortType = sortType;
@@ -31,6 +35,35 @@ function ($scope, Image, ViewSpinner, Messages) {
     }
   };
 
+  function createImageConfig(imageName) {
+    var imageNameAndTag = imageName.split(':');
+    var imageConfig = {
+      fromImage: imageNameAndTag[0],
+      tag: imageNameAndTag[1] ? imageNameAndTag[1] : 'latest'
+    };
+    return imageConfig;
+  }
+
+  $scope.pullImage = function() {
+    ViewSpinner.spin();
+    var image = _.toLower($scope.config.Image);
+    var imageConfig = createImageConfig(image);
+    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();
+          Messages.error('Error', detail.error);
+        } else {
+          ViewSpinner.stop();
+          $state.go('images', {}, {reload: true});
+        }
+    }, function (e) {
+      ViewSpinner.stop();
+      Messages.error('Error', 'Unable to pull image ' + image);
+    });
+  };
+
   $scope.removeAction = function () {
     ViewSpinner.spin();
     var counter = 0;

app/components/networks/networks.html

@@ -16,10 +16,8 @@
     </rd-widget-header>
     <rd-widget-taskbar classes="col-lg-12">
       <div class="pull-left">
-        <div class="btn-group" role="group" aria-label="...">
-          <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount">Remove</button>
-          <button type="button" class="btn btn-default" data-toggle="modal" data-target="#create-network-modal">Create new network...</button>
-        </div>
+        <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount">Remove</button>
+        <a class="btn btn-default" type="button" ui-sref="actions.create.network">Add network</a>
       </div>
       <div class="pull-right">
         <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />

app/components/pullImage/pullImage.html

@@ -1,35 +0,0 @@
-<div id="pull-modal" class="modal fade">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times" aria-hidden="true"></i></button>
-        <h3>Pull image</h3>
-      </div>
-      <div class="modal-body">
-        <form novalidate role="form" name="pullForm">
-          <div class="form-group">
-            <label>Registry:</label>
-            <input type="text" ng-model="config.registry" class="form-control"
-            placeholder="Leave empty to user DockerHub"/>
-          </div>
-          <div class="form-group">
-            <label>Image Name:</label>
-            <input type="text" ng-model="config.fromImage" class="form-control" placeholder="username/image"
-            required/>
-          </div>
-          <div class="form-group">
-            <label>Tag Name:</label>
-            <input type="text" ng-model="config.tag" class="form-control"
-            placeholder="Leave empty to download ALL tags."/>
-          </div>
-        </form>
-      </div>
-      <div class="alert alert-error" id="error-message" style="display:none">
-        {{ error }}
-      </div>
-      <div class="modal-footer">
-        <a href="" class="btn btn-primary" ng-click="pull()">Pull</a>
-      </div>
-    </div>
-  </div>
-</div>

app/components/pullImage/pullImageController.js

@@ -1,56 +0,0 @@
-angular.module('pullImage', [])
-.controller('PullImageController', ['$scope', '$state', 'Messages', 'Image', 'ViewSpinner',
-function ($scope, $state, Messages, Image, ViewSpinner) {
-  $scope.template = 'app/components/pullImage/pullImage.html';
-
-  $scope.init = function () {
-    $scope.config = {
-      registry: '',
-      fromImage: '',
-      tag: 'latest'
-    };
-  };
-
-  $scope.init();
-
-  function failedRequestHandler(e, Messages) {
-    Messages.error('Error', errorMsgFilter(e));
-  }
-
-  $scope.pull = function () {
-    $('#error-message').hide();
-    var config = angular.copy($scope.config);
-    var imageName = (config.registry ? config.registry + '/' : '' ) +
-    (config.fromImage) +
-    (config.tag ? ':' + config.tag : '');
-
-    ViewSpinner.spin();
-    $('#pull-modal').modal('hide');
-    Image.create(config, function (data) {
-      ViewSpinner.stop();
-      if (data.constructor === Array) {
-        var f = data.length > 0 && data[data.length - 1].hasOwnProperty('error');
-        //check for error
-        if (f) {
-          var d = data[data.length - 1];
-          $scope.error = "Cannot pull image " + imageName + " Reason: " + d.error;
-          $('#pull-modal').modal('show');
-          $('#error-message').show();
-        } else {
-          Messages.send("Image Added", imageName);
-          $scope.init();
-          $state.go('images', {}, {reload: true});
-        }
-      } else {
-        Messages.send("Image Added", imageName);
-        $scope.init();
-        $state.go('images', {}, {reload: true});
-      }
-    }, function (e) {
-      ViewSpinner.stop();
-      $scope.error = "Cannot pull image " + imageName + " Reason: " + e.data;
-      $('#pull-modal').modal('show');
-      $('#error-message').show();
-    });
-  };
-}]);

app/components/volumes/volumes.html

@@ -15,10 +15,8 @@
     </rd-widget-header>
     <rd-widget-taskbar classes="col-lg-12">
       <div class="pull-left">
-        <div class="btn-group" role="group" aria-label="...">
-          <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount">Remove</button>
-          <button type="button" class="btn btn-default" data-toggle="modal" data-target="#create-volume-modal">Create new volume...</button>
-        </div>
+        <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount">Remove</button>
+        <a class="btn btn-default" type="button" ui-sref="actions.create.volume">Add volume</a>
       </div>
       <div class="pull-right">
         <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "uifordocker",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "homepage": "https://github.com/kevana/ui-for-docker",
   "authors": [
     "Michael Crosby <crosbymichael@gmail.com>",

dockerui.go

@@ -173,7 +173,7 @@ func csrfWrapper(h http.Handler) http.Handler {
 }
 
 func main() {
-	kingpin.Version("1.1.0")
+	kingpin.Version("1.2.0")
 	kingpin.Parse()
 
 	configuration := Config{

gruntFile.js

@@ -35,6 +35,7 @@ module.exports = function (grunt) {
         'recess:min',
         'copy'
     ]);
+    grunt.registerTask('lint', ['jshint']);
     grunt.registerTask('test-watch', ['karma:watch']);
     grunt.registerTask('run', ['if:binaryNotExist', 'build', 'shell:buildImage', 'shell:run']);
     grunt.registerTask('run-swarm', ['if:binaryNotExist', 'build', 'shell:buildImage', 'shell:runSwarm', 'watch:buildSwarm']);

package.json

@@ -2,7 +2,7 @@
   "author": "Michael Crosby & Kevan Ahlquist",
   "name": "uifordocker",
   "homepage": "https://github.com/kevana/ui-for-docker",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "repository": {
     "type": "git",
     "url": "git@github.com:kevana/ui-for-docker.git"