mirror of
https://github.com/portainer/portainer.git
synced 2025-08-05 05:45:22 +02:00
feat(UI): migrate console view to react EE-2276 (#8767)
This commit is contained in:
Prabhat Khera
GitHub
parent
c03b2ebbc1
commit
926ca19a1b
9 changed files with 206 additions and 212 deletions
|
|
@ -174,7 +174,7 @@ angular.module('portainer.kubernetes', ['portainer.app', registriesModule, custo
|
|||
url: '/:pod/:container/console',
|
||||
views: {
|
||||
'content@': {
|
||||
component: 'kubernetesApplicationConsoleView',
|
||||
component: 'kubernetesConsoleView',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import { IngressesDatatableView } from '@/react/kubernetes/ingresses/IngressData
|
|||
import { CreateIngressView } from '@/react/kubernetes/ingresses/CreateIngressView';
|
||||
import { DashboardView } from '@/react/kubernetes/DashboardView';
|
||||
import { ServicesView } from '@/react/kubernetes/ServicesView';
|
||||
import { ConsoleView } from '@/react/kubernetes/applications/ConsoleView';
|
||||
|
||||
export const viewsModule = angular
|
||||
.module('portainer.kubernetes.react.views', [])
|
||||
|
|
@ -29,4 +30,8 @@ export const viewsModule = angular
|
|||
.component(
|
||||
'kubernetesDashboardView',
|
||||
r2a(withUIRouter(withReactQuery(withCurrentUser(DashboardView))), [])
|
||||
)
|
||||
.component(
|
||||
'kubernetesConsoleView',
|
||||
r2a(withUIRouter(withReactQuery(withCurrentUser(ConsoleView))), [])
|
||||
).name;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
angular.module('portainer.kubernetes').component('kubernetesApplicationConsoleView', {
|
||||
templateUrl: './console.html',
|
||||
controller: 'KubernetesApplicationConsoleController',
|
||||
controllerAs: 'ctrl',
|
||||
bindings: {
|
||||
$transition$: '<',
|
||||
endpoint: '<',
|
||||
},
|
||||
});
|
||||
|
|
@ -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);
|
||||
Loading…
Add table
Add a link
Reference in a new issue