github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

feat(containers): add support docker attach (#2842) 

* #592 feat(container-details): split websocket backend code into more files and add attach handler

* #592 feat(container-details): rename console to exec and add attach console

* Revert "#592 feat(container-details): rename console to exec and add attach console"

This reverts commit f2deaee1

* #592 feat(container-details): add attach to containerconsole

* #592 feat(container-details): catch more errors

* #592 feat(container-details): use less vars

* #592 feat(container-details): error message is more verbose

* #592 feat(container-details): go fmt

* #592 feat(container-details): unpack netdial

* #592 feat(container-details): reformat service

* #592 feat(container-details): fix go compiler bugs

* #592 feat(container-details): refactor services

* #592 feat(container-details): fix windows dial

* #592 feat(container-details): gofmt dial_windows.go

* #592 feat(container-details): split console into two views and fix breadcrumbs

* #592 feat(container-details): swap exec and attach action

* #592 feat(container-details): add some warnings

* #592 feat(container-details): refresh view more

* #592 feat(container-details): use less functions for connecting/disconnecting

* #592 feat(container-details): move link replacements into initTerm

* #592 feat(container-details): disable attach/exec button if container is not running

* #592 feat(container-details): fix typo

* #592 feat(container-details): autoconnect attach view

* #592 feat(container-details): fix first draw after attach + reformat code

* #592 feat(container-details): remove init-helper-div

* #592 feat(container-details): console resize code and remove padding

* #592 feat(container-details): swap height and width arguments in container tty resize restcall

* #592 feat(container-details): swap height and width arguments in exec tty resize restcall

* #592 feat(container-details): remove css unit

* #592 feat(container-details): remove loaded state from states object

* #592 feat(container-details): reword Disattach to Detach

* #592 feat(container-details): remove unloaded state from states object

* #592 feat(container-details): remove useless code

* #592 feat(container-details): clearer state-check

* #592 feat(container-details): fixed resize bugs by using xterms col attribute
pull/2331/merge
mrdrogdrog 2019-05-09 04:04:40 +02:00 committed by Anthony Lapenna
parent dc9a3de88f
commit 1af9fb4490
20 changed files with 647 additions and 305 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
api/http/handler/websocket/attach.go Normal file
View File

@ -0,0 +1,122 @@
package websocket
import (
"net"
"net/http"
"net/http/httputil"
"time"
"github.com/asaskevich/govalidator"
"github.com/gorilla/websocket"
httperror "github.com/portainer/libhttp/error"
"github.com/portainer/libhttp/request"
"github.com/portainer/portainer/api"
)
// websocketAttach handles GET requests on /websocket/attach?id=<attachID>&endpointId=<endpointID>&nodeName=<nodeName>&token=<token>
// If the nodeName query parameter is present, the request will be proxied to the underlying agent endpoint.
// If the nodeName query parameter is not specified, the request will be upgraded to the websocket protocol and
// an AttachStart operation HTTP request will be created and hijacked.
// Authentication and access is controled via the mandatory token query parameter.
func (handler *Handler) websocketAttach(w http.ResponseWriter, r *http.Request) *httperror.HandlerError {
attachID, err := request.RetrieveQueryParameter(r, "id", false)
if err != nil {
return &httperror.HandlerError{http.StatusBadRequest, "Invalid query parameter: id", err}
}
if !govalidator.IsHexadecimal(attachID) {
return &httperror.HandlerError{http.StatusBadRequest, "Invalid query parameter: id (must be hexadecimal identifier)", err}
}
endpointID, err := request.RetrieveNumericQueryParameter(r, "endpointId", false)
if err != nil {
return &httperror.HandlerError{http.StatusBadRequest, "Invalid query parameter: endpointId", err}
}
endpoint, err := handler.EndpointService.Endpoint(portainer.EndpointID(endpointID))
if err == portainer.ErrObjectNotFound {
return &httperror.HandlerError{http.StatusNotFound, "Unable to find the endpoint associated to the stack inside the database", err}
} else if err != nil {
return &httperror.HandlerError{http.StatusInternalServerError, "Unable to find the endpoint associated to the stack inside the database", err}
}
err = handler.requestBouncer.EndpointAccess(r, endpoint)
if err != nil {
return &httperror.HandlerError{http.StatusForbidden, "Permission denied to access endpoint", portainer.ErrEndpointAccessDenied}
}
params := &webSocketRequestParams{
endpoint: endpoint,
ID: attachID,
nodeName: r.FormValue("nodeName"),
}
err = handler.handleAttachRequest(w, r, params)
if err != nil {
return &httperror.HandlerError{http.StatusInternalServerError, "An error occured during websocket attach operation", err}
}
return nil
}
func (handler *Handler) handleAttachRequest(w http.ResponseWriter, r *http.Request, params *webSocketRequestParams) error {
r.Header.Del("Origin")
if params.nodeName != "" || params.endpoint.Type == portainer.AgentOnDockerEnvironment {
return handler.proxyWebsocketRequest(w, r, params)
}
websocketConn, err := handler.connectionUpgrader.Upgrade(w, r, nil)
if err != nil {
return err
}
defer websocketConn.Close()
return hijackAttachStartOperation(websocketConn, params.endpoint, params.ID)
}
func hijackAttachStartOperation(websocketConn *websocket.Conn, endpoint *portainer.Endpoint, attachID string) error {
dial, err := initDial(endpoint)
if err != nil {
return err
}
// When we set up a TCP connection for hijack, there could be long periods
// of inactivity (a long running command with no output) that in certain
// network setups may cause ECONNTIMEOUT, leaving the client in an unknown
// state. Setting TCP KeepAlive on the socket connection will prohibit
// ECONNTIMEOUT unless the socket connection truly is broken
if tcpConn, ok := dial.(*net.TCPConn); ok {
tcpConn.SetKeepAlive(true)
tcpConn.SetKeepAlivePeriod(30 * time.Second)
}
httpConn := httputil.NewClientConn(dial, nil)
defer httpConn.Close()
attachStartRequest, err := createAttachStartRequest(attachID)
if err != nil {
return err
}
err = hijackRequest(websocketConn, httpConn, attachStartRequest)
if err != nil {
return err
}
return nil
}
func createAttachStartRequest(attachID string) (*http.Request, error) {
request, err := http.NewRequest("POST", "/containers/"+attachID+"/attach?stdin=1&stdout=1&stderr=1&stream=1", nil)
if err != nil {
return nil, err
}
request.Header.Set("Content-Type", "application/json")
request.Header.Set("Connection", "Upgrade")
request.Header.Set("Upgrade", "tcp")
return request, nil
}

0
api/http/handler/websocket/websocket_dial.go → api/http/handler/websocket/dial.go
View File

3
api/http/handler/websocket/websocket_dial_windows.go → api/http/handler/websocket/dial_windows.go
View File

@ -3,9 +3,8 @@
package websocket
import (
"net"
"github.com/Microsoft/go-winio"
"net"
)
func createDial(scheme, host string) (net.Conn, error) {

141
api/http/handler/websocket/websocket_exec.go → api/http/handler/websocket/exec.go
View File

@ -1,32 +1,20 @@
package websocket
import (
"bufio"
"bytes"
"crypto/tls"
"encoding/json"
"fmt"
"net"
"net/http"
"net/http/httputil"
"net/url"
"time"
"github.com/asaskevich/govalidator"
"github.com/gorilla/websocket"
"github.com/koding/websocketproxy"
httperror "github.com/portainer/libhttp/error"
"github.com/portainer/libhttp/request"
"github.com/portainer/portainer/api"
"github.com/portainer/portainer/api/crypto"
)
type webSocketExecRequestParams struct {
execID string
nodeName string
endpoint *portainer.Endpoint
}
type execStartOperationPayload struct {
Tty bool
Detach bool
@ -63,13 +51,13 @@ func (handler *Handler) websocketExec(w http.ResponseWriter, r *http.Request) *h
return &httperror.HandlerError{http.StatusForbidden, "Permission denied to access endpoint", portainer.ErrEndpointAccessDenied}
}
params := &webSocketExecRequestParams{
params := &webSocketRequestParams{
endpoint: endpoint,
execID: execID,
ID: execID,
nodeName: r.FormValue("nodeName"),
}
err = handler.handleRequest(w, r, params)
err = handler.handleExecRequest(w, r, params)
if err != nil {
return &httperror.HandlerError{http.StatusInternalServerError, "An error occured during websocket exec operation", err}
}
@ -77,7 +65,7 @@ func (handler *Handler) websocketExec(w http.ResponseWriter, r *http.Request) *h
return nil
}
func (handler *Handler) handleRequest(w http.ResponseWriter, r *http.Request, params *webSocketExecRequestParams) error {
func (handler *Handler) handleExecRequest(w http.ResponseWriter, r *http.Request, params *webSocketRequestParams) error {
r.Header.Del("Origin")
if params.nodeName != "" || params.endpoint.Type == portainer.AgentOnDockerEnvironment {
@ -90,41 +78,7 @@ func (handler *Handler) handleRequest(w http.ResponseWriter, r *http.Request, pa
}
defer websocketConn.Close()
return hijackExecStartOperation(websocketConn, params.endpoint, params.execID)
}
func (handler *Handler) proxyWebsocketRequest(w http.ResponseWriter, r *http.Request, params *webSocketExecRequestParams) error {
agentURL, err := url.Parse(params.endpoint.URL)
if err != nil {
return err
}
agentURL.Scheme = "ws"
proxy := websocketproxy.NewProxy(agentURL)
if params.endpoint.TLSConfig.TLS || params.endpoint.TLSConfig.TLSSkipVerify {
agentURL.Scheme = "wss"
proxy.Dialer = &websocket.Dialer{
TLSClientConfig: &tls.Config{
InsecureSkipVerify: params.endpoint.TLSConfig.TLSSkipVerify,
},
}
}
signature, err := handler.SignatureService.CreateSignature(portainer.PortainerAgentSignatureMessage)
if err != nil {
return err
}
proxy.Director = func(incoming *http.Request, out http.Header) {
out.Set(portainer.PortainerAgentPublicKeyHeader, handler.SignatureService.EncodedPublicKey())
out.Set(portainer.PortainerAgentSignatureHeader, signature)
out.Set(portainer.PortainerAgentTargetHeader, params.nodeName)
}
proxy.ServeHTTP(w, r)
return nil
return hijackExecStartOperation(websocketConn, params.endpoint, params.ID)
}
func hijackExecStartOperation(websocketConn *websocket.Conn, endpoint *portainer.Endpoint, execID string) error {
@ -159,30 +113,6 @@ func hijackExecStartOperation(websocketConn *websocket.Conn, endpoint *portainer
return nil
}
func initDial(endpoint *portainer.Endpoint) (net.Conn, error) {
url, err := url.Parse(endpoint.URL)
if err != nil {
return nil, err
}
host := url.Host
if url.Scheme == "unix" || url.Scheme == "npipe" {
host = url.Path
}
if endpoint.TLSConfig.TLS {
tlsConfig, err := crypto.CreateTLSConfigurationFromDisk(endpoint.TLSConfig.TLSCACertPath, endpoint.TLSConfig.TLSCertPath, endpoint.TLSConfig.TLSKeyPath, endpoint.TLSConfig.TLSSkipVerify)
if err != nil {
return nil, err
}
return tls.Dial(url.Scheme, host, tlsConfig)
}
return createDial(url.Scheme, host)
}
func createExecStartRequest(execID string) (*http.Request, error) {
execStartOperationPayload := &execStartOperationPayload{
Tty: true,
@ -206,64 +136,3 @@ func createExecStartRequest(execID string) (*http.Request, error) {
return request, nil
}
func hijackRequest(websocketConn *websocket.Conn, httpConn *httputil.ClientConn, request *http.Request) error {
// Server hijacks the connection, error 'connection closed' expected
resp, err := httpConn.Do(request)
if err != httputil.ErrPersistEOF {
if err != nil {
return err
}
if resp.StatusCode != http.StatusSwitchingProtocols {
resp.Body.Close()
return fmt.Errorf("unable to upgrade to tcp, received %d", resp.StatusCode)
}
}
tcpConn, brw := httpConn.Hijack()
defer tcpConn.Close()
errorChan := make(chan error, 1)
go streamFromTCPConnToWebsocketConn(websocketConn, brw, errorChan)
go streamFromWebsocketConnToTCPConn(websocketConn, tcpConn, errorChan)
err = <-errorChan
if websocket.IsUnexpectedCloseError(err, websocket.CloseGoingAway, websocket.CloseNoStatusReceived) {
return err
}
return nil
}
func streamFromWebsocketConnToTCPConn(websocketConn *websocket.Conn, tcpConn net.Conn, errorChan chan error) {
for {
_, in, err := websocketConn.ReadMessage()
if err != nil {
errorChan <- err
break
}
_, err = tcpConn.Write(in)
if err != nil {
errorChan <- err
break
}
}
}
func streamFromTCPConnToWebsocketConn(websocketConn *websocket.Conn, br *bufio.Reader, errorChan chan error) {
for {
out := make([]byte, 2048)
_, err := br.Read(out)
if err != nil {
errorChan <- err
break
}
err = websocketConn.WriteMessage(websocket.TextMessage, out)
if err != nil {
errorChan <- err
break
}
}
}

2
api/http/handler/websocket/handler.go
View File

@ -26,5 +26,7 @@ func NewHandler(bouncer *security.RequestBouncer) *Handler {
}
h.PathPrefix("/websocket/exec").Handler(
bouncer.AuthenticatedAccess(httperror.LoggerHandler(h.websocketExec)))
h.PathPrefix("/websocket/attach").Handler(
bouncer.AuthenticatedAccess(httperror.LoggerHandler(h.websocketAttach)))
return h
}

36
api/http/handler/websocket/hijack.go Normal file
View File

@ -0,0 +1,36 @@
package websocket
import (
"fmt"
"github.com/gorilla/websocket"
"net/http"
"net/http/httputil"
)
func hijackRequest(websocketConn *websocket.Conn, httpConn *httputil.ClientConn, request *http.Request) error {
// Server hijacks the connection, error 'connection closed' expected
resp, err := httpConn.Do(request)
if err != httputil.ErrPersistEOF {
if err != nil {
return err
}
if resp.StatusCode != http.StatusSwitchingProtocols {
resp.Body.Close()
return fmt.Errorf("unable to upgrade to tcp, received %d", resp.StatusCode)
}
}
tcpConn, brw := httpConn.Hijack()
defer tcpConn.Close()
errorChan := make(chan error, 1)
go streamFromTCPConnToWebsocketConn(websocketConn, brw, errorChan)
go streamFromWebsocketConnToTCPConn(websocketConn, tcpConn, errorChan)
err = <-errorChan
if websocket.IsUnexpectedCloseError(err, websocket.CloseGoingAway, websocket.CloseNoStatusReceived) {
return err
}
return nil
}

35
api/http/handler/websocket/initdial.go Normal file
View File

@ -0,0 +1,35 @@
package websocket
import (
"crypto/tls"
"github.com/portainer/portainer/api"
"github.com/portainer/portainer/api/crypto"
"net"
"net/url"
)
func initDial(endpoint *portainer.Endpoint) (net.Conn, error) {
url, err := url.Parse(endpoint.URL)
if err != nil {
return nil, err
}
host := url.Host
if url.Scheme == "unix" || url.Scheme == "npipe" {
host = url.Path
}
if endpoint.TLSConfig.TLS {
tlsConfig, err := crypto.CreateTLSConfigurationFromDisk(endpoint.TLSConfig.TLSCACertPath, endpoint.TLSConfig.TLSCertPath, endpoint.TLSConfig.TLSKeyPath, endpoint.TLSConfig.TLSSkipVerify)
if err != nil {
return nil, err
}
return tls.Dial(url.Scheme, host, tlsConfig)
}
con, err := createDial(url.Scheme, host)
return con, err
}

44
api/http/handler/websocket/proxy.go Normal file
View File

@ -0,0 +1,44 @@
package websocket
import (
"crypto/tls"
"github.com/gorilla/websocket"
"github.com/koding/websocketproxy"
"github.com/portainer/portainer/api"
"net/http"
"net/url"
)
func (handler *Handler) proxyWebsocketRequest(w http.ResponseWriter, r *http.Request, params *webSocketRequestParams) error {
agentURL, err := url.Parse(params.endpoint.URL)
if err != nil {
return err
}
agentURL.Scheme = "ws"
proxy := websocketproxy.NewProxy(agentURL)
if params.endpoint.TLSConfig.TLS || params.endpoint.TLSConfig.TLSSkipVerify {
agentURL.Scheme = "wss"
proxy.Dialer = &websocket.Dialer{
TLSClientConfig: &tls.Config{
InsecureSkipVerify: params.endpoint.TLSConfig.TLSSkipVerify,
},
}
}
signature, err := handler.SignatureService.CreateSignature(portainer.PortainerAgentSignatureMessage)
if err != nil {
return err
}
proxy.Director = func(incoming *http.Request, out http.Header) {
out.Set(portainer.PortainerAgentPublicKeyHeader, handler.SignatureService.EncodedPublicKey())
out.Set(portainer.PortainerAgentSignatureHeader, signature)
out.Set(portainer.PortainerAgentTargetHeader, params.nodeName)
}
proxy.ServeHTTP(w, r)
return nil
}

40
api/http/handler/websocket/stream.go Normal file
View File

@ -0,0 +1,40 @@
package websocket
import (
"bufio"
"github.com/gorilla/websocket"
"net"
)
func streamFromWebsocketConnToTCPConn(websocketConn *websocket.Conn, tcpConn net.Conn, errorChan chan error) {
for {
_, in, err := websocketConn.ReadMessage()
if err != nil {
errorChan <- err
break
}
_, err = tcpConn.Write(in)
if err != nil {
errorChan <- err
break
}
}
}
func streamFromTCPConnToWebsocketConn(websocketConn *websocket.Conn, br *bufio.Reader, errorChan chan error) {
for {
out := make([]byte, 2048)
_, err := br.Read(out)
if err != nil {
errorChan <- err
break
}
err = websocketConn.WriteMessage(websocket.TextMessage, out)
if err != nil {
errorChan <- err
break
}
}
}

11
api/http/handler/websocket/types.go Normal file
View File

@ -0,0 +1,11 @@
package websocket
import (
"github.com/portainer/portainer/api"
)
type webSocketRequestParams struct {
ID string
nodeName string
endpoint *portainer.Endpoint
}

22
app/docker/__module.js
View File

@ -75,12 +75,23 @@ angular.module('portainer.docker', ['portainer.app'])
}
};
var containerConsole = {
name: 'docker.containers.container.console',
url: '/console',
var containerAttachConsole = {
name: 'docker.containers.container.attach',
url: '/attach',
views: {
'content@': {
templateUrl: './views/containers/console/containerconsole.html',
templateUrl: './views/containers/console/attach.html',
controller: 'ContainerConsoleController'
}
}
};
var containerExecConsole = {
name: 'docker.containers.container.exec',
url: '/exec',
views: {
'content@': {
templateUrl: './views/containers/console/exec.html',
controller: 'ContainerConsoleController'
}
}
@ -473,7 +484,8 @@ angular.module('portainer.docker', ['portainer.app'])
$stateRegistryProvider.register(configCreation);
$stateRegistryProvider.register(containers);
$stateRegistryProvider.register(container);
$stateRegistryProvider.register(containerConsole);
$stateRegistryProvider.register(containerExecConsole);
$stateRegistryProvider.register(containerAttachConsole);
$stateRegistryProvider.register(containerCreation);
$stateRegistryProvider.register(containerInspect);
$stateRegistryProvider.register(containerLogs);

17
app/docker/components/container-quick-actions/containerQuickActions.html
View File

@ -34,11 +34,18 @@
title="Stats">
<i class="fa fa-chart-area space-right" aria-hidden="true"></i>
</a>
<a
ng-if="$ctrl.state.showQuickActionConsole && ['starting', 'running', 'healthy', 'unhealthy'].indexOf($ctrl.status) !== -1 && $ctrl.taskId === undefined"
style="margin: 0 2.5px;"
ui-sref="docker.containers.container.console({id: $ctrl.containerId, nodeName: $ctrl.nodeName})"
title="Console">
<a
ng-if="$ctrl.state.showQuickActionConsole && ['starting', 'running', 'healthy', 'unhealthy'].indexOf($ctrl.status) !== -1 && $ctrl.taskId === undefined"
style="margin: 0 2.5px;"
ui-sref="docker.containers.container.exec({id: $ctrl.containerId, nodeName: $ctrl.nodeName})"
title="Exec Console">
<i class="fa fa-terminal space-right" aria-hidden="true"></i>
</a>
<a
ng-if="$ctrl.state.showQuickActionConsole && ['starting', 'running', 'healthy', 'unhealthy'].indexOf($ctrl.status) !== -1 && $ctrl.taskId === undefined"
style="margin: 0 2.5px;"
ui-sref="docker.containers.container.attach({id: $ctrl.containerId, nodeName: $ctrl.nodeName})"
title="Attach Console">
<i class="fa fa-plug space-right" aria-hidden="true"></i>
</a>
</div>

4
app/docker/rest/container.js
View File

@ -73,6 +73,10 @@ function ContainerFactory($resource, API_ENDPOINT_ENDPOINTS, EndpointProvider, C
},
prune: {
method: 'POST', params: { action: 'prune', filters: '@filters' }
},
resize: {
method: 'POST', params: {id: '@id', action: 'resize', h: '@height', w: '@width'},
transformResponse: genericHandler, ignoreLoadingBar: true
}
});
}]);

24
app/docker/services/containerService.js
View File

@ -1,8 +1,8 @@
import { ContainerDetailsViewModel, ContainerViewModel, ContainerStatsViewModel } from '../models/container';
angular.module('portainer.docker')
.factory('ContainerService', ['$q', 'Container', 'ResourceControlService', 'LogHelper',
function ContainerServiceFactory($q, Container, ResourceControlService, LogHelper) {
.factory('ContainerService', ['$q', 'Container', 'ResourceControlService', 'LogHelper', '$timeout',
function ContainerServiceFactory($q, Container, ResourceControlService, LogHelper, $timeout) {
'use strict';
var service = {};
@ -37,6 +37,26 @@ function ContainerServiceFactory($q, Container, ResourceControlService, LogHelpe
return deferred.promise;
};
service.resizeTTY = function (id, width, height, timeout) {
var deferred = $q.defer();
$timeout(function() {
Container.resize({}, {id: id, height: height, width: width}).$promise
.then(function success(data) {
if (data.message) {
deferred.reject({msg: 'Unable to resize tty of container ' + id, err: data.message});
} else {
deferred.resolve(data);
}
})
.catch(function error(err) {
deferred.reject({msg: 'Unable to resize tty of container ' + id, err: err});
});
}, timeout);
return deferred.promise;
};
service.startContainer = function(id) {
return Container.start({ id: id }, {}).$promise;
};

44
app/docker/services/execService.js
View File

@ -1,27 +1,27 @@
angular.module('portainer.docker')
.factory('ExecService', ['$q', '$timeout', 'Exec', function ExecServiceFactory($q, $timeout, Exec) {
'use strict';
var service = {};
.factory('ExecService', ['$q', '$timeout', 'Exec', function ExecServiceFactory($q, $timeout, Exec) {
'use strict';
var service = {};
service.resizeTTY = function(execId, height, width, timeout) {
var deferred = $q.defer();
service.resizeTTY = function (execId, width, height, timeout) {
var deferred = $q.defer();
$timeout(function() {
Exec.resize({}, { id: execId, height: height, width: width }).$promise
.then(function success(data) {
if (data.message) {
deferred.reject({ msg: 'Unable to exec into container', err: data.message });
} else {
deferred.resolve(data);
}
})
.catch(function error(err) {
deferred.reject({ msg: 'Unable to exec into container', err: err });
});
}, timeout);
$timeout(function() {
Exec.resize({}, {id: execId, height: height, width: width}).$promise
.then(function success(data) {
if (data.message) {
deferred.reject({msg: "Unable to resize tty of exec", err: data.message});
} else {
deferred.resolve(data);
}
})
.catch(function error(err) {
deferred.reject({msg: "Unable to resize tty of exec", err: err});
});
}, timeout);
return deferred.promise;
};
return deferred.promise;
};
return service;
}]);
return service;
}]);

50
app/docker/views/containers/console/attach.html Normal file
View File

@ -0,0 +1,50 @@
<rd-header>
<rd-header-title title-text="Container console"></rd-header-title>
<rd-header-content>
<a ui-sref="docker.containers">Containers</a> &gt; <a ui-sref="docker.containers.container({id: container.Id})">{{ container.Name|trimcontainername }}</a> &gt; Console
</rd-header-content>
</rd-header>
<div class="row" ng-init="autoconnectAttachView()" ng-show="loaded">
<div class="col-lg-12 col-md-12 col-xs-12">
<rd-widget>
<rd-widget-header icon="fa-terminal" title-text="Attach"></rd-widget-header>
<rd-widget-body>
<div class="small text-warning" ng-if="!container.Config.OpenStdin">
<p>
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
The interactive-flag is not set. You might not be able to use the console properly.
</p>
</div>
<div class="small text-warning" ng-if="!container.Config.Tty">
<p>
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
The TTY-flag is not set. You might not be able to use the console properly.
</p>
</div>
<div class="small text-danger" ng-hide="container.State.Running">
<p>
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
The container is not running.
</p>
</div>
<button type="button" class="btn btn-primary" ng-disabled="state === states.connecting || !container.State.Running" ng-click="state == states.disconnected ? connectAttach() : disconnect()">
<span ng-show="state === states.disconnected">Attach to Container</span>
<span ng-show="state === states.connected">Detach</span>
<span ng-show="state === states.connecting">Attaching...</span>
</button>
</rd-widget-body>
</rd-widget>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12">
<div id="terminal-container" class="terminal-container"></div>
</div>
</div>

328
app/docker/views/containers/console/containerConsoleController.js
View File

@ -1,131 +1,215 @@
import { Terminal } from 'xterm';
import {Terminal} from 'xterm';
angular.module('portainer.docker')
.controller('ContainerConsoleController', ['$scope', '$transition$', 'ContainerService', 'ImageService', 'EndpointProvider', 'Notifications', 'ContainerHelper', 'ExecService', 'HttpRequestHelper', 'LocalStorage', 'CONSOLE_COMMANDS_LABEL_PREFIX',
function ($scope, $transition$, ContainerService, ImageService, EndpointProvider, Notifications, ContainerHelper, ExecService, HttpRequestHelper, LocalStorage, CONSOLE_COMMANDS_LABEL_PREFIX) {
var socket, term;
.controller('ContainerConsoleController', ['$scope', '$transition$', 'ContainerService', 'ImageService', 'EndpointProvider', 'Notifications', 'ContainerHelper', 'ExecService', 'HttpRequestHelper', 'LocalStorage', 'CONSOLE_COMMANDS_LABEL_PREFIX',
function ($scope, $transition$, ContainerService, ImageService, EndpointProvider, Notifications, ContainerHelper, ExecService, HttpRequestHelper, LocalStorage, CONSOLE_COMMANDS_LABEL_PREFIX) {
var socket, term;
$scope.state = {
loaded: false,
connected: false
};
$scope.formValues = {};
$scope.containerCommands = [];
// Ensure the socket is closed before leaving the view
$scope.$on('$stateChangeStart', function () {
if (socket && socket !== null) {
socket.close();
}
});
$scope.connect = function() {
var termWidth = Math.floor(($('#terminal-container').width() - 20) / 8.39);
var termHeight = 30;
var command = $scope.formValues.isCustomCommand ?
$scope.formValues.customCommand : $scope.formValues.command;
var execConfig = {
id: $transition$.params().id,
AttachStdin: true,
AttachStdout: true,
AttachStderr: true,
Tty: true,
User: $scope.formValues.user,
Cmd: ContainerHelper.commandStringToArray(command)
};
var execId;
ContainerService.createExec(execConfig)
.then(function success(data) {
execId = data.Id;
var jwtToken = LocalStorage.getJWT();
var url = window.location.href.split('#')[0] + 'api/websocket/exec?id=' + execId + '&endpointId=' + EndpointProvider.endpointID() + '&token=' + jwtToken;
if ($transition$.params().nodeName) {
url += '&nodeName=' + $transition$.params().nodeName;
}
if (url.indexOf('https') > -1) {
url = url.replace('https://', 'wss://');
} else {
url = url.replace('http://', 'ws://');
}
initTerm(url, termHeight, termWidth);
return ExecService.resizeTTY(execId, termHeight, termWidth, 2000);
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to exec into container');
$scope.disconnect();
});
};
$scope.disconnect = function() {
$scope.state.connected = false;
if (socket !== null) {
socket.close();
}
if (term !== null) {
term.destroy();
}
};
function initTerm(url, height, width) {
socket = new WebSocket(url);
$scope.state.connected = true;
socket.onopen = function() {
term = new Terminal();
term.on('data', function (data) {
socket.send(data);
let states = Object.freeze({
disconnected: 0,
connecting: 1,
connected: 2,
});
term.open(document.getElementById('terminal-container'));
term.focus();
term.resize(width, height);
term.setOption('cursorBlink', true);
term.fit();
window.onresize = function() {
term.fit();
};
$scope.loaded = false;
$scope.states = states;
$scope.state = states.disconnected;
socket.onmessage = function (e) {
term.write(e.data);
};
socket.onerror = function () {
$scope.state.connected = false;
};
socket.onclose = function() {
$scope.state.connected = false;
};
};
}
$scope.formValues = {};
$scope.containerCommands = [];
function initView() {
HttpRequestHelper.setPortainerAgentTargetHeader($transition$.params().nodeName);
ContainerService.container($transition$.params().id)
.then(function success(data) {
var container = data;
$scope.container = container;
return ImageService.image(container.Image);
})
.then(function success(data) {
var image = data;
var containerLabels = $scope.container.Config.Labels;
$scope.imageOS = image.Os;
$scope.formValues.command = image.Os === 'windows' ? 'powershell' : 'bash';
$scope.containerCommands = Object.keys(containerLabels)
.filter(function(label) {
return label.indexOf(CONSOLE_COMMANDS_LABEL_PREFIX) === 0;
// Ensure the socket is closed before leaving the view
$scope.$on('$stateChangeStart', function () {
$scope.disconnect();
});
$scope.connectAttach = function() {
if ($scope.state > states.disconnected) {
return;
}
$scope.state = states.connecting;
let attachId = $transition$.params().id;
ContainerService.container(attachId).then((details) => {
if (!details.State.Running) {
Notifications.error("Failure", details, "Container " + attachId + " is not running!");
$scope.disconnect();
return;
}
const params = {
token: LocalStorage.getJWT(),
endpointId: EndpointProvider.endpointID(),
id: attachId
};
var url = window.location.href.split('#')[0] + 'api/websocket/attach?' + (Object.keys(params).map((k) => k + "=" + params[k]).join("&"));
initTerm(url, ContainerService.resizeTTY.bind(this, attachId));
})
.map(function(label) {
return {title: label.replace(CONSOLE_COMMANDS_LABEL_PREFIX, ''), command: containerLabels[label]};
});
$scope.state.loaded = true;
})
.catch(function error(err) {
Notifications.error('Error', err, 'Unable to retrieve container details');
});
}
.catch(function error(err) {
Notifications.error('Error', err, 'Unable to retrieve container details');
$scope.disconnect();
});
};
initView();
}]);
$scope.connectExec = function () {
if ($scope.state > states.disconnected) {
return;
}
$scope.state = states.connecting;
var command = $scope.formValues.isCustomCommand ?
$scope.formValues.customCommand : $scope.formValues.command;
var execConfig = {
id: $transition$.params().id,
AttachStdin: true,
AttachStdout: true,
AttachStderr: true,
Tty: true,
User: $scope.formValues.user,
Cmd: ContainerHelper.commandStringToArray(command)
};
ContainerService.createExec(execConfig)
.then(function success(data) {
const params = {
token: LocalStorage.getJWT(),
endpointId: EndpointProvider.endpointID(),
id: data.Id
};
var url = window.location.href.split('#')[0] + 'api/websocket/exec?' + (Object.keys(params).map((k) => k + "=" + params[k]).join("&"));
initTerm(url, ExecService.resizeTTY.bind(this, params.id));
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to exec into container');
$scope.disconnect();
});
};
$scope.disconnect = function () {
if (socket) {
socket.close();
}
if ($scope.state > states.disconnected) {
$scope.state = states.disconnected;
if (term) {
term.write("\n\r(connection closed)");
term.dispose();
}
}
};
$scope.autoconnectAttachView = function () {
return $scope.initView().then(function success() {
if ($scope.container.State.Running) {
$scope.connectAttach();
}
});
};
function resize(restcall, add) {
add = add || 0;
term.fit();
var termWidth = term.cols;
var termHeight = 30;
term.resize(termWidth, termHeight);
restcall(termWidth + add, termHeight + add, 1);
}
function initTerm(url, resizeRestCall) {
let resizefun = resize.bind(this, resizeRestCall);
if ($transition$.params().nodeName) {
url += '&nodeName=' + $transition$.params().nodeName;
}
if (url.indexOf('https') > -1) {
url = url.replace('https://', 'wss://');
} else {
url = url.replace('http://', 'ws://');
}
socket = new WebSocket(url);
socket.onopen = function () {
$scope.state = states.connected;
term = new Terminal();
term.on('data', function (data) {
socket.send(data);
});
var terminal_container = document.getElementById('terminal-container');
term.open(terminal_container);
term.focus();
term.setOption('cursorBlink', true);
window.onresize = function () {
resizefun();
$scope.$apply();
};
$scope.$watch('toggle', function () {
setTimeout(resizefun, 400);
});
socket.onmessage = function (e) {
term.write(e.data);
};
socket.onerror = function (err) {
$scope.disconnect();
$scope.$apply();
Notifications.error("Failure", err, "Connection error");
};
socket.onclose = function () {
$scope.disconnect();
$scope.$apply();
};
resizefun(1);
$scope.$apply();
};
}
$scope.initView = function () {
HttpRequestHelper.setPortainerAgentTargetHeader($transition$.params().nodeName);
return ContainerService.container($transition$.params().id)
.then(function success(data) {
var container = data;
$scope.container = container;
return ImageService.image(container.Image);
})
.then(function success(data) {
var image = data;
var containerLabels = $scope.container.Config.Labels;
$scope.imageOS = image.Os;
$scope.formValues.command = image.Os === 'windows' ? 'powershell' : 'bash';
$scope.containerCommands = Object.keys(containerLabels)
.filter(function (label) {
return label.indexOf(CONSOLE_COMMANDS_LABEL_PREFIX) === 0;
})
.map(function (label) {
return {
title: label.replace(CONSOLE_COMMANDS_LABEL_PREFIX, ''),
command: containerLabels[label]
};
});
$scope.loaded = true;
})
.catch(function error(err) {
Notifications.error('Error', err, 'Unable to retrieve container details');
});
}
}]);

24
app/docker/views/containers/console/containerconsole.html → app/docker/views/containers/console/exec.html
View File

@ -1,17 +1,17 @@
<rd-header>
<rd-header-title title-text="Container console"></rd-header-title>
<rd-header-content ng-if="state.loaded">
<rd-header-content>
<a ui-sref="docker.containers">Containers</a> &gt; <a ui-sref="docker.containers.container({id: container.Id})">{{ container.Name|trimcontainername }}</a> &gt; Console
</rd-header-content>
</rd-header>
<div class="row" ng-if="state.loaded">
<div class="row" ng-init="initView()" ng-show="loaded">
<div class="col-lg-12 col-md-12 col-xs-12">
<rd-widget>
<rd-widget-header icon="fa-terminal" title-text="Console"></rd-widget-header>
<rd-widget-header icon="fa-terminal" title-text="Execute"></rd-widget-header>
<rd-widget-body>
<form class="form-horizontal">
<div ng-if="!state.connected">
<div ng-if="state === states.disconnected">
<!-- command-list -->
<div class="form-group">
<label for="command" class="col-lg-1 text-left col-sm-2 control-label">Command</label>
@ -51,16 +51,22 @@
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="button" class="btn btn-primary" ng-disabled="state.connected" button-spinner="state.connected" ng-click="connect()">
<span ng-hide="state.leaveNetworkInProgress">Connect</span>
<span ng-show="state.leaveNetworkInProgress">Connecting...</span>
<button type="button" class="btn btn-primary" ng-disabled="!container.State.Running" ng-click="connectExec()">
<span>Connect</span>
</button>
<span class="small text-danger" ng-hide="container.State.Running">
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
The container is not running.
</span>
</div>
</div>
</div>
<div ng-if="state.connected">
<div ng-if="state !== states.disconnected">
<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>
<button type="button" class="btn btn-primary" ng-click="disconnect()">
<span ng-show="state === states.connected">Disconnect</span>
<span ng-show="state === states.connecting">Connecting...</span>
</button>
</div>
</form>
</rd-widget-body>

3
app/docker/views/containers/edit/container.html
View File

@ -87,7 +87,8 @@
<a class="btn" type="button" ui-sref="docker.containers.container.logs({ id: container.Id })"><i class="fa fa-file-alt space-right" aria-hidden="true"></i>Logs</a>
<a class="btn" type="button" ui-sref="docker.containers.container.inspect({ id: container.Id })"><i class="fa fa-info-circle space-right" aria-hidden="true"></i>Inspect</a>
<a class="btn" type="button" ui-sref="docker.containers.container.stats({ id: container.Id })"><i class="fa fa-chart-area space-right" aria-hidden="true"></i>Stats</a>
<a class="btn" type="button" ui-sref="docker.containers.container.console({ id: container.Id })"><i class="fa fa-terminal space-right" aria-hidden="true"></i>Console</a>
<a class="btn" type="button" ui-sref="docker.containers.container.exec({ id: container.Id })"><i class="fa fa-terminal space-right" aria-hidden="true"></i>Exec</a>
<a class="btn" type="button" ui-sref="docker.containers.container.attach({ id: container.Id })"><i class="fa fa-plug space-right" aria-hidden="true"></i>Attach</a>
</div>
</td>
</tr>

2
assets/css/app.css
View File

@ -232,7 +232,7 @@ a[ng-click]{
.terminal-container {
width: 100%;
padding: 10px 5px;
padding: 10px 0;
}
.interactive {