Merge branch 'release/1.7.0'

Release 1.6.0

README.md

@@ -7,9 +7,16 @@ A fork of the amazing UI for Docker by Michael Crosby and Kevan Ahlquist (https:
 UI For Docker is a web interface for the Docker Remote API.  The goal is to provide a pure client side implementation so it is effortless to connect and manage docker.
 
 ## Goals
+
 * 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.
 
+## Supported Docker versions
+
+The current Docker version support policy is the following: `N` to `N-2` included where `N` is the latest version.
+
+At the moment, the following versions are supported: 1.9, 1.10 & 1.11.
+
 ## Run
 
 ### Quickstart
@@ -26,11 +33,16 @@ The `--privileged` flag is required for hosts using SELinux.
 
 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`.
 
-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 cloudinovasi/cloudinovasi-ui -e http://127.0.0.1:2375
+$ docker run -d -p 9000:9000 cloudinovasi/cloudinovasi-ui -H tcp://127.0.0.1:2375
+```
+
+```
+# Connect to another unix socket:
+$ docker run -d -p 9000:9000 cloudinovasi/cloudinovasi-ui -H unix:///path/to/docker.sock
 ```
 
 ### Swarm support
@@ -41,7 +53,7 @@ You can access a specific view for you Swarm cluster by defining the `--swarm` f
 
 ```
 # Connect to a tcp socket and enable Swarm:
-$ docker run -d -p 9000:9000 cloudinovasi/cloudinovasi-ui -e http://<SWARM_HOST>:<SWARM_PORT> --swarm
+$ docker run -d -p 9000:9000 cloudinovasi/cloudinovasi-ui -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.
@@ -54,9 +66,39 @@ UI For Docker listens on port 9000 by default. If you run UI For Docker inside a
 $ docker run -d -p 10.20.30.1:80:9000 --privileged -v /var/run/docker.sock:/var/run/docker.sock cloudinovasi/cloudinovasi-ui
 ```
 
+### 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/cloudinovasi-ui -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/cloudinovasi-ui -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/cloudinovasi-ui --logo "https://www.docker.com/sites/all/themes/docker/assets/images/brand-full.svg"
+```
+
+The custom logo will replace the CloudInovasi 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.
+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`:
 
@@ -70,13 +112,48 @@ You can hide it in the view by starting the ui with:
 $ docker run -d -p 9000:9000 --privileged -v /var/run/docker.sock:/var/run/docker.sock cloudinovasi/cloudinovasi-ui -l owner=acme
 ```
 
+### Reverse proxy configuration
+
+Has been tested with Nginx 1.11.
+
+Use the following configuration to host the UI at `myhost.mydomain.com/dockerui`:
+
+```nginx
+upstream cloudinovasi-ui {
+    server ADDRESS:PORT;
+}
+
+server {
+  listen 80;
+
+  location /dockerui/ {
+      proxy_http_version 1.1;
+      proxy_set_header Connection "";
+      proxy_pass http://cloudinovasi-ui/;
+  }
+  location /dockerui/ws/ {
+      proxy_set_header Upgrade $http_upgrade;
+      proxy_set_header Connection "upgrade";
+      proxy_http_version 1.1;
+      proxy_pass http://cloudinovasi-ui/ws/;
+  }
+}
+```
+
+Replace `ADDRESS:PORT` with the CloudInovasi UI container details.
+
 ### Available options
 
 The following options are available for the `ui-for-docker` binary:
 
-* `--endpoint`, `-e`: Docker deamon endpoint (default: *"/var/run/docker.sock"*)
-* `--bind`, `-p`: Address and port to serve UI For Docker (default: *":9000"*)
-* `--data`, `-d`: Path to the data folder (default: *"."*)
-* `--assets`, `-a`: Path to the assets (default: *"."*)
-* `--swarm`, `-s`: Swarm cluster support (default: *false*)
+* `--host`, `-H`: Docker daemon endpoint (default: `"unix:///var/run/docker.sock"`)
+* `--bind`, `-p`: Address and port to serve UI For Docker (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

api/api.go

@@ -0,0 +1,57 @@
+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
+	}
+
+	apiConfig struct {
+		Endpoint      string
+		BindAddress   string
+		AssetPath     string
+		DataPath      string
+		SwarmSupport  bool
+		TLSEnabled    bool
+		TLSCACertPath string
+		TLSCertPath   string
+		TLSKeyPath    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,
+	}
+}

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,75 @@
+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)
+	})
+	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,45 @@
+package main // import "github.com/cloudinovasi/ui-for-docker"
+
+import (
+	"gopkg.in/alecthomas/kingpin.v2"
+)
+
+// main is the entry point of the program
+func main() {
+	kingpin.Version("1.7.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 UI For Docker").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()
+	)
+	kingpin.Parse()
+
+	apiConfig := apiConfig{
+		Endpoint:      *endpoint,
+		BindAddress:   *addr,
+		AssetPath:     *assets,
+		DataPath:      *data,
+		SwarmSupport:  *swarm,
+		TLSEnabled:    *tlsverify,
+		TLSCACertPath: *tlscacert,
+		TLSCertPath:   *tlscert,
+		TLSKeyPath:    *tlskey,
+	}
+
+	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"`
+}
+
+// configurationHandler 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/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

