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

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.

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(

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 {

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(
+          <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" />
       </>
     );