Merge branch 'release/1.2.0'

Release 1.1.0

.dockerignore

@@ -1,4 +1,2 @@
-node_modules
-bower_components
-.git
-Dockerfile
+*
+!dist

.gitignore

@@ -4,6 +4,7 @@ logs/*
 node_modules
 bower_components
 .idea
-dist
-dockerui
 *.iml
+dist
+dist/*
+ui-for-docker-checksum.txt

Dockerfile

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

LICENSE

@@ -1,7 +1,59 @@
-DockerUI: Copyright (c) 2013-2014 Michael Crosby. crosbymichael.com
+Cloudinovasi-ui: 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 in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
 
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 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.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+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 (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
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+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.
+
+rdash-angular: Copyright (c) [2014] [Elliot Hesp]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+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.

README.md

@@ -1,82 +1,82 @@
-## DockerUI
+# Cloudinovasi UI for Docker
 
-![Containers](/containers.png)
-DockerUI is a web interface for the Docker Remote API.  The goal is to provide a pure client side implementation so it is effortless to connect and manage docker.  This project is not complete and is still under heavy development.
+A fork of the amazing UI for Docker by Michael Crosby and Kevan Ahlquist (https://github.com/kevana/ui-for-docker) using the rdash-angular theme (https://github.com/rdash/rdash-angular).
 
-![Container](/container.png)
+![Dashboard](/dashboard.png)
 
+UI For Docker is a web interface for the Docker Remote API.  The goal is to provide a pure client side implementation so it is effortless to connect and manage docker.
 
-### Goals
+## Goals
 * Minimal dependencies - I really want to keep this project a pure html/js app.
 * Consistency - The web UI should be consistent with the commands found on the docker CLI.
 
-### Container Quickstart 
-1. Run: `docker run -d -p 9000:9000 --privileged -v /var/run/docker.sock:/var/run/docker.sock dockerui/dockerui`
+## Run
+
+### Quickstart
+
+1. Run: `docker run -d -p 9000:9000 --privileged -v /var/run/docker.sock:/var/run/docker.sock cloudinovasi/cloudinovasi-ui`
 
 2. Open your browser to `http://<dockerd host ip>:9000`
 
+Bind mounting the Unix socket into the UI For Docker container is much more secure than exposing your docker daemon over TCP.
 
-Bind mounting the Unix socket into the DockerUI container is much more secure than exposing your docker daemon over TCP. The `--privileged` flag is required for hosts using SELinux. You should still secure your DockerUI instance behind some type of auth. Directions for using Nginx auth are [here](https://github.com/crosbymichael/dockerui/wiki/Dockerui-with-Nginx-HTTP-Auth).
+The `--privileged` flag is required for hosts using SELinux.
 
 ### Specify socket to connect to Docker daemon
 
-By default DockerUI 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`.
+By default UI For Docker 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 `-e` flag to change this socket:
 
-    # Connect to a tcp socket:
-    $ docker run -d -p 9000:9000 --privileged dockerui/dockerui -e http://127.0.0.1:2375
+```
+# Connect to a tcp socket:
+$ docker run -d -p 9000:9000 cloudinovasi/cloudinovasi-ui -e http://127.0.0.1:2375
+```
 
-### Change address/port DockerUI is served on
-DockerUI listens on port 9000 by default. If you run DockerUI inside a container then you can bind the container's internal port to any external address and port:
+### Swarm support
 
-    # Expose DockerUI 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 dockerui/dockerui
+**Supported Swarm version: 1.2.3**
 
-### Check the [wiki](//github.com/crosbymichael/dockerui/wiki) for more info about using dockerui
+You can access a specific view for you Swarm cluster by defining the `--swarm` flag:
 
-### Stack
-* [Angular.js](https://github.com/angular/angular.js)
-* [Bootstrap](http://getbootstrap.com/)
-* [Gritter](https://github.com/jboesch/Gritter)
-* [Spin.js](https://github.com/fgnass/spin.js/)
-* [Golang](https://golang.org/)
-* [Vis.js](http://visjs.org/)
+```
+# Connect to a tcp socket and enable Swarm:
+$ docker run -d -p 9000:9000 cloudinovasi/cloudinovasi-ui -e http://<SWARM_HOST>:<SWARM_PORT> --swarm
+```
 
+*NOTE*: Due to Swarm not exposing information in a machine readable way, the app is bound to a specific version of Swarm at the moment.
 
-### Todo:
-* Full repository support
-* Search
-* Push files to a container
-* Unit tests
+### Change address/port UI For Docker is served on
+UI For Docker listens on port 9000 by default. If you run UI For Docker inside a container then you can bind the container's internal port to any external address and port:
 
+```
+# Expose UI For Docker on 10.20.30.1:80
+$ docker run -d -p 10.20.30.1:80:9000 --privileged -v /var/run/docker.sock:/var/run/docker.sock cloudinovasi/cloudinovasi-ui
+```
 
-### License - MIT
-The DockerUI code is licensed under the MIT license.
+### 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.
 
-**DockerUI:**
-Copyright (c) 2014 Michael Crosby. crosbymichael.com
+For example, take a container started with the label `owner=acme`:
 
-Permission is hereby granted, free of charge, to any person
-obtaining a copy of this software and associated documentation 
-files (the "Software"), to deal in the Software without 
-restriction, including without limitation the rights to use, copy, 
-modify, merge, publish, distribute, sublicense, and/or sell copies 
-of the Software, and to permit persons to whom the Software is 
-furnished to do so, subject to the following conditions:
+```
+$ docker run -d --label owner=acme nginx
+```
 
-The above copyright notice and this permission notice shall be 
-included in all copies or substantial portions of the Software.
+You can hide it in the view by starting the ui with:
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED,
-INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 
-IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
-HOLDERS BE LIABLE FOR ANY CLAIM, 
-DAMAGES OR OTHER 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.
+```
+$ docker run -d -p 9000:9000 --privileged -v /var/run/docker.sock:/var/run/docker.sock cloudinovasi/cloudinovasi-ui -l owner=acme
+```
+
+### Available options
+
+The following options are available for the `ui-for-docker` binary:
+
+* `--endpoint`, `-e`: Docker deamon endpoint (default: *"/var/run/docker.sock"*)
+* `--bind`, `-p`: Address and port to serve UI For Docker (default: *":9000"*)
+* `--data`, `-d`: Path to the data folder (default: *"."*)
+* `--assets`, `-a`: Path to the assets (default: *"."*)
+* `--swarm`, `-s`: Swarm cluster support (default: *false*)
+* `--hide-label`, `-l`: Hide containers with a specific label in the UI

app/app.js

@@ -1,52 +1,147 @@
-angular.module('dockerui', ['dockerui.templates', 'ngRoute', 'dockerui.services', 'dockerui.filters', 'masthead', 'footer', 'dashboard', 'container', 'containers', 'containersNetwork', 'images', 'image', 'pullImage', 'startContainer', 'sidebar', 'info', 'builder', 'containerLogs', 'containerTop', 'events', 'stats'])
-    .config(['$routeProvider', function ($routeProvider) {
-        'use strict';
-        $routeProvider.when('/', {
-            templateUrl: 'app/components/dashboard/dashboard.html',
-            controller: 'DashboardController'
-        });
-        $routeProvider.when('/containers/', {
-            templateUrl: 'app/components/containers/containers.html',
-            controller: 'ContainersController'
-        });
-        $routeProvider.when('/containers/:id/', {
-            templateUrl: 'app/components/container/container.html',
-            controller: 'ContainerController'
-        });
-        $routeProvider.when('/containers/:id/logs/', {
-            templateUrl: 'app/components/containerLogs/containerlogs.html',
-            controller: 'ContainerLogsController'
-        });
-        $routeProvider.when('/containers/:id/top', {
-            templateUrl: 'app/components/containerTop/containerTop.html',
-            controller: 'ContainerTopController'
-        });
-        $routeProvider.when('/containers/:id/stats', {
-            templateUrl: 'app/components/stats/stats.html',
-            controller: 'StatsController'
-        });
-        $routeProvider.when('/containers_network', {
-            templateUrl: 'app/components/containersNetwork/containersNetwork.html',
-            controller: 'ContainersNetworkController'
-        });
-        $routeProvider.when('/images/', {
-            templateUrl: 'app/components/images/images.html',
-            controller: 'ImagesController'
-        });
-        $routeProvider.when('/images/:id*/', {
-            templateUrl: 'app/components/image/image.html',
-            controller: 'ImageController'
-        });
-        $routeProvider.when('/info', {templateUrl: 'app/components/info/info.html', controller: 'InfoController'});
-        $routeProvider.when('/events', {
-            templateUrl: 'app/components/events/events.html',
-            controller: 'EventsController'
-        });
-        $routeProvider.otherwise({redirectTo: '/'});
-    }])
-    // This is your docker url that the api will use to make requests
-    // You need to set this to the api endpoint without the port i.e. http://192.168.1.9
-    .constant('DOCKER_ENDPOINT', 'dockerapi')
-    .constant('DOCKER_PORT', '') // Docker port, leave as an empty string if no port is requred.  If you have a port, prefix it with a ':' i.e. :4243
-    .constant('UI_VERSION', 'v0.8.0')
-    .constant('DOCKER_API_VERSION', 'v1.20');
+angular.module('uifordocker', [
+  'uifordocker.templates',
+  'ui.bootstrap',
+  'ui.router',
+  'ui.select',
+  'ngCookies',
+  'ngSanitize',
+  'dockerui.services',
+  'dockerui.filters',
+  'dashboard',
+  'container',
+  'containers',
+  'createContainer',
+  'docker',
+  'images',
+  'image',
+  'containerLogs',
+  'stats',
+  'swarm',
+  'network',
+  'networks',
+  'createNetwork',
+  'volumes',
+  'createVolume'])
+  .config(['$stateProvider', '$urlRouterProvider', '$httpProvider', function ($stateProvider, $urlRouterProvider, $httpProvider) {
+    'use strict';
+
+    $httpProvider.defaults.xsrfCookieName = 'csrfToken';
+    $httpProvider.defaults.xsrfHeaderName = 'X-CSRF-Token';
+
+    $urlRouterProvider.otherwise('/');
+
+    $stateProvider
+    .state('index', {
+      url: '/',
+      templateUrl: 'app/components/dashboard/dashboard.html',
+      controller: 'DashboardController'
+    })
+    .state('containers', {
+      url: '/containers/',
+      templateUrl: 'app/components/containers/containers.html',
+      controller: 'ContainersController'
+    })
+    .state('container', {
+      url: "^/containers/:id",
+      templateUrl: 'app/components/container/container.html',
+      controller: 'ContainerController'
+    })
+    .state('stats', {
+      url: "^/containers/:id/stats",
+      templateUrl: 'app/components/stats/stats.html',
+      controller: 'StatsController'
+    })
+    .state('logs', {
+      url: "^/containers/:id/logs",
+      templateUrl: 'app/components/containerLogs/containerlogs.html',
+      controller: 'ContainerLogsController'
+    })
+    .state('actions', {
+      abstract: true,
+      url: "/actions",
+      template: '<ui-view/>'
+    })
+    .state('actions.create', {
+      abstract: true,
+      url: "/create",
+      template: '<ui-view/>'
+    })
+    .state('actions.create.container', {
+      url: "/container",
+      templateUrl: 'app/components/createContainer/createcontainer.html',
+      controller: 'CreateContainerController'
+    })
+    .state('actions.create.volume', {
+      url: "/volume",
+      templateUrl: 'app/components/createVolume/createvolume.html',
+      controller: 'CreateVolumeController'
+    })
+    .state('actions.create.network', {
+      url: "/network",
+      templateUrl: 'app/components/createNetwork/createnetwork.html',
+      controller: 'CreateNetworkController'
+    })
+    .state('docker', {
+      url: '/docker/',
+      templateUrl: 'app/components/docker/docker.html',
+      controller: 'DockerController'
+    })
+    .state('images', {
+      url: '/images/',
+      templateUrl: 'app/components/images/images.html',
+      controller: 'ImagesController'
+    })
+    .state('image', {
+      url: '^/images/:id/',
+      templateUrl: 'app/components/image/image.html',
+      controller: 'ImageController'
+    })
+    .state('networks', {
+      url: '/networks/',
+      templateUrl: 'app/components/networks/networks.html',
+      controller: 'NetworksController'
+    })
+    .state('network', {
+      url: '^/networks/:id/',
+      templateUrl: 'app/components/network/network.html',
+      controller: 'NetworkController'
+    })
+    .state('volumes', {
+      url: '/volumes/',
+      templateUrl: 'app/components/volumes/volumes.html',
+      controller: 'VolumesController'
+    })
+    .state('swarm', {
+      url: '/swarm/',
+      templateUrl: 'app/components/swarm/swarm.html',
+      controller: 'SwarmController'
+    });
+
+    // The Docker API likes to return plaintext errors, this catches them and disp
+    $httpProvider.interceptors.push(function() {
+      return {
+        'response': function(response) {
+          if (typeof(response.data) === 'string' &&
+                  (response.data.startsWith('Conflict.') || response.data.startsWith('conflict:'))) {
+            $.gritter.add({
+              title: 'Error',
+              text: $('<div>').text(response.data).html(),
+              time: 10000
+            });
+          }
+          var csrfToken = response.headers('X-Csrf-Token');
+          if (csrfToken) {
+            document.cookie = 'csrfToken=' + csrfToken;
+          }
+          return response;
+        }
+      };
+    });
+  }])
+
+  // This is your docker url that the api will use to make requests
+  // You need to set this to the api endpoint without the port i.e. http://192.168.1.9
+  .constant('DOCKER_ENDPOINT', 'dockerapi')
+  .constant('DOCKER_PORT', '') // Docker port, leave as an empty string if no port is requred.  If you have a port, prefix it with a ':' i.e. :4243
+  .constant('CONFIG_ENDPOINT', '/config')
+  .constant('UI_VERSION', 'v1.2.0');

app/components/builder/builder.html

@@ -1,17 +0,0 @@
-<div id="build-modal" class="modal fade">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                <h3>Build Image</h3>
-            </div>
-            <div class="modal-body">
-                <div id="editor"></div>
-                <p>{{ messages }}</p>
-            </div>
-            <div class="modal-footer">
-                <a href="" class="btn btn-primary" ng-click="build()">Build</a>
-            </div>
-        </div>
-    </div>
-</div>

app/components/builder/builderController.js

@@ -1,5 +0,0 @@
-angular.module('builder', [])
-    .controller('BuilderController', ['$scope', 'Dockerfile', 'Messages',
-        function ($scope, Dockerfile, Messages) {
-            $scope.template = 'app/components/builder/builder.html';
-        }]);

app/components/container/container.html

@@ -1,196 +1,193 @@
-<div class="detail">
+<rd-header>
+  <rd-header-title title="Container details"></rd-header-title>
+  <rd-header-content>
+    Containers > <a ui-sref="container({id: container.Id})">{{ container.Name|trimcontainername }}</a>
+  </rd-header-content>
+</rd-header>
 
-    <div ng-if="!container.edit">
-        <h4>Container: {{ container.Name }}
-            <button class="btn btn-primary"
-                    ng-click="container.edit = true;">Rename
-            </button>
-        </h4>
-    </div>
-    <div ng-if="container.edit">
-        <h4>
-            Container:
-            <input type="text" ng-model="container.newContainerName">
-            <button class="btn btn-success"
-                    ng-click="renameContainer()">Save
-            </button>
-            <button class="btn btn-danger"
-                    ng-click="container.edit = false;">&times;</button>
-        </h4>
-    </div>
-
-    <div class="btn-group detail">
-        <button class="btn btn-success"
-                ng-click="start()"
-                ng-show="!container.State.Running">Start
-        </button>
-        <button class="btn btn-warning"
-                ng-click="stop()"
-                ng-show="container.State.Running && !container.State.Paused">Stop
-        </button>
-        <button class="btn btn-danger"
-                ng-click="kill()"
-                ng-show="container.State.Running && !container.State.Paused">Kill
-        </button>
-        <button class="btn btn-info"
-                ng-click="pause()"
-                ng-show="container.State.Running && !container.State.Paused">Pause
-        </button>
-        <button class="btn btn-success"
-                ng-click="unpause()"
-                ng-show="container.State.Running && container.State.Paused">Unpause
-        </button>
-        <button class="btn btn-success"
-                ng-click="restart()"
-                ng-show="container.State.Running && !container.State.Stopped">Restart
-        </button>
-        <button class="btn btn-primary"
-                ng-click="commit()"
-                ng-show="container.State.Running && !container.State.Paused">Commit
-        </button>
-    </div>
-
-    <table class="table table-striped">
-        <tbody>
-        <tr>
-            <td>Created:</td>
-            <td>{{ container.Created | date: 'medium' }}</td>
-        </tr>
-        <tr>
-            <td>Path:</td>
-            <td>{{ container.Path }}</td>
-        </tr>
-        <tr>
-            <td>Args:</td>
-            <td>
-                <pre>{{ container.Args.join(' ') || 'None' }}</pre>
-            </td>
-        </tr>
-        <tr>
-            <td>Exposed Ports:</td>
-            <td>
-                <ul>
-                    <li ng-repeat="(k, v) in container.Config.ExposedPorts">{{ k }}</li>
-                </ul>
-            </td>
-        </tr>
-        <tr>
-            <td>Environment:</td>
-            <td>
-                <ul>
-                    <li ng-repeat="k in container.Config.Env">{{ k }}</li>
-                </ul>
-            </td>
-        </tr>
-        <tr>
-            <td>Labels:</td>
-            <td>
-                <table role="table" class="table">
-                    <tr>
-                        <th>Key</th>
-                        <th>Value</th>
-                    </tr>
-                    <tr ng-repeat="(k, v) in container.Config.Labels">
-                        <td>{{ k }}</td>
-                        <td>{{ v }}</td>
-                    </tr>
-                </table>
-            </td>
-        </tr>
-
-        <tr>
-            <td>Publish All:</td>
-            <td>{{ container.HostConfig.PublishAllPorts }}</td>
-        </tr>
-        <tr>
-            <td>Ports:</td>
-            <td>
-                <ul style="display:inline-table">
-                    <li ng-repeat="(containerport, hostports) in container.HostConfig.PortBindings">
-                        {{ containerport }} => <span class="label label-default" ng-repeat="(k,v) in hostports">{{ v.HostIp }}:{{ v.HostPort }}</span>
-                    </li>
-                </ul>
-            </td>
-
-        </tr>
-        <tr>
-            <td>Hostname:</td>
-            <td>{{ container.Config.Hostname }}</td>
-        </tr>
-        <tr>
-            <td>IPAddress:</td>
-            <td>{{ container.NetworkSettings.IPAddress }}</td>
-        </tr>
-        <tr>
-            <td>Cmd:</td>
-            <td>{{ container.Config.Cmd }}</td>
-        </tr>
-        <tr>
-            <td>Entrypoint:</td>
-            <td>
-                <pre>{{ container.Config.Entrypoint.join(' ') }}</pre>
-            </td>
-        </tr>
-        <tr>
-            <td>Volumes:</td>
-            <td>{{ container.Volumes }}</td>
-        </tr>
-
-        <tr>
-            <td>SysInitpath:</td>
-            <td>{{ container.SysInitPath }}</td>
-        </tr>
-        <tr>
-            <td>Image:</td>
-            <td><a href="#/images/{{ container.Image }}/">{{ container.Image }}</a></td>
-        </tr>
-        <tr>
-            <td>State:</td>
-            <td>
-                <accordion close-others="true">
-                    <accordion-group heading="{{ container.State|getstatetext }}">
-                        <ul>
-                            <li ng-repeat="(key, val) in container.State">{{key}} : {{ val }}</li>
-                        </ul>
-                    </accordion-group>
-                </accordion>
-            </td>
-        </tr>
-        <tr>
-            <td>Logs:</td>
-            <td><a href="#/containers/{{ container.Id }}/logs">stdout/stderr</a></td>
-        </tr>
-        <tr>
-            <td>Stats:</td>
-            <td><a href="#/containers/{{ container.Id }}/stats">stats</a></td>
-        </tr>
-        <tr>
-            <td>Top:</td>
-            <td><a href="#/containers/{{ container.Id }}/top">Top</a></td>
-        </tr>
-        </tbody>
-    </table>
-
-    <div class="row-fluid">
-        <div class="span1">
-            Changes:
+<div class="row">
+  <div class="col-lg-6 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-body>
+        <div class="widget-icon grey pull-left">
+          <i class="fa fa-tasks"></i>
         </div>
-        <div class="span5">
-            <i class="icon-refresh" style="width:32px;height:32px;" ng-click="getChanges()"></i>
+        <div ng-if="!container.edit">
+          <div class="title">{{ container.Name|trimcontainername }}</div>
+          <div class="comment">
+            Name <a href="" ng-click="container.edit = true;"><i class="fa fa-edit"></i></a>
+          </div>
         </div>