@@ -5,17 +5,18 @@ angular.module('uifordocker', [
   'ui.select',
   'ngCookies',
   'ngSanitize',
-  'dockerui.services',
-  'dockerui.filters',
+  'uifordocker.services',
+  'uifordocker.filters',
   'dashboard',
   'container',
+  'containerConsole',
+  'containerLogs',
   'containers',
   'createContainer',
   'docker',
+  'events',
   'images',
   'image',
-  'pullImage',
-  'containerLogs',
   'stats',
   'swarm',
   'network',
@@ -57,6 +58,11 @@ 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",
@@ -72,11 +78,26 @@ angular.module('uifordocker', [
       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',
@@ -134,5 +155,5 @@ angular.module('uifordocker', [
   // You need to set this to the api endpoint without the port i.e. http://192.168.1.9
   .constant('DOCKER_ENDPOINT', 'dockerapi')
   .constant('DOCKER_PORT', '') // Docker port, leave as an empty string if no port is requred.  If you have a port, prefix it with a ':' i.e. :4243
-  .constant('CONFIG_ENDPOINT', '/config')
-  .constant('UI_VERSION', 'v1.1.0');
+  .constant('CONFIG_ENDPOINT', 'settings')
+  .constant('UI_VERSION', 'v1.7.0');

app/components/container/container.html

@@ -1,5 +1,7 @@
 <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>
@@ -62,6 +64,7 @@
           <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>
+            <a class="btn btn-default" type="button" ui-sref="console({id: container.Id})">Console</a>
           </div>
         </div>
         <div class="comment">
@@ -81,7 +84,7 @@
           <tbody>
             <tr>
               <td>Created</td>
-              <td>{{ container.Created | date: 'medium' }}</td>
+              <td>{{ container.Created|getisodate }}</td>
             </tr>
             <tr>
               <td>Path</td>
@@ -183,7 +186,8 @@
           <tbody>
             <tr ng-repeat="(key, val) in container.State">
               <td>{{key}}</td>
-              <td>{{ val }}</td>
+              <td ng-if="key === 'StartedAt' || key ===  'FinishedAt'">{{val|getisodate}}</td>
+              <td ng-if="key !== 'StartedAt' && key !==  'FinishedAt'">{{val}}</td>
             </tr>
           </tbody>
         </table>

app/components/container/containerController.js

@@ -1,6 +1,6 @@
 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) {
+.controller('ContainerController', ['$scope', '$stateParams', '$state', '$filter', 'Container', 'ContainerCommit', 'Image', 'Messages', '$timeout',
+function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Image, Messages, $timeout) {
   $scope.changes = [];
   $scope.editEnv = false;
   $scope.editPorts = false;
@@ -11,7 +11,7 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
   };
 
   var update = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     Container.get({id: $stateParams.id}, function (d) {
       $scope.container = d;
       $scope.container.edit = false;
@@ -61,7 +61,7 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
         $scope.newCfg.Binds.push(bind);
       });
 
-      ViewSpinner.stop();
+      $('#loadingViewSpinner').hide();
     }, function (e) {
       if (e.status === 404) {
         $('.detail').hide();
@@ -69,13 +69,13 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
       } else {
         Messages.error("Failure", e.data);
       }
-      ViewSpinner.stop();
+      $('#loadingViewSpinner').hide();
     });
 
   };
 
   $scope.start = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     Container.start({
       id: $scope.container.Id,
       HostConfig: $scope.container.HostConfig
@@ -89,7 +89,7 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
   };
 
   $scope.stop = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     Container.stop({id: $stateParams.id}, function (d) {
       update();
       Messages.send("Container stopped", $stateParams.id);
@@ -100,7 +100,7 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
   };
 
   $scope.kill = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     Container.kill({id: $stateParams.id}, function (d) {
       update();
       Messages.send("Container killed", $stateParams.id);
@@ -111,7 +111,7 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
   };
 
   $scope.commit = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     ContainerCommit.commit({id: $stateParams.id, repo: $scope.container.Config.Image}, function (d) {
       update();
       Messages.send("Container commited", $stateParams.id);
@@ -121,7 +121,7 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
     });
   };
   $scope.pause = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     Container.pause({id: $stateParams.id}, function (d) {
       update();
       Messages.send("Container paused", $stateParams.id);
@@ -132,7 +132,7 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
   };
 
   $scope.unpause = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     Container.unpause({id: $stateParams.id}, function (d) {
       update();
       Messages.send("Container unpaused", $stateParams.id);
@@ -143,7 +143,7 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
   };
 
   $scope.remove = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     Container.remove({id: $stateParams.id}, function (d) {
       update();
       $state.go('containers', {}, {reload: true});
@@ -155,7 +155,7 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
   };
 
   $scope.restart = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     Container.restart({id: $stateParams.id}, function (d) {
       update();
       Messages.send("Container restarted", $stateParams.id);
@@ -170,10 +170,10 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
   };
 
   $scope.getChanges = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     Container.changes({id: $stateParams.id}, function (d) {
       $scope.changes = d;
-      ViewSpinner.stop();
+      $('#loadingViewSpinner').hide();
     });
   };
 

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,109 @@
+angular.module('containerConsole', [])
+.controller('ContainerConsoleController', ['$scope', '$stateParams', 'Settings', 'Container', 'Exec', '$timeout', 'Messages', 'errorMsgFilter',
+function ($scope, $stateParams, Settings, Container, Exec, $timeout, Messages, errorMsgFilter) {
+  $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.Id) {
+        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);
+      } else {
+        $('#loadConsoleSpinner').hide();
+        Messages.error('Error', errorMsgFilter(d));
+      }
+    }, function (e) {
+      $('#loadConsoleSpinner').hide();
+      Messages.error("Failure", e.data);
+    });
+  };
+
+  $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) {
+        var error = errorMsgFilter(d);
+        if (error) {
+          Messages.error('Error', '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,24 @@ 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();
   });
 
   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

@@ -10,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">
@@ -25,7 +28,7 @@
         <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>
@@ -36,7 +39,7 @@
             <tr>
               <th></th>
               <th>
-                <a ui-sref="containers" ng-click="order('State')">
+                <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>
@@ -49,7 +52,7 @@
                   <span ng-show="sortType == 'Names' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
-              <th>
+              <th ng-if="state.displayIP">
                 <a ui-sref="containers" ng-click="order('IP')">
                   IP Address
                   <span ng-show="sortType == 'IP' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
@@ -82,11 +85,11 @@
           <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><span class="label label-{{ container.State|containerstatusbadge }}">{{ container.State }}</span></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>{{ container.IP ? container.IP : '-' }}</td>
-              <td ng-if="swarm">{{ container|swarmhostname}}</td>
+              <td ng-if="state.displayIP">{{ container.IP ? container.IP : '-' }}</td>
+              <td ng-if="swarm">{{ container.hostIP }}</td>
               <td><a ui-sref="image({id: container.Image})">{{ container.Image }}</a></td>
               <td>{{ container.Command|truncate:60 }}</td>
             </tr>

app/components/containers/containersController.js

@@ -1,9 +1,10 @@
 angular.module('containers', [])
-.controller('ContainersController', ['$scope', 'Container', 'Settings', 'Messages', 'ViewSpinner', 'Config', 'errorMsgFilter',
-function ($scope, Container, Settings, Messages, ViewSpinner, Config, errorMsgFilter) {
+.controller('ContainersController', ['$scope', 'Container', 'Info', 'Settings', 'Messages', 'Config', 'errorMsgFilter',
+function ($scope, Container, Info, Settings, Messages, Config, errorMsgFilter) {
 
   $scope.state = {};
   $scope.state.displayAll = Settings.displayAll;
+  $scope.state.displayIP = false;
   $scope.sortType = 'State';
   $scope.sortReverse = true;
   $scope.state.selectedItemCount = 0;
@@ -14,7 +15,7 @@ function ($scope, Container, Settings, Messages, ViewSpinner, Config, errorMsgFi
   };
 
   var update = function (data) {
-    ViewSpinner.spin();
+    $('#loadContainersSpinner').show();
     $scope.state.selectedItemCount = 0;
     Container.query(data, function (d) {
       var containers = d;
@@ -22,19 +23,26 @@ function ($scope, Container, Settings, Messages, ViewSpinner, Config, errorMsgFi
         containers = hideContainers(d);
       }
       $scope.containers = containers.map(function (container) {
-        return new ContainerViewModel(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});
       }
     };
@@ -89,7 +97,7 @@ function ($scope, Container, Settings, Messages, ViewSpinner, Config, errorMsgFi
       }
     });
     if (counter === 0) {
-      ViewSpinner.stop();
+      $('#loadContainersSpinner').hide();
     }
   };
 
@@ -149,10 +157,32 @@ function ($scope, Container, Settings, Messages, ViewSpinner, Config, errorMsgFi
     });
   };
 
+  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) {
     hiddenLabels = c.hiddenLabels;
     $scope.swarm = c.swarm;
-    update({all: Settings.displayAll ? 1 : 0});
+    if (c.swarm) {
+      Info.get({}, function (d) {
+        $scope.swarm_hosts = retrieveSwarmHostsInfo(d);
+        update({all: Settings.displayAll ? 1 : 0});
+      });
+    } else {
+      update({all: Settings.displayAll ? 1 : 0});
+    }
   });
 }]);

app/components/createContainer/createContainerController.js

@@ -1,6 +1,6 @@
 angular.module('createContainer', [])
-.controller('CreateContainerController', ['$scope', '$state', 'Config', 'Container', 'Image', 'Volume', 'Network', 'Messages', 'ViewSpinner', 'errorMsgFilter',
-function ($scope, $state, Config, Container, Image, Volume, Network, Messages, ViewSpinner, errorMsgFilter) {
+.controller('CreateContainerController', ['$scope', '$state', 'Config', 'Container', 'Image', 'Volume', 'Network', 'Messages', 'errorMsgFilter',
+function ($scope, $state, Config, Container, Image, Volume, Network, Messages, errorMsgFilter) {
 
   $scope.state = {
     alwaysPull: true
@@ -9,10 +9,15 @@ function ($scope, $state, Config, Container, Image, Volume, Network, Messages, V
   $scope.formValues = {
     Console: 'none',
     Volumes: [],
+    AvailableRegistries: [],
+    Registry: ''
   };
 
+  $scope.imageConfig = {};
+
   $scope.config = {
     Env: [],
+    ExposedPorts: {},
     HostConfig: {
       RestartPolicy: {
         Name: 'no'
@@ -24,12 +29,8 @@ function ($scope, $state, Config, Container, Image, Volume, Network, Messages, V
     }
   };
 
-  $scope.resetVolumePath = function(index) {
-    $scope.formValues.Volumes[index].name = '';
-  };
-
   $scope.addVolume = function() {
-    $scope.formValues.Volumes.push({ name: '', containerPath: '', readOnly: false, isPath: false });
+    $scope.formValues.Volumes.push({ name: '', containerPath: '' });
   };
 
   $scope.removeVolume = function(index) {
@@ -55,6 +56,8 @@ function ($scope, $state, Config, Container, Image, Volume, Network, Messages, V
   Config.$promise.then(function (c) {
     var swarm = c.swarm;
 
+    $scope.formValues.AvailableRegistries = c.registries;
+
     Volume.query({}, function (d) {
       $scope.availableVolumes = d.Volumes;
     }, function (e) {
@@ -69,6 +72,7 @@ function ($scope, $state, Config, Container, Image, Volume, Network, Messages, V
             return network;
           }
         });
+        $scope.globalNetworkCount = networks.length;
         networks.push({Name: "bridge"});
         networks.push({Name: "host"});
         networks.push({Name: "none"});
@@ -80,65 +84,82 @@ function ($scope, $state, Config, Container, Image, Volume, Network, Messages, V
   });
 
   function createContainer(config) {
-    ViewSpinner.spin();
+    $('#createContainerSpinner').show();
     Container.create(config, function (d) {
       if (d.Id) {
         var reqBody = config.HostConfig || {};
         reqBody.id = d.Id;
         Container.start(reqBody, function (cd) {
-          ViewSpinner.stop();
+          $('#createContainerSpinner').hide();
           Messages.send('Container Started', d.Id);
           $state.go('containers', {}, {reload: true});
         }, function (e) {
-          ViewSpinner.stop();
+          $('#createContainerSpinner').hide();
           Messages.error('Error', errorMsgFilter(e));
         });
       } else {
-        ViewSpinner.stop();
+        $('#createContainerSpinner').hide();
         Messages.error('Error', errorMsgFilter(d));
       }
     }, function (e) {
-      ViewSpinner.stop();
+      $('#createContainerSpinner').hide();
       Messages.error('Error', errorMsgFilter(e));
     });
   }
 
-  function createImageConfig(imageName) {
-    var imageNameAndTag = imageName.split(':');
-    var imageConfig = {
-      fromImage: imageNameAndTag[0],
-      tag: imageNameAndTag[1] ? imageNameAndTag[1] : 'latest'
-    };
-    return imageConfig;
-  }
-
   function pullImageAndCreateContainer(config) {
-    ViewSpinner.spin();
-
-    var image = _.toLower(config.Image);
-    var imageConfig = createImageConfig(image);
-
-    Image.create(imageConfig, function (data) {
+    $('#createContainerSpinner').show();
+    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];
-          ViewSpinner.stop();
+          $('#createContainerSpinner').hide();
           Messages.error('Error', detail.error);
         } else {
           createContainer(config);
         }
     }, function (e) {
-      ViewSpinner.stop();
+      $('#createContainerSpinner').hide();
       Messages.error('Error', 'Unable to pull image ' + 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;
-        bindings[key] = [{ HostPort: portBinding.hostPort }];
+        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;
@@ -192,6 +213,7 @@ function ($scope, $state, Config, Container, Image, Volume, Network, Messages, V
 
   function prepareConfiguration() {
     var config = angular.copy($scope.config);
+    prepareImageConfig(config);
     preparePortBindings(config);
     prepareConsole(config);
     prepareEnvironmentVariables(config);
@@ -201,7 +223,6 @@ function ($scope, $state, Config, Container, Image, Volume, Network, Messages, V
 
   $scope.create = function () {
     var config = prepareConfiguration();
-    console.log(JSON.stringify(config, null, 4));
 
     if ($scope.state.alwaysPull) {
       pullImageAndCreateContainer(config);

app/components/createContainer/createcontainer.html

@@ -18,11 +18,15 @@
             </div>
           </div>
           <!-- !name-input -->
-          <!-- image 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-11">
-              <input type="text" class="form-control" ng-model="config.Image" id="container_image" placeholder="ubuntu:trusty">
+            <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">
@@ -32,7 +36,7 @@
               </div>
             </div>
           </div>
-          <!-- !image-input -->
+          <!-- !image-and-registry-inputs -->
           <!-- restart-policy -->
           <div class="form-group">
             <label class="col-sm-1 control-label text-left">Restart policy</label>
@@ -103,7 +107,6 @@
           <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 -->
@@ -251,6 +254,11 @@
           <!-- 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>
@@ -306,6 +314,9 @@
 
 <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>

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', 'errorMsgFilter',
+function ($scope, $state, Messages, Network, errorMsgFilter) {
+  $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) {
+  };
+
+  $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.Id) {
         Messages.send("Network created", d.Id);
+        $('#createNetworkSpinner').hide();
+        $state.go('networks', {}, {reload: true});
       } else {
-        Messages.error('Failure', errorMsgFilter(d));
+        $('#createNetworkSpinner').hide();
+        Messages.error('Unable to create network', errorMsgFilter(d));
       }
-      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('Unable to create network', e.data);
     });
+  }
+
+  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', 'errorMsgFilter',
+function ($scope, $state, Volume, Messages, errorMsgFilter) {
 
-  $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) {
+  $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.Name) {
         Messages.send("Volume created", d.Name);
+        $('#createVolumeSpinner').hide();
+        $state.go('volumes', {}, {reload: true});
       } else {
-        Messages.error('Failure', errorMsgFilter(d));
+        $('#createVolumeSpinner').hide();
+        Messages.error('Unable to create volume', errorMsgFilter(d));
       }
-      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('Unable to create volume', e.data);
     });
+  }
+
+  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,106 @@
 angular.module('dashboard', [])
-  .controller('DashboardController', ['$scope', 'Container', 'Image', 'Settings', 'LineChart', function ($scope, Container, Image, Settings, LineChart) {
+.controller('DashboardController', ['$scope', '$q', 'Config', 'Container', 'Image', 'Network', 'Volume', 'Info',
+function ($scope, $q, Config, Container, 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) {
     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 (hiddenLabels) {
+      containers = hideContainers(d);
+    }
 
     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() {
+    $('#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]);
+      prepareImageData(d[1]);
+      prepareVolumeData(d[2]);
+      prepareNetworkData(d[3]);
+      prepareInfoData(d[4]);
+      $('#loadingViewSpinner').hide();
+    });
+  }
+
+  var hideContainers = function (containers) {
+    return containers.filter(function (container) {
+      var filterContainer = false;
+      hiddenLabels.forEach(function(label, index) {
+        if (_.has(container.Labels, label.name) &&
+        container.Labels[label.name] === label.value) {
+          filterContainer = true;
+        }
+      });
+      if (!filterContainer) {
+        return container;
+      }
+    });
+  };
+
+  Config.$promise.then(function (c) {
+    $scope.swarm = c.swarm;
+    hiddenLabels = c.hiddenLabels;
+    fetchDashboardData();
   });
 }]);

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) {
+    Messages.error("Unable to load events", e.data);
+    $('#loadEventsSpinner').hide();
+  });
+}]);

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,15 @@
 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 = [];
+.controller('ImageController', ['$scope', '$stateParams', '$state', 'Image', 'Messages',
+function ($scope, $stateParams, $state, Image, Messages) {
+  $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();
-    });
+  $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 +20,88 @@ function ($scope, $q, $stateParams, $state, Image, Container, Messages, LineChar
     });
   }
 
+  function createImageConfig(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;
+  }
+
+  $scope.tagImage = function() {
+    $('#loadingViewSpinner').show();
+    var image = _.toLower($scope.config.Image);
+    var registry = _.toLower($scope.config.Registry);
+    var imageConfig = 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("Unable to tag image", e.data);
+    });
+  };
+
+  $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("Unable to push image", e.data);
+    });
+  };
+
+  $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("Unable to remove image", e.data);
+    });
+  };
+
+  $('#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;
+      Messages.error("Unable to find image", $stateParams.id);
     } else {
-      $scope.error = e.data;
+      Messages.error("Unable to retrieve image info", e.data);
     }
-    $('#error-message').show();
   });
 }]);

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('Error', 'Unable to pull image ' + 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("Unable to remove image", e.data);
           complete();
         });
       }
