chore(version): bump version number

This reverts commit 61d7b4f64c.

.github/ISSUE_TEMPLATE.md

@@ -1,43 +0,0 @@
-<!--
-
-Thanks for opening an issue on Portainer !
-
-Do you need help or have a question? Come chat with us on gitter: https://gitter.im/portainer/Lobby.
-
-If you are reporting a new issue, make sure that we do not have any duplicates
-already open. You can ensure this by searching the issue list for this
-repository. If there is a duplicate, please close your issue and add a comment
-to the existing issue instead.
-
-Also, be sure to check our FAQ and documentation first: https://portainer.readthedocs.io
-
-If you suspect your issue is a bug, please edit your issue description to
-include the BUG REPORT INFORMATION shown below.
-
----------------------------------------------------
-BUG REPORT INFORMATION
----------------------------------------------------
-You do NOT have to include this information if this is a FEATURE REQUEST
--->
-
-**Description**
-
-<!--
-Briefly describe the problem you are having in a few paragraphs.
--->
-
-**Steps to reproduce the issue:**
-
-1.
-2.
-3.
-
-Any other info e.g. Why do you consider this to be a bug? What did you expect to happen instead?
-
-**Technical details:**
-
-* Portainer version:
-* Target Docker version (the host/cluster you manage):
-* Target Swarm version (if applicable):
-* Platform (windows/linux):
-* Browser:

.gitignore

