portainer/app/docker/views/containers/console/containerConsoleController.js

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;

      let states = Object.freeze({
        disconnected: 0,
        connecting: 1,
        connected: 2,
      });

      $scope.loaded = false;
      $scope.states = states;
      $scope.state = states.disconnected;

      $scope.formValues = {};
      $scope.containerCommands = [];

      // 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));
        })
          .catch(function error(err) {
            Notifications.error('Error', err, 'Unable to retrieve container details');
            $scope.disconnect();
          });
      };

      $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');
          });
      }
    }]);