Merge branch 'release/1.7.0'

Release 1.6.0

README.md

@@ -1,7 +1,5 @@
 # Cloudinovasi UI for Docker
 
-This UI is dedicated to CloudInovasi internal usage.
-
 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).
 
 ![Dashboard](/dashboard.png)
@@ -9,6 +7,7 @@ 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
+
 * 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.
 
@@ -85,6 +84,18 @@ $ docker run -d -p 9000:9000 cloudinovasi/cloudinovasi-ui -v /path/to/certs:/cer
 
 *Note*: Replace `/path/to/certs` to the path to the certificate files on your disk.
 
+### Use your own logo
+
+You can use the `--logo` flag to specify an URL to your own logo.
+
+For example, using the Docker logo:
+
+```
+$ docker run -d -p 9000:9000 --privileged -v /var/run/docker.sock:/var/run/docker.sock cloudinovasi/cloudinovasi-ui --logo "https://www.docker.com/sites/all/themes/docker/assets/images/brand-full.svg"
+```
+
+The custom logo will replace the CloudInovasi logo in the 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.
@@ -101,15 +112,35 @@ 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
 ```
 
-### Custom Docker registries support
+### Reverse proxy configuration
 
-You can specify the support of others registries than DockerHub by using the `--registries` or `-r` options and specifying a registry using the format *REGISTRY_NAME=REGISTRY_ADDRESS*.
+Has been tested with Nginx 1.11.
 
-For example, if I want the registry 'myCustomRegistry' pointing to *myregistry.domain.com:5000* available in the UI:
+Use the following configuration to host the UI at `myhost.mydomain.com/dockerui`:
 
+```nginx
+upstream cloudinovasi-ui {
+    server ADDRESS:PORT;
+}
+
+server {
+  listen 80;
+
+  location /dockerui/ {
+      proxy_http_version 1.1;
+      proxy_set_header Connection "";
+      proxy_pass http://cloudinovasi-ui/;
+  }
+  location /dockerui/ws/ {
+      proxy_set_header Upgrade $http_upgrade;
+      proxy_set_header Connection "upgrade";
+      proxy_http_version 1.1;
+      proxy_pass http://cloudinovasi-ui/ws/;
+  }
+}
 ```
-$ docker run -d -p 9000:9000 --privileged -v /var/run/docker.sock:/var/run/docker.sock cloudinovasi/cloudinovasi-ui -r myCustomRegistry=myregistry.domain.com:5000
-```
+
+Replace `ADDRESS:PORT` with the CloudInovasi UI container details.
 
 ### Available options
 
@@ -120,9 +151,9 @@ The following options are available for the `ui-for-docker` binary:
 * `--data`, `-d`: Path to the data folder (default: `"."`)
 * `--assets`, `-a`: Path to the assets (default: `"."`)
 * `--swarm`, `-s`: Swarm cluster support (default: `false`)
-* `--registries`, `-r`: Available registries in the UI (format *REGISTRY_NAME=REGISTRY_ADDRESS*)
 * `--tlsverify`: TLS support (default: `false`)
 * `--tlscacert`: Path to the CA (default `/certs/ca.pem`)
 * `--tlscert`: Path to the TLS certificate file (default `/certs/cert.pem`)
 * `--tlskey`: Path to the TLS key (default `/certs/key.pem`)
 * `--hide-label`, `-l`: Hide containers with a specific label in the UI
+* `--logo`: URL to a picture to be displayed as a logo in the UI

api/main.go

