updated recently viewed table to be recently run and added run button w/ burnettk cullerton
This commit is contained in:
parent
99f5e1f5b6
commit
77009482cc
|
@ -4,11 +4,60 @@ import {
|
||||||
Button,
|
Button,
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
} from '@carbon/react';
|
} from '@carbon/react';
|
||||||
import { ProcessModel } from '../interfaces';
|
import { ProcessModel, RecentProcessModel } from '../interfaces';
|
||||||
import HttpService from '../services/HttpService';
|
import HttpService from '../services/HttpService';
|
||||||
import ErrorContext from '../contexts/ErrorContext';
|
import ErrorContext from '../contexts/ErrorContext';
|
||||||
import { modifyProcessIdentifierForPathParam } from '../helpers';
|
import { modifyProcessIdentifierForPathParam } from '../helpers';
|
||||||
|
|
||||||
|
const storeRecentProcessModelInLocalStorage = (
|
||||||
|
processModelForStorage: ProcessModel
|
||||||
|
) => {
|
||||||
|
// All values stored in localStorage are strings.
|
||||||
|
// Grab our recentProcessModels string from localStorage.
|
||||||
|
const stringFromLocalStorage = window.localStorage.getItem(
|
||||||
|
'recentProcessModels'
|
||||||
|
);
|
||||||
|
|
||||||
|
// adapted from https://stackoverflow.com/a/59424458/6090676
|
||||||
|
// If that value is null (meaning that we've never saved anything to that spot in localStorage before), use an empty array as our array. Otherwise, use the value we parse out.
|
||||||
|
let array: RecentProcessModel[] = [];
|
||||||
|
if (stringFromLocalStorage !== null) {
|
||||||
|
// Then parse that string into an actual value.
|
||||||
|
array = JSON.parse(stringFromLocalStorage);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Here's the value we want to add
|
||||||
|
const value = {
|
||||||
|
processModelIdentifier: processModelForStorage.id,
|
||||||
|
processModelDisplayName: processModelForStorage.display_name,
|
||||||
|
};
|
||||||
|
|
||||||
|
// anything with a processGroupIdentifier is old and busted. leave it behind.
|
||||||
|
array = array.filter((item) => item.processGroupIdentifier === undefined);
|
||||||
|
|
||||||
|
// If our parsed/empty array doesn't already have this value in it...
|
||||||
|
const matchingItem = array.find(
|
||||||
|
(item) => item.processModelIdentifier === value.processModelIdentifier
|
||||||
|
);
|
||||||
|
if (matchingItem === undefined) {
|
||||||
|
// add the value to the beginning of the array
|
||||||
|
array.unshift(value);
|
||||||
|
|
||||||
|
// Keep the array to 3 items
|
||||||
|
if (array.length > 3) {
|
||||||
|
array.pop();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// once the old and busted serializations are gone, we can put these two statements inside the above if statement
|
||||||
|
|
||||||
|
// turn the array WITH THE NEW VALUE IN IT into a string to prepare it to be stored in localStorage
|
||||||
|
const stringRepresentingArray = JSON.stringify(array);
|
||||||
|
|
||||||
|
// and store it in localStorage as "recentProcessModels"
|
||||||
|
window.localStorage.setItem('recentProcessModels', stringRepresentingArray);
|
||||||
|
};
|
||||||
|
|
||||||
type OwnProps = {
|
type OwnProps = {
|
||||||
processModel: ProcessModel;
|
processModel: ProcessModel;
|
||||||
onSuccessCallback: Function;
|
onSuccessCallback: Function;
|
||||||
|
@ -38,6 +87,7 @@ export default function ProcessInstanceRun({
|
||||||
|
|
||||||
const processModelRun = (processInstance: any) => {
|
const processModelRun = (processInstance: any) => {
|
||||||
setErrorMessage(null);
|
setErrorMessage(null);
|
||||||
|
storeRecentProcessModelInLocalStorage(processModel);
|
||||||
HttpService.makeCallToBackend({
|
HttpService.makeCallToBackend({
|
||||||
path: `/process-instances/${modifiedProcessModelId}/${processInstance.id}/run`,
|
path: `/process-instances/${modifiedProcessModelId}/${processInstance.id}/run`,
|
||||||
successCallback: onProcessInstanceRun,
|
successCallback: onProcessInstanceRun,
|
||||||
|
@ -55,11 +105,7 @@ export default function ProcessInstanceRun({
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Button
|
<Button onClick={processInstanceCreateAndRun} className={className}>
|
||||||
onClick={processInstanceCreateAndRun}
|
|
||||||
variant="primary"
|
|
||||||
className={className}
|
|
||||||
>
|
|
||||||
Run
|
Run
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
|
@ -9,7 +9,13 @@ import {
|
||||||
refreshAtInterval,
|
refreshAtInterval,
|
||||||
} from '../helpers';
|
} from '../helpers';
|
||||||
import HttpService from '../services/HttpService';
|
import HttpService from '../services/HttpService';
|
||||||
import { PaginationObject, RecentProcessModel } from '../interfaces';
|
import {
|
||||||
|
PaginationObject,
|
||||||
|
ProcessInstance,
|
||||||
|
ProcessModel,
|
||||||
|
RecentProcessModel,
|
||||||
|
} from '../interfaces';
|
||||||
|
import ProcessInstanceRun from '../components/ProcessInstanceRun';
|
||||||
|
|
||||||
const PER_PAGE_FOR_TASKS_ON_HOME_PAGE = 5;
|
const PER_PAGE_FOR_TASKS_ON_HOME_PAGE = 5;
|
||||||
const REFRESH_INTERVAL = 10;
|
const REFRESH_INTERVAL = 10;
|
||||||
|
@ -19,6 +25,8 @@ export default function MyTasks() {
|
||||||
const [searchParams] = useSearchParams();
|
const [searchParams] = useSearchParams();
|
||||||
const [tasks, setTasks] = useState([]);
|
const [tasks, setTasks] = useState([]);
|
||||||
const [pagination, setPagination] = useState<PaginationObject | null>(null);
|
const [pagination, setPagination] = useState<PaginationObject | null>(null);
|
||||||
|
const [processInstance, setProcessInstance] =
|
||||||
|
useState<ProcessInstance | null>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const getTasks = () => {
|
const getTasks = () => {
|
||||||
|
@ -40,6 +48,28 @@ export default function MyTasks() {
|
||||||
refreshAtInterval(REFRESH_INTERVAL, REFRESH_TIMEOUT, getTasks);
|
refreshAtInterval(REFRESH_INTERVAL, REFRESH_TIMEOUT, getTasks);
|
||||||
}, [searchParams]);
|
}, [searchParams]);
|
||||||
|
|
||||||
|
const processInstanceRunResultTag = () => {
|
||||||
|
if (processInstance) {
|
||||||
|
return (
|
||||||
|
<div className="alert alert-success" role="alert">
|
||||||
|
<p>
|
||||||
|
Process Instance {processInstance.id} kicked off (
|
||||||
|
<Link
|
||||||
|
to={`/admin/process-models/${modifyProcessIdentifierForPathParam(
|
||||||
|
processInstance.process_model_identifier
|
||||||
|
)}/process-instances/${processInstance.id}`}
|
||||||
|
data-qa="process-instance-show-link"
|
||||||
|
>
|
||||||
|
view
|
||||||
|
</Link>
|
||||||
|
).
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
let recentProcessModels: RecentProcessModel[] = [];
|
let recentProcessModels: RecentProcessModel[] = [];
|
||||||
const recentProcessModelsString = localStorage.getItem('recentProcessModels');
|
const recentProcessModelsString = localStorage.getItem('recentProcessModels');
|
||||||
if (recentProcessModelsString !== null) {
|
if (recentProcessModelsString !== null) {
|
||||||
|
@ -107,33 +137,44 @@ export default function MyTasks() {
|
||||||
};
|
};
|
||||||
|
|
||||||
const buildRecentProcessModelSection = () => {
|
const buildRecentProcessModelSection = () => {
|
||||||
const rows = recentProcessModels.map((row) => {
|
const rows = recentProcessModels.map((row: RecentProcessModel) => {
|
||||||
const rowToUse = row as any;
|
const processModel: ProcessModel = {
|
||||||
|
id: row.processModelIdentifier,
|
||||||
|
description: '',
|
||||||
|
display_name: '',
|
||||||
|
primary_file_name: '',
|
||||||
|
files: [],
|
||||||
|
};
|
||||||
const modifiedProcessModelId = modifyProcessIdentifierForPathParam(
|
const modifiedProcessModelId = modifyProcessIdentifierForPathParam(
|
||||||
rowToUse.processModelIdentifier
|
row.processModelIdentifier
|
||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<tr
|
<tr key={`${row.processGroupIdentifier}/${row.processModelIdentifier}`}>
|
||||||
key={`${rowToUse.processGroupIdentifier}/${rowToUse.processModelIdentifier}`}
|
|
||||||
>
|
|
||||||
<td>
|
<td>
|
||||||
<Link
|
<Link
|
||||||
data-qa="process-model-show-link"
|
data-qa="process-model-show-link"
|
||||||
to={`/admin/process-models/${modifiedProcessModelId}`}
|
to={`/admin/process-models/${modifiedProcessModelId}`}
|
||||||
>
|
>
|
||||||
{rowToUse.processModelDisplayName}
|
{row.processModelDisplayName}
|
||||||
</Link>
|
</Link>
|
||||||
</td>
|
</td>
|
||||||
|
<td>
|
||||||
|
<ProcessInstanceRun
|
||||||
|
processModel={processModel}
|
||||||
|
onSuccessCallback={setProcessInstance}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h1>Recently viewed process models</h1>
|
<h1>Recently instantiated process models</h1>
|
||||||
<Table striped bordered>
|
<Table striped bordered>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Process Model</th>
|
<th>Process Model</th>
|
||||||
|
<th>Actions</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>{rows}</tbody>
|
<tbody>{rows}</tbody>
|
||||||
|
@ -175,6 +216,7 @@ export default function MyTasks() {
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
{processInstanceRunResultTag()}
|
||||||
{tasksWaitingForMe}
|
{tasksWaitingForMe}
|
||||||
<br />
|
<br />
|
||||||
{relevantProcessModelSection}
|
{relevantProcessModelSection}
|
||||||
|
|
|
@ -41,7 +41,6 @@ import {
|
||||||
ProcessFile,
|
ProcessFile,
|
||||||
ProcessInstance,
|
ProcessInstance,
|
||||||
ProcessModel,
|
ProcessModel,
|
||||||
RecentProcessModel,
|
|
||||||
} from '../interfaces';
|
} from '../interfaces';
|
||||||
import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
|
import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
|
||||||
import ProcessInstanceListTable from '../components/ProcessInstanceListTable';
|
import ProcessInstanceListTable from '../components/ProcessInstanceListTable';
|
||||||
|
@ -49,55 +48,6 @@ import { usePermissionFetcher } from '../hooks/PermissionService';
|
||||||
import { useUriListForPermissions } from '../hooks/UriListForPermissions';
|
import { useUriListForPermissions } from '../hooks/UriListForPermissions';
|
||||||
import ProcessInstanceRun from '../components/ProcessInstanceRun';
|
import ProcessInstanceRun from '../components/ProcessInstanceRun';
|
||||||
|
|
||||||
const storeRecentProcessModelInLocalStorage = (
|
|
||||||
processModelForStorage: ProcessModel
|
|
||||||
) => {
|
|
||||||
// All values stored in localStorage are strings.
|
|
||||||
// Grab our recentProcessModels string from localStorage.
|
|
||||||
const stringFromLocalStorage = window.localStorage.getItem(
|
|
||||||
'recentProcessModels'
|
|
||||||
);
|
|
||||||
|
|
||||||
// adapted from https://stackoverflow.com/a/59424458/6090676
|
|
||||||
// If that value is null (meaning that we've never saved anything to that spot in localStorage before), use an empty array as our array. Otherwise, use the value we parse out.
|
|
||||||
let array: RecentProcessModel[] = [];
|
|
||||||
if (stringFromLocalStorage !== null) {
|
|
||||||
// Then parse that string into an actual value.
|
|
||||||
array = JSON.parse(stringFromLocalStorage);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Here's the value we want to add
|
|
||||||
const value = {
|
|
||||||
processModelIdentifier: processModelForStorage.id,
|
|
||||||
processModelDisplayName: processModelForStorage.display_name,
|
|
||||||
};
|
|
||||||
|
|
||||||
// anything with a processGroupIdentifier is old and busted. leave it behind.
|
|
||||||
array = array.filter((item) => item.processGroupIdentifier === undefined);
|
|
||||||
|
|
||||||
// If our parsed/empty array doesn't already have this value in it...
|
|
||||||
const matchingItem = array.find(
|
|
||||||
(item) => item.processModelIdentifier === value.processModelIdentifier
|
|
||||||
);
|
|
||||||
if (matchingItem === undefined) {
|
|
||||||
// add the value to the beginning of the array
|
|
||||||
array.unshift(value);
|
|
||||||
|
|
||||||
// Keep the array to 3 items
|
|
||||||
if (array.length > 3) {
|
|
||||||
array.pop();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// once the old and busted serializations are gone, we can put these two statements inside the above if statement
|
|
||||||
|
|
||||||
// turn the array WITH THE NEW VALUE IN IT into a string to prepare it to be stored in localStorage
|
|
||||||
const stringRepresentingArray = JSON.stringify(array);
|
|
||||||
|
|
||||||
// and store it in localStorage as "recentProcessModels"
|
|
||||||
window.localStorage.setItem('recentProcessModels', stringRepresentingArray);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function ProcessModelShow() {
|
export default function ProcessModelShow() {
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
const setErrorMessage = (useContext as any)(ErrorContext)[1];
|
const setErrorMessage = (useContext as any)(ErrorContext)[1];
|
||||||
|
@ -130,7 +80,6 @@ export default function ProcessModelShow() {
|
||||||
const processResult = (result: ProcessModel) => {
|
const processResult = (result: ProcessModel) => {
|
||||||
setProcessModel(result);
|
setProcessModel(result);
|
||||||
setReloadModel(false);
|
setReloadModel(false);
|
||||||
storeRecentProcessModelInLocalStorage(result);
|
|
||||||
};
|
};
|
||||||
HttpService.makeCallToBackend({
|
HttpService.makeCallToBackend({
|
||||||
path: `/process-models/${modifiedProcessModelId}`,
|
path: `/process-models/${modifiedProcessModelId}`,
|
||||||
|
|
Loading…
Reference in New Issue