Revert "Feature/interstitial summary (#337)"
This reverts commit c48f3a458b.
This commit is contained in:
burnettk
parent
916324404e
commit
53d73e13a3
|
|
@ -2,41 +2,7 @@
|
|||
|
||||
The follow is a list of enhancements we wish to do complete in the near (or even distant future)
|
||||
|
||||
## Performance / System Improvements
|
||||
|
||||
### Benchmarking / Performance Testing
|
||||
Automated tests that assure our performance remains consistent as we add features and functionality.
|
||||
|
||||
### Support Multiple Connector Proxies
|
||||
Service Tasks have been a huge win, there are multiple reasons that supporting more than one Connector Proxy would be beneficial:
|
||||
|
||||
1. Connect to several separately hosted services
|
||||
2. Support multiple services written in multiple languages
|
||||
3. Allow some connectors to be local (http get/post) vs remote (xero/coin gecko)
|
||||
4. Could support non http based connectors (git interactions could be a workflow)
|
||||
|
||||
### Interstitial Performance
|
||||
push all processing to background so interstitial is just querying, not running (new item)
|
||||
|
||||
### Authentication Keys
|
||||
Provide an ability to access API endpoints using an access key - or authentication process that is specifically designed for API calls. (we currently rely on the grabbing the json token to do this, which is not a real solution)
|
||||
|
||||
### Core BPMN features
|
||||
There are a number of useful BPMN components that we do not currently support. We should evaluate these and determine which ones we should support and how we should support them. We should consider creating a list of unsuported items.
|
||||
|
||||
* Compensation Events (valuable, but difficult)
|
||||
* Conditional events.
|
||||
* Event Sub-Processes are not currently supported (low-hanging fruit, easy to add)
|
||||
|
||||
### Decentralized / Distributed Deployments
|
||||
This is a broad topic and will be covered in a separate document. But consider a SpiffWorkflow implementation that is deployed across a cluster of systems - and manages transactions on a shared Block Chain implementation. Such a structure could assure compliance to a set of blessed BPMN diagrams. Such a system could support highly transparent and auditable processes that could drive a DAO based organization.
|
||||
|
||||
|
||||
### Improve Parallel Processing
|
||||
We should support the parallel execution of tasks within a single process whenever possible to do so. This is not as far-fetched or difficult as it may initially seem. While Python is notoriously bad at parallel execution (the lovely GIL) - we have already taken the most critical steps to assuring it is possible:
|
||||
1. A team has demonstrated parallel execution using the cure SpiffWorkflow library.
|
||||
2. We can keep a configurable number of "background" SpiffArena processes running that can pick up waiting tasks.
|
||||
Given these things are already in place, we just need to lock processes at the task or branch level - so that ready tasks on parallel branches can be picked up by different background processes at the same time.
|
||||
## Performance Improvements
|
||||
|
||||
### BPMN Definitions at save time vs run time
|
||||
Improve performance by pre-processing the BPMN Specification and generating the internal JSON representation so we no longer incur the expense of doing this on a per-process basis.
|
||||
|
|
@ -44,12 +10,6 @@ This will also allow us to do some early and deep validation as well.
|
|||
|
||||
## End User Experience
|
||||
|
||||
### UI Overview
|
||||
We could really use a good UI / UX review of the site and take a stab at cleaning up the whole site to follow some consistent design patterns and resolve potential issues.
|
||||
|
||||
### Customizable Home Page (non Status specific)
|
||||
Allow some way to define custom landing pages that create different experiences for different organizations / needs.
|
||||
|
||||
### Markdown rendering could be better
|
||||
1. When creating a bulleted or numbered list, no bullets or numbers are displayed. This is a bug in our style sheets - or something that is clearing out all styles.
|
||||
2. Limit the width of paragraphs to something reasonable. Having a line of text stretch across the entire screen is not a good experience.
|
||||
|
|
@ -61,34 +21,11 @@ Allow defining contact information at the process group and process model level,
|
|||
This information could then be displayed when a process is in a non-functional state - such an error, suspended, or terminiated state.
|
||||
It might also be available in the footer or under a help icon when displaying a process instance.
|
||||
|
||||
### Process Heatmap
|
||||
Allow administrators to see an overlay of a BPMN diagram that shows all the process instances in the system and where they are (20 people are waiting on approval, 15 are in the re-review .....)
|
||||
|
||||
## Modeler Experience
|
||||
|
||||
### DMN Editor Sucks
|
||||
Can we build a better DMN editor? Trisotech seems to do it very well. Would love to have a day or two just to research this area and see if there is just another open source project we can leverage, or if we could build our own tool.
|
||||
|
||||
### Modeler Checker
|
||||
At run time, or when you save it would be great if we could execute a:
|
||||
* Validation Report - what is wrong with the model? Is it Valid BPMN? Are there intrinsic errors?
|
||||
* Linting Report! Does the model follow common naming conventions, styles, are there dead-locks, etc. Many of these tools already exist, we just need to integrate them!
|
||||
|
||||
### Plugins and Extensions
|
||||
* Track down our previous research and add here. Color picker, etc....
|
||||
|
||||
### Automated Testing
|
||||
Incorporate an end-to-end testing system that will allow you to quickly assure that
|
||||
a bpmn model is working as expected. Imagine Cypress tests that you could define and execute in the modeler.
|
||||
|
||||
### Json Schemas Everywhere!
|
||||
Our forms are Json Schemas (a description of the data structure) - we could do similar things for Service Tasks, Script Tasks ... such that the modeler is at all times aware of what data is available - making it possible to build and execute a task as it is created.
|
||||
|
||||
### Markdown Support for Process Groups and Models
|
||||
Allow us to define a markdown file for a process group or process model, which would be displayed in the process group or process model in the tile view, or at the top of the details page when a group or model is selected.
|
||||
|
||||
### Adding a unit test from within the script editor would be nice
|
||||
|
||||
### Form Builder
|
||||
1. Let's invest in a much better Form Builder experience, so that it is trivial to build new forms or modify existing simple forms. We don't want to implement everything here - but a simple builder would be very useful.
|
||||
2. RJSF says it supports markdown in the headers, but it doesn't work fur us.
|
||||
|
|
@ -101,4 +38,15 @@ Right now we allow editing the Display name of a model or group, but it does
|
|||
not change the name of the underlying directory, making it harder and harder
|
||||
over time to look at GitHub or the file system and find what you are seeing in the display.
|
||||
|
||||
## System Improvements
|
||||
|
||||
### Support Multiple Connector Proxies
|
||||
Service Tasks have been a huge win, there are multiple reasons that supporting more than one Connector Proxy would be beneficial:
|
||||
|
||||
1. Connect to several separately hosted services
|
||||
2. Support mulitple services written in multiple languages
|
||||
3. Allow some connectors to be local (http get/post) vs remote (xero/coin gecko)
|
||||
4. Could support non http based connectors (git interactions could be a workflow)
|
||||
|
||||
### Improve Parallel Processing
|
||||
|
||||
|
|
|
|||
|
|
@ -1,21 +1,19 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import React from 'react';
|
||||
// @ts-ignore
|
||||
import MDEditor from '@uiw/react-md-editor';
|
||||
import { Toggle } from '@carbon/react';
|
||||
|
||||
type OwnProps = {
|
||||
task: any;
|
||||
defaultMessage?: string;
|
||||
allowCollapse?: boolean;
|
||||
};
|
||||
|
||||
export default function InstructionsForEndUser({
|
||||
task,
|
||||
defaultMessage = '',
|
||||
allowCollapse = false,
|
||||
}: OwnProps) {
|
||||
const [collapsed, setCollapsed] = useState<boolean>(false);
|
||||
const [collapsable, setCollapsable] = useState<boolean>(false);
|
||||
if (!task) {
|
||||
return null;
|
||||
}
|
||||
let instructions = defaultMessage;
|
||||
let { properties } = task;
|
||||
if (!properties) {
|
||||
|
|
@ -25,80 +23,15 @@ export default function InstructionsForEndUser({
|
|||
if (instructionsForEndUser) {
|
||||
instructions = instructionsForEndUser;
|
||||
}
|
||||
|
||||
const maxLineCount: number = 8;
|
||||
const maxWordCount: number = 75;
|
||||
|
||||
const lineCount = (arg: string) => {
|
||||
return arg.split('\n').length;
|
||||
};
|
||||
|
||||
const wordCount = (arg: string) => {
|
||||
return arg.split(' ').length;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
allowCollapse &&
|
||||
(lineCount(instructions) >= maxLineCount ||
|
||||
wordCount(instructions) > maxWordCount)
|
||||
) {
|
||||
setCollapsable(true);
|
||||
setCollapsed(true);
|
||||
} else {
|
||||
setCollapsable(false);
|
||||
setCollapsed(false);
|
||||
}
|
||||
}, [allowCollapse, instructions]);
|
||||
|
||||
if (!task) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const toggleCollapse = () => {
|
||||
setCollapsed(!collapsed);
|
||||
};
|
||||
|
||||
const showCollapseToggle = () => {
|
||||
if (collapsable) {
|
||||
return (
|
||||
<Toggle
|
||||
labelA="Show More"
|
||||
labelB="Show Less"
|
||||
onToggle={toggleCollapse}
|
||||
id="toggle-collapse"
|
||||
/>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
let instructionsShown = instructions;
|
||||
if (collapsed) {
|
||||
if (wordCount(instructions) > maxWordCount) {
|
||||
instructionsShown = instructions
|
||||
.split(' ')
|
||||
.slice(0, maxWordCount)
|
||||
.join(' ');
|
||||
instructionsShown += '...';
|
||||
} else if (lineCount(instructions) > maxLineCount) {
|
||||
instructionsShown = instructions.split('\n').slice(0, 5).join(' ');
|
||||
instructionsShown += '...';
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ margin: '20px 0 20px 0' }}>
|
||||
<div className="markdown">
|
||||
{/*
|
||||
https://www.npmjs.com/package/@uiw/react-md-editor switches to dark mode by default by respecting @media (prefers-color-scheme: dark)
|
||||
This makes it look like our site is broken, so until the rest of the site supports dark mode, turn off dark mode for this component.
|
||||
*/}
|
||||
<div data-color-mode="light">
|
||||
<MDEditor.Markdown source={instructionsShown} />
|
||||
</div>
|
||||
<div className="markdown">
|
||||
{/*
|
||||
https://www.npmjs.com/package/@uiw/react-md-editor switches to dark mode by default by respecting @media (prefers-color-scheme: dark)
|
||||
This makes it look like our site is broken, so until the rest of the site supports dark mode, turn off dark mode for this component.
|
||||
*/}
|
||||
<div data-color-mode="light">
|
||||
<MDEditor.Markdown source={instructions} />
|
||||
</div>
|
||||
{showCollapseToggle()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
|||
import { useNavigate } from 'react-router-dom';
|
||||
import { fetchEventSource } from '@microsoft/fetch-event-source';
|
||||
// @ts-ignore
|
||||
import { Loading, InlineNotification } from '@carbon/react';
|
||||
import { Loading } from '@carbon/react';
|
||||
import { BACKEND_BASE_URL } from '../config';
|
||||
import { getBasicHeaders } from '../services/HttpService';
|
||||
|
||||
|
|
@ -16,7 +16,6 @@ type OwnProps = {
|
|||
processInstanceShowPageUrl: string;
|
||||
allowRedirect: boolean;
|
||||
smallSpinner?: boolean;
|
||||
collapsableInstructions?: boolean;
|
||||
};
|
||||
|
||||
export default function ProcessInterstitial({
|
||||
|
|
@ -24,7 +23,6 @@ export default function ProcessInterstitial({
|
|||
allowRedirect,
|
||||
processInstanceShowPageUrl,
|
||||
smallSpinner = false,
|
||||
collapsableInstructions = false,
|
||||
}: OwnProps) {
|
||||
const [data, setData] = useState<any[]>([]);
|
||||
const [lastTask, setLastTask] = useState<any>(null);
|
||||
|
|
@ -77,13 +75,13 @@ export default function ProcessInterstitial({
|
|||
}, [allowRedirect, state]);
|
||||
|
||||
useEffect(() => {
|
||||
// Added this separate use effect so that the timer interval will be cleared if
|
||||
// Added this seperate use effect so that the timer interval will be cleared if
|
||||
// we end up redirecting back to the TaskShow page.
|
||||
if (shouldRedirectToTask(lastTask)) {
|
||||
lastTask.properties.instructionsForEndUser = '';
|
||||
const timerId = setInterval(() => {
|
||||
navigate(`/tasks/${lastTask.process_instance_id}/${lastTask.id}`);
|
||||
}, 500);
|
||||
}, 2000);
|
||||
return () => clearInterval(timerId);
|
||||
}
|
||||
if (shouldRedirectToProcessInstance()) {
|
||||
|
|
@ -120,27 +118,16 @@ export default function ProcessInterstitial({
|
|||
return null;
|
||||
};
|
||||
|
||||
const inlineMessage = (
|
||||
title: string,
|
||||
subtitle: string,
|
||||
kind: string = 'info'
|
||||
) => {
|
||||
return (
|
||||
<div>
|
||||
<InlineNotification kind={kind} subtitle={subtitle} title={title} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const userMessageForProcessInstance = (
|
||||
pi: ProcessInstance,
|
||||
myTask: ProcessInstanceTask | null = null
|
||||
) => {
|
||||
if (['terminated', 'suspended'].includes(pi.status)) {
|
||||
return inlineMessage(
|
||||
`Process ${pi.status}`,
|
||||
'This process instance was {pi.status} by an administrator. Please get in touch with them for more information.',
|
||||
'warning'
|
||||
return (
|
||||
<p>
|
||||
This process instance was {pi.status} by an administrator. Please get
|
||||
in touch with them for more information.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
if (pi.status === 'error') {
|
||||
|
|
@ -148,21 +135,17 @@ export default function ProcessInterstitial({
|
|||
if (myTask && myTask.error_message) {
|
||||
errMessage = errMessage.concat(myTask.error_message);
|
||||
}
|
||||
return inlineMessage(`Process Error`, errMessage, 'error');
|
||||
return <p>{errMessage}</p>;
|
||||
}
|
||||
// Otherwise we are not started, waiting, complete, or user_input_required
|
||||
const defaultMsg =
|
||||
'There are no additional instructions or information for this process.';
|
||||
if (myTask) {
|
||||
return (
|
||||
<InstructionsForEndUser
|
||||
task={myTask}
|
||||
defaultMessage={defaultMsg}
|
||||
allowCollapse={collapsableInstructions}
|
||||
/>
|
||||
<InstructionsForEndUser task={myTask} defaultMessage={defaultMsg} />
|
||||
);
|
||||
}
|
||||
return inlineMessage(`Process Error`, defaultMsg, 'info');
|
||||
return <p>{defaultMsg}</p>;
|
||||
};
|
||||
|
||||
const userMessage = (myTask: ProcessInstanceTask) => {
|
||||
|
|
@ -171,29 +154,27 @@ export default function ProcessInterstitial({
|
|||
}
|
||||
|
||||
if (!myTask.can_complete && userTasks.includes(myTask.type)) {
|
||||
return inlineMessage(
|
||||
'',
|
||||
`This next task is assigned to a different person or team. There is no action for you to take at this time.`
|
||||
return (
|
||||
<p>
|
||||
This next task is assigned to a different person or team. There is no
|
||||
action for you to take at this time.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
if (shouldRedirectToTask(myTask)) {
|
||||
return inlineMessage('', `Redirecting ...`);
|
||||
return <div>Redirecting you to the next task now ...</div>;
|
||||
}
|
||||
if (myTask && myTask.can_complete && userTasks.includes(myTask.type)) {
|
||||
return inlineMessage(
|
||||
'',
|
||||
`The task "${myTask.title}" is ready for you to complete.`
|
||||
);
|
||||
return `The task ${myTask.title} is ready for you to complete.`;
|
||||
}
|
||||
if (myTask.error_message) {
|
||||
return inlineMessage('Error', myTask.error_message, 'error');
|
||||
return <div>{myTask.error_message}</div>;
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<InstructionsForEndUser
|
||||
task={myTask}
|
||||
defaultMessage="There are no additional instructions or information for this task."
|
||||
allowCollapse={collapsableInstructions}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -210,19 +191,18 @@ export default function ProcessInterstitial({
|
|||
displayableData = [data[0]];
|
||||
}
|
||||
|
||||
const className = (index: number) => {
|
||||
if (displayableData.length === 1) {
|
||||
return 'user_instructions';
|
||||
}
|
||||
return index < 4 ? `user_instructions_${index}` : `user_instructions_4`;
|
||||
};
|
||||
|
||||
if (lastTask) {
|
||||
return (
|
||||
<div>
|
||||
{getLoadingIcon()}
|
||||
{displayableData.map((d, index) => (
|
||||
<div className={className(index)}>{userMessage(d)}</div>
|
||||
<div
|
||||
className={
|
||||
index < 4 ? `user_instructions_${index}` : `user_instructions_4`
|
||||
}
|
||||
>
|
||||
{userMessage(d)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -44,7 +44,11 @@ import spiffModdleExtension from 'bpmn-js-spiffworkflow/app/spiffworkflow/moddle
|
|||
// @ts-expect-error TS(7016) FIXME
|
||||
import KeyboardMoveModule from 'diagram-js/lib/navigation/keyboard-move';
|
||||
// @ts-expect-error TS(7016) FIXME
|
||||
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
|
||||
// @ts-expect-error TS(7016) FIXME
|
||||
import TouchModule from 'diagram-js/lib/navigation/touch';
|
||||
// @ts-expect-error TS(7016) FIXME
|
||||
import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
|
||||
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
|
|
@ -212,7 +216,12 @@ export default function ReactDiagramEditor({
|
|||
|
||||
// taken from the non-modeling components at
|
||||
// bpmn-js/lib/Modeler.js
|
||||
additionalModules: [KeyboardMoveModule, TouchModule],
|
||||
additionalModules: [
|
||||
KeyboardMoveModule,
|
||||
MoveCanvasModule,
|
||||
TouchModule,
|
||||
ZoomScrollModule,
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -415,16 +424,12 @@ export default function ReactDiagramEditor({
|
|||
const canvas = (modeler as any).get('canvas');
|
||||
|
||||
// only get the canvas if the dmn active viewer is actually
|
||||
// a Modeler and not an Editor which is what it will be when we are
|
||||
// a Modeler and not an Editor which is what it will when we are
|
||||
// actively editing a decision table
|
||||
if ((modeler as any).constructor.name === 'Modeler') {
|
||||
canvas.zoom('fit-viewport');
|
||||
}
|
||||
|
||||
if ((modeler as any).constructor.name === 'Viewer') {
|
||||
canvas.zoom('fit-viewport');
|
||||
}
|
||||
|
||||
// highlighting a field
|
||||
// Option 3 at:
|
||||
// https://github.com/bpmn-io/bpmn-js-examples/tree/master/colors
|
||||
|
|
|
|||
|
|
@ -168,7 +168,7 @@ code {
|
|||
}
|
||||
|
||||
.cds--breadcrumb {
|
||||
margin-bottom: 1em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.process-description {
|
||||
|
|
@ -329,8 +329,8 @@ in on this with the react-jsonschema-form repo. This is just a patch fix to allo
|
|||
|
||||
.cds--tile.tile-process-group {
|
||||
padding: 0px;
|
||||
margin: 12px;
|
||||
width: 320px;
|
||||
margin: 16px;
|
||||
width: 354px;
|
||||
height: 264px;
|
||||
background: #F4F4F4;
|
||||
order: 1;
|
||||
|
|
@ -338,7 +338,7 @@ in on this with the react-jsonschema-form repo. This is just a patch fix to allo
|
|||
}
|
||||
|
||||
.tile-process-group-content-container {
|
||||
width: 320px;
|
||||
width: 354px;
|
||||
height: 264px;
|
||||
padding: 1em;
|
||||
position: relative;
|
||||
|
|
@ -492,11 +492,6 @@ svg.notification-icon {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
.user_instructions {
|
||||
filter: opacity(1);
|
||||
font-size: 1.2em;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.user_instructions_0 {
|
||||
filter: opacity(1);
|
||||
|
|
|
|||
|
|
@ -15,37 +15,3 @@
|
|||
@use '@carbon/colors';
|
||||
// @use '@carbon/react/scss/colors';
|
||||
@use '@carbon/react/scss/themes';
|
||||
|
||||
// Not certain the best location for this, but here are some global
|
||||
// tweaks the markdown styles.
|
||||
|
||||
main {
|
||||
max-width: 1440px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
p, li, h1, h2, h3, h4, h5, h6, blockquote {
|
||||
max-width: 640px;
|
||||
}
|
||||
li.cds--accordion__item {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
div.show-page, div.markdown, div.markdown-collapsed, div.markdown-collapsable {
|
||||
margin: 0 auto;
|
||||
max-width: 1000px;
|
||||
padding: 15px 0 15px 0;
|
||||
}
|
||||
|
||||
.wmde-markdown ol {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
.wmde-markdown ul {
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
div.cds--tag svg {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,6 +55,9 @@ function CheckboxesWidget({
|
|||
|
||||
return (
|
||||
<>
|
||||
<FormLabel required={required} htmlFor={id}>
|
||||
{label || schema.title}
|
||||
</FormLabel>
|
||||
<FormGroup id={id} row={!!inline}>
|
||||
{Array.isArray(enumOptions) &&
|
||||
enumOptions.map((option, index: number) => {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Routes, Route, useLocation } from 'react-router-dom';
|
||||
|
||||
import React, { useEffect } from 'react';
|
||||
import { useEffect } from 'react';
|
||||
import ProcessGroupList from './ProcessGroupList';
|
||||
import ProcessGroupShow from './ProcessGroupShow';
|
||||
import ProcessGroupNew from './ProcessGroupNew';
|
||||
|
|
@ -16,12 +16,13 @@ import ProcessInstanceReportList from './ProcessInstanceReportList';
|
|||
import ProcessInstanceReportNew from './ProcessInstanceReportNew';
|
||||
import ProcessInstanceReportEdit from './ProcessInstanceReportEdit';
|
||||
import ReactFormEditor from './ReactFormEditor';
|
||||
import ProcessInstanceLogList from './ProcessInstanceLogList';
|
||||
import MessageInstanceList from './MessageInstanceList';
|
||||
import Configuration from './Configuration';
|
||||
import JsonSchemaFormBuilder from './JsonSchemaFormBuilder';
|
||||
import ProcessModelNewExperimental from './ProcessModelNewExperimental';
|
||||
import ProcessInstanceFindById from './ProcessInstanceFindById';
|
||||
import ProcessInterstitialPage from './ProcessInterstitialPage';
|
||||
import MessageListPage from "./MessageListPage";
|
||||
|
||||
export default function AdminRoutes() {
|
||||
const location = useLocation();
|
||||
|
|
@ -111,6 +112,14 @@ export default function AdminRoutes() {
|
|||
path="process-models/:process_model_id/form/:file_name"
|
||||
element={<ReactFormEditor />}
|
||||
/>
|
||||
<Route
|
||||
path="logs/:process_model_id/:process_instance_id"
|
||||
element={<ProcessInstanceLogList variant="all" />}
|
||||
/>
|
||||
<Route
|
||||
path="logs/for-me/:process_model_id/:process_instance_id"
|
||||
element={<ProcessInstanceLogList variant="for-me" />}
|
||||
/>
|
||||
<Route
|
||||
path="process-instances"
|
||||
element={<ProcessInstanceList variant="for-me" />}
|
||||
|
|
@ -123,6 +132,7 @@ export default function AdminRoutes() {
|
|||
path="process-instances/all"
|
||||
element={<ProcessInstanceList variant="all" />}
|
||||
/>
|
||||
<Route path="messages" element={<MessageInstanceList />} />
|
||||
<Route path="configuration/*" element={<Configuration />} />
|
||||
<Route
|
||||
path="process-models/:process_model_id/form-builder"
|
||||
|
|
@ -132,7 +142,6 @@ export default function AdminRoutes() {
|
|||
path="process-instances/find-by-id"
|
||||
element={<ProcessInstanceFindById />}
|
||||
/>
|
||||
<Route path="messages" element={<MessageListPage />} />
|
||||
</Routes>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,26 +3,23 @@ import { useEffect, useState } from 'react';
|
|||
import { ErrorOutline } from '@carbon/icons-react';
|
||||
// @ts-ignore
|
||||
import { Table, Modal, Button } from '@carbon/react';
|
||||
import { Link, useSearchParams } from 'react-router-dom';
|
||||
import PaginationForTable from './PaginationForTable';
|
||||
import ProcessBreadcrumb from './ProcessBreadcrumb';
|
||||
import { Link, useParams, useSearchParams } from 'react-router-dom';
|
||||
import PaginationForTable from '../components/PaginationForTable';
|
||||
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
|
||||
import {
|
||||
convertSecondsToFormattedDateTime,
|
||||
getPageInfoFromSearchParams,
|
||||
modifyProcessIdentifierForPathParam,
|
||||
} from '../helpers';
|
||||
import HttpService from '../services/HttpService';
|
||||
import { FormatProcessModelDisplayName } from './MiniComponents';
|
||||
import { FormatProcessModelDisplayName } from '../components/MiniComponents';
|
||||
import { MessageInstance } from '../interfaces';
|
||||
|
||||
type OwnProps = {
|
||||
processInstanceId?: number;
|
||||
};
|
||||
|
||||
export default function MessageInstanceList({ processInstanceId }: OwnProps) {
|
||||
export default function MessageInstanceList() {
|
||||
const params = useParams();
|
||||
const [searchParams] = useSearchParams();
|
||||
const [messageIntances, setMessageInstances] = useState([]);
|
||||
const [pagination, setPagination] = useState(null);
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
const [messageInstanceForModal, setMessageInstanceForModal] =
|
||||
useState<MessageInstance | null>(null);
|
||||
|
|
@ -34,15 +31,16 @@ export default function MessageInstanceList({ processInstanceId }: OwnProps) {
|
|||
};
|
||||
const { page, perPage } = getPageInfoFromSearchParams(searchParams);
|
||||
let queryParamString = `per_page=${perPage}&page=${page}`;
|
||||
if (processInstanceId) {
|
||||
queryParamString += `&process_instance_id=${processInstanceId}`;
|
||||
if (searchParams.get('process_instance_id')) {
|
||||
queryParamString += `&process_instance_id=${searchParams.get(
|
||||
'process_instance_id'
|
||||
)}`;
|
||||
}
|
||||
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/messages?${queryParamString}`,
|
||||
successCallback: setMessageInstanceListFromResult,
|
||||
});
|
||||
}, [processInstanceId, searchParams]);
|
||||
}, [searchParams, params]);
|
||||
|
||||
const handleCorrelationDisplayClose = () => {
|
||||
setMessageInstanceForModal(null);
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import MessageInstanceList from '../components/MessageInstanceList';
|
||||
|
||||
export default function MessageListPage() {
|
||||
return <MessageInstanceList />;
|
||||
}
|
||||
|
|
@ -2,6 +2,9 @@ import { useEffect, useState } from 'react';
|
|||
import { ErrorOutline } from '@carbon/icons-react';
|
||||
import {
|
||||
Table,
|
||||
Tabs,
|
||||
TabList,
|
||||
Tab,
|
||||
Grid,
|
||||
Column,
|
||||
ButtonSet,
|
||||
|
|
@ -11,8 +14,14 @@ import {
|
|||
Loading,
|
||||
// @ts-ignore
|
||||
} from '@carbon/react';
|
||||
import { createSearchParams, Link, useSearchParams } from 'react-router-dom';
|
||||
import PaginationForTable from './PaginationForTable';
|
||||
import {
|
||||
createSearchParams,
|
||||
Link,
|
||||
useParams,
|
||||
useSearchParams,
|
||||
} from 'react-router-dom';
|
||||
import PaginationForTable from '../components/PaginationForTable';
|
||||
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
|
||||
import {
|
||||
getPageInfoFromSearchParams,
|
||||
convertSecondsToFormattedDateTime,
|
||||
|
|
@ -25,30 +34,23 @@ import {
|
|||
ProcessInstanceEventErrorDetail,
|
||||
ProcessInstanceLogEntry,
|
||||
} from '../interfaces';
|
||||
import Filters from './Filters';
|
||||
import Filters from '../components/Filters';
|
||||
import { usePermissionFetcher } from '../hooks/PermissionService';
|
||||
import {
|
||||
childrenForErrorObject,
|
||||
errorForDisplayFromProcessInstanceErrorDetail,
|
||||
} from './ErrorDisplay';
|
||||
} from '../components/ErrorDisplay';
|
||||
|
||||
type OwnProps = {
|
||||
variant: string; // 'all' or 'for-me'
|
||||
isEventsView: boolean;
|
||||
processModelId: string;
|
||||
processInstanceId: number;
|
||||
variant: string;
|
||||
};
|
||||
|
||||
export default function ProcessInstanceLogList({
|
||||
variant,
|
||||
isEventsView = true,
|
||||
processModelId,
|
||||
processInstanceId,
|
||||
}: OwnProps) {
|
||||
export default function ProcessInstanceLogList({ variant }: OwnProps) {
|
||||
const params = useParams();
|
||||
const [clearAll, setClearAll] = useState<boolean>(false);
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [processInstanceLogs, setProcessInstanceLogs] = useState([]);
|
||||
const [pagination, setPagination] = useState(null);
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
|
||||
const [taskTypes, setTaskTypes] = useState<string[]>([]);
|
||||
const [eventTypes, setEventTypes] = useState<string[]>([]);
|
||||
|
|
@ -69,18 +71,17 @@ export default function ProcessInstanceLogList({
|
|||
const [showFilterOptions, setShowFilterOptions] = useState<boolean>(false);
|
||||
const randomNumberBetween0and1 = Math.random();
|
||||
|
||||
searchParams.set('events', isEventsView ? 'true' : 'false');
|
||||
|
||||
let shouldDisplayClearButton = false;
|
||||
if (randomNumberBetween0and1 < 0.05) {
|
||||
// 5% chance of being here
|
||||
shouldDisplayClearButton = true;
|
||||
}
|
||||
|
||||
let processInstanceShowPageBaseUrl = `/admin/process-instances/for-me/${processModelId}`;
|
||||
let processInstanceShowPageBaseUrl = `/admin/process-instances/for-me/${params.process_model_id}`;
|
||||
if (variant === 'all') {
|
||||
processInstanceShowPageBaseUrl = `/admin/process-instances/${processModelId}`;
|
||||
processInstanceShowPageBaseUrl = `/admin/process-instances/${params.process_model_id}`;
|
||||
}
|
||||
const isEventsView = searchParams.get('events') === 'true';
|
||||
const taskNameHeader = isEventsView ? 'Task Name' : 'Milestone';
|
||||
|
||||
const updateSearchParams = (value: string, key: string) => {
|
||||
|
|
@ -129,7 +130,7 @@ export default function ProcessInstanceLogList({
|
|||
typeaheadQueryParamString = '?task_type=IntermediateThrowEvent';
|
||||
}
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/v1.0/logs/typeahead-filter-values/${processModelId}/${processInstanceId}${typeaheadQueryParamString}`,
|
||||
path: `/v1.0/logs/typeahead-filter-values/${params.process_model_id}/${params.process_instance_id}${typeaheadQueryParamString}`,
|
||||
successCallback: (result: any) => {
|
||||
setTaskTypes(result.task_types);
|
||||
setEventTypes(result.event_types);
|
||||
|
|
@ -139,8 +140,7 @@ export default function ProcessInstanceLogList({
|
|||
});
|
||||
}, [
|
||||
searchParams,
|
||||
processInstanceId,
|
||||
processModelId,
|
||||
params,
|
||||
targetUris.processInstanceLogListPath,
|
||||
isEventsView,
|
||||
]);
|
||||
|
|
@ -487,12 +487,60 @@ export default function ProcessInstanceLogList({
|
|||
);
|
||||
};
|
||||
|
||||
const tabs = () => {
|
||||
const selectedTabIndex = isEventsView ? 1 : 0;
|
||||
return (
|
||||
<Tabs selectedIndex={selectedTabIndex}>
|
||||
<TabList aria-label="List of tabs">
|
||||
<Tab
|
||||
title="Only show a subset of the logs, and show fewer columns"
|
||||
data-qa="process-instance-log-milestones"
|
||||
onClick={() => {
|
||||
resetFilters();
|
||||
searchParams.set('events', 'false');
|
||||
setSearchParams(searchParams);
|
||||
}}
|
||||
>
|
||||
Milestones
|
||||
</Tab>
|
||||
<Tab
|
||||
title="Show all logs for this process instance, and show extra columns that may be useful for debugging"
|
||||
data-qa="process-instance-log-events"
|
||||
onClick={() => {
|
||||
resetFilters();
|
||||
searchParams.set('events', 'true');
|
||||
setSearchParams(searchParams);
|
||||
}}
|
||||
>
|
||||
Events
|
||||
</Tab>
|
||||
</TabList>
|
||||
</Tabs>
|
||||
);
|
||||
};
|
||||
|
||||
const { page, perPage } = getPageInfoFromSearchParams(searchParams);
|
||||
if (clearAll) {
|
||||
return <p>Page cleared 👍</p>;
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<ProcessBreadcrumb
|
||||
hotCrumbs={[
|
||||
['Process Groups', '/admin'],
|
||||
{
|
||||
entityToExplode: params.process_model_id || '',
|
||||
entityType: 'process-model-id',
|
||||
linkLastItem: true,
|
||||
},
|
||||
[
|
||||
`Process Instance: ${params.process_instance_id}`,
|
||||
`${processInstanceShowPageBaseUrl}/${params.process_instance_id}`,
|
||||
],
|
||||
['Logs'],
|
||||
]}
|
||||
/>
|
||||
{tabs()}
|
||||
{errorEventModal()}
|
||||
<Filters
|
||||
filterOptions={filterOptions}
|
||||
|
|
@ -20,18 +20,15 @@ import {
|
|||
Grid,
|
||||
Column,
|
||||
Button,
|
||||
ButtonSet,
|
||||
Tag,
|
||||
Modal,
|
||||
Dropdown,
|
||||
Stack,
|
||||
Loading,
|
||||
Tabs,
|
||||
Tab,
|
||||
TabList,
|
||||
TabPanels,
|
||||
TabPanel,
|
||||
// @ts-ignore
|
||||
} from '@carbon/react';
|
||||
import { Can } from '@casl/react';
|
||||
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
|
||||
import HttpService from '../services/HttpService';
|
||||
import ReactDiagramEditor from '../components/ReactDiagramEditor';
|
||||
|
|
@ -48,6 +45,7 @@ import {
|
|||
PermissionsToCheck,
|
||||
ProcessData,
|
||||
ProcessInstance,
|
||||
ProcessInstanceMetadata,
|
||||
Task,
|
||||
TaskDefinitionPropertiesJson,
|
||||
} from '../interfaces';
|
||||
|
|
@ -56,8 +54,6 @@ import ProcessInstanceClass from '../classes/ProcessInstanceClass';
|
|||
import TaskListTable from '../components/TaskListTable';
|
||||
import useAPIError from '../hooks/UseApiError';
|
||||
import ProcessInterstitial from '../components/ProcessInterstitial';
|
||||
import ProcessInstanceLogList from '../components/ProcessInstanceLogList';
|
||||
import MessageInstanceList from '../components/MessageInstanceList';
|
||||
|
||||
type OwnProps = {
|
||||
variant: string;
|
||||
|
|
@ -88,6 +84,8 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
|
|||
const [eventPayload, setEventPayload] = useState<string>('{}');
|
||||
const [eventTextEditorEnabled, setEventTextEditorEnabled] =
|
||||
useState<boolean>(false);
|
||||
const [showProcessInstanceMetadata, setShowProcessInstanceMetadata] =
|
||||
useState<boolean>(false);
|
||||
|
||||
const { addError, removeError } = useAPIError();
|
||||
const unModifiedProcessModelId = unModifyProcessIdentifierForPathParam(
|
||||
|
|
@ -126,9 +124,11 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
|
|||
};
|
||||
|
||||
let processInstanceShowPageBaseUrl = `/admin/process-instances/for-me/${params.process_model_id}/${params.process_instance_id}`;
|
||||
let processInstanceLogListPageBaseUrl = `/admin/logs/for-me/${params.process_model_id}/${params.process_instance_id}`;
|
||||
const processInstanceShowPageBaseUrlAllVariant = `/admin/process-instances/${params.process_model_id}/${params.process_instance_id}`;
|
||||
if (variant === 'all') {
|
||||
processInstanceShowPageBaseUrl = processInstanceShowPageBaseUrlAllVariant;
|
||||
processInstanceLogListPageBaseUrl = `/admin/logs/${params.process_model_id}/${params.process_instance_id}`;
|
||||
}
|
||||
|
||||
const handleAddErrorInUseEffect = useCallback((value: ErrorForDisplay) => {
|
||||
|
|
@ -313,7 +313,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
|
|||
}
|
||||
const lastUpdatedTimeTag = (
|
||||
<Grid condensed fullWidth>
|
||||
<Column sm={2} md={2} lg={4} className="grid-list-title">
|
||||
<Column sm={1} md={1} lg={2} className="grid-list-title">
|
||||
{lastUpdatedTimeLabel}:{' '}
|
||||
</Column>
|
||||
<Column sm={3} md={3} lg={3} className="grid-date">
|
||||
|
|
@ -323,33 +323,20 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
|
|||
);
|
||||
|
||||
let statusIcon = <InProgress />;
|
||||
let statusColor = 'gray';
|
||||
if (processInstance.status === 'suspended') {
|
||||
statusIcon = <PauseOutline />;
|
||||
} else if (processInstance.status === 'complete') {
|
||||
statusIcon = <Checkmark />;
|
||||
statusColor = 'green';
|
||||
} else if (processInstance.status === 'terminated') {
|
||||
statusIcon = <StopOutline />;
|
||||
} else if (processInstance.status === 'error') {
|
||||
statusIcon = <Warning />;
|
||||
statusColor = 'red';
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Grid condensed fullWidth>
|
||||
<Column sm={2} md={2} lg={4} className="grid-list-title">
|
||||
Status:{' '}
|
||||
</Column>
|
||||
<Column sm={3} md={3} lg={3}>
|
||||
<Tag type={statusColor} size="sm" className="span-tag">
|
||||
{processInstance.status} {statusIcon}
|
||||
</Tag>
|
||||
</Column>
|
||||
</Grid>
|
||||
<Grid condensed fullWidth>
|
||||
<Column sm={2} md={2} lg={4} className="grid-list-title">
|
||||
<Column sm={1} md={1} lg={2} className="grid-list-title">
|
||||
Started By:{' '}
|
||||
</Column>
|
||||
<Column sm={3} md={3} lg={3} className="grid-date">
|
||||
|
|
@ -358,7 +345,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
|
|||
</Grid>
|
||||
{processInstance.process_model_with_diagram_identifier ? (
|
||||
<Grid condensed fullWidth>
|
||||
<Column sm={2} md={2} lg={4} className="grid-list-title">
|
||||
<Column sm={1} md={1} lg={2} className="grid-list-title">
|
||||
Current Diagram:{' '}
|
||||
</Column>
|
||||
<Column sm={4} md={6} lg={8} className="grid-date">
|
||||
|
|
@ -374,7 +361,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
|
|||
</Grid>
|
||||
) : null}
|
||||
<Grid condensed fullWidth>
|
||||
<Column sm={2} md={2} lg={4} className="grid-list-title">
|
||||
<Column sm={1} md={1} lg={2} className="grid-list-title">
|
||||
Started:{' '}
|
||||
</Column>
|
||||
<Column
|
||||
|
|
@ -393,7 +380,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
|
|||
</Grid>
|
||||
{lastUpdatedTimeTag}
|
||||
<Grid condensed fullWidth>
|
||||
<Column sm={2} md={2} lg={4} className="grid-list-title">
|
||||
<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">
|
||||
|
|
@ -401,18 +388,64 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
|
|||
{processInstance.bpmn_version_control_type})
|
||||
</Column>
|
||||
</Grid>
|
||||
{(processInstance.process_metadata || []).map(
|
||||
(processInstanceMetadata) => (
|
||||
<Grid condensed fullWidth>
|
||||
<Column sm={2} md={2} lg={4} className="grid-list-title">
|
||||
{processInstanceMetadata.key}:
|
||||
</Column>
|
||||
<Column sm={3} md={3} lg={3} className="grid-date">
|
||||
{processInstanceMetadata.value}
|
||||
</Column>
|
||||
</Grid>
|
||||
)
|
||||
)}
|
||||
<Grid condensed fullWidth>
|
||||
<Column sm={1} md={1} lg={2} className="grid-list-title">
|
||||
Status:{' '}
|
||||
</Column>
|
||||
<Column sm={3} md={3} lg={3}>
|
||||
<Tag type="gray" size="sm" className="span-tag">
|
||||
{processInstance.status} {statusIcon}
|
||||
</Tag>
|
||||
</Column>
|
||||
</Grid>
|
||||
<br />
|
||||
<Grid condensed fullWidth>
|
||||
<Column sm={2} md={2} lg={2}>
|
||||
<ButtonSet>
|
||||
<Can
|
||||
I="GET"
|
||||
a={targetUris.processInstanceLogListPath}
|
||||
ability={ability}
|
||||
>
|
||||
<Button
|
||||
size="sm"
|
||||
className="button-white-background"
|
||||
data-qa="process-instance-log-list-link"
|
||||
href={`${processInstanceLogListPageBaseUrl}`}
|
||||
>
|
||||
Logs
|
||||
</Button>
|
||||
</Can>
|
||||
<Can
|
||||
I="GET"
|
||||
a={targetUris.messageInstanceListPath}
|
||||
ability={ability}
|
||||
>
|
||||
<Button
|
||||
size="sm"
|
||||
className="button-white-background"
|
||||
data-qa="process-instance-message-instance-list-link"
|
||||
href={`/admin/messages?process_model_id=${params.process_model_id}&process_instance_id=${params.process_instance_id}`}
|
||||
>
|
||||
Messages
|
||||
</Button>
|
||||
</Can>
|
||||
{processInstance.process_metadata &&
|
||||
processInstance.process_metadata.length > 0 ? (
|
||||
<Button
|
||||
size="sm"
|
||||
className="button-white-background"
|
||||
data-qa="process-instance-show-metadata"
|
||||
onClick={() => {
|
||||
setShowProcessInstanceMetadata(true);
|
||||
}}
|
||||
>
|
||||
Details
|
||||
</Button>
|
||||
) : null}
|
||||
</ButtonSet>
|
||||
</Column>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -910,6 +943,41 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
|
|||
);
|
||||
};
|
||||
|
||||
const processInstanceMetadataArea = () => {
|
||||
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={3} md={3} lg={5} className="grid-list-title">
|
||||
{processInstanceMetadata.key}
|
||||
</Column>
|
||||
<Column sm={3} md={3} lg={3} className="grid-date">
|
||||
{processInstanceMetadata.value}
|
||||
</Column>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
);
|
||||
return (
|
||||
<Modal
|
||||
open={showProcessInstanceMetadata}
|
||||
modalHeading="Details"
|
||||
passiveModal
|
||||
onRequestClose={() => setShowProcessInstanceMetadata(false)}
|
||||
>
|
||||
{metadataComponents}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
const taskUpdateDisplayArea = () => {
|
||||
if (!taskToDisplay) {
|
||||
return null;
|
||||
|
|
@ -1026,120 +1094,76 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
|
|||
);
|
||||
};
|
||||
|
||||
if (processInstance && (tasks || tasksCallHadError) && permissionsLoaded) {
|
||||
if (processInstance && (tasks || tasksCallHadError)) {
|
||||
const processModelId = unModifyProcessIdentifierForPathParam(
|
||||
params.process_model_id ? params.process_model_id : ''
|
||||
);
|
||||
|
||||
const getTabs = () => {
|
||||
const canViewLogs = ability.can(
|
||||
'GET',
|
||||
targetUris.processInstanceLogListPath
|
||||
);
|
||||
const canViewMsgs = ability.can(
|
||||
'GET',
|
||||
targetUris.messageInstanceListPath
|
||||
);
|
||||
|
||||
return (
|
||||
<Tabs>
|
||||
<TabList aria-label="List of tabs">
|
||||
<Tab>Diagram</Tab>
|
||||
<Tab disabled={!canViewLogs}>Milestones</Tab>
|
||||
<Tab disabled={!canViewLogs}>Events</Tab>
|
||||
<Tab disabled={!canViewMsgs}>Messages</Tab>
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
<TabPanel>
|
||||
<ReactDiagramEditor
|
||||
processModelId={processModelId || ''}
|
||||
diagramXML={processInstance.bpmn_xml_file_contents || ''}
|
||||
fileName={processInstance.bpmn_xml_file_contents || ''}
|
||||
tasks={tasks}
|
||||
diagramType="readonly"
|
||||
onElementClick={handleClickedDiagramTask}
|
||||
/>
|
||||
<div id="diagram-container" />
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<ProcessInstanceLogList
|
||||
variant={variant}
|
||||
isEventsView={false}
|
||||
processModelId={modifiedProcessModelId || ''}
|
||||
processInstanceId={processInstance.id}
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<ProcessInstanceLogList
|
||||
variant={variant}
|
||||
isEventsView
|
||||
processModelId={modifiedProcessModelId || ''}
|
||||
processInstanceId={processInstance.id}
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<MessageInstanceList processInstanceId={processInstance.id} />
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="show-page">
|
||||
<ProcessBreadcrumb
|
||||
hotCrumbs={[
|
||||
['Process Groups', '/admin'],
|
||||
{
|
||||
entityToExplode: processModelId,
|
||||
entityType: 'process-model-id',
|
||||
linkLastItem: true,
|
||||
},
|
||||
[`Process Instance Id: ${processInstance.id}`],
|
||||
]}
|
||||
/>
|
||||
<Stack orientation="horizontal" gap={1}>
|
||||
<h1 className="with-icons">
|
||||
Process Instance Id: {processInstance.id}
|
||||
</h1>
|
||||
{buttonIcons()}
|
||||
</Stack>
|
||||
{getInfoTag()}
|
||||
<ProcessInterstitial
|
||||
processInstanceId={processInstance.id}
|
||||
processInstanceShowPageUrl={processInstanceShowPageBaseUrl}
|
||||
allowRedirect={false}
|
||||
smallSpinner
|
||||
collapsableInstructions
|
||||
/>
|
||||
<Grid condensed fullWidth>
|
||||
<Column md={6} lg={8} sm={4}>
|
||||
<TaskListTable
|
||||
apiPath="/tasks"
|
||||
additionalParams={`process_instance_id=${processInstance.id}`}
|
||||
tableTitle="Tasks I can complete"
|
||||
tableDescription="These are tasks that can be completed by you, either because they were assigned to a group you are in, or because they were assigned directly to you."
|
||||
paginationClassName="with-large-bottom-margin"
|
||||
textToShowIfEmpty="There are no tasks you can complete for this process instance."
|
||||
shouldPaginateTable={false}
|
||||
showProcessModelIdentifier={false}
|
||||
showProcessId={false}
|
||||
showStartedBy={false}
|
||||
showTableDescriptionAsTooltip
|
||||
showDateStarted={false}
|
||||
showLastUpdated={false}
|
||||
hideIfNoTasks
|
||||
canCompleteAllTasks
|
||||
/>
|
||||
</Column>
|
||||
</Grid>
|
||||
{taskUpdateDisplayArea()}
|
||||
{processDataDisplayArea()}
|
||||
<br />
|
||||
{viewMostRecentStateComponent()}
|
||||
</div>
|
||||
{getTabs()}
|
||||
<ProcessBreadcrumb
|
||||
hotCrumbs={[
|
||||
['Process Groups', '/admin'],
|
||||
{
|
||||
entityToExplode: processModelId,
|
||||
entityType: 'process-model-id',
|
||||
linkLastItem: true,
|
||||
},
|
||||
[`Process Instance Id: ${processInstance.id}`],
|
||||
]}
|
||||
/>
|
||||
<Stack orientation="horizontal" gap={1}>
|
||||
<h1 className="with-icons">
|
||||
Process Instance Id: {processInstance.id}
|
||||
</h1>
|
||||
{buttonIcons()}
|
||||
</Stack>
|
||||
<ProcessInterstitial
|
||||
processInstanceId={processInstance.id}
|
||||
processInstanceShowPageUrl={processInstanceShowPageBaseUrl}
|
||||
allowRedirect={false}
|
||||
smallSpinner
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<Grid condensed fullWidth>
|
||||
<Column md={6} lg={8} sm={4}>
|
||||
<TaskListTable
|
||||
apiPath="/tasks"
|
||||
additionalParams={`process_instance_id=${processInstance.id}`}
|
||||
tableTitle="Tasks I can complete"
|
||||
tableDescription="These are tasks that can be completed by you, either because they were assigned to a group you are in, or because they were assigned directly to you."
|
||||
paginationClassName="with-large-bottom-margin"
|
||||
textToShowIfEmpty="There are no tasks you can complete for this process instance."
|
||||
shouldPaginateTable={false}
|
||||
showProcessModelIdentifier={false}
|
||||
showProcessId={false}
|
||||
showStartedBy={false}
|
||||
showTableDescriptionAsTooltip
|
||||
showDateStarted={false}
|
||||
showLastUpdated={false}
|
||||
hideIfNoTasks
|
||||
canCompleteAllTasks
|
||||
/>
|
||||
</Column>
|
||||
</Grid>
|
||||
{getInfoTag()}
|
||||
<br />
|
||||
{taskUpdateDisplayArea()}
|
||||
{processDataDisplayArea()}
|
||||
{processInstanceMetadataArea()}
|
||||
<br />
|
||||
{viewMostRecentStateComponent()}
|
||||
<ReactDiagramEditor
|
||||
processModelId={processModelId || ''}
|
||||
diagramXML={processInstance.bpmn_xml_file_contents || ''}
|
||||
fileName={processInstance.bpmn_xml_file_contents || ''}
|
||||
tasks={tasks}
|
||||
diagramType="readonly"
|
||||
onElementClick={handleClickedDiagramTask}
|
||||
/>
|
||||
|
||||
<div id="diagram-container" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export default function ProcessInterstitialPage({ variant }: OwnProps) {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="show-page">
|
||||
<>
|
||||
<ProcessBreadcrumb
|
||||
hotCrumbs={[
|
||||
['Process Groups', '/admin'],
|
||||
|
|
@ -36,6 +36,6 @@ export default function ProcessInterstitialPage({ variant }: OwnProps) {
|
|||
processInstanceShowPageUrl={processInstanceShowPageUrl}
|
||||
allowRedirect
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -615,7 +615,7 @@ export default function ProcessModelShow() {
|
|||
|
||||
if (processModel) {
|
||||
return (
|
||||
<div className="show-page">
|
||||
<>
|
||||
{fileUploadModal()}
|
||||
{confirmOverwriteFileDialog()}
|
||||
<ProcessBreadcrumb
|
||||
|
|
@ -713,7 +713,7 @@ export default function ProcessModelShow() {
|
|||
/>
|
||||
<span data-qa="process-model-show-permissions-loaded" />
|
||||
</Can>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
|
|
|
|||
|
|
@ -454,7 +454,7 @@ export default function TaskShow() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="show-page">
|
||||
<main>
|
||||
<ProcessBreadcrumb
|
||||
hotCrumbs={[
|
||||
[
|
||||
|
|
@ -473,7 +473,7 @@ export default function TaskShow() {
|
|||
</h3>
|
||||
<InstructionsForEndUser task={task} />
|
||||
{formElement()}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue