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,78 +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=stable)](http://portainer.readthedocs.io/en/stable/?badge=stable)
+[![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 [documentation](http://portainer.readthedocs.io/en/stable/deployment.html) 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 the [templates documentation](http://portainer.readthedocs.io/en/stable/templates.html).
-
-Check our [documentation](http://portainer.readthedocs.io/en/stable/configuration.html) for more configuration options.
-
-# FAQ
-
-Be sure to check our [FAQ](http://portainer.readthedocs.io/en/stable/faq.html) 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.1")
+	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.1');
+  .constant('UI_VERSION', 'v1.9.3');

app/components/containerConsole/containerConsoleController.js

@@ -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

@@ -98,6 +98,12 @@
                 <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/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/templates/templates.html

@@ -77,11 +77,17 @@
       </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)">
+          <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>

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

@@ -8,7 +8,7 @@ angular
       icon: '='
     },
     transclude: true,
-    template: '<div class="widget-header"><div class="row"><span class="pull-left"><img class="custom-header-ico" ng-src="{{icon}}"></img> <span class="small text-muted"> {{title}} </span> </span><span class="pull-right col-xs-6 col-sm-4" ng-transclude></span></div></div>',
+    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;

assets/css/app.css

@@ -217,48 +217,9 @@ input[type="radio"] {
 }
 
 .custom-header-ico {
-  max-width: 16px;
-  max-height: 16px;
-}
-
-.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;
+  max-width: 32px;
+  max-height: 32px;
+  margin-right: 2px;
 }
 
 .btn-responsive {
@@ -276,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.1",
+  "version": "1.9.3",
   "homepage": "https://github.com/portainer/portainer",
   "authors": [
     "Anthony Lapenna <anthony.lapenna at gmail dot com>"
@@ -35,13 +35,12 @@
     "bootstrap": "~3.3.6",
     "font-awesome": "~4.6.3",
     "filesize": "~3.3.0",
-    "Hover": "2.0.2",
     "jquery": "1.11.1",
     "jquery.gritter": "1.7.4",
     "lodash": "4.12.0",
     "rdash-ui": "1.0.*",
     "moment": "~2.14.1",
-    "xterm.js": "~1.1.3"
+    "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

@@ -73,7 +73,7 @@ module.exports = function (grunt) {
                 '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
             ],
@@ -88,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: {

package.json

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