import { Component , OnDestroy , Input , Output , ViewChild , OnChanges , ElementRef , AfterViewChecked } from '@angular/core' ; import { Subscription } from 'rxjs/Subscription' ; import { FunctionInfo } from '../shared/models/function-info' ; import { UserService } from '../shared/services/user.service' ; import { BroadcastService } from '../shared/services/broadcast.service' ; import { HostEventClient } from '../shared/host-event-client' ; import { MonacoEditorDirective } from '../shared/directives/monaco-editor.directive' ; import { BusyStateComponent } from '../busy-state/busy-state.component' ; import { FunctionAppContextComponent } from '../shared/components/function-app-context-component' ; import { FunctionAppService } from '../shared/services/function-app.service' ; import { Subject } from 'rxjs/Subject' ; import { VfsObject } from '../shared/models/vfs-object' ; import { FunctionService } from 'app/shared/services/function.service' ; @ Component ( { selector : 'errors-warnings' , templateUrl : './errors-warnings.component.html' , styleUrls : [ './errors-warnings.component.scss' , '../function-dev/function-dev.component.scss' ] , } ) export class ErrorsWarningsComponent extends FunctionAppContextComponent implements AfterViewChecked , OnChanges , OnDestroy { public codeColumnWidth = 75 ; public msgColumnWidth : number ; public sourceColumnWidth = 125 ; public startLineNumberColumnWidth = 50 ; public startColumnColumnWidth = 75 ; @ Input ( ) monacoEditor : MonacoEditorDirective ; @ Output ( ) selectFile = new Subject < [ VfsObject , monaco . editor . IMarkerData [ ] , monaco . editor . IMarkerData ] > ( ) ; @ ViewChild ( BusyStateComponent ) busyState : BusyStateComponent ; @ ViewChild ( 'diagnosticsTable' ) tableElement : ElementRef ; public diagnostics : monaco . editor . IMarkerData [ ] ; private functionInfo : FunctionInfo ; private hostEventClient : HostEventClient ; private monacoSubscription : Subscription ; constructor ( functionAppService , broadcastService , private userService , functionService ) { super ( 'errors-warnings' , functionAppService , broadcastService , functionService , ( ) => this . setBusyState ( ) , ( ) => this . clearBusyState ( ) ) ; this . selectFile = new Subject ( ) ; } setup ( ) { return ( this . viewInfoEvents . do ( v => { if ( ! this . hostEventClient || v . context . site . id !== this . hostEventClient . id ) { if ( this . hostEventClient ) { this . hostEventClient . dispose ( ) ; } this . hostEventClient = new HostEventClient ( v . context , this . userService ) ; } if ( v . functionInfo . isSuccessful ) { this . functionInfo = v . functionInfo . result . properties ; } this . clearBusyState ( ) ; } ) . switchMap ( v => this . hostEventClient . getEvents ( v . functionDescriptor . name ) ) . subscribe ( event => { this . diagnostics = event . diagnostics ; if ( this . monacoEditor ) { this . monacoEditor . setDiagnostics ( this . diagnostics ) ; } } ) ) ; } ngAfterViewChecked ( ) { this . onResize ( ) ; } ngOnChanges ( ) { if ( this . monacoSubscription ) { this . monacoSubscription . unsubscribe ( ) ; delete this . monacoSubscription ; } if ( this . monacoEditor ) { this . monacoSubscription = this . monacoEditor . onSave . merge ( this . monacoEditor . onContentChanged ) . merge ( this . monacoEditor . onFileChanged ) . debounceTime ( 50 ) . subscribe ( ( ) => { this . monacoEditor . setDiagnostics ( this . diagnostics ) ; } ) ; } } ngOnDestroy ( ) { if ( this . hostEventClient ) { this . hostEventClient . dispose ( ) ; delete this . hostEventClient ; } if ( this . selectFile ) { this . selectFile . complete ( ) ; delete this . selectFile ; } super . ngOnDestroy ( ) ; } onResize ( ) { const severityColumnWidth = 50 ; const sumOtherColumns = severityColumnWidth + this . codeColumnWidth + this . sourceColumnWidth + this . startLineNumberColumnWidth + this . startColumnColumnWidth ; this . msgColumnWidth = this . tableElement . nativeElement . clientWidth - sumOtherColumns ; } setBusyState ( ) { if ( this . busyState ) { this . busyState . setBusyState ( ) ; } } clearBusyState ( ) { if ( this . busyState ) { this . busyState . clearBusyState ( ) ; } } public itemClick ( diagnostic ) { if ( diagnostic . source ) { this . selectFile . next ( [ { name : diagnostic . source , href : `${ this . functionInfo . script_root_path_href }${ diagnostic . source }` , mime : 'plain/text' , } , this . diagnostics , diagnostic , ] ) ; } } public getSeverityClass ( severity ) { let result ; switch ( severity ) { case monaco . Severity . Error : result = 'fa-times-circle severityerror' ; break ; case monaco . Severity . Warning : result = 'fa-exclamation-triangle severitywarning' ; break ; case monaco . Severity . Info : result = 'fa-info-circle severityinfo' ; break ; } return 'fa severitycolumn ' + result ; } }