@@ -59,17 +89,20 @@ 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();
     });
   }
 
-  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,37 @@
 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', 'errorMsgFilter',
+function ($scope, Network, Messages, $state, $stateParams, errorMsgFilter) {
 
   $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();
+      $('#loadingViewSpinner').hide();
       Messages.error("Failure", e.data);
     });
   };
 
   $scope.remove = function remove(networkId) {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     Network.remove({id: $stateParams.id}, function (d) {
-      ViewSpinner.stop();
+      $('#loadingViewSpinner').hide();
       Messages.send("Network removed", "");
       $state.go('networks', {});
     }, function (e) {
-      ViewSpinner.stop();
+      $('#loadingViewSpinner').hide();
       Messages.error("Failure", e.data);
     });
   };
 
-  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();
   });
 }]);

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', 'errorMsgFilter',
+function ($scope, $state, Network, Config, Messages, errorMsgFilter) {
   $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,21 +33,26 @@ 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);
+          var error = errorMsgFilter(d);
+          if (error) {
+            Messages.send("Error", "Unable to remove network with active endpoints");
+          } else {
+            Messages.send("Network deleted", network.Id);
+            var index = $scope.networks.indexOf(network);
+            $scope.networks.splice(index, 1);
+          }
           complete();
         }, function (e) {
           Messages.error("Failure", e.data);
@@ -58,14 +63,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();
     });
   }
