import { Component , OnInit } from '@angular/core' ; import { Inject , Input } from '@angular/core' ; import { Span , Trace , Annotation } from './../zipkin/zipkin' ; import * as moment from 'moment' ; import { NgbModal , NgbModalOptions } from '@ng-bootstrap/ng-bootstrap' ; @ Component ( { selector : 'tracechart' , template : require ( './tracechart.component.html' ) } ) export class TraceChartComponent implements OnInit { @ Input ( ) trace : Trace ; minTime : number ; maxTime : number ; static systemAnnotations : string [ ] = [ 'cr' , 'cs' , 'sr' , 'ss' , 'ws' , 'wr' , 'srf' , 'ssf' , 'crf' , 'csf' ] ; static systemAnnotationNames : { [ key ] : string ; } = { 'sr' : 'Server Receive' , 'ss' : 'Server Send' , 'srf' : 'Server Receive Fragment' , 'ssf' : 'Server Send Fragment' , 'cr' : 'Client Receive' , 'cs' : 'Client Send' , 'crf' : 'Client Receive Fragment' , 'csf' : 'Client Send Fragment' , 'ws' : 'Wire Send' , 'wr' : 'Wire Receive' } ; constructor ( @ Inject ( NgbModal ) private modal ) { } open ( content ) { let options = { 'size' : 'lg' } ; this . modal . open ( content , options ) ; } ngOnInit ( ) { this . maxTime = Number . MIN_VALUE ; this . minTime = Number . MAX_VALUE ; this . trace . spans . forEach ( span => { let annotations = span . annotations || [ ] ; annotations . forEach ( annotation => { this . minTime = Math . min ( this . minTime , annotation . timestamp ) ; this . maxTime = Math . max ( this . maxTime , annotation . timestamp ) ; } ) ; } ) ; } getSystemAnnotation ( span , name ) { let annotations = span . annotations || [ ] ; let a = annotations . filter ( ( v , i ) => v . value == name ) ; if ( a . length == 0 ) { return 0 ; } let t = a [ 0 ] . timestamp ; return this . getPercent ( t ) ; } getCs1 ( span ) { return this . getSystemAnnotation ( span , 'cs' ) ; } getCs2 ( span ) { return this . getSystemAnnotation ( span , 'sr' ) - this . getSystemAnnotation ( span , 'cs' ) ; } getCr1 ( span ) { return this . getSystemAnnotation ( span , 'ss' ) || this . getSystemAnnotation ( span , 'cr' ) ; } getCr2 ( span ) { return this . getSystemAnnotation ( span , 'cr' ) - this . getSystemAnnotation ( span , 'ss' ) ; } getSr ( span ) { return this . getSystemAnnotation ( span , 'sr' ) || this . getSystemAnnotation ( span , 'cs' ) ; } getSs ( span ) { return this . getSystemAnnotation ( span , 'ss' ) - this . getSystemAnnotation ( span , 'sr' ) ; } getUserAnnotations ( span ) { let annotations = span . annotations || [ ] ; let result = annotations . filter ( ( v , i ) => ! TraceChartComponent . systemAnnotations . includes ( v . value ) ) ; return result ; } getSpanDepth ( span ) { return ( span . depth * 10 ) + 'px' ; } toggleSpan ( span ) { span . expanded = ! span . expanded ; this . trace . getSortedSpans ( ) ; } formatServiceName ( span ) { return span . annotations [ 1 ] . endpoint . serviceName ; } formatSpanDetails ( span ) { var res = '' ; span . annotations . forEach ( a => { res += `${ a . value } ${ a . endpoint . serviceName } (${ a . endpoint . ipv4 }:${ a . endpoint . port })` ; } ) ; return res ; } formatSpanInfo ( span ) { return moment . duration ( Math . round ( span . duration / 1000 ) ) . asMilliseconds ( ) + ' ms : ' + span . name ; } formatDateTime ( timestamp ) { return moment ( timestamp / 1000 ) . format ( 'YYYY-MM-DD - HH:mm:SS' ) ; } formatRelativeTime ( timestamp ) { return moment . duration ( ( timestamp - this . minTime ) / 1000 ) . asMilliseconds ( ) + ' ms' ; } formatAnnotation ( value ) { return TraceChartComponent . systemAnnotationNames [ value ] || value ; } getPercent ( timestamp ) { let total = this . maxTime - this . minTime ; let current = timestamp - this . minTime ; return Math . round ( current / total * 100 ) ; } getAnnotation ( annotation ) { return this . getPercent ( annotation . timestamp ) ; } time ( no ) { var total = this . maxTime - this . minTime ; var part = total / 5 ; var res = Math . round ( part * no / 1000 ) ; return moment . duration ( res ) . asMilliseconds ( ) + ' ms' ; } }