-    </div>
-
-    <div class="well well-large">
-        <ul>
-            <li ng-repeat="change in changes | filter:hasContent">
-                <strong>{{ change.Path }}</strong> {{ change.Kind }}
-            </li>
-        </ul>
-    </div>
-
-    <hr/>
-
-    <div class="btn-remove">
-        <button class="btn btn-large btn-block btn-primary btn-danger" ng-click="remove()">Remove Container</button>
-    </div>
+        <div ng-if="container.edit">
+          <div class="title"><input type="text" class="containerNameInput" ng-model="container.newContainerName"></div>
+          <div class="comment">
+            Name
+            <a href="" ng-click="container.edit = false;"><i class="fa fa-times"></i></a>
+            <a href="" ng-click="renameContainer()"><i class="fa fa-check-square-o"></i></a>
+          </div>
+        </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+  <div class="col-lg-6 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-body>
+        <div ng-class="{true: 'widget-icon green pull-left', false: 'widget-icon red pull-left'}[container.State.Running]">
+          <i class="fa fa-heartbeat"></i>
+        </div>
+        <div class="title">{{ container.State|getstatetext }}</div>
+        <div class="comment">State</div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
 </div>
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-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-primary" ng-click="commit()">Commit</button>
+            <button class="btn btn-primary" ng-click="start()" ng-disabled="container.State.Running">Start</button>
+            <button class="btn btn-primary" ng-click="stop()" ng-disabled="!container.State.Running">Stop</button>
+            <button class="btn btn-primary" ng-click="kill()" ng-disabled="!container.State.Running">Kill</button>
+            <button class="btn btn-primary" ng-click="restart()">Restart</button>
+            <button class="btn btn-primary" ng-click="pause()" ng-disabled="!container.State.Running && !container.State.Paused">Pause</button>
+            <button class="btn btn-primary" ng-click="unpause()" ng-disabled="!container.State.Paused">Unpause</button>
+            <button class="btn btn-danger" ng-click="remove()" ng-disabled="container.State.Running">Remove</button>
+          </div>
+          <div class="btn-group" role="group" aria-label="...">
+            <a class="btn btn-default" type="button" ui-sref="stats({id: container.Id})">Stats</a>
+            <a class="btn btn-default" type="button" ui-sref="logs({id: container.Id})">Logs</a>
+          </div>
+        </div>
+        <div class="comment">
+          Actions
+        </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-9">
+    <rd-widget>
+      <rd-widget-header icon="fa-tasks" title="Container status"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table">
+          <tbody>
+            <tr>
+              <td>Created</td>
+              <td>{{ container.Created | date: 'medium' }}</td>
+            </tr>
+            <tr>
+              <td>Path</td>
+              <td>{{ container.Path }}</td>
+            </tr>
+            <tr>
+              <td>Args</td>
+              <td>{{ container.Args.join(' ') || 'None' }}</td>
+            </tr>
+            <tr>
+              <td>Exposed Ports</td>
+              <td>
+                <ul>
+                  <li ng-repeat="(k, v) in container.Config.ExposedPorts">{{ k }}</li>
+                </ul>
+              </td>
+            </tr>
+            <tr>
+              <td>Environment</td>
+              <td>
+                <ul>
+                  <li ng-repeat="k in container.Config.Env">{{ k }}</li>
+                </ul>
+              </td>
+            </tr>
+            <tr>
+              <td>Labels</td>
+              <td>
+                <table role="table" class="table">
+                  <tr ng-repeat="(k, v) in container.Config.Labels">
+                    <td>{{ k }}</td>
+                    <td>{{ v }}</td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
+            <tr>
+              <td>Publish all ports</td>
+              <td>{{ container.HostConfig.PublishAllPorts }}</td>
+            </tr>
+            <tr>
+              <td>Ports</td>
+              <td>
+                <ul>
+                  <li ng-repeat="(containerport, hostports) in container.NetworkSettings.Ports">
+                    {{ containerport }} =>
+                    <span class="label label-default" style="margin-right: 5px;" ng-repeat="(k,v) in hostports">{{ v.HostIp }}:{{ v.HostPort }}</span>
+                  </li>
+                </ul>
+              </td>
+            </tr>
+            <tr>
+              <td>Hostname</td>
+              <td>{{ container.Config.Hostname }}</td>
+            </tr>
+            <tr>
+              <td>IPAddress</td>
+              <td>{{ container.NetworkSettings.IPAddress }}</td>
+            </tr>
+            <tr>
+              <td>Cmd</td>
+              <td>{{ container.Config.Cmd }}</td>
+            </tr>
+            <tr>
+              <td>Entrypoint</td>
+              <td>{{ container.Config.Entrypoint.join(' ') }}</td>
+            </tr>
+            <tr>
+              <td>Bindings</td>
+              <td>
+                <ul>
+                  <li ng-repeat="b in container.HostConfig.Binds">{{ b }}</li>
+                </ul>
+              </td>
+            </tr>
+            <tr>
+              <td>Volumes</td>
+              <td>{{ container.Volumes }}</td>
+            </tr>
+
+            <tr>
+              <td>SysInitpath</td>
+              <td>{{ container.SysInitPath }}</td>
+            </tr>
+            <tr>
+              <td>Image</td>
+              <td><a ui-sref="image({id: container.Image})">{{ container.Image }}</a></td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+  <div class="col-lg-3">
+    <rd-widget>
+      <rd-widget-header icon="fa-tasks" title="Container state details"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table">
+          <tbody>
+            <tr ng-repeat="(key, val) in container.State">
+              <td>{{key}}</td>
+              <td>{{ val }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+<div>

app/components/container/containerController.js

@@ -1,143 +1,208 @@
 angular.module('container', [])
-    .controller('ContainerController', ['$scope', '$routeParams', '$location', 'Container', 'ContainerCommit', 'Messages', 'ViewSpinner',
-        function ($scope, $routeParams, $location, Container, ContainerCommit, Messages, ViewSpinner) {
-            $scope.changes = [];
-            $scope.edit = false;
+.controller('ContainerController', ['$scope', '$stateParams', '$state', '$filter', 'Container', 'ContainerCommit', 'Image', 'Messages', 'ViewSpinner', '$timeout',
+function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Image, Messages, ViewSpinner, $timeout) {
+  $scope.changes = [];
+  $scope.editEnv = false;
+  $scope.editPorts = false;
+  $scope.editBinds = false;
+  $scope.newCfg = {
+    Env: [],
+    Ports: {}
+  };
 
-            var update = function () {
-                ViewSpinner.spin();
-                Container.get({id: $routeParams.id}, function (d) {
-                    $scope.container = d;
-                    $scope.container.edit = false;
-                    $scope.container.newContainerName = d.Name;
-                    ViewSpinner.stop();
-                }, function (e) {
-                    if (e.status === 404) {
-                        $('.detail').hide();
-                        Messages.error("Not found", "Container not found.");
-                    } else {
-                        Messages.error("Failure", e.data);
-                    }
-                    ViewSpinner.stop();
-                });
-            };
+  var update = function () {
+    ViewSpinner.spin();
+    Container.get({id: $stateParams.id}, function (d) {
+      $scope.container = d;
+      $scope.container.edit = false;
+      $scope.container.newContainerName = $filter('trimcontainername')(d.Name);
 
-            $scope.start = function () {
-                ViewSpinner.spin();
-                Container.start({
-                    id: $scope.container.Id,
-                    HostConfig: $scope.container.HostConfig
-                }, function (d) {
-                    update();
-                    Messages.send("Container started", $routeParams.id);
-                }, function (e) {
-                    update();
-                    Messages.error("Failure", "Container failed to start." + e.data);
-                });
-            };
+      // fill up env
+      if (d.Config.Env) {
+        $scope.newCfg.Env = d.Config.Env.map(function (entry) {
+          return {name: entry.split('=')[0], value: entry.split('=')[1]};
+        });
+      }
 
-            $scope.stop = function () {
-                ViewSpinner.spin();
-                Container.stop({id: $routeParams.id}, function (d) {
-                    update();
-                    Messages.send("Container stopped", $routeParams.id);
-                }, function (e) {
-                    update();
-                    Messages.error("Failure", "Container failed to stop." + e.data);
-                });
-            };
+      // fill up ports
+      $scope.newCfg.Ports = {};
+      angular.forEach(d.Config.ExposedPorts, function(i, port) {
+        if (d.HostConfig.PortBindings && port in d.HostConfig.PortBindings) {
+          $scope.newCfg.Ports[port] = d.HostConfig.PortBindings[port];
+        }
+        else {
+          $scope.newCfg.Ports[port] = [];
+        }
+      });
 
-            $scope.kill = function () {
-                ViewSpinner.spin();
-                Container.kill({id: $routeParams.id}, function (d) {
-                    update();
-                    Messages.send("Container killed", $routeParams.id);
-                }, function (e) {
-                    update();
-                    Messages.error("Failure", "Container failed to die." + e.data);
-                });
-            };
+      // fill up bindings
+      $scope.newCfg.Binds = [];
+      var defaultBinds = {};
+      angular.forEach(d.Config.Volumes, function(value, vol) {
+        defaultBinds[vol] = { ContPath: vol, HostPath: '', ReadOnly: false, DefaultBind: true };
+      });
+      angular.forEach(d.HostConfig.Binds, function(binding, i) {
+        var mountpoint = binding.split(':')[0];
+        var vol = binding.split(':')[1] || '';
+        var ro = binding.split(':').length > 2 && binding.split(':')[2] === 'ro';
+        var defaultBind = false;
+        if (vol === '') {
+          vol = mountpoint;
+          mountpoint = '';
+        }
 
-            $scope.commit = function () {
-                ViewSpinner.spin();
-                ContainerCommit.commit({id: $routeParams.id, repo: $scope.container.Config.Image}, function (d) {
-                    update();
-                    Messages.send("Container commited", $routeParams.id);
-                }, function (e) {
-                    update();
-                    Messages.error("Failure", "Container failed to commit." + e.data);
-                });
-            };
-            $scope.pause = function () {
-                ViewSpinner.spin();
-                Container.pause({id: $routeParams.id}, function (d) {
-                    update();
-                    Messages.send("Container paused", $routeParams.id);
-                }, function (e) {
-                    update();
-                    Messages.error("Failure", "Container failed to pause." + e.data);
-                });
-            };
+        if (vol in defaultBinds) {
+          delete defaultBinds[vol];
+          defaultBind = true;
+        }
+        $scope.newCfg.Binds.push({ ContPath: vol, HostPath: mountpoint, ReadOnly: ro, DefaultBind: defaultBind });
+      });
+      angular.forEach(defaultBinds, function(bind) {
+        $scope.newCfg.Binds.push(bind);
+      });
 
-            $scope.unpause = function () {
-                ViewSpinner.spin();
-                Container.unpause({id: $routeParams.id}, function (d) {
-                    update();
-                    Messages.send("Container unpaused", $routeParams.id);
-                }, function (e) {
-                    update();
-                    Messages.error("Failure", "Container failed to unpause." + e.data);
-                });
-            };
+      ViewSpinner.stop();
+    }, function (e) {
+      if (e.status === 404) {
+        $('.detail').hide();
+        Messages.error("Not found", "Container not found.");
+      } else {
+        Messages.error("Failure", e.data);
+      }
+      ViewSpinner.stop();
+    });
 
-            $scope.remove = function () {
-                ViewSpinner.spin();
-                Container.remove({id: $routeParams.id}, function (d) {
-                    update();
-                    Messages.send("Container removed", $routeParams.id);
-                }, function (e) {
-                    update();
-                    Messages.error("Failure", "Container failed to remove." + e.data);
-                });
-            };
+  };
 
-            $scope.restart = function () {
-                ViewSpinner.spin();
-                Container.restart({id: $routeParams.id}, function (d) {
-                    update();
-                    Messages.send("Container restarted", $routeParams.id);
-                }, function (e) {
-                    update();
-                    Messages.error("Failure", "Container failed to restart." + e.data);
-                });
-            };
+  $scope.start = function () {
+    ViewSpinner.spin();
+    Container.start({
+      id: $scope.container.Id,
+      HostConfig: $scope.container.HostConfig
+    }, function (d) {
+      update();
+      Messages.send("Container started", $stateParams.id);
+    }, function (e) {
+      update();
+      Messages.error("Failure", "Container failed to start." + e.data);
+    });
+  };
 
-            $scope.hasContent = function (data) {
-                return data !== null && data !== undefined;
-            };
+  $scope.stop = function () {
+    ViewSpinner.spin();
+    Container.stop({id: $stateParams.id}, function (d) {
+      update();
+      Messages.send("Container stopped", $stateParams.id);
+    }, function (e) {
+      update();
+      Messages.error("Failure", "Container failed to stop." + e.data);
+    });
+  };
 
-            $scope.getChanges = function () {
-                ViewSpinner.spin();
-                Container.changes({id: $routeParams.id}, function (d) {
-                    $scope.changes = d;
-                    ViewSpinner.stop();
-                });
-            };
+  $scope.kill = function () {
+    ViewSpinner.spin();
+    Container.kill({id: $stateParams.id}, function (d) {
+      update();
+      Messages.send("Container killed", $stateParams.id);
+    }, function (e) {
+      update();
+      Messages.error("Failure", "Container failed to die." + e.data);
+    });
+  };
 
-            $scope.renameContainer = function () {
-                // #FIXME fix me later to handle http status to show the correct error message
-                Container.rename({id: $routeParams.id, 'name': $scope.container.newContainerName}, function (data) {
-                    if (data.name) {
-                        $scope.container.Name = data.name;
-                        Messages.send("Container renamed", $routeParams.id);
-                    } else {
-                        $scope.container.newContainerName = $scope.container.Name;
-                        Messages.error("Failure", "Container failed to rename.");
-                    }
-                });
-                $scope.container.edit = false;
-            };
+  $scope.commit = function () {
+    ViewSpinner.spin();
+    ContainerCommit.commit({id: $stateParams.id, repo: $scope.container.Config.Image}, function (d) {
+      update();
+      Messages.send("Container commited", $stateParams.id);
+    }, function (e) {
+      update();
+      Messages.error("Failure", "Container failed to commit." + e.data);
+    });
+  };
+  $scope.pause = function () {
+    ViewSpinner.spin();
+    Container.pause({id: $stateParams.id}, function (d) {
+      update();
+      Messages.send("Container paused", $stateParams.id);
+    }, function (e) {
+      update();
+      Messages.error("Failure", "Container failed to pause." + e.data);
+    });
+  };
 
-            update();
-            $scope.getChanges();
-        }]);
+  $scope.unpause = function () {
+    ViewSpinner.spin();
+    Container.unpause({id: $stateParams.id}, function (d) {
+      update();
+      Messages.send("Container unpaused", $stateParams.id);
+    }, function (e) {
+      update();
+      Messages.error("Failure", "Container failed to unpause." + e.data);
+    });
+  };
+
+  $scope.remove = function () {
+    ViewSpinner.spin();
+    Container.remove({id: $stateParams.id}, function (d) {
+      update();
+      $state.go('containers', {}, {reload: true});
+      Messages.send("Container removed", $stateParams.id);
+    }, function (e) {
+      update();
+      Messages.error("Failure", "Container failed to remove." + e.data);
+    });
+  };
+
+  $scope.restart = function () {
+    ViewSpinner.spin();
+    Container.restart({id: $stateParams.id}, function (d) {
+      update();
+      Messages.send("Container restarted", $stateParams.id);
+    }, function (e) {
+      update();
+      Messages.error("Failure", "Container failed to restart." + e.data);
+    });
+  };
+
+  $scope.hasContent = function (data) {
+    return data !== null && data !== undefined;
+  };
+
+  $scope.getChanges = function () {
+    ViewSpinner.spin();
+    Container.changes({id: $stateParams.id}, function (d) {
+      $scope.changes = d;
+      ViewSpinner.stop();
+    });
+  };
+
+  $scope.renameContainer = function () {
+    // #FIXME fix me later to handle http status to show the correct error message
+    Container.rename({id: $stateParams.id, 'name': $scope.container.newContainerName}, function (data) {
+      if (data.name) {
+        $scope.container.Name = data.name;
+        Messages.send("Container renamed", $stateParams.id);
+      } else {
+        $scope.container.newContainerName = $scope.container.Name;
+        Messages.error("Failure", "Container failed to rename.");
+      }
+    });
+    $scope.container.edit = false;
+  };
+
+  $scope.addEntry = function (array, entry) {
+    array.push(entry);
+  };
+  $scope.rmEntry = function (array, entry) {
+    var idx = array.indexOf(entry);
+    array.splice(idx, 1);
+  };
+
+  $scope.toggleEdit = function() {
+    $scope.edit = !$scope.edit;
+  };
+
+  update();
+  $scope.getChanges();
+}]);

app/components/containerLogs/containerLogsController.js

@@ -1,76 +1,79 @@
 angular.module('containerLogs', [])
-    .controller('ContainerLogsController', ['$scope', '$routeParams', '$location', '$anchorScroll', 'ContainerLogs', 'Container', 'ViewSpinner',
-        function ($scope, $routeParams, $location, $anchorScroll, ContainerLogs, Container, ViewSpinner) {
-            $scope.stdout = '';
-            $scope.stderr = '';
-            $scope.showTimestamps = false;
-            $scope.tailLines = 2000;
+.controller('ContainerLogsController', ['$scope', '$stateParams', '$anchorScroll', 'ContainerLogs', 'Container', 'ViewSpinner',
+function ($scope, $stateParams, $anchorScroll, ContainerLogs, Container, ViewSpinner) {
+  $scope.state = {};
+  $scope.state.displayTimestampsOut = false;
+  $scope.state.displayTimestampsErr = false;
+  $scope.stdout = '';
+  $scope.stderr = '';
+  $scope.tailLines = 2000;
 
-            ViewSpinner.spin();
-            Container.get({id: $routeParams.id}, function (d) {
-                $scope.container = d;
-                ViewSpinner.stop();
-            }, function (e) {
-                if (e.status === 404) {
-                    Messages.error("Not found", "Container not found.");
-                } else {
-                    Messages.error("Failure", e.data);
-                }
-                ViewSpinner.stop();
-            });
+  ViewSpinner.spin();
+  Container.get({id: $stateParams.id}, function (d) {
+    $scope.container = d;
+    ViewSpinner.stop();
+  }, function (e) {
+    if (e.status === 404) {
+      Messages.error("Not found", "Container not found.");
+    } else {
+      Messages.error("Failure", e.data);
+    }
+    ViewSpinner.stop();
+  });
 
-            function getLogs() {
-                ViewSpinner.spin();
-                ContainerLogs.get($routeParams.id, {
-                    stdout: 1,
-                    stderr: 0,
-                    timestamps: $scope.showTimestamps,
-                    tail: $scope.tailLines
-                }, function (data, status, headers, config) {
-                    // Replace carriage returns with newlines to clean up output
-                    data = data.replace(/[\r]/g, '\n');
-                    // Strip 8 byte header from each line of output
-                    data = data.substring(8);
-                    data = data.replace(/\n(.{8})/g, '\n');
-                    $scope.stdout = data;
-                    ViewSpinner.stop();
-                });
+  function getLogs() {
+    ViewSpinner.spin();
+    getLogsStdout();
+    getLogsStderr();
+    ViewSpinner.stop();
+  }
 
-                ContainerLogs.get($routeParams.id, {
-                    stdout: 0,
-                    stderr: 1,
-                    timestamps: $scope.showTimestamps,
-                    tail: $scope.tailLines
-                }, function (data, status, headers, config) {
-                    // Replace carriage returns with newlines to clean up output
-                    data = data.replace(/[\r]/g, '\n');
-                    // Strip 8 byte header from each line of output
-                    data = data.substring(8);
-                    data = data.replace(/\n(.{8})/g, '\n');
-                    $scope.stderr = data;
-                    ViewSpinner.stop();
-                });
-            }
+  function getLogsStderr() {
+    ContainerLogs.get($stateParams.id, {
+      stdout: 0,
+      stderr: 1,
+      timestamps: $scope.state.displayTimestampsErr,
+      tail: $scope.tailLines
+    }, function (data, status, headers, config) {
+      // Replace carriage returns with newlines to clean up output
+      data = data.replace(/[\r]/g, '\n');
+      // Strip 8 byte header from each line of output
+      data = data.substring(8);
+      data = data.replace(/\n(.{8})/g, '\n');
+      $scope.stderr = data;
+    });
+  }
 
-            // initial call
-            getLogs();
-            var logIntervalId = window.setInterval(getLogs, 5000);
+  function getLogsStdout() {
+    ContainerLogs.get($stateParams.id, {
+      stdout: 1,
+      stderr: 0,
+      timestamps: $scope.state.displayTimestampsOut,
+      tail: $scope.tailLines
+    }, function (data, status, headers, config) {
+      // Replace carriage returns with newlines to clean up output
+      data = data.replace(/[\r]/g, '\n');
+      // Strip 8 byte header from each line of output
+      data = data.substring(8);
+      data = data.replace(/\n(.{8})/g, '\n');
+      $scope.stdout = data;
+    });
+  }
 
-            $scope.$on("$destroy", function () {
-                // clearing interval when view changes
-                clearInterval(logIntervalId);
-            });
+  // initial call
+  getLogs();
+  var logIntervalId = window.setInterval(getLogs, 5000);
 
-            $scope.scrollTo = function (id) {
-                $location.hash(id);
-                $anchorScroll();
-            };
+  $scope.$on("$destroy", function () {
+    // clearing interval when view changes
+    clearInterval(logIntervalId);
+  });
 
-            $scope.toggleTimestamps = function () {
-                getLogs();
-            };
+  $scope.toggleTimestampsOut = function () {
+    getLogsStdout();
+  };
 
-            $scope.toggleTail = function () {
-                getLogs();
-            };
-        }]);
+  $scope.toggleTimestampsErr = function () {
+    getLogsStderr();
+  };
+}]);

app/components/containerLogs/containerlogs.html

@@ -1,43 +1,54 @@
-<div class="row logs">
-    <div class="col-xs-12">
-        <h4>Logs for container: <a href="#/containers/{{ container.Id }}/">{{ container.Name }}</a></td></h4>
+<rd-header>
+  <rd-header-title title="Container logs"></rd-header-title>
+  <rd-header-content>
+    Containers > <a ui-sref="container({id: container.Id})">{{ container.Name|trimcontainername }}</a> > Logs
+  </rd-header-content>
+</rd-header>
 
-        <div class="btn-group detail">
-            <button class="btn btn-info" ng-click="scrollTo('stdout')">stdout</button>
-            <button class="btn btn-warning" ng-click="scrollTo('stderr')">stderr</button>
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-body>
+        <div class="widget-icon grey pull-left">
+          <i class="fa fa-tasks"></i>
         </div>
-        <div class="pull-right col-xs-6">
-            <div class="col-xs-6">
-                <a class="btn btn-primary" ng-click="toggleTail()" role="button">Reload logs</a>
-                <input id="tailLines" type="number" ng-style="{width: '45px'}"
-                       ng-model="tailLines" ng-keypress="($event.which === 13)? toggleTail() : 0"/>
-                <label for="tailLines">lines</label>
-            </div>
-            <div class="col-xs-4">
-                <input id="timestampToggle" type="checkbox" ng-model="showTimestamps"
-                       ng-change="toggleTimestamps()"/> <label for="timestampToggle">Timestamps</label>
-            </div>
-        </div>
-    </div>
-
-    <div class="col-xs-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <h3 id="stdout" class="panel-title">STDOUT</h3>
-            </div>
-            <div class="panel-body">
-                <pre id="stdoutLog" class="pre-scrollable pre-x-scrollable">{{stdout}}</pre>
-            </div>
-        </div>
-    </div>
-    <div class="col-xs-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <h3 id="stderr" class="panel-title">STDERR</h3>
-            </div>
-            <div class="panel-body">
-                <pre id="stderrLog" class="pre-scrollable pre-x-scrollable">{{stderr}}</pre>
-            </div>
-        </div>
-    </div>
+        <div class="title">{{ container.Name|trimcontainername }}</div>
+        <div class="comment">Name</div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-info-circle" title="Stdout logs"></rd-widget-header>
+      <rd-widget-taskbar>
+        <input type="checkbox" ng-model="state.displayTimestampsOut" id="displayAllTsOut" ng-change="toggleTimestampsOut()"/>
+        <label for="displayAllTsOut">Display timestamps</label>
+      </rd-widget-taskbar>
+      <rd-widget-body classes="no-padding">
+        <div class="panel-body">
+          <pre id="stdoutLog" class="pre-scrollable pre-x-scrollable">{{stdout}}</pre>
+        </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-exclamation-triangle" title="Stderr logs"></rd-widget-header>
+      <rd-widget-taskbar>
+        <input type="checkbox" ng-model="state.displayTimestampsErr" id="displayAllTsErr" ng-change="toggleTimestampsErr()"/>
+        <label for="displayAllTsErr">Display timestamps</label>
+      </rd-widget-taskbar>
+      <rd-widget-body classes="no-padding">
+        <div class="panel-body">
+          <pre id="stderrLog" class="pre-scrollable pre-x-scrollable">{{stderr}}</pre>
+        </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
 </div>

app/components/containerTop/containerTop.html

@@ -1,19 +0,0 @@
-<div class="containerTop">
-    <div class="form-group col-xs-2">
-        <input type="text" class="form-control" placeholder="[options] (aux)" ng-model="ps_args">
-    </div>
-    <button type="button" class="btn btn-default" ng-click="getTop()">Submit</button>
-
-    <table class="table table-striped">
-        <thead>
-        <tr>
-            <th ng-repeat="title in containerTop.Titles">{{title}}</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr ng-repeat="processInfos in containerTop.Processes">
-            <td ng-repeat="processInfo in processInfos track by $index">{{processInfo}}</td>
-        </tr>
-        </tbody>
-    </table>
-</div>

app/components/containerTop/containerTopController.js

@@ -1,19 +0,0 @@
-angular.module('containerTop', [])
-    .controller('ContainerTopController', ['$scope', '$routeParams', 'ContainerTop', 'ViewSpinner', function ($scope, $routeParams, ContainerTop, ViewSpinner) {
-        $scope.ps_args = '';
-
-        /**
-         * Get container processes
-         */
-        $scope.getTop = function () {
-            ViewSpinner.spin();
-            ContainerTop.get($routeParams.id, {
-                ps_args: $scope.ps_args
-            }, function (data) {
-                $scope.containerTop = data;
-                ViewSpinner.stop();
-            });
-        };
-
-        $scope.getTop();
-    }]);

app/components/containers/containers.html

@@ -1,46 +1,98 @@
+<rd-header>
+  <rd-header-title title="Container list">
+    <a data-toggle="tooltip" title="Refresh" ui-sref="containers" ui-sref-opts="{reload: true}">
+      <i class="fa fa-refresh" aria-hidden="true"></i>
+    </a>
+  </rd-header-title>
+  <rd-header-content>Containers</rd-header-content>
+</rd-header>
 
-<h2>Containers:</h2>
-
-<div>
-    <ul class="nav nav-pills pull-left">
-        <li class="dropdown">
-            <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" data-target="#">Actions <b class="caret"></b></a>
-            <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
-                <li><a tabindex="-1" href="" ng-click="startAction()">Start</a></li>
-                <li><a tabindex="-1" href="" ng-click="stopAction()">Stop</a></li>
-                <li><a tabindex="-1" href="" ng-click="restartAction()">Restart</a></li>
-                <li><a tabindex="-1" href="" ng-click="killAction()">Kill</a></li>
-                <li><a tabindex="-1" href="" ng-click="pauseAction()">Pause</a></li>
-                <li><a tabindex="-1" href="" ng-click="unpauseAction()">Unpause</a></li>
-                <li><a tabindex="-1" href="" ng-click="removeAction()">Remove</a></li>
-            </ul>
-        </li>
-    </ul>
-
-    <div class="pull-right form-inline">
-        <input type="checkbox" ng-model="displayAll" id="displayAll" ng-change="toggleGetAll()"/> <label for="displayAll">Display All</label>&nbsp;
-        <input type="text" class="form-control" style="vertical-align: center" id="filter" placeholder="Filter" ng-model="filter"/> <label class="sr-only" for="filter">Filter</label>
-    </div>
+<div class="col-lg-12">
+  <rd-widget>
+    <rd-widget-header icon="fa-tasks" title="Containers">
+    </rd-widget-header>
+    <rd-widget-taskbar classes="col-lg-12">
+      <div class="pull-left">
+        <div class="btn-group" role="group" aria-label="...">
+          <button type="button" class="btn btn-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" type="button" ui-sref="actions.create.container">Add container</a>
+      </div>
+      <div class="pull-right">
+        <input type="checkbox" ng-model="state.displayAll" id="displayAll" ng-change="toggleGetAll()"/><label for="displayAll">Display All</label>
+        <input type="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="containers" ng-click="order('State')">
+                  State
+                  <span ng-show="sortType == 'State' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'State' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="containers" ng-click="order('Names')">
+                  Name
+                  <span ng-show="sortType == 'Names' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Names' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="containers" ng-click="order('IP')">
+                  IP Address
+                  <span ng-show="sortType == 'IP' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'IP' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th ng-if="swarm">
+                <a ui-sref="containers" ng-click="order('Host')">
+                  Host
+                  <span ng-show="sortType == 'Host' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Host' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="containers" ng-click="order('Image')">
+                  Image
+                  <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="containers" ng-click="order('Command')">
+                  Command
+                  <span ng-show="sortType == 'Command' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Command' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr ng-repeat="container in (state.filteredContainers = ( containers | filter:state.filter | orderBy:sortType:sortReverse))">
+              <td><input type="checkbox" ng-model="container.Checked" ng-change="selectItem(container)"/></td>
+              <td><span class="label label-{{ container.State|containerstatusbadge }}">{{ container.State }}</span></td>
+              <td ng-if="swarm"><a ui-sref="container({id: container.Id})">{{ container|swarmcontainername}}</a></td>
+              <td ng-if="!swarm"><a ui-sref="container({id: container.Id})">{{ container|containername}}</a></td>
+              <td>{{ container.IP ? container.IP : '-' }}</td>
+              <td ng-if="swarm">{{ container|swarmhostname}}</td>
+              <td><a ui-sref="image({id: container.Image})">{{ container.Image }}</a></td>
+              <td>{{ container.Command|truncate:60 }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </rd-widget-body>
+  <rd-widget>
 </div>
-<table class="table table-striped">
-    <thead>
-        <tr>
-            <th><input type="checkbox" ng-model="toggle" ng-change="toggleSelectAll()" /> Action</th>
-            <th>Name</th>
-            <th>Image</th>
-            <th>Command</th>
-            <th>Created</th>
-            <th>Status</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr ng-repeat="container in containers | filter:filter | orderBy:predicate">
-            <td><input type="checkbox" ng-model="container.Checked" /></td>
-            <td><a href="#/containers/{{ container.Id }}/">{{ container|containername}}</a></td>
-            <td><a href="#/images/{{ container.Image }}/">{{ container.Image }}</a></td>
-            <td>{{ container.Command|truncate:40 }}</td>
-            <td>{{ container.Created|getdate }}</td>
-            <td><span class="label label-{{ container.Status|statusbadge }}">{{ container.Status }}</span></td>
-        </tr>
-    </tbody>
-</table>

app/components/containers/containersController.js

@@ -1,112 +1,158 @@
 angular.module('containers', [])
-    .controller('ContainersController', ['$scope', 'Container', 'Settings', 'Messages', 'ViewSpinner',
-        function ($scope, Container, Settings, Messages, ViewSpinner) {
-            $scope.predicate = '-Created';
-            $scope.toggle = false;
-            $scope.displayAll = Settings.displayAll;
+.controller('ContainersController', ['$scope', 'Container', 'Settings', 'Messages', 'ViewSpinner', 'Config', 'errorMsgFilter',
+function ($scope, Container, Settings, Messages, ViewSpinner, Config, errorMsgFilter) {
 
-            var update = function (data) {
-                ViewSpinner.spin();
-                Container.query(data, function (d) {
-                    $scope.containers = d.map(function (item) {
-                        return new ContainerViewModel(item);
-                    });
-                    ViewSpinner.stop();
-                });
-            };
+  $scope.state = {};
+  $scope.state.displayAll = Settings.displayAll;
+  $scope.sortType = 'State';
+  $scope.sortReverse = true;
+  $scope.state.selectedItemCount = 0;
 
-            var batch = function (items, action, msg) {
-                ViewSpinner.spin();
-                var counter = 0;
-                var complete = function () {
-                    counter = counter - 1;
-                    if (counter === 0) {
-                        ViewSpinner.stop();
-                        update({all: Settings.displayAll ? 1 : 0});
-                    }
-                };
-                angular.forEach(items, function (c) {
-                    if (c.Checked) {
-                        if (action === Container.start) {
-                            Container.get({id: c.Id}, function (d) {
-                                c = d;
-                                counter = counter + 1;
-                                action({id: c.Id, HostConfig: c.HostConfig || {}}, function (d) {
-                                    Messages.send("Container " + msg, c.Id);
-                                    var index = $scope.containers.indexOf(c);
-                                    complete();
-                                }, function (e) {
-                                    Messages.error("Failure", e.data);
-                                    complete();
-                                });
-                            }, function (e) {
-                                if (e.status === 404) {
-                                    $('.detail').hide();
-                                    Messages.error("Not found", "Container not found.");
-                                } else {
-                                    Messages.error("Failure", e.data);
-                                }
-                                complete();
-                            });
-                        }
-                        else {
-                            counter = counter + 1;
-                            action({id: c.Id}, function (d) {
-                                Messages.send("Container " + msg, c.Id);
-                                var index = $scope.containers.indexOf(c);
-                                complete();
-                            }, function (e) {
-                                Messages.error("Failure", e.data);
-                                complete();
-                            });
+  $scope.order = function (sortType) {
+    $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
+    $scope.sortType = sortType;
+  };
 
-                        }
+  var update = function (data) {
+    ViewSpinner.spin();
+    $scope.state.selectedItemCount = 0;
+    Container.query(data, function (d) {
+      var containers = d;
+      if (hiddenLabels) {
+        containers = hideContainers(d);
+      }
+      $scope.containers = containers.map(function (container) {
+        return new ContainerViewModel(container);
+      });
+      ViewSpinner.stop();
+    });
+  };
 
-                    }
-                });
-                if (counter === 0) {
-                    ViewSpinner.stop();
-                }
-            };
+  var batch = function (items, action, msg) {
+    ViewSpinner.spin();
+    var counter = 0;
+    var complete = function () {
+      counter = counter - 1;
+      if (counter === 0) {
+        ViewSpinner.stop();
+        update({all: Settings.displayAll ? 1 : 0});
+      }
+    };
+    angular.forEach(items, function (c) {
+      if (c.Checked) {
+        counter = counter + 1;
+        if (action === Container.start) {
+          Container.get({id: c.Id}, function (d) {
+            c = d;
+            action({id: c.Id, HostConfig: c.HostConfig || {}}, function (d) {
+              Messages.send("Container " + msg, c.Id);
+              complete();
+            }, function (e) {
+              Messages.error("Failure", e.data);
+              complete();
+            });
+          }, function (e) {
+            if (e.status === 404) {
+              $('.detail').hide();
+              Messages.error("Not found", "Container not found.");
+            } else {
+              Messages.error("Failure", e.data);
+            }
+            complete();
+          });
+        }
+        else if (action === Container.remove) {
+          action({id: c.Id}, function (d) {
+            var error = errorMsgFilter(d);
+            if (error) {
+              Messages.send("Error", "Unable to remove running container");
+            }
+            else {
+              Messages.send("Container " + msg, c.Id);
+            }
+            complete();
+          }, function (e) {
+            Messages.error("Failure", e.data);
+            complete();
+          });
+        }
+        else {
+          action({id: c.Id}, function (d) {
+            Messages.send("Container " + msg, c.Id);
+            complete();
+          }, function (e) {
+            Messages.error("Failure", e.data);
+            complete();
+          });
 
-            $scope.toggleSelectAll = function () {
-                angular.forEach($scope.containers, function (i) {
-                    i.Checked = $scope.toggle;
-                });
-            };
+        }
+      }
+    });
+    if (counter === 0) {
+      ViewSpinner.stop();
+    }
+  };
 
-            $scope.toggleGetAll = function () {
-                Settings.displayAll = $scope.displayAll;
-                update({all: Settings.displayAll ? 1 : 0});
-            };
+  $scope.selectItem = function (item) {
+    if (item.Checked) {
+      $scope.state.selectedItemCount++;
+    } else {
+      $scope.state.selectedItemCount--;
+    }
+  };
 
-            $scope.startAction = function () {
-                batch($scope.containers, Container.start, "Started");
-            };
+  $scope.toggleGetAll = function () {
+    Settings.displayAll = $scope.state.displayAll;
+    update({all: Settings.displayAll ? 1 : 0});
+  };
 
-            $scope.stopAction = function () {
-                batch($scope.containers, Container.stop, "Stopped");
-            };
+  $scope.startAction = function () {
+    batch($scope.containers, Container.start, "Started");
+  };
 
-            $scope.restartAction = function () {
-                batch($scope.containers, Container.restart, "Restarted");
-            };
+  $scope.stopAction = function () {
+    batch($scope.containers, Container.stop, "Stopped");
+  };
 
-            $scope.killAction = function () {
-                batch($scope.containers, Container.kill, "Killed");
-            };
+  $scope.restartAction = function () {
+    batch($scope.containers, Container.restart, "Restarted");
+  };
 
-            $scope.pauseAction = function () {
-                batch($scope.containers, Container.pause, "Paused");
-            };
+  $scope.killAction = function () {
+    batch($scope.containers, Container.kill, "Killed");
+  };
 
-            $scope.unpauseAction = function () {
-                batch($scope.containers, Container.unpause, "Unpaused");
-            };
+  $scope.pauseAction = function () {
+    batch($scope.containers, Container.pause, "Paused");
+  };
 
-            $scope.removeAction = function () {
-                batch($scope.containers, Container.remove, "Removed");
-            };
+  $scope.unpauseAction = function () {
+    batch($scope.containers, Container.unpause, "Unpaused");
+  };
 
-            update({all: Settings.displayAll ? 1 : 0});
-        }]);
+  $scope.removeAction = function () {
+    batch($scope.containers, Container.remove, "Removed");
+  };
+
+  var hideContainers = function (containers) {
+    return containers.filter(function (container) {
+      var filterContainer = false;
+      hiddenLabels.forEach(function(label, index) {
+        if (_.has(container.Labels, label.name) &&
+        container.Labels[label.name] === label.value) {
+          filterContainer = true;
+        }
+      });
+      if (!filterContainer) {
+        return container;
+      }
+    });
+  };
+
+  $scope.swarm = false;
+  Config.$promise.then(function (c) {
+    hiddenLabels = c.hiddenLabels;
+    $scope.swarm = c.swarm;
+    update({all: Settings.displayAll ? 1 : 0});
+  });
+}]);

app/components/containersNetwork/containersNetwork.html

@@ -1,25 +0,0 @@
-<div class="detail">
-    <h2>Containers Network</h2>
-
-    <div class="row">
-        <div class="input-group">
-            <input type="text" ng-model="query" autofocus="true" class="form-control"
-                   placeholder="Search" ng-change="network.selectContainers(query)"/>
-            <span class="input-group-addon"><span class="glyphicon glyphicon-search"/></span>
-        </div>
-    </div>
-    <div class="row">
-        <div class="btn-group">
-            <button class="btn btn-warning" ng-click="network.hideSelected()">Hide Selected</button>
-            <button class="btn btn-info" ng-click="network.showSelectedDownstream()">Show Selected Downstream</button>
-            <button class="btn btn-info" ng-click="network.showSelectedUpstream()">Show Selected Upstream</button>
-            <button class="btn btn-success" ng-click="network.showAll()">Show All</button>
-        </div>
-        <input type="checkbox" ng-model="includeStopped" id="includeStopped" ng-change="toggleIncludeStopped()"/> <label
-            for="includeStopped">Include stopped containers</label>
-    </div>
-    <div class="row">
-        <vis-network data="network.data" options="network.options" events="network.events"
-                     component="network.component"/>
-    </div>
-</div>

app/components/containersNetwork/containersNetworkController.js

@@ -1,271 +0,0 @@
-angular.module('containersNetwork', ['ngVis'])
-    .controller('ContainersNetworkController', ['$scope', '$location', 'Container', 'Messages', 'VisDataSet', function ($scope, $location, Container, Messages, VisDataSet) {
-
-        function ContainerNode(data) {
-            this.Id = data.Id;
-            // names have the following format: /Name
-            this.Name = data.Name.substring(1);
-            this.Image = data.Config.Image;
-            this.Running = data.State.Running;
-            var dataLinks = data.HostConfig.Links;
-            if (dataLinks != null) {
-                this.Links = {};
-                for (var i = 0; i < dataLinks.length; i++) {
-                    // links have the following format: /TargetContainerName:/SourceContainerName/LinkAlias
-                    var link = dataLinks[i].split(":");
-                    var target = link[0].substring(1);
-                    var alias = link[1].substring(link[1].lastIndexOf("/") + 1);
-                    // only keep shortest alias
-                    if (this.Links[target] == null || alias.length < this.Links[target].length) {
-                        this.Links[target] = alias;
-                    }
-                }
-            }
-            var dataVolumes = data.HostConfig.VolumesFrom;
-            //converting array into properties for simpler and faster access
-            if (dataVolumes != null) {
-                this.VolumesFrom = {};
-                for (var j = 0; j < dataVolumes.length; j++) {
-                    this.VolumesFrom[dataVolumes[j]] = true;
-                }
-            }
-        }
-
-        function ContainersNetworkData() {
-            this.nodes = new VisDataSet();
-            this.edges = new VisDataSet();
-
-            this.addContainerNode = function (container) {
-                this.nodes.add({
-                    id: container.Id,
-                    label: container.Name,
-                    title: "<ul style=\"list-style-type:none; padding: 0px; margin: 0px\">" +
-                    "<li><strong>ID:</strong> " + container.Id + "</li>" +
-                    "<li><strong>Image:</strong> " + container.Image + "</li>" +
-                    "</ul>",
-                    color: (container.Running ? "#8888ff" : "#cccccc")
-                });
-            };
-
-            this.hasEdge = function (from, to) {
-                return this.edges.getIds({
-                        filter: function (item) {
-                            return item.from === from.Id && item.to === to.Id;
-                        }
-                    }).length > 0;
-            };
-
-            this.addLinkEdgeIfExists = function (from, to) {
-                if (from.Links != null && from.Links[to.Name] != null && !this.hasEdge(from, to)) {
-                    this.edges.add({
-                        from: from.Id,
-                        to: to.Id,
-                        label: from.Links[to.Name]
-                    });
-                }
-            };
-
-            this.addVolumeEdgeIfExists = function (from, to) {
-                if (from.VolumesFrom != null && (from.VolumesFrom[to.Id] != null || from.VolumesFrom[to.Name] != null) && !this.hasEdge(from, to)) {
-                    this.edges.add({
-                        from: from.Id,
-                        to: to.Id,
-                        color: {color: '#A0A0A0', highlight: '#A0A0A0', hover: '#848484'}
-                    });
-                }
-            };
-
-            this.removeContainersNodes = function (containersIds) {
-                this.nodes.remove(containersIds);
-            };
-        }
-
-        function ContainersNetwork() {
-            this.data = new ContainersNetworkData();
-            this.containers = {};
-            this.selectedContainersIds = [];
-            this.shownContainersIds = [];
-            this.events = {
-                select: function (event) {
-                    $scope.network.selectedContainersIds = event.nodes;
-                    $scope.$apply(function () {
-                        $scope.query = '';
-                    });
-                },
-                doubleClick: function (event) {
-                    $scope.$apply(function () {
-                        $location.path('/containers/' + event.nodes[0]);
-                    });
-                }
-            };
-            this.options = {
-                navigation: true,
-                keyboard: true,
-                height: '500px', width: '700px',
-                nodes: {
-                    shape: 'box'
-                },
-                edges: {
-                    style: 'arrow'
-                },
-                physics: {
-                    barnesHut: {
-                        springLength: 200
-                    }
-                }
-            };
-
-            this.addContainer = function (data) {
-                var container = new ContainerNode(data);
-                this.containers[container.Id] = container;
-                this.shownContainersIds.push(container.Id);
-                this.data.addContainerNode(container);
-                for (var otherContainerId in this.containers) {
-                    var otherContainer = this.containers[otherContainerId];
-                    this.data.addLinkEdgeIfExists(container, otherContainer);
-                    this.data.addLinkEdgeIfExists(otherContainer, container);
-                    this.data.addVolumeEdgeIfExists(container, otherContainer);
-                    this.data.addVolumeEdgeIfExists(otherContainer, container);
-                }
-            };
-
-            this.selectContainers = function (query) {
-                if (this.component != null) {
-                    this.selectedContainersIds = this.searchContainers(query);
-                    this.component.selectNodes(this.selectedContainersIds);
-                }
-            };
-
-            this.searchContainers = function (query) {
-                if (query.trim() === "") {
-                    return [];
-                }
-                var selectedContainersIds = [];
-                for (var i = 0; i < this.shownContainersIds.length; i++) {
-                    var container = this.containers[this.shownContainersIds[i]];
-                    if (container.Name.indexOf(query) > -1 ||
-                        container.Image.indexOf(query) > -1 ||
-                        container.Id.indexOf(query) > -1) {
-                        selectedContainersIds.push(container.Id);
-                    }
-                }
-                return selectedContainersIds;
-            };
-
-            this.hideSelected = function () {
-                var i = 0;
-                while (i < this.shownContainersIds.length) {
-                    if (this.selectedContainersIds.indexOf(this.shownContainersIds[i]) > -1) {
-                        this.shownContainersIds.splice(i, 1);
-                    } else {
-                        i++;
-                    }
-                }
-                this.data.removeContainersNodes(this.selectedContainersIds);
-                $scope.query = '';
-                this.selectedContainersIds = [];
-            };
-
-            this.searchDownstream = function (containerId, downstreamContainersIds) {
-                if (downstreamContainersIds.indexOf(containerId) > -1) {
-                    return;
-                }
-                downstreamContainersIds.push(containerId);
-                var container = this.containers[containerId];
-                if (container.Links == null && container.VolumesFrom == null) {
-                    return;
-                }
-                for (var otherContainerId in this.containers) {
-                    var otherContainer = this.containers[otherContainerId];
-                    if (container.Links != null && container.Links[otherContainer.Name] != null) {
-                        this.searchDownstream(otherContainer.Id, downstreamContainersIds);
-                    } else if (container.VolumesFrom != null &&
-                        container.VolumesFrom[otherContainer.Id] != null) {
-                        this.searchDownstream(otherContainer.Id, downstreamContainersIds);
-                    }
-                }
-            };
-
-            this.updateShownContainers = function (newShownContainersIds) {
-                for (var containerId in this.containers) {
-                    if (newShownContainersIds.indexOf(containerId) > -1 &&
-                        this.shownContainersIds.indexOf(containerId) === -1) {
-                        this.data.addContainerNode(this.containers[containerId]);
-                    } else if (newShownContainersIds.indexOf(containerId) === -1 &&
-                        this.shownContainersIds.indexOf(containerId) > -1) {
-                        this.data.removeContainersNodes(containerId);
-                    }
-                }
-                this.shownContainersIds = newShownContainersIds;
-            };
-
-            this.showSelectedDownstream = function () {
-                var downstreamContainersIds = [];
-                for (var i = 0; i < this.selectedContainersIds.length; i++) {
-                    this.searchDownstream(this.selectedContainersIds[i], downstreamContainersIds);
-                }
-                this.updateShownContainers(downstreamContainersIds);
-            };
-
-            this.searchUpstream = function (containerId, upstreamContainersIds) {
-                if (upstreamContainersIds.indexOf(containerId) > -1) {
-                    return;
-                }
-                upstreamContainersIds.push(containerId);
-                var container = this.containers[containerId];
-                for (var otherContainerId in this.containers) {
-                    var otherContainer = this.containers[otherContainerId];
-                    if (otherContainer.Links != null && otherContainer.Links[container.Name] != null) {
-                        this.searchUpstream(otherContainer.Id, upstreamContainersIds);
-                    } else if (otherContainer.VolumesFrom != null &&
-                        otherContainer.VolumesFrom[container.Id] != null) {
-                        this.searchUpstream(otherContainer.Id, upstreamContainersIds);
-                    }
-                }
-            };
-
-            this.showSelectedUpstream = function () {
-                var upstreamContainersIds = [];
-                for (var i = 0; i < this.selectedContainersIds.length; i++) {
-                    this.searchUpstream(this.selectedContainersIds[i], upstreamContainersIds);
-                }
-                this.updateShownContainers(upstreamContainersIds);
-            };
-
-            this.showAll = function () {
-                for (var containerId in this.containers) {
-                    if (this.shownContainersIds.indexOf(containerId) === -1) {
-                        this.data.addContainerNode(this.containers[containerId]);
-                        this.shownContainersIds.push(containerId);
-                    }
-                }
-            };
-
-        }
-
-        $scope.network = new ContainersNetwork();
-
-        var showFailure = function (event) {
-            Messages.error('Failure', e.data);
-        };
-
-        var addContainer = function (container) {
-            $scope.network.addContainer(container);
-        };
-
-        var update = function (data) {
-            Container.query(data, function (d) {
-                for (var i = 0; i < d.length; i++) {
-                    Container.get({id: d[i].Id}, addContainer, showFailure);
-                }
-            });
-        };
-        update({all: 0});
-
-        $scope.includeStopped = false;
-        $scope.toggleIncludeStopped = function () {
-            $scope.network.updateShownContainers([]);
-            update({all: $scope.includeStopped ? 1 : 0});
-        };
-
-    }]);

app/components/createContainer/createContainerController.js

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

app/components/createContainer/createcontainer.html

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

app/components/createNetwork/createNetworkController.js

@@ -0,0 +1,57 @@
+angular.module('createNetwork', [])
+.controller('CreateNetworkController', ['$scope', '$state', 'Messages', 'Network', 'ViewSpinner', 'errorMsgFilter',
+function ($scope, $state, Messages, Network, ViewSpinner, errorMsgFilter) {
+  $scope.formValues = {
+    DriverOptions: []
+  };
+
+  $scope.config = {
+    Driver: 'bridge',
+    CheckDuplicate: true,
+    Internal: false
+  };
+
+  $scope.addDriverOption = function() {
+    $scope.formValues.DriverOptions.push({ name: '', value: '' });
+  };
+
+  $scope.removeDriverOption = function(index) {
+    $scope.formValues.DriverOptions.splice(index, 1);
+  };
+
+  function createNetwork(config) {
+    ViewSpinner.spin();
+    Network.create(config, function (d) {
+      if (d.Id) {
+        Messages.send("Network created", d.Id);
+        ViewSpinner.stop();
+        $state.go('networks', {}, {reload: true});
+      } else {
+        ViewSpinner.stop();
+        Messages.error('Unable to create network', errorMsgFilter(d));
+      }
+    }, function (e) {
+      ViewSpinner.stop();
+      Messages.error('Unable to create network', e.data);
+    });
+  }
+
+  function prepareDriverOptions(config) {
+    var options = {};
+    $scope.formValues.DriverOptions.forEach(function (option) {
+      options[option.name] = option.value;
+    });
+    config.Options = options;
+  }
+
+  function prepareConfiguration() {
+    var config = angular.copy($scope.config);
+    prepareDriverOptions(config);
+    return config;
+  }
+
+  $scope.create = function () {
+    var config = prepareConfiguration();
+    createNetwork(config);
+  };
+}]);

app/components/createNetwork/createnetwork.html

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

app/components/createVolume/createVolumeController.js

@@ -0,0 +1,56 @@
+angular.module('createVolume', [])
+.controller('CreateVolumeController', ['$scope', '$state', 'Volume', 'Messages', 'ViewSpinner', 'errorMsgFilter',
+function ($scope, $state, Volume, Messages, ViewSpinner, errorMsgFilter) {
+
+  $scope.formValues = {
+    DriverOptions: []
+  };
+
+  $scope.config = {
+    Driver: 'local'
+  };
+
+  $scope.addDriverOption = function() {
+    $scope.formValues.DriverOptions.push({ name: '', value: '' });
+  };
+
+  $scope.removeDriverOption = function(index) {
+    $scope.formValues.DriverOptions.splice(index, 1);
+  };
+
+  function createVolume(config) {
+    ViewSpinner.spin();
+    Volume.create(config, function (d) {
+      if (d.Name) {
+        Messages.send("Volume created", d.Name);
+        ViewSpinner.stop();
+        $state.go('volumes', {}, {reload: true});
+      } else {
+        ViewSpinner.stop();
+        Messages.error('Unable to create volume', errorMsgFilter(d));
+      }
+    }, function (e) {
+      ViewSpinner.stop();
+      Messages.error('Unable to create volume', e.data);
+    });
+  }
+
+  function prepareDriverOptions(config) {
+    var options = {};
+    $scope.formValues.DriverOptions.forEach(function (option) {
+      options[option.name] = option.value;
+    });
+    config.DriverOpts = options;
+  }
+
+  function prepareConfiguration() {
+    var config = angular.copy($scope.config);
+    prepareDriverOptions(config);
+    return config;
+  }
+
+  $scope.create = function () {
+    var config = prepareConfiguration();
+    createVolume(config);
+  };
+}]);

app/components/createVolume/createvolume.html

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

app/components/dashboard/dashboard.html

@@ -1,52 +1,76 @@
-<div class="col-xs-offset-1">
-    <!--<div class="sidebar span4">
-        <div ng-include="template" ng-controller="SideBarController"></div>
-    </div>-->
-    <div class="row">
-        <div class="col-xs-10" id="masthead" style="display:none">
-            <div class="jumbotron">
-                <h1>DockerUI</h1>
+<rd-header>
+  <rd-header-title title="Home"></rd-header-title>
+  <rd-header-content>Dashboard</rd-header-content>
+</rd-header>
 
-                <p class="lead">The Linux container engine</p>
-                <a class="btn btn-large btn-success" href="http://docker.io">Learn more.</a>
-            </div>
+<div class="row">
+  <div class="col-lg-3 col-md-6 col-xs-12">
+    <rd-widget>
+      <rd-widget-body>
+        <div class="widget-icon blue pull-left">
+          <i class="fa fa-tasks"></i>
         </div>
-    </div>
-
-    <div class="row">
-        <div class="col-xs-10">
-            <div class="col-xs-5">
-                <h3>Running Containers</h3>
-                <ul>
-                    <li ng-repeat="container in containers|orderBy:predicate">
-                        <a href="#/containers/{{ container.Id }}/">{{ container|containername }}</a>
-                        <span class="label label-{{ container.Status|statusbadge }}">{{ container.Status }}</span>
-                    </li>
-                </ul>
-            </div>
-            <div class="col-xs-5 text-right">
-                <h3>Status</h3>
-                <canvas id="containers-chart" class="pull-right">
-                    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a
-                            href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
-                </canvas>
-                <div id="chart-legend"></div>
-            </div>
+        <div class="title">{{ containerData.total }}</div>
+        <div class="comment">Containers</div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+  <div class="col-lg-3 col-md-6 col-xs-12">
+    <rd-widget>
+      <rd-widget-body>
+        <div class="widget-icon green pull-left">
+          <i class="fa fa-tasks"></i>
         </div>
-    </div>
-
-    <div class="row">
-        <div class="col-xs-10" id="stats">
-            <h4>Containers created</h4>
-            <canvas id="containers-started-chart" width="700">
-                <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a
-                        href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
-            </canvas>
-            <h4>Images created</h4>
-            <canvas id="images-created-chart" width="700">
-                <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a
-                        href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
-            </canvas>
+        <div class="title">{{ containerData.running }}</div>
+        <div class="comment">Running</div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+  <div class="col-lg-3 col-md-6 col-xs-12">
+    <rd-widget>
+      <rd-widget-body>
+        <div class="widget-icon red pull-left">
+          <i class="fa fa-tasks"></i>
         </div>
-    </div>
+        <div class="title">{{ containerData.stopped }}</div>
+        <div class="comment">Stopped</div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+  <div class="col-lg-3 col-md-6 col-xs-12">
+    <rd-widget>
+      <rd-widget-body>
+        <div class="widget-icon gray pull-left">
+          <i class="fa fa-tasks"></i>
+        </div>
+        <div class="title">{{ containerData.ghost }}</div>
+        <div class="comment">Ghost</div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-6">
+    <rd-widget>
+      <rd-widget-header icon="fa-tasks" title="Containers created"></rd-widget-header>
+      <rd-widget-body>
+        <canvas id="containers-started-chart" width="770" height="230">
+            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a
+                    href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
+        </canvas>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+  <div class="col-lg-6">
+    <rd-widget>
+      <rd-widget-header icon="fa-clone" title="Images created"></rd-widget-header>
+      <rd-widget-body>
+        <canvas id="images-created-chart" width="770" height="230">
+            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a
+                    href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
+        </canvas>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
 </div>

app/components/dashboard/dashboardController.js

@@ -1,74 +1,46 @@
 angular.module('dashboard', [])
-    .controller('DashboardController', ['$scope', 'Container', 'Image', 'Settings', 'LineChart', function ($scope, Container, Image, Settings, LineChart) {
-        $scope.predicate = '-Created';
-        $scope.containers = [];
+  .controller('DashboardController', ['$scope', 'Container', 'Image', 'Settings', 'LineChart', function ($scope, Container, Image, Settings, LineChart) {
 
-        var getStarted = function (data) {
-            $scope.totalContainers = data.length;
-            LineChart.build('#containers-started-chart', data, function (c) {
-                return new Date(c.Created * 1000).toLocaleDateString();
-            });
-            var s = $scope;
-            Image.query({}, function (d) {
-                s.totalImages = d.length;
-                LineChart.build('#images-created-chart', d, function (c) {
-                    return new Date(c.Created * 1000).toLocaleDateString();
-                });
-            });
-        };
+  $scope.containerData = {};
 
-        var opts = {animation: false};
-        if (Settings.firstLoad) {
-            opts.animation = true;
-            Settings.firstLoad = false;
-            $('#masthead').show();
+  var buildCharts = function (data) {
+    $scope.containerData.total = data.length;
+    LineChart.build('#containers-started-chart', data, function (c) {
+      return new Date(c.Created * 1000).toLocaleDateString();
+    });
+    var s = $scope;
+    Image.query({}, function (d) {
+      s.totalImages = d.length;
+      LineChart.build('#images-created-chart', d, function (c) {
+        return new Date(c.Created * 1000).toLocaleDateString();
+      });
+    });
+  };
 
-            setTimeout(function () {
-                $('#masthead').slideUp('slow');
-            }, 5000);
-        }
+  Container.query({all: 1}, function (d) {
+    var running = 0;
+    var ghost = 0;
+    var stopped = 0;
 
-        Container.query({all: 1}, function (d) {
-            var running = 0;
-            var ghost = 0;
-            var stopped = 0;
+    // TODO: centralize that
+    var containers = d.filter(function (container) {
+      return container.Image !== 'swarm';
+    });
 
-            for (var i = 0; i < d.length; i++) {
-                var item = d[i];
+    for (var i = 0; i < containers.length; i++) {
+      var item = containers[i];
+      if (item.Status === "Ghost") {
+        ghost += 1;
+      } else if (item.Status.indexOf('Exit') !== -1) {
+        stopped += 1;
+      } else {
+        running += 1;
+      }
+    }
+    $scope.containerData.running = running;
+    $scope.containerData.stopped = stopped;
+    $scope.containerData.ghost = ghost;
 
-                if (item.Status === "Ghost") {
-                    ghost += 1;
-                } else if (item.Status.indexOf('Exit') !== -1) {
-                    stopped += 1;
-                } else {
-                    running += 1;
-                    $scope.containers.push(new ContainerViewModel(item));
-                }
-            }
-
-            getStarted(d);
-
-            var c = new Chart($('#containers-chart').get(0).getContext("2d"));
-            var data = [
-                {
-                    value: running,
-                    color: '#5bb75b',
-                    title: 'Running'
-                }, // running
-                {
-                    value: stopped,
-                    color: '#C7604C',
-                    title: 'Stopped'
-                }, // stopped
-                {
-                    value: ghost,
-                    color: '#E2EAE9',
-                    title: 'Ghost'
-                } // ghost
-            ];
-
-            c.Doughnut(data, opts);
-            var lgd = $('#chart-legend').get(0);
-            legend(lgd, data);
-        });
-    }]);
+    buildCharts(containers);
+  });
+}]);

app/components/dashboard/master-ctrl.js

@@ -0,0 +1,37 @@
+angular.module('dashboard')
+.controller('MasterCtrl', ['$scope', '$cookieStore', 'Settings', 'Config', function ($scope, $cookieStore, Settings, Config) {
+  /**
+  * Sidebar Toggle & Cookie Control
+  */
+  var mobileView = 992;
+
+  $scope.getWidth = function() {
+    return window.innerWidth;
+  };
+
+  $scope.config = Config;
+
+  $scope.$watch($scope.getWidth, function(newValue, oldValue) {
+    if (newValue >= mobileView) {
+      if (angular.isDefined($cookieStore.get('toggle'))) {
+        $scope.toggle = ! $cookieStore.get('toggle') ? false : true;
+      } else {
+        $scope.toggle = true;
+      }
+    } else {
+      $scope.toggle = false;
+    }
+
+  });
+
+  $scope.toggleSidebar = function() {
+    $scope.toggle = !$scope.toggle;
+    $cookieStore.put('toggle', $scope.toggle);
+  };
+
+  window.onresize = function() {
+    $scope.$apply();
+  };
+
+  $scope.uiVersion = Settings.uiVersion;
+}]);

app/components/docker/docker.html

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

app/components/docker/dockerController.js

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

app/components/events/events.html

@@ -1,34 +0,0 @@
-<div class="row">
-    <div class="col-xs-12">
-        <h2>Events</h2>
-
-        <form class="form-inline">
-            <div class="form-group">
-                <label for="since">Since:</label>
-                <input id="since" type="datetime-local" ng-model="model.since" class="form-control" step="any"/>
-            </div>
-            <div class="form-group">
-                <label for="until">Until:</label>
-                <input id="until" type="datetime-local" ng-model="model.until" class="form-control" step="any"/>
-            </div>
-            <button ng-click="updateEvents()" class="btn btn-primary">Update</button>
-        </form>
-        <br>
-        <table class="table">
-            <tbody>
-            <tr>
-                <th>Event</th>
-                <th>From</th>
-                <th>ID</th>
-                <th>Time</th>
-            </tr>
-            <tr ng-repeat="event in dockerEvents">
-                <td ng-bind="event.status"/>
-                <td ng-bind="event.from"/>
-                <td ng-bind="event.id"/>
-                <td ng-bind="event.time * 1000 | date:'medium'"/>
-            </tr>
-            </tbody>
-        </table>
-    </div>
-</div>

app/components/events/eventsController.js

@@ -1,42 +0,0 @@
-angular.module('events', ['ngOboe'])
-    .controller('EventsController', ['Settings', '$scope', 'Oboe', 'Messages', '$timeout', function (Settings, $scope, oboe, Messages, $timeout) {
-        $scope.updateEvents = function () {
-            $scope.dockerEvents = [];
-
-            // TODO: Clean up URL building
-            var url = Settings.url + '/events?';
-
-            if ($scope.model.since) {
-                var sinceSecs = Math.floor($scope.model.since.getTime() / 1000);
-                url += 'since=' + sinceSecs + '&';
-            }
-            if ($scope.model.until) {
-                var untilSecs = Math.floor($scope.model.until.getTime() / 1000);
-                url += 'until=' + untilSecs;
-            }
-
-            oboe({
-                url: url,
-                pattern: '{id status time}'
-            })
-                .then(function (node) {
-                    // finished loading
-                    $timeout(function () {
-                        $scope.$apply();
-                    });
-                }, function (error) {
-                    // handle errors
-                    Messages.error("Failure", error.data);
-                }, function (node) {
-                    // node received
-                    $scope.dockerEvents.push(node);
-                });
-        };
-
-        // Init
-        $scope.model = {};
-        $scope.model.since = new Date(Date.now() - 86400000); // 24 hours in the past
-        $scope.model.until = new Date();
-        $scope.updateEvents();
-
-    }]);

app/components/footer/footerController.js

@@ -1,9 +0,0 @@
-angular.module('footer', [])
-    .controller('FooterController', ['$scope', 'Settings', 'Docker', function ($scope, Settings, Docker) {
-        $scope.template = 'app/components/footer/statusbar.html';
-
-        $scope.uiVersion = Settings.uiVersion;
-        Docker.get({}, function (d) {
-            $scope.apiVersion = d.ApiVersion;
-        });
-    }]);

app/components/footer/statusbar.html

@@ -1,6 +0,0 @@
-<footer class="center well">
-    <p>
-        <small>Docker API Version: <strong>{{ apiVersion }}</strong> UI Version: <strong>{{ uiVersion }}</strong> <a
-                class="pull-right" href="https://github.com/crosbymichael/dockerui">dockerui</a></small>
-    </p>
-</footer>

app/components/image/image.html

@@ -1,120 +1,100 @@
-<div ng-include="template" ng-controller="StartContainerController"></div>
+<rd-header>
+  <rd-header-title title="Image details"></rd-header-title>
+  <rd-header-content>
+    Images > <a ui-sref="image({id: id})">{{ id }}</a>
+  </rd-header-content>
+</rd-header>
 
-<div class="alert alert-error" id="error-message" style="display:none">
-    {{ error }}
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-body>
+        <div class="widget-icon grey pull-left">
+          <i class="fa fa-clone"></i>
+        </div>
+        <div class="title">{{ id }}</div>
+        <div class="comment">Image ID</div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
 </div>
-
-<div class="detail">
-
-    <h4>Image: {{ id }}</h4>
-
-    <div class="btn-group detail">
-        <button class="btn btn-success" data-toggle="modal" data-target="#create-modal">Start Container</button>
-    </div>
-
-    <div>
-        <h4>Containers created:</h4>
-        <canvas id="containers-started-chart" width="750">
-            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a
-                    href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
-        </canvas>
-    </div>
-
-    <table class="table table-striped">
-        <tbody>
-        <tr>
-            <td>Tags:</td>
-            <td>
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-body>
+        <div class="widget-icon grey pull-left">
+          <i class="fa fa-cogs"></i>
+        </div>
+        <div class="title">
+          <div class="btn-group" role="group" aria-label="...">
+            <button class="btn btn-danger" ng-click="removeImage(id)">Remove</button>
+          </div>
+        </div>
+        <div class="comment">
+          Actions
+        </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+<div class="row">
+  <div class="col-lg-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-clone" title="Image details"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table">
+          <tbody>
+            <tr>
+              <td>Created</td>
+              <td>{{ image.Created | date: 'medium'}}</td>
+            </tr>
+            <tr>
+              <td>Tags</td>
+              <td>
                 <ul>
-                    <li ng-repeat="tag in RepoTags">{{ tag }}
-                        <button ng-click="removeImage(tag)" class="btn btn-sm btn-danger">Remove tag</button>
-                    </li>
+                  <li ng-repeat="tag in RepoTags">{{ tag }}
+                    <button ng-click="removeImage(tag)" class="btn btn-sm btn-danger">Remove tag</button>
+                  </li>
                 </ul>
-            </td>
-        </tr>
-        <tr>
-            <td>Created:</td>
-            <td>{{ image.Created | date: 'medium'}}</td>
-        </tr>
-        <tr>
-            <td>Parent:</td>
-            <td><a href="#/images/{{ image.Parent }}/">{{ image.Parent }}</a></td>
-        </tr>
-        <tr>
-            <td>Size (Virtual Size):</td>
-            <td>{{ image.Size|humansize }} ({{ image.VirtualSize|humansize }})</td>
-        </tr>
+              </td>
+            </tr>
+            <tr>
+              <td>Parent</td>
+              <td><a ui-sref="image({id: image.Parent})">{{ image.Parent }}</a></td>
+            </tr>
+            <tr>
+              <td>Size (Virtual Size)</td>
+              <td>{{ image.Size|humansize }} ({{ image.VirtualSize|humansize }})</td>
+            </tr>
 
-        <tr>
-            <td>Hostname:</td>
-            <td>{{ image.ContainerConfig.Hostname }}</td>
-        </tr>
-        <tr>
-            <td>User:</td>
-            <td>{{ image.ContainerConfig.User }}</td>
-        </tr>
-        <tr>
-            <td>Cmd:</td>
-            <td>{{ image.ContainerConfig.Cmd }}</td>
-        </tr>
-        <tr>
-            <td>Volumes:</td>
-            <td>{{ image.ContainerConfig.Volumes }}</td>
-        </tr>
-        <tr>
-            <td>Volumes from:</td>
-            <td>{{ image.ContainerConfig.VolumesFrom }}</td>
-        </tr>
-        <tr>
-            <td>Built with:</td>
-            <td>Docker {{ image.DockerVersion }} on {{ image.Os}}, {{ image.Architecture }}</td>
-        </tr>
-
-        </tbody>
-    </table>
-
-    <div class="row-fluid">
-        <div class="span1">
-            History:
-        </div>
-        <div class="span5">
-            <i class="icon-refresh" style="width:32px;height:32px;" ng-click="getHistory()"></i>
-        </div>
-    </div>
-
-    <div class="well well-large">
-        <ul>
-            <li ng-repeat="change in history">
-                <strong>{{ change.Id }}</strong>: Created: {{ change.Created|getdate }} Created by: {{ change.CreatedBy
-                }}
-            </li>
-        </ul>
-    </div>
-
-    <hr/>
-
-    <div class="row-fluid">
-        <form class="form-inline" role="form">
-            <fieldset>
-                <legend>Tag image</legend>
-                <div class="form-group">
-                    <label>Tag:</label>
-                    <input type="text" placeholder="repo" ng-model="tagInfo.repo" class="form-control">
-                    <input type="text" placeholder="version" ng-model="tagInfo.version" class="form-control">
-                </div>
-                <div class="form-group">
-                    <label class="checkbox">
-                        <input type="checkbox" ng-model="tagInfo.force" class="form-control"/> Force?
-                    </label>
-                </div>
-                <input type="button" ng-click="addTag()" value="Add Tag" class="btn btn-primary"/>
-            </fieldset>
-        </form>
-    </div>
-
-    <hr/>
-
-    <div class="btn-remove">
-        <button class="btn btn-large btn-block btn-primary btn-danger" ng-click="removeImage(id)">Remove Image</button>
-    </div>
+            <tr>
+              <td>Hostname</td>
+              <td>{{ image.ContainerConfig.Hostname }}</td>
+            </tr>
+            <tr>
+              <td>User</td>
+              <td>{{ image.ContainerConfig.User }}</td>
+            </tr>
+            <tr>
+              <td>Cmd</td>
+              <td>{{ image.ContainerConfig.Cmd }}</td>
+            </tr>
+            <tr>
+              <td>Volumes</td>
+              <td>{{ image.ContainerConfig.Volumes }}</td>
+            </tr>
+            <tr>
+              <td>Volumes from</td>
+              <td>{{ image.ContainerConfig.VolumesFrom }}</td>
+            </tr>
+            <tr>
+              <td>Built with</td>
+              <td>Docker {{ image.DockerVersion }} on {{ image.Os}}, {{ image.Architecture }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
 </div>

app/components/image/imageController.js

@@ -1,106 +1,58 @@
 angular.module('image', [])
-    .controller('ImageController', ['$scope', '$q', '$routeParams', '$location', 'Image', 'Container', 'Messages', 'LineChart',
-        function ($scope, $q, $routeParams, $location, Image, Container, Messages, LineChart) {
-            $scope.history = [];
-            $scope.tagInfo = {repo: '', version: '', force: false};
-            $scope.id = '';
-            $scope.repoTags = [];
+.controller('ImageController', ['$scope', '$q', '$stateParams', '$state', 'Image', 'Container', 'Messages', 'LineChart',
+function ($scope, $q, $stateParams, $state, Image, Container, Messages, LineChart) {
+  $scope.tagInfo = {repo: '', version: '', force: false};
+  $scope.id = '';
+  $scope.repoTags = [];
 
-            $scope.removeImage = function (id) {
-                Image.remove({id: id}, function (d) {
-                    d.forEach(function(msg){
-                        var key = Object.keys(msg)[0];
-                        Messages.send(key, msg[key]);
-                    });
-                    // If last message key is 'Deleted' then assume the image is gone and send to images page
-                    if (d[d.length-1].Deleted) {
-                        $location.path('/images');
-                    } else {
-                        $location.path('/images/' + $scope.id); // Refresh the current page.
-                    }
-                }, function (e) {
-                    $scope.error = e.data;
-                    $('#error-message').show();
-                });
-            };
+  $scope.removeImage = function (id) {
+    Image.remove({id: id}, function (d) {
+      d.forEach(function(msg){
+        var key = Object.keys(msg)[0];
+        Messages.send(key, msg[key]);
+      });
+      // If last message key is 'Deleted' then assume the image is gone and send to images page
+      if (d[d.length-1].Deleted) {
+        $state.go('images', {}, {reload: true});
+      } else {
+        $state.go('image', {id: $scope.id}, {reload: true});
+      }
+    }, function (e) {
+      $scope.error = e.data;
+      $('#error-message').show();
+    });
+  };
 
-            $scope.getHistory = function () {
-                Image.history({id: $routeParams.id}, function (d) {
-                    $scope.history = d;
-                });
-            };
+  /**
+  * Get RepoTags from the /images/query endpoint instead of /image/json,
+  * for backwards compatibility with Docker API versions older than 1.21
+  * @param {string} imageId
+  */
+  function getRepoTags(imageId) {
+    Image.query({}, function (d) {
+      d.forEach(function(image) {
+        if (image.Id === imageId && image.RepoTags[0] !== '<none>:<none>') {
+          $scope.RepoTags = image.RepoTags;
+        }
+      });
+    });
+  }
 
-            $scope.addTag = function () {
-                var tag = $scope.tagInfo;
-                Image.tag({
-                    id: $routeParams.id,
-                    repo: tag.repo,
-                    tag: tag.version,
-                    force: tag.force ? 1 : 0
-                }, function (d) {
-                    Messages.send("Tag Added", $routeParams.id);
-                    $location.path('/images/' + $scope.id);
-                }, function (e) {
-                    $scope.error = e.data;
-                    $('#error-message').show();
-                });
-            };
-
-            function getContainersFromImage($q, Container, imageId) {
-                var defer = $q.defer();
-
-                Container.query({all: 1, notruc: 1}, function (d) {
-                    var containers = [];
-                    for (var i = 0; i < d.length; i++) {
-                        var c = d[i];
-                        if (c.ImageID === imageId) {
-                            containers.push(new ContainerViewModel(c));
-                        }
-                    }
-                    defer.resolve(containers);
-                });
-
-                return defer.promise;
-            }
-
-            /**
-             * Get RepoTags from the /images/query endpoint instead of /image/json,
-             * for backwards compatibility with Docker API versions older than 1.21
-             * @param {string} imageId
-             */
-            function getRepoTags(imageId) {
-                Image.query({}, function (d) {
-                    d.forEach(function(image) {
-                        if (image.Id === imageId && image.RepoTags[0] !== '<none>:<none>') {
-                            $scope.RepoTags = image.RepoTags;
-                        }
-                    });
-                });
-            }
-
-            Image.get({id: $routeParams.id}, function (d) {
-                $scope.image = d;
-                $scope.id = d.Id;
-                if (d.RepoTags) {
-                    $scope.RepoTags = d.RepoTags;
-                } else {
-                    getRepoTags($scope.id);
-                }
-
-                getContainersFromImage($q, Container, $scope.id).then(function (containers) {
-                    LineChart.build('#containers-started-chart', containers, function (c) {
-                        return new Date(c.Created * 1000).toLocaleDateString();
-                    });
-                });
-            }, function (e) {
-                if (e.status === 404) {
-                    $('.detail').hide();
-                    $scope.error = "Image not found.<br />" + $routeParams.id;
-                } else {
-                    $scope.error = e.data;
-                }
-                $('#error-message').show();
-            });
-
-            $scope.getHistory();
-        }]);
+  Image.get({id: $stateParams.id}, function (d) {
+    $scope.image = d;
+    $scope.id = d.Id;
+    if (d.RepoTags) {
+      $scope.RepoTags = d.RepoTags;
+    } else {
+      getRepoTags($scope.id);
+    }
+  }, function (e) {
+    if (e.status === 404) {
+      $('.detail').hide();
+      $scope.error = "Image not found.<br />" + $stateParams.id;
+    } else {
+      $scope.error = e.data;
+    }
+    $('#error-message').show();
+  });
+}]);

app/components/images/images.html

@@ -1,40 +1,107 @@
-<div ng-include="template" ng-controller="BuilderController"></div>
-<div ng-include="template" ng-controller="PullImageController"></div>
+<rd-header>
+  <rd-header-title title="Image list">
+    <a data-toggle="tooltip" title="Refresh" ui-sref="images" ui-sref-opts="{reload: true}">
+      <i class="fa fa-refresh" aria-hidden="true"></i>
+    </a>
+  </rd-header-title>
 
-<h2>Images:</h2>
+  <rd-header-content>Images</rd-header-content>
+</rd-header>
 
-<div>
-    <ul class="nav nav-pills pull-left">
-        <li class="dropdown">
-            <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" data-target="#">Actions <b class="caret"></b></a>
-            <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
-                <li><a tabindex="-1" href="" ng-click="removeAction()">Remove</a></li>
-            </ul>
-        </li>
-        <li><a data-toggle="modal" data-target="#pull-modal" href="">Pull</a></li>
-    </ul>
-
-    <div class="pull-right form-inline">
-        <input type="text" class="form-control" id="filter" placeholder="Filter" ng-model="filter"/> <label class="sr-only" for="filter">Filter</label>
-    </div>
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-download" title="Pull image ">
+      </rd-widget-header>
+      <rd-widget-body>
+        <form class="form-horizontal">
+          <!-- name-input -->
+          <div class="form-group">
+            <label for="image_name" class="col-sm-1 control-label text-left">Name</label>
+            <div class="col-sm-11">
+              <input type="text" class="form-control" ng-model="config.Image" id="image_name" placeholder="e.g. ubuntu:trusty">
+            </div>
+          </div>
+          <!-- !name-input -->
+          <!-- tag-note -->
+          <div class="form-group">
+            <div class="col-sm-12">
+              <span class="small text-muted">Note: if you don't specify the tag in the image name, <span class="label label-default">latest</span> will be used.</span>
+            </div>
+          </div>
+          <!-- !tag-note -->
+          <div class="form-group">
+            <div class="col-sm-12">
+              <button type="button" class="btn btn-default btn-sm" ng-disabled="!config.Image" ng-click="pullImage()">Pull</button>
+            </div>
+          </div>
+        </form>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-clone" title="Images">
+      </rd-widget-header>
+      <rd-widget-taskbar classes="col-lg-12">
+        <div class="pull-left">
+          <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount">Remove</button>
+        </div>
+        <div class="pull-right">
+          <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
+        </div>
+      </rd-widget-taskbar>
+      <rd-widget-body classes="no-padding">
+        <div class="table-responsive">
+          <table class="table">
+            <thead>
+              <tr>
+                <th><label><input type="checkbox" ng-model="state.toggle" ng-change="toggleSelectAll()" /> Select</label></th>
+                <th>
+                  <a ui-sref="images" ng-click="order('Id')">
+                    Id
+                    <span ng-show="sortType == 'Id' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'Id' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
+                <th>
+                  <a ui-sref="images" ng-click="order('RepoTags')">
+                    Repository
+                    <span ng-show="sortType == 'RepoTags' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'RepoTags' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
+                <th>
+                  <a ui-sref="images" ng-click="order('VirtualSize')">
+                    VirtualSize
+                    <span ng-show="sortType == 'VirtualSize' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'VirtualSize' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
+                <th>
+                  <a ui-sref="images" ng-click="order('Created')">
+                    Created
+                    <span ng-show="sortType == 'Created' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'Created' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr ng-repeat="image in (state.filteredImages = (images | filter:state.filter | orderBy:sortType:sortReverse))">
+                <td><input type="checkbox" ng-model="image.Checked" ng-change="selectItem(image)" /></td>
+                <td><a ui-sref="image({id: image.Id})">{{ image.Id|truncate:20}}</a></td>
+                <td>{{ image|repotag }}</td>
+                <td>{{ image.VirtualSize|humansize }}</td>
+                <td>{{ image.Created|getdate }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </rd-widget-body>
+    <rd-widget>
+  </div>
 </div>
-<table class="table table-striped">
-    <thead>
-        <tr>
-            <th><input type="checkbox" ng-model="toggle" ng-change="toggleSelectAll()" /> Action</th>
-            <th>Id</th>
-            <th>Repository</th>
-            <th>VirtualSize</th>
-            <th>Created</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr ng-repeat="image in images | filter:filter | orderBy:predicate">
-            <td><input type="checkbox" ng-model="image.Checked" /></td>
-            <td><a href="#/images/{{ image.Id }}/?tag={{ image|repotag }}">{{ image.Id|truncate:20}}</a></td>
-            <td>{{ image|repotag }}</td>
-            <td>{{ image.VirtualSize|humansize }}</td>
-            <td>{{ image.Created|getdate }}</td>
-        </tr>
-    </tbody>
-</table>

app/components/images/imagesController.js

@@ -1,54 +1,108 @@
 angular.module('images', [])
-    .controller('ImagesController', ['$scope', 'Image', 'ViewSpinner', 'Messages',
-        function ($scope, Image, ViewSpinner, Messages) {
-            $scope.toggle = false;
-            $scope.predicate = '-Created';
+.controller('ImagesController', ['$scope', '$state', 'Image', 'ViewSpinner', 'Messages',
+function ($scope, $state, Image, ViewSpinner, Messages) {
+  $scope.state = {};
+  $scope.sortType = 'Created';
+  $scope.sortReverse = true;
+  $scope.state.toggle = false;
+  $scope.state.selectedItemCount = 0;
 
-            $scope.showBuilder = function () {
-                $('#build-modal').modal('show');
-            };
+  $scope.config = {
+    Image: ''
+  };
 
-            $scope.removeAction = function () {
-                ViewSpinner.spin();
-                var counter = 0;
-                var complete = function () {
-                    counter = counter - 1;
-                    if (counter === 0) {
-                        ViewSpinner.stop();
-                    }
-                };
-                angular.forEach($scope.images, function (i) {
-                    if (i.Checked) {
-                        counter = counter + 1;
-                        Image.remove({id: i.Id}, function (d) {
-                            angular.forEach(d, function (resource) {
-                                Messages.send("Image deleted", resource.Deleted);
-                            });
-                            var index = $scope.images.indexOf(i);
-                            $scope.images.splice(index, 1);
-                            complete();
-                        }, function (e) {
-                            Messages.error("Failure", e.data);
-                            complete();
-                        });
-                    }
-                });
-            };
+  $scope.order = function(sortType) {
+    $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
+    $scope.sortType = sortType;
+  };
 
-            $scope.toggleSelectAll = function () {
-                angular.forEach($scope.images, function (i) {
-                    i.Checked = $scope.toggle;
-                });
-            };
+  $scope.toggleSelectAll = function () {
+    angular.forEach($scope.state.filteredImages, function (i) {
+      i.Checked = $scope.state.toggle;
+    });
+    if ($scope.state.toggle) {
+      $scope.state.selectedItemCount = $scope.state.filteredImages.length;
+    } else {
+      $scope.state.selectedItemCount = 0;
+    }
+  };
 
-            ViewSpinner.spin();
-            Image.query({}, function (d) {
-                $scope.images = d.map(function (item) {
-                    return new ImageViewModel(item);
-                });
-                ViewSpinner.stop();
-            }, function (e) {
-                Messages.error("Failure", e.data);
-                ViewSpinner.stop();
-            });
-        }]);
+  $scope.selectItem = function (item) {
+    if (item.Checked) {
+      $scope.state.selectedItemCount++;
+    } else {
+      $scope.state.selectedItemCount--;
+    }
+  };
+
+  function createImageConfig(imageName) {
+    var imageNameAndTag = imageName.split(':');
+    var imageConfig = {
+      fromImage: imageNameAndTag[0],
+      tag: imageNameAndTag[1] ? imageNameAndTag[1] : 'latest'
+    };
+    return imageConfig;
+  }
+
+  $scope.pullImage = function() {
+    ViewSpinner.spin();
+    var image = _.toLower($scope.config.Image);
+    var imageConfig = createImageConfig(image);
+    Image.create(imageConfig, function (data) {
+        var err = data.length > 0 && data[data.length - 1].hasOwnProperty('error');
+        if (err) {
+          var detail = data[data.length - 1];
+          ViewSpinner.stop();
+          Messages.error('Error', detail.error);
+        } else {
+          ViewSpinner.stop();
+          $state.go('images', {}, {reload: true});
+        }
+    }, function (e) {
+      ViewSpinner.stop();
+      Messages.error('Error', 'Unable to pull image ' + image);
+    });
+  };
+
+  $scope.removeAction = function () {
+    ViewSpinner.spin();
+    var counter = 0;
+    var complete = function () {
+      counter = counter - 1;
+      if (counter === 0) {
+        ViewSpinner.stop();
+      }
+    };
+    angular.forEach($scope.images, function (i) {
+      if (i.Checked) {
+        counter = counter + 1;
+        Image.remove({id: i.Id}, function (d) {
+          angular.forEach(d, function (resource) {
+            Messages.send("Image deleted", resource.Deleted);
+          });
+          var index = $scope.images.indexOf(i);
+          $scope.images.splice(index, 1);
+          complete();
+        }, function (e) {
+          Messages.error("Failure", e.data);
+          complete();
+        });
+      }
+    });
+  };
+
+  function fetchImages() {
+    ViewSpinner.spin();
+    Image.query({}, function (d) {
+      $scope.images = d.map(function (item) {
+        return new ImageViewModel(item);
+      });
+      ViewSpinner.stop();
+    }, function (e) {
+      Messages.error("Failure", e.data);
+      ViewSpinner.stop();
+    });
+  }
+
+  fetchImages();
+}]);

app/components/info/info.html

@@ -1,110 +0,0 @@
-<div class="detail">
-    <h2>Docker Information</h2>
-
-    <div>
-        <p class="lead">
-            <strong>API Endpoint: </strong>{{ endpoint }}<br/>
-            <strong>API Version: </strong>{{ docker.ApiVersion }}<br/>
-            <strong>Docker version: </strong>{{ docker.Version }}<br/>
-            <strong>Git Commit: </strong>{{ docker.GitCommit }}<br/>
-            <strong>Go Version: </strong>{{ docker.GoVersion }}<br/>
-        </p>
-    </div>
-
-    <table class="table table-striped">
-        <tbody>
-        <tr>
-            <td>Containers:</td>
-            <td>{{ info.Containers }}</td>
-        </tr>
-        <tr>
-            <td>Images:</td>
-            <td>{{ info.Images }}</td>
-        </tr>
-        <tr>
-            <td>Debug:</td>
-            <td>{{ info.Debug }}</td>
-        </tr>
-        <tr>
-            <td>CPUs:</td>
-            <td>{{ info.NCPU }}</td>
-        </tr>
-        <tr>
-            <td>Total Memory:</td>
-            <td>{{ info.MemTotal|humansize }}</td>
-        </tr>
-        <tr>
-            <td>Operating System:</td>
-            <td>{{ info.OperatingSystem }}</td>
-        </tr>
-        <tr>
-            <td>Kernel Version:</td>
-            <td>{{ info.KernelVersion }}</td>
-        </tr>
-        <tr>
-            <td>ID:</td>
-            <td>{{ info.ID }}</td>
-        </tr>
-        <tr>
-            <td>Labels:</td>
-            <td>{{ info.Labels }}</td>
-        </tr>
-        <tr>
-            <td>File Descriptors:</td>
-            <td>{{ info.NFd }}</td>
-        </tr>
-        <tr>
-            <td>Goroutines:</td>
-            <td>{{ info.NGoroutines }}</td>
-        </tr>
-        <tr>
-            <td>Storage Driver:</td>
-            <td>{{ info.Driver }}</td>
-        </tr>
-        <tr>
-            <td>Storage Driver Status:</td>
-            <td>
-                <p ng-repeat="val in info.DriverStatus">
-                    {{ val[0] }}: {{ val[1] }}
-                </p>
-            </td>
-        </tr>
-        <tr>
-            <td>Execution Driver:</td>
-            <td>{{ info.ExecutionDriver }}</td>
-        </tr>
-        <tr>
-            <td>Events:</td>
-            <td><a href="#/events">Events</a></td>
-        </tr>
-        <tr>
-            <td>IPv4 Forwarding:</td>
-            <td>{{ info.IPv4Forwarding }}</td>
-        </tr>
-        <tr>
-            <td>Index Server Address:</td>
-            <td>{{ info.IndexServerAddress }}</td>
-        </tr>
-        <tr>
-            <td>Init Path:</td>
-            <td>{{ info.InitPath }}</td>
-        </tr>
-        <tr>
-            <td>Docker Root Directory:</td>
-            <td>{{ info.DockerRootDir }}</td>
-        </tr>
-        <tr>
-            <td>Init SHA1</td>
-            <td>{{ info.InitSha1 }}</td>
-        </tr>
-        <tr>
-            <td>Memory Limit:</td>
-            <td>{{ info.MemoryLimit }}</td>
-        </tr>
-        <tr>
-            <td>Swap Limit:</td>
-            <td>{{ info.SwapLimit }}</td>
-        </tr>
-        </tbody>
-    </table>
-</div>

app/components/info/infoController.js

@@ -1,15 +0,0 @@
-angular.module('info', [])
-    .controller('InfoController', ['$scope', 'System', 'Docker', 'Settings', 'Messages',
-        function ($scope, System, Docker, Settings, Messages) {
-            $scope.info = {};
-            $scope.docker = {};
-            $scope.endpoint = Settings.endpoint;
-            $scope.apiVersion = Settings.version;
-
-            Docker.get({}, function (d) {
-                $scope.docker = d;
-            });
-            System.get({}, function (d) {
-                $scope.info = d;
-            });
-        }]);

app/components/masthead/masthead.html

@@ -1,10 +0,0 @@
-<div class="masthead">
-    <h3 class="text-muted">DockerUI</h3>
-    <ul class="nav well">
-        <li><a href="#/">Dashboard</a></li>
-        <li><a href="#/containers/">Containers</a></li>
-        <li><a href="#/containers_network/">Containers Network</a></li>
-        <li><a href="#/images/">Images</a></li>
-        <li><a href="#/info/">Info</a></li>
-    </ul>
-</div>

app/components/masthead/mastheadController.js

@@ -1,4 +0,0 @@
-angular.module('masthead', [])
-    .controller('MastheadController', ['$scope', function ($scope) {
-        $scope.template = 'app/components/masthead/masthead.html';
-    }]);

app/components/network/network.html

@@ -0,0 +1,127 @@
+<rd-header>
+  <rd-header-title title="Network details"></rd-header-title>
+  <rd-header-content>
+    Networks > <a ui-sref="network({id: network.Id})">{{ network.Name }}</a>
+  </rd-header-content>
+</rd-header>
+
+<div class="row">
+  <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>Id</td>
+              <td>{{ network.Id }}</td>
+            </tr>
+            <tr>
+              <td>Scope</td>
+              <td>{{ network.Scope }}</td>
+            </tr>
+            <tr>
+              <td>Driver</td>
+              <td>{{ network.Driver }}</td>
+            </tr>
+            <tr>
+              <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>
+              <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>
+              <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>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/components/network/networkController.js

@@ -0,0 +1,37 @@
+angular.module('network', [])
+.controller('NetworkController', ['$scope', 'Network', 'ViewSpinner', 'Messages', '$state', '$stateParams', 'errorMsgFilter',
+function ($scope, Network, ViewSpinner, Messages, $state, $stateParams, errorMsgFilter) {
+
+  $scope.disconnect = function disconnect(networkId, containerId) {
+    ViewSpinner.spin();
+    Network.disconnect({id: $stateParams.id}, {Container: containerId}, function (d) {
+      ViewSpinner.stop();
+      Messages.send("Container disconnected", containerId);
+      $state.go('network', {id: $stateParams.id}, {reload: true});
+    }, function (e) {
+      ViewSpinner.stop();
+      Messages.error("Failure", e.data);
+    });
+  };
+
+  $scope.remove = function remove(networkId) {
+    ViewSpinner.spin();
+    Network.remove({id: $stateParams.id}, function (d) {
+      ViewSpinner.stop();
+      Messages.send("Network removed", "");
+      $state.go('networks', {});
+    }, function (e) {
+      ViewSpinner.stop();
+      Messages.error("Failure", e.data);
+    });
+  };
+
+  ViewSpinner.spin();
+  Network.get({id: $stateParams.id}, function (d) {
+    $scope.network = d;
+    ViewSpinner.stop();
+  }, function (e) {
+    Messages.error("Failure", e.data);
+    ViewSpinner.stop();
+  });
+}]);

app/components/networks/networks.html

@@ -0,0 +1,99 @@
+<div ng-include="template" ng-controller="CreateNetworkController"></div>
+
+<rd-header>
+  <rd-header-title title="Network list">
+    <a data-toggle="tooltip" title="Refresh" ui-sref="networks" ui-sref-opts="{reload: true}">
+      <i class="fa fa-refresh" aria-hidden="true"></i>
+    </a>
+  </rd-header-title>
+  <rd-header-content>Networks</rd-header-content>
+</rd-header>
+
+
+<div class="col-lg-12">
+  <rd-widget>
+    <rd-widget-header icon="fa-sitemap" title="Networks">
+    </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>
+        <a class="btn btn-default" type="button" ui-sref="actions.create.network">Add network</a>
+      </div>
+      <div class="pull-right">
+        <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
+      </div>
+    </rd-widget-taskbar>
+    <rd-widget-body classes="no-padding">
+      <div class="table-responsive">
+        <table class="table">
+          <thead>
+            <tr>
+              <th><label><input type="checkbox" ng-model="state.toggle" ng-change="toggleSelectAll()"/> Select</label></th>
+              <th>
+                <a ui-sref="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:20}}</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 }}</td>
+              <td>{{ network.IPAM.Config[0].Gateway }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </rd-widget-body>
+  <rd-widget>
+</div>

app/components/networks/networksController.js

@@ -0,0 +1,71 @@
+angular.module('networks', [])
+.controller('NetworksController', ['$scope', 'Network', 'ViewSpinner', 'Messages', 'errorMsgFilter',
+function ($scope, Network, ViewSpinner, Messages, errorMsgFilter) {
+
+  $scope.state = {};
+  $scope.state.toggle = false;
+  $scope.state.selectedItemCount = 0;
+  $scope.sortType = 'Name';
+  $scope.sortReverse = true;
+
+  $scope.order = function(sortType) {
+    $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
+    $scope.sortType = sortType;
+  };
+
+  $scope.toggleSelectAll = function () {
+    angular.forEach($scope.state.filteredNetworks, function (i) {
+      i.Checked = $scope.state.toggle;
+    });
+    if ($scope.state.toggle) {
+      $scope.state.selectedItemCount = $scope.state.filteredNetworks.length;
+    } else {
+      $scope.state.selectedItemCount = 0;
+    }
+  };
+
+  $scope.selectItem = function (item) {
+    if (item.Checked) {
+      $scope.state.selectedItemCount++;
+    } else {
+      $scope.state.selectedItemCount--;
+    }
+  };
+
+  $scope.removeAction = function () {
+    ViewSpinner.spin();
+    var counter = 0;
+    var complete = function () {
+      counter = counter - 1;
+      if (counter === 0) {
+        ViewSpinner.stop();
+      }
+    };
+    angular.forEach($scope.networks, function (network) {
+      if (network.Checked) {
+        counter = counter + 1;
+        Network.remove({id: network.Id}, function (d) {
+          Messages.send("Network deleted", network.Id);
+          var index = $scope.networks.indexOf(network);
+          $scope.networks.splice(index, 1);
+          complete();
+        }, function (e) {
+          Messages.error("Failure", e.data);
+          complete();
+        });
+      }
+    });
+  };
+
+  function fetchNetworks() {
+    ViewSpinner.spin();
+    Network.query({}, function (d) {
+      $scope.networks = d;
+      ViewSpinner.stop();
+    }, function (e) {
+      Messages.error("Failure", e.data);
+      ViewSpinner.stop();
+    });
+  }
+  fetchNetworks();
+}]);

app/components/pullImage/pullImage.html

@@ -1,44 +0,0 @@
-<div id="pull-modal" class="modal fade">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                <h3>Pull Image</h3>
-            </div>
-            <div class="modal-body">
-                <form novalidate role="form" name="pullForm">
-                    <!--<div class="input-group">
-                        <span class="input-group-addon" id="basic-addon1">Image name</span>
-                        <input type="text" class="form-control" placeholder="imageName" aria-describedby="basic-addon1">
-                    </div>-->
-                    <div class="form-group">
-                        <label>Registry:</label>
-                        <input type="text" ng-model="config.registry" class="form-control"
-                               placeholder="Registry. Leave empty to user docker hub"/>
-                    </div>
-                    <div class="form-group">
-                        <label>Repo:</label>
-                        <input type="text" ng-model="config.repo" class="form-control"
-                               placeholder="Repository - usually your username."/>
-                    </div>
-                    <div class="form-group">
-                        <label>Image Name:</label>
-                        <input type="text" ng-model="config.fromImage" class="form-control" placeholder="Image name"
-                               required/>
-                    </div>
-                    <div class="form-group">
-                        <label>Tag Name:</label>
-                        <input type="text" ng-model="config.tag" class="form-control"
-                               placeholder="Tag name. If empty it will download ALL tags."/>
-                    </div>
-                </form>
-            </div>
-            <div class="alert alert-error" id="error-message" style="display:none">
-                {{ error }}
-            </div>
-            <div class="modal-footer">
-                <a href="" class="btn btn-primary" ng-click="pull()">Pull</a>
-            </div>
-        </div>
-    </div>
-</div>

app/components/pullImage/pullImageController.js

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

app/components/sidebar/sidebar.html

@@ -1,11 +0,0 @@
-<div class="well">
-    <strong>Running containers:</strong>
-    <br/>
-    <strong>Endpoint: </strong>{{ endpoint }}
-    <ul>
-        <li ng-repeat="container in containers">
-            <a href="#/containers/{{ container.Id }}/">{{ container.Id|truncate:20 }}</a>
-            <span class="pull-right label label-{{ container.Status|statusbadge }}">{{ container.Status }}</span>
-        </li>
-    </ul>
-</div> 

app/components/sidebar/sidebarController.js

@@ -1,11 +0,0 @@
-angular.module('sidebar', [])
-    .controller('SideBarController', ['$scope', 'Container', 'Settings',
-        function ($scope, Container, Settings) {
-            $scope.template = 'partials/sidebar.html';
-            $scope.containers = [];
-            $scope.endpoint = Settings.endpoint;
-
-            Container.query({all: 0}, function (d) {
-                $scope.containers = d;
-            });
-        }]);

app/components/startContainer/startContainerController.js

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

app/components/startContainer/startcontainer.html

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

app/components/stats/stats.html

@@ -1,67 +1,74 @@
+<rd-header>
+  <rd-header-title title="Container stats"></rd-header-title>
+  <rd-header-content>
+    Containers > <a ui-sref="container({id: container.Id})">{{ container.Name|trimcontainername }}</a> > Stats
+  </rd-header-content>
+</rd-header>
+
 <div class="row">
-    <div class="col-xs-12">
-        <h1>Stats</h1>
-
-        <h2>CPU</h2>
-
-        <div class="row">
-            <div class="col-sm-7">
-                <canvas id="cpu-stats-chart" width="650" height="300"></canvas>
-            </div>
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-body>
+        <div class="widget-icon grey pull-left">
+          <i class="fa fa-tasks"></i>
         </div>
-
-        <h2>Memory</h2>
-
-        <div class="row">
-            <div class="col-sm-7">
-                <canvas id="memory-stats-chart" width="650" height="300"></canvas>
-            </div>
-            <div class="col-sm-offset-1 col-sm-4">
-                <table class="table">
-                    <tr>
-                        <td>Max usage</td>
-                        <td>{{ data.memory_stats.max_usage | humansize }}</td>
-                    </tr>
-                    <tr>
-                        <td>Limit</td>
-                        <td>{{ data.memory_stats.limit | humansize }}</td>
-                    </tr>
-                    <tr>
-                        <td>Fail count</td>
-                        <td>{{ data.memory_stats.failcnt }}</td>
-                    </tr>
-                </table>
-                <accordion>
-                    <accordion-group heading="Other stats">
-                        <table class="table">
-                            <tr ng-repeat="(key, value) in data.memory_stats.stats">
-                                <td>{{ key }}</td>
-                                <td>{{ value }}</td>
-                            </tr>
-                        </table>
-                    </accordion-group>
-                </accordion>
-            </div>
+        <div class="title">{{ container.Name|trimcontainername }}</div>
+        <div class="comment">
+          Name
         </div>
-
-        <h1>Network</h1>
-        <div class="row">
-            <div class="col-sm-7">
-                <canvas id="network-stats-chart" width="650" height="300"></canvas>
-            </div>
-            <div class="col-sm-offset-1 col-sm-4">
-                <div id="network-legend" style="margin-bottom: 20px;"></div>
-                <accordion>
-                    <accordion-group heading="Other stats">
-                        <table class="table">
-                            <tr ng-repeat="(key, value) in data.network">
-                                <td>{{ key }}</td>
-                                <td>{{ value }}</td>
-                            </tr>
-                        </table>
-                    </accordion-group>
-                </accordion>
-            </div>
-        </div>
-    </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-6">
+    <rd-widget>
+      <rd-widget-header icon="fa-area-chart" title="CPU usage"></rd-widget-header>
+      <rd-widget-body>
+        <canvas id="cpu-stats-chart" width="770" height="230"></canvas>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+  <div class="col-lg-6">
+    <rd-widget>
+      <rd-widget-header icon="fa-area-chart" title="Memory usage"></rd-widget-header>
+      <rd-widget-body>
+        <canvas id="memory-stats-chart" width="770" height="230"></canvas>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-6">
+    <rd-widget>
+      <rd-widget-header icon="fa-area-chart" title="Network usage"></rd-widget-header>
+      <rd-widget-body>
+        <canvas id="network-stats-chart" width="770" height="230"></canvas>
+        <div class="comment">
+          <div id="network-legend" style="margin-bottom: 20px;"></div>
+        </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+  <div class="col-lg-6">
+    <rd-widget>
+      <rd-widget-header icon="fa-tasks" title="Processes"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table table-striped">
+          <thead>
+            <tr>
+              <th ng-repeat="title in containerTop.Titles">{{title}}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr ng-repeat="processInfos in containerTop.Processes">
+              <td ng-repeat="processInfo in processInfos track by $index">{{processInfo}}</td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
 </div>

app/components/stats/statsController.js

@@ -1,187 +1,194 @@
 angular.module('stats', [])
-    .controller('StatsController', ['Settings', '$scope', 'Messages', '$timeout', 'Container', '$routeParams', 'humansizeFilter', '$sce', function (Settings, $scope, Messages, $timeout, Container, $routeParams, humansizeFilter, $sce) {
-        // TODO: Implement memory chart, force scale to 0-100 for cpu, 0 to limit for memory, fix charts on dashboard,
-        // TODO: Force memory scale to 0 - max memory
-        //var initialStats = {}; // Used to set scale of memory graph.
-        //
-        //Container.stats({id: $routeParams.id}, function (d) {
-        //    var arr = Object.keys(d).map(function (key) {
-        //        return d[key];
-        //    });
-        //    if (arr.join('').indexOf('no such id') !== -1) {
-        //        Messages.error('Unable to retrieve stats', 'Is this container running?');
-        //        return;
-        //    }
-        //    initialStats = d;
-        //}, function () {
-        //    Messages.error('Unable to retrieve stats', 'Is this container running?');
-        //});
+.controller('StatsController', ['Settings', '$scope', 'Messages', '$timeout', 'Container', 'ContainerTop', '$stateParams', 'humansizeFilter', '$sce', '$document',
+function (Settings, $scope, Messages, $timeout, Container, ContainerTop, $stateParams, humansizeFilter, $sce, $document) {
+  // TODO: Force scale to 0-100 for cpu, fix charts on dashboard,
+  // TODO: Force memory scale to 0 - max memory
+  $scope.ps_args = '';
+  $scope.getTop = function () {
+      ContainerTop.get($stateParams.id, {
+          ps_args: $scope.ps_args
+      }, function (data) {
+          $scope.containerTop = data;
+      });
+  };
+  $document.ready(function(){
+    var cpuLabels = [];
+    var cpuData = [];
+    var memoryLabels = [];
+    var memoryData = [];
+    var networkLabels = [];
+    var networkTxData = [];
+    var networkRxData = [];
+    for (var i = 0; i < 20; i++) {
+      cpuLabels.push('');
+      cpuData.push(0);
+      memoryLabels.push('');
+      memoryData.push(0);
+      networkLabels.push('');
+      networkTxData.push(0);
+      networkRxData.push(0);
+    }
+    var cpuDataset = { // CPU Usage
+      fillColor: "rgba(151,187,205,0.5)",
+      strokeColor: "rgba(151,187,205,1)",
+      pointColor: "rgba(151,187,205,1)",
+      pointStrokeColor: "#fff",
+      data: cpuData
+    };
+    var memoryDataset = {
+      fillColor: "rgba(151,187,205,0.5)",
+      strokeColor: "rgba(151,187,205,1)",
+      pointColor: "rgba(151,187,205,1)",
+      pointStrokeColor: "#fff",
+      data: memoryData
+    };
+    var networkRxDataset = {
+      label: "Rx Bytes",
+      fillColor: "rgba(151,187,205,0.5)",
+      strokeColor: "rgba(151,187,205,1)",
+      pointColor: "rgba(151,187,205,1)",
+      pointStrokeColor: "#fff",
+      data: networkRxData
+    };
+    var networkTxDataset = {
+      label: "Tx Bytes",
+      fillColor: "rgba(255,180,174,0.5)",
+      strokeColor: "rgba(255,180,174,1)",
+      pointColor: "rgba(255,180,174,1)",
+      pointStrokeColor: "#fff",
+      data: networkTxData
+    };
+    var networkLegendData = [
+      {
+        //value: '',
+        color: 'rgba(151,187,205,0.5)',
+        title: 'Rx Data'
+      },
+      {
+        //value: '',
+        color: 'rgba(255,180,174,0.5)',
+        title: 'Tx Data'
+      }
+    ];
 
-        var cpuLabels = [];
-        var cpuData = [];
-        var memoryLabels = [];
-        var memoryData = [];
-        var networkLabels = [];
-        var networkTxData = [];
-        var networkRxData = [];
-        for (var i = 0; i < 20; i++) {
-            cpuLabels.push('');
-            cpuData.push(0);
-            memoryLabels.push('');
-            memoryData.push(0);
-            networkLabels.push('');
-            networkTxData.push(0);
-            networkRxData.push(0);
-        }
-        var cpuDataset = { // CPU Usage
-            fillColor: "rgba(151,187,205,0.5)",
-            strokeColor: "rgba(151,187,205,1)",
-            pointColor: "rgba(151,187,205,1)",
-            pointStrokeColor: "#fff",
-            data: cpuData
-        };
-        var memoryDataset = {
-            fillColor: "rgba(151,187,205,0.5)",
-            strokeColor: "rgba(151,187,205,1)",
-            pointColor: "rgba(151,187,205,1)",
-            pointStrokeColor: "#fff",
-            data: memoryData
-        };
-        var networkRxDataset = {
-            label: "Rx Bytes",
-            fillColor: "rgba(151,187,205,0.5)",
-            strokeColor: "rgba(151,187,205,1)",
-            pointColor: "rgba(151,187,205,1)",
-            pointStrokeColor: "#fff",
-            data: networkRxData
-        };
-        var networkTxDataset = {
-            label: "Tx Bytes",
-            fillColor: "rgba(255,180,174,0.5)",
-            strokeColor: "rgba(255,180,174,1)",
-            pointColor: "rgba(255,180,174,1)",
-            pointStrokeColor: "#fff",
-            data: networkTxData
-        };
-        var networkLegendData = [
-            {
-                //value: '',
-                color: 'rgba(151,187,205,0.5)',
-                title: 'Rx Data'
-            },
-            {
-                //value: '',
-                color: 'rgba(255,180,174,0.5)',
-                title: 'Rx Data'
-            }];
-        legend($('#network-legend').get(0), networkLegendData);
+    legend($('#network-legend').get(0), networkLegendData);
 
-        Chart.defaults.global.animationSteps = 30; // Lower from 60 to ease CPU load.
-        var cpuChart = new Chart($('#cpu-stats-chart').get(0).getContext("2d")).Line({
-            labels: cpuLabels,
-            datasets: [cpuDataset]
-        }, {
-            responsive: true
+    Chart.defaults.global.animationSteps = 30; // Lower from 60 to ease CPU load.
+    var cpuChart = new Chart($('#cpu-stats-chart').get(0).getContext("2d")).Line({
+      labels: cpuLabels,
+      datasets: [cpuDataset]
+    }, {
+      responsive: true
+    });
+
+    var memoryChart = new Chart($('#memory-stats-chart').get(0).getContext('2d')).Line({
+      labels: memoryLabels,
+      datasets: [memoryDataset]
+    },
+    {
+      scaleLabel: function (valueObj) {
+        return humansizeFilter(parseInt(valueObj.value, 10));
+      },
+      responsive: true
+      //scaleOverride: true,
+      //scaleSteps: 10,
+      //scaleStepWidth: Math.ceil(initialStats.memory_stats.limit / 10),
+      //scaleStartValue: 0
+    });
+    var networkChart = new Chart($('#network-stats-chart').get(0).getContext("2d")).Line({
+      labels: networkLabels,
+      datasets: [networkRxDataset, networkTxDataset]
+    }, {
+      scaleLabel: function (valueObj) {
+        return humansizeFilter(parseInt(valueObj.value, 10));
+      },
+      responsive: true
+    });
+    $scope.networkLegend = $sce.trustAsHtml(networkChart.generateLegend());
+
+    function updateStats() {
+      Container.stats({id: $stateParams.id}, function (d) {
+        var arr = Object.keys(d).map(function (key) {
+          return d[key];
         });
-
-        var memoryChart = new Chart($('#memory-stats-chart').get(0).getContext('2d')).Line({
-                labels: memoryLabels,
-                datasets: [memoryDataset]
-            },
-            {
-                scaleLabel: function (valueObj) {
-                    return humansizeFilter(parseInt(valueObj.value, 10));
-                },
-                responsive: true
-                //scaleOverride: true,
-                //scaleSteps: 10,
-                //scaleStepWidth: Math.ceil(initialStats.memory_stats.limit / 10),
-                //scaleStartValue: 0
-            });
-        var networkChart = new Chart($('#network-stats-chart').get(0).getContext("2d")).Line({
-            labels: networkLabels,
-            datasets: [networkRxDataset, networkTxDataset]
-        }, {
-            scaleLabel: function (valueObj) {
-                return humansizeFilter(parseInt(valueObj.value, 10));
-            },
-            responsive: true
-        });
-        $scope.networkLegend = $sce.trustAsHtml(networkChart.generateLegend());
-
-        function updateStats() {
-            Container.stats({id: $routeParams.id}, function (d) {
-                var arr = Object.keys(d).map(function (key) {
-                    return d[key];
-                });
-                if (arr.join('').indexOf('no such id') !== -1) {
-                    Messages.error('Unable to retrieve stats', 'Is this container running?');
-                    return;
-                }
-
-                // Update graph with latest data
-                $scope.data = d;
-                updateCpuChart(d);
-                updateMemoryChart(d);
-                updateNetworkChart(d);
-                timeout = $timeout(updateStats, 2000);
-            }, function () {
-                Messages.error('Unable to retrieve stats', 'Is this container running?');
-            });
+        if (arr.join('').indexOf('no such id') !== -1) {
+          Messages.error('Unable to retrieve stats', 'Is this container running?');
+          return;
         }
 
-        var timeout;
-        $scope.$on('$destroy', function () {
-            $timeout.cancel(timeout);
-        });
+        // Update graph with latest data
+        $scope.data = d;
+        updateCpuChart(d);
+        updateMemoryChart(d);
+        updateNetworkChart(d);
+        timeout = $timeout(updateStats, 5000);
+      }, function () {
+        Messages.error('Unable to retrieve stats', 'Is this container running?');
+        timeout = $timeout(updateStats, 5000);
+      });
+    }
 
-        updateStats();
+    var timeout;
+    $scope.$on('$destroy', function () {
+      $timeout.cancel(timeout);
+    });
 
-        function updateCpuChart(data) {
-            console.log('updateCpuChart', data);
-            cpuChart.addData([calculateCPUPercent(data)], new Date(data.read).toLocaleTimeString());
-            cpuChart.removeData();
-        }
+    updateStats();
 
-        function updateMemoryChart(data) {
-            console.log('updateMemoryChart', data);
-            memoryChart.addData([data.memory_stats.usage], new Date(data.read).toLocaleTimeString());
-            memoryChart.removeData();
-        }
+    function updateCpuChart(data) {
+      cpuChart.addData([calculateCPUPercent(data)], new Date(data.read).toLocaleTimeString());
+      cpuChart.removeData();
+    }
 
-        var lastRxBytes = 0, lastTxBytes = 0;
+    function updateMemoryChart(data) {
+      memoryChart.addData([data.memory_stats.usage], new Date(data.read).toLocaleTimeString());
+      memoryChart.removeData();
+    }
 
-        function updateNetworkChart(data) {
-            var rxBytes = 0, txBytes = 0;
-            if (lastRxBytes !== 0 || lastTxBytes !== 0) {
-                // These will be zero on first call, ignore to prevent large graph spike
-                rxBytes = data.network.rx_bytes - lastRxBytes;
-                txBytes = data.network.tx_bytes - lastTxBytes;
-            }
-            lastRxBytes = data.network.rx_bytes;
-            lastTxBytes = data.network.tx_bytes;
-            console.log('updateNetworkChart', data);
-            networkChart.addData([rxBytes, txBytes], new Date(data.read).toLocaleTimeString());
-            networkChart.removeData();
-        }
+    var lastRxBytes = 0, lastTxBytes = 0;
 
-        function calculateCPUPercent(stats) {
-            // Same algorithm the official client uses: https://github.com/docker/docker/blob/master/api/client/stats.go#L195-L208
-            var prevCpu = stats.precpu_stats;
-            var curCpu = stats.cpu_stats;
+    function updateNetworkChart(data) {
+      // 1.9+ contains an object of networks, for now we'll just show stats for the first network
+      // TODO: Show graphs for all networks
+      if (data.networks) {
+        $scope.networkName = Object.keys(data.networks)[0];
+        data.network = data.networks[$scope.networkName];
+      }
+      var rxBytes = 0, txBytes = 0;
+      if (lastRxBytes !== 0 || lastTxBytes !== 0) {
+        // These will be zero on first call, ignore to prevent large graph spike
+        rxBytes = data.network.rx_bytes - lastRxBytes;
+        txBytes = data.network.tx_bytes - lastTxBytes;
+      }
+      lastRxBytes = data.network.rx_bytes;
+      lastTxBytes = data.network.tx_bytes;
+      networkChart.addData([rxBytes, txBytes], new Date(data.read).toLocaleTimeString());
+      networkChart.removeData();
+    }
 
-            var cpuPercent = 0.0;
+    function calculateCPUPercent(stats) {
+      // Same algorithm the official client uses: https://github.com/docker/docker/blob/master/api/client/stats.go#L195-L208
+      var prevCpu = stats.precpu_stats;
+      var curCpu = stats.cpu_stats;
 
-            // calculate the change for the cpu usage of the container in between readings
-            var cpuDelta = curCpu.cpu_usage.total_usage - prevCpu.cpu_usage.total_usage;
-            // calculate the change for the entire system between readings
-            var systemDelta = curCpu.system_cpu_usage - prevCpu.system_cpu_usage;
+      var cpuPercent = 0.0;
 
-            if (systemDelta > 0.0 && cpuDelta > 0.0) {
-                //console.log('size thing:', curCpu.cpu_usage.percpu_usage);
-                cpuPercent = (cpuDelta / systemDelta) * curCpu.cpu_usage.percpu_usage.length * 100.0;
-            }
-            return cpuPercent;
-        }
-    }])
-;
+      // calculate the change for the cpu usage of the container in between readings
+      var cpuDelta = curCpu.cpu_usage.total_usage - prevCpu.cpu_usage.total_usage;
+      // calculate the change for the entire system between readings
+      var systemDelta = curCpu.system_cpu_usage - prevCpu.system_cpu_usage;
+
+      if (systemDelta > 0.0 && cpuDelta > 0.0) {
+        cpuPercent = (cpuDelta / systemDelta) * curCpu.cpu_usage.percpu_usage.length * 100.0;
+      }
+      return cpuPercent;
+    }
+  });
+
+  Container.get({id: $stateParams.id}, function (d) {
+    $scope.container = d;
+  }, function (e) {
+    Messages.error("Failure", e.data);
+  });
+  $scope.getTop();
+}]);

app/components/swarm/swarm.html

@@ -0,0 +1,147 @@
+<rd-header>
+  <rd-header-title title="Cluster overview">
+    <a data-toggle="tooltip" title="Refresh" ui-sref="swarm" ui-sref-opts="{reload: true}">
+      <i class="fa fa-refresh" aria-hidden="true"></i>
+    </a>
+  </rd-header-title>
+  <rd-header-content>Swarm</rd-header-content>
+</rd-header>
+
+<div class="row">
+  <div class="col-lg-3 col-md-6 col-xs-12">
+    <rd-widget>
+      <rd-widget-body>
+        <div class="widget-icon pull-left">
+          <i class="fa fa-code"></i>
+        </div>
+        <div class="title">{{ docker.Version }}</div>
+        <div class="comment">Swarm version</div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+  <div class="col-lg-3 col-md-6 col-xs-12">
+    <rd-widget>
+      <rd-widget-body>
+        <div class="widget-icon pull-left">
+          <i class="fa fa-code"></i>
+        </div>
+        <div class="title">{{ docker.ApiVersion }}</div>
+        <div class="comment">API version</div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+  <div class="col-lg-3 col-md-6 col-xs-12">
+    <rd-widget>
+      <rd-widget-body>
+        <div class="widget-icon pull-left">
+          <i class="fa fa-code"></i>
+        </div>
+        <div class="title">{{ docker.GoVersion }}</div>
+        <div class="comment">Go version</div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-6">
+    <rd-widget>
+      <rd-widget-header icon="fa-object-group" title="Cluster status"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table">
+          <tbody>
+            <tr>
+              <td>Nodes</td>
+              <td>{{ swarm.Nodes }}</td>
+            </tr>
+            <tr>
+              <td>Containers</td>
+              <td>{{ info.Containers }}</td>
+            </tr>
+            <tr>
+              <td>Images</td>
+              <td>{{ info.Images }}</td>
+            </tr>
+            <tr>
+              <td>Strategy</td>
+              <td>{{ swarm.Strategy }}</td>
+            </tr>
+            <tr>
+              <td>CPUs</td>
+              <td>{{ info.NCPU }}</td>
+            </tr>
+            <tr>
+              <td>Total Memory</td>
+              <td>{{ info.MemTotal|humansize }}</td>
+            </tr>
+            <tr>
+              <td>Operating System</td>
+              <td>{{ info.OperatingSystem }}</td>
+            </tr>
+            <tr>
+              <td>Kernel Version</td>
+              <td>{{ info.KernelVersion }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+  <div class="col-lg-6">
+    <rd-widget>
+      <rd-widget-header icon="fa-hdd-o" title="Nodes 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('IP')">
+                  IP
+                  <span ng-show="sortType == 'IP' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'IP' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="swarm" ng-click="order('Containers')">
+                  Containers
+                  <span ng-show="sortType == 'Containers' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Containers' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="swarm" ng-click="order('Engine')">
+                  Engine
+                  <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 = (swarm.Status | filter:state.filter | orderBy:sortType:sortReverse))">
+              <td>{{ node.name }}</td>
+              <td>{{ node.ip }}</td>
+              <td>{{ node.containers }}</td>
+              <td>{{ node.version }}</td>
+              <td><span class="label label-{{ node.status|nodestatusbadge }}">{{ node.status }}</span></td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/components/swarm/swarmController.js

@@ -0,0 +1,62 @@
+angular.module('swarm', [])
+  .controller('SwarmController', ['$scope', 'Info', 'Version', 'Settings',
+    function ($scope, Info, Version, Settings) {
+
+      $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;
+      };
+
+      Version.get({}, function (d) {
+        $scope.docker = d;
+      });
+      Info.get({}, function (d) {
+        $scope.info = d;
+        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 node_count = parseInt(systemStatus[3][1], 10);
+        $scope.swarm[systemStatus[3][0]] = node_count;
+
+        $scope.swarm.Status = [];
+        extractNodesInfo(systemStatus, node_count);
+      }
+
+      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 += 10;
+        }
+      }
+
+      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];
+        node.memory = info[offset + 5][1];
+        node.labels = info[offset + 6][1];
+        node.version = info[offset + 8][1];
+        $scope.swarm.Status.push(node);
+      }
+    }]);

app/components/volumes/volumes.html

@@ -0,0 +1,66 @@
+<div ng-include="template" ng-controller="CreateVolumeController"></div>
+
+<rd-header>
+  <rd-header-title title="Volume list">
+    <a data-toggle="tooltip" title="Refresh" ui-sref="volumes" ui-sref-opts="{reload: true}">
+      <i class="fa fa-refresh" aria-hidden="true"></i>
+    </a>
+  </rd-header-title>
+  <rd-header-content>Volumes</rd-header-content>
+</rd-header>
+
+<div class="col-lg-12">
+  <rd-widget>
+    <rd-widget-header icon="fa-cubes" title="Volumes">
+    </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>
+        <a class="btn btn-default" type="button" ui-sref="actions.create.volume">Add volume</a>
+      </div>
+      <div class="pull-right">
+        <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
+      </div>
+    </rd-widget-taskbar>
+    <rd-widget-body classes="no-padding">
+      <div class="table-responsive">
+        <table class="table">
+          <thead>
+            <tr>
+              <th><label><input type="checkbox" ng-model="state.toggle" ng-change="toggleSelectAll()"/> Select</label></th>
+              <th>
+                <a ui-sref="volumes" 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="volumes" 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="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>
+            <tr ng-repeat="volume in (state.filteredVolumes = (volumes | filter:state.filter | orderBy:sortType:sortReverse))">
+              <td><input type="checkbox" ng-model="volume.Checked" ng-change="selectItem(volume)"/></td>
+              <td>{{ volume.Name|truncate:20 }}</td>
+              <td>{{ volume.Driver }}</td>
+              <td>{{ volume.Mountpoint }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </rd-widget-body>
+  <rd-widget>
+</div>

app/components/volumes/volumesController.js

@@ -0,0 +1,70 @@
+angular.module('volumes', [])
+.controller('VolumesController', ['$scope', 'Volume', 'ViewSpinner', 'Messages', 'errorMsgFilter',
+function ($scope, Volume, ViewSpinner, Messages, errorMsgFilter) {
+  $scope.state = {};
+  $scope.state.toggle = false;
+  $scope.state.selectedItemCount = 0;
+  $scope.sortType = 'Name';
+  $scope.sortReverse = true;
+
+  $scope.order = function(sortType) {
+    $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
+    $scope.sortType = sortType;
+  };
+
+  $scope.toggleSelectAll = function () {
+    angular.forEach($scope.state.filteredVolumes, function (i) {
+      i.Checked = $scope.state.toggle;
+    });
+    if ($scope.state.toggle) {
+      $scope.state.selectedItemCount = $scope.state.filteredVolumes.length;
+    } else {
+      $scope.state.selectedItemCount = 0;
+    }
+  };
+
+  $scope.selectItem = function (item) {
+    if (item.Checked) {
+      $scope.state.selectedItemCount++;
+    } else {
+      $scope.state.selectedItemCount--;
+    }
+  };
+
+  $scope.removeAction = function () {
+    ViewSpinner.spin();
+    var counter = 0;
+    var complete = function () {
+      counter = counter - 1;
+      if (counter === 0) {
+        ViewSpinner.stop();
+      }
+    };
+    angular.forEach($scope.volumes, function (volume) {
+      if (volume.Checked) {
+        counter = counter + 1;
+        Volume.remove({name: volume.Name}, function (d) {
+          Messages.send("Volume deleted", volume.Name);
+          var index = $scope.volumes.indexOf(volume);
+          $scope.volumes.splice(index, 1);
+          complete();
+        }, function (e) {
+          Messages.error("Failure", e.data);
+          complete();
+        });
+      }
+    });
+  };
+
+  function fetchVolumes() {
+    ViewSpinner.spin();
+    Volume.query({}, function (d) {
+      $scope.volumes = d.Volumes;
+      ViewSpinner.stop();
+    }, function (e) {
+      Messages.error("Failure", e.data);
+      ViewSpinner.stop();
+    });
+  }
+  fetchVolumes();
+}]);

app/directives/header-content.js

@@ -0,0 +1,11 @@
+angular
+.module('uifordocker')
+.directive('rdHeaderContent', function rdHeaderContent() {
+  var directive = {
+    requires: '^rdHeader',
+    transclude: true,
+    template: '<div class="breadcrumb-links" ng-transclude></div>',
+    restrict: 'E'
+  };
+  return directive;
+});

app/directives/header-title.js

@@ -0,0 +1,14 @@
+angular
+.module('uifordocker')
+.directive('rdHeaderTitle', function rdHeaderTitle() {
+  var directive = {
+    requires: '^rdHeader',
+    scope: {
+      title: '@'
+    },
+    transclude: true,
+    template: '<div class="page">{{title}}<span class="header_title_content" ng-transclude><span></div>',
+    restrict: 'E'
+  };
+  return directive;
+});

app/directives/header.js

@@ -0,0 +1,13 @@
+angular
+.module('uifordocker')
+.directive('rdHeader', function rdHeader() {
+  var directive = {
+    scope: {
+      "ngModel": "="
+    },
+    transclude: true,
+    template: '<div class="row header"><div class="col-xs-12"><div class="meta" ng-transclude></div></div></div>',
+    restrict: 'EA'
+  };
+  return directive;
+});

app/directives/loading.js

@@ -0,0 +1,9 @@
+angular
+.module('uifordocker')
+.directive('rdLoading', function rdLoading() {
+  var directive = {
+    restrict: 'AE',
+    template: '<div class="loading"><div class="double-bounce1"></div><div class="double-bounce2"></div></div>'
+  };
+  return directive;
+});

app/directives/widget-body.js

@@ -0,0 +1,15 @@
+angular
+.module('uifordocker')
+.directive('rdWidgetBody', function rdWidgetBody() {
+  var directive = {
+    requires: '^rdWidget',
+    scope: {
+      loading: '@?',
+      classes: '@?'
+    },
+    transclude: true,
+    template: '<div class="widget-body" ng-class="classes"><rd-loading ng-show="loading"></rd-loading><div ng-hide="loading" class="widget-content" ng-transclude></div></div>',
+    restrict: 'E'
+  };
+  return directive;
+});

app/directives/widget-footer.js

@@ -0,0 +1,11 @@
+angular
+.module('uifordocker')
+.directive('rdWidgetFooter', function rdWidgetFooter() {
+  var directive = {
+    requires: '^rdWidget',
+    transclude: true,
+    template: '<div class="widget-footer" ng-transclude></div>',
+    restrict: 'E'
+  };
+  return directive;
+});

app/directives/widget-header.js

@@ -0,0 +1,15 @@
+angular
+.module('uifordocker')
+.directive('rdWidgetHeader', function rdWidgetTitle() {
+  var directive = {
+    requires: '^rdWidget',
+    scope: {
+      title: '@',
+      icon: '@'
+    },
+    transclude: true,
+    template: '<div class="widget-header"><div class="row"><div class="pull-left"><i class="fa" ng-class="icon"></i> {{title}} </div><div class="pull-right col-xs-6 col-sm-4" ng-transclude></div></div></div>',
+    restrict: 'E'
+  };
+  return directive;
+});

app/directives/widget-taskbar.js

@@ -0,0 +1,14 @@
+angular
+.module('uifordocker')
+.directive('rdWidgetTaskbar', function rdWidgetTaskbar() {
+  var directive = {
+    requires: '^rdWidget',
+    scope: {
+      classes: '@?'
+    },
+    transclude: true,
+    template: '<div class="widget-header"><div class="row"><div ng-class="classes" ng-transclude></div></div></div>',
+    restrict: 'E'
+  };
+  return directive;
+});

app/directives/widget.js

@@ -0,0 +1,13 @@
+angular
+.module('uifordocker')
+.directive('rdWidget', function rdWidget() {
+  var directive = {
+    scope: {
+      "ngModel": "="
+    },
+    transclude: true,
+    template: '<div class="widget" ng-transclude></div>',
+    restrict: 'EA'
+  };
+  return directive;
+});

app/shared/filters.js

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

app/shared/services.js

@@ -1,4 +1,4 @@
-angular.module('dockerui.services', ['ngResource'])
+angular.module('dockerui.services', ['ngResource', 'ngSanitize'])
     .factory('Container', ['$resource', 'Settings', function ContainerFactory($resource, Settings) {
         'use strict';
         // Resource for interacting with the docker containers
@@ -18,7 +18,7 @@ angular.module('dockerui.services', ['ngResource'])
             create: {method: 'POST', params: {action: 'create'}},
             remove: {method: 'DELETE', params: {id: '@id', v: 0}},
             rename: {method: 'POST', params: {id: '@id', action: 'rename'}, isArray: false},
-            stats: {method: 'GET', params: {id: '@id', stream: false, action: 'stats'}, timeout: 2000}
+            stats: {method: 'GET', params: {id: '@id', stream: false, action: 'stats'}, timeout: 5000}
         });
     }])
     .factory('ContainerCommit', ['$resource', '$http', 'Settings', function ContainerCommitFactory($resource, $http, Settings) {
@@ -31,8 +31,10 @@ angular.module('dockerui.services', ['ngResource'])
                     url: Settings.url + '/commit',
                     params: {
                         'container': params.id,
-                        'repo': params.repo
-                    }
+                        'tag': params.tag || null,
+                        'repo': params.repo || null
+                    },
+                    data: params.config
                 }).success(callback).error(function (data, status, headers, config) {
                     console.log(error, data);
                 });
@@ -84,18 +86,19 @@ angular.module('dockerui.services', ['ngResource'])
             history: {method: 'GET', params: {action: 'history'}, isArray: true},
             create: {
                 method: 'POST', isArray: true, transformResponse: [function f(data) {
-                    var str = data.replace(/\n/g, " ").replace(/\}\W*\{/g, "}, {");
-                    return angular.fromJson("[" + str + "]");
+                    var str = "[" + data.replace(/\n/g, " ").replace(/\}\s*\{/g, "}, {") + "]";
+                    return angular.fromJson(str);
                 }],
-                params: {action: 'create', fromImage: '@fromImage', repo: '@repo', tag: '@tag', registry: '@registry'}
+                params: {action: 'create', fromImage: '@fromImage', tag: '@tag'}
             },
             insert: {method: 'POST', params: {id: '@id', action: 'insert'}},
             push: {method: 'POST', params: {id: '@id', action: 'push'}},
             tag: {method: 'POST', params: {id: '@id', action: 'tag', force: 0, repo: '@repo', tag: '@tag'}},
-            remove: {method: 'DELETE', params: {id: '@id'}, isArray: true}
+            remove: {method: 'DELETE', params: {id: '@id'}, isArray: true},
+            inspect: {method: 'GET', params: {id: '@id', action: 'json'}}
         });
     }])