@@ -1,4 +1,10 @@
+logs/*
+!.gitkeep
+*.esproj/*
 node_modules
 bower_components
+.idea
+*.iml
 dist
+dist/*
 portainer-checksum.txt

CONTRIBUTING.md

@@ -1,57 +0,0 @@
-# Contributing Guidelines
-
-Some basic conventions for contributing to this project.
-
-### General
-
-Please make sure that there aren't existing pull requests attempting to address the issue mentioned. Likewise, please check for issues related to update, as someone else may be working on the issue in a branch or fork.
-
-* Non-trivial changes should be discussed in an issue first
-* Develop in a topic branch, not master
-
-### Linting
-
-Please check your code using `grunt lint` before submitting your pull requests.
-
-### Commit Message Format
-
-Each commit message should include a **type**, a **scope** and a **subject**:
-
-```
- <type>(<scope>): <subject>
-```
-
-Lines should not exceed 100 characters. This allows the message to be easier to read on github as well as in various git tools and produces a nice, neat commit log ie:
-
-```
- #271 feat(containers): add exposed ports in the containers view
- #270 fix(templates): fix a display issue in the templates view
- #269 style(dashboard): update dashboard with new layout
-```
-
-#### Type
-
-Must be one of the following:
-
-* **feat**: A new feature
-* **fix**: A bug fix
-* **docs**: Documentation only changes
-* **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing
-  semi-colons, etc)
-* **refactor**: A code change that neither fixes a bug or adds a feature
-* **test**: Adding missing tests
-* **chore**: Changes to the build process or auxiliary tools and libraries such as documentation
-  generation
-
-#### Scope
-
-The scope could be anything specifying place of the commit change. For example `networks`,
-`containers`, `images` etc...
-
-#### Subject
-
-The subject contains succinct description of the change:
-
-* use the imperative, present tense: "change" not "changed" nor "changes"
-* don't capitalize first letter
-* no dot (.) at the end

LICENSE

@@ -1,4 +1,4 @@
-Portainer: Copyright (c) 2016 Portainer.io
+Portainer: Copyright (c) 2016 CloudInovasi
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,7 +18,7 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
-UI For Docker: Copyright (c) 2013-2016 Michael Crosby (crosbymichael.com), Kevan Ahlquist (kevanahlquist.com), Anthony Lapenna (portainer.io)
+UI For Docker: Copyright (c) 2013-2016 Michael Crosby (crosbymichael.com), Kevan Ahlquist (kevanahlquist.com), Anthony Lapenna (anthonylapenna at cloudinovasi dot id)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

Procfile

@@ -0,0 +1 @@
+web: portainer -p ":$PORT" -e "$DOCKER_ENDPOINT"

README.md

@@ -1,83 +1,173 @@
 # Portainer
 
-The easiest way to manage Docker.
+Portainer is a web interface for the Docker remote API.
 
-[![Microbadger version](https://images.microbadger.com/badges/version/portainer/portainer.svg)](https://microbadger.com/images/portainer/portainer "Latest version on Docker Hub")
-[![Microbadger](https://images.microbadger.com/badges/image/portainer/portainer.svg)](http://microbadger.com/images/portainer/portainer "Image size")
-[![Documentation Status](https://readthedocs.org/projects/portainer/badge/?version=stable)](http://portainer.readthedocs.io/en/stable/?badge=stable)
-[![Gitter](https://badges.gitter.im/portainer/Lobby.svg)](https://gitter.im/portainer/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
+![Dashboard](/dashboard.png)
 
-Portainer is a lightweight management UI which allows you to **easily** manage your Docker host or Swarm cluster.
+## Supported Docker versions
 
-# Usage
+The following Docker versions are supported:
 
-It's really simple to deploy it using Docker:
+* full support for Docker 1.10, 1.11 and 1.12
+* partial support for Docker 1.9 (some features won't be available)
 
-```shell
-$ docker run -d -p 9000:9000 portainer/portainer -H tcp://<DOCKER_HOST>:<DOCKER_PORT>
+## Run
+
+### Quickstart
+
+1. Run: `docker run -d -p 9000:9000 --privileged -v /var/run/docker.sock:/var/run/docker.sock cloudinovasi/portainer`
+
+2. Open your browser to `http://<dockerd host ip>:9000`
+
+Bind mounting the Unix socket into the Portainer container is much more secure than exposing your docker daemon over TCP.
+
+The `--privileged` flag is required for hosts using SELinux.
+
+### Specify socket to connect to Docker daemon
+
+By default Portainer connects to the Docker daemon with`/var/run/docker.sock`. For this to work you need to bind mount the unix socket into the container with `-v /var/run/docker.sock:/var/run/docker.sock`.
+
+You can use the `--host`, `-H` flags to change this socket:
+
+```
+# Connect to a tcp socket:
+$ docker run -d -p 9000:9000 cloudinovasi/portainer -H tcp://127.0.0.1:2375
 ```
 
-Just point it at your targeted Docker host and then access Portainer by hitting [http://localhost:9000](http://localhost:9000) with a web browser.
-
-If your target is a Docker Swarm cluster or a Docker cluster using *swarm mode*, just add the flag `--swarm`:
-
-```shell
-$ docker run -d -p 9000:9000 portainer/portainer -H tcp://<SWARM_HOST>:<SWARM_PORT> --swarm
+```
+# Connect to another unix socket:
+$ docker run -d -p 9000:9000 cloudinovasi/portainer -H unix:///path/to/docker.sock
 ```
 
-If you don't specify any target, its default behaviour is to use a bind mount on the Docker socket so you can easily deploy it to manage your local Docker host:
+### Swarm support
 
-```shell
-$ docker run -d -p 9000:9000 -v /var/run/docker.sock:/var/run/docker.sock portainer/portainer
+**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/portainer -H tcp://<SWARM_HOST>:<SWARM_PORT> --swarm
 ```
 
-Have a look at our [documentation](http://portainer.readthedocs.io/en/stable/deployment.html) for more deployment options.
+*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.
 
-# Configuration
+### Change address/port Portainer is served on
+Portainer listens on port 9000 by default. If you run Portainer inside a container then you can bind the container's internal port to any external address and port:
 
-Portainer is easy to tune using CLI flags.
+```
+# Expose Portainer 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/portainer
+```
 
-## Hiding specific containers
+### Access a Docker engine protected via TLS
 
-Portainer allows you to hide container with a specific label by using the `-l` flag.
+Ensure that you have access to the CA, the cert and the public key used to access your Docker engine.  
+
+These files will need to be named `ca.pem`, `cert.pem` and `key.pem` respectively. Store them somewhere on your disk and mount a volume containing these files inside the UI container:
+
+```
+$ docker run -d -p 9000:9000 cloudinovasi/portainer -v /path/to/certs:/certs -H https://my-docker-host.domain:2376 --tlsverify
+```
+
+You can also use the `--tlscacert`, `--tlscert` and `--tlskey` flags if you want to change the default path to the CA, certificate and key file respectively:
+
+```
+$ docker run -d -p 9000:9000 cloudinovasi/portainer -v /path/to/certs:/certs -H https://my-docker-host.domain:2376 --tlsverify --tlscacert /certs/myCa.pem --tlscert /certs/myCert.pem --tlskey /certs/myKey.pem
+```
+
+*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/portainer --logo "https://www.docker.com/sites/all/themes/docker/assets/images/brand-full.svg"
+```
+
+The custom logo will replace the Portainer 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.
 
 For example, take a container started with the label `owner=acme`:
-```shell
+
+```
 $ docker run -d --label owner=acme nginx
 ```
 
-Simply add the `-l owner=acme` option on the CLI when starting Portainer:
-```shell
-$ docker run -d -p 9000:9000 -v /var/run/docker.sock:/var/run/docker.sock portainer/portainer -l owner=acme
+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/portainer -l owner=acme
 ```
 
-## Use your own templates
+### Custom Docker registries support
 
-Portainer allows you to rapidly deploy containers using `App Templates`.
+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*.
 
-By default [Portainer templates](https://raw.githubusercontent.com/portainer/templates/master/templates.json) will be used but you can also define your own templates.
+For example, if I want the registry 'myCustomRegistry' pointing to *myregistry.domain.com:5000* available in the UI:
 
-Add the `--templates` flag and specify the external location of your templates when starting Portainer:
-
-```shell
-$ docker run -d -p 9000:9000 -v /var/run/docker.sock:/var/run/docker.sock portainer/portainer --templates http://my-host.my-domain/templates.json
+```
+$ 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
 ```
 
-For more information about hosting your own template definitions and the format, see the [templates documentation](http://portainer.readthedocs.io/en/stable/templates.html).
+### Reverse proxy configuration
 
-Check our [documentation](http://portainer.readthedocs.io/en/stable/configuration.html) for more configuration options.
+Has been tested with Nginx 1.11.
 
-# FAQ
+Use the following configuration to host the UI at `myhost.mydomain.com/portainer`:
 
-Be sure to check our [FAQ](http://portainer.readthedocs.io/en/stable/faq.html) if you are missing some information.
+```nginx
+upstream portainer {
+    server ADDRESS:PORT;
+}
 
-# Limitations
+server {
+  listen 80;
 
-Portainer has full support for the following Docker versions:
+  location /portainer/ {
+      proxy_http_version 1.1;
+      proxy_set_header Connection "";
+      proxy_pass http://portainer/;
+  }
+  location /portainer/ws/ {
+      proxy_set_header Upgrade $http_upgrade;
+      proxy_set_header Connection "upgrade";
+      proxy_http_version 1.1;
+      proxy_pass http://portainer/ws/;
+  }
+}
+```
 
-* Docker 1.10 to Docker 1.12 (including `swarm-mode`)
-* Docker Swarm >= 1.2.3
+Replace `ADDRESS:PORT` with the Portainer container details.
 
-Partial support for the following Docker versions (some features may not be available):
+### Host your own apps
 
-* Docker 1.9
+You can specify an URL to your own templates (**Apps**) definitions using the `--templates` or `-t` flags.
+
+By default, CloudInovasi templates will be used (https://raw.githubusercontent.com/cloud-inovasi/ui-templates/master/templates.json).
+
+For more information about hosting your own template definition and the format, see: https://github.com/cloud-inovasi/ui-templates
+
+### Available options
+
+The following options are available for the `portainer` binary:
+
+* `--host`, `-H`: Docker daemon endpoint (default: `"unix:///var/run/docker.sock"`)
+* `--bind`, `-p`: Address and port to serve Portainer (default: `":9000"`)
+* `--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
+* `--templates`, `-t`: URL to templates (apps) definitions

api/main.go

@@ -1,4 +1,4 @@
-package main // import "github.com/portainer/portainer"
+package main // import "github.com/cloudinovasi/portainer"
 
 import (
 	"gopkg.in/alecthomas/kingpin.v2"
@@ -6,20 +6,21 @@ import (
 
 // main is the entry point of the program
 func main() {
-	kingpin.Version("1.9.2")
+	kingpin.Version("1.8.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 Portainer").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()
-		templates = kingpin.Flag("templates", "URL to the templates (apps) definitions").Default("https://raw.githubusercontent.com/portainer/templates/master/templates.json").Short('t').String()
+		endpoint   = kingpin.Flag("host", "Dockerd endpoint").Default("unix:///var/run/docker.sock").Short('H').String()
+		addr       = kingpin.Flag("bind", "Address and port to serve Portainer").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'))
+		logo       = kingpin.Flag("logo", "URL for the logo displayed in the UI").String()
+		templates  = kingpin.Flag("templates", "URL to the templates (apps) definitions").Default("https://raw.githubusercontent.com/cloud-inovasi/ui-templates/master/templates.json").Short('t').String()
 	)
 	kingpin.Parse()
 
@@ -39,6 +40,7 @@ func main() {
 	settings := &Settings{
 		Swarm:        *swarm,
 		HiddenLabels: *labels,
+		Registries:   *registries,
 		Logo:         *logo,
 	}
 

api/settings.go

@@ -9,6 +9,7 @@ import (
 type Settings struct {
 	Swarm        bool     `json:"swarm"`
 	HiddenLabels pairList `json:"hiddenLabels"`
+	Registries   pairList `json:"registries"`
 	Logo         string   `json:"logo"`
 }
 

app/app.js

@@ -18,20 +18,14 @@ angular.module('portainer', [
   'events',
   'images',
   'image',
-  'service',
-  'services',
-  'createService',
   'stats',
   'swarm',
   'network',
   'networks',
-  'createNetwork',
-  'task',
-  'templates',
-  'volumes',
-  'createVolume'])
-  .config(['$stateProvider', '$urlRouterProvider', '$httpProvider', function ($stateProvider, $urlRouterProvider, $httpProvider) {
-    'use strict';
+  'templates',
+  'volumes'])
+  .config(['$stateProvider', '$urlRouterProvider', '$httpProvider', function ($stateProvider, $urlRouterProvider, $httpProvider) {
+    'use strict';
 
     $httpProvider.defaults.xsrfCookieName = 'csrfToken';
     $httpProvider.defaults.xsrfHeaderName = 'X-CSRF-Token';
@@ -84,21 +78,16 @@ angular.module('portainer', [
       templateUrl: 'app/components/createContainer/createcontainer.html',
       controller: 'CreateContainerController'
     })
-    .state('actions.create.network', {
-      url: "/network",
-      templateUrl: 'app/components/createNetwork/createnetwork.html',
-      controller: 'CreateNetworkController'
-    })
-    .state('actions.create.service', {
-      url: "/service",
-      templateUrl: 'app/components/createService/createservice.html',
-      controller: 'CreateServiceController'
-    })
     .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',
@@ -129,21 +118,6 @@ angular.module('portainer', [
       templateUrl: 'app/components/network/network.html',
       controller: 'NetworkController'
     })
-    .state('services', {
-      url: '/services/',
-      templateUrl: 'app/components/services/services.html',
-      controller: 'ServicesController'
-    })
-    .state('service', {
-      url: '^/service/:id/',
-      templateUrl: 'app/components/service/service.html',
-      controller: 'ServiceController'
-    })
-    .state('task', {
-      url: '^/task/:id',
-      templateUrl: 'app/components/task/task.html',
-      controller: 'TaskController'
-    })
     .state('templates', {
       url: '/templates/',
       templateUrl: 'app/components/templates/templates.html',
@@ -188,4 +162,4 @@ angular.module('portainer', [
   .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('TEMPLATES_ENDPOINT', 'templates')
-  .constant('UI_VERSION', 'v1.9.2');
+  .constant('UI_VERSION', 'v1.8.0');

app/components/container/container.html

@@ -29,7 +29,7 @@
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
-      <rd-widget-header icon="fa-server" title="Container status"></rd-widget-header>
+      <rd-widget-header icon="fa-tasks" title="Container status"></rd-widget-header>
       <rd-widget-body classes="no-padding">
         <table class="table">
           <tbody>
@@ -104,7 +104,10 @@
             </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">
+              <select class="selectpicker form-control" ng-model="config.Registry">
+                <option value="">Docker Hub</option>
+                <option ng-repeat="registry in formValues.AvailableRegistries" ng-value="registry.value">{{ registry.name }}</option>
+              </select>
             </div>
           </div>
           <!-- !name-and-registry-inputs -->
@@ -130,7 +133,7 @@
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
-      <rd-widget-header icon="fa-server" title="Container details"></rd-widget-header>
+      <rd-widget-header icon="fa-tasks" title="Container details"></rd-widget-header>
       <rd-widget-body classes="no-padding">
         <table class="table">
           <tbody>

app/components/container/containerController.js

@@ -1,12 +1,15 @@
 angular.module('container', [])
-.controller('ContainerController', ['$scope', '$state','$stateParams', '$filter', 'Container', 'ContainerCommit', 'ImageHelper', 'Messages',
-function ($scope, $state, $stateParams, $filter, Container, ContainerCommit, ImageHelper, Messages) {
+.controller('ContainerController', ['$scope', '$state','$stateParams', '$filter', 'Config', 'Container', 'ContainerCommit', 'ImageHelper', 'Messages',
+function ($scope, $state, $stateParams, $filter, Config, Container, ContainerCommit, ImageHelper, Messages) {
   $scope.activityTime = 0;
   $scope.portBindings = [];
   $scope.config = {
     Image: '',
     Registry: ''
   };
+  $scope.formValues = {
+    AvailableRegistries: []
+  };
 
   var update = function () {
     $('#loadingViewSpinner').show();
@@ -153,5 +156,8 @@ function ($scope, $state, $stateParams, $filter, Container, ContainerCommit, Ima
     $scope.container.edit = false;
   };
 
-  update();
+  Config.$promise.then(function (c) {
+    $scope.formValues.AvailableRegistries = c.registries;
+    update();
+  });
 }]);

app/components/containerConsole/containerConsoleController.js

@@ -9,7 +9,7 @@ function ($scope, $stateParams, Settings, Container, Exec, $timeout, Messages) {
 
   // Ensure the socket is closed before leaving the view
   $scope.$on('$stateChangeStart', function (event, next, current) {
-    if (socket && socket !== null) {
+    if (socket !== null) {
       socket.close();
     }
   });
@@ -82,14 +82,16 @@ function ($scope, $stateParams, Settings, Container, Exec, $timeout, Messages) {
     $scope.connected = true;
     socket.onopen = function(evt) {
       $('#loadConsoleSpinner').hide();
-      term = new Terminal();
+      term = new Terminal({
+        cols: width,
+        rows: height,
+        cursorBlink: true
+      });
 
       term.on('data', function (data) {
         socket.send(data);
       });
       term.open(document.getElementById('terminal-container'));
-      term.resize(width, height);
-      term.setOption('cursorBlink', true);
 
       socket.onmessage = function (e) {
         term.write(e.data);
@@ -100,6 +102,8 @@ function ($scope, $stateParams, Settings, Container, Exec, $timeout, Messages) {
       };
       socket.onclose = function(evt) {
         $scope.connected = false;
+        // term.write("Session terminated");
+        // term.destroy();
       };
     };
   }

app/components/containerLogs/containerlogs.html

@@ -12,7 +12,7 @@
     <rd-widget>
       <rd-widget-body>
         <div class="widget-icon grey pull-left">
-          <i class="fa fa-server"></i>
+          <i class="fa fa-tasks"></i>
         </div>
         <div class="title">{{ container.Name|trimcontainername }}</div>
         <div class="comment">Name</div>

app/components/containers/containers.html

@@ -9,7 +9,7 @@
 
 <div class="col-lg-12">
   <rd-widget>
-    <rd-widget-header icon="fa-server" title="Containers">
+    <rd-widget-header icon="fa-tasks" title="Containers">
       <div class="pull-right">
         <i id="loadContainersSpinner" class="fa fa-cog fa-2x fa-spin" style="margin-top: 5px;"></i>
       </div>
@@ -17,15 +17,15 @@
     <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-primary btn-responsive" ng-click="startAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-play btn-ico" aria-hidden="true"></i>Start</button>
-          <button type="button" class="btn btn-primary btn-responsive" ng-click="stopAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-stop btn-ico" aria-hidden="true"></i>Stop</button>
-          <button type="button" class="btn btn-primary btn-responsive" ng-click="killAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-bomb btn-ico" aria-hidden="true"></i>Kill</button>
-          <button type="button" class="btn btn-primary btn-responsive" ng-click="restartAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-refresh btn-ico" aria-hidden="true"></i>Restart</button>
-          <button type="button" class="btn btn-primary btn-responsive" ng-click="pauseAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-pause btn-ico" aria-hidden="true"></i>Pause</button>
-          <button type="button" class="btn btn-primary btn-responsive" ng-click="unpauseAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-play btn-ico" aria-hidden="true"></i>Resume</button>
-          <button type="button" class="btn btn-danger btn-responsive" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash btn-ico" aria-hidden="true"></i>Remove</button>
+          <button type="button" class="btn btn-primary" ng-click="startAction()" ng-disabled="!state.selectedItemCount">Start</button>
+          <button type="button" class="btn btn-primary" ng-click="stopAction()" ng-disabled="!state.selectedItemCount">Stop</button>
+          <button type="button" class="btn btn-primary" ng-click="killAction()" ng-disabled="!state.selectedItemCount">Kill</button>
+          <button type="button" class="btn btn-primary" ng-click="restartAction()" ng-disabled="!state.selectedItemCount">Restart</button>
+          <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>
         </div>
-        <a class="btn btn-default btn-responsive" type="button" ui-sref="actions.create.container">Add container</a>
+        <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()" style="margin-top: -2px; margin-right: 5px;"/><label for="displayAll">Show all containers</label>
@@ -41,8 +41,8 @@
               <th>
                 <a ui-sref="containers" ng-click="order('Status')">
                   State
-                  <span ng-show="sortType == 'Status' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'Status' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  <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>
@@ -66,7 +66,7 @@
                   <span ng-show="sortType == 'IP' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
-              <th ng-if="swarm && !swarm_mode">
+              <th ng-if="swarm">
                 <a ui-sref="containers" ng-click="order('Host')">
                   Host IP
                   <span ng-show="sortType == 'Host' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
@@ -86,21 +86,18 @@
             <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><span class="label label-{{ container.Status|containerstatusbadge }}">{{ container.Status|containerstatus }}</span></td>
-              <td ng-if="swarm && !swarm_mode"><a ui-sref="container({id: container.Id})">{{ container|swarmcontainername}}</a></td>
-              <td ng-if="!swarm || swarm_mode"><a ui-sref="container({id: container.Id})">{{ container|containername}}</a></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><a ui-sref="image({id: container.Image})">{{ container.Image }}</a></td>
               <td ng-if="state.displayIP">{{ container.IP ? container.IP : '-' }}</td>
-              <td ng-if="swarm && !swarm_mode">{{ container.hostIP }}</td>
+              <td ng-if="swarm">{{ container.hostIP }}</td>
               <td>
                 <a ng-if="container.Ports.length > 0" ng-repeat="p in container.Ports" class="image-tag" ng-href="http://{{p.host}}:{{p.public}}" target="_blank">
-                  <i class="fa fa-external-link" aria-hidden="true"></i> {{p.public}}:{{ p.private }}
+                  <i class="fa fa-external-link" aria-hidden="true"></i> {{ p.private }}
                 </a>
                 <span ng-if="container.Ports.length == 0" >-</span>
               </td>
             </tr>
-            <tr ng-if="containers.length == 0">
-              <td colspan="8" class="text-center text-muted">No containers available.</td>
-            </tr>
           </tbody>
         </table>
       </div>

app/components/containers/containersController.js

@@ -1,34 +1,33 @@
 angular.module('containers', [])
 .controller('ContainersController', ['$scope', 'Container', 'ContainerHelper', 'Info', 'Settings', 'Messages', 'Config',
 function ($scope, Container, ContainerHelper, Info, Settings, Messages, Config) {
+
   $scope.state = {};
   $scope.state.displayAll = Settings.displayAll;
   $scope.state.displayIP = false;
   $scope.sortType = 'State';
   $scope.sortReverse = false;
   $scope.state.selectedItemCount = 0;
-  $scope.swarm_mode = false;
-  $scope.containers = [];
 
   $scope.order = function (sortType) {
     $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
     $scope.sortType = sortType;
   };
 
-  var update = function (data) {
+  var update = function (data, containersToHideLabels) {
     $('#loadContainersSpinner').show();
     $scope.state.selectedItemCount = 0;
     Container.query(data, function (d) {
       var containers = d;
-      if ($scope.containersToHideLabels) {
-        containers = ContainerHelper.hideContainers(d, $scope.containersToHideLabels);
+      if (containersToHideLabels) {
+        containers = ContainerHelper.hideContainers(d, containersToHideLabels);
       }
       $scope.containers = containers.map(function (container) {
         var model = new ContainerViewModel(container);
         if (model.IP) {
           $scope.state.displayIP = true;
         }
-        if ($scope.swarm && !$scope.swarm_mode) {
+        if ($scope.swarm) {
           model.hostIP = $scope.swarm_hosts[_.split(container.Names[0], '/')[1]];
         }
         return model;
@@ -148,19 +147,15 @@ function ($scope, Container, ContainerHelper, Info, Settings, Messages, Config)
 
   $scope.swarm = false;
   Config.$promise.then(function (c) {
-    $scope.containersToHideLabels = c.hiddenLabels;
+    var containersToHideLabels = c.hiddenLabels;
     $scope.swarm = c.swarm;
     if (c.swarm) {
       Info.get({}, function (d) {
-        if (!_.startsWith(d.ServerVersion, 'swarm')) {
-          $scope.swarm_mode = true;
-        } else {
-          $scope.swarm_hosts = retrieveSwarmHostsInfo(d);
-        }
-        update({all: Settings.displayAll ? 1 : 0});
+        $scope.swarm_hosts = retrieveSwarmHostsInfo(d);
+        update({all: Settings.displayAll ? 1 : 0}, containersToHideLabels);
       });
     } else {
-      update({all: Settings.displayAll ? 1 : 0});
+      update({all: Settings.displayAll ? 1 : 0}, containersToHideLabels);
     }
   });
 }]);

app/components/createContainer/createContainerController.js

@@ -1,6 +1,6 @@
 angular.module('createContainer', [])
-.controller('CreateContainerController', ['$scope', '$state', 'Config', 'Info', 'Container', 'Image', 'Volume', 'Network', 'Messages',
-function ($scope, $state, Config, Info, Container, Image, Volume, Network, Messages) {
+.controller('CreateContainerController', ['$scope', '$state', 'Config', 'Container', 'Image', 'Volume', 'Network', 'Messages',
+function ($scope, $state, Config, Container, Image, Volume, Network, Messages) {
 
   $scope.state = {
     alwaysPull: true
@@ -55,16 +55,16 @@ function ($scope, $state, Config, Info, Container, Image, Volume, Network, Messa
 
   Config.$promise.then(function (c) {
     var swarm = c.swarm;
-    Info.get({}, function(info) {
-      if (swarm && !_.startsWith(info.ServerVersion, 'swarm')) {
-        $scope.swarm_mode = true;
-      }
-    });
 
     $scope.formValues.AvailableRegistries = c.registries;
 
     Volume.query({}, function (d) {
-      $scope.availableVolumes = d.Volumes;
+      var persistedVolumes = d.Volumes.filter(function (volume) {
+        if (volume.Driver === 'local-persist') {
+          return volume;
+        }
+      });
+      $scope.availableVolumes = _.uniqBy(persistedVolumes, 'Name');
     }, function (e) {
       Messages.error("Failure", e, "Unable to retrieve volumes");
     });
@@ -156,10 +156,10 @@ function ($scope, $state, Config, Info, Container, Image, Volume, Network, Messa
   function preparePortBindings(config) {
     var bindings = {};
     config.HostConfig.PortBindings.forEach(function (portBinding) {
-      if (portBinding.containerPort) {
+      if (portBinding.hostPort && portBinding.containerPort) {
         var key = portBinding.containerPort + "/" + portBinding.protocol;
         var binding = {};
-        if (portBinding.hostPort && portBinding.hostPort.indexOf(':') > -1) {
+        if (portBinding.hostPort.indexOf(':') > -1) {
           var hostAndPort = portBinding.hostPort.split(':');
           binding.HostIp = hostAndPort[0];
           binding.HostPort = hostAndPort[1];

app/components/createContainer/createcontainer.html

@@ -26,7 +26,10 @@
             </div>
             <label for="image_registry" class="col-sm-1 control-label text-left">Registry</label>
             <div class="col-sm-3">
-              <input type="text" class="form-control" ng-model="formValues.Registry" id="image_registry" placeholder="leave empty to use DockerHub">
+              <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>
             </div>
             <div class="col-sm-offset-1 col-sm-11">
               <div class="checkbox">
@@ -69,7 +72,7 @@
               <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 (optional)">
+                  <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>
@@ -107,6 +110,7 @@
           <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 -->
@@ -211,28 +215,22 @@
               <!-- volumes -->
               <div class="form-group">
                 <label for="container_volumes" class="col-sm-1 control-label text-left">Volumes</label>
-                <div class="col-sm-11">
+                <div class="col-sm-11" ng-if="availableVolumes.length !== 0">
                   <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">
-                      <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">
+                      <select class="selectpicker form-control" ng-model="volume.name">
                         <option selected disabled hidden value="">Select a volume</option>
-                        <option ng-repeat="vol in availableVolumes" ng-value="vol.Name">{{ vol.Name|truncate:30}}</option>
+                        <option ng-repeat="vol in availableVolumes" ng-value="vol.Name">{{ vol.Name|truncate:50}}</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>
@@ -254,7 +252,7 @@
           <!-- tab-network -->
           <div class="tab-pane" id="network">
             <form class="form-horizontal" style="margin-top: 15px;">
-              <div class="form-group" ng-if="globalNetworkCount === 0 && !swarm_mode">
+              <div class="form-group" ng-if="globalNetworkCount === 0">
                 <div class="col-sm-12">
                   <span class="small text-muted">You don't have any shared network. Head over the <a ui-sref="networks">networks view</a> to create one.</span>
                 </div>

app/components/createNetwork/createNetworkController.js

@@ -1,77 +0,0 @@
-angular.module('createNetwork', [])
-.controller('CreateNetworkController', ['$scope', '$state', 'Messages', 'Network',
-function ($scope, $state, Messages, Network) {
-  $scope.formValues = {
-    DriverOptions: [],
-    Subnet: '',
-    Gateway: ''
-  };
-
-  $scope.config = {
-    Driver: 'bridge',
-    CheckDuplicate: true,
-    Internal: false,
-    // Force IPAM Driver to 'default', should not be required.
-    // See: https://github.com/docker/docker/issues/25735
-    IPAM: {
-      Driver: 'default',
-      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.message) {
-        $('#createNetworkSpinner').hide();
-        Messages.error('Unable to create network', {}, d.message);
-      } else {
-        Messages.send("Network created", d.Id);
-        $('#createNetworkSpinner').hide();
-        $state.go('networks', {}, {reload: true});
-      }
-    }, function (e) {
-      $('#createNetworkSpinner').hide();
-      Messages.error("Failure", e, 'Unable to create network');
-    });
-  }
-
-  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

@@ -1,95 +0,0 @@
-<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-disabled="!config.Name" ng-click="create()">Create</button>
-    <a type="button" class="btn btn-default btn-lg" ui-sref="networks">Cancel</a>
-  </div>
-</div>

app/components/createService/createServiceController.js

@@ -1,178 +0,0 @@
-angular.module('createService', [])
-.controller('CreateServiceController', ['$scope', '$state', 'Service', 'Volume', 'Network', 'ImageHelper', 'Messages',
-function ($scope, $state, Service, Volume, Network, ImageHelper, Messages) {
-
-  $scope.formValues = {
-    Name: '',
-    Image: '',
-    Registry: '',
-    Mode: 'replicated',
-    Replicas: 1,
-    Command: '',
-    WorkingDir: '',
-    User: '',
-    Env: [],
-    Volumes: [],
-    Network: '',
-    ExtraNetworks: [],
-    Ports: []
-  };
-
-  $scope.addPortBinding = function() {
-    $scope.formValues.Ports.push({ PublishedPort: '', TargetPort: '', Protocol: 'tcp' });
-  };
-
-  $scope.removePortBinding = function(index) {
-    $scope.formValues.Ports.splice(index, 1);
-  };
-
-  $scope.addExtraNetwork = function() {
-    $scope.formValues.ExtraNetworks.push({ Name: '' });
-  };
-
-  $scope.removeExtraNetwork = function(index) {
-    $scope.formValues.ExtraNetworks.splice(index, 1);
-  };
-
-  $scope.addVolume = function() {
-    $scope.formValues.Volumes.push({ name: '', containerPath: '' });
-  };
-
-  $scope.removeVolume = function(index) {
-    $scope.formValues.Volumes.splice(index, 1);
-  };
-
-  $scope.addEnvironmentVariable = function() {
-    $scope.formValues.Env.push({ name: '', value: ''});
-  };
-
-  $scope.removeEnvironmentVariable = function(index) {
-    $scope.formValues.Env.splice(index, 1);
-  };
-
-  function prepareImageConfig(config, input) {
-    var imageConfig = ImageHelper.createImageConfig(input.Image, input.Registry);
-    config.TaskTemplate.ContainerSpec.Image = imageConfig.repo + ':' + imageConfig.tag;
-  }
-
-  function preparePortsConfig(config, input) {
-    var ports = [];
-    input.Ports.forEach(function (binding) {
-      if (binding.PublishedPort && binding.TargetPort) {
-        ports.push({ PublishedPort: +binding.PublishedPort, TargetPort: +binding.TargetPort, Protocol: binding.Protocol });
-      }
-    });
-    config.EndpointSpec.Ports = ports;
-  }
-
-  function prepareSchedulingConfig(config, input) {
-    if (input.Mode === 'replicated') {
-      config.Mode.Replicated = {
-        Replicas: input.Replicas
-      };
-    } else {
-      config.Mode.Global = {};
-    }
-  }
-
-  function prepareCommandConfig(config, input) {
-    if (input.Command) {
-      config.TaskTemplate.ContainerSpec.Command = _.split(input.Command, ' ');
-    }
-    if (input.User) {
-      config.TaskTemplate.ContainerSpec.User = input.User;
-    }
-    if (input.WorkingDir) {
-      config.TaskTemplate.ContainerSpec.Dir = input.WorkingDir;
-    }
-  }
-
-  function prepareEnvConfig(config, input) {
-    var env = [];
-    input.Env.forEach(function (v) {
-      if (v.name && v.value) {
-        env.push(v.name + "=" + v.value);
-      }
-    });
-    config.TaskTemplate.ContainerSpec.Env = env;
-  }
-
-  function prepareVolumes(config, input) {
-    input.Volumes.forEach(function (volume) {
-      if (volume.Source && volume.Target) {
-        var mount = {};
-        mount.Type = volume.Bind ? 'bind' : 'volume';
-        mount.ReadOnly = volume.ReadOnly ? true : false;
-        mount.Source = volume.Source;
-        mount.Target = volume.Target;
-        config.TaskTemplate.ContainerSpec.Mounts.push(mount);
-      }
-    });
-  }
-
-  function prepareNetworks(config, input) {
-    var networks = [];
-    if (input.Network) {
-      networks.push({ Target: input.Network });
-    }
-    input.ExtraNetworks.forEach(function (network) {
-      networks.push({ Target: network.Name });
-    });
-    config.Networks = _.uniqWith(networks, _.isEqual);
-  }
-
-  function prepareConfiguration() {
-    var input = $scope.formValues;
-    var config = {
-      Name: input.Name,
-      TaskTemplate: {
-        ContainerSpec: {
-          Mounts: []
-        }
-      },
-      Mode: {},
-      EndpointSpec: {}
-    };
-    prepareSchedulingConfig(config, input);
-    prepareImageConfig(config, input);
-    preparePortsConfig(config, input);
-    prepareCommandConfig(config, input);
-    prepareEnvConfig(config, input);
-    prepareVolumes(config, input);
-    prepareNetworks(config, input);
-    return config;
-  }
-
-  function createNewService(config) {
-    Service.create(config, function (d) {
-      $('#createServiceSpinner').hide();
-      Messages.send('Service created', d.ID);
-      $state.go('services', {}, {reload: true});
-    }, function (e) {
-      $('#createServiceSpinner').hide();
-      Messages.error("Failure", e, 'Unable to create service');
-    });
-  }
-
-  $scope.create = function createService() {
-    $('#createServiceSpinner').show();
-    var config = prepareConfiguration();
-    createNewService(config);
-  };
-
-  Volume.query({}, function (d) {
-    $scope.availableVolumes = d.Volumes;
-  }, function (e) {
-    Messages.error("Failure", e, "Unable to retrieve volumes");
-  });
-
-  Network.query({}, function (d) {
-    $scope.availableNetworks = d.filter(function (network) {
-      if (network.Scope === 'swarm') {
-        return network;
-      }
-    });
-  }, function (e) {
-    Messages.error("Failure", e, "Unable to retrieve networks");
-  });
-}]);

app/components/createService/createservice.html

@@ -1,272 +0,0 @@
-<rd-header>
-  <rd-header-title title="Create service"></rd-header-title>
-  <rd-header-content>
-    Services > Add service
-  </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="service_name" class="col-sm-1 control-label text-left">Name</label>
-            <div class="col-sm-11">
-              <input type="text" class="form-control" ng-model="formValues.Name" id="service_name" placeholder="e.g. myService">
-            </div>
-          </div>
-          <!-- !name-input -->
-          <!-- image-and-registry-inputs -->
-          <div class="form-group">
-            <label for="service_image" class="col-sm-1 control-label text-left">Image</label>
-            <div class="col-sm-7">
-              <input type="text" class="form-control" ng-model="formValues.Image" id="service_image" placeholder="e.g. nginx:latest">
-            </div>
-            <label for="image_registry" class="col-sm-1 control-label text-left">Registry</label>
-            <div class="col-sm-3">
-              <input type="text" class="form-control" ng-model="formValues.Registry" id="image_registry" placeholder="leave empty to use DockerHub">
-            </div>
-          </div>
-          <!-- !image-and-registry-inputs -->
-          <!-- scheduling-mode -->
-          <div class="form-group">
-            <label class="col-sm-1 control-label text-left">Scheduling mode</label>
-            <div class="col-sm-11">
-              <label class="radio-inline">
-                <input type="radio" name="service_scheduling" ng-model="formValues.Mode" value="global">
-                Global
-              </label>
-              <label class="radio-inline">
-                <input type="radio" name="service_scheduling" ng-model="formValues.Mode" value="replicated">
-                Replicated
-              </label>
-            </div>
-          </div>
-          <div class="form-group" ng-if="formValues.Mode === 'replicated'">
-            <label for="replicas" class="col-sm-1 control-label text-left">Replicas</label>
-            <div class="col-sm-1">
-              <input type="number" class="form-control" ng-model="formValues.Replicas" id="replicas" placeholder="e.g. 3">
-            </div>
-            <div class="col-sm-10"></div>
-          </div>
-          <!-- !scheduling-mode -->
-          <!-- 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 formValues.Ports" 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.PublishedPort" placeholder="e.g. 8080">
-                </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.TargetPort" 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>
-        </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="service_command" class="col-sm-1 control-label text-left">Command</label>
-                <div class="col-sm-9">
-                  <input type="text" class="form-control" ng-model="formValues.Command" id="service_command" placeholder="e.g. /usr/bin/nginx -t -c /mynginx.conf">
-                </div>
-              </div>
-              <!-- !command-input -->
-              <!-- workdir-user-input -->
-              <div class="form-group">
-                <label for="service_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="formValues.WorkingDir" id="service_workingdir" placeholder="e.g. /myapp">
-                </div>
-                <label for="service_user" class="col-sm-1 control-label text-left">User</label>
-                <div class="col-sm-4">
-                  <input type="text" class="form-control" ng-model="formValues.User" id="service_user" placeholder="e.g. nginx">
-                </div>
-              </div>
-              <!-- !workdir-user-input -->
-              <!-- environment-variables -->
-              <div class="form-group">
-                <label for="service_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 formValues.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="service_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.Bind">bind</span>
-                      <select class="selectpicker form-control" ng-model="volume.Source" ng-if="!volume.Bind">
-                        <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.Bind" type="text" class="form-control" ng-model="volume.Source" 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.Target" 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>
-              <!-- !volumes -->
-            </form>
-          </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="formValues.Network">
-                    <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 class="col-sm-2"></div>
-              </div>
-              <!-- !network-input -->
-              <!-- extra-networks -->
-              <div class="form-group">
-                <label for="service_extra_networks" class="col-sm-1 control-label text-left">Extra networks</label>
-                <div class="col-sm-11">
-                  <span class="label label-default clickable" ng-click="addExtraNetwork()">
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i> network
-                  </span>
-                </div>
-                <!-- network-input-list -->
-                <div style="margin-top: 10px;">
-                  <div class="col-sm-12" ng-repeat="network in formValues.ExtraNetworks" style="margin-top: 5px;">
-                    <div class="input-group col-sm-9 input-group-sm col-sm-offset-1">
-                      <span class="input-group-btn">
-                        <button class="btn btn-default" type="button" ng-click="removeExtraNetwork($index)">
-                          <i class="fa fa-minus" aria-hidden="true"></i>
-                        </button>
-                      </span>
-                      <select class="selectpicker form-control" ng-model="network.Name">
-                        <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 class="col-sm-2"></div>
-                  </div>
-                </div>
-                <!-- !network-input-list -->
-              </div>
-              <!-- !extra-networks -->
-            </form>
-          </div>
-          <!-- !tab-network -->
-          <!-- tab-security -->
-          <div class="tab-pane" id="security">
-          </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;">
-    <div>
-      <i id="createServiceSpinner" 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="services">Cancel</a>
-  </div>
-</div>

app/components/createVolume/createVolumeController.js

@@ -1,56 +0,0 @@
-angular.module('createVolume', [])
-.controller('CreateVolumeController', ['$scope', '$state', 'Volume', 'Messages',
-function ($scope, $state, Volume, Messages) {
-
-  $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.message) {
-        $('#createVolumeSpinner').hide();
-        Messages.error('Unable to create volume', {}, d.message);
-      } else {
-        Messages.send("Volume created", d.Name);
-        $('#createVolumeSpinner').hide();
-        $state.go('volumes', {}, {reload: true});
-      }
-    }, function (e) {
-      $('#createVolumeSpinner').hide();
-      Messages.error("Failure", e, 'Unable to create volume');
-    });
-  }
-
-  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

@@ -1,72 +0,0 @@
-<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/dashboard.html

@@ -6,7 +6,7 @@
 </rd-header>
 
 <div class="row">
-  <div class="col-lg-12 col-md-12 col-xs-12" ng-if="swarm_mode || !swarm">
+  <div class="col-lg-12 col-md-12 col-xs-12" ng-if="!swarm">
     <rd-widget>
       <rd-widget-header icon="fa-tachometer" title="Node info"></rd-widget-header>
       <rd-widget-body classes="no-padding">
@@ -33,7 +33,7 @@
       </rd-widget-body>
     </rd-widget>
   </div>
-  <div class="col-lg-12 col-md-12 col-xs-12" ng-if="swarm && !swarm_mode">
+  <div class="col-lg-12 col-md-12 col-xs-12" ng-if="swarm">
     <rd-widget>
       <rd-widget-header icon="fa-tachometer" title="Cluster info"></rd-widget-header>
       <rd-widget-body classes="no-padding">
@@ -41,7 +41,7 @@
           <tbody>
             <tr>
               <td>Nodes</td>
-              <td>{{ infoData.SystemStatus[0][1] == 'primary' ? infoData.SystemStatus[3][1] : infoData.SystemStatus[4][1] }}</td>
+              <td>{{ infoData.SystemStatus[3][1] }}</td>
             </tr>
             <tr>
               <td>Swarm version</td>
@@ -53,29 +53,7 @@
             </tr>
             <tr>
               <td>Total memory</td>
-              <td>{{ infoData.MemTotal|humansize: 2 }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-  <div class="col-lg-12 col-md-12 col-xs-12" ng-if="swarm && swarm_mode">
-    <rd-widget>
-      <rd-widget-header icon="fa-tachometer" title="Swarm info"></rd-widget-header>
-      <rd-widget-body classes="no-padding">
-        <table class="table">
-          <tbody>
-            <tr>
-              <td colspan="2"><span class="small text-muted">This node is part of a Swarm cluster</span></td>
-            </tr>
-            <tr >
-              <td>Node role</td>
-              <td>{{ infoData.Swarm.ControlAvailable ? 'Manager' : 'Worker' }}</td>
-            </tr>
-            <tr ng-if="infoData.Swarm.ControlAvailable">
-              <td>Nodes in the cluster</td>
-              <td>{{ infoData.Swarm.Nodes }}</td>
+              <td>{{ infoData.MemTotal|humansize }}</td>
             </tr>
           </tbody>
         </table>
@@ -90,7 +68,7 @@
       <rd-widget>
         <rd-widget-body>
           <div class="widget-icon blue pull-left">
-            <i class="fa fa-server"></i>
+            <i class="fa fa-tasks"></i>
           </div>
           <div class="pull-right">
             <div><i class="fa fa-heartbeat text-icon green-icon"></i>{{ containerData.running }} running</div>

app/components/dashboard/dashboardController.js

@@ -14,7 +14,6 @@ function ($scope, $q, Config, Container, ContainerHelper, Image, Network, Volume
   $scope.volumeData = {
     total: 0
   };
-  $scope.swarm_mode = false;
 
   function prepareContainerData(d, containersToHideLabels) {
     var running = 0;
@@ -64,9 +63,6 @@ function ($scope, $q, Config, Container, ContainerHelper, Image, Network, Volume
   function prepareInfoData(d) {
     var info = d;
     $scope.infoData = info;
-    if ($scope.swarm && !_.startsWith(info.ServerVersion, 'swarm')) {
-      $scope.swarm_mode = true;
-    }
   }
 
   function fetchDashboardData(containersToHideLabels) {

app/components/dashboard/master-ctrl.js

@@ -1,6 +1,5 @@
 angular.module('dashboard')
-.controller('MasterCtrl', ['$scope', '$cookieStore', 'Settings', 'Config', 'Info',
-function ($scope, $cookieStore, Settings, Config, Info) {
+.controller('MasterCtrl', ['$scope', '$cookieStore', 'Settings', 'Config', function ($scope, $cookieStore, Settings, Config) {
   /**
   * Sidebar Toggle & Cookie Control
   */
