mirror of
https://github.com/portainer/portainer.git
synced 2025-08-08 23:35:31 +02:00
chore(project): add prettier for code format (#3645)
* chore(project): install prettier and lint-staged * chore(project): apply prettier to html too * chore(project): git ignore eslintcache * chore(project): add a comment about format script * chore(prettier): update printWidth * chore(prettier): remove useTabs option * chore(prettier): add HTML validation * refactor(prettier): fix closing tags * feat(prettier): define angular parser for html templates * style(prettier): run prettier on codebase Co-authored-by: Anthony Lapenna <lapenna.anthony@gmail.com>
This commit is contained in:
Chaim Lev-Ari
GitHub
parent
6663073be1
commit
cf5056d9c0
714 changed files with 31228 additions and 28305 deletions
|
|
@ -1,7 +1,7 @@
|
|||
<rd-header>
|
||||
<rd-header-title title-text="Container console"></rd-header-title>
|
||||
<rd-header-content>
|
||||
<a ui-sref="docker.containers">Containers</a> > <a ui-sref="docker.containers.container({id: container.Id})">{{ container.Name|trimcontainername }}</a> > Console
|
||||
<a ui-sref="docker.containers">Containers</a> > <a ui-sref="docker.containers.container({id: container.Id})">{{ container.Name | trimcontainername }}</a> > Console
|
||||
</rd-header-content>
|
||||
</rd-header>
|
||||
|
||||
|
|
@ -10,7 +10,6 @@
|
|||
<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>
|
||||
|
|
@ -32,12 +31,16 @@
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-primary" ng-disabled="state === states.connecting || !container.State.Running" ng-click="state == states.disconnected ? connectAttach() : disconnect()">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,41 +1,63 @@
|
|||
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;
|
||||
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,
|
||||
});
|
||||
let states = Object.freeze({
|
||||
disconnected: 0,
|
||||
connecting: 1,
|
||||
connected: 2,
|
||||
});
|
||||
|
||||
$scope.loaded = false;
|
||||
$scope.states = states;
|
||||
$scope.state = states.disconnected;
|
||||
$scope.loaded = false;
|
||||
$scope.states = states;
|
||||
$scope.state = states.disconnected;
|
||||
|
||||
$scope.formValues = {};
|
||||
$scope.containerCommands = [];
|
||||
$scope.formValues = {};
|
||||
$scope.containerCommands = [];
|
||||
|
||||
// Ensure the socket is closed before leaving the view
|
||||
$scope.$on('$stateChangeStart', function () {
|
||||
$scope.disconnect();
|
||||
});
|
||||
// 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.connectAttach = function () {
|
||||
if ($scope.state > states.disconnected) {
|
||||
return;
|
||||
}
|
||||
|
||||
$scope.state = states.connecting;
|
||||
$scope.state = states.connecting;
|
||||
|
||||
let attachId = $transition$.params().id;
|
||||
|
||||
ContainerService.container(attachId).then((details) => {
|
||||
let attachId = $transition$.params().id;
|
||||
|
||||
ContainerService.container(attachId)
|
||||
.then((details) => {
|
||||
if (!details.State.Running) {
|
||||
Notifications.error("Failure", details, "Container " + attachId + " is not running!");
|
||||
Notifications.error('Failure', details, 'Container ' + attachId + ' is not running!');
|
||||
$scope.disconnect();
|
||||
return;
|
||||
}
|
||||
|
|
@ -43,173 +65,177 @@ angular.module('portainer.docker')
|
|||
const params = {
|
||||
token: LocalStorage.getJWT(),
|
||||
endpointId: EndpointProvider.endpointID(),
|
||||
id: attachId
|
||||
id: attachId,
|
||||
};
|
||||
|
||||
var url = window.location.href.split('#')[0] + 'api/websocket/attach?' + (Object.keys(params).map((k) => k + "=" + params[k]).join("&"));
|
||||
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();
|
||||
}
|
||||
.catch(function error(err) {
|
||||
Notifications.error('Error', err, 'Unable to retrieve container details');
|
||||
$scope.disconnect();
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
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);
|
||||
$scope.connectExec = function () {
|
||||
if ($scope.state > states.disconnected) {
|
||||
return;
|
||||
}
|
||||
|
||||
function initTerm(url, resizeRestCall) {
|
||||
$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),
|
||||
};
|
||||
|
||||
let resizefun = resize.bind(this, resizeRestCall);
|
||||
ContainerService.createExec(execConfig)
|
||||
.then(function success(data) {
|
||||
const params = {
|
||||
token: LocalStorage.getJWT(),
|
||||
endpointId: EndpointProvider.endpointID(),
|
||||
id: data.Id,
|
||||
};
|
||||
|
||||
if ($transition$.params().nodeName) {
|
||||
url += '&nodeName=' + $transition$.params().nodeName;
|
||||
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();
|
||||
}
|
||||
if (url.indexOf('https') > -1) {
|
||||
url = url.replace('https://', 'wss://');
|
||||
} else {
|
||||
url = url.replace('http://', 'ws://');
|
||||
}
|
||||
};
|
||||
|
||||
$scope.autoconnectAttachView = function () {
|
||||
return $scope.initView().then(function success() {
|
||||
if ($scope.container.State.Running) {
|
||||
$scope.connectAttach();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
socket = new WebSocket(url);
|
||||
function resize(restcall, add) {
|
||||
add = add || 0;
|
||||
|
||||
term.fit();
|
||||
var termWidth = term.cols;
|
||||
var termHeight = 30;
|
||||
term.resize(termWidth, termHeight);
|
||||
|
||||
socket.onopen = function () {
|
||||
$scope.state = states.connected;
|
||||
term = new Terminal();
|
||||
restcall(termWidth + add, termHeight + add, 1);
|
||||
}
|
||||
|
||||
function initTerm(url, resizeRestCall) {
|
||||
let resizefun = resize.bind(this, resizeRestCall);
|
||||
|
||||
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);
|
||||
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://');
|
||||
}
|
||||
|
||||
window.onresize = function () {
|
||||
resizefun();
|
||||
$scope.$apply();
|
||||
};
|
||||
socket = new WebSocket(url);
|
||||
|
||||
$scope.$watch('toggle', function () {
|
||||
setTimeout(resizefun, 400);
|
||||
});
|
||||
socket.onopen = function () {
|
||||
$scope.state = states.connected;
|
||||
term = new Terminal();
|
||||
|
||||
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();
|
||||
};
|
||||
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);
|
||||
|
||||
resizefun(1);
|
||||
window.onresize = function () {
|
||||
resizefun();
|
||||
$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');
|
||||
});
|
||||
}
|
||||
}]);
|
||||
$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');
|
||||
});
|
||||
};
|
||||
},
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<rd-header>
|
||||
<rd-header-title title-text="Container console"></rd-header-title>
|
||||
<rd-header-content>
|
||||
<a ui-sref="docker.containers">Containers</a> > <a ui-sref="docker.containers.container({id: container.Id})">{{ container.Name|trimcontainername }}</a> > Console
|
||||
<a ui-sref="docker.containers">Containers</a> > <a ui-sref="docker.containers.container({id: container.Id})">{{ container.Name | trimcontainername }}</a> > Console
|
||||
</rd-header-content>
|
||||
</rd-header>
|
||||
|
||||
|
|
@ -13,32 +13,30 @@
|
|||
<form class="form-horizontal">
|
||||
<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>
|
||||
<div class="col-lg-11 col-sm-10">
|
||||
<div class="input-group" ng-if="!formValues.isCustomCommand">
|
||||
<span class="input-group-addon">
|
||||
<i class="fab fa-linux" aria-hidden="true" ng-if="imageOS == 'linux'"></i>
|
||||
<i class="fab fa-windows" aria-hidden="true" ng-if="imageOS == 'windows'"></i>
|
||||
</span>
|
||||
<select class="form-control" ng-model="formValues.command" id="command">
|
||||
<option value="ash" ng-if="imageOS == 'linux'">/bin/ash</option>
|
||||
<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>
|
||||
<option ng-repeat="command in containerCommands" value="{{command.command}}">{{command.title}}: {{command.command}}</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 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="fab fa-linux" aria-hidden="true" ng-if="imageOS == 'linux'"></i>
|
||||
<i class="fab fa-windows" aria-hidden="true" ng-if="imageOS == 'windows'"></i>
|
||||
</span>
|
||||
<select class="form-control" ng-model="formValues.command" id="command">
|
||||
<option value="ash" ng-if="imageOS == 'linux'">/bin/ash</option>
|
||||
<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>
|
||||
<option ng-repeat="command in containerCommands" value="{{ command.command }}">{{ command.title }}: {{ command.command }}</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>
|
||||
<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">
|
||||
|
|
@ -46,7 +44,7 @@
|
|||
<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">
|
||||
<input class="form-control" type="text" name="username" ng-model="formValues.user" placeholder="root" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
|
|
@ -62,7 +60,10 @@
|
|||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<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-primary" ng-click="disconnect()">
|
||||
<span ng-show="state === states.connected">Disconnect</span>
|
||||
<span ng-show="state === states.connecting">Connecting...</span>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue