Merge branch 'release/1.8.0'

Refactor153 rename to portainer

.gitignore

@@ -7,4 +7,4 @@ bower_components
 *.iml
 dist
 dist/*
-ui-for-docker-checksum.txt
+portainer-checksum.txt

.godir

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

Dockerfile

@@ -1,6 +1,9 @@
-FROM scratch
+FROM centurylink/ca-certs
 
 COPY dist /
 
+VOLUME /data
+
 EXPOSE 9000
-ENTRYPOINT ["/ui-for-docker"]
+
+ENTRYPOINT ["/portainer"]

LICENSE

@@ -1,4 +1,4 @@
-Cloudinovasi-ui: Copyright (c) 2016 Cloudinovasi
+Portainer: Copyright (c) 2016 CloudInovasi
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -16,7 +16,7 @@ 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. 
+SOFTWARE.
 
 UI For Docker: Copyright (c) 2013-2016 Michael Crosby (crosbymichael.com), Kevan Ahlquist (kevanahlquist.com), Anthony Lapenna (anthonylapenna at cloudinovasi dot id)
 

Procfile

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

README.md

@@ -1,35 +1,162 @@
-## Cloudinovasi UI for Docker
+# Portainer
 
-A fork of the amazing UI for Docker by Michael Crosby and Kevan Ahlquist (https://github.com/kevana/ui-for-docker) using the rdash-angular theme (https://github.com/rdash/rdash-angular).
+Portainer is a web interface for the Docker remote API.
 
 ![Dashboard](/dashboard.png)
 
-UI For Docker is a web interface for the Docker Remote API.  The goal is to provide a pure client side implementation so it is effortless to connect and manage docker.
+## Supported Docker versions
 
-### Goals
-* Minimal dependencies - I really want to keep this project a pure html/js app.
-* Consistency - The web UI should be consistent with the commands found on the docker CLI.
+The following Docker versions are supported:
+
+* full support for Docker 1.10, 1.11 and 1.12
+* partial support for Docker 1.9 (some features won't be available)
+
+## Run
 
 ### Quickstart
-1. Run: `docker run -d -p 9000:9000 --privileged -v /var/run/docker.sock:/var/run/docker.sock cloudinovasi/cloudinovasi-ui`
+
+1. Run: `docker run -d -p 9000:9000 --privileged -v /var/run/docker.sock:/var/run/docker.sock cloudinovasi/portainer`
 
 2. Open your browser to `http://<dockerd host ip>:9000`
 
-Bind mounting the Unix socket into the UI For Docker container is much more secure than exposing your docker daemon over TCP.
+Bind mounting the Unix socket into the Portainer container is much more secure than exposing your docker daemon over TCP.
 
 The `--privileged` flag is required for hosts using SELinux.
 
 ### Specify socket to connect to Docker daemon
 
-By default UI For Docker connects to the Docker daemon with`/var/run/docker.sock`. For this to work you need to bind mount the unix socket into the container with `-v /var/run/docker.sock:/var/run/docker.sock`.
+By default Portainer connects to the Docker daemon with`/var/run/docker.sock`. For this to work you need to bind mount the unix socket into the container with `-v /var/run/docker.sock:/var/run/docker.sock`.
 
-You can use the `-e` flag to change this socket:
+You can use the `--host`, `-H` flags to change this socket:
 
-    # Connect to a tcp socket:
-    $ docker run -d -p 9000:9000 --privileged cloudinovasi/cloudinovasi-ui -e http://127.0.0.1:2375
+```
+# Connect to a tcp socket:
+$ docker run -d -p 9000:9000 cloudinovasi/portainer -H tcp://127.0.0.1:2375
+```
 
-### Change address/port UI For Docker is served on
-UI For Docker listens on port 9000 by default. If you run UI For Docker inside a container then you can bind the container's internal port to any external address and port:
+```
+# Connect to another unix socket:
+$ docker run -d -p 9000:9000 cloudinovasi/portainer -H unix:///path/to/docker.sock
+```
 
-    # Expose UI For Docker on 10.20.30.1:80
-    $ docker run -d -p 10.20.30.1:80:9000 --privileged -v /var/run/docker.sock:/var/run/docker.sock cloudinovasi/cloudinovasi-ui
+### Swarm support
+
+**Supported Swarm version: 1.2.3**
+
+You can access a specific view for you Swarm cluster by defining the `--swarm` flag:
+
+```
+# Connect to a tcp socket and enable Swarm:
+$ docker run -d -p 9000:9000 cloudinovasi/portainer -H tcp://<SWARM_HOST>:<SWARM_PORT> --swarm
+```
+
+*NOTE*: Due to Swarm not exposing information in a machine readable way, the app is bound to a specific version of Swarm at the moment.
+
+### Change address/port Portainer is served on
+Portainer listens on port 9000 by default. If you run Portainer inside a container then you can bind the container's internal port to any external address and port:
+
+```
+# Expose Portainer on 10.20.30.1:80
+$ docker run -d -p 10.20.30.1:80:9000 --privileged -v /var/run/docker.sock:/var/run/docker.sock cloudinovasi/portainer
+```
+
+### Access a Docker engine protected via TLS
+
+Ensure that you have access to the CA, the cert and the public key used to access your Docker engine.  
+
+These files will need to be named `ca.pem`, `cert.pem` and `key.pem` respectively. Store them somewhere on your disk and mount a volume containing these files inside the UI container:
+
+```
+$ docker run -d -p 9000:9000 cloudinovasi/portainer -v /path/to/certs:/certs -H https://my-docker-host.domain:2376 --tlsverify
+```
+
+You can also use the `--tlscacert`, `--tlscert` and `--tlskey` flags if you want to change the default path to the CA, certificate and key file respectively:
+
+```
+$ docker run -d -p 9000:9000 cloudinovasi/portainer -v /path/to/certs:/certs -H https://my-docker-host.domain:2376 --tlsverify --tlscacert /certs/myCa.pem --tlscert /certs/myCert.pem --tlskey /certs/myKey.pem
+```
+
+*Note*: Replace `/path/to/certs` to the path to the certificate files on your disk.
+
+### Use your own logo
+
+You can use the `--logo` flag to specify an URL to your own logo.
+
+For example, using the Docker logo:
+
+```
+$ docker run -d -p 9000:9000 --privileged -v /var/run/docker.sock:/var/run/docker.sock cloudinovasi/portainer --logo "https://www.docker.com/sites/all/themes/docker/assets/images/brand-full.svg"
+```
+
+The custom logo will replace the Portainer logo in the UI.
+
+### Hide containers with specific labels
+
+You can hide specific containers in the containers view by using the `--hide-label` or `-l` options and specifying a label.
+
+For example, take a container started with the label `owner=acme`:
+
+```
+$ docker run -d --label owner=acme nginx
+```
+
+You can hide it in the view by starting the ui with:
+
+```
+$ docker run -d -p 9000:9000 --privileged -v /var/run/docker.sock:/var/run/docker.sock cloudinovasi/portainer -l owner=acme
+```
+
+### Reverse proxy configuration
+
+Has been tested with Nginx 1.11.
+
+Use the following configuration to host the UI at `myhost.mydomain.com/portainer`:
+
+```nginx
+upstream portainer {
+    server ADDRESS:PORT;
+}
+
+server {
+  listen 80;
+
+  location /portainer/ {
+      proxy_http_version 1.1;
+      proxy_set_header Connection "";
+      proxy_pass http://portainer/;
+  }
+  location /portainer/ws/ {
+      proxy_set_header Upgrade $http_upgrade;
+      proxy_set_header Connection "upgrade";
+      proxy_http_version 1.1;
+      proxy_pass http://portainer/ws/;
+  }
+}
+```
+
+Replace `ADDRESS:PORT` with the Portainer container details.
+
+### Host your own apps
+
+You can specify an URL to your own templates (**Apps**) definitions using the `--templates` or `-t` flags.
+
+By default, CloudInovasi templates will be used (https://raw.githubusercontent.com/cloud-inovasi/ui-templates/master/templates.json).
+
+For more information about hosting your own template definition and the format, see: https://github.com/cloud-inovasi/ui-templates
+
+### Available options
+
+The following options are available for the `portainer` binary:
+
+* `--host`, `-H`: Docker daemon endpoint (default: `"unix:///var/run/docker.sock"`)
+* `--bind`, `-p`: Address and port to serve Portainer (default: `":9000"`)
+* `--data`, `-d`: Path to the data folder (default: `"."`)
+* `--assets`, `-a`: Path to the assets (default: `"."`)
+* `--swarm`, `-s`: Swarm cluster support (default: `false`)
+* `--tlsverify`: TLS support (default: `false`)
+* `--tlscacert`: Path to the CA (default `/certs/ca.pem`)
+* `--tlscert`: Path to the TLS certificate file (default `/certs/cert.pem`)
+* `--tlskey`: Path to the TLS key (default `/certs/key.pem`)
+* `--hide-label`, `-l`: Hide containers with a specific label in the UI
+* `--logo`: URL to a picture to be displayed as a logo in the UI
+* `--templates`, `-t`: URL to templates (apps) definitions

api/api.go

@@ -0,0 +1,60 @@
+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)
+	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,78 @@
+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()
+	CSRFHandler := newCSRFHandler(a.dataPath)
+
+	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)
+	})
+	return CSRFHandler(newCSRFWrapper(mux))
+}
+
+// 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/cloudinovasi/portainer"
+
+import (
+	"gopkg.in/alecthomas/kingpin.v2"
+)
+
+// main is the entry point of the program
+func main() {
+	kingpin.Version("1.8.0")
+	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/cloud-inovasi/ui-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,26 +1,29 @@
-angular.module('uifordocker', [
-  'uifordocker.templates',
+angular.module('portainer', [
+  'portainer.templates',
   'ui.bootstrap',
   'ui.router',
   'ui.select',
   'ngCookies',
   'ngSanitize',
-  'dockerui.services',
-  'dockerui.filters',
+  'portainer.services',
+  'portainer.helpers',
+  'portainer.filters',
   'dashboard',
   'container',
+  'containerConsole',
+  'containerLogs',
   'containers',
+  'createContainer',
   'docker',
+  'events',
   'images',
   'image',
-  'pullImage',
-  'startContainer',
-  'containerLogs',
   'stats',
   'swarm',
   'network',
   'networks',
   'createNetwork',
+  'templates',
   'volumes',
   'createVolume'])
   .config(['$stateProvider', '$urlRouterProvider', '$httpProvider', function ($stateProvider, $urlRouterProvider, $httpProvider) {
@@ -57,11 +60,46 @@ angular.module('uifordocker', [
       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.volume', {
+      url: "/volume",
+      templateUrl: 'app/components/createVolume/createvolume.html',
+      controller: 'CreateVolumeController'
+    })
+    .state('actions.create.network', {
+      url: "/network",
+      templateUrl: 'app/components/createNetwork/createnetwork.html',
+      controller: 'CreateNetworkController'
+    })
     .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',
@@ -82,6 +120,11 @@ angular.module('uifordocker', [
       templateUrl: 'app/components/network/network.html',
       controller: 'NetworkController'
     })
+    .state('templates', {
+      url: '/templates/',
+      templateUrl: 'app/components/templates/templates.html',
+      controller: 'TemplatesController'
+    })
     .state('volumes', {
       url: '/volumes/',
       templateUrl: 'app/components/volumes/volumes.html',
@@ -119,5 +162,6 @@ angular.module('uifordocker', [
   // You need to set this to the api endpoint without the port i.e. http://192.168.1.9
   .constant('DOCKER_ENDPOINT', 'dockerapi')
   .constant('DOCKER_PORT', '') // Docker port, leave as an empty string if no port is requred.  If you have a port, prefix it with a ':' i.e. :4243
-  .constant('CONFIG_ENDPOINT', '/config')
-  .constant('UI_VERSION', 'v1.0.3');
+  .constant('CONFIG_ENDPOINT', 'settings')
+  .constant('TEMPLATES_ENDPOINT', 'templates')
+  .constant('UI_VERSION', 'v1.8.0');

app/components/container/container.html

@@ -1,72 +1,25 @@
 <rd-header>
-  <rd-header-title title="Container details"></rd-header-title>
+  <rd-header-title title="Container details">
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
+  </rd-header-title>
   <rd-header-content>
     Containers > <a ui-sref="container({id: container.Id})">{{ container.Name|trimcontainername }}</a>
   </rd-header-content>
 </rd-header>
 
-
-<div class="row">
-  <div class="col-lg-6 col-md-12 col-xs-12">
-    <rd-widget>
-      <rd-widget-body>
-        <div class="widget-icon grey pull-left">
-          <i class="fa fa-tasks"></i>
-        </div>
-        <div ng-if="!container.edit">
-          <div class="title">{{ container.Name|trimcontainername }}</div>
-          <div class="comment">
-            Name <a href="" ng-click="container.edit = true;"><i class="fa fa-edit"></i></a>
-          </div>
-        </div>
-        <div ng-if="container.edit">
-          <div class="title"><input type="text" class="containerNameInput" ng-model="container.newContainerName"></div>
-          <div class="comment">
-            Name
-            <a href="" ng-click="container.edit = false;"><i class="fa fa-times"></i></a>
-            <a href="" ng-click="renameContainer()"><i class="fa fa-check-square-o"></i></a>
-          </div>
-        </div>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-  <div class="col-lg-6 col-md-12 col-xs-12">
-    <rd-widget>
-      <rd-widget-body>
-        <div ng-class="{true: 'widget-icon green pull-left', false: 'widget-icon red pull-left'}[container.State.Running]">
-          <i class="fa fa-heartbeat"></i>
-        </div>
-        <div class="title">{{ container.State|getstatetext }}</div>
-        <div class="comment">State</div>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
-      <rd-widget-body>
-        <div class="widget-icon grey pull-left">
-          <i class="fa fa-cogs"></i>
-        </div>
-        <div class="title">
-          <div class="btn-group" role="group" aria-label="...">
-            <button class="btn btn-primary" ng-click="commit()">Commit</button>
-            <button class="btn btn-primary" ng-click="start()" ng-disabled="container.State.Running">Start</button>
-            <button class="btn btn-primary" ng-click="stop()" ng-disabled="!container.State.Running">Stop</button>
-            <button class="btn btn-primary" ng-click="kill()" ng-disabled="!container.State.Running">Kill</button>
-            <button class="btn btn-primary" ng-click="restart()">Restart</button>
-            <button class="btn btn-primary" ng-click="pause()" ng-disabled="!container.State.Running && !container.State.Paused">Pause</button>
-            <button class="btn btn-primary" ng-click="unpause()" ng-disabled="!container.State.Paused">Unpause</button>
-            <button class="btn btn-danger" ng-click="remove()" ng-disabled="container.State.Running">Remove</button>
-          </div>
-          <div class="btn-group" role="group" aria-label="...">
-            <a class="btn btn-default" type="button" ui-sref="stats({id: container.Id})">Stats</a>
-            <a class="btn btn-default" type="button" ui-sref="logs({id: container.Id})">Logs</a>
-          </div>
-        </div>
-        <div class="comment">
-          Actions
+      <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 btn-ico" aria-hidden="true"></i>Start</button>
+          <button class="btn btn-danger" ng-click="stop()" ng-if="container.State.Running"><i class="fa fa-stop btn-ico" aria-hidden="true"></i>Stop</button>
+          <button class="btn btn-danger" ng-click="kill()" ng-if="container.State.Running"><i class="fa fa-bomb btn-ico" aria-hidden="true"></i>Kill</button>
+          <button class="btn btn-primary" ng-click="restart()" ng-if="container.State.Running"><i class="fa fa-refresh btn-ico" 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 btn-ico" aria-hidden="true"></i>Pause</button>
+          <button class="btn btn-primary" ng-click="unpause()" ng-if="container.State.Paused"><i class="fa fa-play btn-ico" aria-hidden="true"></i>Resume</button>
+          <button class="btn btn-danger" ng-click="remove()" ng-disabled="container.State.Running"><i class="fa fa-trash btn-ico" aria-hidden="true"></i>Remove</button>
         </div>
       </rd-widget-body>
     </rd-widget>
@@ -74,44 +27,144 @@
 </div>
 
 <div class="row">
-  <div class="col-lg-9">
+  <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
       <rd-widget-header icon="fa-tasks" title="Container status"></rd-widget-header>
       <rd-widget-body classes="no-padding">
         <table class="table">
           <tbody>
             <tr>
-              <td>Created</td>
-              <td>{{ container.Created | date: 'medium' }}</td>
+              <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>Path</td>
-              <td>{{ container.Path }}</td>
-            </tr>
-            <tr>
-              <td>Args</td>
-              <td>{{ container.Args.join(' ') || 'None' }}</td>
-            </tr>
-            <tr>
-              <td>Exposed Ports</td>
+              <td>Status</td>
               <td>
-                <ul>
-                  <li ng-repeat="(k, v) in container.Config.ExposedPorts">{{ k }}</li>
-                </ul>
+                <i ng-class="{true: 'fa fa-heartbeat text-icon green-icon', false: 'fa fa-heartbeat text-icon 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 btn-ico" 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 btn-ico" 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 btn-ico" 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-tasks" 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>Environment</td>
-              <td>
-                <ul>
-                  <li ng-repeat="k in container.Config.Env">{{ k }}</li>
-                </ul>
-              </td>
+              <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 role="table" class="table">
+                <table class="table table-bordered table-condensed">
                   <tr ng-repeat="(k, v) in container.Config.Labels">
                     <td>{{ k }}</td>
                     <td>{{ v }}</td>
@@ -119,76 +172,33 @@
                 </table>
               </td>
             </tr>
-            <tr>
-              <td>Publish all ports</td>
-              <td>{{ container.HostConfig.PublishAllPorts }}</td>
-            </tr>
-            <tr>
-              <td>Ports</td>
-              <td>
-                <ul>
-                  <li ng-repeat="(containerport, hostports) in container.NetworkSettings.Ports">
-                    {{ containerport }} =>
-                    <span class="label label-default" style="margin-right: 5px;" ng-repeat="(k,v) in hostports">{{ v.HostIp }}:{{ v.HostPort }}</span>
-                  </li>
-                </ul>
-              </td>
-            </tr>
-            <tr>
-              <td>Hostname</td>
-              <td>{{ container.Config.Hostname }}</td>
-            </tr>
-            <tr>
-              <td>IPAddress</td>
-              <td>{{ container.NetworkSettings.IPAddress }}</td>
-            </tr>
-            <tr>
-              <td>Cmd</td>
-              <td>{{ container.Config.Cmd }}</td>
-            </tr>
-            <tr>
-              <td>Entrypoint</td>
-              <td>{{ container.Config.Entrypoint.join(' ') }}</td>
-            </tr>
-            <tr>
-              <td>Bindings</td>
-              <td>
-                <ul>
-                  <li ng-repeat="b in container.HostConfig.Binds">{{ b }}</li>
-                </ul>
-              </td>
-            </tr>
-            <tr>
-              <td>Volumes</td>
-              <td>{{ container.Volumes }}</td>
-            </tr>
-
-            <tr>
-              <td>SysInitpath</td>
-              <td>{{ container.SysInitPath }}</td>
-            </tr>
-            <tr>
-              <td>Image</td>
-              <td><a ui-sref="image({id: container.Image})">{{ container.Image }}</a></td>
-            </tr>
           </tbody>
         </table>
       </rd-widget-body>
     </rd-widget>
   </div>
-  <div class="col-lg-3">
+</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-tasks" title="Container state details"></rd-widget-header>
+      <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="(key, val) in container.State">
-              <td>{{key}}</td>
-              <td>{{ val }}</td>
+            <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>

app/components/container/containerController.js

@@ -1,208 +1,157 @@
 angular.module('container', [])
-.controller('ContainerController', ['$scope', '$stateParams', '$state', '$filter', 'Container', 'ContainerCommit', 'Image', 'Messages', 'ViewSpinner', '$timeout',
-function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Image, Messages, ViewSpinner, $timeout) {
-  $scope.changes = [];
-  $scope.editEnv = false;
-  $scope.editPorts = false;
-  $scope.editBinds = false;
-  $scope.newCfg = {
-    Env: [],
-    Ports: {}
+.controller('ContainerController', ['$scope', '$state','$stateParams', '$filter', 'Container', 'ContainerCommit', 'ImageHelper', 'Messages',
+function ($scope, $state, $stateParams, $filter, Container, ContainerCommit, ImageHelper, Messages) {
+  $scope.activityTime = 0;
+  $scope.portBindings = [];
+  $scope.config = {
+    Image: '',
+    Registry: ''
   };
 
   var update = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     Container.get({id: $stateParams.id}, function (d) {
       $scope.container = d;
       $scope.container.edit = false;
       $scope.container.newContainerName = $filter('trimcontainername')(d.Name);
 
-      // fill up env
-      if (d.Config.Env) {
-        $scope.newCfg.Env = d.Config.Env.map(function (entry) {
-          return {name: entry.split('=')[0], value: entry.split('=')[1]};
+      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);
+          }
         });
       }
-
-      // fill up ports
-      $scope.newCfg.Ports = {};
-      angular.forEach(d.Config.ExposedPorts, function(i, port) {
-        if (d.HostConfig.PortBindings && port in d.HostConfig.PortBindings) {
-          $scope.newCfg.Ports[port] = d.HostConfig.PortBindings[port];
-        }
-        else {
-          $scope.newCfg.Ports[port] = [];
-        }
-      });
-
-      // fill up bindings
-      $scope.newCfg.Binds = [];
-      var defaultBinds = {};
-      angular.forEach(d.Config.Volumes, function(value, vol) {
-        defaultBinds[vol] = { ContPath: vol, HostPath: '', ReadOnly: false, DefaultBind: true };
-      });
-      angular.forEach(d.HostConfig.Binds, function(binding, i) {
-        var mountpoint = binding.split(':')[0];
-        var vol = binding.split(':')[1] || '';
-        var ro = binding.split(':').length > 2 && binding.split(':')[2] === 'ro';
-        var defaultBind = false;
-        if (vol === '') {
-          vol = mountpoint;
-          mountpoint = '';
-        }
-
-        if (vol in defaultBinds) {
-          delete defaultBinds[vol];
-          defaultBind = true;
-        }
-        $scope.newCfg.Binds.push({ ContPath: vol, HostPath: mountpoint, ReadOnly: ro, DefaultBind: defaultBind });
-      });
-      angular.forEach(defaultBinds, function(bind) {
-        $scope.newCfg.Binds.push(bind);
-      });
-
-      ViewSpinner.stop();
+      $('#loadingViewSpinner').hide();
     }, function (e) {
-      if (e.status === 404) {
-        $('.detail').hide();
-        Messages.error("Not found", "Container not found.");
-      } else {
-        Messages.error("Failure", e.data);
-      }
-      ViewSpinner.stop();
+      $('#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) {
+    $('#loadingViewSpinner').show();
+    Container.start({id: $scope.container.Id}, {}, function (d) {
       update();
       Messages.send("Container started", $stateParams.id);
     }, function (e) {
       update();
-      Messages.error("Failure", "Container failed to start." + e.data);
+      Messages.error("Failure", e, "Unable to start container");
     });
   };
 
   $scope.stop = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     Container.stop({id: $stateParams.id}, function (d) {
       update();
       Messages.send("Container stopped", $stateParams.id);
     }, function (e) {
       update();
-      Messages.error("Failure", "Container failed to stop." + e.data);
+      Messages.error("Failure", e, "Unable to stop container");
     });
   };
 
   $scope.kill = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     Container.kill({id: $stateParams.id}, function (d) {
       update();
       Messages.send("Container killed", $stateParams.id);
     }, function (e) {
       update();
-      Messages.error("Failure", "Container failed to die." + e.data);
+      Messages.error("Failure", e, "Unable to kill container");
     });
   };
 
   $scope.commit = function () {
-    ViewSpinner.spin();
-    ContainerCommit.commit({id: $stateParams.id, repo: $scope.container.Config.Image}, function (d) {
+    $('#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", "Container failed to commit." + e.data);
+      Messages.error("Failure", e, "Unable to commit container");
     });
   };
+
   $scope.pause = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     Container.pause({id: $stateParams.id}, function (d) {
       update();
       Messages.send("Container paused", $stateParams.id);
     }, function (e) {
       update();
-      Messages.error("Failure", "Container failed to pause." + e.data);
+      Messages.error("Failure", e, "Unable to pause container");
     });
   };
 
   $scope.unpause = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     Container.unpause({id: $stateParams.id}, function (d) {
       update();
       Messages.send("Container unpaused", $stateParams.id);
     }, function (e) {
       update();
-      Messages.error("Failure", "Container failed to unpause." + e.data);
+      Messages.error("Failure", e, "Unable to unpause container");
     });
   };
 
   $scope.remove = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     Container.remove({id: $stateParams.id}, function (d) {
-      update();
-      $state.go('containers', {}, {reload: true});
-      Messages.send("Container removed", $stateParams.id);
+      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", "Container failed to remove." + e.data);
+      Messages.error("Failure", e, "Unable to remove container");
     });
   };
 
   $scope.restart = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     Container.restart({id: $stateParams.id}, function (d) {
       update();
       Messages.send("Container restarted", $stateParams.id);
     }, function (e) {
       update();
-      Messages.error("Failure", "Container failed to restart." + e.data);
-    });
-  };
-
-  $scope.hasContent = function (data) {
-    return data !== null && data !== undefined;
-  };
-
-  $scope.getChanges = function () {
-    ViewSpinner.spin();
-    Container.changes({id: $stateParams.id}, function (d) {
-      $scope.changes = d;
-      ViewSpinner.stop();
+      Messages.error("Failure", e, "Unable to restart container");
     });
   };
 
   $scope.renameContainer = function () {
-    // #FIXME fix me later to handle http status to show the correct error message
-    Container.rename({id: $stateParams.id, 'name': $scope.container.newContainerName}, function (data) {
-      if (data.name) {
-        $scope.container.Name = data.name;
-        Messages.send("Container renamed", $stateParams.id);
-      } else {
+    Container.rename({id: $stateParams.id, 'name': $scope.container.newContainerName}, function (d) {
+      if (d.message) {
         $scope.container.newContainerName = $scope.container.Name;
-        Messages.error("Failure", "Container failed to rename.");
+        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.addEntry = function (array, entry) {
-    array.push(entry);
-  };
-  $scope.rmEntry = function (array, entry) {
-    var idx = array.indexOf(entry);
-    array.splice(idx, 1);
-  };
-
-  $scope.toggleEdit = function() {
-    $scope.edit = !$scope.edit;
-  };
-
   update();
-  $scope.getChanges();
 }]);

app/components/containerConsole/containerConsole.html

@@ -0,0 +1,43 @@
+<rd-header>
+  <rd-header-title title="Container console">
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
+  </rd-header-title>
+  <rd-header-content>
+    Containers > <a ui-sref="container({id: container.Id})">{{ container.Name|trimcontainername }}</a> > Console
+  </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-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 class="form-horizontal">
+          <!-- command-list -->
+          <div class="form-group">
+            <div class="col-sm-3">
+              <select class="selectpicker form-control" ng-model="state.command">
+                <option value="bash">/bin/bash</option>
+                <option value="sh">/bin/sh</option>
+              </select>
+            </div>
+            <div class="col-sm-9 pull-left">
+              <button type="button" class="btn btn-primary" ng-click="connect()" ng-disabled="connected">Connect</button>
+              <button type="button" class="btn btn-default" ng-click="disconnect()" ng-disabled="!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,110 @@
+angular.module('containerConsole', [])
+.controller('ContainerConsoleController', ['$scope', '$stateParams', 'Settings', 'Container', 'Exec', '$timeout', 'Messages',
+function ($scope, $stateParams, Settings, Container, Exec, $timeout, Messages) {
+  $scope.state = {};
+  $scope.state.command = "bash";
+  $scope.connected = false;
+
+  var socket, term;
+
+  // Ensure the socket is closed before leaving the view
+  $scope.$on('$stateChangeStart', function (event, next, current) {
+    if (socket !== null) {
+      socket.close();
+    }
+  });
+
+  Container.get({id: $stateParams.id}, function(d) {
+    $scope.container = d;
+    $('#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.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.connected = true;
+    socket.onopen = function(evt) {
+      $('#loadConsoleSpinner').hide();
+      term = new Terminal({
+        cols: width,
+        rows: height,
+        cursorBlink: true
+      });
+
+      term.on('data', function (data) {
+        socket.send(data);
+      });
+      term.open(document.getElementById('terminal-container'));
+
+      socket.onmessage = function (e) {
+        term.write(e.data);
+      };
+      socket.onerror = function (error) {
+        $scope.connected = false;
+
+      };
+      socket.onclose = function(evt) {
+        $scope.connected = false;
+        // term.write("Session terminated");
+        // term.destroy();
+      };
+    };
+  }
+}]);

app/components/containerLogs/containerLogsController.js

@@ -1,6 +1,6 @@
 angular.module('containerLogs', [])
-.controller('ContainerLogsController', ['$scope', '$stateParams', '$anchorScroll', 'ContainerLogs', 'Container', 'ViewSpinner',
-function ($scope, $stateParams, $anchorScroll, ContainerLogs, Container, ViewSpinner) {
+.controller('ContainerLogsController', ['$scope', '$stateParams', '$anchorScroll', 'ContainerLogs', 'Container',
+function ($scope, $stateParams, $anchorScroll, ContainerLogs, Container) {
   $scope.state = {};
   $scope.state.displayTimestampsOut = false;
   $scope.state.displayTimestampsErr = false;
@@ -8,24 +8,20 @@ function ($scope, $stateParams, $anchorScroll, ContainerLogs, Container, ViewSpi
   $scope.stderr = '';
   $scope.tailLines = 2000;
 
-  ViewSpinner.spin();
+  $('#loadingViewSpinner').show();
   Container.get({id: $stateParams.id}, function (d) {
     $scope.container = d;
-    ViewSpinner.stop();
+    $('#loadingViewSpinner').hide();
   }, function (e) {
-    if (e.status === 404) {
-      Messages.error("Not found", "Container not found.");
-    } else {
-      Messages.error("Failure", e.data);
-    }
-    ViewSpinner.stop();
+    $('#loadingViewSpinner').hide();
+    Messages.error("Failure", e, "Unable to retrieve container info");
   });
 
   function getLogs() {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     getLogsStdout();
     getLogsStderr();
-    ViewSpinner.stop();
+    $('#loadingViewSpinner').hide();
   }
 
   function getLogsStderr() {

app/components/containerLogs/containerlogs.html

@@ -1,5 +1,7 @@
 <rd-header>
-  <rd-header-title title="Container logs"></rd-header-title>
+  <rd-header-title title="Container logs">
+      <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
+  </rd-header-title>
   <rd-header-content>
     Containers > <a ui-sref="container({id: container.Id})">{{ container.Name|trimcontainername }}</a> > Logs
   </rd-header-content>

app/components/containers/containers.html

@@ -1,5 +1,3 @@
-<div ng-include="template" ng-controller="StartContainerController"></div>
-
 <rd-header>
   <rd-header-title title="Container list">
     <a data-toggle="tooltip" title="Refresh" ui-sref="containers" ui-sref-opts="{reload: true}">
@@ -12,6 +10,9 @@
 <div class="col-lg-12">
   <rd-widget>
     <rd-widget-header icon="fa-tasks" 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">
@@ -23,20 +24,27 @@
           <button type="button" class="btn btn-primary" ng-click="pauseAction()" ng-disabled="!state.selectedItemCount">Pause</button>
           <button type="button" class="btn btn-primary" ng-click="unpauseAction()" ng-disabled="!state.selectedItemCount">Unpause</button>
           <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount">Remove</button>
-          <button type="button" class="btn btn-default" data-toggle="modal" data-target="#create-modal">Start a new container...</button>
         </div>
+        <a class="btn btn-default" 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()"/><label for="displayAll">Display All</label>
+        <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 class="table table-hover">
           <thead>
             <tr>
-              <th><label><input type="checkbox" ng-model="state.toggle" ng-change="toggleSelectAll()" /> Select</label></th>
+              <th></th>
+              <th>
+                <a ui-sref="containers" ng-click="order('Status')">
+                  State
+                  <span ng-show="sortType == 'State' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'State' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
               <th>
                 <a ui-sref="containers" ng-click="order('Names')">
                   Name
@@ -51,25 +59,25 @@
                   <span ng-show="sortType == 'Image' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
-              <th>
-                <a ui-sref="containers" ng-click="order('Command')">
-                  Command
-                  <span ng-show="sortType == 'Command' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'Command' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+              <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">
+                <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('Created')">
-                  Created
-                  <span ng-show="sortType == 'Created' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'Created' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
-                </a>
-              </th>
-              <th>
-                <a ui-sref="containers" ng-click="order('Status')">
-                  Status
-                  <span ng-show="sortType == 'Status' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'Status' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                <a 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>
@@ -77,11 +85,18 @@
           <tbody>
             <tr ng-repeat="container in (state.filteredContainers = ( containers | filter:state.filter | orderBy:sortType:sortReverse))">
               <td><input type="checkbox" ng-model="container.Checked" ng-change="selectItem(container)"/></td>
-              <td><a ui-sref="container({id: container.Id})">{{ container|containername}}</a></td>
+              <td><span class="label label-{{ container.Status|containerstatusbadge }}">{{ container.Status|containerstatus }}</span></td>
+              <td ng-if="swarm"><a ui-sref="container({id: container.Id})">{{ container|swarmcontainername}}</a></td>
+              <td ng-if="!swarm"><a ui-sref="container({id: container.Id})">{{ container|containername}}</a></td>
               <td><a ui-sref="image({id: container.Image})">{{ container.Image }}</a></td>
-              <td>{{ container.Command|truncate:40 }}</td>
-              <td>{{ container.Created|getdate }}</td>
-              <td><span class="label label-{{ container.Status|statusbadge }}">{{ container.Status }}</span></td>
+              <td ng-if="state.displayIP">{{ container.IP ? container.IP : '-' }}</td>
+              <td ng-if="swarm">{{ container.hostIP }}</td>
+              <td>
+                <a ng-if="container.Ports.length > 0" ng-repeat="p in container.Ports" class="image-tag" ng-href="http://{{p.host}}:{{p.public}}" target="_blank">
+                  <i class="fa fa-external-link" aria-hidden="true"></i> {{ p.private }}
+                </a>
+                <span ng-if="container.Ports.length == 0" >-</span>
+              </td>
             </tr>
           </tbody>
         </table>

app/components/containers/containersController.js

@@ -1,12 +1,12 @@
 angular.module('containers', [])
-.controller('ContainersController', ['$scope', 'Container', 'Settings', 'Messages', 'ViewSpinner',
-function ($scope, Container, Settings, Messages, ViewSpinner) {
+.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.sortType = 'Created';
-  $scope.sortReverse = true;
-  $scope.state.toggle = false;
+  $scope.state.displayIP = false;
+  $scope.sortType = 'State';
+  $scope.sortReverse = false;
   $scope.state.selectedItemCount = 0;
 
   $scope.order = function (sortType) {
@@ -14,70 +14,78 @@ function ($scope, Container, Settings, Messages, ViewSpinner) {
     $scope.sortType = sortType;
   };
 
-  var update = function (data) {
-    ViewSpinner.spin();
+  var update = function (data, containersToHideLabels) {
+    $('#loadContainersSpinner').show();
     $scope.state.selectedItemCount = 0;
     Container.query(data, function (d) {
-      $scope.containers = d.filter(function (container) {
-        return container.Image !== 'swarm';
-      }).map(function (container) {
-        return new ContainerViewModel(container);
+      var containers = d;
+      if (containersToHideLabels) {
+        containers = ContainerHelper.hideContainers(d, containersToHideLabels);
+      }
+      $scope.containers = containers.map(function (container) {
+        var model = new ContainerViewModel(container);
+        if (model.IP) {
+          $scope.state.displayIP = true;
+        }
+        if ($scope.swarm) {
+          model.hostIP = $scope.swarm_hosts[_.split(container.Names[0], '/')[1]];
+        }
+        return model;
       });
-      ViewSpinner.stop();
+      $('#loadContainersSpinner').hide();
     });
   };
 
   var batch = function (items, action, msg) {
-    ViewSpinner.spin();
+    $('#loadContainersSpinner').show();
     var counter = 0;
     var complete = function () {
       counter = counter - 1;
       if (counter === 0) {
-        ViewSpinner.stop();
+        $('#loadContainersSpinner').hide();
         update({all: Settings.displayAll ? 1 : 0});
       }
     };
     angular.forEach(items, function (c) {
       if (c.Checked) {
+        counter = counter + 1;
         if (action === Container.start) {
-          Container.get({id: c.Id}, function (d) {
-            c = d;
-            counter = counter + 1;
-            action({id: c.Id, HostConfig: c.HostConfig || {}}, function (d) {
-              Messages.send("Container " + msg, c.Id);
-              var index = $scope.containers.indexOf(c);
-              complete();
-            }, function (e) {
-              Messages.error("Failure", e.data);
-              complete();
-            });
+          action({id: c.Id}, {}, function (d) {
+            Messages.send("Container " + msg, c.Id);
+            complete();
           }, function (e) {
-            if (e.status === 404) {
-              $('.detail').hide();
-              Messages.error("Not found", "Container not found.");
-            } else {
-              Messages.error("Failure", e.data);
+            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 {
-          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);
+            Messages.error("Failure", e, 'An error occured');
             complete();
           });
 
         }
-
       }
     });
     if (counter === 0) {
-      ViewSpinner.stop();
+      $('#loadContainersSpinner').hide();
     }
   };
 
@@ -89,18 +97,6 @@ function ($scope, Container, Settings, Messages, ViewSpinner) {
     }
   };
 
-  $scope.toggleSelectAll = function () {
-    $scope.state.selectedItem = $scope.state.toggle;
-    angular.forEach($scope.state.filteredContainers, function (i) {
-      i.Checked = $scope.state.toggle;
-    });
-    if ($scope.state.toggle) {
-      $scope.state.selectedItemCount = $scope.state.filteredContainers.length;
-    } else {
-      $scope.state.selectedItemCount = 0;
-    }
-  };
-
   $scope.toggleGetAll = function () {
     Settings.displayAll = $scope.state.displayAll;
     update({all: Settings.displayAll ? 1 : 0});
@@ -134,5 +130,32 @@ function ($scope, Container, Settings, Messages, ViewSpinner) {
     batch($scope.containers, Container.remove, "Removed");
   };
 
-  update({all: Settings.displayAll ? 1 : 0});
+  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) {
+    var containersToHideLabels = c.hiddenLabels;
+    $scope.swarm = c.swarm;
+    if (c.swarm) {
+      Info.get({}, function (d) {
+        $scope.swarm_hosts = retrieveSwarmHostsInfo(d);
+        update({all: Settings.displayAll ? 1 : 0}, containersToHideLabels);
+      });
+    } else {
+      update({all: Settings.displayAll ? 1 : 0}, containersToHideLabels);
+    }
+  });
 }]);

app/components/createContainer/createContainerController.js

@@ -0,0 +1,237 @@
+angular.module('createContainer', [])
+.controller('CreateContainerController', ['$scope', '$state', 'Config', 'Container', 'Image', 'Volume', 'Network', 'Messages',
+function ($scope, $state, Config, Container, Image, Volume, Network, Messages) {
+
+  $scope.state = {
+    alwaysPull: true
+  };
+
+  $scope.formValues = {
+    Console: 'none',
+    Volumes: [],
+    AvailableRegistries: [],
+    Registry: ''
+  };
+
+  $scope.imageConfig = {};
+
+  $scope.config = {
+    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) {
+    var swarm = c.swarm;
+
+    $scope.formValues.AvailableRegistries = c.registries;
+
+    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 (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"});
+      }
+      $scope.availableNetworks = networks;
+    }, function (e) {
+      Messages.error("Failure", e, "Unable to retrieve networks");
+    });
+  });
+
+  // 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.hostPort && portBinding.containerPort) {
+        var key = portBinding.containerPort + "/" + portBinding.protocol;
+        var binding = {};
+        if (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 prepareConfiguration() {
+    var config = angular.copy($scope.config);
+    prepareImageConfig(config);
+    preparePortBindings(config);
+    prepareConsole(config);
+    prepareEnvironmentVariables(config);
+    prepareVolumes(config);
+    return config;
+  }
+
+  $scope.create = function () {
+    var config = prepareConfiguration();
+    $('#createContainerSpinner').show();
+    if ($scope.state.alwaysPull) {
+      pullImageAndCreateContainer(config);
+    } else {
+      createContainer(config);
+    }
+  };
+
+}]);

app/components/createContainer/createcontainer.html

@@ -0,0 +1,323 @@
+<rd-header>
+  <rd-header-title title="Create container"></rd-header-title>
+  <rd-header-content>
+    Containers > 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="state.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>
+            </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 clickable" 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">
+                </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 clickable"><a data-target="#command" data-toggle="tab">Command</a></li>
+          <li class="clickable"><a data-target="#volumes" data-toggle="tab">Volumes</a></li>
+          <li class="clickable"><a data-target="#network" data-toggle="tab">Network</a></li>
+          <li class="clickable"><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 clickable" 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 clickable" 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">
+                <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">
+                    <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 -->
+              <!-- 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/createNetwork.html

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

app/components/createNetwork/createNetworkController.js

@@ -1,41 +1,74 @@
 angular.module('createNetwork', [])
-.controller('CreateNetworkController', ['$scope', '$state', 'Messages', 'Network', 'ViewSpinner', 'errorMsgFilter',
-function ($scope, $state, Messages, Network, ViewSpinner, errorMsgFilter) {
-  $scope.template = 'app/components/createNetwork/createNetwork.html';
-
-  $scope.init = function () {
-    $scope.createNetworkConfig = {
-      "Name": '',
-      "Driver": '',
-      "IPAM": {
-        "Config": [{}]
-      }
-    };
+.controller('CreateNetworkController', ['$scope', '$state', 'Messages', 'Network',
+function ($scope, $state, Messages, Network) {
+  $scope.formValues = {
+    DriverOptions: [],
+    Subnet: '',
+    Gateway: ''
   };
 
-  $scope.init();
-
-  $scope.createNetwork = function addNetwork(createNetworkConfig) {
-    if (_.isEmpty(createNetworkConfig.IPAM.Config[0])) {
-      delete createNetworkConfig.IPAM;
+  $scope.config = {
+    Driver: 'bridge',
+    CheckDuplicate: true,
+    Internal: false,
+    IPAM: {
+      Config: []
     }
-    $('#error-message').hide();
-    ViewSpinner.spin();
-    $('#create-network-modal').modal('hide');
-    Network.create(createNetworkConfig, function (d) {
-      if (d.Id) {
-        Messages.send("Network created", d.Id);
+  };
+
+  $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.error('Failure', errorMsgFilter(d));
+        Messages.send("Network created", d.Id);
+        $('#createNetworkSpinner').hide();
+        $state.go('networks', {}, {reload: true});
       }
-      ViewSpinner.stop();
-      $scope.init();
-      $state.go('networks', {}, {reload: true});
     }, function (e) {
-      ViewSpinner.stop();
-      $scope.error = "Cannot pull image " + imageName + " Reason: " + e.data;
-      $('#create-network-modal').modal('show');
-      $('#error-message').show();
+      $('#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>
+    Networks > 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 clickable" 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-click="create()">Create</button>
+    <a type="button" class="btn btn-default btn-lg" ui-sref="networks">Cancel</a>
+  </div>
+</div>

app/components/createVolume/createVolume.html

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

app/components/createVolume/createVolumeController.js

@@ -1,39 +1,56 @@
 angular.module('createVolume', [])
-.controller('CreateVolumeController', ['$scope', '$state', 'Messages', 'Volume', 'ViewSpinner', 'errorMsgFilter',
-function ($scope, $state, Messages, Volume, ViewSpinner, errorMsgFilter) {
-  $scope.template = 'app/components/createVolume/createVolume.html';
+.controller('CreateVolumeController', ['$scope', '$state', 'Volume', 'Messages',
+function ($scope, $state, Volume, Messages) {
 
-  $scope.init = function () {
-    $scope.createVolumeConfig = {
-      "Name": "",
-      "Driver": "",
-      "DriverOpts": {}
-    };
-    $scope.availableDrivers = ['local', 'local-persist'];
-    $scope.selectedDriver = { value: $scope.availableDrivers[0] };
+  $scope.formValues = {
+    DriverOptions: []
   };
 
-  $scope.init();
+  $scope.config = {
+    Driver: 'local'
+  };
 
-  $scope.addVolume = function addVolume(createVolumeConfig) {
-    $('#error-message').hide();
-    ViewSpinner.spin();
-    $('#create-volume-modal').modal('hide');
-    createVolumeConfig.Driver = $scope.selectedDriver.value;
-    console.log(JSON.stringify(createVolumeConfig, null, 4));
-    Volume.create(createVolumeConfig, function (d) {
-      if (d.Name) {
-        Messages.send("Volume created", d.Name);
+  $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.error('Failure', errorMsgFilter(d));
+        Messages.send("Volume created", d.Name);
+        $('#createVolumeSpinner').hide();
+        $state.go('volumes', {}, {reload: true});
       }
-      ViewSpinner.stop();
-      $state.go('volumes', {}, {reload: true});
     }, function (e) {
-      ViewSpinner.stop();
-      $scope.error = "Cannot create volume " + createVolumeConfig.Name + " Reason: " + e.data;
-      $('#create-volume-modal').modal('show');
-      $('#error-message').show();
+      $('#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>
+    Volumes > 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 clickable" 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,76 +1,131 @@
 <rd-header>
-  <rd-header-title title="Home"></rd-header-title>
+  <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-lg-3 col-md-6 col-xs-12">
+  <div class="col-lg-12 col-md-12 col-xs-12" ng-if="!swarm">
     <rd-widget>
-      <rd-widget-body>
-        <div class="widget-icon blue pull-left">
-          <i class="fa fa-tasks"></i>
-        </div>
-        <div class="title">{{ containerData.total }}</div>
-        <div class="comment">Containers</div>
+      <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-3 col-md-6 col-xs-12">
+  <div class="col-lg-12 col-md-12 col-xs-12" ng-if="swarm">
     <rd-widget>
-      <rd-widget-body>
-        <div class="widget-icon green pull-left">
-          <i class="fa fa-tasks"></i>
-        </div>
-        <div class="title">{{ containerData.running }}</div>
-        <div class="comment">Running</div>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-  <div class="col-lg-3 col-md-6 col-xs-12">
-    <rd-widget>
-      <rd-widget-body>
-        <div class="widget-icon red pull-left">
-          <i class="fa fa-tasks"></i>
-        </div>
-        <div class="title">{{ containerData.stopped }}</div>
-        <div class="comment">Stopped</div>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-  <div class="col-lg-3 col-md-6 col-xs-12">
-    <rd-widget>
-      <rd-widget-body>
-        <div class="widget-icon gray pull-left">
-          <i class="fa fa-tasks"></i>
-        </div>
-        <div class="title">{{ containerData.ghost }}</div>
-        <div class="comment">Ghost</div>
+      <rd-widget-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[3][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 }}</td>
+            </tr>
+          </tbody>
+        </table>
       </rd-widget-body>
     </rd-widget>
   </div>
 </div>
 
 <div class="row">
-  <div class="col-lg-6">
-    <rd-widget>
-      <rd-widget-header icon="fa-tasks" title="Containers created"></rd-widget-header>
-      <rd-widget-body>
-        <canvas id="containers-started-chart" width="770" height="230">
-            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a
-                    href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
-        </canvas>
-      </rd-widget-body>
-    </rd-widget>
+  <div 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-tasks"></i>
+          </div>
+          <div class="pull-right">
+            <div><i class="fa fa-heartbeat text-icon green-icon"></i>{{ containerData.running }} running</div>
+            <div><i class="fa fa-heartbeat text-icon 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">
-    <rd-widget>
-      <rd-widget-header icon="fa-clone" title="Images created"></rd-widget-header>
-      <rd-widget-body>
-        <canvas id="images-created-chart" width="770" height="230">
-            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a
-                    href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
-        </canvas>
-      </rd-widget-body>
-    </rd-widget>
+  <div 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 text-icon"></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 text-icon"></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,46 +1,90 @@
 angular.module('dashboard', [])
-  .controller('DashboardController', ['$scope', 'Container', 'Image', 'Settings', 'LineChart', function ($scope, Container, Image, Settings, LineChart) {
+.controller('DashboardController', ['$scope', '$q', 'Config', 'Container', 'ContainerHelper', 'Image', 'Network', 'Volume', 'Info',
+function ($scope, $q, Config, Container, ContainerHelper, Image, Network, Volume, Info) {
 
-  $scope.containerData = {};
-
-  var buildCharts = function (data) {
-    $scope.containerData.total = data.length;
-    LineChart.build('#containers-started-chart', data, function (c) {
-      return new Date(c.Created * 1000).toLocaleDateString();
-    });
-    var s = $scope;
-    Image.query({}, function (d) {
-      s.totalImages = d.length;
-      LineChart.build('#images-created-chart', d, function (c) {
-        return new Date(c.Created * 1000).toLocaleDateString();
-      });
-    });
+  $scope.containerData = {
+    total: 0
+  };
+  $scope.imageData = {
+    total: 0
+  };
+  $scope.networkData = {
+    total: 0
+  };
+  $scope.volumeData = {
+    total: 0
   };
 
-  Container.query({all: 1}, function (d) {
+  function prepareContainerData(d, containersToHideLabels) {
     var running = 0;
-    var ghost = 0;
     var stopped = 0;
 
-    // TODO: centralize that
-    var containers = d.filter(function (container) {
-      return container.Image !== 'swarm';
-    });
+    var containers = d;
+    if (containersToHideLabels) {
+      containers = ContainerHelper.hideContainers(d, containersToHideLabels);
+    }
 
     for (var i = 0; i < containers.length; i++) {
       var item = containers[i];
-      if (item.Status === "Ghost") {
-        ghost += 1;
+      if (item.Status.indexOf('Up') !== -1) {
+        running += 1;
       } else if (item.Status.indexOf('Exit') !== -1) {
         stopped += 1;
-      } else {
-        running += 1;
       }
     }
     $scope.containerData.running = running;
     $scope.containerData.stopped = stopped;
-    $scope.containerData.ghost = ghost;
+    $scope.containerData.total = containers.length;
+  }
 
-    buildCharts(containers);
+  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;
+  }
+
+  function prepareVolumeData(d) {
+    var volumes = d.Volumes;
+    if (volumes) {
+      $scope.volumeData.total = volumes.length;
+    }
+  }
+
+  function prepareNetworkData(d) {
+    var networks = d;
+    $scope.networkData.total = networks.length;
+  }
+
+  function prepareInfoData(d) {
+    var info = d;
+    $scope.infoData = info;
+  }
+
+  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

@@ -9,7 +9,7 @@ angular.module('dashboard')
     return window.innerWidth;
   };
 
-  $scope.config = Config.get();
+  $scope.config = Config;
 
   $scope.$watch($scope.getWidth, function(newValue, oldValue) {
     if (newValue >= mobileView) {

app/components/docker/docker.html

@@ -45,7 +45,7 @@
 <div class="row">
   <div class="col-lg-12">
     <rd-widget>
-      <rd-widget-header icon="fa-object-group" title="Cluster status"></rd-widget-header>
+      <rd-widget-header icon="fa-object-group" title="Engine status"></rd-widget-header>
       <rd-widget-body classes="no-padding">
         <table class="table">
           <tbody>

app/components/events/events.html

@@ -0,0 +1,63 @@
+<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 ng-repeat="event in (events | filter:state.filter | orderBy:sortType:sortReverse)">
+                <td>{{ event.Time|getisodatefromtimestamp }}</td>
+                <td>{{ event.Type }}</td>
+                <td>{{ event.Details }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </rd-widget-body>
+    <rd-widget>
+  </div>
+</div>

app/components/events/eventsController.js

@@ -0,0 +1,27 @@
+angular.module('events', [])
+.controller('EventsController', ['$scope', 'Settings', 'Messages', 'Events',
+function ($scope, Settings, Messages, Events) {
+  $scope.state = {};
+  $scope.sortType = 'Time';
+  $scope.sortReverse = true;
+
+  $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/image/image.html

@@ -1,97 +1,159 @@
 <rd-header>
-  <rd-header-title title="Image details"></rd-header-title>
+  <rd-header-title title="Image details">
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
+  </rd-header-title>
   <rd-header-content>
-    Images > <a ui-sref="image({id: id})">{{ id }}</a>
+    Images > <a ui-sref="image({id: image.Id})">{{ image.Id }}</a>
   </rd-header-content>
 </rd-header>
 
+<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">
+            <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="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>
-        <div class="widget-icon grey pull-left">
-          <i class="fa fa-clone"></i>
-        </div>
-        <div class="title">{{ id }}</div>
-        <div class="comment">Image ID</div>
+        <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>
       </rd-widget-body>
     </rd-widget>
   </div>
 </div>
+
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">
-    <rd-widget>
-      <rd-widget-body>
-        <div class="widget-icon grey pull-left">
-          <i class="fa fa-cogs"></i>
-        </div>
-        <div class="title">
-          <div class="btn-group" role="group" aria-label="...">
-            <button class="btn btn-danger" ng-click="removeImage(id)">Remove</button>
-          </div>
-        </div>
-        <div class="comment">
-          Actions
-        </div>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>
-<div class="row">
-  <div class="col-lg-12">
     <rd-widget>
       <rd-widget-header icon="fa-clone" title="Image details"></rd-widget-header>
       <rd-widget-body classes="no-padding">
         <table class="table">
           <tbody>
             <tr>
-              <td>Created</td>
-              <td>{{ image.Created | date: 'medium'}}</td>
-            </tr>
-            <tr>
-              <td>Tags</td>
+              <td>ID</td>
               <td>
-                <ul>
-                  <li ng-repeat="tag in RepoTags">{{ tag }}
-                    <button ng-click="removeImage(tag)" class="btn btn-sm btn-danger">Remove tag</button>
-                  </li>
-                </ul>
+                {{ image.Id }}
+                <button class="btn btn-xs btn-danger" ng-click="removeImage(image.Id)">Delete this image</button>
               </td>
             </tr>
-            <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 (Virtual Size)</td>
-              <td>{{ image.Size|humansize }} ({{ image.VirtualSize|humansize }})</td>
-            </tr>
-
-            <tr>
-              <td>Hostname</td>
-              <td>{{ image.ContainerConfig.Hostname }}</td>
+              <td>Size</td>
+              <td>{{ image.VirtualSize|humansize }}</td>
             </tr>
             <tr>
-              <td>User</td>
-              <td>{{ image.ContainerConfig.User }}</td>
+              <td>Created</td>
+              <td>{{ image.Created|getisodate }}</td>
             </tr>
             <tr>
-              <td>Cmd</td>
-              <td>{{ image.ContainerConfig.Cmd }}</td>
-            </tr>
-            <tr>
-              <td>Volumes</td>
-              <td>{{ image.ContainerConfig.Volumes }}</td>
-            </tr>
-            <tr>
-              <td>Volumes from</td>
-              <td>{{ image.ContainerConfig.VolumesFrom }}</td>
-            </tr>
-            <tr>
-              <td>Built with</td>
+              <td>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 tag" ng-repeat="port in exposedPorts">
+                  {{ port }}
+                </span>
+              </td>
+            </tr>
+            <tr ng-if="image.ContainerConfig.Volumes">
+              <td>VOLUME</td>
+              <td>
+                <span class="label label-default tag" 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>

app/components/image/imageController.js

@@ -1,33 +1,14 @@
 angular.module('image', [])
-.controller('ImageController', ['$scope', '$q', '$stateParams', '$state', 'Image', 'Container', 'Messages', 'LineChart',
-function ($scope, $q, $stateParams, $state, Image, Container, Messages, LineChart) {
-  $scope.tagInfo = {repo: '', version: '', force: false};
-  $scope.id = '';
-  $scope.repoTags = [];
-
-  $scope.removeImage = function (id) {
-    Image.remove({id: id}, function (d) {
-      d.forEach(function(msg){
-        var key = Object.keys(msg)[0];
-        Messages.send(key, msg[key]);
-      });
-      // If last message key is 'Deleted' then assume the image is gone and send to images page
-      if (d[d.length-1].Deleted) {
-        $state.go('images', {}, {reload: true});
-      } else {
-        $state.go('image', {id: $scope.id}, {reload: true});
-      }
-    }, function (e) {
-      $scope.error = e.data;
-      $('#error-message').show();
-    });
+.controller('ImageController', ['$scope', '$stateParams', '$state', 'Image', 'ImageHelper', 'Messages',
+function ($scope, $stateParams, $state, Image, ImageHelper, Messages) {
+  $scope.RepoTags = [];
+  $scope.config = {
+    Image: '',
+    Registry: ''
   };
 
-  /**
-  * Get RepoTags from the /images/query endpoint instead of /image/json,
-  * for backwards compatibility with Docker API versions older than 1.21
-  * @param {string} imageId
-  */
+  // 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) {
@@ -38,21 +19,71 @@ function ($scope, $q, $stateParams, $state, Image, Container, Messages, LineChar
     });
   }
 
