Merge branch 'release/1.13.6'

Release 1.13.5

.codeclimate.yml

@@ -12,7 +12,8 @@ engines:
     enabled: true
     config:
       languages:
-      - javascript
+        javascript:
+          mass_threshold: 80
   eslint:
     enabled: true
     config:

CODE_OF_CONDUCT.md

@@ -0,0 +1,46 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at anthony.lapenna@portainer.io. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/

README.md

@@ -1,25 +1,25 @@
 
 <p align="center">
-  <img title="portainer" src='http://portainer.io/images/logo_alt.png' />
+  <img title="portainer" src='https://portainer.io/images/logo_alt.png' />
 </p>
 
 [![Docker Pulls](https://img.shields.io/docker/pulls/portainer/portainer.svg)](https://hub.docker.com/r/portainer/portainer/)
 [![Microbadger](https://images.microbadger.com/badges/image/portainer/portainer.svg)](http://microbadger.com/images/portainer/portainer "Image size")
 [![Documentation Status](https://readthedocs.org/projects/portainer/badge/?version=stable)](http://portainer.readthedocs.io/en/stable/?badge=stable)
 [![Codefresh build status]( https://g.codefresh.io/api/badges/build?repoOwner=portainer&repoName=portainer&branch=develop&pipelineName=portainer-ci&accountName=deviantony&type=cf-1)]( https://g.codefresh.io/repositories/portainer/portainer/builds?filter=trigger:build;branch:develop;service:5922a08a3a1aab000116fcc6~portainer-ci)
-[![Slack](http://portainer.io/slack/badge.svg)](http://portainer.io/slack/)
+[![Slack](https://portainer.io/slack/badge.svg)](https://portainer.io/slack/)
 [![Gitter](https://badges.gitter.im/portainer/Lobby.svg)](https://gitter.im/portainer/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
 [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=YHXZJQNJQ36H6)
 
-**_Portainer_** is a lightweight management UI which allows you to **easily** manage your Docker host or Swarm cluster.
+**_Portainer_** is a lightweight management UI which allows you to **easily** manage your different Docker environments (Docker hosts or Swarm clusters).
 
-**_Portainer_** is meant to be as **simple** to deploy as it is to use. It consists of a single container that can run on any Docker engine (Docker for Linux and Docker for Windows are supported).
+**_Portainer_** is meant to be as **simple** to deploy as it is to use. It consists of a single container that can run on any Docker engine (can be deployed as Linux container or a Windows native container).
 
-**_Portainer_** allows you to manage your Docker containers, images, volumes, networks and more ! It is compatible with the *standalone Docker* engine and with *Docker Swarm*.
+**_Portainer_** allows you to manage your Docker containers, images, volumes, networks and more ! It is compatible with the *standalone Docker* engine and with *Docker Swarm mode*.
 
 ## Demo
 
-<img src="http://portainer.io/images/screenshots/portainer.gif" width="77%"/>
+<img src="https://portainer.io/images/screenshots/portainer.gif" width="77%"/>
 
 You can try out the public demo instance: http://demo.portainer.io/ (login with the username **admin** and the password **tryportainer**).
 
@@ -34,8 +34,8 @@ Please note that the public demo cluster is **reset every 15min**.
 
 * Issues: https://github.com/portainer/portainer/issues
 * FAQ: https://portainer.readthedocs.io/en/latest/faq.html
+* Slack (chat): https://portainer.io/slack/
 * Gitter (chat): https://gitter.im/portainer/Lobby
-* Slack: http://portainer.io/slack/
 
 ## Reporting bugs and contributing
 

api/bolt/datastore.go

@@ -23,6 +23,8 @@ type Store struct {
 	ResourceControlService *ResourceControlService
 	VersionService         *VersionService
 	SettingsService        *SettingsService
+	RegistryService        *RegistryService
+	DockerHubService       *DockerHubService
 
 	db                    *bolt.DB
 	checkForDataMigration bool
@@ -37,6 +39,8 @@ const (
 	endpointBucketName        = "endpoints"
 	resourceControlBucketName = "resource_control"
 	settingsBucketName        = "settings"
+	registryBucketName        = "registries"
+	dockerhubBucketName       = "dockerhub"
 )
 
 // NewStore initializes a new Store and the associated services
@@ -50,6 +54,8 @@ func NewStore(storePath string) (*Store, error) {
 		ResourceControlService: &ResourceControlService{},
 		VersionService:         &VersionService{},
 		SettingsService:        &SettingsService{},
+		RegistryService:        &RegistryService{},
+		DockerHubService:       &DockerHubService{},
 	}
 	store.UserService.store = store
 	store.TeamService.store = store
@@ -58,6 +64,8 @@ func NewStore(storePath string) (*Store, error) {
 	store.ResourceControlService.store = store
 	store.VersionService.store = store
 	store.SettingsService.store = store
+	store.RegistryService.store = store
+	store.DockerHubService.store = store
 
 	_, err := os.Stat(storePath + "/" + databaseFileName)
 	if err != nil && os.IsNotExist(err) {
@@ -74,40 +82,26 @@ func NewStore(storePath string) (*Store, error) {
 // Open opens and initializes the BoltDB database.
 func (store *Store) Open() error {
 	path := store.Path + "/" + databaseFileName
+
 	db, err := bolt.Open(path, 0600, &bolt.Options{Timeout: 1 * time.Second})
 	if err != nil {
 		return err
 	}
 	store.db = db
+
+	bucketsToCreate := []string{versionBucketName, userBucketName, teamBucketName, endpointBucketName,
+		resourceControlBucketName, teamMembershipBucketName, settingsBucketName,
+		registryBucketName, dockerhubBucketName}
+
 	return db.Update(func(tx *bolt.Tx) error {
-		_, err := tx.CreateBucketIfNotExists([]byte(versionBucketName))
-		if err != nil {
-			return err
-		}
-		_, err = tx.CreateBucketIfNotExists([]byte(userBucketName))
-		if err != nil {
-			return err
-		}
-		_, err = tx.CreateBucketIfNotExists([]byte(teamBucketName))
-		if err != nil {
-			return err
-		}
-		_, err = tx.CreateBucketIfNotExists([]byte(endpointBucketName))
-		if err != nil {
-			return err
-		}
-		_, err = tx.CreateBucketIfNotExists([]byte(resourceControlBucketName))
-		if err != nil {
-			return err
-		}
-		_, err = tx.CreateBucketIfNotExists([]byte(teamMembershipBucketName))
-		if err != nil {
-			return err
-		}
-		_, err = tx.CreateBucketIfNotExists([]byte(settingsBucketName))
-		if err != nil {
-			return err
+
+		for _, bucket := range bucketsToCreate {
+			_, err := tx.CreateBucketIfNotExists([]byte(bucket))
+			if err != nil {
+				return err
+			}
 		}
+
 		return nil
 	})
 }

api/bolt/dockerhub_service.go

@@ -0,0 +1,61 @@
+package bolt
+
+import (
+	"github.com/portainer/portainer"
+	"github.com/portainer/portainer/bolt/internal"
+
+	"github.com/boltdb/bolt"
+)
+
+// DockerHubService represents a service for managing registries.
+type DockerHubService struct {
+	store *Store
+}
+
+const (
+	dbDockerHubKey = "DOCKERHUB"
+)
+
+// DockerHub returns the DockerHub object.
+func (service *DockerHubService) DockerHub() (*portainer.DockerHub, error) {
+	var data []byte
+	err := service.store.db.View(func(tx *bolt.Tx) error {
+		bucket := tx.Bucket([]byte(dockerhubBucketName))
+		value := bucket.Get([]byte(dbDockerHubKey))
+		if value == nil {
+			return portainer.ErrDockerHubNotFound
+		}
+
+		data = make([]byte, len(value))
+		copy(data, value)
+		return nil
+	})
+	if err != nil {
+		return nil, err
+	}
+
+	var dockerhub portainer.DockerHub
+	err = internal.UnmarshalDockerHub(data, &dockerhub)
+	if err != nil {
+		return nil, err
+	}
+	return &dockerhub, nil
+}
+
+// StoreDockerHub persists a DockerHub object.
+func (service *DockerHubService) StoreDockerHub(dockerhub *portainer.DockerHub) error {
+	return service.store.db.Update(func(tx *bolt.Tx) error {
+		bucket := tx.Bucket([]byte(dockerhubBucketName))
+
+		data, err := internal.MarshalDockerHub(dockerhub)
+		if err != nil {
+			return err
+		}
+
+		err = bucket.Put([]byte(dbDockerHubKey), data)
+		if err != nil {
+			return err
+		}
+		return nil
+	})
+}

api/bolt/endpoint_service.go

@@ -7,7 +7,7 @@ import (
 	"github.com/boltdb/bolt"
 )
 
-// EndpointService represents a service for managing users.
+// EndpointService represents a service for managing endpoints.
 type EndpointService struct {
 	store *Store
 }

api/bolt/internal/internal.go

@@ -47,6 +47,16 @@ func UnmarshalEndpoint(data []byte, endpoint *portainer.Endpoint) error {
 	return json.Unmarshal(data, endpoint)
 }
 
+// MarshalRegistry encodes a registry to binary format.
+func MarshalRegistry(registry *portainer.Registry) ([]byte, error) {
+	return json.Marshal(registry)
+}
+
+// UnmarshalRegistry decodes a registry from a binary data.
+func UnmarshalRegistry(data []byte, registry *portainer.Registry) error {
+	return json.Unmarshal(data, registry)
+}
+
 // MarshalResourceControl encodes a resource control object to binary format.
 func MarshalResourceControl(rc *portainer.ResourceControl) ([]byte, error) {
 	return json.Marshal(rc)
@@ -67,6 +77,16 @@ func UnmarshalSettings(data []byte, settings *portainer.Settings) error {
 	return json.Unmarshal(data, settings)
 }
 
+// MarshalDockerHub encodes a Dockerhub object to binary format.
+func MarshalDockerHub(settings *portainer.DockerHub) ([]byte, error) {
+	return json.Marshal(settings)
+}
+
+// UnmarshalDockerHub decodes a Dockerhub object from a binary data.
+func UnmarshalDockerHub(data []byte, settings *portainer.DockerHub) error {
+	return json.Unmarshal(data, settings)
+}
+
 // Itob returns an 8-byte big endian representation of v.
 // This function is typically used for encoding integer IDs to byte slices
 // so that they can be used as BoltDB keys.

api/bolt/registry_service.go

@@ -0,0 +1,114 @@
+package bolt
+
+import (
+	"github.com/portainer/portainer"
+	"github.com/portainer/portainer/bolt/internal"
+
+	"github.com/boltdb/bolt"
+)
+
+// RegistryService represents a service for managing registries.
+type RegistryService struct {
+	store *Store
+}
+
+// Registry returns an registry by ID.
+func (service *RegistryService) Registry(ID portainer.RegistryID) (*portainer.Registry, error) {
+	var data []byte
+	err := service.store.db.View(func(tx *bolt.Tx) error {
+		bucket := tx.Bucket([]byte(registryBucketName))
+		value := bucket.Get(internal.Itob(int(ID)))
+		if value == nil {
+			return portainer.ErrRegistryNotFound
+		}
+
+		data = make([]byte, len(value))
+		copy(data, value)
+		return nil
+	})
+	if err != nil {
+		return nil, err
+	}
+
+	var registry portainer.Registry
+	err = internal.UnmarshalRegistry(data, &registry)
+	if err != nil {
+		return nil, err
+	}
+	return &registry, nil
+}
+
+// Registries returns an array containing all the registries.
+func (service *RegistryService) Registries() ([]portainer.Registry, error) {
+	var registries = make([]portainer.Registry, 0)
+	err := service.store.db.View(func(tx *bolt.Tx) error {
+		bucket := tx.Bucket([]byte(registryBucketName))
+
+		cursor := bucket.Cursor()
+		for k, v := cursor.First(); k != nil; k, v = cursor.Next() {
+			var registry portainer.Registry
+			err := internal.UnmarshalRegistry(v, &registry)
+			if err != nil {
+				return err
+			}
+			registries = append(registries, registry)
+		}
+
+		return nil
+	})
+	if err != nil {
+		return nil, err
+	}
+
+	return registries, nil
+}
+
+// CreateRegistry creates a new registry.
+func (service *RegistryService) CreateRegistry(registry *portainer.Registry) error {
+	return service.store.db.Update(func(tx *bolt.Tx) error {
+		bucket := tx.Bucket([]byte(registryBucketName))
+
+		id, _ := bucket.NextSequence()
+		registry.ID = portainer.RegistryID(id)
+
+		data, err := internal.MarshalRegistry(registry)
+		if err != nil {
+			return err
+		}
+
+		err = bucket.Put(internal.Itob(int(registry.ID)), data)
+		if err != nil {
+			return err
+		}
+		return nil
+	})
+}
+
+// UpdateRegistry updates an registry.
+func (service *RegistryService) UpdateRegistry(ID portainer.RegistryID, registry *portainer.Registry) error {
+	data, err := internal.MarshalRegistry(registry)
+	if err != nil {
+		return err
+	}
+
+	return service.store.db.Update(func(tx *bolt.Tx) error {
+		bucket := tx.Bucket([]byte(registryBucketName))
+		err = bucket.Put(internal.Itob(int(ID)), data)
+		if err != nil {
+			return err
+		}
+		return nil
+	})
+}
+
+// DeleteRegistry deletes an registry.
+func (service *RegistryService) DeleteRegistry(ID portainer.RegistryID) error {
+	return service.store.db.Update(func(tx *bolt.Tx) error {
+		bucket := tx.Bucket([]byte(registryBucketName))
+		err := bucket.Delete(internal.Itob(int(ID)))
+		if err != nil {
+			return err
+		}
+		return nil
+	})
+}

api/cmd/portainer/main.go

@@ -91,6 +91,22 @@ func initStatus(authorizeEndpointMgmt bool, flags *portainer.CLIFlags) *portaine
 	}
 }
 
+func initDockerHub(dockerHubService portainer.DockerHubService) error {
+	_, err := dockerHubService.DockerHub()
+	if err == portainer.ErrDockerHubNotFound {
+		dockerhub := &portainer.DockerHub{
+			Authentication: false,
+			Username:       "",
+			Password:       "",
+		}
+		return dockerHubService.StoreDockerHub(dockerhub)
+	} else if err != nil {
+		return err
+	}
+
+	return nil
+}
+
 func initSettings(settingsService portainer.SettingsService, flags *portainer.CLIFlags) error {
 	_, err := settingsService.Settings()
 	if err == portainer.ErrSettingsNotFound {
@@ -146,6 +162,11 @@ func main() {
 		log.Fatal(err)
 	}
 
+	err = initDockerHub(store.DockerHubService)
+	if err != nil {
+		log.Fatal(err)
+	}
+
 	applicationStatus := initStatus(authorizeEndpointMgmt, flags)
 
 	if *flags.Endpoint != "" {
@@ -199,6 +220,8 @@ func main() {
 		EndpointService:        store.EndpointService,
 		ResourceControlService: store.ResourceControlService,
 		SettingsService:        store.SettingsService,
+		RegistryService:        store.RegistryService,
+		DockerHubService:       store.DockerHubService,
 		CryptoService:          cryptoService,
 		JWTService:             jwtService,
 		FileService:            fileService,

api/cron/endpoint_sync.go

@@ -117,7 +117,7 @@ func (job endpointSyncJob) prepareSyncData(storedEndpoints, fileEndpoints []port
 	}
 
 	for idx, endpoint := range fileEndpoints {
-		if endpoint.Name == "" || endpoint.URL == "" {
+		if !isValidEndpoint(&endpoint) {
 			job.logger.Printf("Invalid file endpoint definition, skipping. [name: %v] [url: %v]", endpoint.Name, endpoint.URL)
 			continue
 		}

api/errors.go

@@ -42,6 +42,12 @@ const (
 	ErrEndpointAccessDenied = Error("Access denied to endpoint")
 )
 
+// Registry errors.
+const (
+	ErrRegistryNotFound      = Error("Registry not found")
+	ErrRegistryAlreadyExists = Error("A registry is already defined for this URL")
+)
+
 // Version errors.
 const (
 	ErrDBVersionNotFound = Error("DB version not found")
@@ -52,6 +58,11 @@ const (
 	ErrSettingsNotFound = Error("Settings not found")
 )
 
+// DockerHub errors.
+const (
+	ErrDockerHubNotFound = Error("Dockerhub not found")
+)
+
 // Crypto errors.
 const (
 	ErrCryptoHashFailure = Error("Unable to hash data")

api/http/handler/auth.go

@@ -75,7 +75,7 @@ func (handler *AuthHandler) handlePostAuth(w http.ResponseWriter, r *http.Reques
 
 	u, err := handler.UserService.UserByUsername(username)
 	if err == portainer.ErrUserNotFound {
-		httperror.WriteErrorResponse(w, err, http.StatusNotFound, handler.Logger)
+		httperror.WriteErrorResponse(w, ErrInvalidCredentials, http.StatusBadRequest, handler.Logger)
 		return
 	} else if err != nil {
 		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)

api/http/handler/dockerhub.go

@@ -0,0 +1,87 @@
+package handler
+
+import (
+	"encoding/json"
+
+	"github.com/asaskevich/govalidator"
+	"github.com/portainer/portainer"
+	httperror "github.com/portainer/portainer/http/error"
+	"github.com/portainer/portainer/http/security"
+
+	"log"
+	"net/http"
+	"os"
+
+	"github.com/gorilla/mux"
+)
+
+// DockerHubHandler represents an HTTP API handler for managing DockerHub.
+type DockerHubHandler struct {
+	*mux.Router
+	Logger           *log.Logger
+	DockerHubService portainer.DockerHubService
+}
+
+// NewDockerHubHandler returns a new instance of OldDockerHubHandler.
+func NewDockerHubHandler(bouncer *security.RequestBouncer) *DockerHubHandler {
+	h := &DockerHubHandler{
+		Router: mux.NewRouter(),
+		Logger: log.New(os.Stderr, "", log.LstdFlags),
+	}
+	h.Handle("/dockerhub",
+		bouncer.PublicAccess(http.HandlerFunc(h.handleGetDockerHub))).Methods(http.MethodGet)
+	h.Handle("/dockerhub",
+		bouncer.AdministratorAccess(http.HandlerFunc(h.handlePutDockerHub))).Methods(http.MethodPut)
+
+	return h
+}
+
+// handleGetDockerHub handles GET requests on /dockerhub
+func (handler *DockerHubHandler) handleGetDockerHub(w http.ResponseWriter, r *http.Request) {
+	dockerhub, err := handler.DockerHubService.DockerHub()
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+		return
+	}
+
+	encodeJSON(w, dockerhub, handler.Logger)
+	return
+}
+
+// handlePutDockerHub handles PUT requests on /dockerhub
+func (handler *DockerHubHandler) handlePutDockerHub(w http.ResponseWriter, r *http.Request) {
+	var req putDockerHubRequest
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		httperror.WriteErrorResponse(w, ErrInvalidJSON, http.StatusBadRequest, handler.Logger)
+		return
+	}
+
+	_, err := govalidator.ValidateStruct(req)
+	if err != nil {
+		httperror.WriteErrorResponse(w, ErrInvalidRequestFormat, http.StatusBadRequest, handler.Logger)
+		return
+	}
+
+	dockerhub := &portainer.DockerHub{
+		Authentication: false,
+		Username:       "",
+		Password:       "",
+	}
+
+	if req.Authentication {
+		dockerhub.Authentication = true
+		dockerhub.Username = req.Username
+		dockerhub.Password = req.Password
+	}
+
+	err = handler.DockerHubService.StoreDockerHub(dockerhub)
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+	}
+}
+
+type putDockerHubRequest struct {
+	Authentication bool   `valid:""`
+	Username       string `valid:""`
+	Password       string `valid:""`
+}

api/http/handler/handler.go

@@ -17,6 +17,8 @@ type Handler struct {
 	TeamHandler           *TeamHandler
 	TeamMembershipHandler *TeamMembershipHandler
 	EndpointHandler       *EndpointHandler
+	RegistryHandler       *RegistryHandler
+	DockerHubHandler      *DockerHubHandler
 	ResourceHandler       *ResourceHandler
 	StatusHandler         *StatusHandler
 	SettingsHandler       *SettingsHandler
@@ -50,6 +52,10 @@ func (h *Handler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 		http.StripPrefix("/api", h.TeamMembershipHandler).ServeHTTP(w, r)
 	} else if strings.HasPrefix(r.URL.Path, "/api/endpoints") {
 		http.StripPrefix("/api", h.EndpointHandler).ServeHTTP(w, r)
+	} else if strings.HasPrefix(r.URL.Path, "/api/registries") {
+		http.StripPrefix("/api", h.RegistryHandler).ServeHTTP(w, r)
+	} else if strings.HasPrefix(r.URL.Path, "/api/dockerhub") {
+		http.StripPrefix("/api", h.DockerHubHandler).ServeHTTP(w, r)
 	} else if strings.HasPrefix(r.URL.Path, "/api/resource_controls") {
 		http.StripPrefix("/api", h.ResourceHandler).ServeHTTP(w, r)
 	} else if strings.HasPrefix(r.URL.Path, "/api/settings") {

api/http/handler/registry.go

@@ -0,0 +1,312 @@
+package handler
+
+import (
+	"github.com/portainer/portainer"
+	httperror "github.com/portainer/portainer/http/error"
+	"github.com/portainer/portainer/http/security"
+
+	"encoding/json"
+	"log"
+	"net/http"
+	"os"
+	"strconv"
+
+	"github.com/asaskevich/govalidator"
+	"github.com/gorilla/mux"
+)
+
+// RegistryHandler represents an HTTP API handler for managing Docker registries.
+type RegistryHandler struct {
+	*mux.Router
+	Logger          *log.Logger
+	RegistryService portainer.RegistryService
+}
+
+// NewRegistryHandler returns a new instance of RegistryHandler.
+func NewRegistryHandler(bouncer *security.RequestBouncer) *RegistryHandler {
+	h := &RegistryHandler{
+		Router: mux.NewRouter(),
+		Logger: log.New(os.Stderr, "", log.LstdFlags),
+	}
+	h.Handle("/registries",
+		bouncer.AdministratorAccess(http.HandlerFunc(h.handlePostRegistries))).Methods(http.MethodPost)
+	h.Handle("/registries",
+		bouncer.RestrictedAccess(http.HandlerFunc(h.handleGetRegistries))).Methods(http.MethodGet)
+	h.Handle("/registries/{id}",
+		bouncer.AdministratorAccess(http.HandlerFunc(h.handleGetRegistry))).Methods(http.MethodGet)
+	h.Handle("/registries/{id}",
+		bouncer.AdministratorAccess(http.HandlerFunc(h.handlePutRegistry))).Methods(http.MethodPut)
+	h.Handle("/registries/{id}/access",
+		bouncer.AdministratorAccess(http.HandlerFunc(h.handlePutRegistryAccess))).Methods(http.MethodPut)
+	h.Handle("/registries/{id}",
+		bouncer.AdministratorAccess(http.HandlerFunc(h.handleDeleteRegistry))).Methods(http.MethodDelete)
+
+	return h
+}
+
+// handleGetRegistries handles GET requests on /registries
+func (handler *RegistryHandler) handleGetRegistries(w http.ResponseWriter, r *http.Request) {
+	securityContext, err := security.RetrieveRestrictedRequestContext(r)
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+		return
+	}
+
+	registries, err := handler.RegistryService.Registries()
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+		return
+	}
+
+	filteredRegistries, err := security.FilterRegistries(registries, securityContext)
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+		return
+	}
+
+	encodeJSON(w, filteredRegistries, handler.Logger)
+}
+
+// handlePostRegistries handles POST requests on /registries
+func (handler *RegistryHandler) handlePostRegistries(w http.ResponseWriter, r *http.Request) {
+	var req postRegistriesRequest
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		httperror.WriteErrorResponse(w, ErrInvalidJSON, http.StatusBadRequest, handler.Logger)
+		return
+	}
+
+	_, err := govalidator.ValidateStruct(req)
+	if err != nil {
+		httperror.WriteErrorResponse(w, ErrInvalidRequestFormat, http.StatusBadRequest, handler.Logger)
+		return
+	}
+
+	registries, err := handler.RegistryService.Registries()
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+		return
+	}
+	for _, r := range registries {
+		if r.URL == req.URL {
+			httperror.WriteErrorResponse(w, portainer.ErrRegistryAlreadyExists, http.StatusConflict, handler.Logger)
+			return
+		}
+	}
+
+	registry := &portainer.Registry{
+		Name:            req.Name,
+		URL:             req.URL,
+		Authentication:  req.Authentication,
+		Username:        req.Username,
+		Password:        req.Password,
+		AuthorizedUsers: []portainer.UserID{},
+		AuthorizedTeams: []portainer.TeamID{},
+	}
+
+	err = handler.RegistryService.CreateRegistry(registry)
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+		return
+	}
+
+	encodeJSON(w, &postRegistriesResponse{ID: int(registry.ID)}, handler.Logger)
+}
+
+type postRegistriesRequest struct {
+	Name           string `valid:"required"`
+	URL            string `valid:"required"`
+	Authentication bool   `valid:""`
+	Username       string `valid:""`
+	Password       string `valid:""`
+}
+
+type postRegistriesResponse struct {
+	ID int `json:"Id"`
+}
+
+// handleGetRegistry handles GET requests on /registries/:id
+func (handler *RegistryHandler) handleGetRegistry(w http.ResponseWriter, r *http.Request) {
+	vars := mux.Vars(r)
+	id := vars["id"]
+
+	registryID, err := strconv.Atoi(id)
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusBadRequest, handler.Logger)
+		return
+	}
+
+	registry, err := handler.RegistryService.Registry(portainer.RegistryID(registryID))
+	if err == portainer.ErrRegistryNotFound {
+		httperror.WriteErrorResponse(w, err, http.StatusNotFound, handler.Logger)
+		return
+	} else if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+		return
+	}
+
+	encodeJSON(w, registry, handler.Logger)
+}
+
+// handlePutRegistryAccess handles PUT requests on /registries/:id/access
+func (handler *RegistryHandler) handlePutRegistryAccess(w http.ResponseWriter, r *http.Request) {
+	vars := mux.Vars(r)
+	id := vars["id"]
+
+	registryID, err := strconv.Atoi(id)
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusBadRequest, handler.Logger)
+		return
+	}
+
+	var req putRegistryAccessRequest
+	if err = json.NewDecoder(r.Body).Decode(&req); err != nil {
+		httperror.WriteErrorResponse(w, ErrInvalidJSON, http.StatusBadRequest, handler.Logger)
+		return
+	}
+
+	_, err = govalidator.ValidateStruct(req)
+	if err != nil {
+		httperror.WriteErrorResponse(w, ErrInvalidRequestFormat, http.StatusBadRequest, handler.Logger)
+		return
+	}
+
+	registry, err := handler.RegistryService.Registry(portainer.RegistryID(registryID))
+	if err == portainer.ErrRegistryNotFound {
+		httperror.WriteErrorResponse(w, err, http.StatusNotFound, handler.Logger)
+		return
+	} else if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+		return
+	}
+
+	if req.AuthorizedUsers != nil {
+		authorizedUserIDs := []portainer.UserID{}
+		for _, value := range req.AuthorizedUsers {
+			authorizedUserIDs = append(authorizedUserIDs, portainer.UserID(value))
+		}
+		registry.AuthorizedUsers = authorizedUserIDs
+	}
+
+	if req.AuthorizedTeams != nil {
+		authorizedTeamIDs := []portainer.TeamID{}
+		for _, value := range req.AuthorizedTeams {
+			authorizedTeamIDs = append(authorizedTeamIDs, portainer.TeamID(value))
+		}
+		registry.AuthorizedTeams = authorizedTeamIDs
+	}
+
+	err = handler.RegistryService.UpdateRegistry(registry.ID, registry)
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+		return
+	}
+}
+
+type putRegistryAccessRequest struct {
+	AuthorizedUsers []int `valid:"-"`
+	AuthorizedTeams []int `valid:"-"`
+}
+
+// handlePutRegistry handles PUT requests on /registries/:id
+func (handler *RegistryHandler) handlePutRegistry(w http.ResponseWriter, r *http.Request) {
+	vars := mux.Vars(r)
+	id := vars["id"]
+
+	registryID, err := strconv.Atoi(id)
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusBadRequest, handler.Logger)
+		return
+	}
+
+	var req putRegistriesRequest
+	if err = json.NewDecoder(r.Body).Decode(&req); err != nil {
+		httperror.WriteErrorResponse(w, ErrInvalidJSON, http.StatusBadRequest, handler.Logger)
+		return
+	}
+
+	_, err = govalidator.ValidateStruct(req)
+	if err != nil {
+		httperror.WriteErrorResponse(w, ErrInvalidRequestFormat, http.StatusBadRequest, handler.Logger)
+		return
+	}
+
+	registry, err := handler.RegistryService.Registry(portainer.RegistryID(registryID))
+	if err == portainer.ErrRegistryNotFound {
+		httperror.WriteErrorResponse(w, err, http.StatusNotFound, handler.Logger)
+		return
+	} else if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+		return
+	}
+
+	registries, err := handler.RegistryService.Registries()
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+		return
+	}
+	for _, r := range registries {
+		if r.URL == req.URL && r.ID != registry.ID {
+			httperror.WriteErrorResponse(w, portainer.ErrRegistryAlreadyExists, http.StatusConflict, handler.Logger)
+			return
+		}
+	}
+
+	if req.Name != "" {
+		registry.Name = req.Name
+	}
+
+	if req.URL != "" {
+		registry.URL = req.URL
+	}
+
+	if req.Authentication {
+		registry.Authentication = true
+		registry.Username = req.Username
+		registry.Password = req.Password
+	} else {
+		registry.Authentication = false
+		registry.Username = ""
+		registry.Password = ""
+	}
+
+	err = handler.RegistryService.UpdateRegistry(registry.ID, registry)
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+		return
+	}
+}
+
+type putRegistriesRequest struct {
+	Name           string `valid:"required"`
+	URL            string `valid:"required"`
+	Authentication bool   `valid:""`
+	Username       string `valid:""`
+	Password       string `valid:""`
+}
+
+// handleDeleteRegistry handles DELETE requests on /registries/:id
+func (handler *RegistryHandler) handleDeleteRegistry(w http.ResponseWriter, r *http.Request) {
+	vars := mux.Vars(r)
+	id := vars["id"]
+
+	registryID, err := strconv.Atoi(id)
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusBadRequest, handler.Logger)
+		return
+	}
+
+	_, err = handler.RegistryService.Registry(portainer.RegistryID(registryID))
+	if err == portainer.ErrRegistryNotFound {
+		httperror.WriteErrorResponse(w, err, http.StatusNotFound, handler.Logger)
+		return
+	} else if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+		return
+	}
+
+	err = handler.RegistryService.DeleteRegistry(portainer.RegistryID(registryID))
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+		return
+	}
+}

api/http/proxy/response.go

@@ -85,6 +85,11 @@ func rewriteResponse(response *http.Response, newResponseData interface{}, statu
 	response.StatusCode = statusCode
 	response.Body = body
 	response.ContentLength = int64(len(jsonData))
+
+	if response.Header == nil {
+		response.Header = make(http.Header)
+	}
 	response.Header.Set("Content-Length", strconv.Itoa(len(jsonData)))
+
 	return nil
 }

api/http/proxy/transport.go

@@ -59,6 +59,8 @@ func (p *proxyTransport) proxyDockerRequest(request *http.Request) (*http.Respon
 		return p.proxyServiceRequest(request)
 	} else if strings.HasPrefix(path, "/volumes") {
 		return p.proxyVolumeRequest(request)
+	} else if strings.HasPrefix(path, "/swarm") {
+		return p.proxySwarmRequest(request)
 	}
 
 	return p.executeDockerRequest(request)
@@ -143,6 +145,10 @@ func (p *proxyTransport) proxyVolumeRequest(request *http.Request) (*http.Respon
 	}
 }
 
+func (p *proxyTransport) proxySwarmRequest(request *http.Request) (*http.Response, error) {
+	return p.administratorOperation(request)
+}
+
 // restrictedOperation ensures that the current user has the required authorizations
 // before executing the original request.
 func (p *proxyTransport) restrictedOperation(request *http.Request, resourceID string) (*http.Response, error) {

api/http/security/authorization.go

@@ -22,7 +22,7 @@ func AuthorizedResourceControlDeletion(resourceControl *portainer.ResourceContro
 	if teamAccessesCount > 0 {
 		for _, access := range resourceControl.TeamAccesses {
 			for _, membership := range context.UserMemberships {
-				if membership.TeamID == access.TeamID && membership.Role == portainer.TeamLeader {
+				if membership.TeamID == access.TeamID {
 					return true
 				}
 			}

api/http/security/filter.go

@@ -60,6 +60,24 @@ func FilterUsers(users []portainer.User, context *RestrictedRequestContext) []po
 	return filteredUsers
 }
 
+// FilterRegistries filters registries based on user role and team memberships.
+// Non administrator users only have access to authorized endpoints.
+func FilterRegistries(registries []portainer.Registry, context *RestrictedRequestContext) ([]portainer.Registry, error) {
+
+	filteredRegistries := registries
+	if !context.IsAdmin {
+		filteredRegistries = make([]portainer.Registry, 0)
+
+		for _, registry := range registries {
+			if isRegistryAccessAuthorized(&registry, context.UserID, context.UserMemberships) {
+				filteredRegistries = append(filteredRegistries, registry)
+			}
+		}
+	}
+
+	return filteredRegistries, nil
+}
+
 // FilterEndpoints filters endpoints based on user role and team memberships.
 // Non administrator users only have access to authorized endpoints.
 func FilterEndpoints(endpoints []portainer.Endpoint, context *RestrictedRequestContext) ([]portainer.Endpoint, error) {
@@ -78,6 +96,22 @@ func FilterEndpoints(endpoints []portainer.Endpoint, context *RestrictedRequestC
 	return filteredEndpoints, nil
 }
 
+func isRegistryAccessAuthorized(registry *portainer.Registry, userID portainer.UserID, memberships []portainer.TeamMembership) bool {
+	for _, authorizedUserID := range registry.AuthorizedUsers {
+		if authorizedUserID == userID {
+			return true
+		}
+	}
+	for _, membership := range memberships {
+		for _, authorizedTeamID := range registry.AuthorizedTeams {
+			if membership.TeamID == authorizedTeamID {
+				return true
+			}
+		}
+	}
+	return false
+}
+
 func isEndpointAccessAuthorized(endpoint *portainer.Endpoint, userID portainer.UserID, memberships []portainer.TeamMembership) bool {
 	for _, authorizedUserID := range endpoint.AuthorizedUsers {
 		if authorizedUserID == userID {

api/http/server.go

@@ -25,6 +25,8 @@ type Server struct {
 	CryptoService          portainer.CryptoService
 	JWTService             portainer.JWTService
 	FileService            portainer.FileService
+	RegistryService        portainer.RegistryService
+	DockerHubService       portainer.DockerHubService
 	Handler                *handler.Handler
 	SSL                    bool
 	SSLCert                string
@@ -66,6 +68,10 @@ func (server *Server) Start() error {
 	endpointHandler.EndpointService = server.EndpointService
 	endpointHandler.FileService = server.FileService
 	endpointHandler.ProxyManager = proxyManager
+	var registryHandler = handler.NewRegistryHandler(requestBouncer)
+	registryHandler.RegistryService = server.RegistryService
+	var dockerHubHandler = handler.NewDockerHubHandler(requestBouncer)
+	dockerHubHandler.DockerHubService = server.DockerHubService
 	var resourceHandler = handler.NewResourceHandler(requestBouncer)
 	resourceHandler.ResourceControlService = server.ResourceControlService
 	var uploadHandler = handler.NewUploadHandler(requestBouncer)
@@ -78,6 +84,8 @@ func (server *Server) Start() error {
 		TeamHandler:           teamHandler,
 		TeamMembershipHandler: teamMembershipHandler,
 		EndpointHandler:       endpointHandler,
+		RegistryHandler:       registryHandler,
+		DockerHubHandler:      dockerHubHandler,
 		ResourceHandler:       resourceHandler,
 		SettingsHandler:       settingsHandler,
 		StatusHandler:         statusHandler,

api/portainer.go

@@ -94,6 +94,30 @@ type (
 		Role     UserRole
 	}
 
+	// RegistryID represents a registry identifier.
+	RegistryID int
+
+	// Registry represents a Docker registry with all the info required
+	// to connect to it.
+	Registry struct {
+		ID              RegistryID `json:"Id"`
+		Name            string     `json:"Name"`
+		URL             string     `json:"URL"`
+		Authentication  bool       `json:"Authentication"`
+		Username        string     `json:"Username"`
+		Password        string     `json:"Password"`
+		AuthorizedUsers []UserID   `json:"AuthorizedUsers"`
+		AuthorizedTeams []TeamID   `json:"AuthorizedTeams"`
+	}
+
+	// DockerHub represents all the required information to connect and use the
+	// Docker Hub.
+	DockerHub struct {
+		Authentication bool   `json:"Authentication"`
+		Username       string `json:"Username"`
+		Password       string `json:"Password"`
+	}
+
 	// EndpointID represents an endpoint identifier.
 	EndpointID int
 
@@ -217,6 +241,21 @@ type (
 		Synchronize(toCreate, toUpdate, toDelete []*Endpoint) error
 	}
 
+	// RegistryService represents a service for managing registry data.
+	RegistryService interface {
+		Registry(ID RegistryID) (*Registry, error)
+		Registries() ([]Registry, error)
+		CreateRegistry(registry *Registry) error
+		UpdateRegistry(ID RegistryID, registry *Registry) error
+		DeleteRegistry(ID RegistryID) error
+	}
+
+	// DockerHubService represents a service for managing the DockerHub object.
+	DockerHubService interface {
+		DockerHub() (*DockerHub, error)
+		StoreDockerHub(registry *DockerHub) error
+	}
+
 	// SettingsService represents a service for managing application settings.
 	SettingsService interface {
 		Settings() (*Settings, error)
@@ -266,7 +305,7 @@ type (
 
 const (
 	// APIVersion is the version number of the Portainer API.
-	APIVersion = "1.13.2"
+	APIVersion = "1.13.6"
 	// DBVersion is the version number of the Portainer database.
 	DBVersion = 2
 	// DefaultTemplatesURL represents the default URL for the templates definitions.

app/app.js

@@ -20,14 +20,14 @@ angular.module('portainer', [
   'portainer.services',
   'auth',
   'dashboard',
-  'common.accesscontrol.panel',
-  'common.accesscontrol.form',
   'container',
   'containerConsole',
   'containerLogs',
+  'serviceLogs',
   'containers',
   'createContainer',
   'createNetwork',
+  'createRegistry',
   'createSecret',
   'createService',
   'createVolume',
@@ -43,6 +43,9 @@ angular.module('portainer', [
   'network',
   'networks',
   'node',
+  'registries',
+  'registry',
+  'registryAccess',
   'secrets',
   'secret',
   'service',
@@ -69,7 +72,6 @@ angular.module('portainer', [
     }
 
     localStorageServiceProvider
-    .setStorageType('sessionStorage')
     .setPrefix('portainer');
 
     jwtOptionsProvider.config({
@@ -163,7 +165,7 @@ angular.module('portainer', [
         }
       }
     })
-    .state('logs', {
+    .state('containerlogs', {
       url: '^/containers/:id/logs',
       views: {
         'content@': {
@@ -176,6 +178,19 @@ angular.module('portainer', [
         }
       }
     })
+    .state('servicelogs', {
+      url: '^/services/:id/logs',
+      views: {
+        'content@': {
+          templateUrl: 'app/components/serviceLogs/servicelogs.html',
+          controller: 'ServiceLogsController'
+        },
+        'sidebar@': {
+          templateUrl: 'app/components/sidebar/sidebar.html',
+          controller: 'SidebarController'
+        }
+      }
+    })
     .state('console', {
       url: '^/containers/:id/console',
       views: {
@@ -253,6 +268,19 @@ angular.module('portainer', [
         }
       }
     })
+    .state('actions.create.registry', {
+      url: '/registry',
+      views: {
+        'content@': {
+          templateUrl: 'app/components/createRegistry/createregistry.html',
+          controller: 'CreateRegistryController'
+        },
+        'sidebar@': {
+          templateUrl: 'app/components/sidebar/sidebar.html',
+          controller: 'SidebarController'
+        }
+      }
+    })
     .state('actions.create.secret', {
       url: '/secret',
       views: {
@@ -431,6 +459,45 @@ angular.module('portainer', [
         }
       }
     })
+    .state('registries', {
+      url: '/registries/',
+      views: {
+        'content@': {
+          templateUrl: 'app/components/registries/registries.html',
+          controller: 'RegistriesController'
+        },
+        'sidebar@': {
+          templateUrl: 'app/components/sidebar/sidebar.html',
+          controller: 'SidebarController'
+        }
+      }
+    })
+    .state('registry', {
+      url: '^/registries/:id',
+      views: {
+        'content@': {
+          templateUrl: 'app/components/registry/registry.html',
+          controller: 'RegistryController'
+        },
+        'sidebar@': {
+          templateUrl: 'app/components/sidebar/sidebar.html',
+          controller: 'SidebarController'
+        }
+      }
+    })
+    .state('registry.access', {
+      url: '^/registries/:id/access',
+      views: {
+        'content@': {
+          templateUrl: 'app/components/registryAccess/registryAccess.html',
+          controller: 'RegistryAccessController'
+        },
+        'sidebar@': {
+          templateUrl: 'app/components/sidebar/sidebar.html',
+          controller: 'SidebarController'
+        }
+      }
+    })
     .state('secrets', {
       url: '^/secrets/',
       views: {
@@ -687,7 +754,8 @@ angular.module('portainer', [
   .constant('TEAM_MEMBERSHIPS_ENDPOINT', 'api/team_memberships')
   .constant('RESOURCE_CONTROL_ENDPOINT', 'api/resource_controls')
   .constant('ENDPOINTS_ENDPOINT', 'api/endpoints')
+  .constant('DOCKERHUB_ENDPOINT', 'api/dockerhub')
+  .constant('REGISTRIES_ENDPOINT', 'api/registries')
   .constant('TEMPLATES_ENDPOINT', 'api/templates')
   .constant('DEFAULT_TEMPLATES_URL', 'https://raw.githubusercontent.com/portainer/templates/master/templates.json')
   .constant('PAGINATION_MAX_ITEMS', 10);
-  // .constant('UI_VERSION', 'v1.13.2');

app/components/common/accessControlForm/accessControlForm.html

@@ -1,126 +0,0 @@
-<div ng-controller="AccessControlFormController">
-  <div class="col-sm-12 form-section-title">
-    Access control
-  </div>
-  <!-- access-control-switch -->
-  <div class="form-group">
-    <div class="col-sm-12">
-      <label for="ownership" class="control-label text-left">
-        Enable access control
-        <portainer-tooltip position="bottom" message="When enabled, you can restrict the access and management of this resource."></portainer-tooltip>
-      </label>
-      <label class="switch" style="margin-left: 20px;">
-        <input name="ownership" type="checkbox" ng-model="formValues.enableAccessControl" ng-click="synchronizeFormData()"><i></i>
-      </label>
-    </div>
-  </div>
-  <!-- !access-control-switch -->
-  <!-- restricted-access -->
-  <div class="form-group" ng-if="formValues.enableAccessControl" style="margin-bottom: 0">
-    <div class="ownership_wrapper">
-      <div ng-if="isAdmin">
-        <input type="radio" id="access_administrators" ng-model="formValues.Ownership" ng-click="synchronizeFormData()" value="administrators">
-        <label for="access_administrators">
-          <div class="ownership_header">
-            <i ng-class="'administrators' | ownershipicon" aria-hidden="true" style="margin-right: 2px;"></i>
-            Administrators
-          </div>
-          <p>I want to restrict the management of this resource to administrators only</p>
-        </label>
-      </div>
-      <div ng-if="isAdmin">
-        <input type="radio" id="access_restricted" ng-model="formValues.Ownership" ng-click="synchronizeFormData()" value="restricted">
-        <label for="access_restricted">
-          <div class="ownership_header">
-            <i ng-class="'restricted' | ownershipicon" aria-hidden="true" style="margin-right: 2px;"></i>
-            Restricted
-          </div>
-          <p>
-            I want to restrict the management of this resource to a set of users and/or teams
-          </p>
-        </label>
-      </div>
-      <div ng-if="!isAdmin">
-        <input type="radio" id="access_private" ng-model="formValues.Ownership" ng-click="synchronizeFormData()" value="private">
-        <label for="access_private">
-          <div class="ownership_header">
-            <i ng-class="'private' | ownershipicon" aria-hidden="true" style="margin-right: 2px;"></i>
-            Private
-          </div>
-          <p>
-            I want to this resource to be manageable by myself only
-          </p>
-        </label>
-      </div>
-      <div ng-if="!isAdmin && availableTeams.length > 0">
-        <input type="radio" id="access_restricted" ng-model="formValues.Ownership" ng-click="synchronizeFormData()" value="restricted">
-        <label for="access_restricted">
-          <div class="ownership_header">
-            <i ng-class="'restricted' | ownershipicon" aria-hidden="true" style="margin-right: 2px;"></i>
-            Restricted
-          </div>
-          <p ng-if="availableTeams.length === 1">
-            I want any member of my team (<b>{{ availableTeams[0].Name }}</b>) to be able to manage this resource
-          </p>
-          <p ng-if="availableTeams.length > 1">
-            I want to restrict the management of this resource to one or more of my teams
-          </p>
-        </label>
-      </div>
-    </div>
-  </div>
-  <!-- restricted-access -->
-  <!-- authorized-teams -->
-  <div class="form-group" ng-if="formValues.enableAccessControl && formValues.Ownership === 'restricted' && (isAdmin || (!isAdmin && availableTeams.length > 1))" >
-    <div class="col-sm-12">
-      <label for="group-access" class="control-label text-left">
-        Authorized teams
-        <portainer-tooltip ng-if="isAdmin && availableTeams.length > 0" position="bottom" message="You can select which teams(s) will be able to manage this resource."></portainer-tooltip>
-        <portainer-tooltip ng-if="!isAdmin && availableTeams.length > 1" position="bottom" message="As you are a member of multiple teams, you can select which teams(s) will be able to manage this resource."></portainer-tooltip>
-      </label>
-      <span ng-if="isAdmin && availableTeams.length === 0" class="small text-muted" style="margin-left: 20px;">
-        You have not yet created any team. Head over the <a ui-sref="teams">teams view</a> to manage user teams.</span>
-      </span>
-      <span isteven-multi-select
-      ng-if="(isAdmin && availableTeams.length > 0) || (!isAdmin && availableTeams.length > 1)"
-      input-model="availableTeams"
-      output-model="formValues.Ownership_Teams"
-      button-label="Name"
-      item-label="Name"
-      tick-property="ticked"
-      helper-elements="filter"
-      search-property="Name"
-      on-item-click="synchronizeFormData()"
-      translation="{nothingSelected: 'Select one or more teams', search: 'Search...'}"
-      style="margin-left: 20px;"
-    </span>
-  </div>
-</div>
-<!-- !authorized-teams -->
-<!-- authorized-users -->
-<div class="form-group" ng-if="formValues.enableAccessControl && formValues.Ownership === 'restricted' && isAdmin">
-  <div class="col-sm-12">
-    <label for="group-access" class="control-label text-left">
-      Authorized users
-      <portainer-tooltip ng-if="isAdmin && availableUsers.length > 0" position="bottom" message="You can select which user(s) will be able to manage this resource."></portainer-tooltip>
-    </label>
-    <span ng-if="availableUsers.length === 0" class="small text-muted" style="margin-left: 20px;">
-      You have not yet created any user. Head over the <a ui-sref="users">users view</a> to manage users.</span>
-    </span>
-    <span isteven-multi-select
-    ng-if="availableUsers.length > 0"
-    input-model="availableUsers"
-    output-model="formValues.Ownership_Users"
-    button-label="Username"
-    item-label="Username"
-    tick-property="ticked"
-    helper-elements="filter"
-    search-property="Username"
-    on-item-click="synchronizeFormData()"
-    translation="{nothingSelected: 'Select one or more users', search: 'Search...'}"
-    style="margin-left: 20px;"
-  </span>
-</div>
-</div>
-<!-- !authorized-users -->
-</div>

app/components/common/accessControlForm/accessControlFormController.js

@@ -1,55 +0,0 @@
-angular.module('common.accesscontrol.form', [])
-.controller('AccessControlFormController', ['$q', '$scope', '$state', 'UserService', 'ResourceControlService', 'Notifications', 'Authentication', 'ModalService', 'ControllerDataPipeline',
-function ($q, $scope, $state, UserService, ResourceControlService, Notifications, Authentication, ModalService, ControllerDataPipeline) {
-
-  $scope.availableTeams = [];
-  $scope.availableUsers = [];
-
-  $scope.formValues = {
-    enableAccessControl: true,
-    Ownership_Teams: [],
-    Ownership_Users: [],
-    Ownership: 'private'
-  };
-
-  $scope.synchronizeFormData = function() {
-    ControllerDataPipeline.setAccessControlFormData($scope.formValues.enableAccessControl,
-      $scope.formValues.Ownership, $scope.formValues.Ownership_Users, $scope.formValues.Ownership_Teams);
-  };
-
-  function initAccessControlForm() {
-    $('#loadingViewSpinner').show();
-
-    var userDetails = Authentication.getUserDetails();
-    var isAdmin = userDetails.role === 1 ? true: false;
-    $scope.isAdmin = isAdmin;
-
-    if (isAdmin) {
-      $scope.formValues.Ownership = 'administrators';
-    }
-
-    $q.all({
-      availableTeams: UserService.userTeams(userDetails.ID),
-      availableUsers: isAdmin ? UserService.users(false) : []
-    })
-    .then(function success(data) {
-      $scope.availableUsers = data.availableUsers;
-
-      var availableTeams = data.availableTeams;
-      $scope.availableTeams = availableTeams;
-      if (!isAdmin && availableTeams.length === 1) {
-        $scope.formValues.Ownership_Teams = availableTeams;
-      }
-
-      $scope.synchronizeFormData();
-    })
-    .catch(function error(err) {
-      Notifications.error('Failure', err, 'Unable to retrieve access control information');
-    })
-    .finally(function final() {
-      $('#loadingViewSpinner').hide();
-    });
-  }
-
-  initAccessControlForm();
-}]);

app/components/common/accessControlPanel/accessControlPanelController.js

@@ -1,158 +0,0 @@
-angular.module('common.accesscontrol.panel', [])
-.controller('AccessControlPanelController', ['$q', '$scope', '$state', 'UserService', 'ResourceControlService', 'Notifications', 'Authentication', 'ModalService', 'ControllerDataPipeline', 'FormValidator',
-function ($q, $scope, $state, UserService, ResourceControlService, Notifications, Authentication, ModalService, ControllerDataPipeline, FormValidator) {
-
-  $scope.state = {
-    displayAccessControlPanel: false,
-    canEditOwnership: false,
-    editOwnership: false,
-    formValidationError: ''
-  };
-
-  $scope.formValues = {
-    Ownership: 'public',
-    Ownership_Users: [],
-    Ownership_Teams: []
-  };
-
-  $scope.authorizedUsers = [];
-  $scope.availableUsers = [];
-  $scope.authorizedTeams = [];
-  $scope.availableTeams = [];
-
-  $scope.confirmUpdateOwnership = function (force) {
-    if (!validateForm()) {
-      return;
-    }
-    ModalService.confirmAccessControlUpdate(function (confirmed) {
-      if(!confirmed) { return; }
-      updateOwnership();
-    });
-  };
-
-  function processOwnershipFormValues() {
-    var userIds = [];
-    angular.forEach($scope.formValues.Ownership_Users, function(user) {
-      userIds.push(user.Id);
-    });
-    var teamIds = [];
-    angular.forEach($scope.formValues.Ownership_Teams, function(team) {
-      teamIds.push(team.Id);
-    });
-    var administratorsOnly = $scope.formValues.Ownership === 'administrators' ? true : false;
-
-    return {
-      ownership: $scope.formValues.Ownership,
-      authorizedUserIds: administratorsOnly ? [] : userIds,
-      authorizedTeamIds: administratorsOnly ? [] : teamIds,
-      administratorsOnly: administratorsOnly
-    };
-  }
-
-  function validateForm() {
-    $scope.state.formValidationError = '';
-    var error = '';
-
-    var accessControlData = {
-      ownership: $scope.formValues.Ownership,
-      authorizedUsers: $scope.formValues.Ownership_Users,
-      authorizedTeams: $scope.formValues.Ownership_Teams
-    };
-    var isAdmin = $scope.isAdmin;
-    error = FormValidator.validateAccessControl(accessControlData, isAdmin);
-    if (error) {
-      $scope.state.formValidationError = error;
-      return false;
-    }
-    return true;
-  }
-
-  function updateOwnership() {
-    $('#loadingViewSpinner').show();
-
-    var accessControlData = ControllerDataPipeline.getAccessControlData();
-    var resourceId = accessControlData.resourceId;
-    var ownershipParameters = processOwnershipFormValues();
-
-    ResourceControlService.applyResourceControlChange(accessControlData.resourceType, resourceId,
-      $scope.resourceControl, ownershipParameters)
-    .then(function success(data) {
-      Notifications.success('Access control successfully updated');
-      $state.reload();
-    })
-    .catch(function error(err) {
-      Notifications.error('Failure', err, 'Unable to update access control');
-    })
-    .finally(function final() {
-      $('#loadingViewSpinner').hide();
-    });
-  }
-
-  function initAccessControlPanel() {
-    $('#loadingViewSpinner').show();
-
-    var userDetails = Authentication.getUserDetails();
-    var isAdmin = userDetails.role === 1 ? true: false;
-    var userId = userDetails.ID;
-    $scope.isAdmin = isAdmin;
-
-    var accessControlData = ControllerDataPipeline.getAccessControlData();
-    var resourceControl = accessControlData.resourceControl;
-    $scope.resourceType = accessControlData.resourceType;
-    $scope.resourceControl = resourceControl;
-
-    if (isAdmin) {
-      if (resourceControl) {
-        $scope.formValues.Ownership = resourceControl.Ownership === 'private' ? 'restricted' : resourceControl.Ownership;
-      } else {
-        $scope.formValues.Ownership = 'public';
-      }
-    } else {
-      $scope.formValues.Ownership = 'public';
-    }
-
-    ResourceControlService.retrieveOwnershipDetails(resourceControl)
-    .then(function success(data) {
-      $scope.authorizedUsers = data.authorizedUsers;
-      $scope.authorizedTeams = data.authorizedTeams;
-      return ResourceControlService.retrieveUserPermissionsOnResource(userId, isAdmin, resourceControl);
-    })
-    .then(function success(data) {
-      $scope.state.canEditOwnership = data.isPartOfRestrictedUsers || data.isLeaderOfAnyRestrictedTeams;
-      $scope.state.canChangeOwnershipToTeam = data.isPartOfRestrictedUsers;
-
-      return $q.all({
-        availableUsers: isAdmin ? UserService.users(false) : [],
-        availableTeams: isAdmin || data.isPartOfRestrictedUsers ? UserService.userTeams(userId) : []
-      });
-    })
-    .then(function success(data) {
-      $scope.availableUsers = data.availableUsers;
-      angular.forEach($scope.availableUsers, function(user) {
-        var found = _.find($scope.authorizedUsers, { Id: user.Id });
-        if (found) {
-          user.selected = true;
-        }
-      });
-      $scope.availableTeams = data.availableTeams;
-      angular.forEach(data.availableTeams, function(team) {
-        var found = _.find($scope.authorizedTeams, { Id: team.Id });
-        if (found) {
-          team.selected = true;
-        }
-      });
-      if (data.availableTeams.length === 1) {
-        $scope.formValues.Ownership_Teams.push(data.availableTeams[0]);
-      }
-      $scope.state.displayAccessControlPanel = true;
-    })
-    .catch(function error(err) {
-      Notifications.error('Failure', err, 'Unable to retrieve access control information');
-    })
-    .finally(function final() {
-      $('#loadingViewSpinner').hide();
-    });
-  }
-
-  initAccessControlPanel();
-}]);

app/components/container/container.html

@@ -3,7 +3,7 @@
     <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
   </rd-header-title>
   <rd-header-content>
-    <a ui-sref="containers">Containers</a> > <a ui-sref="container({id: container.Id})">{{ container.Name|trimcontainername }}</a>
+    <a ui-sref="containers">Containers</a> &gt; <a ui-sref="container({id: container.Id})">{{ container.Name|trimcontainername }}</a>
   </rd-header-content>
 </rd-header>
 
@@ -33,6 +33,10 @@
       <rd-widget-body classes="no-padding">
         <table class="table">
           <tbody>
+            <tr>
+              <td>ID</td>
+              <td>{{ container.Id }}</td>
+            </tr>
             <tr>
               <td>Name</td>
               <td ng-if="!container.edit">
@@ -75,7 +79,7 @@
               <td colspan="2">
                 <div class="btn-group" role="group" aria-label="...">
                   <a class="btn btn-outline-secondary" type="button" ui-sref="stats({id: container.Id})"><i class="fa fa-area-chart space-right" aria-hidden="true"></i>Stats</a>
-                  <a class="btn btn-outline-secondary" type="button" ui-sref="logs({id: container.Id})"><i class="fa fa-exclamation-circle space-right" aria-hidden="true"></i>Logs</a>
+                  <a class="btn btn-outline-secondary" type="button" ui-sref="containerlogs({id: container.Id})"><i class="fa fa-exclamation-circle space-right" aria-hidden="true"></i>Logs</a>
                   <a class="btn btn-outline-secondary" type="button" ui-sref="console({id: container.Id})"><i class="fa fa-terminal space-right" aria-hidden="true"></i>Console</a>
                 </div>
               </td>
@@ -87,7 +91,13 @@
   </div>
 </div>
 
-<div ng-include="'app/components/common/accessControlPanel/accessControlPanel.html'" ng-if="container && applicationState.application.authentication"></div>
+<!-- access-control-panel -->
+<por-access-control-panel
+  ng-if="container && applicationState.application.authentication"
+  resource-control="container.ResourceControl"
+  resource-type="'container'">
+</por-access-control-panel>
+<!-- !access-control-panel -->
 
 <div ng-if="container.State.Health" class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">
@@ -114,7 +124,7 @@
           </tbody>
         </table>
       </rd-widget-body>
-    </rd-widge>
+    </rd-widget>
   </div>
 </div>
 
@@ -134,21 +144,11 @@
             </div>
           </div>
           <!-- !tag-description -->
-          <!-- name-and-registry-inputs -->
+          <!-- image-and-registry -->
           <div class="form-group">
-            <label for="image_name" class="col-sm-1 control-label text-left">Name</label>
-            <div class="col-sm-11 col-md-6">
-              <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-2 margin-sm-top control-label text-left">
-              Registry
-              <portainer-tooltip position="bottom" message="A registry to pull the image from. Leave empty to use the official Docker registry."></portainer-tooltip>
-            </label>
-            <div class="col-sm-10 col-md-3 margin-sm-top">
-              <input type="text" class="form-control" ng-model="config.Registry" id="image_registry" placeholder="optional">
-            </div>
+            <por-image-registry image="config.Image" registry="config.Registry"></por-image-registry>
           </div>
-          <!-- !name-and-registry-inputs -->
+          <!-- !image-and-registry -->
           <!-- tag-note -->
           <div class="form-group">
             <div class="col-sm-12">
@@ -300,6 +300,22 @@
         <div class="pagination-controls">
           <dir-pagination-controls></dir-pagination-controls>
         </div>
+        <hr />
+        <form class="form-horizontal">
+          <!-- network-input -->
+          <div class="row">
+            <label for="container_network" class="col-sm-3 col-lg-2 control-label text-left">Join a Network</label>
+            <div class="col-sm-5 col-lg-4">
+              <select class="form-control" ng-model="selectedNetwork" id="container_network">
+                <option selected disabled hidden value="">Select a network</option>
+                <option ng-repeat="net in availableNetworks" ng-value="net.Id">{{ net.Name }}</option>
+              </select>
+            </div>
+            <div class="col-sm-1">
+              <button type="button" class="btn btn-primary btn-sm" ng-disabled="!selectedNetwork" ng-click="containerJoinNetwork(container, selectedNetwork)">Join Network</button>
+            </div>
+          </div>
+        </form>
       </rd-widget-body>
     </rd-widget>
   </div>

app/components/container/containerController.js

@@ -1,6 +1,6 @@
 angular.module('container', [])
-.controller('ContainerController', ['$scope', '$state','$stateParams', '$filter', 'Container', 'ContainerCommit', 'ContainerService', 'ImageHelper', 'Network', 'Notifications', 'Pagination', 'ModalService', 'ControllerDataPipeline',
-function ($scope, $state, $stateParams, $filter, Container, ContainerCommit, ContainerService, ImageHelper, Network, Notifications, Pagination, ModalService, ControllerDataPipeline) {
+.controller('ContainerController', ['$scope', '$state','$stateParams', '$filter', 'Container', 'ContainerCommit', 'ContainerService', 'ImageHelper', 'Network', 'Notifications', 'Pagination', 'ModalService',
+function ($scope, $state, $stateParams, $filter, Container, ContainerCommit, ContainerService, ImageHelper, Network, Notifications, Pagination, ModalService) {
   $scope.activityTime = 0;
   $scope.portBindings = [];
   $scope.config = {
@@ -19,7 +19,6 @@ function ($scope, $state, $stateParams, $filter, Container, ContainerCommit, Con
     Container.get({id: $stateParams.id}, function (d) {
       var container = new ContainerDetailsViewModel(d);
       $scope.container = container;
-      ControllerDataPipeline.setAccessControlData('container', $stateParams.id, container.ResourceControl);
       $scope.container.edit = false;
       $scope.container.newContainerName = $filter('trimcontainername')(container.Name);
 
@@ -86,7 +85,7 @@ function ($scope, $state, $stateParams, $filter, Container, ContainerCommit, Con
     $('#createImageSpinner').show();
     var image = $scope.config.Image;
     var registry = $scope.config.Registry;
-    var imageConfig = ImageHelper.createImageConfigForCommit(image, registry);
+    var imageConfig = ImageHelper.createImageConfigForCommit(image, registry.URL);
     ContainerCommit.commit({id: $stateParams.id, tag: imageConfig.tag, repo: imageConfig.repo}, function (d) {
       $('#createImageSpinner').hide();
       update();
@@ -197,5 +196,42 @@ function ($scope, $state, $stateParams, $filter, Container, ContainerCommit, Con
     });
   };
 
+  $scope.containerJoinNetwork = function containerJoinNetwork(container, networkId) {
+    $('#joinNetworkSpinner').show();
+    Network.connect({id: networkId}, { Container: $stateParams.id }, function (d) {
+      if (container.message) {
+        $('#joinNetworkSpinner').hide();
+        Notifications.error('Error', d, 'Unable to connect container to network');
+      } else {
+        $('#joinNetworkSpinner').hide();
+        Notifications.success('Container joined network', $stateParams.id);
+        $state.go('container', {id: $stateParams.id}, {reload: true});
+      }
+    }, function (e) {
+      $('#joinNetworkSpinner').hide();
+      Notifications.error('Failure', e, 'Unable to connect container to network');
+    });
+  };
+
+  Network.query({}, function (d) {
+      var networks = d;
+      if ($scope.applicationState.endpoint.mode.provider === 'DOCKER_SWARM' || $scope.applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE') {
+        networks = d.filter(function (network) {
+          if (network.Scope === 'global') {
+            return network;
+          }
+        });
+        networks.push({Name: 'bridge'});
+        networks.push({Name: 'host'});
+        networks.push({Name: 'none'});
+      }
+      $scope.availableNetworks = networks;
+      if (!_.find(networks, {'Name': 'bridge'})) {
+        networks.push({Name: 'nat'});
+      }
+    }, function (e) {
+      Notifications.error('Failure', e, 'Unable to retrieve networks');
+    });
+
   update();
 }]);

app/components/containerConsole/containerConsole.html

@@ -3,7 +3,7 @@
     <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
   </rd-header-title>
   <rd-header-content ng-if="state.loaded">
-    <a ui-sref="containers">Containers</a> > <a ui-sref="container({id: container.Id})">{{ container.Name|trimcontainername }}</a> > Console
+    <a ui-sref="containers">Containers</a> &gt; <a ui-sref="container({id: container.Id})">{{ container.Name|trimcontainername }}</a> &gt; Console
   </rd-header-content>
 </rd-header>
 
@@ -16,29 +16,53 @@
         </div>
       </rd-widget-header>
       <rd-widget-body>
-        <form>
-          <div class="row">
+        <form class="form-horizontal">
+          <div ng-if="!state.connected">
             <!-- command-list -->
-            <div class="col-sm-4">
-              <div class="input-group">
-                <span class="input-group-addon">
-                  <i class="fa fa-linux" aria-hidden="true" ng-if="imageOS == 'linux'"></i>
-                  <i class="fa fa-windows" aria-hidden="true" ng-if="imageOS == 'windows'"></i>
-                </span>
-                <select class="form-control" ng-model="state.command" id="command">
-                  <option value="bash" ng-if="imageOS == 'linux'">/bin/bash</option>
-                  <option value="sh" ng-if="imageOS == 'linux'">/bin/sh</option>
-                  <option value="powershell" ng-if="imageOS == 'windows'">powershell</option>
-                  <option value="cmd.exe" ng-if="imageOS == 'windows'">cmd.exe</option>
-                </select>
+              <div class="form-group">
+                <label for="command" class="col-lg-1 text-left col-sm-2 control-label">Command</label>
+                <div class="col-lg-11 col-sm-10">
+                  <div class="input-group" ng-if="!formValues.isCustomCommand">
+                    <span class="input-group-addon">
+                      <i class="fa fa-linux" aria-hidden="true" ng-if="imageOS == 'linux'"></i>
+                      <i class="fa fa-windows" aria-hidden="true" ng-if="imageOS == 'windows'"></i>
+                    </span>
+                    <select class="form-control" ng-model="formValues.command" id="command">
+                      <option value="bash" ng-if="imageOS == 'linux'">/bin/bash</option>
+                      <option value="sh" ng-if="imageOS == 'linux'">/bin/sh</option>
+                      <option value="powershell" ng-if="imageOS == 'windows'">powershell</option>
+                      <option value="cmd.exe" ng-if="imageOS == 'windows'">cmd.exe</option>
+                    </select>
+                  </div>
+                  <input class="form-control" ng-if="formValues.isCustomCommand" type="text" name="custom-command" ng-model="formValues.customCommand" placeholder="e.g. ps aux">
+                </div>
+              </div>
+            <!-- !command-list -->
+            <div class="form-group col-lg-12">
+              <label for="command" class="text-left control-label">Use custom command</label>
+              <label class="switch" style="margin-left: 20px;">
+                <input type="checkbox" ng-model="formValues.isCustomCommand"><i></i>
+              </label>
+            </div>
+            <div class="form-group">
+              <label for="username" class="col-lg-1 text-left col-sm-2 control-label">
+                User
+                <portainer-tooltip position="bottom" message="Format is one of: user, user:group, uid or uid:gid"></portainer-tooltip>
+              </label>
+              <div class="col-lg-11 col-sm-10">
+                <input class="form-control" type="text" name="username" ng-model="formValues.user" placeholder="root">
               </div>
             </div>
-            <!-- !command-list -->
-            <div class="col-sm-8">
-              <button type="button" class="btn btn-primary" ng-click="connect()" ng-disabled="state.connected">Connect</button>
-              <button type="button" class="btn btn-default" ng-click="disconnect()" ng-disabled="!state.connected">Disconnect</button>
+            <div class="form-group">
+              <div class="col-lg-offset-1 col-sm-offset-2 col-lg-11 col-sm-10">
+                <button type="button" class="btn btn-primary" ng-click="connect()">Connect</button>
+              </div>
             </div>
           </div>
+          <div ng-if="state.connected">
+            <label>Exec into container as <code>{{ ::formValues.user || 'default user' }}</code> using command <code>{{ formValues.isCustomCommand ? formValues.customCommand : formValues.command }}</code></label>
+            <button type="button" class="btn btn-default" ng-click="disconnect()">Disconnect</button>
+          </div>
         </form>
       </rd-widget-body>
     </rd-widget>

app/components/containerConsole/containerConsoleController.js

@@ -1,9 +1,10 @@
 angular.module('containerConsole', [])
-.controller('ContainerConsoleController', ['$scope', '$stateParams', 'Container', 'Image', 'Exec', '$timeout', 'EndpointProvider', 'Notifications',
-function ($scope, $stateParams, Container, Image, Exec, $timeout, EndpointProvider, Notifications) {
+.controller('ContainerConsoleController', ['$scope', '$stateParams', 'Container', 'Image', 'EndpointProvider', 'Notifications', 'ContainerHelper', 'ContainerService', 'ExecService',
+function ($scope, $stateParams, Container, Image, EndpointProvider, Notifications, ContainerHelper, ContainerService, ExecService) {
   $scope.state = {};
   $scope.state.loaded = false;
   $scope.state.connected = false;
+  $scope.formValues = {};
 
   var socket, term;
 
@@ -22,7 +23,7 @@ function ($scope, $stateParams, Container, Image, Exec, $timeout, EndpointProvid
     } else {
       Image.get({id: d.Image}, function(imgData) {
         $scope.imageOS = imgData.Os;
-        $scope.state.command = imgData.Os === 'windows' ? 'powershell' : 'bash';
+        $scope.formValues.command = imgData.Os === 'windows' ? 'powershell' : 'bash';
         $scope.state.loaded = true;
         $('#loadingViewSpinner').hide();
       }, function (e) {
@@ -39,33 +40,36 @@ function ($scope, $stateParams, Container, Image, Exec, $timeout, EndpointProvid
     $('#loadConsoleSpinner').show();
     var termWidth = Math.round($('#terminal-container').width() / 8.2);
     var termHeight = 30;
+    var command = $scope.formValues.isCustomCommand ?
+                    $scope.formValues.customCommand : $scope.formValues.command;
     var execConfig = {
       id: $stateParams.id,
       AttachStdin: true,
       AttachStdout: true,
       AttachStderr: true,
       Tty: true,
-      Cmd: $scope.state.command.replace(' ', ',').split(',')
+      User: $scope.formValues.user,
+      Cmd: ContainerHelper.commandStringToArray(command)
     };
 
-    Container.exec(execConfig, function(d) {
-      if (d.message) {
-        $('#loadConsoleSpinner').hide();
-        Notifications.error('Error', {}, d.message);
+    var execId;
+    ContainerService.createExec(execConfig)
+    .then(function success(data) {
+      execId = data.Id;
+      var url = window.location.href.split('#')[0] + 'api/websocket/exec?id=' + execId + '&endpointId=' + EndpointProvider.endpointID();
+      if (url.indexOf('https') > -1) {
+        url = url.replace('https://', 'wss://');
       } else {
-        var execId = d.Id;
-        resizeTTY(execId, termHeight, termWidth);
-        var url = window.location.href.split('#')[0] + 'api/websocket/exec?id=' + execId + '&endpointId=' + EndpointProvider.endpointID();
-        if (url.indexOf('https') > -1) {
-          url = url.replace('https://', 'wss://');
-        } else {
-          url = url.replace('http://', 'ws://');
-        }
-        initTerm(url, termHeight, termWidth);
+        url = url.replace('http://', 'ws://');
       }
-    }, function (e) {
+      initTerm(url, termHeight, termWidth);
+      return ExecService.resizeTTY(execId, termHeight, termWidth, 2000);
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to exec into container');
+    })
+    .finally(function final() {
       $('#loadConsoleSpinner').hide();
-      Notifications.error('Failure', e, 'Unable to start an exec instance');
     });
   };
 
@@ -79,19 +83,6 @@ function ($scope, $stateParams, Container, Image, Exec, $timeout, EndpointProvid
     }
   };
 
-  function resizeTTY(execId, height, width) {
-    $timeout(function() {
-      Exec.resize({id: execId, height: height, width: width}, function (d) {
-        if (d.message) {
-          Notifications.error('Error', {}, 'Unable to resize TTY');
-        }
-      }, function (e) {
-        Notifications.error('Failure', {}, 'Unable to resize TTY');
-      });
-    }, 2000);
-
-  }
-
   function initTerm(url, height, width) {
     socket = new WebSocket(url);
 
@@ -103,7 +94,7 @@ function ($scope, $stateParams, Container, Image, Exec, $timeout, EndpointProvid
       term.on('data', function (data) {
         socket.send(data);
       });
-      term.open(document.getElementById('terminal-container'));
+      term.open(document.getElementById('terminal-container'), true);
       term.resize(width, height);
       term.setOption('cursorBlink', true);
 

app/components/containerLogs/containerlogs.html

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

app/components/containers/containers.html

@@ -25,12 +25,12 @@
     <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-success btn-responsive" ng-click="startAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-play space-right" aria-hidden="true"></i>Start</button>
-          <button type="button" class="btn btn-danger btn-responsive" ng-click="stopAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-stop space-right" aria-hidden="true"></i>Stop</button>
+          <button type="button" class="btn btn-success btn-responsive" ng-click="startAction()" ng-disabled="!state.selectedItemCount || state.noStoppedItemsSelected"><i class="fa fa-play space-right" aria-hidden="true"></i>Start</button>
+          <button type="button" class="btn btn-danger btn-responsive" ng-click="stopAction()" ng-disabled="!state.selectedItemCount || state.noRunningItemsSelected"><i class="fa fa-stop space-right" aria-hidden="true"></i>Stop</button>
           <button type="button" class="btn btn-danger btn-responsive" ng-click="killAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-bomb space-right" aria-hidden="true"></i>Kill</button>
           <button type="button" class="btn btn-primary btn-responsive" ng-click="restartAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-refresh space-right" aria-hidden="true"></i>Restart</button>
-          <button type="button" class="btn btn-primary btn-responsive" ng-click="pauseAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-pause space-right" aria-hidden="true"></i>Pause</button>
-          <button type="button" class="btn btn-primary btn-responsive" ng-click="unpauseAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-play space-right" aria-hidden="true"></i>Resume</button>
+          <button type="button" class="btn btn-primary btn-responsive" ng-click="pauseAction()" ng-disabled="!state.selectedItemCount || state.noRunningItemsSelected"><i class="fa fa-pause space-right" aria-hidden="true"></i>Pause</button>
+          <button type="button" class="btn btn-primary btn-responsive" ng-click="unpauseAction()" ng-disabled="!state.selectedItemCount || state.noPausedItemsSelected"><i class="fa fa-play space-right" aria-hidden="true"></i>Resume</button>
           <button type="button" class="btn btn-danger btn-responsive" ng-click="confirmRemoveAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button>
         </div>
         <a class="btn btn-primary" type="button" ui-sref="actions.create.container"><i class="fa fa-plus space-right" aria-hidden="true"></i>Add container</a>
@@ -137,5 +137,5 @@
         </div>
       </div>
     </rd-widget-body>
-  <rd-widget>
+  </rd-widget>
 </div>

app/components/containers/containersController.js

@@ -1,6 +1,6 @@
 angular.module('containers', [])
-  .controller('ContainersController', ['$q', '$scope', '$filter', 'Container', 'ContainerService', 'ContainerHelper', 'Info', 'Notifications', 'Pagination', 'EntityListService', 'ModalService', 'ResourceControlService', 'EndpointProvider',
-  function ($q, $scope, $filter, Container, ContainerService, ContainerHelper, Info, Notifications, Pagination, EntityListService, ModalService, ResourceControlService, EndpointProvider) {
+  .controller('ContainersController', ['$q', '$scope', '$filter', 'Container', 'ContainerService', 'ContainerHelper', 'SystemService', 'Notifications', 'Pagination', 'EntityListService', 'ModalService', 'ResourceControlService', 'EndpointProvider',
+  function ($q, $scope, $filter, Container, ContainerService, ContainerHelper, SystemService, Notifications, Pagination, EntityListService, ModalService, ResourceControlService, EndpointProvider) {
   $scope.state = {};
   $scope.state.pagination_count = Pagination.getPaginationCount('containers');
   $scope.state.displayAll = true;
@@ -41,6 +41,7 @@ angular.module('containers', [])
         }
         return model;
       });
+      updateSelectionFlags();
       $('#loadContainersSpinner').hide();
     }, function (e) {
       $('#loadContainersSpinner').hide();
@@ -117,17 +118,15 @@ angular.module('containers', [])
     angular.forEach($scope.state.filteredContainers, function (container) {
       if (container.Checked !== allSelected) {
         container.Checked = allSelected;
-        $scope.selectItem(container);
+        toggleItemSelection(container);
       }
     });
+    updateSelectionFlags();
   };
 
   $scope.selectItem = function (item) {
-    if (item.Checked) {
-      $scope.state.selectedItemCount++;
-    } else {
-      $scope.state.selectedItemCount--;
-    }
+    toggleItemSelection(item);
+    updateSelectionFlags();
   };
 
   $scope.toggleGetAll = function () {
@@ -187,6 +186,33 @@ angular.module('containers', [])
     );
   };
 
+  function toggleItemSelection(item) {
+    if (item.Checked) {
+      $scope.state.selectedItemCount++;
+    } else {
+      $scope.state.selectedItemCount--;
+    }
+  }
+
+  function updateSelectionFlags() {
+    $scope.state.noStoppedItemsSelected = true;
+    $scope.state.noRunningItemsSelected = true;
+    $scope.state.noPausedItemsSelected = true;
+    $scope.containers.forEach(function(container) {
+      if(!container.Checked) {
+        return;
+      }
+
+      if(container.Status === 'paused') {
+        $scope.state.noPausedItemsSelected = false;
+      } else if(container.Status === 'stopped') {
+        $scope.state.noStoppedItemsSelected = false;
+      } else if(container.Status === 'running') {
+        $scope.state.noRunningItemsSelected = false;
+      }
+    } );
+  }
+
   function retrieveSwarmHostsInfo(data) {
     var swarm_hosts = {};
     var systemStatus = data.SystemStatus;
@@ -202,15 +228,18 @@ angular.module('containers', [])
     return swarm_hosts;
   }
 
-  function initView(){
-    if ($scope.applicationState.endpoint.mode.provider === 'DOCKER_SWARM') {
-      Info.get({}, function (d) {
-        $scope.swarm_hosts = retrieveSwarmHostsInfo(d);
-        update({all: $scope.state.displayAll ? 1 : 0});
-      });
-    } else {
+  function initView() {
+    var provider = $scope.applicationState.endpoint.mode.provider;
+    $q.when(provider !== 'DOCKER_SWARM' || SystemService.info())
+    .then(function success(data) {
+      if (provider === 'DOCKER_SWARM') {
+        $scope.swarm_hosts = retrieveSwarmHostsInfo(data);
+      }
       update({all: $scope.state.displayAll ? 1 : 0});
-    }
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to retrieve cluster information');
+    });
   }
 
   initView();

app/components/createContainer/createContainerController.js

@@ -1,8 +1,8 @@
 // @@OLD_SERVICE_CONTROLLER: this service should be rewritten to use services.
 // See app/components/templates/templatesController.js as a reference.
 angular.module('createContainer', [])
-.controller('CreateContainerController', ['$q', '$scope', '$state', '$stateParams', '$filter', 'Info', 'Container', 'ContainerHelper', 'Image', 'ImageHelper', 'Volume', 'Network', 'ResourceControlService', 'Authentication', 'Notifications', 'ContainerService', 'ImageService', 'ControllerDataPipeline', 'FormValidator',
-function ($q, $scope, $state, $stateParams, $filter, Info, Container, ContainerHelper, Image, ImageHelper, Volume, Network, ResourceControlService, Authentication, Notifications, ContainerService, ImageService, ControllerDataPipeline, FormValidator) {
+.controller('CreateContainerController', ['$q', '$scope', '$state', '$stateParams', '$filter', 'Container', 'ContainerHelper', 'Image', 'ImageHelper', 'Volume', 'Network', 'ResourceControlService', 'Authentication', 'Notifications', 'ContainerService', 'ImageService', 'FormValidator',
+function ($q, $scope, $state, $stateParams, $filter, Container, ContainerHelper, Image, ImageHelper, Volume, Network, ResourceControlService, Authentication, Notifications, ContainerService, ImageService, FormValidator) {
 
   $scope.formValues = {
     alwaysPull: true,
@@ -13,7 +13,8 @@ function ($q, $scope, $state, $stateParams, $filter, Info, Container, ContainerH
     Labels: [],
     ExtraHosts: [],
     IPv4: '',
-    IPv6: ''
+    IPv6: '',
+    AccessControlData: new AccessControlFormData()
   };
 
   $scope.state = {
@@ -94,7 +95,7 @@ function ($q, $scope, $state, $stateParams, $filter, Info, Container, ContainerH
   function prepareImageConfig(config) {
     var image = config.Image;
     var registry = $scope.formValues.Registry;
-    var imageConfig = ImageHelper.createImageConfigForContainer(image, registry);
+    var imageConfig = ImageHelper.createImageConfigForContainer(image, registry.URL);
     config.Image = imageConfig.fromImage + ':' + imageConfig.tag;
     $scope.imageConfig = imageConfig;
   }
@@ -285,7 +286,7 @@ function ($q, $scope, $state, $stateParams, $filter, Info, Container, ContainerH
   $scope.create = function () {
     $('#createContainerSpinner').show();
 
-    var accessControlData = ControllerDataPipeline.getAccessControlFormData();
+    var accessControlData = $scope.formValues.AccessControlData;
     var userDetails = Authentication.getUserDetails();
     var isAdmin = userDetails.role === 1 ? true : false;
 
@@ -299,7 +300,7 @@ function ($q, $scope, $state, $stateParams, $filter, Info, Container, ContainerH
   };
 
   function createContainer(config, accessControlData) {
-    $q.when(!$scope.formValues.alwaysPull || ImageService.pullImage($scope.config.Image, $scope.formValues.Registry))
+    $q.when(!$scope.formValues.alwaysPull || ImageService.pullImage($scope.config.Image, $scope.formValues.Registry, true))
     .finally(function final() {
       ContainerService.createAndStartContainer(config)
       .then(function success(data) {

app/components/createContainer/createcontainer.html

@@ -1,7 +1,7 @@
 <rd-header>
   <rd-header-title title="Create container"></rd-header-title>
   <rd-header-content>
-    <a ui-sref="containers">Containers</a> > Add container
+    <a ui-sref="containers">Containers</a> &gt; Add container
   </rd-header-content>
 </rd-header>
 
@@ -21,21 +21,11 @@
           <div class="col-sm-12 form-section-title">
             Image configuration
           </div>
-          <!-- image-and-registry-inputs -->
+          <!-- image-and-registry -->
           <div class="form-group">
-            <label for="container_image" class="col-sm-1 control-label text-left">Image</label>
-            <div class="col-sm-11 col-md-6">
-              <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-2 margin-sm-top control-label text-left">
-              Registry
-              <portainer-tooltip position="bottom" message="A registry to pull the image from. Leave empty to use the official Docker registry."></portainer-tooltip>
-            </label>
-            <div class="col-sm-10 col-md-3 margin-sm-top">
-              <input type="text" class="form-control" ng-model="formValues.Registry" id="image_registry" placeholder="e.g. myregistry.mydomain">
-            </div>
+            <por-image-registry image="config.Image" registry="formValues.Registry"></por-image-registry>
           </div>
-          <!-- !image-and-registry-inputs -->
+          <!-- !image-and-registry -->
           <!-- always-pull -->
           <div class="form-group">
             <div class="col-sm-12">
@@ -108,7 +98,7 @@
           </div>
           <!-- !port-mapping -->
           <!-- access-control -->
-          <div ng-include="'app/components/common/accessControlForm/accessControlForm.html'" ng-if="applicationState.application.authentication"></div>
+          <por-access-control-form form-data="formValues.AccessControlData"></por-access-control-form>
           <!-- !access-control -->
           <!-- actions -->
           <div class="col-sm-12 form-section-title">

app/components/createNetwork/createNetworkController.js

@@ -1,6 +1,6 @@
 angular.module('createNetwork', [])
-.controller('CreateNetworkController', ['$scope', '$state', 'Notifications', 'Network',
-function ($scope, $state, Notifications, Network) {
+.controller('CreateNetworkController', ['$scope', '$state', 'Notifications', 'Network', 'LabelHelper',
+function ($scope, $state, Notifications, Network, LabelHelper) {
   $scope.formValues = {
     DriverOptions: [],
     Subnet: '',
@@ -30,7 +30,7 @@ function ($scope, $state, Notifications, Network) {
   };
 
   $scope.addLabel = function() {
-    $scope.formValues.Labels.push({ name: '', value: ''});
+    $scope.formValues.Labels.push({ key: '', value: ''});
   };
 
   $scope.removeLabel = function(index) {
@@ -74,13 +74,7 @@ function ($scope, $state, Notifications, Network) {
   }
 
   function prepareLabelsConfig(config) {
-    var labels = {};
-    $scope.formValues.Labels.forEach(function (label) {
-      if (label.name && label.value) {
-          labels[label.name] = label.value;
-      }
-    });
-    config.Labels = labels;
+    config.Labels = LabelHelper.fromKeyValueToLabelHash($scope.formValues.Labels);
   }
 
   function prepareConfiguration() {

app/components/createNetwork/createnetwork.html

@@ -1,7 +1,7 @@
 <rd-header>
   <rd-header-title title="Create network"></rd-header-title>
   <rd-header-content>
-    <a ui-sref="networks">Networks</a> > Add network
+    <a ui-sref="networks">Networks</a> &gt; Add network
   </rd-header-content>
 </rd-header>
 
@@ -90,7 +90,7 @@
               <div ng-repeat="label in formValues.Labels" style="margin-top: 2px;">
                 <div class="input-group col-sm-5 input-group-sm">
                   <span class="input-group-addon">name</span>
-                  <input type="text" class="form-control" ng-model="label.name" placeholder="e.g. com.example.foo">
+                  <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo">
                 </div>
                 <div class="input-group col-sm-5 input-group-sm">
                   <span class="input-group-addon">value</span>

app/components/createRegistry/createRegistryController.js

@@ -0,0 +1,49 @@
+angular.module('createRegistry', [])
+.controller('CreateRegistryController', ['$scope', '$state', 'RegistryService', 'Notifications',
+function ($scope, $state, RegistryService, Notifications) {
+
+  $scope.state = {
+    RegistryType: 'quay'
+  };
+
+  $scope.formValues = {
+    Name: 'Quay',
+    URL: 'quay.io',
+    Authentication: true,
+    Username: '',
+    Password: ''
+  };
+
+  $scope.selectQuayRegistry = function() {
+    $scope.formValues.Name = 'Quay';
+    $scope.formValues.URL = 'quay.io';
+    $scope.formValues.Authentication = true;
+  };
+
+  $scope.selectCustomRegistry = function() {
+    $scope.formValues.Name = '';
+    $scope.formValues.URL = '';
+    $scope.formValues.Authentication = false;
+  };
+
+  $scope.addRegistry = function() {
+    $('#createRegistrySpinner').show();
+    var registryName = $scope.formValues.Name;
+    var registryURL = $scope.formValues.URL.replace(/^https?\:\/\//i, '');
+    var authentication = $scope.formValues.Authentication;
+    var username = $scope.formValues.Username;
+    var password = $scope.formValues.Password;
+
+    RegistryService.createRegistry(registryName, registryURL, authentication, username, password)
+    .then(function success(data) {
+      Notifications.success('Registry successfully created');
+      $state.go('registries');
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to create registry');
+    })
+    .finally(function final() {
+      $('#createRegistrySpinner').hide();
+    });
+  };
+}]);

app/components/createRegistry/createregistry.html

@@ -0,0 +1,117 @@
+<rd-header>
+  <rd-header-title title="Create registry">
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin" style="display:none"></i>
+  </rd-header-title>
+  <rd-header-content>
+    <a ui-sref="registries">Registries</a> &gt; Add registry
+  </rd-header-content>
+</rd-header>
+
+<div class="row">
+  <div class="col-sm-12">
+    <rd-widget>
+      <rd-widget-body>
+        <form class="form-horizontal">
+          <div class="col-sm-12 form-section-title">
+            Registry provider
+          </div>
+          <div class="form-group"></div>
+          <div class="form-group" style="margin-bottom: 0">
+            <div class="boxselector_wrapper">
+              <div ng-click="selectQuayRegistry()">
+                <input type="radio" id="registry_quay" ng-model="state.RegistryType" value="quay">
+                <label for="registry_quay">
+                  <div class="boxselector_header">
+                    <i class="fa fa-database" aria-hidden="true" style="margin-right: 2px;"></i>
+                    Quay.io
+                  </div>
+                  <p>Quay container registry</p>
+                </label>
+              </div>
+              <div ng-click="selectCustomRegistry()">
+                <input type="radio" id="registry_custom" ng-model="state.RegistryType" value="custom">
+                <label for="registry_custom">
+                  <div class="boxselector_header">
+                    <i class="fa fa-database" aria-hidden="true" style="margin-right: 2px;"></i>
+                    Custom registry
+                  </div>
+                  <p>Define your own registry</p>
+                </label>
+              </div>
+            </div>
+          </div>
+          <div class="col-sm-12 form-section-title" ng-if="state.RegistryType === 'custom'">
+            Important notice
+          </div>
+          <div class="form-group" ng-if="state.RegistryType === 'custom'">
+            <span class="col-sm-12 text-muted small">
+              Docker requires you to connect to a <a href="https://docs.docker.com/registry/deploying/#running-a-domain-registry" target="_blank">secure registry</a>.
+              You can find more information about how to connect to an insecure registry <a href="https://docs.docker.com/registry/insecure/" target="_blank">in the Docker documentation</a>.
+            </span>
+          </div>
+          <div class="col-sm-12 form-section-title">
+            Registry details
+          </div>
+          <!-- name-input -->
+          <div class="form-group" ng-if="state.RegistryType === 'custom'">
+            <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
+            <div class="col-sm-9 col-lg-10">
+              <input type="text" class="form-control" id="registry_name" ng-model="formValues.Name" placeholder="e.g. my-registry">
+            </div>
+          </div>
+          <!-- !name-input -->
+          <!-- registry-url-input -->
+          <div class="form-group" ng-if="state.RegistryType === 'custom'">
+            <label for="registry_url" class="col-sm-3 col-lg-2 control-label text-left">
+              Registry URL
+              <portainer-tooltip position="bottom" message="URL or IP address of a Docker registry. Any protocol will be stripped."></portainer-tooltip>
+            </label>
+            <div class="col-sm-9 col-lg-10">
+              <input type="text" class="form-control" id="registry_url" ng-model="formValues.URL" placeholder="e.g. 10.0.0.10:5000 or myregistry.domain.tld">
+            </div>
+          </div>
+          <!-- !registry-url-input -->
+          <!-- authentication-checkbox -->
+          <div class="form-group" ng-if="state.RegistryType === 'custom'">
+            <div class="col-sm-12">
+              <label for="registry_auth" class="control-label text-left">
+                Authentication
+                <portainer-tooltip position="bottom" message="Enable this option if you need to specify credentials to connect to this registry."></portainer-tooltip>
+              </label>
+              <label class="switch" style="margin-left: 20px;">
+                <input type="checkbox" ng-model="formValues.Authentication"><i></i>
+              </label>
+            </div>
+          </div>
+          <!-- !authentication-checkbox -->
+          <!-- authentication-credentials -->
+          <div ng-if="formValues.Authentication || state.RegistryType === 'quay'">
+            <!-- credentials-user -->
+            <div class="form-group">
+              <label for="credentials_username" class="col-sm-3 col-lg-2 control-label text-left">Username</label>
+              <div class="col-sm-9 col-lg-10">
+                <input type="text" class="form-control" id="credentials_username" ng-model="formValues.Username">
+              </div>
+            </div>
+            <!-- !credentials-user -->
+            <!-- credentials-password -->
+            <div class="form-group">
+              <label for="credentials_password" class="col-sm-3 col-lg-2 control-label text-left">Password</label>
+              <div class="col-sm-9 col-lg-10">
+                <input type="password" class="form-control" id="credentials_password" ng-model="formValues.Password">
+              </div>
+            </div>
+            <!-- !credentials-password -->
+          </div>
+          <!-- !authentication-credentials -->
+          <div class="form-group">
+            <div class="col-sm-12">
+              <button type="button" class="btn btn-primary btn-sm" ng-disabled="!formValues.Name || !formValues.URL || (formValues.Authentication && (!formValues.Username || !formValues.Password))" ng-click="addRegistry()">Add registry</button>
+              <i id="createRegistrySpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
+            </div>
+          </div>
+        </form>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/components/createSecret/createSecretController.js

@@ -1,6 +1,6 @@
 angular.module('createSecret', [])
-.controller('CreateSecretController', ['$scope', '$state', 'Notifications', 'SecretService',
-function ($scope, $state, Notifications, SecretService) {
+.controller('CreateSecretController', ['$scope', '$state', 'Notifications', 'SecretService', 'LabelHelper',
+function ($scope, $state, Notifications, SecretService, LabelHelper) {
   $scope.formValues = {
     Name: '',
     Data: '',
@@ -9,7 +9,7 @@ function ($scope, $state, Notifications, SecretService) {
   };
 
   $scope.addLabel = function() {
-    $scope.formValues.Labels.push({ name: '', value: ''});
+    $scope.formValues.Labels.push({ key: '', value: ''});
   };
 
   $scope.removeLabel = function(index) {
@@ -17,13 +17,7 @@ function ($scope, $state, Notifications, SecretService) {
   };
 
   function prepareLabelsConfig(config) {
-    var labels = {};
-    $scope.formValues.Labels.forEach(function (label) {
-      if (label.name && label.value) {
-          labels[label.name] = label.value;
-      }
-    });
-    config.Labels = labels;
+    config.Labels = LabelHelper.fromKeyValueToLabelHash($scope.formValues.Labels);
   }
 
   function prepareSecretData(config) {

app/components/createSecret/createsecret.html

@@ -1,7 +1,7 @@
 <rd-header>
   <rd-header-title title="Create secret"></rd-header-title>
   <rd-header-content>
-    <a ui-sref="secrets">Secrets</a> > Add secret
+    <a ui-sref="secrets">Secrets</a> &gt; Add secret
   </rd-header-content>
 </rd-header>
 
@@ -52,7 +52,7 @@
               <div ng-repeat="label in formValues.Labels" style="margin-top: 2px;">
                 <div class="input-group col-sm-5 input-group-sm">
                   <span class="input-group-addon">name</span>
-                  <input type="text" class="form-control" ng-model="label.name" placeholder="e.g. com.example.foo">
+                  <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo">
                 </div>
                 <div class="input-group col-sm-5 input-group-sm">
                   <span class="input-group-addon">value</span>

app/components/createService/createServiceController.js

@@ -1,13 +1,13 @@
 // @@OLD_SERVICE_CONTROLLER: this service should be rewritten to use services.
 // See app/components/templates/templatesController.js as a reference.
 angular.module('createService', [])
-.controller('CreateServiceController', ['$q', '$scope', '$state', 'Service', 'ServiceHelper', 'SecretHelper', 'SecretService', 'VolumeService', 'NetworkService', 'ImageHelper', 'Authentication', 'ResourceControlService', 'Notifications', 'ControllerDataPipeline', 'FormValidator',
-function ($q, $scope, $state, Service, ServiceHelper, SecretHelper, SecretService, VolumeService, NetworkService, ImageHelper, Authentication, ResourceControlService, Notifications, ControllerDataPipeline, FormValidator) {
+.controller('CreateServiceController', ['$q', '$scope', '$state', 'Service', 'ServiceHelper', 'SecretHelper', 'SecretService', 'VolumeService', 'NetworkService', 'ImageHelper', 'LabelHelper', 'Authentication', 'ResourceControlService', 'Notifications', 'FormValidator', 'RegistryService', 'HttpRequestHelper',
+function ($q, $scope, $state, Service, ServiceHelper, SecretHelper, SecretService, VolumeService, NetworkService, ImageHelper, LabelHelper, Authentication, ResourceControlService, Notifications, FormValidator, RegistryService, HttpRequestHelper) {
 
   $scope.formValues = {
     Name: '',
     Image: '',
-    Registry: '',
+    Registry: {},
     Mode: 'replicated',
     Replicas: 1,
     Command: '',
@@ -23,9 +23,11 @@ function ($q, $scope, $state, Service, ServiceHelper, SecretHelper, SecretServic
     Ports: [],
     Parallelism: 1,
     PlacementConstraints: [],
+    PlacementPreferences: [],
     UpdateDelay: 0,
     FailureAction: 'pause',
-    Secrets: []
+    Secrets: [],
+    AccessControlData: new AccessControlFormData()
   };
 
   $scope.state = {
@@ -81,7 +83,7 @@ function ($q, $scope, $state, Service, ServiceHelper, SecretHelper, SecretServic
   };
 
   $scope.addPlacementPreference = function() {
-    $scope.formValues.PlacementPreferences.push({ key: '', operator: '==', value: '' });
+    $scope.formValues.PlacementPreferences.push({ strategy: 'spread', value: '' });
   };
 
   $scope.removePlacementPreference = function(index) {
@@ -89,7 +91,7 @@ function ($q, $scope, $state, Service, ServiceHelper, SecretHelper, SecretServic
   };
 
   $scope.addLabel = function() {
-    $scope.formValues.Labels.push({ name: '', value: ''});
+    $scope.formValues.Labels.push({ key: '', value: ''});
   };
 
   $scope.removeLabel = function(index) {
@@ -97,7 +99,7 @@ function ($q, $scope, $state, Service, ServiceHelper, SecretHelper, SecretServic
   };
 
   $scope.addContainerLabel = function() {
-    $scope.formValues.ContainerLabels.push({ name: '', value: ''});
+    $scope.formValues.ContainerLabels.push({ key: '', value: ''});
   };
 
   $scope.removeContainerLabel = function(index) {
@@ -105,7 +107,7 @@ function ($q, $scope, $state, Service, ServiceHelper, SecretHelper, SecretServic
   };
 
   function prepareImageConfig(config, input) {
-    var imageConfig = ImageHelper.createImageConfigForContainer(input.Image, input.Registry);
+    var imageConfig = ImageHelper.createImageConfigForContainer(input.Image, input.Registry.URL);
     config.TaskTemplate.ContainerSpec.Image = imageConfig.fromImage + ':' + imageConfig.tag;
   }
 
@@ -170,21 +172,8 @@ function ($q, $scope, $state, Service, ServiceHelper, SecretHelper, SecretServic
   }
 
   function prepareLabelsConfig(config, input) {
-    var labels = {};
-    input.Labels.forEach(function (label) {
-      if (label.name && label.value) {
-          labels[label.name] = label.value;
-      }
-    });
-    config.Labels = labels;
-
-    var containerLabels = {};
-    input.ContainerLabels.forEach(function (label) {
-      if (label.name && label.value) {
-          containerLabels[label.name] = label.value;
-      }
-    });
-    config.TaskTemplate.ContainerSpec.Labels = containerLabels;
+    config.Labels = LabelHelper.fromKeyValueToLabelHash(input.Labels);
+    config.TaskTemplate.ContainerSpec.Labels = LabelHelper.fromKeyValueToLabelHash(input.ContainerLabels);
   }
 
   function prepareVolumes(config, input) {
@@ -213,8 +202,10 @@ function ($q, $scope, $state, Service, ServiceHelper, SecretHelper, SecretServic
       FailureAction: input.FailureAction
     };
   }
+
   function preparePlacementConfig(config, input) {
     config.TaskTemplate.Placement.Constraints = ServiceHelper.translateKeyValueToPlacementConstraints(input.PlacementConstraints);
+    config.TaskTemplate.Placement.Preferences = ServiceHelper.translateKeyValueToPlacementPreferences(input.PlacementPreferences);
   }
 
   function prepareSecretConfig(config, input) {
@@ -222,7 +213,9 @@ function ($q, $scope, $state, Service, ServiceHelper, SecretHelper, SecretServic
       var secrets = [];
       angular.forEach(input.Secrets, function(secret) {
         if (secret.model) {
-          secrets.push(SecretHelper.secretConfig(secret.model));
+          var s = SecretHelper.secretConfig(secret.model);
+          s.File.Name = s.SecretName;
+          secrets.push(s);
         }
       });
       config.TaskTemplate.ContainerSpec.Secrets = secrets;
@@ -257,6 +250,10 @@ function ($q, $scope, $state, Service, ServiceHelper, SecretHelper, SecretServic
   }
 
   function createNewService(config, accessControlData) {
+
+    var registry = $scope.formValues.Registry;
+    var authenticationDetails = registry.Authentication ? RegistryService.encodedCredentials(registry) : '';
+    HttpRequestHelper.setRegistryAuthenticationHeader(authenticationDetails);
     Service.create(config).$promise
     .then(function success(data) {
       var serviceIdentifier = data.ID;
@@ -290,7 +287,7 @@ function ($q, $scope, $state, Service, ServiceHelper, SecretHelper, SecretServic
   $scope.create = function createService() {
     $('#createServiceSpinner').show();
 
-    var accessControlData = ControllerDataPipeline.getAccessControlFormData();
+    var accessControlData = $scope.formValues.AccessControlData;
     var userDetails = Authentication.getUserDetails();
     var isAdmin = userDetails.role === 1 ? true : false;
 

app/components/createService/createservice.html

@@ -3,7 +3,7 @@
     <i id="loadingViewSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px;"></i>
   </rd-header-title>
   <rd-header-content>
-    <a ui-sref="services">Services</a> > Add service
+    <a ui-sref="services">Services</a> &gt; Add service
   </rd-header-content>
 </rd-header>
 
@@ -23,21 +23,11 @@
           <div class="col-sm-12 form-section-title">
             Image configuration
           </div>
-          <!-- image-and-registry-inputs -->
+          <!-- image-and-registry -->
           <div class="form-group">
-            <label for="service_image" class="col-sm-1 control-label text-left">Image</label>
-            <div class="col-sm-11 col-md-6">
-              <input type="text" class="form-control" ng-model="formValues.Image" id="service_image" placeholder="e.g. nginx:latest">
-            </div>
-            <label for="image_registry" class="col-sm-2 margin-sm-top control-label text-left">
-              Registry
-              <portainer-tooltip position="bottom" message="A registry to pull the image from. Leave empty to use the official Docker registry."></portainer-tooltip>
-            </label>
-            <div class="col-sm-10 col-md-3 margin-sm-top">
-              <input type="text" class="form-control" ng-model="formValues.Registry" id="image_registry" placeholder="e.g. myregistry.mydomain">
-            </div>
+            <por-image-registry image="formValues.Image" registry="formValues.Registry"></por-image-registry>
           </div>
-          <!-- !image-and-registry-inputs -->
+          <!-- !image-and-registry -->
           <div class="col-sm-12 form-section-title">
             Scheduling
           </div>
@@ -111,7 +101,7 @@
           </div>
           <!-- !port-mapping -->
           <!-- access-control -->
-          <div ng-include="'app/components/common/accessControlForm/accessControlForm.html'" ng-if="applicationState.application.authentication"></div>
+          <por-access-control-form form-data="formValues.AccessControlData"></por-access-control-form>
           <!-- !access-control -->
           <!-- actions -->
           <div class="col-sm-12 form-section-title">
@@ -252,7 +242,7 @@
                           <span class="input-group-addon">volume</span>
                           <select class="form-control" ng-model="volume.Source">
                             <option selected disabled hidden value="">Select a volume</option>
-                            <option ng-repeat="vol in availableVolumes" ng-value="vol.Name">{{ vol.Name|truncate:30}}</option>
+                            <option ng-repeat="vol in availableVolumes" ng-value="vol.Id">{{ vol.Id|truncate:30 }}</option>
                           </select>
                         </div>
                         <!-- !volume -->
@@ -338,7 +328,7 @@
                   <div ng-repeat="label in formValues.Labels" style="margin-top: 2px;">
                     <div class="input-group col-sm-5 input-group-sm">
                       <span class="input-group-addon">name</span>
-                      <input type="text" class="form-control" ng-model="label.name" placeholder="e.g. com.example.foo">
+                      <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo">
                     </div>
                     <div class="input-group col-sm-5 input-group-sm">
                       <span class="input-group-addon">value</span>
@@ -365,7 +355,7 @@
                   <div ng-repeat="label in formValues.ContainerLabels" style="margin-top: 2px;">
                     <div class="input-group col-sm-5 input-group-sm">
                       <span class="input-group-addon">name</span>
-                      <input type="text" class="form-control" ng-model="label.name" placeholder="e.g. com.example.foo">
+                      <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo">
                     </div>
                     <div class="input-group col-sm-5 input-group-sm">
                       <span class="input-group-addon">value</span>

app/components/createService/includes/placement.html

@@ -29,3 +29,29 @@
     </div>
   </div>
 </form>
+
+<form class="form-horizontal" style="margin-top: 15px;" ng-if="applicationState.endpoint.apiVersion >= 1.30">
+  <div class="form-group">
+    <div class="col-sm-12" style="margin-top: 5px;">
+      <label class="control-label text-left">Placement preferences</label>
+      <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addPlacementPreference()">
+        <i class="fa fa-plus-circle" aria-hidden="true"></i> placement preference
+      </span>
+    </div>
+    <div class="col-sm-12 form-inline" style="margin-top: 10px;">
+      <div ng-repeat="preference in formValues.PlacementPreferences" style="margin-top: 2px;">
+        <div class="input-group col-sm-4 input-group-sm">
+          <span class="input-group-addon">strategy</span>
+          <input type="text" class="form-control" ng-model="preference.strategy" placeholder="e.g. spread">
+        </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="preference.value" placeholder="e.g. node.labels.datacenter">
+        </div>
+        <button class="btn btn-sm btn-danger" type="button" ng-click="removePlacementPreference($index)">
+          <i class="fa fa-trash" aria-hidden="true"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+</form>

app/components/createVolume/createVolumeController.js

@@ -1,10 +1,11 @@
 angular.module('createVolume', [])
-.controller('CreateVolumeController', ['$scope', '$state', 'VolumeService', 'InfoService', 'ResourceControlService', 'Authentication', 'Notifications', 'ControllerDataPipeline', 'FormValidator',
-function ($scope, $state, VolumeService, InfoService, ResourceControlService, Authentication, Notifications, ControllerDataPipeline, FormValidator) {
+.controller('CreateVolumeController', ['$scope', '$state', 'VolumeService', 'SystemService', 'ResourceControlService', 'Authentication', 'Notifications', 'FormValidator',
+function ($scope, $state, VolumeService, SystemService, ResourceControlService, Authentication, Notifications, FormValidator) {
 
   $scope.formValues = {
     Driver: 'local',
-    DriverOptions: []
+    DriverOptions: [],
+    AccessControlData: new AccessControlFormData()
   };
 
   $scope.state = {
@@ -40,8 +41,8 @@ function ($scope, $state, VolumeService, InfoService, ResourceControlService, Au
     var driver = $scope.formValues.Driver;
     var driverOptions = $scope.formValues.DriverOptions;
     var volumeConfiguration = VolumeService.createVolumeConfiguration(name, driver, driverOptions);
+    var accessControlData = $scope.formValues.AccessControlData;
     var userDetails = Authentication.getUserDetails();
-    var accessControlData = ControllerDataPipeline.getAccessControlFormData();
     var isAdmin = userDetails.role === 1 ? true : false;
 
     if (!validateForm(accessControlData, isAdmin)) {
@@ -69,16 +70,18 @@ function ($scope, $state, VolumeService, InfoService, ResourceControlService, Au
 
   function initView() {
     $('#loadingViewSpinner').show();
-    InfoService.getVolumePlugins()
-    .then(function success(data) {
-      $scope.availableVolumeDrivers = data;
-    })
-    .catch(function error(err) {
-      Notifications.error('Failure', err, 'Unable to retrieve volume drivers');
-    })
-    .finally(function final() {
-      $('#loadingViewSpinner').hide();
-    });
+    if ($scope.applicationState.endpoint.mode.provider !== 'DOCKER_SWARM') {
+      SystemService.getVolumePlugins()
+      .then(function success(data) {
+        $scope.availableVolumeDrivers = data;
+      })
+      .catch(function error(err) {
+        Notifications.error('Failure', err, 'Unable to retrieve volume drivers');
+      })
+      .finally(function final() {
+        $('#loadingViewSpinner').hide();
+      });
+    }
   }
 
   initView();

app/components/createVolume/createvolume.html

@@ -3,7 +3,7 @@
     <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
   </rd-header-title>
   <rd-header-content>
-    <a ui-sref="volumes">Volumes</a> > Add volume
+    <a ui-sref="volumes">Volumes</a> &gt; Add volume
   </rd-header-content>
 </rd-header>
 
@@ -65,7 +65,7 @@
           </div>
           <!-- !driver-options -->
           <!-- access-control -->
-          <div ng-include="'app/components/common/accessControlForm/accessControlForm.html'" ng-if="applicationState.application.authentication"></div>
+          <por-access-control-form form-data="formValues.AccessControlData"></por-access-control-form>
           <!-- !access-control -->
           <!-- actions -->
           <div class="col-sm-12 form-section-title">

app/components/dashboard/dashboardController.js

@@ -1,6 +1,6 @@
 angular.module('dashboard', [])
-.controller('DashboardController', ['$scope', '$q', 'Container', 'ContainerHelper', 'Image', 'Network', 'Volume', 'Info', 'Notifications',
-function ($scope, $q, Container, ContainerHelper, Image, Network, Volume, Info, Notifications) {
+.controller('DashboardController', ['$scope', '$q', 'Container', 'ContainerHelper', 'Image', 'Network', 'Volume', 'SystemService', 'Notifications',
+function ($scope, $q, Container, ContainerHelper, Image, Network, Volume, SystemService, Notifications) {
 
   $scope.containerData = {
     total: 0
@@ -68,7 +68,7 @@ function ($scope, $q, Container, ContainerHelper, Image, Network, Volume, Info,
       Image.query({}).$promise,
       Volume.query({}).$promise,
       Network.query({}).$promise,
-      Info.get({}).$promise
+      SystemService.info()
     ]).then(function (d) {
       prepareContainerData(d[0]);
       prepareImageData(d[1]);

app/components/docker/docker.html

@@ -8,7 +8,7 @@
   <rd-header-content>Docker</rd-header-content>
 </rd-header>
 
-<div class="row" ng-if="state.loaded">
+<div class="row" ng-if="info && version">
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
     <rd-widget>
       <rd-widget-header icon="fa-code" title="Engine version"></rd-widget-header>
@@ -50,7 +50,7 @@
   </div>
 </div>
 
-<div class="row" ng-if="state.loaded">
+<div class="row" ng-if="info && version">
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
     <rd-widget>
       <rd-widget-header icon="fa-th" title="Engine status"></rd-widget-header>
@@ -92,7 +92,7 @@
   </div>
 </div>
 
-<div class="row" ng-if="state.loaded && info.Plugins">
+<div class="row" ng-if="info && info.Plugins">
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
     <rd-widget>
       <rd-widget-header icon="fa-plug" title="Engine plugins"></rd-widget-header>

app/components/docker/dockerController.js

@@ -1,24 +1,26 @@
 angular.module('docker', [])
-.controller('DockerController', ['$scope', 'Info', 'Version', 'Notifications',
-function ($scope, Info, Version, Notifications) {
-  $scope.state = {
-    loaded: false
-  };
+.controller('DockerController', ['$q', '$scope', 'SystemService', 'Notifications',
+function ($q, $scope, SystemService, Notifications) {
   $scope.info = {};
   $scope.version = {};
 
-  Info.get({}, function (infoData) {
-    $scope.info = infoData;
-    Version.get({}, function (versionData) {
-      $scope.version = versionData;
-      $scope.state.loaded = true;
-      $('#loadingViewSpinner').hide();
-    }, function (e) {
-      Notifications.error('Failure', e, 'Unable to retrieve engine details');
+  function initView() {
+    $('#loadingViewSpinner').show();
+    $q.all({
+      version: SystemService.version(),
+      info: SystemService.info()
+    })
+    .then(function success(data) {
+      $scope.version = data.version;
+      $scope.info = data.info;
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to retrieve engine details');
+    })
+    .finally(function final() {
       $('#loadingViewSpinner').hide();
     });
-  }, function (e) {
-    Notifications.error('Failure', e, 'Unable to retrieve engine information');
-    $('#loadingViewSpinner').hide();
-  });
+  }
+
+  initView();
 }]);

app/components/endpoint/endpoint.html

@@ -3,7 +3,7 @@
     <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
   </rd-header-title>
   <rd-header-content>
-    <a ui-sref="endpoints">Endpoints</a> > <a ui-sref="endpoint({id: endpoint.Id})">{{ endpoint.Name }}</a>
+    <a ui-sref="endpoints">Endpoints</a> &gt; <a ui-sref="endpoint({id: endpoint.Id})">{{ endpoint.Name }}</a>
   </rd-header-content>
 </rd-header>
 
@@ -38,7 +38,7 @@
               <portainer-tooltip position="bottom" message="URL or IP address where exposed containers will be reachable. This field is optional and will default to the endpoint URL."></portainer-tooltip>
             </label>
             <div class="col-sm-9 col-lg-10">
-              <input ng-disabled="endpointType === 'local'" type="text" class="form-control" id="endpoint_public_url" ng-model="endpoint.PublicURL" placeholder="e.g. 10.0.0.10 or mydocker.mydomain.com">
+              <input type="text" class="form-control" id="endpoint_public_url" ng-model="endpoint.PublicURL" placeholder="e.g. 10.0.0.10 or mydocker.mydomain.com">
             </div>
           </div>
           <!-- !endpoint-public-url-input -->

app/components/endpointAccess/endpointAccess.html

@@ -3,7 +3,7 @@
     <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
   </rd-header-title>
   <rd-header-content>
-    <a ui-sref="endpoints">Endpoints</a> > <a ui-sref="endpoint({id: endpoint.Id})">{{ endpoint.Name }}</a> > Access management
+    <a ui-sref="endpoints">Endpoints</a> &gt; <a ui-sref="endpoint({id: endpoint.Id})">{{ endpoint.Name }}</a> &gt; Access management
   </rd-header-content>
 </rd-header>
 
@@ -41,137 +41,5 @@
   </div>
 </div>
 
-<div class="row" ng-if="endpoint">
-  <div class="col-sm-6">
-    <rd-widget>
-      <rd-widget-header classes="col-sm-12 col-md-6 nopadding" icon="fa-users" title="Users and groups">
-        <div class="pull-md-right pull-lg-right">
-          Items per page:
-          <select ng-model="state.pagination_count_accesses" ng-change="changePaginationCountAccesses()">
-            <option value="0">All</option>
-            <option value="10">10</option>
-            <option value="25">25</option>
-            <option value="50">50</option>
-            <option value="100">100</option>
-          </select>
-        </div>
-      </rd-widget-header>
-      <rd-widget-taskbar classes="col-sm-12 nopadding">
-        <div class="col-sm-12 col-md-6 nopadding">
-          <button class="btn btn-primary btn-sm" ng-click="authorizeAllAccesses()" ng-disabled="accesses.length ===  0 || filteredUsers.length === 0"><i class="fa fa-user-plus space-right" aria-hidden="true"></i>Authorize all</button>
-        </div>
-        <div class="col-sm-12 col-md-6 nopadding">
-          <input type="text" id="filter" ng-model="state.filterUsers" 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="endpoint.access({id: endpoint.Id})" ng-click="orderAccesses('Name')">
-                    Name
-                    <span ng-show="sortTypeAccesses == 'Name' && !sortReverseAccesses" class="glyphicon glyphicon-chevron-down"></span>
-                    <span ng-show="sortTypeAccesses == 'Name' && sortReverseAccesses" class="glyphicon glyphicon-chevron-up"></span>
-                  </a>
-                </th>
-                <th>
-                  <a ui-sref="endpoint.access({id: endpoint.Id})" ng-click="orderAccesses('Type')">
-                    Type
-                    <span ng-show="sortTypeAccesses == 'Type' && !sortReverseAccesses" class="glyphicon glyphicon-chevron-down"></span>
-                    <span ng-show="sortTypeAccesses == 'Type' && sortReverseAccesses" class="glyphicon glyphicon-chevron-up"></span>
-                  </a>
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr ng-click="authorizeAccess(user)" class="interactive" dir-paginate="user in accesses | filter:state.filterUsers | orderBy:sortTypeAccesses:sortReverseAccesses | itemsPerPage: state.pagination_count_accesses">
-                <td>{{ user.Name }}</td>
-                <td>
-                  <i class="fa" ng-class="user.Type === 'user' ? 'fa-user' : 'fa-users'" aria-hidden="true" style="margin-right: 2px;"></i>
-                  {{ user.Type }}
-                </td>
-              </tr>
-              <tr ng-if="!accesses">
-                <td colspan="2" class="text-center text-muted">Loading...</td>
-              </tr>
-              <tr ng-if="accesses.length === 0 || (accesses | filter:state.filterUsers | orderBy:sortTypeAccesses:sortReverseAccesses | itemsPerPage: state.pagination_count_accesses).length === 0">
-                <td colspan="2" class="text-center text-muted">No user or team available.</td>
-              </tr>
-            </tbody>
-          </table>
-          <div ng-if="accesses" class="pull-left pagination-controls">
-            <dir-pagination-controls></dir-pagination-controls>
-          </div>
-        </div>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-  <div class="col-sm-6">
-    <rd-widget>
-      <rd-widget-header classes="col-sm-12 col-md-6 nopadding" icon="fa-users" title="Authorized users and groups">
-        <div class="pull-md-right pull-lg-right">
-          Items per page:
-          <select ng-model="state.pagination_count_authorizedAccesses" ng-change="changePaginationCountAuthorizedAccesses()">
-            <option value="0">All</option>
-            <option value="10">10</option>
-            <option value="25">25</option>
-            <option value="50">50</option>
-            <option value="100">100</option>
-          </select>
-        </div>
-      </rd-widget-header>
-      <rd-widget-taskbar classes="col-sm-12 nopadding">
-        <div class="col-sm-12 col-md-6 nopadding">
-          <button class="btn btn-primary btn-sm" ng-click="unauthorizeAllAccesses()" ng-disabled="authorizedAccesses.length ===  0 || filteredAuthorizedUsers.length === 0"><i class="fa fa-user-times space-right" aria-hidden="true"></i>Deny all</button>
-        </div>
-        <div class="col-sm-12 col-md-6 nopadding">
-          <input type="text" id="filter" ng-model="state.filterAuthorizedUsers" 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="endpoint.access({id: endpoint.Id})" ng-click="orderAuthorizedAccesses('Name')">
-                    Name
-                    <span ng-show="sortTypeAuthorizedAccesses == 'Name' && !sortReverseAuthorizedAccesses" class="glyphicon glyphicon-chevron-down"></span>
-                    <span ng-show="sortTypeAuthorizedAccesses == 'Name' && sortReverseAuthorizedAccesses" class="glyphicon glyphicon-chevron-up"></span>
-                  </a>
-                </th>
-                <th>
-                  <a ui-sref="endpoint.access({id: endpoint.Id})" ng-click="orderAuthorizedAccesses('Type')">
-                    Type
-                    <span ng-show="sortTypeAuthorizedAccesses == 'Type' && !sortReverseAuthorizedAccesses" class="glyphicon glyphicon-chevron-down"></span>
-                    <span ng-show="sortTypeAuthorizedAccesses == 'Type' && sortReverseAuthorizedAccesses" class="glyphicon glyphicon-chevron-up"></span>
-                  </a>
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr ng-click="unauthorizeAccess(user)" class="interactive" pagination-id="table_authaccess" dir-paginate="user in authorizedAccesses | filter:state.filterAuthorizedUsers | orderBy:sortTypeAuthorizedAccesses:sortReverseAuthorizedAccesses | itemsPerPage: state.pagination_count_authorizedAccesses">
-                <td>{{ user.Name }}</td>
-                <td>
-                  <i class="fa" ng-class="user.Type === 'user' ? 'fa-user' : 'fa-users'" aria-hidden="true" style="margin-right: 2px;"></i>
-                  {{ user.Type }}
-                </td>
-              </tr>
-              <tr ng-if="!authorizedAccesses">
-                <td colspan="2" class="text-center text-muted">Loading...</td>
-              </tr>
-              <tr ng-if="authorizedAccesses.length === 0 || (authorizedAccesses | filter:state.filterAuthorizedUsers | orderBy:sortTypeAuthorizedAccesses:sortReverseAuthorizedAccesses | itemsPerPage: state.pagination_count_authorizedAccesses).length === 0">
-                <td colspan="2" class="text-center text-muted">No authorized user or team.</td>
-              </tr>
-            </tbody>
-          </table>
-          <div ng-if="authorizedAccesses" class="pull-left pagination-controls">
-            <dir-pagination-controls pagination-id="table_authaccess"></dir-pagination-controls>
-          </div>
-        </div>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>
+<por-access-management ng-if="endpoint" access-controlled-entity="endpoint" update-access="updateAccess(userAccesses, teamAccesses)">
+</por-access-management>

app/components/endpointAccess/endpointAccessController.js

@@ -1,177 +1,18 @@
 angular.module('endpointAccess', [])
-.controller('EndpointAccessController', ['$q', '$scope', '$state', '$stateParams', '$filter', 'EndpointService', 'UserService', 'TeamService', 'Pagination', 'Notifications',
-function ($q, $scope, $state, $stateParams, $filter, EndpointService, UserService, TeamService, Pagination, Notifications) {
+.controller('EndpointAccessController', ['$scope', '$stateParams', 'EndpointService', 'Notifications',
+function ($scope, $stateParams, EndpointService, Notifications) {
 
-  $scope.state = {
-    pagination_count_accesses: Pagination.getPaginationCount('endpoint_access_accesses'),
-    pagination_count_authorizedAccesses: Pagination.getPaginationCount('endpoint_access_authorizedAccesses')
-  };
-
-  $scope.sortTypeAccesses = 'Type';
-  $scope.sortReverseAccesses = false;
-
-  $scope.orderAccesses = function(sortType) {
-    $scope.sortReverseAccesses = ($scope.sortTypeAccesses === sortType) ? !$scope.sortReverseAccesses : false;
-    $scope.sortTypeAccesses = sortType;
-  };
-
-  $scope.changePaginationCountAccesses = function() {
-    Pagination.setPaginationCount('endpoint_access_accesses', $scope.state.pagination_count_accesses);
-  };
-
-  $scope.sortTypeAuthorizedAccesses = 'Type';
-  $scope.sortReverseAuthorizedAccesses = false;
-
-  $scope.orderAuthorizedAccesses = function(sortType) {
-    $scope.sortReverseAuthorizedAccesses = ($scope.sortTypeAuthorizedAccesses === sortType) ? !$scope.sortReverseAuthorizedAccesses : false;
-    $scope.sortTypeAuthorizedAccesses = sortType;
-  };
-
-  $scope.changePaginationCountAuthorizedAccesses = function() {
-    Pagination.setPaginationCount('endpoint_access_authorizedAccesses', $scope.state.pagination_count_authorizedAccesses);
-  };
-
-  $scope.authorizeAllAccesses = function() {
-    var authorizedUsers = [];
-    var authorizedTeams = [];
-    angular.forEach($scope.authorizedAccesses, function (a) {
-      if (a.Type === 'user') {
-        authorizedUsers.push(a.Id);
-      } else if (a.Type === 'team') {
-        authorizedTeams.push(a.Id);
-      }
-    });
-    angular.forEach($scope.accesses, function (a) {
-      if (a.Type === 'user') {
-        authorizedUsers.push(a.Id);
-      } else if (a.Type === 'team') {
-        authorizedTeams.push(a.Id);
-      }
-    });
-
-    EndpointService.updateAccess($stateParams.id, authorizedUsers, authorizedTeams)
-    .then(function success(data) {
-      $scope.authorizedAccesses = $scope.authorizedAccesses.concat($scope.accesses);
-      $scope.accesses = [];
-      Notifications.success('Endpoint accesses successfully updated');
-    })
-    .catch(function error(err) {
-      Notifications.error('Failure', err, 'Unable to update endpoint accesses');
-    });
-  };
-
-  $scope.unauthorizeAllAccesses = function() {
-    EndpointService.updateAccess($stateParams.id, [], [])
-    .then(function success(data) {
-      $scope.accesses = $scope.accesses.concat($scope.authorizedAccesses);
-      $scope.authorizedAccesses = [];
-      Notifications.success('Endpoint accesses successfully updated');
-    })
-    .catch(function error(err) {
-      Notifications.error('Failure', err, 'Unable to update endpoint accesses');
-    });
-  };
-
-  $scope.authorizeAccess = function(access) {
-    var authorizedUsers = [];
-    var authorizedTeams = [];
-    angular.forEach($scope.authorizedAccesses, function (a) {
-      if (a.Type === 'user') {
-        authorizedUsers.push(a.Id);
-      } else if (a.Type === 'team') {
-        authorizedTeams.push(a.Id);
-      }
-    });
-
-    if (access.Type === 'user') {
-      authorizedUsers.push(access.Id);
-    } else if (access.Type === 'team') {
-      authorizedTeams.push(access.Id);
-    }
-
-    EndpointService.updateAccess($stateParams.id, authorizedUsers, authorizedTeams)
-    .then(function success(data) {
-      removeAccessFromArray(access, $scope.accesses);
-      $scope.authorizedAccesses.push(access);
-      Notifications.success('Endpoint accesses successfully updated', access.Name);
-    })
-    .catch(function error(err) {
-      Notifications.error('Failure', err, 'Unable to update endpoint accesses');
-    });
-  };
-
-  $scope.unauthorizeAccess = function(access) {
-    var authorizedUsers = [];
-    var authorizedTeams = [];
-    angular.forEach($scope.authorizedAccesses, function (a) {
-      if (a.Type === 'user') {
-        authorizedUsers.push(a.Id);
-      } else if (a.Type === 'team') {
-        authorizedTeams.push(a.Id);
-      }
-    });
-
-    if (access.Type === 'user') {
-      _.remove(authorizedUsers, function(n) {
-        return n === access.Id;
-      });
-    } else if (access.Type === 'team') {
-      _.remove(authorizedTeams, function(n) {
-        return n === access.Id;
-      });
-    }
-
-    EndpointService.updateAccess($stateParams.id, authorizedUsers, authorizedTeams)
-    .then(function success(data) {
-      removeAccessFromArray(access, $scope.authorizedAccesses);
-      $scope.accesses.push(access);
-      Notifications.success('Endpoint accesses successfully updated', access.Name);
-    })
-    .catch(function error(err) {
-      Notifications.error('Failure', err, 'Unable to update endpoint accesses');
-    });
+  $scope.updateAccess = function(authorizedUsers, authorizedTeams) {
+    return EndpointService.updateAccess($stateParams.id, authorizedUsers, authorizedTeams);
   };
 
   function initView() {
     $('#loadingViewSpinner').show();
-    $q.all({
-      endpoint: EndpointService.endpoint($stateParams.id),
-      users: UserService.users(false),
-      teams: TeamService.teams()
-    })
+    EndpointService.endpoint($stateParams.id)
     .then(function success(data) {
-      $scope.endpoint = data.endpoint;
-      $scope.accesses = [];
-      var users = data.users.map(function (user) {
-        return new EndpointAccessUserViewModel(user);
-      });
-      var teams = data.teams.map(function (team) {
-        return new EndpointAccessTeamViewModel(team);
-      });
-      $scope.accesses = $scope.accesses.concat(users, teams);
-      $scope.authorizedAccesses = [];
-      angular.forEach($scope.endpoint.AuthorizedUsers, function(userID) {
-        for (var i = 0, l = $scope.accesses.length; i < l; i++) {
-          if ($scope.accesses[i].Type === 'user' && $scope.accesses[i].Id === userID) {
-            $scope.authorizedAccesses.push($scope.accesses[i]);
-            $scope.accesses.splice(i, 1);
-            return;
-          }
-        }
-      });
-      angular.forEach($scope.endpoint.AuthorizedTeams, function(teamID) {
-        for (var i = 0, l = $scope.accesses.length; i < l; i++) {
-          if ($scope.accesses[i].Type === 'team' && $scope.accesses[i].Id === teamID) {
-            $scope.authorizedAccesses.push($scope.accesses[i]);
-            $scope.accesses.splice(i, 1);
-            return;
-          }
-        }
-      });
+      $scope.endpoint = data;
     })
     .catch(function error(err) {
-      $scope.accesses = [];
-      $scope.authorizedAccesses = [];
       Notifications.error('Failure', err, 'Unable to retrieve endpoint details');
     })
     .finally(function final(){
@@ -179,14 +20,5 @@ function ($q, $scope, $state, $stateParams, $filter, EndpointService, UserServic
     });
   }
 
-  function removeAccessFromArray(access, accesses) {
-    for (var i = 0, l = accesses.length; i < l; i++) {
-      if (access.Type === accesses[i].Type && access.Id === accesses[i].Id) {
-        accesses.splice(i, 1);
-        return;
-      }
-    }
-  }
-
   initView();
 }]);

app/components/endpoints/endpoints.html

@@ -14,8 +14,11 @@
       <rd-widget-header icon="fa-exclamation-triangle" title="Endpoint management is not available">
       </rd-widget-header>
       <rd-widget-body>
-        <span class="small text-muted">Portainer has been started using the <code>--external-endpoints</code> flag. Endpoint management via the UI is disabled. You can still manage endpoint access.</span>
-      </rd-wigdet-body>
+        <span class="small text-muted">Portainer has been started using the <code>--external-endpoints</code> flag.
+          Endpoint management via the UI is disabled.
+          <span ng-if="applicationState.application.authentication">You can still manage endpoint access.</span>
+        </span>
+      </rd-widget-body>
     </rd-widget>
   </div>
 </div>
@@ -183,12 +186,7 @@
                 <td>{{ endpoint.URL | stripprotocol }}</td>
                 <td>
                   <span ng-if="applicationState.application.endpointManagement">
-                    <span ng-if="endpoint.Id !== activeEndpointID">
-                      <a ui-sref="endpoint({id: endpoint.Id})"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit</a>
-                    </span>
-                    <span class="small text-muted" ng-if="endpoint.Id === activeEndpointID">
-                      <i class="fa fa-lock" aria-hidden="true"></i> You cannot edit the active endpoint
-                    </span>
+                    <a ui-sref="endpoint({id: endpoint.Id})"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit</a>
                   </span>
                   <span ng-if="applicationState.application.authentication">
                     <a ui-sref="endpoint.access({id: endpoint.Id})"><i class="fa fa-users" aria-hidden="true" style="margin-left: 7px;"></i> Manage access</a>
@@ -208,6 +206,6 @@
           </div>
         </div>
       </rd-widget-body>
-    <rd-widget>
+    </rd-widget>
   </div>
 </div>

app/components/endpoints/endpointsController.js

@@ -101,7 +101,6 @@ function ($scope, $state, EndpointService, EndpointProvider, Notifications, Pagi
     EndpointService.endpoints()
     .then(function success(data) {
       $scope.endpoints = data;
-      $scope.activeEndpointID = EndpointProvider.endpointID();
     })
     .catch(function error(err) {
       Notifications.error('Failure', err, 'Unable to retrieve endpoints');

app/components/events/events.html

@@ -69,6 +69,6 @@
           </div>
         </div>
       </rd-widget-body>
-    <rd-widget>
+    </rd-widget>
   </div>
 </div>

app/components/events/eventsController.js

@@ -1,6 +1,6 @@
 angular.module('events', [])
-.controller('EventsController', ['$scope', 'Notifications', 'Events', 'Pagination',
-function ($scope, Notifications, Events, Pagination) {
+.controller('EventsController', ['$scope', 'Notifications', 'SystemService', 'Pagination',
+function ($scope, Notifications, SystemService, Pagination) {
   $scope.state = {};
   $scope.state.pagination_count = Pagination.getPaginationCount('events');
   $scope.sortType = 'Time';
@@ -15,18 +15,22 @@ function ($scope, Notifications, Events, Pagination) {
     Pagination.setPaginationCount('events', $scope.state.pagination_count);
   };
 
-  var from = moment().subtract(24, 'hour').unix();
-  var to = moment().unix();
+  function initView() {
+    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').show();
+    SystemService.events(from, to)
+    .then(function success(data) {
+      $scope.events = data;
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to load events');
+    })
+    .finally(function final() {
+      $('#loadEventsSpinner').hide();
     });
-    $('#loadEventsSpinner').hide();
-  },
-  function (e) {
-    $('#loadEventsSpinner').hide();
-    Notifications.error('Failure', e, 'Unable to load events');
-  });
+  }
+
+  initView();
 }]);

app/components/image/image.html

@@ -3,7 +3,7 @@
     <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
   </rd-header-title>
   <rd-header-content>
-    <a ui-sref="images">Images</a> > <a ui-sref="image({id: image.Id})">{{ image.Id }}</a>
+    <a ui-sref="images">Images</a> &gt; <a ui-sref="image({id: image.Id})">{{ image.Id }}</a>
   </rd-header-content>
 </rd-header>
 
@@ -54,21 +54,11 @@
       <rd-widget-header icon="fa-tag" title="Tag the image"></rd-widget-header>
       <rd-widget-body>
         <form class="form-horizontal">
-          <!-- name-and-registry-inputs -->
+          <!-- image-and-registry -->
           <div class="form-group">
-            <label for="image_name" class="col-sm-1 control-label text-left">Name</label>
-            <div class="col-sm-11 col-md-6">
-              <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-2 margin-sm-top control-label text-left">
-              Registry
-              <portainer-tooltip position="bottom" message="A registry to pull the image from. Leave empty to use the official Docker registry."></portainer-tooltip>
-            </label>
-            <div class="col-sm-10 col-md-3 margin-sm-top">
-              <input type="text" class="form-control" ng-model="config.Registry" id="image_registry" placeholder="e.g. myregistry.mydomain">
-            </div>
+            <por-image-registry image="formValues.Image" registry="formValues.Registry"></por-image-registry>
           </div>
-          <!-- !name-and-registry-inputs -->
+          <!-- !image-and-registry -->
           <!-- tag-note -->
           <div class="form-group">
             <div class="col-sm-12">
@@ -78,7 +68,7 @@
           <!-- !tag-note -->
           <div class="form-group">
             <div class="col-sm-12">
-              <button type="button" class="btn btn-primary btn-sm" ng-disabled="!config.Image" ng-click="tagImage()">Tag</button>
+              <button type="button" class="btn btn-primary btn-sm" ng-disabled="!formValues.Image" ng-click="tagImage()">Tag</button>
               <i id="pullImageSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
             </div>
           </div>
@@ -177,3 +167,58 @@
     </rd-widget>
   </div>
 </div>
+
+<div class="row" ng-if="history.length > 0">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-clone" title="Image layers"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table id="image-layers" class="table">
+          <thead>
+            <th>
+              <a ng-click="order('Size')">
+                Size
+                <span ng-show="sortType == 'Size' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                <span ng-show="sortType == 'Size' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+              </a>
+            </th>
+            <th>
+              <a ng-click="order('CreatedBy')">
+                Layer
+                <span ng-show="sortType == 'CreatedBy' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                <span ng-show="sortType == 'CreatedBy' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+              </a>
+            </th>
+          </thead>
+          <tbody>
+            <tr ng-repeat="layer in history | orderBy:sortType:sortReverse">
+              <td style="white-space:nowrap;">
+                {{ layer.Size | humansize }}
+              </td>
+              <td class="expand">
+                <div ng-if="layer.CreatedBy.length > 130">
+                  <span id="layer-command-{{$index}}-full" style="display: none">
+                    {{ layer.CreatedBy | imagelayercommand }}
+                  </span>
+                  <span id="layer-command-{{$index}}-short">
+                    {{ layer.CreatedBy | imagelayercommand | truncate:130 }}
+                    <span ng-if="layer.CreatedBy.length > 130" style="margin-left: 5px;">
+                      <a id="layer-command-expander{{$index}}" class="btn" ng-click='toggleLayerCommand($index)'>
+                        <i class="fa fa-plus-circle" aria-hidden="true"></i>
+                      </a>
+                    </span>
+                  </span>
+                </div>
+                <div ng-if="layer.CreatedBy.length <= 130">
+                  <span id="layer-command-{{$index}}-full">
+                    {{ layer.CreatedBy | imagelayercommand }}
+                  </span>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/components/image/imageController.js

@@ -1,17 +1,31 @@
 angular.module('image', [])
-.controller('ImageController', ['$scope', '$stateParams', '$state', 'ImageService', 'Notifications',
-function ($scope, $stateParams, $state, ImageService, Notifications) {
-	$scope.config = {
+.controller('ImageController', ['$scope', '$stateParams', '$state', '$timeout', 'ImageService', 'RegistryService', 'Notifications',
+function ($scope, $stateParams, $state, $timeout, ImageService, RegistryService, Notifications) {
+	$scope.formValues = {
 		Image: '',
 		Registry: ''
 	};
 
+	$scope.sortType = 'Size';
+  $scope.sortReverse = true;
+
+	$scope.order = function(sortType) {
+    $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
+    $scope.sortType = sortType;
+  };
+
+	$scope.toggleLayerCommand = function(layerId) {
+		$('#layer-command-expander'+layerId+' span').toggleClass('glyphicon-plus-sign glyphicon-minus-sign');
+		$('#layer-command-'+layerId+'-short').toggle();
+		$('#layer-command-'+layerId+'-full').toggle();
+	};
+
 	$scope.tagImage = function() {
 		$('#loadingViewSpinner').show();
-		var image = $scope.config.Image;
-		var registry = $scope.config.Registry;
+		var image = $scope.formValues.Image;
+		var registry = $scope.formValues.Registry;
 
-		ImageService.tagImage($stateParams.id, image, registry)
+		ImageService.tagImage($stateParams.id, image, registry.URL)
 		.then(function success(data) {
 			Notifications.success('Image successfully tagged');
 			$state.go('image', {id: $stateParams.id}, {reload: true});
@@ -24,28 +38,35 @@ function ($scope, $stateParams, $state, ImageService, Notifications) {
 		});
 	};
 
-	$scope.pushTag = function(tag) {
+	$scope.pushTag = function(repository) {
 		$('#loadingViewSpinner').show();
-		ImageService.pushImage(tag)
-		.then(function success() {
-			Notifications.success('Image successfully pushed');
+		RegistryService.retrieveRegistryFromRepository(repository)
+		.then(function success(data) {
+			var registry = data;
+			return ImageService.pushImage(repository, registry);
+		})
+		.then(function success(data) {
+			Notifications.success('Image successfully pushed', repository);
 		})
 		.catch(function error(err) {
-			Notifications.error('Failure', err, 'Unable to push image tag');
+			Notifications.error('Failure', err, 'Unable to push image to repository');
 		})
 		.finally(function final() {
 			$('#loadingViewSpinner').hide();
 		});
 	};
 
-	$scope.pullTag = function(tag) {
+	$scope.pullTag = function(repository) {
 		$('#loadingViewSpinner').show();
-
-		ImageService.pullTag(tag)
+		RegistryService.retrieveRegistryFromRepository(repository)
 		.then(function success(data) {
-			Notifications.success('Image successfully pulled', tag);
+			var registry = data;
+			return ImageService.pullImage(repository, registry, false);
 		})
-		.catch(function error(err){
+		.then(function success(data) {
+			Notifications.success('Image successfully pulled', repository);
+		})
+		.catch(function error(err) {
 			Notifications.error('Failure', err, 'Unable to pull image');
 		})
 		.finally(function final() {
@@ -53,15 +74,15 @@ function ($scope, $stateParams, $state, ImageService, Notifications) {
 		});
 	};
 
-	$scope.removeTag = function(id) {
+	$scope.removeTag = function(repository) {
 		$('#loadingViewSpinner').show();
-		ImageService.deleteImage(id, false)
+		ImageService.deleteImage(repository, false)
 		.then(function success() {
 			if ($scope.image.RepoTags.length === 1) {
-				Notifications.success('Image successfully deleted', id);
+				Notifications.success('Image successfully deleted', repository);
 				$state.go('images', {}, {reload: true});
 			} else {
-				Notifications.success('Tag successfully deleted', id);
+				Notifications.success('Tag successfully deleted', repository);
 				$state.go('image', {id: $stateParams.id}, {reload: true});
 			}
 		})
@@ -101,6 +122,18 @@ function ($scope, $stateParams, $state, ImageService, Notifications) {
 		.finally(function final() {
 			$('#loadingViewSpinner').hide();
 		});
+
+		$('#loadingViewSpinner').show();
+		ImageService.history($stateParams.id)
+		.then(function success(data) {
+			$scope.history = data;
+		})
+		.catch(function error(err) {
+			Notifications.error('Failure', err, 'Unable to retrieve image history');
+		})
+		.finally(function final() {
+			$('#loadingViewSpinner').hide();
+		});
 	}
 
 	retrieveImageDetails();

app/components/images/images.html

@@ -15,21 +15,11 @@
       </rd-widget-header>
       <rd-widget-body>
         <form class="form-horizontal">
-          <!-- name-and-registry-inputs -->
+          <!-- image-and-registry -->
           <div class="form-group">
-            <label for="image_name" class="col-sm-1 control-label text-left">Name</label>
-            <div class="col-sm-11 col-md-6">
-              <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-2 margin-sm-top control-label text-left">
-              Registry
-              <portainer-tooltip position="bottom" message="A registry to pull the image from. Leave empty to use the official Docker registry."></portainer-tooltip>
-            </label>
-            <div class="col-sm-10 col-md-3 margin-sm-top">
-              <input type="text" class="form-control" ng-model="config.Registry" id="image_registry" placeholder="e.g. myregistry.mydomain">
-            </div>
+            <por-image-registry image="formValues.Image" registry="formValues.Registry"></por-image-registry>
           </div>
-          <!-- !name-and-registry-inputs -->
+          <!-- !image-and-registry -->
           <!-- tag-note -->
           <div class="form-group">
             <div class="col-sm-12">
@@ -39,7 +29,7 @@
           <!-- !tag-note -->
           <div class="form-group">
             <div class="col-sm-12">
-              <button type="button" class="btn btn-primary btn-sm" ng-disabled="!config.Image" ng-click="pullImage()">Pull</button>
+              <button type="button" class="btn btn-primary btn-sm" ng-disabled="!formValues.Image" ng-click="pullImage()">Pull</button>
               <i id="pullImageSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
             </div>
           </div>
@@ -80,6 +70,17 @@
         <div class="pull-right">
           <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
         </div>
+        <span class="btn-group btn-group-sm pull-right" style="margin-right: 20px;" ng-if="applicationState.endpoint.mode.provider !== 'DOCKER_SWARM'">
+          <label class="btn btn-primary" ng-model="state.containersCountFilter" uib-btn-radio="undefined">
+            All
+          </label>
+          <label class="btn btn-primary" ng-model="state.containersCountFilter" uib-btn-radio="'!' + 0">
+            Used
+          </label>
+          <label class="btn btn-primary" ng-model="state.containersCountFilter" uib-btn-radio="0">
+            Unused
+          </label>
+        </span>
       </rd-widget-taskbar>
       <rd-widget-body classes="no-padding">
         <div class="table-responsive">
@@ -120,9 +121,11 @@
               </tr>
             </thead>
             <tbody>
-              <tr dir-paginate="image in (state.filteredImages = (images | filter:state.filter | orderBy:sortType:sortReverse | itemsPerPage: state.pagination_count))">
+              <tr dir-paginate="image in (state.filteredImages = (images | filter:{ Containers: state.containersCountFilter } | filter:state.filter | orderBy:sortType:sortReverse | itemsPerPage: state.pagination_count))">
                 <td><input type="checkbox" ng-model="image.Checked" ng-change="selectItem(image)" /></td>
-                <td><a ui-sref="image({id: image.Id})">{{ image.Id|truncate:20}}</a></td>
+                <td>
+                  <a class="monospaced" ui-sref="image({id: image.Id})">{{ image.Id|truncate:20}}</a>
+                  <span style="margin-left: 10px;" class="label label-warning image-tag" ng-if="::image.Containers === 0 && applicationState.endpoint.mode.provider !== 'DOCKER_SWARM'">Unused</span></td>
                 <td>
                   <span class="label label-primary image-tag" ng-repeat="tag in (image|repotags)">{{ tag }}</span>
                 </td>
@@ -142,6 +145,6 @@
           </div>
         </div>
       </rd-widget-body>
-      <rd-widget>
-      </div>
-    </div>
+    </rd-widget>
+  </div>
+</div>

app/components/images/imagesController.js

@@ -7,7 +7,7 @@ function ($scope, $state, ImageService, Notifications, Pagination, ModalService)
   $scope.sortReverse = true;
   $scope.state.selectedItemCount = 0;
 
-  $scope.config = {
+  $scope.formValues = {
     Image: '',
     Registry: ''
   };
@@ -40,10 +40,11 @@ function ($scope, $state, ImageService, Notifications, Pagination, ModalService)
 
   $scope.pullImage = function() {
     $('#pullImageSpinner').show();
-    var image = $scope.config.Image;
-    var registry = $scope.config.Registry;
-    ImageService.pullImage(image, registry)
+    var image = $scope.formValues.Image;
+    var registry = $scope.formValues.Registry;
+    ImageService.pullImage(image, registry, false)
     .then(function success(data) {
+      Notifications.success('Image successfully pulled', image);
       $state.reload();
     })
     .catch(function error(err) {
@@ -92,7 +93,8 @@ function ($scope, $state, ImageService, Notifications, Pagination, ModalService)
 
   function fetchImages() {
     $('#loadImagesSpinner').show();
-    ImageService.images()
+    var endpointProvider = $scope.applicationState.endpoint.mode.provider;
+    ImageService.images(endpointProvider !== 'DOCKER_SWARM')
     .then(function success(data) {
       $scope.images = data;
     })

app/components/network/network.html

@@ -3,7 +3,7 @@
     <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
   </rd-header-title>
   <rd-header-content>
-    <a ui-sref="networks">Networks</a> > <a ui-sref="network({id: network.Id})">{{ network.Name }}</a>
+    <a ui-sref="networks">Networks</a> &gt; <a ui-sref="network({id: network.Id})">{{ network.Name }}</a>
   </rd-header-content>
 </rd-header>
 

app/components/networks/networks.html

@@ -134,7 +134,7 @@
               <tr dir-paginate="network in ( state.filteredNetworks = (networks | filter:state.filter | orderBy:sortType:sortReverse | itemsPerPage: state.pagination_count))">
                 <td><input type="checkbox" ng-model="network.Checked" ng-change="selectItem(network)"/></td>
                 <td><a ui-sref="network({id: network.Id})">{{ network.Name|truncate:40}}</a></td>
-                <td>{{ network.Id }}</td>
+                <td class="monospaced">{{ network.Id|truncate:20 }}</td>
                 <td>{{ network.Scope }}</td>
                 <td>{{ network.Driver }}</td>
                 <td>{{ network.IPAM.Driver }}</td>
@@ -154,6 +154,6 @@
           </div>
         </div>
       </rd-widget-body>
-    <rd-widget>
+    </rd-widget>
   </div>
 </div>

app/components/node/node.html

@@ -5,7 +5,7 @@
     </a>
   </rd-header-title>
   <rd-header-content>
-    <a ui-sref="swarm">Swarm nodes</a> > <a ui-sref="node({id: node.Id})">{{ node.Hostname }}</a>
+    <a ui-sref="swarm">Swarm nodes</a> &gt; <a ui-sref="node({id: node.Id})">{{ node.Hostname }}</a>
   </rd-header-content>
 </rd-header>
 

app/components/registries/registries.html

@@ -0,0 +1,150 @@
+<rd-header>
+  <rd-header-title title="Registries">
+    <a data-toggle="tooltip" title="Refresh" ui-sref="registries" ui-sref-opts="{reload: true}">
+      <i class="fa fa-refresh" aria-hidden="true"></i>
+    </a>
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px;"></i>
+  </rd-header-title>
+  <rd-header-content>Registry management</rd-header-content>
+</rd-header>
+
+<div class="row" ng-if="dockerhub">
+  <div class="col-sm-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-database" title="DockerHub">
+      </rd-widget-header>
+      <rd-widget-body>
+        <form class="form-horizontal">
+          <!-- note -->
+          <div class="form-group">
+            <span class="col-sm-12 text-muted small">
+              The DockerHub registry can be used by any user. You can specify the credentials that will be used to push &amp; pull images here.
+            </span>
+          </div>
+          <!-- !note -->
+          <!-- authentication-checkbox -->
+          <div class="form-group">
+            <div class="col-sm-12">
+              <label for="registry_auth" class="control-label text-left">
+                Authentication
+                <portainer-tooltip position="bottom" message="Enable this option if you need to specify credentials to connect to push/pull private images."></portainer-tooltip>
+              </label>
+              <label class="switch" style="margin-left: 20px;">
+                <input type="checkbox" ng-model="dockerhub.Authentication"><i></i>
+              </label>
+            </div>
+          </div>
+          <!-- !authentication-checkbox -->
+          <!-- authentication-credentials -->
+          <div ng-if="dockerhub.Authentication">
+            <!-- credentials-user -->
+            <div class="form-group">
+              <label for="hub_username" class="col-sm-3 col-lg-2 control-label text-left">Username</label>
+              <div class="col-sm-9 col-lg-10">
+                <input type="text" class="form-control" id="hub_username" ng-model="dockerhub.Username">
+              </div>
+            </div>
+            <!-- !credentials-user -->
+            <!-- credentials-password -->
+            <div class="form-group">
+              <label for="hub_password" class="col-sm-3 col-lg-2 control-label text-left">Password</label>
+              <div class="col-sm-9 col-lg-10">
+                <input type="password" class="form-control" id="hub_password" ng-model="dockerhub.Password">
+              </div>
+            </div>
+            <!-- !credentials-password -->
+          </div>
+          <!-- !authentication-credentials -->
+          <div class="form-group">
+            <div class="col-sm-12">
+              <button type="button" class="btn btn-primary btn-sm" ng-disabled="dockerhub.Authentication && (!dockerhub.Username || !dockerhub.Password)" ng-click="updateDockerHub()">Update</button>
+              <i id="updateDockerhubSpinner" 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-sm-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-database" title="Available registries">
+        <div class="pull-right">
+          Items per page:
+          <select ng-model="state.pagination_count" ng-change="changePaginationCount()">
+            <option value="0">All</option>
+            <option value="10">10</option>
+            <option value="25">25</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+          </select>
+        </div>
+      </rd-widget-header>
+      <rd-widget-taskbar classes="col-lg-12">
+        <div class="pull-left">
+          <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button>
+          <a class="btn btn-primary" type="button" ui-sref="actions.create.registry"><i class="fa fa-plus space-right" aria-hidden="true"></i>Add registry</a>
+        </div>
+        <div class="pull-right">
+          <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
+        </div>
+      </rd-widget-taskbar>
+      <rd-widget-body classes="no-padding">
+        <div class="table-responsive">
+          <table class="table table-hover">
+            <thead>
+              <tr>
+                <th>
+                  <input type="checkbox" ng-model="allSelected" ng-change="selectItems(allSelected)" />
+                </th>
+                <th>
+                  <a ui-sref="registries" ng-click="order('Name')">
+                    Name
+                    <span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
+                <th>
+                  <a ui-sref="registries" ng-click="order('URL')">
+                    URL
+                    <span ng-show="sortType == 'URL' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'URL' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr dir-paginate="registry in (state.filteredRegistries = (registries | filter:state.filter | orderBy:sortType:sortReverse | itemsPerPage: state.pagination_count))">
+                <td><input type="checkbox" ng-model="registry.Checked" ng-change="selectItem(registry)" /></td>
+                <td>
+                  <a ui-sref="registry({id: registry.Id})">{{ registry.Name }}</a>
+                  <span ng-if="registry.Authentication" style="margin-left: 5px;">
+                    <i class="fa fa-shield" aria-hidden="true" tooltip-placement="bottom" tooltip-class="portainer-tooltip" uib-tooltip="Authentication is enabled for this registry."></i>
+                  </span>
+                </td>
+                <td>{{ registry.URL }}</td>
+                <td>
+                  <span ng-if="applicationState.application.authentication">
+                    <a ui-sref="registry.access({id: registry.Id})"><i class="fa fa-users" aria-hidden="true" style="margin-left: 7px;"></i> Manage access</a>
+                  </span>
+                </td>
+              </tr>
+              <tr ng-if="!registries">
+                <td colspan="4" class="text-center text-muted">Loading...</td>
+              </tr>
+              <tr ng-if="registries.length == 0">
+                <td colspan="4" class="text-center text-muted">No registries available.</td>
+              </tr>
+            </tbody>
+          </table>
+          <div ng-if="registries" class="pull-left pagination-controls">
+            <dir-pagination-controls></dir-pagination-controls>
+          </div>
+        </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/components/registries/registriesController.js

@@ -0,0 +1,113 @@
+angular.module('registries', [])
+.controller('RegistriesController', ['$q', '$scope', '$state', 'RegistryService', 'DockerHubService', 'ModalService', 'Notifications', 'Pagination',
+function ($q, $scope, $state, RegistryService, DockerHubService, ModalService, Notifications, Pagination) {
+
+  $scope.state = {
+    selectedItemCount: 0,
+    pagination_count: Pagination.getPaginationCount('registries')
+  };
+  $scope.sortType = 'Name';
+  $scope.sortReverse = true;
+
+  $scope.updateDockerHub = function() {
+    $('#updateDockerhubSpinner').show();
+    var dockerhub = $scope.dockerhub;
+    DockerHubService.update(dockerhub)
+    .then(function success(data) {
+      Notifications.success('DockerHub registry updated');
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to update DockerHub details');
+    })
+    .finally(function final() {
+      $('#updateDockerhubSpinner').hide();
+    });
+  };
+
+  $scope.order = function(sortType) {
+    $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
+    $scope.sortType = sortType;
+  };
+
+  $scope.changePaginationCount = function() {
+    Pagination.setPaginationCount('endpoints', $scope.state.pagination_count);
+  };
+
+  $scope.selectItems = function (allSelected) {
+    angular.forEach($scope.state.filteredRegistries, function (registry) {
+      if (registry.Checked !== allSelected) {
+        registry.Checked = allSelected;
+        $scope.selectItem(registry);
+      }
+    });
+  };
+
+  $scope.selectItem = function (item) {
+    if (item.Checked) {
+      $scope.state.selectedItemCount++;
+    } else {
+      $scope.state.selectedItemCount--;
+    }
+  };
+
+  $scope.removeAction = function() {
+    ModalService.confirmDeletion(
+      'Do you want to remove the selected registries?',
+      function onConfirm(confirmed) {
+        if(!confirmed) { return; }
+        removeRegistries();
+      }
+    );
+  };
+
+  function removeRegistries() {
+    $('#loadingViewSpinner').show();
+    var counter = 0;
+    var complete = function () {
+      counter = counter - 1;
+      if (counter === 0) {
+        $('#loadingViewSpinner').hide();
+      }
+    };
+
+    var registries = $scope.registries;
+    angular.forEach(registries, function (registry) {
+      if (registry.Checked) {
+        counter = counter + 1;
+        RegistryService.deleteRegistry(registry.Id)
+        .then(function success(data) {
+          var index = registries.indexOf(registry);
+          registries.splice(index, 1);
+          Notifications.success('Registry deleted', registry.Name);
+        })
+        .catch(function error(err) {
+          Notifications.error('Failure', err, 'Unable to remove registry');
+        })
+        .finally(function final() {
+          complete();
+        });
+      }
+    });
+  }
+
+  function initView() {
+    $('#loadingViewSpinner').show();
+    $q.all({
+      registries: RegistryService.registries(),
+      dockerhub: DockerHubService.dockerhub()
+    })
+    .then(function success(data) {
+      $scope.registries = data.registries;
+      $scope.dockerhub = data.dockerhub;
+    })
+    .catch(function error(err) {
+      $scope.registries = [];
+      Notifications.error('Failure', err, 'Unable to retrieve registries');
+    })
+    .finally(function final() {
+      $('#loadingViewSpinner').hide();
+    });
+  }
+
+  initView();
+}]);

app/components/registry/registry.html

@@ -0,0 +1,78 @@
+<rd-header>
+  <rd-header-title title="Registry details">
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
+  </rd-header-title>
+  <rd-header-content>
+    <a ui-sref="registries">Registries</a> &gt; <a ui-sref="registry({id: registry.Id})">{{ registry.Name }}</a>
+  </rd-header-content>
+</rd-header>
+
+<div class="row">
+  <div class="col-sm-12">
+    <rd-widget>
+      <rd-widget-body>
+        <form class="form-horizontal">
+          <!-- name-input -->
+          <div class="form-group">
+            <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
+            <div class="col-sm-9 col-lg-10">
+              <input type="text" class="form-control" id="registry_name" ng-model="registry.Name" placeholder="e.g. my-registry">
+            </div>
+          </div>
+          <!-- !name-input -->
+          <!-- registry-url-input -->
+          <div class="form-group">
+            <label for="registry_url" class="col-sm-3 col-lg-2 control-label text-left">
+              Registry URL
+              <portainer-tooltip position="bottom" message="URL or IP address of a Docker registry."></portainer-tooltip>
+            </label>
+            <div class="col-sm-9 col-lg-10">
+              <input type="text" class="form-control" id="registry_url" ng-model="registry.URL" placeholder="e.g. 10.0.0.10:5000 or myregistry.domain.tld">
+            </div>
+          </div>
+          <!-- !registry-url-input -->
+          <!-- authentication-checkbox -->
+          <div class="form-group">
+            <div class="col-sm-12">
+              <label for="registry_auth" class="control-label text-left">
+                Authentication
+                <portainer-tooltip position="bottom" message="Enable this option if you need to specify credentials to connect to this registry."></portainer-tooltip>
+              </label>
+              <label class="switch" style="margin-left: 20px;">
+                <input type="checkbox" ng-model="registry.Authentication"><i></i>
+              </label>
+            </div>
+          </div>
+          <!-- !authentication-checkbox -->
+          <!-- authentication-credentials -->
+          <div ng-if="registry.Authentication">
+            <!-- credentials-user -->
+            <div class="form-group">
+              <label for="credentials_username" class="col-sm-3 col-lg-2 control-label text-left">Username</label>
+              <div class="col-sm-9 col-lg-10">
+                <input type="text" class="form-control" id="credentials_username" ng-model="registry.Username">
+              </div>
+            </div>
+            <!-- !credentials-user -->
+            <!-- credentials-password -->
+            <div class="form-group">
+              <label for="credentials_password" class="col-sm-3 col-lg-2 control-label text-left">Password</label>
+              <div class="col-sm-9 col-lg-10">
+                <input type="password" class="form-control" id="credentials_password" ng-model="registry.Password">
+              </div>
+            </div>
+            <!-- !credentials-password -->
+          </div>
+          <!-- !authentication-credentials -->
+          <div class="form-group">
+            <div class="col-sm-12">
+              <button type="button" class="btn btn-primary btn-sm" ng-disabled="!registry.Name || !registry.URL || (registry.Authentication && (!registry.Username || !registry.Password))" ng-click="updateRegistry()">Update registry</button>
+              <a type="button" class="btn btn-default btn-sm" ui-sref="registries">Cancel</a>
+              <i id="updateRegistrySpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
+            </div>
+          </div>
+        </form>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/components/registry/registryController.js

@@ -0,0 +1,37 @@
+angular.module('registry', [])
+.controller('RegistryController', ['$scope', '$state', '$stateParams', '$filter', 'RegistryService', 'Notifications',
+function ($scope, $state, $stateParams, $filter, RegistryService, Notifications) {
+
+  $scope.updateRegistry = function() {
+    $('#updateRegistrySpinner').show();
+    var registry = $scope.registry;
+    RegistryService.updateRegistry(registry)
+    .then(function success(data) {
+      Notifications.success('Registry successfully updated');
+      $state.go('registries');
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to update registry');
+    })
+    .finally(function final() {
+      $('#updateRegistrySpinner').hide();
+    });
+  };
+
+  function initView() {
+    $('#loadingViewSpinner').show();
+    var registryID = $stateParams.id;
+    RegistryService.registry(registryID)
+    .then(function success(data) {
+      $scope.registry = data;
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to retrieve registry details');
+    })
+    .finally(function final() {
+      $('#loadingViewSpinner').hide();
+    });
+  }
+
+  initView();
+}]);

app/components/registryAccess/registryAccess.html

@@ -0,0 +1,45 @@
+<rd-header>
+  <rd-header-title title="Registry access">
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
+  </rd-header-title>
+  <rd-header-content>
+    <a ui-sref="registries">Registries</a> &gt; <a ui-sref="registry({id: registry.Id})">{{ registry.Name }}</a> &gt; Access management
+  </rd-header-content>
+</rd-header>
+
+<div class="row" ng-if="registry">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-plug" title="Registry"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table">
+          <tbody>
+            <tr>
+              <td>Name</td>
+              <td>
+                {{ registry.Name }}
+              </td>
+            </tr>
+            <tr>
+              <td>URL</td>
+              <td>
+                {{ registry.URL }}
+              </td>
+            </tr>
+            <tr>
+              <td colspan="2">
+                <span class="small text-muted">
+                  You can select which user or team can access this registry by moving them to the authorized accesses table. Simply click
+                  on a user or team entry to move it from one table to the other.
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<por-access-management ng-if="registry" access-controlled-entity="registry" update-access="updateAccess(userAccesses, teamAccesses)">
+</por-access-management>

app/components/registryAccess/registryAccessController.js

@@ -0,0 +1,24 @@
+angular.module('registryAccess', [])
+.controller('RegistryAccessController', ['$scope', '$stateParams', 'RegistryService', 'Notifications',
+function ($scope, $stateParams, RegistryService, Notifications) {
+
+  $scope.updateAccess = function(authorizedUsers, authorizedTeams) {
+    return RegistryService.updateAccess($stateParams.id, authorizedUsers, authorizedTeams);
+  };
+
+  function initView() {
+    $('#loadingViewSpinner').show();
+    RegistryService.registry($stateParams.id)
+    .then(function success(data) {
+      $scope.registry = data;
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to retrieve registry details');
+    })
+    .finally(function final(){
+      $('#loadingViewSpinner').hide();
+    });
+  }
+
+  initView();
+}]);

app/components/secret/secret.html

@@ -6,7 +6,7 @@
     <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
   </rd-header-title>
   <rd-header-content>
-    <a ui-sref="secrets">Secrets</a> > <a ui-sref="secret({id: secret.Id})">{{ secret.Name }}</a>
+    <a ui-sref="secrets">Secrets</a> &gt; <a ui-sref="secret({id: secret.Id})">{{ secret.Name }}</a>
   </rd-header-content>
 </rd-header>
 

app/components/secrets/secrets.html

@@ -63,6 +63,6 @@
           </div>
         </div>
       </rd-widget-body>
-    <rd-widget>
+    </rd-widget>
   </div>
 </div>

app/components/service/includes/constraints.html

@@ -1,4 +1,4 @@
-<div ng-if="service.ServiceConstraints">
+<div ng-if="service.ServiceConstraints" id="service-placement-constraints">
   <rd-widget>
     <rd-widget-header icon="fa-tasks" title="Placement constraints">
       <div class="nopadding">

app/components/service/includes/containerlabels.html

@@ -1,4 +1,4 @@
-<div>
+<div id="service-container-labels">
   <rd-widget>
     <rd-widget-header icon="fa-tasks" title="Container labels">
       <div class="nopadding">

app/components/service/includes/environmentvariables.html

@@ -1,4 +1,4 @@
-<div ng-if="service.EnvironmentVariables">
+<div ng-if="service.EnvironmentVariables" id="service-env-variables">
   <rd-widget>
     <rd-widget-header icon="fa-tasks" title="Environment variables">
       <div class="nopadding">

app/components/service/includes/mounts.html

@@ -1,4 +1,4 @@
-<div ng-if="service.ServiceMounts">
+<div ng-if="service.ServiceMounts" id="service-mounts">
   <rd-widget>
     <rd-widget-header icon="fa-tasks" title="Mounts">
       <div class="nopadding">

app/components/service/includes/networks.html

@@ -1,4 +1,4 @@
-<div>
+<div id="service-network-specs">
   <rd-widget>
     <rd-widget-header icon="fa-tasks" title="Networks"></rd-widget-header>
     <rd-widget-body ng-if="!service.VirtualIPs || service.VirtualIPs.length === 0">

app/components/service/includes/placementPreferences.html

@@ -0,0 +1,57 @@
+<div ng-if="service.ServicePreferences && applicationState.endpoint.apiVersion >= 1.30" id="service-placement-preferences">
+  <rd-widget>
+    <rd-widget-header icon="fa-tasks" title="Placement preferences">
+      <div class="nopadding">
+        <a class="btn btn-default btn-sm pull-right" ng-click="isUpdating || addPlacementPreference(service)" ng-disabled="isUpdating">
+          <i class="fa fa-plus-circle" aria-hidden="true"></i> placement preference
+        </a>
+      </div>
+    </rd-widget-header>
+    <rd-widget-body ng-if="service.ServicePreferences.length === 0">
+      <p>There are no placement preferences for this service.</p>
+    </rd-widget-body>
+    <rd-widget-body ng-if="service.ServicePreferences.length > 0" classes="no-padding">
+      <table class="table" >
+        <thead>
+          <tr>
+            <th>Strategy</th>
+            <th>Value</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr ng-repeat="preference in service.ServicePreferences">
+            <td>
+              <div class="input-group input-group-sm">
+                <input type="text" class="form-control" ng-model="preference.strategy" placeholder="e.g. node.role" ng-change="updatePlacementPreference(service, preference)" ng-disabled="isUpdating">
+              </div>
+            </td>
+            <td>
+              <div class="input-group input-group-sm">
+                <input type="text" class="form-control" ng-model="preference.value" placeholder="e.g. manager" ng-change="updatePlacementPreference(service, preference)" ng-disabled="isUpdating">
+                <span class="input-group-btn">
+                  <button class="btn btn-sm btn-danger" type="button" ng-click="removePlacementPreference(service, $index)" ng-disabled="isUpdating">
+                    <i class="fa fa-trash" aria-hidden="true"></i>
+                  </button>
+                </span>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </rd-widget-body>
+    <rd-widget-footer>
+      <div class="btn-toolbar" role="toolbar">
+        <div class="btn-group" role="group">
+          <button type="button" class="btn btn-primary btn-sm" ng-disabled="!hasChanges(service, ['ServicePreferences'])" ng-click="updateService(service)">Apply changes</button>
+          <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu">
+            <li><a ng-click="cancelChanges(service, ['ServicePreferences'])">Reset changes</a></li>
+            <li><a ng-click="cancelChanges(service)">Reset all changes</a></li>
+          </ul>
+        </div>
+      </div>
+    </rd-widget-footer>
+  </rd-widget>
+</div>

app/components/service/includes/ports.html

@@ -63,7 +63,7 @@
       </table>
     </rd-widget-body>
     <rd-widget-footer>
-      <div class="btn-toolbar" role="toolbar"
+      <div class="btn-toolbar" role="toolbar">
         <div class="btn-group" role="group">
           <button type="button" class="btn btn-primary btn-sm" ng-disabled="!hasChanges(service, ['Ports'])" ng-click="updateService(service)">Apply changes</button>
           <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

app/components/service/includes/resources.html

@@ -1,4 +1,4 @@
-<div>
+<div id="service-resources">
   <rd-widget>
     <rd-widget-header icon="fa-list-alt" title="Resource limits and reservations">
     </rd-widget-header>

app/components/service/includes/restart.html

@@ -1,4 +1,4 @@
-<div>
+<div id="service-restart-policy">
   <rd-widget>
     <rd-widget-header icon="fa-list-alt" title="Restart policy">
     </rd-widget-header>

app/components/service/includes/secrets.html

@@ -1,4 +1,4 @@
-<div ng-if="applicationState.endpoint.apiVersion >= 1.25">
+<div ng-if="applicationState.endpoint.apiVersion >= 1.25" id="service-secrets">
   <rd-widget>
     <rd-widget-header icon="fa-tasks" title="Secrets">
     </rd-widget-header>

app/components/service/includes/servicelabels.html

@@ -1,4 +1,4 @@
-<div>
+<div id="service-labels">
   <rd-widget>
     <rd-widget-header icon="fa-tasks" title="Service labels">
       <div class="nopadding">

app/components/service/includes/tasks.html

@@ -1,4 +1,4 @@
-<div ng-if="tasks.length > 0 && nodes">
+<div ng-if="tasks.length > 0 && nodes" id="service-tasks">
   <rd-widget>
     <rd-widget-header icon="fa-tasks" title="Associated tasks">
       <div class="pull-right">
@@ -18,28 +18,28 @@
         <tr>
         <th>Id</th>
         <th>
-          <a ui-sref="service" ng-click="order('Status')">
+          <a ng-click="order('Status.State')">
           Status
-          <span ng-show="sortType == 'Status' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-          <span ng-show="sortType == 'Status' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+          <span ng-show="sortType == 'Status.State' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+          <span ng-show="sortType == 'Status.State' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
           </a>
         </th>
         <th ng-if="service.Mode !== 'global'">
-          <a ui-sref="service" ng-click="order('Slot')">
+          <a ng-click="order('Slot')">
           Slot
           <span ng-show="sortType == 'Slot' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
           <span ng-show="sortType == 'Slot' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
           </a>
         </th>
         <th>
-          <a ui-sref="service" ng-click="order('Node')">
+          <a ng-click="order('NodeId')">
           Node
-          <span ng-show="sortType == 'Node' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-          <span ng-show="sortType == 'Node' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+          <span ng-show="sortType == 'NodeId' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+          <span ng-show="sortType == 'NodeId' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
           </a>
         </th>
         <th>
-          <a ui-sref="service" ng-click="order('Updated')">
+          <a ng-click="order('Updated')">
           Last update
           <span ng-show="sortType == 'Updated' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
           <span ng-show="sortType == 'Updated' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
@@ -49,7 +49,7 @@
       </thead>
       <tbody>
         <tr dir-paginate="task in (filteredTasks = ( tasks | orderBy:sortType:sortReverse | itemsPerPage: state.pagination_count))">
-        <td><a ui-sref="task({ id: task.Id })">{{ task.Id }}</a></td>
+        <td><a ui-sref="task({ id: task.Id })" class="monospaced">{{ task.Id }}</a></td>
         <td><span class="label label-{{ task.Status.State|taskstatusbadge }}">{{ task.Status.State }}</span></td>
         <td ng-if="service.Mode !== 'global'">{{ task.Slot }}</td>
         <td>{{ task.NodeId | tasknodename: nodes }}</td>
@@ -57,9 +57,10 @@
         </tr>
       </tbody>
       </table>
-      <div ng-if="tasks" class="pagination-controls">
+      <div ng-if="tasks" class="pagination-controls" >
       <dir-pagination-controls></dir-pagination-controls>
       </div>
     </rd-widget-body>
   </rd-widget>
 </div>
+

app/components/service/includes/updateconfig.html

@@ -1,4 +1,4 @@
-<div>
+<div id="service-update-config">
   <rd-widget>
     <rd-widget-header icon="fa-list-alt" title="Update configuration">
     </rd-widget-header>

app/components/service/service.html

@@ -6,7 +6,7 @@
     <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
   </rd-header-title>
   <rd-header-content>
-    <a ui-sref="services">Services</a> > <a ui-sref="service({id: service.Id})">{{ service.Name }}</a>
+    <a ui-sref="services">Services</a> &gt; <a ui-sref="service({id: service.Id})">{{ service.Name }}</a>
   </rd-header-content>
 </rd-header>
 
@@ -72,6 +72,13 @@
                 <input type="text" class="form-control" ng-model="service.Image" ng-change="updateServiceAttribute(service, 'Image')" ng-disabled="isUpdating" />
               </td>
             </tr>
+            <tr ng-if="applicationState.endpoint.apiVersion >= 1.30">
+              <td colspan="2">
+                <div class="btn-group" role="group" aria-label="...">
+                  <a class="btn btn-outline-secondary" type="button" ui-sref="servicelogs({id: service.Id})"><i class="fa fa-exclamation-circle space-right" aria-hidden="true"></i>Logs</a>
+                </div>
+              </td>
+            </tr>
           </tbody>
         </table>
       </rd-widget-body>
@@ -106,18 +113,25 @@
           <li><a href ng-click="goToItem('service-network-specs')">Network &amp; published ports</a></li>
           <li><a href ng-click="goToItem('service-resources')">Resource limits &amp; reservations</a></li>
           <li><a href ng-click="goToItem('service-placement-constraints')">Placement constraints</a></li>
+          <li><a href ng-click="goToItem('service-placement-preferences')" ng-if="applicationState.endpoint.apiVersion >= 1.30">Placement preferences</a></li>
           <li><a href ng-click="goToItem('service-restart-policy')">Restart policy</a></li>
           <li><a href ng-click="goToItem('service-update-config')">Update configuration</a></li>
           <li><a href ng-click="goToItem('service-labels')">Service labels</a></li>
           <li><a href ng-click="goToItem('service-secrets')">Secrets</a></li>
           <li><a href ng-click="goToItem('service-tasks')">Tasks</a></li>
-        <ul>
+        </ul>
       </rd-widget-body>
     </rd-widget>
   </div>
 </div>
 
-<div ng-include="'app/components/common/accessControlPanel/accessControlPanel.html'" ng-if="service && applicationState.application.authentication"></div>
+<!-- access-control-panel -->
+<por-access-control-panel
+  ng-if="service && applicationState.application.authentication"
+  resource-control="service.ResourceControl"
+  resource-type="'service'">
+</por-access-control-panel>
+<!-- !access-control-panel -->
 
 <div class="row">
   <hr>
@@ -145,6 +159,7 @@
     <h3 id="service-specs">Service specification</h3>
     <div id="service-resources" class="padding-top" ng-include="'app/components/service/includes/resources.html'"></div>
     <div id="service-placement-constraints" class="padding-top" ng-include="'app/components/service/includes/constraints.html'"></div>
+    <div id="service-placement-preferences" class="padding-top" ng-include="'app/components/service/includes/placementPreferences.html'"></div>
     <div id="service-restart-policy" class="padding-top" ng-include="'app/components/service/includes/restart.html'"></div>
     <div id="service-update-config" class="padding-top" ng-include="'app/components/service/includes/updateconfig.html'"></div>
     <div id="service-labels" class="padding-top" ng-include="'app/components/service/includes/servicelabels.html'"></div>

app/components/service/serviceController.js

@@ -1,12 +1,12 @@
 angular.module('service', [])
-.controller('ServiceController', ['$q', '$scope', '$stateParams', '$state', '$location', '$anchorScroll', 'ServiceService', 'Secret', 'SecretHelper', 'Service', 'ServiceHelper', 'TaskService', 'NodeService', 'Notifications', 'Pagination', 'ModalService', 'ControllerDataPipeline',
-function ($q, $scope, $stateParams, $state, $location, $anchorScroll, ServiceService, Secret, SecretHelper, Service, ServiceHelper, TaskService, NodeService, Notifications, Pagination, ModalService, ControllerDataPipeline) {
+.controller('ServiceController', ['$q', '$scope', '$stateParams', '$state', '$location', '$timeout', '$anchorScroll', 'ServiceService', 'Secret', 'SecretHelper', 'Service', 'ServiceHelper', 'LabelHelper', 'TaskService', 'NodeService', 'Notifications', 'Pagination', 'ModalService',
+function ($q, $scope, $stateParams, $state, $location, $timeout, $anchorScroll, ServiceService, Secret, SecretHelper, Service, ServiceHelper, LabelHelper, TaskService, NodeService, Notifications, Pagination, ModalService) {
 
   $scope.state = {};
   $scope.state.pagination_count = Pagination.getPaginationCount('service_tasks');
   $scope.tasks = [];
-  $scope.sortType = 'Status';
-  $scope.sortReverse = false;
+  $scope.sortType = 'Updated';
+  $scope.sortReverse = true;
 
   $scope.lastVersion = 0;
 
@@ -37,7 +37,11 @@ function ($q, $scope, $stateParams, $state, $location, $anchorScroll, ServiceSer
   };
 
   $scope.goToItem = function(hash) {
-    $anchorScroll(hash);
+      if ($location.hash() !== hash) {
+        $location.hash(hash);
+      } else {
+        $anchorScroll();
+      }
   };
 
   $scope.addEnvironmentVariable = function addEnvironmentVariable(service) {
@@ -120,10 +124,24 @@ function ($q, $scope, $stateParams, $state, $location, $anchorScroll, ServiceSer
       updateServiceArray(service, 'ServiceConstraints', service.ServiceConstraints);
     }
   };
-  $scope.updatePlacementConstraint = function updatePlacementConstraint(service, constraint) {
+  $scope.updatePlacementConstraint = function(service, constraint) {
     updateServiceArray(service, 'ServiceConstraints', service.ServiceConstraints);
   };
 
+  $scope.addPlacementPreference = function(service) {
+    service.ServicePreferences.push({ strategy: 'spread', value: '' });
+    updateServiceArray(service, 'ServicePreferences', service.ServicePreferences);
+  };
+  $scope.removePlacementPreference = function(service, index) {
+    var removedElement = service.ServicePreferences.splice(index, 1);
+    if (removedElement !== null) {
+      updateServiceArray(service, 'ServicePreferences', service.ServicePreferences);
+    }
+  };
+  $scope.updatePlacementPreference = function(service, constraint) {
+    updateServiceArray(service, 'ServicePreferences', service.ServicePreferences);
+  };
+
   $scope.addPublishedPort = function addPublishedPort(service) {
     if (!service.Ports) {
       service.Ports = [];
@@ -170,9 +188,9 @@ function ($q, $scope, $stateParams, $state, $location, $anchorScroll, ServiceSer
     $('#loadingViewSpinner').show();
     var config = ServiceHelper.serviceToConfig(service.Model);
     config.Name = service.Name;
-    config.Labels = translateServiceLabelsToLabels(service.ServiceLabels);
-    config.TaskTemplate.ContainerSpec.Env = translateEnvironmentVariablesToEnv(service.EnvironmentVariables);
-    config.TaskTemplate.ContainerSpec.Labels = translateServiceLabelsToLabels(service.ServiceContainerLabels);
+    config.Labels = LabelHelper.fromKeyValueToLabelHash(service.ServiceLabels);
+    config.TaskTemplate.ContainerSpec.Env = ServiceHelper.translateEnvironmentVariablesToEnv(service.EnvironmentVariables);
+    config.TaskTemplate.ContainerSpec.Labels = LabelHelper.fromKeyValueToLabelHash(service.ServiceContainerLabels);
     config.TaskTemplate.ContainerSpec.Image = service.Image;
     config.TaskTemplate.ContainerSpec.Secrets = service.ServiceSecrets ? service.ServiceSecrets.map(SecretHelper.secretConfig) : [];
 
@@ -184,6 +202,7 @@ function ($q, $scope, $stateParams, $state, $location, $anchorScroll, ServiceSer
       config.TaskTemplate.Placement = {};
     }
     config.TaskTemplate.Placement.Constraints = ServiceHelper.translateKeyValueToPlacementConstraints(service.ServiceConstraints);
+    config.TaskTemplate.Placement.Preferences = ServiceHelper.translateKeyValueToPlacementPreferences(service.ServicePreferences);
 
     config.TaskTemplate.Resources = {
       Limits: {
@@ -259,11 +278,12 @@ function ($q, $scope, $stateParams, $state, $location, $anchorScroll, ServiceSer
 
   function translateServiceArrays(service) {
     service.ServiceSecrets = service.Secrets ? service.Secrets.map(SecretHelper.flattenSecret) : [];
-    service.EnvironmentVariables = translateEnvironmentVariables(service.Env);
-    service.ServiceLabels = translateLabelsToServiceLabels(service.Labels);
-    service.ServiceContainerLabels = translateLabelsToServiceLabels(service.ContainerLabels);
+    service.EnvironmentVariables = ServiceHelper.translateEnvironmentVariables(service.Env);
+    service.ServiceLabels = LabelHelper.fromLabelHashToKeyValue(service.Labels);
+    service.ServiceContainerLabels = LabelHelper.fromLabelHashToKeyValue(service.ContainerLabels);
     service.ServiceMounts = angular.copy(service.Mounts);
-    service.ServiceConstraints = translateConstraintsToKeyValue(service.Constraints);
+    service.ServiceConstraints = ServiceHelper.translateConstraintsToKeyValue(service.Constraints);
+    service.ServicePreferences = ServiceHelper.translatePreferencesToKeyValue(service.Preferences);
   }
 
   function initView() {
@@ -279,7 +299,6 @@ function ($q, $scope, $stateParams, $state, $location, $anchorScroll, ServiceSer
 
       translateServiceArrays(service);
       $scope.service = service;
-      ControllerDataPipeline.setAccessControlData('service', $stateParams.id, service.ResourceControl);
       originalService = angular.copy(service);
 
       return $q.all({
@@ -291,9 +310,15 @@ function ($q, $scope, $stateParams, $state, $location, $anchorScroll, ServiceSer
     .then(function success(data) {
       $scope.tasks = data.tasks;
       $scope.nodes = data.nodes;
+
       $scope.secrets = data.secrets.map(function (secret) {
         return new SecretViewModel(secret);
       });
+
+      $timeout(function() {
+        $anchorScroll();
+      });
+
     })
     .catch(function error(err) {
       $scope.secrets = [];
@@ -330,80 +355,5 @@ function ($q, $scope, $stateParams, $state, $location, $anchorScroll, ServiceSer
     service.hasChanges = true;
   }
 
-  function translateEnvironmentVariables(env) {
-    if (env) {
-      var variables = [];
-      env.forEach(function(variable) {
-        var idx = variable.indexOf('=');
-        var keyValue = [variable.slice(0,idx), variable.slice(idx+1)];
-        var originalValue = (keyValue.length > 1) ? keyValue[1] : '';
-        variables.push({ key: keyValue[0], value: originalValue, originalKey: keyValue[0], originalValue: originalValue, added: true});
-      });
-      return variables;
-    }
-    return [];
-  }
-  function translateEnvironmentVariablesToEnv(env) {
-    if (env) {
-      var variables = [];
-      env.forEach(function(variable) {
-        if (variable.key && variable.key !== '') {
-          variables.push(variable.key + '=' + variable.value);
-        }
-      });
-      return variables;
-    }
-    return [];
-  }
-
-  function translateLabelsToServiceLabels(Labels) {
-    var labels = [];
-    if (Labels) {
-      Object.keys(Labels).forEach(function(key) {
-        labels.push({ key: key, value: Labels[key], originalKey: key, originalValue: Labels[key], added: true});
-      });
-    }
-    return labels;
-  }
-  function translateServiceLabelsToLabels(labels) {
-    var Labels = {};
-    if (labels) {
-      labels.forEach(function(label) {
-        Labels[label.key] = label.value;
-      });
-    }
-    return Labels;
-  }
-
-  function translateConstraintsToKeyValue(constraints) {
-    function getOperator(constraint) {
-      var indexEquals = constraint.indexOf('==');
-      if (indexEquals >= 0) {
-        return [indexEquals, '=='];
-      }
-      return [constraint.indexOf('!='), '!='];
-    }
-    if (constraints) {
-      var keyValueConstraints = [];
-      constraints.forEach(function(constraint) {
-        var operatorIndices = getOperator(constraint);
-
-        var key = constraint.slice(0, operatorIndices[0]);
-        var operator = operatorIndices[1];
-        var value = constraint.slice(operatorIndices[0] + 2);
-
-        keyValueConstraints.push({
-          key: key,
-          value: value,
-          operator: operator,
-          originalKey: key,
-          originalValue: value
-        });
-      });
-      return keyValueConstraints;
-    }
-    return [];
-  }
-
   initView();
 }]);

app/components/serviceLogs/serviceLogsController.js

@@ -0,0 +1,83 @@
+angular.module('serviceLogs', [])
+.controller('ServiceLogsController', ['$scope', '$stateParams', '$anchorScroll', 'ServiceLogs', 'Service',
+function ($scope, $stateParams, $anchorScroll, ServiceLogs, Service) {
+  $scope.state = {};
+  $scope.state.displayTimestampsOut = false;
+  $scope.state.displayTimestampsErr = false;
+  $scope.stdout = '';
+  $scope.stderr = '';
+  $scope.tailLines = 2000;
+
+  function getLogs() {
+    $('#loadingViewSpinner').show();
+    getLogsStdout();
+    getLogsStderr();
+    $('#loadingViewSpinner').hide();
+  }
+
+  function getLogsStderr() {
+    ServiceLogs.get($stateParams.id, {
+      stdout: 0,
+      stderr: 1,
+      timestamps: $scope.state.displayTimestampsErr,
+      tail: $scope.tailLines
+    }, function (data, status, headers, config) {
+      // Replace carriage returns with newlines to clean up output
+      data = data.replace(/[\r]/g, '\n');
+      // Strip 8 byte header from each line of output
+      data = data.substring(8);
+      data = data.replace(/\n(.{8})/g, '\n');
+      $scope.stderr = data;
+    });
+  }
+
+  function getLogsStdout() {
+    ServiceLogs.get($stateParams.id, {
+      stdout: 1,
+      stderr: 0,
+      timestamps: $scope.state.displayTimestampsOut,
+      tail: $scope.tailLines
+    }, function (data, status, headers, config) {
+      // Replace carriage returns with newlines to clean up output
+      data = data.replace(/[\r]/g, '\n');
+      // Strip 8 byte header from each line of output
+      data = data.substring(8);
+      data = data.replace(/\n(.{8})/g, '\n');
+      $scope.stdout = data;
+    });
+  }
+
+  function getService() {
+    $('#loadingViewSpinner').show();
+    Service.get({id: $stateParams.id}, function (d) {
+      $scope.service = d;
+      $('#loadingViewSpinner').hide();
+    }, function (e) {
+      Notifications.error('Failure', e, 'Unable to retrieve service info');
+      $('#loadingViewSpinner').hide();
+    });
+  }
+
+  function initView() {
+    getService();
+    getLogs();
+
+    var logIntervalId = window.setInterval(getLogs, 5000);
+
+    $scope.$on('$destroy', function () {
+      // clearing interval when view changes
+      clearInterval(logIntervalId);
+    });
+
+    $scope.toggleTimestampsOut = function () {
+      getLogsStdout();
+    };
+
+    $scope.toggleTimestampsErr = function () {
+      getLogsStderr();
+    };
+  }
+
+  initView();
+
+}]);

app/components/serviceLogs/servicelogs.html

@@ -0,0 +1,56 @@
+<rd-header>
+  <rd-header-title title="Service logs">
+      <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
+  </rd-header-title>
+  <rd-header-content>
+    <a ui-sref="services">Services</a> > <a ui-sref="service({id: service.ID})">{{ service.Spec.Name }}</a> > Logs
+  </rd-header-content>
+</rd-header>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-body>
+        <div class="widget-icon grey pull-left">
+          <i class="fa fa-list-alt"></i>
+        </div>
+        <div class="title">{{ service.Spec.Name }}</div>
+        <div class="comment">Name</div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-info-circle" title="Stdout logs"></rd-widget-header>
+      <rd-widget-taskbar>
+        <input type="checkbox" ng-model="state.displayTimestampsOut" id="displayAllTsOut" ng-change="toggleTimestampsOut()"/>
+        <label for="displayAllTsOut">Display timestamps</label>
+      </rd-widget-taskbar>
+      <rd-widget-body classes="no-padding">
+        <div class="panel-body">
+          <pre id="stdoutLog" class="pre-scrollable pre-x-scrollable">{{stdout}}</pre>
+        </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-exclamation-triangle" title="Stderr logs"></rd-widget-header>
+      <rd-widget-taskbar>
+        <input type="checkbox" ng-model="state.displayTimestampsErr" id="displayAllTsErr" ng-change="toggleTimestampsErr()"/>
+        <label for="displayAllTsErr">Display timestamps</label>
+      </rd-widget-taskbar>
+      <rd-widget-body classes="no-padding">
+        <div class="panel-body">
+          <pre id="stderrLog" class="pre-scrollable pre-x-scrollable">{{stderr}}</pre>
+        </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/components/services/services.html

@@ -128,6 +128,6 @@
           </div>
         </div>
       </rd-widget-body>
-    <rd-widget>
+    </rd-widget>
   </div>
 </div>

app/components/sidebar/sidebar.html

@@ -58,12 +58,15 @@
     <li class="sidebar-list" ng-if="applicationState.application.authentication && (isAdmin || isTeamLeader)">
       <a ui-sref="users" ui-sref-active="active">User management <span class="menu-icon fa fa-users"></span></a>
       <div class="sidebar-sublist" ng-if="toggle && ($state.current.name === 'users' || $state.current.name === 'user' || $state.current.name === 'teams' || $state.current.name === 'team')">
-        <a ui-sref="teams" ui-sref-active="active">Teams</span></a>
+        <a ui-sref="teams" ui-sref-active="active">Teams</a>
       </div>
     </li>
     <li class="sidebar-list" ng-if="!applicationState.application.authentication || isAdmin">
       <a ui-sref="endpoints" ui-sref-active="active">Endpoints <span class="menu-icon fa fa-plug"></span></a>
     </li>
+    <li class="sidebar-list" ng-if="!applicationState.application.authentication || isAdmin">
+      <a ui-sref="registries" ui-sref-active="active">Registries <span class="menu-icon fa fa-database"></span></a>
+    </li>
     <li class="sidebar-list" ng-if="!applicationState.application.authentication || isAdmin">
       <a ui-sref="settings" ui-sref-active="active">Settings <span class="menu-icon fa fa-cogs"></span></a>
     </li>

app/components/sidebar/sidebarController.js

@@ -49,7 +49,7 @@ function ($q, $scope, $state, Settings, EndpointService, StateManager, EndpointP
     EndpointService.endpoints()
     .then(function success(data) {
       var endpoints = data;
-      $scope.endpoints = endpoints;
+      $scope.endpoints = _.sortBy(endpoints, ['Name']);
       setActiveEndpoint(endpoints);
 
       if (StateManager.getState().application.authentication) {

app/components/stats/stats.html

@@ -1,7 +1,7 @@
 <rd-header>
   <rd-header-title title="Container stats"></rd-header-title>
   <rd-header-content>
-    <a ui-sref="containers">Containers</a> > <a ui-sref="container({id: container.Id})">{{ container.Name|trimcontainername }}</a> > Stats
+    <a ui-sref="containers">Containers</a> &gt; <a ui-sref="container({id: container.Id})">{{ container.Name|trimcontainername }}</a> &gt; Stats
   </rd-header-content>
 </rd-header>
 

app/components/swarm/swarm.html

@@ -3,6 +3,7 @@
     <a data-toggle="tooltip" title="Refresh" ui-sref="swarm" ui-sref-opts="{reload: true}">
       <i class="fa fa-refresh" aria-hidden="true"></i>
     </a>
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px;"></i>
   </rd-header-title>
   <rd-header-content>Swarm</rd-header-content>
 </rd-header>

app/components/swarm/swarmController.js

@@ -1,6 +1,6 @@
 angular.module('swarm', [])
-.controller('SwarmController', ['$scope', 'Info', 'Version', 'Node', 'Pagination',
-function ($scope, Info, Version, Node, Pagination) {
+.controller('SwarmController', ['$q', '$scope', 'SystemService', 'NodeService', 'Pagination', 'Notifications',
+function ($q, $scope, SystemService, NodeService, Pagination, Notifications) {
   $scope.state = {};
   $scope.state.pagination_count = Pagination.getPaginationCount('swarm_nodes');
   $scope.sortType = 'Spec.Role';
@@ -20,30 +20,6 @@ function ($scope, Info, Version, Node, Pagination) {
     Pagination.setPaginationCount('swarm_nodes', $scope.state.pagination_count);
   };
 
-  Version.get({}, function (d) {
-    $scope.docker = d;
-  });
-
-  Info.get({}, function (d) {
-    $scope.info = d;
-    if ($scope.applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE') {
-      Node.query({}, function(d) {
-        $scope.nodes = d.map(function (node) {
-          return new NodeViewModel(node);
-        });
-        var CPU = 0, memory = 0;
-        angular.forEach(d, function(node) {
-          CPU += node.Description.Resources.NanoCPUs;
-          memory += node.Description.Resources.MemoryBytes;
-        });
-        $scope.totalCPU = CPU / 1000000000;
-        $scope.totalMemory = memory;
-      });
-    } else {
-      extractSwarmInfo(d);
-    }
-  });
-
   function extractSwarmInfo(info) {
     // Swarm info is available in SystemStatus object
     var systemStatus = info.SystemStatus;
@@ -84,4 +60,43 @@ function ($scope, Info, Version, Node, Pagination) {
     node.version = info[offset + 8][1];
     $scope.swarm.Status.push(node);
   }
+
+  function processTotalCPUAndMemory(nodes) {
+    var CPU = 0, memory = 0;
+    angular.forEach(nodes, function(node) {
+      CPU += node.CPUs;
+      memory += node.Memory;
+    });
+    $scope.totalCPU = CPU / 1000000000;
+    $scope.totalMemory = memory;
+  }
+
+  function initView() {
+    $('#loadingViewSpinner').show();
+    var provider = $scope.applicationState.endpoint.mode.provider;
+    $q.all({
+      version: SystemService.version(),
+      info: SystemService.info(),
+      nodes: provider !== 'DOCKER_SWARM_MODE' || NodeService.nodes()
+    })
+    .then(function success(data) {
+      $scope.docker = data.version;
+      $scope.info = data.info;
+      if (provider === 'DOCKER_SWARM_MODE') {
+        var nodes = data.nodes;
+        processTotalCPUAndMemory(nodes);
+        $scope.nodes = nodes;
+      } else {
+        extractSwarmInfo(data.info);
+      }
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to retrieve cluster details');
+    })
+    .finally(function final() {
+      $('#loadingViewSpinner').hide();
+    });
+  }
+
+  initView();
 }]);

app/components/task/task.html

@@ -3,7 +3,7 @@
     <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
   </rd-header-title>
   <rd-header-content ng-if="task && service">
-    <a ui-sref="services">Services</a> > <a ui-sref="service({id: service.Id })">{{ service.Name }}</a> > {{ task.Id }}
+    <a ui-sref="services">Services</a> &gt; <a ui-sref="service({id: service.Id })">{{ service.Name }}</a> &gt; {{ task.Id }}
   </rd-header-content>
 </rd-header>
 

app/components/team/team.html

@@ -3,7 +3,7 @@
     <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
   </rd-header-title>
   <rd-header-content>
-    <a ui-sref="teams">Teams</a> > <a ui-sref="team({id: team.Id})">{{ team.Name }}</a>
+    <a ui-sref="teams">Teams</a> &gt; <a ui-sref="team({id: team.Id})">{{ team.Name }}</a>
   </rd-header-content>
 </rd-header>
 
@@ -144,7 +144,7 @@
               <tr pagination-id="table2" dir-paginate="user in teamMembers | filter:state.filterGroupMembers | orderBy:sortTypeGroupMembers:sortReverseGroupMembers | itemsPerPage: state.pagination_count_groupMembers">
                 <td>
                   {{ user.Username }}
-                  <span style="margin-left: 5px;" ng-if="isAdmin || user.TeamRole === 'Member'")>
+                  <span style="margin-left: 5px;" ng-if="isAdmin || user.TeamRole === 'Member'">
                     <a class="btn-outline-secondary" ng-click="removeUser(user)"><i class="fa fa-minus-circle space-right" aria-hidden="true"></i>Remove</a>
                   </span>
                 </td>

app/components/teams/teams.html

@@ -43,8 +43,8 @@
                helper-elements="filter"
                search-property="Username"
                translation="{nothingSelected: 'Select one or more team leaders', search: 'Search...'}"
-               style="margin-left: 20px;"
-             </span>
+               style="margin-left: 20px;">
+              </span>
             </div>
           </div>
           <!-- !team-leaders -->
@@ -125,6 +125,6 @@
           </div>
         </div>
       </rd-widget-body>
-    <rd-widget>
+    </rd-widget>
   </div>
 </div>

app/components/templates/templates.html

@@ -68,7 +68,7 @@
           </div>
           <!-- !env -->
           <!-- access-control -->
-          <div ng-include="'app/components/common/accessControlForm/accessControlForm.html'" ng-if="applicationState.application.authentication"></div>
+          <por-access-control-form form-data="formValues.AccessControlData"></por-access-control-form>
           <!-- !access-control -->
           <div class="form-group">
             <div class="col-sm-12">
@@ -202,13 +202,14 @@
             <div class="col-sm-12">
               <button type="button" class="btn btn-primary btn-sm" ng-disabled="!formValues.network" ng-click="createTemplate()">Create</button>
               <i id="createContainerSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
-              <span class="small text-muted" style="margin-left: 10px" ng-if="globalNetworkCount === 0 && applicationState.endpoint.mode.provider === 'DOCKER_SWARM'">
+              <span class="small text-muted" style="margin-left: 10px" ng-if="globalNetworkCount === 0 && applicationState.endpoint.mode.provider === 'DOCKER_SWARM' && !state.formValidationError">
                 When using Swarm, we recommend deploying containers in a shared network. Looks like you don't have any shared network, head over the <a ui-sref="networks">networks view</a> to create one.
               </span>
-              <span ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'" style="margin-left: 10px">
+              <span ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE' && !state.formValidationError" style="margin-left: 10px">
                 <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
                 <span class="small text-muted" style="margin-left: 5px;">App templates cannot be deployed as Swarm Mode services for the moment. You can still use them to quickly deploy containers on the Docker host.</span>
               </span>
+              <span class="text-danger" ng-if="state.formValidationError" style="margin-left: 5px;">{{ state.formValidationError }}</span>
             </div>
           </div>
           <!-- !actions -->

app/components/templates/templatesController.js

@@ -1,6 +1,6 @@
 angular.module('templates', [])
-.controller('TemplatesController', ['$scope', '$q', '$state', '$stateParams', '$anchorScroll', '$filter', 'ContainerService', 'ContainerHelper', 'ImageService', 'NetworkService', 'TemplateService', 'TemplateHelper', 'VolumeService', 'Notifications', 'Pagination', 'ResourceControlService', 'Authentication', 'ControllerDataPipeline', 'FormValidator',
-function ($scope, $q, $state, $stateParams, $anchorScroll, $filter, ContainerService, ContainerHelper, ImageService, NetworkService, TemplateService, TemplateHelper, VolumeService, Notifications, Pagination, ResourceControlService, Authentication, ControllerDataPipeline, FormValidator) {
+.controller('TemplatesController', ['$scope', '$q', '$state', '$stateParams', '$anchorScroll', '$filter', 'ContainerService', 'ContainerHelper', 'ImageService', 'NetworkService', 'TemplateService', 'TemplateHelper', 'VolumeService', 'Notifications', 'Pagination', 'ResourceControlService', 'Authentication', 'FormValidator',
+function ($scope, $q, $state, $stateParams, $anchorScroll, $filter, ContainerService, ContainerHelper, ImageService, NetworkService, TemplateService, TemplateHelper, VolumeService, Notifications, Pagination, ResourceControlService, Authentication, FormValidator) {
   $scope.state = {
     selectedTemplate: null,
     showAdvancedOptions: false,
@@ -14,7 +14,8 @@ function ($scope, $q, $state, $stateParams, $anchorScroll, $filter, ContainerSer
 
   $scope.formValues = {
     network: '',
-    name: ''
+    name: '',
+    AccessControlData: new AccessControlFormData()
   };
 
   $scope.addVolume = function () {
@@ -49,7 +50,7 @@ function ($scope, $q, $state, $stateParams, $anchorScroll, $filter, ContainerSer
     $('#createContainerSpinner').show();
 
     var userDetails = Authentication.getUserDetails();
-    var accessControlData = ControllerDataPipeline.getAccessControlFormData();
+    var accessControlData = $scope.formValues.AccessControlData;
     var isAdmin = userDetails.role === 1 ? true : false;
 
     if (!validateForm(accessControlData, isAdmin)) {
@@ -69,7 +70,7 @@ function ($scope, $q, $state, $stateParams, $anchorScroll, $filter, ContainerSer
         generatedVolumeIds.push(volumeId);
       });
       TemplateService.updateContainerConfigurationWithVolumes(templateConfiguration, template, data);
-      return ImageService.pullImage(template.Image, template.Registry);
+      return ImageService.pullImage(template.Image, { URL: template.Registry }, true);
     })
     .then(function success(data) {
       return ContainerService.createAndStartContainer(templateConfiguration);

app/components/user/user.html

@@ -3,7 +3,7 @@
     <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
   </rd-header-title>
   <rd-header-content>
-    <a ui-sref="users">Users</a> > <a ui-sref="user({id: user.Id})">{{ user.Username }}</a>
+    <a ui-sref="users">Users</a> &gt; <a ui-sref="user({id: user.Id})">{{ user.Username }}</a>
   </rd-header-content>
 </rd-header>
 

app/components/users/users.html

@@ -69,7 +69,7 @@
                 Add to team(s)
               </label>
               <span class="small text-muted" style="margin-left: 20px;" ng-if="teams.length === 0">
-                You have not yet created any team. Head over the <a ui-sref="teams">teams view</a> to manage user teams.</span>
+                You have not yet created any team. Head over the <a ui-sref="teams">teams view</a> to manage user teams.
               </span>
               <span isteven-multi-select
                ng-if="teams.length > 0"
@@ -81,8 +81,8 @@
                helper-elements="filter"
                search-property="Name"
                translation="{nothingSelected: 'Select one or more teams', search: 'Search...'}"
-               style="margin-left: 20px;"
-             </span>
+               style="margin-left: 20px;">
+               </span>
             </div>
           </div>
           <!-- !teams -->
@@ -183,6 +183,6 @@
           </div>
         </div>
       </rd-widget-body>
-    <rd-widget>
+    </rd-widget>
   </div>
 </div>