Merge branch 'release/1.9.3'

* style(templates): new effect on hover

* feat(templates): display a loading message

.github/ISSUE_TEMPLATE.md

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

CONTRIBUTING.md

@@ -24,10 +24,9 @@ Each commit message should include a **type**, a **scope** and a **subject**:
 Lines should not exceed 100 characters. This allows the message to be easier to read on github as well as in various git tools and produces a nice, neat commit log ie:
 
 ```
- #271 feat(standard): add style config and refactor to match
- #270 fix(config): only override publicPath when served by webpack
- #269 feat(eslint-config-defaults): replace eslint-config-airbnb
- #268 feat(config): allow user to configure webpack stats output
+ #271 feat(containers): add exposed ports in the containers view
+ #270 fix(templates): fix a display issue in the templates view
+ #269 style(dashboard): update dashboard with new layout
 ```
 
 #### Type

README.md

@@ -1,77 +1,47 @@
-# Portainer
 
-The easiest way to manage Docker.
+<p align="center">
+  <img title="portainer" src='http://portainer.io/images/logo_alt.png' />
+</p>
 
+[![Microbadger version](https://images.microbadger.com/badges/version/portainer/portainer.svg)](https://microbadger.com/images/portainer/portainer "Latest version on Docker Hub")
 [![Microbadger](https://images.microbadger.com/badges/image/portainer/portainer.svg)](http://microbadger.com/images/portainer/portainer "Image size")
+[![Documentation Status](https://readthedocs.org/projects/portainer/badge/?version=latest)](http://portainer.readthedocs.io/en/latest/?badge=latest)
 [![Gitter](https://badges.gitter.im/portainer/Lobby.svg)](https://gitter.im/portainer/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
 
-Portainer is a lightweight management UI which allows you to **easily** manage your Docker host or Swarm cluster.
+**_Portainer_** is a lightweight management UI which allows you to **easily** manage your Docker host or Swarm cluster.
 
-# Usage
+**_Portainer_** is meant to be as **simple** to deploy as it is to use. It consists of a single container that can run on any Docker for Linux engine. A Docker for Windows version is on its way !
 
-It's really simple to deploy it using Docker:
+**_Portainer_** allows you to manage your Docker containers, images, volumes, networks and more ! It is compatible with the *standalone Docker* engine and with *Docker Swarm*.
 
-```shell
-$ docker run -d -p 9000:9000 portainer/portainer -H tcp://<DOCKER_HOST>:<DOCKER_PORT>
-```
+## Demo
 
-Just point it at your targeted Docker host and then access Portainer by hitting [http://localhost:9000](http://localhost:9000) with a web browser.
+<img src="http://portainer.io/images/screenshots/portainer.gif" width="77%"/>
 
-If your target is a Docker Swarm cluster or a Docker cluster using *swarm mode*, just add the flag `--swarm`:
+You can try out the public demo instance: http://demo.portainer.io/ (login with the username **demo** and the password **tryportainer**).
 
-```shell
-$ docker run -d -p 9000:9000 portainer/portainer -H tcp://<SWARM_HOST>:<SWARM_PORT> --swarm
-```
+Please note that the public demo cluster is **reset every 15min**.
 
-If you don't specify any target, its default behaviour is to use a bind mount on the Docker socket so you can easily deploy it to manage your local Docker host:
+## Getting started
 
-```shell
-$ docker run -d -p 9000:9000 -v /var/run/docker.sock:/var/run/docker.sock portainer/portainer
-```
+* [Deploy Portainer](https://portainer.readthedocs.io/en/latest/deployment.html)
+* [Documentation](https://portainer.readthedocs.io)
 
-Have a look at our [wiki](https://github.com/portainer/portainer/wiki/Deployment) for more deployment options.
+## Getting help
 
-# Configuration
+* Issues: https://github.com/portainer/portainer/issues
+* FAQ: https://portainer.readthedocs.io/en/latest/faq.html
+* Gitter (chat): https://gitter.im/portainer/Lobby
+* Slack: http://portainer.io/slack/
 
-Portainer is easy to tune using CLI flags.
+## Reporting bugs and contributing
 
-## Hiding specific containers
+* Want to report a bug or request a feature? Please open [an issue](https://github.com/portainer/portainer/issues/new).
+* Want to help us build **_portainer_**? Follow our [contribution guidelines](https://portainer.readthedocs.io/en/latest/contribute.html) to build it  locally and make a pull request. We need all the help we can get!
 
-Portainer allows you to hide container with a specific label by using the `-l` flag.
+## Limitations
 
-For example, take a container started with the label `owner=acme`:
-```shell
-$ docker run -d --label owner=acme nginx
-```
-
-Simply add the `-l owner=acme` option on the CLI when starting Portainer:
-```shell
-$ docker run -d -p 9000:9000 -v /var/run/docker.sock:/var/run/docker.sock portainer/portainer -l owner=acme
-```
-
-## Use your own templates
-
-Portainer allows you to rapidly deploy containers using `App Templates`.
-
-By default [Portainer templates](https://raw.githubusercontent.com/portainer/templates/master/templates.json) will be used but you can also define your own templates.
-
-Add the `--templates` flag and specify the external location of your templates when starting Portainer:
-
-```shell
-$ docker run -d -p 9000:9000 -v /var/run/docker.sock:/var/run/docker.sock portainer/portainer --templates http://my-host.my-domain/templates.json
-```
-
-For more information about hosting your own template definitions and the format, see: https://github.com/portainer/templates
-
-Have a look at our [wiki](https://github.com/portainer/portainer/wiki/Configuration) for more configuration options.
-
-# FAQ
-
-Be sure to check our [FAQ](https://github.com/portainer/portainer/wiki/FAQ) if you are missing some information.
-
-# Limitations
-
-Portainer has full support for the following Docker versions:
+**_Portainer_** has full support for the following Docker versions:
 
 * Docker 1.10 to Docker 1.12 (including `swarm-mode`)
 * Docker Swarm >= 1.2.3

api/main.go

@@ -6,7 +6,7 @@ import (
 
 // main is the entry point of the program
 func main() {
-	kingpin.Version("1.9.0")
+	kingpin.Version("1.9.3")
 	var (
 		endpoint  = kingpin.Flag("host", "Dockerd endpoint").Default("unix:///var/run/docker.sock").Short('H').String()
 		addr      = kingpin.Flag("bind", "Address and port to serve Portainer").Default(":9000").Short('p').String()

app/app.js

@@ -188,4 +188,4 @@ angular.module('portainer', [
   .constant('DOCKER_PORT', '') // Docker port, leave as an empty string if no port is requred.  If you have a port, prefix it with a ':' i.e. :4243
   .constant('CONFIG_ENDPOINT', 'settings')
   .constant('TEMPLATES_ENDPOINT', 'templates')
-  .constant('UI_VERSION', 'v1.9.0');
+  .constant('UI_VERSION', 'v1.9.3');

app/components/containerConsole/containerConsoleController.js

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

app/components/containers/containers.html

@@ -41,8 +41,8 @@
               <th>
                 <a ui-sref="containers" ng-click="order('Status')">
                   State
-                  <span ng-show="sortType == 'State' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'State' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  <span ng-show="sortType == 'Status' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Status' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
               <th>
@@ -93,11 +93,17 @@
               <td ng-if="swarm && !swarm_mode">{{ container.hostIP }}</td>
               <td>
                 <a ng-if="container.Ports.length > 0" ng-repeat="p in container.Ports" class="image-tag" ng-href="http://{{p.host}}:{{p.public}}" target="_blank">
-                  <i class="fa fa-external-link" aria-hidden="true"></i> {{ p.private }}
+                  <i class="fa fa-external-link" aria-hidden="true"></i> {{p.public}}:{{ p.private }}
                 </a>
                 <span ng-if="container.Ports.length == 0" >-</span>
               </td>
             </tr>
+            <tr ng-if="!containers">
+              <td colspan="8" class="text-center text-muted">Loading...</td>
+            </tr>
+            <tr ng-if="containers.length == 0">
+              <td colspan="8" class="text-center text-muted">No containers available.</td>
+            </tr>
           </tbody>
         </table>
       </div>

app/components/containers/containersController.js

@@ -1,7 +1,6 @@
 angular.module('containers', [])
 .controller('ContainersController', ['$scope', 'Container', 'ContainerHelper', 'Info', 'Settings', 'Messages', 'Config',
 function ($scope, Container, ContainerHelper, Info, Settings, Messages, Config) {
-
   $scope.state = {};
   $scope.state.displayAll = Settings.displayAll;
   $scope.state.displayIP = false;
@@ -34,6 +33,10 @@ function ($scope, Container, ContainerHelper, Info, Settings, Messages, Config)
         return model;
       });
       $('#loadContainersSpinner').hide();
+    }, function (e) {
+      $('#loadContainersSpinner').hide();
+      Messages.error("Failure", e, "Unable to retrieve containers");
+      $scope.containers = [];
     });
   };
 

app/components/createContainer/createContainerController.js

@@ -156,10 +156,10 @@ function ($scope, $state, Config, Info, Container, Image, Volume, Network, Messa
   function preparePortBindings(config) {
     var bindings = {};
     config.HostConfig.PortBindings.forEach(function (portBinding) {
-      if (portBinding.hostPort && portBinding.containerPort) {
+      if (portBinding.containerPort) {
         var key = portBinding.containerPort + "/" + portBinding.protocol;
         var binding = {};
-        if (portBinding.hostPort.indexOf(':') > -1) {
+        if (portBinding.hostPort && portBinding.hostPort.indexOf(':') > -1) {
           var hostAndPort = portBinding.hostPort.split(':');
           binding.HostIp = hostAndPort[0];
           binding.HostPort = hostAndPort[1];

app/components/createContainer/createcontainer.html

@@ -69,7 +69,7 @@
               <div ng-repeat="portBinding in config.HostConfig.PortBindings" style="margin-top: 2px;">
                 <div class="input-group col-sm-5 input-group-sm">
                   <span class="input-group-addon">host</span>
-                  <input type="text" class="form-control" ng-model="portBinding.hostPort" placeholder="e.g. 80 or 1.2.3.4:80">
+                  <input type="text" class="form-control" ng-model="portBinding.hostPort" placeholder="e.g. 80 or 1.2.3.4:80 (optional)">
                 </div>
                 <div class="input-group col-sm-5 input-group-sm">
                   <span class="input-group-addon">container</span>

app/components/dashboard/dashboard.html

@@ -41,7 +41,7 @@
           <tbody>
             <tr>
               <td>Nodes</td>
-              <td>{{ infoData.SystemStatus[3][1] }}</td>
+              <td>{{ infoData.SystemStatus[0][1] == 'primary' ? infoData.SystemStatus[3][1] : infoData.SystemStatus[4][1] }}</td>
             </tr>
             <tr>
               <td>Swarm version</td>
@@ -53,7 +53,7 @@
             </tr>
             <tr>
               <td>Total memory</td>
-              <td>{{ infoData.MemTotal|humansize }}</td>
+              <td>{{ infoData.MemTotal|humansize: 2 }}</td>
             </tr>
           </tbody>
         </table>

app/components/images/images.html

@@ -107,6 +107,12 @@
                 <td>{{ image.VirtualSize|humansize }}</td>
                 <td>{{ image.Created|getisodatefromtimestamp }}</td>
               </tr>
+              <tr ng-if="!images">
+                <td colspan="5" class="text-center text-muted">Loading...</td>
+              </tr>
+              <tr ng-if="images.length == 0">
+                <td colspan="5" class="text-center text-muted">No images available.</td>
+              </tr>
             </tbody>
           </table>
         </div>

app/components/images/imagesController.js

@@ -97,6 +97,7 @@ function ($scope, $state, Config, Image, Messages) {
     }, function (e) {
       $('#loadImagesSpinner').hide();
       Messages.error("Failure", e, "Unable to retrieve images");
+      $scope.images = [];
     });
   }
 

app/components/networks/networks.html

@@ -131,6 +131,12 @@
                 <td>{{ network.IPAM.Config[0].Subnet ? network.IPAM.Config[0].Subnet : '-' }}</td>
                 <td>{{ network.IPAM.Config[0].Gateway ? network.IPAM.Config[0].Gateway : '-' }}</td>
               </tr>
+              <tr ng-if="!networks">
+                <td colspan="8" class="text-center text-muted">Loading...</td>
+              </tr>
+              <tr ng-if="networks.length == 0">
+                <td colspan="8" class="text-center text-muted">No networks available.</td>
+              </tr>
             </tbody>
           </table>
         </div>

app/components/networks/networksController.js

@@ -6,7 +6,6 @@ function ($scope, $state, Network, Config, Messages) {
   $scope.state.advancedSettings = false;
   $scope.sortType = 'Name';
   $scope.sortReverse = false;
-
   $scope.config = {
     Name: ''
   };
@@ -92,6 +91,7 @@ function ($scope, $state, Network, Config, Messages) {
     }, function (e) {
       $('#loadNetworksSpinner').hide();
       Messages.error("Failure", e, "Unable to retrieve networks");
+      $scope.networks = [];
     });
   }
 

app/components/services/services.html

@@ -69,6 +69,12 @@
                   </span>
                 </td>
               </tr>
+              <tr ng-if="!services">
+                <td colspan="4" class="text-center text-muted">Loading...</td>
+              </tr>
+              <tr ng-if="services.length == 0">
+                <td colspan="4" class="text-center text-muted">No services available.</td>
+              </tr>
             </tbody>
           </table>
         </div>

app/components/services/servicesController.js

@@ -1,8 +1,6 @@
 angular.module('services', [])
 .controller('ServicesController', ['$scope', '$stateParams', '$state', 'Service', 'ServiceHelper', 'Messages',
 function ($scope, $stateParams, $state, Service, ServiceHelper, Messages) {
-
-  $scope.services = [];
   $scope.state = {};
   $scope.state.selectedItemCount = 0;
   $scope.sortType = 'Name';
@@ -77,6 +75,7 @@ function ($scope, $stateParams, $state, Service, ServiceHelper, Messages) {
     }, function(e) {
       $('#loadServicesSpinner').hide();
       Messages.error("Failure", e, "Unable to retrieve services");
+      $scope.services = [];
     });
   }
 

app/components/stats/statsController.js

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

app/components/swarm/swarm.html

@@ -42,8 +42,8 @@
             </tr>
             <tr>
               <td>Total memory</td>
-              <td ng-if="!swarm_mode">{{ info.MemTotal|humansize }}</td>
-              <td ng-if="swarm_mode">{{ totalMemory|humansize }}</td>
+              <td ng-if="!swarm_mode">{{ info.MemTotal|humansize: 2 }}</td>
+              <td ng-if="swarm_mode">{{ totalMemory|humansize: 2 }}</td>
             </tr>
             <tr ng-if="!swarm_mode">
               <td>Operating system</td>

app/components/swarm/swarmController.js

@@ -47,7 +47,8 @@ function ($scope, Info, Version, Node) {
     // Swarm filters
     $scope.swarm[systemStatus[2][0]] = systemStatus[2][1];
     // Swarm node count
-    var node_count = parseInt(systemStatus[3][1], 10);
+    var nodes = systemStatus[0][1] === 'primary' ? systemStatus[3][1] : systemStatus[4][1];
+    var node_count = parseInt(nodes, 10);
     $scope.swarm[systemStatus[3][0]] = node_count;
 
     $scope.swarm.Status = [];
@@ -55,9 +56,10 @@ function ($scope, Info, Version, Node) {
   }
 
   function extractNodesInfo(info, node_count) {
-    // First information for node1 available at element #4 of SystemStatus
+    // First information for node1 available at element #4 of SystemStatus if connected to a primary
+    // If connected to a replica, information for node1 is available at element #5
     // The next 10 elements are information related to the node
-    var node_offset = 4;
+    var node_offset = info[0][1] === 'primary' ? 4 : 5;
     for (i = 0; i < node_count; i++) {
       extractNodeInfo(info, node_offset);
       node_offset += 9;

app/components/templates/templates.html

@@ -7,31 +7,11 @@
   <rd-header-content>Templates</rd-header-content>
 </rd-header>
 
-<div class="row">
-  <div class="col-lg-12 col-md-12 col-xs-12">
-    <rd-widget>
-      <rd-widget-header icon="fa-rocket" title="Available templates">
-        <div class="pull-right">
-          <i id="loadTemplatesSpinner" class="fa fa-cog fa-2x fa-spin" style="margin-top: 5px;"></i>
-        </div>
-      </rd-widget-header>
-      <rd-widget-body classes="padding">
-        <div class="template-list">
-          <div ng-repeat="tpl in templates" class="container-template hvr-grow" id="template_{{ $index }}" ng-click="selectTemplate($index)">
-            <img class="logo" ng-src="{{ tpl.logo }}" />
-            <div class="title">{{ tpl.title }}</div>
-            <div class="description">{{ tpl.description }}</div>
-          </div>
-        </div>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>
-
 <div class="row" ng-if="selectedTemplate">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
-      <rd-widget-header icon="fa-cogs" title="Configuration"></rd-widget-header>
+      <rd-widget-custom-header icon="selectedTemplate.logo" title="selectedTemplate.image">
+      </rd-widget-custom-header>
       <rd-widget-body classes="padding">
         <form class="form-horizontal">
           <div class="form-group" ng-if="globalNetworkCount === 0 && !swarm_mode">
@@ -62,15 +42,21 @@
           <div ng-repeat="var in selectedTemplate.env" ng-if="!var.set" class="form-group">
             <label for="field_{{ $index }}" class="col-sm-2 control-label text-left">{{ var.label }}</label>
             <div class="col-sm-10">
-              <select ng-if="!swarm && var.type === 'container'" ng-options="container|containername for container in runningContainers" class="selectpicker form-control" ng-model="var.value">
+              <select ng-if="(!swarm || swarm && swarm_mode) && var.type === 'container'" ng-options="container|containername for container in runningContainers" class="selectpicker form-control" ng-model="var.value">
                 <option selected disabled hidden value="">Select a container</option>
               </select>
-              <select ng-if="swarm && var.type === 'container'" ng-options="container|swarmcontainername for container in runningContainers" class="selectpicker form-control" ng-model="var.value">
+              <select ng-if="swarm && !swarm_mode && var.type === 'container'" ng-options="container|swarmcontainername for container in runningContainers" class="selectpicker form-control" ng-model="var.value">
                 <option selected disabled hidden value="">Select a container</option>
               </select>
               <input ng-if="!var.type || !var.type === 'container'" type="text" class="form-control" ng-model="var.value" id="field_{{ $index }}">
             </div>
           </div>
+          <div class="form-group">
+            <div class="col-sm-12">
+              <button type="button" class="btn btn-default btn-sm" ng-disabled="!formValues.network" ng-click="createTemplate()">Create</button>
+              <i id="createContainerSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
+            </div>
+          </div>
         </form>
       </rd-widget-body>
     </rd-widget>
@@ -78,10 +64,32 @@
 </div>
 
 <div class="row" ng-if="selectedTemplate">
-  <div class="col-lg-12 col-md-12 col-xs-12" style="text-align: center;">
-    <div>
-      <i id="createContainerSpinner" class="fa fa-cog fa-3x fa-spin" style="margin-bottom: 5px; display: none;"></i>
-    </div>
-    <button type="button" class="btn btn-default btn-lg" ng-disabled="!formValues.network" ng-click="createTemplate()">Create</button>
+
+</div>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-rocket" title="Available templates">
+        <div class="pull-right">
+          <i id="loadTemplatesSpinner" class="fa fa-cog fa-2x fa-spin" style="margin-top: 5px;"></i>
+        </div>
+      </rd-widget-header>
+      <rd-widget-body classes="padding">
+        <div class="template-list">
+          <div ng-repeat="tpl in templates" class="container-template hvr-underline-from-center" id="template_{{ $index }}" ng-click="selectTemplate($index)">
+            <img class="logo" ng-src="{{ tpl.logo }}" />
+            <div class="title">{{ tpl.title }}</div>
+            <div class="description">{{ tpl.description }}</div>
+          </div>
+          <div ng-if="!templates" class="text-center text-muted">
+            Loading...
+          </div>
+          <div ng-if="templates.length == 0" class="text-center text-muted">
+            No templates available.
+          </div>
+        </div>
+      </rd-widget-body>
+    </rd-widget>
   </div>
 </div>

app/components/templates/templatesController.js

@@ -1,7 +1,6 @@
 angular.module('templates', [])
 .controller('TemplatesController', ['$scope', '$q', '$state', '$filter', 'Config', 'Info', 'Container', 'ContainerHelper', 'Image', 'Volume', 'Network', 'Templates', 'Messages',
 function ($scope, $q, $state, $filter, Config, Info, Container, ContainerHelper, Image, Volume, Network, Templates, Messages) {
-  $scope.templates = [];
   $scope.selectedTemplate = null;
   $scope.formValues = {
     network: "",
@@ -160,6 +159,7 @@ function ($scope, $q, $state, $filter, Config, Info, Container, ContainerHelper,
     }, function (e) {
       $('#loadTemplatesSpinner').hide();
       Messages.error("Failure", e, "Unable to retrieve apps list");
+      $scope.templates = [];
     });
   }
 

app/components/volumes/volumes.html

@@ -59,6 +59,12 @@
               <td>{{ volume.Driver }}</td>
               <td>{{ volume.Mountpoint }}</td>
             </tr>
+            <tr ng-if="!volumes">
+              <td colspan="4" class="text-center text-muted">Loading...</td>
+            </tr>
+            <tr ng-if="volumes.length == 0">
+              <td colspan="4" class="text-center text-muted">No volumes available.</td>
+            </tr>
           </tbody>
         </table>
       </div>

app/components/volumes/volumesController.js

@@ -5,7 +5,6 @@ function ($scope, $state, Volume, Messages) {
   $scope.state.selectedItemCount = 0;
   $scope.sortType = 'Name';
   $scope.sortReverse = true;
-
   $scope.config = {
     Name: ''
   };
@@ -60,6 +59,7 @@ function ($scope, $state, Volume, Messages) {
     }, function (e) {
       $('#loadVolumesSpinner').hide();
       Messages.error("Failure", e, "Unable to retrieve volumes");
+      $scope.volumes = [];
     });
   }
   fetchVolumes();

app/directives/widget-custom-header.js

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

app/shared/filters.js

@@ -123,15 +123,13 @@ angular.module('portainer.filters', [])
 })
 .filter('humansize', function () {
   'use strict';
-  return function (bytes) {
-    var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
-    if (bytes === 0) {
-      return 'n/a';
+  return function (bytes, round) {
+    if (!round) {
+      round = 1;
+    }
+    if (bytes || bytes === 0) {
+      return filesize(bytes, {base: 10, round: round});
     }
-    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10);
-    var value = bytes / Math.pow(1024, i);
-    var decimalPlaces = (i < 1) ? 0 : (i - 1);
-    return value.toFixed(decimalPlaces) + ' ' + sizes[[i]];
   };
 })
 .filter('containername', function () {

app/shared/viewmodel.js

@@ -105,6 +105,9 @@ function createEventDetails(event) {
       case 'unpause':
       details = 'Container ' + eventAttr.name + ' unpaused';
       break;
+      case 'attach':
+      details = 'Container ' + eventAttr.name + ' attached';
+      break;
       default:
       if (event.Action.indexOf('exec_create') === 0) {
         details = 'Exec instance created';
@@ -159,6 +162,12 @@ function createEventDetails(event) {
       case 'destroy':
       details = 'Volume ' + event.Actor.ID + ' deleted';
       break;
+      case 'mount':
+      details = 'Volume ' + event.Actor.ID + ' mounted';
+      break;
+      case 'unmount':
+      details = 'Volume ' + event.Actor.ID + ' unmounted';
+      break;
       default:
       details = 'Unsupported event';
     }

assets/css/app.css

@@ -216,44 +216,10 @@ input[type="radio"] {
   flex-wrap: wrap;
 }
 
-.container-template {
-  font-size: 1em;
-  width: 256px;
-  height: 128px;
-  margin: 10px;
-  padding: 10px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border-radius: 10px;
-  cursor: pointer;
-  border: 2px solid #f6f6f6;
-  color: #30426a;
-}
-
-.container-template--selected {
-  background-color: #f6f6f6;
-  color: #2d3e63;
-}
-
-.container-template:hover {
-  background-color: #f6f6f6;
-  color: #2d3e63;
-}
-
-.container-template .logo {
-  max-width: 48px;
-  max-height: 48px;
-}
-
-.container-template .title {
-  text-align: center;
-}
-
-.container-template .description {
-  text-align: center;
-  font-size: 0.8em;
+.custom-header-ico {
+  max-width: 32px;
+  max-height: 32px;
+  margin-right: 2px;
 }
 
 .btn-responsive {
@@ -271,3 +237,78 @@ input[type="radio"] {
     border-radius: 4px;
   }
 }
+
+/* Underline From Center */
+.hvr-underline-from-center {
+  display: inline-block;
+  vertical-align: middle;
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -moz-osx-font-smoothing: grayscale;
+  position: relative;
+  overflow: hidden;
+}
+.hvr-underline-from-center:before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  left: 50%;
+  right: 50%;
+  bottom: 0;
+  background: #85898b;
+  height: 2px;
+  -webkit-transition-property: left, right;
+  transition-property: left, right;
+  -webkit-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+  -webkit-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+}
+.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {
+  left: 0;
+  right: 0;
+}
+
+.container-template {
+  font-size: 1em;
+  width: 256px;
+  height: 128px;
+  margin: 15px;
+  padding: 5px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  cursor: pointer;
+  border: 2px solid #f6f6f6;
+  color: #30426a;
+}
+
+.container-template--selected {
+  background-color: #ececec;
+  color: #2d3e63;
+}
+
+.container-template:hover {
+  background-color: #ececec;
+  color: #2d3e63;
+}
+
+.container-template .logo {
+  max-width: 48px;
+  max-height: 48px;
+}
+
+.container-template .title {
+  text-align: center;
+}
+
+.container-template .description {
+  text-align: center;
+  font-size: 0.8em;
+  margin-bottom: 5px;
+}

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "portainer",
-  "version": "1.9.0",
+  "version": "1.9.3",
   "homepage": "https://github.com/portainer/portainer",
   "authors": [
     "Anthony Lapenna <anthony.lapenna at gmail dot com>"
@@ -34,13 +34,13 @@
     "angular-ui-select": "~0.17.1",
     "bootstrap": "~3.3.6",
     "font-awesome": "~4.6.3",
-    "Hover": "2.0.2",
+    "filesize": "~3.3.0",
     "jquery": "1.11.1",
     "jquery.gritter": "1.7.4",
     "lodash": "4.12.0",
     "rdash-ui": "1.0.*",
     "moment": "~2.14.1",
-    "xterm.js": "~1.0.0"
+    "xterm.js": "~2.0.1"
   },
   "resolutions": {
     "angular": "1.5.5"

build.sh

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

gruntFile.js

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

index.html

@@ -59,13 +59,13 @@
         <li class="sidebar-list">
           <a ui-sref="volumes">Volumes <span class="menu-icon fa fa-cubes"></span></a>
         </li>
-        <li class="sidebar-list" ng-if="swarm_mode || !swarm">
+        <li class="sidebar-list" ng-if="!swarm">
           <a ui-sref="events">Events <span class="menu-icon fa fa-history"></span></a>
         </li>
         <li class="sidebar-list" ng-if="(swarm && !swarm_mode) || (swarm_mode && swarm_manager)">
           <a ui-sref="swarm">Swarm <span class="menu-icon fa fa-object-group"></span></a>
         </li>
-        <li class="sidebar-list" ng-if="swarm_mode || !swarm">
+        <li class="sidebar-list" ng-if="!swarm">
           <a ui-sref="docker">Docker <span class="menu-icon fa fa-cogs"></span></a>
         </li>
       </ul>

package.json

@@ -2,7 +2,7 @@
   "author": "Portainer.io",
   "name": "portainer",
   "homepage": "http://portainer.io",
-  "version": "1.9.0",
+  "version": "1.9.3",
   "repository": {
     "type": "git",
     "url": "git@github.com:portainer/portainer.git"

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

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