diff --git a/durablefunctionsmonitor.react/src/components/details-view/OrchestrationFields.tsx b/durablefunctionsmonitor.react/src/components/details-view/OrchestrationFields.tsx index b58170be..3d12a84b 100644 --- a/durablefunctionsmonitor.react/src/components/details-view/OrchestrationFields.tsx +++ b/durablefunctionsmonitor.react/src/components/details-view/OrchestrationFields.tsx @@ -341,10 +341,10 @@ export class OrchestrationFields extends React.Component<{ state: OrchestrationD private renderEventLink(event: HistoryEvent): JSX.Element | string { const state = this.props.state; - const functionName = event.Name; + const functionName = event.name; - if (!!event.SubOrchestrationId) { - return (); @@ -393,34 +393,34 @@ export class OrchestrationFields extends React.Component<{ state: OrchestrationD color={Theme.palette.mode === 'dark' ? 'inherit' : 'primary'} onClick={() => { - this.props.state.timeFrom = moment(event.Timestamp); + this.props.state.timeFrom = moment(event.timestamp); this.props.state.reloadHistory(); }} > - {this.context.formatDateTimeString(event.Timestamp)} + {this.context.formatDateTimeString(event.timestamp)} - {event.EventType} + {event.eventType} - {event.EventId} + {event.eventId} {this.renderEventLink(event)} - {this.context.formatDateTimeString(event.ScheduledTime)} + {this.context.formatDateTimeString(event.scheduledTime)} - {LongJsonDialog.renderJson(event.Input, '', () => this.props.state.longJsonDialogState.showDialog(`${event.EventType} / ${event.Name} / ${HistoryEventFields[5]}`, event.Input))} + {LongJsonDialog.renderJson(event.input, '', () => this.props.state.longJsonDialogState.showDialog(`${event.eventType} / ${event.name} / ${HistoryEventFields[5]}`, event.input))} - {LongJsonDialog.renderJson(event.Result, '', () => this.props.state.longJsonDialogState.showDialog(`${event.EventType} / ${event.Name} / ${HistoryEventFields[6]}`, event.Result))} + {LongJsonDialog.renderJson(event.input, '', () => this.props.state.longJsonDialogState.showDialog(`${event.eventType} / ${event.name} / ${HistoryEventFields[6]}`, event.result))} - {LongJsonDialog.renderJson(event.Details, '', () => this.props.state.longJsonDialogState.showDialog(`${event.EventType} / ${event.Name} / ${HistoryEventFields[7]}`, event.Details))} + {LongJsonDialog.renderJson(event.input, '', () => this.props.state.longJsonDialogState.showDialog(`${event.eventType} / ${event.name} / ${HistoryEventFields[7]}`, event.details))} ); diff --git a/durablefunctionsmonitor.react/src/states/DurableOrchestrationStatus.ts b/durablefunctionsmonitor.react/src/states/DurableOrchestrationStatus.ts index f01d40e6..4ecbccb9 100644 --- a/durablefunctionsmonitor.react/src/states/DurableOrchestrationStatus.ts +++ b/durablefunctionsmonitor.react/src/states/DurableOrchestrationStatus.ts @@ -3,16 +3,16 @@ // A DTO used by DurableOrchestrationStatus.historyEvents export class HistoryEvent { - Timestamp: string; - EventType: string; - EventId: number; - Name: string; - ScheduledTime: string; - DurationInMs: number; - SubOrchestrationId: string; - Input: any; - Result: any; - Details: any; + timestamp: string; + eventType: string; + eventId: number; + name: string; + scheduledTime: string; + durationInMs: number; + subOrchestrationId: string; + input: any; + result: any; + details: any; } // Extends HistoryEvent with history for a suborchestration diff --git a/durablefunctionsmonitor.react/src/states/details-view/FunctionGraphTabState.ts b/durablefunctionsmonitor.react/src/states/details-view/FunctionGraphTabState.ts index 9fd8cd5d..97508bb0 100644 --- a/durablefunctionsmonitor.react/src/states/details-view/FunctionGraphTabState.ts +++ b/durablefunctionsmonitor.react/src/states/details-view/FunctionGraphTabState.ts @@ -108,12 +108,12 @@ export class FunctionGraphTabState extends FunctionGraphStateBase implements ICu for (var event of history) { - const subFuncName = event.Name; + const subFuncName = event.name; - switch (event.EventType) { + switch (event.eventType) { case 'SubOrchestrationInstanceCreated': - if (!!event.SubOrchestrationId && !!event.history) { + if (!!event.subOrchestrationId && !!event.history) { this.updateMetricsForInstance(metrics, subFuncName, "Running", 0, event.history, cancelToken); } @@ -121,9 +121,9 @@ export class FunctionGraphTabState extends FunctionGraphStateBase implements ICu break; case 'SubOrchestrationInstanceCompleted': - if (!!event.SubOrchestrationId && !!event.history) { + if (!!event.subOrchestrationId && !!event.history) { - const durationInMs = new Date(event.Timestamp).getTime() - new Date(event.ScheduledTime).getTime(); + const durationInMs = new Date(event.timestamp).getTime() - new Date(event.scheduledTime).getTime(); this.updateMetricsForInstance(metrics, subFuncName, "Completed", durationInMs, event.history, cancelToken); } @@ -131,9 +131,9 @@ export class FunctionGraphTabState extends FunctionGraphStateBase implements ICu break; case 'SubOrchestrationInstanceFailed': - if (!!event.SubOrchestrationId && !!event.history) { + if (!!event.subOrchestrationId && !!event.history) { - const durationInMs = new Date(event.Timestamp).getTime() - new Date(event.ScheduledTime).getTime(); + const durationInMs = new Date(event.timestamp).getTime() - new Date(event.scheduledTime).getTime(); this.updateMetricsForInstance(metrics, subFuncName, "Failed", durationInMs, event.history, cancelToken); } @@ -147,8 +147,8 @@ export class FunctionGraphTabState extends FunctionGraphStateBase implements ICu metrics[subFuncName].completed++; - if (metrics[subFuncName].duration < event.DurationInMs) { - metrics[subFuncName].duration = event.DurationInMs; + if (metrics[subFuncName].duration < event.durationInMs) { + metrics[subFuncName].duration = event.durationInMs; } break; @@ -160,8 +160,8 @@ export class FunctionGraphTabState extends FunctionGraphStateBase implements ICu metrics[subFuncName].failed++; - if (metrics[subFuncName].duration < event.DurationInMs) { - metrics[subFuncName].duration = event.DurationInMs; + if (metrics[subFuncName].duration < event.durationInMs) { + metrics[subFuncName].duration = event.durationInMs; } break; @@ -224,14 +224,14 @@ export class FunctionGraphTabState extends FunctionGraphStateBase implements ICu for (const event of history) { - switch (event.EventType) { + switch (event.eventType) { case "SubOrchestrationInstanceCompleted": case "SubOrchestrationInstanceFailed": promises.push( - this._loadHistory(event.SubOrchestrationId) - .then(subHistory => this.loadSubOrchestrations(event.Name, subHistory as any)) + this._loadHistory(event.subOrchestrationId) + .then(subHistory => this.loadSubOrchestrations(event.name, subHistory as any)) .then(subHistory => { event.history = subHistory; @@ -239,7 +239,7 @@ export class FunctionGraphTabState extends FunctionGraphStateBase implements ICu }) .catch(err => { - console.log(`Failed to load ${event.SubOrchestrationId}. ${err.message}`); + console.log(`Failed to load ${event.subOrchestrationId}. ${err.message}`); }) ); @@ -253,7 +253,7 @@ export class FunctionGraphTabState extends FunctionGraphStateBase implements ICu if (!!this._traversalResult && !!this._traversalResult.functions) { - const func = this._traversalResult.functions[event.Name]; + const func = this._traversalResult.functions[event.name]; if (!!func) { if (!func.isCalledBy) { diff --git a/durablefunctionsmonitor.react/src/states/details-view/GanttDiagramTabState.ts b/durablefunctionsmonitor.react/src/states/details-view/GanttDiagramTabState.ts index 69f8ed6b..2e1bfbb7 100644 --- a/durablefunctionsmonitor.react/src/states/details-view/GanttDiagramTabState.ts +++ b/durablefunctionsmonitor.react/src/states/details-view/GanttDiagramTabState.ts @@ -100,8 +100,8 @@ export class GanttDiagramTabState extends MermaidDiagramTabState { const results: LineTextAndMetadata[] = []; - const startedEvent = historyEvents.find(event => event.EventType === 'ExecutionStarted'); - const completedEvent = historyEvents.find(event => event.EventType === 'ExecutionCompleted'); + const startedEvent = historyEvents.find(event => event.eventType === 'ExecutionStarted'); + const completedEvent = historyEvents.find(event => event.eventType === 'ExecutionCompleted'); var needToAddAxisFormat = isParentOrchestration; var nextLine: string; @@ -112,7 +112,7 @@ export class GanttDiagramTabState extends MermaidDiagramTabState { if (needToAddAxisFormat) { // Axis format should always appear on top, prior to all other lines - this is why it looks a bit complicated. - const longerThanADay = completedEvent.DurationInMs > 86400000; + const longerThanADay = completedEvent.durationInMs > 86400000; nextLine = longerThanADay ? 'axisFormat %Y-%m-%d %H:%M \n' : 'axisFormat %H:%M:%S \n'; results.push({ nextLine }); needToAddAxisFormat = false; @@ -120,15 +120,15 @@ export class GanttDiagramTabState extends MermaidDiagramTabState { nextLine = isParentOrchestration ? '' : `section ${orchestrationName}(${this.escapeTitle(orchestrationId)}) \n`; - var lineName = this.formatDuration(completedEvent.DurationInMs); + var lineName = this.formatDuration(completedEvent.durationInMs); if (!lineName) { lineName = this.formatLineName(orchestrationName, 0); } - nextLine += `${lineName}: ${isParentOrchestration ? '' : 'active,'} ${this.formatDateTime(startedEvent.Timestamp)}, ${completedEvent.DurationInMs}ms \n`; + nextLine += `${lineName}: ${isParentOrchestration ? '' : 'active,'} ${this.formatDateTime(startedEvent.timestamp)}, ${completedEvent.durationInMs}ms \n`; results.push({ nextLine, functionName: orchestrationName, instanceId: orchestrationId }); - orchDuration = completedEvent.DurationInMs; + orchDuration = completedEvent.durationInMs; } if (needToAddAxisFormat) { @@ -143,29 +143,29 @@ export class GanttDiagramTabState extends MermaidDiagramTabState { let numOfAggregatedEvents = 0; // If too many events, then trying to aggregate - if (historyEvents.length > MaxEventsBeforeStartAggregating && EventTypesToBeAggregated.includes(event.EventType)) { + if (historyEvents.length > MaxEventsBeforeStartAggregating && EventTypesToBeAggregated.includes(event.eventType)) { - const scheduledTimeInMs = Date.parse(event.ScheduledTime); - let maxDurationInMs = event.DurationInMs; + const scheduledTimeInMs = Date.parse(event.scheduledTime); + let maxDurationInMs = event.durationInMs; let j = i + 1; while (j < historyEvents.length) { - const nextScheduledTimeInMs = Date.parse(historyEvents[j].ScheduledTime); + const nextScheduledTimeInMs = Date.parse(historyEvents[j].scheduledTime); if ( (MaxAggregatedEvents <= j - i) || - (historyEvents[j].EventType !== event.EventType) + (historyEvents[j].eventType !== event.eventType) || - (historyEvents[j].Name !== event.Name) + (historyEvents[j].name !== event.name) || (TimestampIntervalInMsForAggregating < nextScheduledTimeInMs - scheduledTimeInMs) ) { break; } - const nextDurationInMs = (nextScheduledTimeInMs - scheduledTimeInMs) + historyEvents[j].DurationInMs; + const nextDurationInMs = (nextScheduledTimeInMs - scheduledTimeInMs) + historyEvents[j].durationInMs; if (nextDurationInMs > maxDurationInMs) { maxDurationInMs = nextDurationInMs; } @@ -176,27 +176,27 @@ export class GanttDiagramTabState extends MermaidDiagramTabState { if (j > i + 1) { numOfAggregatedEvents = j - i; - event.DurationInMs = maxDurationInMs; + event.durationInMs = maxDurationInMs; i = j - 1; } } - var eventTimestamp = event.ScheduledTime; + var eventTimestamp = event.scheduledTime; // Sometimes activity timestamp might appear to be earlier than orchestration start (due to machine time difference, I assume), // and that breaks the diagram - if (!!startedEvent && (Date.parse(eventTimestamp) < Date.parse(startedEvent.Timestamp))) { - eventTimestamp = startedEvent.Timestamp; + if (!!startedEvent && (Date.parse(eventTimestamp) < Date.parse(startedEvent.timestamp))) { + eventTimestamp = startedEvent.timestamp; } - switch (event.EventType) { + switch (event.eventType) { case 'SubOrchestrationInstanceCompleted': case 'SubOrchestrationInstanceFailed': - if (!!event.SubOrchestrationId && !!event.history) { + if (!!event.subOrchestrationId && !!event.history) { - const subOrchestrationId = event.SubOrchestrationId; - const subOrchestrationName = event.Name; + const subOrchestrationId = event.subOrchestrationId; + const subOrchestrationName = event.name; results.push(...this.renderOrchestration(subOrchestrationId, subOrchestrationName, event.history, false)); @@ -207,31 +207,31 @@ export class GanttDiagramTabState extends MermaidDiagramTabState { break; case 'TaskCompleted': - nextLine = `${this.formatLineName(event.Name, numOfAggregatedEvents)} ${this.formatDuration(event.DurationInMs)}: done, ${this.formatDateTime(eventTimestamp)}, ${event.DurationInMs}ms \n`; + nextLine = `${this.formatLineName(event.name, numOfAggregatedEvents)} ${this.formatDuration(event.durationInMs)}: done, ${this.formatDateTime(eventTimestamp)}, ${event.durationInMs}ms \n`; results.push({ nextLine, - functionName: event.Name, + functionName: event.name, parentInstanceId: orchestrationId, - duration: event.DurationInMs, - widthPercentage: orchDuration ? event.DurationInMs / orchDuration : 0 + duration: event.durationInMs, + widthPercentage: orchDuration ? event.durationInMs / orchDuration : 0 }); break; case 'TaskFailed': - nextLine = `${this.formatLineName(event.Name, numOfAggregatedEvents)} ${this.formatDuration(event.DurationInMs)}: crit, ${this.formatDateTime(eventTimestamp)}, ${event.DurationInMs}ms \n`; + nextLine = `${this.formatLineName(event.name, numOfAggregatedEvents)} ${this.formatDuration(event.durationInMs)}: crit, ${this.formatDateTime(eventTimestamp)}, ${event.durationInMs}ms \n`; results.push({ nextLine, - functionName: event.Name, + functionName: event.name, parentInstanceId: orchestrationId, - duration: event.DurationInMs, - widthPercentage: orchDuration ? event.DurationInMs / orchDuration : 0 + duration: event.durationInMs, + widthPercentage: orchDuration ? event.durationInMs / orchDuration : 0 }); break; case 'TimerFired': - nextLine = `[TimerFired]: milestone, ${this.formatDateTime(event.Timestamp)}, 0s \n`; + nextLine = `[TimerFired]: milestone, ${this.formatDateTime(event.timestamp)}, 0s \n`; results.push({ nextLine, functionName: orchestrationName, @@ -252,13 +252,13 @@ export class GanttDiagramTabState extends MermaidDiagramTabState { for (const event of history) { - switch (event.EventType) { + switch (event.eventType) { case "SubOrchestrationInstanceCompleted": case "SubOrchestrationInstanceFailed": promises.push( - this._loadHistory(event.SubOrchestrationId) + this._loadHistory(event.subOrchestrationId) .then(subHistory => this.loadSubOrchestrations(subHistory as any)) .then(subHistory => { @@ -267,7 +267,7 @@ export class GanttDiagramTabState extends MermaidDiagramTabState { }) .catch(err => { - console.log(`Failed to load ${event.SubOrchestrationId}. ${err.message}`); + console.log(`Failed to load ${event.subOrchestrationId}. ${err.message}`); }) ); diff --git a/durablefunctionsmonitor.react/src/states/details-view/OrchestrationDetailsState.ts b/durablefunctionsmonitor.react/src/states/details-view/OrchestrationDetailsState.ts index 3495c053..506a2f69 100644 --- a/durablefunctionsmonitor.react/src/states/details-view/OrchestrationDetailsState.ts +++ b/durablefunctionsmonitor.react/src/states/details-view/OrchestrationDetailsState.ts @@ -167,7 +167,7 @@ export class OrchestrationDetailsState extends ErrorMessageState { if (this._history.length > 0) { - this._timeFrom = moment(this._history[0].Timestamp); + this._timeFrom = moment(this._history[0].timestamp); } else { diff --git a/durablefunctionsmonitor.react/src/states/details-view/SequenceDiagramTabState.ts b/durablefunctionsmonitor.react/src/states/details-view/SequenceDiagramTabState.ts index e6e1e74c..ca97447a 100644 --- a/durablefunctionsmonitor.react/src/states/details-view/SequenceDiagramTabState.ts +++ b/durablefunctionsmonitor.react/src/states/details-view/SequenceDiagramTabState.ts @@ -58,12 +58,12 @@ export class SequenceDiagramTabState extends MermaidDiagramTabState { while (i < historyEvents.length) { const event = historyEvents[i]; - switch (event.EventType) { + switch (event.eventType) { case 'ExecutionStarted': nextLine = `${parentOrchestrationName}->>+${orchestrationName}:[ExecutionStarted] \n` + - `Note over ${parentOrchestrationName},${orchestrationName}: ${this.formatTimestamp(event.Timestamp)} \n`; + `Note over ${parentOrchestrationName},${orchestrationName}: ${this.formatTimestamp(event.timestamp)} \n`; results.push(Promise.resolve(nextLine)); @@ -71,12 +71,12 @@ export class SequenceDiagramTabState extends MermaidDiagramTabState { case 'SubOrchestrationInstanceCompleted': case 'SubOrchestrationInstanceFailed': - const subOrchFailed = event.EventType === 'SubOrchestrationInstanceFailed'; + const subOrchFailed = event.eventType === 'SubOrchestrationInstanceFailed'; - if (!!event.SubOrchestrationId) { + if (!!event.subOrchestrationId) { - const subOrchestrationId = event.SubOrchestrationId; - const subOrchestrationName = event.Name; + const subOrchestrationId = event.subOrchestrationId; + const subOrchestrationName = event.name; results.push(new Promise((resolve, reject) => { this._loadHistory(subOrchestrationId).then(history => { @@ -97,14 +97,14 @@ export class SequenceDiagramTabState extends MermaidDiagramTabState { } else if (!!subOrchFailed) { nextLine = `rect rgba(255,0,0,0.4) \n` + - `${orchestrationName}-x${event.Name}:[SubOrchestrationInstanceFailed] \n` + + `${orchestrationName}-x${event.name}:[SubOrchestrationInstanceFailed] \n` + 'end \n'; results.push(Promise.resolve(nextLine)); } else { - nextLine = `${orchestrationName}->>+${event.Name}:[SubOrchestrationInstanceStarted] \n`; + nextLine = `${orchestrationName}->>+${event.name}:[SubOrchestrationInstanceStarted] \n`; results.push(Promise.resolve(nextLine)); } @@ -114,33 +114,33 @@ export class SequenceDiagramTabState extends MermaidDiagramTabState { case 'TaskScheduled': // Trying to aggregate multiple parallel calls - var maxDurationInMs = event.DurationInMs; + var maxDurationInMs = event.durationInMs; var j = i + 1; for (; j < historyEvents.length && - historyEvents[j].EventType === event.EventType && - historyEvents[j].Name === event.Name && + historyEvents[j].eventType === event.eventType && + historyEvents[j].name === event.name && this.getEventScheduledTime(historyEvents[j]).substr(0, 23) === this.getEventScheduledTime(event).substr(0, 23); j++) { - if (maxDurationInMs < historyEvents[j].DurationInMs) { - maxDurationInMs = historyEvents[j].DurationInMs; + if (maxDurationInMs < historyEvents[j].durationInMs) { + maxDurationInMs = historyEvents[j].durationInMs; } } - const lineType = event.EventType === 'TaskCompleted' ? '->>' : '-->>'; + const lineType = event.eventType === 'TaskCompleted' ? '->>' : '-->>'; if (j === i + 1) { const nextLine = - `${orchestrationName}${lineType}${orchestrationName}:${event.Name} \n` + - `Note over ${orchestrationName}: ${this.formatDuration(event.DurationInMs)} \n`; + `${orchestrationName}${lineType}${orchestrationName}:${event.name} \n` + + `Note over ${orchestrationName}: ${this.formatDuration(event.durationInMs)} \n`; results.push(Promise.resolve(nextLine)); } else { const nextLine = `par ${j - i} calls \n` + - `${orchestrationName}${lineType}${orchestrationName}:${event.Name} \n` + + `${orchestrationName}${lineType}${orchestrationName}:${event.name} \n` + `Note over ${orchestrationName}: ${this.formatDuration(maxDurationInMs)} \n` + `end \n`; results.push(Promise.resolve(nextLine)); @@ -152,7 +152,7 @@ export class SequenceDiagramTabState extends MermaidDiagramTabState { case 'TaskFailed': nextLine = `rect rgba(255,0,0,0.4) \n` + - `${orchestrationName}-x${orchestrationName}:${event.Name} \n` + + `${orchestrationName}-x${orchestrationName}:${event.name} \n` + 'end \n'; results.push(Promise.resolve(nextLine)); @@ -160,8 +160,8 @@ export class SequenceDiagramTabState extends MermaidDiagramTabState { case 'EventRaised': nextLine = - `${externalActor}->>${orchestrationName}:${event.Name} \n` + - `Note over ${externalActor},${orchestrationName}: ${this.formatTimestamp(event.Timestamp)} \n`; + `${externalActor}->>${orchestrationName}:${event.name} \n` + + `Note over ${externalActor},${orchestrationName}: ${this.formatTimestamp(event.timestamp)} \n`; results.push(Promise.resolve(nextLine)); break; @@ -169,7 +169,7 @@ export class SequenceDiagramTabState extends MermaidDiagramTabState { nextLine = `${externalActor}->>${orchestrationName}:[TimerFired] \n` + - `Note over ${externalActor},${orchestrationName}: ${this.formatTimestamp(event.Timestamp)} \n`; + `Note over ${externalActor},${orchestrationName}: ${this.formatTimestamp(event.timestamp)} \n`; results.push(Promise.resolve(nextLine)); break; @@ -177,7 +177,7 @@ export class SequenceDiagramTabState extends MermaidDiagramTabState { nextLine = `${externalActor}->>${orchestrationName}:[ExecutionTerminated] \n` + - `Note over ${externalActor},${orchestrationName}: ${this.formatTimestamp(event.Timestamp)} \n`; + `Note over ${externalActor},${orchestrationName}: ${this.formatTimestamp(event.timestamp)} \n`; results.push(Promise.resolve(nextLine)); break; @@ -185,7 +185,7 @@ export class SequenceDiagramTabState extends MermaidDiagramTabState { nextLine = `${orchestrationName}-->>-${parentOrchestrationName}:[${!!isFailed ? 'ExecutionFailed' : 'ExecutionCompleted'}] \n` + - `Note over ${orchestrationName},${parentOrchestrationName}: ${this.formatDuration(event.DurationInMs)} \n`; + `Note over ${orchestrationName},${parentOrchestrationName}: ${this.formatDuration(event.durationInMs)} \n`; if (!!isFailed) { @@ -217,6 +217,6 @@ export class SequenceDiagramTabState extends MermaidDiagramTabState { } private getEventScheduledTime(evt: HistoryEvent): string { - return !!evt.ScheduledTime ? evt.ScheduledTime : evt.Timestamp; + return !!evt.scheduledTime ? evt.scheduledTime : evt.timestamp; } } \ No newline at end of file