Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-05 13:55:21 +02:00
Code Issues Releases Activity

feat(UI): migrate console view to react EE-2276 (#8767)

Browse source
This commit is contained in:
Prabhat Khera 2023-05-08 14:07:46 +12:00 • committed by GitHub
parent c03b2ebbc1
commit 926ca19a1b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 206 additions and 212 deletions
Download patch file Download diff file Expand all files Collapse all files

84
app/kubernetes/views/applications/console/console.html
View file

@ -1,84 +0,0 @@
<page-header
ng-if="ctrl.state.viewReady"
title="'Application console'"
breadcrumbs="[
{ label:'Namespaces', link:'kubernetes.resourcePools' },
{
label:ctrl.application.ResourcePool,
link: 'kubernetes.resourcePools.resourcePool',
linkParams:{ id: ctrl.application.ResourcePool }
},
{ label:'Applications', link:'kubernetes.applications' },
{
label:ctrl.application.Name,
link: 'kubernetes.applications.application',
linkParams:{ name: ctrl.application.Name, namespace: ctrl.application.ResourcePool }
},
'Pods',
ctrl.podName,
'Containers',
ctrl.containerName,
'Console'
]"
reload="true"
>
</page-header>
<kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
<div ng-if="ctrl.state.viewReady">
<div class="row">
<div class="col-sm-12">
<rd-widget>
<rd-widget-body>
<form class="form-horizontal" autocomplete="off">
<div class="col-sm-12 form-section-title"> Console </div>
<!-- Command -->
<div class="form-group">
<label for="console_command" class="col-sm-3 col-lg-2 control-label text-left">Command</label>
<div class="col-sm-8 input-group">
<span class="input-group-addon">
<pr-icon icon="'terminal'" class="mr-1"></pr-icon>
</span>
<input
type="text"
class="form-control"
placeholder="/bin/bash"
ng-model="ctrl.state.command"
name="console_command"
uib-typeahead="command for command in ctrl.state.availableCommands | filter:$viewValue | limitTo:5"
typeahead-min-length="0"
auto-focus
/>
</div>
</div>
<!-- !command -->
<div class="form-group">
<div class="col-sm-12">
<button
type="button"
class="btn btn-primary btn-sm"
style="margin: 0"
ng-if="!ctrl.state.connected"
ng-disabled="!ctrl.state.command || ctrl.state.connected"
ng-click="ctrl.connectConsole()"
button-spinner="ctrl.state.actionInProgress"
>
<span ng-hide="ctrl.state.actionInProgress">Connect</span>
<span ng-show="ctrl.state.actionInProgress">Connection in progress...</span>
</button>
<button type="button" class="btn btn-primary btn-sm" style="margin: 0" ng-if="ctrl.state.connected" ng-click="ctrl.disconnect()"> Disconnect </button>
</div>
</div>
</form>
</rd-widget-body>
</rd-widget>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="terminal-container" class="terminal-container"></div>
</div>
</div>
</div>

9
app/kubernetes/views/applications/console/console.js
View file

@ -1,9 +0,0 @@
angular.module('portainer.kubernetes').component('kubernetesApplicationConsoleView', {
templateUrl: './console.html',
controller: 'KubernetesApplicationConsoleController',
controllerAs: 'ctrl',
bindings: {
$transition$: '<',
endpoint: '<',
},
});

117
app/kubernetes/views/applications/console/consoleController.js
View file

@ -1,117 +0,0 @@
import angular from 'angular';
import { Terminal } from 'xterm';
import { baseHref } from '@/portainer/helpers/pathHelper';
class KubernetesApplicationConsoleController {
/* @ngInject */
constructor($async, $state, Notifications, KubernetesApplicationService, LocalStorage) {
this.$async = $async;
this.$state = $state;
this.Notifications = Notifications;
this.KubernetesApplicationService = KubernetesApplicationService;
this.LocalStorage = LocalStorage;
this.onInit = this.onInit.bind(this);
}
disconnect() {
this.state.socket.close();
this.state.term.dispose();
this.state.connected = false;
}
configureSocketAndTerminal(socket, term) {
socket.onopen = function () {
const terminal_container = document.getElementById('terminal-container');
term.open(terminal_container);
term.setOption('cursorBlink', true);
term.focus();
};
term.on('data', function (data) {
socket.send(data);
});
socket.onmessage = function (msg) {
term.write(msg.data);
};
socket.onerror = function (err) {
this.disconnect();
this.Notifications.error('Failure', err, 'Websocket connection error');
}.bind(this);
this.state.socket.onclose = function () {
this.disconnect();
}.bind(this);
this.state.connected = true;
}
connectConsole() {
const params = {
token: this.LocalStorage.getJWT(),
endpointId: this.endpoint.Id,
namespace: this.application.ResourcePool,
podName: this.podName,
containerName: this.containerName,
command: this.state.command,
};
const base = window.location.origin.startsWith('http') ? `${window.location.origin}${baseHref()}` : baseHref();
let url =
base +
'api/websocket/pod?' +
Object.keys(params)
.map((k) => k + '=' + params[k])
.join('&');
if (url.indexOf('https') > -1) {
url = url.replace('https://', 'wss://');
} else {
url = url.replace('http://', 'ws://');
}
this.state.socket = new WebSocket(url);
this.state.term = new Terminal();
this.configureSocketAndTerminal(this.state.socket, this.state.term);
}
async onInit() {
const availableCommands = ['/bin/bash', '/bin/sh'];
this.state = {
actionInProgress: false,
availableCommands: availableCommands,
command: availableCommands[1],
connected: false,
socket: null,
term: null,
viewReady: false,
};
const podName = this.$transition$.params().pod;
const applicationName = this.$transition$.params().name;
const namespace = this.$transition$.params().namespace;
const containerName = this.$transition$.params().container;
this.podName = podName;
this.containerName = containerName;
try {
this.application = await this.KubernetesApplicationService.get(namespace, applicationName);
} catch (err) {
this.Notifications.error('Failure', err, 'Unable to retrieve application logs');
} finally {
this.state.viewReady = true;
}
}
$onInit() {
return this.$async(this.onInit);
}
}
export default KubernetesApplicationConsoleController;
angular.module('portainer.kubernetes').controller('KubernetesApplicationConsoleController', KubernetesApplicationConsoleController);