-    .factory('Docker', ['$resource', 'Settings', function DockerFactory($resource, Settings) {
+    .factory('Version', ['$resource', 'Settings', function VersionFactory($resource, Settings) {
         'use strict';
         // http://docs.docker.com/reference/api/docker_remote_api_<%= remoteApiVersion %>/#show-the-docker-version-information
         return $resource(Settings.url + '/version', {}, {
@@ -110,27 +113,51 @@ angular.module('dockerui.services', ['ngResource'])
             update: {method: 'POST'}
         });
     }])
-    .factory('System', ['$resource', 'Settings', function SystemFactory($resource, Settings) {
+    .factory('Info', ['$resource', 'Settings', function InfoFactory($resource, Settings) {
         'use strict';
         // http://docs.docker.com/reference/api/docker_remote_api_<%= remoteApiVersion %>/#display-system-wide-information
         return $resource(Settings.url + '/info', {}, {
             get: {method: 'GET'}
         });
     }])
-    .factory('Settings', ['DOCKER_ENDPOINT', 'DOCKER_PORT', 'DOCKER_API_VERSION', 'UI_VERSION', function SettingsFactory(DOCKER_ENDPOINT, DOCKER_PORT, DOCKER_API_VERSION, UI_VERSION) {
+    .factory('Network', ['$resource', 'Settings', function NetworkFactory($resource, Settings) {
+        'use strict';
+        // http://docs.docker.com/reference/api/docker_remote_api_<%= remoteApiVersion %>/#2-5-networks
+        return $resource(Settings.url + '/networks/:id/:action', {id: '@id'}, {
+            query: {method: 'GET', isArray: true},
+            get: {method: 'GET'},
+            create: {method: 'POST', params: {action: 'create'}},
+            remove: {method: 'DELETE'},
+            connect: {method: 'POST', params: {action: 'connect'}},
+            disconnect: {method: 'POST', params: {action: 'disconnect'}}
+        });
+    }])
+    .factory('Volume', ['$resource', 'Settings', function VolumeFactory($resource, Settings) {
+        'use strict';
+        // http://docs.docker.com/reference/api/docker_remote_api_<%= remoteApiVersion %>/#2-5-networks
+        return $resource(Settings.url + '/volumes/:name/:action', {name: '@name'}, {
+            query: {method: 'GET'},
+            get: {method: 'GET'},
+            create: {method: 'POST', params: {action: 'create'}},
+            remove: {method: 'DELETE'}
+        });
+    }])
+    .factory('Config', ['$resource', 'CONFIG_ENDPOINT', function($resource, CONFIG_ENDPOINT) {
+      return $resource(CONFIG_ENDPOINT).get();
+    }])
+    .factory('Settings', ['DOCKER_ENDPOINT', 'DOCKER_PORT', 'UI_VERSION', function SettingsFactory(DOCKER_ENDPOINT, DOCKER_PORT, UI_VERSION) {
         'use strict';
         var url = DOCKER_ENDPOINT;
         if (DOCKER_PORT) {
             url = url + DOCKER_PORT + '\\' + DOCKER_PORT;
         }
+        var firstLoad = (localStorage.getItem('firstLoad') || 'true') === 'true';
         return {
-            displayAll: false,
-            endpoint: DOCKER_ENDPOINT,
-            version: DOCKER_API_VERSION,
-            rawUrl: DOCKER_ENDPOINT + DOCKER_PORT + '/' + DOCKER_API_VERSION,
-            uiVersion: UI_VERSION,
-            url: url,
-            firstLoad: true
+          displayAll: false,
+          endpoint: DOCKER_ENDPOINT,
+          uiVersion: UI_VERSION,
+          url: url,
+          firstLoad: firstLoad
         };
     }])
     .factory('ViewSpinner', function ViewSpinnerFactory() {
@@ -147,13 +174,13 @@ angular.module('dockerui.services', ['ngResource'])
             }
         };
     })
-    .factory('Messages', ['$rootScope', function MessagesFactory($rootScope) {
+    .factory('Messages', ['$rootScope', '$sanitize', function MessagesFactory($rootScope, $sanitize) {
         'use strict';
         return {
             send: function (title, text) {
                 $.gritter.add({
-                    title: title,
-                    text: text,
+                    title: $sanitize(title),
+                    text: $sanitize(text),
                     time: 2000,
                     before_open: function () {
                         if ($('.gritter-item-wrapper').length === 3) {
@@ -164,8 +191,8 @@ angular.module('dockerui.services', ['ngResource'])
             },
             error: function (title, text) {
                 $.gritter.add({
-                    title: title,
-                    text: text,
+                    title: $sanitize(title),
+                    text: $sanitize(text),
                     time: 10000,
                     before_open: function () {
                         if ($('.gritter-item-wrapper').length === 4) {
@@ -176,23 +203,6 @@ angular.module('dockerui.services', ['ngResource'])
             }
         };
     }])
-    .factory('Dockerfile', ['Settings', function DockerfileFactory(Settings) {
-        'use strict';
-        // http://docs.docker.com/reference/api/docker_remote_api_<%= remoteApiVersion %>/#build-image-from-a-dockerfile
-        var url = Settings.rawUrl + '/build';
-        return {
-            build: function (file, callback) {
-                var data = new FormData();
-                var dockerfile = new Blob([file], {type: 'text/text'});
-                data.append('Dockerfile', dockerfile);
-
-                var request = new XMLHttpRequest();
-                request.onload = callback;
-                request.open('POST', url);
-                request.send(data);
-            }
-        };
-    }])
     .factory('LineChart', ['Settings', function LineChartFactory(Settings) {
         'use strict';
         return {
@@ -222,9 +232,10 @@ angular.module('dockerui.services', ['ngResource'])
                     labels.push(k);
                     data.push(map[k]);
                     if (map[k] > max) {
-                      max = map[k];
+                        max = map[k];
                     }
                 }
+                var steps = Math.min(max, 10);
                 var dataset = {
                     fillColor: "rgba(151,187,205,0.5)",
                     strokeColor: "rgba(151,187,205,1)",
@@ -237,10 +248,11 @@ angular.module('dockerui.services', ['ngResource'])
                         datasets: [dataset]
                     },
                     {
-                        scaleStepWidth: 1,
+                        scaleStepWidth: Math.ceil(max / steps),
                         pointDotRadius: 1,
+                        scaleIntegersOnly: true,
                         scaleOverride: true,
-                        scaleSteps: max
+                        scaleSteps: steps
                     });
             }
         };

app/shared/viewmodel.js

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

assets/css/app.css

@@ -114,3 +114,54 @@
     cursor: pointer;
 }
 
+.logo {
+  display: inline;
+  width: 100%;
+  max-width: 160px;
+  height: 100%;
+  max-height: 55px;
+  margin-bottom: 5px;
+}
+
+.containerNameInput {
+  width: 85%;
+  border:none;
+  background:none;
+  border-bottom: 1px solid black;
+}
+
+.containerNameInput:active, .containerNameInput:focus {
+  outline:none;
+}
+
+#network-legend {
+  text-align: center;
+}
+
+#network-legend span {
+  display: inline;
+  font-size: 18px;
+}
+
+.header_title_content {
+  margin-left: 5px;
+}
+
+.form-horizontal .control-label.text-left{
+    text-align: left;
+    font-size: 0.9em;
+}
+
+input[type="checkbox"] {
+  margin-top: 1px;
+  vertical-align: middle;
+}
+
+input[type="radio"] {
+  margin-top: 1px;
+  vertical-align: middle;
+}
+
+.clickable {
+  cursor: pointer;
+}

bower.json

@@ -1,13 +1,15 @@
 {
-  "name": "dockerui",
-  "version": "0.8.0",
-  "homepage": "https://github.com/crosbymichael/dockerui",
+  "name": "uifordocker",
+  "version": "1.2.0",
+  "homepage": "https://github.com/kevana/ui-for-docker",
   "authors": [
     "Michael Crosby <crosbymichael@gmail.com>",
-    "Kevan Ahlquist <ahlqu039@umn.edu>"
+    "Kevan Ahlquist <ahlquistkd@gmail.com>",
+    "Anthony Lapenna <anthony.lapenna@cloudinovasi.id>"
   ],
   "description": "A web interface for the Docker Remote API.",
   "keywords": [
+    "uifordocker",
     "dockerui",
     "docker",
     "api"
@@ -22,19 +24,24 @@
   ],
   "dependencies": {
     "Chart.js": "1.0.2",
-    "angular": "1.3.15",
-    "angular-bootstrap": "0.12.0",
-    "angular-mocks": "1.3.15",
+    "angular": "~1.5.0",
+    "angular-cookies": "~1.5.0",
+    "angular-bootstrap": "~1.0.3",
+    "angular-ui-router": "^0.2.15",
+    "angular-sanitize": "~1.5.0",
+    "angular-mocks": "~1.5.0",
     "angular-oboe": "*",
-    "angular-resource": "1.3.15",
-    "angular-route": "1.3.15",
-    "angular-visjs": "0.0.7",
-    "bootstrap": "3.3.0",
+    "angular-resource": "~1.5.0",
+    "angular-ui-select": "~0.17.1",
+    "bootstrap": "~3.3.6",
+    "font-awesome": "~4.5.0",
     "jquery": "1.11.1",
     "jquery.gritter": "1.7.4",
+    "lodash": "4.12.0",
+    "rdash-ui": "1.0.*",
     "spin.js": "1.3"
   },
   "resolutions": {
-    "angular": "1.3.15"
+    "angular": "1.5.5"
   }
 }

dockerui.go

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

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 dockerui {
+    server dockerui: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://dockerui;
+    }
+}

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

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

examples/nginx-basic-auth/users.htpasswd

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

gruntFile.js

@@ -14,11 +14,33 @@ module.exports = function (grunt) {
 
     // Default task.
     grunt.registerTask('default', ['jshint', 'build', 'karma:unit']);
-    grunt.registerTask('build', ['clean:app', 'if:binaryNotExist', 'html2js', 'concat', 'clean:tmpl', 'recess:build', 'copy']);
-    grunt.registerTask('release', ['clean:all', 'if:binaryNotExist', 'html2js', 'uglify', 'clean:tmpl', 'jshint', 'karma:unit', 'concat:index', 'recess:min', 'copy']);
+    grunt.registerTask('build', [
+        'clean:app',
+        'if:binaryNotExist',
+        'html2js',
+        'concat',
+        'clean:tmpl',
+        'recess:build',
+        'copy'
+    ]);
+    grunt.registerTask('release', [
+        'clean:all',
+        'if:binaryNotExist',
+        'html2js',
+        'uglify',
+        'clean:tmpl',
+        'jshint',
+        //'karma:unit',
+        'concat:index',
+        'recess:min',
+        'copy'
+    ]);
+    grunt.registerTask('lint', ['jshint']);
     grunt.registerTask('test-watch', ['karma:watch']);
     grunt.registerTask('run', ['if:binaryNotExist', 'build', 'shell:buildImage', 'shell:run']);
+    grunt.registerTask('run-swarm', ['if:binaryNotExist', 'build', 'shell:buildImage', 'shell:runSwarm', 'watch:buildSwarm']);
     grunt.registerTask('run-dev', ['if:binaryNotExist', 'shell:buildImage', 'shell:run', 'watch:build']);
+    grunt.registerTask('clear', ['clean:app']);
 
     // Print a timestamp (useful for when watching)
     grunt.registerTask('timestamp', function () {
@@ -44,12 +66,12 @@ module.exports = function (grunt) {
             js: ['app/**/*.js', '!app/**/*.spec.js'],
             jsTpl: ['<%= distdir %>/templates/**/*.js'],
             jsVendor: [
-                'bower_components/jquery/dist/jquery.js',
+                'bower_components/jquery/dist/jquery.min.js',
                 'assets/js/jquery.gritter.js', // Using custom version to fix error in minified build due to "use strict"
-                'bower_components/bootstrap/dist/js/bootstrap.js',
+                'bower_components/bootstrap/dist/js/bootstrap.min.js',
                 'bower_components/spin.js/spin.js',
-                'bower_components/vis/dist/vis.js',
-                'bower_components/Chart.js/Chart.js',
+                'bower_components/Chart.js/Chart.min.js',
+                'bower_components/lodash/dist/lodash.min.js',
                 'bower_components/oboe/dist/oboe-browser.js',
                 'assets/js/legend.js' // Not a bower package
             ],
@@ -61,18 +83,22 @@ module.exports = function (grunt) {
             cssVendor: [
                 'bower_components/bootstrap/dist/css/bootstrap.css',
                 'bower_components/jquery.gritter/css/jquery.gritter.css',
-                'bower_components/vis/dist/vis.css'
+                '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'
             ]
         },
         clean: {
             all: ['<%= distdir %>/*'],
-            app: ['<%= distdir %>/*', '!<%= distdir %>/dockerui'],
+            app: ['<%= distdir %>/*', '!<%= distdir %>/ui-for-docker'],
             tmpl: ['<%= distdir %>/templates']
         },
         copy: {
             assets: {
                 files: [
-                    {dest: '<%= distdir %>/fonts/', src: '**', expand: true, cwd: 'bower_components/bootstrap/fonts/'},
+                  {dest: '<%= distdir %>/fonts/', src: '*.{ttf,woff,woff2,eof,svg}', expand: true, cwd: 'bower_components/bootstrap/fonts/'},
+                  {dest: '<%= distdir %>/fonts/', src: '*.{ttf,woff,woff2,eof,svg}', expand: true, cwd: 'bower_components/font-awesome/fonts/'},
+                  {dest: '<%= distdir %>/fonts/', src: '*.{ttf,woff,woff2,eof,svg}', expand: true, cwd: 'bower_components/rdash-ui/dist/fonts/'},
                     {
                         dest: '<%= distdir %>/images/',
                         src: ['**', '!trees.jpg'],
@@ -80,18 +106,10 @@ module.exports = function (grunt) {
                         cwd: 'bower_components/jquery.gritter/images/'
                     },
                     {
-                        dest: '<%= distdir %>/img',
-                        src: [
-                            'network/downArrow.png',
-                            'network/leftArrow.png',
-                            'network/upArrow.png',
-                            'network/rightArrow.png',
-                            'network/minus.png',
-                            'network/plus.png',
-                            'network/zoomExtends.png'
-                        ],
+                        dest: '<%= distdir %>/images/',
+                        src: ['**'],
                         expand: true,
-                        cwd: 'bower_components/vis/dist/img'
+                        cwd: 'assets/images/'
                     },
                     {dest: '<%= distdir %>/ico', src: '**', expand: true, cwd: 'assets/ico'}
                 ]
@@ -118,11 +136,11 @@ module.exports = function (grunt) {
                     process: true
                 },
                 src: ['<%= src.js %>', '<%= src.jsTpl %>'],
-                dest: '<%= distdir %>/<%= pkg.name %>.js'
+                dest: '<%= distdir %>/js/<%= pkg.name %>.js'
             },
             vendor: {
                 src: ['<%= src.jsVendor %>'],
-                dest: '<%= distdir %>/vendor.js'
+                dest: '<%= distdir %>/js/vendor.js'
             },
             index: {
                 src: ['index.html'],
@@ -132,13 +150,15 @@ module.exports = function (grunt) {
                 }
             },
             angular: {
-                src: ['bower_components/angular/angular.js',
-                    'bower_components/angular-route/angular-route.js',
-                    'bower_components/angular-resource/angular-resource.js',
-                    'bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
-                    'bower_components/angular-oboe/dist/angular-oboe.js',
-                    'bower_components/angular-visjs/angular-vis.js'],
-                dest: '<%= distdir %>/angular.js'
+                src: ['bower_components/angular/angular.min.js',
+                    'bower_components/angular-sanitize/angular-sanitize.min.js',
+                    'bower_components/angular-cookies/angular-cookies.min.js',
+                    'bower_components/angular-ui-router/release/angular-ui-router.min.js',
+                    'bower_components/angular-resource/angular-resource.min.js',
+                    'bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js',
+                    'bower_components/angular-oboe/dist/angular-oboe.min.js',
+                    'bower_components/angular-ui-select/dist/select.min.js'],
+                dest: '<%= distdir %>/js/angular.js'
             }
         },
         uglify: {
@@ -147,28 +167,28 @@ module.exports = function (grunt) {
                     banner: "<%= banner %>"
                 },
                 src: ['<%= src.js %>', '<%= src.jsTpl %>'],
-                dest: '<%= distdir %>/<%= pkg.name %>.js'
+                dest: '<%= distdir %>/js/<%= pkg.name %>.js'
             },
             vendor: {
                 options: {
                     preserveComments: 'some' // Preserve license comments
                 },
                 src: ['<%= src.jsVendor %>'],
-                dest: '<%= distdir %>/vendor.js'
+                dest: '<%= distdir %>/js/vendor.js'
             },
             angular: {
                 options: {
                     preserveComments: 'some' // Preserve license comments
                 },
                 src: ['<%= concat.angular.src %>'],
-                dest: '<%= distdir %>/angular.js'
+                dest: '<%= distdir %>/js/angular.js'
             }
         },
         recess: { // TODO: not maintained, unable to preserve license comments, switch out for something better.
             build: {
                 files: {
-                    '<%= distdir %>/<%= pkg.name %>.css': ['<%= src.css %>'],
-                    '<%= distdir %>/vendor.css': ['<%= src.cssVendor %>']
+                    '<%= distdir %>/css/<%= pkg.name %>.css': ['<%= src.css %>'],
+                    '<%= distdir %>/css/vendor.css': ['<%= src.cssVendor %>']
                 },
                 options: {
                     compile: true,
@@ -177,8 +197,8 @@ module.exports = function (grunt) {
             },
             min: {
                 files: {
-                    '<%= distdir %>/<%= pkg.name %>.css': ['<%= src.css %>'],
-                    '<%= distdir %>/vendor.css': ['<%= src.cssVendor %>']
+                    '<%= distdir %>/css/<%= pkg.name %>.css': ['<%= src.css %>'],
+                    '<%= distdir %>/css/vendor.css': ['<%= src.cssVendor %>']
                 },
                 options: {
                     compile: true,
@@ -201,6 +221,10 @@ module.exports = function (grunt) {
                  * Tried using a host volume with -v, copying files with `docker cp`, restating container, none worked
                  * Rebuilding image on each change was only method that worked, takes ~4s per change to update
                  */
+            },
+            buildSwarm: {
+                files: ['<%= src.js %>', '<%= src.specs %>', '<%= src.css %>', '<%= src.tpl %>', '<%= src.html %>'],
+                tasks: ['build', 'shell:buildImage', 'shell:runSwarm', 'shell:cleanImages']
             }
         },
         jshint: {
@@ -223,21 +247,28 @@ module.exports = function (grunt) {
         },
         shell: {
             buildImage: {
-                command: 'docker build --rm -t dockerui .'
+                command: 'docker build --rm -t ui-for-docker .'
             },
             buildBinary: {
                 command: [
                     'docker run --rm -v $(pwd):/src centurylink/golang-builder',
-                    'shasum dockerui > dockerui-checksum.txt',
+                    'shasum ui-for-docker > ui-for-docker-checksum.txt',
                     'mkdir -p dist',
-                    'mv dockerui dist/'
-                ].join('&&')
+                    'mv ui-for-docker dist/'
+                ].join(' && ')
             },
             run: {
                 command: [
-                    'docker stop dockerui',
-                    'docker rm dockerui',
-                    'docker run --privileged -d -p 9000:9000 -v /var/run/docker.sock:/var/run/docker.sock --name dockerui dockerui'
+                    'docker stop ui-for-docker',
+                    'docker rm ui-for-docker',
+                    'docker run --privileged -d -p 9000:9000 -v /tmp/docker-ui:/data -v /var/run/docker.sock:/var/run/docker.sock --name ui-for-docker ui-for-docker -d /data'
+                ].join(';')
+            },
+            runSwarm: {
+                command: [
+                    'docker stop ui-for-docker',
+                    'docker rm ui-for-docker',
+                    'docker run --privileged -d -p 9000:9000 -v /tmp/docker-ui:/data --name ui-for-docker ui-for-docker -e http://10.0.7.10:4000 --swarm -d /data'
                 ].join(';')
             },
             cleanImages: {
@@ -247,7 +278,7 @@ module.exports = function (grunt) {
         'if': {
             binaryNotExist: {
                 options: {
-                    executable: 'dist/dockerui'
+                    executable: 'dist/ui-for-docker'
                 },
                 ifFalse: ['shell:buildBinary']
             }

index.html

@@ -1,44 +1,80 @@
 <!DOCTYPE html>
 <html lang="en" ng-app="<%= pkg.name %>">
 <head>
-    <meta charset="utf-8">
-    <title>DockerUI</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="">
-    <meta name="author" content="<%= pkg.author %>">
+  <meta charset="utf-8">
+  <title>CloudInovasi UI for Docker</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="">
+  <meta name="author" content="<%= pkg.author %>">
 
-    <link href="vendor.css" rel="stylesheet">
-    <link href="<%= pkg.name %>.css" rel="stylesheet">
+  <link href="css/vendor.css" rel="stylesheet">
+  <link href="css/<%= pkg.name %>.css" rel="stylesheet">
 
+  <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
+  <!--[if lt IE 9]>
+  <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
+  <![endif]-->
 
-    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
-    <!--[if lt IE 9]>
-    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
+  <script src="js/angular.js"></script>
+  <script src="js/vendor.js"></script>
+  <script src="js/<%= pkg.name %>.js"></script>
 
-    <script src="angular.js"></script>
-    <script src="vendor.js"></script>
-    <script src="<%= pkg.name %>.js"></script>
-
-    <!-- Fav and touch icons -->
-    <link rel="shortcut icon" href="ico/favicon.ico">
-    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
+  <!-- Fav and touch icons -->
+  <link rel="shortcut icon" href="ico/favicon.ico">
+  <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-precomposed.png">
 </head>
 
-<body>
+<body ng-controller="MasterCtrl">
+  <div id="page-wrapper" ng-class="{'open': toggle}" ng-cloak>
 
-<div class="container">
-    <div ng-include="template" ng-controller="MastheadController"></div>
+    <!-- Sidebar -->
+    <div id="sidebar-wrapper">
+      <ul class="sidebar">
+        <li class="sidebar-main">
+          <a ng-click="toggleSidebar()">
+            <img src="images/logo.png" class="img-responsive logo" alt="logo">
+            <span class="menu-icon glyphicon glyphicon-transfer"></span>
+          </a>
+        </li>
+        <li class="sidebar-title"><span>NAVIGATION</span></li>
+        <li class="sidebar-list">
+          <a ui-sref="index">Dashboard <span class="menu-icon fa fa-tachometer"></span></a>
+        </li>
+        <li class="sidebar-list">
+          <a ui-sref="containers">Containers <span class="menu-icon fa fa-server"></span></a>
+        </li>
+        <li class="sidebar-list">
+          <a ui-sref="images">Images <span class="menu-icon fa fa-clone"></span></a>
+        </li>
+        <li class="sidebar-list">
+          <a ui-sref="networks">Networks <span class="menu-icon fa fa-sitemap"></span></a>
+        </li>
+        <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="config.swarm">
+          <a ui-sref="swarm">Swarm <span class="menu-icon fa fa-object-group"></span></a>
+        </li>
+        <li class="sidebar-list" ng-if="!config.swarm">
+          <a ui-sref="docker">Docker <span class="menu-icon fa fa-cogs"></span></a>
+        </li>
+      </ul>
+      <div class="sidebar-footer">
+        <div class="col-xs-12">
+          <a href="https://github.com/cloud-inovasi/cloudinovasi-ui" target="_blank">CloudInovasi UI {{ uiVersion }}</a>
+        </div>
+      </div>
+    </div>
+    <!-- End Sidebar -->
 
-    <div id="view" ng-view></div>
-
-    <div class="container-bottom"></div>
-    <div ng-include="template" ng-controller="FooterController"></div>
-</div>
+    <div id="content-wrapper">
+      <div class="page-content">
 
+        <!-- Main Content -->
+        <div id="view" ui-view></div>
 
+      </div><!-- End Page Content -->
+    </div><!-- End Content Wrapper -->
+  </div><!-- End Page Wrapper -->
 </body>
 </html>

package.json

@@ -1,19 +1,19 @@
 {
   "author": "Michael Crosby & Kevan Ahlquist",
-  "name": "dockerui",
-  "homepage": "https://github.com/crosbymichael/dockerui",
-  "version": "0.8.0",
+  "name": "uifordocker",
+  "homepage": "https://github.com/kevana/ui-for-docker",
+  "version": "1.2.0",
   "repository": {
     "type": "git",
-    "url": "git@github.com:crosbymichael/dockerui.git"
+    "url": "git@github.com:kevana/ui-for-docker.git"
   },
   "bugs": {
-    "url": "https://github.com/crosbymichael/dockerui/issues"
+    "url": "https://github.com/kevana/ui-for-docker/issues"
   },
   "licenses": [
     {
       "type": "MIT",
-      "url": "https://raw.githubusercontent.com/crosbymichael/dockerui/master/LICENSE"
+      "url": "https://raw.githubusercontent.com/kevana/ui-for-docker/master/LICENSE"
     }
   ],
   "engines": {

test/unit/app/components/containerTopController.spec.js

@@ -15,12 +15,14 @@ describe("ContainerTopController", function () {
     }));
 
     it("should test controller initialize", function () {
+        $httpBackend.expectGET('dockerapi/containers/b17882378cee8ec0136f482681b764cca430befd52a9bfd1bde031f49b8bba9f/json').respond(200, {Name: '/foo'});
         $httpBackend.expectGET('dockerapi/containers/b17882378cee8ec0136f482681b764cca430befd52a9bfd1bde031f49b8bba9f/top?ps_args=').respond(200);
         expect($scope.ps_args).toBeDefined();
         $httpBackend.flush();
     });
 
     it("a correct top request to the Docker remote API", function () {
+        $httpBackend.expectGET('dockerapi/containers/b17882378cee8ec0136f482681b764cca430befd52a9bfd1bde031f49b8bba9f/json').respond(200, {Name: '/foo'});
         $httpBackend.expectGET('dockerapi/containers/' + $routeParams.id + '/top?ps_args=').respond(200);
         $routeParams.id = '123456789123456789123456789';
         $scope.ps_args = 'aux';

test/unit/app/components/networkController.spec.js

@@ -0,0 +1,83 @@
+describe('NetworkController', function () {
+    var $scope, $httpBackend, $routeParams;
+
+    beforeEach(module('dockerui'));
+    beforeEach(inject(function (_$httpBackend_, $controller, _$routeParams_) {
+        $scope = {};
+        $httpBackend = _$httpBackend_;
+        $routeParams = _$routeParams_;
+        $routeParams.id = 'f1e1ce1613ccd374a75caf5e2c3ab35520d1944f91498c1974ec86fb4019c79b';
+        $controller('NetworkController', {
+            '$scope': $scope,
+            '$routeParams': $routeParams
+        });
+    }));
+
+    it('initializes correctly', function () {
+        expectGetNetwork();
+        $httpBackend.flush();
+    });
+
+    it('issues a correct connect call to the remote API', function () {
+        expectGetNetwork();
+        $httpBackend.expectPOST('dockerapi/networks/f1e1ce1613ccd374a75caf5e2c3ab35520d1944f91498c1974ec86fb4019c79b/connect', {'Container': 'containerId'}).respond(200);
+        $scope.connect($routeParams.id, 'containerId');
+        $httpBackend.flush();
+    });
+    it('issues a correct disconnect call to the remote API', function () {
+        expectGetNetwork();
+        $httpBackend.expectPOST('dockerapi/networks/f1e1ce1613ccd374a75caf5e2c3ab35520d1944f91498c1974ec86fb4019c79b/disconnect', {'Container': 'containerId'}).respond(200);
+        $scope.disconnect($routeParams.id, 'containerId');
+        $httpBackend.flush();
+    });
+    it('issues a correct remove call to the remote API', function () {
+        expectGetNetwork();
+        $httpBackend.expectDELETE('dockerapi/networks/f1e1ce1613ccd374a75caf5e2c3ab35520d1944f91498c1974ec86fb4019c79b').respond(204);
+        $scope.remove($routeParams.id);
+        $httpBackend.flush();
+    });
+
+    function expectGetNetwork() {
+        $httpBackend.expectGET('dockerapi/networks/f1e1ce1613ccd374a75caf5e2c3ab35520d1944f91498c1974ec86fb4019c79b').respond({
+            "Name": "bridge",
+            "Id": "f1e1ce1613ccd374a75caf5e2c3ab35520d1944f91498c1974ec86fb4019c79b",
+            "Scope": "local",
+            "Driver": "bridge",
+            "IPAM": {
+                "Driver": "default",
+                "Config": [{
+                    "Subnet": "172.17.0.1/16",
+                    "Gateway": "172.17.0.1"
+                }]
+            },
+            "Containers": {
+                "727fe76cd0bd65033baab3045508784a166fbc67d177e91c1874b6b29eae946a": {
+                    "EndpointID": "c17ec80e2cfc8eaedc7737b7bb6f954adff439767197ef89c4a5b4127d07b267",
+                    "MacAddress": "02:42:ac:11:00:03",
+                    "IPv4Address": "172.17.0.3/16",
+                    "IPv6Address": ""
+                },
+                "8c32c2446c3dfe0defac2dc8b5fd927cd394f15e08051c677a681bf36877175b": {
+                    "EndpointID": "cf7e795c978ab194d1af4a3efdc177d84c075582ba30a7cff414c7d516236af1",
+                    "MacAddress": "02:42:ac:11:00:04",
+                    "IPv4Address": "172.17.0.4/16",
+                    "IPv6Address": ""
+                },
+                "cfe81fc97b1f857fdb3061fe487a064b8b57d8f112910954ac16910400d2e058": {
+                    "EndpointID": "611929ffcff2ced1db8e88f77e009c4fb4a4736395251cd97553b242e2e23bf1",
+                    "MacAddress": "02:42:ac:11:00:02",
+                    "IPv4Address": "172.17.0.2/16",
+                    "IPv6Address": ""
+                }
+            },
+            "Options": {
+                "com.docker.network.bridge.default_bridge": "true",
+                "com.docker.network.bridge.enable_icc": "true",
+                "com.docker.network.bridge.enable_ip_masquerade": "true",
+                "com.docker.network.bridge.host_binding_ipv4": "0.0.0.0",
+                "com.docker.network.bridge.name": "docker0",
+                "com.docker.network.driver.mtu": "1500"
+            }
+        });
+    }
+});

test/unit/app/components/networksController.spec.js

@@ -0,0 +1,107 @@
+describe('NetworksController', function () {
+    var $scope, $httpBackend, $routeParams;
+
+    beforeEach(module('dockerui'));
+    beforeEach(inject(function (_$httpBackend_, $controller, _$routeParams_) {
+        $scope = {};
+        $httpBackend = _$httpBackend_;
+        $routeParams = _$routeParams_;
+        $controller('NetworksController', {
+            '$scope': $scope,
+            '$routeParams': $routeParams
+        });
+    }));
+
+    it('initializes correctly', function () {
+        expectGetNetwork();
+        $httpBackend.flush();
+    });
+
+
+    it('issues correct remove calls to the remote API', function () {
+        expectGetNetwork();
+        $httpBackend.flush();
+        $scope.networks[0].Checked = true;
+        $scope.networks[2].Checked = true;
+        $httpBackend.expectDELETE('dockerapi/networks/f2de39df4171b0dc801e8002d1d999b77256983dfc63041c0f34030aa3977566').respond(204);
+        $httpBackend.expectDELETE('dockerapi/networks/13e871235c677f196c4e1ecebb9dc733b9b2d2ab589e30c539efeda84a24215e').respond(204);
+        $scope.removeAction();
+        $httpBackend.flush();
+    });
+    it('issues a correct network creation call to the remote API', function () {
+        expectGetNetwork();
+        var createBody = {
+            "Name":"isolated_nw",
+            "Driver":"bridge",
+            "IPAM":{
+                "Config":[{
+                    "Subnet":"172.20.0.0/16",
+                    "IPRange":"172.20.10.0/24",
+                    "Gateway":"172.20.10.11"
+                }]
+            }};
+        $httpBackend.expectPOST('dockerapi/networks/create', createBody).respond(201);
+        expectGetNetwork();
+        $scope.addNetwork(createBody);
+        $httpBackend.flush();
+    });
+
+    function expectGetNetwork() {
+        $httpBackend.expectGET('dockerapi/networks').respond([
+            {
+                "Name": "bridge",
+                "Id": "f2de39df4171b0dc801e8002d1d999b77256983dfc63041c0f34030aa3977566",
+                "Scope": "local",
+                "Driver": "bridge",
+                "IPAM": {
+                    "Driver": "default",
+                    "Config": [
+                        {
+                            "Subnet": "172.17.0.0/16"
+                        }
+                    ]
+                },
+                "Containers": {
+                    "39b69226f9d79f5634485fb236a23b2fe4e96a0a94128390a7fbbcc167065867": {
+                        "EndpointID": "ed2419a97c1d9954d05b46e462e7002ea552f216e9b136b80a7db8d98b442eda",
+                        "MacAddress": "02:42:ac:11:00:02",
+                        "IPv4Address": "172.17.0.2/16",
+                        "IPv6Address": ""
+                    }
+                },
+                "Options": {
+                    "com.docker.network.bridge.default_bridge": "true",
+                    "com.docker.network.bridge.enable_icc": "true",
+                    "com.docker.network.bridge.enable_ip_masquerade": "true",
+                    "com.docker.network.bridge.host_binding_ipv4": "0.0.0.0",
+                    "com.docker.network.bridge.name": "docker0",
+                    "com.docker.network.driver.mtu": "1500"
+                }
+            },
+            {
+                "Name": "none",
+                "Id": "e086a3893b05ab69242d3c44e49483a3bbbd3a26b46baa8f61ab797c1088d794",
+                "Scope": "local",
+                "Driver": "null",
+                "IPAM": {
+                    "Driver": "default",
+                    "Config": []
+                },
+                "Containers": {},
+                "Options": {}
+            },
+            {
+                "Name": "host",
+                "Id": "13e871235c677f196c4e1ecebb9dc733b9b2d2ab589e30c539efeda84a24215e",
+                "Scope": "local",
+                "Driver": "host",
+                "IPAM": {
+                    "Driver": "default",
+                    "Config": []
+                },
+                "Containers": {},
+                "Options": {}
+            }
+        ]);
+    }
+});

test/unit/app/components/volumesController.spec.js

@@ -0,0 +1,64 @@
+describe('VolumesController', function () {
+    var $scope, $httpBackend, $routeParams;
+
+    beforeEach(module('dockerui'));
+    beforeEach(inject(function (_$httpBackend_, $controller, _$routeParams_) {
+        $scope = {};
+        $httpBackend = _$httpBackend_;
+        $routeParams = _$routeParams_;
+        $controller('VolumesController', {
+            '$scope': $scope,
+            '$routeParams': $routeParams
+        });
+    }));
+
+    it('initializes correctly', function () {
+        expectGetVolumes();
+        $httpBackend.flush();
+    });
+
+
+    it('issues correct remove calls to the remote API', function () {
+        expectGetVolumes();
+        $httpBackend.flush();
+        $scope.volumes[0].Checked = true;
+        $scope.volumes[2].Checked = true;
+        $httpBackend.expectDELETE('dockerapi/volumes/tardis').respond(200);
+        $httpBackend.expectDELETE('dockerapi/volumes/bar').respond(200);
+        $scope.removeAction();
+        $httpBackend.flush();
+    });
+    it('issues a correct volume creation call to the remote API', function () {
+        expectGetVolumes();
+        var createBody = {
+            "Name": "tardis",
+            "Driver": "local"
+        };
+        $httpBackend.expectPOST('dockerapi/volumes/create', createBody).respond(201);
+        expectGetVolumes();
+        $scope.addVolume(createBody);
+        $httpBackend.flush();
+    });
+
+    function expectGetVolumes() {
+        $httpBackend.expectGET('dockerapi/volumes').respond({
+            "Volumes": [
+                {
+                    "Name": "tardis",
+                    "Driver": "local",
+                    "Mountpoint": "/var/lib/docker/volumes/tardis"
+                },
+                {
+                    "Name": "foo",
+                    "Driver": "local",
+                    "Mountpoint": "/var/lib/docker/volumes/foo"
+                },
+                {
+                    "Name": "bar",
+                    "Driver": "local",
+                    "Mountpoint": "/var/lib/docker/volumes/bar"
+                }
+            ]
+        });
+    }
+});

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

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