+
   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/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
@@ -108,13 +96,6 @@
                   <span ng-show="sortType == 'IP' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </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>
-              </th>
               <th>
                 <a ui-sref="swarm" ng-click="order('Engine')">
                   Engine
@@ -134,8 +115,9 @@
           <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>{{ node.version }}</td>
               <td><span class="label label-{{ node.status|nodestatusbadge }}">{{ node.status }}</span></td>
             </tr>

app/components/swarm/swarmController.js

@@ -42,7 +42,7 @@ angular.module('swarm', [])
         var node_offset = 4;
         for (i = 0; i < node_count; i++) {
           extractNodeInfo(info, node_offset);
-          node_offset += 10;
+          node_offset += 9;
         }
       }
 
@@ -53,8 +53,8 @@ angular.module('swarm', [])
         node.id = info[offset + 1][1];
         node.status = info[offset + 2][1];
         node.containers = info[offset + 3][1];
-        node.cpu = info[offset + 4][1];
-        node.memory = info[offset + 5][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/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', 'errorMsgFilter',
+function ($scope, $state, Volume, Messages, errorMsgFilter) {
   $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) {
@@ -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();
     });
   }
   fetchVolumes();

app/directives/widget-header.js

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

@@ -1,4 +1,4 @@
-angular.module('dockerui.filters', [])
+angular.module('uifordocker.filters', [])
 .filter('truncate', function () {
   'use strict';
   return function (text, length, end) {
@@ -21,16 +21,31 @@ angular.module('dockerui.filters', [])
 .filter('containerstatusbadge', function () {
   'use strict';
   return function (text) {
-    if (text === 'paused') {
+    var status = _.toLower(text);
+    if (status.indexOf('paused') !== -1) {
       return 'warning';
-    } else if (text === 'created') {
+    } else if (status.indexOf('created') !== -1) {
       return 'info';
-    } else if (text === 'exited') {
+    } 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) {
@@ -79,7 +94,6 @@ angular.module('dockerui.filters', [])
     if (state === undefined) {
       return 'label-default';
     }
-
     if (state.Ghost && state.Running) {
       return 'label-important';
     }
@@ -115,31 +129,61 @@ angular.module('dockerui.filters', [])
     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('repotag', function () {
+.filter('repotags', function () {
   'use strict';
   return function (image) {
     if (image.RepoTags && image.RepoTags.length > 0) {
       var tag = image.RepoTags[0];
       if (tag === '<none>:<none>') {
-        tag = '';
+        return [];
       }
-      return tag;
+      return image.RepoTags;
     }
-    return '';
+    return [];
   };
 })
-.filter('getdate', function () {
+.filter('getisodatefromtimestamp', function () {
   'use strict';
-  return function (data) {
-    //Multiply by 1000 for the unix format
-    var date = new Date(data * 1000);
-    return date.toDateString();
+  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) {
+    return pair.slice(0, pair.indexOf('='));
+  };
+})
+.filter('value', function () {
+  'use strict';
+  return function (pair) {
+    return pair.slice(pair.indexOf('=') + 1);
   };
 })
 .filter('errorMsg', function () {

app/shared/responseHandlers.js

@@ -0,0 +1,19 @@
+// 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);
+}
+
+// Image delete API returns an array on success and an object on error.
+// This handler creates an array from an object in case of error.
+function deleteImageHandler(data) {
+  var response = angular.fromJson(data);
+  if (!Array.isArray(response)) {
+    var arr = [];
+    arr.push(response);
+    return arr;
+  }
+  return response;
+}

app/shared/services.js

@@ -1,4 +1,4 @@
-angular.module('dockerui.services', ['ngResource', 'ngSanitize'])
+angular.module('uifordocker.services', ['ngResource', 'ngSanitize'])
     .factory('Container', ['$resource', 'Settings', function ContainerFactory($resource, Settings) {
         'use strict';
         // Resource for interacting with the docker containers
@@ -18,9 +18,17 @@ angular.module('dockerui.services', ['ngResource', 'ngSanitize'])
             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},
+            exec: {method: 'POST', params: {id: '@id', action: 'exec'}}
         });
     }])
+    .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'}}
+      });
+    }])
     .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
@@ -84,18 +92,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(/\}\s*\{/g, "}, {") + "]";
-                    return angular.fromJson(str);
-                }],
-                params: {action: 'create', fromImage: '@fromImage', tag: '@tag'}
-            },
             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) {
@@ -142,7 +163,7 @@ angular.module('dockerui.services', ['ngResource', 'ngSanitize'])
             remove: {method: 'DELETE'}
         });
     }])