@@ -10,20 +9,7 @@ function ($scope, $cookieStore, Settings, Config, Info) {
     return window.innerWidth;
   };
 
-  $scope.swarm_mode = false;
-
-  Config.$promise.then(function (c) {
-    $scope.swarm = c.swarm;
-    Info.get({}, function(d) {
-      if ($scope.swarm && !_.startsWith(d.ServerVersion, 'swarm')) {
-        $scope.swarm_mode = true;
-        $scope.swarm_manager = false;
-        if (d.Swarm.ControlAvailable) {
-          $scope.swarm_manager = true;
-        }
-      }
-    });
-  });
+  $scope.config = Config;
 
   $scope.$watch($scope.getWidth, function(newValue, oldValue) {
     if (newValue >= mobileView) {

app/components/image/image.html

@@ -48,7 +48,10 @@
             </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">
+              <select class="selectpicker form-control" ng-model="config.Registry">
+                <option value="">Docker Hub</option>
+                <option ng-repeat="registry in formValues.AvailableRegistries" ng-value="registry.value">{{ registry.name }}</option>
+              </select>
             </div>
           </div>
           <!-- !name-and-registry-inputs -->
@@ -82,7 +85,7 @@
               <td>ID</td>
               <td>
                 {{ image.Id }}
-                <button class="btn btn-xs btn-danger" ng-click="removeImage(image.Id)"><i class="fa fa-trash btn-ico" aria-hidden="true"></i>Delete this image</button>
+                <button class="btn btn-xs btn-danger" ng-click="removeImage(image.Id)">Delete this image</button>
               </td>
             </tr>
             <tr ng-if="image.Parent">

app/components/image/imageController.js

@@ -1,12 +1,16 @@
 angular.module('image', [])
-.controller('ImageController', ['$scope', '$stateParams', '$state', 'Image', 'ImageHelper', 'Messages',
-function ($scope, $stateParams, $state, Image, ImageHelper, Messages) {
+.controller('ImageController', ['$scope', '$stateParams', '$state', 'Config', 'Image', 'ImageHelper', 'Messages',
+function ($scope, $stateParams, $state, Config, Image, ImageHelper, Messages) {
   $scope.RepoTags = [];
   $scope.config = {
     Image: '',
     Registry: ''
   };
 
+  $scope.formValues = {
+    AvailableRegistries: []
+  };
+
   // 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) {
@@ -72,18 +76,22 @@ function ($scope, $stateParams, $state, Image, ImageHelper, Messages) {
     });
   };
 
-  $('#loadingViewSpinner').show();
-  Image.get({id: $stateParams.id}, function (d) {
-    $scope.image = d;
-    if (d.RepoTags) {
-      $scope.RepoTags = d.RepoTags;
-    } else {
-      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) {
-    Messages.error("Failure", e, "Unable to retrieve image info");
+  Config.$promise.then(function (c) {
+    $scope.formValues.AvailableRegistries = c.registries;
+
+    $('#loadingViewSpinner').show();
+    Image.get({id: $stateParams.id}, function (d) {
+      $scope.image = d;
+      if (d.RepoTags) {
+        $scope.RepoTags = d.RepoTags;
+      } else {
+        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) {
+      Messages.error("Failure", e, "Unable to retrieve image info");
+    });
   });
 }]);

app/components/images/images.html

@@ -22,7 +22,10 @@
             </div>
             <label for="image_registry" class="col-sm-1 control-label text-left">Registry</label>
             <div class="col-sm-3">
-              <input type="text" class="form-control" ng-model="config.Registry" id="image_registry" placeholder="leave empty to use DockerHub">
+              <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>
             </div>
           </div>
           <!-- !name-and-registry-inputs -->
@@ -55,7 +58,7 @@
       </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"><i class="fa fa-trash btn-ico" aria-hidden="true"></i>Remove</button>
+          <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" />
@@ -88,13 +91,6 @@
                     <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>
@@ -105,15 +101,11 @@
                   <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>
-              <tr ng-if="images.length == 0">
-                <td colspan="5" class="text-center text-muted">No images available.</td>
               </tr>
             </tbody>
           </table>
         </div>
       </rd-widget-body>
-      <rd-widget>
-      </div>
-    </div>
+    <rd-widget>
+  </div>
+</div>

app/components/images/imagesController.js

@@ -5,7 +5,6 @@ function ($scope, $state, Config, Image, Messages) {
   $scope.sortType = 'RepoTags';
   $scope.sortReverse = true;
   $scope.state.selectedItemCount = 0;
-  $scope.images = [];
 
   $scope.config = {
     Image: '',
@@ -41,7 +40,7 @@ function ($scope, $state, Config, Image, Messages) {
   $scope.pullImage = function() {
     $('#pullImageSpinner').show();
     var image = _.toLower($scope.config.Image);
-    var registry = _.toLower($scope.config.Registry);
+    var registry = $scope.config.Registry;
     var imageConfig = createImageConfig(image, registry);
     Image.create(imageConfig, function (data) {
         var err = data.length > 0 && data[data.length - 1].hasOwnProperty('error');
@@ -73,7 +72,7 @@ function ($scope, $state, Config, Image, Messages) {
         counter = counter + 1;
         Image.remove({id: i.Id}, function (d) {
           if (d[0].message) {
-            $('#loadImagesSpinner').hide();
+            $('#loadingViewSpinner').hide();
             Messages.error("Unable to remove image", {}, d[0].message);
           } else {
             Messages.send("Image deleted", i.Id);

app/components/network/network.html

@@ -8,56 +8,118 @@
 </rd-header>
 
 <div class="row">
-  <div class="col-lg-12 col-md-12 col-xs-12">
+  <div class="col-lg-9 col-md-9 col-xs-9">
+    <rd-widget>
+      <rd-widget-body>
+        <div class="widget-icon grey pull-left">
+          <i class="fa fa-sitemap"></i>
+        </div>
+        <div class="title">{{ network.Name }}</div>
+        <div class="comment">Name</div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+  <div class="col-lg-3 col-md-3 col-xs-3">
+    <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-default" disabled>Connect container...</button>
+            <button class="btn btn-danger" ng-click="remove(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-sitemap" title="Network details"></rd-widget-header>
       <rd-widget-body classes="no-padding">
         <table class="table">
           <tbody>
             <tr>
-              <td>Name</td>
-              <td>{{ network.Name }}</td>
+              <td>Id</td>
+              <td>{{ network.Id }}</td>
             </tr>
             <tr>
-              <td>ID</td>
-              <td>
-                {{ network.Id }}
-                <button class="btn btn-xs btn-danger" ng-click="removeNetwork(network.Id)"><i class="fa fa-trash btn-ico" aria-hidden="true"></i>Delete this network</button>
-              </td>
+              <td>Scope</td>
+              <td>{{ network.Scope }}</td>
             </tr>
             <tr>
               <td>Driver</td>
               <td>{{ network.Driver }}</td>
             </tr>
             <tr>
-              <td>Scope</td>
-              <td>{{ network.Scope }}</td>
+              <td>IPAM</td>
+              <td>
+                <table class="table table-striped">
+                  <tr>
+                    <td>Driver</td>
+                    <td>{{ network.IPAM.Driver }}</td>
+                  </tr>
+                  <tr>
+                    <td>Subnet</td>
+                    <td>{{ network.IPAM.Config[0].Subnet }}</td>
+                  </tr>
+                  <tr>
+                    <td>Gateway</td>
+                    <td>{{ network.IPAM.Config[0].Gateway }}</td>
+                  </tr>
+                </table>
+              </td>
             </tr>
-            <tr ng-if="network.IPAM.Config[0].Subnet">
-              <td>Subnet</td>
-              <td>{{ network.IPAM.Config[0].Subnet }}</td>
+            <tr>
+              <td>Containers</td>
+              <td>
+                <table class="table table-striped" ng-repeat="(Id, container) in network.Containers">
+                  <tr>
+                    <td>Id</td>
+                    <td><a ui-sref="container({id: Id})">{{ Id }}</a></td>
+                  </tr>
+                  <tr>
+                    <td>EndpointID</td>
+                    <td>{{ container.EndpointID}}</td>
+                  </tr>
+                  <tr>
+                    <td>MacAddress</td>
+                    <td>{{ container.MacAddress}}</td>
+                  </tr>
+                  <tr>
+                    <td>IPv4Address</td>
+                    <td>{{ container.IPv4Address}}</td>
+                  </tr>
+                  <tr>
+                    <td>IPv6Address</td>
+                    <td>{{ container.IPv6Address}}</td>
+                  </tr>
+                  <tr>
+                    <td colspan="2">
+                      <button ng-click="disconnect(network.Id, Id)" class="btn btn-danger">
+                        Disconnect from network
+                      </button>
+                    </td>
+                  </tr>
+                </table>
+              </td>
             </tr>
-            <tr ng-if="network.IPAM.Config[0].Gateway">
-              <td>Gateway</td>
-              <td>{{ network.IPAM.Config[0].Gateway }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>
-
-<div class="row" ng-if="!(network.Options | emptyobject)">
-  <div class="col-lg-12 col-md-12 col-xs-12">
-    <rd-widget>
-      <rd-widget-header icon="fa-cogs" title="Network options"></rd-widget-header>
-      <rd-widget-body classes="no-padding">
-        <table class="table">
-          <tbody>
-            <tr ng-repeat="(key, value) in network.Options">
-              <td>{{ key }}</td>
-              <td>{{ value }}</td>
+            <tr>
+              <td>Options</td>
+              <td>
+                <table role="table" class="table table-striped">
+                  <tr ng-repeat="(k, v) in network.Options">
+                    <td>{{ k }}</td>
+                    <td>{{ v }}</td>
+                  </tr>
+                </table>
+              </td>
             </tr>
           </tbody>
         </table>

app/components/network/networkController.js

@@ -1,8 +1,20 @@
 angular.module('network', [])
-.controller('NetworkController', ['$scope', '$state', '$stateParams', 'Network', 'Messages',
-function ($scope, $state, $stateParams, Network, Messages) {
+.controller('NetworkController', ['$scope', 'Network', 'Messages', '$state', '$stateParams',
+function ($scope, Network, Messages, $state, $stateParams) {
 
-  $scope.removeNetwork = function removeNetwork(networkId) {
+  $scope.disconnect = function disconnect(networkId, containerId) {
+    $('#loadingViewSpinner').show();
+    Network.disconnect({id: $stateParams.id}, {Container: containerId}, function (d) {
+      $('#loadingViewSpinner').hide();
+      Messages.send("Container disconnected", containerId);
+      $state.go('network', {id: $stateParams.id}, {reload: true});
+    }, function (e) {
+      $('#loadingViewSpinner').hide();
+      Messages.error("Failure", e, "Unable to disconnect container");
+    });
+  };
+
+  $scope.remove = function remove(networkId) {
     $('#loadingViewSpinner').show();
     Network.remove({id: $stateParams.id}, function (d) {
       if (d.message) {

app/components/networks/networks.html

@@ -7,10 +7,11 @@
   <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 network">
+      <rd-widget-header icon="fa-plus" title="Add a shared network">
       </rd-widget-header>
       <rd-widget-body>
         <form class="form-horizontal">
@@ -22,22 +23,39 @@
             </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" ng-if="swarm">
             <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>
-          <div class="form-group" ng-if="!swarm">
-            <div class="col-sm-12">
-              <span class="small text-muted">Note: The network will be created using the bridge driver.</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>
-              <button type="button" class="btn btn-default btn-sm" ui-sref="actions.create.network">Advanced settings...</button>
               <i id="createNetworkSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
             </div>
           </div>
@@ -47,97 +65,68 @@
   </div>
 </div>
 
-<div class="row">
-  <div class="col-lg-12 col-md-12 col-xs-12">
-    <rd-widget>
-      <rd-widget-header icon="fa-sitemap" title="Networks">
-        <div class="pull-right">
-          <i id="loadNetworksSpinner" class="fa fa-cog fa-2x fa-spin" style="margin-top: 5px;"></i>
-        </div>
-      </rd-widget-header>
-      <rd-widget-taskbar classes="col-lg-12">
-        <div class="pull-left">
-          <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash btn-ico" aria-hidden="true"></i>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 table-hover">
-            <thead>
-              <tr>
-                <th></th>
-                <th>
-                  <a ui-sref="networks" ng-click="order('Name')">
-                    Name
-                    <span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                    <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
-                    <span ng-show="sortType == 'Scope' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                    <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')">
-                    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')">
-                    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>
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <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>
-              <tr ng-if="networks.length == 0">
-                <td colspan="8" class="text-center text-muted">No networks available.</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </rd-widget-body>
-    <rd-widget>
-  </div>
+<div class="col-lg-12">
+  <rd-widget>
+    <rd-widget-header icon="fa-sitemap" title="Networks">
+      <div class="pull-right">
+        <i id="loadNetworksSpinner" class="fa fa-cog fa-2x fa-spin" style="margin-top: 5px;"></i>
+      </div>
+    </rd-widget-header>
+    <rd-widget-taskbar classes="col-lg-12">
+      <div class="pull-left">
+        <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 table-hover">
+          <thead>
+            <tr>
+              <th></th>
+              <th>
+                <a ui-sref="networks" ng-click="order('Name')">
+                  Name
+                  <span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="networks" ng-click="order('Scope')">
+                  Scope
+                  <span ng-show="sortType == 'Scope' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Scope' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="networks" ng-click="order('IPAM.Config[0].Subnet')">
+                  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
+                  <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>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <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.Scope }}</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>
+          </tbody>
+        </table>
+      </div>
+    </rd-widget-body>
+  <rd-widget>
 </div>

app/components/networks/networksController.js

@@ -4,23 +4,50 @@ function ($scope, $state, Network, Config, Messages) {
   $scope.state = {};
   $scope.state.selectedItemCount = 0;
   $scope.state.advancedSettings = false;
-  $scope.sortType = 'Name';
+  $scope.sortType = 'Scope';
   $scope.sortReverse = false;
-  $scope.networks = [];
+
+  $scope.formValues = {
+    Subnet: '',
+    Gateway: ''
+  };
 
   $scope.config = {
-    Name: ''
+    Name: '',
+    IPAM: {
+      Config: []
+    }
   };
 
+  $scope.order = function(sortType) {
+    $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
+    $scope.sortType = sortType;
+  };
+
+  $scope.selectItem = function (item) {
+    if (item.Checked) {
+      $scope.state.selectedItemCount++;
+    } else {
+      $scope.state.selectedItemCount--;
+    }
+  };
+
+  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);
     if ($scope.swarm) {
       config.Driver = 'overlay';
-      // Force IPAM Driver to 'default', should not be required.
-      // See: https://github.com/docker/docker/issues/25735
-      config.IPAM = {
-        Driver: 'default'
-      };
     }
     return config;
   }
@@ -43,19 +70,6 @@ function ($scope, $state, Network, Config, Messages) {
     });
   };
 
-  $scope.order = function(sortType) {
-    $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
-    $scope.sortType = sortType;
-  };
-
-  $scope.selectItem = function (item) {
-    if (item.Checked) {
-      $scope.state.selectedItemCount++;
-    } else {
-      $scope.state.selectedItemCount--;
-    }
-  };
-
   $scope.removeAction = function () {
     $('#loadNetworksSpinner').show();
     var counter = 0;

app/components/service/service.html

@@ -1,150 +0,0 @@
-<rd-header>
-  <rd-header-title title="Service details">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="service({id: service.Id})" ui-sref-opts="{reload: true}">
-      <i class="fa fa-refresh" aria-hidden="true"></i>
-    </a>
-    <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
-  </rd-header-title>
-  <rd-header-content>
-    Services > <a ui-sref="service({id: service.Id})">{{ service.Name }}</a>
-  </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-list-alt" title="Service details"></rd-widget-header>
-      <rd-widget-body classes="no-padding">
-        <table class="table">
-          <tbody>
-            <tr>
-              <td>Name</td>
-              <td ng-if="!service.EditName">
-                {{ service.Name }}
-                <a href="" data-toggle="tooltip" title="Edit service name" ng-click="service.EditName = true;"><i class="fa fa-edit"></i></a>
-              </td>
-              <td ng-if="service.EditName">
-                <input type="text" class="containerNameInput" ng-model="service.newServiceName">
-                <a class="interactive" ng-click="service.EditName = false;"><i class="fa fa-times"></i></a>
-                <a class="interactive" ng-click="renameService(service)"><i class="fa fa-check-square-o"></i></a>
-              </td>
-            </tr>
-            <tr>
-              <td>ID</td>
-              <td>
-                {{ service.Id }}
-                <button class="btn btn-xs btn-danger" ng-click="removeService()"><i class="fa fa-trash btn-ico" aria-hidden="true"></i>Delete this service</button>
-              </td>
-            </tr>
-            <tr>
-              <td>Scheduling mode</td>
-              <td>{{ service.Mode }}</td>
-            </tr>
-            <tr ng-if="service.Mode === 'replicated'">
-              <td>Replicas</td>
-              <td>
-                <span ng-if="service.Mode === 'replicated' && !service.Scale">
-                  {{ service.Replicas }}
-                  <a class="interactive" ng-click="service.Scale = true; service.ReplicaCount = service.Replicas;"><i class="fa fa-arrows-v" aria-hidden="true"></i> Scale</a>
-                </span>
-                <span ng-if="service.Mode === 'replicated' && service.Scale">
-                  <input class="input-sm" type="number" ng-model="service.Replicas" />
-                  <a class="interactive" ng-click="service.Scale = false;"><i class="fa fa-times"></i></a>
-                  <a class="interactive" ng-click="scaleService(service)"><i class="fa fa-check-square-o"></i></a>
-                </span>
-              </td>
-            </tr>
-            <tr>
-              <td>Image</td>
-              <td>{{ service.Image }}</td>
-            </tr>
-            <tr ng-if="service.Ports">
-              <td>Published ports</td>
-              <td>
-                <div ng-repeat="mapping in service.Ports">
-                  {{ mapping.TargetPort }} <i class="fa fa-long-arrow-right"></i> {{ mapping.PublishedPort }}
-                </div>
-              </td>
-            </tr>
-            <tr ng-if="service.Env">
-              <td>Env</td>
-              <td>
-                <table class="table table-bordered table-condensed">
-                  <tr ng-repeat="var in service.Env">
-                    <td>{{ var|key: '=' }}</td>
-                    <td>{{ var|value: '=' }}</td>
-                  </tr>
-                </table>
-              </td>
-            </tr>
-            <tr ng-if="service.Labels">
-              <td>Labels</td>
-              <td>
-                <table class="table table-bordered table-condensed">
-                  <tr ng-repeat="(k, v) in service.Labels">
-                    <td>{{ k }}</td>
-                    <td>{{ v }}</td>
-                  </tr>
-                </table>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>
-
-<div class="row" ng-if="tasks.length > 0">
-  <div class="col-lg-12 col-md-12 col-xs-12">
-    <rd-widget>
-      <rd-widget-header icon="fa-tasks" title="Associated tasks"></rd-widget-header>
-      <rd-widget-body classes="no-padding">
-        <table class="table">
-          <thead>
-            <tr>
-              <th>Id</th>
-              <th>
-                <a ui-sref="service" 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>
-              <th>
-                <a ui-sref="service" ng-click="order('Slot')">
-                  Slot
-                  <span ng-show="sortType == 'Slot' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'Slot' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
-                </a>
-              </th>
-              <th ng-if="displayNode">
-                <a ui-sref="service" ng-click="order('Node')">
-                  Node
-                  <span ng-show="sortType == 'Node' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'Node' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
-                </a>
-              </th>
-              <th>
-                <a ui-sref="service" ng-click="order('UpdatedAt')">
-                  Last update
-                  <span ng-show="sortType == 'UpdatedAt' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'UpdatedAt' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
-                </a>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr ng-repeat="task in (filteredTasks = ( tasks | orderBy:sortType:sortReverse))">
-              <td><a ui-sref="task({ id: task.Id })">{{ task.Id }}</a></td>
-              <td><span class="label label-{{ task.Status|taskstatusbadge }}">{{ task.Status }}</span></td>
-              <td>{{ task.Slot }}</td>
-              <td ng-if="displayNode">{{ task.Node }}</td>
-              <td>{{ task.Updated|getisodate }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>

app/components/service/serviceController.js

@@ -1,97 +0,0 @@
-angular.module('service', [])
-.controller('ServiceController', ['$scope', '$stateParams', '$state', 'Service', 'ServiceHelper', 'Task', 'Node', 'Messages',
-function ($scope, $stateParams, $state, Service, ServiceHelper, Task, Node, Messages) {
-
-  $scope.service = {};
-  $scope.tasks = [];
-  $scope.displayNode = false;
-  $scope.sortType = 'Status';
-  $scope.sortReverse = false;
-
-  $scope.order = function (sortType) {
-    $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
-    $scope.sortType = sortType;
-  };
-
-  $scope.renameService = function renameService(service) {
-    $('#loadServicesSpinner').show();
-    var serviceName = service.Name;
-    var config = ServiceHelper.serviceToConfig(service.Model);
-    config.Name = service.newServiceName;
-    Service.update({ id: service.Id, version: service.Version }, config, function (data) {
-      $('#loadServicesSpinner').hide();
-      Messages.send("Service successfully renamed", "New name: " + service.newServiceName);
-      $state.go('service', {id: service.Id}, {reload: true});
-    }, function (e) {
-      $('#loadServicesSpinner').hide();
-      service.EditName = false;
-      service.Name = serviceName;
-      Messages.error("Failure", e, "Unable to rename service");
-    });
-  };
-
-  $scope.scaleService = function scaleService(service) {
-    $('#loadServicesSpinner').show();
-    var config = ServiceHelper.serviceToConfig(service.Model);
-    config.Mode.Replicated.Replicas = service.Replicas;
-    Service.update({ id: service.Id, version: service.Version }, config, function (data) {
-      $('#loadServicesSpinner').hide();
-      Messages.send("Service successfully scaled", "New replica count: " + service.Replicas);
-      $state.go('service', {id: service.Id}, {reload: true});
-    }, function (e) {
-      $('#loadServicesSpinner').hide();
-      service.Scale = false;
-      service.Replicas = service.ReplicaCount;
-      Messages.error("Failure", e, "Unable to scale service");
-    });
-  };
-
-  $scope.removeService = function removeService() {
-    $('#loadingViewSpinner').show();
-    Service.remove({id: $stateParams.id}, function (d) {
-      if (d.message) {
-        $('#loadingViewSpinner').hide();
-        Messages.send("Error", {}, d.message);
-      } else {
-        $('#loadingViewSpinner').hide();
-        Messages.send("Service removed", $stateParams.id);
-        $state.go('services', {});
-      }
-    }, function (e) {
-      $('#loadingViewSpinner').hide();
-      Messages.error("Failure", e, "Unable to remove service");
-    });
-  };
-
-  function fetchServiceDetails() {
-    $('#loadingViewSpinner').show();
-    Service.get({id: $stateParams.id}, function (d) {
-      var service = new ServiceViewModel(d);
-      service.newServiceName = service.Name;
-      $scope.service = service;
-      Task.query({filters: {service: [service.Name]}}, function (tasks) {
-        Node.query({}, function (nodes) {
-          $scope.displayNode = true;
-          $scope.tasks = tasks.map(function (task) {
-            return new TaskViewModel(task, nodes);
-          });
-          $('#loadingViewSpinner').hide();
-        }, function (e) {
-          $('#loadingViewSpinner').hide();
-          $scope.tasks = tasks.map(function (task) {
-            return new TaskViewModel(task, null);
-          });
-          Messages.error("Failure", e, "Unable to retrieve node information");
-        });
-      }, function (e) {
-        $('#loadingViewSpinner').hide();
-        Messages.error("Failure", e, "Unable to retrieve tasks associated to the service");
-      });
-    }, function (e) {
-      $('#loadingViewSpinner').hide();
-      Messages.error("Failure", e, "Unable to retrieve service details");
-    });
-  }
-
-  fetchServiceDetails();
-}]);

app/components/services/services.html

@@ -1,78 +0,0 @@
-<rd-header>
-  <rd-header-title title="Service list">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="services" ui-sref-opts="{reload: true}">
-      <i class="fa fa-refresh" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Services</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-list-alt" title="Services">
-        <div class="pull-right">
-          <i id="loadServicesSpinner" class="fa fa-cog fa-2x fa-spin" style="margin-top: 5px;"></i>
-        </div>
-      </rd-widget-header>
-      <rd-widget-taskbar classes="col-lg-12 col-md-12 col-xs-12">
-        <div class="pull-left">
-          <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash btn-ico" aria-hidden="true"></i>Remove</button>
-          <a class="btn btn-default btn-responsive" type="button" ui-sref="actions.create.service">Add service</a>
-        </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 table-hover">
-            <thead>
-              <th></th>
-              <th>
-                <a ui-sref="services" ng-click="order('Name')">
-                  Name
-                  <span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
-                </a>
-              </th>
-              <th>
-                <a ui-sref="services" ng-click="order('Image')">
-                  Image
-                  <span ng-show="sortType == 'Image' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'Image' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
-                </a>
-              </th>
-              <th>
-                <a ui-sref="services" ng-click="order('Mode')">
-                  Scheduling mode
-                  <span ng-show="sortType == 'Mode' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'Mode' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
-                </a>
-              </th>
-            </thead>
-            <tbody>
-              <tr ng-repeat="service in (state.filteredServices = ( services | filter:state.filter | orderBy:sortType:sortReverse))">
-                <td><input type="checkbox" ng-model="service.Checked" ng-change="selectItem(service)"/></td>
-                <td><a ui-sref="service({id: service.Id})">{{ service.Name }}</a></td>
-                <td>{{ service.Image }}</td>
-                <td>
-                  {{ service.Mode }}
-                  <span ng-if="service.Mode === 'replicated' && !service.Scale">
-                    <code data-toggle="tooltip" title="Replicas">{{ service.Replicas }}</code>
-                    <a class="interactive" ng-click="service.Scale = true; service.ReplicaCount = service.Replicas;"><i class="fa fa-arrows-v" aria-hidden="true"></i> Scale</a>
-                  </span>
-                  <span ng-if="service.Mode === 'replicated' && service.Scale">
-                    <input class="input-sm" type="number" ng-model="service.Replicas" />
-                    <a class="interactive" ng-click="service.Scale = false;"><i class="fa fa-times"></i></a>
-                    <a class="interactive" ng-click="scaleService(service)"><i class="fa fa-check-square-o"></i></a>
-                  </span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </rd-widget-body>
-    <rd-widget>
-  </div>
-</div>

app/components/services/servicesController.js

@@ -1,84 +0,0 @@
-angular.module('services', [])
-.controller('ServicesController', ['$scope', '$stateParams', '$state', 'Service', 'ServiceHelper', 'Messages',
-function ($scope, $stateParams, $state, Service, ServiceHelper, Messages) {
-
-  $scope.services = [];
-  $scope.state = {};
-  $scope.state.selectedItemCount = 0;
-  $scope.sortType = 'Name';
-  $scope.sortReverse = false;
-
-  $scope.scaleService = function scaleService(service) {
-    $('#loadServicesSpinner').show();
-    var config = ServiceHelper.serviceToConfig(service.Model);
-    config.Mode.Replicated.Replicas = service.Replicas;
-    Service.update({ id: service.Id, version: service.Version }, config, function (data) {
-      $('#loadServicesSpinner').hide();
-      Messages.send("Service successfully scaled", "New replica count: " + service.Replicas);
-      $state.go('services', {}, {reload: true});
-    }, function (e) {
-      $('#loadServicesSpinner').hide();
-      service.Scale = false;
-      service.Replicas = service.ReplicaCount;
-      Messages.error("Failure", e, "Unable to scale service");
-    });
-  };
-
-  $scope.order = function (sortType) {
-    $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
-    $scope.sortType = sortType;
-  };
-
-  $scope.selectItem = function (item) {
-    if (item.Checked) {
-      $scope.state.selectedItemCount++;
-    } else {
-      $scope.state.selectedItemCount--;
-    }
-  };
-
-  $scope.removeAction = function () {
-    $('#loadServicesSpinner').show();
-    var counter = 0;
-    var complete = function () {
-      counter = counter - 1;
-      if (counter === 0) {
-        $('#loadServicesSpinner').hide();
-      }
-    };
-    angular.forEach($scope.services, function (service) {
-      if (service.Checked) {
-        counter = counter + 1;
-        Service.remove({id: service.Id}, function (d) {
-          if (d.message) {
-            $('#loadServicesSpinner').hide();
-            Messages.error("Unable to remove service", {}, d[0].message);
-          } else {
-            Messages.send("Service deleted", service.Id);
-            var index = $scope.services.indexOf(service);
-            $scope.services.splice(index, 1);
-          }
-          complete();
-        }, function (e) {
-          Messages.error("Failure", e, 'Unable to remove service');
-          complete();
-        });
-      }
-    });
-  };
-
-  function fetchServices() {
-    $('#loadServicesSpinner').show();
-    Service.query({}, function (d) {
-      $scope.services = d.map(function (service) {
-        return new ServiceViewModel(service);
-      });
-      $('#loadServicesSpinner').hide();
-    }, function(e) {
-      $('#loadServicesSpinner').hide();
-      Messages.error("Failure", e, "Unable to retrieve services");
-    });
-  }
-
-  fetchServices();
-}]);

app/components/stats/stats.html

@@ -10,7 +10,7 @@
     <rd-widget>
       <rd-widget-body>
         <div class="widget-icon grey pull-left">
-          <i class="fa fa-server"></i>
+          <i class="fa fa-tasks"></i>
         </div>
         <div class="title">{{ container.Name|trimcontainername }}</div>
         <div class="comment">

app/components/stats/statsController.js

@@ -87,7 +87,7 @@ function (Settings, $scope, Messages, $timeout, Container, ContainerTop, $stateP
     },
     {
       scaleLabel: function (valueObj) {
-        return humansizeFilter(parseInt(valueObj.value, 10), 2);
+        return humansizeFilter(parseInt(valueObj.value, 10));
       },
       responsive: true
       //scaleOverride: true,
@@ -100,7 +100,7 @@ function (Settings, $scope, Messages, $timeout, Container, ContainerTop, $stateP
       datasets: [networkRxDataset, networkTxDataset]
     }, {
       scaleLabel: function (valueObj) {
-        return humansizeFilter(parseInt(valueObj.value, 10), 2);
+        return humansizeFilter(parseInt(valueObj.value, 10));
       },
       responsive: true
     });

app/components/swarm/swarm.html

@@ -16,14 +16,13 @@
           <tbody>
             <tr>
               <td>Nodes</td>
-              <td ng-if="!swarm_mode">{{ swarm.Nodes }}</td>
-              <td ng-if="swarm_mode">{{ info.Swarm.Nodes }}</td>
+              <td>{{ swarm.Nodes }}</td>
             </tr>
-            <tr ng-if="!swarm_mode">
+            <tr>
               <td>Images</td>
               <td>{{ info.Images }}</td>
             </tr>
-            <tr ng-if="!swarm_mode">
+            <tr>
               <td>Swarm version</td>
               <td>{{ docker.Version|swarmversion }}</td>
             </tr>
@@ -31,29 +30,27 @@
               <td>Docker API version</td>
               <td>{{ docker.ApiVersion }}</td>
             </tr>
-            <tr ng-if="!swarm_mode">
+            <tr>
               <td>Strategy</td>
               <td>{{ swarm.Strategy }}</td>
             </tr>
             <tr>
               <td>Total CPU</td>
-              <td ng-if="!swarm_mode">{{ info.NCPU }}</td>
-              <td ng-if="swarm_mode">{{ totalCPU }}</td>
+              <td>{{ info.NCPU }}</td>
             </tr>
             <tr>
               <td>Total memory</td>
-              <td ng-if="!swarm_mode">{{ info.MemTotal|humansize: 2 }}</td>
-              <td ng-if="swarm_mode">{{ totalMemory|humansize: 2 }}</td>
+              <td>{{ info.MemTotal|humansize }}</td>
             </tr>
-            <tr ng-if="!swarm_mode">
+            <tr>
               <td>Operating system</td>
               <td>{{ info.OperatingSystem }}</td>
             </tr>
-            <tr ng-if="!swarm_mode">
+            <tr>
               <td>Kernel version</td>
               <td>{{ info.KernelVersion }}</td>
             </tr>
-            <tr ng-if="!swarm_mode">
+            <tr>
               <td>Go version</td>
               <td>{{ docker.GoVersion }}</td>
             </tr>
@@ -63,9 +60,8 @@
     </rd-widget>
   </div>
 </div>
-
 <div class="row">
-  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" ng-if="!swarm_mode">
+  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
     <rd-widget>
       <rd-widget-header icon="fa-hdd-o" title="Node status"></rd-widget-header>
       <rd-widget-body classes="no-padding">
@@ -130,69 +126,4 @@
       </rd-widget-body>
     </rd-widget>
   </div>
-  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" ng-if="swarm_mode">
-    <rd-widget>
-      <rd-widget-header icon="fa-hdd-o" title="Node status"></rd-widget-header>
-      <rd-widget-body classes="no-padding">
-        <table class="table table-striped">
-          <thead>
-            <tr>
-              <th>
-                <a ui-sref="swarm" ng-click="order('Name')">
-                  Name
-                  <span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
-                </a>
-              </th>
-              <th>
-                <a ui-sref="swarm" ng-click="order('type')">
-                  Role
-                  <span ng-show="sortType == 'type' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'type' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
-                </a>
-              </th>
-              <th>
-                <a ui-sref="swarm" ng-click="order('cpu')">
-                  CPU
-                  <span ng-show="sortType == 'cpu' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'cpu' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
-                </a>
-              </th>
-              <th>
-                <a ui-sref="swarm" ng-click="order('memory')">
-                  Memory
-                  <span ng-show="sortType == 'memory' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'memory' && 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
-                  <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="node in (state.filteredNodes = (nodes | filter:state.filter | orderBy:sortType:sortReverse))">
-              <td>{{ node.Description.Hostname }}</td>
-              <td>{{ node.Spec.Role }}</td>
-              <td>{{ node.Description.Resources.NanoCPUs / 1000000000 }}</td>
-              <td>{{ node.Description.Resources.MemoryBytes|humansize }}</td>
-              <td>{{ node.Description.Engine.EngineVersion }}</td>
-              <td><span class="label label-{{ node.Status.State|nodestatusbadge }}">{{ node.Status.State }}</span></td>
-            </tr>
-          </tbody>
-        </table>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
 </div>

app/components/swarm/swarmController.js

@@ -1,82 +1,62 @@
 angular.module('swarm', [])
-.controller('SwarmController', ['$scope', 'Info', 'Version', 'Node',
-function ($scope, Info, Version, Node) {
+  .controller('SwarmController', ['$scope', 'Info', 'Version', 'Settings',
+    function ($scope, Info, Version, Settings) {
 
-  $scope.sortType = 'Name';
-  $scope.sortReverse = true;
-  $scope.info = {};
-  $scope.docker = {};
-  $scope.swarm = {};
-  $scope.swarm_mode = false;
-  $scope.totalCPU = 0;
-  $scope.totalMemory = 0;
+      $scope.sortType = 'Name';
+      $scope.sortReverse = true;
+      $scope.info = {};
+      $scope.docker = {};
+      $scope.swarm = {};
 
-  $scope.order = function(sortType) {
-    $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
-    $scope.sortType = sortType;
-  };
+      $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;
-    if (!_.startsWith(d.ServerVersion, 'swarm')) {
-      $scope.swarm_mode = true;
-      Node.query({}, function(d) {
-        $scope.nodes = d;
-        var CPU = 0, memory = 0;
-        angular.forEach(d, function(node) {
-          CPU += node.Description.Resources.NanoCPUs;
-          memory += node.Description.Resources.MemoryBytes;
-        });
-        $scope.totalCPU = CPU / 1000000000;
-        $scope.totalMemory = memory;
+      Version.get({}, function (d) {
+        $scope.docker = d;
+      });
+      Info.get({}, function (d) {
+        $scope.info = d;
+        extractSwarmInfo(d);
       });
-    } else {
-      extractSwarmInfo(d);
-    }
-  });
 
-  function extractSwarmInfo(info) {
-    // Swarm info is available in SystemStatus object
-    var systemStatus = info.SystemStatus;
-    // Swarm strategy
-    $scope.swarm[systemStatus[1][0]] = systemStatus[1][1];
-    // Swarm filters
-    $scope.swarm[systemStatus[2][0]] = systemStatus[2][1];
-    // Swarm node count
-    var nodes = systemStatus[0][1] === 'primary' ? systemStatus[3][1] : systemStatus[4][1];
-    var node_count = parseInt(nodes, 10);
-    $scope.swarm[systemStatus[3][0]] = node_count;
+      function extractSwarmInfo(info) {
+        // Swarm info is available in SystemStatus object
+        var systemStatus = info.SystemStatus;
+        // Swarm strategy
+        $scope.swarm[systemStatus[1][0]] = systemStatus[1][1];
+        // Swarm filters
+        $scope.swarm[systemStatus[2][0]] = systemStatus[2][1];
+        // Swarm node count
+        var node_count = parseInt(systemStatus[3][1], 10);
+        $scope.swarm[systemStatus[3][0]] = node_count;
 
-    $scope.swarm.Status = [];
-    extractNodesInfo(systemStatus, node_count);
-  }
+        $scope.swarm.Status = [];
+        extractNodesInfo(systemStatus, node_count);
+      }
 
-  function extractNodesInfo(info, node_count) {
-    // First information for node1 available at element #4 of SystemStatus if connected to a primary
-    // If connected to a replica, information for node1 is available at element #5
-    // The next 10 elements are information related to the node
-    var node_offset = info[0][1] === 'primary' ? 4 : 5;
-    for (i = 0; i < node_count; i++) {
-      extractNodeInfo(info, node_offset);
-      node_offset += 9;
-    }
-  }
+      function extractNodesInfo(info, node_count) {
+        // First information for node1 available at element #4 of SystemStatus
+        // The next 10 elements are information related to the node
+        var node_offset = 4;
+        for (i = 0; i < node_count; i++) {
+          extractNodeInfo(info, node_offset);
+          node_offset += 9;
+        }
+      }
 
-  function extractNodeInfo(info, offset) {
-    var node = {};
-    node.name = info[offset][0];
-    node.ip = info[offset][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].split('/')[1];
-    node.memory = info[offset + 5][1].split('/')[1];
-    node.labels = info[offset + 6][1];
-    node.version = info[offset + 8][1];
-    $scope.swarm.Status.push(node);
-  }
-}]);
+      function extractNodeInfo(info, offset) {
+        var node = {};
+        node.name = info[offset][0];
+        node.ip = info[offset][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].split('/')[1];
+        node.memory = info[offset + 5][1].split('/')[1];
+        node.labels = info[offset + 6][1];
+        node.version = info[offset + 8][1];
+        $scope.swarm.Status.push(node);
+      }
+    }]);

app/components/task/task.html

@@ -1,50 +0,0 @@
-<rd-header>
-  <rd-header-title title="Task details">
-    <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
-  </rd-header-title>
-  <rd-header-content>
-    Services > <a ui-sref="service({id: task.ServiceID})">{{ serviceName }}</a> > {{ task.ID }}
-  </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-tasks" title="Task status"></rd-widget-header>
-      <rd-widget-body classes="no-padding">
-        <table class="table">
-          <tbody>
-            <tr>
-              <td>ID</td>
-              <td>{{ task.ID }}</td>
-            </tr>
-            <tr>
-              <td>State</td>
-              <td><span class="label label-{{ task.Status.State|taskstatusbadge }}">{{ task.Status.State }}</span></td>
-            </tr>
-            <tr ng-if="task.Status.Err">
-              <td>Error message</td>
-              <td><code>{{ task.Status.Err }}</code></td>
-            </tr>
-            <tr>
-              <td>Image</td>
-              <td>{{ task.Spec.ContainerSpec.Image }}</td>
-            </tr>
-            <tr>
-              <td>Slot</td>
-              <td>{{ task.Slot }}</td>
-            </tr>
-            <tr>
-              <td>Created</td>
-              <td>{{ task.CreatedAt|getisodate }}</td>
-            </tr>
-            <tr ng-if="task.Status.ContainerStatus.ContainerID">
-              <td>Container ID</td>
-              <td>{{ task.Status.ContainerStatus.ContainerID }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>

app/components/task/taskController.js

@@ -1,29 +0,0 @@
-angular.module('task', [])
-.controller('TaskController', ['$scope', '$stateParams', '$state', 'Task', 'Service', 'Messages',
-function ($scope, $stateParams, $state, Task, Service, Messages) {
-
-  $scope.task = {};
-  $scope.serviceName = 'service';
-  $scope.isTaskRunning = false;
-
-  function fetchTaskDetails() {
-    $('#loadingViewSpinner').show();
-    Task.get({id: $stateParams.id}, function (d) {
-      $scope.task = d;
-      fetchAssociatedServiceDetails(d.ServiceID);
-      $('#loadingViewSpinner').hide();
-    }, function (e) {
-      Messages.error("Failure", e, "Unable to retrieve task details");
-    });
-  }
-
-  function fetchAssociatedServiceDetails(serviceId) {
-    Service.get({id: serviceId}, function (d) {
-      $scope.serviceName = d.Spec.Name;
-    }, function (e) {
-      Messages.error("Failure", e, "Unable to retrieve associated service details");
-    });
-  }
-
-  fetchTaskDetails();
-}]);

app/components/templates/templates.html

@@ -7,24 +7,38 @@
   <rd-header-content>Templates</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-rocket" title="Available templates">
+        <div class="pull-right">
+          <i id="loadTemplatesSpinner" class="fa fa-cog fa-2x fa-spin" style="margin-top: 5px;"></i>
+        </div>
+      </rd-widget-header>
+      <rd-widget-body classes="padding">
+        <div class="template-list">
+          <div ng-repeat="tpl in templates" class="container-template hvr-grow" id="template_{{ $index }}" ng-click="selectTemplate($index)">
+            <img class="logo" ng-src="{{ tpl.logo }}" />
+            <div class="title">{{ tpl.title }}</div>
+            <div class="description">{{ tpl.description }}</div>
+          </div>
+        </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
 <div class="row" ng-if="selectedTemplate">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
-      <rd-widget-custom-header icon="selectedTemplate.logo" title="selectedTemplate.image">
-      </rd-widget-custom-header>
+      <rd-widget-header icon="fa-cogs" title="Configuration"></rd-widget-header>
       <rd-widget-body classes="padding">
         <form class="form-horizontal">
-          <div class="form-group" ng-if="globalNetworkCount === 0 && !swarm_mode">
+          <div class="form-group" ng-if="globalNetworkCount === 0">
             <div class="col-sm-12">
               <span class="small text-muted">When using Swarm, we recommend deploying containers in a shared network. Looks like you don't have any shared network, head over the <a ui-sref="networks">networks view</a> to create one.</span>
             </div>
           </div>
-          <div class="form-group" ng-if="swarm_mode">
-            <div class="col-sm-12">
-              <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
-              <span class="small text-muted">App templates cannot be used with swarm-mode at the moment. You can still use them to quickly deploy containers to the Docker host.</span>
-            </div>
-          </div>
           <!-- name-and-network-inputs -->
           <div class="form-group">
             <label for="image_registry" class="col-sm-2 control-label text-left">Name</label>
@@ -42,21 +56,15 @@
           <div ng-repeat="var in selectedTemplate.env" ng-if="!var.set" class="form-group">
             <label for="field_{{ $index }}" class="col-sm-2 control-label text-left">{{ var.label }}</label>
             <div class="col-sm-10">
-              <select ng-if="(!swarm || swarm && swarm_mode) && var.type === 'container'" ng-options="container|containername for container in runningContainers" class="selectpicker form-control" ng-model="var.value">
+              <select ng-if="!swarm && var.type === 'container'" ng-options="container|containername for container in runningContainers" class="selectpicker form-control" ng-model="var.value">
                 <option selected disabled hidden value="">Select a container</option>
               </select>
-              <select ng-if="swarm && !swarm_mode && var.type === 'container'" ng-options="container|swarmcontainername for container in runningContainers" class="selectpicker form-control" ng-model="var.value">
+              <select ng-if="swarm && var.type === 'container'" ng-options="container|swarmcontainername for container in runningContainers" class="selectpicker form-control" ng-model="var.value">
                 <option selected disabled hidden value="">Select a container</option>
               </select>
               <input ng-if="!var.type || !var.type === 'container'" type="text" class="form-control" ng-model="var.value" id="field_{{ $index }}">
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-12">
-              <button type="button" class="btn btn-default btn-sm" ng-disabled="!formValues.network" ng-click="createTemplate()">Create</button>
-              <i id="createContainerSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
-            </div>
-          </div>
         </form>
       </rd-widget-body>
     </rd-widget>
@@ -64,29 +72,10 @@
 </div>
 
 <div class="row" ng-if="selectedTemplate">
-
-</div>
-
-<div class="row">
-  <div class="col-lg-12 col-md-12 col-xs-12">
-    <rd-widget>
-      <rd-widget-header icon="fa-rocket" title="Available templates">
-        <div class="pull-right">
-          <i id="loadTemplatesSpinner" class="fa fa-cog fa-2x fa-spin" style="margin-top: 5px;"></i>
-        </div>
-      </rd-widget-header>
-      <rd-widget-body classes="padding">
-        <div class="template-list">
-          <div ng-repeat="tpl in templates" class="container-template hvr-grow" id="template_{{ $index }}" ng-click="selectTemplate($index)">
-            <img class="logo" ng-src="{{ tpl.logo }}" />
-            <div class="title">{{ tpl.title }}</div>
-            <div class="description">{{ tpl.description }}</div>
-          </div>
-          <div ng-if="templates.length == 0" class="text-center text-muted">
-            No templates available.
-          </div>
-        </div>
-      </rd-widget-body>
-    </rd-widget>
+  <div class="col-lg-12 col-md-12 col-xs-12" style="text-align: center;">
+    <div>
+      <i id="createContainerSpinner" class="fa fa-cog fa-3x fa-spin" style="margin-bottom: 5px; display: none;"></i>
+    </div>
+    <button type="button" class="btn btn-default btn-lg" ng-disabled="!formValues.network" ng-click="createTemplate()">Create</button>
   </div>
 </div>

app/components/templates/templatesController.js

@@ -1,13 +1,12 @@
 angular.module('templates', [])
-.controller('TemplatesController', ['$scope', '$q', '$state', '$filter', 'Config', 'Info', 'Container', 'ContainerHelper', 'Image', 'Volume', 'Network', 'Templates', 'Messages',
-function ($scope, $q, $state, $filter, Config, Info, Container, ContainerHelper, Image, Volume, Network, Templates, Messages) {
+.controller('TemplatesController', ['$scope', '$q', '$state', '$filter', 'Config', 'Container', 'ContainerHelper', 'Image', 'Volume', 'Network', 'Templates', 'Messages',
+function ($scope, $q, $state, $filter, Config, Container, ContainerHelper, Image, Volume, Network, Templates, Messages) {
   $scope.templates = [];
   $scope.selectedTemplate = null;
   $scope.formValues = {
     network: "",
     name: ""
   };
-  $scope.templates = [];
 
   var selectedItem = -1;
 
@@ -128,6 +127,19 @@ function ($scope, $q, $state, $filter, Config, Info, Container, ContainerHelper,
     return volumeQueries;
   }
 
+  function generateUUID(){
+    var d = moment().millisecond();
+    if(window.performance && typeof window.performance.now === "function"){
+      d += performance.now(); //use high-precision timer if available
+    }
+    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = (d + Math.random()*16)%16 | 0;
+      d = Math.floor(d/16);
+      return (c==='x' ? r : (r&0x3|0x8)).toString(16);
+    });
+    return uuid;
+  }
+
   $scope.createTemplate = function() {
     $('#createContainerSpinner').show();
     var template = $scope.selectedTemplate;
@@ -166,11 +178,6 @@ function ($scope, $q, $state, $filter, Config, Info, Container, ContainerHelper,
 
   Config.$promise.then(function (c) {
     $scope.swarm = c.swarm;
-    Info.get({}, function(info) {
-      if ($scope.swarm && !_.startsWith(info.ServerVersion, 'swarm')) {
-        $scope.swarm_mode = true;
-      }
-    });
     var containersToHideLabels = c.hiddenLabels;
     Network.query({}, function (d) {
       var networks = d;

app/components/volumes/volumes.html

@@ -7,6 +7,40 @@
   <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">
@@ -16,8 +50,7 @@
     </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"><i class="fa fa-trash btn-ico" aria-hidden="true"></i>Remove</button>
-        <a class="btn btn-default" type="button" ui-sref="actions.create.volume">Add volume</a>
+        <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" />
@@ -43,13 +76,6 @@
                   <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>
@@ -57,14 +83,10 @@
               <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>
-            <tr ng-if="volumes.length == 0">
-              <td colspan="4" class="text-center text-muted">No volumes available.</td>
             </tr>
           </tbody>
         </table>
       </div>
     </rd-widget-body>
-    <rd-widget>
-    </div>
+  <rd-widget>
+</div>

app/components/volumes/volumesController.js

@@ -3,9 +3,8 @@ angular.module('volumes', [])
 function ($scope, $state, Volume, Messages) {
   $scope.state = {};
   $scope.state.selectedItemCount = 0;
-  $scope.sortType = 'Name';
+  $scope.sortType = 'Driver';
   $scope.sortReverse = true;
-  $scope.volumes = [];
 
   $scope.config = {
     Name: ''
@@ -24,6 +23,32 @@ function ($scope, $state, Volume, Messages) {
     }
   };
 
+  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.message) {
+        $('#createVolumeSpinner').hide();
+        Messages.error('Unable to create volume', {}, d.message);
+      } else {
+        Messages.send("Volume created", d.Name);
+        $('#createVolumeSpinner').hide();
+        $state.go('volumes', {}, {reload: true});
+      }
+    }, function (e) {
+      $('#createVolumeSpinner').hide();
+      Messages.error("Failure", e, 'Unable to create volume');
+    });
+  };
+
   $scope.removeAction = function () {
     $('#loadVolumesSpinner').show();
     var counter = 0;
@@ -37,13 +62,9 @@ function ($scope, $state, Volume, Messages) {
       if (volume.Checked) {
         counter = counter + 1;
         Volume.remove({name: volume.Name}, function (d) {
-          if (d.message) {
-            Messages.error("Unable to remove volume", {}, d.message);
-          } else {
-            Messages.send("Volume deleted", volume.Name);
-            var index = $scope.volumes.indexOf(volume);
-            $scope.volumes.splice(index, 1);
-          }
+          Messages.send("Volume deleted", volume.Name);
+          var index = $scope.volumes.indexOf(volume);
+          $scope.volumes.splice(index, 1);
           complete();
         }, function (e) {
           Messages.error("Failure", e, "Unable to remove volume");
@@ -56,7 +77,7 @@ function ($scope, $state, Volume, Messages) {
   function fetchVolumes() {
     $('#loadVolumesSpinner').show();
     Volume.query({}, function (d) {
-      $scope.volumes = d.Volumes;
+      $scope.volumes = _.uniqBy(d.Volumes, 'Name');
       $('#loadVolumesSpinner').hide();
     }, function (e) {
       $('#loadVolumesSpinner').hide();

app/directives/widget-custom-header.js

@@ -1,15 +0,0 @@
-angular
-.module('portainer')
-.directive('rdWidgetCustomHeader', function rdWidgetCustomHeader() {
-  var directive = {
-    requires: '^rdWidget',
-    scope: {
-      title: '=',
-      icon: '='
-    },
-    transclude: true,
-    template: '<div class="widget-header"><div class="row"><span class="pull-left"><img class="custom-header-ico" ng-src="{{icon}}"></img> <span class="small text-muted"> {{title}} </span> </span><span class="pull-right col-xs-6 col-sm-4" ng-transclude></span></div></div>',
-    restrict: 'E'
-  };
-  return directive;
-});

app/shared/filters.js

@@ -18,24 +18,6 @@ angular.module('portainer.filters', [])
     }
   };
 })
-.filter('taskstatusbadge', function () {
-  'use strict';
-  return function (text) {
-    var status = _.toLower(text);
-    if (status.indexOf('new') !== -1 || status.indexOf('allocated') !== -1 ||
-      status.indexOf('assigned') !== -1 || status.indexOf('accepted') !== -1) {
-      return 'info';
-    } else if (status.indexOf('pending') !== -1) {
-      return 'warning';
-    } else if (status.indexOf('shutdown') !== -1 || status.indexOf('failed') !== -1 ||
-      status.indexOf('rejected') !== -1) {
-      return 'danger';
-    } else if (status.indexOf('complete') !== -1) {
-      return 'primary';
-    }
-    return 'success';
-  };
-})
 .filter('containerstatusbadge', function () {
   'use strict';
   return function (text) {
@@ -123,13 +105,15 @@ angular.module('portainer.filters', [])
 })
 .filter('humansize', function () {
   'use strict';
-  return function (bytes, round) {
-    if (!round) {
-      round = 1;
-    }
-    if (bytes || bytes === 0) {
-      return filesize(bytes, {base: 10, round: round});
+  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 () {
@@ -207,10 +191,4 @@ angular.module('portainer.filters', [])
   return function (obj) {
     return _.isEmpty(obj);
   };
-})
-.filter('ipaddress', function () {
-  'use strict';
-  return function (ip) {
-    return ip.slice(0, ip.indexOf('/'));
-  };
 });

app/shared/helpers.js

@@ -34,18 +34,4 @@ angular.module('portainer.helpers', [])
       });
     }
   };
-}])
-.factory('ServiceHelper', [function ServiceHelperFactory() {
-  'use strict';
-  return {
-    serviceToConfig: function(service) {
-      return {
-        Name: service.Spec.Name,
-        TaskTemplate: service.Spec.TaskTemplate,
-        Mode: service.Spec.Mode,
-        Networks: service.Spec.Networks,
-        EndpointSpec: service.Spec.EndpointSpec
-      };
-    }
-  };
 }]);

app/shared/responseHandlers.js

@@ -50,8 +50,8 @@ function genericHandler(data) {
 // This handler returns the original array on success or a newly created array containing
 // only one JSON object with the field message filled with the error message on failure.
 function deleteImageHandler(data) {
-  // A string is returned on failure (Docker < 1.12)
   var response = [];
+  // A string is returned on failure (Docker < 1.12)
   if (!isJSON(data)) {
     response.push({message: data});
   }

app/shared/services.js

@@ -37,25 +37,6 @@ angular.module('portainer.services', ['ngResource', 'ngSanitize'])
             }
         });
     }])
-    .factory('Service', ['$resource', 'Settings', function ServiceFactory($resource, Settings) {
-      'use strict';
-      // https://docs.docker.com/engine/reference/api/docker_remote_api_<%= remoteApiVersion %>/#/3-9-services
-      return $resource(Settings.url + '/services/:id/:action', {}, {
-        get: { method: 'GET', params: {id: '@id'} },
-        query: { method: 'GET', isArray: true },
-        create: { method: 'POST', params: {action: 'create'} },
-        update: { method: 'POST', params: {id: '@id', action: 'update', version: '@version'} },
-        remove: { method: 'DELETE', params: {id: '@id'} }
-      });
-    }])
-    .factory('Task', ['$resource', 'Settings', function TaskFactory($resource, Settings) {
-      'use strict';
-      // https://docs.docker.com/engine/reference/api/docker_remote_api_<%= remoteApiVersion %>/#/3-9-services
-      return $resource(Settings.url + '/tasks/:id', {}, {
-        get: { method: 'GET', params: {id: '@id'} },
-        query: { method: 'GET', isArray: true, params: {filters: '@filters'} }
-      });
-    }])
     .factory('Exec', ['$resource', 'Settings', function ExecFactory($resource, Settings) {
       'use strict';
       // https://docs.docker.com/engine/reference/api/docker_remote_api_<%= remoteApiVersion %>/#/exec-resize
@@ -150,22 +131,6 @@ angular.module('portainer.services', ['ngResource', 'ngSanitize'])
             get: {method: 'GET'}
         });
     }])
-    .factory('Node', ['$resource', 'Settings', function NodeFactory($resource, Settings) {
-        'use strict';
-        // https://docs.docker.com/engine/reference/api/docker_remote_api_<%= remoteApiVersion %>/#/3-7-nodes
-        return $resource(Settings.url + '/nodes', {}, {
-          query: {
-            method: 'GET', isArray: true
-          }
-        });
-    }])
-    .factory('Swarm', ['$resource', 'Settings', function SwarmFactory($resource, Settings) {
-        'use strict';
-        // https://docs.docker.com/engine/reference/api/docker_remote_api_<%= remoteApiVersion %>/#/3-8-swarm
-        return $resource(Settings.url + '/swarm', {}, {
-            get: {method: 'GET'}
-        });
-    }])
     .factory('Auth', ['$resource', 'Settings', function AuthFactory($resource, Settings) {
         'use strict';
         // http://docs.docker.com/reference/api/docker_remote_api_<%= remoteApiVersion %>/#check-auth-configuration
@@ -200,9 +165,7 @@ angular.module('portainer.services', ['ngResource', 'ngSanitize'])
             query: {method: 'GET'},
             get: {method: 'GET'},
             create: {method: 'POST', params: {action: 'create'}, transformResponse: genericHandler},
-            remove: {
-              method: 'DELETE', transformResponse: genericHandler
-            }
+            remove: {method: 'DELETE'}
         });
     }])
     .factory('Config', ['$resource', 'CONFIG_ENDPOINT', function ConfigFactory($resource, CONFIG_ENDPOINT) {
@@ -244,13 +207,12 @@ angular.module('portainer.services', ['ngResource', 'ngSanitize'])
                 });
             },
             error: function (title, e, fallbackText) {
+                console.log(JSON.stringify(e, null, 4));
                 var msg = fallbackText;
                 if (e.data && e.data.message) {
                   msg = e.data.message;
                 } else if (e.message) {
                   msg = e.message;
-                } else if (e.data && e.data.length > 0 && e.data[0].message) {
-                  msg = e.data[0].message;
                 }
                 $.gritter.add({
                     title: $sanitize(title),

app/shared/viewmodel.js

@@ -8,47 +8,6 @@ function ImageViewModel(data) {
   this.VirtualSize = data.VirtualSize;
 }
 
-function TaskViewModel(data, node_data) {
-  this.Id = data.ID;
-  this.Created = data.CreatedAt;
-  this.Updated = data.UpdatedAt;
-  this.Slot = data.Slot;
-  this.Status = data.Status.State;
-  if (node_data) {
-    for (var i = 0; i < node_data.length; ++i) {
-      if (data.NodeID === node_data[i].ID) {
-        this.Node = node_data[i].Description.Hostname;
-      }
-    }
-  }
-}
-
-function ServiceViewModel(data) {
-  this.Model = data;
-  this.Id = data.ID;
-  this.Name = data.Spec.Name;
-  this.Image = data.Spec.TaskTemplate.ContainerSpec.Image;
-  this.Version = data.Version.Index;
-  if (data.Spec.Mode.Replicated) {
-    this.Mode = 'replicated' ;
-    this.Replicas = data.Spec.Mode.Replicated.Replicas;
-  } else {
-    this.Mode = 'global';
-  }
-  if (data.Spec.Labels) {
-    this.Labels = data.Spec.Labels;
-  }
-  if (data.Spec.TaskTemplate.ContainerSpec.Env) {
-    this.Env = data.Spec.TaskTemplate.ContainerSpec.Env;
-  }
-  if (data.Endpoint.Ports) {
-    this.Ports = data.Endpoint.Ports;
-  }
-  this.Checked = false;
-  this.Scale = false;
-  this.EditName = false;
-}
-
 function ContainerViewModel(data) {
   this.Id = data.Id;
   this.Status = data.Status;
@@ -105,9 +64,6 @@ function createEventDetails(event) {
       case 'unpause':
       details = 'Container ' + eventAttr.name + ' unpaused';
       break;
-      case 'attach':
-      details = 'Container ' + eventAttr.name + ' attached';
-      break;
       default:
       if (event.Action.indexOf('exec_create') === 0) {
         details = 'Exec instance created';
@@ -162,12 +118,6 @@ function createEventDetails(event) {
       case 'destroy':
       details = 'Volume ' + event.Actor.ID + ' deleted';
       break;
-      case 'mount':
-      details = 'Volume ' + event.Actor.ID + ' mounted';
-      break;
-      case 'unmount':
-      details = 'Volume ' + event.Actor.ID + ' unmounted';
-      break;
       default:
       details = 'Unsupported event';
     }

assets/css/app.css

@@ -216,11 +216,6 @@ input[type="radio"] {
   flex-wrap: wrap;
 }
 
-.custom-header-ico {
-  max-width: 16px;
-  max-height: 16px;
-}
-
 .container-template {
   font-size: 1em;
   width: 256px;
@@ -238,12 +233,12 @@ input[type="radio"] {
 }
 
 .container-template--selected {
-  background-color: #ececec;
+  background-color: #f6f6f6;
   color: #2d3e63;
 }
 
 .container-template:hover {
-  background-color: #ececec;
+  background-color: #f6f6f6;
   color: #2d3e63;
 }
 
@@ -260,19 +255,3 @@ input[type="radio"] {
   text-align: center;
   font-size: 0.8em;
 }
-
-.btn-responsive {
-  padding: 5px 10px;
-  font-size: 12px;
-  line-height: 1.5;
-  border-radius: 3px;
-}
-
-@media screen and (min-width: 1107px) {
-  .btn-responsive {
-    padding: 6px 12px;
-    font-size: 14px;
-    line-height: 1.42857143;
-    border-radius: 4px;
-  }
-}

bower.json

@@ -1,9 +1,9 @@
 {
   "name": "portainer",
-  "version": "1.9.2",
-  "homepage": "https://github.com/portainer/portainer",
+  "version": "1.8.0",
+  "homepage": "https://github.com/cloud-inovasi/portainer",
   "authors": [
-    "Anthony Lapenna <anthony.lapenna at gmail dot com>"
+    "Anthony Lapenna <anthony.lapenna@cloudinovasi.id>"
   ],
   "description": "A web interface for the Docker Remote API.",
   "keywords": [
@@ -34,14 +34,13 @@
     "angular-ui-select": "~0.17.1",
     "bootstrap": "~3.3.6",
     "font-awesome": "~4.6.3",
-    "filesize": "~3.3.0",
     "Hover": "2.0.2",
     "jquery": "1.11.1",
     "jquery.gritter": "1.7.4",
     "lodash": "4.12.0",
     "rdash-ui": "1.0.*",
     "moment": "~2.14.1",
-    "xterm.js": "~2.0.1"
+    "xterm.js": "~1.0.0"
   },
   "resolutions": {
     "angular": "1.5.5"

build.sh

@@ -1,16 +0,0 @@
-#!/usr/bin/env bash
-
-VERSION=$1
-
-if [[ $# -ne 1 ]] ; then
-  echo "Usage: $(basename $0) <VERSION>"
-  exit 1
-fi
-
-grunt release
-rm -rf /tmp/portainer-build && mkdir -pv /tmp/portainer-build/portainer
-mv dist/* /tmp/portainer-build/portainer
-cd /tmp/portainer-build
-tar cvpfz portainer-${VERSION}.tar.gz portainer
-
-exit 0

examples/nginx-basic-auth/Dockerfile

@@ -0,0 +1,4 @@
+FROM nginx:latest
+
+COPY default.conf /etc/nginx/conf.d/default.conf
+COPY users.htpasswd /etc/nginx/users.htpasswd

examples/nginx-basic-auth/default.conf

@@ -0,0 +1,17 @@
+upstream portainer {
+    server portainer:9000;
+}
+
+server {
+    listen       80;
+    server_name  localhost;
+
+    location / {
+        auth_basic "Docker UI";
+        auth_basic_user_file  /etc/nginx/users.htpasswd;
+
+        proxy_http_version 1.1;
+        proxy_set_header Connection "";
+        proxy_pass http://portainer;
+    }
+}

examples/nginx-basic-auth/docker-compose.yml

@@ -0,0 +1,10 @@
+portainer:
+  image: cloudinovasi/portainer
+  command: -e http://<SWARM_HOST>:<SWARM_PORT>
+
+nginx:
+  build: .
+  links:
+   - portainer
+  ports:
+   - 80:80

examples/nginx-basic-auth/users.htpasswd

@@ -0,0 +1 @@
+user:{PLAIN}password

gruntFile.js

@@ -71,9 +71,8 @@ module.exports = function (grunt) {
                 'bower_components/bootstrap/dist/js/bootstrap.min.js',
                 'bower_components/Chart.js/Chart.min.js',
                 'bower_components/lodash/dist/lodash.min.js',
-                'bower_components/filesize/lib/filesize.min.js',
                 'bower_components/moment/min/moment.min.js',
-                'bower_components/xterm.js/dist/xterm.js',
+                'bower_components/xterm.js/src/xterm.js',
                 'assets/js/jquery.gritter.js', // Using custom version to fix error in minified build due to "use strict"
                 'assets/js/legend.js' // Not a bower package
             ],
@@ -88,7 +87,7 @@ module.exports = function (grunt) {
                 'bower_components/font-awesome/css/font-awesome.min.css',
                 'bower_components/rdash-ui/dist/css/rdash.min.css',
                 'bower_components/angular-ui-select/dist/select.min.css',
-                'bower_components/xterm.js/dist/xterm.css',
+                'bower_components/xterm.js/src/xterm.css',
                 'bower_components/Hover/css/hover-min.css'
             ]
         },
@@ -275,7 +274,7 @@ module.exports = function (grunt) {
                 command: [
                     'docker stop portainer',
                     'docker rm portainer',
-                    'docker run -d -p 9000:9000 -v /tmp/portainer:/data --name portainer portainer -H tcp://10.0.7.10:2375 --swarm -d /data'
+                    'docker run -d -p 9000:9000 -v /tmp/portainer:/data --name portainer portainer -H tcp://10.0.7.10:4000 --swarm -d /data'
                 ].join(';')
             },
             runSsl: {

index.html

@@ -44,9 +44,6 @@
         <li class="sidebar-list">
           <a ui-sref="templates">App Templates <span class="menu-icon fa fa-rocket"></span></a>
         </li>
-        <li class="sidebar-list" ng-if="swarm_mode">
-          <a ui-sref="services">Services <span class="menu-icon fa fa-list-alt"></span></a>
-        </li>
         <li class="sidebar-list">
           <a ui-sref="containers">Containers <span class="menu-icon fa fa-server"></span></a>
         </li>
@@ -59,22 +56,19 @@
         <li class="sidebar-list">
           <a ui-sref="volumes">Volumes <span class="menu-icon fa fa-cubes"></span></a>
         </li>
-        <li class="sidebar-list" ng-if="!swarm">
+        <li class="sidebar-list" ng-if="!config.swarm">
           <a ui-sref="events">Events <span class="menu-icon fa fa-history"></span></a>
         </li>
-        <li class="sidebar-list" ng-if="(swarm && !swarm_mode) || (swarm_mode && swarm_manager)">
+        <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="!swarm">
+        <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">
-          <a href="https://github.com/portainer/portainer" target="_blank">
-            <i class="fa fa-github" aria-hidden="true"></i>
-            Portainer {{ uiVersion }}
-          </a>
+          <a href="https://github.com/cloud-inovasi/portainer" target="_blank">Portainer {{ uiVersion }}</a>
         </div>
       </div>
     </div>

package.json

@@ -1,19 +1,19 @@
 {
-  "author": "Portainer.io",
+  "author": "Cloud Inovasi",
   "name": "portainer",
-  "homepage": "http://portainer.io",
-  "version": "1.9.2",
+  "homepage": "https://github.com/cloud-inovasi/portainer",
+  "version": "1.8.0",
   "repository": {
     "type": "git",
-    "url": "git@github.com:portainer/portainer.git"
+    "url": "git@github.com:cloud-inovasi/portainer.git"
   },
   "bugs": {
-    "url": "https://github.com/portainer/portainer/issues"
+    "url": "https://github.com/cloud-inovasi/portainer/issues"
   },
   "licenses": [
     {
       "type": "MIT",
-      "url": "https://raw.githubusercontent.com/portainer/portainer/develop/LICENSE"
+      "url": "https://raw.githubusercontent.com/cloud-inovasi/portainer/develop/LICENSE"
     }
   ],
   "engines": {

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

@@ -82,6 +82,32 @@ describe('filters', function () {
         }));
     });
 
+    describe('humansize', function () {
+        it('should return n/a when size is zero', inject(function (humansizeFilter) {
+            expect(humansizeFilter(0)).toBe('n/a');
+        }));
+
+        it('should handle Bytes values', inject(function (humansizeFilter) {
+            expect(humansizeFilter(512)).toBe('512 Bytes');
+        }));
+
+        it('should handle KB values', inject(function (humansizeFilter) {
+            expect(humansizeFilter(5 * 1024)).toBe('5 KB');
+        }));
+
+        it('should handle MB values', inject(function (humansizeFilter) {
+            expect(humansizeFilter(5 * 1024 * 1024)).toBe('5.0 MB');
+        }));
+
+        it('should handle GB values', inject(function (humansizeFilter) {
+            expect(humansizeFilter(5 * 1024 * 1024 * 1024)).toBe('5.00 GB');
+        }));
+
+        it('should handle TB values', inject(function (humansizeFilter) {
+            expect(humansizeFilter(5 * 1024 * 1024 * 1024 * 1024)).toBe('5.000 TB');
+        }));
+    });
+
     describe('containername', function () {
         it('should strip the leading slash from container name', inject(function (containernameFilter) {
             var container = {