+  $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;
-    $scope.id = d.Id;
     if (d.RepoTags) {
       $scope.RepoTags = d.RepoTags;
     } else {
-      getRepoTags($scope.id);
+      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) {
-    if (e.status === 404) {
-      $('.detail').hide();
-      $scope.error = "Image not found.<br />" + $stateParams.id;
-    } else {
-      $scope.error = e.data;
-    }
-    $('#error-message').show();
+    Messages.error("Failure", e, "Unable to retrieve image info");
   });
 }]);

app/components/images/images.html

@@ -1,77 +1,116 @@
-<div ng-include="template" ng-controller="PullImageController"></div>
-
 <rd-header>
   <rd-header-title title="Image list">
     <a data-toggle="tooltip" title="Refresh" ui-sref="images" ui-sref-opts="{reload: true}">
       <i class="fa fa-refresh" aria-hidden="true"></i>
     </a>
   </rd-header-title>
-
   <rd-header-content>Images</rd-header-content>
 </rd-header>
 
-<div class="col-lg-12">
-  <rd-widget>
-    <rd-widget-header icon="fa-clone" title="Images">
-    </rd-widget-header>
-    <rd-widget-taskbar classes="col-lg-12">
-      <div class="pull-left">
-        <div class="btn-group" role="group" aria-label="...">
-          <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount">Remove</button>
-          <button type="button" class="btn btn-default" data-toggle="modal" data-target="#pull-modal">Pull new image...</button>
-        </div>
-      </div>
-      <div class="pull-right">
-        <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
-      </div>
-    </rd-widget-taskbar>
-    <rd-widget-body classes="no-padding">
-      <div class="table-responsive">
-        <table class="table">
-          <thead>
-            <tr>
-              <th><label><input type="checkbox" ng-model="state.toggle" ng-change="toggleSelectAll()" /> Select</label></th>
-              <th>
-                <a ui-sref="images" ng-click="order('Id')">
-                  Id
-                  <span ng-show="sortType == 'Id' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'Id' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
-                </a>
-              </th>
-              <th>
-                <a ui-sref="images" ng-click="order('RepoTags')">
-                  Repository
-                  <span ng-show="sortType == 'RepoTags' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'RepoTags' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
-                </a>
-              </th>
-              <th>
-                <a ui-sref="images" ng-click="order('VirtualSize')">
-                  VirtualSize
-                  <span ng-show="sortType == 'VirtualSize' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'VirtualSize' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
-                </a>
-              </th>
-              <th>
-                <a ui-sref="images" ng-click="order('Created')">
-                  Created
-                  <span ng-show="sortType == 'Created' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'Created' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
-                </a>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr ng-repeat="image in (state.filteredImages = (images | filter:state.filter | orderBy:sortType:sortReverse))">
-              <td><input type="checkbox" ng-model="image.Checked" ng-change="selectItem(image)" /></td>
-              <td><a ui-sref="image({id: image.Id})">{{ image.Id|truncate:20}}</a></td>
-              <td>{{ image|repotag }}</td>
-              <td>{{ image.VirtualSize|humansize }}</td>
-              <td>{{ image.Created|getdate }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </rd-widget-body>
-  <rd-widget>
+<div 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>
+
+<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">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 ng-repeat="image in (state.filteredImages = (images | filter:state.filter | orderBy:sortType:sortReverse))">
+                <td><input type="checkbox" ng-model="image.Checked" ng-change="selectItem(image)" /></td>
+                <td><a ui-sref="image({id: image.Id})">{{ image.Id|truncate:20}}</a></td>
+                <td>
+                  <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>
+            </tbody>
+          </table>
+        </div>
+      </rd-widget-body>
+      <rd-widget>
+      </div>
+    </div>

app/components/images/imagesController.js

@@ -1,28 +1,21 @@
 angular.module('images', [])
-.controller('ImagesController', ['$scope', 'Image', 'ViewSpinner', 'Messages',
-function ($scope, Image, ViewSpinner, Messages) {
+.controller('ImagesController', ['$scope', '$state', 'Config', 'Image', 'Messages',
+function ($scope, $state, Config, Image, Messages) {
   $scope.state = {};
-  $scope.sortType = 'Created';
+  $scope.sortType = 'RepoTags';
   $scope.sortReverse = true;
-  $scope.state.toggle = false;
   $scope.state.selectedItemCount = 0;
 
+  $scope.config = {
+    Image: '',
+    Registry: ''
+  };
+
   $scope.order = function(sortType) {
     $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
     $scope.sortType = sortType;
   };
 
-  $scope.toggleSelectAll = function () {
-    angular.forEach($scope.state.filteredImages, function (i) {
-      i.Checked = $scope.state.toggle;
-    });
-    if ($scope.state.toggle) {
-      $scope.state.selectedItemCount = $scope.state.filteredImages.length;
-    } else {
-      $scope.state.selectedItemCount = 0;
-    }
-  };
-
   $scope.selectItem = function (item) {
     if (item.Checked) {
       $scope.state.selectedItemCount++;
@@ -31,27 +24,64 @@ function ($scope, Image, ViewSpinner, Messages) {
     }
   };
 
+  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.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) {
+      $('#pullImageSpinner').hide();
+      Messages.error("Failure", e, "Unable to pull image");
+    });
+  };
+
   $scope.removeAction = function () {
-    ViewSpinner.spin();
+    $('#loadImagesSpinner').show();
     var counter = 0;
     var complete = function () {
       counter = counter - 1;
       if (counter === 0) {
-        ViewSpinner.stop();
+        $('#loadImagesSpinner').hide();
       }
     };
     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);
+          if (d[0].message) {
+            $('#loadingViewSpinner').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.data);
+          Messages.error("Failure", e, 'Unable to remove image');
           complete();
         });
       }
@@ -59,17 +89,19 @@ function ($scope, Image, ViewSpinner, Messages) {
   };
 
   function fetchImages() {
-    ViewSpinner.spin();
     Image.query({}, function (d) {
       $scope.images = d.map(function (item) {
         return new ImageViewModel(item);
       });
-      ViewSpinner.stop();
+      $('#loadImagesSpinner').hide();
     }, function (e) {
-      Messages.error("Failure", e.data);
-      ViewSpinner.stop();
+      $('#loadImagesSpinner').hide();
+      Messages.error("Failure", e, "Unable to retrieve images");
     });
   }
 
-  fetchImages();
+  Config.$promise.then(function (c) {
+    $scope.availableRegistries = c.registries;
+    fetchImages();
+  });
 }]);

