status-im
/
spiff-arena
mirror of https://github.com/status-im/spiff-arena.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

show metadata on instance show page but for some reason it reorders elements w/ burnettk

This commit is contained in:
jasquat 2023-01-24 14:35:27 -05:00
parent 45f46ef14d
commit 433c401073
4 changed files with 148 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
spiffworkflow-backend/src/spiffworkflow_backend/models/process_instance.py
View File

@ -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.

3
spiffworkflow-backend/src/spiffworkflow_backend/routes/process_instances_controller.py
View File

@ -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(

7
spiffworkflow-frontend/src/interfaces.ts
View File

@ -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 {

137
spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx
View File

@ -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(
<Grid condensed fullWidth>
<Column sm={1} md={1} lg={2} className="grid-list-title">
{processInstanceMetadata.key}
</Column>
<Column sm={3} md={3} lg={3} className="grid-date">
{processInstanceMetadata.value}
</Column>
</Grid>
);
}
);
return (
<>
<br />
{metadataComponents}
</>
);
// return metadataComponents;
};
const detailedViewElement = () => {
if (!processInstance) {
return null;
@ -331,6 +374,15 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
{processInstance.bpmn_version_control_type})
</Column>
</Grid>
<Grid condensed fullWidth>
<Column sm={1} md={1} lg={2} className="grid-list-title">
Process model revision:{' '}
</Column>
<Column sm={3} md={3} lg={3} className="grid-date">
{processInstance.bpmn_version_control_identifier} (
{processInstance.bpmn_version_control_type})
</Column>
</Grid>
</>
);
}
@ -348,6 +400,68 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
);
};
let deets: any = null;
if (processInstance) {
if (displayDetails) {
deets = (
<>
<Grid condensed fullWidth>
<Button
kind="ghost"
className="button-link"
onClick={() => setDisplayDetails(false)}
title="Hide Details"
>
&laquo; Hide Details
</Button>
</Grid>
<Grid condensed fullWidth>
<Column sm={1} md={1} lg={2} className="grid-list-title">
Updated At:{' '}
</Column>
<Column sm={3} md={3} lg={3} className="grid-date">
{convertSecondsToFormattedDateTime(
processInstance.updated_at_in_seconds
)}
</Column>
</Grid>
<Grid condensed fullWidth>
<Column sm={1} md={1} lg={2} className="grid-list-title">
Created At:{' '}
</Column>
<Column sm={3} md={3} lg={3} className="grid-date">
{convertSecondsToFormattedDateTime(
processInstance.created_at_in_seconds
)}
</Column>
</Grid>
<Grid condensed fullWidth>
<Column sm={1} md={1} lg={2} className="grid-list-title">
Process model revision:{' '}
</Column>
<Column sm={3} md={3} lg={3} className="grid-date">
{processInstance.bpmn_version_control_identifier} (
{processInstance.bpmn_version_control_type})
</Column>
</Grid>
</>
);
} else {
deets = (
<Grid condensed fullWidth>
<Button
kind="ghost"
className="button-link"
onClick={() => setDisplayDetails(true)}
title="Show Details"
>
View Details &raquo;
</Button>
</Grid>
);
}
}
const getInfoTag = () => {
if (!processInstance) {
return null;
@ -382,8 +496,11 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
statusIcon = <Warning />;
}
const details = detailedViewElement();
return (
<>
{/*
<Grid condensed fullWidth>
<Column sm={1} md={1} lg={2} className="grid-list-title">
Started By:{' '}
@ -403,6 +520,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
</Column>
</Grid>
{currentEndDateTag}
*/}
<Grid condensed fullWidth>
<Column sm={1} md={1} lg={2} className="grid-list-title">
Status:{' '}
@ -413,8 +531,11 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
</Tag>
</Column>
</Grid>
{detailedViewElement()}
{/* detailedViewElement() */}
{deets}
{/*
<br />
*/}
<Grid condensed fullWidth>
<Column sm={2} md={2} lg={2}>
<ButtonSet>
@ -1002,6 +1123,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
[`Process Instance Id: ${processInstance.id}`],
]}
/>
{/*
<Stack orientation="horizontal" gap={1}>
<h1 className="with-icons">
Process Instance Id: {processInstance.id}
@ -1030,12 +1152,8 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
/>
</Column>
</Grid>
*/}
{getInfoTag()}
<br />
{taskUpdateDisplayArea()}
{processDataDisplayArea()}
{stepsElement()}
<br />
<ReactDiagramEditor
processModelId={processModelId || ''}
diagramXML={processInstance.bpmn_xml_file_contents || ''}
@ -1045,7 +1163,12 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
diagramType="readonly"
onElementClick={handleClickedDiagramTask}
/>
{/* <br /> */}
{/* {stepsElement()} */}
{/* <br /> */}
{taskUpdateDisplayArea()}
{processDataDisplayArea()}
<div id="diagram-container" />
</>
);