break process instance log list page into two tabs, simple and detailed

spiffworkflow-backend/src/spiffworkflow_backend/api.yml

@@ -1342,6 +1342,12 @@ paths:
         description: The number of items to show per page. Defaults to page 10.
         schema:
           type: integer
+      - name: detailed
+        in: query
+        required: false
+        description: Show the detailed view, which includes all log entries
+        schema:
+          type: boolean
     get:
       tags:
         - Process Instances

spiffworkflow-backend/src/spiffworkflow_backend/routes/process_api_blueprint.py

@@ -609,16 +609,20 @@ def process_instance_log_list(
     process_instance_id: int,
     page: int = 1,
     per_page: int = 100,
+    detailed: bool = False,
 ) -> flask.wrappers.Response:
     """Process_instance_log_list."""
     # to make sure the process instance exists
     process_instance = find_process_instance_by_id_or_raise(process_instance_id)
 
+    log_query = SpiffLoggingModel.query.filter(
+        SpiffLoggingModel.process_instance_id == process_instance.id
+    )
+    if not detailed:
+        log_query = log_query.filter(SpiffLoggingModel.message.in_(["State change to COMPLETED"]))  # type: ignore
+
     logs = (
-        SpiffLoggingModel.query.filter(
-            SpiffLoggingModel.process_instance_id == process_instance.id
-        )
-        .order_by(SpiffLoggingModel.timestamp.desc())  # type: ignore
+        log_query.order_by(SpiffLoggingModel.timestamp.desc())  # type: ignore
         .join(
             UserModel, UserModel.id == SpiffLoggingModel.current_user_id, isouter=True
         )  # isouter since if we don't have a user, we still want the log

spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 // @ts-ignore
-import { Table } from '@carbon/react';
+import { Table, Tabs, TabList, Tab } from '@carbon/react';
 import { useParams, useSearchParams, Link } from 'react-router-dom';
 import PaginationForTable from '../components/PaginationForTable';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
@@ -14,13 +14,14 @@ import { useUriListForPermissions } from '../hooks/UriListForPermissions';
 
 export default function ProcessInstanceLogList() {
   const params = useParams();
-  const [searchParams] = useSearchParams();
+  const [searchParams, setSearchParams] = useSearchParams();
   const [processInstanceLogs, setProcessInstanceLogs] = useState([]);
   const [pagination, setPagination] = useState(null);
   const modifiedProcessModelId = modifyProcessIdentifierForPathParam(
     `${params.process_model_id}`
   );
   const { targetUris } = useUriListForPermissions();
+  const isDetailedView = searchParams.get('detailed') === 'true';
 
   useEffect(() => {
     const setProcessInstanceLogListFromResult = (result: any) => {
@@ -29,21 +30,31 @@ export default function ProcessInstanceLogList() {
     };
     const { page, perPage } = getPageInfoFromSearchParams(searchParams);
     HttpService.makeCallToBackend({
-      path: `${targetUris.processInstanceLogListPath}?per_page=${perPage}&page=${page}`,
+      path: `${targetUris.processInstanceLogListPath}?per_page=${perPage}&page=${page}&detailed=${isDetailedView}`,
       successCallback: setProcessInstanceLogListFromResult,
     });
-  }, [searchParams, params, targetUris]);
+  }, [
+    searchParams,
+    params,
+    targetUris.processInstanceLogListPath,
+    isDetailedView,
+  ]);
 
   const buildTable = () => {
     const rows = processInstanceLogs.map((row) => {
       const rowToUse = row as any;
       return (
         <tr key={rowToUse.id}>
-          <td>{rowToUse.bpmn_process_identifier}</td>
+          <td>{rowToUse.id}</td>
           <td>{rowToUse.message}</td>
-          <td>{rowToUse.bpmn_task_identifier}</td>
           <td>{rowToUse.bpmn_task_name}</td>
-          <td>{rowToUse.bpmn_task_type}</td>
+          {isDetailedView && (
+            <>
+              <td>{rowToUse.bpmn_task_identifier}</td>
+              <td>{rowToUse.bpmn_task_type}</td>
+              <td>{rowToUse.bpmn_process_identifier}</td>
+            </>
+          )}
           <td>{rowToUse.username}</td>
           <td>
             <Link
@@ -60,11 +71,16 @@ export default function ProcessInstanceLogList() {
       <Table size="lg">
         <thead>
           <tr>
-            <th>Bpmn Process Identifier</th>
+            <th>Id</th>
             <th>Message</th>
-            <th>Task Identifier</th>
             <th>Task Name</th>
-            <th>Task Type</th>
+            {isDetailedView && (
+              <>
+                <th>Task Identifier</th>
+                <th>Task Type</th>
+                <th>Bpmn Process Identifier</th>
+              </>
+            )}
             <th>User</th>
             <th>Timestamp</th>
           </tr>
@@ -73,11 +89,12 @@ export default function ProcessInstanceLogList() {
       </Table>
     );
   };
+  const selectedTabIndex = isDetailedView ? 1 : 0;
 
   if (pagination) {
     const { page, perPage } = getPageInfoFromSearchParams(searchParams);
     return (
-      <main>
+      <>
         <ProcessBreadcrumb
           hotCrumbs={[
             ['Process Groups', '/admin'],
@@ -93,13 +110,36 @@ export default function ProcessInstanceLogList() {
             ['Logs'],
           ]}
         />
+        <Tabs selectedIndex={selectedTabIndex}>
+          <TabList aria-label="List of tabs">
+            <Tab
+              title="Only show a subset of the logs, and show fewer columns"
+              onClick={() => {
+                searchParams.set('detailed', 'false');
+                setSearchParams(searchParams);
+              }}
+            >
+              Simple
+            </Tab>
+            <Tab
+              title="Show all logs for this process instance, and show extra columns that may be useful for debugging"
+              onClick={() => {
+                searchParams.set('detailed', 'true');
+                setSearchParams(searchParams);
+              }}
+            >
+              Detailed
+            </Tab>
+          </TabList>
+        </Tabs>
+        <br />
         <PaginationForTable
           page={page}
           perPage={perPage}
           pagination={pagination}
           tableToDisplay={buildTable()}
         />
-      </main>
+      </>
     );
   }
   return null;