import { Pipeline } from '@/services/data/tuples/pipeline-types' ; import { Topic , TopicId } from '@/services/data/tuples/topic-types' ; import { AlertLabel } from '@/widgets/alert/widgets' ; import { Button } from '@/widgets/basic/button' ; import { ButtonInk } from '@/widgets/basic/types' ; import { useEventBus } from '@/widgets/events/event-bus' ; import { EventTypes } from '@/widgets/events/types' ; import dayjs from 'dayjs' ; import React , { useEffect , useState } from 'react' ; import { useSimulatorEventBus } from '../../simulator-event-bus' ; import { SimulatorEventTypes } from '../../simulator-event-bus-types' ; import { getPipelineName } from '../../utils' ; import { ActiveStep , SimulateStart , StartFrom , TopicsData } from '../state/types' ; import { useActiveStep } from '../use-active-step' ; import { SimulatorBodyPart , SimulatorBodyPartHeader , SimulatorBodyPartHeaderButtons , SimulatorBodyPartHeaderTitle } from '../widgets' ; import { Runs } from './runs' ; import { RunsEventBusProvider , useRunsEventBus } from './runs-event-bus' ; import { RunsEventTypes } from './runs-event-bus-types' ; import { AllTopics } from './types' ; import { RunBody , RunTable , RunTableHeader , RunTableHeaderCell } from './widgets' ; interface State { step : ActiveStep ; topic : Topic | null ; topicsData : TopicsData ; pipelines : Array < Pipeline > ; } /**
 * only compute the pipelines which are triggered by given topic directly
 */ const computeRunPipelines = ( pipelines , topic ) : Array < Pipeline > => { return pipelines . filter ( p => p . topicId == topic . topicId ) . sort ( ( p1 , p2 ) => { return getPipelineName ( p1 ) . toLowerCase ( ) . localeCompare ( getPipelineName ( p2 ) ) ; } ) ; } ; export const Run = ( props ) => { const { topic , topics , topicsData , runPipelines : allPipelines } = props ; const topicsMap = topics . reduce ( ( map , topic ) => { map [ topic . topicId ] = topic ; return map ; } , { } as AllTopics ) ; let runPipelines = computeRunPipelines ( allPipelines , topic ) ; return < > < RunTableHeader > < RunTableHeaderCell > Execution Element < /RunTableHeaderCell> < RunTableHeaderCell > Status < /RunTableHeaderCell> < RunTableHeaderCell > Memory Data < /RunTableHeaderCell> { } { } < RunTableHeaderCell /> < /RunTableHeader> < RunTable > < Runs runPipelines = { runPipelines } allPipelines = { allPipelines } topics = { topicsMap } data = { topicsData } / > < /RunTable> < />; } ; export const RunningPlanHeader = ( props ) => { const { topic , topics , showExport } = props ; const { fire : fireGlobal } = useEventBus ( ) ; const { fire : fireSimulator } = useSimulatorEventBus ( ) ; const { fire } = useRunsEventBus ( ) ; const topicsMap = topics . reduce ( ( map , topic ) => { map [ topic . topicId ] = topic ; return map ; } , { } as Record < TopicId , Topic > ) ; const onExportClicked = ( ) => { fire ( RunsEventTypes . ASK_RUNTIME_DATA , ( started , done , runtimeData ) => { if ( ! started ) { fireGlobal ( EventTypes . SHOW_ALERT , < AlertLabel > Pipeline ( s ) doesn 't start yet. < /AlertLabel>); } else if ( ! done ) { fireGlobal ( EventTypes . SHOW_ALERT , < AlertLabel > Pipeline ( s ) still in running . < /AlertLabel>); } else { fireSimulator ( SimulatorEventTypes . ASK_RUN_MATERIAL , ( topicsData ) => { const content = { triggerData : { topicId : topic ! . topicId , topic : topic ! . name , data : topicsData [ topic ! . topicId ] } , dataBeforeRun : Object . keys ( topicsData ) . filter ( topicId => topicId != topic ! . topicId ) . map ( topicId => { return { topicId , topic : topicsMap [ topicId ] ! . name , data : topicsData [ topicId ] } ; } ) , dataAfterRun : Object . keys ( runtimeData ) . map ( topicId => { return { topicId , topic : topicsMap [ topicId ] ! . name , data : runtimeData [ topicId ] } ; } ) } ; const link = document . createElement ( 'a' ) ; link . href = 'data:application/json;charset=utf-8,' + encodeURI ( JSON . stringify ( content ) ) ; link . target = '_blank' ; link . download = `data-of-pipeline -${ dayjs ( ) . format ( 'YYYYMMDDHHmmss' ) }.json` ; link . click ( ) ; } ) ; } } ) ; } ; return < SimulatorBodyPartHeader > < SimulatorBodyPartHeaderTitle > # 3. Running < /SimulatorBodyPartHeaderTitle> { showExport ? < SimulatorBodyPartHeaderButtons > < Button ink = { ButtonInk . PRIMARY } onClick = { onExportClicked } > Export Whole Case Data < /Button> < /SimulatorBodyPartHeaderButtons> : null } < /SimulatorBodyPartHeader>; } ; export const RunningPlan = ( props ) => { const { topics } = props ; const { on , off , fire } = useSimulatorEventBus ( ) ; const [ state , setState ] = useState < State > ( { step : ActiveStep . SELECT , topic : null , topicsData : { } , pipelines : [ ] } ) ; useEffect ( ( ) => { const onChange = ( ) => { setState ( state => ( { ... state , topic : null , topicsData : { } , pipelines : [ ] } ) ) ; } ; on ( SimulatorEventTypes . START_TOPIC_CHANGED , onChange ) ; on ( SimulatorEventTypes . START_PIPELINE_CHANGED , onChange ) ; return ( ) => { off ( SimulatorEventTypes . START_TOPIC_CHANGED , onChange ) ; off ( SimulatorEventTypes . START_PIPELINE_CHANGED , onChange ) ; } ; } , [ on , off ] ) ; useActiveStep ( ( step ) => { if ( step === ActiveStep . RUN ) { fire ( SimulatorEventTypes . ASK_START , ( start ) => { let topic = null ; if ( start . startFrom === StartFrom . TOPIC ) { topic = start . startTopic ! ; } else if ( start . startFrom === StartFrom . PIPELINE ) { topic = topics . find ( t => t . topicId == start . startPipeline ! . topicId ) ! ; } fire ( SimulatorEventTypes . ASK_RUN_MATERIAL , ( topicsData , pipelines ) => { setState ( { step : ActiveStep . RUN , topic , topicsData , pipelines } ) ; } ) ; } ) ; } else { setState ( state => ( { ... state , step } ) ) ; } } ) ; return < SimulatorBodyPart collapsed = { state . step !== ActiveStep . RUN } > < RunsEventBusProvider > < RunningPlanHeader topic = { state . topic } topics = { topics } showExport = { state . step === ActiveStep . RUN } / > { state . step === ActiveStep . RUN && state . topic != null ? < RunBody > < Run topic = { state . topic } topics = { topics } topicsData = { state . topicsData } runPipelines = { state . pipelines } / > < /RunBody> : null } < /RunsEventBusProvider> < /SimulatorBodyPart>; } ;