From 433c40107318739199549ef9bb20f52e948c5c15 Mon Sep 17 00:00:00 2001 From: jasquat Date: Tue, 24 Jan 2023 14:35:27 -0500 Subject: [PATCH 1/3] show metadata on instance show page but for some reason it reorders elements w/ burnettk --- .../models/process_instance.py | 9 ++ .../routes/process_instances_controller.py | 3 +- spiffworkflow-frontend/src/interfaces.ts | 7 + .../src/routes/ProcessInstanceShow.tsx | 137 +++++++++++++++++- 4 files changed, 148 insertions(+), 8 deletions(-) diff --git a/spiffworkflow-backend/src/spiffworkflow_backend/models/process_instance.py b/spiffworkflow-backend/src/spiffworkflow_backend/models/process_instance.py index 9e0756006..3e9f54ebd 100644 --- a/spiffworkflow-backend/src/spiffworkflow_backend/models/process_instance.py +++ b/spiffworkflow-backend/src/spiffworkflow_backend/models/process_instance.py @@ -75,6 +75,10 @@ class ProcessInstanceModel(SpiffworkflowBaseDBModel): ) # type: ignore message_instances = relationship("MessageInstanceModel", cascade="delete") # type: ignore message_correlations = relationship("MessageCorrelationModel", cascade="delete") # type: ignore + process_metadata = relationship( + "ProcessInstanceMetadataModel", + cascade="delete", + ) # type: ignore bpmn_json: str | None = deferred(db.Column(db.JSON)) # type: ignore start_in_seconds: int | None = db.Column(db.Integer) @@ -111,6 +115,11 @@ class ProcessInstanceModel(SpiffworkflowBaseDBModel): "process_initiator_username": self.process_initiator.username, } + def serialized_with_metadata(self) -> dict[str, Any]: + process_instance_attributes = self.serialized + process_instance_attributes["process_metadata"] = self.process_metadata + return process_instance_attributes + @property def serialized_flat(self) -> dict: """Return object in serializeable format with data merged together with top-level attributes. diff --git a/spiffworkflow-backend/src/spiffworkflow_backend/routes/process_instances_controller.py b/spiffworkflow-backend/src/spiffworkflow_backend/routes/process_instances_controller.py index 1271f929d..f4601a0a9 100644 --- a/spiffworkflow-backend/src/spiffworkflow_backend/routes/process_instances_controller.py +++ b/spiffworkflow-backend/src/spiffworkflow_backend/routes/process_instances_controller.py @@ -682,7 +682,8 @@ def _get_process_instance( ) process_instance.bpmn_xml_file_contents = bpmn_xml_file_contents - return make_response(jsonify(process_instance), 200) + process_instance_as_dict = process_instance.serialized_with_metadata() + return make_response(jsonify(process_instance_as_dict), 200) def _find_process_instance_for_me_or_raise( diff --git a/spiffworkflow-frontend/src/interfaces.ts b/spiffworkflow-frontend/src/interfaces.ts index f2d2d0a6a..990d3bbd7 100644 --- a/spiffworkflow-frontend/src/interfaces.ts +++ b/spiffworkflow-frontend/src/interfaces.ts @@ -66,6 +66,12 @@ export interface ProcessFile { file_contents?: string; } +export interface ProcessInstanceMetadata { + id: number; + key: string; + value: string; +} + export interface ProcessInstance { id: number; process_model_identifier: string; @@ -80,6 +86,7 @@ export interface ProcessInstance { updated_at_in_seconds: number; bpmn_version_control_identifier: string; bpmn_version_control_type: string; + process_metadata?: ProcessInstanceMetadata[]; } export interface MessageCorrelationProperties { diff --git a/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx b/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx index 279322a63..9b6f1492a 100644 --- a/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx @@ -1,4 +1,9 @@ -import { useContext, useEffect, useState } from 'react'; +import React, { + ReactComponentElement, + useContext, + useEffect, + useState, +} from 'react'; import Editor from '@monaco-editor/react'; import { useParams, @@ -44,6 +49,7 @@ import { PermissionsToCheck, ProcessData, ProcessInstance, + ProcessInstanceMetadata, ProcessInstanceTask, } from '../interfaces'; import { usePermissionFetcher } from '../hooks/PermissionService'; @@ -161,6 +167,11 @@ export default function ProcessInstanceShow({ variant }: OwnProps) { variant, ]); + // useEffect(() => { + // setTimeout(() => setDisplayDetails(!displayDetails), 1 * 2000); + // // setTimeout(() => setDisplayDetails(false), 1 * 6000); + // }, [displayDetails]); + const deleteProcessInstance = () => { HttpService.makeCallToBackend({ path: targetUris.processInstanceActionPath, @@ -284,6 +295,38 @@ export default function ProcessInstanceShow({ variant }: OwnProps) { }); }; + const processMetadataDisplayArea = () => { + if ( + !processInstance || + (processInstance.process_metadata && + processInstance.process_metadata.length < 1) + ) { + return null; + } + const metadataComponents: any[] = []; + (processInstance.process_metadata || []).forEach( + (processInstanceMetadata: ProcessInstanceMetadata) => { + metadataComponents.push( + + + {processInstanceMetadata.key} + + + {processInstanceMetadata.value} + + + ); + } + ); + return ( + <> +
+ {metadataComponents} + + ); + // return metadataComponents; + }; + const detailedViewElement = () => { if (!processInstance) { return null; @@ -331,6 +374,15 @@ export default function ProcessInstanceShow({ variant }: OwnProps) { {processInstance.bpmn_version_control_type}) + + + Process model revision:{' '} + + + {processInstance.bpmn_version_control_identifier} ( + {processInstance.bpmn_version_control_type}) + + ); } @@ -348,6 +400,68 @@ export default function ProcessInstanceShow({ variant }: OwnProps) { ); }; + let deets: any = null; + if (processInstance) { + if (displayDetails) { + deets = ( + <> + + + + + + Updated At:{' '} + + + {convertSecondsToFormattedDateTime( + processInstance.updated_at_in_seconds + )} + + + + + Created At:{' '} + + + {convertSecondsToFormattedDateTime( + processInstance.created_at_in_seconds + )} + + + + + Process model revision:{' '} + + + {processInstance.bpmn_version_control_identifier} ( + {processInstance.bpmn_version_control_type}) + + + + ); + } else { + deets = ( + + + + ); + } + } + const getInfoTag = () => { if (!processInstance) { return null; @@ -382,8 +496,11 @@ export default function ProcessInstanceShow({ variant }: OwnProps) { statusIcon = ; } + const details = detailedViewElement(); + return ( <> + {/* Started By:{' '} @@ -403,6 +520,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) { {currentEndDateTag} + */} Status:{' '} @@ -413,8 +531,11 @@ export default function ProcessInstanceShow({ variant }: OwnProps) { - {detailedViewElement()} + {/* detailedViewElement() */} + {deets} + {/*
+ */} @@ -1002,6 +1123,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) { [`Process Instance Id: ${processInstance.id}`], ]} /> + {/*

Process Instance Id: {processInstance.id} @@ -1030,12 +1152,8 @@ export default function ProcessInstanceShow({ variant }: OwnProps) { /> + */} {getInfoTag()} -
- {taskUpdateDisplayArea()} - {processDataDisplayArea()} - {stepsElement()} -
+ {/*
*/} + {/* {stepsElement()} */} + {/*
*/} + {taskUpdateDisplayArea()} + {processDataDisplayArea()}
); From 004766bbc592d3a5e86085341fab5b51ee0faa1e Mon Sep 17 00:00:00 2001 From: jasquat Date: Tue, 24 Jan 2023 16:38:05 -0500 Subject: [PATCH 2/3] put process instance show page to match main w/ burnettk --- .../src/routes/ProcessInstanceShow.tsx | 137 +----------------- 1 file changed, 7 insertions(+), 130 deletions(-) diff --git a/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx b/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx index 9b6f1492a..279322a63 100644 --- a/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx @@ -1,9 +1,4 @@ -import React, { - ReactComponentElement, - useContext, - useEffect, - useState, -} from 'react'; +import { useContext, useEffect, useState } from 'react'; import Editor from '@monaco-editor/react'; import { useParams, @@ -49,7 +44,6 @@ import { PermissionsToCheck, ProcessData, ProcessInstance, - ProcessInstanceMetadata, ProcessInstanceTask, } from '../interfaces'; import { usePermissionFetcher } from '../hooks/PermissionService'; @@ -167,11 +161,6 @@ export default function ProcessInstanceShow({ variant }: OwnProps) { variant, ]); - // useEffect(() => { - // setTimeout(() => setDisplayDetails(!displayDetails), 1 * 2000); - // // setTimeout(() => setDisplayDetails(false), 1 * 6000); - // }, [displayDetails]); - const deleteProcessInstance = () => { HttpService.makeCallToBackend({ path: targetUris.processInstanceActionPath, @@ -295,38 +284,6 @@ export default function ProcessInstanceShow({ variant }: OwnProps) { }); }; - const processMetadataDisplayArea = () => { - if ( - !processInstance || - (processInstance.process_metadata && - processInstance.process_metadata.length < 1) - ) { - return null; - } - const metadataComponents: any[] = []; - (processInstance.process_metadata || []).forEach( - (processInstanceMetadata: ProcessInstanceMetadata) => { - metadataComponents.push( - - - {processInstanceMetadata.key} - - - {processInstanceMetadata.value} - - - ); - } - ); - return ( - <> -
- {metadataComponents} - - ); - // return metadataComponents; - }; - const detailedViewElement = () => { if (!processInstance) { return null; @@ -374,15 +331,6 @@ export default function ProcessInstanceShow({ variant }: OwnProps) { {processInstance.bpmn_version_control_type}) - - - Process model revision:{' '} - - - {processInstance.bpmn_version_control_identifier} ( - {processInstance.bpmn_version_control_type}) - - ); } @@ -400,68 +348,6 @@ export default function ProcessInstanceShow({ variant }: OwnProps) { ); }; - let deets: any = null; - if (processInstance) { - if (displayDetails) { - deets = ( - <> - - - - - - Updated At:{' '} - - - {convertSecondsToFormattedDateTime( - processInstance.updated_at_in_seconds - )} - - - - - Created At:{' '} - - - {convertSecondsToFormattedDateTime( - processInstance.created_at_in_seconds - )} - - - - - Process model revision:{' '} - - - {processInstance.bpmn_version_control_identifier} ( - {processInstance.bpmn_version_control_type}) - - - - ); - } else { - deets = ( - - - - ); - } - } - const getInfoTag = () => { if (!processInstance) { return null; @@ -496,11 +382,8 @@ export default function ProcessInstanceShow({ variant }: OwnProps) { statusIcon = ; } - const details = detailedViewElement(); - return ( <> - {/* Started By:{' '} @@ -520,7 +403,6 @@ export default function ProcessInstanceShow({ variant }: OwnProps) { {currentEndDateTag} - */} Status:{' '} @@ -531,11 +413,8 @@ export default function ProcessInstanceShow({ variant }: OwnProps) { - {/* detailedViewElement() */} - {deets} - {/* + {detailedViewElement()}
- */} @@ -1123,7 +1002,6 @@ export default function ProcessInstanceShow({ variant }: OwnProps) { [`Process Instance Id: ${processInstance.id}`], ]} /> - {/*

Process Instance Id: {processInstance.id} @@ -1152,8 +1030,12 @@ export default function ProcessInstanceShow({ variant }: OwnProps) { /> - */} {getInfoTag()} +
+ {taskUpdateDisplayArea()} + {processDataDisplayArea()} + {stepsElement()} +
- {/*
*/} - {/* {stepsElement()} */} - {/*
*/} - {taskUpdateDisplayArea()} - {processDataDisplayArea()}
); From da60b3a715de3da995194546aa8a6e56cf882624 Mon Sep 17 00:00:00 2001 From: jasquat Date: Tue, 24 Jan 2023 16:53:23 -0500 Subject: [PATCH 3/3] use a modal for metadata instead w/ burnettk --- .../src/routes/ProcessInstanceShow.tsx | 52 +++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx b/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx index 279322a63..41168bdfe 100644 --- a/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx @@ -44,6 +44,7 @@ import { PermissionsToCheck, ProcessData, ProcessInstance, + ProcessInstanceMetadata, ProcessInstanceTask, } from '../interfaces'; import { usePermissionFetcher } from '../hooks/PermissionService'; @@ -74,6 +75,8 @@ export default function ProcessInstanceShow({ variant }: OwnProps) { const [eventTextEditorEnabled, setEventTextEditorEnabled] = useState(false); const [displayDetails, setDisplayDetails] = useState(false); + const [showProcessInstanceMetadata, setShowProcessInstanceMetadata] = + useState(false); const setErrorObject = (useContext as any)(ErrorContext)[1]; @@ -446,6 +449,19 @@ export default function ProcessInstanceShow({ variant }: OwnProps) { Messages + {processInstance.process_metadata && + processInstance.process_metadata.length > 0 ? ( + + ) : null} @@ -903,6 +919,41 @@ export default function ProcessInstanceShow({ variant }: OwnProps) { ); }; + const processInstanceMetadataArea = () => { + if ( + !processInstance || + (processInstance.process_metadata && + processInstance.process_metadata.length < 1) + ) { + return null; + } + const metadataComponents: any[] = []; + (processInstance.process_metadata || []).forEach( + (processInstanceMetadata: ProcessInstanceMetadata) => { + metadataComponents.push( + + + {processInstanceMetadata.key} + + + {processInstanceMetadata.value} + + + ); + } + ); + return ( + setShowProcessInstanceMetadata(false)} + > + {metadataComponents} + + ); + }; + const taskUpdateDisplayArea = () => { const taskToUse: any = { ...taskToDisplay, data: taskDataToDisplay }; const candidateEvents: any = getEvents(taskToUse); @@ -1034,6 +1085,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
{taskUpdateDisplayArea()} {processDataDisplayArea()} + {processInstanceMetadataArea()} {stepsElement()}