@@ -6,19 +6,19 @@ import (
 
 // main is the entry point of the program
 func main() {
-	kingpin.Version("1.5.0")
+	kingpin.Version("1.7.0")
 	var (
-		endpoint   = kingpin.Flag("host", "Dockerd endpoint").Default("unix:///var/run/docker.sock").Short('H').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()
-		tlsverify  = kingpin.Flag("tlsverify", "TLS support").Default("false").Bool()
-		tlscacert  = kingpin.Flag("tlscacert", "Path to the CA").Default("/certs/ca.pem").String()
-		tlscert    = kingpin.Flag("tlscert", "Path to the TLS certificate file").Default("/certs/cert.pem").String()
-		tlskey     = kingpin.Flag("tlskey", "Path to the TLS key").Default("/certs/key.pem").String()
-		swarm      = kingpin.Flag("swarm", "Swarm cluster support").Default("false").Short('s').Bool()
-		labels     = pairs(kingpin.Flag("hide-label", "Hide containers with a specific label in the UI").Short('l'))
-		registries = pairs(kingpin.Flag("registries", "Supported Docker registries").Short('r'))
+		endpoint  = kingpin.Flag("host", "Dockerd endpoint").Default("unix:///var/run/docker.sock").Short('H').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()
+		tlsverify = kingpin.Flag("tlsverify", "TLS support").Default("false").Bool()
+		tlscacert = kingpin.Flag("tlscacert", "Path to the CA").Default("/certs/ca.pem").String()
+		tlscert   = kingpin.Flag("tlscert", "Path to the TLS certificate file").Default("/certs/cert.pem").String()
+		tlskey    = kingpin.Flag("tlskey", "Path to the TLS key").Default("/certs/key.pem").String()
+		swarm     = kingpin.Flag("swarm", "Swarm cluster support").Default("false").Short('s').Bool()
+		labels    = pairs(kingpin.Flag("hide-label", "Hide containers with a specific label in the UI").Short('l'))
+		logo      = kingpin.Flag("logo", "URL for the logo displayed in the UI").String()
 	)
 	kingpin.Parse()
 
@@ -37,7 +37,7 @@ func main() {
 	settings := &Settings{
 		Swarm:        *swarm,
 		HiddenLabels: *labels,
-		Registries:   *registries,
+		Logo:         *logo,
 	}
 
 	api := newAPI(apiConfig)

api/settings.go

@@ -9,7 +9,7 @@ import (
 type Settings struct {
 	Swarm        bool     `json:"swarm"`
 	HiddenLabels pairList `json:"hiddenLabels"`
-	Registries   pairList `json:"registries"`
+	Logo         string   `json:"logo"`
 }
 
 // configurationHandler defines a handler function used to encode the configuration in JSON

app/app.js

@@ -21,7 +21,9 @@ angular.module('uifordocker', [
   'swarm',
   'network',
   'networks',
-  'volumes'])
+  'createNetwork',
+  'volumes',
+  'createVolume'])
   .config(['$stateProvider', '$urlRouterProvider', '$httpProvider', function ($stateProvider, $urlRouterProvider, $httpProvider) {
     'use strict';
 
@@ -154,4 +156,4 @@ angular.module('uifordocker', [
   .constant('DOCKER_ENDPOINT', 'dockerapi')
   .constant('DOCKER_PORT', '') // Docker port, leave as an empty string if no port is requred.  If you have a port, prefix it with a ':' i.e. :4243
   .constant('CONFIG_ENDPOINT', 'settings')
-  .constant('UI_VERSION', 'v1.5.0');
+  .constant('UI_VERSION', 'v1.7.0');

app/components/container/container.html

@@ -84,7 +84,7 @@
           <tbody>
             <tr>
               <td>Created</td>
-              <td>{{ container.Created | date: 'medium' }}</td>
+              <td>{{ container.Created|getisodate }}</td>
             </tr>
             <tr>
               <td>Path</td>
@@ -186,7 +186,8 @@
           <tbody>
             <tr ng-repeat="(key, val) in container.State">
               <td>{{key}}</td>
-              <td>{{ val }}</td>
+              <td ng-if="key === 'StartedAt' || key ===  'FinishedAt'">{{val|getisodate}}</td>
+              <td ng-if="key !== 'StartedAt' && key !==  'FinishedAt'">{{val}}</td>
             </tr>
           </tbody>
         </table>

app/components/containerConsole/containerConsoleController.js

@@ -36,7 +36,12 @@ function ($scope, $stateParams, Settings, Container, Exec, $timeout, Messages, e
       if (d.Id) {
         var execId = d.Id;
         resizeTTY(execId, termHeight, termWidth);
-        var url = window.location.href.split('#')[0].replace('http://', 'ws://') + 'ws/exec?id=' + execId;
+        var url = window.location.href.split('#')[0] + 'ws/exec?id=' + execId;
+        if (url.indexOf('https') > -1) {
+          url = url.replace('https://', 'wss://');
+        } else {
+          url = url.replace('http://', 'ws://');
+        }
         initTerm(url, termHeight, termWidth);
       } else {
         $('#loadConsoleSpinner').hide();

app/components/containers/containers.html

@@ -89,7 +89,7 @@
               <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 ng-if="state.displayIP">{{ container.IP ? container.IP : '-' }}</td>
-              <td ng-if="swarm">{{ container|swarmhostname}}</td>
+              <td ng-if="swarm">{{ container.hostIP }}</td>
               <td><a ui-sref="image({id: container.Image})">{{ container.Image }}</a></td>
               <td>{{ container.Command|truncate:60 }}</td>
             </tr>

app/components/containers/containersController.js

@@ -1,6 +1,6 @@
 angular.module('containers', [])
-.controller('ContainersController', ['$scope', 'Container', 'Settings', 'Messages', 'Config', 'errorMsgFilter',
-function ($scope, Container, Settings, Messages, Config, errorMsgFilter) {
+.controller('ContainersController', ['$scope', 'Container', 'Info', 'Settings', 'Messages', 'Config', 'errorMsgFilter',
+function ($scope, Container, Info, Settings, Messages, Config, errorMsgFilter) {
 
   $scope.state = {};
   $scope.state.displayAll = Settings.displayAll;
@@ -27,6 +27,9 @@ function ($scope, Container, Settings, Messages, Config, errorMsgFilter) {
         if (model.IP) {
           $scope.state.displayIP = true;
         }
+        if ($scope.swarm) {
+          model.hostIP = $scope.swarm_hosts[_.split(container.Names[0], '/')[1]];
+        }
         return model;
       });
       $('#loadContainersSpinner').hide();
@@ -154,10 +157,32 @@ function ($scope, Container, Settings, Messages, Config, errorMsgFilter) {
     });
   };
 
+  function retrieveSwarmHostsInfo(data) {
+    var swarm_hosts = {};
+    var systemStatus = data.SystemStatus;
+    var node_count = parseInt(systemStatus[3][1], 10);
+    var node_offset = 4;
+    for (i = 0; i < node_count; i++) {
+      var host = {};
+      host.name = _.trim(systemStatus[node_offset][0]);
+      host.ip = _.split(systemStatus[node_offset][1], ':')[0];
+      swarm_hosts[host.name] = host.ip;
+      node_offset += 9;
+    }
+    return swarm_hosts;
+  }
+
   $scope.swarm = false;
   Config.$promise.then(function (c) {
     hiddenLabels = c.hiddenLabels;
     $scope.swarm = c.swarm;
-    update({all: Settings.displayAll ? 1 : 0});
+    if (c.swarm) {
+      Info.get({}, function (d) {
+        $scope.swarm_hosts = retrieveSwarmHostsInfo(d);
+        update({all: Settings.displayAll ? 1 : 0});
+      });
+    } else {
+      update({all: Settings.displayAll ? 1 : 0});
+    }
   });
 }]);

app/components/createContainer/createContainerController.js

@@ -17,6 +17,7 @@ function ($scope, $state, Config, Container, Image, Volume, Network, Messages, e
 
   $scope.config = {
     Env: [],
+    ExposedPorts: {},
     HostConfig: {
       RestartPolicy: {
         Name: 'no'
@@ -58,12 +59,7 @@ function ($scope, $state, Config, Container, Image, Volume, Network, Messages, e
     $scope.formValues.AvailableRegistries = c.registries;
 
     Volume.query({}, function (d) {
-      var persistedVolumes = d.Volumes.filter(function (volume) {
-        if (volume.Driver === 'local-persist') {
-          return volume;
-        }
-      });
-      $scope.availableVolumes = _.uniqBy(persistedVolumes, 'Name');
+      $scope.availableVolumes = d.Volumes;
     }, function (e) {
       Messages.error("Failure", e.data);
     });
@@ -154,7 +150,16 @@ function ($scope, $state, Config, Container, Image, Volume, Network, Messages, e
     config.HostConfig.PortBindings.forEach(function (portBinding) {
       if (portBinding.hostPort && portBinding.containerPort) {
         var key = portBinding.containerPort + "/" + portBinding.protocol;
-        bindings[key] = [{ HostPort: portBinding.hostPort }];
+        var binding = {};
+        if (portBinding.hostPort.indexOf(':') > -1) {
+          var hostAndPort = portBinding.hostPort.split(':');
+          binding.HostIp = hostAndPort[0];
+          binding.HostPort = hostAndPort[1];
+        } else {
+          binding.HostPort = portBinding.hostPort;
+        }
+        bindings[key] = [binding];
+        config.ExposedPorts[key] = {};
       }
     });
     config.HostConfig.PortBindings = bindings;

app/components/createContainer/createcontainer.html

@@ -26,10 +26,7 @@
             </div>
             <label for="image_registry" class="col-sm-1 control-label text-left">Registry</label>
             <div class="col-sm-3">
-              <select class="selectpicker form-control" ng-model="formValues.Registry">
-                <option value="">Docker Hub</option>
-                <option ng-repeat="registry in formValues.AvailableRegistries" ng-value="registry.value">{{ registry.name }}</option>
-              </select>
+              <input type="text" class="form-control" ng-model="formValues.Registry" id="image_registry" placeholder="leave empty to use DockerHub">
             </div>
             <div class="col-sm-offset-1 col-sm-11">
               <div class="checkbox">
@@ -110,7 +107,6 @@
           <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 -->
@@ -215,22 +211,28 @@
               <!-- volumes -->
               <div class="form-group">
                 <label for="container_volumes" class="col-sm-1 control-label text-left">Volumes</label>
-                <div class="col-sm-11" ng-if="availableVolumes.length !== 0">
+                <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>
-                <div class="col-sm-11" ng-if="availableVolumes.length === 0" style="margin-top: 5px;">
-                  <span class="small text-muted">You don't have any persistent volumes. Head over the <a ui-sref="volumes">volumes view</a> to create one.</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">
-                      <select class="selectpicker form-control" ng-model="volume.name">
+                      <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:50}}</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>

app/components/createNetwork/createNetworkController.js

@@ -0,0 +1,74 @@
+angular.module('createNetwork', [])
+.controller('CreateNetworkController', ['$scope', '$state', 'Messages', 'Network', 'errorMsgFilter',
+function ($scope, $state, Messages, Network, errorMsgFilter) {
+  $scope.formValues = {
+    DriverOptions: [],
+    Subnet: '',
+    Gateway: ''
+  };
+
+  $scope.config = {
+    Driver: 'bridge',
+    CheckDuplicate: true,
+    Internal: false,
+    IPAM: {
+      Config: []
+    }
+  };
+
+  $scope.addDriverOption = function() {
+    $scope.formValues.DriverOptions.push({ name: '', value: '' });
+  };
+
+  $scope.removeDriverOption = function(index) {
+    $scope.formValues.DriverOptions.splice(index, 1);
+  };
+
+  function createNetwork(config) {
+    $('#createNetworkSpinner').show();
+    Network.create(config, function (d) {
+      if (d.Id) {
+        Messages.send("Network created", d.Id);
+        $('#createNetworkSpinner').hide();
+        $state.go('networks', {}, {reload: true});
+      } else {
+        $('#createNetworkSpinner').hide();
+        Messages.error('Unable to create network', errorMsgFilter(d));
+      }
+    }, function (e) {
+      $('#createNetworkSpinner').hide();
+      Messages.error('Unable to create network', e.data);
+    });
+  }
+
+  function prepareIPAMConfiguration(config) {
+    if ($scope.formValues.Subnet) {
+      var ipamConfig = {};
+      ipamConfig.Subnet = $scope.formValues.Subnet;
+      if ($scope.formValues.Gateway) {
+        ipamConfig.Gateway = $scope.formValues.Gateway  ;
+      }
+      config.IPAM.Config.push(ipamConfig);
+    }
+  }
+
+  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);
+    prepareIPAMConfiguration(config);
+    prepareDriverOptions(config);
+    return config;
+  }
+
+  $scope.create = function () {
+    var config = prepareConfiguration();
+    createNetwork(config);
+  };
+}]);

app/components/createNetwork/createnetwork.html

@@ -0,0 +1,95 @@
+<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 -->
+          <!-- subnet-gateway-inputs -->
+          <div class="form-group">
+            <label for="network_subnet" class="col-sm-1 control-label text-left">Subnet</label>
+            <div class="col-sm-5">
+              <input type="text" class="form-control" ng-model="formValues.Subnet" id="network_subnet" placeholder="e.g. 172.20.0.0/16">
+            </div>
+            <label for="network_gateway" class="col-sm-1 control-label text-left">Gateway</label>
+            <div class="col-sm-5">
+              <input type="text" class="form-control" ng-model="formValues.Gateway" id="network_gateway" placeholder="e.g. 172.20.10.11">
+            </div>
+          </div>
+          <!-- !subnet-gateway-inputs -->
+          <!-- 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;">
+    <div>
+      <i id="createNetworkSpinner" class="fa fa-cog fa-3x fa-spin" style="margin-bottom: 5px; display: none;"></i>
+    </div>
+    <button type="button" class="btn btn-default btn-lg" ng-click="create()">Create</button>
+    <a type="button" class="btn btn-default btn-lg" ui-sref="networks">Cancel</a>
+  </div>
+</div>

app/components/createVolume/createVolumeController.js

@@ -0,0 +1,56 @@
+angular.module('createVolume', [])
+.controller('CreateVolumeController', ['$scope', '$state', 'Volume', 'Messages', 'errorMsgFilter',
+function ($scope, $state, Volume, Messages, errorMsgFilter) {
+
+  $scope.formValues = {
+    DriverOptions: []
+  };
+
+  $scope.config = {
+    Driver: 'local'
+  };
+
+  $scope.addDriverOption = function() {
+    $scope.formValues.DriverOptions.push({ name: '', value: '' });
+  };
+
+  $scope.removeDriverOption = function(index) {
+    $scope.formValues.DriverOptions.splice(index, 1);
+  };
+
+  function createVolume(config) {
+    $('#createVolumeSpinner').show();
+    Volume.create(config, function (d) {
+      if (d.Name) {
+        Messages.send("Volume created", d.Name);
+        $('#createVolumeSpinner').hide();
+        $state.go('volumes', {}, {reload: true});
+      } else {
+        $('#createVolumeSpinner').hide();
+        Messages.error('Unable to create volume', errorMsgFilter(d));
+      }
+    }, function (e) {
+      $('#createVolumeSpinner').hide();
+      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,72 @@
+<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;">
+    <div>
+      <i id="createVolumeSpinner" class="fa fa-cog fa-3x fa-spin" style="margin-bottom: 5px; display: none;"></i>
+    </div>
+    <button type="button" class="btn btn-default btn-lg" ng-click="create()">Create</button>
+    <a type="button" class="btn btn-default btn-lg" ui-sref="volumes">Cancel</a>
+  </div>
+</div>

app/components/dashboard/dashboardController.js

@@ -50,7 +50,9 @@ function ($scope, $q, Config, Container, Image, Network, Volume, Info) {
 
   function prepareVolumeData(d) {
     var volumes = d.Volumes;
-    $scope.volumeData.total = volumes.length;
+    if (volumes) {
+      $scope.volumeData.total = volumes.length;
+    }
   }
 
   function prepareNetworkData(d) {

app/components/events/events.html

@@ -50,7 +50,7 @@
             </thead>
             <tbody>
               <tr ng-repeat="event in (events | filter:state.filter | orderBy:sortType:sortReverse)">
-                <td>{{ event.Time|getdatefromtimestamp }}</td>
+                <td>{{ event.Time|getisodatefromtimestamp }}</td>
                 <td>{{ event.Type }}</td>
                 <td>{{ event.Details }}</td>
               </tr>

app/components/image/image.html

@@ -1,97 +1,159 @@
 <rd-header>
-  <rd-header-title title="Image details"></rd-header-title>
+  <rd-header-title title="Image details">
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
+  </rd-header-title>
   <rd-header-content>
-    Images > <a ui-sref="image({id: id})">{{ id }}</a>
+    Images > <a ui-sref="image({id: image.Id})">{{ image.Id }}</a>
   </rd-header-content>
 </rd-header>
 
+<div class="row" ng-if="RepoTags.length > 0">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa fa-tags" title="Image tags"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <div style="margin: 5px 10px;">
+          <span ng-repeat="tag in RepoTags" class="label label-primary image-tag">
+            <a data-toggle="tooltip" class="interactive" title="Push to registry" ng-click="pushImage(tag)">
+              <i class="fa fa-upload white-icon" aria-hidden="true"></i>
+            </a>
+            {{ tag }}
+            <a data-toggle="tooltip" class="interactive" title="Remove tag" ng-click="removeImage(tag)">
+              <i class="fa fa-trash-o white-icon" aria-hidden="true"></i>
+            </a>
+          </span>
+        </div>
+        <div style="margin: 5px 10px;">
+          <span class="small text-muted">
+            Note: you can click on the upload icon to push an image
+            and on the trash icon to delete a tag
+          </span>
+        </div>
+      </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-tag" title="Tag the image"></rd-widget-header>
       <rd-widget-body>
-        <div class="widget-icon grey pull-left">
-          <i class="fa fa-clone"></i>
-        </div>
-        <div class="title">{{ id }}</div>
-        <div class="comment">Image ID</div>
+        <form class="form-horizontal">
+          <!-- name-and-registry-inputs -->
+          <div class="form-group">
+            <label for="image_name" class="col-sm-1 control-label text-left">Name</label>
+            <div class="col-sm-7">
+              <input type="text" class="form-control" ng-model="config.Image" id="image_name" placeholder="e.g. myImage:myTag">
+            </div>
+            <label for="image_registry" class="col-sm-1 control-label text-left">Registry</label>
+            <div class="col-sm-3">
+              <input type="text" class="form-control" ng-model="config.Registry" id="image_registry" placeholder="optional">
+            </div>
+          </div>
+          <!-- !name-and-registry-inputs -->
+          <!-- 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="tagImage()">Tag</button>
+              <i id="pullImageSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
+            </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-body>
-        <div class="widget-icon grey pull-left">
-          <i class="fa fa-cogs"></i>
-        </div>
-        <div class="title">
-          <div class="btn-group" role="group" aria-label="...">
-            <button class="btn btn-danger" ng-click="removeImage(id)">Remove</button>
-          </div>
-        </div>
-        <div class="comment">
-          Actions
-        </div>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>
-<div class="row">
-  <div class="col-lg-12">
     <rd-widget>
       <rd-widget-header icon="fa-clone" title="Image details"></rd-widget-header>
       <rd-widget-body classes="no-padding">
         <table class="table">
           <tbody>
             <tr>
-              <td>Created</td>
-              <td>{{ image.Created | date: 'medium'}}</td>
-            </tr>
-            <tr>
-              <td>Tags</td>
+              <td>ID</td>
               <td>
-                <ul>
-                  <li ng-repeat="tag in RepoTags">{{ tag }}
-                    <button ng-click="removeImage(tag)" class="btn btn-sm btn-danger">Remove tag</button>
-                  </li>
-                </ul>
+                {{ image.Id }}
+                <button class="btn btn-xs btn-danger" ng-click="removeImage(image.Id)">Delete this image</button>
               </td>
             </tr>
-            <tr>
+            <tr ng-if="image.Parent">
               <td>Parent</td>
               <td><a ui-sref="image({id: image.Parent})">{{ image.Parent }}</a></td>
             </tr>
             <tr>
-              <td>Size (Virtual Size)</td>
-              <td>{{ image.Size|humansize }} ({{ image.VirtualSize|humansize }})</td>
-            </tr>
-
-            <tr>
-              <td>Hostname</td>
-              <td>{{ image.ContainerConfig.Hostname }}</td>
+              <td>Size</td>
+              <td>{{ image.VirtualSize|humansize }}</td>
             </tr>
             <tr>
-              <td>User</td>
-              <td>{{ image.ContainerConfig.User }}</td>
+              <td>Created</td>
+              <td>{{ image.Created|getisodate }}</td>
             </tr>
             <tr>
-              <td>Cmd</td>
-              <td>{{ image.ContainerConfig.Cmd }}</td>
-            </tr>
-            <tr>
-              <td>Volumes</td>
-              <td>{{ image.ContainerConfig.Volumes }}</td>
-            </tr>
-            <tr>
-              <td>Volumes from</td>
-              <td>{{ image.ContainerConfig.VolumesFrom }}</td>
-            </tr>
-            <tr>
-              <td>Built with</td>
+              <td>Build</td>
               <td>Docker {{ image.DockerVersion }} on {{ image.Os}}, {{ image.Architecture }}</td>
             </tr>
+            <tr ng-if="image.Author">
+              <td>Author</td>
+              <td>{{ image.Author }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </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="Dockerfile details"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table">
+          <tbody>
+            <tr>
+              <td>CMD</td>
+              <td><code>{{ image.ContainerConfig.Cmd|command }}</code></td>
+            </tr>
+            <tr ng-if="image.ContainerConfig.Entrypoint">
+              <td>ENTRYPOINT</td>
+              <td><code>{{ image.ContainerConfig.Entrypoint|command }}</code></td>
+            </tr>
+            <tr ng-if="image.ContainerConfig.ExposedPorts">
+              <td>EXPOSE</td>
+              <td>
+                <span class="label label-default tag" ng-repeat="port in exposedPorts">
+                  {{ port }}
+                </span>
+              </td>
+            </tr>
+            <tr ng-if="image.ContainerConfig.Volumes">
+              <td>VOLUME</td>
+              <td>
+                <span class="label label-default tag" ng-repeat="volume in volumes">
+                  {{ volume }}
+                </span>
+              </td>
+            </tr>
+            <tr>
+              <td>ENV</td>
+              <td>
+                <table class="table table-bordered table-condensed">
+                  <tr ng-repeat="var in image.ContainerConfig.Env">
+                    <td>{{ var|key }}</td>
+                    <td>{{ var|value }}</td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
           </tbody>
         </table>
       </rd-widget-body>

app/components/image/imageController.js

@@ -1,33 +1,15 @@
 angular.module('image', [])
-.controller('ImageController', ['$scope', '$q', '$stateParams', '$state', 'Image', 'Container', 'Messages', 'LineChart',
-function ($scope, $q, $stateParams, $state, Image, Container, Messages, LineChart) {
-  $scope.tagInfo = {repo: '', version: '', force: false};
-  $scope.id = '';
-  $scope.repoTags = [];
+.controller('ImageController', ['$scope', '$stateParams', '$state', 'Image', 'Messages',
+function ($scope, $stateParams, $state, Image, Messages) {
+  $scope.RepoTags = [];
 
-  $scope.removeImage = function (id) {
-    Image.remove({id: id}, function (d) {
-      d.forEach(function(msg){
-        var key = Object.keys(msg)[0];
-        Messages.send(key, msg[key]);
-      });
-      // If last message key is 'Deleted' then assume the image is gone and send to images page
-      if (d[d.length-1].Deleted) {
-        $state.go('images', {}, {reload: true});
-      } else {
-        $state.go('image', {id: $scope.id}, {reload: true});
-      }
-    }, function (e) {
-      $scope.error = e.data;
-      $('#error-message').show();
-    });
+  $scope.config = {
+    Image: '',
+    Registry: ''
   };
 
-  /**
-  * Get RepoTags from the /images/query endpoint instead of /image/json,
-  * for backwards compatibility with Docker API versions older than 1.21
-  * @param {string} imageId
-  */
+  // Get RepoTags from the /images/query endpoint instead of /image/json,
+  // for backwards compatibility with Docker API versions older than 1.21
   function getRepoTags(imageId) {
     Image.query({}, function (d) {
       d.forEach(function(image) {
@@ -38,21 +20,88 @@ function ($scope, $q, $stateParams, $state, Image, Container, Messages, LineChar
     });
   }
 
+  function createImageConfig(imageName, registry) {
+    var imageNameAndTag = imageName.split(':');
+    var image = imageNameAndTag[0];
+    if (registry) {
+      image = registry + '/' + imageNameAndTag[0];
+    }
+    var imageConfig = {
+      repo: image,
+      tag: imageNameAndTag[1] ? imageNameAndTag[1] : 'latest'
+    };
+    return imageConfig;
+  }
+
+  $scope.tagImage = function() {
+    $('#loadingViewSpinner').show();
+    var image = _.toLower($scope.config.Image);
+    var registry = _.toLower($scope.config.Registry);
+    var imageConfig = createImageConfig(image, registry);
+    Image.tag({id: $stateParams.id, tag: imageConfig.tag, repo: imageConfig.repo}, function (d) {
+      Messages.send('Image successfully tagged');
+      $('#loadingViewSpinner').hide();
+      $state.go('image', {id: $stateParams.id}, {reload: true});
+    }, function(e) {
+      $('#loadingViewSpinner').hide();
+      Messages.error("Unable to tag image", e.data);
+    });
+  };
+
+  $scope.pushImage = function(tag) {
+    $('#loadingViewSpinner').show();
+    Image.push({tag: tag}, function (d) {
+      if (d[d.length-1].error) {
+        Messages.error("Unable to push image", d[d.length-1].error);
+      } else {
+        Messages.send('Image successfully pushed');
+      }
+      $('#loadingViewSpinner').hide();
+    }, function (e) {
+      $('#loadingViewSpinner').hide();
+      Messages.error("Unable to push image", e.data);
+    });
+  };
+
+  $scope.removeImage = function (id) {
+    $('#loadingViewSpinner').show();
+    Image.remove({id: id}, function (d) {
+      if (d[0].message) {
+        $('#loadingViewSpinner').hide();
+        Messages.error("Unable to remove image", d[0].message);
+      } else {
+        // If last message key is 'Deleted' or if it's 'Untagged' and there is only one tag associated to the image
+        // then assume the image is gone and send to images page
+        if (d[d.length-1].Deleted || (d[d.length-1].Untagged && $scope.RepoTags.length === 1)) {
+          Messages.send('Image successfully deleted');
+          $state.go('images', {}, {reload: true});
+        } else {
+          Messages.send('Tag successfully deleted');
+          $state.go('image', {id: $stateParams.id}, {reload: true});
+        }
+      }
+    }, function (e) {
+      $('#loadingViewSpinner').hide();
+      Messages.error("Unable to remove image", e.data);
+    });
+  };
+
+  $('#loadingViewSpinner').show();
   Image.get({id: $stateParams.id}, function (d) {
     $scope.image = d;
-    $scope.id = d.Id;
     if (d.RepoTags) {
       $scope.RepoTags = d.RepoTags;
     } else {
-      getRepoTags($scope.id);
+      getRepoTags(d.Id);
     }
+    $('#loadingViewSpinner').hide();
+    $scope.exposedPorts = d.ContainerConfig.ExposedPorts ? Object.keys(d.ContainerConfig.ExposedPorts) : [];
+    $scope.volumes = d.ContainerConfig.Volumes ? Object.keys(d.ContainerConfig.Volumes) : [];
   }, function (e) {
     if (e.status === 404) {
-      $('.detail').hide();
-      $scope.error = "Image not found.<br />" + $stateParams.id;
+      Messages.error("Unable to find image", $stateParams.id);
     } else {
-      $scope.error = e.data;
+      Messages.error("Unable to retrieve image info", e.data);
     }
-    $('#error-message').show();
   });
 }]);

app/components/images/images.html

@@ -22,10 +22,7 @@
             </div>
             <label for="image_registry" class="col-sm-1 control-label text-left">Registry</label>
             <div class="col-sm-3">
-              <select class="selectpicker form-control" ng-model="config.Registry">
-                <option value="">Docker Hub</option>
-                <option ng-repeat="registry in availableRegistries" ng-value="registry.value">{{ registry.name }}</option>
-              </select>
+              <input type="text" class="form-control" ng-model="config.Registry" id="image_registry" placeholder="leave empty to use DockerHub">
             </div>
           </div>
           <!-- !name-and-registry-inputs -->
@@ -69,7 +66,7 @@
           <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="images" ng-click="order('Id')">
                     Id
@@ -91,6 +88,13 @@
                     <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>
@@ -101,11 +105,12 @@
                   <span class="label label-primary image-tag" ng-repeat="tag in (image|repotags)">{{ tag }}</span>
                 </td>
                 <td>{{ image.VirtualSize|humansize }}</td>
+                <td>{{ image.Created|getisodatefromtimestamp }}</td>
               </tr>
             </tbody>
           </table>
         </div>
       </rd-widget-body>
-    <rd-widget>
-  </div>
-</div>
+      <rd-widget>
+      </div>
+    </div>

app/components/images/imagesController.js

@@ -4,7 +4,6 @@ function ($scope, $state, Config, Image, Messages) {
   $scope.state = {};
   $scope.sortType = 'RepoTags';
   $scope.sortReverse = true;
-  $scope.state.toggle = false;
   $scope.state.selectedItemCount = 0;
 
   $scope.config = {
@@ -17,17 +16,6 @@ function ($scope, $state, Config, Image, Messages) {
     $scope.sortType = sortType;
   };
 
-  $scope.toggleSelectAll = function () {
-    angular.forEach($scope.state.filteredImages, function (i) {
-      i.Checked = $scope.state.toggle;
-    });
-    if ($scope.state.toggle) {
-      $scope.state.selectedItemCount = $scope.state.filteredImages.length;
-    } else {
-      $scope.state.selectedItemCount = 0;
-    }
-  };
-
   $scope.selectItem = function (item) {
     if (item.Checked) {
       $scope.state.selectedItemCount++;
@@ -52,7 +40,7 @@ function ($scope, $state, Config, Image, Messages) {
   $scope.pullImage = function() {
     $('#pullImageSpinner').show();
     var image = _.toLower($scope.config.Image);
-    var registry = $scope.config.Registry;
+    var registry = _.toLower($scope.config.Registry);
     var imageConfig = createImageConfig(image, registry);
     Image.create(imageConfig, function (data) {
         var err = data.length > 0 && data[data.length - 1].hasOwnProperty('error');
@@ -83,15 +71,17 @@ function ($scope, $state, Config, Image, Messages) {
       if (i.Checked) {
         counter = counter + 1;
         Image.remove({id: i.Id}, function (d) {
-          angular.forEach(d, function (resource) {
-            Messages.send("Image deleted", resource.Deleted);
-          });
-          var index = $scope.images.indexOf(i);
-          $scope.images.splice(index, 1);
+          if (d[0].message) {
+            $('#loadingViewSpinner').hide();
+            Messages.error("Unable to remove image", d[0].message);
+          } else {
+            Messages.send("Image deleted", i.Id);
+            var index = $scope.images.indexOf(i);
+            $scope.images.splice(index, 1);
+          }
           complete();
         }, function (e) {
-          Messages.error("Failure", e.data);
-          $('#loadImagesSpinner').hide();
+          Messages.error("Unable to remove image", e.data);
           complete();
         });
       }

app/components/networks/networks.html

@@ -7,64 +7,6 @@
   <rd-header-content>Networks</rd-header-content>
 </rd-header>
 
-
-<div class="row">
-  <div class="col-lg-12 col-md-12 col-xs-12">
-    <rd-widget>
-      <rd-widget-header icon="fa-plus" title="Add a shared network">
-      </rd-widget-header>
-      <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 -->
-          <!-- advanced-settings-input -->
-          <div class="form-group">
-            <div class="col-sm-12">
-              <div class="checkbox">
-                <label>
-                  <input type="checkbox" ng-model="state.advancedSettings"> Show advanced settings
-                </label>
-              </div>
-            </div>
-          </div>
-          <!-- !advanced-settings-input -->
-          <!-- subnet-gateway-inputs -->
-          <div class="form-group" ng-if="state.advancedSettings">
-            <label for="network_subnet" class="col-sm-1 control-label text-left">Subnet</label>
-            <div class="col-sm-5">
-              <input type="text" class="form-control" ng-model="formValues.Subnet" id="network_subnet" placeholder="e.g. 172.20.0.0/16">
-            </div>
-            <label for="network_gateway" class="col-sm-1 control-label text-left">Gateway</label>
-            <div class="col-sm-5">
-              <input type="text" class="form-control" ng-model="formValues.Gateway" id="network_gateway" placeholder="e.g. 172.20.10.11">
-            </div>
-          </div>
-          <!-- !subnet-gateway-inputs -->
-          <!-- tag-note -->
-          <div class="form-group">
-            <div class="col-sm-12">
-              <span class="small text-muted">Note: The network will be created using the overlay driver and will allow containers to communicate across the hosts of your cluster.</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.Name" ng-click="createNetwork()">Create</button>
-              <i id="createNetworkSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
-            </div>
-          </div>
-        </form>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>
-
 <div class="col-lg-12">
   <rd-widget>
     <rd-widget-header icon="fa-sitemap" title="Networks">
@@ -75,6 +17,7 @@
     <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>
+        <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" />
@@ -85,7 +28,7 @@
         <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="networks" ng-click="order('Name')">
                   Name
@@ -93,6 +36,13 @@
                   <span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
+              <th>
+                <a ui-sref="networks" 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="networks" ng-click="order('Scope')">
                   Scope
@@ -100,16 +50,30 @@
                   <span ng-show="sortType == 'Scope' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
+              <th>
+                <a ui-sref="networks" ng-click="order('Driver')">
+                  Driver
+                  <span ng-show="sortType == 'Driver' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Driver' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="networks" ng-click="order('IPAM.Driver')">
+                  IPAM Driver
+                  <span ng-show="sortType == 'IPAM.Driver' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'IPAM.Driver' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
               <th>
                 <a ui-sref="networks" ng-click="order('IPAM.Config[0].Subnet')">
-                  Subnet
+                  IPAM Subnet
                   <span ng-show="sortType == 'IPAM.Config[0].Subnet' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                   <span ng-show="sortType == 'IPAM.Config[0].Subnet' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
               <th>
                 <a ui-sref="networks" ng-click="order('IPAM.Config[0].Gateway')">
-                  Gateway
+                  IPAM Gateway
                   <span ng-show="sortType == 'IPAM.Config[0].Gateway' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                   <span ng-show="sortType == 'IPAM.Config[0].Gateway' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
@@ -120,7 +84,10 @@
             <tr ng-repeat="network in ( state.filteredNetworks = (networks | filter:state.filter | orderBy:sortType:sortReverse))">
               <td><input type="checkbox" ng-model="network.Checked" ng-change="selectItem(network)"/></td>
               <td><a ui-sref="network({id: network.Id})">{{ network.Name|truncate:40}}</a></td>
+              <td>{{ network.Id }}</td>
               <td>{{ network.Scope }}</td>
+              <td>{{ network.Driver }}</td>
+              <td>{{ network.IPAM.Driver }}</td>
               <td>{{ network.IPAM.Config[0].Subnet ? network.IPAM.Config[0].Subnet : '-' }}</td>
               <td>{{ network.IPAM.Config[0].Gateway ? network.IPAM.Config[0].Gateway : '-' }}</td>
             </tr>

app/components/networks/networksController.js

@@ -1,11 +1,10 @@
 angular.module('networks', [])
-.controller('NetworksController', ['$scope', '$state', 'Network', 'Messages', 'errorMsgFilter',
-function ($scope, $state, Network, Messages, errorMsgFilter) {
+.controller('NetworksController', ['$scope', '$state', 'Network', 'Config', 'Messages', 'errorMsgFilter',
+function ($scope, $state, Network, Config, Messages, errorMsgFilter) {
   $scope.state = {};
-  $scope.state.toggle = false;
   $scope.state.selectedItemCount = 0;
   $scope.state.advancedSettings = false;
-  $scope.sortType = 'Scope';
+  $scope.sortType = 'Name';
   $scope.sortReverse = false;
 
   $scope.formValues = {
@@ -25,17 +24,6 @@ function ($scope, $state, Network, Messages, errorMsgFilter) {
     $scope.sortType = sortType;
   };
 
-  $scope.toggleSelectAll = function () {
-    angular.forEach($scope.state.filteredNetworks, function (i) {
-      i.Checked = $scope.state.toggle;
-    });
-    if ($scope.state.toggle) {
-      $scope.state.selectedItemCount = $scope.state.filteredNetworks.length;
-    } else {
-      $scope.state.selectedItemCount = 0;
-    }
-  };
-
   $scope.selectItem = function (item) {
     if (item.Checked) {
       $scope.state.selectedItemCount++;
@@ -44,42 +32,6 @@ function ($scope, $state, Network, Messages, errorMsgFilter) {
     }
   };
 
-  function prepareIPAMConfiguration(config) {
-    if ($scope.formValues.Subnet) {
-      var ipamConfig = {};
-      ipamConfig.Subnet = $scope.formValues.Subnet;
-      if ($scope.formValues.Gateway) {
-        ipamConfig.Gateway = $scope.formValues.Gateway  ;
-      }
-      config.IPAM.Config.push(ipamConfig);
-    }
-  }
-
-  function prepareNetworkConfiguration() {
-    var config = angular.copy($scope.config);
-    prepareIPAMConfiguration(config);
-    config.Driver = 'overlay';
-    return config;
-  }
-
-  $scope.createNetwork = function() {
-    $('#createNetworkSpinner').show();
-    var config = prepareNetworkConfiguration();
-    Network.create(config, function (d) {
-      if (d.Id) {
-        Messages.send("Network created", d.Id);
-        $('#createNetworkSpinner').hide();
-        $state.go('networks', {}, {reload: true});
-      } else {
-        $('#createNetworkSpinner').hide();
-        Messages.error('Unable to create network', errorMsgFilter(d));
-      }
-    }, function (e) {
-      $('#createNetworkSpinner').hide();
-      Messages.error('Unable to create network', e.data);
-    });
-  };
-
   $scope.removeAction = function () {
     $('#loadNetworksSpinner').show();
     var counter = 0;
@@ -120,5 +72,6 @@ function ($scope, $state, Network, Messages, errorMsgFilter) {
       $('#loadNetworksSpinner').hide();
     });
   }
+
   fetchNetworks();
 }]);

app/components/volumes/volumes.html

@@ -7,40 +7,6 @@
   <rd-header-content>Volumes</rd-header-content>
 </rd-header>
 
-<div class="row">
-  <div class="col-lg-12 col-md-12 col-xs-12">
-    <rd-widget>
-      <rd-widget-header icon="fa-plus" title="Add a persistent volume">
-      </rd-widget-header>
-      <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. mysql-data">
-            </div>
-          </div>
-          <!-- !name-input -->
-          <!-- tag-note -->
-          <div class="form-group">
-            <div class="col-sm-12">
-              <span class="small text-muted">Note: The volume will be created in our persisted storage and will be available across all the hosts of your cluster.</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.Name" ng-click="createVolume()">Create</button>
-              <i id="createVolumeSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
-            </div>
-          </div>
-        </form>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>
-
 <div class="col-lg-12">
   <rd-widget>
     <rd-widget-header icon="fa-cubes" title="Volumes">
@@ -51,6 +17,7 @@
     <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>
+        <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" />
@@ -61,7 +28,7 @@
         <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="volumes" ng-click="order('Name')">
                   Name
@@ -76,6 +43,13 @@
                   <span ng-show="sortType == 'Driver' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
+              <th>
+                <a ui-sref="volumes" ng-click="order('Mountpoint')">
+                  Mountpoint
+                  <span ng-show="sortType == 'Mountpoint' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Mountpoint' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
             </tr>
           </thead>
           <tbody>
@@ -83,10 +57,11 @@
               <td><input type="checkbox" ng-model="volume.Checked" ng-change="selectItem(volume)"/></td>
               <td>{{ volume.Name|truncate:50 }}</td>
               <td>{{ volume.Driver }}</td>
+              <td>{{ volume.Mountpoint }}</td>
             </tr>
           </tbody>
         </table>
       </div>
     </rd-widget-body>
-  <rd-widget>
-</div>
+    <rd-widget>
+    </div>

app/components/volumes/volumesController.js

@@ -2,9 +2,8 @@ angular.module('volumes', [])
 .controller('VolumesController', ['$scope', '$state', 'Volume', 'Messages', 'errorMsgFilter',
 function ($scope, $state, Volume, Messages, errorMsgFilter) {
   $scope.state = {};
-  $scope.state.toggle = false;
   $scope.state.selectedItemCount = 0;
-  $scope.sortType = 'Driver';
+  $scope.sortType = 'Name';
   $scope.sortReverse = true;
 
   $scope.config = {
@@ -16,17 +15,6 @@ function ($scope, $state, Volume, Messages, errorMsgFilter) {
     $scope.sortType = sortType;
   };
 
-  $scope.toggleSelectAll = function () {
-    angular.forEach($scope.state.filteredVolumes, function (i) {
-      i.Checked = $scope.state.toggle;
-    });
-    if ($scope.state.toggle) {
-      $scope.state.selectedItemCount = $scope.state.filteredVolumes.length;
-    } else {
-      $scope.state.selectedItemCount = 0;
-    }
-  };
-
   $scope.selectItem = function (item) {
     if (item.Checked) {
       $scope.state.selectedItemCount++;
@@ -35,32 +23,6 @@ function ($scope, $state, Volume, Messages, errorMsgFilter) {
     }
   };
 
-  function prepareVolumeConfiguration() {
-    var config = angular.copy($scope.config);
-    config.Driver = 'local-persist';
-    config.DriverOpts = {};
-    config.DriverOpts.mountpoint = '/volume/' + config.Name;
-    return config;
-  }
-
-  $scope.createVolume = function() {
-    $('#createVolumeSpinner').show();
-    var config = prepareVolumeConfiguration();
-    Volume.create(config, function (d) {
-      if (d.Name) {
-        Messages.send("Volume created", d.Name);
-        $('#createVolumeSpinner').hide();
-        $state.go('volumes', {}, {reload: true});
-      } else {
-        $('#createVolumeSpinner').hide();
-        Messages.error('Unable to create volume', errorMsgFilter(d));
-      }
-    }, function (e) {
-      $('#createVolumeSpinner').hide();
-      Messages.error('Unable to create volume', e.data);
-    });
-  };
-
   $scope.removeAction = function () {
     $('#loadVolumesSpinner').show();
     var counter = 0;
@@ -89,7 +51,7 @@ function ($scope, $state, Volume, Messages, errorMsgFilter) {
   function fetchVolumes() {
     $('#loadVolumesSpinner').show();
     Volume.query({}, function (d) {
-      $scope.volumes = _.uniqBy(d.Volumes, 'Name');
+      $scope.volumes = d.Volumes;
       $('#loadVolumesSpinner').hide();
     }, function (e) {
       Messages.error("Failure", e.data);

app/shared/filters.js

@@ -94,7 +94,6 @@ angular.module('uifordocker.filters', [])
     if (state === undefined) {
       return 'label-default';
     }
-
     if (state.Ghost && state.Running) {
       return 'label-important';
     }
@@ -155,20 +154,38 @@ angular.module('uifordocker.filters', [])
     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('getdatefromtimestamp', function () {
+.filter('getisodatefromtimestamp', function () {
   'use strict';
   return function (timestamp) {
     return moment.unix(timestamp).format('YYYY-MM-DD HH:mm:ss');
   };
 })
+.filter('getisodate', function () {
+  'use strict';
+  return function (date) {
+    return moment(date).format('YYYY-MM-DD HH:mm:ss');
+  };
+})
+.filter('command', function () {
+  'use strict';
+  return function (command) {
+    if (command) {
+      return command.join(' ');
+    }
+  };
+})
+.filter('key', function () {
+  'use strict';
+  return function (pair) {
+    return pair.slice(0, pair.indexOf('='));
+  };
+})
+.filter('value', function () {
+  'use strict';
+  return function (pair) {
+    return pair.slice(pair.indexOf('=') + 1);
+  };
+})
 .filter('errorMsg', function () {
   return function (object) {
     var idx = 0;

app/shared/responseHandlers.js

@@ -0,0 +1,19 @@
+// The Docker API often returns a list of JSON object.
+// This handler wrap the JSON objects in an array.
+// Used by the API in: Image push, Image create, Events query.
+function jsonObjectsToArrayHandler(data) {
+  var str = "[" + data.replace(/\n/g, " ").replace(/\}\s*\{/g, "}, {") + "]";
+  return angular.fromJson(str);
+}
+
+// Image delete API returns an array on success and an object on error.
+// This handler creates an array from an object in case of error.
+function deleteImageHandler(data) {
+  var response = angular.fromJson(data);
+  if (!Array.isArray(response)) {
+    var arr = [];
+    arr.push(response);
+    return arr;
+  }
+  return response;
+}

app/shared/services.js

@@ -92,28 +92,31 @@ angular.module('uifordocker.services', ['ngResource', 'ngSanitize'])
             get: {method: 'GET', params: {action: 'json'}},
             search: {method: 'GET', params: {action: 'search'}},
             history: {method: 'GET', params: {action: 'history'}, isArray: true},
-            create: {
-                method: 'POST', isArray: true, transformResponse: [function f(data) {
-                    var str = "[" + data.replace(/\n/g, " ").replace(/\}\s*\{/g, "}, {") + "]";
-                    return angular.fromJson(str);
-                }],
-                params: {action: 'create', fromImage: '@fromImage', tag: '@tag'}
-            },
             insert: {method: 'POST', params: {id: '@id', action: 'insert'}},
-            push: {method: 'POST', params: {id: '@id', action: 'push'}},
             tag: {method: 'POST', params: {id: '@id', action: 'tag', force: 0, repo: '@repo', tag: '@tag'}},
-            remove: {method: 'DELETE', params: {id: '@id'}, isArray: true},
-            inspect: {method: 'GET', params: {id: '@id', action: 'json'}}
+            inspect: {method: 'GET', params: {id: '@id', action: 'json'}},
+            push: {
+                method: 'POST', params: {action: 'push', id: '@tag'},
+                isArray: true, transformResponse: jsonObjectsToArrayHandler
+            },
+            create: {
+                method: 'POST', params: {action: 'create', fromImage: '@fromImage', tag: '@tag'},
+                isArray: true, transformResponse: jsonObjectsToArrayHandler
+            },
+            remove: {
+              method: 'DELETE', params: {id: '@id'},
+              isArray: true, transformResponse: deleteImageHandler
+            }
         });
     }])
     .factory('Events', ['$resource', 'Settings', function EventFactory($resource, Settings) {
         'use strict';
         // http://docs.docker.com/reference/api/docker_remote_api_<%= remoteApiVersion %>/#/monitor-docker-s-events
         return $resource(Settings.url + '/events', {}, {
-            query: {method: 'GET', params: {since: '@since', until: '@until'}, isArray: true, transformResponse: [function f(data) {
-                var str = "[" + data.replace(/\n/g, " ").replace(/\}\s*\{/g, "}, {") + "]";
-                return angular.fromJson(str);
-            }]}
+            query: {
+              method: 'GET', params: {since: '@since', until: '@until'},
+              isArray: true, transformResponse: jsonObjectsToArrayHandler
+            }
         });
     }])
     .factory('Version', ['$resource', 'Settings', function VersionFactory($resource, Settings) {

assets/css/app.css

@@ -117,7 +117,7 @@
 .logo {
   display: inline;
   width: 100%;
-  max-width: 160px;
+  max-width: 155px;
   height: 100%;
   max-height: 55px;
   margin-bottom: 5px;
@@ -170,18 +170,26 @@ input[type="radio"] {
   margin-right: 5px;
 }
 
-.green-icon {
+.fa.green-icon {
   color: #23ae89;
 }
 
-.red-icon {
+.fa.red-icon {
   color: #ae2323;
 }
 
+.fa.white-icon {
+  color: white;
+}
+
 .image-tag {
   margin-right: 5px;
 }
 
+.label.tag {
+  margin-right: 5px;
+}
+
 .widget .widget-body table tbody .image-tag {
   font-size: 90% !important;
 }
@@ -190,3 +198,7 @@ input[type="radio"] {
   width: 100%;
   padding: 10px 5px;
 }
+
+.interactive {
+  cursor: pointer;
+}

bower.json

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

index.html

@@ -32,7 +32,8 @@
       <ul class="sidebar">
         <li class="sidebar-main">
           <a ng-click="toggleSidebar()">
-            <img src="images/logo.png" class="img-responsive logo" alt="logo">
+            <img ng-if="config.logo" ng-src="{{ config.logo }}" class="img-responsive logo" alt="CloudInovasi UI">
+            <img ng-if="!config.logo" src="images/logo.png" class="img-responsive logo" alt="CloudInovasi UI">
             <span class="menu-icon glyphicon glyphicon-transfer"></span>
           </a>
         </li>

package.json

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

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

@@ -134,12 +134,6 @@ describe('filters', function () {
         }));
     });
 
-    describe('getdate', function () {
-        it('should convert the Docker date to a human readable form', inject(function (getdateFilter) {
-            expect(getdateFilter(1420424998)).toBe('Sun Jan 04 2015');
-        }));
-    });
-
     describe('errorMsgFilter', function () {
         it('should convert the $resource object to a string message',
             inject(function (errorMsgFilter) {