Merge branch 'release/1.0.4'

* feat(ui): latest Swarm API support

.gitignore

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

Dockerfile

@@ -3,4 +3,4 @@ FROM scratch
 COPY dist /
 
 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,81 @@
-## 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"*)
+* `-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,75 +1,123 @@
-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',
-    'network',
-    'networks',
-    'volumes'])
-    .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.9.0-beta');
+angular.module('uifordocker', [
+  'uifordocker.templates',
+  'ui.bootstrap',
+  'ui.router',
+  'ui.select',
+  'ngCookies',
+  'ngSanitize',
+  'dockerui.services',
+  'dockerui.filters',
+  'dashboard',
+  'container',
+  'containers',
+  'docker',
+  'images',
+  'image',
+  'pullImage',
+  'startContainer',
+  '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('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.0.4');

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',
-        function ($scope) {
-            $scope.template = 'app/components/builder/builder.html';
-        }]);

app/components/container/container.html

@@ -1,196 +1,194 @@
-<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.NetworkSettings.Ports">
-                        {{ 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,144 +1,208 @@
 angular.module('container', [])
-    .controller('ContainerController', ['$scope', '$routeParams', '$location', 'Container', 'ContainerCommit', 'Messages', 'ViewSpinner', '$timeout',
-        function ($scope, $routeParams, $location, Container, ContainerCommit, Messages, ViewSpinner, $timeout) {
-            $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();
-                    $location.path('/containers');
-                    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,91 @@
+<div ng-include="template" ng-controller="StartContainerController"></div>
 
-<h2>Containers:</h2>
+<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>
 
-<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>
+          <button type="button" class="btn btn-default" data-toggle="modal" data-target="#create-modal">Start a new container...</button>
+        </div>
+      </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">
+          <thead>
+            <tr>
+              <th><label><input type="checkbox" ng-model="state.toggle" ng-change="toggleSelectAll()" /> Select</label></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('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>
+              <th>
+                <a ui-sref="containers" ng-click="order('Created')">
+                  Created
+                  <span ng-show="sortType == 'Created' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Created' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="containers" ng-click="order('Status')">
+                  Status
+                  <span ng-show="sortType == 'Status' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Status' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr ng-repeat="container in (state.filteredContainers = ( containers | filter:state.filter | orderBy:sortType:sortReverse))">
+              <td><input type="checkbox" ng-model="container.Checked" ng-change="selectItem(container)"/></td>
+              <td><a ui-sref="container({id: container.Id})">{{ container|containername}}</a></td>
+              <td><a ui-sref="image({id: container.Image})">{{ container.Image }}</a></td>
+              <td>{{ container.Command|truncate:40 }}</td>
+              <td>{{ container.Created|getdate }}</td>
+              <td><span class="label label-{{ container.Status|statusbadge }}">{{ container.Status }}</span></td>
+            </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,159 @@
 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',
+function ($scope, Container, Settings, Messages, ViewSpinner, Config) {
 
-            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 = 'Created';
+  $scope.sortReverse = true;
+  $scope.state.toggle = false;
+  $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) {
+        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.toggleSelectAll = function () {
-                angular.forEach($scope.containers, function (i) {
-                    i.Checked = $scope.toggle;
-                });
-            };
+        }
 
-            $scope.toggleGetAll = function () {
-                Settings.displayAll = $scope.displayAll;
-                update({all: Settings.displayAll ? 1 : 0});
-            };
+      }
+    });
+    if (counter === 0) {
+      ViewSpinner.stop();
+    }
+  };
 
-            $scope.startAction = function () {
-                batch($scope.containers, Container.start, "Started");
-            };
+  $scope.selectItem = function (item) {
+    if (item.Checked) {
+      $scope.state.selectedItemCount++;
+    } else {
+      $scope.state.selectedItemCount--;
+    }
+  };
 
-            $scope.stopAction = function () {
-                batch($scope.containers, Container.stop, "Stopped");
-            };
+  $scope.toggleSelectAll = function () {
+    $scope.state.selectedItem = $scope.state.toggle;
+    angular.forEach($scope.state.filteredContainers, function (i) {
+      i.Checked = $scope.state.toggle;
+    });
+    if ($scope.state.toggle) {
+      $scope.state.selectedItemCount = $scope.state.filteredContainers.length;
+    } else {
+      $scope.state.selectedItemCount = 0;
+    }
+  };
 
-            $scope.restartAction = function () {
-                batch($scope.containers, Container.restart, "Restarted");
-            };
+  $scope.toggleGetAll = function () {
+    Settings.displayAll = $scope.state.displayAll;
+    update({all: Settings.displayAll ? 1 : 0});
+  };
 
-            $scope.killAction = function () {
-                batch($scope.containers, Container.kill, "Killed");
-            };
+  $scope.startAction = function () {
+    batch($scope.containers, Container.start, "Started");
+  };
 
-            $scope.pauseAction = function () {
-                batch($scope.containers, Container.pause, "Paused");
-            };
+  $scope.stopAction = function () {
+    batch($scope.containers, Container.stop, "Stopped");
+  };
 
-            $scope.unpauseAction = function () {
-                batch($scope.containers, Container.unpause, "Unpaused");
-            };
+  $scope.restartAction = function () {
+    batch($scope.containers, Container.restart, "Restarted");
+  };
 
-            $scope.removeAction = function () {
-                batch($scope.containers, Container.remove, "Removed");
-            };
+  $scope.killAction = function () {
+    batch($scope.containers, Container.kill, "Killed");
+  };
 
-            update({all: Settings.displayAll ? 1 : 0});
-        }]);
+  $scope.pauseAction = function () {
+    batch($scope.containers, Container.pause, "Paused");
+  };
+
+  $scope.unpauseAction = function () {
+    batch($scope.containers, Container.unpause, "Unpaused");
+  };
+
+  $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;
+      }
+    });
+  };
+
+  var hiddenLabels;
+  Config.$promise.then(function (c) {
+    hiddenLabels = c.hiddenLabels;
+    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/createNetwork/createNetwork.html

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

app/components/createNetwork/createNetworkController.js

@@ -0,0 +1,41 @@
+angular.module('createNetwork', [])
+.controller('CreateNetworkController', ['$scope', '$state', 'Messages', 'Network', 'ViewSpinner', 'errorMsgFilter',
+function ($scope, $state, Messages, Network, ViewSpinner, errorMsgFilter) {
+  $scope.template = 'app/components/createNetwork/createNetwork.html';
+
+  $scope.init = function () {
+    $scope.createNetworkConfig = {
+      "Name": '',
+      "Driver": '',
+      "IPAM": {
+        "Config": [{}]
+      }
+    };
+  };
+
+  $scope.init();
+
+  $scope.createNetwork = function addNetwork(createNetworkConfig) {
+    if (_.isEmpty(createNetworkConfig.IPAM.Config[0])) {
+      delete createNetworkConfig.IPAM;
+    }
+    $('#error-message').hide();
+    ViewSpinner.spin();
+    $('#create-network-modal').modal('hide');
+    Network.create(createNetworkConfig, function (d) {
+      if (d.Id) {
+        Messages.send("Network created", d.Id);
+      } else {
+        Messages.error('Failure', errorMsgFilter(d));
+      }
+      ViewSpinner.stop();
+      $scope.init();
+      $state.go('networks', {}, {reload: true});
+    }, function (e) {
+      ViewSpinner.stop();
+      $scope.error = "Cannot pull image " + imageName + " Reason: " + e.data;
+      $('#create-network-modal').modal('show');
+      $('#error-message').show();
+    });
+  };
+}]);

app/components/createVolume/createVolume.html

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

app/components/createVolume/createVolumeController.js

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

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 UI for Docker 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,75 +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;
-            localStorage.setItem('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', 'Version', function ($scope, Settings, Version) {
-        $scope.template = 'app/components/footer/statusbar.html';
-
-        $scope.uiVersion = Settings.uiVersion;
-        Version.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,77 @@
-<div ng-include="template" ng-controller="BuilderController"></div>
 <div ng-include="template" ng-controller="PullImageController"></div>
 
-<h2>Images:</h2>
+<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>
 
-<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>
+  <rd-header-content>Images</rd-header-content>
+</rd-header>
 
-    <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="col-lg-12">
+  <rd-widget>
+    <rd-widget-header icon="fa-clone" title="Images">
+    </rd-widget-header>
+    <rd-widget-taskbar classes="col-lg-12">
+      <div class="pull-left">
+        <div class="btn-group" role="group" aria-label="...">
+          <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount">Remove</button>
+          <button type="button" class="btn btn-default" data-toggle="modal" data-target="#pull-modal">Pull new image...</button>
+        </div>
+      </div>
+      <div class="pull-right">
+        <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
+      </div>
+    </rd-widget-taskbar>
+    <rd-widget-body classes="no-padding">
+      <div class="table-responsive">
+        <table class="table">
+          <thead>
+            <tr>
+              <th><label><input type="checkbox" ng-model="state.toggle" ng-change="toggleSelectAll()" /> Select</label></th>
+              <th>
+                <a ui-sref="images" ng-click="order('Id')">
+                  Id
+                  <span ng-show="sortType == 'Id' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Id' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="images" ng-click="order('RepoTags')">
+                  Repository
+                  <span ng-show="sortType == 'RepoTags' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'RepoTags' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="images" ng-click="order('VirtualSize')">
+                  VirtualSize
+                  <span ng-show="sortType == 'VirtualSize' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'VirtualSize' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="images" ng-click="order('Created')">
+                  Created
+                  <span ng-show="sortType == 'Created' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Created' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr ng-repeat="image in (state.filteredImages = (images | filter:state.filter | orderBy:sortType:sortReverse))">
+              <td><input type="checkbox" ng-model="image.Checked" ng-change="selectItem(image)" /></td>
+              <td><a ui-sref="image({id: image.Id})">{{ image.Id|truncate:20}}</a></td>
+              <td>{{ image|repotag }}</td>
+              <td>{{ image.VirtualSize|humansize }}</td>
+              <td>{{ image.Created|getdate }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </rd-widget-body>
+  <rd-widget>
 </div>
-<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,75 @@
 angular.module('images', [])
-    .controller('ImagesController', ['$scope', 'Image', 'ViewSpinner', 'Messages',
-        function ($scope, Image, ViewSpinner, Messages) {
-            $scope.toggle = false;
-            $scope.predicate = '-Created';
+.controller('ImagesController', ['$scope', 'Image', 'ViewSpinner', 'Messages',
+function ($scope, 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.order = function(sortType) {
+    $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
+    $scope.sortType = sortType;
+  };
 
-            $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.toggleSelectAll = function () {
+    angular.forEach($scope.state.filteredImages, function (i) {
+      i.Checked = $scope.state.toggle;
+    });
+    if ($scope.state.toggle) {
+      $scope.state.selectedItemCount = $scope.state.filteredImages.length;
+    } else {
+      $scope.state.selectedItemCount = 0;
+    }
+  };
 
-            $scope.toggleSelectAll = function () {
-                angular.forEach($scope.images, function (i) {
-                    i.Checked = $scope.toggle;
-                });
-            };
+  $scope.selectItem = function (item) {
+    if (item.Checked) {
+      $scope.state.selectedItemCount++;
+    } else {
+      $scope.state.selectedItemCount--;
+    }
+  };
 
-            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.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,14 +0,0 @@
-angular.module('info', [])
-    .controller('InfoController', ['$scope', 'Info', 'Version', 'Settings',
-        function ($scope, Info, Version, Settings) {
-            $scope.info = {};
-            $scope.docker = {};
-            $scope.endpoint = Settings.endpoint;
-
-            Version.get({}, function (d) {
-                $scope.docker = d;
-            });
-            Info.get({}, function (d) {
-                $scope.info = d;
-            });
-        }]);

app/components/masthead/masthead.html

@@ -1,21 +0,0 @@
-<div class="masthead">
-    <h3 class="text-muted">DockerUI</h3>
-
-    <div class="col-xs-11">
-        <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 ng-if="showNetworksVolumes"><a href="#/networks/">Networks</a></li>
-            <li ng-if="showNetworksVolumes"><a href="#/volumes/">Volumes</a></li>
-            <li><a href="#/info/">Info</a></li>
-        </ul>
-    </div>
-    <div class="col-xs-1">
-        <button class="btn btn-primary" ng-click="refresh()">
-            <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
-            Refresh
-        </button>
-    </div>
-</div>

app/components/masthead/mastheadController.js

@@ -1,15 +0,0 @@
-angular.module('masthead', [])
-    .controller('MastheadController', ['$scope', 'Version', function ($scope, Version) {
-        $scope.template = 'app/components/masthead/masthead.html';
-        $scope.showNetworksVolumes = false;
-
-        Version.get(function(d) {
-            if (d.ApiVersion >= 1.21) {
-                $scope.showNetworksVolumes = true;
-            }
-        });
-
-        $scope.refresh = function() {
-            location.reload();
-        };
-    }]);

app/components/network/network.html

@@ -1,110 +1,127 @@
-<div class="detail">
+<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>
 
-    <h4>Network: {{ network.Name }}</h4>
-
-    <table class="table table-striped">
-        <tbody>
-        <tr>
-            <td>Name:</td>
-            <td>{{ network.Name }}</td>
-        </tr>
-        <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>
+<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>
+                  <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>
+              </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 href="#/containers/{{ Id }}">{{ Id }}</a></td>
-                        <td>
-                            <button ng-click="disconnect(network.Id, Id)" class="btn btn-danger btn-sm">
-                                Disconnect from network
-                            </button>
-                        </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>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>
-                <form class="form-inline">
-                    <div class="form-group">
-                        <label>Container ID:
-                            <input ng-model="containerId" placeholder="3613f73ba0e4" class="form-control">
-                        </label>
-                    </div>
-                    <button ng-click="connect(network.Id, containerId)" class="btn btn-primary">
-                        Connect
-                    </button>
-                </form>
-            </td>
-        </tr>
-        <tr>
-            <td>Options:</td>
-            <td>
+              </td>
+            </tr>
+            <tr>
+              <td>Options</td>
+              <td>
                 <table role="table" class="table table-striped">
-                    <tr>
-                        <th>Key</th>
-                        <th>Value</th>
-                    </tr>
-                    <tr ng-repeat="(k, v) in network.Options">
-                        <td>{{ k }}</td>
-                        <td>{{ v }}</td>
-                    </tr>
+                  <tr ng-repeat="(k, v) in network.Options">
+                    <td>{{ k }}</td>
+                    <td>{{ v }}</td>
+                  </tr>
                 </table>
-            </td>
-        </tr>
-        </tbody>
-    </table>
-
-
-    <hr/>
-
-
-    <div class="btn-remove">
-        <button class="btn btn-large btn-block btn-primary btn-danger" ng-click="removeImage(id)">Remove Network
-        </button>
-    </div>
-</div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/components/network/networkController.js

@@ -1,56 +1,37 @@
-angular.module('network', []).config(['$routeProvider', function ($routeProvider) {
-    $routeProvider.when('/networks/:id/', {
-        templateUrl: 'app/components/network/network.html',
-        controller: 'NetworkController'
+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);
     });
-}]).controller('NetworkController', ['$scope', 'Network', 'ViewSpinner', 'Messages', '$routeParams', '$location', 'errorMsgFilter',
-    function ($scope, Network, ViewSpinner, Messages, $routeParams, $location, errorMsgFilter) {
+  };
 
-        $scope.disconnect = function disconnect(networkId, containerId) {
-            ViewSpinner.spin();
-            Network.disconnect({id: $routeParams.id}, {Container: containerId}, function (d) {
-                ViewSpinner.stop();
-                Messages.send("Container disconnected", containerId);
-                $location.path('/networks/' + $routeParams.id); // Refresh the current page.
-            }, function (e) {
-                ViewSpinner.stop();
-                Messages.error("Failure", e.data);
-            });
-        };
-        $scope.connect = function connect(networkId, containerId) {
-            ViewSpinner.spin();
-            Network.connect({id: $routeParams.id}, {Container: containerId}, function (d) {
-                ViewSpinner.stop();
-                var errmsg = errorMsgFilter(d);
-                if (errmsg) {
-                    Messages.error('Error', errmsg);
-                } else {
-                    Messages.send("Container connected", d);
-                }
-                $location.path('/networks/' + $routeParams.id); // Refresh the current page.
-            }, function (e) {
-                ViewSpinner.stop();
-                Messages.error("Failure", e.data);
-            });
-        };
-        $scope.remove = function remove(networkId) {
-            ViewSpinner.spin();
-            Network.remove({id: $routeParams.id}, function (d) {
-                ViewSpinner.stop();
-                Messages.send("Network removed", d);
-                $location.path('/networks'); // Go to the networks page
-            }, 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: $routeParams.id}, function (d) {
-            $scope.network = d;
-            ViewSpinner.stop();
-        }, function (e) {
-            Messages.error("Failure", e.data);
-            ViewSpinner.stop();
-        });
-    }]);
+  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

@@ -1,80 +1,101 @@
-<h2>Networks:</h2>
+<div ng-include="template" ng-controller="CreateNetworkController"></div>
 
-<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>
+<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="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="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">
+        <div class="btn-group" role="group" aria-label="...">
+          <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount">Remove</button>
+          <button type="button" class="btn btn-default" data-toggle="modal" data-target="#create-network-modal">Create new network...</button>
+        </div>
+      </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>
-<table class="table table-striped">
-    <thead>
-    <tr>
-        <th><input type="checkbox" ng-model="toggle" ng-change="toggleSelectAll()"/> Select</th>
-        <th>Name</th>
-        <th>Id</th>
-        <th>Scope</th>
-        <th>Driver</th>
-        <th>IPAM Driver</th>
-        <th>IPAM Subnet</th>
-        <th>IPAM Gateway</th>
-    </tr>
-    </thead>
-    <tbody>
-    <tr ng-repeat="network in networks | filter:filter | orderBy:predicate">
-        <td><input type="checkbox" ng-model="network.Checked"/></td>
-        <td><a href="#/networks/{{ 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 class="row">
-    <div class="col-xs-offset-3 col-xs-6">
-        <form role="form" class="">
-            <div class="form-group">
-                <label>Name:</label>
-                <input type="text" placeholder='isolated_nw'
-                       ng-model="createNetworkConfig.Name" class="form-control"/>
-            </div>
-            <div class="form-group">
-                <label>Driver:</label>
-                <input type="text" placeholder='bridge'
-                       ng-model="createNetworkConfig.Driver" class="form-control"/>
-            </div>
-            <div class="form-group">
-                <label>Subnet:</label>
-                <input type="text" placeholder='172.20.0.0/16'
-                       ng-model="createNetworkConfig.IPAM.Config[0].Subnet" class="form-control"/>
-            </div>
-            <div class="form-group">
-                <label>IPRange:</label>
-                <input type="text" placeholder='172.20.10.0/24'
-                       ng-model="createNetworkConfig.IPAM.Config[0].IPRange" class="form-control"/>
-            </div>
-            <div class="form-group">
-                <label>Gateway:</label>
-                <input type="text" placeholder='172.20.10.11'
-                       ng-model="createNetworkConfig.IPAM.Config[0].Gateway" class="form-control"/>
-            </div>
-            <button type="button" class="btn btn-success btn-sm"
-                    ng-click="addNetwork(createNetworkConfig)">
-                Create Network
-            </button>
-        </form>
-    </div>
-</div>

app/components/networks/networksController.js

@@ -1,82 +1,71 @@
-angular.module('networks', []).config(['$routeProvider', function ($routeProvider) {
-    $routeProvider.when('/networks', {
-        templateUrl: 'app/components/networks/networks.html',
-        controller: 'NetworksController'
+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;
     });
-}]).controller('NetworksController', ['$scope', 'Network', 'ViewSpinner', 'Messages', '$route', 'errorMsgFilter',
-    function ($scope, Network, ViewSpinner, Messages, $route, errorMsgFilter) {
-        $scope.toggle = false;
-        $scope.predicate = '-Created';
-        $scope.createNetworkConfig = {
-            "Name": '',
-            "Driver": '',
-            "IPAM": {
-                "Config": [{
-                    "Subnet": '',
-                    "IPRange": '',
-                    "Gateway": ''
-                }]
-            }
-        };
+    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();
+        });
+      }
+    });
+  };
 
-        $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();
-                    });
-                }
-            });
-        };
-
-        $scope.toggleSelectAll = function () {
-            angular.forEach($scope.networks, function (i) {
-                i.Checked = $scope.toggle;
-            });
-        };
-
-        $scope.addNetwork = function addNetwork(createNetworkConfig) {
-            ViewSpinner.spin();
-            Network.create(createNetworkConfig, function (d) {
-                if (d.Id) {
-                    Messages.send("Network created", d.Id);
-                } else {
-                    Messages.error('Failure', errorMsgFilter(d));
-                }
-                ViewSpinner.stop();
-                fetchNetworks();
-            }, function (e) {
-                Messages.error("Failure", e.data);
-                ViewSpinner.stop();
-            });
-        };
-
-        function fetchNetworks() {
-            ViewSpinner.spin();
-            Network.query({}, function (d) {
-                $scope.networks = d;
-                ViewSpinner.stop();
-            }, function (e) {
-                Messages.error("Failure", e.data);
-                ViewSpinner.stop();
-            });
-        }
-        fetchNetworks();
-    }]);
+  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 +1,35 @@
 <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 class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times" aria-hidden="true"></i></button>
+        <h3>Pull image</h3>
+      </div>
+      <div class="modal-body">
+        <form novalidate role="form" name="pullForm">
+          <div class="form-group">
+            <label>Registry:</label>
+            <input type="text" ng-model="config.registry" class="form-control"
+            placeholder="Leave empty to user DockerHub"/>
+          </div>
+          <div class="form-group">
+            <label>Image Name:</label>
+            <input type="text" ng-model="config.fromImage" class="form-control" placeholder="username/image"
+            required/>
+          </div>
+          <div class="form-group">
+            <label>Tag Name:</label>
+            <input type="text" ng-model="config.tag" class="form-control"
+            placeholder="Leave empty to download ALL tags."/>
+          </div>
+        </form>
+      </div>
+      <div class="alert alert-error" id="error-message" style="display:none">
+        {{ error }}
+      </div>
+      <div class="modal-footer">
+        <a href="" class="btn btn-primary" ng-click="pull()">Pull</a>
+      </div>
     </div>
+  </div>
 </div>

app/components/pullImage/pullImageController.js

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

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

@@ -3,7 +3,7 @@
         <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>
+                <h3>Start a new container</h3>
             </div>
             <div class="modal-body">
                 <form role="form">
@@ -12,6 +12,11 @@
                             <fieldset>
                                 <div class="row">
                                     <div class="col-xs-6">
+                                      <div class="form-group">
+                                          <label>Image:</label>
+                                          <input type="text" placeholder='ubuntu:latest'
+                                                 ng-model="config.Image" class="form-control"/>
+                                      </div>
                                         <div class="form-group">
                                             <label>Cmd:</label>
                                             <input type="text" placeholder='["/bin/echo", "Hello world"]'
@@ -45,19 +50,18 @@
                                         </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>
+                                                    <a href="" ng-click="rmEntry(config.Volumes, volume)">
+                                                      <i class="fa fa-minus" aria-hidden="true"></i>
+                                                    </a>
                                                 </div>
                                             </div>
-                                            <button type="button" class="btn btn-success btn-sm"
-                                                    ng-click="addEntry(config.Volumes, {name: ''})">Add Volume
-                                            </button>
+                                            <a href="" ng-click="addEntry(config.Volumes, {name: ''})">
+                                              <i class="fa fa-plus" aria-hidden="true"></i>
+                                            </a>
                                         </div>
                                     </div>
                                     <div class="col-xs-6">
@@ -109,14 +113,14 @@
                                                 <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>
+                                                    <a href="" ng-click="rmEntry(config.SecurityOpts, opt)">
+                                                      <i class="fa fa-minus" aria-hidden="true"></i>
+                                                    </a>
                                                 </div>
                                             </div>
-                                            <button type="button" class="btn btn-success btn-sm"
-                                                    ng-click="addEntry(config.SecurityOpts, {name: ''})">Add Option
-                                            </button>
+                                            <a href="" ng-click="addEntry(config.SecurityOpts, {name: ''})">
+                                              <i class="fa fa-plus" aria-hidden="true"></i>
+                                            </a>
                                         </div>
                                     </div>
                                 </div>
@@ -137,16 +141,15 @@
                                                        placeholder="value"/>
                                             </div>
                                             <div class="form-group">
-                                                <button class="btn btn-danger btn-xs form-control"
-                                                        ng-click="rmEntry(config.Env, envar)">Remove
-                                                </button>
+                                                <a href="" ng-click="rmEntry(config.Env, envar)">
+                                                  <i class="fa fa-minus" aria-hidden="true"></i>
+                                                </a>
                                             </div>
                                         </div>
                                     </div>
-                                    <button type="button" class="btn btn-success btn-sm"
-                                            ng-click="addEntry(config.Env, {name: '', value: ''})">Add environment
-                                        variable
-                                    </button>
+                                    <a href="" ng-click="addEntry(config.Env, {name: '', value: ''})">
+                                      <i class="fa fa-plus" aria-hidden="true"></i>
+                                    </a>
                                 </div>
                                 <div class="form-group">
                                     <label>Labels:</label>
@@ -164,15 +167,15 @@
                                                        placeholder="value"/>
                                             </div>
                                             <div class="form-group">
-                                                <button class="btn btn-danger btn-xs form-control"
-                                                        ng-click="rmEntry(config.Labels, label)">Remove
-                                                </button>
+                                                <a href="" ng-click="rmEntry(config.Labels, label)">
+                                                  <i class="fa fa-minus" aria-hidden="true"></i>
+                                                </a>
                                             </div>
                                         </div>
                                     </div>
-                                    <button type="button" class="btn btn-success btn-sm"
-                                            ng-click="addEntry(config.Labels, {key: '', value: ''})">Add Label
-                                    </button>
+                                    <a href="" ng-click="addEntry(config.Labels, {key: '', value: ''})">
+                                      <i class="fa fa-plus" aria-hidden="true"></i>
+                                    </a>
                                 </div>
                             </fieldset>
                         </accordion-group>
@@ -187,14 +190,14 @@
                                                 <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>
+                                                    <a href="" ng-click="rmEntry(config.HostConfig.Binds, bind)">
+                                                      <i class="fa fa-minus" aria-hidden="true"></i>
+                                                    </a>
                                                 </div>
                                             </div>
-                                            <button type="button" class="btn btn-success btn-sm"
-                                                    ng-click="addEntry(config.HostConfig.Binds, {name: ''})">Add Bind
-                                            </button>
+                                            <a href="" ng-click="addEntry(config.HostConfig.Binds, {name: ''})">
+                                              <i class="fa fa-plus" aria-hidden="true"></i>
+                                            </a>
                                         </div>
                                         <div class="form-group">
                                             <label>Links:</label>
@@ -203,14 +206,14 @@
                                                 <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>
+                                                    <a href="" ng-click="rmEntry(config.HostConfig.Links, link)">
+                                                      <i class="fa fa-minus" aria-hidden="true"></i>
+                                                    </a>
                                                 </div>
                                             </div>
-                                            <button type="button" class="btn btn-success btn-sm"
-                                                    ng-click="addEntry(config.HostConfig.Links, {name: ''})">Add Link
-                                            </button>
+                                            <a href="" ng-click="addEntry(config.HostConfig.Links, {name: ''})">
+                                              <i class="fa fa-plus" aria-hidden="true"></i>
+                                            </a>
                                         </div>
                                         <div class="form-group">
                                             <label>Dns:</label>
@@ -219,14 +222,14 @@
                                                 <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>
+                                                    <a href="" ng-click="rmEntry(config.HostConfig.Dns, entry)">
+                                                      <i class="fa fa-minus" aria-hidden="true"></i>
+                                                    </a>
                                                 </div>
                                             </div>
-                                            <button type="button" class="btn btn-success btn-sm"
-                                                    ng-click="addEntry(config.HostConfig.Dns, {name: ''})">Add entry
-                                            </button>
+                                            <a href="" ng-click="addEntry(config.HostConfig.Dns, {name: ''})">
+                                              <i class="fa fa-plus" aria-hidden="true"></i>
+                                            </a>
                                         </div>
                                         <div class="form-group">
                                             <label>DnsSearch:</label>
@@ -235,16 +238,14 @@
                                                 <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>
+                                                    <a href="" ng-click="rmEntry(config.HostConfig.DnsSearch, entry)">
+                                                      <i class="fa fa-minus" aria-hidden="true"></i>
+                                                    </a>
                                                 </div>
                                             </div>
-                                            <button type="button" class="btn btn-success btn-sm"
-                                                    ng-click="addEntry(config.HostConfig.DnsSearch, {name: ''})">Add
-                                                entry
-                                            </button>
+                                            <a href="" ng-click="addEntry(config.HostConfig.DnsSearch, {name: ''})">
+                                              <i class="fa fa-plus" aria-hidden="true"></i>
+                                            </a>
                                         </div>
                                         <div class="form-group">
                                             <label>CapAdd:</label>
@@ -253,14 +254,14 @@
                                                 <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>
+                                                    <a href="" ng-click="rmEntry(config.HostConfig.CapAdd, entry)">
+                                                      <i class="fa fa-minus" aria-hidden="true"></i>
+                                                    </a>
                                                 </div>
                                             </div>
-                                            <button type="button" class="btn btn-success btn-sm"
-                                                    ng-click="addEntry(config.HostConfig.CapAdd, {name: ''})">Add entry
-                                            </button>
+                                            <a href="" ng-click="addEntry(config.HostConfig.CapAdd, {name: ''})">
+                                              <i class="fa fa-plus" aria-hidden="true"></i>
+                                            </a>
                                         </div>
                                         <div class="form-group">
                                             <label>CapDrop:</label>
@@ -269,14 +270,14 @@
                                                 <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>
+                                                    <a href="" ng-click="rmEntry(config.HostConfig.CapDrop, entry)">
+                                                      <i class="fa fa-minus" aria-hidden="true"></i>
+                                                    </a>
                                                 </div>
                                             </div>
-                                            <button type="button" class="btn btn-success btn-sm"
-                                                    ng-click="addEntry(config.HostConfig.CapDrop, {name: ''})">Add entry
-                                            </button>
+                                            <a href="" ng-click="addEntry(config.HostConfig.CapDrop, {name: ''})">
+                                              <i class="fa fa-plus" aria-hidden="true"></i>
+                                            </a>
                                         </div>
                                     </div>
                                     <div class="col-xs-6">
@@ -304,16 +305,14 @@
                                                             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>
+                                                    <a href="" ng-click="rmEntry(config.HostConfig.VolumesFrom, volume)">
+                                                      <i class="fa fa-minus" aria-hidden="true"></i>
+                                                    </a>
                                                 </div>
                                             </div>
-                                            <button type="button" class="btn btn-success btn-sm"
-                                                    ng-click="addEntry(config.HostConfig.VolumesFrom, {name: ''})">Add
-                                                volume
-                                            </button>
+                                            <a href="" ng-click="addEntry(config.HostConfig.VolumesFrom, {name: ''})">
+                                              <i class="fa fa-plus" aria-hidden="true"></i>
+                                            </a>
                                         </div>
 
                                         <div class="form-group">
@@ -346,16 +345,15 @@
                                                        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>
+                                                <a href="" ng-click="rmEntry(config.HostConfig.ExtraHosts, entry)">
+                                                  <i class="fa fa-minus" aria-hidden="true"></i>
+                                                </a>
                                             </div>
                                         </div>
                                     </div>
-                                    <button type="button" class="btn btn-success btn-sm"
-                                            ng-click="addEntry(config.HostConfig.ExtraHosts, {host: '', ip: ''})">Add
-                                        extra host
-                                    </button>
+                                    <a href="" ng-click="addEntry(config.HostConfig.ExtraHosts, {host: '', ip: ''})">
+                                      <i class="fa fa-plus" aria-hidden="true"></i>
+                                    </a>
                                 </div>
                                 <div class="form-group">
                                     <label>LxcConf:</label>
@@ -373,16 +371,15 @@
                                                        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>
+                                                <a href="" ng-click="rmEntry(config.HostConfig.LxcConf, entry)">
+                                                  <i class="fa fa-minus" aria-hidden="true"></i>
+                                                </a>
                                             </div>
                                         </div>
                                     </div>
-                                    <button type="button" class="btn btn-success btn-sm"
-                                            ng-click="addEntry(config.HostConfig.LxcConf, {name: '', value: ''})">Add
-                                        Entry
-                                    </button>
+                                    <a href="" ng-click="addEntry(config.HostConfig.LxcConf, {name: '', value: ''})">
+                                      <i class="fa fa-plus" aria-hidden="true"></i>
+                                    </a>
                                 </div>
                                 <div class="form-group">
                                     <label>Devices:</label>
@@ -398,15 +395,14 @@
                                             <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>
+                                            <a href="" ng-click="rmEntry(config.HostConfig.Devices, device)">
+                                              <i class="fa fa-minus" aria-hidden="true"></i>
+                                            </a>
                                         </div>
                                     </div>
-                                    <button type="button" class="btn btn-success btn-sm"
-                                            ng-click="addEntry(config.HostConfig.Devices, { PathOnHost: '', PathInContainer: '', CgroupPermissions: ''})">
-                                        Add Device
-                                    </button>
+                                    <a href="" ng-click="addEntry(config.HostConfig.Devices, { PathOnHost: '', PathInContainer: '', CgroupPermissions: ''})">
+                                      <i class="fa fa-plus" aria-hidden="true"></i>
+                                    </a>
                                 </div>
                                 <div class="form-group">
                                     <label>PortBindings:</label>
@@ -426,16 +422,14 @@
                                                 <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>
+                                            <a href="" ng-click="rmEntry(config.HostConfig.PortBindings, portBinding)">
+                                              <i class="fa fa-minus" aria-hidden="true"></i>
+                                            </a>
                                         </div>
                                     </div>
-                                    <button type="button" class="btn btn-success btn-sm"
-                                            ng-click="addEntry(config.HostConfig.PortBindings, {ip: '', extPort: '', intPort: ''})">
-                                        Add Port Binding
-                                    </button>
+                                    <a href="" ng-click="addEntry(config.HostConfig.PortBindings, {ip: '', extPort: '', intPort: ''})">
+                                      <i class="fa fa-plus" aria-hidden="true"></i>
+                                    </a>
                                 </div>
                             </fieldset>
                         </accordion-group>

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 {{ networkName}}</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,176 +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: Force scale to 0-100 for cpu, fix charts on dashboard,
-        // TODO: Force memory scale to 0 - max memory
+.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, 5000);
-            }, function () {
-                Messages.error('Unable to retrieve stats', 'Is this container running?');
-                timeout = $timeout(updateStats, 5000);
-            });
+        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) {
-            cpuChart.addData([calculateCPUPercent(data)], new Date(data.read).toLocaleTimeString());
-            cpuChart.removeData();
-        }
+    updateStats();
 
-        function 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) {
-            // 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 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) {
-                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|statusbadge }}">{{ node.status }}</span></td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/components/swarm/swarmController.js

@@ -0,0 +1,63 @@
+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 + 2][1];
+        node.cpu = info[offset + 3][1];
+        node.memory = info[offset + 4][1];
+        node.labels = info[offset + 5][1];
+        node.error = info[offset + 6][1];
+        node.version = info[offset + 8][1];
+        $scope.swarm.Status.push(node);
+      }
+    }]);

app/components/volumes/volumes.html

@@ -1,56 +1,68 @@
-<h2>Volumes:</h2>
+<div ng-include="template" ng-controller="CreateVolumeController"></div>
 
-<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>
-    </ul>
+<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="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="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">
+        <div class="btn-group" role="group" aria-label="...">
+          <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount">Remove</button>
+          <button type="button" class="btn btn-default" data-toggle="modal" data-target="#create-volume-modal">Create new volume...</button>
+        </div>
+      </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>
-<table class="table table-striped">
-    <thead>
-    <tr>
-        <th><input type="checkbox" ng-model="toggle" ng-change="toggleSelectAll()"/> Select</th>
-        <th>Name</th>
-        <th>Driver</th>
-        <th>Mountpoint</th>
-    </tr>
-    </thead>
-    <tbody>
-    <tr ng-repeat="volume in volumes | filter:filter | orderBy:predicate">
-        <td><input type="checkbox" ng-model="volume.Checked"/></td>
-        <td>{{ volume.Name|truncate:20 }}</td>
-        <td>{{ volume.Driver }}</td>
-        <td>{{ volume.Mountpoint }}</td>
-    </tr>
-    </tbody>
-</table>
-<div class="row">
-    <div class="col-xs-offset-3 col-xs-6">
-        <form role="form" class="">
-            <div class="form-group">
-                <label>Name:</label>
-                <input type="text" placeholder='tardis'
-                       ng-model="createVolumeConfig.Name" class="form-control"/>
-            </div>
-            <div class="form-group">
-                <label>Driver:</label>
-                <input type="text" placeholder='local'
-                       ng-model="createVolumeConfig.Driver" class="form-control"/>
-            </div>
-            <button type="button" class="btn btn-success btn-sm"
-                    ng-click="addVolume(createVolumeConfig)">
-                Create Volume
-            </button>
-        </form>
-    </div>
-</div>

app/components/volumes/volumesController.js

@@ -1,75 +1,70 @@
-angular.module('volumes', []).config(['$routeProvider', function ($routeProvider) {
-    $routeProvider.when('/volumes', {
-        templateUrl: 'app/components/volumes/volumes.html',
-        controller: 'VolumesController'
+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;
     });
-}]).controller('VolumesController', ['$scope', 'Volume', 'ViewSpinner', 'Messages', '$route', 'errorMsgFilter',
-    function ($scope, Volume, ViewSpinner, Messages, $route, errorMsgFilter) {
-        $scope.toggle = false;
-        $scope.predicate = '-Created';
-        $scope.createVolumeConfig = {
-            "Name": "",
-            "Driver": ""
-        };
+    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();
+        });
+      }
+    });
+  };
 
-        $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();
-                    });
-                }
-            });
-        };
-
-        $scope.toggleSelectAll = function () {
-            angular.forEach($scope.volumes, function (i) {
-                i.Checked = $scope.toggle;
-            });
-        };
-
-        $scope.addVolume = function addVolume(createVolumeConfig) {
-            ViewSpinner.spin();
-            Volume.create(createVolumeConfig, function (d) {
-                if (d.Name) {
-                    Messages.send("Volume created", d.Name);
-                } else {
-                    Messages.error('Failure', errorMsgFilter(d));
-                }
-                ViewSpinner.stop();
-                fetchVolumes();
-            }, function (e) {
-                Messages.error("Failure", e.data);
-                ViewSpinner.stop();
-            });
-        };
-
-        function fetchVolumes() {
-            ViewSpinner.spin();
-            Volume.query({}, function (d) {
-                $scope.volumes = d.Volumes;
-                ViewSpinner.stop();
-            }, function (e) {
-                Messages.error("Failure", e.data);
-                ViewSpinner.stop();
-            });
-        }
-        fetchVolumes();
-    }]);
+  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

@@ -23,12 +23,23 @@ angular.module('dockerui.filters', [])
         return function (text) {
             if (text === 'Ghost') {
                 return 'important';
+            } else if (text === 'Unhealthy') {
+                return 'danger';
             } else if (text.indexOf('Exit') !== -1 && text !== 'Exit 0') {
                 return 'warning';
             }
             return 'success';
         };
     })
+    .filter('trimcontainername', function () {
+      'use strict';
+      return function (name) {
+        if (name) {
+          return (name.indexOf('/') === 0 ? name.replace('/','') : name);          
+        }
+        return '';
+      };
+    })
     .filter('getstatetext', function () {
         'use strict';
         return function (state) {

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
@@ -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);
                 });
@@ -92,7 +94,8 @@ angular.module('dockerui.services', ['ngResource'])
             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('Version', ['$resource', 'Settings', function VersionFactory($resource, Settings) {
@@ -139,6 +142,9 @@ angular.module('dockerui.services', ['ngResource'])
             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;
@@ -147,11 +153,11 @@ angular.module('dockerui.services', ['ngResource'])
         }
         var firstLoad = (localStorage.getItem('firstLoad') || 'true') === 'true';
         return {
-            displayAll: false,
-            endpoint: DOCKER_ENDPOINT,
-            uiVersion: UI_VERSION,
-            url: url,
-            firstLoad: firstLoad
+          displayAll: false,
+          endpoint: DOCKER_ENDPOINT,
+          uiVersion: UI_VERSION,
+          url: url,
+          firstLoad: firstLoad
         };
     }])
     .factory('ViewSpinner', function ViewSpinnerFactory() {
@@ -168,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) {
@@ -185,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) {

assets/css/app.css

@@ -114,3 +114,35 @@
     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;
+}

bower.json

@@ -1,13 +1,15 @@
 {
-  "name": "dockerui",
-  "version": "0.9.0-beta",
-  "homepage": "https://github.com/crosbymichael/dockerui",
+  "name": "uifordocker",
+  "version": "1.0.4",
+  "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,74 @@
-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()
+	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 +101,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 +117,7 @@ func createUnixHandler(e string) http.Handler {
 	return &UnixHandler{e}
 }
 
-func createHandler(dir string, e string) http.Handler {
+func createHandler(dir string, e string, c Config) http.Handler {
 	var (
 		mux         = http.NewServeMux()
 		fileHandler = http.FileServer(http.Dir(dir))
@@ -85,15 +136,50 @@ func createHandler(dir string, e string) http.Handler {
 		h = createUnixHandler(e)
 	}
 
+	// Use existing csrf authKey if present or generate a new one.
+	dat, err := ioutil.ReadFile(authKeyFile)
+	if err != nil {
+		fmt.Println(err)
+		authKey = securecookie.GenerateRandomKey(32)
+		err := ioutil.WriteFile(authKeyFile, 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.0.4")
+	kingpin.Parse()
 
-	handler := createHandler(*assets, *endpoint)
+	configuration := Config{
+		Swarm: *swarm,
+		HiddenLabels: *labels,
+	}
+
+	handler := createHandler(*assets, *endpoint, configuration)
 	if err := http.ListenAndServe(*addr, handler); err != nil {
 		log.Fatal(err)
 	}

examples/nginx-basic-auth/Dockerfile

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

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

@@ -1,8 +1,6 @@
 dockerui:
-  image: dockerui/dockerui
-  privileged: true
-  volumes:
-   - /var/run/docker.sock:/var/run/docker.sock
+  image: cloudinovasi/ui-for-docker
+  command: -e http://<SWARM_HOST>:<SWARM_PORT>
 
 nginx:
   build: .

examples/swarm/Dockerfile

@@ -1,3 +0,0 @@
-FROM debian
-
-RUN apt-get update && apt-get install -y socat

examples/swarm/README.md

@@ -1,11 +0,0 @@
-# DockerUI with Swarm
-
-This example works with swarm clusters created with docker-machine.
-
-## Usage
-
-Make sure your client is pointed directly to the Docker daemon on the swarm-master's node (not through swarm).
-
-```
-docker-compose up -d
-```

examples/swarm/docker-compose.yml

@@ -1,11 +0,0 @@
-dockerui:
-  image: dockerui/dockerui
-  command: -e http://127.0.0.1:2375
-  net: "host"
-
-socat:
-  build: .
-  net: "host"
-  command: socat -d -d TCP-L:2375,fork,bind=localhost ssl:127.0.0.1:3376,cert=/var/lib/boot2docker/server.pem,cafile=/var/lib/boot2docker/ca.pem,key=/var/lib/boot2docker/server-key.pem
-  volumes:
-    - /var/lib/boot2docker:/var/lib/boot2docker

gruntFile.js

@@ -30,15 +30,16 @@ module.exports = function (grunt) {
         'uglify',
         'clean:tmpl',
         'jshint',
-        'karma:unit',
+        //'karma:unit',
         'concat:index',
         'recess:min',
         'copy'
     ]);
     grunt.registerTask('test-watch', ['karma:watch']);
     grunt.registerTask('run', ['if:binaryNotExist', 'build', 'shell:buildImage', 'shell:run']);
-    grunt.registerTask('runSwarm', ['if:binaryNotExist', 'build', 'shell:buildImage', 'shell:runSwarm']);
+    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 () {
@@ -64,12 +65,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
             ],
@@ -81,18 +82,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'],
@@ -100,18 +105,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'}
                 ]
@@ -138,11 +135,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'],
@@ -152,13 +149,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: {
@@ -167,28 +166,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,
@@ -197,8 +196,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,
@@ -221,6 +220,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: {
@@ -243,28 +246,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 /var/run/docker.sock:/var/run/docker.sock --name ui-for-docker ui-for-docker'
                 ].join(';')
             },
             runSwarm: {
                 command: [
-                    'docker stop dockerui',
-                    'docker rm dockerui',
-                    'docker run --net=host -d --name dockerui dockerui -e http://127.0.0.1:2374'
+                    'docker stop ui-for-docker',
+                    'docker rm ui-for-docker',
+                    'docker run --privileged -d -p 9000:9000 --name ui-for-docker ui-for-docker -e http://10.0.7.10:4000 -swarm'
                 ].join(';')
             },
             cleanImages: {
@@ -274,7 +277,7 @@ module.exports = function (grunt) {
         'if': {
             binaryNotExist: {
                 options: {
-                    executable: 'dist/dockerui'
+                    executable: 'dist/ui-for-docker'
                 },
                 ifFalse: ['shell:buildBinary']
             }

index.html

@@ -1,41 +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" href="ico/apple-touch-icon-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.9.0-beta",
+  "name": "uifordocker",
+  "homepage": "https://github.com/kevana/ui-for-docker",
+  "version": "1.0.4",
   "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';