Merge branch 'release/1.0.4'

* feat(ui): latest Swarm API support

README.md

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

@@ -4,13 +4,13 @@ angular.module('uifordocker', [
   'ui.router',
   'ui.select',
   'ngCookies',
-  'ngRoute',
   'ngSanitize',
   'dockerui.services',
   'dockerui.filters',
   'dashboard',
   'container',
   'containers',
+  'docker',
   'images',
   'image',
   'pullImage',
@@ -31,7 +31,7 @@ angular.module('uifordocker', [
 
     $urlRouterProvider.otherwise('/');
 
-    $stateProvider
+    $stateProvider
     .state('index', {
       url: '/',
       templateUrl: 'app/components/dashboard/dashboard.html',
@@ -57,6 +57,11 @@ angular.module('uifordocker', [
       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',
@@ -92,7 +97,8 @@ angular.module('uifordocker', [
     $httpProvider.interceptors.push(function() {
       return {
         'response': function(response) {
-          if (typeof(response.data) === 'string' && response.data.startsWith('Conflict.')) {
+          if (typeof(response.data) === 'string' &&
+                  (response.data.startsWith('Conflict.') || response.data.startsWith('conflict:'))) {
             $.gritter.add({
               title: 'Error',
               text: $('<div>').text(response.data).html(),
@@ -113,4 +119,5 @@ angular.module('uifordocker', [
   // You need to set this to the api endpoint without the port i.e. http://192.168.1.9
   .constant('DOCKER_ENDPOINT', 'dockerapi')
   .constant('DOCKER_PORT', '') // Docker port, leave as an empty string if no port is requred.  If you have a port, prefix it with a ':' i.e. :4243
-  .constant('UI_VERSION', 'v1.0.0');
+  .constant('CONFIG_ENDPOINT', '/config')
+  .constant('UI_VERSION', 'v1.0.4');

app/components/container/container.html

@@ -1,3 +1,11 @@
+<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 class="row">
   <div class="col-lg-6 col-md-12 col-xs-12">
     <rd-widget>
@@ -53,8 +61,8 @@
             <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" href="#/containers/{{ container.Id }}/stats">Stats</a>
-            <a class="btn btn-default" type="button" href="#/containers/{{ container.Id }}/logs">Logs</a>
+            <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">
@@ -161,7 +169,7 @@
             </tr>
             <tr>
               <td>Image</td>
-              <td><a href="#/images/{{ container.Image }}/">{{ container.Image }}</a></td>
+              <td><a ui-sref="image({id: container.Image})">{{ container.Image }}</a></td>
             </tr>
           </tbody>
         </table>

app/components/containerLogs/containerlogs.html

@@ -1,3 +1,10 @@
+<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="row">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>

app/components/containers/containers.html

@@ -1,5 +1,14 @@
 <div ng-include="template" ng-controller="StartContainerController"></div>
 
+<rd-header>
+  <rd-header-title title="Container list">
+    <a data-toggle="tooltip" title="Refresh" ui-sref="containers" ui-sref-opts="{reload: true}">
+      <i class="fa fa-refresh" aria-hidden="true"></i>
+    </a>
+  </rd-header-title>
+  <rd-header-content>Containers</rd-header-content>
+</rd-header>
+
 <div class="col-lg-12">
   <rd-widget>
     <rd-widget-header icon="fa-tasks" title="Containers">
@@ -29,35 +38,35 @@
             <tr>
               <th><label><input type="checkbox" ng-model="state.toggle" ng-change="toggleSelectAll()" /> Select</label></th>
               <th>
-                <a href="#/containers/" ng-click="order('Names')">
+                <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 href="#/containers/" ng-click="order('Image')">
+                <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 href="#/containers/" ng-click="order('Command')">
+                <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 href="#/containers/" ng-click="order('Created')">
+                <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 href="#/containers/" ng-click="order('Status')">
+                <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>
@@ -68,8 +77,8 @@
           <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 href="#/containers/{{ container.Id }}">{{ container|containername}}</a></td>
-              <td><a href="#/images/{{ container.Image }}/">{{ container.Image }}</a></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>

app/components/containers/containersController.js

@@ -1,6 +1,6 @@
 angular.module('containers', [])
-.controller('ContainersController', ['$scope', 'Container', 'Settings', 'Messages', 'ViewSpinner',
-function ($scope, Container, Settings, Messages, ViewSpinner) {
+.controller('ContainersController', ['$scope', 'Container', 'Settings', 'Messages', 'ViewSpinner', 'Config',
+function ($scope, Container, Settings, Messages, ViewSpinner, Config) {
 
   $scope.state = {};
   $scope.state.displayAll = Settings.displayAll;
@@ -18,9 +18,11 @@ function ($scope, Container, Settings, Messages, ViewSpinner) {
     ViewSpinner.spin();
     $scope.state.selectedItemCount = 0;
     Container.query(data, function (d) {
-      $scope.containers = d.filter(function (container) {
-        return container.Image !== 'swarm';
-      }).map(function (container) {
+      var containers = d;
+      if (hiddenLabels) {
+        containers = hideContainers(d);
+      }
+      $scope.containers = containers.map(function (container) {
         return new ContainerViewModel(container);
       });
       ViewSpinner.stop();
@@ -134,5 +136,24 @@ function ($scope, Container, Settings, Messages, ViewSpinner) {
     batch($scope.containers, Container.remove, "Removed");
   };
 
-  update({all: Settings.displayAll ? 1 : 0});
+  var hideContainers = function (containers) {
+    return containers.filter(function (container) {
+      var filterContainer = false;
+      hiddenLabels.forEach(function(label, index) {
+        if (_.has(container.Labels, label.name) &&
+        container.Labels[label.name] === label.value) {
+          filterContainer = true;
+        }
+      });
+      if (!filterContainer) {
+        return container;
+      }
+    });
+  };
+
+  var hiddenLabels;
+  Config.$promise.then(function (c) {
+    hiddenLabels = c.hiddenLabels;
+    update({all: Settings.displayAll ? 1 : 0});
+  });
 }]);

app/components/dashboard/dashboard.html

@@ -1,3 +1,8 @@
+<rd-header>
+  <rd-header-title title="Home"></rd-header-title>
+  <rd-header-content>Dashboard</rd-header-content>
+</rd-header>
+
 <div class="row">
   <div class="col-lg-3 col-md-6 col-xs-12">
     <rd-widget>

app/components/dashboard/master-ctrl.js

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

app/components/docker/docker.html

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

app/components/docker/dockerController.js

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

app/components/image/image.html

@@ -1,3 +1,11 @@
+<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="row">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
@@ -53,7 +61,7 @@
             </tr>
             <tr>
               <td>Parent</td>
-              <td><a href="#/images/{{ image.Parent }}/">{{ image.Parent }}</a></td>
+              <td><a ui-sref="image({id: image.Parent})">{{ image.Parent }}</a></td>
             </tr>
             <tr>
               <td>Size (Virtual Size)</td>

app/components/images/images.html

@@ -1,5 +1,15 @@
 <div ng-include="template" ng-controller="PullImageController"></div>
 
+<rd-header>
+  <rd-header-title title="Image list">
+    <a data-toggle="tooltip" title="Refresh" ui-sref="images" ui-sref-opts="{reload: true}">
+      <i class="fa fa-refresh" aria-hidden="true"></i>
+    </a>
+  </rd-header-title>
+
+  <rd-header-content>Images</rd-header-content>
+</rd-header>
+
 <div class="col-lg-12">
   <rd-widget>
     <rd-widget-header icon="fa-clone" title="Images">
@@ -22,28 +32,28 @@
             <tr>
               <th><label><input type="checkbox" ng-model="state.toggle" ng-change="toggleSelectAll()" /> Select</label></th>
               <th>
-                <a href="#/images/" ng-click="order('Id')">
+                <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 href="#/images/" ng-click="order('RepoTags')">
+                <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 href="#/images/" ng-click="order('VirtualSize')">
+                <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 href="#/images/" ng-click="order('Created')">
+                <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>
@@ -54,7 +64,7 @@
           <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 href="#/images/{{ image.Id }}/?tag={{ image|repotag }}">{{ image.Id|truncate:20}}</a></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>

app/components/network/network.html

@@ -1,3 +1,10 @@
+<rd-header>
+  <rd-header-title title="Network details"></rd-header-title>
+  <rd-header-content>
+    Networks > <a ui-sref="network({id: network.Id})">{{ network.Name }}</a>
+  </rd-header-content>
+</rd-header>
+
 <div class="row">
   <div class="col-lg-9 col-md-9 col-xs-9">
     <rd-widget>
@@ -73,7 +80,7 @@
                 <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><a ui-sref="container({id: Id})">{{ Id }}</a></td>
                   </tr>
                   <tr>
                     <td>EndpointID</td>

app/components/network/networkController.js

@@ -1,5 +1,5 @@
-angular.module('network', []).config(['$routeProvider', function ($routeProvider) {
-}]).controller('NetworkController', ['$scope', 'Network', 'ViewSpinner', 'Messages', '$state', '$stateParams', 'errorMsgFilter',
+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) {

app/components/networks/networks.html

@@ -1,5 +1,15 @@
 <div ng-include="template" ng-controller="CreateNetworkController"></div>
 
+<rd-header>
+  <rd-header-title title="Network list">
+    <a data-toggle="tooltip" title="Refresh" ui-sref="networks" ui-sref-opts="{reload: true}">
+      <i class="fa fa-refresh" aria-hidden="true"></i>
+    </a>
+  </rd-header-title>
+  <rd-header-content>Networks</rd-header-content>
+</rd-header>
+
+
 <div class="col-lg-12">
   <rd-widget>
     <rd-widget-header icon="fa-sitemap" title="Networks">
@@ -22,49 +32,49 @@
             <tr>
               <th><label><input type="checkbox" ng-model="state.toggle" ng-change="toggleSelectAll()"/> Select</label></th>
               <th>
-                <a href="#/networks/" ng-click="order('Name')">
+                <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 href="#/networks/" ng-click="order('Id')">
+                <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 href="#/networks/" ng-click="order('Scope')">
+                <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 href="#/networks/" ng-click="order('Driver')">
+                <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 href="#/networks/" ng-click="order('IPAM.Driver')">
+                <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 href="#/networks/" ng-click="order('IPAM.Config[0].Subnet')">
+                <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 href="#/networks/" ng-click="order('IPAM.Config[0].Gateway')">
+                <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>
@@ -75,7 +85,7 @@
           <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 href="#/networks/{{ network.Id }}/">{{ network.Name|truncate:20}}</a></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>

app/components/stats/stats.html

@@ -1,3 +1,10 @@
+<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-lg-12 col-md-12 col-xs-12">
     <rd-widget>
@@ -5,7 +12,7 @@
         <div class="widget-icon grey pull-left">
           <i class="fa fa-tasks"></i>
         </div>
-        <div class="title">{{ containerName }}</div>
+        <div class="title">{{ container.Name|trimcontainername }}</div>
         <div class="comment">
           Name
         </div>

app/components/stats/statsController.js

@@ -186,7 +186,7 @@ function (Settings, $scope, Messages, $timeout, Container, ContainerTop, $stateP
   });
 
   Container.get({id: $stateParams.id}, function (d) {
-    $scope.containerName = d.Name.substring(1);
+    $scope.container = d;
   }, function (e) {
     Messages.error("Failure", e.data);
   });

app/components/swarm/swarm.html

@@ -1,3 +1,12 @@
+<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>
@@ -86,28 +95,35 @@
           <thead>
             <tr>
               <th>
-                <a href="#/swarm/" ng-click="order('Name')">
+                <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 href="#/swarm/" ng-click="order('IP')">
+                <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 href="#/swarm/" ng-click="order('Containers')">
+                <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 href="#/swarm/" ng-click="order('Status')">
+                <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>
@@ -120,6 +136,7 @@
               <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>

app/components/swarm/swarmController.js

@@ -42,7 +42,7 @@ angular.module('swarm', [])
         var node_offset = 4;
         for (i = 0; i < node_count; i++) {
           extractNodeInfo(info, node_offset);
-          node_offset += 9;
+          node_offset += 10;
         }
       }
 
@@ -50,7 +50,8 @@ angular.module('swarm', [])
         var node = {};
         node.name = info[offset][0];
         node.ip = info[offset][1];
-        node.status = info[offset + 1][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];

app/components/volumes/volumes.html

@@ -1,5 +1,14 @@
 <div ng-include="template" ng-controller="CreateVolumeController"></div>
 
+<rd-header>
+  <rd-header-title title="Volume list">
+    <a data-toggle="tooltip" title="Refresh" ui-sref="volumes" ui-sref-opts="{reload: true}">
+      <i class="fa fa-refresh" aria-hidden="true"></i>
+    </a>
+  </rd-header-title>
+  <rd-header-content>Volumes</rd-header-content>
+</rd-header>
+
 <div class="col-lg-12">
   <rd-widget>
     <rd-widget-header icon="fa-cubes" title="Volumes">
@@ -22,21 +31,21 @@
             <tr>
               <th><label><input type="checkbox" ng-model="state.toggle" ng-change="toggleSelectAll()"/> Select</label></th>
               <th>
-                <a href="#/volumes/" ng-click="order('Name')">
+                <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 href="#/volumes/" ng-click="order('Driver')">
+                <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 href="#/volumes/" ng-click="order('Mountpoint')">
+                <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>

app/components/volumes/volumesController.js

@@ -1,6 +1,6 @@
 angular.module('volumes', [])
-.controller('VolumesController', ['$scope', 'Volume', 'ViewSpinner', 'Messages', '$route', 'errorMsgFilter',
-function ($scope, Volume, ViewSpinner, Messages, $route, errorMsgFilter) {
+.controller('VolumesController', ['$scope', 'Volume', 'ViewSpinner', 'Messages', 'errorMsgFilter',
+function ($scope, Volume, ViewSpinner, Messages, errorMsgFilter) {
   $scope.state = {};
   $scope.state.toggle = false;
   $scope.state.selectedItemCount = 0;

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/shared/services.js

@@ -142,6 +142,9 @@ angular.module('dockerui.services', ['ngResource', 'ngSanitize'])
             remove: {method: 'DELETE'}
         });
     }])
+    .factory('Config', ['$resource', 'CONFIG_ENDPOINT', function($resource, CONFIG_ENDPOINT) {
+      return $resource(CONFIG_ENDPOINT).get();
+    }])
     .factory('Settings', ['DOCKER_ENDPOINT', 'DOCKER_PORT', 'UI_VERSION', function SettingsFactory(DOCKER_ENDPOINT, DOCKER_PORT, UI_VERSION) {
         'use strict';
         var url = DOCKER_ENDPOINT;
@@ -150,11 +153,11 @@ angular.module('dockerui.services', ['ngResource', 'ngSanitize'])
         }
         var firstLoad = (localStorage.getItem('firstLoad') || 'true') === 'true';
         return {
-            displayAll: false,
-            endpoint: DOCKER_ENDPOINT,
-            uiVersion: UI_VERSION,
-            url: url,
-            firstLoad: firstLoad
+          displayAll: false,
+          endpoint: DOCKER_ENDPOINT,
+          uiVersion: UI_VERSION,
+          url: url,
+          firstLoad: firstLoad
         };
     }])
     .factory('ViewSpinner', function ViewSpinnerFactory() {

assets/css/app.css

@@ -116,8 +116,11 @@
 
 .logo {
   display: inline;
-  width: 110px;
-  max-height: 38px;
+  width: 100%;
+  max-width: 160px;
+  height: 100%;
+  max-height: 55px;
+  margin-bottom: 5px;
 }
 
 .containerNameInput {
@@ -139,3 +142,7 @@
   display: inline;
   font-size: 18px;
 }
+
+.header_title_content {
+  margin-left: 5px;
+}

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "uifordocker",
-  "version": "1.0.0",
+  "version": "1.0.4",
   "homepage": "https://github.com/kevana/ui-for-docker",
   "authors": [
     "Michael Crosby <crosbymichael@gmail.com>",
@@ -32,7 +32,6 @@
     "angular-mocks": "~1.5.0",
     "angular-oboe": "*",
     "angular-resource": "~1.5.0",
-    "angular-route": "~1.5.0",
     "angular-ui-select": "~0.17.1",
     "bootstrap": "~3.3.6",
     "font-awesome": "~4.5.0",

dockerui.go

@@ -1,25 +1,28 @@
-package main // import "github.com/cloudinovasi/cloudinovasi-ui"
+package main // import "github.com/cloudinovasi/ui-for-docker"
 
 import (
-	"flag"
 	"io"
 	"log"
 	"net"
 	"net/http"
 	"net/http/httputil"
 	"net/url"
+	"encoding/json"
 	"os"
 	"strings"
 	"github.com/gorilla/csrf"
 	"io/ioutil"
 	"fmt"
 	"github.com/gorilla/securecookie"
+	"gopkg.in/alecthomas/kingpin.v2"
 )
 
 var (
-	endpoint = flag.String("e", "/var/run/docker.sock", "Dockerd endpoint")
-	addr     = flag.String("p", ":9000", "Address and port to serve UI For Docker")
-	assets   = flag.String("a", ".", "Path to the assets")
+	endpoint = kingpin.Flag("endpoint", "Dockerd endpoint").Default("/var/run/docker.sock").Short('e').String()
+	addr 		 = kingpin.Flag("bind", "Address and port to serve UI For Docker").Default(":9000").Short('p').String()
+	assets   = kingpin.Flag("assets", "Path to the assets").Default(".").Short('a').String()
+	swarm	   = kingpin.Flag("swarm", "Swarm cluster support").Default("false").Short('s').Bool()
+	labels   = LabelParser(kingpin.Flag("hide-label", "Hide containers with a specific label in the UI").Short('l'))
 	authKey  []byte
 	authKeyFile = "authKey.dat"
 )
@@ -28,6 +31,44 @@ type UnixHandler struct {
 	path string
 }
 
+type Config struct {
+	Swarm bool `json:"swarm"`
+	HiddenLabels Labels `json:"hiddenLabels"`
+}
+
+type Label struct {
+	Name string `json:"name"`
+	Value string `json:"value"`
+}
+
+type Labels []Label
+
+func (l *Labels) Set(value string) error {
+  parts := strings.SplitN(value, "=", 2)
+  if len(parts) != 2 {
+    return fmt.Errorf("expected HEADER=VALUE got '%s'", value)
+  }
+	label := new(Label)
+  label.Name = parts[0]
+	label.Value = parts[1]
+	*l = append(*l, *label)
+  return nil
+}
+
+func (l *Labels) String() string {
+  return ""
+}
+
+func (l *Labels) IsCumulative() bool {
+  return true
+}
+
+func LabelParser(s kingpin.Settings) (target *[]Label) {
+	target = new([]Label)
+  s.SetValue((*Labels)(target))
+  return
+}
+
 func (h *UnixHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 	conn, err := net.Dial("unix", h.path)
 	if err != nil {
@@ -60,6 +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 {
@@ -72,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))
@@ -112,6 +157,9 @@ func createHandler(dir string, e string) http.Handler {
 
 	mux.Handle("/dockerapi/", http.StripPrefix("/dockerapi", h))
 	mux.Handle("/", fileHandler)
+	mux.HandleFunc("/config", func(w http.ResponseWriter, r *http.Request) {
+  	configurationHandler(w, r, c)
+  })
 	return CSRF(csrfWrapper(mux))
 }
 
@@ -123,9 +171,15 @@ func csrfWrapper(h http.Handler) http.Handler {
 }
 
 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)
 	}

gruntFile.js

@@ -24,7 +24,7 @@ module.exports = function (grunt) {
         'copy'
     ]);
     grunt.registerTask('release', [
-        'clean:app',
+        'clean:all',
         'if:binaryNotExist',
         'html2js',
         'uglify',
@@ -37,7 +37,7 @@ module.exports = function (grunt) {
     ]);
     grunt.registerTask('test-watch', ['karma:watch']);
     grunt.registerTask('run', ['if:binaryNotExist', 'build', 'shell:buildImage', 'shell:run']);
-    grunt.registerTask('runSwarm', ['if:binaryNotExist', 'build', 'shell:buildImage', 'shell:runSwarm', 'watch:buildSwarm']);
+    grunt.registerTask('run-swarm', ['if:binaryNotExist', 'build', 'shell:buildImage', 'shell:runSwarm', 'watch:buildSwarm']);
     grunt.registerTask('run-dev', ['if:binaryNotExist', 'shell:buildImage', 'shell:run', 'watch:build']);
     grunt.registerTask('clear', ['clean:app']);
 
@@ -65,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/Chart.js/Chart.js',
-                'bower_components/lodash/dist/lodash.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
             ],
@@ -83,8 +83,8 @@ module.exports = function (grunt) {
                 'bower_components/bootstrap/dist/css/bootstrap.css',
                 'bower_components/jquery.gritter/css/jquery.gritter.css',
                 'bower_components/font-awesome/css/font-awesome.min.css',
-                'bower_components/rdash-ui/dist/css/rdash.css',
-                'bower_components/angular-ui-select/dist/select.css'
+                'bower_components/rdash-ui/dist/css/rdash.min.css',
+                'bower_components/angular-ui-select/dist/select.min.css'
             ]
         },
         clean: {
@@ -135,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'],
@@ -149,16 +149,15 @@ module.exports = function (grunt) {
                 }
             },
             angular: {
-                src: ['bower_components/angular/angular.js',
-                    'bower_components/angular-sanitize/angular-sanitize.js',
-                    'bower_components/angular-cookies/angular-cookies.js',
-                    'bower_components/angular-route/angular-route.js',
-                    'bower_components/angular-ui-router/release/angular-ui-router.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-ui-select/dist/select.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,
@@ -268,7 +267,7 @@ module.exports = function (grunt) {
                 command: [
                     'docker stop ui-for-docker',
                     'docker rm ui-for-docker',
-                    'docker run --net=host -d --name ui-for-docker ui-for-docker -e http://10.0.7.11:4000'
+                    'docker run --privileged -d -p 9000:9000 --name ui-for-docker ui-for-docker -e http://10.0.7.10:4000 -swarm'
                 ].join(';')
             },
             cleanImages: {

index.html

@@ -7,17 +7,17 @@
   <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]-->
 
-  <script src="angular.js"></script>
-  <script src="vendor.js"></script>
-  <script src="<%= pkg.name %>.js"></script>
+  <script src="js/angular.js"></script>
+  <script src="js/vendor.js"></script>
+  <script src="js/<%= pkg.name %>.js"></script>
 
   <!-- Fav and touch icons -->
   <link rel="shortcut icon" href="ico/favicon.ico">
@@ -38,22 +38,25 @@
         </li>
         <li class="sidebar-title"><span>NAVIGATION</span></li>
         <li class="sidebar-list">
-          <a href="#">Dashboard <span class="menu-icon fa fa-tachometer"></span></a>
+          <a ui-sref="index">Dashboard <span class="menu-icon fa fa-tachometer"></span></a>
         </li>
         <li class="sidebar-list">
-          <a href="#/containers/">Containers <span class="menu-icon fa fa-server"></span></a>
+          <a ui-sref="containers">Containers <span class="menu-icon fa fa-server"></span></a>
         </li>
         <li class="sidebar-list">
-          <a href="#/images/">Images <span class="menu-icon fa fa-clone"></span></a>
+          <a ui-sref="images">Images <span class="menu-icon fa fa-clone"></span></a>
         </li>
         <li class="sidebar-list">
-          <a href="#/networks/">Networks <span class="menu-icon fa fa-sitemap"></span></a>
+          <a ui-sref="networks">Networks <span class="menu-icon fa fa-sitemap"></span></a>
         </li>
         <li class="sidebar-list">
-          <a href="#/volumes/">Volumes <span class="menu-icon fa fa-cubes"></span></a>
+          <a ui-sref="volumes">Volumes <span class="menu-icon fa fa-cubes"></span></a>
         </li>
-        <li class="sidebar-list">
-          <a href="#/swarm/">Swarm <span class="menu-icon fa fa-object-group"></span></a>
+        <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">
@@ -67,21 +70,6 @@
     <div id="content-wrapper">
       <div class="page-content">
 
-        <!-- Header Bar -->
-        <div class="row header">
-          <div class="col-xs-12">
-            <div class="meta">
-              <div class="page">
-                Dashboard
-              </div>
-              <div class="breadcrumb-links">
-                Home / Dashboard
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- End Header Bar -->
-
         <!-- Main Content -->
         <div id="view" ui-view></div>
 

package.json

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