11import classNames from 'classnames' ;
2- import moment from 'moment' ;
32import React , { useEffect , useRef , useState } from 'react' ;
43import { fromEvent , interval , Subscription } from 'rxjs' ;
54
@@ -19,9 +18,20 @@ interface WorkflowTimelineProps {
1918 nodeClicked ?: ( node : models . NodeStatus ) => any ;
2019}
2120
21+ function dateDiff ( dateLikeA : string | number , dateLikeB : string | number ) : number {
22+ return new Date ( dateLikeA ) . valueOf ( ) - new Date ( dateLikeB ) . valueOf ( ) ;
23+ }
24+
25+ function hhMMFormat ( dateLike : string | number ) : string {
26+ const date = new Date ( dateLike ) ;
27+ // timeString format is '00:59:00 GMT-0500 (Eastern Standard Time)', hh:MM is '00:59'
28+ const parts = date . toTimeString ( ) . split ( ':' ) ;
29+ return parts [ 0 ] + ':' + parts [ 1 ] ;
30+ }
31+
2232export function WorkflowTimeline ( props : WorkflowTimelineProps ) {
2333 const [ parentWidth , setParentWidth ] = useState ( 0 ) ;
24- const [ now , setNow ] = useState ( moment ( ) ) ;
34+ const [ now , setNow ] = useState ( new Date ( ) ) ;
2535
2636 const containerRef = useRef < HTMLDivElement > ( null ) ;
2737 const resizeSubscription = useRef < Subscription > ( null ) ;
@@ -41,7 +51,7 @@ export function WorkflowTimeline(props: WorkflowTimelineProps) {
4151 const isCompleted = props . workflow ?. status && COMPLETED_PHASES . includes ( props . workflow . status . phase ) ;
4252 if ( ! refreshSubscription . current && ! isCompleted ) {
4353 refreshSubscription . current = interval ( 1000 ) . subscribe ( ( ) => {
44- setNow ( moment ( ) ) ;
54+ setNow ( new Date ( ) ) ;
4555 } ) ;
4656 } else if ( refreshSubscription . current && isCompleted ) {
4757 refreshSubscription . current . unsubscribe ( ) ;
@@ -62,15 +72,15 @@ export function WorkflowTimeline(props: WorkflowTimelineProps) {
6272 const nodes = Object . keys ( props . workflow . status . nodes )
6373 . map ( id => {
6474 const node = props . workflow . status . nodes [ id ] ;
65- node . finishedAt = node . finishedAt || now . format ( ) ;
66- node . startedAt = node . startedAt || now . format ( ) ;
75+ node . finishedAt = node . finishedAt || now . toISOString ( ) ;
76+ node . startedAt = node . startedAt || now . toISOString ( ) ;
6777 return node ;
6878 } )
6979 . filter ( node => node . startedAt && node . type === 'Pod' )
7080 . sort ( ( first , second ) => {
71- const diff = moment ( first . startedAt ) . diff ( second . startedAt ) ;
81+ const diff = dateDiff ( first . startedAt , second . startedAt ) ;
7282 if ( diff <= 2 ) {
73- return moment ( first . finishedAt ) . diff ( second . finishedAt ) ;
83+ return dateDiff ( first . finishedAt , second . finishedAt ) ;
7484 }
7585 return diff ;
7686 } ) ;
@@ -79,30 +89,30 @@ export function WorkflowTimeline(props: WorkflowTimelineProps) {
7989 return < div /> ;
8090 }
8191
82- const timelineStart = moment ( nodes [ 0 ] . startedAt ) . valueOf ( ) ;
83- const timelineEnd = nodes . map ( node => moment ( node . finishedAt ) . valueOf ( ) ) . reduce ( ( first , second ) => Math . max ( first , second ) , moment ( timelineStart ) . valueOf ( ) ) ;
92+ const timelineStart = new Date ( nodes [ 0 ] . startedAt ) . valueOf ( ) ;
93+ const timelineEnd = nodes . map ( node => new Date ( node . finishedAt ) . valueOf ( ) ) . reduce ( ( first , second ) => Math . max ( first , second ) , new Date ( timelineStart ) . valueOf ( ) ) ;
8494
8595 function timeToLeft ( time : number ) {
8696 return ( ( time - timelineStart ) / ( timelineEnd - timelineStart ) ) * Math . max ( parentWidth , MIN_WIDTH ) + NODE_NAME_WIDTH ;
8797 }
8898
8999 const groups = nodes . map ( node => ( {
90- startedAt : moment ( node . startedAt ) . valueOf ( ) ,
91- finishedAt : moment ( node . finishedAt ) . valueOf ( ) ,
100+ startedAt : new Date ( node . startedAt ) . valueOf ( ) ,
101+ finishedAt : new Date ( node . finishedAt ) . valueOf ( ) ,
92102 nodes : [
93103 Object . assign ( { } , node , {
94- left : timeToLeft ( moment ( node . startedAt ) . valueOf ( ) ) ,
95- width : timeToLeft ( moment ( node . finishedAt ) . valueOf ( ) ) - timeToLeft ( moment ( node . startedAt ) . valueOf ( ) )
104+ left : timeToLeft ( new Date ( node . startedAt ) . valueOf ( ) ) ,
105+ width : timeToLeft ( new Date ( node . finishedAt ) . valueOf ( ) ) - timeToLeft ( new Date ( node . startedAt ) . valueOf ( ) )
96106 } )
97107 ]
98108 } ) ) ;
99109
100110 for ( let i = groups . length - 1 ; i >= 1 ; i -- ) {
101111 const cur = groups [ i ] ;
102112 const next = groups [ i - 1 ] ;
103- if ( moment ( cur . startedAt ) . diff ( next . finishedAt , 'milliseconds' ) < 0 && moment ( next . startedAt ) . diff ( cur . startedAt , 'milliseconds' ) < ROUND_START_DIFF_MS ) {
113+ if ( dateDiff ( cur . startedAt , next . finishedAt ) < 0 && dateDiff ( next . startedAt , cur . startedAt ) < ROUND_START_DIFF_MS ) {
104114 next . nodes = next . nodes . concat ( cur . nodes ) ;
105- next . finishedAt = nodes . map ( node => moment ( node . finishedAt ) . valueOf ( ) ) . reduce ( ( first , second ) => Math . max ( first , second ) , next . finishedAt . valueOf ( ) ) ;
115+ next . finishedAt = nodes . map ( node => new Date ( node . finishedAt ) . valueOf ( ) ) . reduce ( ( first , second ) => Math . max ( first , second ) , next . finishedAt . valueOf ( ) ) ;
106116 groups . splice ( i , 1 ) ;
107117 }
108118 }
@@ -113,7 +123,7 @@ export function WorkflowTimeline(props: WorkflowTimelineProps) {
113123 < div className = 'workflow-timeline__row workflow-timeline__row--header' />
114124 { groups . map ( group => [
115125 < div style = { { left : timeToLeft ( group . startedAt ) } } key = { `group-${ group . startedAt } } className = { classNames ( 'workflow-timeline__start-line' ) } >
116- < span className = 'workflow-timeline__start-line__time' > { moment ( group . startedAt ) . format ( 'hh:mm' ) } </ span >
126+ < span className = 'workflow-timeline__start-line__time' > { hhMMFormat ( group . startedAt ) } </ span >
117127 </ div > ,
118128 ...group . nodes . map ( node => (
119129 < div
0 commit comments