import React from 'react' ; import ReactDOM from 'react-dom' ; import AuditLogTable from './Components/AuditLogTable' ; import { ToggleSequenceFlowButton } from './Components/ToggleSequenceFlowButton' ; import { InstancePluginParams } from './types' ; import { get } from './utils/api' ; import { clearSequenceFlow , renderSequenceFlow } from './utils/bpmn' ; export default [ { id : 'instanceDiagramHistoricActivities' , pluginPoint : 'cockpit.processInstance.diagram.plugin' , render : ( viewer , { api , processInstanceId } ) => { ( async ( ) => { const overlays = viewer . get ( 'overlays' ) ; const activities = await get ( api , '/history/activity-instance' , { processInstanceId } ) ; const counter = { } ; for ( const activity of activities ) { const id = activity . activityId ; counter [ id ] = counter [ id ] ? counter [ id ] + 1 : 1 ; } const seen = { } ; for ( const activity of activities ) { const id = activity . activityId ; if ( seen [ id ] ) { continue ; } else { seen [ id ] = true ; } const overlay = document . createElement ( 'span' ) ; overlay . innerText = `${ counter [ id ] }` ; overlay . className = 'badge' ; overlay . style . cssText = `
          background: lightgray;
        ` ; overlays . add ( id . split ( '#' ) [ 0 ] , { position : { bottom : 17 , right : 10 , } , html : overlay , } ) ; } const toggleSequenceFlowButton = document . createElement ( 'div' ) ; toggleSequenceFlowButton . style . cssText = `
          position: absolute;
          right: 15px;
          top: 15px;
        ` ; viewer . _container . appendChild ( toggleSequenceFlowButton ) ; let sequenceFlow = [ ] ; ReactDOM . render ( < React . StrictMode > < ToggleSequenceFlowButton onToggleSequenceFlow = { ( value ) => { if ( value ) { sequenceFlow = renderSequenceFlow ( viewer , activities ?? [ ] ) ; } else { clearSequenceFlow ( sequenceFlow ) ; } } } / > < /React.StrictMode>, toggleSequenceFlowButton); } ) ( ) ; } , } , { id : 'instanceTabHistoricActivities' , pluginPoint : 'cockpit.processInstance.runtime.tab' , properties : { label : 'Audit Log' , } , render : ( node , { api , processInstanceId } ) => { ( async ( ) => { const [ activities , decisions ] = await Promise . all ( [ get ( api , '/history/activity-instance' , { processInstanceId } ) , get ( api , '/history/decision-instance' , { processInstanceId } ) , ] ) ; const decisionByActivity = new Map ( decisions . map ( ( decision ) => [ decision . activityInstanceId , decision . id ] ) ) ; activities . sort ( ( a , b ) => { a = a . endTime ? new Date ( a . endTime ) : new Date ( ) ; b = b . endTime ? new Date ( b . endTime ) : new Date ( ) ; if ( a > b ) { return - 1 ; } if ( a < b ) { return 1 ; } return 0 ; } ) ; ReactDOM . render ( < React . StrictMode > < AuditLogTable activities = { activities } decisions = { decisionByActivity } / > < /React.StrictMode>, node); } ) ( ) ; } , } , ] ;