mirror of
				https://github.com/avatao-content/frontend-tutorial-framework
				synced 2025-10-25 21:12:55 +00:00 
			
		
		
		
	Merge branch 'processlog-rework' into chausie
This commit is contained in:
		| @@ -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 |  | ||||||
|       }); |  | ||||||
|     } |  | ||||||
|   } |  | ||||||
| } |  | ||||||
		Reference in New Issue
	
	Block a user