mirror of
https://github.com/avatao-content/frontend-tutorial-framework
synced 2025-04-03 11:52:40 +00:00
Merge branch 'processlog-rework' into chausie
This commit is contained in:
commit
d7853d7154
@ -4,7 +4,6 @@ import { BrowserModule } from '@angular/platform-browser';
|
|||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
||||||
|
|
||||||
|
|
||||||
import { AppComponent } from './app.component';
|
import { AppComponent } from './app.component';
|
||||||
import { DashboardComponent } from './dashboard/dashboard.component';
|
import { DashboardComponent } from './dashboard/dashboard.component';
|
||||||
import { HeaderComponent } from './header/header.component';
|
import { HeaderComponent } from './header/header.component';
|
||||||
@ -16,14 +15,12 @@ import { IdeComponent } from './ide/ide.component';
|
|||||||
import { MessagesComponent } from './messages/messages.component';
|
import { MessagesComponent } from './messages/messages.component';
|
||||||
import { WebSocketService } from './services/websocket.service';
|
import { WebSocketService } from './services/websocket.service';
|
||||||
import { TerminalComponent } from './terminal/terminal.component';
|
import { TerminalComponent } from './terminal/terminal.component';
|
||||||
import { FSMUpdateService } from './services/fsmupdate.service';
|
|
||||||
import { ProcessManagerService } from './services/processmanager.service';
|
import { ProcessManagerService } from './services/processmanager.service';
|
||||||
import { AppRoutingModule } from './app-routing.module';
|
import { AppRoutingModule } from './app-routing.module';
|
||||||
import { TestmessengerComponent } from './testmessenger/testmessenger.component';
|
import { TestmessengerComponent } from './testmessenger/testmessenger.component';
|
||||||
import { DeploymentNotificationService } from './services/deployment-notification.service';
|
import { DeploymentNotificationService } from './services/deployment-notification.service';
|
||||||
import { SafePipe } from './pipes/safe.pipe';
|
import { SafePipe } from './pipes/safe.pipe';
|
||||||
import { ConsoleComponent } from './console/console.component';
|
import { ConsoleComponent } from './console/console.component';
|
||||||
import { ProcessLogService } from './services/processlog.service';
|
|
||||||
import { MonacoEditorModule } from 'ngx-monaco-editor';
|
import { MonacoEditorModule } from 'ngx-monaco-editor';
|
||||||
|
|
||||||
|
|
||||||
@ -53,10 +50,8 @@ import { MonacoEditorModule } from 'ngx-monaco-editor';
|
|||||||
MarkdownService,
|
MarkdownService,
|
||||||
WebSocketService,
|
WebSocketService,
|
||||||
TerminadoService,
|
TerminadoService,
|
||||||
FSMUpdateService,
|
|
||||||
ProcessManagerService,
|
ProcessManagerService,
|
||||||
DeploymentNotificationService,
|
DeploymentNotificationService,
|
||||||
ProcessLogService
|
|
||||||
],
|
],
|
||||||
bootstrap: [
|
bootstrap: [
|
||||||
AppComponent
|
AppComponent
|
||||||
|
@ -35,7 +35,6 @@ export const config = {
|
|||||||
},
|
},
|
||||||
showDeployButton: true,
|
showDeployButton: true,
|
||||||
reloadIframeOnDeploy: false,
|
reloadIframeOnDeploy: false,
|
||||||
showConsoleOnDeploy: true,
|
|
||||||
autoDetectFileLanguage: true,
|
autoDetectFileLanguage: true,
|
||||||
showMiniMap: false
|
showMiniMap: false
|
||||||
},
|
},
|
||||||
@ -50,12 +49,6 @@ export const config = {
|
|||||||
console: {
|
console: {
|
||||||
route: 'console',
|
route: 'console',
|
||||||
defaultContent: '',
|
defaultContent: '',
|
||||||
rewriteContentWithProcessLogsOnDeploy: 'stdout',
|
|
||||||
showLiveLogs: true,
|
|
||||||
defaultLogs: {
|
|
||||||
stdout: '',
|
|
||||||
stderr: ''
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
testmessenger: {
|
testmessenger: {
|
||||||
route: 'testmessenger'
|
route: 'testmessenger'
|
||||||
|
@ -1,15 +1,8 @@
|
|||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
|
||||||
import { WebSocketService } from '../services/websocket.service';
|
import { WebSocketService } from '../services/websocket.service';
|
||||||
import { WebSocketMessage } from '../message-types/websocket-message';
|
import { WebSocketMessage } from '../message-types/websocket-message';
|
||||||
import {
|
import { ConsoleReadMessage, ConsoleWriteMessage } from '../message-types/console-messages';
|
||||||
ConsoleReadMessage,
|
|
||||||
ConsoleWriteMessage,
|
|
||||||
ConsoleLiveLogsMessage,
|
|
||||||
ConsoleRewriteContentMessage
|
|
||||||
} from '../message-types/console-messages';
|
|
||||||
import { config } from '../config';
|
import { config } from '../config';
|
||||||
import { ProcessLogService } from '../services/processlog.service';
|
|
||||||
import { LogMessage } from '../message-types/log-message';
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-console',
|
selector: 'app-console',
|
||||||
@ -18,24 +11,21 @@ import { LogMessage } from '../message-types/log-message';
|
|||||||
})
|
})
|
||||||
export class ConsoleComponent implements OnInit {
|
export class ConsoleComponent implements OnInit {
|
||||||
console_content: string = config.console.defaultContent;
|
console_content: string = config.console.defaultContent;
|
||||||
rewriteContentWithProcessLogsOnDeploy: string = config.console.rewriteContentWithProcessLogsOnDeploy;
|
|
||||||
|
@Output() contentChanged = new EventEmitter<string>();
|
||||||
|
|
||||||
command_handlers = {
|
command_handlers = {
|
||||||
'console.read': this.readHandler.bind(this),
|
'console.read': this.readHandler.bind(this),
|
||||||
'console.write': this.writeHandler.bind(this),
|
'console.write': this.writeHandler.bind(this),
|
||||||
'console.showLiveLogs': this.showLiveLogsHandler.bind(this),
|
|
||||||
'console.rewriteContentWithProcessLogsOnDeploy': this.rewriteContentWithProcessLogsOnDeployHandler.bind(this)
|
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(private webSocketService: WebSocketService,
|
constructor(private webSocketService: WebSocketService) {}
|
||||||
private processLogService: ProcessLogService) {}
|
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.webSocketService.connect();
|
this.webSocketService.connect();
|
||||||
this.webSocketService.observeKey<WebSocketMessage>('console').subscribe(
|
this.webSocketService.observeKey<WebSocketMessage>('console').subscribe(
|
||||||
message => this.command_handlers[message.key](message)
|
message => this.command_handlers[message.key](message)
|
||||||
);
|
);
|
||||||
this.processLogService.newLogs.subscribe((data) => this.newLogsHandler(data));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
readHandler(message: ConsoleReadMessage) {
|
readHandler(message: ConsoleReadMessage) {
|
||||||
@ -44,23 +34,7 @@ export class ConsoleComponent implements OnInit {
|
|||||||
|
|
||||||
writeHandler(message: ConsoleWriteMessage) {
|
writeHandler(message: ConsoleWriteMessage) {
|
||||||
this.setContent(message.value);
|
this.setContent(message.value);
|
||||||
}
|
this.contentChanged.next(message.value);
|
||||||
|
|
||||||
newLogsHandler(logs: LogMessage) {
|
|
||||||
if (this.rewriteContentWithProcessLogsOnDeploy !== '') {
|
|
||||||
const log = logs[this.rewriteContentWithProcessLogsOnDeploy];
|
|
||||||
if (log) {
|
|
||||||
this.setContent(log);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
showLiveLogsHandler(message: ConsoleLiveLogsMessage) {
|
|
||||||
this.processLogService.showLiveLogs = message.value;
|
|
||||||
}
|
|
||||||
|
|
||||||
rewriteContentWithProcessLogsOnDeployHandler(message: ConsoleRewriteContentMessage) {
|
|
||||||
this.rewriteContentWithProcessLogsOnDeploy = message.value;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
setContent(content: string) {
|
setContent(content: string) {
|
||||||
|
@ -29,7 +29,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="tfw-ide">
|
<div class="tfw-ide">
|
||||||
<app-ide (newLogs)="setConsoleContentIfNoLiveLogs($event)"></app-ide>
|
<app-ide></app-ide>
|
||||||
</div>
|
</div>
|
||||||
<div class="tfw-terminal">
|
<div class="tfw-terminal">
|
||||||
<div class="btn-group btn-group-sm flex-wrap tao-grid-center-left tfw-console-terminal-menu">
|
<div class="btn-group btn-group-sm flex-wrap tao-grid-center-left tfw-console-terminal-menu">
|
||||||
|
@ -5,7 +5,6 @@ import { WebSocketService } from '../services/websocket.service';
|
|||||||
import { WebSocketMessage } from '../message-types/websocket-message';
|
import { WebSocketMessage } from '../message-types/websocket-message';
|
||||||
import { HideMessagesMessage, LayoutMessage, TerminalMenuItemMessage } from '../message-types/dashboard-messages';
|
import { HideMessagesMessage, LayoutMessage, TerminalMenuItemMessage } from '../message-types/dashboard-messages';
|
||||||
import { config } from '../config';
|
import { config } from '../config';
|
||||||
import { ProcessLogService } from '../services/processlog.service';
|
|
||||||
import { LogMessage } from '../message-types/log-message';
|
import { LogMessage } from '../message-types/log-message';
|
||||||
import { HttpClient } from '@angular/common/http';
|
import { HttpClient } from '@angular/common/http';
|
||||||
import { delay, retryWhen, tap } from 'rxjs/operators';
|
import { delay, retryWhen, tap } from 'rxjs/operators';
|
||||||
@ -42,7 +41,6 @@ export class DashboardComponent implements OnInit, OnDestroy {
|
|||||||
constructor(private deploymentNotificationService: DeploymentNotificationService,
|
constructor(private deploymentNotificationService: DeploymentNotificationService,
|
||||||
private webSocketService: WebSocketService,
|
private webSocketService: WebSocketService,
|
||||||
private changeDetectorRef: ChangeDetectorRef,
|
private changeDetectorRef: ChangeDetectorRef,
|
||||||
private processLogService: ProcessLogService,
|
|
||||||
private http: HttpClient) {}
|
private http: HttpClient) {}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
@ -141,13 +139,6 @@ export class DashboardComponent implements OnInit, OnDestroy {
|
|||||||
this.selectedTerminalMenuItem = item;
|
this.selectedTerminalMenuItem = item;
|
||||||
}
|
}
|
||||||
|
|
||||||
setConsoleContentIfNoLiveLogs(logs: LogMessage) {
|
|
||||||
this.processLogService.emitNewLogsIfNoLiveLogs(logs);
|
|
||||||
if (config.ide.showConsoleOnDeploy) {
|
|
||||||
this.selectTerminalMenuItem('console');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
scrollMessagesToBottom(): void {
|
scrollMessagesToBottom(): void {
|
||||||
const element = this.messages.nativeElement;
|
const element = this.messages.nativeElement;
|
||||||
// This must be done in the Angular event loop to avoid messing up
|
// This must be done in the Angular event loop to avoid messing up
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import { ChangeDetectorRef, Component, EventEmitter, OnInit, Output } from '@angular/core';
|
import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
import { WebSocketService } from '../services/websocket.service';
|
import { WebSocketService } from '../services/websocket.service';
|
||||||
import { WebSocketMessage } from '../message-types/websocket-message';
|
import { WebSocketMessage } from '../message-types/websocket-message';
|
||||||
import { IDEMessage } from '../message-types/ide-message';
|
import { IDEMessage } from '../message-types/ide-message';
|
||||||
@ -7,7 +6,7 @@ import { ProcessManagerService } from '../services/processmanager.service';
|
|||||||
import { DeploymentNotificationService } from '../services/deployment-notification.service';
|
import { DeploymentNotificationService } from '../services/deployment-notification.service';
|
||||||
import { config } from '../config';
|
import { config } from '../config';
|
||||||
import { LanguageMap } from './language-map';
|
import { LanguageMap } from './language-map';
|
||||||
import { filter, first } from 'rxjs/operators';
|
import { first } from 'rxjs/operators';
|
||||||
|
|
||||||
enum DeployButtonState {
|
enum DeployButtonState {
|
||||||
DEPLOYED,
|
DEPLOYED,
|
||||||
@ -47,8 +46,6 @@ export class IdeComponent implements OnInit {
|
|||||||
minimap: {enabled: config.ide.showMiniMap}
|
minimap: {enabled: config.ide.showMiniMap}
|
||||||
};
|
};
|
||||||
|
|
||||||
@Output() newLogs = new EventEmitter<any>();
|
|
||||||
|
|
||||||
command_handlers = {
|
command_handlers = {
|
||||||
'ide.reload': this.reloadHandler.bind(this),
|
'ide.reload': this.reloadHandler.bind(this),
|
||||||
'ide.read': this.readHandler.bind(this),
|
'ide.read': this.readHandler.bind(this),
|
||||||
@ -86,13 +83,7 @@ export class IdeComponent implements OnInit {
|
|||||||
this.processManagerService.init();
|
this.processManagerService.init();
|
||||||
this.processManagerService.subscribeCallback(
|
this.processManagerService.subscribeCallback(
|
||||||
config.ide.deployProcessName,
|
config.ide.deployProcessName,
|
||||||
message => {
|
() => this.deploymentNotificationService.deploying.next(false)
|
||||||
this.deploymentNotificationService.deploying.next(false);
|
|
||||||
this.newLogs.emit({
|
|
||||||
stdout: message.stdout,
|
|
||||||
stderr: message.stderr
|
|
||||||
});
|
|
||||||
}
|
|
||||||
);
|
);
|
||||||
|
|
||||||
this.processManagerService.subscribeSuccessCallback(
|
this.processManagerService.subscribeSuccessCallback(
|
||||||
|
@ -1,6 +0,0 @@
|
|||||||
import { WebSocketMessage } from './websocket-message';
|
|
||||||
|
|
||||||
export interface FSMUpdateMessage extends WebSocketMessage {
|
|
||||||
current_state: string;
|
|
||||||
valid_transitions: object;
|
|
||||||
}
|
|
@ -1,4 +0,0 @@
|
|||||||
import { LogMessage } from './log-message';
|
|
||||||
import { WebSocketMessage } from './websocket-message';
|
|
||||||
|
|
||||||
export interface ProcessLogMessage extends WebSocketMessage, LogMessage {}
|
|
@ -1,20 +0,0 @@
|
|||||||
import { Injectable } from '@angular/core';
|
|
||||||
import { WebSocketService } from './websocket.service';
|
|
||||||
|
|
||||||
import { FSMUpdateMessage } from '../message-types/fsm-update-message';
|
|
||||||
|
|
||||||
@Injectable()
|
|
||||||
export class FSMUpdateService {
|
|
||||||
public current_state: string;
|
|
||||||
public valid_transitions: object;
|
|
||||||
|
|
||||||
constructor(private websocketService: WebSocketService) {}
|
|
||||||
|
|
||||||
public init(): void {
|
|
||||||
this.websocketService.observeKey<FSMUpdateMessage>('fsm.update').subscribe(message => {
|
|
||||||
this.current_state = message.current_state;
|
|
||||||
this.valid_transitions = message.valid_transitions;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
@ -1,34 +0,0 @@
|
|||||||
import { Injectable } from '@angular/core';
|
|
||||||
import { WebSocketService } from './websocket.service';
|
|
||||||
import { LogMessage } from '../message-types/log-message';
|
|
||||||
import { ProcessLogMessage } from '../message-types/process-log-message';
|
|
||||||
import { config } from '../config';
|
|
||||||
import { BehaviorSubject } from 'rxjs';
|
|
||||||
|
|
||||||
@Injectable()
|
|
||||||
export class ProcessLogService {
|
|
||||||
newLogs = new BehaviorSubject<LogMessage>(config.console.defaultLogs);
|
|
||||||
showLiveLogs = config.console.showLiveLogs;
|
|
||||||
|
|
||||||
constructor(private webSocketService: WebSocketService) {
|
|
||||||
this.webSocketService.connect();
|
|
||||||
this.webSocketService.observeKey<ProcessLogMessage>('process.log.new').subscribe(
|
|
||||||
message => this.newLogsHandler(message)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
emitNewLogsIfNoLiveLogs(logs: LogMessage) {
|
|
||||||
if (!this.showLiveLogs) {
|
|
||||||
this.newLogs.next(logs);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
newLogsHandler(message: ProcessLogMessage) {
|
|
||||||
if (this.showLiveLogs) {
|
|
||||||
this.newLogs.next({
|
|
||||||
stdout: message.stdout,
|
|
||||||
stderr: message.stderr
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
Loading…
x
Reference in New Issue
Block a user