added detailed area to process instance show page w/ burnettk

src/components/ProcessInstanceListTable.tsx

@@ -1171,7 +1171,7 @@ export default function ProcessInstanceListTable({
       start_in_seconds: 'Start Time',
       end_in_seconds: 'End Time',
       status: 'Status',
-      username: 'Started By',
+      process_initiator_username: 'Started By',
       spiff_step: 'SpiffWorkflow Step',
     };
     const getHeaderLabel = (header: string) => {

src/interfaces.ts

@@ -73,8 +73,13 @@ export interface ProcessInstance {
   status: string;
   start_in_seconds: number | null;
   end_in_seconds: number | null;
+  process_initiator_username: string;
   bpmn_xml_file_contents?: string;
   spiff_step?: number;
+  created_at_in_seconds: number;
+  updated_at_in_seconds: number;
+  bpmn_version_control_identifier: string;
+  bpmn_version_control_type: string;
 }
 
 export interface MessageCorrelationProperties {

src/routes/ProcessInstanceShow.tsx

@@ -7,12 +7,12 @@ import {
   useSearchParams,
 } from 'react-router-dom';
 import {
+  CaretRight,
   TrashCan,
   StopOutline,
   PauseOutline,
   PlayOutline,
   CaretLeft,
-  CaretRight,
   InProgress,
   Checkmark,
   Warning,
@@ -72,6 +72,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
   const [eventPayload, setEventPayload] = useState<string>('{}');
   const [eventTextEditorEnabled, setEventTextEditorEnabled] =
     useState<boolean>(false);
+  const [displayDetails, setDisplayDetails] = useState<boolean>(false);
 
   const setErrorObject = (useContext as any)(ErrorContext)[1];
 
@@ -280,6 +281,70 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
     });
   };
 
+  const detailedViewElement = () => {
+    if (!processInstance) {
+      return null;
+    }
+
+    if (displayDetails) {
+      return (
+        <>
+          <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>
+        </>
+      );
+    }
+    return (
+      <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;
@@ -316,6 +381,14 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
 
     return (
       <>
+        <Grid condensed fullWidth>
+          <Column sm={1} md={1} lg={2} className="grid-list-title">
+            Started By:{' '}
+          </Column>
+          <Column sm={3} md={3} lg={3} className="grid-date">
+            {processInstance.process_initiator_username}
+          </Column>
+        </Grid>
         <Grid condensed fullWidth>
           <Column sm={1} md={1} lg={2} className="grid-list-title">
             Started:{' '}
@@ -337,6 +410,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
             </Tag>
           </Column>
         </Grid>
+        {detailedViewElement()}
         <br />
         <Grid condensed fullWidth>
           <Column sm={2} md={2} lg={2}>