app/components/network/network.html

@@ -1,5 +1,7 @@
 <rd-header>
-  <rd-header-title title="Network details"></rd-header-title>
+  <rd-header-title title="Network details">
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
+  </rd-header-title>
   <rd-header-content>
     Networks > <a ui-sref="network({id: network.Id})">{{ network.Name }}</a>
   </rd-header-content>

app/components/network/networkController.js

@@ -1,37 +1,42 @@
 angular.module('network', [])
-.controller('NetworkController', ['$scope', 'Network', 'ViewSpinner', 'Messages', '$state', '$stateParams', 'errorMsgFilter',
-function ($scope, Network, ViewSpinner, Messages, $state, $stateParams, errorMsgFilter) {
+.controller('NetworkController', ['$scope', 'Network', 'Messages', '$state', '$stateParams',
+function ($scope, Network, Messages, $state, $stateParams) {
 
   $scope.disconnect = function disconnect(networkId, containerId) {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     Network.disconnect({id: $stateParams.id}, {Container: containerId}, function (d) {
-      ViewSpinner.stop();
+      $('#loadingViewSpinner').hide();
       Messages.send("Container disconnected", containerId);
       $state.go('network', {id: $stateParams.id}, {reload: true});
     }, function (e) {
-      ViewSpinner.stop();
-      Messages.error("Failure", e.data);
+      $('#loadingViewSpinner').hide();
+      Messages.error("Failure", e, "Unable to disconnect container");
     });
   };
 
   $scope.remove = function remove(networkId) {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     Network.remove({id: $stateParams.id}, function (d) {
-      ViewSpinner.stop();
-      Messages.send("Network removed", "");
-      $state.go('networks', {});
+      if (d.message) {
+        $('#loadingViewSpinner').hide();
+        Messages.send("Error", {}, d.message);
+      } else {
+        $('#loadingViewSpinner').hide();
+        Messages.send("Network removed", $stateParams.id);
+        $state.go('networks', {});
+      }
     }, function (e) {
-      ViewSpinner.stop();
-      Messages.error("Failure", e.data);
+      $('#loadingViewSpinner').hide();
+      Messages.error("Failure", e, "Unable to remove network");
     });
   };
 
-  ViewSpinner.spin();
+  $('#loadingViewSpinner').show();
   Network.get({id: $stateParams.id}, function (d) {
     $scope.network = d;
-    ViewSpinner.stop();
+    $('#loadingViewSpinner').hide();
   }, function (e) {
-    Messages.error("Failure", e.data);
-    ViewSpinner.stop();
+    $('#loadingViewSpinner').hide();
+    Messages.error("Failure", e, "Unable to retrieve network info");
   });
 }]);

app/components/networks/networks.html

@@ -1,5 +1,3 @@
-<div ng-include="template" ng-controller="CreateNetworkController"></div>
-
 <rd-header>
   <rd-header-title title="Network list">
     <a data-toggle="tooltip" title="Refresh" ui-sref="networks" ui-sref-opts="{reload: true}">
@@ -9,17 +7,17 @@
   <rd-header-content>Networks</rd-header-content>
 </rd-header>
 
-
 <div class="col-lg-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">
-        <div class="btn-group" role="group" aria-label="...">
-          <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount">Remove</button>
-          <button type="button" class="btn btn-default" data-toggle="modal" data-target="#create-network-modal">Create new network...</button>
-        </div>
+        <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount">Remove</button>
+        <a class="btn btn-default" type="button" ui-sref="actions.create.network">Add network</a>
       </div>
       <div class="pull-right">
         <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
@@ -27,10 +25,10 @@
     </rd-widget-taskbar>
     <rd-widget-body classes="no-padding">
       <div class="table-responsive">
-        <table class="table">
+        <table class="table table-hover">
           <thead>
             <tr>
-              <th><label><input type="checkbox" ng-model="state.toggle" ng-change="toggleSelectAll()"/> Select</label></th>
+              <th></th>
               <th>
                 <a ui-sref="networks" ng-click="order('Name')">
                   Name
@@ -85,13 +83,13 @@
           <tbody>
             <tr ng-repeat="network in ( state.filteredNetworks = (networks | filter:state.filter | orderBy:sortType:sortReverse))">
               <td><input type="checkbox" ng-model="network.Checked" ng-change="selectItem(network)"/></td>
-              <td><a ui-sref="network({id: network.Id})">{{ network.Name|truncate:20}}</a></td>
+              <td><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 }}</td>
-              <td>{{ network.IPAM.Config[0].Gateway }}</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>
           </tbody>
         </table>

app/components/networks/networksController.js

@@ -1,29 +1,29 @@
 angular.module('networks', [])
-.controller('NetworksController', ['$scope', 'Network', 'ViewSpinner', 'Messages', 'errorMsgFilter',
-function ($scope, Network, ViewSpinner, Messages, errorMsgFilter) {
-
+.controller('NetworksController', ['$scope', '$state', 'Network', 'Config', 'Messages',
+function ($scope, $state, Network, Config, Messages) {
   $scope.state = {};
-  $scope.state.toggle = false;
   $scope.state.selectedItemCount = 0;
+  $scope.state.advancedSettings = false;
   $scope.sortType = 'Name';
-  $scope.sortReverse = true;
+  $scope.sortReverse = false;
+
+  $scope.formValues = {
+    Subnet: '',
+    Gateway: ''
+  };
+
+  $scope.config = {
+    Name: '',
+    IPAM: {
+      Config: []
+    }
+  };
 
   $scope.order = function(sortType) {
     $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
     $scope.sortType = sortType;
   };
 
-  $scope.toggleSelectAll = function () {
-    angular.forEach($scope.state.filteredNetworks, function (i) {
-      i.Checked = $scope.state.toggle;
-    });
-    if ($scope.state.toggle) {
-      $scope.state.selectedItemCount = $scope.state.filteredNetworks.length;
-    } else {
-      $scope.state.selectedItemCount = 0;
-    }
-  };
-
   $scope.selectItem = function (item) {
     if (item.Checked) {
       $scope.state.selectedItemCount++;
@@ -33,24 +33,28 @@ function ($scope, Network, ViewSpinner, Messages, errorMsgFilter) {
   };
 
   $scope.removeAction = function () {
-    ViewSpinner.spin();
+    $('#loadNetworksSpinner').show();
     var counter = 0;
     var complete = function () {
       counter = counter - 1;
       if (counter === 0) {
-        ViewSpinner.stop();
+        $('#loadNetworksSpinner').hide();
       }
     };
     angular.forEach($scope.networks, function (network) {
       if (network.Checked) {
         counter = counter + 1;
         Network.remove({id: network.Id}, function (d) {
-          Messages.send("Network deleted", network.Id);
-          var index = $scope.networks.indexOf(network);
-          $scope.networks.splice(index, 1);
+          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.data);
+          Messages.error("Failure", e, 'Unable to remove network');
           complete();
         });
       }
@@ -58,14 +62,15 @@ function ($scope, Network, ViewSpinner, Messages, errorMsgFilter) {
   };
 
   function fetchNetworks() {
-    ViewSpinner.spin();
+    $('#loadNetworksSpinner').show();
     Network.query({}, function (d) {
       $scope.networks = d;
-      ViewSpinner.stop();
+      $('#loadNetworksSpinner').hide();
     }, function (e) {
-      Messages.error("Failure", e.data);
-      ViewSpinner.stop();
+      $('#loadNetworksSpinner').hide();
+      Messages.error("Failure", e, "Unable to retrieve networks");
     });
   }
+
   fetchNetworks();
 }]);

app/components/pullImage/pullImage.html

@@ -1,35 +0,0 @@
-<div id="pull-modal" class="modal fade">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times" aria-hidden="true"></i></button>
-        <h3>Pull image</h3>
-      </div>
-      <div class="modal-body">
-        <form novalidate role="form" name="pullForm">
-          <div class="form-group">
-            <label>Registry:</label>
-            <input type="text" ng-model="config.registry" class="form-control"
-            placeholder="Leave empty to user DockerHub"/>
-          </div>
-          <div class="form-group">
-            <label>Image Name:</label>
-            <input type="text" ng-model="config.fromImage" class="form-control" placeholder="username/image"
-            required/>
-          </div>
-          <div class="form-group">
-            <label>Tag Name:</label>
-            <input type="text" ng-model="config.tag" class="form-control"
-            placeholder="Leave empty to download ALL tags."/>
-          </div>
-        </form>
-      </div>
-      <div class="alert alert-error" id="error-message" style="display:none">
-        {{ error }}
-      </div>
-      <div class="modal-footer">
-        <a href="" class="btn btn-primary" ng-click="pull()">Pull</a>
-      </div>
-    </div>
-  </div>
-</div>

app/components/pullImage/pullImageController.js

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

app/components/startContainer/startContainerController.js

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

app/components/startContainer/startcontainer.html

@@ -1,444 +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>Start a new container</h3>
-            </div>
-            <div class="modal-body">
-                <form role="form">
-                    <accordion close-others="true">
-                        <accordion-group heading="Container options" is-open="menuStatus.containerOpen">
-                            <fieldset>
-                                <div class="row">
-                                    <div class="col-xs-6">
-                                      <div class="form-group">
-                                          <label>Image:</label>
-                                          <input type="text" placeholder='ubuntu:latest'
-                                                 ng-model="config.Image" class="form-control"/>
-                                      </div>
-                                        <div class="form-group">
-                                            <label>Cmd:</label>
-                                            <input type="text" placeholder='["/bin/echo", "Hello world"]'
-                                                   ng-model="config.Cmd" class="form-control"/>
-                                            <small>Input commands as a raw string or JSON array</small>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>Entrypoint:</label>
-                                            <input type="text" ng-model="config.Entrypoint" class="form-control"
-                                                   placeholder="./entrypoint.sh"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>Name:</label>
-                                            <input type="text" ng-model="config.name" class="form-control"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>Hostname:</label>
-                                            <input type="text" ng-model="config.Hostname" class="form-control"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>Domainname:</label>
-                                            <input type="text" ng-model="config.Domainname" class="form-control"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>User:</label>
-                                            <input type="text" ng-model="config.User" 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>Volumes:</label>
-                                            <div ng-repeat="volume in config.Volumes">
-                                                <div class="form-group form-inline">
-                                                    <input type="text" ng-model="volume.name" class="form-control"
-                                                           placeholder="/var/data"/>
-                                                    <a href="" ng-click="rmEntry(config.Volumes, volume)">
-                                                      <i class="fa fa-minus" aria-hidden="true"></i>
-                                                    </a>
-                                                </div>
-                                            </div>
-                                            <a href="" ng-click="addEntry(config.Volumes, {name: ''})">
-                                              <i class="fa fa-plus" aria-hidden="true"></i>
-                                            </a>
-                                        </div>
-                                    </div>
-                                    <div class="col-xs-6">
-                                        <div class="form-group">
-                                            <label>MemorySwap:</label>
-                                            <input type="number" ng-model="config.MemorySwap" class="form-control"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>CpuShares:</label>
-                                            <input type="number" ng-model="config.CpuShares" class="form-control"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>Cpuset:</label>
-                                            <input type="text" ng-model="config.Cpuset" class="form-control"
-                                                   placeholder="1,2"/>
-                                            <small>Input as comma-separated list of numbers</small>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>WorkingDir:</label>
-                                            <input type="text" ng-model="config.WorkingDir" class="form-control"
-                                                   placeholder="/app"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>MacAddress:</label>
-                                            <input type="text" ng-model="config.MacAddress" class="form-control"
-                                                   placeholder="12:34:56:78:9a:bc"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label for="networkDisabled">NetworkDisabled:</label>
-                                            <input id="networkDisabled" type="checkbox"
-                                                   ng-model="config.NetworkDisabled"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label for="tty">Tty:</label>
-                                            <input id="tty" type="checkbox" ng-model="config.Tty"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label for="openStdin">OpenStdin:</label>
-                                            <input id="openStdin" type="checkbox" ng-model="config.OpenStdin"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label for="stdinOnce">StdinOnce:</label>
-                                            <input id="stdinOnce" type="checkbox" ng-model="config.StdinOnce"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>SecurityOpts:</label>
-
-                                            <div ng-repeat="opt in config.SecurityOpts">
-                                                <div class="form-group form-inline">
-                                                    <input type="text" ng-model="opt.name" class="form-control"
-                                                           placeholder="label:type:svirt_apache"/>
-                                                    <a href="" ng-click="rmEntry(config.SecurityOpts, opt)">
-                                                      <i class="fa fa-minus" aria-hidden="true"></i>
-                                                    </a>
-                                                </div>
-                                            </div>
-                                            <a href="" ng-click="addEntry(config.SecurityOpts, {name: ''})">
-                                              <i class="fa fa-plus" aria-hidden="true"></i>
-                                            </a>
-                                        </div>
-                                    </div>
-                                </div>
-                                <hr>
-                                <div class="form-group">
-                                    <label>Env:</label>
-
-                                    <div ng-repeat="envar in config.Env">
-                                        <div class="form-group form-inline">
-                                            <div class="form-group">
-                                                <label class="sr-only">Variable Name:</label>
-                                                <input type="text" ng-model="envar.name" class="form-control"
-                                                       placeholder="NAME"/>
-                                            </div>
-                                            <div class="form-group">
-                                                <label class="sr-only">Variable Value:</label>
-                                                <input type="text" ng-model="envar.value" class="form-control"
-                                                       placeholder="value"/>
-                                            </div>
-                                            <div class="form-group">
-                                                <a href="" ng-click="rmEntry(config.Env, envar)">
-                                                  <i class="fa fa-minus" aria-hidden="true"></i>
-                                                </a>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <a href="" ng-click="addEntry(config.Env, {name: '', value: ''})">
-                                      <i class="fa fa-plus" aria-hidden="true"></i>
-                                    </a>
-                                </div>
-                                <div class="form-group">
-                                    <label>Labels:</label>
-
-                                    <div ng-repeat="label in config.Labels">
-                                        <div class="form-group form-inline">
-                                            <div class="form-group">
-                                                <label class="sr-only">Key:</label>
-                                                <input type="text" ng-model="label.key" class="form-control"
-                                                       placeholder="key"/>
-                                            </div>
-                                            <div class="form-group">
-                                                <label class="sr-only">Value:</label>
-                                                <input type="text" ng-model="label.value" class="form-control"
-                                                       placeholder="value"/>
-                                            </div>
-                                            <div class="form-group">
-                                                <a href="" ng-click="rmEntry(config.Labels, label)">
-                                                  <i class="fa fa-minus" aria-hidden="true"></i>
-                                                </a>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <a href="" ng-click="addEntry(config.Labels, {key: '', value: ''})">
-                                      <i class="fa fa-plus" aria-hidden="true"></i>
-                                    </a>
-                                </div>
-                            </fieldset>
-                        </accordion-group>
-                        <accordion-group heading="HostConfig options" is-open="menuStatus.hostConfigOpen">
-                            <fieldset>
-                                <div class="row">
-                                    <div class="col-xs-6">
-                                        <div class="form-group">
-                                            <label>Binds:</label>
-
-                                            <div ng-repeat="bind in config.HostConfig.Binds">
-                                                <div class="form-group form-inline">
-                                                    <input type="text" ng-model="bind.name" class="form-control"
-                                                           placeholder="/host:/container"/>
-                                                    <a href="" ng-click="rmEntry(config.HostConfig.Binds, bind)">
-                                                      <i class="fa fa-minus" aria-hidden="true"></i>
-                                                    </a>
-                                                </div>
-                                            </div>
-                                            <a href="" ng-click="addEntry(config.HostConfig.Binds, {name: ''})">
-                                              <i class="fa fa-plus" aria-hidden="true"></i>
-                                            </a>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>Links:</label>
-
-                                            <div ng-repeat="link in config.HostConfig.Links">
-                                                <div class="form-group form-inline">
-                                                    <input type="text" ng-model="link.name" class="form-control"
-                                                           placeholder="web:db">
-                                                    <a href="" ng-click="rmEntry(config.HostConfig.Links, link)">
-                                                      <i class="fa fa-minus" aria-hidden="true"></i>
-                                                    </a>
-                                                </div>
-                                            </div>
-                                            <a href="" ng-click="addEntry(config.HostConfig.Links, {name: ''})">
-                                              <i class="fa fa-plus" aria-hidden="true"></i>
-                                            </a>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>Dns:</label>
-
-                                            <div ng-repeat="entry in config.HostConfig.Dns">
-                                                <div class="form-group form-inline">
-                                                    <input type="text" ng-model="entry.name" class="form-control"
-                                                           placeholder="8.8.8.8"/>
-                                                    <a href="" ng-click="rmEntry(config.HostConfig.Dns, entry)">
-                                                      <i class="fa fa-minus" aria-hidden="true"></i>
-                                                    </a>
-                                                </div>
-                                            </div>
-                                            <a href="" ng-click="addEntry(config.HostConfig.Dns, {name: ''})">
-                                              <i class="fa fa-plus" aria-hidden="true"></i>
-                                            </a>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>DnsSearch:</label>
-
-                                            <div ng-repeat="entry in config.HostConfig.DnsSearch">
-                                                <div class="form-group form-inline">
-                                                    <input type="text" ng-model="entry.name" class="form-control"
-                                                           placeholder="example.com"/>
-                                                    <a href="" ng-click="rmEntry(config.HostConfig.DnsSearch, entry)">
-                                                      <i class="fa fa-minus" aria-hidden="true"></i>
-                                                    </a>
-                                                </div>
-                                            </div>
-                                            <a href="" ng-click="addEntry(config.HostConfig.DnsSearch, {name: ''})">
-                                              <i class="fa fa-plus" aria-hidden="true"></i>
-                                            </a>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>CapAdd:</label>
-
-                                            <div ng-repeat="entry in config.HostConfig.CapAdd">
-                                                <div class="form-group form-inline">
-                                                    <input type="text" ng-model="entry.name" class="form-control"
-                                                           placeholder="cap_sys_admin"/>
-                                                    <a href="" ng-click="rmEntry(config.HostConfig.CapAdd, entry)">
-                                                      <i class="fa fa-minus" aria-hidden="true"></i>
-                                                    </a>
-                                                </div>
-                                            </div>
-                                            <a href="" ng-click="addEntry(config.HostConfig.CapAdd, {name: ''})">
-                                              <i class="fa fa-plus" aria-hidden="true"></i>
-                                            </a>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>CapDrop:</label>
-
-                                            <div ng-repeat="entry in config.HostConfig.CapDrop">
-                                                <div class="form-group form-inline">
-                                                    <input type="text" ng-model="entry.name" class="form-control"
-                                                           placeholder="cap_sys_admin"/>
-                                                    <a href="" ng-click="rmEntry(config.HostConfig.CapDrop, entry)">
-                                                      <i class="fa fa-minus" aria-hidden="true"></i>
-                                                    </a>
-                                                </div>
-                                            </div>
-                                            <a href="" ng-click="addEntry(config.HostConfig.CapDrop, {name: ''})">
-                                              <i class="fa fa-plus" aria-hidden="true"></i>
-                                            </a>
-                                        </div>
-                                    </div>
-                                    <div class="col-xs-6">
-                                        <div class="form-group">
-                                            <label>NetworkMode:</label>
-                                            <input type="text" ng-model="config.HostConfig.NetworkMode"
-                                                   class="form-control" placeholder="bridge"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label for="publishAllPorts">PublishAllPorts:</label>
-                                            <input id="publishAllPorts" type="checkbox"
-                                                   ng-model="config.HostConfig.PublishAllPorts"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label for="privileged">Privileged:</label>
-                                            <input id="privileged" type="checkbox"
-                                                   ng-model="config.HostConfig.Privileged"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>VolumesFrom:</label>
-
-                                            <div ng-repeat="volume in config.HostConfig.VolumesFrom">
-                                                <div class="form-group form-inline">
-                                                    <select ng-model="volume.name"
-                                                            ng-options="name for name in containerNames track by name"
-                                                            class="form-control">
-                                                    </select>
-                                                    <a href="" ng-click="rmEntry(config.HostConfig.VolumesFrom, volume)">
-                                                      <i class="fa fa-minus" aria-hidden="true"></i>
-                                                    </a>
-                                                </div>
-                                            </div>
-                                            <a href="" ng-click="addEntry(config.HostConfig.VolumesFrom, {name: ''})">
-                                              <i class="fa fa-plus" aria-hidden="true"></i>
-                                            </a>
-                                        </div>
-
-                                        <div class="form-group">
-                                            <label>RestartPolicy:</label>
-                                            <select ng-model="config.HostConfig.RestartPolicy.name">
-                                                <option value="">disabled</option>
-                                                <option value="always">always</option>
-                                                <option value="on-failure">on-failure</option>
-                                            </select>
-                                            <label>MaximumRetryCount:</label>
-                                            <input type="number"
-                                                   ng-model="config.HostConfig.RestartPolicy.MaximumRetryCount"/>
-                                        </div>
-                                    </div>
-                                </div>
-                                <hr>
-                                <div class="form-group">
-                                    <label>ExtraHosts:</label>
-
-                                    <div ng-repeat="entry in config.HostConfig.ExtraHosts">
-                                        <div class="form-group form-inline">
-                                            <div class="form-group">
-                                                <label class="sr-only">Hostname:</label>
-                                                <input type="text" ng-model="entry.host" class="form-control"
-                                                       placeholder="hostname"/>
-                                            </div>
-                                            <div class="form-group">
-                                                <label class="sr-only">IP Address:</label>
-                                                <input type="text" ng-model="entry.ip" class="form-control"
-                                                       placeholder="127.0.0.1"/>
-                                            </div>
-                                            <div class="form-group">
-                                                <a href="" ng-click="rmEntry(config.HostConfig.ExtraHosts, entry)">
-                                                  <i class="fa fa-minus" aria-hidden="true"></i>
-                                                </a>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <a href="" ng-click="addEntry(config.HostConfig.ExtraHosts, {host: '', ip: ''})">
-                                      <i class="fa fa-plus" aria-hidden="true"></i>
-                                    </a>
-                                </div>
-                                <div class="form-group">
-                                    <label>LxcConf:</label>
-
-                                    <div ng-repeat="entry in config.HostConfig.LxcConf">
-                                        <div class="form-group form-inline">
-                                            <div class="form-group">
-                                                <label class="sr-only">Name:</label>
-                                                <input type="text" ng-model="entry.name" class="form-control"
-                                                       placeholder="lxc.utsname"/>
-                                            </div>
-                                            <div class="form-group">
-                                                <label class="sr-only">Value:</label>
-                                                <input type="text" ng-model="entry.value" class="form-control"
-                                                       placeholder="docker"/>
-                                            </div>
-                                            <div class="form-group">
-                                                <a href="" ng-click="rmEntry(config.HostConfig.LxcConf, entry)">
-                                                  <i class="fa fa-minus" aria-hidden="true"></i>
-                                                </a>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <a href="" ng-click="addEntry(config.HostConfig.LxcConf, {name: '', value: ''})">
-                                      <i class="fa fa-plus" aria-hidden="true"></i>
-                                    </a>
-                                </div>
-                                <div class="form-group">
-                                    <label>Devices:</label>
-
-                                    <div ng-repeat="device in config.HostConfig.Devices">
-                                        <div class="form-group form-inline inline-four">
-                                            <label class="sr-only">PathOnHost:</label>
-                                            <input type="text" ng-model="device.PathOnHost" class="form-control"
-                                                   placeholder="PathOnHost"/>
-                                            <label class="sr-only">PathInContainer:</label>
-                                            <input type="text" ng-model="device.PathInContainer" class="form-control"
-                                                   placeholder="PathInContainer"/>
-                                            <label class="sr-only">CgroupPermissions:</label>
-                                            <input type="text" ng-model="device.CgroupPermissions" class="form-control"
-                                                   placeholder="CgroupPermissions"/>
-                                            <a href="" ng-click="rmEntry(config.HostConfig.Devices, device)">
-                                              <i class="fa fa-minus" aria-hidden="true"></i>
-                                            </a>
-                                        </div>
-                                    </div>
-                                    <a href="" ng-click="addEntry(config.HostConfig.Devices, { PathOnHost: '', PathInContainer: '', CgroupPermissions: ''})">
-                                      <i class="fa fa-plus" aria-hidden="true"></i>
-                                    </a>
-                                </div>
-                                <div class="form-group">
-                                    <label>PortBindings:</label>
-
-                                    <div ng-repeat="portBinding in config.HostConfig.PortBindings">
-                                        <div class="form-group form-inline inline-four">
-                                            <label class="sr-only">Host IP:</label>
-                                            <input type="text" ng-model="portBinding.ip" class="form-control"
-                                                   placeholder="Host IP Address"/>
-                                            <label class="sr-only">Host Port:</label>
-                                            <input type="text" ng-model="portBinding.extPort" class="form-control"
-                                                   placeholder="Host Port"/>
-                                            <label class="sr-only">Container port:</label>
-                                            <input type="text" ng-model="portBinding.intPort" class="form-control"
-                                                   placeholder="Container Port"/>
-                                            <select ng-model="portBinding.protocol">
-                                                <option value="">tcp</option>
-                                                <option value="udp">udp</option>
-                                            </select>
-                                            <a href="" ng-click="rmEntry(config.HostConfig.PortBindings, portBinding)">
-                                              <i class="fa fa-minus" aria-hidden="true"></i>
-                                            </a>
-                                        </div>
-                                    </div>
-                                    <a href="" ng-click="addEntry(config.HostConfig.PortBindings, {ip: '', extPort: '', intPort: ''})">
-                                      <i class="fa fa-plus" aria-hidden="true"></i>
-                                    </a>
-                                </div>
-                            </fieldset>
-                        </accordion-group>
-                    </accordion>
-                </form>
-            </div>
-            <div class="modal-footer">
-                <a href="" class="btn btn-primary btn-lg" ng-click="create()">Create</a>
-            </div>
-        </div>
-    </div>
-</div>

app/components/stats/statsController.js

@@ -112,7 +112,7 @@ function (Settings, $scope, Messages, $timeout, Container, ContainerTop, $stateP
           return d[key];
         });
         if (arr.join('').indexOf('no such id') !== -1) {
-          Messages.error('Unable to retrieve stats', 'Is this container running?');
+          Messages.error('Unable to retrieve stats', {}, 'Is this container running?');
           return;
         }
 
@@ -123,7 +123,7 @@ function (Settings, $scope, Messages, $timeout, Container, ContainerTop, $stateP
         updateNetworkChart(d);
         timeout = $timeout(updateStats, 5000);
       }, function () {
-        Messages.error('Unable to retrieve stats', 'Is this container running?');
+        Messages.error('Unable to retrieve stats', {}, 'Is this container running?');
         timeout = $timeout(updateStats, 5000);
       });
     }
@@ -188,7 +188,7 @@ function (Settings, $scope, Messages, $timeout, Container, ContainerTop, $stateP
   Container.get({id: $stateParams.id}, function (d) {
     $scope.container = d;
   }, function (e) {
-    Messages.error("Failure", e.data);
+    Messages.error("Failure", e, "Unable to retrieve container info");
   });
   $scope.getTop();
 }]);

app/components/swarm/swarm.html

@@ -8,43 +8,7 @@
 </rd-header>
 
 <div class="row">
-  <div class="col-lg-3 col-md-6 col-xs-12">
-    <rd-widget>
-      <rd-widget-body>
-        <div class="widget-icon pull-left">
-          <i class="fa fa-code"></i>
-        </div>
-        <div class="title">{{ docker.Version }}</div>
-        <div class="comment">Swarm version</div>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-  <div class="col-lg-3 col-md-6 col-xs-12">
-    <rd-widget>
-      <rd-widget-body>
-        <div class="widget-icon pull-left">
-          <i class="fa fa-code"></i>
-        </div>
-        <div class="title">{{ docker.ApiVersion }}</div>
-        <div class="comment">API version</div>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-  <div class="col-lg-3 col-md-6 col-xs-12">
-    <rd-widget>
-      <rd-widget-body>
-        <div class="widget-icon pull-left">
-          <i class="fa fa-code"></i>
-        </div>
-        <div class="title">{{ docker.GoVersion }}</div>
-        <div class="comment">Go version</div>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>
-
-<div class="row">
-  <div class="col-lg-6">
+  <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">
@@ -54,42 +18,52 @@
               <td>Nodes</td>
               <td>{{ swarm.Nodes }}</td>
             </tr>
-            <tr>
-              <td>Containers</td>
-              <td>{{ info.Containers }}</td>
-            </tr>
             <tr>
               <td>Images</td>
               <td>{{ info.Images }}</td>
             </tr>
+            <tr>
+              <td>Swarm version</td>
+              <td>{{ docker.Version|swarmversion }}</td>
+            </tr>
+            <tr>
+              <td>Docker API version</td>
+              <td>{{ docker.ApiVersion }}</td>
+            </tr>
             <tr>
               <td>Strategy</td>
               <td>{{ swarm.Strategy }}</td>
             </tr>
             <tr>
-              <td>CPUs</td>
+              <td>Total CPU</td>
               <td>{{ info.NCPU }}</td>
             </tr>
             <tr>
-              <td>Total Memory</td>
+              <td>Total memory</td>
               <td>{{ info.MemTotal|humansize }}</td>
             </tr>
             <tr>
-              <td>Operating System</td>
+              <td>Operating system</td>
               <td>{{ info.OperatingSystem }}</td>
             </tr>
             <tr>
-              <td>Kernel Version</td>
+              <td>Kernel version</td>
               <td>{{ info.KernelVersion }}</td>
             </tr>
+            <tr>
+              <td>Go version</td>
+              <td>{{ docker.GoVersion }}</td>
+            </tr>
           </tbody>
         </table>
       </rd-widget-body>
     </rd-widget>
   </div>
-  <div class="col-lg-6">
+</div>
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
     <rd-widget>
-      <rd-widget-header icon="fa-hdd-o" title="Nodes status"></rd-widget-header>
+      <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>
@@ -101,6 +75,20 @@
                   <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
@@ -109,10 +97,10 @@
                 </a>
               </th>
               <th>
-                <a ui-sref="swarm" ng-click="order('Containers')">
-                  Containers
-                  <span ng-show="sortType == 'Containers' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'Containers' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                <a 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>
@@ -127,9 +115,11 @@
           <tbody>
             <tr ng-repeat="node in (state.filteredNodes = (swarm.Status | filter:state.filter | orderBy:sortType:sortReverse))">
               <td>{{ node.name }}</td>
+              <td>{{ node.cpu }}</td>
+              <td>{{ node.memory }}</td>
               <td>{{ node.ip }}</td>
-              <td>{{ node.containers }}</td>
-              <td><span class="label label-{{ node.status|statusbadge }}">{{ node.status }}</span></td>
+              <td>{{ node.version }}</td>
+              <td><span class="label label-{{ node.status|nodestatusbadge }}">{{ node.status }}</span></td>
             </tr>
           </tbody>
         </table>

app/components/swarm/swarmController.js

@@ -50,12 +50,12 @@ angular.module('swarm', [])
         var node = {};
         node.name = info[offset][0];
         node.ip = info[offset][1];
-        node.status = info[offset + 1][1];
-        node.containers = info[offset + 2][1];
-        node.cpu = info[offset + 3][1];
-        node.memory = info[offset + 4][1];
-        node.labels = info[offset + 5][1];
-        node.error = info[offset + 6][1];
+        node.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/templates/templates.html

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

app/components/templates/templatesController.js

@@ -0,0 +1,199 @@
+angular.module('templates', [])
+.controller('TemplatesController', ['$scope', '$q', '$state', '$filter', 'Config', 'Container', 'ContainerHelper', 'Image', 'Volume', 'Network', 'Templates', 'Messages',
+function ($scope, $q, $state, $filter, Config, Container, ContainerHelper, Image, Volume, Network, Templates, Messages) {
+  $scope.templates = [];
+  $scope.selectedTemplate = null;
+  $scope.formValues = {
+    network: "",
+    name: ""
+  };
+
+  var selectedItem = -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 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);
+        }
+      });
+    }
+    if (template.ports) {
+      template.ports.forEach(function (p) {
+        containerConfig.ExposedPorts[p] = {};
+        containerConfig.HostConfig.PortBindings[p] = [{ HostPort: ""}];
+      });
+    }
+    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.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.selectedTemplate = null;
+    } else {
+      $('#template_' + selectedItem).toggleClass("container-template--selected");
+      selectedItem = id;
+      $scope.selectedTemplate = $scope.templates[id];
+    }
+  };
+
+  function initTemplates() {
+    Templates.get(function (data) {
+      $scope.templates = data;
+      $('#loadTemplatesSpinner').hide();
+    }, function (e) {
+      $('#loadTemplatesSpinner').hide();
+      Messages.error("Failure", e, "Unable to retrieve apps list");
+    });
+  }
+
+  Config.$promise.then(function (c) {
+    $scope.swarm = c.swarm;
+    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

@@ -1,5 +1,3 @@
-<div ng-include="template" ng-controller="CreateVolumeController"></div>
-
 <rd-header>
   <rd-header-title title="Volume list">
     <a data-toggle="tooltip" title="Refresh" ui-sref="volumes" ui-sref-opts="{reload: true}">
@@ -12,13 +10,14 @@
 <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">
-        <div class="btn-group" role="group" aria-label="...">
-          <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount">Remove</button>
-          <button type="button" class="btn btn-default" data-toggle="modal" data-target="#create-volume-modal">Create new volume...</button>
-        </div>
+        <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount">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" />
@@ -26,10 +25,10 @@
     </rd-widget-taskbar>
     <rd-widget-body classes="no-padding">
       <div class="table-responsive">
-        <table class="table">
+        <table class="table table-hover">
           <thead>
             <tr>
-              <th><label><input type="checkbox" ng-model="state.toggle" ng-change="toggleSelectAll()"/> Select</label></th>
+              <th></th>
               <th>
                 <a ui-sref="volumes" ng-click="order('Name')">
                   Name
@@ -56,7 +55,7 @@
           <tbody>
             <tr ng-repeat="volume in (state.filteredVolumes = (volumes | filter:state.filter | orderBy:sortType:sortReverse))">
               <td><input type="checkbox" ng-model="volume.Checked" ng-change="selectItem(volume)"/></td>
-              <td>{{ volume.Name|truncate:20 }}</td>
+              <td>{{ volume.Name|truncate:50 }}</td>
               <td>{{ volume.Driver }}</td>
               <td>{{ volume.Mountpoint }}</td>
             </tr>
@@ -64,5 +63,5 @@
         </table>
       </div>
     </rd-widget-body>
-  <rd-widget>
-</div>
+    <rd-widget>
+    </div>

app/components/volumes/volumesController.js

@@ -1,28 +1,20 @@
 angular.module('volumes', [])
-.controller('VolumesController', ['$scope', 'Volume', 'ViewSpinner', 'Messages', 'errorMsgFilter',
-function ($scope, Volume, ViewSpinner, Messages, errorMsgFilter) {
+.controller('VolumesController', ['$scope', '$state', 'Volume', 'Messages',
+function ($scope, $state, Volume, Messages) {
   $scope.state = {};
-  $scope.state.toggle = false;
   $scope.state.selectedItemCount = 0;
   $scope.sortType = 'Name';
   $scope.sortReverse = true;
 
+  $scope.config = {
+    Name: ''
+  };
+
   $scope.order = function(sortType) {
     $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
     $scope.sortType = sortType;
   };
 
-  $scope.toggleSelectAll = function () {
-    angular.forEach($scope.state.filteredVolumes, function (i) {
-      i.Checked = $scope.state.toggle;
-    });
-    if ($scope.state.toggle) {
-      $scope.state.selectedItemCount = $scope.state.filteredVolumes.length;
-    } else {
-      $scope.state.selectedItemCount = 0;
-    }
-  };
-
   $scope.selectItem = function (item) {
     if (item.Checked) {
       $scope.state.selectedItemCount++;
@@ -32,12 +24,12 @@ function ($scope, Volume, ViewSpinner, Messages, errorMsgFilter) {
   };
 
   $scope.removeAction = function () {
-    ViewSpinner.spin();
+    $('#loadVolumesSpinner').show();
     var counter = 0;
     var complete = function () {
       counter = counter - 1;
       if (counter === 0) {
-        ViewSpinner.stop();
+        $('#loadVolumesSpinner').hide();
       }
     };
     angular.forEach($scope.volumes, function (volume) {
@@ -49,7 +41,7 @@ function ($scope, Volume, ViewSpinner, Messages, errorMsgFilter) {
           $scope.volumes.splice(index, 1);
           complete();
         }, function (e) {
-          Messages.error("Failure", e.data);
+          Messages.error("Failure", e, "Unable to remove volume");
           complete();
         });
       }
@@ -57,13 +49,13 @@ function ($scope, Volume, ViewSpinner, Messages, errorMsgFilter) {
   };
 
   function fetchVolumes() {
-    ViewSpinner.spin();
+    $('#loadVolumesSpinner').show();
     Volume.query({}, function (d) {
       $scope.volumes = d.Volumes;
-      ViewSpinner.stop();
+      $('#loadVolumesSpinner').hide();
     }, function (e) {
-      Messages.error("Failure", e.data);
-      ViewSpinner.stop();
+      $('#loadVolumesSpinner').hide();
+      Messages.error("Failure", e, "Unable to retrieve volumes");
     });
   }
   fetchVolumes();

app/directives/header-content.js

@@ -1,5 +1,5 @@
 angular
-.module('uifordocker')
+.module('portainer')
 .directive('rdHeaderContent', function rdHeaderContent() {
   var directive = {
     requires: '^rdHeader',

app/directives/header-title.js

@@ -1,5 +1,5 @@
 angular
-.module('uifordocker')
+.module('portainer')
 .directive('rdHeaderTitle', function rdHeaderTitle() {
   var directive = {
     requires: '^rdHeader',

app/directives/header.js

@@ -1,5 +1,5 @@
 angular
-.module('uifordocker')
+.module('portainer')
 .directive('rdHeader', function rdHeader() {
   var directive = {
     scope: {

app/directives/loading.js

@@ -1,5 +1,5 @@
 angular
-.module('uifordocker')
+.module('portainer')
 .directive('rdLoading', function rdLoading() {
   var directive = {
     restrict: 'AE',

app/directives/widget-body.js

@@ -1,5 +1,5 @@
 angular
-.module('uifordocker')
+.module('portainer')
 .directive('rdWidgetBody', function rdWidgetBody() {
   var directive = {
     requires: '^rdWidget',

app/directives/widget-footer.js

@@ -1,5 +1,5 @@
 angular
-.module('uifordocker')
+.module('portainer')
 .directive('rdWidgetFooter', function rdWidgetFooter() {
   var directive = {
     requires: '^rdWidget',

app/directives/widget-header.js

@@ -1,5 +1,5 @@
 angular
-.module('uifordocker')
+.module('portainer')
 .directive('rdWidgetHeader', function rdWidgetTitle() {
   var directive = {
     requires: '^rdWidget',
@@ -8,7 +8,7 @@ angular
       icon: '@'
     },
     transclude: true,
-    template: '<div class="widget-header"><div class="row"><div class="pull-left"><i class="fa" ng-class="icon"></i> {{title}} </div><div class="pull-right col-xs-6 col-sm-4" ng-transclude></div></div></div>',
+    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

@@ -1,5 +1,5 @@
 angular
-.module('uifordocker')
+.module('portainer')
 .directive('rdWidgetTaskbar', function rdWidgetTaskbar() {
   var directive = {
     requires: '^rdWidget',

app/directives/widget.js

@@ -1,5 +1,5 @@
 angular
-.module('uifordocker')
+.module('portainer')
 .directive('rdWidget', function rdWidget() {
   var directive = {
     scope: {

app/shared/filters.js

@@ -1,128 +1,194 @@
-angular.module('dockerui.filters', [])
-    .filter('truncate', function () {
-        'use strict';
-        return function (text, length, end) {
-            if (isNaN(length)) {
-                length = 10;
-            }
+angular.module('portainer.filters', [])
+.filter('truncate', function () {
+  'use strict';
+  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 () {
-        'use strict';
-        return function (text) {
-            if (text === 'Ghost') {
-                return 'important';
-            } else if (text === 'Unhealthy') {
-                return 'danger';
-            } else if (text.indexOf('Exit') !== -1 && text !== 'Exit 0') {
-                return 'warning';
-            }
-            return 'success';
-        };
-    })
-    .filter('trimcontainername', function () {
-      'use strict';
-      return function (name) {
-        if (name) {
-          return (name.indexOf('/') === 0 ? name.replace('/','') : name);          
-        }
-        return '';
-      };
-    })
-    .filter('getstatetext', function () {
-        'use strict';
-        return function (state) {
-            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) {
-            var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
-            if (bytes === 0) {
-                return 'n/a';
-            }
-            var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10);
-            var value = bytes / Math.pow(1024, i);
-            var decimalPlaces = (i < 1) ? 0 : (i - 1);
-            return value.toFixed(decimalPlaces) + ' ' + sizes[[i]];
-        };
-    })
-    .filter('containername', function () {
-        'use strict';
-        return function (container) {
-            var name = container.Names[0];
-            return name.substring(1, name.length);
-        };
-    })
-    .filter('repotag', function () {
-        'use strict';
-        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 () {
-        'use strict';
-        return function (data) {
-            //Multiply by 1000 for the unix format
-            var date = new Date(data * 1000);
-            return date.toDateString();
-        };
-    })
-    .filter('errorMsg', function () {
-        return function (object) {
-            var idx = 0;
-            var msg = '';
-            while (object[idx] && typeof(object[idx]) === 'string') {
-                msg += object[idx];
-                idx++;
-            }
-            return msg;
-        };
-    });
+    if (text.length <= length || text.length - end.length <= length) {
+      return text;
+    }
+    else {
+      return String(text).substring(0, length - end.length) + end;
+    }
+  };
+})
+.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) {
+    var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    if (bytes === 0) {
+      return 'n/a';
+    }
+    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10);
+    var value = bytes / Math.pow(1024, i);
+    var decimalPlaces = (i < 1) ? 0 : (i - 1);
+    return value.toFixed(decimalPlaces) + ' ' + sizes[[i]];
+  };
+})
+.filter('containername', function () {
+  '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);
+  };
+});

app/shared/helpers.js

@@ -0,0 +1,37 @@
+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;
+        }
+      });
+    }
+  };
+}]);

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) {
+  var response = [];
+  // A string is returned on failure (Docker < 1.12)
+  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,4 +1,4 @@
-angular.module('dockerui.services', ['ngResource', 'ngSanitize'])
+angular.module('portainer.services', ['ngResource', 'ngSanitize'])
     .factory('Container', ['$resource', 'Settings', function ContainerFactory($resource, Settings) {
         'use strict';
         // Resource for interacting with the docker containers
@@ -8,38 +8,51 @@ angular.module('dockerui.services', ['ngResource', 'ngSanitize'])
         }, {
             query: {method: 'GET', params: {all: 0, action: 'json'}, isArray: true},
             get: {method: 'GET', params: {action: 'json'}},
-            start: {method: 'POST', params: {id: '@id', action: 'start'}},
             stop: {method: 'POST', params: {id: '@id', t: 5, action: 'stop'}},
             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}},
-            rename: {method: 'POST', params: {id: '@id', action: 'rename'}, isArray: false},
-            stats: {method: 'GET', params: {id: '@id', stream: false, action: 'stats'}, timeout: 5000}
+            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('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 {
-            commit: function (params, callback) {
-                $http({
-                    method: 'POST',
-                    url: Settings.url + '/commit',
-                    params: {
-                        'container': params.id,
-                        'tag': params.tag || null,
-                        'repo': params.repo || null
-                    },
-                    data: params.config
-                }).success(callback).error(function (data, status, headers, config) {
-                    console.log(error, data);
-                });
-            }
-        };
+        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';
@@ -84,18 +97,31 @@ angular.module('dockerui.services', ['ngResource', 'ngSanitize'])
             get: {method: 'GET', params: {action: 'json'}},
             search: {method: 'GET', params: {action: 'search'}},
             history: {method: 'GET', params: {action: 'history'}, isArray: true},
-            create: {
-                method: 'POST', isArray: true, transformResponse: [function f(data) {
-                    var str = data.replace(/\n/g, " ").replace(/\}\W*\{/g, "}, {");
-                    return angular.fromJson("[" + str + "]");
-                }],
-                params: {action: 'create', fromImage: '@fromImage', repo: '@repo', tag: '@tag', registry: '@registry'}
-            },
             insert: {method: 'POST', params: {id: '@id', action: 'insert'}},
-            push: {method: 'POST', params: {id: '@id', action: 'push'}},
             tag: {method: 'POST', params: {id: '@id', action: 'tag', force: 0, repo: '@repo', tag: '@tag'}},
-            remove: {method: 'DELETE', params: {id: '@id'}, isArray: true},
-            inspect: {method: 'GET', params: {id: '@id', action: 'json'}}
+            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('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) {
@@ -126,8 +152,8 @@ angular.module('dockerui.services', ['ngResource', 'ngSanitize'])
         return $resource(Settings.url + '/networks/:id/:action', {id: '@id'}, {
             query: {method: 'GET', isArray: true},
             get: {method: 'GET'},
-            create: {method: 'POST', params: {action: 'create'}},
-            remove: {method: 'DELETE'},
+            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'}}
         });
@@ -138,12 +164,17 @@ angular.module('dockerui.services', ['ngResource', 'ngSanitize'])
         return $resource(Settings.url + '/volumes/:name/:action', {name: '@name'}, {
             query: {method: 'GET'},
             get: {method: 'GET'},
-            create: {method: 'POST', params: {action: 'create'}},
+            create: {method: 'POST', params: {action: 'create'}, transformResponse: genericHandler},
             remove: {method: 'DELETE'}
         });
     }])
-    .factory('Config', ['$resource', 'CONFIG_ENDPOINT', function($resource, CONFIG_ENDPOINT) {
-      return $resource(CONFIG_ENDPOINT);
+    .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', function SettingsFactory(DOCKER_ENDPOINT, DOCKER_PORT, UI_VERSION) {
         'use strict';
@@ -153,27 +184,13 @@ angular.module('dockerui.services', ['ngResource', 'ngSanitize'])
         }
         var firstLoad = (localStorage.getItem('firstLoad') || 'true') === 'true';
         return {
-          displayAll: false,
+          displayAll: true,
           endpoint: DOCKER_ENDPOINT,
           uiVersion: UI_VERSION,
           url: url,
           firstLoad: firstLoad
         };
     }])
-    .factory('ViewSpinner', function ViewSpinnerFactory() {
-        'use strict';
-        var spinner = new Spinner();
-        var target = document.getElementById('view');
-
-        return {
-            spin: function () {
-                spinner.spin(target);
-            },
-            stop: function () {
-                spinner.stop();
-            }
-        };
-    })
     .factory('Messages', ['$rootScope', '$sanitize', function MessagesFactory($rootScope, $sanitize) {
         'use strict';
         return {
@@ -189,10 +206,17 @@ angular.module('dockerui.services', ['ngResource', 'ngSanitize'])
                     }
                 });
             },
-            error: function (title, text) {
+            error: function (title, e, fallbackText) {
+                console.log(JSON.stringify(e, null, 4));
+                var msg = fallbackText;
+                if (e.data && e.data.message) {
+                  msg = e.data.message;
+                } else if (e.message) {
+                  msg = e.message;
+                }
                 $.gritter.add({
                     title: $sanitize(title),
-                    text: $sanitize(text),
+                    text: $sanitize(msg),
                     time: 10000,
                     before_open: function () {
                         if ($('.gritter-item-wrapper').length === 4) {

app/shared/viewmodel.js

@@ -1,20 +1,141 @@
 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 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) {
+    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;
+      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;
+      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

@@ -116,8 +116,11 @@
 
 .logo {
   display: inline;
-  width: 110px;
-  max-height: 38px;
+  width: 100%;
+  max-width: 155px;
+  height: 100%;
+  max-height: 55px;
+  margin-bottom: 5px;
 }
 
 .containerNameInput {
@@ -143,3 +146,112 @@
 .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;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.text-icon {
+  margin-right: 5px;
+}
+
+.fa.green-icon {
+  color: #23ae89;
+}
+
+.fa.red-icon {
+  color: #ae2323;
+}
+
+.fa.white-icon {
+  color: white;
+}
+
+.image-tag {
+  margin-right: 5px;
+}
+
+.label.tag {
+  margin-right: 5px;
+}
+
+.widget .widget-body table tbody .image-tag {
+  font-size: 90% !important;
+}
+
+.terminal-container {
+  width: 100%;
+  padding: 10px 5px;
+}
+
+.interactive {
+  cursor: pointer;
+}
+
+.action-group {
+  margin: 10px;
+}
+
+.btn-ico {
+  margin-right: 5px;
+}
+
+.template-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.container-template {
+  font-size: 1em;
+  width: 256px;
+  height: 128px;
+  margin: 10px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  cursor: pointer;
+  border: 2px solid #f6f6f6;
+  color: #30426a;
+}
+
+.container-template--selected {
+  background-color: #f6f6f6;
+  color: #2d3e63;
+}
+
+.container-template:hover {
+  background-color: #f6f6f6;
+  color: #2d3e63;
+}
+
+.container-template .logo {
+  max-width: 48px;
+  max-height: 48px;
+}
+
+.container-template .title {
+  text-align: center;
+}
+
+.container-template .description {
+  text-align: center;
+  font-size: 0.8em;
+}

bower.json

@@ -1,18 +1,18 @@
 {
-  "name": "uifordocker",
-  "version": "1.0.3",
-  "homepage": "https://github.com/kevana/ui-for-docker",
+  "name": "portainer",
+  "version": "1.8.0",
+  "homepage": "https://github.com/cloud-inovasi/portainer",
   "authors": [
-    "Michael Crosby <crosbymichael@gmail.com>",
-    "Kevan Ahlquist <ahlquistkd@gmail.com>",
     "Anthony Lapenna <anthony.lapenna@cloudinovasi.id>"
   ],
   "description": "A web interface for the Docker Remote API.",
   "keywords": [
-    "uifordocker",
-    "dockerui",
     "docker",
-    "api"
+    "ui",
+    "api",
+    "portainer",
+    "uifordocker",
+    "dockerui"
   ],
   "license": "MIT",
   "ignore": [
@@ -30,16 +30,17 @@
     "angular-ui-router": "^0.2.15",
     "angular-sanitize": "~1.5.0",
     "angular-mocks": "~1.5.0",
-    "angular-oboe": "*",
     "angular-resource": "~1.5.0",
     "angular-ui-select": "~0.17.1",
     "bootstrap": "~3.3.6",
-    "font-awesome": "~4.5.0",
+    "font-awesome": "~4.6.3",
+    "Hover": "2.0.2",
     "jquery": "1.11.1",
     "jquery.gritter": "1.7.4",
     "lodash": "4.12.0",
     "rdash-ui": "1.0.*",
-    "spin.js": "1.3"
+    "moment": "~2.14.1",
+    "xterm.js": "~1.0.0"
   },
   "resolutions": {
     "angular": "1.5.5"

dockerui.go

@@ -1,149 +0,0 @@
-package main // import "github.com/cloudinovasi/ui-for-docker"
-
-import (
-	"flag"
-	"io"
-	"log"
-	"net"
-	"net/http"
-	"net/http/httputil"
-	"net/url"
-	"encoding/json"
-	"os"
-	"strings"
-	"github.com/gorilla/csrf"
-	"io/ioutil"
-	"fmt"
-	"github.com/gorilla/securecookie"
-)
-
-var (
-	endpoint = flag.String("e", "/var/run/docker.sock", "Dockerd endpoint")
-	addr     = flag.String("p", ":9000", "Address and port to serve UI For Docker")
-	assets   = flag.String("a", ".", "Path to the assets")
-	swarm		 = flag.Bool("s", false, "Swarm mode")
-	authKey  []byte
-	authKeyFile = "authKey.dat"
-)
-
-type UnixHandler struct {
-	path string
-}
-
-type Config struct {
-	Swarm bool `json:"swarm"`
-}
-
-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)
-		}
-	}
-}
-
-func configurationHandler(w http.ResponseWriter, r *http.Request, c Config) {
-    json.NewEncoder(w).Encode(c)
-}
-
-func createTcpHandler(e string) http.Handler {
-	u, err := url.Parse(e)
-	if err != nil {
-		log.Fatal(err)
-	}
-	return httputil.NewSingleHostReverseProxy(u)
-}
-
-func createUnixHandler(e string) http.Handler {
-	return &UnixHandler{e}
-}
-
-func createHandler(dir string, e string, s bool) http.Handler {
-	var (
-		mux         = http.NewServeMux()
-		fileHandler = http.FileServer(http.Dir(dir))
-		h           http.Handler
-	)
-
-	if strings.Contains(e, "http") {
-		h = createTcpHandler(e)
-	} else {
-		if _, err := os.Stat(e); err != nil {
-			if os.IsNotExist(err) {
-				log.Fatalf("unix socket %s does not exist", e)
-			}
-			log.Fatal(err)
-		}
-		h = createUnixHandler(e)
-	}
-
-	// Use existing csrf authKey if present or generate a new one.
-	dat, err := ioutil.ReadFile(authKeyFile)
-	if err != nil {
-		fmt.Println(err)
-		authKey = securecookie.GenerateRandomKey(32)
-		err := ioutil.WriteFile(authKeyFile, authKey, 0644)
-		if err != nil {
-			fmt.Println("unable to persist auth key", err)
-		}
-	} else {
-		authKey = dat
-	}
-
-	CSRF := csrf.Protect(
-		authKey,
-		csrf.HttpOnly(false),
-		csrf.Secure(false),
-	)
-
-	configuration := Config{
-		Swarm: s,
-	}
-
-	mux.Handle("/dockerapi/", http.StripPrefix("/dockerapi", h))
-	mux.Handle("/", fileHandler)
-	mux.HandleFunc("/config", func(w http.ResponseWriter, r *http.Request) {
-  	configurationHandler(w, r, configuration)
-  })
-	return CSRF(csrfWrapper(mux))
-}
-
-func csrfWrapper(h http.Handler) http.Handler {
-	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-		w.Header().Set("X-CSRF-Token", csrf.Token(r))
-		h.ServeHTTP(w, r)
-	})
-}
-
-func main() {
-	flag.Parse()
-
-	handler := createHandler(*assets, *endpoint, *swarm)
-	if err := http.ListenAndServe(*addr, handler); err != nil {
-		log.Fatal(err)
-	}
-}

examples/nginx-basic-auth/default.conf

@@ -1,5 +1,5 @@
-upstream dockerui {
-    server dockerui:9000;
+upstream portainer {
+    server portainer:9000;
 }
 
 server {
@@ -12,6 +12,6 @@ server {
 
         proxy_http_version 1.1;
         proxy_set_header Connection "";
-        proxy_pass http://dockerui;
+        proxy_pass http://portainer;
     }
 }

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

@@ -1,10 +1,10 @@
-dockerui:
-  image: cloudinovasi/ui-for-docker
+portainer:
+  image: cloudinovasi/portainer
   command: -e http://<SWARM_HOST>:<SWARM_PORT>
 
 nginx:
   build: .
   links:
-   - dockerui
+   - portainer
   ports:
    - 80:80

gruntFile.js

@@ -24,7 +24,7 @@ module.exports = function (grunt) {
         'copy'
     ]);
     grunt.registerTask('release', [
-        'clean:app',
+        'clean:all',
         'if:binaryNotExist',
         'html2js',
         'uglify',
@@ -35,10 +35,12 @@ module.exports = function (grunt) {
         'recess:min',
         'copy'
     ]);
+    grunt.registerTask('lint', ['jshint']);
     grunt.registerTask('test-watch', ['karma:watch']);
     grunt.registerTask('run', ['if:binaryNotExist', 'build', 'shell:buildImage', 'shell:run']);
     grunt.registerTask('run-swarm', ['if:binaryNotExist', 'build', 'shell:buildImage', 'shell:runSwarm', 'watch:buildSwarm']);
     grunt.registerTask('run-dev', ['if:binaryNotExist', 'shell:buildImage', 'shell:run', 'watch:build']);
+    grunt.registerTask('run-ssl', ['if:binaryNotExist', 'shell:buildImage', 'shell:runSsl', 'watch:buildSsl']);
     grunt.registerTask('clear', ['clean:app']);
 
     // Print a timestamp (useful for when watching)
@@ -66,12 +68,12 @@ module.exports = function (grunt) {
             jsTpl: ['<%= distdir %>/templates/**/*.js'],
             jsVendor: [
                 'bower_components/jquery/dist/jquery.min.js',
-                'assets/js/jquery.gritter.js', // Using custom version to fix error in minified build due to "use strict"
                 'bower_components/bootstrap/dist/js/bootstrap.min.js',
-                'bower_components/spin.js/spin.js',
                 'bower_components/Chart.js/Chart.min.js',
                 'bower_components/lodash/dist/lodash.min.js',
-                'bower_components/oboe/dist/oboe-browser.js',
+                'bower_components/moment/min/moment.min.js',
+                'bower_components/xterm.js/src/xterm.js',
+                'assets/js/jquery.gritter.js', // Using custom version to fix error in minified build due to "use strict"
                 'assets/js/legend.js' // Not a bower package
             ],
             specs: ['test/**/*.spec.js'],
@@ -84,12 +86,14 @@ module.exports = function (grunt) {
                 'bower_components/jquery.gritter/css/jquery.gritter.css',
                 'bower_components/font-awesome/css/font-awesome.min.css',
                 'bower_components/rdash-ui/dist/css/rdash.min.css',
-                'bower_components/angular-ui-select/dist/select.min.css'
+                'bower_components/angular-ui-select/dist/select.min.css',
+                'bower_components/xterm.js/src/xterm.css',
+                'bower_components/Hover/css/hover-min.css'
             ]
         },
         clean: {
             all: ['<%= distdir %>/*'],
-            app: ['<%= distdir %>/*', '!<%= distdir %>/ui-for-docker'],
+            app: ['<%= distdir %>/*', '!<%= distdir %>/portainer'],
             tmpl: ['<%= distdir %>/templates']
         },
         copy: {
@@ -155,7 +159,6 @@ module.exports = function (grunt) {
                     'bower_components/angular-ui-router/release/angular-ui-router.min.js',
                     'bower_components/angular-resource/angular-resource.min.js',
                     'bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js',
-                    'bower_components/angular-oboe/dist/angular-oboe.min.js',
                     'bower_components/angular-ui-select/dist/select.min.js'],
                 dest: '<%= distdir %>/js/angular.js'
             }
@@ -224,6 +227,10 @@ module.exports = function (grunt) {
             buildSwarm: {
                 files: ['<%= src.js %>', '<%= src.specs %>', '<%= src.css %>', '<%= src.tpl %>', '<%= src.html %>'],
                 tasks: ['build', 'shell:buildImage', 'shell:runSwarm', 'shell:cleanImages']
+            },
+            buildSsl: {
+                files: ['<%= src.js %>', '<%= src.specs %>', '<%= src.css %>', '<%= src.tpl %>', '<%= src.html %>'],
+                tasks: ['build', 'shell:buildImage', 'shell:runSsl', 'shell:cleanImages']
             }
         },
         jshint: {
@@ -246,28 +253,35 @@ module.exports = function (grunt) {
         },
         shell: {
             buildImage: {
-                command: 'docker build --rm -t ui-for-docker .'
+                command: 'docker build --rm -t portainer .'
             },
             buildBinary: {
                 command: [
-                    'docker run --rm -v $(pwd):/src centurylink/golang-builder',
-                    'shasum ui-for-docker > ui-for-docker-checksum.txt',
+                    'docker run --rm -v $(pwd)/api:/src centurylink/golang-builder',
+                    'shasum api/portainer > portainer-checksum.txt',
                     'mkdir -p dist',
-                    'mv ui-for-docker dist/'
+                    'mv api/portainer dist/'
                 ].join(' && ')
             },
             run: {
                 command: [
-                    'docker stop ui-for-docker',
-                    'docker rm ui-for-docker',
-                    'docker run --privileged -d -p 9000:9000 -v /var/run/docker.sock:/var/run/docker.sock --name ui-for-docker ui-for-docker'
+                    'docker stop portainer',
+                    'docker rm portainer',
+                    'docker run --privileged -d -p 9000:9000 -v /tmp/portainer:/data -v /var/run/docker.sock:/var/run/docker.sock --name portainer portainer -d /data'
                 ].join(';')
             },
             runSwarm: {
                 command: [
-                    'docker stop ui-for-docker',
-                    'docker rm ui-for-docker',
-                    'docker run --privileged -d -p 9000:9000 -v /var/run/docker.sock:/var/run/docker.sock --name ui-for-docker ui-for-docker -s'
+                    'docker stop portainer',
+                    'docker rm portainer',
+                    'docker run -d -p 9000:9000 -v /tmp/portainer:/data --name portainer portainer -H tcp://10.0.7.10:4000 --swarm -d /data'
+                ].join(';')
+            },
+            runSsl: {
+                command: [
+                    'docker stop portainer',
+                    'docker rm portainer',
+                    'docker run -d -p 9000:9000 -v /tmp/portainer:/data -v /tmp/docker-ssl:/certs --name portainer portainer -H tcp://10.0.7.10:2376 -d /data --tlsverify'
                 ].join(';')
             },
             cleanImages: {
@@ -277,7 +291,7 @@ module.exports = function (grunt) {
         'if': {
             binaryNotExist: {
                 options: {
-                    executable: 'dist/ui-for-docker'
+                    executable: 'dist/portainer'
                 },
                 ifFalse: ['shell:buildBinary']
             }

index.html

@@ -2,7 +2,7 @@
 <html lang="en" ng-app="<%= pkg.name %>">
 <head>
   <meta charset="utf-8">
-  <title>CloudInovasi UI for Docker</title>
+  <title>Portainer</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description" content="">
   <meta name="author" content="<%= pkg.author %>">
@@ -32,7 +32,8 @@
       <ul class="sidebar">
         <li class="sidebar-main">
           <a ng-click="toggleSidebar()">
-            <img src="images/logo.png" class="img-responsive logo" alt="logo">
+            <img ng-if="config.logo" ng-src="{{ config.logo }}" class="img-responsive logo">
+            <img ng-if="!config.logo" src="images/logo.png" class="img-responsive logo" alt="Portainer">
             <span class="menu-icon glyphicon glyphicon-transfer"></span>
           </a>
         </li>
@@ -40,6 +41,9 @@
         <li class="sidebar-list">
           <a ui-sref="index">Dashboard <span class="menu-icon fa fa-tachometer"></span></a>
         </li>
+        <li class="sidebar-list">
+          <a ui-sref="templates">App Templates <span class="menu-icon fa fa-rocket"></span></a>
+        </li>
         <li class="sidebar-list">
           <a ui-sref="containers">Containers <span class="menu-icon fa fa-server"></span></a>
         </li>
@@ -52,6 +56,9 @@
         <li class="sidebar-list">
           <a ui-sref="volumes">Volumes <span class="menu-icon fa fa-cubes"></span></a>
         </li>
+        <li class="sidebar-list" ng-if="!config.swarm">
+          <a ui-sref="events">Events <span class="menu-icon fa fa-history"></span></a>
+        </li>
         <li class="sidebar-list" ng-if="config.swarm">
           <a ui-sref="swarm">Swarm <span class="menu-icon fa fa-object-group"></span></a>
         </li>
@@ -61,7 +68,7 @@
       </ul>
       <div class="sidebar-footer">
         <div class="col-xs-12">
-          <a href="https://github.com/cloud-inovasi/cloudinovasi-ui" target="_blank">CloudInovasi UI {{ uiVersion }}</a>
+          <a href="https://github.com/cloud-inovasi/portainer" target="_blank">Portainer {{ uiVersion }}</a>
         </div>
       </div>
     </div>

package.json

@@ -1,19 +1,19 @@
 {
-  "author": "Michael Crosby & Kevan Ahlquist",
-  "name": "uifordocker",
-  "homepage": "https://github.com/kevana/ui-for-docker",
-  "version": "1.0.3",
+  "author": "Cloud Inovasi",
+  "name": "portainer",
+  "homepage": "https://github.com/cloud-inovasi/portainer",
+  "version": "1.8.0",
   "repository": {
     "type": "git",
-    "url": "git@github.com:kevana/ui-for-docker.git"
+    "url": "git@github.com:cloud-inovasi/portainer.git"
   },
   "bugs": {
-    "url": "https://github.com/kevana/ui-for-docker/issues"
+    "url": "https://github.com/cloud-inovasi/portainer/issues"
   },
   "licenses": [
     {
       "type": "MIT",
-      "url": "https://raw.githubusercontent.com/kevana/ui-for-docker/master/LICENSE"
+      "url": "https://raw.githubusercontent.com/cloud-inovasi/portainer/develop/LICENSE"
     }
   ],
   "engines": {

test/unit/app/components/containerController.spec.js

@@ -1,7 +1,7 @@
 describe('ContainerController', function () {
     var $scope, $httpBackend, mockContainer, $routeParams;
 
-    beforeEach(module('dockerui'));
+    beforeEach(module('portainer'));
 
 
     beforeEach(inject(function ($rootScope, $controller, _$routeParams_) {
@@ -22,8 +22,8 @@ describe('ContainerController', function () {
         $httpBackend.expectGET('dockerapi/containers/json').respond({
             'Created': 1421817232,
             'id': 'b17882378cee8ec0136f482681b764cca430befd52a9bfd1bde031f49b8bba9f',
-            'Image': 'dockerui:latest',
-            'Name': '/dockerui'
+            'Image': 'portainer:latest',
+            'Name': '/portainer'
         });
     }
 
@@ -33,8 +33,8 @@ describe('ContainerController', function () {
         $scope.container = {
             'Created': 1421817232,
             'id': 'b17882378cee8ec0136f482681b764cca430befd52a9bfd1bde031f49b8bba9f',
-            'Image': 'dockerui:latest',
-            'Name': '/dockerui'
+            'Image': 'portainer:latest',
+            'Name': '/portainer'
         };
         $scope.container.newContainerName = "newName";
 

test/unit/app/components/containerTopController.spec.js

@@ -1,7 +1,7 @@
 describe("ContainerTopController", function () {
     var $scope, $httpBackend, $routeParams;
 
-    beforeEach(angular.mock.module('dockerui'));
+    beforeEach(angular.mock.module('portainer'));
 
     beforeEach(inject(function (_$rootScope_, _$httpBackend_, $controller, _$routeParams_) {
         $scope = _$rootScope_.$new();

test/unit/app/components/networkController.spec.js

@@ -1,7 +1,7 @@
 describe('NetworkController', function () {
     var $scope, $httpBackend, $routeParams;
 
-    beforeEach(module('dockerui'));
+    beforeEach(module('portainer'));
     beforeEach(inject(function (_$httpBackend_, $controller, _$routeParams_) {
         $scope = {};
         $httpBackend = _$httpBackend_;

test/unit/app/components/networksController.spec.js

@@ -1,7 +1,7 @@
 describe('NetworksController', function () {
     var $scope, $httpBackend, $routeParams;
 
-    beforeEach(module('dockerui'));
+    beforeEach(module('portainer'));
     beforeEach(inject(function (_$httpBackend_, $controller, _$routeParams_) {
         $scope = {};
         $httpBackend = _$httpBackend_;

test/unit/app/components/startContainerController.spec.js

@@ -1,7 +1,7 @@
 describe('startContainerController', function () {
     var scope, $location, createController, mockContainer, $httpBackend;
 
-    beforeEach(angular.mock.module('dockerui'));
+    beforeEach(angular.mock.module('portainer'));
 
     beforeEach(inject(function ($rootScope, $controller, _$location_) {
         $location = _$location_;
@@ -20,11 +20,11 @@ describe('startContainerController', function () {
     }));
     function expectGetContainers() {
         $httpBackend.expectGET('dockerapi/containers/json?all=1').respond([{
-            'Command': './dockerui -e /docker.sock',
+            'Command': './portainer -e /docker.sock',
             'Created': 1421817232,
             'Id': 'b17882378cee8ec0136f482681b764cca430befd52a9bfd1bde031f49b8bba9f',
-            'Image': 'dockerui:latest',
-            'Names': ['/dockerui'],
+            'Image': 'portainer:latest',
+            'Names': ['/portainer'],
             'Ports': [{
                 'IP': '0.0.0.0',
                 'PrivatePort': 9000,

test/unit/app/components/statsController.spec.js

@@ -1,7 +1,7 @@
 describe("StatsController", function () {
     var $scope, $httpBackend, $routeParams;
 
-    beforeEach(angular.mock.module('dockerui'));
+    beforeEach(angular.mock.module('portainer'));
 
     beforeEach(inject(function (_$rootScope_, _$httpBackend_, $controller, _$routeParams_) {
         $scope = _$rootScope_.$new();

test/unit/app/components/volumesController.spec.js

@@ -1,7 +1,7 @@
 describe('VolumesController', function () {
     var $scope, $httpBackend, $routeParams;
 
-    beforeEach(module('dockerui'));
+    beforeEach(module('portainer'));
     beforeEach(inject(function (_$httpBackend_, $controller, _$routeParams_) {
         $scope = {};
         $httpBackend = _$httpBackend_;

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

@@ -1,5 +1,5 @@
 describe('filters', function () {
-    beforeEach(module('dockerui.filters'));
+    beforeEach(module('portainer.filters'));
 
     describe('truncate', function () {
         it('should truncate the string to 10 characters ending in "..." by default', inject(function (truncateFilter) {
@@ -15,20 +15,6 @@ describe('filters', function () {
         }));
     });
 
-    describe('statusbadge', function () {
-        it('should be "important" when input is "Ghost"', inject(function (statusbadgeFilter) {
-            expect(statusbadgeFilter('Ghost')).toBe('important');
-        }));
-
-        it('should be "success" when input is "Exit 0"', inject(function (statusbadgeFilter) {
-            expect(statusbadgeFilter('Exit 0')).toBe('success');
-        }));
-
-        it('should be "warning" when exit code is non-zero', inject(function (statusbadgeFilter) {
-            expect(statusbadgeFilter('Exit 1')).toBe('warning');
-        }));
-    });
-
     describe('getstatetext', function () {
 
         it('should return an empty string when state is undefined', inject(function (getstatetextFilter) {
@@ -147,209 +133,4 @@ describe('filters', function () {
             expect(repotagFilter(image)).toBe('ubuntu:latest');
         }));
     });
-
-    describe('getdate', function () {
-        it('should convert the Docker date to a human readable form', inject(function (getdateFilter) {
-            expect(getdateFilter(1420424998)).toBe('Sun Jan 04 2015');
-        }));
-    });
-
-    describe('errorMsgFilter', function () {
-        it('should convert the $resource object to a string message',
-            inject(function (errorMsgFilter) {
-                var response = {
-                    '0': 'C',
-                    '1': 'o',
-                    '2': 'n',
-                    '3': 'f',
-                    '4': 'l',
-                    '5': 'i',
-                    '6': 'c',
-                    '7': 't',
-                    '8': ',',
-                    '9': ' ',
-                    '10': 'T',
-                    '11': 'h',
-                    '12': 'e',
-                    '13': ' ',
-                    '14': 'n',
-                    '15': 'a',
-                    '16': 'm',
-                    '17': 'e',
-                    '18': ' ',
-                    '19': 'u',
-                    '20': 'b',
-                    '21': 'u',
-                    '22': 'n',
-                    '23': 't',
-                    '24': 'u',
-                    '25': '-',
-                    '26': 's',
-                    '27': 'l',
-                    '28': 'e',
-                    '29': 'e',
-                    '30': 'p',
-                    '31': '-',
-                    '32': 'r',
-                    '33': 'u',
-                    '34': 'n',
-                    '35': 't',
-                    '36': 'i',
-                    '37': 'm',
-                    '38': 'e',
-                    '39': ' ',
-                    '40': 'i',
-                    '41': 's',
-                    '42': ' ',
-                    '43': 'a',
-                    '44': 'l',
-                    '45': 'r',
-                    '46': 'e',
-                    '47': 'a',
-                    '48': 'd',
-                    '49': 'y',
-                    '50': ' ',
-                    '51': 'a',
-                    '52': 's',
-                    '53': 's',
-                    '54': 'i',
-                    '55': 'g',
-                    '56': 'n',
-                    '57': 'e',
-                    '58': 'd',
-                    '59': ' ',
-                    '60': 't',
-                    '61': 'o',
-                    '62': ' ',
-                    '63': 'b',
-                    '64': '6',
-                    '65': '9',
-                    '66': 'e',
-                    '67': '5',
-                    '68': '3',
-                    '69': 'a',
-                    '70': '6',
-                    '71': '2',
-                    '72': '2',
-                    '73': 'c',
-                    '74': '8',
-                    '75': '.',
-                    '76': ' ',
-                    '77': 'Y',
-                    '78': 'o',
-                    '79': 'u',
-                    '80': ' ',
-                    '81': 'h',
-                    '82': 'a',
-                    '83': 'v',
-                    '84': 'e',
-                    '85': ' ',
-                    '86': 't',
-                    '87': 'o',
-                    '88': ' ',
-                    '89': 'd',
-                    '90': 'e',
-                    '91': 'l',
-                    '92': 'e',
-                    '93': 't',
-                    '94': 'e',
-                    '95': ' ',
-                    '96': '(',
-                    '97': 'o',
-                    '98': 'r',
-                    '99': ' ',
-                    '100': 'r',
-                    '101': 'e',
-                    '102': 'n',
-                    '103': 'a',
-                    '104': 'm',
-                    '105': 'e',
-                    '106': ')',
-                    '107': ' ',
-                    '108': 't',
-                    '109': 'h',
-                    '110': 'a',
-                    '111': 't',
-                    '112': ' ',
-                    '113': 'c',
-                    '114': 'o',
-                    '115': 'n',
-                    '116': 't',
-                    '117': 'a',
-                    '118': 'i',
-                    '119': 'n',
-                    '120': 'e',
-                    '121': 'r',
-                    '122': ' ',
-                    '123': 't',
-                    '124': 'o',
-                    '125': ' ',
-                    '126': 'b',
-                    '127': 'e',
-                    '128': ' ',
-                    '129': 'a',
-                    '130': 'b',
-                    '131': 'l',
-                    '132': 'e',
-                    '133': ' ',
-                    '134': 't',
-                    '135': 'o',
-                    '136': ' ',
-                    '137': 'a',
-                    '138': 's',
-                    '139': 's',
-                    '140': 'i',
-                    '141': 'g',
-                    '142': 'n',
-                    '143': ' ',
-                    '144': 'u',
-                    '145': 'b',
-                    '146': 'u',
-                    '147': 'n',
-                    '148': 't',
-                    '149': 'u',
-                    '150': '-',
-                    '151': 's',
-                    '152': 'l',
-                    '153': 'e',
-                    '154': 'e',
-                    '155': 'p',
-                    '156': '-',
-                    '157': 'r',
-                    '158': 'u',
-                    '159': 'n',
-                    '160': 't',
-                    '161': 'i',
-                    '162': 'm',
-                    '163': 'e',
-                    '164': ' ',
-                    '165': 't',
-                    '166': 'o',
-                    '167': ' ',
-                    '168': 'a',
-                    '169': ' ',
-                    '170': 'c',
-                    '171': 'o',
-                    '172': 'n',
-                    '173': 't',
-                    '174': 'a',
-                    '175': 'i',
-                    '176': 'n',
-                    '177': 'e',
-                    '178': 'r',
-                    '179': ' ',
-                    '180': 'a',
-                    '181': 'g',
-                    '182': 'a',
-                    '183': 'i',
-                    '184': 'n',
-                    '185': '.',
-                    '186': '\n',
-                    '$promise': {},
-                    '$resolved': true
-                };
-                var message = 'Conflict, The name ubuntu-sleep-runtime is already assigned to b69e53a622c8. You have to delete (or rename) that container to be able to assign ubuntu-sleep-runtime to a container again.\n';
-                expect(errorMsgFilter(response)).toBe(message);
-            }));
-    });
-});
+});

test/unit/karma.conf.js

@@ -7,7 +7,7 @@ files = [
     JASMINE_ADAPTER,
     'dist/angular.js',
     'dist/vendor.js',
-    'dist/dockerui.js',
+    'dist/portainer.js',
     'bower_components/angular-mocks/angular-mocks.js',
     'test/unit/**/*.spec.js'
 ];