Merge branch 'release/1.10.2'

Volumes is undefined when no volumes are present. The loading text will remain until volumes is defined.

.dockerignore

@@ -0,0 +1,2 @@
+*
+!dist

.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:

.gitignore

@@ -1,4 +1,4 @@
-logs/*
-!.gitkeep
-dockerui
-*.esproj/*
+node_modules
+bower_components
+dist
+portainer-checksum.txt

.godir

@@ -1 +1 @@
-dockerui
+portainer

CONTRIBUTING.md

@@ -0,0 +1,57 @@
+# Contributing Guidelines
+
+Some basic conventions for contributing to this project.
+
+### General
+
+Please make sure that there aren't existing pull requests attempting to address the issue mentioned. Likewise, please check for issues related to update, as someone else may be working on the issue in a branch or fork.
+
+* Non-trivial changes should be discussed in an issue first
+* Develop in a topic branch, not master
+
+### Linting
+
+Please check your code using `grunt lint` before submitting your pull requests.
+
+### Commit Message Format
+
+Each commit message should include a **type**, a **scope** and a **subject**:
+
+```
+ <type>(<scope>): <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(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
+
+Must be one of the following:
+
+* **feat**: A new feature
+* **fix**: A bug fix
+* **docs**: Documentation only changes
+* **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing
+  semi-colons, etc)
+* **refactor**: A code change that neither fixes a bug or adds a feature
+* **test**: Adding missing tests
+* **chore**: Changes to the build process or auxiliary tools and libraries such as documentation
+  generation
+
+#### Scope
+
+The scope could be anything specifying place of the commit change. For example `networks`,
+`containers`, `images` etc...
+
+#### Subject
+
+The subject contains succinct description of the change:
+
+* use the imperative, present tense: "change" not "changed" nor "changes"
+* don't capitalize first letter
+* no dot (.) at the end

Dockerfile

@@ -1,7 +0,0 @@
-FROM crosbymichael/golang
-
-ADD . /app/
-WORKDIR /app/
-RUN go build dockerui.go
-EXPOSE 9000
-ENTRYPOINT ["./dockerui"]

LICENSE

@@ -1,7 +1,59 @@
-DockerUI: Copyright (c) 2013-2014 Michael Crosby. crosbymichael.com
+Portainer: Copyright (c) 2016 Portainer.io
 
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+This software is provided 'as-is', without any express or implied
+warranty.  In no event will the authors be held liable for any damages
+arising from the use of this software.
 
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+Permission is granted to anyone to use this software for any purpose,
+including commercial applications, and to alter it and redistribute it
+freely, subject to the following restrictions:
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+1. The origin of this software must not be misrepresented; you must not
+   claim that you wrote the original software. If you use this software
+   in a product, an acknowledgment in the product documentation would be
+   appreciated but is not required.
+2. Altered source versions must be plainly marked as such, and must not be
+   misrepresented as being the original software.
+3. This notice may not be removed or altered from any source distribution.
+
+Portainer contains code which was originally under this license:
+
+UI For Docker: Copyright (c) 2013-2016 Michael Crosby (crosbymichael.com), Kevan Ahlquist (kevanahlquist.com), Anthony Lapenna (portainer.io)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+rdash-angular: Copyright (c) [2014] [Elliot Hesp]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

Makefile

@@ -1,19 +0,0 @@
-.PHONY: build run
-
-.SUFFIXES:
-
-OPEN = $(shell which xdg-open || which open)
-PORT ?= 9000
-
-build:
-	docker build --rm -t dockerui .
-
-run:
-	-docker stop dockerui
-	-docker rm dockerui
-	docker run -d -p $(PORT):9000 -v /var/run/docker.sock:/docker.sock --name dockerui dockerui -e /docker.sock 
-
-open:
-	$(OPEN) localhost:$(PORT)
-
-

Procfile

@@ -1 +0,0 @@
-web: dockerui -p ":$PORT" -e "$DOCKER_ENDPOINT"

README.md

@@ -1,75 +1,52 @@
-## DockerUI
 
-![Containers](/containers.png)
-DockerUI is a web interface to interact with the Remote API.  The goal is to provide a pure client side implementation so it is effortless to connect and manage docker.  This project is not complete and is still under heavy development.
+<p align="center">
+  <img title="portainer" src='http://portainer.io/images/logo_alt.png' />
+</p>
 
-![Container](/container.png)
+[![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)
+[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=YHXZJQNJQ36H6)
 
+**_Portainer_** is a lightweight management UI which allows you to **easily** manage your Docker host or Swarm cluster.
 
-### Goals
-* Little to no dependencies - I really want to keep this project a pure html/js app.  I know this will have to change so that I can introduce authentication and authorization along with managing multiple docker endpoints. 
-* Consistency - The web UI should be consistent with the commands found on the docker CLI.
+**_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 engine (Docker for Linux and Docker for Windows are supported).
 
-### Container Quickstart 
+**_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*.
 
-* Run `docker build -t crosbymichael/dockerui github.com/crosbymichael/dockerui`
-* `docker run -d -p 9000:9000 -v /var/run/docker.sock:/docker.sock crosbymichael/dockerui -e /docker.sock`
-* Open your browser to `http://<dockerd host ip>:9000`
+## Demo
 
+<img src="http://portainer.io/images/screenshots/portainer.gif" width="77%"/>
 
-Bind mounting the unix socket into the dockerui container is much more secure than exposing your docker 
-daemon over tcp.  You should still secure your dockerui instance behind some type of auth.  Maybe running 
-nginx infront of dockerui with basic auth.
+You can try out the public demo instance: http://demo.portainer.io/ (login with the username **demo** and the password **tryportainer**).
 
-### Connect via a unix socket
-If you want to connect to docker via the unix socket you can pass the socket path to the `-e` variable.  If you are running dockerui in a container you can bind mount the unix socket into the container.
+Please note that the public demo cluster is **reset every 15min**.
 
-```bash
-docker run -d -p 9000:9000 -v /var/run/docker.sock:/docker.sock crosbymichael/dockerui -e /docker.sock
-```
+## Getting started
 
-### Check the [wiki](//github.com/crosbymichael/dockerui/wiki) for more info about using dockerui
+* [Deploy Portainer](https://portainer.readthedocs.io/en/latest/deployment.html)
+* [Documentation](https://portainer.readthedocs.io)
 
-### Stack
-* Angular.js
-* Flatstrap ( Flat Twitter Bootstrap )
-* Spin.js
-* Ace editor
+## Getting help
 
+* 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/
 
-### Todo:
-* Full repository support
-* Search
-* Push files to a container
-* Unit tests
+## Reporting bugs and contributing
 
+* 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!
 
-### License - MIT
-The DockerUI code is licensed under the MIT license. Flatstrap(bootstrap) is licensed under the Apache License v2.0 and Angular.js is licensed under MIT.
+## Limitations
 
+**_Portainer_** has full support for the following Docker versions:
 
-**DockerUI:**
-Copyright (c) 2013 Michael Crosby. crosbymichael.com
+* Docker 1.10 to Docker 1.12 (including `swarm-mode`)
+* Docker Swarm >= 1.2.3
 
-Permission is hereby granted, free of charge, to any person
-obtaining a copy of this software and associated documentation 
-files (the "Software"), to deal in the Software without 
-restriction, including without limitation the rights to use, copy, 
-modify, merge, publish, distribute, sublicense, and/or sell copies 
-of the Software, and to permit persons to whom the Software is 
-furnished to do so, subject to the following conditions:
+Partial support for the following Docker versions (some features may not be available):
 
-The above copyright notice and this permission notice shall be 
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED,
-INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 
-IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
-HOLDERS BE LIABLE FOR ANY CLAIM, 
-DAMAGES OR OTHER LIABILITY, 
-WHETHER IN AN ACTION OF CONTRACT, 
-TORT OR OTHERWISE, 
-ARISING FROM, OUT OF OR IN CONNECTION WITH 
-THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+* Docker 1.9

api/api.go

@@ -0,0 +1,61 @@
+package main
+
+import (
+	"crypto/tls"
+	"log"
+	"net/http"
+	"net/url"
+)
+
+type (
+	api struct {
+		endpoint     *url.URL
+		bindAddress  string
+		assetPath    string
+		dataPath     string
+		tlsConfig    *tls.Config
+		templatesURL string
+	}
+
+	apiConfig struct {
+		Endpoint      string
+		BindAddress   string
+		AssetPath     string
+		DataPath      string
+		SwarmSupport  bool
+		TLSEnabled    bool
+		TLSCACertPath string
+		TLSCertPath   string
+		TLSKeyPath    string
+		TemplatesURL  string
+	}
+)
+
+func (a *api) run(settings *Settings) {
+	handler := a.newHandler(settings)
+	log.Printf("Starting portainer on %s", a.bindAddress)
+	if err := http.ListenAndServe(a.bindAddress, handler); err != nil {
+		log.Fatal(err)
+	}
+}
+
+func newAPI(apiConfig apiConfig) *api {
+	endpointURL, err := url.Parse(apiConfig.Endpoint)
+	if err != nil {
+		log.Fatal(err)
+	}
+
+	var tlsConfig *tls.Config
+	if apiConfig.TLSEnabled {
+		tlsConfig = newTLSConfig(apiConfig.TLSCACertPath, apiConfig.TLSCertPath, apiConfig.TLSKeyPath)
+	}
+
+	return &api{
+		endpoint:     endpointURL,
+		bindAddress:  apiConfig.BindAddress,
+		assetPath:    apiConfig.AssetPath,
+		dataPath:     apiConfig.DataPath,
+		tlsConfig:    tlsConfig,
+		templatesURL: apiConfig.TemplatesURL,
+	}
+}

api/csrf.go

@@ -0,0 +1,48 @@
+package main
+
+import (
+	"github.com/gorilla/csrf"
+	"github.com/gorilla/securecookie"
+	"io/ioutil"
+	"log"
+	"net/http"
+)
+
+const keyFile = "authKey.dat"
+
+// newAuthKey reuses an existing CSRF authkey if present or generates a new one
+func newAuthKey(path string) []byte {
+	var authKey []byte
+	authKeyPath := path + "/" + keyFile
+	data, err := ioutil.ReadFile(authKeyPath)
+	if err != nil {
+		log.Print("Unable to find an existing CSRF auth key. Generating a new key.")
+		authKey = securecookie.GenerateRandomKey(32)
+		err := ioutil.WriteFile(authKeyPath, authKey, 0644)
+		if err != nil {
+			log.Fatal("Unable to persist CSRF auth key.")
+			log.Fatal(err)
+		}
+	} else {
+		authKey = data
+	}
+	return authKey
+}
+
+// newCSRF initializes a new CSRF handler
+func newCSRFHandler(keyPath string) func(h http.Handler) http.Handler {
+	authKey := newAuthKey(keyPath)
+	return csrf.Protect(
+		authKey,
+		csrf.HttpOnly(false),
+		csrf.Secure(false),
+	)
+}
+
+// newCSRFWrapper wraps a http.Handler to add the CSRF token
+func newCSRFWrapper(h http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		w.Header().Set("X-CSRF-Token", csrf.Token(r))
+		h.ServeHTTP(w, r)
+	})
+}

api/exec.go

@@ -0,0 +1,24 @@
+package main
+
+import (
+	"golang.org/x/net/websocket"
+	"log"
+)
+
+// execContainer is used to create a websocket communication with an exec instance
+func (a *api) execContainer(ws *websocket.Conn) {
+	qry := ws.Request().URL.Query()
+	execID := qry.Get("id")
+
+	var host string
+	if a.endpoint.Scheme == "tcp" {
+		host = a.endpoint.Host
+	} else if a.endpoint.Scheme == "unix" {
+		host = a.endpoint.Path
+	}
+
+	if err := hijack(host, a.endpoint.Scheme, "POST", "/exec/"+execID+"/start", a.tlsConfig, true, ws, ws, ws, nil, nil); err != nil {
+		log.Fatalf("error during hijack: %s", err)
+		return
+	}
+}

api/flags.go

@@ -0,0 +1,46 @@
+package main
+
+import (
+	"fmt"
+	"gopkg.in/alecthomas/kingpin.v2"
+	"strings"
+)
+
+// pair defines a key/value pair
+type pair struct {
+	Name  string `json:"name"`
+	Value string `json:"value"`
+}
+
+// pairList defines an array of Label
+type pairList []pair
+
+// Set implementation for Labels
+func (l *pairList) Set(value string) error {
+	parts := strings.SplitN(value, "=", 2)
+	if len(parts) != 2 {
+		return fmt.Errorf("expected NAME=VALUE got '%s'", value)
+	}
+	p := new(pair)
+	p.Name = parts[0]
+	p.Value = parts[1]
+	*l = append(*l, *p)
+	return nil
+}
+
+// String implementation for Labels
+func (l *pairList) String() string {
+	return ""
+}
+
+// IsCumulative implementation for Labels
+func (l *pairList) IsCumulative() bool {
+	return true
+}
+
+// LabelParser defines a custom parser for Labels flags
+func pairs(s kingpin.Settings) (target *[]pair) {
+	target = new([]pair)
+	s.SetValue((*pairList)(target))
+	return
+}

api/handler.go

@@ -0,0 +1,82 @@
+package main
+
+import (
+	"golang.org/x/net/websocket"
+	"log"
+	"net/http"
+	"net/http/httputil"
+	"net/url"
+	"os"
+)
+
+// newHandler creates a new http.Handler with CSRF protection
+func (a *api) newHandler(settings *Settings) http.Handler {
+	var (
+		mux         = http.NewServeMux()
+		fileHandler = http.FileServer(http.Dir(a.assetPath))
+	)
+
+	handler := a.newAPIHandler()
+
+	mux.Handle("/", fileHandler)
+	mux.Handle("/dockerapi/", http.StripPrefix("/dockerapi", handler))
+	mux.Handle("/ws/exec", websocket.Handler(a.execContainer))
+	mux.HandleFunc("/settings", func(w http.ResponseWriter, r *http.Request) {
+		settingsHandler(w, r, settings)
+	})
+	mux.HandleFunc("/templates", func(w http.ResponseWriter, r *http.Request) {
+		templatesHandler(w, r, a.templatesURL)
+	})
+	// CSRF protection is disabled for the moment
+	// CSRFHandler := newCSRFHandler(a.dataPath)
+	// return CSRFHandler(newCSRFWrapper(mux))
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		mux.ServeHTTP(w, r)
+	})
+}
+
+// newAPIHandler initializes a new http.Handler based on the URL scheme
+func (a *api) newAPIHandler() http.Handler {
+	var handler http.Handler
+	var endpoint = *a.endpoint
+	if endpoint.Scheme == "tcp" {
+		if a.tlsConfig != nil {
+			handler = a.newTCPHandlerWithTLS(&endpoint)
+		} else {
+			handler = a.newTCPHandler(&endpoint)
+		}
+	} else if endpoint.Scheme == "unix" {
+		socketPath := endpoint.Path
+		if _, err := os.Stat(socketPath); err != nil {
+			if os.IsNotExist(err) {
+				log.Fatalf("Unix socket %s does not exist", socketPath)
+			}
+			log.Fatal(err)
+		}
+		handler = a.newUnixHandler(socketPath)
+	} else {
+		log.Fatalf("Bad Docker enpoint: %v. Only unix:// and tcp:// are supported.", &endpoint)
+	}
+	return handler
+}
+
+// newUnixHandler initializes a new UnixHandler
+func (a *api) newUnixHandler(e string) http.Handler {
+	return &unixHandler{e}
+}
+
+// newTCPHandler initializes a HTTP reverse proxy
+func (a *api) newTCPHandler(u *url.URL) http.Handler {
+	u.Scheme = "http"
+	return httputil.NewSingleHostReverseProxy(u)
+}
+
+// newTCPHandlerWithL initializes a HTTPS reverse proxy with a TLS configuration
+func (a *api) newTCPHandlerWithTLS(u *url.URL) http.Handler {
+	u.Scheme = "https"
+	proxy := httputil.NewSingleHostReverseProxy(u)
+	proxy.Transport = &http.Transport{
+		TLSClientConfig: a.tlsConfig,
+	}
+	return proxy
+}

api/hijack.go

@@ -0,0 +1,123 @@
+package main
+
+import (
+	"bytes"
+	"crypto/tls"
+	"encoding/json"
+	"fmt"
+	"io"
+	"net"
+	"net/http"
+	"net/http/httputil"
+	"time"
+)
+
+type execConfig struct {
+	Tty    bool
+	Detach bool
+}
+
+// hijack allows to upgrade an HTTP connection to a TCP connection
+// It redirects IO streams for stdin, stdout and stderr to a websocket
+func hijack(addr, scheme, method, path string, tlsConfig *tls.Config, setRawTerminal bool, in io.ReadCloser, stdout, stderr io.Writer, started chan io.Closer, data interface{}) error {
+	execConfig := &execConfig{
+		Tty:    true,
+		Detach: false,
+	}
+
+	buf, err := json.Marshal(execConfig)
+	if err != nil {
+		return fmt.Errorf("error marshaling exec config: %s", err)
+	}
+
+	rdr := bytes.NewReader(buf)
+
+	req, err := http.NewRequest(method, path, rdr)
+	if err != nil {
+		return fmt.Errorf("error during hijack request: %s", err)
+	}
+
+	req.Header.Set("User-Agent", "Docker-Client")
+	req.Header.Set("Content-Type", "application/json")
+	req.Header.Set("Connection", "Upgrade")
+	req.Header.Set("Upgrade", "tcp")
+	req.Host = addr
+
+	var (
+		dial    net.Conn
+		dialErr error
+	)
+
+	if tlsConfig == nil {
+		dial, dialErr = net.Dial(scheme, addr)
+	} else {
+		dial, dialErr = tls.Dial(scheme, addr, tlsConfig)
+	}
+
+	if dialErr != nil {
+		return dialErr
+	}
+
+	// When we set up a TCP connection for hijack, there could be long periods
+	// of inactivity (a long running command with no output) that in certain
+	// network setups may cause ECONNTIMEOUT, leaving the client in an unknown
+	// state. Setting TCP KeepAlive on the socket connection will prohibit
+	// ECONNTIMEOUT unless the socket connection truly is broken
+	if tcpConn, ok := dial.(*net.TCPConn); ok {
+		tcpConn.SetKeepAlive(true)
+		tcpConn.SetKeepAlivePeriod(30 * time.Second)
+	}
+	if err != nil {
+		return err
+	}
+	clientconn := httputil.NewClientConn(dial, nil)
+	defer clientconn.Close()
+
+	// Server hijacks the connection, error 'connection closed' expected
+	clientconn.Do(req)
+
+	rwc, br := clientconn.Hijack()
+	defer rwc.Close()
+
+	if started != nil {
+		started <- rwc
+	}
+
+	var receiveStdout chan error
+
+	if stdout != nil || stderr != nil {
+		go func() (err error) {
+			if setRawTerminal && stdout != nil {
+				_, err = io.Copy(stdout, br)
+			}
+			return err
+		}()
+	}
+
+	go func() error {
+		if in != nil {
+			io.Copy(rwc, in)
+		}
+
+		if conn, ok := rwc.(interface {
+			CloseWrite() error
+		}); ok {
+			if err := conn.CloseWrite(); err != nil {
+			}
+		}
+		return nil
+	}()
+
+	if stdout != nil || stderr != nil {
+		if err := <-receiveStdout; err != nil {
+			return err
+		}
+	}
+	go func() {
+		for {
+			fmt.Println(br)
+		}
+	}()
+
+	return nil
+}

api/main.go

@@ -0,0 +1,47 @@
+package main // import "github.com/portainer/portainer"
+
+import (
+	"gopkg.in/alecthomas/kingpin.v2"
+)
+
+// main is the entry point of the program
+func main() {
+	kingpin.Version("1.10.2")
+	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()
+		assets    = kingpin.Flag("assets", "Path to the assets").Default(".").Short('a').String()
+		data      = kingpin.Flag("data", "Path to the data").Default(".").Short('d').String()
+		tlsverify = kingpin.Flag("tlsverify", "TLS support").Default("false").Bool()
+		tlscacert = kingpin.Flag("tlscacert", "Path to the CA").Default("/certs/ca.pem").String()
+		tlscert   = kingpin.Flag("tlscert", "Path to the TLS certificate file").Default("/certs/cert.pem").String()
+		tlskey    = kingpin.Flag("tlskey", "Path to the TLS key").Default("/certs/key.pem").String()
+		swarm     = kingpin.Flag("swarm", "Swarm cluster support").Default("false").Short('s').Bool()
+		labels    = pairs(kingpin.Flag("hide-label", "Hide containers with a specific label in the UI").Short('l'))
+		logo      = kingpin.Flag("logo", "URL for the logo displayed in the UI").String()
+		templates = kingpin.Flag("templates", "URL to the templates (apps) definitions").Default("https://raw.githubusercontent.com/portainer/templates/master/templates.json").Short('t').String()
+	)
+	kingpin.Parse()
+
+	apiConfig := apiConfig{
+		Endpoint:      *endpoint,
+		BindAddress:   *addr,
+		AssetPath:     *assets,
+		DataPath:      *data,
+		SwarmSupport:  *swarm,
+		TLSEnabled:    *tlsverify,
+		TLSCACertPath: *tlscacert,
+		TLSCertPath:   *tlscert,
+		TLSKeyPath:    *tlskey,
+		TemplatesURL:  *templates,
+	}
+
+	settings := &Settings{
+		Swarm:        *swarm,
+		HiddenLabels: *labels,
+		Logo:         *logo,
+	}
+
+	api := newAPI(apiConfig)
+	api.run(settings)
+}

api/settings.go

@@ -0,0 +1,18 @@
+package main
+
+import (
+	"encoding/json"
+	"net/http"
+)
+
+// Settings defines the settings available under the /settings endpoint
+type Settings struct {
+	Swarm        bool     `json:"swarm"`
+	HiddenLabels pairList `json:"hiddenLabels"`
+	Logo         string   `json:"logo"`
+}
+
+// settingsHandler defines a handler function used to encode the configuration in JSON
+func settingsHandler(w http.ResponseWriter, r *http.Request, s *Settings) {
+	json.NewEncoder(w).Encode(*s)
+}

api/ssl.go

@@ -0,0 +1,27 @@
+package main
+
+import (
+	"crypto/tls"
+	"crypto/x509"
+	"io/ioutil"
+	"log"
+)
+
+// newTLSConfig initializes a tls.Config using a CA certificate, a certificate and a key
+func newTLSConfig(caCertPath, certPath, keyPath string) *tls.Config {
+	cert, err := tls.LoadX509KeyPair(certPath, keyPath)
+	if err != nil {
+		log.Fatal(err)
+	}
+	caCert, err := ioutil.ReadFile(caCertPath)
+	if err != nil {
+		log.Fatal(err)
+	}
+	caCertPool := x509.NewCertPool()
+	caCertPool.AppendCertsFromPEM(caCert)
+	tlsConfig := &tls.Config{
+		Certificates: []tls.Certificate{cert},
+		RootCAs:      caCertPool,
+	}
+	return tlsConfig
+}

api/templates.go

@@ -0,0 +1,27 @@
+package main
+
+import (
+	"fmt"
+	"io/ioutil"
+	"log"
+	"net/http"
+)
+
+// templatesHandler defines a handler function used to retrieve the templates from a URL and put them in the response
+func templatesHandler(w http.ResponseWriter, r *http.Request, templatesURL string) {
+	resp, err := http.Get(templatesURL)
+	if err != nil {
+		http.Error(w, fmt.Sprintf("Error making request to %s: %s", templatesURL, err.Error()), http.StatusInternalServerError)
+		log.Print(err)
+		return
+	}
+	defer resp.Body.Close()
+	body, err := ioutil.ReadAll(resp.Body)
+	if err != nil {
+		http.Error(w, "Error reading body from templates URL", http.StatusInternalServerError)
+		log.Print(err)
+		return
+	}
+	w.Header().Set("Content-Type", "application/json")
+	w.Write(body)
+}

api/unix_handler.go

@@ -0,0 +1,47 @@
+package main
+
+import (
+	"io"
+	"log"
+	"net"
+	"net/http"
+	"net/http/httputil"
+)
+
+// unixHandler defines a handler holding the path to a socket under UNIX
+type unixHandler struct {
+	path string
+}
+
+// ServeHTTP implementation for unixHandler
+func (h *unixHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
+	conn, err := net.Dial("unix", h.path)
+	if err != nil {
+		w.WriteHeader(http.StatusInternalServerError)
+		log.Println(err)
+		return
+	}
+	c := httputil.NewClientConn(conn, nil)
+	defer c.Close()
+
+	res, err := c.Do(r)
+	if err != nil {
+		w.WriteHeader(http.StatusInternalServerError)
+		log.Println(err)
+		return
+	}
+	defer res.Body.Close()
+
+	copyHeader(w.Header(), res.Header)
+	if _, err := io.Copy(w, res.Body); err != nil {
+		log.Println(err)
+	}
+}
+
+func copyHeader(dst, src http.Header) {
+	for k, vv := range src {
+		for _, v := range vv {
+			dst.Add(k, v)
+		}
+	}
+}

app/app.js

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

app/components/builder/builder.html

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

app/components/builder/builderController.js

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

app/components/container/container.html

@@ -1,131 +1,237 @@
-<div class="detail">
-    
-    <h4>Container: {{ container.Name }}</h4>
+<rd-header>
+  <rd-header-title title="Container details">
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
+  </rd-header-title>
+  <rd-header-content>
+    <a ui-sref="containers">Containers</a> > <a ui-sref="container({id: container.Id})">{{ container.Name|trimcontainername }}</a>
+  </rd-header-content>
+</rd-header>
 
-    <div class="btn-group detail">
-      <button class="btn btn-success"
-            ng-click="start()"
-            ng-show="!container.State.Running">Start</button>
-      <button class="btn btn-warning"
-            ng-click="stop()"
-            ng-show="container.State.Running && !container.State.Paused">Stop</button>
-      <button class="btn btn-danger"
-            ng-click="kill()"
-            ng-show="container.State.Running && !container.State.Paused">Kill</button>
-      <button class="btn btn-info"
-            ng-click="pause()"
-            ng-show="container.State.Running && !container.State.Paused">Pause</button>
-      <button class="btn btn-success"
-            ng-click="unpause()"
-            ng-show="container.State.Running && container.State.Paused">Unpause</button>
-    </div>
-
-    <table class="table table-striped">
-         <tbody>
-            <tr>
-                <td>Created:</td>
-                <td>{{ container.Created }}</td>
-            </tr>
-            <tr>
-                <td>Path:</td>
-                <td>{{ container.Path }}</td>
-            </tr>
-            <tr>
-                <td>Args:</td>
-                <td>{{ container.Args }}</td>
-            </tr>
-            <tr>
-                <td>Exposed Ports:</td>
-                <td>
-                    <ul>
-                        <li ng-repeat="(k, v) in container.Config.ExposedPorts">{{ k }}</li>
-                    </ul>
-                </td>
-            </tr>
-            <tr>
-                <td>Environment:</td>
-                <td>
-                    <ul>
-                        <li ng-repeat="k in container.Config.Env">{{ k }}</li>
-                    </ul>
-                </td>
-            </tr>
-
-            <tr>
-                <td>Publish All:</td>
-                <td>{{ container.HostConfig.PublishAllPorts }}</td>
-            </tr>
-            <tr>
-                <td>Ports:</td>
-                <td>
-                    <ul style="display:inline-table">
-                        <li ng-repeat="(containerport, hostports) in container.HostConfig.PortBindings">
-                            {{ containerport }} => <span class="label" ng-repeat="(k,v) in hostports">{{ v.HostIp }}:{{ v.HostPort }}</span>
-                        </li>
-                    </ul>
-                </td>
-
-            </tr>
-            <tr>
-                <td>Hostname:</td>
-                <td>{{ container.Config.Hostname }}</td>
-            </tr>
-			<tr>
-			    <td>IPAddress:</td>
-			    <td>{{ container.NetworkSettings.IPAddress }}</td>
-			</tr>
-            <tr>
-                <td>Cmd:</td>
-                <td>{{ container.Config.Cmd }}</td>
-            </tr>
-            <tr>
-                <td>Entrypoint:</td>
-                <td>{{ container.Config.Entrypoint }}</td>
-            </tr>
-            <tr>
-                <td>Volumes:</td>
-                <td>{{ container.Volumes }}</td>
-            </tr>
-
-            <tr>
-                <td>SysInitpath:</td>
-                <td>{{ container.SysInitPath }}</td>
-            </tr>
-            <tr>
-                <td>Image:</td>
-                <td><a href="#/images/{{ container.Image }}/">{{ container.Image }}</a></td>
-            </tr>
-            <tr>
-                <td>State:</td>
-                <td><span class="label {{ container.State|getstatelabel }}">{{ container.State|getstatetext }}</span></td>
-            </tr>
-            <tr>
-                 <td>Logs:</td>
-                 <td><a href="#/containers/{{ container.Id }}/logs">stdout/stderr</a></td>
-            </tr>
-        </tbody>
-    </table>
-    
-    <div class="row-fluid">
-        <div class="span1">
-            Changes:
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-cogs" title="Actions"></rd-widget-header>
+      <rd-widget-body classes="padding">
+        <div class="btn-group" role="group" aria-label="...">
+          <button class="btn btn-primary" ng-click="start()" ng-if="!container.State.Running"><i class="fa fa-play space-right" aria-hidden="true"></i>Start</button>
+          <button class="btn btn-danger" ng-click="stop()" ng-if="container.State.Running"><i class="fa fa-stop space-right" aria-hidden="true"></i>Stop</button>
+          <button class="btn btn-danger" ng-click="kill()" ng-if="container.State.Running"><i class="fa fa-bomb space-right" aria-hidden="true"></i>Kill</button>
+          <button class="btn btn-primary" ng-click="restart()" ng-if="container.State.Running"><i class="fa fa-refresh space-right" aria-hidden="true"></i>Restart</button>
+          <button class="btn btn-primary" ng-click="pause()" ng-if="container.State.Running && !container.State.Paused"><i class="fa fa-pause space-right" aria-hidden="true"></i>Pause</button>
+          <button class="btn btn-primary" ng-click="unpause()" ng-if="container.State.Paused"><i class="fa fa-play space-right" aria-hidden="true"></i>Resume</button>
+          <button class="btn btn-danger" ng-click="remove()" ng-disabled="container.State.Running"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button>
         </div>
-        <div class="span5">
-            <i class="icon-refresh" style="width:32px;height:32px;" ng-click="getChanges()"></i>
-        </div>
-    </div> 
-
-    <div class="well well-large">
-        <ul>
-            <li ng-repeat="change in changes | filter:hasContent">
-                <strong>{{ change.Path }}</strong> {{ change.Kind }}
-            </li>
-        </ul>
-    </div>
-
-    <hr />
-
-    <div class="btn-remove">
-        <button class="btn btn-large btn-block btn-primary btn-danger" ng-click="remove()">Remove Container</button>
-    </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-server" title="Container status"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table">
+          <tbody>
+            <tr>
+              <td>Name</td>
+              <td ng-if="!container.edit">
+                {{ container.Name|trimcontainername }}
+                <a href="" data-toggle="tooltip" title="Edit container name" ng-click="container.edit = true;"><i class="fa fa-edit"></i></a>
+              </td>
+              <td ng-if="container.edit">
+                <input type="text" class="containerNameInput" ng-model="container.newContainerName">
+                <a href="" ng-click="container.edit = false;"><i class="fa fa-times"></i></a>
+                <a href="" ng-click="renameContainer()"><i class="fa fa-check-square-o"></i></a>
+              </td>
+            </tr>
+            <tr ng-if="container.NetworkSettings.IPAddress">
+              <td>IP address</td>
+              <td>{{ container.NetworkSettings.IPAddress }}</td>
+            </tr>
+            <tr>
+              <td>Status</td>
+              <td>
+                <i ng-class="{true: 'fa fa-heartbeat space-right green-icon', false: 'fa fa-heartbeat space-right red-icon'}[container.State.Running]"></i>
+                {{ container.State|getstatetext }} since {{ activityTime }}<span ng-if="!container.State.Running"> with exit code {{ container.State.ExitCode }}</span>
+              </td>
+            </tr>
+            <tr ng-if="container.State.Running">
+              <td>Start time</td>
+              <td>{{ container.State.StartedAt|getisodate }}</td>
+            </tr>
+            <tr ng-if="!container.State.Running">
+              <td>Finished</td>
+              <td>{{ container.State.FinishedAt|getisodate }}</td>
+            </tr>
+            <tr>
+              <td colspan="2">
+                <div class="btn-group" role="group" aria-label="...">
+                  <a class="btn btn-outline-secondary" type="button" ui-sref="stats({id: container.Id})"><i class="fa fa-area-chart space-right" aria-hidden="true"></i>Stats</a>
+                  <a class="btn btn-outline-secondary" type="button" ui-sref="logs({id: container.Id})"><i class="fa fa-exclamation-circle space-right" aria-hidden="true"></i>Logs</a>
+                  <a class="btn btn-outline-secondary" type="button" ui-sref="console({id: container.Id})"><i class="fa fa-terminal space-right" aria-hidden="true"></i>Console</a>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-clone" title="Create image"></rd-widget-header>
+      <rd-widget-body>
+        <form class="form-horizontal">
+          <!-- tag-description -->
+          <div class="form-group">
+            <div class="col-sm-12">
+              <span class="small text-muted">
+                You can create an image from this container, this allows you to backup important data or save
+                helpful configurations. You'll be able to spin up another container based on this image afterward.
+              </span>
+            </div>
+          </div>
+          <!-- !tag-description -->
+          <!-- name-and-registry-inputs -->
+          <div class="form-group">
+            <label for="image_name" class="col-sm-1 control-label text-left">Name</label>
+            <div class="col-sm-7">
+              <input type="text" class="form-control" ng-model="config.Image" id="image_name" placeholder="e.g. myImage:myTag">
+            </div>
+            <label for="image_registry" class="col-sm-1 control-label text-left">Registry</label>
+            <div class="col-sm-3">
+              <input type="text" class="form-control" ng-model="config.Registry" id="image_registry" placeholder="optional">
+            </div>
+          </div>
+          <!-- !name-and-registry-inputs -->
+          <!-- tag-note -->
+          <div class="form-group">
+            <div class="col-sm-12">
+              <span class="small text-muted">Note: if you don't specify the tag in the image name, <span class="label label-default">latest</span> will be used.</span>
+            </div>
+          </div>
+          <!-- !tag-note -->
+          <div class="form-group">
+            <div class="col-sm-12">
+              <button type="button" class="btn btn-default btn-sm" ng-disabled="!config.Image" ng-click="commit()">Create</button>
+              <i id="createImageSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
+            </div>
+          </div>
+        </form>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-server" title="Container details"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table">
+          <tbody>
+            <tr>
+              <td>Image</td>
+              <td><a ui-sref="image({id: container.Image})">{{ container.Image }}</a></td>
+            </tr>
+            <tr ng-if="portBindings.length > 0">
+              <td>Port configuration</td>
+              <td>
+                <div ng-repeat="portMapping in portBindings">
+                  {{ portMapping.container }} <i class="fa fa-long-arrow-right"></i> {{ portMapping.host }}
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td>CMD</td>
+              <td><code>{{ container.Config.Cmd|command }}</code></td>
+            </tr>
+            <tr>
+              <td>ENV</td>
+              <td>
+                <table class="table table-bordered table-condensed">
+                  <tr ng-repeat="var in container.Config.Env">
+                    <td>{{ var|key: '=' }}</td>
+                    <td>{{ var|value: '=' }}</td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
+            <tr ng-if="!(container.Config.Labels | emptyobject)">
+              <td>Labels</td>
+              <td>
+                <table class="table table-bordered table-condensed">
+                  <tr ng-repeat="(k, v) in container.Config.Labels">
+                    <td>{{ k }}</td>
+                    <td>{{ v }}</td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row" ng-if="container.HostConfig.Binds.length > 0">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-cubes" title="Volumes"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table">
+          <thead>
+            <tr>
+              <th>Host</th>
+              <th>Container</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr ng-repeat="vol in container.HostConfig.Binds">
+              <td>{{ vol|key: ':' }}</td>
+              <td>{{ vol|value: ':' }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row" ng-if="!(container.NetworkSettings.Networks | emptyobject)">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-sitemap" title="Connected networks"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table">
+          <thead>
+            <th>Network Name</th>
+            <th>IP Address</th>
+            <th>Gateway</th>
+            <th>MacAddress</th>
+            <th>Actions</th>
+          </thead>
+          <tbody>
+            <tr dir-paginate="(key, value) in container.NetworkSettings.Networks | itemsPerPage: pagination_count">
+              <td><a ui-sref="network({id: value.NetworkID})">{{ key }}</a></td>
+              <td>{{ value.IPAddress || '-' }}</td>
+              <td>{{ value.Gateway || '-' }}</td>
+              <td>{{ value.MacAddress || '-' }}</td>
+              <td>
+                <button type="button" class="btn btn-xs btn-danger" ng-click="containerLeaveNetwork(container, value.NetworkID)"><i class="fa fa-trash space-right" aria-hidden="true"></i>Leave Network</button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="pagination-controls">
+          <dir-pagination-controls></dir-pagination-controls>
+        </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
 </div>

app/components/container/containerController.js

@@ -1,105 +1,175 @@
 angular.module('container', [])
-.controller('ContainerController', ['$scope', '$routeParams', '$location', 'Container', 'Messages', 'ViewSpinner',
-function($scope, $routeParams, $location, Container, Messages, ViewSpinner) {
-    $scope.changes = [];
+.controller('ContainerController', ['$scope', '$state','$stateParams', '$filter', 'Container', 'ContainerCommit', 'ImageHelper', 'Network', 'Messages', 'Settings',
+function ($scope, $state, $stateParams, $filter, Container, ContainerCommit, ImageHelper, Network, Messages, Settings) {
+  $scope.activityTime = 0;
+  $scope.portBindings = [];
+  $scope.config = {
+    Image: '',
+    Registry: ''
+  };
+  $scope.pagination_count = Settings.pagination_count;
 
-    var update = function() {
-        ViewSpinner.spin();
-        Container.get({id: $routeParams.id}, function(d) {
-            $scope.container = d;
-            ViewSpinner.stop();
-        }, function(e) {
-            if (e.status === 404) {
-                $('.detail').hide();
-                Messages.error("Not found", "Container not found.");
-            } else {
-                Messages.error("Failure", e.data);
-            }
-            ViewSpinner.stop();
+  var update = function () {
+    $('#loadingViewSpinner').show();
+    Container.get({id: $stateParams.id}, function (d) {
+      $scope.container = d;
+      $scope.container.edit = false;
+      $scope.container.newContainerName = $filter('trimcontainername')(d.Name);
+
+      if (d.State.Running) {
+        $scope.activityTime = moment.duration(moment(d.State.StartedAt).utc().diff(moment().utc())).humanize();
+      } else {
+        $scope.activityTime = moment.duration(moment().utc().diff(moment(d.State.FinishedAt).utc())).humanize();
+      }
+
+      $scope.portBindings = [];
+      if (d.NetworkSettings.Ports) {
+        angular.forEach(Object.keys(d.NetworkSettings.Ports), function(portMapping) {
+          if (d.NetworkSettings.Ports[portMapping]) {
+            var mapping = {};
+            mapping.container = portMapping;
+            mapping.host = d.NetworkSettings.Ports[portMapping][0].HostIp + ':' + d.NetworkSettings.Ports[portMapping][0].HostPort;
+            $scope.portBindings.push(mapping);
+          }
         });
-    };
+      }
+      $('#loadingViewSpinner').hide();
+    }, function (e) {
+      $('#loadingViewSpinner').hide();
+      Messages.error("Failure", e, "Unable to retrieve container info");
+    });
+  };
 
-    $scope.start = function(){
-        ViewSpinner.spin();
-        Container.start({
-                id: $scope.container.Id,
-                HostConfig: $scope.container.HostConfig
-            }, function(d) {
-            update();
-            Messages.send("Container started", $routeParams.id);
-        }, function(e) {
-            update();
-            Messages.error("Failure", "Container failed to start." + e.data);
-        });
-    };
+  $scope.start = function () {
+    $('#loadingViewSpinner').show();
+    Container.start({id: $scope.container.Id}, {}, function (d) {
+      update();
+      Messages.send("Container started", $stateParams.id);
+    }, function (e) {
+      update();
+      Messages.error("Failure", e, "Unable to start container");
+    });
+  };
 
-    $scope.stop = function() {
-        ViewSpinner.spin();
-        Container.stop({id: $routeParams.id}, function(d) {
-            update();
-            Messages.send("Container stopped", $routeParams.id);
-        }, function(e) {
-            update();
-            Messages.error("Failure", "Container failed to stop." + e.data);
-        });
-    };
+  $scope.stop = function () {
+    $('#loadingViewSpinner').show();
+    Container.stop({id: $stateParams.id}, function (d) {
+      update();
+      Messages.send("Container stopped", $stateParams.id);
+    }, function (e) {
+      update();
+      Messages.error("Failure", e, "Unable to stop container");
+    });
+  };
 
-    $scope.kill = function() {
-        ViewSpinner.spin();
-        Container.kill({id: $routeParams.id}, function(d) {
-            update();
-            Messages.send("Container killed", $routeParams.id);
-        }, function(e) {
-            update();
-            Messages.error("Failure", "Container failed to die." + e.data);
-        });
-    };
+  $scope.kill = function () {
+    $('#loadingViewSpinner').show();
+    Container.kill({id: $stateParams.id}, function (d) {
+      update();
+      Messages.send("Container killed", $stateParams.id);
+    }, function (e) {
+      update();
+      Messages.error("Failure", e, "Unable to kill container");
+    });
+  };
 
-    $scope.pause = function() {
-        ViewSpinner.spin();
-        Container.pause({id: $routeParams.id}, function(d) {
-            update();
-            Messages.send("Container paused", $routeParams.id);
-        }, function(e) {
-            update();
-            Messages.error("Failure", "Container failed to pause." + e.data);
-        });
-    };
+  $scope.commit = function () {
+    $('#createImageSpinner').show();
+    var image = _.toLower($scope.config.Image);
+    var registry = _.toLower($scope.config.Registry);
+    var imageConfig = ImageHelper.createImageConfig(image, registry);
+    ContainerCommit.commit({id: $stateParams.id, tag: imageConfig.tag, repo: imageConfig.repo}, function (d) {
+      $('#createImageSpinner').hide();
+      update();
+      Messages.send("Container commited", $stateParams.id);
+    }, function (e) {
+      $('#createImageSpinner').hide();
+      update();
+      Messages.error("Failure", e, "Unable to commit container");
+    });
+  };
 
-    $scope.unpause = function() {
-        ViewSpinner.spin();
-        Container.unpause({id: $routeParams.id}, function(d) {
-            update();
-            Messages.send("Container unpaused", $routeParams.id);
-        }, function(e) {
-            update();
-            Messages.error("Failure", "Container failed to unpause." + e.data);
-        });
-    };
+  $scope.pause = function () {
+    $('#loadingViewSpinner').show();
+    Container.pause({id: $stateParams.id}, function (d) {
+      update();
+      Messages.send("Container paused", $stateParams.id);
+    }, function (e) {
+      update();
+      Messages.error("Failure", e, "Unable to pause container");
+    });
+  };
 
-    $scope.remove = function() {
-        ViewSpinner.spin();
-        Container.remove({id: $routeParams.id}, function(d) {
-            update();
-            Messages.send("Container removed", $routeParams.id);
-        }, function(e){
-            update();
-            Messages.error("Failure", "Container failed to remove." + e.data);
-        });
-    };
+  $scope.unpause = function () {
+    $('#loadingViewSpinner').show();
+    Container.unpause({id: $stateParams.id}, function (d) {
+      update();
+      Messages.send("Container unpaused", $stateParams.id);
+    }, function (e) {
+      update();
+      Messages.error("Failure", e, "Unable to unpause container");
+    });
+  };
 
-    $scope.hasContent = function(data) {
-        return data !== null && data !== undefined;
-    };
+  $scope.remove = function () {
+    $('#loadingViewSpinner').show();
+    Container.remove({id: $stateParams.id}, function (d) {
+      if (d.message) {
+        $('#loadingViewSpinner').hide();
+        Messages.send("Error", d.message);
+      }
+      else {
+        $state.go('containers', {}, {reload: true});
+        Messages.send("Container removed", $stateParams.id);
+      }
+    }, function (e) {
+      update();
+      Messages.error("Failure", e, "Unable to remove container");
+    });
+  };
 
-    $scope.getChanges = function() {
-        ViewSpinner.spin();
-        Container.changes({id: $routeParams.id}, function(d) {
-            $scope.changes = d;
-            ViewSpinner.stop();
-        });
-    };
+  $scope.restart = function () {
+    $('#loadingViewSpinner').show();
+    Container.restart({id: $stateParams.id}, function (d) {
+      update();
+      Messages.send("Container restarted", $stateParams.id);
+    }, function (e) {
+      update();
+      Messages.error("Failure", e, "Unable to restart container");
+    });
+  };
 
-    update();
-    $scope.getChanges();
+  $scope.renameContainer = function () {
+    Container.rename({id: $stateParams.id, 'name': $scope.container.newContainerName}, function (d) {
+      if (d.message) {
+        $scope.container.newContainerName = $scope.container.Name;
+        Messages.error("Unable to rename container", {}, d.message);
+      } else {
+        $scope.container.Name = $scope.container.newContainerName;
+        Messages.send("Container successfully renamed", d.name);
+      }
+    }, function (e) {
+      Messages.error("Failure", e, 'Unable to rename container');
+    });
+    $scope.container.edit = false;
+  };
+
+  $scope.containerLeaveNetwork = function containerLeaveNetwork(container, networkId) {
+    $('#loadingViewSpinner').show();
+    Network.disconnect({id: networkId}, { Container: $stateParams.id, Force: false }, function (d) {
+      if (d.message) {
+        $('#loadingViewSpinner').hide();
+        Messages.send("Error", {}, d.message);
+      } else {
+        $('#loadingViewSpinner').hide();
+        Messages.send("Container left network", $stateParams.id);
+        $state.go('container', {id: $stateParams.id}, {reload: true});
+      }
+    }, function (e) {
+      $('#loadingViewSpinner').hide();
+      Messages.error("Failure", e, "Unable to disconnect container from network");
+    });
+  };
+
+  update();
 }]);

app/components/containerConsole/containerConsole.html

@@ -0,0 +1,52 @@
+<rd-header>
+  <rd-header-title title="Container console">
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
+  </rd-header-title>
+  <rd-header-content ng-if="state.loaded">
+    <a ui-sref="containers">Containers</a> > <a ui-sref="container({id: container.Id})">{{ container.Name|trimcontainername }}</a> > Console
+  </rd-header-content>
+</rd-header>
+
+<div class="row" ng-if="state.loaded">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-terminal" title="Console">
+        <div class="pull-right">
+          <i id="loadConsoleSpinner" class="fa fa-cog fa-2x fa-spin" style="margin-top: 5px; display: none;"></i>
+        </div>
+      </rd-widget-header>
+      <rd-widget-body>
+        <form>
+          <div class="row">
+            <!-- command-list -->
+            <div class="col-sm-4">
+              <div class="input-group">
+                <span class="input-group-addon">
+                  <i class="fa fa-linux" aria-hidden="true" ng-if="imageOS == 'linux'"></i>
+                  <i class="fa fa-windows" aria-hidden="true" ng-if="imageOS == 'windows'"></i>
+                </span>
+                <select class="form-control" ng-model="state.command" id="command">
+                  <option value="bash" ng-if="imageOS == 'linux'">/bin/bash</option>
+                  <option value="sh" ng-if="imageOS == 'linux'">/bin/sh</option>
+                  <option value="powershell" ng-if="imageOS == 'windows'">powershell</option>
+                  <option value="cmd.exe" ng-if="imageOS == 'windows'">cmd.exe</option>
+                </select>
+              </div>
+            </div>
+            <!-- !command-list -->
+            <div class="col-sm-8">
+              <button type="button" class="btn btn-primary" ng-click="connect()" ng-disabled="state.connected">Connect</button>
+              <button type="button" class="btn btn-default" ng-click="disconnect()" ng-disabled="!state.connected">Disconnect</button>
+            </div>
+          </div>
+        </form>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <div id="terminal-container" class="terminal-container"></div>
+  </div>
+</div>

app/components/containerConsole/containerConsoleController.js

@@ -0,0 +1,121 @@
+angular.module('containerConsole', [])
+.controller('ContainerConsoleController', ['$scope', '$stateParams', 'Settings', 'Container', 'Image', 'Exec', '$timeout', 'Messages',
+function ($scope, $stateParams, Settings, Container, Image, Exec, $timeout, Messages) {
+  $scope.state = {};
+  $scope.state.loaded = false;
+  $scope.state.connected = false;
+
+  var socket, term;
+
+  // Ensure the socket is closed before leaving the view
+  $scope.$on('$stateChangeStart', function (event, next, current) {
+    if (socket && socket !== null) {
+      socket.close();
+    }
+  });
+
+  Container.get({id: $stateParams.id}, function(d) {
+    $scope.container = d;
+    if (d.message) {
+      Messages.error("Error", d, 'Unable to retrieve container details');
+      $('#loadingViewSpinner').hide();
+    } else {
+      Image.get({id: d.Image}, function(imgData) {
+        $scope.imageOS = imgData.Os;
+        $scope.state.command = imgData.Os === 'windows' ? 'powershell' : 'bash';
+        $scope.state.loaded = true;
+        $('#loadingViewSpinner').hide();
+      }, function (e) {
+        Messages.error("Failure", e, 'Unable to retrieve image details');
+        $('#loadingViewSpinner').hide();
+      });
+    }
+  }, function (e) {
+    Messages.error("Failure", e, 'Unable to retrieve container details');
+    $('#loadingViewSpinner').hide();
+  });
+
+  $scope.connect = function() {
+    $('#loadConsoleSpinner').show();
+    var termWidth = Math.round($('#terminal-container').width() / 8.2);
+    var termHeight = 30;
+    var execConfig = {
+      id: $stateParams.id,
+      AttachStdin: true,
+      AttachStdout: true,
+      AttachStderr: true,
+      Tty: true,
+      Cmd: $scope.state.command.replace(" ", ",").split(",")
+    };
+
+    Container.exec(execConfig, function(d) {
+      if (d.message) {
+        $('#loadConsoleSpinner').hide();
+        Messages.error("Error", {}, d.message);
+      } else {
+        var execId = d.Id;
+        resizeTTY(execId, termHeight, termWidth);
+        var url = window.location.href.split('#')[0] + 'ws/exec?id=' + execId;
+        if (url.indexOf('https') > -1) {
+          url = url.replace('https://', 'wss://');
+        } else {
+          url = url.replace('http://', 'ws://');
+        }
+        initTerm(url, termHeight, termWidth);
+      }
+    }, function (e) {
+      $('#loadConsoleSpinner').hide();
+      Messages.error("Failure", e, 'Unable to start an exec instance');
+    });
+  };
+
+  $scope.disconnect = function() {
+    $scope.state.connected = false;
+    if (socket !== null) {
+      socket.close();
+    }
+    if (term !== null) {
+      term.destroy();
+    }
+  };
+
+  function resizeTTY(execId, height, width) {
+    $timeout(function() {
+      Exec.resize({id: execId, height: height, width: width}, function (d) {
+        if (d.message) {
+          Messages.error('Error', {}, 'Unable to resize TTY');
+        }
+      }, function (e) {
+        Messages.error("Failure", {}, 'Unable to resize TTY');
+      });
+    }, 2000);
+
+  }
+
+  function initTerm(url, height, width) {
+    socket = new WebSocket(url);
+
+    $scope.state.connected = true;
+    socket.onopen = function(evt) {
+      $('#loadConsoleSpinner').hide();
+      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);
+      };
+      socket.onerror = function (error) {
+        $scope.state.connected = false;
+      };
+      socket.onclose = function(evt) {
+        $scope.state.connected = false;
+      };
+    };
+  }
+}]);

app/components/containerLogs/containerLogsController.js

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

app/components/containerLogs/containerlogs.html

@@ -1,34 +1,56 @@
-<div class="row logs">
-    <div class="col-xs-12">
-        <h4>Logs for container: <a href="#/containers/{{ container.Id }}/">{{ container.Name }}</a></td></h4>
-        <div class="btn-group detail">
-            <button class="btn btn-info" ng-click="scrollTo('stdout')">stdout</button>
-            <button class="btn btn-warning" ng-click="scrollTo('stderr')">stderr</button>
-        </div>
-        <div class="pull-right">
-            <input id="timestampToggle" type="checkbox" ng-model="showTimestamps" 
-                ng-change="toggleTimestamps()"/> <label for="timestampToggle">Display Timestamps</label>
-        </div>
-    </div>
+<rd-header>
+  <rd-header-title title="Container logs">
+      <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
+  </rd-header-title>
+  <rd-header-content>
+    <a ui-sref="containers">Containers</a> > <a ui-sref="container({id: container.Id})">{{ container.Name|trimcontainername }}</a> > Logs
+  </rd-header-content>
+</rd-header>
 
-    <div class="col-xs-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <h3 id="stdout" class="panel-title">STDOUT</h3>
-            </div>
-            <div class="panel-body">
-                <pre id="stdoutLog" class="pre-scrollable pre-x-scrollable">{{stdout}}</pre>
-            </div>
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-body>
+        <div class="widget-icon grey pull-left">
+          <i class="fa fa-server"></i>
         </div>
-    </div>
-    <div class="col-xs-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <h3 id="stderr" class="panel-title">STDERR</h3>
-            </div>
-            <div class="panel-body">
-                <pre id="stderrLog" class="pre-scrollable pre-x-scrollable">{{stderr}}</pre>
-            </div>
-        </div>
-    </div>
+        <div class="title">{{ container.Name|trimcontainername }}</div>
+        <div class="comment">Name</div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-info-circle" title="Stdout logs"></rd-widget-header>
+      <rd-widget-taskbar>
+        <input type="checkbox" ng-model="state.displayTimestampsOut" id="displayAllTsOut" ng-change="toggleTimestampsOut()"/>
+        <label for="displayAllTsOut">Display timestamps</label>
+      </rd-widget-taskbar>
+      <rd-widget-body classes="no-padding">
+        <div class="panel-body">
+          <pre id="stdoutLog" class="pre-scrollable pre-x-scrollable">{{stdout}}</pre>
+        </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-exclamation-triangle" title="Stderr logs"></rd-widget-header>
+      <rd-widget-taskbar>
+        <input type="checkbox" ng-model="state.displayTimestampsErr" id="displayAllTsErr" ng-change="toggleTimestampsErr()"/>
+        <label for="displayAllTsErr">Display timestamps</label>
+      </rd-widget-taskbar>
+      <rd-widget-body classes="no-padding">
+        <div class="panel-body">
+          <pre id="stderrLog" class="pre-scrollable pre-x-scrollable">{{stderr}}</pre>
+        </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
 </div>

app/components/containers/containers.html

@@ -1,45 +1,115 @@
+<rd-header>
+  <rd-header-title title="Container list">
+    <a data-toggle="tooltip" title="Refresh" ui-sref="containers" ui-sref-opts="{reload: true}">
+      <i class="fa fa-refresh" aria-hidden="true"></i>
+    </a>
+  </rd-header-title>
+  <rd-header-content>Containers</rd-header-content>
+</rd-header>
 
-<h2>Containers:</h2>
-
-<div>
-    <ul class="nav nav-pills pull-left">
-        <li class="dropdown">
-            <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" data-target="#">Actions <b class="caret"></b></a>
-            <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
-                <li><a tabindex="-1" href="" ng-click="startAction()">Start</a></li>
-                <li><a tabindex="-1" href="" ng-click="stopAction()">Stop</a></li>
-                <li><a tabindex="-1" href="" ng-click="killAction()">Kill</a></li>
-                <li><a tabindex="-1" href="" ng-click="pauseAction()">Pause</a></li>
-                <li><a tabindex="-1" href="" ng-click="unpauseAction()">Unpause</a></li>
-                <li><a tabindex="-1" href="" ng-click="removeAction()">Remove</a></li>
-            </ul>
-        </li>
-    </ul>
-
-    <div class="pull-right">
-        <input type="checkbox" ng-model="displayAll" 
-        	ng-change="toggleGetAll()"/> Display All
-    </div>
+<div class="col-lg-12">
+  <rd-widget>
+    <rd-widget-header icon="fa-server" title="Containers">
+      <div class="pull-right">
+        <i id="loadContainersSpinner" class="fa fa-cog fa-2x fa-spin" style="margin-top: 5px;"></i>
+      </div>
+    </rd-widget-header>
+    <rd-widget-taskbar classes="col-lg-12">
+      <div class="pull-left">
+        <div class="btn-group" role="group" aria-label="...">
+          <button type="button" class="btn btn-primary btn-responsive" ng-click="startAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-play space-right" aria-hidden="true"></i>Start</button>
+          <button type="button" class="btn btn-primary btn-responsive" ng-click="stopAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-stop space-right" aria-hidden="true"></i>Stop</button>
+          <button type="button" class="btn btn-primary btn-responsive" ng-click="killAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-bomb space-right" aria-hidden="true"></i>Kill</button>
+          <button type="button" class="btn btn-primary btn-responsive" ng-click="restartAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-refresh space-right" aria-hidden="true"></i>Restart</button>
+          <button type="button" class="btn btn-primary btn-responsive" ng-click="pauseAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-pause space-right" aria-hidden="true"></i>Pause</button>
+          <button type="button" class="btn btn-primary btn-responsive" ng-click="unpauseAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-play space-right" aria-hidden="true"></i>Resume</button>
+          <button type="button" class="btn btn-danger btn-responsive" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button>
+        </div>
+        <a class="btn btn-default btn-responsive" type="button" ui-sref="actions.create.container">Add container</a>
+      </div>
+      <div class="pull-right">
+        <input type="checkbox" ng-model="state.displayAll" id="displayAll" ng-change="toggleGetAll()" style="margin-top: -2px; margin-right: 5px;"/><label for="displayAll">Show all containers</label>
+        <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
+      </div>
+    </rd-widget-taskbar>
+    <rd-widget-body classes="no-padding">
+      <div class="table-responsive">
+        <table class="table table-hover">
+          <thead>
+            <tr>
+              <th></th>
+              <th>
+                <a ui-sref="containers" ng-click="order('Status')">
+                  State
+                  <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>
+                <a ui-sref="containers" ng-click="order('Names')">
+                  Name
+                  <span ng-show="sortType == 'Names' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Names' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="containers" ng-click="order('Image')">
+                  Image
+                  <span ng-show="sortType == 'Image' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Image' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th ng-if="state.displayIP">
+                <a ui-sref="containers" ng-click="order('IP')">
+                  IP Address
+                  <span ng-show="sortType == 'IP' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'IP' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th ng-if="swarm && !swarm_mode">
+                <a ui-sref="containers" ng-click="order('Host')">
+                  Host IP
+                  <span ng-show="sortType == 'Host' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Host' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="containers" ng-click="order('Ports')">
+                  Exposed Ports
+                  <span ng-show="sortType == 'Ports' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Ports' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr dir-paginate="container in (state.filteredContainers = ( containers | filter:state.filter | orderBy:sortType:sortReverse | itemsPerPage: pagination_count))">
+              <td><input type="checkbox" ng-model="container.Checked" ng-change="selectItem(container)"/></td>
+              <td><span class="label label-{{ container.Status|containerstatusbadge }}">{{ container.Status|containerstatus }}</span></td>
+              <td ng-if="swarm && !swarm_mode"><a ui-sref="container({id: container.Id})">{{ container|swarmcontainername}}</a></td>
+              <td ng-if="!swarm || swarm_mode"><a ui-sref="container({id: container.Id})">{{ container|containername}}</a></td>
+              <td><a ui-sref="image({id: container.Image})">{{ container.Image }}</a></td>
+              <td ng-if="state.displayIP">{{ container.IP ? container.IP : '-' }}</td>
+              <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.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 ng-if="containers" class="pull-left pagination-controls">
+          <dir-pagination-controls></dir-pagination-controls>
+        </div>
+      </div>
+    </rd-widget-body>
+  <rd-widget>
 </div>
-<table class="table table-striped">
-    <thead>
-        <tr>
-            <th><input type="checkbox" ng-model="toggle" ng-change="toggleSelectAll()" /> Action</th>
-            <th>Name</th>
-            <th>Image</th>
-            <th>Command</th>
-            <th>Created</th>
-            <th>Status</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr ng-repeat="container in containers|orderBy:predicate">
-            <td><input type="checkbox" ng-model="container.Checked" /></td>
-            <td><a href="#/containers/{{ container.Id }}/">{{ container|containername}}</a></td>
-            <td><a href="#/images/{{ container.Image }}/">{{ container.Image }}</a></td>
-            <td>{{ container.Command|truncate:40 }}</td>
-            <td>{{ container.Created|getdate }}</td>
-            <td><span class="label label-{{ container.Status|statusbadge }}">{{ container.Status }}</span></td>
-        </tr>
-    </tbody>
-</table>

app/components/containers/containersController.js

@@ -1,81 +1,170 @@
 angular.module('containers', [])
-.controller('ContainersController', ['$scope', 'Container', 'Settings', 'Messages', 'ViewSpinner', 
-function($scope, Container, Settings, Messages, ViewSpinner) {
-    $scope.predicate = '-Created';
-    $scope.toggle = false;
-    $scope.displayAll = Settings.displayAll;
+.controller('ContainersController', ['$scope', 'Container', 'ContainerHelper', 'Info', 'Settings', 'Messages', 'Config',
+function ($scope, Container, ContainerHelper, Info, Settings, Messages, Config) {
+  $scope.state = {};
+  $scope.state.displayAll = Settings.displayAll;
+  $scope.state.displayIP = false;
+  $scope.sortType = 'State';
+  $scope.sortReverse = false;
+  $scope.state.selectedItemCount = 0;
+  $scope.swarm_mode = false;
+  $scope.pagination_count = Settings.pagination_count;
 
-    var update = function(data) {
-        ViewSpinner.spin();
-        Container.query(data, function(d) {
-            $scope.containers = d.map(function(item) {
-                return new ContainerViewModel(item); });
-            ViewSpinner.stop();
-        });
-    };
+  $scope.order = function (sortType) {
+    $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
+    $scope.sortType = sortType;
+  };
 
-    var batch = function(items, action, msg) {
-        ViewSpinner.spin();
-        var counter = 0;
-        var complete = function() {
-            counter = counter -1;
-            if (counter === 0) {
-                ViewSpinner.stop();
-                update({all: Settings.displayAll ? 1 : 0});
-            }
-        };
-        angular.forEach(items, function(c) {
-            if (c.Checked) {
-                counter = counter + 1;
-                action({id: c.Id}, function(d) {
-                    Messages.send("Container " + msg, c.Id);
-                    var index = $scope.containers.indexOf(c);
-                    complete();
-                }, function(e) {
-                    Messages.error("Failure", e.data);
-                    complete();
-                });
-            }
-        });
-        if (counter === 0) {
-            ViewSpinner.stop();
+  var update = function (data) {
+    $('#loadContainersSpinner').show();
+    $scope.state.selectedItemCount = 0;
+    Container.query(data, function (d) {
+      var containers = d;
+      if ($scope.containersToHideLabels) {
+        containers = ContainerHelper.hideContainers(d, $scope.containersToHideLabels);
+      }
+      $scope.containers = containers.map(function (container) {
+        var model = new ContainerViewModel(container);
+        if (model.IP) {
+          $scope.state.displayIP = true;
         }
-    };
+        if ($scope.swarm && !$scope.swarm_mode) {
+          model.hostIP = $scope.swarm_hosts[_.split(container.Names[0], '/')[1]];
+        }
+        return model;
+      });
+      $('#loadContainersSpinner').hide();
+    }, function (e) {
+      $('#loadContainersSpinner').hide();
+      Messages.error("Failure", e, "Unable to retrieve containers");
+      $scope.containers = [];
+    });
+  };
 
-    $scope.toggleSelectAll = function() {
-        angular.forEach($scope.containers, function(i) {
-            i.Checked = $scope.toggle;
-        });
-    };
-
-    $scope.toggleGetAll = function() {
-        Settings.displayAll = $scope.displayAll;
+  var batch = function (items, action, msg) {
+    $('#loadContainersSpinner').show();
+    var counter = 0;
+    var complete = function () {
+      counter = counter - 1;
+      if (counter === 0) {
+        $('#loadContainersSpinner').hide();
         update({all: Settings.displayAll ? 1 : 0});
+      }
     };
+    angular.forEach(items, function (c) {
+      if (c.Checked) {
+        counter = counter + 1;
+        if (action === Container.start) {
+          action({id: c.Id}, {}, function (d) {
+            Messages.send("Container " + msg, c.Id);
+            complete();
+          }, function (e) {
+            Messages.error("Failure", e, "Unable to start container");
+            complete();
+          });
+        }
+        else if (action === Container.remove) {
+          action({id: c.Id}, function (d) {
+            if (d.message) {
+              Messages.send("Error", d.message);
+            }
+            else {
+              Messages.send("Container " + msg, c.Id);
+            }
+            complete();
+          }, function (e) {
+            Messages.error("Failure", e, 'Unable to remove container');
+            complete();
+          });
+        }
+        else {
+          action({id: c.Id}, function (d) {
+            Messages.send("Container " + msg, c.Id);
+            complete();
+          }, function (e) {
+            Messages.error("Failure", e, 'An error occured');
+            complete();
+          });
 
-    $scope.startAction = function() {
-        batch($scope.containers, Container.start, "Started");
-    };
+        }
+      }
+    });
+    if (counter === 0) {
+      $('#loadContainersSpinner').hide();
+    }
+  };
 
-    $scope.stopAction = function() {
-        batch($scope.containers, Container.stop, "Stopped");
-    };
-
-    $scope.killAction = function() {
-        batch($scope.containers, Container.kill, "Killed");
-    };
-
-    $scope.pauseAction = function() {
-        batch($scope.containers, Container.pause, "Paused");
-    };
-
-    $scope.unpauseAction = function() {
-        batch($scope.containers, Container.unpause, "Unpaused");
-    };
-
-    $scope.removeAction = function() {
-        batch($scope.containers, Container.remove, "Removed");
-    };
+  $scope.selectItem = function (item) {
+    if (item.Checked) {
+      $scope.state.selectedItemCount++;
+    } else {
+      $scope.state.selectedItemCount--;
+    }
+  };
 
+  $scope.toggleGetAll = function () {
+    Settings.displayAll = $scope.state.displayAll;
     update({all: Settings.displayAll ? 1 : 0});
+  };
+
+  $scope.startAction = function () {
+    batch($scope.containers, Container.start, "Started");
+  };
+
+  $scope.stopAction = function () {
+    batch($scope.containers, Container.stop, "Stopped");
+  };
+
+  $scope.restartAction = function () {
+    batch($scope.containers, Container.restart, "Restarted");
+  };
+
+  $scope.killAction = function () {
+    batch($scope.containers, Container.kill, "Killed");
+  };
+
+  $scope.pauseAction = function () {
+    batch($scope.containers, Container.pause, "Paused");
+  };
+
+  $scope.unpauseAction = function () {
+    batch($scope.containers, Container.unpause, "Unpaused");
+  };
+
+  $scope.removeAction = function () {
+    batch($scope.containers, Container.remove, "Removed");
+  };
+
+  function retrieveSwarmHostsInfo(data) {
+    var swarm_hosts = {};
+    var systemStatus = data.SystemStatus;
+    var node_count = parseInt(systemStatus[3][1], 10);
+    var node_offset = 4;
+    for (i = 0; i < node_count; i++) {
+      var host = {};
+      host.name = _.trim(systemStatus[node_offset][0]);
+      host.ip = _.split(systemStatus[node_offset][1], ':')[0];
+      swarm_hosts[host.name] = host.ip;
+      node_offset += 9;
+    }
+    return swarm_hosts;
+  }
+
+  $scope.swarm = false;
+  Config.$promise.then(function (c) {
+    $scope.containersToHideLabels = c.hiddenLabels;
+    $scope.swarm = c.swarm;
+    if (c.swarm) {
+      Info.get({}, function (d) {
+        if (!_.startsWith(d.ServerVersion, 'swarm')) {
+          $scope.swarm_mode = true;
+        } else {
+          $scope.swarm_hosts = retrieveSwarmHostsInfo(d);
+        }
+        update({all: Settings.displayAll ? 1 : 0});
+      });
+    } else {
+      update({all: Settings.displayAll ? 1 : 0});
+    }
+  });
 }]);

app/components/createContainer/createContainerController.js

@@ -0,0 +1,270 @@
+angular.module('createContainer', [])
+.controller('CreateContainerController', ['$scope', '$state', '$stateParams', '$filter', 'Config', 'Info', 'Container', 'ContainerHelper', 'Image', 'Volume', 'Network', 'Messages',
+function ($scope, $state, $stateParams, $filter, Config, Info, Container, ContainerHelper, Image, Volume, Network, Messages) {
+
+  $scope.formValues = {
+    alwaysPull: true,
+    Console: 'none',
+    Volumes: [],
+    Registry: '',
+    NetworkContainer: ''
+  };
+
+  $scope.imageConfig = {};
+
+  $scope.config = {
+    Image: '',
+    Env: [],
+    ExposedPorts: {},
+    HostConfig: {
+      RestartPolicy: {
+        Name: 'no'
+      },
+      PortBindings: [],
+      Binds: [],
+      NetworkMode: 'bridge',
+      Privileged: false
+    }
+  };
+
+  $scope.addVolume = function() {
+    $scope.formValues.Volumes.push({ name: '', containerPath: '' });
+  };
+
+  $scope.removeVolume = function(index) {
+    $scope.formValues.Volumes.splice(index, 1);
+  };
+
+  $scope.addEnvironmentVariable = function() {
+    $scope.config.Env.push({ name: '', value: ''});
+  };
+
+  $scope.removeEnvironmentVariable = function(index) {
+    $scope.config.Env.splice(index, 1);
+  };
+
+  $scope.addPortBinding = function() {
+    $scope.config.HostConfig.PortBindings.push({ hostPort: '', containerPort: '', protocol: 'tcp' });
+  };
+
+  $scope.removePortBinding = function(index) {
+    $scope.config.HostConfig.PortBindings.splice(index, 1);
+  };
+
+  Config.$promise.then(function (c) {
+    $scope.swarm = c.swarm;
+    Info.get({}, function(info) {
+      if ($scope.swarm && !_.startsWith(info.ServerVersion, 'swarm')) {
+        $scope.swarm_mode = true;
+      }
+    });
+    var containersToHideLabels = c.hiddenLabels;
+
+    Volume.query({}, function (d) {
+      $scope.availableVolumes = d.Volumes;
+    }, function (e) {
+      Messages.error("Failure", e, "Unable to retrieve volumes");
+    });
+
+    Network.query({}, function (d) {
+      var networks = d;
+      if ($scope.swarm) {
+        networks = d.filter(function (network) {
+          if (network.Scope === 'global') {
+            return network;
+          }
+        });
+        $scope.globalNetworkCount = networks.length;
+        networks.push({Name: "bridge"});
+        networks.push({Name: "host"});
+        networks.push({Name: "none"});
+      }
+      networks.push({Name: "container"});
+      $scope.availableNetworks = networks;
+      if (!_.find(networks, {'Name': 'bridge'})) {
+        $scope.config.HostConfig.NetworkMode = 'nat';
+      }
+    }, function (e) {
+      Messages.error("Failure", e, "Unable to retrieve networks");
+    });
+
+    Container.query({}, function (d) {
+      var containers = d;
+      if (containersToHideLabels) {
+        containers = ContainerHelper.hideContainers(d, containersToHideLabels);
+      }
+      $scope.runningContainers = containers;
+    }, function(e) {
+      Messages.error("Failure", e, "Unable to retrieve running containers");
+    });
+  });
+
+  // TODO: centralize, already present in templatesController
+  function createContainer(config) {
+    Container.create(config, function (d) {
+      if (d.message) {
+        $('#createContainerSpinner').hide();
+        Messages.error('Error', {}, d.message);
+      } else {
+        Container.start({id: d.Id}, {}, function (cd) {
+          if (cd.message) {
+            $('#createContainerSpinner').hide();
+            Messages.error('Error', {}, cd.message);
+          } else {
+            $('#createContainerSpinner').hide();
+            Messages.send('Container Started', d.Id);
+            $state.go('containers', {}, {reload: true});
+          }
+        }, function (e) {
+          $('#createContainerSpinner').hide();
+          Messages.error("Failure", e, 'Unable to start container');
+        });
+      }
+    }, function (e) {
+      $('#createContainerSpinner').hide();
+      Messages.error("Failure", e, 'Unable to create container');
+    });
+  }
+
+  // TODO: centralize, already present in templatesController
+  function pullImageAndCreateContainer(config) {
+    Image.create($scope.imageConfig, function (data) {
+      var err = data.length > 0 && data[data.length - 1].hasOwnProperty('error');
+      if (err) {
+        var detail = data[data.length - 1];
+        $('#createContainerSpinner').hide();
+        Messages.error('Error', {}, detail.error);
+      } else {
+        createContainer(config);
+      }
+    }, function (e) {
+      $('#createContainerSpinner').hide();
+      Messages.error('Failure', e, 'Unable to pull image');
+    });
+  }
+
+  function createImageConfig(imageName, registry) {
+    var imageNameAndTag = imageName.split(':');
+    var image = imageNameAndTag[0];
+    if (registry) {
+      image = registry + '/' + imageNameAndTag[0];
+    }
+    var imageConfig = {
+      fromImage: image,
+      tag: imageNameAndTag[1] ? imageNameAndTag[1] : 'latest'
+    };
+    return imageConfig;
+  }
+
+  function prepareImageConfig(config) {
+    var image = _.toLower(config.Image);
+    var registry = $scope.formValues.Registry;
+    var imageConfig = createImageConfig(image, registry);
+    config.Image = imageConfig.fromImage + ':' + imageConfig.tag;
+    $scope.imageConfig = imageConfig;
+  }
+
+  function preparePortBindings(config) {
+    var bindings = {};
+    config.HostConfig.PortBindings.forEach(function (portBinding) {
+      if (portBinding.containerPort) {
+        var key = portBinding.containerPort + "/" + portBinding.protocol;
+        var binding = {};
+        if (portBinding.hostPort && portBinding.hostPort.indexOf(':') > -1) {
+          var hostAndPort = portBinding.hostPort.split(':');
+          binding.HostIp = hostAndPort[0];
+          binding.HostPort = hostAndPort[1];
+        } else {
+          binding.HostPort = portBinding.hostPort;
+        }
+        bindings[key] = [binding];
+        config.ExposedPorts[key] = {};
+      }
+    });
+    config.HostConfig.PortBindings = bindings;
+  }
+
+  function prepareConsole(config) {
+    var value = $scope.formValues.Console;
+    var openStdin = true;
+    var tty = true;
+    if (value === 'tty') {
+      openStdin = false;
+    } else if (value === 'interactive') {
+      tty = false;
+    } else if (value === 'none') {
+      openStdin = false;
+      tty = false;
+    }
+    config.OpenStdin = openStdin;
+    config.Tty = tty;
+  }
+
+  function prepareEnvironmentVariables(config) {
+    var env = [];
+    config.Env.forEach(function (v) {
+      if (v.name && v.value) {
+        env.push(v.name + "=" + v.value);
+      }
+    });
+    config.Env = env;
+  }
+
+  function prepareVolumes(config) {
+    var binds = [];
+    var volumes = {};
+
+    $scope.formValues.Volumes.forEach(function (volume) {
+      var name = volume.name;
+      var containerPath = volume.containerPath;
+      if (name && containerPath) {
+        var bind = name + ':' + containerPath;
+        volumes[containerPath] = {};
+        if (volume.readOnly) {
+          bind += ':ro';
+        }
+        binds.push(bind);
+      }
+    });
+    config.HostConfig.Binds = binds;
+    config.Volumes = volumes;
+  }
+
+  function prepareNetworkConfig(config) {
+    var mode = config.HostConfig.NetworkMode;
+    var container = $scope.formValues.NetworkContainer;
+    var containerName = container;
+    if (container && typeof container === 'object') {
+      containerName = $filter('trimcontainername')(container.Names[0]);
+      if ($scope.swarm && !$scope.swarm_mode) {
+        containerName = $filter('swarmcontainername')(container);
+      }
+    }
+    var networkMode = mode;
+    if (containerName) {
+      networkMode += ':' + containerName;
+    }
+    config.HostConfig.NetworkMode = networkMode;
+  }
+
+  function prepareConfiguration() {
+    var config = angular.copy($scope.config);
+    prepareNetworkConfig(config);
+    prepareImageConfig(config);
+    preparePortBindings(config);
+    prepareConsole(config);
+    prepareEnvironmentVariables(config);
+    prepareVolumes(config);
+    return config;
+  }
+
+  $scope.create = function () {
+    var config = prepareConfiguration();
+    $('#createContainerSpinner').show();
+    if ($scope.formValues.alwaysPull) {
+      pullImageAndCreateContainer(config);
+    } else {
+      createContainer(config);
+    }
+  };
+}]);

app/components/createContainer/createcontainer.html

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

app/components/createNetwork/createNetworkController.js

@@ -0,0 +1,77 @@
+angular.module('createNetwork', [])
+.controller('CreateNetworkController', ['$scope', '$state', 'Messages', 'Network',
+function ($scope, $state, Messages, Network) {
+  $scope.formValues = {
+    DriverOptions: [],
+    Subnet: '',
+    Gateway: ''
+  };
+
+  $scope.config = {
+    Driver: 'bridge',
+    CheckDuplicate: true,
+    Internal: false,
+    // Force IPAM Driver to 'default', should not be required.
+    // See: https://github.com/docker/docker/issues/25735
+    IPAM: {
+      Driver: 'default',
+      Config: []
+    }
+  };
+
+  $scope.addDriverOption = function() {
+    $scope.formValues.DriverOptions.push({ name: '', value: '' });
+  };
+
+  $scope.removeDriverOption = function(index) {
+    $scope.formValues.DriverOptions.splice(index, 1);
+  };
+
+  function createNetwork(config) {
+    $('#createNetworkSpinner').show();
+    Network.create(config, function (d) {
+      if (d.message) {
+        $('#createNetworkSpinner').hide();
+        Messages.error('Unable to create network', {}, d.message);
+      } else {
+        Messages.send("Network created", d.Id);
+        $('#createNetworkSpinner').hide();
+        $state.go('networks', {}, {reload: true});
+      }
+    }, function (e) {
+      $('#createNetworkSpinner').hide();
+      Messages.error("Failure", e, 'Unable to create network');
+    });
+  }
+
+  function prepareIPAMConfiguration(config) {
+    if ($scope.formValues.Subnet) {
+      var ipamConfig = {};
+      ipamConfig.Subnet = $scope.formValues.Subnet;
+      if ($scope.formValues.Gateway) {
+        ipamConfig.Gateway = $scope.formValues.Gateway  ;
+      }
+      config.IPAM.Config.push(ipamConfig);
+    }
+  }
+
+  function prepareDriverOptions(config) {
+    var options = {};
+    $scope.formValues.DriverOptions.forEach(function (option) {
+      options[option.name] = option.value;
+    });
+    config.Options = options;
+  }
+
+  function prepareConfiguration() {
+    var config = angular.copy($scope.config);
+    prepareIPAMConfiguration(config);
+    prepareDriverOptions(config);
+    return config;
+  }
+
+  $scope.create = function () {
+    var config = prepareConfiguration();
+    createNetwork(config);
+  };
+}]);

app/components/createNetwork/createnetwork.html

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

app/components/createService/createServiceController.js

@@ -0,0 +1,215 @@
+angular.module('createService', [])
+.controller('CreateServiceController', ['$scope', '$state', 'Service', 'Volume', 'Network', 'ImageHelper', 'Messages',
+function ($scope, $state, Service, Volume, Network, ImageHelper, Messages) {
+
+  $scope.formValues = {
+    Name: '',
+    Image: '',
+    Registry: '',
+    Mode: 'replicated',
+    Replicas: 1,
+    Command: '',
+    WorkingDir: '',
+    User: '',
+    Env: [],
+    Labels: [],
+    ContainerLabels: [],
+    Volumes: [],
+    Network: '',
+    ExtraNetworks: [],
+    Ports: []
+  };
+
+  $scope.addPortBinding = function() {
+    $scope.formValues.Ports.push({ PublishedPort: '', TargetPort: '', Protocol: 'tcp' });
+  };
+
+  $scope.removePortBinding = function(index) {
+    $scope.formValues.Ports.splice(index, 1);
+  };
+
+  $scope.addExtraNetwork = function() {
+    $scope.formValues.ExtraNetworks.push({ Name: '' });
+  };
+
+  $scope.removeExtraNetwork = function(index) {
+    $scope.formValues.ExtraNetworks.splice(index, 1);
+  };
+
+  $scope.addVolume = function() {
+    $scope.formValues.Volumes.push({ name: '', containerPath: '' });
+  };
+
+  $scope.removeVolume = function(index) {
+    $scope.formValues.Volumes.splice(index, 1);
+  };
+
+  $scope.addEnvironmentVariable = function() {
+    $scope.formValues.Env.push({ name: '', value: ''});
+  };
+
+  $scope.removeEnvironmentVariable = function(index) {
+    $scope.formValues.Env.splice(index, 1);
+  };
+
+  $scope.addLabel = function() {
+    $scope.formValues.Labels.push({ name: '', value: ''});
+  };
+
+  $scope.removeLabel = function(index) {
+    $scope.formValues.Labels.splice(index, 1);
+  };
+
+  $scope.addContainerLabel = function() {
+    $scope.formValues.ContainerLabels.push({ name: '', value: ''});
+  };
+
+  $scope.removeContainerLabel = function(index) {
+    $scope.formValues.ContainerLabels.splice(index, 1);
+  };
+
+  function prepareImageConfig(config, input) {
+    var imageConfig = ImageHelper.createImageConfig(input.Image, input.Registry);
+    config.TaskTemplate.ContainerSpec.Image = imageConfig.repo + ':' + imageConfig.tag;
+  }
+
+  function preparePortsConfig(config, input) {
+    var ports = [];
+    input.Ports.forEach(function (binding) {
+      if (binding.PublishedPort && binding.TargetPort) {
+        ports.push({ PublishedPort: +binding.PublishedPort, TargetPort: +binding.TargetPort, Protocol: binding.Protocol });
+      }
+    });
+    config.EndpointSpec.Ports = ports;
+  }
+
+  function prepareSchedulingConfig(config, input) {
+    if (input.Mode === 'replicated') {
+      config.Mode.Replicated = {
+        Replicas: input.Replicas
+      };
+    } else {
+      config.Mode.Global = {};
+    }
+  }
+
+  function prepareCommandConfig(config, input) {
+    if (input.Command) {
+      config.TaskTemplate.ContainerSpec.Command = _.split(input.Command, ' ');
+    }
+    if (input.User) {
+      config.TaskTemplate.ContainerSpec.User = input.User;
+    }
+    if (input.WorkingDir) {
+      config.TaskTemplate.ContainerSpec.Dir = input.WorkingDir;
+    }
+  }
+
+  function prepareEnvConfig(config, input) {
+    var env = [];
+    input.Env.forEach(function (v) {
+      if (v.name && v.value) {
+        env.push(v.name + "=" + v.value);
+      }
+    });
+    config.TaskTemplate.ContainerSpec.Env = env;
+  }
+
+  function prepareLabelsConfig(config, input) {
+    var labels = {};
+    input.Labels.forEach(function (label) {
+      if (label.name && label.value) {
+          labels[label.name] = label.value;
+      }
+    });
+    config.Labels = labels;
+
+    var containerLabels = {};
+    input.ContainerLabels.forEach(function (label) {
+      if (label.name && label.value) {
+          containerLabels[label.name] = label.value;
+      }
+    });
+    config.TaskTemplate.ContainerSpec.Labels = containerLabels;
+  }
+
+  function prepareVolumes(config, input) {
+    input.Volumes.forEach(function (volume) {
+      if (volume.Source && volume.Target) {
+        var mount = {};
+        mount.Type = volume.Bind ? 'bind' : 'volume';
+        mount.ReadOnly = volume.ReadOnly ? true : false;
+        mount.Source = volume.Source;
+        mount.Target = volume.Target;
+        config.TaskTemplate.ContainerSpec.Mounts.push(mount);
+      }
+    });
+  }
+
+  function prepareNetworks(config, input) {
+    var networks = [];
+    if (input.Network) {
+      networks.push({ Target: input.Network });
+    }
+    input.ExtraNetworks.forEach(function (network) {
+      networks.push({ Target: network.Name });
+    });
+    config.Networks = _.uniqWith(networks, _.isEqual);
+  }
+
+  function prepareConfiguration() {
+    var input = $scope.formValues;
+    var config = {
+      Name: input.Name,
+      TaskTemplate: {
+        ContainerSpec: {
+          Mounts: []
+        }
+      },
+      Mode: {},
+      EndpointSpec: {}
+    };
+    prepareSchedulingConfig(config, input);
+    prepareImageConfig(config, input);
+    preparePortsConfig(config, input);
+    prepareCommandConfig(config, input);
+    prepareEnvConfig(config, input);
+    prepareLabelsConfig(config, input);
+    prepareVolumes(config, input);
+    prepareNetworks(config, input);
+    return config;
+  }
+
+  function createNewService(config) {
+    Service.create(config, function (d) {
+      $('#createServiceSpinner').hide();
+      Messages.send('Service created', d.ID);
+      $state.go('services', {}, {reload: true});
+    }, function (e) {
+      $('#createServiceSpinner').hide();
+      Messages.error("Failure", e, 'Unable to create service');
+    });
+  }
+
+  $scope.create = function createService() {
+    $('#createServiceSpinner').show();
+    var config = prepareConfiguration();
+    createNewService(config);
+  };
+
+  Volume.query({}, function (d) {
+    $scope.availableVolumes = d.Volumes;
+  }, function (e) {
+    Messages.error("Failure", e, "Unable to retrieve volumes");
+  });
+
+  Network.query({}, function (d) {
+    $scope.availableNetworks = d.filter(function (network) {
+      if (network.Scope === 'swarm') {
+        return network;
+      }
+    });
+  }, function (e) {
+    Messages.error("Failure", e, "Unable to retrieve networks");
+  });
+}]);

app/components/createService/createservice.html

@@ -0,0 +1,338 @@
+<rd-header>
+  <rd-header-title title="Create service"></rd-header-title>
+  <rd-header-content>
+    <a ui-sref="services">Services</a> > Add service
+  </rd-header-content>
+</rd-header>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-body>
+        <form class="form-horizontal">
+          <!-- name-input -->
+          <div class="form-group">
+            <label for="service_name" class="col-sm-1 control-label text-left">Name</label>
+            <div class="col-sm-11">
+              <input type="text" class="form-control" ng-model="formValues.Name" id="service_name" placeholder="e.g. myService">
+            </div>
+          </div>
+          <!-- !name-input -->
+          <!-- image-and-registry-inputs -->
+          <div class="form-group">
+            <label for="service_image" class="col-sm-1 control-label text-left">Image</label>
+            <div class="col-sm-7">
+              <input type="text" class="form-control" ng-model="formValues.Image" id="service_image" placeholder="e.g. nginx:latest">
+            </div>
+            <label for="image_registry" class="col-sm-1 control-label text-left">Registry</label>
+            <div class="col-sm-3">
+              <input type="text" class="form-control" ng-model="formValues.Registry" id="image_registry" placeholder="leave empty to use DockerHub">
+            </div>
+          </div>
+          <!-- !image-and-registry-inputs -->
+          <!-- scheduling-mode -->
+          <div class="form-group">
+            <label class="col-sm-1 control-label text-left">Scheduling mode</label>
+            <div class="col-sm-11">
+              <label class="radio-inline">
+                <input type="radio" name="service_scheduling" ng-model="formValues.Mode" value="global">
+                Global
+              </label>
+              <label class="radio-inline">
+                <input type="radio" name="service_scheduling" ng-model="formValues.Mode" value="replicated">
+                Replicated
+              </label>
+            </div>
+          </div>
+          <div class="form-group" ng-if="formValues.Mode === 'replicated'">
+            <label for="replicas" class="col-sm-1 control-label text-left">Replicas</label>
+            <div class="col-sm-1">
+              <input type="number" class="form-control" ng-model="formValues.Replicas" id="replicas" placeholder="e.g. 3">
+            </div>
+            <div class="col-sm-10"></div>
+          </div>
+          <!-- !scheduling-mode -->
+          <!-- port-mapping -->
+          <div class="form-group">
+            <label for="container_ports" class="col-sm-1 control-label text-left">Port mapping</label>
+            <div class="col-sm-11">
+              <span class="label label-default interactive" ng-click="addPortBinding()">
+                <i class="fa fa-plus-circle" aria-hidden="true"></i> map port
+              </span>
+            </div>
+            <!-- port-mapping-input-list -->
+            <div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;">
+              <div ng-repeat="portBinding in formValues.Ports" 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.PublishedPort" placeholder="e.g. 8080">
+                </div>
+                <div class="input-group col-sm-5 input-group-sm">
+                  <span class="input-group-addon">container</span>
+                  <input type="text" class="form-control" ng-model="portBinding.TargetPort" placeholder="e.g. 80">
+                </div>
+                <div class="input-group col-sm-1 input-group-sm">
+                  <select class="selectpicker form-control" ng-model="portBinding.Protocol">
+                    <option value="tcp">tcp</option>
+                    <option value="udp">udp</option>
+                  </select>
+                  <span class="input-group-btn">
+                    <button class="btn btn-default" type="button" ng-click="removePortBinding($index)">
+                      <i class="fa fa-minus" aria-hidden="true"></i>
+                    </button>
+                  </span>
+                </div>
+              </div>
+            </div>
+            <!-- !port-mapping-input-list -->
+          </div>
+          <!-- !port-mapping -->
+        </form>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-body>
+        <ul class="nav nav-tabs">
+          <li class="active interactive"><a data-target="#command" data-toggle="tab">Command</a></li>
+          <li class="interactive"><a data-target="#volumes" data-toggle="tab">Volumes</a></li>
+          <li class="interactive"><a data-target="#network" data-toggle="tab">Network</a></li>
+          <li class="interactive"><a data-target="#labels" data-toggle="tab">Labels</a></li>
+        </ul>
+        <!-- tab-content -->
+        <div class="tab-content">
+          <!-- tab-command -->
+          <div class="tab-pane active" id="command">
+            <form class="form-horizontal" style="margin-top: 15px;">
+              <!-- command-input -->
+              <div class="form-group">
+                <label for="service_command" class="col-sm-1 control-label text-left">Command</label>
+                <div class="col-sm-9">
+                  <input type="text" class="form-control" ng-model="formValues.Command" id="service_command" placeholder="e.g. /usr/bin/nginx -t -c /mynginx.conf">
+                </div>
+              </div>
+              <!-- !command-input -->
+              <!-- workdir-user-input -->
+              <div class="form-group">
+                <label for="service_workingdir" class="col-sm-1 control-label text-left">Working Dir</label>
+                <div class="col-sm-4">
+                  <input type="text" class="form-control" ng-model="formValues.WorkingDir" id="service_workingdir" placeholder="e.g. /myapp">
+                </div>
+                <label for="service_user" class="col-sm-1 control-label text-left">User</label>
+                <div class="col-sm-4">
+                  <input type="text" class="form-control" ng-model="formValues.User" id="service_user" placeholder="e.g. nginx">
+                </div>
+              </div>
+              <!-- !workdir-user-input -->
+              <!-- environment-variables -->
+              <div class="form-group">
+                <label for="service_env" class="col-sm-1 control-label text-left">Environment variables</label>
+                <div class="col-sm-11">
+                  <span class="label label-default interactive" ng-click="addEnvironmentVariable()">
+                    <i class="fa fa-plus-circle" aria-hidden="true"></i> environment variable
+                  </span>
+                </div>
+                <!-- environment-variable-input-list -->
+                <div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;">
+                  <div ng-repeat="variable in formValues.Env" style="margin-top: 2px;">
+                    <div class="input-group col-sm-5 input-group-sm">
+                      <span class="input-group-addon">name</span>
+                      <input type="text" class="form-control" ng-model="variable.name" placeholder="e.g. FOO">
+                    </div>
+                    <div class="input-group col-sm-5 input-group-sm">
+                      <span class="input-group-addon">value</span>
+                      <input type="text" class="form-control" ng-model="variable.value" placeholder="e.g. bar">
+                      <span class="input-group-btn">
+                        <button class="btn btn-default" type="button" ng-click="removeEnvironmentVariable($index)">
+                          <i class="fa fa-minus" aria-hidden="true"></i>
+                        </button>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <!-- !environment-variable-input-list -->
+              </div>
+              <!-- !environment-variables -->
+            </form>
+          </div>
+          <!-- !tab-command -->
+          <!-- tab-volume -->
+          <div class="tab-pane" id="volumes">
+            <form class="form-horizontal" style="margin-top: 15px;">
+              <!-- volumes -->
+              <div class="form-group">
+                <label for="service_volumes" class="col-sm-1 control-label text-left">Volumes</label>
+                <div class="col-sm-11">
+                  <span class="label label-default interactive" ng-click="addVolume()">
+                    <i class="fa fa-plus-circle" aria-hidden="true"></i> volume
+                  </span>
+                </div>
+                <!-- volumes-input-list -->
+                <div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;">
+                  <div ng-repeat="volume in formValues.Volumes" style="margin-top: 2px;">
+                    <div class="input-group col-sm-1 input-group-sm">
+                      <div class="checkbox">
+                        <label>
+                          <input type="checkbox" ng-model="volume.ReadOnly"> Read-only
+                        </label>
+                      </div>
+                    </div>
+                    <div class="input-group col-sm-5 input-group-sm">
+                      <span class="input-group-addon"><input type="checkbox" ng-model="volume.Bind">bind</span>
+                      <select class="selectpicker form-control" ng-model="volume.Source" ng-if="!volume.Bind">
+                        <option selected disabled hidden value="">Select a volume</option>
+                        <option ng-repeat="vol in availableVolumes" ng-value="vol.Name">{{ vol.Name|truncate:30}}</option>
+                      </select>
+                      <input ng-if="volume.Bind" type="text" class="form-control" ng-model="volume.Source" placeholder="e.g. /path/on/host">
+                    </div>
+                    <div class="input-group col-sm-5 input-group-sm">
+                      <span class="input-group-addon">container</span>
+                      <input type="text" class="form-control" ng-model="volume.Target" placeholder="e.g. /path/in/container">
+                      <span class="input-group-btn">
+                        <button class="btn btn-default" type="button" ng-click="removeVolume($index)">
+                          <i class="fa fa-minus" aria-hidden="true"></i>
+                        </button>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <!-- !volumes-input-list -->
+              </div>
+              <!-- !volumes -->
+            </form>
+          </div>
+          <!-- !tab-volume -->
+          <!-- tab-network -->
+          <div class="tab-pane" id="network">
+            <form class="form-horizontal" style="margin-top: 15px;">
+              <!-- network-input -->
+              <div class="form-group">
+                <label for="container_network" class="col-sm-1 control-label text-left">Network</label>
+                <div class="col-sm-9">
+                  <select class="selectpicker form-control" ng-model="formValues.Network">
+                    <option selected disabled hidden value="">Select a network</option>
+                    <option ng-repeat="net in availableNetworks" ng-value="net.Name">{{ net.Name }}</option>
+                  </select>
+                </div>
+                <div class="col-sm-2"></div>
+              </div>
+              <!-- !network-input -->
+              <!-- extra-networks -->
+              <div class="form-group">
+                <label for="service_extra_networks" class="col-sm-1 control-label text-left">Extra networks</label>
+                <div class="col-sm-11">
+                  <span class="label label-default interactive" ng-click="addExtraNetwork()">
+                    <i class="fa fa-plus-circle" aria-hidden="true"></i> network
+                  </span>
+                </div>
+                <!-- network-input-list -->
+                <div style="margin-top: 10px;">
+                  <div class="col-sm-12" ng-repeat="network in formValues.ExtraNetworks" style="margin-top: 5px;">
+                    <div class="input-group col-sm-9 input-group-sm col-sm-offset-1">
+                      <span class="input-group-btn">
+                        <button class="btn btn-default" type="button" ng-click="removeExtraNetwork($index)">
+                          <i class="fa fa-minus" aria-hidden="true"></i>
+                        </button>
+                      </span>
+                      <select class="selectpicker form-control" ng-model="network.Name">
+                        <option selected disabled hidden value="">Select a network</option>
+                        <option ng-repeat="net in availableNetworks" ng-value="net.Name">{{ net.Name }}</option>
+                      </select>
+                    </div>
+                    <div class="col-sm-2"></div>
+                  </div>
+                </div>
+                <!-- !network-input-list -->
+              </div>
+              <!-- !extra-networks -->
+            </form>
+          </div>
+          <!-- !tab-network -->
+          <!-- tab-labels -->
+          <div class="tab-pane" id="labels">
+            <form class="form-horizontal" style="margin-top: 15px;">
+              <!-- labels -->
+              <div class="form-group">
+                <label for="service_env" class="col-sm-1 control-label text-left">Labels</label>
+                <div class="col-sm-11">
+                  <span class="label label-default interactive" ng-click="addLabel()">
+                    <i class="fa fa-plus-circle" aria-hidden="true"></i> label
+                  </span>
+                </div>
+                <!-- labels-input-list -->
+                <div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;">
+                  <div ng-repeat="label in formValues.Labels" style="margin-top: 2px;">
+                    <div class="input-group col-sm-5 input-group-sm">
+                      <span class="input-group-addon">name</span>
+                      <input type="text" class="form-control" ng-model="label.name" placeholder="e.g. com.example.foo">
+                    </div>
+                    <div class="input-group col-sm-5 input-group-sm">
+                      <span class="input-group-addon">value</span>
+                      <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar">
+                      <span class="input-group-btn">
+                        <button class="btn btn-default" type="button" ng-click="removeLabel($index)">
+                          <i class="fa fa-minus" aria-hidden="true"></i>
+                        </button>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <!-- !labels-input-list -->
+              </div>
+              <!-- !labels-->
+              <!-- container-labels -->
+              <div class="form-group">
+                <label for="service_env" class="col-sm-1 control-label text-left">Container labels</label>
+                <div class="col-sm-11">
+                  <span class="label label-default interactive" ng-click="addContainerLabel()">
+                    <i class="fa fa-plus-circle" aria-hidden="true"></i> container label
+                  </span>
+                </div>
+                <!-- container-labels-input-list -->
+                <div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;">
+                  <div ng-repeat="label in formValues.ContainerLabels" style="margin-top: 2px;">
+                    <div class="input-group col-sm-5 input-group-sm">
+                      <span class="input-group-addon">name</span>
+                      <input type="text" class="form-control" ng-model="label.name" placeholder="e.g. com.example.foo">
+                    </div>
+                    <div class="input-group col-sm-5 input-group-sm">
+                      <span class="input-group-addon">value</span>
+                      <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar">
+                      <span class="input-group-btn">
+                        <button class="btn btn-default" type="button" ng-click="removeContainerLabel($index)">
+                          <i class="fa fa-minus" aria-hidden="true"></i>
+                        </button>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <!-- !container-labels-input-list -->
+              </div>
+              <!-- !container-labels-->
+            </form>
+          </div>
+          <!-- !tab-labels -->
+
+          <!-- tab-security -->
+          <div class="tab-pane" id="security">
+          </div>
+          <!-- !tab-security -->
+        </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12" style="text-align: center;">
+    <div>
+      <i id="createServiceSpinner" 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-click="create()">Create</button>
+    <a type="button" class="btn btn-default btn-lg" ui-sref="services">Cancel</a>
+  </div>
+</div>

app/components/createVolume/createVolumeController.js

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

app/components/createVolume/createvolume.html

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

app/components/dashboard/dashboard.html

@@ -1,49 +1,153 @@
- 
-<div class="col-xs-offset-1">
-    <!--<div class="sidebar span4">
-        <div ng-include="template" ng-controller="SideBarController"></div>
-    </div>-->
-    <div class="row">
-        <div class="col-xs-10" id="masthead" style="display:none">
-            <div class="jumbotron">
-                <h1>DockerUI</h1>
-                <p class="lead">The Linux container engine</p>
-                    <a class="btn btn-large btn-success" href="http://docker.io">Learn more.</a>
-              </div>
-        </div>
-    </div>
-    
-    <div class="row">
-        <div class="col-xs-10">
-            <div class="col-xs-5">
-                <h3>Running Containers</h3>
-                <ul>
-                    <li ng-repeat="container in containers|orderBy:predicate">
-                        <a href="#/containers/{{ container.Id }}/">{{ container|containername }}</a>
-                        <span class="label label-{{ container.Status|statusbadge }}">{{ container.Status }}</span>
-                    </li>
-                </ul>
-            </div>
-            <div class="col-xs-5 text-right">
-                <h3>Status</h3>
-                <canvas id="containers-chart" class="pull-right">
-                    Get a better browser... Your holding everyone back.
-                </canvas>
-                <div id="chart-legend"></div>
-            </div>
-        </div>
-    </div>
+<rd-header>
+  <rd-header-title title="Home">
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
+  </rd-header-title>
+  <rd-header-content>Dashboard</rd-header-content>
+</rd-header>
 
-    <div class="row">
-        <div class="col-xs-10" id="stats">
-            <h4>Containers created</h4>
-           <canvas id="containers-started-chart" width="700">
-                Get a better browser... You're holding everyone back.
-           </canvas>
-            <h4>Images created</h4>
-           <canvas id="images-created-chart" width="700">
-                Get a better browser... You're holding everyone back.
-           </canvas>
-        </div>
-    </div>
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12" ng-if="swarm_mode || !swarm">
+    <rd-widget>
+      <rd-widget-header icon="fa-tachometer" title="Node info"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table">
+          <tbody>
+            <tr>
+              <td>Name</td>
+              <td>{{ infoData.Name }}</td>
+            </tr>
+            <tr>
+              <td>Docker version</td>
+              <td>{{ infoData.ServerVersion }}</td>
+            </tr>
+            <tr>
+              <td>CPU</td>
+              <td>{{ infoData.NCPU }}</td>
+            </tr>
+            <tr>
+              <td>Memory</td>
+              <td>{{ infoData.MemTotal|humansize }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+  <div class="col-lg-12 col-md-12 col-xs-12" ng-if="swarm && !swarm_mode">
+    <rd-widget>
+      <rd-widget-header icon="fa-tachometer" title="Cluster info"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table">
+          <tbody>
+            <tr>
+              <td>Nodes</td>
+              <td>{{ infoData.SystemStatus[0][1] == 'primary' ? infoData.SystemStatus[3][1] : infoData.SystemStatus[4][1] }}</td>
+            </tr>
+            <tr>
+              <td>Swarm version</td>
+              <td>{{ infoData.ServerVersion|swarmversion }}</td>
+            </tr>
+            <tr>
+              <td>Total CPU</td>
+              <td>{{ infoData.NCPU }}</td>
+            </tr>
+            <tr>
+              <td>Total memory</td>
+              <td>{{ infoData.MemTotal|humansize: 2 }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+  <div class="col-lg-12 col-md-12 col-xs-12" ng-if="swarm && swarm_mode">
+    <rd-widget>
+      <rd-widget-header icon="fa-tachometer" title="Swarm info"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table">
+          <tbody>
+            <tr>
+              <td colspan="2"><span class="small text-muted">This node is part of a Swarm cluster</span></td>
+            </tr>
+            <tr >
+              <td>Node role</td>
+              <td>{{ infoData.Swarm.ControlAvailable ? 'Manager' : 'Worker' }}</td>
+            </tr>
+            <tr ng-if="infoData.Swarm.ControlAvailable">
+              <td>Nodes in the cluster</td>
+              <td>{{ infoData.Swarm.Nodes }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
+    <a ui-sref="containers">
+      <rd-widget>
+        <rd-widget-body>
+          <div class="widget-icon blue pull-left">
+            <i class="fa fa-server"></i>
+          </div>
+          <div class="pull-right">
+            <div><i class="fa fa-heartbeat space-right green-icon"></i>{{ containerData.running }} running</div>
+            <div><i class="fa fa-heartbeat space-right red-icon"></i>{{ containerData.stopped }} stopped</div>
+          </div>
+          <div class="title">{{ containerData.total }}</div>
+          <div class="comment">Containers</div>
+        </rd-widget-body>
+      </rd-widget>
+    </a>
+  </div>
+  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
+    <a ui-sref="images">
+      <rd-widget>
+        <rd-widget-body>
+          <div class="widget-icon blue pull-left">
+            <i class="fa fa-clone"></i>
+          </div>
+          <div class="pull-right">
+            <div><i class="fa fa-pie-chart space-right"></i>{{ imageData.size|humansize }}</div>
+          </div>
+          <div class="title">{{ imageData.total }}</div>
+          <div class="comment">Images</div>
+        </rd-widget-body>
+      </rd-widget>
+    </a>
+  </div>
+  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
+    <a ui-sref="volumes">
+      <rd-widget>
+        <rd-widget-body>
+          <div class="widget-icon blue pull-left">
+            <i class="fa fa-cubes"></i>
+          </div>
+          <div class="pull-right" ng-if="infoData.Driver">
+            <div><i class="fa fa-hdd-o space-right"></i>{{ infoData.Driver }} driver</div>
+          </div>
+          <div class="title">{{ volumeData.total }}</div>
+          <div class="comment">Volumes</div>
+        </rd-widget-body>
+      </rd-widget>
+    </a>
+  </div>
+  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
+    <a ui-sref="networks">
+      <rd-widget>
+        <rd-widget-body>
+          <div class="widget-icon blue pull-left">
+            <i class="fa fa-sitemap"></i>
+          </div>
+          <div class="title">{{ networkData.total }}</div>
+          <div class="comment">Networks</div>
+        </rd-widget-body>
+      </rd-widget>
+    </a>
+  </div>
+</div>
+
+<div class="row">
 </div>

app/components/dashboard/dashboardController.js

@@ -1,72 +1,94 @@
 angular.module('dashboard', [])
-.controller('DashboardController', ['$scope', 'Container', 'Image', 'Settings', 'LineChart', function($scope, Container, Image, Settings, LineChart) {
-    $scope.predicate = '-Created';
-    $scope.containers = [];
+.controller('DashboardController', ['$scope', '$q', 'Config', 'Container', 'ContainerHelper', 'Image', 'Network', 'Volume', 'Info',
+function ($scope, $q, Config, Container, ContainerHelper, Image, Network, Volume, Info) {
 
-    var getStarted = function(data) {
-        $scope.totalContainers = data.length;
-        LineChart.build('#containers-started-chart', data, function(c) { return new Date(c.Created * 1000).toLocaleDateString(); });
-        var s = $scope;
-        Image.query({}, function(d) {
-            s.totalImages = d.length;
-            LineChart.build('#images-created-chart', d, function(c) { return new Date(c.Created * 1000).toLocaleDateString(); });
-        });
-    };
+  $scope.containerData = {
+    total: 0
+  };
+  $scope.imageData = {
+    total: 0
+  };
+  $scope.networkData = {
+    total: 0
+  };
+  $scope.volumeData = {
+    total: 0
+  };
+  $scope.swarm_mode = false;
 
-    var opts = {animation:false};    
-    if (Settings.firstLoad) {
-        $('#stats').hide();
-        opts.animation = true;
-        Settings.firstLoad = false;
-        $('#masthead').show();
+  function prepareContainerData(d, containersToHideLabels) {
+    var running = 0;
+    var stopped = 0;
 
-        setTimeout(function() {
-            $('#masthead').slideUp('slow');
-            $('#stats').slideDown('slow');
-        }, 5000);
+    var containers = d;
+    if (containersToHideLabels) {
+      containers = ContainerHelper.hideContainers(d, containersToHideLabels);
     }
-   
-    Container.query({all: 1}, function(d) {
-       var running = 0
-       var ghost = 0;
-       var stopped = 0;
 
-       for (var i = 0; i < d.length; i++) {
-           var item = d[i];
+    for (var i = 0; i < containers.length; i++) {
+      var item = containers[i];
+      if (item.Status.indexOf('Up') !== -1) {
+        running += 1;
+      } else if (item.Status.indexOf('Exit') !== -1) {
+        stopped += 1;
+      }
+    }
+    $scope.containerData.running = running;
+    $scope.containerData.stopped = stopped;
+    $scope.containerData.total = containers.length;
+  }
 
-           if (item.Status === "Ghost") {
-               ghost += 1;
-           } else if (item.Status.indexOf('Exit') !== -1) {
-               stopped += 1;
-           } else {
-               running += 1;
-               $scope.containers.push(new ContainerViewModel(item));
-           }
-       }
+  function prepareImageData(d) {
+    var images = d;
+    var totalImageSize = 0;
+    for (var i = 0; i < images.length; i++) {
+      var item = images[i];
+      totalImageSize += item.VirtualSize;
+    }
+    $scope.imageData.total = images.length;
+    $scope.imageData.size = totalImageSize;
+  }
 
-       getStarted(d);
+  function prepareVolumeData(d) {
+    var volumes = d.Volumes;
+    if (volumes) {
+      $scope.volumeData.total = volumes.length;
+    }
+  }
 
-       var c = new Chart($('#containers-chart').get(0).getContext("2d"));
-       var data = [
-        {
-            value: running,
-            color: '#5bb75b',
-            title: 'Running'
-        }, // running
-        {
-            value: stopped,
-            color: '#C7604C',
-            title: 'Stopped'
-        }, // stopped
-        {
-            value: ghost,
-            color: '#E2EAE9',
-            title: 'Ghost'
-        } // ghost
-      ];
-        
-      c.Doughnut(data, opts); 
-      var lgd = $('#chart-legend').get(0);
-      legend(lgd, data);
-   });
+  function prepareNetworkData(d) {
+    var networks = d;
+    $scope.networkData.total = networks.length;
+  }
+
+  function prepareInfoData(d) {
+    var info = d;
+    $scope.infoData = info;
+    if ($scope.swarm && !_.startsWith(info.ServerVersion, 'swarm')) {
+      $scope.swarm_mode = true;
+    }
+  }
+
+  function fetchDashboardData(containersToHideLabels) {
+    $('#loadingViewSpinner').show();
+    $q.all([
+      Container.query({all: 1}).$promise,
+      Image.query({}).$promise,
+      Volume.query({}).$promise,
+      Network.query({}).$promise,
+      Info.get({}).$promise
+    ]).then(function (d) {
+      prepareContainerData(d[0], containersToHideLabels);
+      prepareImageData(d[1]);
+      prepareVolumeData(d[2]);
+      prepareNetworkData(d[3]);
+      prepareInfoData(d[4]);
+      $('#loadingViewSpinner').hide();
+    });
+  }
+
+  Config.$promise.then(function (c) {
+    $scope.swarm = c.swarm;
+    fetchDashboardData(c.hiddenLabels);
+  });
 }]);

app/components/dashboard/master-ctrl.js

@@ -0,0 +1,52 @@
+angular.module('dashboard')
+.controller('MasterCtrl', ['$scope', '$cookieStore', 'Settings', 'Config', 'Info',
+function ($scope, $cookieStore, Settings, Config, Info) {
+  /**
+  * Sidebar Toggle & Cookie Control
+  */
+  var mobileView = 992;
+
+  $scope.getWidth = function() {
+    return window.innerWidth;
+  };
+
+  $scope.swarm_mode = false;
+
+  Config.$promise.then(function (c) {
+    $scope.logo = c.logo;
+    $scope.swarm = c.swarm;
+    Info.get({}, function(d) {
+      if ($scope.swarm && !_.startsWith(d.ServerVersion, 'swarm')) {
+        $scope.swarm_mode = true;
+        $scope.swarm_manager = false;
+        if (d.Swarm.ControlAvailable) {
+          $scope.swarm_manager = true;
+        }
+      }
+    });
+  });
+
+  $scope.$watch($scope.getWidth, function(newValue, oldValue) {
+    if (newValue >= mobileView) {
+      if (angular.isDefined($cookieStore.get('toggle'))) {
+        $scope.toggle = ! $cookieStore.get('toggle') ? false : true;
+      } else {
+        $scope.toggle = true;
+      }
+    } else {
+      $scope.toggle = false;
+    }
+
+  });
+
+  $scope.toggleSidebar = function() {
+    $scope.toggle = !$scope.toggle;
+    $cookieStore.put('toggle', $scope.toggle);
+  };
+
+  window.onresize = function() {
+    $scope.$apply();
+  };
+
+  $scope.uiVersion = Settings.uiVersion;
+}]);

app/components/docker/docker.html

@@ -0,0 +1,119 @@
+<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>
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
+  </rd-header-title>
+  <rd-header-content>Docker</rd-header-content>
+</rd-header>
+
+<div class="row" ng-if="state.loaded">
+  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-code" title="Engine version"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table">
+          <tbody>
+            <tr>
+              <td>Version</td>
+              <td>{{ version.Version }}</td>
+            </tr>
+            <tr>
+              <td>API version</td>
+              <td>{{ version.ApiVersion }}</td>
+            </tr>
+            <tr>
+              <td>Go version</td>
+              <td>{{ version.GoVersion }}</td>
+            </tr>
+            <tr>
+              <td>OS type</td>
+              <td>{{ version.Os }}</td>
+            </tr>
+            <tr>
+              <td>OS</td>
+              <td>{{ info.OperatingSystem }}</td>
+            </tr>
+            <tr>
+              <td>Architecture</td>
+              <td>{{ version.Arch }}</td>
+            </tr>
+            <tr>
+              <td>Kernel version</td>
+              <td>{{ version.KernelVersion }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row" ng-if="state.loaded">
+  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-th" title="Engine status"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table">
+          <tbody>
+            <tr>
+              <td>Total CPU</td>
+              <td>{{ info.NCPU }}</td>
+            </tr>
+            <tr>
+              <td>Total memory</td>
+              <td>{{ info.MemTotal|humansize }}</td>
+            </tr>
+            <tr>
+              <td>Docker root directory</td>
+              <td>{{ info.DockerRootDir }}</td>
+            </tr>
+            <tr>
+              <td>Storage driver</td>
+              <td>{{ info.Driver }}</td>
+            </tr>
+            <tr>
+              <td>Logging driver</td>
+              <td>{{ info.LoggingDriver }}</td>
+            </tr>
+            <tr ng-if="info.CgroupDriver">
+              <td>Cgroup driver</td>
+              <td>{{ info.CgroupDriver }}</td>
+            </tr>
+            <tr ng-if="info.ExecutionDriver">
+              <td>Execution driver</td>
+              <td>{{ info.ExecutionDriver }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row" ng-if="state.loaded && info.Plugins">
+  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-plug" title="Engine plugins"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table">
+          <tbody>
+            <tr ng-if="info.Plugins.Volume">
+              <td>Volume</td>
+              <td>{{ info.Plugins.Volume|arraytostr: ', '}}</td>
+            </tr>
+            <tr ng-if="info.Plugins.Network">
+              <td>Network</td>
+              <td>{{ info.Plugins.Network|arraytostr: ', '}}</td>
+            </tr>
+            <tr ng-if="info.Plugins.Authorization">
+              <td>Authorization</td>
+              <td>{{ info.Plugins.Authorization|arraytostr: ', '}}</td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/components/docker/dockerController.js

@@ -0,0 +1,24 @@
+angular.module('docker', [])
+.controller('DockerController', ['$scope', 'Info', 'Version', 'Messages',
+function ($scope, Info, Version, Messages) {
+  $scope.state = {
+    loaded: false
+  };
+  $scope.info = {};
+  $scope.version = {};
+
+  Info.get({}, function (infoData) {
+    $scope.info = infoData;
+    Version.get({}, function (versionData) {
+      $scope.version = versionData;
+      $scope.state.loaded = true;
+      $('#loadingViewSpinner').hide();
+    }, function (e) {
+      Messages.error("Failure", e, 'Unable to retrieve engine details');
+      $('#loadingViewSpinner').hide();
+    });
+  }, function (e) {
+    Messages.error("Failure", e, 'Unable to retrieve engine information');
+    $('#loadingViewSpinner').hide();
+  });
+}]);

app/components/events/events.html

@@ -0,0 +1,66 @@
+<rd-header>
+  <rd-header-title title="Event list">
+    <a data-toggle="tooltip" title="Refresh" ui-sref="events" ui-sref-opts="{reload: true}">
+      <i class="fa fa-refresh" aria-hidden="true"></i>
+    </a>
+  </rd-header-title>
+  <rd-header-content>Events</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-history" title="Events">
+        <div class="pull-right">
+          <i id="loadEventsSpinner" class="fa fa-cog fa-2x fa-spin" style="margin-top: 5px;"></i>
+        </div>
+      </rd-widget-header>
+      <rd-widget-taskbar classes="col-lg-12">
+        <div class="pull-right">
+          <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
+        </div>
+      </rd-widget-taskbar>
+      <rd-widget-body classes="no-padding">
+        <div class="table-responsive">
+          <table class="table table-hover">
+            <thead>
+              <tr>
+                <th>
+                  <a ui-sref="events" ng-click="order('Time')">
+                    Date
+                    <span ng-show="sortType == 'Time' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'Time' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
+                <th>
+                  <a ui-sref="events" ng-click="order('Type')">
+                    Category
+                    <span ng-show="sortType == 'Type' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'Type' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
+                <th>
+                  <a ui-sref="events" ng-click="order('Details')">
+                    Details
+                    <span ng-show="sortType == 'Details' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'Details' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr dir-paginate="event in (events | filter:state.filter | orderBy:sortType:sortReverse | itemsPerPage: pagination_count)">
+                <td>{{ event.Time|getisodatefromtimestamp }}</td>
+                <td>{{ event.Type }}</td>
+                <td>{{ event.Details }}</td>
+              </tr>
+            </tbody>
+          </table>
+          <div ng-if="events" class="pull-left pagination-controls">
+            <dir-pagination-controls></dir-pagination-controls>
+          </div>
+        </div>
+      </rd-widget-body>
+    <rd-widget>
+  </div>
+</div>

app/components/events/eventsController.js

@@ -0,0 +1,28 @@
+angular.module('events', [])
+.controller('EventsController', ['$scope', 'Settings', 'Messages', 'Events',
+function ($scope, Settings, Messages, Events) {
+  $scope.state = {};
+  $scope.sortType = 'Time';
+  $scope.sortReverse = true;
+  $scope.pagination_count = Settings.pagination_count;
+
+  $scope.order = function(sortType) {
+    $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
+    $scope.sortType = sortType;
+  };
+
+  var from = moment().subtract(24, 'hour').unix();
+  var to = moment().unix();
+
+  Events.query({since: from, until: to},
+  function(d) {
+    $scope.events = d.map(function (item) {
+      return new EventViewModel(item);
+    });
+    $('#loadEventsSpinner').hide();
+  },
+  function (e) {
+    $('#loadEventsSpinner').hide();
+    Messages.error("Failure", e, "Unable to load events");
+  });
+}]);

app/components/footer/footerController.js

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

app/components/footer/statusbar.html

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

app/components/image/image.html

@@ -1,107 +1,162 @@
-<div ng-include="template" ng-controller="StartContainerController"></div>
+<rd-header>
+  <rd-header-title title="Image details">
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
+  </rd-header-title>
+  <rd-header-content>
+    <a ui-sref="images">Images</a> > <a ui-sref="image({id: image.Id})">{{ image.Id }}</a>
+  </rd-header-content>
+</rd-header>
 
-<div class="alert alert-error" id="error-message" style="display:none">
-    {{ error }}
+<div class="row" ng-if="RepoTags.length > 0">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa fa-tags" title="Image tags"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <div style="margin: 5px 10px;">
+          <span ng-repeat="tag in RepoTags" class="label label-primary image-tag space-right">
+            <a data-toggle="tooltip" class="interactive" title="Push to registry" ng-click="pushImage(tag)">
+              <i class="fa fa-upload white-icon" aria-hidden="true"></i>
+            </a>
+            {{ tag }}
+            <a data-toggle="tooltip" class="interactive" title="Remove tag" ng-click="removeImage(tag)">
+              <i class="fa fa-trash-o white-icon" aria-hidden="true"></i>
+            </a>
+          </span>
+        </div>
+        <div style="margin: 5px 10px;">
+          <span class="small text-muted">
+            Note: you can click on the upload icon to push an image
+            and on the trash icon to delete a tag
+          </span>
+        </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
 </div>
 
-<div class="detail">
- 
-    <h4>Image: {{ tag }}</h4>
-
-    <div class="btn-group detail">
-      <button class="btn btn-success" data-toggle="modal" data-target="#create-modal">Create</button>
-    </div>
-
-    <div>
-       <h4>Containers created:</h4>
-       <canvas id="containers-started-chart" width="750">
-                Get a better broswer... Your holding everyone back.
-       </canvas>
-    </div>
-
-    <table class="table table-striped">
-         <tbody>
-            <tr>
-                <td>Created:</td>
-                <td>{{ image.created }}</td>
-            </tr>
-            <tr>
-                <td>Parent:</td>
-                <td><a href="#/images/{{ image.parent }}/">{{ image.parent }}</a></td>
-            </tr>
-            <tr>
-                <td>Size:</td>
-                <td>{{ image.Size|humansize }}</td>
-            </tr>
-
-            <tr>
-                <td>Hostname:</td>
-                <td>{{ image.container_config.Hostname }}</td>
-            </tr>
-            <tr>
-                <td>User:</td>
-                <td>{{ image.container_config.User }}</td>
-            </tr>
-            <tr>
-                <td>Cmd:</td>
-                <td>{{ image.container_config.Cmd }}</td>
-            </tr>
-            <tr>
-                <td>Volumes:</td>
-                <td>{{ image.container_config.Volumes }}</td>
-            </tr>
-            <tr>
-                <td>Volumes from:</td>
-                <td>{{ image.container_config.VolumesFrom }}</td>
-            </tr>
-            <tr>
-                <td>Comment:</td>
-                <td>{{ image.comment }}</td>
-            </tr>
-
-        </tbody>
-    </table>
-
-    <div class="row-fluid">
-        <div class="span1">
-            History:
-        </div>
-        <div class="span5">
-            <i class="icon-refresh" style="width:32px;height:32px;" ng-click="getHistory()"></i>
-        </div>
-    </div> 
-
-    <div class="well well-large">
-        <ul>
-            <li ng-repeat="change in history">
-                <strong>{{ change.Id }}</strong>: Created: {{ change.Created|getdate }} Created by: {{ change.CreatedBy }}
-            </li>
-        </ul>
-    </div>
-
-    <hr />
-
-    <div class="row-fluid">
-        <form class="form-inline" role="form">
-            <fieldset>
-                <legend>Tag image</legend>
-                <div class="form-group">
-                    <label>Tag:</label>
-                    <input type="text" placeholder="repo..." ng-model="tag.repo" class="form-control">
-                </div>
-                <div class="form-group">
-                    <label class="checkbox">
-                        <input type="checkbox" ng-model="tag.force" class="form-control"/> Force?
-                    </label>
-                </div>
-                 <input type="button" ng-click="updateTag()" value="Tag" class="btn btn-primary"/>
-            </fieldset>
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-tag" title="Tag the image"></rd-widget-header>
+      <rd-widget-body>
+        <form class="form-horizontal">
+          <!-- name-and-registry-inputs -->
+          <div class="form-group">
+            <label for="image_name" class="col-sm-1 control-label text-left">Name</label>
+            <div class="col-sm-7">
+              <input type="text" class="form-control" ng-model="config.Image" id="image_name" placeholder="e.g. myImage:myTag">
+            </div>
+            <label for="image_registry" class="col-sm-1 control-label text-left">Registry</label>
+            <div class="col-sm-3">
+              <input type="text" class="form-control" ng-model="config.Registry" id="image_registry" placeholder="optional">
+            </div>
+          </div>
+          <!-- !name-and-registry-inputs -->
+          <!-- tag-note -->
+          <div class="form-group">
+            <div class="col-sm-12">
+              <span class="small text-muted">Note: if you don't specify the tag in the image name, <span class="label label-default">latest</span> will be used.</span>
+            </div>
+          </div>
+          <!-- !tag-note -->
+          <div class="form-group">
+            <div class="col-sm-12">
+              <button type="button" class="btn btn-default btn-sm" ng-disabled="!config.Image" ng-click="tagImage()">Tag</button>
+              <i id="pullImageSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
+            </div>
+          </div>
         </form>
-    </div>
-
-    <hr />
-
-    <div class="btn-remove">
-        <button class="btn btn-large btn-block btn-primary btn-danger" ng-click="remove()">Remove Image</button>
-    </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-clone" title="Image details"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table">
+          <tbody>
+            <tr>
+              <td>ID</td>
+              <td>
+                {{ image.Id }}
+                <button class="btn btn-xs btn-danger" ng-click="removeImage(image.Id)"><i class="fa fa-trash space-right" aria-hidden="true"></i>Delete this image</button>
+              </td>
+            </tr>
+            <tr ng-if="image.Parent">
+              <td>Parent</td>
+              <td><a ui-sref="image({id: image.Parent})">{{ image.Parent }}</a></td>
+            </tr>
+            <tr>
+              <td>Size</td>
+              <td>{{ image.VirtualSize|humansize }}</td>
+            </tr>
+            <tr>
+              <td>Created</td>
+              <td>{{ image.Created|getisodate }}</td>
+            </tr>
+            <tr>
+              <td>Build</td>
+              <td>Docker {{ image.DockerVersion }} on {{ image.Os}}, {{ image.Architecture }}</td>
+            </tr>
+            <tr ng-if="image.Author">
+              <td>Author</td>
+              <td>{{ image.Author }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-clone" title="Dockerfile details"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table">
+          <tbody>
+            <tr>
+              <td>CMD</td>
+              <td><code>{{ image.ContainerConfig.Cmd|command }}</code></td>
+            </tr>
+            <tr ng-if="image.ContainerConfig.Entrypoint">
+              <td>ENTRYPOINT</td>
+              <td><code>{{ image.ContainerConfig.Entrypoint|command }}</code></td>
+            </tr>
+            <tr ng-if="image.ContainerConfig.ExposedPorts">
+              <td>EXPOSE</td>
+              <td>
+                <span class="label label-default space-right" ng-repeat="port in exposedPorts">
+                  {{ port }}
+                </span>
+              </td>
+            </tr>
+            <tr ng-if="image.ContainerConfig.Volumes">
+              <td>VOLUME</td>
+              <td>
+                <span class="label label-default space-right" ng-repeat="volume in volumes">
+                  {{ volume }}
+                </span>
+              </td>
+            </tr>
+            <tr>
+              <td>ENV</td>
+              <td>
+                <table class="table table-bordered table-condensed">
+                  <tr ng-repeat="var in image.ContainerConfig.Env">
+                    <td>{{ var|key: '=' }}</td>
+                    <td>{{ var|value: '=' }}</td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
 </div>

app/components/image/imageController.js

@@ -1,72 +1,89 @@
 angular.module('image', [])
-.controller('ImageController', ['$scope', '$q', '$routeParams', '$location', 'Image', 'Container', 'Messages', 'LineChart',
-function($scope, $q, $routeParams, $location, Image, Container, Messages, LineChart) {
-    $scope.history = [];
-    $scope.tag = {repo: '', force: false};
+.controller('ImageController', ['$scope', '$stateParams', '$state', 'Image', 'ImageHelper', 'Messages',
+function ($scope, $stateParams, $state, Image, ImageHelper, Messages) {
+  $scope.RepoTags = [];
+  $scope.config = {
+    Image: '',
+    Registry: ''
+  };
 
-    $scope.remove = function() {
-        Image.remove({id: $routeParams.id}, function(d) {
-            Messages.send("Image Removed", $routeParams.id);
-        }, function(e) {
-            $scope.error = e.data;
-            $('#error-message').show();
-        });
-    };
-
-    $scope.getHistory = function() {
-        Image.history({id: $routeParams.id}, function(d) {
-            $scope.history = d;
-        });
-    };
-
-    $scope.updateTag = function() {
-        var tag = $scope.tag;
-        Image.tag({id: $routeParams.id, repo: tag.repo, force: tag.force ? 1 : 0}, function(d) {
-            Messages.send("Tag Added", $routeParams.id);
-        }, function(e) {
-            $scope.error = e.data;
-            $('#error-message').show();
-        });
-    };
-
-    function getContainersFromImage($q, Container, tag) {
-        var defer = $q.defer();
-        
-        Container.query({all:1, notruc:1}, function(d) {
-            var containers = [];
-            for (var i = 0; i < d.length; i++) {
-                var c = d[i];
-                if (c.Image == tag) {
-                    containers.push(new ContainerViewModel(c));
-                }
-            }
-            defer.resolve(containers);
-        });
-
-        return defer.promise;
-    }
-
-    Image.get({id: $routeParams.id}, function(d) {
-        $scope.image = d;
-        $scope.tag = d.id;
-        var t = $routeParams.tag;
-        if (t && t !== ":") {
-            $scope.tag = t;
-            var promise = getContainersFromImage($q, Container, t);
-
-            promise.then(function(containers) {
-                LineChart.build('#containers-started-chart', containers, function(c) { return new Date(c.Created * 1000).toLocaleDateString(); });
-            });
+  // Get RepoTags from the /images/query endpoint instead of /image/json,
+  // for backwards compatibility with Docker API versions older than 1.21
+  function getRepoTags(imageId) {
+    Image.query({}, function (d) {
+      d.forEach(function(image) {
+        if (image.Id === imageId && image.RepoTags[0] !== '<none>:<none>') {
+          $scope.RepoTags = image.RepoTags;
         }
-    }, function(e) {
-        if (e.status === 404) {
-            $('.detail').hide();
-            $scope.error = "Image not found.<br />" + $routeParams.id;
-        } else {
-            $scope.error = e.data;
-        }
-        $('#error-message').show();
+      });
     });
+  }
 
-    $scope.getHistory();
+  $scope.tagImage = function() {
+    $('#loadingViewSpinner').show();
+    var image = _.toLower($scope.config.Image);
+    var registry = _.toLower($scope.config.Registry);
+    var imageConfig = ImageHelper.createImageConfig(image, registry);
+    Image.tag({id: $stateParams.id, tag: imageConfig.tag, repo: imageConfig.repo}, function (d) {
+      Messages.send('Image successfully tagged');
+      $('#loadingViewSpinner').hide();
+      $state.go('image', {id: $stateParams.id}, {reload: true});
+    }, function(e) {
+      $('#loadingViewSpinner').hide();
+      Messages.error("Failure", e, "Unable to tag image");
+    });
+  };
+
+  $scope.pushImage = function(tag) {
+    $('#loadingViewSpinner').show();
+    Image.push({tag: tag}, function (d) {
+      if (d[d.length-1].error) {
+        Messages.error("Unable to push image", {}, d[d.length-1].error);
+      } else {
+        Messages.send('Image successfully pushed');
+      }
+      $('#loadingViewSpinner').hide();
+    }, function (e) {
+      $('#loadingViewSpinner').hide();
+      Messages.error("Failure", e, "Unable to push image");
+    });
+  };
+
+  $scope.removeImage = function (id) {
+    $('#loadingViewSpinner').show();
+    Image.remove({id: id}, function (d) {
+      if (d[0].message) {
+        $('#loadingViewSpinner').hide();
+        Messages.error("Unable to remove image", {}, d[0].message);
+      } else {
+        // If last message key is 'Deleted' or if it's 'Untagged' and there is only one tag associated to the image
+        // then assume the image is gone and send to images page
+        if (d[d.length-1].Deleted || (d[d.length-1].Untagged && $scope.RepoTags.length === 1)) {
+          Messages.send('Image successfully deleted');
+          $state.go('images', {}, {reload: true});
+        } else {
+          Messages.send('Tag successfully deleted');
+          $state.go('image', {id: $stateParams.id}, {reload: true});
+        }
+      }
+    }, function (e) {
+      $('#loadingViewSpinner').hide();
+      Messages.error("Failure", e, 'Unable to remove image');
+    });
+  };
+
+  $('#loadingViewSpinner').show();
+  Image.get({id: $stateParams.id}, function (d) {
+    $scope.image = d;
+    if (d.RepoTags) {
+      $scope.RepoTags = d.RepoTags;
+    } else {
+      getRepoTags(d.Id);
+    }
+    $('#loadingViewSpinner').hide();
+    $scope.exposedPorts = d.ContainerConfig.ExposedPorts ? Object.keys(d.ContainerConfig.ExposedPorts) : [];
+    $scope.volumes = d.ContainerConfig.Volumes ? Object.keys(d.ContainerConfig.Volumes) : [];
+  }, function (e) {
+    Messages.error("Failure", e, "Unable to retrieve image info");
+  });
 }]);

app/components/images/images.html

@@ -1,33 +1,125 @@
+<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 ng-include="template" ng-controller="BuilderController"></div>
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-download" title="Pull image ">
+      </rd-widget-header>
+      <rd-widget-body>
+        <form class="form-horizontal">
+          <!-- name-and-registry-inputs -->
+          <div class="form-group">
+            <label for="image_name" class="col-sm-1 control-label text-left">Name</label>
+            <div class="col-sm-7">
+              <input type="text" class="form-control" ng-model="config.Image" id="image_name" placeholder="e.g. ubuntu:trusty">
+            </div>
+            <label for="image_registry" class="col-sm-1 control-label text-left">Registry</label>
+            <div class="col-sm-3">
+              <input type="text" class="form-control" ng-model="config.Registry" id="image_registry" placeholder="leave empty to use DockerHub">
+            </div>
+          </div>
+          <!-- !name-and-registry-inputs -->
+          <!-- tag-note -->
+          <div class="form-group">
+            <div class="col-sm-12">
+              <span class="small text-muted">Note: if you don't specify the tag in the image name, <span class="label label-default">latest</span> will be used.</span>
+            </div>
+          </div>
+          <!-- !tag-note -->
+          <div class="form-group">
+            <div class="col-sm-12">
+              <button type="button" class="btn btn-default btn-sm" ng-disabled="!config.Image" ng-click="pullImage()">Pull</button>
+              <i id="pullImageSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
+            </div>
+          </div>
+        </form>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
 
-<h2>Images:</h2>
-
-<ul class="nav nav-pills">
-    <li class="dropdown">
-        <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" data-target="#">Actions <b class="caret"></b></a>
-        <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
-            <li><a tabindex="-1" href="" ng-click="removeAction()">Remove</a></li>
-        </ul>
-    </li>
-</ul>
-<table class="table table-striped">
-    <thead>
-        <tr>
-            <th><input type="checkbox" ng-model="toggle" ng-change="toggleSelectAll()" /> Action</th>
-            <th>Id</th>
-            <th>Repository</th>
-            <th>VirtualSize</th>
-            <th>Created</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr ng-repeat="image in images | orderBy:predicate">
-            <td><input type="checkbox" ng-model="image.Checked" /></td>
-            <td><a href="#/images/{{ image.Id }}/?tag={{ image|repotag }}">{{ image.Id|truncate:20}}</a></td>
-            <td>{{ image|repotag }}</td>
-            <td>{{ image.VirtualSize|humansize }}</td>
-            <td>{{ image.Created|getdate }}</td>
-        </tr>
-    </tbody>
-</table>
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-clone" title="Images">
+        <div class="pull-right">
+          <i id="loadImagesSpinner" class="fa fa-cog fa-2x fa-spin" style="margin-top: 5px;"></i>
+        </div>
+      </rd-widget-header>
+      <rd-widget-taskbar classes="col-lg-12">
+        <div class="pull-left">
+          <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button>
+        </div>
+        <div class="pull-right">
+          <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
+        </div>
+      </rd-widget-taskbar>
+      <rd-widget-body classes="no-padding">
+        <div class="table-responsive">
+          <table class="table table-hover">
+            <thead>
+              <tr>
+                <th></th>
+                <th>
+                  <a ui-sref="images" ng-click="order('Id')">
+                    Id
+                    <span ng-show="sortType == 'Id' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'Id' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
+                <th>
+                  <a ui-sref="images" ng-click="order('RepoTags')">
+                    Tags
+                    <span ng-show="sortType == 'RepoTags' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'RepoTags' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
+                <th>
+                  <a ui-sref="images" ng-click="order('VirtualSize')">
+                    Size
+                    <span ng-show="sortType == 'VirtualSize' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'VirtualSize' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
+                <th>
+                  <a ui-sref="images" ng-click="order('Created')">
+                    Created
+                    <span ng-show="sortType == 'Created' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'Created' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr dir-paginate="image in (state.filteredImages = (images | filter:state.filter | orderBy:sortType:sortReverse | itemsPerPage: pagination_count))">
+                <td><input type="checkbox" ng-model="image.Checked" ng-change="selectItem(image)" /></td>
+                <td><a ui-sref="image({id: image.Id})">{{ image.Id|truncate:20}}</a></td>
+                <td>
+                  <span class="label label-primary image-tag" ng-repeat="tag in (image|repotags)">{{ tag }}</span>
+                </td>
+                <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 ng-if="images" class="pull-left pagination-controls">
+            <dir-pagination-controls></dir-pagination-controls>
+          </div>
+        </div>
+      </rd-widget-body>
+      <rd-widget>
+      </div>
+    </div>

app/components/images/imagesController.js

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

app/components/masthead/masthead.html

@@ -1,9 +0,0 @@
-  <div class="masthead">
-    <h3 class="text-muted">DockerUI</h3>
-      <ul class="nav well">
-        <li><a href="#">Dashboard</a></li>
-        <li><a href="#/containers/">Containers</a></li>
-        <li><a href="#/images/">Images</a></li>
-        <li><a href="#/settings/">Settings</a></li>
-      </ul>
-  </div>

app/components/masthead/mastheadController.js

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

app/components/network/network.html

@@ -0,0 +1,67 @@
+<rd-header>
+  <rd-header-title title="Network details">
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
+  </rd-header-title>
+  <rd-header-content>
+    <a ui-sref="networks">Networks</a> > <a ui-sref="network({id: network.Id})">{{ network.Name }}</a>
+  </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-sitemap" title="Network details"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table">
+          <tbody>
+            <tr>
+              <td>Name</td>
+              <td>{{ network.Name }}</td>
+            </tr>
+            <tr>
+              <td>ID</td>
+              <td>
+                {{ network.Id }}
+                <button class="btn btn-xs btn-danger" ng-click="removeNetwork(network.Id)"><i class="fa fa-trash space-right" aria-hidden="true"></i>Delete this network</button>
+              </td>
+            </tr>
+            <tr>
+              <td>Driver</td>
+              <td>{{ network.Driver }}</td>
+            </tr>
+            <tr>
+              <td>Scope</td>
+              <td>{{ network.Scope }}</td>
+            </tr>
+            <tr ng-if="network.IPAM.Config[0].Subnet">
+              <td>Subnet</td>
+              <td>{{ network.IPAM.Config[0].Subnet }}</td>
+            </tr>
+            <tr ng-if="network.IPAM.Config[0].Gateway">
+              <td>Gateway</td>
+              <td>{{ network.IPAM.Config[0].Gateway }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row" ng-if="!(network.Options | emptyobject)">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-cogs" title="Network options"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table">
+          <tbody>
+            <tr ng-repeat="(key, value) in network.Options">
+              <td>{{ key }}</td>
+              <td>{{ value }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/components/network/networkController.js

@@ -0,0 +1,30 @@
+angular.module('network', [])
+.controller('NetworkController', ['$scope', '$state', '$stateParams', 'Network', 'Messages',
+function ($scope, $state, $stateParams, Network, Messages) {
+
+  $scope.removeNetwork = function removeNetwork(networkId) {
+    $('#loadingViewSpinner').show();
+    Network.remove({id: $stateParams.id}, function (d) {
+      if (d.message) {
+        $('#loadingViewSpinner').hide();
+        Messages.send("Error", {}, d.message);
+      } else {
+        $('#loadingViewSpinner').hide();
+        Messages.send("Network removed", $stateParams.id);
+        $state.go('networks', {});
+      }
+    }, function (e) {
+      $('#loadingViewSpinner').hide();
+      Messages.error("Failure", e, "Unable to remove network");
+    });
+  };
+
+  $('#loadingViewSpinner').show();
+  Network.get({id: $stateParams.id}, function (d) {
+    $scope.network = d;
+    $('#loadingViewSpinner').hide();
+  }, function (e) {
+    $('#loadingViewSpinner').hide();
+    Messages.error("Failure", e, "Unable to retrieve network info");
+  });
+}]);

app/components/networks/networks.html

@@ -0,0 +1,149 @@
+<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="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-plus" title="Add a network">
+      </rd-widget-header>
+      <rd-widget-body>
+        <form class="form-horizontal">
+          <!-- name-input -->
+          <div class="form-group">
+            <label for="network_name" class="col-sm-1 control-label text-left">Name</label>
+            <div class="col-sm-11">
+              <input type="text" class="form-control" ng-model="config.Name" id="network_name" placeholder="e.g. myNetwork">
+            </div>
+          </div>
+          <!-- !name-input -->
+          <!-- tag-note -->
+          <div class="form-group" ng-if="swarm">
+            <div class="col-sm-12">
+              <span class="small text-muted">Note: The network will be created using the overlay driver and will allow containers to communicate across the hosts of your cluster.</span>
+            </div>
+          </div>
+          <div class="form-group" ng-if="!swarm">
+            <div class="col-sm-12">
+              <span class="small text-muted">Note: The network will be created using the bridge driver.</span>
+            </div>
+          </div>
+          <!-- !tag-note -->
+          <div class="form-group">
+            <div class="col-sm-12">
+              <button type="button" class="btn btn-default btn-sm" ng-disabled="!config.Name" ng-click="createNetwork()">Create</button>
+              <button type="button" class="btn btn-default btn-sm" ui-sref="actions.create.network">Advanced settings...</button>
+              <i id="createNetworkSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
+            </div>
+          </div>
+        </form>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-sitemap" title="Networks">
+        <div class="pull-right">
+          <i id="loadNetworksSpinner" class="fa fa-cog fa-2x fa-spin" style="margin-top: 5px;"></i>
+        </div>
+      </rd-widget-header>
+      <rd-widget-taskbar classes="col-lg-12">
+        <div class="pull-left">
+          <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button>
+        </div>
+        <div class="pull-right">
+          <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
+        </div>
+      </rd-widget-taskbar>
+      <rd-widget-body classes="no-padding">
+        <div class="table-responsive">
+          <table class="table table-hover">
+            <thead>
+              <tr>
+                <th></th>
+                <th>
+                  <a ui-sref="networks" ng-click="order('Name')">
+                    Name
+                    <span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
+                <th>
+                  <a ui-sref="networks" ng-click="order('Id')">
+                    Id
+                    <span ng-show="sortType == 'Id' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'Id' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
+                <th>
+                  <a ui-sref="networks" ng-click="order('Scope')">
+                    Scope
+                    <span ng-show="sortType == 'Scope' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'Scope' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
+                <th>
+                  <a ui-sref="networks" ng-click="order('Driver')">
+                    Driver
+                    <span ng-show="sortType == 'Driver' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'Driver' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
+                <th>
+                  <a ui-sref="networks" ng-click="order('IPAM.Driver')">
+                    IPAM Driver
+                    <span ng-show="sortType == 'IPAM.Driver' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'IPAM.Driver' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
+                <th>
+                  <a ui-sref="networks" ng-click="order('IPAM.Config[0].Subnet')">
+                    IPAM Subnet
+                    <span ng-show="sortType == 'IPAM.Config[0].Subnet' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'IPAM.Config[0].Subnet' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
+                <th>
+                  <a ui-sref="networks" ng-click="order('IPAM.Config[0].Gateway')">
+                    IPAM Gateway
+                    <span ng-show="sortType == 'IPAM.Config[0].Gateway' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'IPAM.Config[0].Gateway' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr dir-paginate="network in ( state.filteredNetworks = (networks | filter:state.filter | orderBy:sortType:sortReverse | itemsPerPage: pagination_count))">
+                <td><input type="checkbox" ng-model="network.Checked" ng-change="selectItem(network)"/></td>
+                <td><a ui-sref="network({id: network.Id})">{{ network.Name|truncate:40}}</a></td>
+                <td>{{ network.Id }}</td>
+                <td>{{ network.Scope }}</td>
+                <td>{{ network.Driver }}</td>
+                <td>{{ network.IPAM.Driver }}</td>
+                <td>{{ network.IPAM.Config[0].Subnet ? 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 ng-if="networks" class="pull-left pagination-controls">
+            <dir-pagination-controls></dir-pagination-controls>
+          </div>
+        </div>
+      </rd-widget-body>
+    <rd-widget>
+  </div>
+</div>

app/components/networks/networksController.js

@@ -0,0 +1,103 @@
+angular.module('networks', [])
+.controller('NetworksController', ['$scope', '$state', 'Network', 'Config', 'Messages', 'Settings',
+function ($scope, $state, Network, Config, Messages, Settings) {
+  $scope.state = {};
+  $scope.state.selectedItemCount = 0;
+  $scope.state.advancedSettings = false;
+  $scope.sortType = 'Name';
+  $scope.sortReverse = false;
+  $scope.pagination_count = Settings.pagination_count;
+  $scope.config = {
+    Name: ''
+  };
+
+  function prepareNetworkConfiguration() {
+    var config = angular.copy($scope.config);
+    if ($scope.swarm) {
+      config.Driver = 'overlay';
+      // Force IPAM Driver to 'default', should not be required.
+      // See: https://github.com/docker/docker/issues/25735
+      config.IPAM = {
+        Driver: 'default'
+      };
+    }
+    return config;
+  }
+
+  $scope.createNetwork = function() {
+    $('#createNetworkSpinner').show();
+    var config = prepareNetworkConfiguration();
+    Network.create(config, function (d) {
+      if (d.message) {
+        $('#createNetworkSpinner').hide();
+        Messages.error('Unable to create network', {}, d.message);
+      } else {
+        Messages.send("Network created", d.Id);
+        $('#createNetworkSpinner').hide();
+        $state.go('networks', {}, {reload: true});
+      }
+    }, function (e) {
+      $('#createNetworkSpinner').hide();
+      Messages.error("Failure", e, 'Unable to create network');
+    });
+  };
+
+  $scope.order = function(sortType) {
+    $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
+    $scope.sortType = sortType;
+  };
+
+  $scope.selectItem = function (item) {
+    if (item.Checked) {
+      $scope.state.selectedItemCount++;
+    } else {
+      $scope.state.selectedItemCount--;
+    }
+  };
+
+  $scope.removeAction = function () {
+    $('#loadNetworksSpinner').show();
+    var counter = 0;
+    var complete = function () {
+      counter = counter - 1;
+      if (counter === 0) {
+        $('#loadNetworksSpinner').hide();
+      }
+    };
+    angular.forEach($scope.networks, function (network) {
+      if (network.Checked) {
+        counter = counter + 1;
+        Network.remove({id: network.Id}, function (d) {
+          if (d.message) {
+            Messages.send("Error", d.message);
+          } else {
+            Messages.send("Network removed", network.Id);
+            var index = $scope.networks.indexOf(network);
+            $scope.networks.splice(index, 1);
+          }
+          complete();
+        }, function (e) {
+          Messages.error("Failure", e, 'Unable to remove network');
+          complete();
+        });
+      }
+    });
+  };
+
+  function fetchNetworks() {
+    $('#loadNetworksSpinner').show();
+    Network.query({}, function (d) {
+      $scope.networks = d;
+      $('#loadNetworksSpinner').hide();
+    }, function (e) {
+      $('#loadNetworksSpinner').hide();
+      Messages.error("Failure", e, "Unable to retrieve networks");
+      $scope.networks = [];
+    });
+  }
+
+  Config.$promise.then(function (c) {
+    $scope.swarm = c.swarm;
+    fetchNetworks();
+  });
+}]);

app/components/service/service.html

@@ -0,0 +1,239 @@
+<rd-header>
+  <rd-header-title title="Service details">
+    <a data-toggle="tooltip" title="Refresh" ui-sref="service({id: service.Id})" ui-sref-opts="{reload: true}">
+      <i class="fa fa-refresh" aria-hidden="true"></i>
+    </a>
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
+  </rd-header-title>
+  <rd-header-content>
+    <a ui-sref="services">Services</a> > <a ui-sref="service({id: service.Id})">{{ service.Name }}</a>
+  </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-list-alt" title="Service details"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table">
+          <tbody>
+            <tr>
+              <td>Name</td>
+              <td ng-if="!service.EditName">
+                {{ service.Name }}
+                <a href="" data-toggle="tooltip" title="Edit service name" ng-click="service.EditName = true;"><i class="fa fa-edit"></i></a>
+              </td>
+              <td ng-if="service.EditName">
+                <input type="text" class="containerNameInput" ng-model="service.newServiceName">
+                <a class="interactive" ng-click="service.EditName = false;"><i class="fa fa-times"></i></a>
+                <a class="interactive" ng-click="renameService(service)"><i class="fa fa-check-square-o"></i></a>
+              </td>
+            </tr>
+            <tr>
+              <td>ID</td>
+              <td>
+                {{ service.Id }}
+                <button class="btn btn-xs btn-danger" ng-click="removeService()"><i class="fa fa-trash space-right" aria-hidden="true"></i>Delete this service</button>
+              </td>
+            </tr>
+            <tr>
+              <td>Scheduling mode</td>
+              <td>{{ service.Mode }}</td>
+            </tr>
+            <tr ng-if="service.Mode === 'replicated'">
+              <td>Replicas</td>
+              <td>
+                <span ng-if="service.Mode === 'replicated' && !service.EditReplicas">
+                  {{ service.Replicas }}
+                  <a class="interactive" ng-click="service.EditReplicas = true;"><i class="fa fa-arrows-v" aria-hidden="true"></i> Scale</a>
+                </span>
+                <span ng-if="service.Mode === 'replicated' && service.EditReplicas">
+                  <input class="input-sm" type="number" ng-model="service.newServiceReplicas" />
+                  <a class="interactive" ng-click="service.EditReplicas = false;"><i class="fa fa-times"></i></a>
+                  <a class="interactive" ng-click="scaleService(service)"><i class="fa fa-check-square-o"></i></a>
+                </span>
+              </td>
+            </tr>
+            <tr>
+              <td>Image</td>
+              <td ng-if="!service.EditImage">
+                {{ service.Image }}
+                <a href="" data-toggle="tooltip" title="Edit service image" ng-click="service.EditImage = true;"><i class="fa fa-edit"></i></a>
+              </td>
+
+              <td ng-if="service.EditImage">
+                <input type="text" class="containerNameInput" ng-model="service.newServiceImage">
+                <a class="interactive" ng-click="service.EditImage = false;"><i class="fa fa-times"></i></a>
+                <a class="interactive" ng-click="changeServiceImage(service)"><i class="fa fa-check-square-o"></i></a>
+              </td>
+            </tr>
+            <tr ng-if="service.Ports">
+              <td>Published ports</td>
+              <td>
+                <div ng-repeat="mapping in service.Ports">
+                  {{ mapping.TargetPort }} <i class="fa fa-long-arrow-right"></i> {{ mapping.PublishedPort }}
+                </div>
+              </td>
+            </tr>
+            <tr ng-if="service.EnvironmentVariables">
+              <td>Environment variables</td>
+              <td>
+                <div class="form-group">
+                  <div class="col-sm-11 nopadding">
+                    <span class="label label-default interactive fit-text-size" ng-click="addEnvironmentVariable(service)">
+                      <i class="fa fa-plus-circle" aria-hidden="true"></i> environment variable
+                    </span>
+                  </div>
+                  <!-- environment-variable-input-list -->
+                  <div class="col-sm-11 form-inline nopadding" style="margin-top: 10px;">
+                    <div ng-repeat="var in service.EnvironmentVariables" style="margin-top: 2px;">
+                      <div class="input-group col-sm-5 input-group-sm">
+                        <span class="input-group-addon fit-text-size">name</span>
+                        <input type="text" class="form-control" ng-model="var.key" ng-disabled="var.added" placeholder="e.g. FOO">
+                      </div>
+                      <div class="input-group col-sm-5 input-group-sm">
+                        <span class="input-group-addon fit-text-size">value</span>
+                        <input type="text" class="form-control" ng-model="var.value" ng-change="updateEnvironmentVariable(service, var)" placeholder="e.g. bar">
+                        <span class="input-group-btn">
+                          <button class="btn btn-default" type="button" ng-click="removeEnvironmentVariable(service, $index)">
+                            <i class="fa fa-minus" aria-hidden="true"></i>
+                          </button>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                  <!-- !environment-variable-input-list -->
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td>Labels</td>
+              <td>
+                <div class="form-group">
+                  <div class="col-sm-11 nopadding">
+                    <span class="label label-default interactive fit-text-size" ng-click="addLabel(service)">
+                      <i class="fa fa-plus-circle" aria-hidden="true"></i> label
+                    </span>
+                  </div>
+                  <!-- labels-input-list -->
+                  <div class="col-sm-11 form-inline nopadding" style="margin-top: 10px;">
+                    <div ng-repeat="label in service.ServiceLabels" style="margin-top: 2px;">
+                      <div class="input-group col-sm-5 input-group-sm">
+                        <span class="input-group-addon fit-text-size">name</span>
+                        <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" ng-change="updateLabel(service, label)">
+                      </div>
+                      <div class="input-group col-sm-5 input-group-sm">
+                        <span class="input-group-addon fit-text-size">value</span>
+                        <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" ng-change="updateLabel(service, label)">
+                        <span class="input-group-btn">
+                          <button class="btn btn-default" type="button" ng-click="removeLabel(service, $index)">
+                            <i class="fa fa-minus" aria-hidden="true"></i>
+                          </button>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                  <!-- !labels-input-list -->
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td>Container labels</td>
+              <td>
+                <div class="form-group">
+                  <div class="col-sm-11 nopadding">
+                    <span class="label label-default interactive fit-text-size" ng-click="addContainerLabel(service)">
+                      <i class="fa fa-plus-circle" aria-hidden="true"></i> container label
+                    </span>
+                  </div>
+                  <!-- labels-input-list -->
+                  <div class="col-sm-11 form-inline nopadding" style="margin-top: 10px;">
+                    <div ng-repeat="label in service.ServiceContainerLabels" style="margin-top: 2px;">
+                      <div class="input-group col-sm-5 input-group-sm">
+                        <span class="input-group-addon fit-text-size">name</span>
+                        <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" ng-change="updateLabel(service, label)">
+                      </div>
+                      <div class="input-group col-sm-5 input-group-sm">
+                        <span class="input-group-addon fit-text-size">value</span>
+                        <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" ng-change="updateLabel(service, label)">
+                        <span class="input-group-btn">
+                          <button class="btn btn-default" type="button" ng-click="removeContainerLabel(service, $index)">
+                            <i class="fa fa-minus" aria-hidden="true"></i>
+                          </button>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                  <!-- !labels-input-list -->
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+      <rd-widget-footer ng-if="service.hasChanges">
+        <div>
+            <button type="button" class="btn btn-primary" ng-click="updateService(service)">Save changes</button>
+            <button type="button" class="btn btn-default" ng-click="cancelChanges(service)">Reset</button>
+        </div>
+      </rd-widget-footer>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row" ng-if="tasks.length > 0">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-tasks" title="Associated tasks"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table">
+          <thead>
+            <tr>
+              <th>Id</th>
+              <th>
+                <a ui-sref="service" ng-click="order('Status')">
+                  Status
+                  <span ng-show="sortType == 'Status' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Status' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="service" ng-click="order('Slot')">
+                  Slot
+                  <span ng-show="sortType == 'Slot' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Slot' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th ng-if="displayNode">
+                <a ui-sref="service" ng-click="order('Node')">
+                  Node
+                  <span ng-show="sortType == 'Node' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Node' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="service" ng-click="order('Updated')">
+                  Last update
+                  <span ng-show="sortType == 'Updated' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Updated' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr dir-paginate="task in (filteredTasks = ( tasks | orderBy:sortType:sortReverse | itemsPerPage: pagination_count))">
+              <td><a ui-sref="task({ id: task.Id })">{{ task.Id }}</a></td>
+              <td><span class="label label-{{ task.Status|taskstatusbadge }}">{{ task.Status }}</span></td>
+              <td>{{ task.Slot }}</td>
+              <td ng-if="displayNode">{{ task.Node }}</td>
+              <td>{{ task.Updated|getisodate }}</td>
+            </tr>
+          </tbody>
+        </table>
+        <div ng-if="tasks" class="pagination-controls">
+          <dir-pagination-controls></dir-pagination-controls>
+        </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/components/service/serviceController.js

@@ -0,0 +1,209 @@
+angular.module('service', [])
+.controller('ServiceController', ['$scope', '$stateParams', '$state', 'Service', 'ServiceHelper', 'Task', 'Node', 'Messages', 'Settings',
+function ($scope, $stateParams, $state, Service, ServiceHelper, Task, Node, Messages, Settings) {
+
+  $scope.service = {};
+  $scope.tasks = [];
+  $scope.displayNode = false;
+  $scope.sortType = 'Status';
+  $scope.sortReverse = false;
+  $scope.pagination_count = Settings.pagination_count;
+
+  var previousServiceValues = {};
+
+  $scope.order = function (sortType) {
+    $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
+    $scope.sortType = sortType;
+  };
+
+  $scope.renameService = function renameService(service) {
+    updateServiceAttribute(service, 'Name', service.newServiceName || service.name);
+    service.EditName = false;
+  };
+  $scope.changeServiceImage = function changeServiceImage(service) {
+    updateServiceAttribute(service, 'Image', service.newServiceImage || service.image);
+    service.EditImage = false;
+  };
+  $scope.scaleService = function scaleService(service) {
+    updateServiceAttribute(service, 'Replicas', service.newServiceReplicas || service.Replicas);
+    service.EditReplicas = false;
+  };
+
+  $scope.addEnvironmentVariable = function addEnvironmentVariable(service) {
+    service.EnvironmentVariables.push({ key: '', value: '', originalValue: '' });
+    service.hasChanges = true;
+  };
+  $scope.removeEnvironmentVariable = function removeEnvironmentVariable(service, index) {
+    var removedElement = service.EnvironmentVariables.splice(index, 1);
+    service.hasChanges = service.hasChanges || removedElement !== null;
+  };
+  $scope.updateEnvironmentVariable = function updateEnvironmentVariable(service, variable) {
+    service.hasChanges = service.hasChanges || variable.value !== variable.originalValue;
+  };
+  $scope.addLabel = function addLabel(service) {
+    service.hasChanges = true;
+    service.ServiceLabels.push({ key: '', value: '', originalValue: '' });
+  };
+  $scope.removeLabel = function removeLabel(service, index) {
+    var removedElement = service.ServiceLabels.splice(index, 1);
+    service.hasChanges = service.hasChanges || removedElement !== null;
+  };
+  $scope.updateLabel = function updateLabel(service, label) {
+    service.hasChanges = service.hasChanges || label.value !== label.originalValue;
+  };
+  $scope.addContainerLabel = function addContainerLabel(service) {
+    service.hasChanges = true;
+    service.ServiceContainerLabels.push({ key: '', value: '', originalValue: '' });
+  };
+  $scope.removeContainerLabel = function removeContainerLabel(service, index) {
+    var removedElement = service.ServiceContainerLabels.splice(index, 1);
+    service.hasChanges = service.hasChanges || removedElement !== null;
+  };
+
+  $scope.cancelChanges = function changeServiceImage(service) {
+    Object.keys(previousServiceValues).forEach(function(attribute) {
+      service[attribute] = previousServiceValues[attribute]; // reset service values
+      service['newService' + attribute] = previousServiceValues[attribute]; // reset edit fields
+    });
+    previousServiceValues = {}; // clear out all changes
+    // clear out environment variable changes
+    service.EnvironmentVariables = translateEnvironmentVariables(service.Env);
+    service.ServiceLabels = translateLabelsToServiceLabels(service.Labels);
+    service.ServiceContainerLabels = translateLabelsToServiceLabels(service.ContainerLabels);
+
+    service.hasChanges = false;
+  };
+
+  $scope.updateService = function updateService(service) {
+    $('#loadServicesSpinner').show();
+    var config = ServiceHelper.serviceToConfig(service.Model);
+    config.Name = service.newServiceName;
+    config.Labels = translateServiceLabelsToLabels(service.ServiceLabels);
+    config.TaskTemplate.ContainerSpec.Env = translateEnvironmentVariablesToEnv(service.EnvironmentVariables);
+    config.TaskTemplate.ContainerSpec.Labels = translateServiceLabelsToLabels(service.ServiceContainerLabels);
+    config.TaskTemplate.ContainerSpec.Image = service.newServiceImage;
+    if (service.Mode === 'replicated') {
+      config.Mode.Replicated.Replicas = service.Replicas;
+    }
+
+    Service.update({ id: service.Id, version: service.Version }, config, function (data) {
+      $('#loadServicesSpinner').hide();
+      Messages.send("Service successfully updated", "Service updated");
+      $state.go('service', {id: service.Id}, {reload: true});
+    }, function (e) {
+      $('#loadServicesSpinner').hide();
+      Messages.error("Failure", e, "Unable to update service");
+    });
+  };
+
+
+  $scope.removeService = function removeService() {
+    $('#loadingViewSpinner').show();
+    Service.remove({id: $stateParams.id}, function (d) {
+      if (d.message) {
+        $('#loadingViewSpinner').hide();
+        Messages.send("Error", {}, d.message);
+      } else {
+        $('#loadingViewSpinner').hide();
+        Messages.send("Service removed", $stateParams.id);
+        $state.go('services', {});
+      }
+    }, function (e) {
+      $('#loadingViewSpinner').hide();
+      Messages.error("Failure", e, "Unable to remove service");
+    });
+  };
+
+  function fetchServiceDetails() {
+    $('#loadingViewSpinner').show();
+    Service.get({id: $stateParams.id}, function (d) {
+      var service = new ServiceViewModel(d);
+      service.newServiceName = service.Name;
+      service.newServiceImage = service.Image;
+      service.newServiceReplicas = service.Replicas;
+      service.EnvironmentVariables = translateEnvironmentVariables(service.Env);
+      service.ServiceLabels = translateLabelsToServiceLabels(service.Labels);
+      service.ServiceContainerLabels = translateLabelsToServiceLabels(service.ContainerLabels);
+
+      $scope.service = service;
+      Task.query({filters: {service: [service.Name]}}, function (tasks) {
+        Node.query({}, function (nodes) {
+          $scope.displayNode = true;
+          $scope.tasks = tasks.map(function (task) {
+            return new TaskViewModel(task, nodes);
+          });
+          $('#loadingViewSpinner').hide();
+        }, function (e) {
+          $('#loadingViewSpinner').hide();
+          $scope.tasks = tasks.map(function (task) {
+            return new TaskViewModel(task, null);
+          });
+          Messages.error("Failure", e, "Unable to retrieve node information");
+        });
+      }, function (e) {
+        $('#loadingViewSpinner').hide();
+        Messages.error("Failure", e, "Unable to retrieve tasks associated to the service");
+      });
+    }, function (e) {
+      $('#loadingViewSpinner').hide();
+      Messages.error("Failure", e, "Unable to retrieve service details");
+    });
+  }
+
+  function updateServiceAttribute(service, name, newValue) {
+    // ensure we only capture the original previous value, in case we update the attribute multiple times
+    if (!previousServiceValues[name]) {
+      previousServiceValues[name] = service[name];
+    }
+    // update the attribute
+    service[name] = newValue;
+    service.hasChanges = true;
+  }
+
+  function translateEnvironmentVariables(env) {
+    if (env) {
+      var variables = [];
+      env.forEach(function(variable) {
+        var idx = variable.indexOf('=');
+        var keyValue = [variable.slice(0,idx), variable.slice(idx+1)];
+        var originalValue = (keyValue.length > 1) ? keyValue[1] : '';
+        variables.push({ key: keyValue[0], value: originalValue, originalValue: originalValue, added: true});
+      });
+      return variables;
+    }
+    return [];
+  }
+  function translateEnvironmentVariablesToEnv(env) {
+    if (env) {
+      var variables = [];
+      env.forEach(function(variable) {
+        if (variable.key && variable.key !== '' && variable.value && variable.value !== '') {
+          variables.push(variable.key + '=' + variable.value);
+        }
+      });
+      return variables;
+    }
+    return [];
+  }
+
+  function translateLabelsToServiceLabels(Labels) {
+    var labels = [];
+    if (Labels) {
+      Object.keys(Labels).forEach(function(key) {
+        labels.push({ key: key, value: Labels[key], originalValue: Labels[key], added: true});
+      });
+    }
+    return labels;
+  }
+  function translateServiceLabelsToLabels(labels) {
+    var Labels = {};
+    if (labels) {
+      labels.forEach(function(label) {
+        Labels[label.key] = label.value;
+      });
+    }
+    return Labels;
+  }
+
+  fetchServiceDetails();
+}]);

app/components/services/services.html

@@ -0,0 +1,87 @@
+<rd-header>
+  <rd-header-title title="Service list">
+    <a data-toggle="tooltip" title="Refresh" ui-sref="services" ui-sref-opts="{reload: true}">
+      <i class="fa fa-refresh" aria-hidden="true"></i>
+    </a>
+  </rd-header-title>
+  <rd-header-content>Services</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-list-alt" title="Services">
+        <div class="pull-right">
+          <i id="loadServicesSpinner" class="fa fa-cog fa-2x fa-spin" style="margin-top: 5px;"></i>
+        </div>
+      </rd-widget-header>
+      <rd-widget-taskbar classes="col-lg-12 col-md-12 col-xs-12">
+        <div class="pull-left">
+          <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button>
+          <a class="btn btn-default btn-responsive" type="button" ui-sref="actions.create.service">Add service</a>
+        </div>
+        <div class="pull-right">
+          <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
+        </div>
+      </rd-widget-taskbar>
+      <rd-widget-body classes="no-padding">
+        <div class="table-responsive">
+          <table class="table table-hover">
+            <thead>
+              <th></th>
+              <th>
+                <a ui-sref="services" ng-click="order('Name')">
+                  Name
+                  <span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="services" ng-click="order('Image')">
+                  Image
+                  <span ng-show="sortType == 'Image' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Image' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="services" ng-click="order('Mode')">
+                  Scheduling mode
+                  <span ng-show="sortType == 'Mode' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Mode' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+            </thead>
+            <tbody>
+              <tr dir-paginate="service in (state.filteredServices = ( services | filter:state.filter | orderBy:sortType:sortReverse | itemsPerPage: pagination_count))">
+                <td><input type="checkbox" ng-model="service.Checked" ng-change="selectItem(service)"/></td>
+                <td><a ui-sref="service({id: service.Id})">{{ service.Name }}</a></td>
+                <td>{{ service.Image }}</td>
+                <td>
+                  {{ service.Mode }}
+                  <span ng-if="service.Mode === 'replicated' && !service.Scale">
+                    <code data-toggle="tooltip" title="Replicas">{{ service.Replicas }}</code>
+                    <a class="interactive" ng-click="service.Scale = true; service.ReplicaCount = service.Replicas;"><i class="fa fa-arrows-v" aria-hidden="true"></i> Scale</a>
+                  </span>
+                  <span ng-if="service.Mode === 'replicated' && service.Scale">
+                    <input class="input-sm" type="number" ng-model="service.Replicas" />
+                    <a class="interactive" ng-click="service.Scale = false;"><i class="fa fa-times"></i></a>
+                    <a class="interactive" ng-click="scaleService(service)"><i class="fa fa-check-square-o"></i></a>
+                  </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 ng-if="services" class="pull-left pagination-controls">
+            <dir-pagination-controls></dir-pagination-controls>
+          </div>
+        </div>
+      </rd-widget-body>
+    <rd-widget>
+  </div>
+</div>

app/components/services/servicesController.js

@@ -0,0 +1,84 @@
+angular.module('services', [])
+.controller('ServicesController', ['$scope', '$stateParams', '$state', 'Service', 'ServiceHelper', 'Messages', 'Settings',
+function ($scope, $stateParams, $state, Service, ServiceHelper, Messages, Settings) {
+  $scope.state = {};
+  $scope.state.selectedItemCount = 0;
+  $scope.sortType = 'Name';
+  $scope.sortReverse = false;
+  $scope.pagination_count = Settings.pagination_count;
+
+  $scope.scaleService = function scaleService(service) {
+    $('#loadServicesSpinner').show();
+    var config = ServiceHelper.serviceToConfig(service.Model);
+    config.Mode.Replicated.Replicas = service.Replicas;
+    Service.update({ id: service.Id, version: service.Version }, config, function (data) {
+      $('#loadServicesSpinner').hide();
+      Messages.send("Service successfully scaled", "New replica count: " + service.Replicas);
+      $state.go('services', {}, {reload: true});
+    }, function (e) {
+      $('#loadServicesSpinner').hide();
+      service.Scale = false;
+      service.Replicas = service.ReplicaCount;
+      Messages.error("Failure", e, "Unable to scale service");
+    });
+  };
+
+  $scope.order = function (sortType) {
+    $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
+    $scope.sortType = sortType;
+  };
+
+  $scope.selectItem = function (item) {
+    if (item.Checked) {
+      $scope.state.selectedItemCount++;
+    } else {
+      $scope.state.selectedItemCount--;
+    }
+  };
+
+  $scope.removeAction = function () {
+    $('#loadServicesSpinner').show();
+    var counter = 0;
+    var complete = function () {
+      counter = counter - 1;
+      if (counter === 0) {
+        $('#loadServicesSpinner').hide();
+      }
+    };
+    angular.forEach($scope.services, function (service) {
+      if (service.Checked) {
+        counter = counter + 1;
+        Service.remove({id: service.Id}, function (d) {
+          if (d.message) {
+            $('#loadServicesSpinner').hide();
+            Messages.error("Unable to remove service", {}, d[0].message);
+          } else {
+            Messages.send("Service deleted", service.Id);
+            var index = $scope.services.indexOf(service);
+            $scope.services.splice(index, 1);
+          }
+          complete();
+        }, function (e) {
+          Messages.error("Failure", e, 'Unable to remove service');
+          complete();
+        });
+      }
+    });
+  };
+
+  function fetchServices() {
+    $('#loadServicesSpinner').show();
+    Service.query({}, function (d) {
+      $scope.services = d.map(function (service) {
+        return new ServiceViewModel(service);
+      });
+      $('#loadServicesSpinner').hide();
+    }, function(e) {
+      $('#loadServicesSpinner').hide();
+      Messages.error("Failure", e, "Unable to retrieve services");
+      $scope.services = [];
+    });
+  }
+
+  fetchServices();
+}]);

app/components/settings/settings.html

@@ -1,49 +0,0 @@
-<div class="detail">
-    <h2>Docker Information</h2>
-    <div>
-        <p class="lead">
-            <strong>Endpoint: </strong>{{ endpoint }}<br />
-            <strong>Api Version: </strong>{{ apiVersion }}<br />
-            <strong>Version: </strong>{{ docker.Version }}<br />
-            <strong>Git Commit: </strong>{{ docker.GitCommit }}<br />
-            <strong>Go Version: </strong>{{ docker.GoVersion }}<br />
-        </p>
-    </div>
-
-    <table class="table table-striped">
-         <tbody>
-            <tr>
-                <td>Containers:</td>
-                <td>{{ info.Containers }}</td>
-            </tr>
-            <tr>
-                <td>Images:</td>
-                <td>{{ info.Images }}</td>
-            </tr>
-            <tr>
-                <td>Debug:</td>
-                <td>{{ info.Debug }}</td>
-            </tr>
-            <tr>
-                <td>NFd:</td>
-                <td>{{ info.NFd }}</td>
-            </tr>
-            <tr>
-                <td>NGoroutines:</td>
-                <td>{{ info.NGoroutines }}</td>
-            </tr>
-            <tr>
-                <td>MemoryLimit:</td>
-                <td>{{ info.MemoryLimit }}</td>
-            </tr>
-            <tr>
-                <td>SwapLimit:</td>
-                <td>{{ info.SwapLimit }}</td>
-            </tr>
-            <tr>
-                <td>NFd:</td>
-                <td>{{ info.NFd }}</td>
-            </tr>
-        </tbody>
-    </table>
-</div>

app/components/settings/settingsController.js

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

app/components/sidebar/sidebar.html

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

app/components/sidebar/sidebarController.js

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

app/components/startContainer/startContainerController.js

@@ -1,53 +0,0 @@
-angular.module('startContainer', [])
-.controller('StartContainerController', ['$scope', '$routeParams', '$location', 'Container', 'Messages',
-function($scope, $routeParams, $location, Container, Messages) {
-    $scope.template = 'app/components/startContainer/startcontainer.html';
-    $scope.config = {
-        name: '',
-        memory: 0,
-        memorySwap: 0,
-        cpuShares: 1024,
-        env: '',
-        commands: '',
-        volumesFrom: ''
-    };
-    $scope.commandPlaceholder = '["/bin/echo", "Hello world"]';
-
-    function failedRequestHandler(e, Messages) {
-        Messages.send({class: 'text-error', data: e.data});
-    }
-
-    $scope.create = function() {
-        var cmds = null;
-        if ($scope.config.commands !== '') {
-            cmds = angular.fromJson($scope.config.commands);
-        }
-        var id = $routeParams.id;
-        var ctor = Container;
-        var loc = $location;
-        var s = $scope;
-
-        Container.create({
-                Image: id,
-                name: $scope.config.name,
-                Memory: $scope.config.memory,
-                MemorySwap: $scope.config.memorySwap,
-                CpuShares: $scope.config.cpuShares,
-                Cmd: cmds,
-                VolumesFrom: $scope.config.volumesFrom
-            }, function(d) {
-                if (d.Id) {
-                    ctor.start({id: d.Id}, function(cd) {
-                        $('#create-modal').modal('hide');
-                        loc.path('/containers/' + d.Id + '/');
-                    }, function(e) {
-                        failedRequestHandler(e, Messages);
-                    });
-                } else {
-                    failedRequestHandler(d, Messages);
-                }
-            }, function(e) {
-                failedRequestHandler(e, Messages);
-        });
-    };
-}]);

app/components/startContainer/startcontainer.html

@@ -1,44 +0,0 @@
-<div id="create-modal" class="modal fade">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                <h3>Create And Start Container From Image</h3>
-            </div>
-            <div class="modal-body">
-                <form role="form">
-                        <fieldset>
-                                <div class="form-group">
-                                    <label>Cmd:</label>
-                                    <input type="text" placeholder="{{ commandPlaceholder }}" ng-model="config.commands" class="form-control"/>
-                                    <small>Input commands as an array</small>
-                                </div>
-                                <div class="form-group">
-                                    <label>Name:</label>
-                                    <input type="text" ng-model="config.name" class="form-control"/>
-                                </div>
-                                <div class="form-group">
-                                    <label>Memory:</label>
-                                    <input type="number" ng-model="config.memory" class="form-control"/>
-                                </div>
-                                <div class="form-group">
-                                    <label>Memory Swap:</label>
-                                    <input type="number" ng-model="config.memorySwap" class="form-control"/>
-                                </div>
-                                <div class="form-group">
-                                    <label>CPU Shares:</label>
-                                    <input type="number" ng-model="config.cpuShares" class="form-control"/>
-                                </div>
-                                <div class="form-group">
-                                    <label>Volumes From:</label>
-                                    <input type="text" ng-model="config.volumesFrom" class="form-control"/>
-                                </div>
-                        </fieldset>
-                </form>
-            </div>
-            <div class="modal-footer">
-                <a href="" class="btn btn-primary" ng-click="create()">Create</a>
-            </div>
-        </div>
-    </div>
-</div>

app/components/stats/stats.html

@@ -0,0 +1,83 @@
+<rd-header>
+  <rd-header-title title="Container stats"></rd-header-title>
+  <rd-header-content>
+    <a ui-sref="containers">Containers</a> > <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>
+      <rd-widget-body>
+        <div class="widget-icon grey pull-left">
+          <i class="fa fa-server"></i>
+        </div>
+        <div class="title">{{ container.Name|trimcontainername }}</div>
+        <div class="comment">
+          Name
+        </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-6">
+    <rd-widget>
+      <rd-widget-header icon="fa-area-chart" title="CPU usage"></rd-widget-header>
+      <rd-widget-body>
+        <canvas id="cpu-stats-chart" width="770" height="230"></canvas>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+  <div class="col-lg-6">
+    <rd-widget>
+      <rd-widget-header icon="fa-area-chart" title="Memory usage"></rd-widget-header>
+      <rd-widget-body>
+        <canvas id="memory-stats-chart" width="770" height="230"></canvas>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-6">
+    <rd-widget>
+      <rd-widget-header icon="fa-area-chart" title="Network usage"></rd-widget-header>
+      <rd-widget-body>
+        <canvas id="network-stats-chart" width="770" height="230"></canvas>
+        <div class="comment">
+          <div id="network-legend" style="margin-bottom: 20px;"></div>
+        </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+  <div class="col-lg-6">
+    <rd-widget>
+      <rd-widget-header icon="fa-tasks" title="Processes"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table table-striped">
+          <thead>
+            <tr>
+              <th ng-repeat="title in containerTop.Titles">
+                <a ui-sref="stats({id: container.Id})" ng-click="order(title)">
+                  {{title}}
+                  <span ng-show="sortType == title && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == title && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr dir-paginate="processInfos in state.filteredProcesses = (containerTop.Processes | orderBy:sortType:sortReverse |  itemsPerPage: pagination_count)">
+              <td ng-repeat="processInfo in processInfos track by $index">{{processInfo}}</td>
+            </tr>
+          </tbody>
+        </table>
+        <div ng-if="containerTop.Processes" class="pagination-controls">
+          <dir-pagination-controls></dir-pagination-controls>
+        </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/components/stats/statsController.js

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

app/components/swarm/swarm.html

@@ -0,0 +1,204 @@
+<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-12 col-md-12 col-sm-12 col-xs-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>Nodes</td>
+              <td ng-if="!swarm_mode">{{ swarm.Nodes }}</td>
+              <td ng-if="swarm_mode">{{ info.Swarm.Nodes }}</td>
+            </tr>
+            <tr ng-if="!swarm_mode">
+              <td>Images</td>
+              <td>{{ info.Images }}</td>
+            </tr>
+            <tr ng-if="!swarm_mode">
+              <td>Swarm version</td>
+              <td>{{ docker.Version|swarmversion }}</td>
+            </tr>
+            <tr>
+              <td>Docker API version</td>
+              <td>{{ docker.ApiVersion }}</td>
+            </tr>
+            <tr ng-if="!swarm_mode">
+              <td>Strategy</td>
+              <td>{{ swarm.Strategy }}</td>
+            </tr>
+            <tr>
+              <td>Total CPU</td>
+              <td ng-if="!swarm_mode">{{ info.NCPU }}</td>
+              <td ng-if="swarm_mode">{{ totalCPU }}</td>
+            </tr>
+            <tr>
+              <td>Total memory</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>
+              <td>{{ info.OperatingSystem }}</td>
+            </tr>
+            <tr ng-if="!swarm_mode">
+              <td>Kernel version</td>
+              <td>{{ info.KernelVersion }}</td>
+            </tr>
+            <tr ng-if="!swarm_mode">
+              <td>Go version</td>
+              <td>{{ docker.GoVersion }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" ng-if="!swarm_mode">
+    <rd-widget>
+      <rd-widget-header icon="fa-hdd-o" title="Node status"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table table-striped">
+          <thead>
+            <tr>
+              <th>
+                <a ui-sref="swarm" ng-click="order('Name')">
+                  Name
+                  <span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="swarm" ng-click="order('cpu')">
+                  CPU
+                  <span ng-show="sortType == 'cpu' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'cpu' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="swarm" ng-click="order('memory')">
+                  Memory
+                  <span ng-show="sortType == 'memory' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'memory' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="swarm" ng-click="order('IP')">
+                  IP
+                  <span ng-show="sortType == 'IP' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'IP' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="swarm" ng-click="order('Engine')">
+                  Engine
+                  <span ng-show="sortType == 'Engine' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Engine' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="swarm" ng-click="order('Status')">
+                  Status
+                  <span ng-show="sortType == 'Status' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Status' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr dir-paginate="node in (state.filteredNodes = (swarm.Status | filter:state.filter | orderBy:sortType:sortReverse | itemsPerPage: pagination_count))">
+              <td>{{ node.name }}</td>
+              <td>{{ node.cpu }}</td>
+              <td>{{ node.memory }}</td>
+              <td>{{ node.ip }}</td>
+              <td>{{ node.version }}</td>
+              <td><span class="label label-{{ node.status|nodestatusbadge }}">{{ node.status }}</span></td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="pagination-controls">
+          <dir-pagination-controls></dir-pagination-controls>
+        </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" ng-if="swarm_mode">
+    <rd-widget>
+      <rd-widget-header icon="fa-hdd-o" title="Node status"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table table-striped">
+          <thead>
+            <tr>
+              <th>
+                <a ui-sref="swarm" ng-click="order('Name')">
+                  Name
+                  <span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="swarm" ng-click="order('type')">
+                  Role
+                  <span ng-show="sortType == 'type' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'type' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="swarm" ng-click="order('cpu')">
+                  CPU
+                  <span ng-show="sortType == 'cpu' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'cpu' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="swarm" ng-click="order('memory')">
+                  Memory
+                  <span ng-show="sortType == 'memory' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'memory' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="swarm" ng-click="order('Engine')">
+                  Engine
+                  <span ng-show="sortType == 'Engine' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Engine' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="swarm" ng-click="order('Status')">
+                  Status
+                  <span ng-show="sortType == 'Status' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Status' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr dir-paginate="node in (state.filteredNodes = (nodes | filter:state.filter | orderBy:sortType:sortReverse | itemsPerPage: pagination_count))">
+              <td>{{ node.Description.Hostname }}</td>
+              <td>{{ node.Spec.Role }}</td>
+              <td>{{ node.Description.Resources.NanoCPUs / 1000000000 }}</td>
+              <td>{{ node.Description.Resources.MemoryBytes|humansize }}</td>
+              <td>{{ node.Description.Engine.EngineVersion }}</td>
+              <td><span class="label label-{{ node.Status.State|nodestatusbadge }}">{{ node.Status.State }}</span></td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="pagination-controls">
+          <dir-pagination-controls></dir-pagination-controls>
+        </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/components/swarm/swarmController.js

@@ -0,0 +1,83 @@
+angular.module('swarm', [])
+.controller('SwarmController', ['$scope', 'Info', 'Version', 'Node', 'Settings',
+function ($scope, Info, Version, Node, Settings) {
+
+  $scope.sortType = 'Name';
+  $scope.sortReverse = true;
+  $scope.info = {};
+  $scope.docker = {};
+  $scope.swarm = {};
+  $scope.swarm_mode = false;
+  $scope.totalCPU = 0;
+  $scope.totalMemory = 0;
+  $scope.pagination_count = Settings.pagination_count;
+
+  $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;
+    if (!_.startsWith(d.ServerVersion, 'swarm')) {
+      $scope.swarm_mode = true;
+      Node.query({}, function(d) {
+        $scope.nodes = d;
+        var CPU = 0, memory = 0;
+        angular.forEach(d, function(node) {
+          CPU += node.Description.Resources.NanoCPUs;
+          memory += node.Description.Resources.MemoryBytes;
+        });
+        $scope.totalCPU = CPU / 1000000000;
+        $scope.totalMemory = memory;
+      });
+    } else {
+      extractSwarmInfo(d);
+    }
+  });
+
+  function extractSwarmInfo(info) {
+    // Swarm info is available in SystemStatus object
+    var systemStatus = info.SystemStatus;
+    // Swarm strategy
+    $scope.swarm[systemStatus[1][0]] = systemStatus[1][1];
+    // Swarm filters
+    $scope.swarm[systemStatus[2][0]] = systemStatus[2][1];
+    // Swarm node count
+    var 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 = [];
+    extractNodesInfo(systemStatus, node_count);
+  }
+
+  function extractNodesInfo(info, node_count) {
+    // 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 = info[0][1] === 'primary' ? 4 : 5;
+    for (i = 0; i < node_count; i++) {
+      extractNodeInfo(info, node_offset);
+      node_offset += 9;
+    }
+  }
+
+  function extractNodeInfo(info, offset) {
+    var node = {};
+    node.name = info[offset][0];
+    node.ip = info[offset][1];
+    node.id = info[offset + 1][1];
+    node.status = info[offset + 2][1];
+    node.containers = info[offset + 3][1];
+    node.cpu = info[offset + 4][1].split('/')[1];
+    node.memory = info[offset + 5][1].split('/')[1];
+    node.labels = info[offset + 6][1];
+    node.version = info[offset + 8][1];
+    $scope.swarm.Status.push(node);
+  }
+}]);

app/components/task/task.html

@@ -0,0 +1,50 @@
+<rd-header>
+  <rd-header-title title="Task details">
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
+  </rd-header-title>
+  <rd-header-content>
+    <a ui-sref="services">Services</a> > <a ui-sref="service({id: task.ServiceID})">{{ serviceName }}</a> > {{ task.ID }}
+  </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-tasks" title="Task status"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table">
+          <tbody>
+            <tr>
+              <td>ID</td>
+              <td>{{ task.ID }}</td>
+            </tr>
+            <tr>
+              <td>State</td>
+              <td><span class="label label-{{ task.Status.State|taskstatusbadge }}">{{ task.Status.State }}</span></td>
+            </tr>
+            <tr ng-if="task.Status.Err">
+              <td>Error message</td>
+              <td><code>{{ task.Status.Err }}</code></td>
+            </tr>
+            <tr>
+              <td>Image</td>
+              <td>{{ task.Spec.ContainerSpec.Image }}</td>
+            </tr>
+            <tr>
+              <td>Slot</td>
+              <td>{{ task.Slot }}</td>
+            </tr>
+            <tr>
+              <td>Created</td>
+              <td>{{ task.CreatedAt|getisodate }}</td>
+            </tr>
+            <tr ng-if="task.Status.ContainerStatus.ContainerID">
+              <td>Container ID</td>
+              <td>{{ task.Status.ContainerStatus.ContainerID }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/components/task/taskController.js

@@ -0,0 +1,29 @@
+angular.module('task', [])
+.controller('TaskController', ['$scope', '$stateParams', '$state', 'Task', 'Service', 'Messages',
+function ($scope, $stateParams, $state, Task, Service, Messages) {
+
+  $scope.task = {};
+  $scope.serviceName = 'service';
+  $scope.isTaskRunning = false;
+
+  function fetchTaskDetails() {
+    $('#loadingViewSpinner').show();
+    Task.get({id: $stateParams.id}, function (d) {
+      $scope.task = d;
+      fetchAssociatedServiceDetails(d.ServiceID);
+      $('#loadingViewSpinner').hide();
+    }, function (e) {
+      Messages.error("Failure", e, "Unable to retrieve task details");
+    });
+  }
+
+  function fetchAssociatedServiceDetails(serviceId) {
+    Service.get({id: serviceId}, function (d) {
+      $scope.serviceName = d.Spec.Name;
+    }, function (e) {
+      Messages.error("Failure", e, "Unable to retrieve associated service details");
+    });
+  }
+
+  fetchTaskDetails();
+}]);

app/components/templates/templates.html

@@ -0,0 +1,142 @@
+<rd-header>
+  <rd-header-title title="Application templates list">
+    <a data-toggle="tooltip" title="Refresh" ui-sref="templates" ui-sref-opts="{reload: true}">
+      <i class="fa fa-refresh" aria-hidden="true"></i>
+    </a>
+  </rd-header-title>
+  <rd-header-content>Templates</rd-header-content>
+</rd-header>
+
+<div class="row" ng-if="state.selectedTemplate">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-custom-header icon="state.selectedTemplate.logo" title="state.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">
+            <div class="col-sm-12">
+              <span class="small text-muted">When using Swarm, we recommend deploying containers in a shared network. Looks like you don't have any shared network, head over the <a ui-sref="networks">networks view</a> to create one.</span>
+            </div>
+          </div>
+          <div class="form-group" ng-if="swarm_mode">
+            <div class="col-sm-12">
+              <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+              <span class="small text-muted">App templates cannot be used with swarm-mode at the moment. You can still use them to quickly deploy containers to the Docker host.</span>
+            </div>
+          </div>
+          <!-- name-and-network-inputs -->
+          <div class="form-group">
+            <label for="image_registry" class="col-sm-2 control-label text-left">Name</label>
+            <div class="col-sm-4">
+              <input type="text" class="form-control" ng-model="formValues.name" placeholder="e.g. web (optional)">
+            </div>
+            <label for="container_network" class="col-sm-2 control-label text-right">Network</label>
+            <div class="col-sm-4">
+              <select class="selectpicker form-control" ng-options="net.Name for net in availableNetworks" ng-model="formValues.network">
+                <option disabled hidden value="">Select a network</option>
+              </select>
+            </div>
+          </div>
+          <!-- !name-and-network-inputs -->
+          <div ng-repeat="var in state.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 || 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 && !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">
+              <a class="small interactive" ng-if="!state.showAdvancedOptions" ng-click="state.showAdvancedOptions = true;">
+                <i class="fa fa-plus space-right" aria-hidden="true"></i> Show advanced options
+              </a>
+              <a class="small interactive" ng-if="state.showAdvancedOptions" ng-click="state.showAdvancedOptions = false;">
+                <i class="fa fa-minus space-right" aria-hidden="true"></i> Hide advanced options
+              </a>
+            </div>
+          </div>
+          <div class="form-group" ng-if="state.showAdvancedOptions">
+            <label for="container_ports" class="col-sm-1 control-label text-left">Port mapping</label>
+            <div class="col-sm-11" style="margin-top: 5px;">
+              <span class="label label-default interactive" ng-click="addPortBinding()">
+                <i class="fa fa-plus-circle" aria-hidden="true"></i> map additional port
+              </span>
+            </div>
+            <!-- port-mapping-input-list -->
+            <div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;">
+              <div ng-repeat="portBinding in formValues.ports" 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 (optional)">
+                </div>
+                <div class="input-group col-sm-5 input-group-sm">
+                  <span class="input-group-addon">container</span>
+                  <input type="text" class="form-control" ng-model="portBinding.containerPort" placeholder="e.g. 80">
+                </div>
+                <div class="input-group col-sm-1 input-group-sm">
+                  <select class="selectpicker form-control" ng-model="portBinding.protocol">
+                    <option value="tcp">tcp</option>
+                    <option value="udp">udp</option>
+                  </select>
+                  <span class="input-group-btn">
+                    <button class="btn btn-default" type="button" ng-click="removePortBinding($index)">
+                      <i class="fa fa-minus" aria-hidden="true"></i>
+                    </button>
+                  </span>
+                </div>
+              </div>
+            </div>
+            <!-- !port-mapping-input-list -->
+          </div>
+          <!-- !port-mapping -->
+          <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>
+  </div>
+</div>
+
+<div class="row" ng-if="state.selectedTemplate">
+
+</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 dir-paginate="tpl in templates | itemsPerPage: pagination_count" class="container-template hvr-underline-from-center" id="template_{{ tpl.index }}" ng-click="selectTemplate(tpl.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>
+        <div ng-if="templates">
+          <dir-pagination-controls></dir-pagination-controls>
+        </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/components/templates/templatesController.js

@@ -0,0 +1,237 @@
+angular.module('templates', [])
+.controller('TemplatesController', ['$scope', '$q', '$state', '$filter', 'Config', 'Info', 'Container', 'ContainerHelper', 'Image', 'Volume', 'Network', 'Templates', 'TemplateHelper', 'Messages', 'Settings',
+function ($scope, $q, $state, $filter, Config, Info, Container, ContainerHelper, Image, Volume, Network, Templates, TemplateHelper, Messages, Settings) {
+  $scope.state = {
+    selectedTemplate: null,
+    showAdvancedOptions: false
+  };
+  $scope.formValues = {
+    network: "",
+    name: "",
+    ports: []
+  };
+  $scope.pagination_count = Settings.pagination_count;
+
+  var selectedItem = -1;
+
+  $scope.addPortBinding = function() {
+    $scope.formValues.ports.push({ hostPort: '', containerPort: '', protocol: 'tcp' });
+  };
+
+  $scope.removePortBinding = function(index) {
+    $scope.formValues.ports.splice(index, 1);
+  };
+
+  // TODO: centralize, already present in createContainerController
+  function createContainer(config) {
+    Container.create(config, function (d) {
+      if (d.message) {
+        $('#createContainerSpinner').hide();
+        Messages.error('Error', {}, d.message);
+      } else {
+        Container.start({id: d.Id}, {}, function (cd) {
+          if (cd.message) {
+            $('#createContainerSpinner').hide();
+            Messages.error('Error', {}, cd.message);
+          } else {
+            $('#createContainerSpinner').hide();
+            Messages.send('Container Started', d.Id);
+            $state.go('containers', {}, {reload: true});
+          }
+        }, function (e) {
+          $('#createContainerSpinner').hide();
+          Messages.error("Failure", e, 'Unable to start container');
+        });
+      }
+    }, function (e) {
+      $('#createContainerSpinner').hide();
+      Messages.error("Failure", e, 'Unable to create container');
+    });
+  }
+
+
+  // TODO: centralize, already present in createContainerController
+  function pullImageAndCreateContainer(imageConfig, containerConfig) {
+    Image.create(imageConfig, function (data) {
+      var err = data.length > 0 && data[data.length - 1].hasOwnProperty('error');
+      if (err) {
+        var detail = data[data.length - 1];
+        $('#createContainerSpinner').hide();
+        Messages.error("Error", {}, detail.error);
+      } else {
+        createContainer(containerConfig);
+      }
+    }, function (e) {
+      $('#createContainerSpinner').hide();
+      Messages.error("Failure", e, "Unable to pull image");
+    });
+  }
+
+  function getInitialConfiguration() {
+    return {
+      Env: [],
+      OpenStdin: false,
+      Tty: false,
+      ExposedPorts: {},
+      HostConfig: {
+        RestartPolicy: {
+          Name: 'no'
+        },
+        PortBindings: {},
+        Binds: [],
+        NetworkMode: $scope.formValues.network.Name,
+        Privileged: false
+      },
+      Volumes: {},
+      name: $scope.formValues.name
+    };
+  }
+
+  function preparePortBindings(config, ports) {
+    var bindings = {};
+    ports.forEach(function (portBinding) {
+      if (portBinding.containerPort) {
+        var key = portBinding.containerPort + "/" + portBinding.protocol;
+        var binding = {};
+        if (portBinding.hostPort && portBinding.hostPort.indexOf(':') > -1) {
+          var hostAndPort = portBinding.hostPort.split(':');
+          binding.HostIp = hostAndPort[0];
+          binding.HostPort = hostAndPort[1];
+        } else {
+          binding.HostPort = portBinding.hostPort;
+        }
+        bindings[key] = [binding];
+        config.ExposedPorts[key] = {};
+      }
+    });
+    config.HostConfig.PortBindings = bindings;
+  }
+
+  function createConfigFromTemplate(template) {
+    var containerConfig = getInitialConfiguration();
+    containerConfig.Image = template.image;
+    if (template.env) {
+      template.env.forEach(function (v) {
+        if (v.value || v.set) {
+          var val;
+          if (v.type && v.type === 'container') {
+            if ($scope.swarm && $scope.formValues.network.Scope === 'global') {
+              val = $filter('swarmcontainername')(v.value);
+            } else {
+              var container = v.value;
+              val = container.NetworkSettings.Networks[Object.keys(container.NetworkSettings.Networks)[0]].IPAddress;
+            }
+          } else {
+            val = v.set ? v.set : v.value;
+          }
+          containerConfig.Env.push(v.name + "=" + val);
+        }
+      });
+    }
+    preparePortBindings(containerConfig, $scope.formValues.ports);
+    return containerConfig;
+  }
+
+  function prepareVolumeQueries(template, containerConfig) {
+    var volumeQueries = [];
+    if (template.volumes) {
+      template.volumes.forEach(function (vol) {
+        volumeQueries.push(
+          Volume.create({}, function (d) {
+            if (d.message) {
+              Messages.error("Unable to create volume", {}, d.message);
+            } else {
+              Messages.send("Volume created", d.Name);
+              containerConfig.Volumes[vol] = {};
+              containerConfig.HostConfig.Binds.push(d.Name + ':' + vol);
+            }
+          }, function (e) {
+            Messages.error("Failure", e, "Unable to create volume");
+          }).$promise
+        );
+      });
+    }
+    return volumeQueries;
+  }
+
+  $scope.createTemplate = function() {
+    $('#createContainerSpinner').show();
+    var template = $scope.state.selectedTemplate;
+    var containerConfig = createConfigFromTemplate(template);
+    var imageConfig = {
+      fromImage: template.image.split(':')[0],
+      tag: template.image.split(':')[1] ? template.image.split(':')[1] : 'latest'
+    };
+    var createVolumeQueries = prepareVolumeQueries(template, containerConfig);
+    $q.all(createVolumeQueries).then(function (d) {
+      pullImageAndCreateContainer(imageConfig, containerConfig);
+    });
+  };
+
+  $scope.selectTemplate = function(id) {
+    $('#template_' + id).toggleClass("container-template--selected");
+    if (selectedItem === id) {
+      selectedItem = -1;
+      $scope.state.selectedTemplate = null;
+    } else {
+      $('#template_' + selectedItem).toggleClass("container-template--selected");
+      selectedItem = id;
+      var selectedTemplate = $scope.templates[id];
+      $scope.state.selectedTemplate = selectedTemplate;
+      $scope.formValues.ports = selectedTemplate.ports ? TemplateHelper.getPortBindings(selectedTemplate.ports) : [];
+    }
+  };
+
+  function initTemplates() {
+    Templates.get(function (data) {
+      $scope.templates = data.map(function(tpl,index){
+        tpl.index = index;
+        return tpl;
+      });
+      $('#loadTemplatesSpinner').hide();
+    }, function (e) {
+      $('#loadTemplatesSpinner').hide();
+      Messages.error("Failure", e, "Unable to retrieve apps list");
+      $scope.templates = [];
+    });
+  }
+
+  Config.$promise.then(function (c) {
+    $scope.swarm = c.swarm;
+    Info.get({}, function(info) {
+      if ($scope.swarm && !_.startsWith(info.ServerVersion, 'swarm')) {
+        $scope.swarm_mode = true;
+      }
+    });
+    var containersToHideLabels = c.hiddenLabels;
+    Network.query({}, function (d) {
+      var networks = d;
+      if ($scope.swarm) {
+        networks = d.filter(function (network) {
+          if (network.Scope === 'global') {
+            return network;
+          }
+        });
+        $scope.globalNetworkCount = networks.length;
+        networks.push({Scope: "local", Name: "bridge"});
+        networks.push({Scope: "local", Name: "host"});
+        networks.push({Scope: "local", Name: "none"});
+      } else {
+        $scope.formValues.network = _.find(networks, function(o) { return o.Name === "bridge"; });
+      }
+      $scope.availableNetworks = networks;
+    }, function (e) {
+      Messages.error("Failure", e, "Unable to retrieve networks");
+    });
+    Container.query({all: 0}, function (d) {
+      var containers = d;
+      if (containersToHideLabels) {
+        containers = ContainerHelper.hideContainers(d, containersToHideLabels);
+      }
+      $scope.runningContainers = containers;
+    }, function (e) {
+      Messages.error("Failure", e, "Unable to retrieve running containers");
+    });
+    initTemplates();
+  });
+}]);

app/components/volumes/volumes.html

@@ -0,0 +1,76 @@
+<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">
+      <div class="pull-right">
+        <i id="loadVolumesSpinner" class="fa fa-cog fa-2x fa-spin" style="margin-top: 5px;"></i>
+      </div>
+    </rd-widget-header>
+    <rd-widget-taskbar classes="col-lg-12">
+      <div class="pull-left">
+        <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button>
+        <a class="btn btn-default" type="button" ui-sref="actions.create.volume">Add volume</a>
+      </div>
+      <div class="pull-right">
+        <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
+      </div>
+    </rd-widget-taskbar>
+    <rd-widget-body classes="no-padding">
+      <div class="table-responsive">
+        <table class="table table-hover">
+          <thead>
+            <tr>
+              <th></th>
+              <th>
+                <a ui-sref="volumes" ng-click="order('Name')">
+                  Name
+                  <span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="volumes" ng-click="order('Driver')">
+                  Driver
+                  <span ng-show="sortType == 'Driver' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Driver' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="volumes" ng-click="order('Mountpoint')">
+                  Mountpoint
+                  <span ng-show="sortType == 'Mountpoint' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Mountpoint' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr dir-paginate="volume in (state.filteredVolumes = (volumes | filter:state.filter | orderBy:sortType:sortReverse | itemsPerPage: pagination_count))">
+              <td><input type="checkbox" ng-model="volume.Checked" ng-change="selectItem(volume)"/></td>
+              <td>{{ volume.Name|truncate:50 }}</td>
+              <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 ng-if="volumes" class="pull-left pagination-controls">
+          <dir-pagination-controls></dir-pagination-controls>
+        </div>
+      </div>
+    </rd-widget-body>
+    <rd-widget>
+    </div>

app/components/volumes/volumesController.js

@@ -0,0 +1,67 @@
+angular.module('volumes', [])
+.controller('VolumesController', ['$scope', '$state', 'Volume', 'Messages', 'Settings',
+function ($scope, $state, Volume, Messages, Settings) {
+  $scope.state = {};
+  $scope.state.selectedItemCount = 0;
+  $scope.sortType = 'Name';
+  $scope.sortReverse = true;
+  $scope.config = {
+    Name: ''
+  };
+  $scope.pagination_count = Settings.pagination_count;
+
+  $scope.order = function(sortType) {
+    $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
+    $scope.sortType = sortType;
+  };
+
+  $scope.selectItem = function (item) {
+    if (item.Checked) {
+      $scope.state.selectedItemCount++;
+    } else {
+      $scope.state.selectedItemCount--;
+    }
+  };
+
+  $scope.removeAction = function () {
+    $('#loadVolumesSpinner').show();
+    var counter = 0;
+    var complete = function () {
+      counter = counter - 1;
+      if (counter === 0) {
+        $('#loadVolumesSpinner').hide();
+      }
+    };
+    angular.forEach($scope.volumes, function (volume) {
+      if (volume.Checked) {
+        counter = counter + 1;
+        Volume.remove({name: volume.Name}, function (d) {
+          if (d.message) {
+            Messages.error("Unable to remove volume", {}, d.message);
+          } else {
+            Messages.send("Volume deleted", volume.Name);
+            var index = $scope.volumes.indexOf(volume);
+            $scope.volumes.splice(index, 1);
+          }
+          complete();
+        }, function (e) {
+          Messages.error("Failure", e, "Unable to remove volume");
+          complete();
+        });
+      }
+    });
+  };
+
+  function fetchVolumes() {
+    $('#loadVolumesSpinner').show();
+    Volume.query({}, function (d) {
+      $scope.volumes = d.Volumes || [];
+      $('#loadVolumesSpinner').hide();
+    }, function (e) {
+      $('#loadVolumesSpinner').hide();
+      Messages.error("Failure", e, "Unable to retrieve volumes");
+      $scope.volumes = [];
+    });
+  }
+  fetchVolumes();
+}]);

app/directives/header-content.js

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

app/directives/loading.js

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

app/directives/widget-body.js

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

app/directives/widget-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/directives/widget-footer.js

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

app/directives/widget-header.js

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

app/directives/widget-taskbar.js

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

app/directives/widget.js

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

app/shared/filters.js

@@ -1,91 +1,225 @@
-'use strict';
+angular.module('portainer.filters', [])
+.filter('truncate', function () {
+  'use strict';
+  return function (text, length, end) {
+    if (isNaN(length)) {
+      length = 10;
+    }
 
-angular.module('dockerui.filters', [])
-    .filter('truncate', function() {
-        return function(text, length, end) {
-            if (isNaN(length))
-                length = 10;
+    if (end === undefined) {
+      end = '...';
+    }
 
-            if (end === undefined)
-                end = "...";
-
-            if (text.length <= length || text.length - end.length <= length) {
-                return text;
-            }
-            else {
-                return String(text).substring(0, length-end.length) + end;
-            }
-        };
-    })
-    .filter('statusbadge', function() {
-        return function(text) {
-            if (text === 'Ghost') {
-                return 'important';
-            } else if (text.indexOf('Exit') != -1 && text !== 'Exit 0') {
-                return 'warning';
-            }
-            return 'success';
-        };
-    })
-    .filter('getstatetext', function() {
-        return function(state) {
-            if (state == undefined) return '';
-
-            if (state.Ghost && state.Running) {
-                return 'Ghost';
-            }
-            if (state.Running && state.Paused) {
-                return 'Running (Paused)';
-            }
-            if (state.Running) {
-                return 'Running';
-            }
-            return 'Stopped';
-        };
-    })
-    .filter('getstatelabel', function() {
-        return function(state) {
-            if (state == undefined) return '';
-
-            if (state.Ghost && state.Running) {
-                return 'label-important';
-            }
-            if (state.Running) {
-                return 'label-success';
-            }
-            return '';
-        };
-    })
-    .filter('humansize', function() {
-        return function(bytes) {
-            var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
-            if (bytes == 0) {
-                return 'n/a';
-            }
-            var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
-            return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[[i]]; 
-        };
-    })
-    .filter('containername', function() {
-        return function(container) {
-            var name = container.Names[0];
-            return name.substring(1, name.length);
-        };
-    })
-    .filter('repotag', function() {
-        return function(image) {
-            if (image.RepoTags && image.RepoTags.length > 0) {
-                var tag = image.RepoTags[0];
-                if (tag == '<none>:<none>') { tag = ''; }
-                return tag;
-            }
-            return '';      
-        };
-    })
-    .filter('getdate', function() {
-        return function(data) {
-            //Multiply by 1000 for the unix format
-            var date = new Date(data * 1000);
-            return date.toDateString();
-        };
-    });
+    if (text.length <= length || text.length - end.length <= length) {
+      return text;
+    }
+    else {
+      return String(text).substring(0, length - end.length) + end;
+    }
+  };
+})
+.filter('taskstatusbadge', function () {
+  'use strict';
+  return function (text) {
+    var status = _.toLower(text);
+    if (status.indexOf('new') !== -1 || status.indexOf('allocated') !== -1 ||
+      status.indexOf('assigned') !== -1 || status.indexOf('accepted') !== -1) {
+      return 'info';
+    } else if (status.indexOf('pending') !== -1) {
+      return 'warning';
+    } else if (status.indexOf('shutdown') !== -1 || status.indexOf('failed') !== -1 ||
+      status.indexOf('rejected') !== -1) {
+      return 'danger';
+    } else if (status.indexOf('complete') !== -1) {
+      return 'primary';
+    }
+    return 'success';
+  };
+})
+.filter('containerstatusbadge', function () {
+  'use strict';
+  return function (text) {
+    var status = _.toLower(text);
+    if (status.indexOf('paused') !== -1) {
+      return 'warning';
+    } else if (status.indexOf('created') !== -1) {
+      return 'info';
+    } else if (status.indexOf('exited') !== -1) {
+      return 'danger';
+    }
+    return 'success';
+  };
+})
+.filter('containerstatus', function () {
+  'use strict';
+  return function (text) {
+    var status = _.toLower(text);
+    if (status.indexOf('paused') !== -1) {
+      return 'paused';
+    } else if (status.indexOf('created') !== -1) {
+      return 'created';
+    } else if (status.indexOf('exited') !== -1) {
+      return 'stopped';
+    }
+    return 'running';
+  };
+})
+.filter('nodestatusbadge', function () {
+  'use strict';
+  return function (text) {
+    if (text === 'Unhealthy') {
+      return 'danger';
+    }
+    return 'success';
+  };
+})
+.filter('trimcontainername', function () {
+  'use strict';
+  return function (name) {
+    if (name) {
+      return (name.indexOf('/') === 0 ? name.replace('/','') : name);
+    }
+    return '';
+  };
+})
+.filter('capitalize', function () {
+  'use strict';
+  return function (text) {
+    return _.capitalize(text);
+  };
+})
+.filter('getstatetext', function () {
+  'use strict';
+  return function (state) {
+    if (state === undefined) {
+      return '';
+    }
+    if (state.Ghost && state.Running) {
+      return 'Ghost';
+    }
+    if (state.Running && state.Paused) {
+      return 'Running (Paused)';
+    }
+    if (state.Running) {
+      return 'Running';
+    }
+    return 'Stopped';
+  };
+})
+.filter('getstatelabel', function () {
+  'use strict';
+  return function (state) {
+    if (state === undefined) {
+      return 'label-default';
+    }
+    if (state.Ghost && state.Running) {
+      return 'label-important';
+    }
+    if (state.Running) {
+      return 'label-success';
+    }
+    return 'label-default';
+  };
+})
+.filter('humansize', function () {
+  'use strict';
+  return function (bytes, round) {
+    if (!round) {
+      round = 1;
+    }
+    if (bytes || bytes === 0) {
+      return filesize(bytes, {base: 10, round: round});
+    }
+  };
+})
+.filter('containername', function () {
+  'use strict';
+  return function (container) {
+    var name = container.Names[0];
+    return name.substring(1, name.length);
+  };
+})
+.filter('swarmcontainername', function () {
+  'use strict';
+  return function (container) {
+    return _.split(container.Names[0], '/')[2];
+  };
+})
+.filter('swarmversion', function () {
+  'use strict';
+  return function (text) {
+    return _.split(text, '/')[1];
+  };
+})
+.filter('swarmhostname', function () {
+  'use strict';
+  return function (container) {
+    return _.split(container.Names[0], '/')[1];
+  };
+})
+.filter('repotags', function () {
+  'use strict';
+  return function (image) {
+    if (image.RepoTags && image.RepoTags.length > 0) {
+      var tag = image.RepoTags[0];
+      if (tag === '<none>:<none>') {
+        return [];
+      }
+      return image.RepoTags;
+    }
+    return [];
+  };
+})
+.filter('getisodatefromtimestamp', function () {
+  'use strict';
+  return function (timestamp) {
+    return moment.unix(timestamp).format('YYYY-MM-DD HH:mm:ss');
+  };
+})
+.filter('getisodate', function () {
+  'use strict';
+  return function (date) {
+    return moment(date).format('YYYY-MM-DD HH:mm:ss');
+  };
+})
+.filter('command', function () {
+  'use strict';
+  return function (command) {
+    if (command) {
+      return command.join(' ');
+    }
+  };
+})
+.filter('key', function () {
+  'use strict';
+  return function (pair, separator) {
+    return pair.slice(0, pair.indexOf(separator));
+  };
+})
+.filter('value', function () {
+  'use strict';
+  return function (pair, separator) {
+    return pair.slice(pair.indexOf(separator) + 1);
+  };
+})
+.filter('emptyobject', function () {
+  'use strict';
+  return function (obj) {
+    return _.isEmpty(obj);
+  };
+})
+.filter('ipaddress', function () {
+  'use strict';
+  return function (ip) {
+    return ip.slice(0, ip.indexOf('/'));
+  };
+})
+.filter('arraytostr', function () {
+  'use strict';
+  return function (arr, separator) {
+    if (arr) {
+      return _.join(arr, separator);
+    }
+    return '';
+  };
+});

app/shared/helpers.js

@@ -0,0 +1,92 @@
+angular.module('portainer.helpers', [])
+.factory('ImageHelper', [function ImageHelperFactory() {
+  'use strict';
+  return {
+    createImageConfig: function(imageName, registry) {
+      var imageNameAndTag = imageName.split(':');
+      var image = imageNameAndTag[0];
+      if (registry) {
+        image = registry + '/' + imageNameAndTag[0];
+      }
+      var imageConfig = {
+        repo: image,
+        tag: imageNameAndTag[1] ? imageNameAndTag[1] : 'latest'
+      };
+      return imageConfig;
+    }
+  };
+}])
+.factory('ContainerHelper', [function ContainerHelperFactory() {
+  'use strict';
+  return {
+    hideContainers: function(containers, containersToHideLabels) {
+      return containers.filter(function (container) {
+        var filterContainer = false;
+        containersToHideLabels.forEach(function(label, index) {
+          if (_.has(container.Labels, label.name) &&
+          container.Labels[label.name] === label.value) {
+            filterContainer = true;
+          }
+        });
+        if (!filterContainer) {
+          return container;
+        }
+      });
+    }
+  };
+}])
+.factory('ServiceHelper', [function ServiceHelperFactory() {
+  'use strict';
+  return {
+    serviceToConfig: function(service) {
+      return {
+        Name: service.Spec.Name,
+        Labels: service.Spec.Labels,
+        TaskTemplate: service.Spec.TaskTemplate,
+        Mode: service.Spec.Mode,
+        UpdateConfig: service.Spec.UpdateConfig,
+        Networks: service.Spec.Networks,
+        EndpointSpec: service.Spec.EndpointSpec
+      };
+    }
+  };
+}])
+.factory('TemplateHelper', [function TemplateHelperFactory() {
+  'use strict';
+  return {
+    getPortBindings: function(ports) {
+      var bindings = [];
+      ports.forEach(function (port) {
+        var portAndProtocol = _.split(port, '/');
+        var binding = {
+          containerPort: portAndProtocol[0],
+          protocol: portAndProtocol[1]
+        };
+        bindings.push(binding);
+      });
+      return bindings;
+    },
+    //Not used atm, may prove useful later
+    getVolumeBindings: function(volumes) {
+      var bindings = [];
+      volumes.forEach(function (volume) {
+        bindings.push({ containerPath: volume });
+      });
+      return bindings;
+    },
+    //Not used atm, may prove useful later
+    getEnvBindings: function(env) {
+      var bindings = [];
+      env.forEach(function (envvar) {
+        var binding = {
+          name: envvar.name
+        };
+        if (envvar.set) {
+          binding.value = envvar.set;
+        }
+        bindings.push(binding);
+      });
+      return bindings;
+    }
+  };
+}]);

app/shared/responseHandlers.js

@@ -0,0 +1,68 @@
+function isJSONArray(jsonString) {
+    return Object.prototype.toString.call(jsonString) === '[object Array]';
+}
+
+function isJSON(jsonString) {
+  try {
+    var o = JSON.parse(jsonString);
+    if (o && typeof o === "object") {
+        return o;
+    }
+  }
+  catch (e) { }
+  return false;
+}
+
+// The Docker API often returns a list of JSON object.
+// This handler wrap the JSON objects in an array.
+// Used by the API in: Image push, Image create, Events query.
+function jsonObjectsToArrayHandler(data) {
+  var str = "[" + data.replace(/\n/g, " ").replace(/\}\s*\{/g, "}, {") + "]";
+  return angular.fromJson(str);
+}
+
+// The Docker API often returns an empty string or a valid JSON object on success (Docker 1.9 -> Docker 1.12).
+// On error, it returns either an error message as a string (Docker < 1.12) or a JSON object with the field message
+// container the error (Docker = 1.12)
+// This handler ensure a valid JSON object is returned in any case.
+// Used by the API in: container deletion, network deletion, network creation, volume creation,
+// container exec, exec resize.
+function genericHandler(data) {
+  var response = {};
+  // No data is returned when deletion is successful (Docker 1.9 -> 1.12)
+  if (!data) {
+    return response;
+  }
+  // A string is returned on failure (Docker < 1.12)
+  else if (!isJSON(data)) {
+    response.message = data;
+  }
+  // Docker 1.12 returns a valid JSON object when an error occurs
+  else {
+    response = angular.fromJson(data);
+  }
+  return response;
+}
+
+// Image delete API returns an array on success (Docker 1.9 -> Docker 1.12).
+// On error, it returns either an error message as a string (Docker < 1.12) or a JSON object with the field message
+// container the error (Docker = 1.12).
+// This handler returns the original array on success or a newly created array containing
+// only one JSON object with the field message filled with the error message on failure.
+function deleteImageHandler(data) {
+  // A string is returned on failure (Docker < 1.12)
+  var response = [];
+  if (!isJSON(data)) {
+    response.push({message: data});
+  }
+  // A JSON object is returned on failure (Docker = 1.12)
+  else if (!isJSONArray) {
+    var json = angular.fromJson(data);
+    response.push(json);
+  }
+  // An array is returned on success (Docker 1.9 -> 1.12)
+  else {
+    response = angular.fromJson(data);
+  }
+  return response;
+}

app/shared/services.js

@@ -1,153 +1,282 @@
-'use strict';
-
-angular.module('dockerui.services', ['ngResource'])
-    .factory('Container', function($resource, Settings) {
+angular.module('portainer.services', ['ngResource', 'ngSanitize'])
+    .factory('Container', ['$resource', 'Settings', function ContainerFactory($resource, Settings) {
+        'use strict';
         // Resource for interacting with the docker containers
-        // http://docs.docker.io/en/latest/api/docker_remote_api.html#containers
+        // http://docs.docker.com/reference/api/docker_remote_api_<%= remoteApiVersion %>/#2-1-containers
         return $resource(Settings.url + '/containers/:id/:action', {
             name: '@name'
         }, {
-            query: {method: 'GET', params:{ all: 0, action: 'json'}, isArray: true},
-            get: {method: 'GET', params: { action:'json'}},
-            start: {method: 'POST', params: {id: '@id', action: 'start'}},
+            query: {method: 'GET', params: {all: 0, action: 'json'}, isArray: true},
+            get: {method: 'GET', params: {action: 'json'}},
             stop: {method: 'POST', params: {id: '@id', t: 5, action: 'stop'}},
-            restart: {method: 'POST', params: {id: '@id', t: 5, action: 'restart' }},
+            restart: {method: 'POST', params: {id: '@id', t: 5, action: 'restart'}},
             kill: {method: 'POST', params: {id: '@id', action: 'kill'}},
             pause: {method: 'POST', params: {id: '@id', action: 'pause'}},
             unpause: {method: 'POST', params: {id: '@id', action: 'unpause'}},
-            changes: {method: 'GET', params: {action:'changes'}, isArray: true},
-            create: {method: 'POST', params: {action:'create'}},
-            remove: {method: 'DELETE', params: {id: '@id', v:0}}
+            changes: {method: 'GET', params: {action: 'changes'}, isArray: true},
+            stats: {method: 'GET', params: {id: '@id', stream: false, action: 'stats'}, timeout: 5000},
+            start: {
+              method: 'POST', params: {id: '@id', action: 'start'},
+              transformResponse: genericHandler
+            },
+            create: {
+              method: 'POST', params: {action: 'create'},
+              transformResponse: genericHandler
+            },
+            remove: {
+              method: 'DELETE', params: {id: '@id', v: 0},
+              transformResponse: genericHandler
+            },
+            rename: {
+              method: 'POST', params: {id: '@id', action: 'rename', name: '@name'},
+              transformResponse: genericHandler
+            },
+            exec: {
+              method: 'POST', params: {id: '@id', action: 'exec'},
+              transformResponse: genericHandler
+            }
         });
-    })
-    .factory('ContainerLogs', function($resource, $http, Settings) {
+    }])
+    .factory('Service', ['$resource', 'Settings', function ServiceFactory($resource, Settings) {
+      'use strict';
+      // https://docs.docker.com/engine/reference/api/docker_remote_api_<%= remoteApiVersion %>/#/3-9-services
+      return $resource(Settings.url + '/services/:id/:action', {}, {
+        get: { method: 'GET', params: {id: '@id'} },
+        query: { method: 'GET', isArray: true },
+        create: { method: 'POST', params: {action: 'create'} },
+        update: { method: 'POST', params: {id: '@id', action: 'update', version: '@version'} },
+        remove: { method: 'DELETE', params: {id: '@id'} }
+      });
+    }])
+    .factory('Task', ['$resource', 'Settings', function TaskFactory($resource, Settings) {
+      'use strict';
+      // https://docs.docker.com/engine/reference/api/docker_remote_api_<%= remoteApiVersion %>/#/3-9-services
+      return $resource(Settings.url + '/tasks/:id', {}, {
+        get: { method: 'GET', params: {id: '@id'} },
+        query: { method: 'GET', isArray: true, params: {filters: '@filters'} }
+      });
+    }])
+    .factory('Exec', ['$resource', 'Settings', function ExecFactory($resource, Settings) {
+      'use strict';
+      // https://docs.docker.com/engine/reference/api/docker_remote_api_<%= remoteApiVersion %>/#/exec-resize
+      return $resource(Settings.url + '/exec/:id/:action', {}, {
+        resize: {
+          method: 'POST', params: {id: '@id', action: 'resize', h: '@height', w: '@width'},
+          transformResponse: genericHandler
+        }
+      });
+    }])
+    .factory('ContainerCommit', ['$resource', '$http', 'Settings', function ContainerCommitFactory($resource, $http, Settings) {
+        'use strict';
+        // http://docs.docker.com/reference/api/docker_remote_api_<%= remoteApiVersion %>/#create-a-new-image-from-a-container-s-changes
+        return $resource(Settings.url + '/commit', {}, {
+          commit: {method: 'POST', params: {container: '@id', repo: '@repo', tag: '@tag'}}
+        });
+    }])
+    .factory('ContainerLogs', ['$resource', '$http', 'Settings', function ContainerLogsFactory($resource, $http, Settings) {
+        'use strict';
+        // http://docs.docker.com/reference/api/docker_remote_api_<%= remoteApiVersion %>/#get-container-logs
         return {
-            get: function(id, params, callback) {
+            get: function (id, params, callback) {
                 $http({
                     method: 'GET',
-                    url: Settings.url + '/containers/'+id+'/logs',
-                    params: {'stdout': params.stdout || 0, 'stderr': params.stderr || 0, 'timestamps': params.timestamps || 0, 'tail': params.tail || 'all'}
-                }).success(callback).error(function(data, status, headers, config) {
+                    url: Settings.url + '/containers/' + id + '/logs',
+                    params: {
+                        'stdout': params.stdout || 0,
+                        'stderr': params.stderr || 0,
+                        'timestamps': params.timestamps || 0,
+                        'tail': params.tail || 'all'
+                    }
+                }).success(callback).error(function (data, status, headers, config) {
                     console.log(error, data);
                 });
             }
-        }
-    })
-    .factory('Image', function($resource, Settings) {
-        // Resource for docker images
-        // http://docs.docker.io/en/latest/api/docker_remote_api.html#images
+        };
+    }])
+    .factory('ContainerTop', ['$http', 'Settings', function ($http, Settings) {
+        'use strict';
+        // http://docs.docker.com/reference/api/docker_remote_api_<%= remoteApiVersion %>/#list-processes-running-inside-a-container
+        return {
+            get: function (id, params, callback, errorCallback) {
+                $http({
+                    method: 'GET',
+                    url: Settings.url + '/containers/' + id + '/top',
+                    params: {
+                        ps_args: params.ps_args
+                    }
+                }).success(callback);
+            }
+        };
+    }])
+    .factory('Image', ['$resource', 'Settings', function ImageFactory($resource, Settings) {
+        'use strict';
+        // http://docs.docker.com/reference/api/docker_remote_api_<%= remoteApiVersion %>/#2-2-images
         return $resource(Settings.url + '/images/:id/:action', {}, {
-            query: {method: 'GET', params:{ all: 0, action: 'json'}, isArray: true},
-            get: {method: 'GET', params: { action:'json'}},
-            search: {method: 'GET', params: { action:'search'}},
-            history: {method: 'GET', params: { action:'history'}, isArray: true},
-            create: {method: 'POST', params: {action:'create'}},
-            insert: {method: 'POST', params: {id: '@id', action:'insert'}},
-            push: {method: 'POST', params: {id: '@id', action:'push'}},
-            tag: {method: 'POST', params: {id: '@id', action:'tag', force: 0, repo: '@repo'}},
-            remove: {method: 'DELETE', params: {id: '@id'}, isArray: true}
+            query: {method: 'GET', params: {all: 0, action: 'json'}, isArray: true},
+            get: {method: 'GET', params: {action: 'json'}},
+            search: {method: 'GET', params: {action: 'search'}},
+            history: {method: 'GET', params: {action: 'history'}, isArray: true},
+            insert: {method: 'POST', params: {id: '@id', action: 'insert'}},
+            tag: {method: 'POST', params: {id: '@id', action: 'tag', force: 0, repo: '@repo', tag: '@tag'}},
+            inspect: {method: 'GET', params: {id: '@id', action: 'json'}},
+            push: {
+                method: 'POST', params: {action: 'push', id: '@tag'},
+                isArray: true, transformResponse: jsonObjectsToArrayHandler
+            },
+            create: {
+                method: 'POST', params: {action: 'create', fromImage: '@fromImage', tag: '@tag'},
+                isArray: true, transformResponse: jsonObjectsToArrayHandler
+            },
+            remove: {
+              method: 'DELETE', params: {id: '@id'},
+              isArray: true, transformResponse: deleteImageHandler
+            }
         });
-    })
-    .factory('Docker', function($resource, Settings) {
-        // Information for docker
-        // http://docs.docker.io/en/latest/api/docker_remote_api.html#display-system-wide-information
+    }])
+    .factory('Events', ['$resource', 'Settings', function EventFactory($resource, Settings) {
+        'use strict';
+        // http://docs.docker.com/reference/api/docker_remote_api_<%= remoteApiVersion %>/#/monitor-docker-s-events
+        return $resource(Settings.url + '/events', {}, {
+            query: {
+              method: 'GET', params: {since: '@since', until: '@until'},
+              isArray: true, transformResponse: jsonObjectsToArrayHandler
+            }
+        });
+    }])
+    .factory('Version', ['$resource', 'Settings', function VersionFactory($resource, Settings) {
+        'use strict';
+        // http://docs.docker.com/reference/api/docker_remote_api_<%= remoteApiVersion %>/#show-the-docker-version-information
         return $resource(Settings.url + '/version', {}, {
             get: {method: 'GET'}
         });
-    })
-    .factory('Auth', function($resource, Settings) {
-        // Auto Information for docker
-        // http://docs.docker.io/en/latest/api/docker_remote_api.html#set-auth-configuration
+    }])
+    .factory('Node', ['$resource', 'Settings', function NodeFactory($resource, Settings) {
+        'use strict';
+        // https://docs.docker.com/engine/reference/api/docker_remote_api_<%= remoteApiVersion %>/#/3-7-nodes
+        return $resource(Settings.url + '/nodes', {}, {
+          query: {
+            method: 'GET', isArray: true
+          }
+        });
+    }])
+    .factory('Swarm', ['$resource', 'Settings', function SwarmFactory($resource, Settings) {
+        'use strict';
+        // https://docs.docker.com/engine/reference/api/docker_remote_api_<%= remoteApiVersion %>/#/3-8-swarm
+        return $resource(Settings.url + '/swarm', {}, {
+            get: {method: 'GET'}
+        });
+    }])
+    .factory('Auth', ['$resource', 'Settings', function AuthFactory($resource, Settings) {
+        'use strict';
+        // http://docs.docker.com/reference/api/docker_remote_api_<%= remoteApiVersion %>/#check-auth-configuration
         return $resource(Settings.url + '/auth', {}, {
             get: {method: 'GET'},
             update: {method: 'POST'}
         });
-    })
-    .factory('System', function($resource, Settings) {
-        // System for docker
-        // http://docs.docker.io/en/latest/api/docker_remote_api.html#display-system-wide-information
+    }])
+    .factory('Info', ['$resource', 'Settings', function InfoFactory($resource, Settings) {
+        'use strict';
+        // http://docs.docker.com/reference/api/docker_remote_api_<%= remoteApiVersion %>/#display-system-wide-information
         return $resource(Settings.url + '/info', {}, {
             get: {method: 'GET'}
         });
-    })
-    .factory('Settings', function(DOCKER_ENDPOINT, DOCKER_PORT, DOCKER_API_VERSION, UI_VERSION) {
+    }])
+    .factory('Network', ['$resource', 'Settings', function NetworkFactory($resource, Settings) {
+        'use strict';
+        // http://docs.docker.com/reference/api/docker_remote_api_<%= remoteApiVersion %>/#2-5-networks
+        return $resource(Settings.url + '/networks/:id/:action', {id: '@id'}, {
+            query: {method: 'GET', isArray: true},
+            get: {method: 'GET'},
+            create: {method: 'POST', params: {action: 'create'}, transformResponse: genericHandler},
+            remove: { method: 'DELETE', transformResponse: genericHandler },
+            connect: {method: 'POST', params: {action: 'connect'}},
+            disconnect: {method: 'POST', params: {action: 'disconnect'}}
+        });
+    }])
+    .factory('Volume', ['$resource', 'Settings', function VolumeFactory($resource, Settings) {
+        'use strict';
+        // http://docs.docker.com/reference/api/docker_remote_api_<%= remoteApiVersion %>/#2-5-networks
+        return $resource(Settings.url + '/volumes/:name/:action', {name: '@name'}, {
+            query: {method: 'GET'},
+            get: {method: 'GET'},
+            create: {method: 'POST', params: {action: 'create'}, transformResponse: genericHandler},
+            remove: {
+              method: 'DELETE', transformResponse: genericHandler
+            }
+        });
+    }])
+    .factory('Config', ['$resource', 'CONFIG_ENDPOINT', function ConfigFactory($resource, CONFIG_ENDPOINT) {
+      return $resource(CONFIG_ENDPOINT).get();
+    }])
+    .factory('Templates', ['$resource', 'TEMPLATES_ENDPOINT', function TemplatesFactory($resource, TEMPLATES_ENDPOINT) {
+      return $resource(TEMPLATES_ENDPOINT, {}, {
+        get: {method: 'GET', isArray: true}
+      });
+    }])
+    .factory('Settings', ['DOCKER_ENDPOINT', 'DOCKER_PORT', 'UI_VERSION', 'PAGINATION_MAX_ITEMS', function SettingsFactory(DOCKER_ENDPOINT, DOCKER_PORT, UI_VERSION, PAGINATION_MAX_ITEMS) {
+        'use strict';
         var url = DOCKER_ENDPOINT;
         if (DOCKER_PORT) {
             url = url + DOCKER_PORT + '\\' + DOCKER_PORT;
         }
+        var firstLoad = (localStorage.getItem('firstLoad') || 'true') === 'true';
         return {
-            displayAll: false,
-            endpoint: DOCKER_ENDPOINT,
-            version: DOCKER_API_VERSION,
-            rawUrl: DOCKER_ENDPOINT + DOCKER_PORT + '/' + DOCKER_API_VERSION,
-            uiVersion: UI_VERSION,
-            url: url,
-            firstLoad: true,
+          displayAll: true,
+          endpoint: DOCKER_ENDPOINT,
+          uiVersion: UI_VERSION,
+          url: url,
+          firstLoad: firstLoad,
+          pagination_count: PAGINATION_MAX_ITEMS
         };
-    })
-    .factory('ViewSpinner', function() {
-        var spinner = new Spinner();
-        var target = document.getElementById('view');
-
+    }])
+    .factory('Messages', ['$rootScope', '$sanitize', function MessagesFactory($rootScope, $sanitize) {
+        'use strict';
         return {
-            spin: function() { spinner.spin(target); },
-            stop: function() { spinner.stop(); }
-        };
-    })
-    .factory('Messages', function($rootScope) {
-        return {
-            send: function(title, text) {
+            send: function (title, text) {
                 $.gritter.add({
-                    title: title,
-                    text: text,
+                    title: $sanitize(title),
+                    text: $sanitize(text),
                     time: 2000,
-                    before_open: function() {
-                        if($('.gritter-item-wrapper').length == 3) {
+                    before_open: function () {
+                        if ($('.gritter-item-wrapper').length === 3) {
                             return false;
-                        }  
+                        }
                     }
-                }); 
+                });
             },
-            error: function(title, text) {
+            error: function (title, e, fallbackText) {
+                var msg = fallbackText;
+                if (e.data && e.data.message) {
+                  msg = e.data.message;
+                } else if (e.message) {
+                  msg = e.message;
+                } else if (e.data && e.data.length > 0 && e.data[0].message) {
+                  msg = e.data[0].message;
+                }
                 $.gritter.add({
-                    title: title,
-                    text: text,
-                    time: 6000,
-                    before_open: function() {
-                        if($('.gritter-item-wrapper').length == 4) {
+                    title: $sanitize(title),
+                    text: $sanitize(msg),
+                    time: 10000,
+                    before_open: function () {
+                        if ($('.gritter-item-wrapper').length === 4) {
                             return false;
-                        }  
+                        }
                     }
                 });
             }
         };
-    })
-    .factory('Dockerfile', function(Settings) {
-        var url = Settings.rawUrl  + '/build';
+    }])
+    .factory('LineChart', ['Settings', function LineChartFactory(Settings) {
+        'use strict';
         return {
-            build: function(file, callback) {
-                var data = new FormData();
-                var dockerfile = new Blob([file], { type: 'text/text' });
-                data.append('Dockerfile', dockerfile);
-
-                var request = new XMLHttpRequest();
-                request.onload = callback;
-                request.open('POST', url);
-                request.send(data);
-            }
-        };
-    })
-    .factory('LineChart', function(Settings) {
-        var url = Settings.rawUrl  + '/build';
-        return {
-            build: function(id, data, getkey){
+            build: function (id, data, getkey) {
                 var chart = new Chart($(id).get(0).getContext("2d"));
                 var map = {};
 
                 for (var i = 0; i < data.length; i++) {
                     var c = data[i];
                     var key = getkey(c);
-                    
+
                     var count = map[key];
                     if (count === undefined) {
                         count = 0;
@@ -157,31 +286,37 @@ angular.module('dockerui.services', ['ngResource'])
                 }
 
                 var labels = [];
-                var data = [];
+                data = [];
                 var keys = Object.keys(map);
+                var max = 1;
 
-                for (var i = keys.length - 1; i > -1; i--) {
+                for (i = keys.length - 1; i > -1; i--) {
                     var k = keys[i];
                     labels.push(k);
                     data.push(map[k]);
+                    if (map[k] > max) {
+                        max = map[k];
+                    }
                 }
+                var steps = Math.min(max, 10);
                 var dataset = {
-                    fillColor : "rgba(151,187,205,0.5)",
-                    strokeColor : "rgba(151,187,205,1)",
-                    pointColor : "rgba(151,187,205,1)",
-                    pointStrokeColor : "#fff",
-                    data : data
+                    fillColor: "rgba(151,187,205,0.5)",
+                    strokeColor: "rgba(151,187,205,1)",
+                    pointColor: "rgba(151,187,205,1)",
+                    pointStrokeColor: "#fff",
+                    data: data
                 };
                 chart.Line({
-                    labels: labels,
-                    datasets: [dataset]
-                }, 
-                {
-                    scaleStepWidth: 1, 
-                    pointDotRadius:1,
-                    scaleOverride: true,
-                    scaleSteps: labels.length
-                });
+                        labels: labels,
+                        datasets: [dataset]
+                    },
+                    {
+                        scaleStepWidth: Math.ceil(max / steps),
+                        pointDotRadius: 1,
+                        scaleIntegersOnly: true,
+                        scaleOverride: true,
+                        scaleSteps: steps
+                    });
             }
         };
-    });
+    }]);

app/shared/viewmodel.js

@@ -1,21 +1,192 @@
-
 function ImageViewModel(data) {
-    this.Id = data.Id;
-    this.Tag = data.Tag;
-    this.Repository = data.Repository;
-    this.Created = data.Created;
-    this.Checked = false;
-    this.RepoTags = data.RepoTags;
-    this.VirtualSize = data.VirtualSize;
+  this.Id = data.Id;
+  this.Tag = data.Tag;
+  this.Repository = data.Repository;
+  this.Created = data.Created;
+  this.Checked = false;
+  this.RepoTags = data.RepoTags;
+  this.VirtualSize = data.VirtualSize;
+}
+
+function TaskViewModel(data, node_data) {
+  this.Id = data.ID;
+  this.Created = data.CreatedAt;
+  this.Updated = data.UpdatedAt;
+  this.Slot = data.Slot;
+  this.Status = data.Status.State;
+  if (node_data) {
+    for (var i = 0; i < node_data.length; ++i) {
+      if (data.NodeID === node_data[i].ID) {
+        this.Node = node_data[i].Description.Hostname;
+      }
+    }
+  }
+}
+
+function ServiceViewModel(data) {
+  this.Model = data;
+  this.Id = data.ID;
+  this.Name = data.Spec.Name;
+  this.Image = data.Spec.TaskTemplate.ContainerSpec.Image;
+  this.Version = data.Version.Index;
+  if (data.Spec.Mode.Replicated) {
+    this.Mode = 'replicated' ;
+    this.Replicas = data.Spec.Mode.Replicated.Replicas;
+  } else {
+    this.Mode = 'global';
+  }
+  this.Labels = data.Spec.Labels;
+  if (data.Spec.TaskTemplate.ContainerSpec) {
+    this.ContainerLabels = data.Spec.TaskTemplate.ContainerSpec.Labels;
+  }
+  if (data.Spec.TaskTemplate.ContainerSpec.Env) {
+    this.Env = data.Spec.TaskTemplate.ContainerSpec.Env;
+  }
+  if (data.Endpoint.Ports) {
+    this.Ports = data.Endpoint.Ports;
+  }
+  this.Checked = false;
+  this.Scale = false;
+  this.EditName = false;
 }
 
 function ContainerViewModel(data) {
-   this.Id = data.Id;
-   this.Image = data.Image;
-   this.Command = data.Command;
-   this.Created = data.Created;
-   this.SizeRw = data.SizeRw;
-   this.Status = data.Status;
-   this.Checked = false;
-   this.Names = data.Names;
+  this.Id = data.Id;
+  this.Status = data.Status;
+  this.Names = data.Names;
+  // Unavailable in Docker < 1.10
+  if (data.NetworkSettings && !_.isEmpty(data.NetworkSettings.Networks)) {
+    this.IP = data.NetworkSettings.Networks[Object.keys(data.NetworkSettings.Networks)[0]].IPAddress;
+  }
+  this.Image = data.Image;
+  this.Command = data.Command;
+  this.Checked = false;
+  this.Ports = [];
+  for (var i = 0; i < data.Ports.length; ++i) {
+    var p = data.Ports[i];
+    if (p.PublicPort) {
+      this.Ports.push({ host: p.IP, private: p.PrivatePort, public: p.PublicPort });
+    }
+  }
+}
+
+function createEventDetails(event) {
+  var eventAttr = event.Actor.Attributes;
+  var details = '';
+  switch (event.Type) {
+    case 'container':
+    switch (event.Action) {
+      case 'stop':
+      details = 'Container ' + eventAttr.name + ' stopped';
+      break;
+      case 'destroy':
+      details = 'Container ' + eventAttr.name + ' deleted';
+      break;
+      case 'create':
+      details = 'Container ' + eventAttr.name + ' created';
+      break;
+      case 'start':
+      details = 'Container ' + eventAttr.name + ' started';
+      break;
+      case 'kill':
+      details = 'Container ' + eventAttr.name + ' killed';
+      break;
+      case 'die':
+      details = 'Container ' + eventAttr.name + ' exited with status code ' + eventAttr.exitCode;
+      break;
+      case 'commit':
+      details = 'Container ' + eventAttr.name + ' committed';
+      break;
+      case 'restart':
+      details = 'Container ' + eventAttr.name + ' restarted';
+      break;
+      case 'pause':
+      details = 'Container ' + eventAttr.name + ' paused';
+      break;
+      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';
+      } else if (event.Action.indexOf('exec_start') === 0) {
+        details = 'Exec instance started';
+      } else {
+        details = 'Unsupported event';
+      }
+    }
+    break;
+    case 'image':
+    switch (event.Action) {
+      case 'delete':
+      details = 'Image deleted';
+      break;
+      case 'tag':
+      details = 'New tag created for ' + eventAttr.name;
+      break;
+      case 'untag':
+      details = 'Image untagged';
+      break;
+      case 'pull':
+      details = 'Image ' + event.Actor.ID + ' pulled';
+      break;
+      default:
+      details = 'Unsupported event';
+    }
+    break;
+    case 'network':
+    switch (event.Action) {
+      case 'create':
+      details = 'Network ' + eventAttr.name + ' created';
+      break;
+      case 'destroy':
+      details = 'Network ' + eventAttr.name + ' deleted';
+      break;
+      case 'connect':
+      details = 'Container connected to ' + eventAttr.name + ' network';
+      break;
+      case 'disconnect':
+      details = 'Container disconnected from ' + eventAttr.name + ' network';
+      break;
+      default:
+      details = 'Unsupported event';
+    }
+    break;
+    case 'volume':
+    switch (event.Action) {
+      case 'create':
+      details = 'Volume ' + event.Actor.ID + ' created';
+      break;
+      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';
+    }
+    break;
+    default:
+    details = 'Unsupported event';
+  }
+  return details;
+}
+
+function EventViewModel(data) {
+  // Type, Action, Actor unavailable in Docker < 1.10
+  this.Time = data.time;
+  if (data.Type) {
+    this.Type = data.Type;
+    this.Details = createEventDetails(data);
+  } else {
+    this.Type = data.status;
+    this.Details = data.from;
+  }
 }

assets/css/app.css

@@ -1,129 +1,208 @@
-body {
-    padding-top: 20px;
-}
-
-.container > hr {
-    margin: 60px 0;
-}
-
-.jumbotron {
-    margin: 80px 0;
-    text-align: center;
-}
-
-.jumbotron h1 {
-    font-size: 100px;
-    line-height: 1;
-}
-
-.jumbotron .lead {
-    font-size: 24px;
-    line-height: 1.25;
-}
-
-.jumbotron .btn {
-    font-size: 21px;
-    padding: 14px 24px;
-}
-
-.marketing {
-    margin: 60px 0;
-}
-
-.marketing p + h4 {
-    margin-top: 28px;
-}
-
-.masthead .nav {
-    margin: 0;
-    margin: 0 0 2em 0;
-    width: 100%;
-}
-
-.masthead .nav.well {
-    padding: 0;
-}
-
-.masthead .nav li {
-    display: table-cell;
-    width: 1%;
-    float: none;
-}
-
-.masthead .nav li a {
-    font-weight: bold;
-    text-align: center;
-    border-left: 1px solid rgba(255,255,255,.75);
-    border-right: 1px solid rgba(0,0,0,.1);
-}
-
-.masthead .nav li:first-child a {
-    border-left: 0;
-    border-radius: 3px 0 0 3px;
-}
-.masthead .nav li:last-child a {
-    border-right: 0;
-    border-radius: 0 3px 3px 0;
-}
-
 .btn-group button {
     margin: 3px;
 }
 
-.detail {
-    width: 80%;
-    margin: 0 auto;
-}
-
-.center {
-    width: 100%;
-    margin: 0 auto;
-}
-
-.btn-remove {
-    margin: 0 auto;
-    max-width: 70%;
-}
-
-.actions {
-    margin: 0 auto;
-}
-
-.container-bottom {
-    height: 50px;
-}
-
-.well {
-    padding: 10px 15px 0 15px;
-}
-
-#response {
-    width: 80%;
-    margin: 0 auto;
-}
-
-#editor {
-    height: 300px;
-    width: 100%;
-    border: 1px solid #DDD;
-    margin-top: 5px;
-}
-
 .messages {
     max-height: 50px;
-    overflow-y: scroll;
     overflow-x: hidden;
+    overflow-y: scroll;
 }
 
 .legend .title {
+    padding: 0 0.3em;
     margin: 0.5em;
     border-style: solid;
     border-width: 0 0 0 1em;
-    padding: 0 0.3em;
 }
 
-pre.pre-x-scrollable {
-    max-height: 700px;
-    word-wrap: normal;
-    white-space: pre;
+.logo {
+  display: inline;
+  width: 100%;
+  max-width: 155px;
+  height: 100%;
+  max-height: 55px;
+  margin-bottom: 5px;
+}
+
+.containerNameInput {
+  width: 85%;
+  border:none;
+  background:none;
+  border-bottom: 1px solid black;
+}
+
+.containerNameInput:active, .containerNameInput:focus {
+  outline:none;
+}
+
+#network-legend {
+  text-align: center;
+}
+
+#network-legend span {
+  display: inline;
+  font-size: 18px;
+}
+
+.header_title_content {
+  margin-left: 5px;
+}
+
+.form-horizontal .control-label.text-left{
+    text-align: left;
+    font-size: 0.9em;
+}
+
+input[type="checkbox"] {
+  margin-top: 1px;
+  vertical-align: middle;
+}
+
+input[type="radio"] {
+  margin-top: 1px;
+  vertical-align: middle;
+}
+
+.space-right {
+  margin-right: 5px;
+}
+
+.fa.green-icon {
+  color: #23ae89;
+}
+
+.fa.red-icon {
+  color: #ae2323;
+}
+
+.fa.white-icon {
+  color: white;
+}
+
+.widget .widget-body table tbody .image-tag {
+  font-size: 90% !important;
+  margin-right: 5px;
+}
+
+.widget .widget-body table tbody .fit-text-size {
+  font-size: 90% !important;
+}
+
+.nopadding {
+  padding: 0 !important;
+}
+
+.terminal-container {
+  width: 100%;
+  padding: 10px 5px;
+}
+
+.interactive {
+  cursor: pointer;
+}
+
+.template-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.custom-header-ico {
+  max-width: 32px;
+  max-height: 32px;
+  margin-right: 2px;
+}
+
+.btn-responsive {
+  padding: 5px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+
+@media screen and (min-width: 1107px) {
+  .btn-responsive {
+    padding: 6px 12px;
+    font-size: 14px;
+    line-height: 1.42857143;
+    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;
+}
+
+.pagination-controls {
+  margin-left: 10px;
 }

assets/css/jquery.gritter.css

@@ -1,101 +0,0 @@
-/* the norm */
-#gritter-notice-wrapper {
-	position:fixed;
-	top:20px;
-	right:20px;
-	width:301px;
-	z-index:9999;
-}
-#gritter-notice-wrapper.top-left {
-    left: 20px;
-    right: auto;
-}
-#gritter-notice-wrapper.bottom-right {
-    top: auto;
-    left: auto;
-    bottom: 20px;
-    right: 20px;
-}
-#gritter-notice-wrapper.bottom-left {
-    top: auto;
-    right: auto;
-    bottom: 20px;
-    left: 20px;
-}
-.gritter-item-wrapper {
-	position:relative;
-	margin:0 0 10px 0;
-	background:url('../images/ie-spacer.gif'); /* ie7/8 fix */ 
-}
-.gritter-top {
-	background:url(../images/gritter.png) no-repeat left -30px;
-	height:10px;
-}
-.hover .gritter-top {
-	background-position:right -30px;
-}
-.gritter-bottom {
-	background:url(../images/gritter.png) no-repeat left bottom;
-	height:8px;
-	margin:0;
-}
-.hover .gritter-bottom {
-	background-position: bottom right;
-}
-.gritter-item {
-	display:block;
-	background:url(../images/gritter.png) no-repeat left -40px;
-	color:#eee;
-	padding:2px 11px 8px 11px;
-	font-size: 11px;
-	font-family:verdana;
-}
-.hover .gritter-item {
-	background-position:right -40px;
-}
-.gritter-item p {
-	padding:0;
-	margin:0;
-	word-wrap:break-word;
-}
-.gritter-close {
-	display:none;
-	position:absolute;
-	top:5px;
-	left:3px;
-	background:url(../images/gritter.png) no-repeat left top;
-	cursor:pointer;
-	width:30px;
-	height:30px;
-}
-.gritter-title {
-	font-size:14px;
-	font-weight:bold;
-	padding:0 0 7px 0;
-	display:block;
-	text-shadow:1px 1px 0 #000; /* Not supported by IE :( */
-}
-.gritter-image {
-	width:48px;
-	height:48px;
-	float:left;
-}
-.gritter-with-image,
-.gritter-without-image {
-	padding:0;
-}
-.gritter-with-image {
-	width:220px;
-	float:right;
-}
-/* for the light (white) version of the gritter notice */
-.gritter-light .gritter-item,
-.gritter-light .gritter-bottom,
-.gritter-light .gritter-top,
-.gritter-light .gritter-close {
-    background-image: url(../images/gritter-light.png);
-    color: #222;
-}
-.gritter-light .gritter-title {
-    text-shadow: none;
-}

assets/font/glyphicons-halflings-regular.svg

@@ -1,229 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata></metadata>
-<defs>
-<font id="glyphicons_halflingsregular" horiz-adv-x="1200" >
-<font-face units-per-em="1200" ascent="960" descent="-240" />
-<missing-glyph horiz-adv-x="500" />
-<glyph />
-<glyph />
-<glyph unicode="&#xd;" />
-<glyph unicode=" " />
-<glyph unicode="*" d="M100 500v200h259l-183 183l141 141l183 -183v259h200v-259l183 183l141 -141l-183 -183h259v-200h-259l183 -183l-141 -141l-183 183v-259h-200v259l-183 -183l-141 141l183 183h-259z" />
-<glyph unicode="+" d="M0 400v300h400v400h300v-400h400v-300h-400v-400h-300v400h-400z" />
-<glyph unicode="&#xa0;" />
-<glyph unicode="&#x2000;" horiz-adv-x="652" />
-<glyph unicode="&#x2001;" horiz-adv-x="1304" />
-<glyph unicode="&#x2002;" horiz-adv-x="652" />
-<glyph unicode="&#x2003;" horiz-adv-x="1304" />
-<glyph unicode="&#x2004;" horiz-adv-x="434" />
-<glyph unicode="&#x2005;" horiz-adv-x="326" />
-<glyph unicode="&#x2006;" horiz-adv-x="217" />
-<glyph unicode="&#x2007;" horiz-adv-x="217" />
-<glyph unicode="&#x2008;" horiz-adv-x="163" />
-<glyph unicode="&#x2009;" horiz-adv-x="260" />
-<glyph unicode="&#x200a;" horiz-adv-x="72" />
-<glyph unicode="&#x202f;" horiz-adv-x="260" />
-<glyph unicode="&#x205f;" horiz-adv-x="326" />
-<glyph unicode="&#x20ac;" d="M100 500l100 100h113q0 47 5 100h-218l100 100h135q37 167 112 257q117 141 297 141q242 0 354 -189q60 -103 66 -209h-181q0 55 -25.5 99t-63.5 68t-75 36.5t-67 12.5q-24 0 -52.5 -10t-62.5 -32t-65.5 -67t-50.5 -107h379l-100 -100h-300q-6 -46 -6 -100h406l-100 -100 h-300q9 -74 33 -132t52.5 -91t62 -54.5t59 -29t46.5 -7.5q29 0 66 13t75 37t63.5 67.5t25.5 96.5h174q-31 -172 -128 -278q-107 -117 -274 -117q-205 0 -324 158q-36 46 -69 131.5t-45 205.5h-217z" />
-<glyph unicode="&#x2212;" d="M200 400h900v300h-900v-300z" />
-<glyph unicode="&#x25fc;" horiz-adv-x="500" d="M0 0z" />
-<glyph unicode="&#x2601;" d="M-14 494q0 -80 56.5 -137t135.5 -57h750q120 0 205 86.5t85 207.5t-85 207t-205 86q-46 0 -90 -14q-44 97 -134.5 156.5t-200.5 59.5q-152 0 -260 -107.5t-108 -260.5q0 -25 2 -37q-66 -14 -108.5 -67.5t-42.5 -122.5z" />
-<glyph unicode="&#x2709;" d="M0 100l400 400l200 -200l200 200l400 -400h-1200zM0 300v600l300 -300zM0 1100l600 -603l600 603h-1200zM900 600l300 300v-600z" />
-<glyph unicode="&#x270f;" d="M-13 -13l333 112l-223 223zM187 403l214 -214l614 614l-214 214zM887 1103l214 -214l99 92q13 13 13 32.5t-13 33.5l-153 153q-15 13 -33 13t-33 -13z" />
-<glyph unicode="&#xe001;" d="M0 1200h1200l-500 -550v-550h300v-100h-800v100h300v550z" />
-<glyph unicode="&#xe002;" d="M14 84q18 -55 86 -75.5t147 5.5q65 21 109 69t44 90v606l600 155v-521q-64 16 -138 -7q-79 -26 -122.5 -83t-25.5 -111q18 -55 86 -75.5t147 4.5q70 23 111.5 63.5t41.5 95.5v881q0 10 -7 15.5t-17 2.5l-752 -193q-10 -3 -17 -12.5t-7 -19.5v-689q-64 17 -138 -7 q-79 -25 -122.5 -82t-25.5 -112z" />
-<glyph unicode="&#xe003;" d="M23 693q0 200 142 342t342 142t342 -142t142 -342q0 -142 -78 -261l300 -300q7 -8 7 -18t-7 -18l-109 -109q-8 -7 -18 -7t-18 7l-300 300q-119 -78 -261 -78q-200 0 -342 142t-142 342zM176 693q0 -136 97 -233t234 -97t233.5 96.5t96.5 233.5t-96.5 233.5t-233.5 96.5 t-234 -97t-97 -233z" />
-<glyph unicode="&#xe005;" d="M100 784q0 64 28 123t73 100.5t104.5 64t119 20.5t120 -38.5t104.5 -104.5q48 69 109.5 105t121.5 38t118.5 -20.5t102.5 -64t71 -100.5t27 -123q0 -57 -33.5 -117.5t-94 -124.5t-126.5 -127.5t-150 -152.5t-146 -174q-62 85 -145.5 174t-149.5 152.5t-126.5 127.5 t-94 124.5t-33.5 117.5z" />
-<glyph unicode="&#xe006;" d="M-72 800h479l146 400h2l146 -400h472l-382 -278l145 -449l-384 275l-382 -275l146 447zM168 71l2 1z" />
-<glyph unicode="&#xe007;" d="M-72 800h479l146 400h2l146 -400h472l-382 -278l145 -449l-384 275l-382 -275l146 447zM168 71l2 1zM237 700l196 -142l-73 -226l192 140l195 -141l-74 229l193 140h-235l-77 211l-78 -211h-239z" />
-<glyph unicode="&#xe008;" d="M0 0v143l400 257v100q-37 0 -68.5 74.5t-31.5 125.5v200q0 124 88 212t212 88t212 -88t88 -212v-200q0 -51 -31.5 -125.5t-68.5 -74.5v-100l400 -257v-143h-1200z" />
-<glyph unicode="&#xe009;" d="M0 0v1100h1200v-1100h-1200zM100 100h100v100h-100v-100zM100 300h100v100h-100v-100zM100 500h100v100h-100v-100zM100 700h100v100h-100v-100zM100 900h100v100h-100v-100zM300 100h600v400h-600v-400zM300 600h600v400h-600v-400zM1000 100h100v100h-100v-100z M1000 300h100v100h-100v-100zM1000 500h100v100h-100v-100zM1000 700h100v100h-100v-100zM1000 900h100v100h-100v-100z" />
-<glyph unicode="&#xe010;" d="M0 50v400q0 21 14.5 35.5t35.5 14.5h400q21 0 35.5 -14.5t14.5 -35.5v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-400q-21 0 -35.5 14.5t-14.5 35.5zM0 650v400q0 21 14.5 35.5t35.5 14.5h400q21 0 35.5 -14.5t14.5 -35.5v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-400 q-21 0 -35.5 14.5t-14.5 35.5zM600 50v400q0 21 14.5 35.5t35.5 14.5h400q21 0 35.5 -14.5t14.5 -35.5v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-400q-21 0 -35.5 14.5t-14.5 35.5zM600 650v400q0 21 14.5 35.5t35.5 14.5h400q21 0 35.5 -14.5t14.5 -35.5v-400 q0 -21 -14.5 -35.5t-35.5 -14.5h-400q-21 0 -35.5 14.5t-14.5 35.5z" />
-<glyph unicode="&#xe011;" d="M0 50v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5zM0 450v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200 q-21 0 -35.5 14.5t-14.5 35.5zM0 850v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5zM400 50v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5 t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5zM400 450v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5zM400 850v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5 v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5zM800 50v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5zM800 450v200q0 21 14.5 35.5t35.5 14.5h200 q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5zM800 850v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5z" />
-<glyph unicode="&#xe012;" d="M0 50v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5zM0 450q0 -21 14.5 -35.5t35.5 -14.5h200q21 0 35.5 14.5t14.5 35.5v200q0 21 -14.5 35.5t-35.5 14.5h-200q-21 0 -35.5 -14.5 t-14.5 -35.5v-200zM0 850v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5zM400 50v200q0 21 14.5 35.5t35.5 14.5h700q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5 t-35.5 -14.5h-700q-21 0 -35.5 14.5t-14.5 35.5zM400 450v200q0 21 14.5 35.5t35.5 14.5h700q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-700q-21 0 -35.5 14.5t-14.5 35.5zM400 850v200q0 21 14.5 35.5t35.5 14.5h700q21 0 35.5 -14.5t14.5 -35.5 v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-700q-21 0 -35.5 14.5t-14.5 35.5z" />
-<glyph unicode="&#xe013;" d="M29 454l419 -420l818 820l-212 212l-607 -607l-206 207z" />
-<glyph unicode="&#xe014;" d="M106 318l282 282l-282 282l212 212l282 -282l282 282l212 -212l-282 -282l282 -282l-212 -212l-282 282l-282 -282z" />
-<glyph unicode="&#xe015;" d="M23 693q0 200 142 342t342 142t342 -142t142 -342q0 -142 -78 -261l300 -300q7 -8 7 -18t-7 -18l-109 -109q-8 -7 -18 -7t-18 7l-300 300q-119 -78 -261 -78q-200 0 -342 142t-142 342zM176 693q0 -136 97 -233t234 -97t233.5 96.5t96.5 233.5t-96.5 233.5t-233.5 96.5 t-234 -97t-97 -233zM300 600v200h100v100h200v-100h100v-200h-100v-100h-200v100h-100z" />
-<glyph unicode="&#xe016;" d="M23 694q0 200 142 342t342 142t342 -142t142 -342q0 -141 -78 -262l300 -299q7 -7 7 -18t-7 -18l-109 -109q-8 -8 -18 -8t-18 8l-300 300q-119 -78 -261 -78q-200 0 -342 142t-142 342zM176 694q0 -136 97 -233t234 -97t233.5 97t96.5 233t-96.5 233t-233.5 97t-234 -97 t-97 -233zM300 601h400v200h-400v-200z" />
-<glyph unicode="&#xe017;" d="M23 600q0 183 105 331t272 210v-166q-103 -55 -165 -155t-62 -220q0 -177 125 -302t302 -125t302 125t125 302q0 120 -62 220t-165 155v166q167 -62 272 -210t105 -331q0 -118 -45.5 -224.5t-123 -184t-184 -123t-224.5 -45.5t-224.5 45.5t-184 123t-123 184t-45.5 224.5 zM500 750q0 -21 14.5 -35.5t35.5 -14.5h100q21 0 35.5 14.5t14.5 35.5v400q0 21 -14.5 35.5t-35.5 14.5h-100q-21 0 -35.5 -14.5t-14.5 -35.5v-400z" />
-<glyph unicode="&#xe018;" d="M100 1h200v300h-200v-300zM400 1v500h200v-500h-200zM700 1v800h200v-800h-200zM1000 1v1200h200v-1200h-200z" />
-<glyph unicode="&#xe019;" d="M26 601q0 -33 6 -74l151 -38l2 -6q14 -49 38 -93l3 -5l-80 -134q45 -59 105 -105l133 81l5 -3q45 -26 94 -39l5 -2l38 -151q40 -5 74 -5q27 0 74 5l38 151l6 2q46 13 93 39l5 3l134 -81q56 44 104 105l-80 134l3 5q24 44 39 93l1 6l152 38q5 40 5 74q0 28 -5 73l-152 38 l-1 6q-16 51 -39 93l-3 5l80 134q-44 58 -104 105l-134 -81l-5 3q-45 25 -93 39l-6 1l-38 152q-40 5 -74 5q-27 0 -74 -5l-38 -152l-5 -1q-50 -14 -94 -39l-5 -3l-133 81q-59 -47 -105 -105l80 -134l-3 -5q-25 -47 -38 -93l-2 -6l-151 -38q-6 -48 -6 -73zM385 601 q0 88 63 151t152 63t152 -63t63 -151q0 -89 -63 -152t-152 -63t-152 63t-63 152z" />
-<glyph unicode="&#xe020;" d="M100 1025v50q0 10 7.5 17.5t17.5 7.5h275v100q0 41 29.5 70.5t70.5 29.5h300q41 0 70.5 -29.5t29.5 -70.5v-100h275q10 0 17.5 -7.5t7.5 -17.5v-50q0 -11 -7 -18t-18 -7h-1050q-11 0 -18 7t-7 18zM200 100v800h900v-800q0 -41 -29.5 -71t-70.5 -30h-700q-41 0 -70.5 30 t-29.5 71zM300 100h100v700h-100v-700zM500 100h100v700h-100v-700zM500 1100h300v100h-300v-100zM700 100h100v700h-100v-700zM900 100h100v700h-100v-700z" />
-<glyph unicode="&#xe021;" d="M1 601l656 644l644 -644h-200v-600h-300v400h-300v-400h-300v600h-200z" />
-<glyph unicode="&#xe022;" d="M100 25v1150q0 11 7 18t18 7h475v-500h400v-675q0 -11 -7 -18t-18 -7h-850q-11 0 -18 7t-7 18zM700 800v300l300 -300h-300z" />
-<glyph unicode="&#xe023;" d="M4 600q0 162 80 299t217 217t299 80t299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299zM186 600q0 -171 121.5 -292.5t292.5 -121.5t292.5 121.5t121.5 292.5t-121.5 292.5t-292.5 121.5t-292.5 -121.5t-121.5 -292.5zM500 500v400h100 v-300h200v-100h-300z" />
-<glyph unicode="&#xe024;" d="M-100 0l431 1200h209l-21 -300h162l-20 300h208l431 -1200h-538l-41 400h-242l-40 -400h-539zM488 500h224l-27 300h-170z" />
-<glyph unicode="&#xe025;" d="M0 0v400h490l-290 300h200v500h300v-500h200l-290 -300h490v-400h-1100zM813 200h175v100h-175v-100z" />
-<glyph unicode="&#xe026;" d="M1 600q0 122 47.5 233t127.5 191t191 127.5t233 47.5t233 -47.5t191 -127.5t127.5 -191t47.5 -233t-47.5 -233t-127.5 -191t-191 -127.5t-233 -47.5t-233 47.5t-191 127.5t-127.5 191t-47.5 233zM188 600q0 -170 121 -291t291 -121t291 121t121 291t-121 291t-291 121 t-291 -121t-121 -291zM350 600h150v300h200v-300h150l-250 -300z" />
-<glyph unicode="&#xe027;" d="M4 600q0 162 80 299t217 217t299 80t299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299zM186 600q0 -171 121.5 -292.5t292.5 -121.5t292.5 121.5t121.5 292.5t-121.5 292.5t-292.5 121.5t-292.5 -121.5t-121.5 -292.5zM350 600l250 300 l250 -300h-150v-300h-200v300h-150z" />
-<glyph unicode="&#xe028;" d="M0 25v475l200 700h800l199 -700l1 -475q0 -11 -7 -18t-18 -7h-1150q-11 0 -18 7t-7 18zM200 500h200l50 -200h300l50 200h200l-97 500h-606z" />
-<glyph unicode="&#xe029;" d="M4 600q0 162 80 299t217 217t299 80t299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299zM186 600q0 -172 121.5 -293t292.5 -121t292.5 121t121.5 293q0 171 -121.5 292.5t-292.5 121.5t-292.5 -121.5t-121.5 -292.5zM500 397v401 l297 -200z" />
-<glyph unicode="&#xe030;" d="M23 600q0 -118 45.5 -224.5t123 -184t184 -123t224.5 -45.5t224.5 45.5t184 123t123 184t45.5 224.5h-150q0 -177 -125 -302t-302 -125t-302 125t-125 302t125 302t302 125q136 0 246 -81l-146 -146h400v400l-145 -145q-157 122 -355 122q-118 0 -224.5 -45.5t-184 -123 t-123 -184t-45.5 -224.5z" />
-<glyph unicode="&#xe031;" d="M23 600q0 118 45.5 224.5t123 184t184 123t224.5 45.5q198 0 355 -122l145 145v-400h-400l147 147q-112 80 -247 80q-177 0 -302 -125t-125 -302h-150zM100 0v400h400l-147 -147q112 -80 247 -80q177 0 302 125t125 302h150q0 -118 -45.5 -224.5t-123 -184t-184 -123 t-224.5 -45.5q-198 0 -355 122z" />
-<glyph unicode="&#xe032;" d="M100 0h1100v1200h-1100v-1200zM200 100v900h900v-900h-900zM300 200v100h100v-100h-100zM300 400v100h100v-100h-100zM300 600v100h100v-100h-100zM300 800v100h100v-100h-100zM500 200h500v100h-500v-100zM500 400v100h500v-100h-500zM500 600v100h500v-100h-500z M500 800v100h500v-100h-500z" />
-<glyph unicode="&#xe033;" d="M0 100v600q0 41 29.5 70.5t70.5 29.5h100v200q0 82 59 141t141 59h300q82 0 141 -59t59 -141v-200h100q41 0 70.5 -29.5t29.5 -70.5v-600q0 -41 -29.5 -70.5t-70.5 -29.5h-900q-41 0 -70.5 29.5t-29.5 70.5zM400 800h300v150q0 21 -14.5 35.5t-35.5 14.5h-200 q-21 0 -35.5 -14.5t-14.5 -35.5v-150z" />
-<glyph unicode="&#xe034;" d="M100 0v1100h100v-1100h-100zM300 400q60 60 127.5 84t127.5 17.5t122 -23t119 -30t110 -11t103 42t91 120.5v500q-40 -81 -101.5 -115.5t-127.5 -29.5t-138 25t-139.5 40t-125.5 25t-103 -29.5t-65 -115.5v-500z" />
-<glyph unicode="&#xe035;" d="M0 275q0 -11 7 -18t18 -7h50q11 0 18 7t7 18v300q0 127 70.5 231.5t184.5 161.5t245 57t245 -57t184.5 -161.5t70.5 -231.5v-300q0 -11 7 -18t18 -7h50q11 0 18 7t7 18v300q0 116 -49.5 227t-131 192.5t-192.5 131t-227 49.5t-227 -49.5t-192.5 -131t-131 -192.5 t-49.5 -227v-300zM200 20v460q0 8 6 14t14 6h160q8 0 14 -6t6 -14v-460q0 -8 -6 -14t-14 -6h-160q-8 0 -14 6t-6 14zM800 20v460q0 8 6 14t14 6h160q8 0 14 -6t6 -14v-460q0 -8 -6 -14t-14 -6h-160q-8 0 -14 6t-6 14z" />
-<glyph unicode="&#xe036;" d="M0 400h300l300 -200v800l-300 -200h-300v-400zM688 459l141 141l-141 141l71 71l141 -141l141 141l71 -71l-141 -141l141 -141l-71 -71l-141 141l-141 -141z" />
-<glyph unicode="&#xe037;" d="M0 400h300l300 -200v800l-300 -200h-300v-400zM700 857l69 53q111 -135 111 -310q0 -169 -106 -302l-67 54q86 110 86 248q0 146 -93 257z" />
-<glyph unicode="&#xe038;" d="M0 401v400h300l300 200v-800l-300 200h-300zM702 858l69 53q111 -135 111 -310q0 -170 -106 -303l-67 55q86 110 86 248q0 145 -93 257zM889 951l7 -8q123 -151 123 -344q0 -189 -119 -339l-7 -8l81 -66l6 8q142 178 142 405q0 230 -144 408l-6 8z" />
-<glyph unicode="&#xe039;" d="M0 0h500v500h-200v100h-100v-100h-200v-500zM0 600h100v100h400v100h100v100h-100v300h-500v-600zM100 100v300h300v-300h-300zM100 800v300h300v-300h-300zM200 200v100h100v-100h-100zM200 900h100v100h-100v-100zM500 500v100h300v-300h200v-100h-100v-100h-200v100 h-100v100h100v200h-200zM600 0v100h100v-100h-100zM600 1000h100v-300h200v-300h300v200h-200v100h200v500h-600v-200zM800 800v300h300v-300h-300zM900 0v100h300v-100h-300zM900 900v100h100v-100h-100zM1100 200v100h100v-100h-100z" />
-<glyph unicode="&#xe040;" d="M0 200h100v1000h-100v-1000zM100 0v100h300v-100h-300zM200 200v1000h100v-1000h-100zM500 0v91h100v-91h-100zM500 200v1000h200v-1000h-200zM700 0v91h100v-91h-100zM800 200v1000h100v-1000h-100zM900 0v91h200v-91h-200zM1000 200v1000h200v-1000h-200z" />
-<glyph unicode="&#xe041;" d="M0 700l1 475q0 10 7.5 17.5t17.5 7.5h474l700 -700l-500 -500zM148 953q0 -42 29 -71q30 -30 71.5 -30t71.5 30q29 29 29 71t-29 71q-30 30 -71.5 30t-71.5 -30q-29 -29 -29 -71z" />
-<glyph unicode="&#xe042;" d="M1 700l1 475q0 11 7 18t18 7h474l700 -700l-500 -500zM148 953q0 -42 30 -71q29 -30 71 -30t71 30q30 29 30 71t-30 71q-29 30 -71 30t-71 -30q-30 -29 -30 -71zM701 1200h100l700 -700l-500 -500l-50 50l450 450z" />
-<glyph unicode="&#xe043;" d="M100 0v1025l175 175h925v-1000l-100 -100v1000h-750l-100 -100h750v-1000h-900z" />
-<glyph unicode="&#xe044;" d="M200 0l450 444l450 -443v1150q0 20 -14.5 35t-35.5 15h-800q-21 0 -35.5 -15t-14.5 -35v-1151z" />
-<glyph unicode="&#xe045;" d="M0 100v700h200l100 -200h600l100 200h200v-700h-200v200h-800v-200h-200zM253 829l40 -124h592l62 124l-94 346q-2 11 -10 18t-18 7h-450q-10 0 -18 -7t-10 -18zM281 24l38 152q2 10 11.5 17t19.5 7h500q10 0 19.5 -7t11.5 -17l38 -152q2 -10 -3.5 -17t-15.5 -7h-600 q-10 0 -15.5 7t-3.5 17z" />
-<glyph unicode="&#xe046;" d="M0 200q0 -41 29.5 -70.5t70.5 -29.5h1000q41 0 70.5 29.5t29.5 70.5v600q0 41 -29.5 70.5t-70.5 29.5h-150q-4 8 -11.5 21.5t-33 48t-53 61t-69 48t-83.5 21.5h-200q-41 0 -82 -20.5t-70 -50t-52 -59t-34 -50.5l-12 -20h-150q-41 0 -70.5 -29.5t-29.5 -70.5v-600z M356 500q0 100 72 172t172 72t172 -72t72 -172t-72 -172t-172 -72t-172 72t-72 172zM494 500q0 -44 31 -75t75 -31t75 31t31 75t-31 75t-75 31t-75 -31t-31 -75zM900 700v100h100v-100h-100z" />
-<glyph unicode="&#xe047;" d="M53 0h365v66q-41 0 -72 11t-49 38t1 71l92 234h391l82 -222q16 -45 -5.5 -88.5t-74.5 -43.5v-66h417v66q-34 1 -74 43q-18 19 -33 42t-21 37l-6 13l-385 998h-93l-399 -1006q-24 -48 -52 -75q-12 -12 -33 -25t-36 -20l-15 -7v-66zM416 521l178 457l46 -140l116 -317h-340 z" />
-<glyph unicode="&#xe048;" d="M100 0v89q41 7 70.5 32.5t29.5 65.5v827q0 28 -1 39.5t-5.5 26t-15.5 21t-29 14t-49 14.5v71l471 -1q120 0 213 -88t93 -228q0 -55 -11.5 -101.5t-28 -74t-33.5 -47.5t-28 -28l-12 -7q8 -3 21.5 -9t48 -31.5t60.5 -58t47.5 -91.5t21.5 -129q0 -84 -59 -156.5t-142 -111 t-162 -38.5h-500zM400 200h161q89 0 153 48.5t64 132.5q0 90 -62.5 154.5t-156.5 64.5h-159v-400zM400 700h139q76 0 130 61.5t54 138.5q0 82 -84 130.5t-239 48.5v-379z" />
-<glyph unicode="&#xe049;" d="M200 0v57q77 7 134.5 40.5t65.5 80.5l173 849q10 56 -10 74t-91 37q-6 1 -10.5 2.5t-9.5 2.5v57h425l2 -57q-33 -8 -62 -25.5t-46 -37t-29.5 -38t-17.5 -30.5l-5 -12l-128 -825q-10 -52 14 -82t95 -36v-57h-500z" />
-<glyph unicode="&#xe050;" d="M-75 200h75v800h-75l125 167l125 -167h-75v-800h75l-125 -167zM300 900v300h150h700h150v-300h-50q0 29 -8 48.5t-18.5 30t-33.5 15t-39.5 5.5t-50.5 1h-200v-850l100 -50v-100h-400v100l100 50v850h-200q-34 0 -50.5 -1t-40 -5.5t-33.5 -15t-18.5 -30t-8.5 -48.5h-49z " />
-<glyph unicode="&#xe051;" d="M33 51l167 125v-75h800v75l167 -125l-167 -125v75h-800v-75zM100 901v300h150h700h150v-300h-50q0 29 -8 48.5t-18 30t-33.5 15t-40 5.5t-50.5 1h-200v-650l100 -50v-100h-400v100l100 50v650h-200q-34 0 -50.5 -1t-39.5 -5.5t-33.5 -15t-18.5 -30t-8 -48.5h-50z" />
-<glyph unicode="&#xe052;" d="M0 50q0 -20 14.5 -35t35.5 -15h1100q21 0 35.5 15t14.5 35v100q0 21 -14.5 35.5t-35.5 14.5h-1100q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM0 350q0 -20 14.5 -35t35.5 -15h800q21 0 35.5 15t14.5 35v100q0 21 -14.5 35.5t-35.5 14.5h-800q-21 0 -35.5 -14.5t-14.5 -35.5 v-100zM0 650q0 -20 14.5 -35t35.5 -15h1000q21 0 35.5 15t14.5 35v100q0 21 -14.5 35.5t-35.5 14.5h-1000q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM0 950q0 -20 14.5 -35t35.5 -15h600q21 0 35.5 15t14.5 35v100q0 21 -14.5 35.5t-35.5 14.5h-600q-21 0 -35.5 -14.5 t-14.5 -35.5v-100z" />
-<glyph unicode="&#xe053;" d="M0 50q0 -20 14.5 -35t35.5 -15h1100q21 0 35.5 15t14.5 35v100q0 21 -14.5 35.5t-35.5 14.5h-1100q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM0 650q0 -20 14.5 -35t35.5 -15h1100q21 0 35.5 15t14.5 35v100q0 21 -14.5 35.5t-35.5 14.5h-1100q-21 0 -35.5 -14.5t-14.5 -35.5 v-100zM200 350q0 -20 14.5 -35t35.5 -15h700q21 0 35.5 15t14.5 35v100q0 21 -14.5 35.5t-35.5 14.5h-700q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM200 950q0 -20 14.5 -35t35.5 -15h700q21 0 35.5 15t14.5 35v100q0 21 -14.5 35.5t-35.5 14.5h-700q-21 0 -35.5 -14.5 t-14.5 -35.5v-100z" />
-<glyph unicode="&#xe054;" d="M0 50v100q0 21 14.5 35.5t35.5 14.5h1100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-1100q-21 0 -35.5 15t-14.5 35zM100 650v100q0 21 14.5 35.5t35.5 14.5h1000q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-1000q-21 0 -35.5 15 t-14.5 35zM300 350v100q0 21 14.5 35.5t35.5 14.5h800q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-800q-21 0 -35.5 15t-14.5 35zM500 950v100q0 21 14.5 35.5t35.5 14.5h600q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-600 q-21 0 -35.5 15t-14.5 35z" />
-<glyph unicode="&#xe055;" d="M0 50v100q0 21 14.5 35.5t35.5 14.5h1100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-1100q-21 0 -35.5 15t-14.5 35zM0 350v100q0 21 14.5 35.5t35.5 14.5h1100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-1100q-21 0 -35.5 15 t-14.5 35zM0 650v100q0 21 14.5 35.5t35.5 14.5h1100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-1100q-21 0 -35.5 15t-14.5 35zM0 950v100q0 21 14.5 35.5t35.5 14.5h1100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-1100 q-21 0 -35.5 15t-14.5 35z" />
-<glyph unicode="&#xe056;" d="M0 50v100q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-100q-21 0 -35.5 15t-14.5 35zM0 350v100q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-100q-21 0 -35.5 15 t-14.5 35zM0 650v100q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-100q-21 0 -35.5 15t-14.5 35zM0 950v100q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-100q-21 0 -35.5 15 t-14.5 35zM300 50v100q0 21 14.5 35.5t35.5 14.5h800q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-800q-21 0 -35.5 15t-14.5 35zM300 350v100q0 21 14.5 35.5t35.5 14.5h800q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-800 q-21 0 -35.5 15t-14.5 35zM300 650v100q0 21 14.5 35.5t35.5 14.5h800q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-800q-21 0 -35.5 15t-14.5 35zM300 950v100q0 21 14.5 35.5t35.5 14.5h800q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15 h-800q-21 0 -35.5 15t-14.5 35z" />
-<glyph unicode="&#xe057;" d="M-101 500v100h201v75l166 -125l-166 -125v75h-201zM300 0h100v1100h-100v-1100zM500 50q0 -20 14.5 -35t35.5 -15h600q20 0 35 15t15 35v100q0 21 -15 35.5t-35 14.5h-600q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM500 350q0 -20 14.5 -35t35.5 -15h300q20 0 35 15t15 35 v100q0 21 -15 35.5t-35 14.5h-300q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM500 650q0 -20 14.5 -35t35.5 -15h500q20 0 35 15t15 35v100q0 21 -15 35.5t-35 14.5h-500q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM500 950q0 -20 14.5 -35t35.5 -15h100q20 0 35 15t15 35v100 q0 21 -15 35.5t-35 14.5h-100q-21 0 -35.5 -14.5t-14.5 -35.5v-100z" />
-<glyph unicode="&#xe058;" d="M1 50q0 -20 14.5 -35t35.5 -15h600q20 0 35 15t15 35v100q0 21 -15 35.5t-35 14.5h-600q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM1 350q0 -20 14.5 -35t35.5 -15h300q20 0 35 15t15 35v100q0 21 -15 35.5t-35 14.5h-300q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM1 650 q0 -20 14.5 -35t35.5 -15h500q20 0 35 15t15 35v100q0 21 -15 35.5t-35 14.5h-500q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM1 950q0 -20 14.5 -35t35.5 -15h100q20 0 35 15t15 35v100q0 21 -15 35.5t-35 14.5h-100q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM801 0v1100h100v-1100 h-100zM934 550l167 -125v75h200v100h-200v75z" />
-<glyph unicode="&#xe059;" d="M0 275v650q0 31 22 53t53 22h750q31 0 53 -22t22 -53v-650q0 -31 -22 -53t-53 -22h-750q-31 0 -53 22t-22 53zM900 600l300 300v-600z" />
-<glyph unicode="&#xe060;" d="M0 44v1012q0 18 13 31t31 13h1112q19 0 31.5 -13t12.5 -31v-1012q0 -18 -12.5 -31t-31.5 -13h-1112q-18 0 -31 13t-13 31zM100 263l247 182l298 -131l-74 156l293 318l236 -288v500h-1000v-737zM208 750q0 56 39 95t95 39t95 -39t39 -95t-39 -95t-95 -39t-95 39t-39 95z " />
-<glyph unicode="&#xe062;" d="M148 745q0 124 60.5 231.5t165 172t226.5 64.5q123 0 227 -63t164.5 -169.5t60.5 -229.5t-73 -272q-73 -114 -166.5 -237t-150.5 -189l-57 -66q-10 9 -27 26t-66.5 70.5t-96 109t-104 135.5t-100.5 155q-63 139 -63 262zM342 772q0 -107 75.5 -182.5t181.5 -75.5 q107 0 182.5 75.5t75.5 182.5t-75.5 182t-182.5 75t-182 -75.5t-75 -181.5z" />
-<glyph unicode="&#xe063;" d="M1 600q0 122 47.5 233t127.5 191t191 127.5t233 47.5t233 -47.5t191 -127.5t127.5 -191t47.5 -233t-47.5 -233t-127.5 -191t-191 -127.5t-233 -47.5t-233 47.5t-191 127.5t-127.5 191t-47.5 233zM173 600q0 -177 125.5 -302t301.5 -125v854q-176 0 -301.5 -125 t-125.5 -302z" />
-<glyph unicode="&#xe064;" d="M117 406q0 94 34 186t88.5 172.5t112 159t115 177t87.5 194.5q21 -71 57.5 -142.5t76 -130.5t83 -118.5t82 -117t70 -116t50 -125.5t18.5 -136q0 -89 -39 -165.5t-102 -126.5t-140 -79.5t-156 -33.5q-114 6 -211.5 53t-161.5 139t-64 210zM243 414q14 -82 59.5 -136 t136.5 -80l16 98q-7 6 -18 17t-34 48t-33 77q-15 73 -14 143.5t10 122.5l9 51q-92 -110 -119.5 -185t-12.5 -156z" />
-<glyph unicode="&#xe065;" d="M0 400v300q0 165 117.5 282.5t282.5 117.5q366 -6 397 -14l-186 -186h-311q-41 0 -70.5 -29.5t-29.5 -70.5v-500q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5v125l200 200v-225q0 -165 -117.5 -282.5t-282.5 -117.5h-300q-165 0 -282.5 117.5 t-117.5 282.5zM436 341l161 50l412 412l-114 113l-405 -405zM995 1015l113 -113l113 113l-21 85l-92 28z" />
-<glyph unicode="&#xe066;" d="M0 400v300q0 165 117.5 282.5t282.5 117.5h261l2 -80q-133 -32 -218 -120h-145q-41 0 -70.5 -29.5t-29.5 -70.5v-500q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5l200 153v-53q0 -165 -117.5 -282.5t-282.5 -117.5h-300q-165 0 -282.5 117.5t-117.5 282.5 zM423 524q30 38 81.5 64t103 35.5t99 14t77.5 3.5l29 -1v-209l360 324l-359 318v-216q-7 0 -19 -1t-48 -8t-69.5 -18.5t-76.5 -37t-76.5 -59t-62 -88t-39.5 -121.5z" />
-<glyph unicode="&#xe067;" d="M0 400v300q0 165 117.5 282.5t282.5 117.5h300q61 0 127 -23l-178 -177h-349q-41 0 -70.5 -29.5t-29.5 -70.5v-500q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5v69l200 200v-169q0 -165 -117.5 -282.5t-282.5 -117.5h-300q-165 0 -282.5 117.5 t-117.5 282.5zM342 632l283 -284l567 567l-137 137l-430 -431l-146 147z" />
-<glyph unicode="&#xe068;" d="M0 603l300 296v-198h200v200h-200l300 300l295 -300h-195v-200h200v198l300 -296l-300 -300v198h-200v-200h195l-295 -300l-300 300h200v200h-200v-198z" />
-<glyph unicode="&#xe069;" d="M200 50v1000q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-437l500 487v-1100l-500 488v-438q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5z" />
-<glyph unicode="&#xe070;" d="M0 50v1000q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-437l500 487v-487l500 487v-1100l-500 488v-488l-500 488v-438q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5z" />
-<glyph unicode="&#xe071;" d="M136 550l564 550v-487l500 487v-1100l-500 488v-488z" />
-<glyph unicode="&#xe072;" d="M200 0l900 550l-900 550v-1100z" />
-<glyph unicode="&#xe073;" d="M200 150q0 -21 14.5 -35.5t35.5 -14.5h200q21 0 35.5 14.5t14.5 35.5v800q0 21 -14.5 35.5t-35.5 14.5h-200q-21 0 -35.5 -14.5t-14.5 -35.5v-800zM600 150q0 -21 14.5 -35.5t35.5 -14.5h200q21 0 35.5 14.5t14.5 35.5v800q0 21 -14.5 35.5t-35.5 14.5h-200 q-21 0 -35.5 -14.5t-14.5 -35.5v-800z" />
-<glyph unicode="&#xe074;" d="M200 150q0 -20 14.5 -35t35.5 -15h800q21 0 35.5 15t14.5 35v800q0 21 -14.5 35.5t-35.5 14.5h-800q-21 0 -35.5 -14.5t-14.5 -35.5v-800z" />
-<glyph unicode="&#xe075;" d="M0 0v1100l500 -487v487l564 -550l-564 -550v488z" />
-<glyph unicode="&#xe076;" d="M0 0v1100l500 -487v487l500 -487v437q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-1000q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5v438l-500 -488v488z" />
-<glyph unicode="&#xe077;" d="M300 0v1100l500 -487v437q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-1000q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5v438z" />
-<glyph unicode="&#xe078;" d="M100 250v100q0 21 14.5 35.5t35.5 14.5h1000q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-1000q-21 0 -35.5 14.5t-14.5 35.5zM100 500h1100l-550 564z" />
-<glyph unicode="&#xe079;" d="M185 599l592 -592l240 240l-353 353l353 353l-240 240z" />
-<glyph unicode="&#xe080;" d="M272 194l353 353l-353 353l241 240l572 -571l21 -22l-1 -1v-1l-592 -591z" />
-<glyph unicode="&#xe081;" d="M3 600q0 162 80 299.5t217.5 217.5t299.5 80t299.5 -80t217.5 -217.5t80 -299.5t-80 -299.5t-217.5 -217.5t-299.5 -80t-299.5 80t-217.5 217.5t-80 299.5zM300 500h200v-200h200v200h200v200h-200v200h-200v-200h-200v-200z" />
-<glyph unicode="&#xe082;" d="M3 600q0 162 80 299.5t217.5 217.5t299.5 80t299.5 -80t217.5 -217.5t80 -299.5t-80 -299.5t-217.5 -217.5t-299.5 -80t-299.5 80t-217.5 217.5t-80 299.5zM300 500h600v200h-600v-200z" />
-<glyph unicode="&#xe083;" d="M3 600q0 162 80 299.5t217.5 217.5t299.5 80t299.5 -80t217.5 -217.5t80 -299.5t-80 -299.5t-217.5 -217.5t-299.5 -80t-299.5 80t-217.5 217.5t-80 299.5zM246 459l213 -213l141 142l141 -142l213 213l-142 141l142 141l-213 212l-141 -141l-141 142l-212 -213l141 -141 z" />
-<glyph unicode="&#xe084;" d="M3 600q0 162 80 299.5t217.5 217.5t299.5 80t299.5 -80t217.5 -217.5t80 -299.5t-80 -299.5t-217.5 -217.5t-299.5 -80t-299.5 80t-217.5 217.5t-80 299.5zM270 551l276 -277l411 411l-175 174l-236 -236l-102 102z" />
-<glyph unicode="&#xe085;" d="M3 600q0 162 80 299.5t217.5 217.5t299.5 80t299.5 -80t217.5 -217.5t80 -299.5t-80 -299.5t-217.5 -217.5t-299.5 -80t-299.5 80t-217.5 217.5t-80 299.5zM364 700h143q4 0 11.5 -1t11 -1t6.5 3t3 9t1 11t3.5 8.5t3.5 6t5.5 4t6.5 2.5t9 1.5t9 0.5h11.5h12.5 q19 0 30 -10t11 -26q0 -22 -4 -28t-27 -22q-5 -1 -12.5 -3t-27 -13.5t-34 -27t-26.5 -46t-11 -68.5h200q5 3 14 8t31.5 25.5t39.5 45.5t31 69t14 94q0 51 -17.5 89t-42 58t-58.5 32t-58.5 15t-51.5 3q-50 0 -90.5 -12t-75 -38.5t-53.5 -74.5t-19 -114zM500 300h200v100h-200 v-100z" />
-<glyph unicode="&#xe086;" d="M3 600q0 162 80 299.5t217.5 217.5t299.5 80t299.5 -80t217.5 -217.5t80 -299.5t-80 -299.5t-217.5 -217.5t-299.5 -80t-299.5 80t-217.5 217.5t-80 299.5zM400 300h400v100h-100v300h-300v-100h100v-200h-100v-100zM500 800h200v100h-200v-100z" />
-<glyph unicode="&#xe087;" d="M0 500v200h195q31 125 98.5 199.5t206.5 100.5v200h200v-200q54 -20 113 -60t112.5 -105.5t71.5 -134.5h203v-200h-203q-25 -102 -116.5 -186t-180.5 -117v-197h-200v197q-140 27 -208 102.5t-98 200.5h-194zM290 500q24 -73 79.5 -127.5t130.5 -78.5v206h200v-206 q149 48 201 206h-201v200h200q-25 74 -75.5 127t-124.5 77v-204h-200v203q-75 -23 -130 -77t-79 -126h209v-200h-210z" />
-<glyph unicode="&#xe088;" d="M4 600q0 162 80 299t217 217t299 80t299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299zM186 600q0 -171 121.5 -292.5t292.5 -121.5t292.5 121.5t121.5 292.5t-121.5 292.5t-292.5 121.5t-292.5 -121.5t-121.5 -292.5zM356 465l135 135 l-135 135l109 109l135 -135l135 135l109 -109l-135 -135l135 -135l-109 -109l-135 135l-135 -135z" />
-<glyph unicode="&#xe089;" d="M4 600q0 162 80 299t217 217t299 80t299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299zM186 600q0 -171 121.5 -292.5t292.5 -121.5t292.5 121.5t121.5 292.5t-121.5 292.5t-292.5 121.5t-292.5 -121.5t-121.5 -292.5zM322 537l141 141 l87 -87l204 205l142 -142l-346 -345z" />
-<glyph unicode="&#xe090;" d="M4 600q0 162 80 299t217 217t299 80t299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299zM186 600q0 -115 62 -215l568 567q-100 62 -216 62q-171 0 -292.5 -121.5t-121.5 -292.5zM391 245q97 -59 209 -59q171 0 292.5 121.5t121.5 292.5 q0 112 -59 209z" />
-<glyph unicode="&#xe091;" d="M0 547l600 453v-300h600v-300h-600v-301z" />
-<glyph unicode="&#xe092;" d="M0 400v300h600v300l600 -453l-600 -448v301h-600z" />
-<glyph unicode="&#xe093;" d="M204 600l450 600l444 -600h-298v-600h-300v600h-296z" />
-<glyph unicode="&#xe094;" d="M104 600h296v600h300v-600h298l-449 -600z" />
-<glyph unicode="&#xe095;" d="M0 200q6 132 41 238.5t103.5 193t184 138t271.5 59.5v271l600 -453l-600 -448v301q-95 -2 -183 -20t-170 -52t-147 -92.5t-100 -135.5z" />
-<glyph unicode="&#xe096;" d="M0 0v400l129 -129l294 294l142 -142l-294 -294l129 -129h-400zM635 777l142 -142l294 294l129 -129v400h-400l129 -129z" />
-<glyph unicode="&#xe097;" d="M34 176l295 295l-129 129h400v-400l-129 130l-295 -295zM600 600v400l129 -129l295 295l142 -141l-295 -295l129 -130h-400z" />
-<glyph unicode="&#xe101;" d="M23 600q0 118 45.5 224.5t123 184t184 123t224.5 45.5t224.5 -45.5t184 -123t123 -184t45.5 -224.5t-45.5 -224.5t-123 -184t-184 -123t-224.5 -45.5t-224.5 45.5t-184 123t-123 184t-45.5 224.5zM456 851l58 -302q4 -20 21.5 -34.5t37.5 -14.5h54q20 0 37.5 14.5 t21.5 34.5l58 302q4 20 -8 34.5t-32 14.5h-207q-21 0 -33 -14.5t-8 -34.5zM500 300h200v100h-200v-100z" />
-<glyph unicode="&#xe102;" d="M0 800h100v-200h400v300h200v-300h400v200h100v100h-111q1 1 1 6.5t-1.5 15t-3.5 17.5l-34 172q-11 39 -41.5 63t-69.5 24q-32 0 -61 -17l-239 -144q-22 -13 -40 -35q-19 24 -40 36l-238 144q-33 18 -62 18q-39 0 -69.5 -23t-40.5 -61l-35 -177q-2 -8 -3 -18t-1 -15v-6 h-111v-100zM100 0h400v400h-400v-400zM200 900q-3 0 14 48t36 96l18 47l213 -191h-281zM700 0v400h400v-400h-400zM731 900l202 197q5 -12 12 -32.5t23 -64t25 -72t7 -28.5h-269z" />
-<glyph unicode="&#xe103;" d="M0 -22v143l216 193q-9 53 -13 83t-5.5 94t9 113t38.5 114t74 124q47 60 99.5 102.5t103 68t127.5 48t145.5 37.5t184.5 43.5t220 58.5q0 -189 -22 -343t-59 -258t-89 -181.5t-108.5 -120t-122 -68t-125.5 -30t-121.5 -1.5t-107.5 12.5t-87.5 17t-56.5 7.5l-99 -55z M238.5 300.5q19.5 -6.5 86.5 76.5q55 66 367 234q70 38 118.5 69.5t102 79t99 111.5t86.5 148q22 50 24 60t-6 19q-7 5 -17 5t-26.5 -14.5t-33.5 -39.5q-35 -51 -113.5 -108.5t-139.5 -89.5l-61 -32q-369 -197 -458 -401q-48 -111 -28.5 -117.5z" />
-<glyph unicode="&#xe104;" d="M111 408q0 -33 5 -63q9 -56 44 -119.5t105 -108.5q31 -21 64 -16t62 23.5t57 49.5t48 61.5t35 60.5q32 66 39 184.5t-13 157.5q79 -80 122 -164t26 -184q-5 -33 -20.5 -69.5t-37.5 -80.5q-10 -19 -14.5 -29t-12 -26t-9 -23.5t-3 -19t2.5 -15.5t11 -9.5t19.5 -5t30.5 2.5 t42 8q57 20 91 34t87.5 44.5t87 64t65.5 88.5t47 122q38 172 -44.5 341.5t-246.5 278.5q22 -44 43 -129q39 -159 -32 -154q-15 2 -33 9q-79 33 -120.5 100t-44 175.5t48.5 257.5q-13 -8 -34 -23.5t-72.5 -66.5t-88.5 -105.5t-60 -138t-8 -166.5q2 -12 8 -41.5t8 -43t6 -39.5 t3.5 -39.5t-1 -33.5t-6 -31.5t-13.5 -24t-21 -20.5t-31 -12q-38 -10 -67 13t-40.5 61.5t-15 81.5t10.5 75q-52 -46 -83.5 -101t-39 -107t-7.5 -85z" />
-<glyph unicode="&#xe105;" d="M-61 600l26 40q6 10 20 30t49 63.5t74.5 85.5t97 90t116.5 83.5t132.5 59t145.5 23.5t145.5 -23.5t132.5 -59t116.5 -83.5t97 -90t74.5 -85.5t49 -63.5t20 -30l26 -40l-26 -40q-6 -10 -20 -30t-49 -63.5t-74.5 -85.5t-97 -90t-116.5 -83.5t-132.5 -59t-145.5 -23.5 t-145.5 23.5t-132.5 59t-116.5 83.5t-97 90t-74.5 85.5t-49 63.5t-20 30zM120 600q7 -10 40.5 -58t56 -78.5t68 -77.5t87.5 -75t103 -49.5t125 -21.5t123.5 20t100.5 45.5t85.5 71.5t66.5 75.5t58 81.5t47 66q-1 1 -28.5 37.5t-42 55t-43.5 53t-57.5 63.5t-58.5 54 q49 -74 49 -163q0 -124 -88 -212t-212 -88t-212 88t-88 212q0 85 46 158q-102 -87 -226 -258zM377 656q49 -124 154 -191l105 105q-37 24 -75 72t-57 84l-20 36z" />
-<glyph unicode="&#xe106;" d="M-61 600l26 40q6 10 20 30t49 63.5t74.5 85.5t97 90t116.5 83.5t132.5 59t145.5 23.5q61 0 121 -17l37 142h148l-314 -1200h-148l37 143q-82 21 -165 71.5t-140 102t-109.5 112t-72 88.5t-29.5 43zM120 600q210 -282 393 -336l37 141q-107 18 -178.5 101.5t-71.5 193.5 q0 85 46 158q-102 -87 -226 -258zM377 656q49 -124 154 -191l47 47l23 87q-30 28 -59 69t-44 68l-14 26zM780 161l38 145q22 15 44.5 34t46 44t40.5 44t41 50.5t33.5 43.5t33 44t24.5 34q-97 127 -140 175l39 146q67 -54 131.5 -125.5t87.5 -103.5t36 -52l26 -40l-26 -40 q-7 -12 -25.5 -38t-63.5 -79.5t-95.5 -102.5t-124 -100t-146.5 -79z" />
-<glyph unicode="&#xe107;" d="M-97.5 34q13.5 -34 50.5 -34h1294q37 0 50.5 35.5t-7.5 67.5l-642 1056q-20 34 -48 36.5t-48 -29.5l-642 -1066q-21 -32 -7.5 -66zM155 200l445 723l445 -723h-345v100h-200v-100h-345zM500 600l100 -300l100 300v100h-200v-100z" />
-<glyph unicode="&#xe108;" d="M100 262v41q0 20 11 44.5t26 38.5l363 325v339q0 62 44 106t106 44t106 -44t44 -106v-339l363 -325q15 -14 26 -38.5t11 -44.5v-41q0 -20 -12 -26.5t-29 5.5l-359 249v-263q100 -91 100 -113v-64q0 -20 -13 -28.5t-32 0.5l-94 78h-222l-94 -78q-19 -9 -32 -0.5t-13 28.5 v64q0 22 100 113v263l-359 -249q-17 -12 -29 -5.5t-12 26.5z" />
-<glyph unicode="&#xe109;" d="M0 50q0 -20 14.5 -35t35.5 -15h1000q21 0 35.5 15t14.5 35v750h-1100v-750zM0 900h1100v150q0 21 -14.5 35.5t-35.5 14.5h-150v100h-100v-100h-500v100h-100v-100h-150q-21 0 -35.5 -14.5t-14.5 -35.5v-150zM100 100v100h100v-100h-100zM100 300v100h100v-100h-100z M100 500v100h100v-100h-100zM300 100v100h100v-100h-100zM300 300v100h100v-100h-100zM300 500v100h100v-100h-100zM500 100v100h100v-100h-100zM500 300v100h100v-100h-100zM500 500v100h100v-100h-100zM700 100v100h100v-100h-100zM700 300v100h100v-100h-100zM700 500 v100h100v-100h-100zM900 100v100h100v-100h-100zM900 300v100h100v-100h-100zM900 500v100h100v-100h-100z" />
-<glyph unicode="&#xe110;" d="M0 200v200h259l600 600h241v198l300 -295l-300 -300v197h-159l-600 -600h-341zM0 800h259l122 -122l141 142l-181 180h-341v-200zM678 381l141 142l122 -123h159v198l300 -295l-300 -300v197h-241z" />
-<glyph unicode="&#xe111;" d="M0 400v600q0 41 29.5 70.5t70.5 29.5h1000q41 0 70.5 -29.5t29.5 -70.5v-600q0 -41 -29.5 -70.5t-70.5 -29.5h-596l-304 -300v300h-100q-41 0 -70.5 29.5t-29.5 70.5z" />
-<glyph unicode="&#xe112;" d="M100 600v200h300v-250q0 -113 6 -145q17 -92 102 -117q39 -11 92 -11q37 0 66.5 5.5t50 15.5t36 24t24 31.5t14 37.5t7 42t2.5 45t0 47v25v250h300v-200q0 -42 -3 -83t-15 -104t-31.5 -116t-58 -109.5t-89 -96.5t-129 -65.5t-174.5 -25.5t-174.5 25.5t-129 65.5t-89 96.5 t-58 109.5t-31.5 116t-15 104t-3 83zM100 900v300h300v-300h-300zM800 900v300h300v-300h-300z" />
-<glyph unicode="&#xe113;" d="M-30 411l227 -227l352 353l353 -353l226 227l-578 579z" />
-<glyph unicode="&#xe114;" d="M70 797l580 -579l578 579l-226 227l-353 -353l-352 353z" />
-<glyph unicode="&#xe115;" d="M-198 700l299 283l300 -283h-203v-400h385l215 -200h-800v600h-196zM402 1000l215 -200h381v-400h-198l299 -283l299 283h-200v600h-796z" />
-<glyph unicode="&#xe116;" d="M18 939q-5 24 10 42q14 19 39 19h896l38 162q5 17 18.5 27.5t30.5 10.5h94q20 0 35 -14.5t15 -35.5t-15 -35.5t-35 -14.5h-54l-201 -961q-2 -4 -6 -10.5t-19 -17.5t-33 -11h-31v-50q0 -20 -14.5 -35t-35.5 -15t-35.5 15t-14.5 35v50h-300v-50q0 -20 -14.5 -35t-35.5 -15 t-35.5 15t-14.5 35v50h-50q-21 0 -35.5 15t-14.5 35q0 21 14.5 35.5t35.5 14.5h535l48 200h-633q-32 0 -54.5 21t-27.5 43z" />
-<glyph unicode="&#xe117;" d="M0 0v800h1200v-800h-1200zM0 900v100h200q0 41 29.5 70.5t70.5 29.5h300q41 0 70.5 -29.5t29.5 -70.5h500v-100h-1200z" />
-<glyph unicode="&#xe118;" d="M1 0l300 700h1200l-300 -700h-1200zM1 400v600h200q0 41 29.5 70.5t70.5 29.5h300q41 0 70.5 -29.5t29.5 -70.5h500v-200h-1000z" />
-<glyph unicode="&#xe119;" d="M302 300h198v600h-198l298 300l298 -300h-198v-600h198l-298 -300z" />
-<glyph unicode="&#xe120;" d="M0 600l300 298v-198h600v198l300 -298l-300 -297v197h-600v-197z" />
-<glyph unicode="&#xe121;" d="M0 100v100q0 41 29.5 70.5t70.5 29.5h1000q41 0 70.5 -29.5t29.5 -70.5v-100q0 -41 -29.5 -70.5t-70.5 -29.5h-1000q-41 0 -70.5 29.5t-29.5 70.5zM31 400l172 739q5 22 23 41.5t38 19.5h672q19 0 37.5 -22.5t23.5 -45.5l172 -732h-1138zM800 100h100v100h-100v-100z M1000 100h100v100h-100v-100z" />
-<glyph unicode="&#xe122;" d="M-101 600v50q0 24 25 49t50 38l25 13v-250l-11 5.5t-24 14t-30 21.5t-24 27.5t-11 31.5zM100 500v250v8v8v7t0.5 7t1.5 5.5t2 5t3 4t4.5 3.5t6 1.5t7.5 0.5h200l675 250v-850l-675 200h-38l47 -276q2 -12 -3 -17.5t-11 -6t-21 -0.5h-8h-83q-20 0 -34.5 14t-18.5 35 q-55 337 -55 351zM1100 200v850q0 21 14.5 35.5t35.5 14.5q20 0 35 -14.5t15 -35.5v-850q0 -20 -15 -35t-35 -15q-21 0 -35.5 15t-14.5 35z" />
-<glyph unicode="&#xe123;" d="M74 350q0 21 13.5 35.5t33.5 14.5h18l117 173l63 327q15 77 76 140t144 83l-18 32q-6 19 3 32t29 13h94q20 0 29 -10.5t3 -29.5q-18 -36 -18 -37q83 -19 144 -82.5t76 -140.5l63 -327l118 -173h17q20 0 33.5 -14.5t13.5 -35.5q0 -20 -13 -40t-31 -27q-8 -3 -23 -8.5 t-65 -20t-103 -25t-132.5 -19.5t-158.5 -9q-125 0 -245.5 20.5t-178.5 40.5l-58 20q-18 7 -31 27.5t-13 40.5zM497 110q12 -49 40 -79.5t63 -30.5t63 30.5t39 79.5q-48 -6 -102 -6t-103 6z" />
-<glyph unicode="&#xe124;" d="M21 445l233 -45l-78 -224l224 78l45 -233l155 179l155 -179l45 233l224 -78l-78 224l234 45l-180 155l180 156l-234 44l78 225l-224 -78l-45 233l-155 -180l-155 180l-45 -233l-224 78l78 -225l-233 -44l179 -156z" />
-<glyph unicode="&#xe125;" d="M0 200h200v600h-200v-600zM300 275q0 -75 100 -75h61q124 -100 139 -100h250q46 0 83 57l238 344q29 31 29 74v100q0 44 -30.5 84.5t-69.5 40.5h-328q28 118 28 125v150q0 44 -30.5 84.5t-69.5 40.5h-50q-27 0 -51 -20t-38 -48l-96 -198l-145 -196q-20 -26 -20 -63v-400z M400 300v375l150 213l100 212h50v-175l-50 -225h450v-125l-250 -375h-214l-136 100h-100z" />
-<glyph unicode="&#xe126;" d="M0 400v600h200v-600h-200zM300 525v400q0 75 100 75h61q124 100 139 100h250q46 0 83 -57l238 -344q29 -31 29 -74v-100q0 -44 -30.5 -84.5t-69.5 -40.5h-328q28 -118 28 -125v-150q0 -44 -30.5 -84.5t-69.5 -40.5h-50q-27 0 -51 20t-38 48l-96 198l-145 196 q-20 26 -20 63zM400 525l150 -212l100 -213h50v175l-50 225h450v125l-250 375h-214l-136 -100h-100v-375z" />
-<glyph unicode="&#xe127;" d="M8 200v600h200v-600h-200zM308 275v525q0 17 14 35.5t28 28.5l14 9l362 230q14 6 25 6q17 0 29 -12l109 -112q14 -14 14 -34q0 -18 -11 -32l-85 -121h302q85 0 138.5 -38t53.5 -110t-54.5 -111t-138.5 -39h-107l-130 -339q-7 -22 -20.5 -41.5t-28.5 -19.5h-341 q-7 0 -90 81t-83 94zM408 289l100 -89h293l131 339q6 21 19.5 41t28.5 20h203q16 0 25 15t9 36q0 20 -9 34.5t-25 14.5h-457h-6.5h-7.5t-6.5 0.5t-6 1t-5 1.5t-5.5 2.5t-4 4t-4 5.5q-5 12 -5 20q0 14 10 27l147 183l-86 83l-339 -236v-503z" />
-<glyph unicode="&#xe128;" d="M-101 651q0 72 54 110t139 38l302 -1l-85 121q-11 16 -11 32q0 21 14 34l109 113q13 12 29 12q11 0 25 -6l365 -230q7 -4 17 -10.5t26.5 -26t16.5 -36.5v-526q0 -13 -86 -93.5t-94 -80.5h-341q-16 0 -29.5 20t-19.5 41l-130 339h-107q-84 0 -139 39t-55 111zM-1 601h222 q15 0 28.5 -20.5t19.5 -40.5l131 -339h293l107 89v502l-343 237l-87 -83l145 -184q10 -11 10 -26q0 -11 -5 -20q-1 -3 -3.5 -5.5l-4 -4t-5 -2.5t-5.5 -1.5t-6.5 -1t-6.5 -0.5h-7.5h-6.5h-476v-100zM1000 201v600h200v-600h-200z" />
-<glyph unicode="&#xe129;" d="M97 719l230 -363q4 -6 10.5 -15.5t26 -25t36.5 -15.5h525q13 0 94 83t81 90v342q0 15 -20 28.5t-41 19.5l-339 131v106q0 84 -39 139t-111 55t-110 -53.5t-38 -138.5v-302l-121 84q-15 12 -33.5 11.5t-32.5 -13.5l-112 -110q-22 -22 -6 -53zM172 739l83 86l183 -146 q22 -18 47 -5q3 1 5.5 3.5l4 4t2.5 5t1.5 5.5t1 6.5t0.5 6.5v7.5v6.5v456q0 22 25 31t50 -0.5t25 -30.5v-202q0 -16 20 -29.5t41 -19.5l339 -130v-294l-89 -100h-503zM400 0v200h600v-200h-600z" />
-<glyph unicode="&#xe130;" d="M2 585q-16 -31 6 -53l112 -110q13 -13 32 -13.5t34 10.5l121 85q0 -51 -0.5 -153.5t-0.5 -148.5q0 -84 38.5 -138t110.5 -54t111 55t39 139v106l339 131q20 6 40.5 19.5t20.5 28.5v342q0 7 -81 90t-94 83h-525q-17 0 -35.5 -14t-28.5 -28l-10 -15zM77 565l236 339h503 l89 -100v-294l-340 -130q-20 -6 -40 -20t-20 -29v-202q0 -22 -25 -31t-50 0t-25 31v456v14.5t-1.5 11.5t-5 12t-9.5 7q-24 13 -46 -5l-184 -146zM305 1104v200h600v-200h-600z" />
-<glyph unicode="&#xe131;" d="M5 597q0 122 47.5 232.5t127.5 190.5t190.5 127.5t232.5 47.5q162 0 299.5 -80t217.5 -218t80 -300t-80 -299.5t-217.5 -217.5t-299.5 -80t-300 80t-218 217.5t-80 299.5zM298 701l2 -201h300l-2 -194l402 294l-402 298v-197h-300z" />
-<glyph unicode="&#xe132;" d="M0 597q0 122 47.5 232.5t127.5 190.5t190.5 127.5t231.5 47.5q122 0 232.5 -47.5t190.5 -127.5t127.5 -190.5t47.5 -232.5q0 -162 -80 -299.5t-218 -217.5t-300 -80t-299.5 80t-217.5 217.5t-80 299.5zM200 600l402 -294l-2 194h300l2 201h-300v197z" />
-<glyph unicode="&#xe133;" d="M5 597q0 122 47.5 232.5t127.5 190.5t190.5 127.5t232.5 47.5q162 0 299.5 -80t217.5 -218t80 -300t-80 -299.5t-217.5 -217.5t-299.5 -80t-300 80t-218 217.5t-80 299.5zM300 600h200v-300h200v300h200l-300 400z" />
-<glyph unicode="&#xe134;" d="M5 597q0 122 47.5 232.5t127.5 190.5t190.5 127.5t232.5 47.5q162 0 299.5 -80t217.5 -218t80 -300t-80 -299.5t-217.5 -217.5t-299.5 -80t-300 80t-218 217.5t-80 299.5zM300 600l300 -400l300 400h-200v300h-200v-300h-200z" />
-<glyph unicode="&#xe135;" d="M5 597q0 122 47.5 232.5t127.5 190.5t190.5 127.5t232.5 47.5q121 0 231.5 -47.5t190.5 -127.5t127.5 -190.5t47.5 -232.5q0 -162 -80 -299.5t-217.5 -217.5t-299.5 -80t-300 80t-218 217.5t-80 299.5zM254 780q-8 -33 5.5 -92.5t7.5 -87.5q0 -9 17 -44t16 -60 q12 0 23 -5.5t23 -15t20 -13.5q24 -12 108 -42q22 -8 53 -31.5t59.5 -38.5t57.5 -11q8 -18 -15 -55t-20 -57q42 -71 87 -80q0 -6 -3 -15.5t-3.5 -14.5t4.5 -17q104 -3 221 112q30 29 47 47t34.5 49t20.5 62q-14 9 -37 9.5t-36 7.5q-14 7 -49 15t-52 19q-9 0 -39.5 -0.5 t-46.5 -1.5t-39 -6.5t-39 -16.5q-50 -35 -66 -12q-4 2 -3.5 25.5t0.5 25.5q-6 13 -26.5 17t-24.5 7q2 22 -2 41t-16.5 28t-38.5 -20q-23 -25 -42 4q-19 28 -8 58q6 16 22 22q6 -1 26 -1.5t33.5 -4t19.5 -13.5q12 -19 32 -37.5t34 -27.5l14 -8q0 3 9.5 39.5t5.5 57.5 q-4 23 14.5 44.5t22.5 31.5q5 14 10 35t8.5 31t15.5 22.5t34 21.5q-6 18 10 37q8 0 23.5 -1.5t24.5 -1.5t20.5 4.5t20.5 15.5q-10 23 -30.5 42.5t-38 30t-49 26.5t-43.5 23q11 39 2 44q31 -13 58 -14.5t39 3.5l11 4q7 36 -16.5 53.5t-64.5 28.5t-56 23q-19 -3 -37 0 q-15 -12 -36.5 -21t-34.5 -12t-44 -8t-39 -6q-15 -3 -45.5 0.5t-45.5 -2.5q-21 -7 -52 -26.5t-34 -34.5q-3 -11 6.5 -22.5t8.5 -18.5q-3 -34 -27.5 -90.5t-29.5 -79.5zM518 916q3 12 16 30t16 25q10 -10 18.5 -10t14 6t14.5 14.5t16 12.5q0 -24 17 -66.5t17 -43.5 q-9 2 -31 5t-36 5t-32 8t-30 14zM692 1003h1h-1z" />
-<glyph unicode="&#xe136;" d="M0 164.5q0 21.5 15 37.5l600 599q-33 101 6 201.5t135 154.5q164 92 306 -9l-259 -138l145 -232l251 126q13 -175 -151 -267q-123 -70 -253 -23l-596 -596q-15 -16 -36.5 -16t-36.5 16l-111 110q-15 15 -15 36.5z" />
-<glyph unicode="&#xe137;" horiz-adv-x="1220" d="M0 196v100q0 41 29.5 70.5t70.5 29.5h1000q41 0 70.5 -29.5t29.5 -70.5v-100q0 -41 -29.5 -70.5t-70.5 -29.5h-1000q-41 0 -70.5 29.5t-29.5 70.5zM0 596v100q0 41 29.5 70.5t70.5 29.5h1000q41 0 70.5 -29.5t29.5 -70.5v-100q0 -41 -29.5 -70.5t-70.5 -29.5h-1000 q-41 0 -70.5 29.5t-29.5 70.5zM0 996v100q0 41 29.5 70.5t70.5 29.5h1000q41 0 70.5 -29.5t29.5 -70.5v-100q0 -41 -29.5 -70.5t-70.5 -29.5h-1000q-41 0 -70.5 29.5t-29.5 70.5zM600 596h500v100h-500v-100zM800 196h300v100h-300v-100zM900 996h200v100h-200v-100z" />
-<glyph unicode="&#xe138;" d="M100 1100v100h1000v-100h-1000zM150 1000h900l-350 -500v-300l-200 -200v500z" />
-<glyph unicode="&#xe139;" d="M0 200v200h1200v-200q0 -41 -29.5 -70.5t-70.5 -29.5h-1000q-41 0 -70.5 29.5t-29.5 70.5zM0 500v400q0 41 29.5 70.5t70.5 29.5h300v100q0 41 29.5 70.5t70.5 29.5h200q41 0 70.5 -29.5t29.5 -70.5v-100h300q41 0 70.5 -29.5t29.5 -70.5v-400h-500v100h-200v-100h-500z M500 1000h200v100h-200v-100z" />
-<glyph unicode="&#xe140;" d="M0 0v400l129 -129l200 200l142 -142l-200 -200l129 -129h-400zM0 800l129 129l200 -200l142 142l-200 200l129 129h-400v-400zM729 329l142 142l200 -200l129 129v-400h-400l129 129zM729 871l200 200l-129 129h400v-400l-129 129l-200 -200z" />
-<glyph unicode="&#xe141;" d="M0 596q0 162 80 299t217 217t299 80t299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299zM182 596q0 -172 121.5 -293t292.5 -121t292.5 121t121.5 293q0 171 -121.5 292.5t-292.5 121.5t-292.5 -121.5t-121.5 -292.5zM291 655 q0 23 15.5 38.5t38.5 15.5t39 -16t16 -38q0 -23 -16 -39t-39 -16q-22 0 -38 16t-16 39zM400 850q0 22 16 38.5t39 16.5q22 0 38 -16t16 -39t-16 -39t-38 -16q-23 0 -39 16.5t-16 38.5zM514 609q0 32 20.5 56.5t51.5 29.5l122 126l1 1q-9 14 -9 28q0 22 16 38.5t39 16.5 q22 0 38 -16t16 -39t-16 -39t-38 -16q-14 0 -29 10l-55 -145q17 -22 17 -51q0 -36 -25.5 -61.5t-61.5 -25.5t-61.5 25.5t-25.5 61.5zM800 655q0 22 16 38t39 16t38.5 -15.5t15.5 -38.5t-16 -39t-38 -16q-23 0 -39 16t-16 39z" />
-<glyph unicode="&#xe142;" d="M-40 375q-13 -95 35 -173q35 -57 94 -89t129 -32q63 0 119 28q33 16 65 40.5t52.5 45.5t59.5 64q40 44 57 61l394 394q35 35 47 84t-3 96q-27 87 -117 104q-20 2 -29 2q-46 0 -78.5 -16.5t-67.5 -51.5l-389 -396l-7 -7l69 -67l377 373q20 22 39 38q23 23 50 23 q38 0 53 -36q16 -39 -20 -75l-547 -547q-52 -52 -125 -52q-55 0 -100 33t-54 96q-5 35 2.5 66t31.5 63t42 50t56 54q24 21 44 41l348 348q52 52 82.5 79.5t84 54t107.5 26.5q25 0 48 -4q95 -17 154 -94.5t51 -175.5q-7 -101 -98 -192l-252 -249l-253 -256l7 -7l69 -60 l517 511q67 67 95 157t11 183q-16 87 -67 154t-130 103q-69 33 -152 33q-107 0 -197 -55q-40 -24 -111 -95l-512 -512q-68 -68 -81 -163z" />
-<glyph unicode="&#xe143;" d="M80 784q0 131 98.5 229.5t230.5 98.5q143 0 241 -129q103 129 246 129q129 0 226 -98.5t97 -229.5q0 -46 -17.5 -91t-61 -99t-77 -89.5t-104.5 -105.5q-197 -191 -293 -322l-17 -23l-16 23q-43 58 -100 122.5t-92 99.5t-101 100q-71 70 -104.5 105.5t-77 89.5t-61 99 t-17.5 91zM250 784q0 -27 30.5 -70t61.5 -75.5t95 -94.5l22 -22q93 -90 190 -201q82 92 195 203l12 12q64 62 97.5 97t64.5 79t31 72q0 71 -48 119.5t-105 48.5q-74 0 -132 -83l-118 -171l-114 174q-51 80 -123 80q-60 0 -109.5 -49.5t-49.5 -118.5z" />
-<glyph unicode="&#xe144;" d="M57 353q0 -95 66 -159l141 -142q68 -66 159 -66q93 0 159 66l283 283q66 66 66 159t-66 159l-141 141q-8 9 -19 17l-105 -105l212 -212l-389 -389l-247 248l95 95l-18 18q-46 45 -75 101l-55 -55q-66 -66 -66 -159zM269 706q0 -93 66 -159l141 -141q7 -7 19 -17l105 105 l-212 212l389 389l247 -247l-95 -96l18 -17q47 -49 77 -100l29 29q35 35 62.5 88t27.5 96q0 93 -66 159l-141 141q-66 66 -159 66q-95 0 -159 -66l-283 -283q-66 -64 -66 -159z" />
-<glyph unicode="&#xe145;" d="M200 100v953q0 21 30 46t81 48t129 38t163 15t162 -15t127 -38t79 -48t29 -46v-953q0 -41 -29.5 -70.5t-70.5 -29.5h-600q-41 0 -70.5 29.5t-29.5 70.5zM300 300h600v700h-600v-700zM496 150q0 -43 30.5 -73.5t73.5 -30.5t73.5 30.5t30.5 73.5t-30.5 73.5t-73.5 30.5 t-73.5 -30.5t-30.5 -73.5z" />
-<glyph unicode="&#xe146;" d="M0 0l303 380l207 208l-210 212h300l267 279l-35 36q-15 14 -15 35t15 35q14 15 35 15t35 -15l283 -282q15 -15 15 -36t-15 -35q-14 -15 -35 -15t-35 15l-36 35l-279 -267v-300l-212 210l-208 -207z" />
-<glyph unicode="&#xe148;" d="M295 433h139q5 -77 48.5 -126.5t117.5 -64.5v335q-6 1 -15.5 4t-11.5 3q-46 14 -79 26.5t-72 36t-62.5 52t-40 72.5t-16.5 99q0 92 44 159.5t109 101t144 40.5v78h100v-79q38 -4 72.5 -13.5t75.5 -31.5t71 -53.5t51.5 -84t24.5 -118.5h-159q-8 72 -35 109.5t-101 50.5 v-307l64 -14q34 -7 64 -16.5t70 -31.5t67.5 -52t47.5 -80.5t20 -112.5q0 -139 -89 -224t-244 -96v-77h-100v78q-152 17 -237 104q-40 40 -52.5 93.5t-15.5 139.5zM466 889q0 -29 8 -51t16.5 -34t29.5 -22.5t31 -13.5t38 -10q7 -2 11 -3v274q-61 -8 -97.5 -37.5t-36.5 -102.5 zM700 237q170 18 170 151q0 64 -44 99.5t-126 60.5v-311z" />
-<glyph unicode="&#xe149;" d="M100 600v100h166q-24 49 -44 104q-10 26 -14.5 55.5t-3 72.5t25 90t68.5 87q97 88 263 88q129 0 230 -89t101 -208h-153q0 52 -34 89.5t-74 51.5t-76 14q-37 0 -79 -14.5t-62 -35.5q-41 -44 -41 -101q0 -28 16.5 -69.5t28 -62.5t41.5 -72h241v-100h-197q8 -50 -2.5 -115 t-31.5 -94q-41 -59 -99 -113q35 11 84 18t70 7q33 1 103 -16t103 -17q76 0 136 30l50 -147q-41 -25 -80.5 -36.5t-59 -13t-61.5 -1.5q-23 0 -128 33t-155 29q-39 -4 -82 -17t-66 -25l-24 -11l-55 145l16.5 11t15.5 10t13.5 9.5t14.5 12t14.5 14t17.5 18.5q48 55 54 126.5 t-30 142.5h-221z" />
-<glyph unicode="&#xe150;" d="M2 300l298 -300l298 300h-198v900h-200v-900h-198zM602 900l298 300l298 -300h-198v-900h-200v900h-198z" />
-<glyph unicode="&#xe151;" d="M2 300h198v900h200v-900h198l-298 -300zM700 0v200h100v-100h200v-100h-300zM700 400v100h300v-200h-99v-100h-100v100h99v100h-200zM700 700v500h300v-500h-100v100h-100v-100h-100zM801 900h100v200h-100v-200z" />
-<glyph unicode="&#xe152;" d="M2 300h198v900h200v-900h198l-298 -300zM700 0v500h300v-500h-100v100h-100v-100h-100zM700 700v200h100v-100h200v-100h-300zM700 1100v100h300v-200h-99v-100h-100v100h99v100h-200zM801 200h100v200h-100v-200z" />
-<glyph unicode="&#xe153;" d="M2 300l298 -300l298 300h-198v900h-200v-900h-198zM800 100v400h300v-500h-100v100h-200zM800 1100v100h200v-500h-100v400h-100zM901 200h100v200h-100v-200z" />
-<glyph unicode="&#xe154;" d="M2 300l298 -300l298 300h-198v900h-200v-900h-198zM800 400v100h200v-500h-100v400h-100zM800 800v400h300v-500h-100v100h-200zM901 900h100v200h-100v-200z" />
-<glyph unicode="&#xe155;" d="M2 300l298 -300l298 300h-198v900h-200v-900h-198zM700 100v200h500v-200h-500zM700 400v200h400v-200h-400zM700 700v200h300v-200h-300zM700 1000v200h200v-200h-200z" />
-<glyph unicode="&#xe156;" d="M2 300l298 -300l298 300h-198v900h-200v-900h-198zM700 100v200h200v-200h-200zM700 400v200h300v-200h-300zM700 700v200h400v-200h-400zM700 1000v200h500v-200h-500z" />
-<glyph unicode="&#xe157;" d="M0 400v300q0 165 117.5 282.5t282.5 117.5h300q162 0 281 -118.5t119 -281.5v-300q0 -165 -118.5 -282.5t-281.5 -117.5h-300q-165 0 -282.5 117.5t-117.5 282.5zM200 300q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5v500q0 41 -29.5 70.5t-70.5 29.5 h-500q-41 0 -70.5 -29.5t-29.5 -70.5v-500z" />
-<glyph unicode="&#xe158;" d="M0 400v300q0 163 119 281.5t281 118.5h300q165 0 282.5 -117.5t117.5 -282.5v-300q0 -165 -117.5 -282.5t-282.5 -117.5h-300q-163 0 -281.5 117.5t-118.5 282.5zM200 300q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5v500q0 41 -29.5 70.5t-70.5 29.5 h-500q-41 0 -70.5 -29.5t-29.5 -70.5v-500zM400 300l333 250l-333 250v-500z" />
-<glyph unicode="&#xe159;" d="M0 400v300q0 163 117.5 281.5t282.5 118.5h300q163 0 281.5 -119t118.5 -281v-300q0 -165 -117.5 -282.5t-282.5 -117.5h-300q-165 0 -282.5 117.5t-117.5 282.5zM200 300q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5v500q0 41 -29.5 70.5t-70.5 29.5 h-500q-41 0 -70.5 -29.5t-29.5 -70.5v-500zM300 700l250 -333l250 333h-500z" />
-<glyph unicode="&#xe160;" d="M0 400v300q0 165 117.5 282.5t282.5 117.5h300q165 0 282.5 -117.5t117.5 -282.5v-300q0 -162 -118.5 -281t-281.5 -119h-300q-165 0 -282.5 118.5t-117.5 281.5zM200 300q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5v500q0 41 -29.5 70.5t-70.5 29.5 h-500q-41 0 -70.5 -29.5t-29.5 -70.5v-500zM300 400h500l-250 333z" />
-<glyph unicode="&#xe161;" d="M0 400v300h300v200l400 -350l-400 -350v200h-300zM500 0v200h500q41 0 70.5 29.5t29.5 70.5v500q0 41 -29.5 70.5t-70.5 29.5h-500v200h400q165 0 282.5 -117.5t117.5 -282.5v-300q0 -165 -117.5 -282.5t-282.5 -117.5h-400z" />
-<glyph unicode="&#xe162;" d="M217 519q8 -19 31 -19h302q-155 -438 -160 -458q-5 -21 4 -32l9 -8h9q14 0 26 15q11 13 274.5 321.5t264.5 308.5q14 19 5 36q-8 17 -31 17l-301 -1q1 4 78 219.5t79 227.5q2 15 -5 27l-9 9h-9q-15 0 -25 -16q-4 -6 -98 -111.5t-228.5 -257t-209.5 -237.5q-16 -19 -6 -41 z" />
-<glyph unicode="&#xe163;" d="M0 400q0 -165 117.5 -282.5t282.5 -117.5h300q47 0 100 15v185h-500q-41 0 -70.5 29.5t-29.5 70.5v500q0 41 29.5 70.5t70.5 29.5h500v185q-14 4 -114 7.5t-193 5.5l-93 2q-165 0 -282.5 -117.5t-117.5 -282.5v-300zM600 400v300h300v200l400 -350l-400 -350v200h-300z " />
-<glyph unicode="&#xe164;" d="M0 400q0 -165 117.5 -282.5t282.5 -117.5h300q163 0 281.5 117.5t118.5 282.5v98l-78 73l-122 -123v-148q0 -41 -29.5 -70.5t-70.5 -29.5h-500q-41 0 -70.5 29.5t-29.5 70.5v500q0 41 29.5 70.5t70.5 29.5h156l118 122l-74 78h-100q-165 0 -282.5 -117.5t-117.5 -282.5 v-300zM496 709l353 342l-149 149h500v-500l-149 149l-342 -353z" />
-<glyph unicode="&#xe165;" d="M4 600q0 162 80 299t217 217t299 80t299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299zM186 600q0 -171 121.5 -292.5t292.5 -121.5t292.5 121.5t121.5 292.5t-121.5 292.5t-292.5 121.5t-292.5 -121.5t-121.5 -292.5zM406 600 q0 80 57 137t137 57t137 -57t57 -137t-57 -137t-137 -57t-137 57t-57 137z" />
-<glyph unicode="&#xe166;" d="M0 0v275q0 11 7 18t18 7h1048q11 0 19 -7.5t8 -17.5v-275h-1100zM100 800l445 -500l450 500h-295v400h-300v-400h-300zM900 150h100v50h-100v-50z" />
-<glyph unicode="&#xe167;" d="M0 0v275q0 11 7 18t18 7h1048q11 0 19 -7.5t8 -17.5v-275h-1100zM100 700h300v-300h300v300h295l-445 500zM900 150h100v50h-100v-50z" />
-<glyph unicode="&#xe168;" d="M0 0v275q0 11 7 18t18 7h1048q11 0 19 -7.5t8 -17.5v-275h-1100zM100 705l305 -305l596 596l-154 155l-442 -442l-150 151zM900 150h100v50h-100v-50z" />
-<glyph unicode="&#xe169;" d="M0 0v275q0 11 7 18t18 7h1048q11 0 19 -7.5t8 -17.5v-275h-1100zM100 988l97 -98l212 213l-97 97zM200 400l697 1l3 699l-250 -239l-149 149l-212 -212l149 -149zM900 150h100v50h-100v-50z" />
-<glyph unicode="&#xe170;" d="M0 0v275q0 11 7 18t18 7h1048q11 0 19 -7.5t8 -17.5v-275h-1100zM200 612l212 -212l98 97l-213 212zM300 1200l239 -250l-149 -149l212 -212l149 148l249 -237l-1 697zM900 150h100v50h-100v-50z" />
-<glyph unicode="&#xe171;" d="M23 415l1177 784v-1079l-475 272l-310 -393v416h-392zM494 210l672 938l-672 -712v-226z" />
-<glyph unicode="&#xe172;" d="M0 150v1000q0 20 14.5 35t35.5 15h250v-300h500v300h100l200 -200v-850q0 -21 -15 -35.5t-35 -14.5h-150v400h-700v-400h-150q-21 0 -35.5 14.5t-14.5 35.5zM600 1000h100v200h-100v-200z" />
-<glyph unicode="&#xe173;" d="M0 150v1000q0 20 14.5 35t35.5 15h250v-300h500v300h100l200 -200v-218l-276 -275l-120 120l-126 -127h-378v-400h-150q-21 0 -35.5 14.5t-14.5 35.5zM581 306l123 123l120 -120l353 352l123 -123l-475 -476zM600 1000h100v200h-100v-200z" />
-<glyph unicode="&#xe174;" d="M0 150v1000q0 20 14.5 35t35.5 15h250v-300h500v300h100l200 -200v-269l-103 -103l-170 170l-298 -298h-329v-400h-150q-21 0 -35.5 14.5t-14.5 35.5zM600 1000h100v200h-100v-200zM700 133l170 170l-170 170l127 127l170 -170l170 170l127 -128l-170 -169l170 -170 l-127 -127l-170 170l-170 -170z" />
-<glyph unicode="&#xe175;" d="M0 150v1000q0 20 14.5 35t35.5 15h250v-300h500v300h100l200 -200v-300h-400v-200h-500v-400h-150q-21 0 -35.5 14.5t-14.5 35.5zM600 300l300 -300l300 300h-200v300h-200v-300h-200zM600 1000v200h100v-200h-100z" />
-<glyph unicode="&#xe176;" d="M0 150v1000q0 20 14.5 35t35.5 15h250v-300h500v300h100l200 -200v-402l-200 200l-298 -298h-402v-400h-150q-21 0 -35.5 14.5t-14.5 35.5zM600 300h200v-300h200v300h200l-300 300zM600 1000v200h100v-200h-100z" />
-<glyph unicode="&#xe177;" d="M0 250q0 -21 14.5 -35.5t35.5 -14.5h1100q21 0 35.5 14.5t14.5 35.5v550h-1200v-550zM0 900h1200v150q0 21 -14.5 35.5t-35.5 14.5h-1100q-21 0 -35.5 -14.5t-14.5 -35.5v-150zM100 300v200h400v-200h-400z" />
-<glyph unicode="&#xe178;" d="M0 400l300 298v-198h400v-200h-400v-198zM100 800v200h100v-200h-100zM300 800v200h100v-200h-100zM500 800v200h400v198l300 -298l-300 -298v198h-400zM800 300v200h100v-200h-100zM1000 300h100v200h-100v-200z" />
-<glyph unicode="&#xe179;" d="M100 700v400l50 100l50 -100v-300h100v300l50 100l50 -100v-300h100v300l50 100l50 -100v-400l-100 -203v-447q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v447zM800 597q0 -29 10.5 -55.5t25 -43t29 -28.5t25.5 -18l10 -5v-397q0 -21 14.5 -35.5 t35.5 -14.5h200q21 0 35.5 14.5t14.5 35.5v1106q0 31 -18 40.5t-44 -7.5l-276 -116q-25 -17 -43.5 -51.5t-18.5 -65.5v-359z" />
-<glyph unicode="&#xe180;" d="M100 0h400v56q-75 0 -87.5 6t-12.5 44v394h500v-394q0 -38 -12.5 -44t-87.5 -6v-56h400v56q-4 0 -11 0.5t-24 3t-30 7t-24 15t-11 24.5v888q0 22 25 34.5t50 13.5l25 2v56h-400v-56q75 0 87.5 -6t12.5 -44v-394h-500v394q0 38 12.5 44t87.5 6v56h-400v-56q4 0 11 -0.5 t24 -3t30 -7t24 -15t11 -24.5v-888q0 -22 -25 -34.5t-50 -13.5l-25 -2v-56z" />
-<glyph unicode="&#xe181;" d="M0 300q0 -41 29.5 -70.5t70.5 -29.5h300q41 0 70.5 29.5t29.5 70.5v500q0 41 -29.5 70.5t-70.5 29.5h-300q-41 0 -70.5 -29.5t-29.5 -70.5v-500zM100 100h400l200 200h105l295 98v-298h-425l-100 -100h-375zM100 300v200h300v-200h-300zM100 600v200h300v-200h-300z M100 1000h400l200 -200v-98l295 98h105v200h-425l-100 100h-375zM700 402v163l400 133v-163z" />
-<glyph unicode="&#xe182;" d="M16.5 974.5q0.5 -21.5 16 -90t46.5 -140t104 -177.5t175 -208q103 -103 207.5 -176t180 -103.5t137 -47t92.5 -16.5l31 1l163 162q17 18 13.5 41t-22.5 37l-192 136q-19 14 -45 12t-42 -19l-118 -118q-142 101 -268 227t-227 268l118 118q17 17 20 41.5t-11 44.5 l-139 194q-14 19 -36.5 22t-40.5 -14l-162 -162q-1 -11 -0.5 -32.5z" />
-<glyph unicode="&#xe183;" d="M0 50v212q0 20 10.5 45.5t24.5 39.5l365 303v50q0 4 1 10.5t12 22.5t30 28.5t60 23t97 10.5t97 -10t60 -23.5t30 -27.5t12 -24l1 -10v-50l365 -303q14 -14 24.5 -39.5t10.5 -45.5v-212q0 -21 -14.5 -35.5t-35.5 -14.5h-1100q-20 0 -35 14.5t-15 35.5zM0 712 q0 -21 14.5 -33.5t34.5 -8.5l202 33q20 4 34.5 21t14.5 38v146q141 24 300 24t300 -24v-146q0 -21 14.5 -38t34.5 -21l202 -33q20 -4 34.5 8.5t14.5 33.5v200q-6 8 -19 20.5t-63 45t-112 57t-171 45t-235 20.5q-92 0 -175 -10.5t-141.5 -27t-108.5 -36.5t-81.5 -40 t-53.5 -36.5t-31 -27.5l-9 -10v-200z" />
-<glyph unicode="&#xe184;" d="M100 0v100h1100v-100h-1100zM175 200h950l-125 150v250l100 100v400h-100v-200h-100v200h-200v-200h-100v200h-200v-200h-100v200h-100v-400l100 -100v-250z" />
-<glyph unicode="&#xe185;" d="M100 0h300v400q0 41 -29.5 70.5t-70.5 29.5h-100q-41 0 -70.5 -29.5t-29.5 -70.5v-400zM500 0v1000q0 41 29.5 70.5t70.5 29.5h100q41 0 70.5 -29.5t29.5 -70.5v-1000h-300zM900 0v700q0 41 29.5 70.5t70.5 29.5h100q41 0 70.5 -29.5t29.5 -70.5v-700h-300z" />
-<glyph unicode="&#xe186;" d="M-100 300v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212zM100 200h900v700h-900v-700zM200 300h300v300h-200v100h200v100h-300v-300h200v-100h-200v-100zM600 300h200v100h100v300h-100v100h-200v-500 zM700 400v300h100v-300h-100z" />
-<glyph unicode="&#xe187;" d="M-100 300v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212zM100 200h900v700h-900v-700zM200 300h100v200h100v-200h100v500h-100v-200h-100v200h-100v-500zM600 300h200v100h100v300h-100v100h-200v-500 zM700 400v300h100v-300h-100z" />
-<glyph unicode="&#xe188;" d="M-100 300v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212zM100 200h900v700h-900v-700zM200 300h300v100h-200v300h200v100h-300v-500zM600 300h300v100h-200v300h200v100h-300v-500z" />
-<glyph unicode="&#xe189;" d="M-100 300v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212zM100 200h900v700h-900v-700zM200 550l300 -150v300zM600 400l300 150l-300 150v-300z" />
-<glyph unicode="&#xe190;" d="M-100 300v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212zM100 200h900v700h-900v-700zM200 300v500h700v-500h-700zM300 400h130q41 0 68 42t27 107t-28.5 108t-66.5 43h-130v-300zM575 549 q0 -65 27 -107t68 -42h130v300h-130q-38 0 -66.5 -43t-28.5 -108z" />
-<glyph unicode="&#xe191;" d="M-100 300v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212zM100 200h900v700h-900v-700zM200 300h300v300h-200v100h200v100h-300v-300h200v-100h-200v-100zM601 300h100v100h-100v-100zM700 700h100 v-400h100v500h-200v-100z" />
-<glyph unicode="&#xe192;" d="M-100 300v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212zM100 200h900v700h-900v-700zM200 300h300v400h-200v100h-100v-500zM301 400v200h100v-200h-100zM601 300h100v100h-100v-100zM700 700h100 v-400h100v500h-200v-100z" />
-<glyph unicode="&#xe193;" d="M-100 300v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212zM100 200h900v700h-900v-700zM200 700v100h300v-300h-99v-100h-100v100h99v200h-200zM201 300v100h100v-100h-100zM601 300v100h100v-100h-100z M700 700v100h200v-500h-100v400h-100z" />
-<glyph unicode="&#xe194;" d="M4 600q0 162 80 299t217 217t299 80t299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299zM186 600q0 -171 121.5 -292.5t292.5 -121.5t292.5 121.5t121.5 292.5t-121.5 292.5t-292.5 121.5t-292.5 -121.5t-121.5 -292.5zM400 500v200 l100 100h300v-100h-300v-200h300v-100h-300z" />
-<glyph unicode="&#xe195;" d="M0 600q0 162 80 299t217 217t299 80t299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299zM182 600q0 -171 121.5 -292.5t292.5 -121.5t292.5 121.5t121.5 292.5t-121.5 292.5t-292.5 121.5t-292.5 -121.5t-121.5 -292.5zM400 400v400h300 l100 -100v-100h-100v100h-200v-100h200v-100h-200v-100h-100zM700 400v100h100v-100h-100z" />
-<glyph unicode="&#xe197;" d="M-14 494q0 -80 56.5 -137t135.5 -57h222v300h400v-300h128q120 0 205 86.5t85 207.5t-85 207t-205 86q-46 0 -90 -14q-44 97 -134.5 156.5t-200.5 59.5q-152 0 -260 -107.5t-108 -260.5q0 -25 2 -37q-66 -14 -108.5 -67.5t-42.5 -122.5zM300 200h200v300h200v-300h200 l-300 -300z" />
-<glyph unicode="&#xe198;" d="M-14 494q0 -80 56.5 -137t135.5 -57h8l414 414l403 -403q94 26 154.5 104.5t60.5 178.5q0 120 -85 206.5t-205 86.5q-46 0 -90 -14q-44 97 -134.5 156.5t-200.5 59.5q-152 0 -260 -107.5t-108 -260.5q0 -25 2 -37q-66 -14 -108.5 -67.5t-42.5 -122.5zM300 200l300 300 l300 -300h-200v-300h-200v300h-200z" />
-<glyph unicode="&#xe199;" d="M100 200h400v-155l-75 -45h350l-75 45v155h400l-270 300h170l-270 300h170l-300 333l-300 -333h170l-270 -300h170z" />
-<glyph unicode="&#xe200;" d="M121 700q0 -53 28.5 -97t75.5 -65q-4 -16 -4 -38q0 -74 52.5 -126.5t126.5 -52.5q56 0 100 30v-306l-75 -45h350l-75 45v306q46 -30 100 -30q74 0 126.5 52.5t52.5 126.5q0 24 -9 55q50 32 79.5 83t29.5 112q0 90 -61.5 155.5t-150.5 71.5q-26 89 -99.5 145.5 t-167.5 56.5q-116 0 -197.5 -81.5t-81.5 -197.5q0 -4 1 -11.5t1 -11.5q-14 2 -23 2q-74 0 -126.5 -52.5t-52.5 -126.5z" />
-</font>
-</defs></svg>