added correlations to message list table w/ burnettk

src/components/MiniComponents.tsx

@@ -0,0 +1,22 @@
+import { Link } from 'react-router-dom';
+import { modifyProcessIdentifierForPathParam } from '../helpers';
+import { MessageInstance, ProcessInstance } from '../interfaces';
+
+export function FormatProcessModelDisplayName(
+  instanceObject: ProcessInstance | MessageInstance
+) {
+  const {
+    process_model_identifier: processModelIdentifier,
+    process_model_display_name: processModelDisplayName,
+  } = instanceObject;
+  return (
+    <Link
+      to={`/admin/process-models/${modifyProcessIdentifierForPathParam(
+        processModelIdentifier
+      )}`}
+      title={processModelIdentifier}
+    >
+      {processModelDisplayName}
+    </Link>
+  );
+}

src/components/ProcessInstanceListTable.tsx

@@ -53,6 +53,7 @@ import {
 import ProcessModelSearch from './ProcessModelSearch';
 import ProcessInstanceReportSearch from './ProcessInstanceReportSearch';
 import ProcessInstanceListSaveAsReport from './ProcessInstanceListSaveAsReport';
+import { FormatProcessModelDisplayName } from './MiniComponents';
 
 const REFRESH_INTERVAL = 5;
 const REFRESH_TIMEOUT = 600;
@@ -693,22 +694,6 @@ export default function ProcessInstanceListTable({
       );
     };
 
-    const formatProcessModelDisplayName = (
-      row: ProcessInstance,
-      displayName: string
-    ) => {
-      return (
-        <Link
-          to={`/admin/process-models/${modifyProcessIdentifierForPathParam(
-            row.process_model_identifier
-          )}`}
-          title={row.process_model_identifier}
-        >
-          {displayName}
-        </Link>
-      );
-    };
-
     const formatSecondsForDisplay = (_row: any, seconds: any) => {
       return convertSecondsToFormattedDateTime(seconds) || '-';
     };
@@ -719,7 +704,7 @@ export default function ProcessInstanceListTable({
     const columnFormatters: Record<string, any> = {
       id: formatProcessInstanceId,
       process_model_identifier: formatProcessModelIdentifier,
-      process_model_display_name: formatProcessModelDisplayName,
+      process_model_display_name: FormatProcessModelDisplayName,
       start_in_seconds: formatSecondsForDisplay,
       end_in_seconds: formatSecondsForDisplay,
     };

src/index.css

@@ -69,6 +69,20 @@ h2 {
   color: black;
 }
 
+/* match normal link colors */
+.cds--btn--ghost.button-link {
+  color: #0062fe;
+}
+.cds--btn--ghost.button-link:visited {
+  color: #0062fe;
+}
+.cds--btn--ghost.button-link:hover {
+  color: #0062fe;
+}
+.cds--btn--ghost.button-link:visited:hover {
+  color: #0062fe;
+}
+
 .cds--header__global .cds--btn--primary {
   background-color: #161616
 }

src/interfaces.ts

@@ -39,6 +39,28 @@ export interface ProcessFile {
 export interface ProcessInstance {
   id: number;
   process_model_identifier: string;
+  process_model_display_name: string;
+}
+
+export interface MessageCorrelationProperties {
+  [key: string]: string;
+}
+
+export interface MessageCorrelations {
+  [key: string]: MessageCorrelationProperties;
+}
+
+export interface MessageInstance {
+  id: number;
+  process_model_identifier: string;
+  process_model_display_name: string;
+  process_instance_id: number;
+  message_identifier: string;
+  message_type: string;
+  failure_cause: string;
+  status: string;
+  created_at_in_seconds: number;
+  message_correlations?: MessageCorrelations;
 }
 
 export interface ProcessInstanceReport {

src/routes/MessageInstanceList.tsx

@@ -1,15 +1,17 @@
 import { useEffect, useState } from 'react';
 // @ts-ignore
-import { Table } from '@carbon/react';
+import { Table, Modal, Button } from '@carbon/react';
 import { Link, useParams, useSearchParams } from 'react-router-dom';
 import PaginationForTable from '../components/PaginationForTable';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import {
-  convertSecondsToFormattedDateString,
+  convertSecondsToFormattedDateTime,
   getPageInfoFromSearchParams,
   modifyProcessIdentifierForPathParam,
 } from '../helpers';
 import HttpService from '../services/HttpService';
+import { FormatProcessModelDisplayName } from '../components/MiniComponents';
+import { MessageInstance } from '../interfaces';
 
 export default function MessageInstanceList() {
   const params = useParams();
@@ -17,6 +19,9 @@ export default function MessageInstanceList() {
   const [messageIntances, setMessageInstances] = useState([]);
   const [pagination, setPagination] = useState(null);
 
+  const [messageInstanceForModal, setMessageInstanceForModal] =
+    useState<MessageInstance | null>(null);
+
   useEffect(() => {
     const setMessageInstanceListFromResult = (result: any) => {
       setMessageInstances(result.results);
@@ -35,41 +40,64 @@ export default function MessageInstanceList() {
     });
   }, [searchParams, params]);
 
-  const buildTable = () => {
-    // return null;
-    const rows = messageIntances.map((row) => {
-      const rowToUse = row as any;
+  const handleCorrelationDisplayClose = () => {
+    setMessageInstanceForModal(null);
+  };
+
+  const correlationsDisplayModal = () => {
+    if (messageInstanceForModal) {
       return (
-        <tr key={rowToUse.id}>
-          <td>{rowToUse.id}</td>
-          <td>
-            <Link
-              data-qa="process-model-show-link"
-              to={`/admin/process-models/${modifyProcessIdentifierForPathParam(
-                rowToUse.process_model_identifier
-              )}`}
-            >
-              {rowToUse.process_model_identifier}
-            </Link>
-          </td>
+        <Modal
+          open={!!messageInstanceForModal}
+          passiveModal
+          onRequestClose={handleCorrelationDisplayClose}
+          modalHeading={`Message ${messageInstanceForModal.id} (${messageInstanceForModal.message_identifier}) ${messageInstanceForModal.message_type} data:`}
+          modalLabel="Correlations"
+        >
+          <pre>
+            {JSON.stringify(
+              messageInstanceForModal.message_correlations,
+              null,
+              2
+            )}
+          </pre>
+        </Modal>
+      );
+    }
+    return null;
+  };
+
+  const buildTable = () => {
+    const rows = messageIntances.map((row: MessageInstance) => {
+      return (
+        <tr key={row.id}>
+          <td>{row.id}</td>
+          <td>{FormatProcessModelDisplayName(row)}</td>
           <td>
             <Link
               data-qa="process-instance-show-link"
               to={`/admin/process-models/${modifyProcessIdentifierForPathParam(
-                rowToUse.process_model_identifier
-              )}/process-instances/${rowToUse.process_instance_id}`}
+                row.process_model_identifier
+              )}/process-instances/${row.process_instance_id}`}
             >
-              {rowToUse.process_instance_id}
+              {row.process_instance_id}
             </Link>
           </td>
-          <td>{rowToUse.message_identifier}</td>
-          <td>{rowToUse.message_type}</td>
-          <td>{rowToUse.failure_cause || '-'}</td>
-          <td>{rowToUse.status}</td>
+          <td>{row.message_identifier}</td>
+          <td>{row.message_type}</td>
+          <td>{row.failure_cause || '-'}</td>
           <td>
-            {convertSecondsToFormattedDateString(
-              rowToUse.created_at_in_seconds
-            )}
+            <Button
+              kind="ghost"
+              className="button-link"
+              onClick={() => setMessageInstanceForModal(row)}
+            >
+              View
+            </Button>
+          </td>
+          <td>{row.status}</td>
+          <td>
+            {convertSecondsToFormattedDateTime(row.created_at_in_seconds)}
           </td>
         </tr>
       );
@@ -78,12 +106,13 @@ export default function MessageInstanceList() {
       <Table striped bordered>
         <thead>
           <tr>
-            <th>Instance Id</th>
-            <th>Process Model</th>
+            <th>Id</th>
+            <th>Process</th>
             <th>Process Instance</th>
-            <th>Message Model</th>
+            <th>Name</th>
             <th>Type</th>
             <th>Failure Cause</th>
+            <th>Correlations</th>
             <th>Status</th>
             <th>Created At</th>
           </tr>
@@ -121,6 +150,7 @@ export default function MessageInstanceList() {
       <>
         {breadcrumbElement}
         <h1>Messages</h1>
+        {correlationsDisplayModal()}
         <PaginationForTable
           page={page}
           perPage={perPage}