-    .factory('Config', ['$resource', 'CONFIG_ENDPOINT', function($resource, CONFIG_ENDPOINT) {
+    .factory('Config', ['$resource', 'CONFIG_ENDPOINT', function ConfigFactory($resource, CONFIG_ENDPOINT) {
       return $resource(CONFIG_ENDPOINT).get();
     }])
     .factory('Settings', ['DOCKER_ENDPOINT', 'DOCKER_PORT', 'UI_VERSION', function SettingsFactory(DOCKER_ENDPOINT, DOCKER_PORT, UI_VERSION) {
@@ -153,27 +174,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 {

app/shared/viewmodel.js

@@ -1,19 +1,134 @@
 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.State = data.State;
-    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.Image = data.Image;
+  this.Command = data.Command;
+  this.Checked = false;
+}
+
+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

@@ -117,7 +117,7 @@
 .logo {
   display: inline;
   width: 100%;
-  max-width: 160px;
+  max-width: 155px;
   height: 100%;
   max-height: 55px;
   margin-bottom: 5px;
@@ -165,3 +165,40 @@ input[type="radio"] {
 .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;
+}

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "uifordocker",
-  "version": "1.1.0",
+  "version": "1.7.0",
   "homepage": "https://github.com/kevana/ui-for-docker",
   "authors": [
     "Michael Crosby <crosbymichael@gmail.com>",
@@ -30,16 +30,16 @@
     "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",
     "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,188 +0,0 @@
-package main // import "github.com/cloudinovasi/ui-for-docker"
-
-import (
-	"io"
-	"log"
-	"net"
-	"net/http"
-	"net/http/httputil"
-	"net/url"
-	"encoding/json"
-	"os"
-	"strings"
-	"github.com/gorilla/csrf"
-	"io/ioutil"
-	"fmt"
-	"github.com/gorilla/securecookie"
-	"gopkg.in/alecthomas/kingpin.v2"
-)
-
-var (
-	endpoint = kingpin.Flag("endpoint", "Dockerd endpoint").Default("/var/run/docker.sock").Short('e').String()
-	addr 		 = kingpin.Flag("bind", "Address and port to serve UI For Docker").Default(":9000").Short('p').String()
-	assets   = kingpin.Flag("assets", "Path to the assets").Default(".").Short('a').String()
-	data		 = kingpin.Flag("data", "Path to the data").Default(".").Short('d').String()
-	swarm	   = kingpin.Flag("swarm", "Swarm cluster support").Default("false").Short('s').Bool()
-	labels   = LabelParser(kingpin.Flag("hide-label", "Hide containers with a specific label in the UI").Short('l'))
-	authKey  []byte
-	authKeyFile = "authKey.dat"
-)
-
-type UnixHandler struct {
-	path string
-}
-
-type Config struct {
-	Swarm bool `json:"swarm"`
-	HiddenLabels Labels `json:"hiddenLabels"`
-}
-
-type Label struct {
-	Name string `json:"name"`
-	Value string `json:"value"`
-}
-
-type Labels []Label
-
-func (l *Labels) Set(value string) error {
-  parts := strings.SplitN(value, "=", 2)
-  if len(parts) != 2 {
-    return fmt.Errorf("expected HEADER=VALUE got '%s'", value)
-  }
-	label := new(Label)
-  label.Name = parts[0]
-	label.Value = parts[1]
-	*l = append(*l, *label)
-  return nil
-}
-
-func (l *Labels) String() string {
-  return ""
-}
-
-func (l *Labels) IsCumulative() bool {
-  return true
-}
-
-func LabelParser(s kingpin.Settings) (target *[]Label) {
-	target = new([]Label)
-  s.SetValue((*Labels)(target))
-  return
-}
-
-func (h *UnixHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
-	conn, err := net.Dial("unix", h.path)
-	if err != nil {
-		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, d string, e string, c Config) 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.
-	var authKeyPath = d + "/" + authKeyFile
-	dat, err := ioutil.ReadFile(authKeyPath)
-	if err != nil {
-		fmt.Println(err)
-		authKey = securecookie.GenerateRandomKey(32)
-		err := ioutil.WriteFile(authKeyPath, 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),
-	)
-
-	mux.Handle("/dockerapi/", http.StripPrefix("/dockerapi", h))
-	mux.Handle("/", fileHandler)
-	mux.HandleFunc("/config", func(w http.ResponseWriter, r *http.Request) {
-  	configurationHandler(w, r, c)
-  })
-	return CSRF(csrfWrapper(mux))
-}
-
-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() {
-	kingpin.Version("1.1.0")
-	kingpin.Parse()
-
-	configuration := Config{
-		Swarm: *swarm,
-		HiddenLabels: *labels,
-	}
-
-	handler := createHandler(*assets, *data, *endpoint, configuration)
-	if err := http.ListenAndServe(*addr, handler); err != nil {
-		log.Fatal(err)
-	}
-}

gruntFile.js

@@ -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,7 +86,8 @@ 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'
             ]
         },
         clean: {
@@ -155,7 +158,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 +226,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: {
@@ -250,10 +256,10 @@ module.exports = function (grunt) {
             },
             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/ui-for-docker > ui-for-docker-checksum.txt',
                     'mkdir -p dist',
-                    'mv ui-for-docker dist/'
+                    'mv api/ui-for-docker dist/'
                 ].join(' && ')
             },
             run: {
@@ -267,7 +273,14 @@ module.exports = function (grunt) {
                 command: [
                     'docker stop ui-for-docker',
                     'docker rm ui-for-docker',
-                    'docker run --privileged -d -p 9000:9000 -v /tmp/docker-ui:/data --name ui-for-docker ui-for-docker -e http://10.0.7.10:4000 --swarm -d /data'
+                    'docker run -d -p 9000:9000 -v /tmp/docker-ui:/data --name ui-for-docker ui-for-docker -H tcp://10.0.7.10:4000 --swarm -d /data'
+                ].join(';')
+            },
+            runSsl: {
+                command: [
+                    'docker stop ui-for-docker',
+                    'docker rm ui-for-docker',
+                    'docker run -d -p 9000:9000 -v /tmp/docker-ui:/data -v /tmp/docker-ssl:/certs --name ui-for-docker ui-for-docker -H tcp://10.0.7.10:2376 -d /data --tlsverify'
                 ].join(';')
             },
             cleanImages: {

index.html

@@ -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" alt="CloudInovasi UI">
+            <img ng-if="!config.logo" src="images/logo.png" class="img-responsive logo" alt="CloudInovasi UI">
             <span class="menu-icon glyphicon glyphicon-transfer"></span>
           </a>
         </li>
@@ -52,6 +53,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>

package.json

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

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

@@ -134,12 +134,6 @@ describe('filters', function () {
         }));
     });
 
-    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) {