Merge branch 'release/1.2.0'

Release 1.1.0

Dockerfile

@@ -2,5 +2,7 @@ FROM scratch
 
 COPY dist /
 
+VOLUME /data
+
 EXPOSE 9000
 ENTRYPOINT ["/ui-for-docker"]

README.md

@@ -1,4 +1,4 @@
-## Cloudinovasi UI for Docker
+# Cloudinovasi UI for Docker
 
 A fork of the amazing UI for Docker by Michael Crosby and Kevan Ahlquist (https://github.com/kevana/ui-for-docker) using the rdash-angular theme (https://github.com/rdash/rdash-angular).
 
@@ -6,11 +6,14 @@ A fork of the amazing UI for Docker by Michael Crosby and Kevan Ahlquist (https:
 
 UI For Docker is a web interface for the Docker Remote API.  The goal is to provide a pure client side implementation so it is effortless to connect and manage docker.
 
-### Goals
+## Goals
 * Minimal dependencies - I really want to keep this project a pure html/js app.
 * Consistency - The web UI should be consistent with the commands found on the docker CLI.
 
+## Run
+
 ### Quickstart
+
 1. Run: `docker run -d -p 9000:9000 --privileged -v /var/run/docker.sock:/var/run/docker.sock cloudinovasi/cloudinovasi-ui`
 
 2. Open your browser to `http://<dockerd host ip>:9000`
@@ -25,11 +28,55 @@ By default UI For Docker connects to the Docker daemon with`/var/run/docker.sock
 
 You can use the `-e` flag to change this socket:
 
-    # Connect to a tcp socket:
-    $ docker run -d -p 9000:9000 --privileged cloudinovasi/cloudinovasi-ui -e http://127.0.0.1:2375
+```
+# Connect to a tcp socket:
+$ docker run -d -p 9000:9000 cloudinovasi/cloudinovasi-ui -e http://127.0.0.1:2375
+```
+
+### Swarm support
+
+**Supported Swarm version: 1.2.3**
+
+You can access a specific view for you Swarm cluster by defining the `--swarm` flag:
+
+```
+# Connect to a tcp socket and enable Swarm:
+$ docker run -d -p 9000:9000 cloudinovasi/cloudinovasi-ui -e http://<SWARM_HOST>:<SWARM_PORT> --swarm
+```
+
+*NOTE*: Due to Swarm not exposing information in a machine readable way, the app is bound to a specific version of Swarm at the moment.
 
 ### Change address/port UI For Docker is served on
 UI For Docker listens on port 9000 by default. If you run UI For Docker inside a container then you can bind the container's internal port to any external address and port:
 
-    # Expose UI For Docker on 10.20.30.1:80
-    $ docker run -d -p 10.20.30.1:80:9000 --privileged -v /var/run/docker.sock:/var/run/docker.sock cloudinovasi/cloudinovasi-ui
+```
+# Expose UI For Docker on 10.20.30.1:80
+$ docker run -d -p 10.20.30.1:80:9000 --privileged -v /var/run/docker.sock:/var/run/docker.sock cloudinovasi/cloudinovasi-ui
+```
+
+### Hide containers with specific labels
+
+You can hide specific containers in the containers view by using the `-hide-label` or `-l` options and specifying a label.
+
+For example, take a container started with the label `owner=acme`:
+
+```
+$ docker run -d --label owner=acme nginx
+```
+
+You can hide it in the view by starting the ui with:
+
+```
+$ docker run -d -p 9000:9000 --privileged -v /var/run/docker.sock:/var/run/docker.sock cloudinovasi/cloudinovasi-ui -l owner=acme
+```
+
+### Available options
+
+The following options are available for the `ui-for-docker` binary:
+
+* `--endpoint`, `-e`: Docker deamon endpoint (default: *"/var/run/docker.sock"*)
+* `--bind`, `-p`: Address and port to serve UI For Docker (default: *":9000"*)
+* `--data`, `-d`: Path to the data folder (default: *"."*)
+* `--assets`, `-a`: Path to the assets (default: *"."*)
+* `--swarm`, `-s`: Swarm cluster support (default: *false*)
+* `--hide-label`, `-l`: Hide containers with a specific label in the UI

app/app.js

@@ -10,10 +10,10 @@ angular.module('uifordocker', [
   'dashboard',
   'container',
   'containers',
+  'createContainer',
+  'docker',
   'images',
   'image',
-  'pullImage',
-  'startContainer',
   'containerLogs',
   'stats',
   'swarm',
@@ -56,6 +56,36 @@ angular.module('uifordocker', [
       templateUrl: 'app/components/containerLogs/containerlogs.html',
       controller: 'ContainerLogsController'
     })
+    .state('actions', {
+      abstract: true,
+      url: "/actions",
+      template: '<ui-view/>'
+    })
+    .state('actions.create', {
+      abstract: true,
+      url: "/create",
+      template: '<ui-view/>'
+    })
+    .state('actions.create.container', {
+      url: "/container",
+      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',
+      controller: 'DockerController'
+    })
     .state('images', {
       url: '/images/',
       templateUrl: 'app/components/images/images.html',
@@ -113,4 +143,5 @@ angular.module('uifordocker', [
   // You need to set this to the api endpoint without the port i.e. http://192.168.1.9
   .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('UI_VERSION', 'v1.0.2');
+  .constant('CONFIG_ENDPOINT', '/config')
+  .constant('UI_VERSION', 'v1.2.0');

app/components/container/container.html

@@ -5,7 +5,6 @@
   </rd-header-content>
 </rd-header>
 
-
 <div class="row">
   <div class="col-lg-6 col-md-12 col-xs-12">
     <rd-widget>

app/components/containers/containers.html

@@ -1,5 +1,3 @@
-<div ng-include="template" ng-controller="StartContainerController"></div>
-
 <rd-header>
   <rd-header-title title="Container list">
     <a data-toggle="tooltip" title="Refresh" ui-sref="containers" ui-sref-opts="{reload: true}">
@@ -23,8 +21,8 @@
           <button type="button" class="btn btn-primary" ng-click="pauseAction()" ng-disabled="!state.selectedItemCount">Pause</button>
           <button type="button" class="btn btn-primary" ng-click="unpauseAction()" ng-disabled="!state.selectedItemCount">Unpause</button>
           <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-modal">Start a new container...</button>
         </div>
+        <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>
@@ -33,10 +31,17 @@
     </rd-widget-taskbar>
     <rd-widget-body classes="no-padding">
       <div class="table-responsive">
-        <table class="table">
+        <table class="table table-hover">
           <thead>
             <tr>
-              <th><label><input type="checkbox" ng-model="state.toggle" ng-change="toggleSelectAll()" /> Select</label></th>
+              <th></th>
+              <th>
+                <a ui-sref="containers" ng-click="order('State')">
+                  State
+                  <span ng-show="sortType == 'State' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'State' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
               <th>
                 <a ui-sref="containers" ng-click="order('Names')">
                   Name
@@ -44,6 +49,20 @@
                   <span ng-show="sortType == 'Names' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
+              <th>
+                <a ui-sref="containers" ng-click="order('IP')">
+                  IP Address
+                  <span ng-show="sortType == 'IP' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'IP' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th ng-if="swarm">
+                <a ui-sref="containers" ng-click="order('Host')">
+                  Host
+                  <span ng-show="sortType == 'Host' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Host' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
               <th>
                 <a ui-sref="containers" ng-click="order('Image')">
                   Image
@@ -58,30 +77,18 @@
                   <span ng-show="sortType == 'Command' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
-              <th>
-                <a ui-sref="containers" 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>
-              <th>
-                <a ui-sref="containers" ng-click="order('Status')">
-                  Status
-                  <span ng-show="sortType == 'Status' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'Status' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
-                </a>
-              </th>
             </tr>
           </thead>
           <tbody>
             <tr ng-repeat="container in (state.filteredContainers = ( containers | filter:state.filter | orderBy:sortType:sortReverse))">
               <td><input type="checkbox" ng-model="container.Checked" ng-change="selectItem(container)"/></td>
-              <td><a ui-sref="container({id: container.Id})">{{ container|containername}}</a></td>
+              <td><span class="label label-{{ container.State|containerstatusbadge }}">{{ container.State }}</span></td>
+              <td ng-if="swarm"><a ui-sref="container({id: container.Id})">{{ container|swarmcontainername}}</a></td>
+              <td ng-if="!swarm"><a ui-sref="container({id: container.Id})">{{ container|containername}}</a></td>
+              <td>{{ container.IP ? container.IP : '-' }}</td>
+              <td ng-if="swarm">{{ container|swarmhostname}}</td>
               <td><a ui-sref="image({id: container.Image})">{{ container.Image }}</a></td>
-              <td>{{ container.Command|truncate:40 }}</td>
-              <td>{{ container.Created|getdate }}</td>
-              <td><span class="label label-{{ container.Status|statusbadge }}">{{ container.Status }}</span></td>
+              <td>{{ container.Command|truncate:60 }}</td>
             </tr>
           </tbody>
         </table>

app/components/containers/containersController.js

@@ -1,12 +1,11 @@
 angular.module('containers', [])
-.controller('ContainersController', ['$scope', 'Container', 'Settings', 'Messages', 'ViewSpinner',
-function ($scope, Container, Settings, Messages, ViewSpinner) {
+.controller('ContainersController', ['$scope', 'Container', 'Settings', 'Messages', 'ViewSpinner', 'Config', 'errorMsgFilter',
+function ($scope, Container, Settings, Messages, ViewSpinner, Config, errorMsgFilter) {
 
   $scope.state = {};
   $scope.state.displayAll = Settings.displayAll;
-  $scope.sortType = 'Created';
+  $scope.sortType = 'State';
   $scope.sortReverse = true;
-  $scope.state.toggle = false;
   $scope.state.selectedItemCount = 0;
 
   $scope.order = function (sortType) {
@@ -18,9 +17,11 @@ function ($scope, Container, Settings, Messages, ViewSpinner) {
     ViewSpinner.spin();
     $scope.state.selectedItemCount = 0;
     Container.query(data, function (d) {
-      $scope.containers = d.filter(function (container) {
-        return container.Image !== 'swarm';
-      }).map(function (container) {
+      var containers = d;
+      if (hiddenLabels) {
+        containers = hideContainers(d);
+      }
+      $scope.containers = containers.map(function (container) {
         return new ContainerViewModel(container);
       });
       ViewSpinner.stop();
@@ -39,13 +40,12 @@ function ($scope, Container, Settings, Messages, ViewSpinner) {
     };
     angular.forEach(items, function (c) {
       if (c.Checked) {
+        counter = counter + 1;
         if (action === Container.start) {
           Container.get({id: c.Id}, function (d) {
             c = d;
-            counter = counter + 1;
             action({id: c.Id, HostConfig: c.HostConfig || {}}, function (d) {
               Messages.send("Container " + msg, c.Id);
-              var index = $scope.containers.indexOf(c);
               complete();
             }, function (e) {
               Messages.error("Failure", e.data);
@@ -61,11 +61,24 @@ function ($scope, Container, Settings, Messages, ViewSpinner) {
             complete();
           });
         }
+        else if (action === Container.remove) {
+          action({id: c.Id}, function (d) {
+            var error = errorMsgFilter(d);
+            if (error) {
+              Messages.send("Error", "Unable to remove running container");
+            }
+            else {
+              Messages.send("Container " + msg, c.Id);
+            }
+            complete();
+          }, function (e) {
+            Messages.error("Failure", e.data);
+            complete();
+          });
+        }
         else {
-          counter = counter + 1;
           action({id: c.Id}, function (d) {
             Messages.send("Container " + msg, c.Id);
-            var index = $scope.containers.indexOf(c);
             complete();
           }, function (e) {
             Messages.error("Failure", e.data);
@@ -73,7 +86,6 @@ function ($scope, Container, Settings, Messages, ViewSpinner) {
           });
 
         }
-
       }
     });
     if (counter === 0) {
@@ -89,18 +101,6 @@ function ($scope, Container, Settings, Messages, ViewSpinner) {
     }
   };
 
-  $scope.toggleSelectAll = function () {
-    $scope.state.selectedItem = $scope.state.toggle;
-    angular.forEach($scope.state.filteredContainers, function (i) {
-      i.Checked = $scope.state.toggle;
-    });
-    if ($scope.state.toggle) {
-      $scope.state.selectedItemCount = $scope.state.filteredContainers.length;
-    } else {
-      $scope.state.selectedItemCount = 0;
-    }
-  };
-
   $scope.toggleGetAll = function () {
     Settings.displayAll = $scope.state.displayAll;
     update({all: Settings.displayAll ? 1 : 0});
@@ -134,5 +134,25 @@ function ($scope, Container, Settings, Messages, ViewSpinner) {
     batch($scope.containers, Container.remove, "Removed");
   };
 
-  update({all: Settings.displayAll ? 1 : 0});
+  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;
+      }
+    });
+  };
+
+  $scope.swarm = false;
+  Config.$promise.then(function (c) {
+    hiddenLabels = c.hiddenLabels;
+    $scope.swarm = c.swarm;
+    update({all: Settings.displayAll ? 1 : 0});
+  });
 }]);

app/components/createContainer/createContainerController.js

@@ -0,0 +1,212 @@
+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) {
+
+  $scope.state = {
+    alwaysPull: true
+  };
+
+  $scope.formValues = {
+    Console: 'none',
+    Volumes: []
+  };
+
+  $scope.config = {
+    Env: [],
+    HostConfig: {
+      RestartPolicy: {
+        Name: 'no'
+      },
+      PortBindings: [],
+      Binds: [],
+      NetworkMode: 'bridge',
+      Privileged: false
+    }
+  };
+
+  $scope.resetVolumePath = function(index) {
+    $scope.formValues.Volumes[index].name = '';
+  };
+
+  $scope.addVolume = function() {
+    $scope.formValues.Volumes.push({ name: '', containerPath: '', readOnly: false, isPath: false });
+  };
+
+  $scope.removeVolume = function(index) {
+    $scope.formValues.Volumes.splice(index, 1);
+  };
+
+  $scope.addEnvironmentVariable = function() {
+    $scope.config.Env.push({ name: '', value: ''});
+  };
+
+  $scope.removeEnvironmentVariable = function(index) {
+    $scope.config.Env.splice(index, 1);
+  };
+
+  $scope.addPortBinding = function() {
+    $scope.config.HostConfig.PortBindings.push({ hostPort: '', containerPort: '', protocol: 'tcp' });
+  };
+
+  $scope.removePortBinding = function(index) {
+    $scope.config.HostConfig.PortBindings.splice(index, 1);
+  };
+
+  Config.$promise.then(function (c) {
+    var swarm = c.swarm;
+
+    Volume.query({}, function (d) {
+      $scope.availableVolumes = d.Volumes;
+    }, function (e) {
+      Messages.error("Failure", e.data);
+    });
+
+    Network.query({}, function (d) {
+      var networks = d;
+      if (swarm) {
+        networks = d.filter(function (network) {
+          if (network.Scope === 'global') {
+            return network;
+          }
+        });
+        networks.push({Name: "bridge"});
+        networks.push({Name: "host"});
+        networks.push({Name: "none"});
+      }
+      $scope.availableNetworks = networks;
+    }, function (e) {
+      Messages.error("Failure", e.data);
+    });
+  });
+
+  function createContainer(config) {
+    ViewSpinner.spin();
+    Container.create(config, function (d) {
+      if (d.Id) {
+        var reqBody = config.HostConfig || {};
+        reqBody.id = d.Id;
+        Container.start(reqBody, function (cd) {
+          ViewSpinner.stop();
+          Messages.send('Container Started', d.Id);
+          $state.go('containers', {}, {reload: true});
+        }, function (e) {
+          ViewSpinner.stop();
+          Messages.error('Error', errorMsgFilter(e));
+        });
+      } else {
+        ViewSpinner.stop();
+        Messages.error('Error', errorMsgFilter(d));
+      }
+    }, function (e) {
+      ViewSpinner.stop();
+      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) {
+        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 {
+          createContainer(config);
+        }
+    }, function (e) {
+      ViewSpinner.stop();
+      Messages.error('Error', 'Unable to pull image ' + image);
+    });
+  }
+
+  function preparePortBindings(config) {
+    var bindings = {};
+    config.HostConfig.PortBindings.forEach(function (portBinding) {
+      if (portBinding.hostPort && portBinding.containerPort) {
+        var key = portBinding.containerPort + "/" + portBinding.protocol;
+        bindings[key] = [{ HostPort: portBinding.hostPort }];
+      }
+    });
+    config.HostConfig.PortBindings = bindings;
+  }
+
+  function prepareConsole(config) {
+    var value = $scope.formValues.Console;
+    var openStdin = true;
+    var tty = true;
+    if (value === 'tty') {
+      openStdin = false;
+    } else if (value === 'interactive') {
+      tty = false;
+    } else if (value === 'none') {
+      openStdin = false;
+      tty = false;
+    }
+    config.OpenStdin = openStdin;
+    config.Tty = tty;
+  }
+
+  function prepareEnvironmentVariables(config) {
+    var env = [];
+    config.Env.forEach(function (v) {
+      if (v.name && v.value) {
+        env.push(v.name + "=" + v.value);
+      }
+    });
+    config.Env = env;
+  }
+
+  function prepareVolumes(config) {
+    var binds = [];
+    var volumes = {};
+
+    $scope.formValues.Volumes.forEach(function (volume) {
+      var name = volume.name;
+      var containerPath = volume.containerPath;
+      if (name && containerPath) {
+        var bind = name + ':' + containerPath;
+        volumes[containerPath] = {};
+        if (volume.readOnly) {
+          bind += ':ro';
+        }
+        binds.push(bind);
+      }
+    });
+    config.HostConfig.Binds = binds;
+    config.Volumes = volumes;
+  }
+
+  function prepareConfiguration() {
+    var config = angular.copy($scope.config);
+    preparePortBindings(config);
+    prepareConsole(config);
+    prepareEnvironmentVariables(config);
+    prepareVolumes(config);
+    return config;
+  }
+
+  $scope.create = function () {
+    var config = prepareConfiguration();
+
+    if ($scope.state.alwaysPull) {
+      pullImageAndCreateContainer(config);
+    } else {
+      createContainer(config);
+    }
+  };
+
+}]);

app/components/createContainer/createcontainer.html

@@ -0,0 +1,312 @@
+<rd-header>
+  <rd-header-title title="Create container"></rd-header-title>
+  <rd-header-content>
+    Containers > Add container
+  </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="container_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="container_name" placeholder="e.g. myContainer">
+            </div>
+          </div>
+          <!-- !name-input -->
+          <!-- image input -->
+          <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">
+            </div>
+            <div class="col-sm-offset-1 col-sm-11">
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" ng-model="state.alwaysPull"> Always pull image before creating
+                </label>
+              </div>
+            </div>
+          </div>
+          <!-- !image-input -->
+          <!-- restart-policy -->
+          <div class="form-group">
+            <label class="col-sm-1 control-label text-left">Restart policy</label>
+            <div class="col-sm-11">
+              <label class="radio-inline">
+                <input type="radio" name="container_restart_policy" ng-model="config.HostConfig.RestartPolicy.Name" value="no">
+                Never
+              </label>
+              <label class="radio-inline">
+                <input type="radio" name="container_restart_policy" ng-model="config.HostConfig.RestartPolicy.Name" value="always">
+                Always
+              </label>
+              <label class="radio-inline">
+                <input type="radio" name="container_restart_policy" ng-model="config.HostConfig.RestartPolicy.Name" value="on-failure">
+                <span class="radio-value">On failure</span>
+              </label>
+            </div>
+          </div>
+          <!-- !restart-policy -->
+          <!-- port-mapping -->
+          <div class="form-group">
+            <label for="container_ports" class="col-sm-1 control-label text-left">Port mapping</label>
+            <div class="col-sm-11">
+              <span class="label label-default clickable" ng-click="addPortBinding()">
+                <i class="fa fa-plus-circle" aria-hidden="true"></i> map port
+              </span>
+            </div>
+            <!-- port-mapping-input-list -->
+            <div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;">
+              <div ng-repeat="portBinding in config.HostConfig.PortBindings" style="margin-top: 2px;">
+                <div class="input-group col-sm-5 input-group-sm">
+                  <span class="input-group-addon">host</span>
+                  <input type="text" class="form-control" ng-model="portBinding.hostPort" placeholder="e.g. 80 or 1.2.3.4:80">
+                </div>
+                <div class="input-group col-sm-5 input-group-sm">
+                  <span class="input-group-addon">container</span>
+                  <input type="text" class="form-control" ng-model="portBinding.containerPort" placeholder="e.g. 80">
+                </div>
+                <div class="input-group col-sm-1 input-group-sm">
+                  <select class="selectpicker form-control" ng-model="portBinding.protocol">
+                    <option value="tcp">tcp</option>
+                    <option value="udp">udp</option>
+                  </select>
+                  <span class="input-group-btn">
+                    <button class="btn btn-default" type="button" ng-click="removePortBinding($index)">
+                      <i class="fa fa-minus" aria-hidden="true"></i>
+                    </button>
+                  </span>
+                </div>
+              </div>
+            </div>
+            <!-- !port-mapping-input-list -->
+          </div>
+          <!-- !port-mapping -->
+        </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-body>
+        <ul class="nav nav-tabs">
+          <li class="active clickable"><a data-target="#command" data-toggle="tab">Command</a></li>
+          <li class="clickable"><a data-target="#volumes" data-toggle="tab">Volumes</a></li>
+          <li class="clickable"><a data-target="#network" data-toggle="tab">Network</a></li>
+          <li class="clickable"><a data-target="#security" data-toggle="tab">Security/Host</a></li>
+        </ul>
+
+        <!-- tab-content -->
+        <div class="tab-content">
+          <!-- tab-command -->
+          <div class="tab-pane active" id="command">
+            <form class="form-horizontal" style="margin-top: 15px;">
+              <!-- command-input -->
+              <div class="form-group">
+                <label for="container_command" class="col-sm-1 control-label text-left">Command</label>
+                <div class="col-sm-9">
+                  <input type="text" class="form-control" ng-model="config.Cmd" id="container_command" placeholder="e.g. /usr/bin/nginx -t -c /mynginx.conf">
+                </div>
+              </div>
+              <!-- !command-input -->
+              <!-- entrypoint-input -->
+              <div class="form-group">
+                <label for="container_entrypoint" class="col-sm-1 control-label text-left">Entry Point</label>
+                <div class="col-sm-9">
+                  <input type="text" class="form-control" ng-model="config.Entrypoint" id="container_entrypoint" placeholder="e.g. /bin/sh -c">
+                </div>
+              </div>
+              <!-- !entrypoint-input -->
+              <!-- workdir-user-input -->
+              <div class="form-group">
+                <label for="container_workingdir" class="col-sm-1 control-label text-left">Working Dir</label>
+                <div class="col-sm-4">
+                  <input type="text" class="form-control" ng-model="config.WorkingDir" id="container_workingdir" placeholder="e.g. /myapp">
+                </div>
+                <label for="container_user" class="col-sm-1 control-label text-left">User</label>
+                <div class="col-sm-4">
+                  <input type="text" class="form-control" ng-model="config.User" id="container_user" placeholder="e.g. nginx">
+                </div>
+              </div>
+              <!-- !workdir-user-input -->
+              <!-- console -->
+              <div class="form-group">
+                <label for="container_console" class="col-sm-1 control-label text-left">Console</label>
+                <div class="col-sm-11">
+                  <div class="col-sm-4">
+                    <label class="radio-inline">
+                      <input type="radio" name="container_console" ng-model="formValues.Console" value="both">
+                      Interactive & TTY <span class="small text-muted">(-i -t)</span>
+                    </label>
+                  </div>
+                  <div class="col-sm-4">
+                    <label class="radio-inline">
+                      <input type="radio" name="container_console" ng-model="formValues.Console" value="interactive">
+                      Interactive <span class="small text-muted">(-i)</span>
+                    </label>
+                  </div>
+                </div>
+                <div class="col-sm-offset-1 col-sm-11">
+                  <div class="col-sm-4">
+                    <label class="radio-inline">
+                      <input type="radio" name="container_console" ng-model="formValues.Console" value="tty">
+                      TTY <span class="small text-muted">(-t)</span>
+                    </label>
+                  </div>
+                  <div class="col-sm-4">
+                    <label class="radio-inline">
+                      <input type="radio" name="container_console" ng-model="formValues.Console" value="none">
+                      None
+                    </label>
+                  </div>
+                </div>
+              </div>
+              <!-- !console -->
+              <!-- environment-variables -->
+              <div class="form-group">
+                <label for="container_env" class="col-sm-1 control-label text-left">Environment variables</label>
+                <div class="col-sm-11">
+                  <span class="label label-default clickable" ng-click="addEnvironmentVariable()">
+                    <i class="fa fa-plus-circle" aria-hidden="true"></i> environment variable
+                  </span>
+                </div>
+                <!-- environment-variable-input-list -->
+                <div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;">
+                  <div ng-repeat="variable in config.Env" 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="variable.name" placeholder="e.g. FOO">
+                    </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="variable.value" placeholder="e.g. bar">
+                      <span class="input-group-btn">
+                        <button class="btn btn-default" type="button" ng-click="removeEnvironmentVariable($index)">
+                          <i class="fa fa-minus" aria-hidden="true"></i>
+                        </button>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <!-- !environment-variable-input-list -->
+              </div>
+              <!-- !environment-variables -->
+            </form>
+          </div>
+          <!-- !tab-command -->
+          <!-- tab-volume -->
+          <div class="tab-pane" id="volumes">
+            <form class="form-horizontal" style="margin-top: 15px;">
+              <!-- volumes -->
+              <div class="form-group">
+                <label for="container_volumes" class="col-sm-1 control-label text-left">Volumes</label>
+                <div class="col-sm-11">
+                  <span class="label label-default clickable" ng-click="addVolume()">
+                    <i class="fa fa-plus-circle" aria-hidden="true"></i> volume
+                  </span>
+                </div>
+                <!-- volumes-input-list -->
+                <div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;">
+                  <div ng-repeat="volume in formValues.Volumes" style="margin-top: 2px;">
+                    <div class="input-group col-sm-1 input-group-sm">
+                      <div class="checkbox">
+                        <label>
+                          <input type="checkbox" ng-model="volume.readOnly"> Read-only
+                        </label>
+                      </div>
+                    </div>
+                    <div class="input-group col-sm-5 input-group-sm">
+                      <span class="input-group-addon"><input type="checkbox" ng-model="volume.isPath" ng-click="resetVolumePath($index)">Path</span>
+                      <select class="selectpicker form-control" ng-model="volume.name" ng-if="!volume.isPath">
+                        <option selected disabled hidden value="">Select a volume</option>
+                        <option ng-repeat="vol in availableVolumes" ng-value="vol.Name">{{ vol.Name|truncate:30}}</option>
+                      </select>
+                      <input ng-if="volume.isPath" type="text" class="form-control" ng-model="volume.name" placeholder="e.g. /path/on/host">
+                    </div>
+                    <div class="input-group col-sm-5 input-group-sm">
+                      <span class="input-group-addon">container</span>
+                      <input type="text" class="form-control" ng-model="volume.containerPath" placeholder="e.g. /path/in/container">
+                      <span class="input-group-btn">
+                        <button class="btn btn-default" type="button" ng-click="removeVolume($index)">
+                          <i class="fa fa-minus" aria-hidden="true"></i>
+                        </button>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <!-- !volumes-input-list -->
+              </div>
+            </form>
+            <!-- !volumes -->
+          </div>
+          <!-- !tab-volume -->
+          <!-- tab-network -->
+          <div class="tab-pane" id="network">
+            <form class="form-horizontal" style="margin-top: 15px;">
+              <!-- network-input -->
+              <div class="form-group">
+                <label for="container_network" class="col-sm-1 control-label text-left">Network</label>
+                <div class="col-sm-9">
+                  <select class="selectpicker form-control" ng-model="config.HostConfig.NetworkMode">
+                    <option selected disabled hidden value="">Select a network</option>
+                    <option ng-repeat="net in availableNetworks" ng-value="net.Name">{{ net.Name }}</option>
+                  </select>
+                </div>
+              </div>
+              <!-- !network-input -->
+              <!-- hostname-input -->
+              <div class="form-group">
+                <label for="container_hostname" class="col-sm-1 control-label text-left">Hostname</label>
+                <div class="col-sm-9">
+                  <input type="text" class="form-control" ng-model="config.Hostname" id="container_hostname" placeholder="e.g. web01">
+                </div>
+              </div>
+              <!-- !hostname-input -->
+              <!-- domainname-input -->
+              <div class="form-group">
+                <label for="container_domainname" class="col-sm-1 control-label text-left">Domain Name</label>
+                <div class="col-sm-9">
+                  <input type="text" class="form-control" ng-model="config.Domainname" id="container_domainname" placeholder="e.g. example.com">
+                </div>
+              </div>
+              <!-- !domainname -->
+            </form>
+          </div>
+          <!-- !tab-network -->
+          <!-- tab-security -->
+          <div class="tab-pane" id="security">
+            <form class="form-horizontal" style="margin-top: 15px;">
+              <!-- privileged-mode -->
+              <div class="form-group">
+                <div class="col-sm-12">
+                  <div class="checkbox">
+                    <label>
+                      <input type="checkbox" ng-model="config.HostConfig.Privileged"> Privileged mode
+                    </label>
+                  </div>
+                </div>
+              </div>
+              <!-- !privileged-mode -->
+            </form>
+          </div>
+          <!-- !tab-security -->
+        </div>
+      </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="containers">Cancel</a>
+  </div>
+</div>

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/dashboard/master-ctrl.js

@@ -1,5 +1,5 @@
 angular.module('dashboard')
-.controller('MasterCtrl', ['$scope', '$cookieStore', 'Settings', function ($scope, $cookieStore, Settings) {
+.controller('MasterCtrl', ['$scope', '$cookieStore', 'Settings', 'Config', function ($scope, $cookieStore, Settings, Config) {
   /**
   * Sidebar Toggle & Cookie Control
   */
@@ -9,6 +9,8 @@ angular.module('dashboard')
     return window.innerWidth;
   };
 
+  $scope.config = Config;
+
   $scope.$watch($scope.getWidth, function(newValue, oldValue) {
     if (newValue >= mobileView) {
       if (angular.isDefined($cookieStore.get('toggle'))) {

app/components/docker/docker.html

@@ -0,0 +1,145 @@
+<rd-header>
+  <rd-header-title title="Engine overview">
+    <a data-toggle="tooltip" title="Refresh" ui-sref="docker" ui-sref-opts="{reload: true}">
+      <i class="fa fa-refresh" aria-hidden="true"></i>
+    </a>
+  </rd-header-title>
+  <rd-header-content>Docker</rd-header-content>
+</rd-header>
+<div class="row">
+  <div class="col-lg-3 col-md-6 col-xs-12">
+    <rd-widget>
+      <rd-widget-body>
+        <div class="widget-icon pull-left">
+          <i class="fa fa-code"></i>
+        </div>
+        <div class="title">{{ docker.Version }}</div>
+        <div class="comment">Docker version</div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+  <div class="col-lg-3 col-md-6 col-xs-12">
+    <rd-widget>
+      <rd-widget-body>
+        <div class="widget-icon pull-left">
+          <i class="fa fa-code"></i>
+        </div>
+        <div class="title">{{ docker.ApiVersion }}</div>
+        <div class="comment">API version</div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+  <div class="col-lg-3 col-md-6 col-xs-12">
+    <rd-widget>
+      <rd-widget-body>
+        <div class="widget-icon pull-left">
+          <i class="fa fa-code"></i>
+        </div>
+        <div class="title">{{ docker.GoVersion }}</div>
+        <div class="comment">Go version</div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-object-group" title="Cluster status"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table">
+          <tbody>
+            <tr>
+              <td>Containers</td>
+              <td>{{ info.Containers }}</td>
+            </tr>
+            <tr>
+              <td>Images</td>
+              <td>{{ info.Images }}</td>
+            </tr>
+            <tr>
+              <td>Debug</td>
+              <td>{{ info.Debug }}</td>
+            </tr>
+            <tr>
+              <td>CPUs</td>
+              <td>{{ info.NCPU }}</td>
+            </tr>
+            <tr>
+              <td>Total Memory</td>
+              <td>{{ info.MemTotal|humansize }}</td>
+            </tr>
+            <tr>
+              <td>Operating System</td>
+              <td>{{ info.OperatingSystem }}</td>
+            </tr>
+            <tr>
+              <td>Kernel Version</td>
+              <td>{{ info.KernelVersion }}</td>
+            </tr>
+            <tr>
+              <td>ID</td>
+              <td>{{ info.ID }}</td>
+            </tr>
+            <tr>
+              <td>Labels</td>
+              <td>{{ info.Labels }}</td>
+            </tr>
+            <tr>
+              <td>File Descriptors</td>
+              <td>{{ info.NFd }}</td>
+            </tr>
+            <tr>
+              <td>Goroutines</td>
+              <td>{{ info.NGoroutines }}</td>
+            </tr>
+            <tr>
+              <td>Storage Driver</td>
+              <td>{{ info.Driver }}</td>
+            </tr>
+            <tr>
+              <td>Storage Driver Status</td>
+              <td>
+                <p ng-repeat="val in info.DriverStatus">
+                  {{ val[0] }}: {{ val[1] }}
+                </p>
+              </td>
+            </tr>
+            <tr>
+              <td>Execution Driver</td>
+              <td>{{ info.ExecutionDriver }}</td>
+            </tr>
+            <tr>
+              <td>IPv4 Forwarding</td>
+              <td>{{ info.IPv4Forwarding }}</td>
+            </tr>
+            <tr>
+              <td>Index Server Address</td>
+              <td>{{ info.IndexServerAddress }}</td>
+            </tr>
+            <tr>
+              <td>Init Path</td>
+              <td>{{ info.InitPath }}</td>
+            </tr>
+            <tr>
+              <td>Docker Root Directory</td>
+              <td>{{ info.DockerRootDir }}</td>
+            </tr>
+            <tr>
+              <td>Init SHA1</td>
+              <td>{{ info.InitSha1 }}</td>
+            </tr>
+            <tr>
+              <td>Memory Limit</td>
+              <td>{{ info.MemoryLimit }}</td>
+            </tr>
+            <tr>
+              <td>Swap Limit</td>
+              <td>{{ info.SwapLimit }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/components/docker/dockerController.js

@@ -0,0 +1,19 @@
+angular.module('docker', [])
+.controller('DockerController', ['$scope', 'Info', 'Version', 'Settings',
+function ($scope, Info, Version, Settings) {
+
+  $scope.info = {};
+  $scope.docker = {};
+  
+  $scope.order = function(sortType) {
+    $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
+    $scope.sortType = sortType;
+  };
+
+  Version.get({}, function (d) {
+    $scope.docker = d;
+  });
+  Info.get({}, function (d) {
+    $scope.info = d;
+  });
+}]);

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/startContainer/startContainerController.js

@@ -1,163 +0,0 @@
-angular.module('startContainer', ['ui.bootstrap'])
-.controller('StartContainerController', ['$scope', '$state', 'Container', 'Messages', 'containernameFilter', 'errorMsgFilter', 'ViewSpinner',
-function ($scope, $state, Container, Messages, containernameFilter, errorMsgFilter, ViewSpinner) {
-  $scope.template = 'app/components/startContainer/startcontainer.html';
-
-  Container.query({all: 1}, function (d) {
-    $scope.containerNames = d.map(function (container) {
-      return containernameFilter(container);
-    });
-  });
-
-  $scope.config = {
-    Env: [],
-    Labels: [],
-    Volumes: [],
-    SecurityOpts: [],
-    HostConfig: {
-      PortBindings: [],
-      Binds: [],
-      Links: [],
-      Dns: [],
-      DnsSearch: [],
-      VolumesFrom: [],
-      CapAdd: [],
-      CapDrop: [],
-      Devices: [],
-      LxcConf: [],
-      ExtraHosts: []
-    }
-  };
-
-  $scope.menuStatus = {
-    containerOpen: true,
-    hostConfigOpen: false
-  };
-
-  function failedRequestHandler(e, Messages) {
-    Messages.error('Error', errorMsgFilter(e));
-  }
-
-  function rmEmptyKeys(col) {
-    for (var key in col) {
-      if (col[key] === null || col[key] === undefined || col[key] === '' || ($.isPlainObject(col[key]) && $.isEmptyObject(col[key])) || col[key].length === 0) {
-        delete col[key];
-      }
-    }
-  }
-
-  function getNames(arr) {
-    return arr.map(function (item) {
-      return item.name;
-    });
-  }
-
-  $scope.create = function () {
-    // Copy the config before transforming fields to the remote API format
-    $('#create-modal').modal('hide');
-    ViewSpinner.spin();
-
-    var config = angular.copy($scope.config);
-
-    if (config.Cmd && config.Cmd[0] === "[") {
-      config.Cmd = angular.fromJson(config.Cmd);
-    } else if (config.Cmd) {
-      config.Cmd = config.Cmd.split(' ');
-    }
-
-    config.Env = config.Env.map(function (envar) {
-      return envar.name + '=' + envar.value;
-    });
-    var labels = {};
-    config.Labels = config.Labels.forEach(function(label) {
-      labels[label.key] = label.value;
-    });
-    config.Labels = labels;
-
-    config.Volumes = getNames(config.Volumes);
-    config.SecurityOpts = getNames(config.SecurityOpts);
-
-    config.HostConfig.VolumesFrom = getNames(config.HostConfig.VolumesFrom);
-    config.HostConfig.Binds = getNames(config.HostConfig.Binds);
-    config.HostConfig.Links = getNames(config.HostConfig.Links);
-    config.HostConfig.Dns = getNames(config.HostConfig.Dns);
-    config.HostConfig.DnsSearch = getNames(config.HostConfig.DnsSearch);
-    config.HostConfig.CapAdd = getNames(config.HostConfig.CapAdd);
-    config.HostConfig.CapDrop = getNames(config.HostConfig.CapDrop);
-    config.HostConfig.LxcConf = config.HostConfig.LxcConf.reduce(function (prev, cur, idx) {
-      prev[cur.name] = cur.value;
-      return prev;
-    }, {});
-    config.HostConfig.ExtraHosts = config.HostConfig.ExtraHosts.map(function (entry) {
-      return entry.host + ':' + entry.ip;
-    });
-
-    var ExposedPorts = {};
-    var PortBindings = {};
-    config.HostConfig.PortBindings.forEach(function (portBinding) {
-      var intPort = portBinding.intPort + "/tcp";
-      if (portBinding.protocol === "udp") {
-        intPort = portBinding.intPort + "/udp";
-      }
-      var binding = {
-        HostIp: portBinding.ip,
-        HostPort: portBinding.extPort
-      };
-      if (portBinding.intPort) {
-        ExposedPorts[intPort] = {};
-        if (intPort in PortBindings) {
-          PortBindings[intPort].push(binding);
-        } else {
-          PortBindings[intPort] = [binding];
-        }
-      } else {
-        Messages.send('Warning', 'Internal port must be specified for PortBindings');
-      }
-    });
-    config.ExposedPorts = ExposedPorts;
-    config.HostConfig.PortBindings = PortBindings;
-
-    // Remove empty fields from the request to avoid overriding defaults
-    rmEmptyKeys(config.HostConfig);
-    rmEmptyKeys(config);
-
-    var ctor = Container;
-    var s = $scope;
-    Container.create(config, function (d) {
-      if (d.Id) {
-        var reqBody = config.HostConfig || {};
-        reqBody.id = d.Id;
-        ctor.start(reqBody, function (cd) {
-          if (cd.id) {
-            ViewSpinner.stop();
-            Messages.send('Container Started', d.Id);
-            $state.go('container', {id: d.Id}, {reload: true});
-          } else {
-            ViewSpinner.stop();
-            failedRequestHandler(cd, Messages);
-            ctor.remove({id: d.Id}, function () {
-              Messages.send('Container Removed', d.Id);
-            });
-          }
-        }, function (e) {
-          ViewSpinner.stop();
-          failedRequestHandler(e, Messages);
-        });
-      } else {
-        ViewSpinner.stop();
-        failedRequestHandler(d, Messages);
-      }
-    }, function (e) {
-      ViewSpinner.stop();
-      failedRequestHandler(e, Messages);
-    });
-  };
-
-  $scope.addEntry = function (array, entry) {
-    array.push(entry);
-  };
-  $scope.rmEntry = function (array, entry) {
-    var idx = array.indexOf(entry);
-    array.splice(idx, 1);
-  };
-}]);

app/components/startContainer/startcontainer.html

@@ -1,444 +0,0 @@
-<div id="create-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">&times;</button>
-                <h3>Start a new container</h3>
-            </div>
-            <div class="modal-body">
-                <form role="form">
-                    <accordion close-others="true">
-                        <accordion-group heading="Container options" is-open="menuStatus.containerOpen">
-                            <fieldset>
-                                <div class="row">
-                                    <div class="col-xs-6">
-                                      <div class="form-group">
-                                          <label>Image:</label>
-                                          <input type="text" placeholder='ubuntu:latest'
-                                                 ng-model="config.Image" class="form-control"/>
-                                      </div>
-                                        <div class="form-group">
-                                            <label>Cmd:</label>
-                                            <input type="text" placeholder='["/bin/echo", "Hello world"]'
-                                                   ng-model="config.Cmd" class="form-control"/>
-                                            <small>Input commands as a raw string or JSON array</small>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>Entrypoint:</label>
-                                            <input type="text" ng-model="config.Entrypoint" class="form-control"
-                                                   placeholder="./entrypoint.sh"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>Name:</label>
-                                            <input type="text" ng-model="config.name" class="form-control"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>Hostname:</label>
-                                            <input type="text" ng-model="config.Hostname" class="form-control"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>Domainname:</label>
-                                            <input type="text" ng-model="config.Domainname" class="form-control"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>User:</label>
-                                            <input type="text" ng-model="config.User" class="form-control"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>Memory:</label>
-                                            <input type="number" ng-model="config.Memory" class="form-control"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>Volumes:</label>
-                                            <div ng-repeat="volume in config.Volumes">
-                                                <div class="form-group form-inline">
-                                                    <input type="text" ng-model="volume.name" class="form-control"
-                                                           placeholder="/var/data"/>
-                                                    <a href="" ng-click="rmEntry(config.Volumes, volume)">
-                                                      <i class="fa fa-minus" aria-hidden="true"></i>
-                                                    </a>
-                                                </div>
-                                            </div>
-                                            <a href="" ng-click="addEntry(config.Volumes, {name: ''})">
-                                              <i class="fa fa-plus" aria-hidden="true"></i>
-                                            </a>
-                                        </div>
-                                    </div>
-                                    <div class="col-xs-6">
-                                        <div class="form-group">
-                                            <label>MemorySwap:</label>
-                                            <input type="number" ng-model="config.MemorySwap" class="form-control"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>CpuShares:</label>
-                                            <input type="number" ng-model="config.CpuShares" class="form-control"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>Cpuset:</label>
-                                            <input type="text" ng-model="config.Cpuset" class="form-control"
-                                                   placeholder="1,2"/>
-                                            <small>Input as comma-separated list of numbers</small>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>WorkingDir:</label>
-                                            <input type="text" ng-model="config.WorkingDir" class="form-control"
-                                                   placeholder="/app"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>MacAddress:</label>
-                                            <input type="text" ng-model="config.MacAddress" class="form-control"
-                                                   placeholder="12:34:56:78:9a:bc"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label for="networkDisabled">NetworkDisabled:</label>
-                                            <input id="networkDisabled" type="checkbox"
-                                                   ng-model="config.NetworkDisabled"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label for="tty">Tty:</label>
-                                            <input id="tty" type="checkbox" ng-model="config.Tty"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label for="openStdin">OpenStdin:</label>
-                                            <input id="openStdin" type="checkbox" ng-model="config.OpenStdin"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label for="stdinOnce">StdinOnce:</label>
-                                            <input id="stdinOnce" type="checkbox" ng-model="config.StdinOnce"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>SecurityOpts:</label>
-
-                                            <div ng-repeat="opt in config.SecurityOpts">
-                                                <div class="form-group form-inline">
-                                                    <input type="text" ng-model="opt.name" class="form-control"
-                                                           placeholder="label:type:svirt_apache"/>
-                                                    <a href="" ng-click="rmEntry(config.SecurityOpts, opt)">
-                                                      <i class="fa fa-minus" aria-hidden="true"></i>
-                                                    </a>
-                                                </div>
-                                            </div>
-                                            <a href="" ng-click="addEntry(config.SecurityOpts, {name: ''})">
-                                              <i class="fa fa-plus" aria-hidden="true"></i>
-                                            </a>
-                                        </div>
-                                    </div>
-                                </div>
-                                <hr>
-                                <div class="form-group">
-                                    <label>Env:</label>
-
-                                    <div ng-repeat="envar in config.Env">
-                                        <div class="form-group form-inline">
-                                            <div class="form-group">
-                                                <label class="sr-only">Variable Name:</label>
-                                                <input type="text" ng-model="envar.name" class="form-control"
-                                                       placeholder="NAME"/>
-                                            </div>
-                                            <div class="form-group">
-                                                <label class="sr-only">Variable Value:</label>
-                                                <input type="text" ng-model="envar.value" class="form-control"
-                                                       placeholder="value"/>
-                                            </div>
-                                            <div class="form-group">
-                                                <a href="" ng-click="rmEntry(config.Env, envar)">
-                                                  <i class="fa fa-minus" aria-hidden="true"></i>
-                                                </a>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <a href="" ng-click="addEntry(config.Env, {name: '', value: ''})">
-                                      <i class="fa fa-plus" aria-hidden="true"></i>
-                                    </a>
-                                </div>
-                                <div class="form-group">
-                                    <label>Labels:</label>
-
-                                    <div ng-repeat="label in config.Labels">
-                                        <div class="form-group form-inline">
-                                            <div class="form-group">
-                                                <label class="sr-only">Key:</label>
-                                                <input type="text" ng-model="label.key" class="form-control"
-                                                       placeholder="key"/>
-                                            </div>
-                                            <div class="form-group">
-                                                <label class="sr-only">Value:</label>
-                                                <input type="text" ng-model="label.value" class="form-control"
-                                                       placeholder="value"/>
-                                            </div>
-                                            <div class="form-group">
-                                                <a href="" ng-click="rmEntry(config.Labels, label)">
-                                                  <i class="fa fa-minus" aria-hidden="true"></i>
-                                                </a>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <a href="" ng-click="addEntry(config.Labels, {key: '', value: ''})">
-                                      <i class="fa fa-plus" aria-hidden="true"></i>
-                                    </a>
-                                </div>
-                            </fieldset>
-                        </accordion-group>
-                        <accordion-group heading="HostConfig options" is-open="menuStatus.hostConfigOpen">
-                            <fieldset>
-                                <div class="row">
-                                    <div class="col-xs-6">
-                                        <div class="form-group">
-                                            <label>Binds:</label>
-
-                                            <div ng-repeat="bind in config.HostConfig.Binds">
-                                                <div class="form-group form-inline">
-                                                    <input type="text" ng-model="bind.name" class="form-control"
-                                                           placeholder="/host:/container"/>
-                                                    <a href="" ng-click="rmEntry(config.HostConfig.Binds, bind)">
-                                                      <i class="fa fa-minus" aria-hidden="true"></i>
-                                                    </a>
-                                                </div>
-                                            </div>
-                                            <a href="" ng-click="addEntry(config.HostConfig.Binds, {name: ''})">
-                                              <i class="fa fa-plus" aria-hidden="true"></i>
-                                            </a>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>Links:</label>
-
-                                            <div ng-repeat="link in config.HostConfig.Links">
-                                                <div class="form-group form-inline">
-                                                    <input type="text" ng-model="link.name" class="form-control"
-                                                           placeholder="web:db">
-                                                    <a href="" ng-click="rmEntry(config.HostConfig.Links, link)">
-                                                      <i class="fa fa-minus" aria-hidden="true"></i>
-                                                    </a>
-                                                </div>
-                                            </div>
-                                            <a href="" ng-click="addEntry(config.HostConfig.Links, {name: ''})">
-                                              <i class="fa fa-plus" aria-hidden="true"></i>
-                                            </a>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>Dns:</label>
-
-                                            <div ng-repeat="entry in config.HostConfig.Dns">
-                                                <div class="form-group form-inline">
-                                                    <input type="text" ng-model="entry.name" class="form-control"
-                                                           placeholder="8.8.8.8"/>
-                                                    <a href="" ng-click="rmEntry(config.HostConfig.Dns, entry)">
-                                                      <i class="fa fa-minus" aria-hidden="true"></i>
-                                                    </a>
-                                                </div>
-                                            </div>
-                                            <a href="" ng-click="addEntry(config.HostConfig.Dns, {name: ''})">
-                                              <i class="fa fa-plus" aria-hidden="true"></i>
-                                            </a>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>DnsSearch:</label>
-
-                                            <div ng-repeat="entry in config.HostConfig.DnsSearch">
-                                                <div class="form-group form-inline">
-                                                    <input type="text" ng-model="entry.name" class="form-control"
-                                                           placeholder="example.com"/>
-                                                    <a href="" ng-click="rmEntry(config.HostConfig.DnsSearch, entry)">
-                                                      <i class="fa fa-minus" aria-hidden="true"></i>
-                                                    </a>
-                                                </div>
-                                            </div>
-                                            <a href="" ng-click="addEntry(config.HostConfig.DnsSearch, {name: ''})">
-                                              <i class="fa fa-plus" aria-hidden="true"></i>
-                                            </a>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>CapAdd:</label>
-
-                                            <div ng-repeat="entry in config.HostConfig.CapAdd">
-                                                <div class="form-group form-inline">
-                                                    <input type="text" ng-model="entry.name" class="form-control"
-                                                           placeholder="cap_sys_admin"/>
-                                                    <a href="" ng-click="rmEntry(config.HostConfig.CapAdd, entry)">
-                                                      <i class="fa fa-minus" aria-hidden="true"></i>
-                                                    </a>
-                                                </div>
-                                            </div>
-                                            <a href="" ng-click="addEntry(config.HostConfig.CapAdd, {name: ''})">
-                                              <i class="fa fa-plus" aria-hidden="true"></i>
-                                            </a>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>CapDrop:</label>
-
-                                            <div ng-repeat="entry in config.HostConfig.CapDrop">
-                                                <div class="form-group form-inline">
-                                                    <input type="text" ng-model="entry.name" class="form-control"
-                                                           placeholder="cap_sys_admin"/>
-                                                    <a href="" ng-click="rmEntry(config.HostConfig.CapDrop, entry)">
-                                                      <i class="fa fa-minus" aria-hidden="true"></i>
-                                                    </a>
-                                                </div>
-                                            </div>
-                                            <a href="" ng-click="addEntry(config.HostConfig.CapDrop, {name: ''})">
-                                              <i class="fa fa-plus" aria-hidden="true"></i>
-                                            </a>
-                                        </div>
-                                    </div>
-                                    <div class="col-xs-6">
-                                        <div class="form-group">
-                                            <label>NetworkMode:</label>
-                                            <input type="text" ng-model="config.HostConfig.NetworkMode"
-                                                   class="form-control" placeholder="bridge"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label for="publishAllPorts">PublishAllPorts:</label>
-                                            <input id="publishAllPorts" type="checkbox"
-                                                   ng-model="config.HostConfig.PublishAllPorts"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label for="privileged">Privileged:</label>
-                                            <input id="privileged" type="checkbox"
-                                                   ng-model="config.HostConfig.Privileged"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>VolumesFrom:</label>
-
-                                            <div ng-repeat="volume in config.HostConfig.VolumesFrom">
-                                                <div class="form-group form-inline">
-                                                    <select ng-model="volume.name"
-                                                            ng-options="name for name in containerNames track by name"
-                                                            class="form-control">
-                                                    </select>
-                                                    <a href="" ng-click="rmEntry(config.HostConfig.VolumesFrom, volume)">
-                                                      <i class="fa fa-minus" aria-hidden="true"></i>
-                                                    </a>
-                                                </div>
-                                            </div>
-                                            <a href="" ng-click="addEntry(config.HostConfig.VolumesFrom, {name: ''})">
-                                              <i class="fa fa-plus" aria-hidden="true"></i>
-                                            </a>
-                                        </div>
-
-                                        <div class="form-group">
-                                            <label>RestartPolicy:</label>
-                                            <select ng-model="config.HostConfig.RestartPolicy.name">
-                                                <option value="">disabled</option>
-                                                <option value="always">always</option>
-                                                <option value="on-failure">on-failure</option>
-                                            </select>
-                                            <label>MaximumRetryCount:</label>
-                                            <input type="number"
-                                                   ng-model="config.HostConfig.RestartPolicy.MaximumRetryCount"/>
-                                        </div>
-                                    </div>
-                                </div>
-                                <hr>
-                                <div class="form-group">
-                                    <label>ExtraHosts:</label>
-
-                                    <div ng-repeat="entry in config.HostConfig.ExtraHosts">
-                                        <div class="form-group form-inline">
-                                            <div class="form-group">
-                                                <label class="sr-only">Hostname:</label>
-                                                <input type="text" ng-model="entry.host" class="form-control"
-                                                       placeholder="hostname"/>
-                                            </div>
-                                            <div class="form-group">
-                                                <label class="sr-only">IP Address:</label>
-                                                <input type="text" ng-model="entry.ip" class="form-control"
-                                                       placeholder="127.0.0.1"/>
-                                            </div>
-                                            <div class="form-group">
-                                                <a href="" ng-click="rmEntry(config.HostConfig.ExtraHosts, entry)">
-                                                  <i class="fa fa-minus" aria-hidden="true"></i>
-                                                </a>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <a href="" ng-click="addEntry(config.HostConfig.ExtraHosts, {host: '', ip: ''})">
-                                      <i class="fa fa-plus" aria-hidden="true"></i>
-                                    </a>
-                                </div>
-                                <div class="form-group">
-                                    <label>LxcConf:</label>
-
-                                    <div ng-repeat="entry in config.HostConfig.LxcConf">
-                                        <div class="form-group form-inline">
-                                            <div class="form-group">
-                                                <label class="sr-only">Name:</label>
-                                                <input type="text" ng-model="entry.name" class="form-control"
-                                                       placeholder="lxc.utsname"/>
-                                            </div>
-                                            <div class="form-group">
-                                                <label class="sr-only">Value:</label>
-                                                <input type="text" ng-model="entry.value" class="form-control"
-                                                       placeholder="docker"/>
-                                            </div>
-                                            <div class="form-group">
-                                                <a href="" ng-click="rmEntry(config.HostConfig.LxcConf, entry)">
-                                                  <i class="fa fa-minus" aria-hidden="true"></i>
-                                                </a>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <a href="" ng-click="addEntry(config.HostConfig.LxcConf, {name: '', value: ''})">
-                                      <i class="fa fa-plus" aria-hidden="true"></i>
-                                    </a>
-                                </div>
-                                <div class="form-group">
-                                    <label>Devices:</label>
-
-                                    <div ng-repeat="device in config.HostConfig.Devices">
-                                        <div class="form-group form-inline inline-four">
-                                            <label class="sr-only">PathOnHost:</label>
-                                            <input type="text" ng-model="device.PathOnHost" class="form-control"
-                                                   placeholder="PathOnHost"/>
-                                            <label class="sr-only">PathInContainer:</label>
-                                            <input type="text" ng-model="device.PathInContainer" class="form-control"
-                                                   placeholder="PathInContainer"/>
-                                            <label class="sr-only">CgroupPermissions:</label>
-                                            <input type="text" ng-model="device.CgroupPermissions" class="form-control"
-                                                   placeholder="CgroupPermissions"/>
-                                            <a href="" ng-click="rmEntry(config.HostConfig.Devices, device)">
-                                              <i class="fa fa-minus" aria-hidden="true"></i>
-                                            </a>
-                                        </div>
-                                    </div>
-                                    <a href="" ng-click="addEntry(config.HostConfig.Devices, { PathOnHost: '', PathInContainer: '', CgroupPermissions: ''})">
-                                      <i class="fa fa-plus" aria-hidden="true"></i>
-                                    </a>
-                                </div>
-                                <div class="form-group">
-                                    <label>PortBindings:</label>
-
-                                    <div ng-repeat="portBinding in config.HostConfig.PortBindings">
-                                        <div class="form-group form-inline inline-four">
-                                            <label class="sr-only">Host IP:</label>
-                                            <input type="text" ng-model="portBinding.ip" class="form-control"
-                                                   placeholder="Host IP Address"/>
-                                            <label class="sr-only">Host Port:</label>
-                                            <input type="text" ng-model="portBinding.extPort" class="form-control"
-                                                   placeholder="Host Port"/>
-                                            <label class="sr-only">Container port:</label>
-                                            <input type="text" ng-model="portBinding.intPort" class="form-control"
-                                                   placeholder="Container Port"/>
-                                            <select ng-model="portBinding.protocol">
-                                                <option value="">tcp</option>
-                                                <option value="udp">udp</option>
-                                            </select>
-                                            <a href="" ng-click="rmEntry(config.HostConfig.PortBindings, portBinding)">
-                                              <i class="fa fa-minus" aria-hidden="true"></i>
-                                            </a>
-                                        </div>
-                                    </div>
-                                    <a href="" ng-click="addEntry(config.HostConfig.PortBindings, {ip: '', extPort: '', intPort: ''})">
-                                      <i class="fa fa-plus" aria-hidden="true"></i>
-                                    </a>
-                                </div>
-                            </fieldset>
-                        </accordion-group>
-                    </accordion>
-                </form>
-            </div>
-            <div class="modal-footer">
-                <a href="" class="btn btn-primary btn-lg" ng-click="create()">Create</a>
-            </div>
-        </div>
-    </div>
-</div>

app/components/swarm/swarm.html

@@ -115,6 +115,13 @@
                   <span ng-show="sortType == 'Containers' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
+              <th>
+                <a ui-sref="swarm" ng-click="order('Engine')">
+                  Engine
+                  <span ng-show="sortType == 'Engine' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Engine' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
               <th>
                 <a ui-sref="swarm" ng-click="order('Status')">
                   Status
@@ -129,7 +136,8 @@
               <td>{{ node.name }}</td>
               <td>{{ node.ip }}</td>
               <td>{{ node.containers }}</td>
-              <td><span class="label label-{{ node.status|statusbadge }}">{{ node.status }}</span></td>
+              <td>{{ node.version }}</td>
+              <td><span class="label label-{{ node.status|nodestatusbadge }}">{{ node.status }}</span></td>
             </tr>
           </tbody>
         </table>

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 += 9;
+          node_offset += 10;
         }
       }
 
@@ -50,12 +50,12 @@ angular.module('swarm', [])
         var node = {};
         node.name = info[offset][0];
         node.ip = info[offset][1];
-        node.status = info[offset + 1][1];
-        node.containers = info[offset + 2][1];
-        node.cpu = info[offset + 3][1];
-        node.memory = info[offset + 4][1];
-        node.labels = info[offset + 5][1];
-        node.error = info[offset + 6][1];
+        node.id = info[offset + 1][1];
+        node.status = info[offset + 2][1];
+        node.containers = info[offset + 3][1];
+        node.cpu = info[offset + 4][1];
+        node.memory = info[offset + 5][1];
+        node.labels = info[offset + 6][1];
         node.version = info[offset + 8][1];
         $scope.swarm.Status.push(node);
       }

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" />

app/shared/filters.js

@@ -1,128 +1,155 @@
 angular.module('dockerui.filters', [])
-    .filter('truncate', function () {
-        'use strict';
-        return function (text, length, end) {
-            if (isNaN(length)) {
-                length = 10;
-            }
+.filter('truncate', function () {
+  'use strict';
+  return function (text, length, end) {
+    if (isNaN(length)) {
+      length = 10;
+    }
 
-            if (end === undefined) {
-                end = '...';
-            }
+    if (end === undefined) {
+      end = '...';
+    }
 
-            if (text.length <= length || text.length - end.length <= length) {
-                return text;
-            }
-            else {
-                return String(text).substring(0, length - end.length) + end;
-            }
-        };
-    })
-    .filter('statusbadge', function () {
-        'use strict';
-        return function (text) {
-            if (text === 'Ghost') {
-                return 'important';
-            } else if (text === 'Unhealthy') {
-                return 'danger';
-            } else if (text.indexOf('Exit') !== -1 && text !== 'Exit 0') {
-                return 'warning';
-            }
-            return 'success';
-        };
-    })
-    .filter('trimcontainername', function () {
-      'use strict';
-      return function (name) {
-        if (name) {
-          return (name.indexOf('/') === 0 ? name.replace('/','') : name);          
-        }
-        return '';
-      };
-    })
-    .filter('getstatetext', function () {
-        'use strict';
-        return function (state) {
-            if (state === undefined) {
-                return '';
-            }
-            if (state.Ghost && state.Running) {
-                return 'Ghost';
-            }
-            if (state.Running && state.Paused) {
-                return 'Running (Paused)';
-            }
-            if (state.Running) {
-                return 'Running';
-            }
-            return 'Stopped';
-        };
-    })
-    .filter('getstatelabel', function () {
-        'use strict';
-        return function (state) {
-            if (state === undefined) {
-                return 'label-default';
-            }
+    if (text.length <= length || text.length - end.length <= length) {
+      return text;
+    }
+    else {
+      return String(text).substring(0, length - end.length) + end;
+    }
+  };
+})
+.filter('containerstatusbadge', function () {
+  'use strict';
+  return function (text) {
+    if (text === 'paused') {
+      return 'warning';
+    } else if (text === 'created') {
+      return 'info';
+    } else if (text === 'exited') {
+      return 'danger';
+    }
+    return 'success';
+  };
+})
+.filter('nodestatusbadge', function () {
+  'use strict';
+  return function (text) {
+    if (text === 'Unhealthy') {
+      return 'danger';
+    }
+    return 'success';
+  };
+})
+.filter('trimcontainername', function () {
+  'use strict';
+  return function (name) {
+    if (name) {
+      return (name.indexOf('/') === 0 ? name.replace('/','') : name);
+    }
+    return '';
+  };
+})
+.filter('capitalize', function () {
+  'use strict';
+  return function (text) {
+    return _.capitalize(text);
+  };
+})
+.filter('getstatetext', function () {
+  'use strict';
+  return function (state) {
+    if (state === undefined) {
+      return '';
+    }
+    if (state.Ghost && state.Running) {
+      return 'Ghost';
+    }
+    if (state.Running && state.Paused) {
+      return 'Running (Paused)';
+    }
+    if (state.Running) {
+      return 'Running';
+    }
+    return 'Stopped';
+  };
+})
+.filter('getstatelabel', function () {
+  'use strict';
+  return function (state) {
+    if (state === undefined) {
+      return 'label-default';
+    }
 
-            if (state.Ghost && state.Running) {
-                return 'label-important';
-            }
-            if (state.Running) {
-                return 'label-success';
-            }
-            return 'label-default';
-        };
-    })
-    .filter('humansize', function () {
-        'use strict';
-        return function (bytes) {
-            var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
-            if (bytes === 0) {
-                return 'n/a';
-            }
-            var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10);
-            var value = bytes / Math.pow(1024, i);
-            var decimalPlaces = (i < 1) ? 0 : (i - 1);
-            return value.toFixed(decimalPlaces) + ' ' + sizes[[i]];
-        };
-    })
-    .filter('containername', function () {
-        'use strict';
-        return function (container) {
-            var name = container.Names[0];
-            return name.substring(1, name.length);
-        };
-    })
-    .filter('repotag', function () {
-        'use strict';
-        return function (image) {
-            if (image.RepoTags && image.RepoTags.length > 0) {
-                var tag = image.RepoTags[0];
-                if (tag === '<none>:<none>') {
-                    tag = '';
-                }
-                return tag;
-            }
-            return '';
-        };
-    })
-    .filter('getdate', function () {
-        'use strict';
-        return function (data) {
-            //Multiply by 1000 for the unix format
-            var date = new Date(data * 1000);
-            return date.toDateString();
-        };
-    })
-    .filter('errorMsg', function () {
-        return function (object) {
-            var idx = 0;
-            var msg = '';
-            while (object[idx] && typeof(object[idx]) === 'string') {
-                msg += object[idx];
-                idx++;
-            }
-            return msg;
-        };
-    });
+    if (state.Ghost && state.Running) {
+      return 'label-important';
+    }
+    if (state.Running) {
+      return 'label-success';
+    }
+    return 'label-default';
+  };
+})
+.filter('humansize', function () {
+  'use strict';
+  return function (bytes) {
+    var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    if (bytes === 0) {
+      return 'n/a';
+    }
+    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10);
+    var value = bytes / Math.pow(1024, i);
+    var decimalPlaces = (i < 1) ? 0 : (i - 1);
+    return value.toFixed(decimalPlaces) + ' ' + sizes[[i]];
+  };
+})
+.filter('containername', function () {
+  'use strict';
+  return function (container) {
+    var name = container.Names[0];
+    return name.substring(1, name.length);
+  };
+})
+.filter('swarmcontainername', function () {
+  'use strict';
+  return function (container) {
+    return _.split(container.Names[0], '/')[2];
+  };
+})
+.filter('swarmhostname', function () {
+  'use strict';
+  return function (container) {
+    return _.split(container.Names[0], '/')[1];
+  };
+})
+.filter('repotag', function () {
+  'use strict';
+  return function (image) {
+    if (image.RepoTags && image.RepoTags.length > 0) {
+      var tag = image.RepoTags[0];
+      if (tag === '<none>:<none>') {
+        tag = '';
+      }
+      return tag;
+    }
+    return '';
+  };
+})
+.filter('getdate', function () {
+  'use strict';
+  return function (data) {
+    //Multiply by 1000 for the unix format
+    var date = new Date(data * 1000);
+    return date.toDateString();
+  };
+})
+.filter('errorMsg', function () {
+  return function (object) {
+    var idx = 0;
+    var msg = '';
+    while (object[idx] && typeof(object[idx]) === 'string') {
+      msg += object[idx];
+      idx++;
+    }
+    return msg;
+  };
+});

app/shared/services.js

@@ -86,10 +86,10 @@ angular.module('dockerui.services', ['ngResource', 'ngSanitize'])
             history: {method: 'GET', params: {action: 'history'}, isArray: true},
             create: {
                 method: 'POST', isArray: true, transformResponse: [function f(data) {
-                    var str = data.replace(/\n/g, " ").replace(/\}\W*\{/g, "}, {");
-                    return angular.fromJson("[" + str + "]");
+                    var str = "[" + data.replace(/\n/g, " ").replace(/\}\s*\{/g, "}, {") + "]";
+                    return angular.fromJson(str);
                 }],
-                params: {action: 'create', fromImage: '@fromImage', repo: '@repo', tag: '@tag', registry: '@registry'}
+                params: {action: 'create', fromImage: '@fromImage', tag: '@tag'}
             },
             insert: {method: 'POST', params: {id: '@id', action: 'insert'}},
             push: {method: 'POST', params: {id: '@id', action: 'push'}},
@@ -142,6 +142,9 @@ angular.module('dockerui.services', ['ngResource', 'ngSanitize'])
             remove: {method: 'DELETE'}
         });
     }])
+    .factory('Config', ['$resource', 'CONFIG_ENDPOINT', function($resource, CONFIG_ENDPOINT) {
+      return $resource(CONFIG_ENDPOINT).get();
+    }])
     .factory('Settings', ['DOCKER_ENDPOINT', 'DOCKER_PORT', 'UI_VERSION', function SettingsFactory(DOCKER_ENDPOINT, DOCKER_PORT, UI_VERSION) {
         'use strict';
         var url = DOCKER_ENDPOINT;
@@ -150,11 +153,11 @@ angular.module('dockerui.services', ['ngResource', 'ngSanitize'])
         }
         var firstLoad = (localStorage.getItem('firstLoad') || 'true') === 'true';
         return {
-            displayAll: false,
-            endpoint: DOCKER_ENDPOINT,
-            uiVersion: UI_VERSION,
-            url: url,
-            firstLoad: firstLoad
+          displayAll: false,
+          endpoint: DOCKER_ENDPOINT,
+          uiVersion: UI_VERSION,
+          url: url,
+          firstLoad: firstLoad
         };
     }])
     .factory('ViewSpinner', function ViewSpinnerFactory() {

app/shared/viewmodel.js

@@ -10,11 +10,10 @@ function ImageViewModel(data) {
 
 function ContainerViewModel(data) {
     this.Id = data.Id;
+    this.State = data.State;
+    this.Names = data.Names;
+    this.IP = data.NetworkSettings.Networks[Object.keys(data.NetworkSettings.Networks)[0]].IPAddress;
     this.Image = data.Image;
     this.Command = data.Command;
-    this.Created = data.Created;
-    this.SizeRw = data.SizeRw;
-    this.Status = data.Status;
     this.Checked = false;
-    this.Names = data.Names;
 }

assets/css/app.css

@@ -116,8 +116,11 @@
 
 .logo {
   display: inline;
-  width: 110px;
-  max-height: 38px;
+  width: 100%;
+  max-width: 160px;
+  height: 100%;
+  max-height: 55px;
+  margin-bottom: 5px;
 }
 
 .containerNameInput {
@@ -143,3 +146,22 @@
 .header_title_content {
   margin-left: 5px;
 }
+
+.form-horizontal .control-label.text-left{
+    text-align: left;
+    font-size: 0.9em;
+}
+
+input[type="checkbox"] {
+  margin-top: 1px;
+  vertical-align: middle;
+}
+
+input[type="radio"] {
+  margin-top: 1px;
+  vertical-align: middle;
+}
+
+.clickable {
+  cursor: pointer;
+}

bower.json

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

dockerui.go

@@ -1,25 +1,29 @@
-package main // import "github.com/cloudinovasi/cloudinovasi-ui"
+package main // import "github.com/cloudinovasi/ui-for-docker"
 
 import (
-	"flag"
 	"io"
 	"log"
 	"net"
 	"net/http"
 	"net/http/httputil"
 	"net/url"
+	"encoding/json"
 	"os"
 	"strings"
 	"github.com/gorilla/csrf"
 	"io/ioutil"
 	"fmt"
 	"github.com/gorilla/securecookie"
+	"gopkg.in/alecthomas/kingpin.v2"
 )
 
 var (
-	endpoint = flag.String("e", "/var/run/docker.sock", "Dockerd endpoint")
-	addr     = flag.String("p", ":9000", "Address and port to serve UI For Docker")
-	assets   = flag.String("a", ".", "Path to the assets")
+	endpoint = kingpin.Flag("endpoint", "Dockerd endpoint").Default("/var/run/docker.sock").Short('e').String()
+	addr 		 = kingpin.Flag("bind", "Address and port to serve UI For Docker").Default(":9000").Short('p').String()
+	assets   = kingpin.Flag("assets", "Path to the assets").Default(".").Short('a').String()
+	data		 = kingpin.Flag("data", "Path to the data").Default(".").Short('d').String()
+	swarm	   = kingpin.Flag("swarm", "Swarm cluster support").Default("false").Short('s').Bool()
+	labels   = LabelParser(kingpin.Flag("hide-label", "Hide containers with a specific label in the UI").Short('l'))
 	authKey  []byte
 	authKeyFile = "authKey.dat"
 )
@@ -28,6 +32,44 @@ type UnixHandler struct {
 	path string
 }
 
+type Config struct {
+	Swarm bool `json:"swarm"`
+	HiddenLabels Labels `json:"hiddenLabels"`
+}
+
+type Label struct {
+	Name string `json:"name"`
+	Value string `json:"value"`
+}
+
+type Labels []Label
+
+func (l *Labels) Set(value string) error {
+  parts := strings.SplitN(value, "=", 2)
+  if len(parts) != 2 {
+    return fmt.Errorf("expected HEADER=VALUE got '%s'", value)
+  }
+	label := new(Label)
+  label.Name = parts[0]
+	label.Value = parts[1]
+	*l = append(*l, *label)
+  return nil
+}
+
+func (l *Labels) String() string {
+  return ""
+}
+
+func (l *Labels) IsCumulative() bool {
+  return true
+}
+
+func LabelParser(s kingpin.Settings) (target *[]Label) {
+	target = new([]Label)
+  s.SetValue((*Labels)(target))
+  return
+}
+
 func (h *UnixHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 	conn, err := net.Dial("unix", h.path)
 	if err != nil {
@@ -60,6 +102,10 @@ func copyHeader(dst, src http.Header) {
 	}
 }
 
+func configurationHandler(w http.ResponseWriter, r *http.Request, c Config) {
+    json.NewEncoder(w).Encode(c)
+}
+
 func createTcpHandler(e string) http.Handler {
 	u, err := url.Parse(e)
 	if err != nil {
@@ -72,7 +118,7 @@ func createUnixHandler(e string) http.Handler {
 	return &UnixHandler{e}
 }
 
-func createHandler(dir string, e string) http.Handler {
+func createHandler(dir string, d string, e string, c Config) http.Handler {
 	var (
 		mux         = http.NewServeMux()
 		fileHandler = http.FileServer(http.Dir(dir))
@@ -92,11 +138,12 @@ func createHandler(dir string, e string) http.Handler {
 	}
 
 	// Use existing csrf authKey if present or generate a new one.
-	dat, err := ioutil.ReadFile(authKeyFile)
+	var authKeyPath = d + "/" + authKeyFile
+	dat, err := ioutil.ReadFile(authKeyPath)
 	if err != nil {
 		fmt.Println(err)
 		authKey = securecookie.GenerateRandomKey(32)
-		err := ioutil.WriteFile(authKeyFile, authKey, 0644)
+		err := ioutil.WriteFile(authKeyPath, authKey, 0644)
 		if err != nil {
 			fmt.Println("unable to persist auth key", err)
 		}
@@ -112,6 +159,9 @@ func createHandler(dir string, e string) http.Handler {
 
 	mux.Handle("/dockerapi/", http.StripPrefix("/dockerapi", h))
 	mux.Handle("/", fileHandler)
+	mux.HandleFunc("/config", func(w http.ResponseWriter, r *http.Request) {
+  	configurationHandler(w, r, c)
+  })
 	return CSRF(csrfWrapper(mux))
 }
 
@@ -123,9 +173,15 @@ func csrfWrapper(h http.Handler) http.Handler {
 }
 
 func main() {
-	flag.Parse()
+	kingpin.Version("1.2.0")
+	kingpin.Parse()
 
-	handler := createHandler(*assets, *endpoint)
+	configuration := Config{
+		Swarm: *swarm,
+		HiddenLabels: *labels,
+	}
+
+	handler := createHandler(*assets, *data, *endpoint, configuration)
 	if err := http.ListenAndServe(*addr, handler); err != nil {
 		log.Fatal(err)
 	}

gruntFile.js

@@ -24,7 +24,7 @@ module.exports = function (grunt) {
         'copy'
     ]);
     grunt.registerTask('release', [
-        'clean:app',
+        'clean:all',
         'if:binaryNotExist',
         'html2js',
         'uglify',
@@ -35,9 +35,10 @@ 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('runSwarm', ['if:binaryNotExist', 'build', 'shell:buildImage', 'shell:runSwarm', 'watch:buildSwarm']);
+    grunt.registerTask('run-swarm', ['if:binaryNotExist', 'build', 'shell:buildImage', 'shell:runSwarm', 'watch:buildSwarm']);
     grunt.registerTask('run-dev', ['if:binaryNotExist', 'shell:buildImage', 'shell:run', 'watch:build']);
     grunt.registerTask('clear', ['clean:app']);
 
@@ -260,14 +261,14 @@ module.exports = function (grunt) {
                 command: [
                     'docker stop ui-for-docker',
                     'docker rm ui-for-docker',
-                    'docker run --privileged -d -p 9000:9000 -v /var/run/docker.sock:/var/run/docker.sock --name ui-for-docker ui-for-docker'
+                    'docker run --privileged -d -p 9000:9000 -v /tmp/docker-ui:/data -v /var/run/docker.sock:/var/run/docker.sock --name ui-for-docker ui-for-docker -d /data'
                 ].join(';')
             },
             runSwarm: {
                 command: [
                     'docker stop ui-for-docker',
                     'docker rm ui-for-docker',
-                    'docker run --net=host -d --name ui-for-docker ui-for-docker -e http://10.0.7.11:4000'
+                    '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'
                 ].join(';')
             },
             cleanImages: {

index.html

@@ -52,9 +52,12 @@
         <li class="sidebar-list">
           <a ui-sref="volumes">Volumes <span class="menu-icon fa fa-cubes"></span></a>
         </li>
-        <li class="sidebar-list">
+        <li class="sidebar-list" ng-if="config.swarm">
           <a ui-sref="swarm">Swarm <span class="menu-icon fa fa-object-group"></span></a>
         </li>
+        <li class="sidebar-list" ng-if="!config.swarm">
+          <a ui-sref="docker">Docker <span class="menu-icon fa fa-cogs"></span></a>
+        </li>
       </ul>
       <div class="sidebar-footer">
         <div class="col-xs-12">

package.json

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

test/unit/app/shared/filters.spec.js

@@ -15,20 +15,6 @@ describe('filters', function () {
         }));
     });
 
-    describe('statusbadge', function () {
-        it('should be "important" when input is "Ghost"', inject(function (statusbadgeFilter) {
-            expect(statusbadgeFilter('Ghost')).toBe('important');
-        }));
-
-        it('should be "success" when input is "Exit 0"', inject(function (statusbadgeFilter) {
-            expect(statusbadgeFilter('Exit 0')).toBe('success');
-        }));
-
-        it('should be "warning" when exit code is non-zero', inject(function (statusbadgeFilter) {
-            expect(statusbadgeFilter('Exit 1')).toBe('warning');
-        }));
-    });
-
     describe('getstatetext', function () {
 
         it('should return an empty string when state is undefined', inject(function (getstatetextFilter) {
@@ -352,4 +338,4 @@ describe('filters', function () {
                 expect(errorMsgFilter(response)).toBe(message);
             }));
     });
-});
+});