From 701f9dcef9adb113dc95f75508e0972931f722e7 Mon Sep 17 00:00:00 2001 From: burnettk Date: Thu, 10 Nov 2022 14:32:39 -0500 Subject: [PATCH 1/5] fix lint --- .../src/routes/ProcessModelEditDiagram.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx b/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx index e93be421..a38be70f 100644 --- a/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx @@ -641,12 +641,17 @@ export default function ProcessModelEditDiagram() { return ( - + ); }; @@ -676,8 +681,6 @@ export default function ProcessModelEditDiagram() { * @param processId */ - - const onLaunchBpmnEditor = (processId: string) => { const file = findFileNameForReferenceId(processId, 'bpmn'); if (file) { From 2f992e67cde2e577eba582c40b263c67d03477c4 Mon Sep 17 00:00:00 2001 From: burnettk Date: Thu, 10 Nov 2022 14:33:07 -0500 Subject: [PATCH 2/5] ignore pyrightconfig.json --- .gitignore | 1 + 1 file changed, 1 insertion(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..73f59e5e --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +pyrightconfig.json From 7aca52035c29c8101db631c0b27b99cbd7bc76a2 Mon Sep 17 00:00:00 2001 From: jasquat Date: Thu, 10 Nov 2022 15:44:58 -0500 Subject: [PATCH 3/5] fixed up the process instance show page and moved contents of scss to css file and load that last w/ burnettk --- .../models/process_instance.py | 1 - .../models/process_instance_report.py | 4 - .../services/process_instance_service.py | 2 +- spiffworkflow-frontend/src/config.tsx | 1 + spiffworkflow-frontend/src/helpers.tsx | 10 +- spiffworkflow-frontend/src/index.css | 110 ++++++++-- spiffworkflow-frontend/src/index.scss | 82 -------- spiffworkflow-frontend/src/index.tsx | 2 +- .../src/routes/MessageInstanceList.tsx | 3 +- .../src/routes/ProcessInstanceLogList.tsx | 3 +- .../src/routes/ProcessInstanceShow.tsx | 194 +++++++++++++----- 11 files changed, 242 insertions(+), 170 deletions(-) diff --git a/spiffworkflow-backend/src/spiffworkflow_backend/models/process_instance.py b/spiffworkflow-backend/src/spiffworkflow_backend/models/process_instance.py index 37b65157..64814e8f 100644 --- a/spiffworkflow-backend/src/spiffworkflow_backend/models/process_instance.py +++ b/spiffworkflow-backend/src/spiffworkflow_backend/models/process_instance.py @@ -64,7 +64,6 @@ class ProcessInstanceStatus(SpiffEnum): faulted = "faulted" suspended = "suspended" terminated = "terminated" - erroring = "erroring" class ProcessInstanceModel(SpiffworkflowBaseDBModel): diff --git a/spiffworkflow-backend/src/spiffworkflow_backend/models/process_instance_report.py b/spiffworkflow-backend/src/spiffworkflow_backend/models/process_instance_report.py index b6f16288..1425d69f 100644 --- a/spiffworkflow-backend/src/spiffworkflow_backend/models/process_instance_report.py +++ b/spiffworkflow-backend/src/spiffworkflow_backend/models/process_instance_report.py @@ -83,10 +83,6 @@ class ProcessInstanceReportModel(SpiffworkflowBaseDBModel): report_metadata = { "columns": [ {"Header": "id", "accessor": "id"}, - { - "Header": "process_group_identifier", - "accessor": "process_group_identifier", - }, { "Header": "process_model_identifier", "accessor": "process_model_identifier", diff --git a/spiffworkflow-backend/src/spiffworkflow_backend/services/process_instance_service.py b/spiffworkflow-backend/src/spiffworkflow_backend/services/process_instance_service.py index 7854537e..d2f1bdaa 100644 --- a/spiffworkflow-backend/src/spiffworkflow_backend/services/process_instance_service.py +++ b/spiffworkflow-backend/src/spiffworkflow_backend/services/process_instance_service.py @@ -64,7 +64,7 @@ class ProcessInstanceService: processor.do_engine_steps(save=True) except Exception as e: db.session.rollback() # in case the above left the database with a bad transaction - process_instance.status = ProcessInstanceStatus.erroring.value + process_instance.status = ProcessInstanceStatus.faulted.value db.session.add(process_instance) db.session.commit() error_message = ( diff --git a/spiffworkflow-frontend/src/config.tsx b/spiffworkflow-frontend/src/config.tsx index c9e94eb0..0ded81e3 100644 --- a/spiffworkflow-frontend/src/config.tsx +++ b/spiffworkflow-frontend/src/config.tsx @@ -17,5 +17,6 @@ export const PROCESS_STATUSES = [ ]; // with time: yyyy-MM-dd HH:mm:ss +export const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss'; export const DATE_FORMAT = 'yyyy-MM-dd'; export const DATE_FORMAT_CARBON = 'Y-m-d'; diff --git a/spiffworkflow-frontend/src/helpers.tsx b/spiffworkflow-frontend/src/helpers.tsx index 564c99f1..383c3e0a 100644 --- a/spiffworkflow-frontend/src/helpers.tsx +++ b/spiffworkflow-frontend/src/helpers.tsx @@ -1,5 +1,5 @@ import { format } from 'date-fns'; -import { DATE_FORMAT } from './config'; +import { DATE_TIME_FORMAT, DATE_FORMAT } from './config'; import { DEFAULT_PER_PAGE, DEFAULT_PAGE, @@ -51,6 +51,14 @@ export const convertStringToDate = (dateString: string) => { return null; }; +export const convertSecondsToFormattedDateTime = (seconds: number) => { + if (seconds) { + const dateObject = new Date(seconds * 1000); + return format(dateObject, DATE_TIME_FORMAT); + } + return null; +}; + export const convertSecondsToFormattedDate = (seconds: number) => { if (seconds) { const dateObject = new Date(seconds * 1000); diff --git a/spiffworkflow-frontend/src/index.css b/spiffworkflow-frontend/src/index.css index b1eedf70..c2e2e802 100644 --- a/spiffworkflow-frontend/src/index.css +++ b/spiffworkflow-frontend/src/index.css @@ -1,24 +1,79 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; +/* site is mainly using white theme. */ +/* header is mainly using g100 */ +/* mockup wanted white, not grey, text */ +.cds--header, a.cds--header__menu-item { + color: white; } +h1{ + height: 36px; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 36px; + color: #161616; + flex: none; + order: 0; + align-self: stretch; + flex-grow: 0; + margin-bottom: 1em +} + +.span-tag { + color: black; +} + +.cds--btn.button-white-background { + color: #393939; + background: #FFFFFF; + background-blend-mode: multiply; + border: 1px solid #393939; +} +.cds--btn.button-white-background:hover { + background: #525252; +} + +.cds--breadcrumb-item a.cds--link:hover { + color: #525252; +} +.cds--breadcrumb-item a.cds--link:visited { + color: #525252; +} +.cds--breadcrumb-item a.cds--link:visited:hover { + color: #525252; +} +.cds--breadcrumb-item a.cds--link { + color: #525252; +} + +.cds--btn--ghost { + color: black; +} +.cds--btn--ghost:visited { + color: black; +} +.cds--btn--ghost:hover { + color: black; +} +.cds--btn--ghost:visited:hover { + color: black; +} + +.cds--header__global .cds--btn--primary { + background-color: #161616 +} +.cds--btn--primary { + background-color: #393939; +} +.cds--btn--primary:hover { + background-color: #474747; +} code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } -span.bjs-crumb { - color: #0000ff; -} -.bjs-breadcrumbs li:last-of-type span.bjs-crumb a { - color: black; -} - .app-logo { height: 85%; width: 85%; @@ -52,6 +107,26 @@ span.bjs-crumb { margin-bottom: 2em; } +h1.with-icons { + margin-top: 5px; +} + +.grid-list-title { + font-weight: 600; + font-size: 14px; + line-height: 18px; + color: #161616; +} +.grid-date { + font-size: 14px; + line-height: 18px; + letter-spacing: 0.16px; + color: #525252; +} +.smaller-text { + font-size: 14px; +} + .diagram-editor-canvas { border:1px solid #000000; height:70vh; @@ -59,13 +134,6 @@ span.bjs-crumb { margin:auto; } -.cds--btn.button-white-background { - color: #393939; - background: #FFFFFF; - background-blend-mode: multiply; - border: 1px solid #393939; -} - .with-bottom-margin { margin-bottom: 1em; } diff --git a/spiffworkflow-frontend/src/index.scss b/spiffworkflow-frontend/src/index.scss index 37766c21..86b76998 100644 --- a/spiffworkflow-frontend/src/index.scss +++ b/spiffworkflow-frontend/src/index.scss @@ -15,85 +15,3 @@ @use '@carbon/colors'; // @use '@carbon/react/scss/colors'; @use '@carbon/react/scss/themes'; - -// var(--cds-link-text-color, var(--cds-link-primary, #0f62fe)) - -// site is mainly using white theme. -// header is mainly using g100 -// mockup wanted white, not grey, text -.cds--header, a.cds--header__menu-item { - // background-color: colors.$gray-100; - color: white; -} -h1{ - height: 36px; - font-family: 'IBM Plex Sans'; - font-style: normal; - font-weight: 400; - font-size: 28px; - line-height: 36px; - color: #161616; - flex: none; - order: 0; - align-self: stretch; - flex-grow: 0; - margin-bottom: 1em -} - - -.cds--breadcrumb-item a.cds--link:hover { - color: #525252; -} -.cds--breadcrumb-item a.cds--link:visited { - color: #525252; -} -.cds--breadcrumb-item a.cds--link:visited:hover { - color: #525252; -} -.cds--breadcrumb-item a.cds--link { - color: #525252; -} - -.cds--btn--ghost { - color: black; -} -.cds--btn--ghost:visited { - color: black; -} -.cds--btn--ghost:hover { - color: black; -} -.cds--btn--ghost:visited:hover { - color: black; -} - -$slightly-lighter-gray: #474747; -$spiff-header-background-color: #161616; - -.cds--header__global .cds--btn--primary { - background-color: $spiff-header-background-color; -} -.cds--btn--primary { - background-color: #393939; -} -.cds--btn--primary:hover { - background-color: $slightly-lighter-gray; -} -// .cds--btn--ghost:visited { -// color: black; -// } -// .cds--btn--ghost:hover { -// color: black; -// } -// .cds--btn--ghost:visited:hover { -// color: black; -// } - - -// :root { -// --cds-link-primary: #525252; -// } -// .card { -// background: var(--orange); -// --orange: hsl(255, 72%, var(--lightness)); -// } diff --git a/spiffworkflow-frontend/src/index.tsx b/spiffworkflow-frontend/src/index.tsx index a2fab5c0..7a602be6 100644 --- a/spiffworkflow-frontend/src/index.tsx +++ b/spiffworkflow-frontend/src/index.tsx @@ -3,8 +3,8 @@ import * as ReactDOMClient from 'react-dom/client'; import App from './App'; import 'bootstrap/dist/css/bootstrap.css'; -import './index.css'; import './index.scss'; +import './index.css'; import reportWebVitals from './reportWebVitals'; import UserService from './services/UserService'; diff --git a/spiffworkflow-frontend/src/routes/MessageInstanceList.tsx b/spiffworkflow-frontend/src/routes/MessageInstanceList.tsx index 55e885ae..fe381bf4 100644 --- a/spiffworkflow-frontend/src/routes/MessageInstanceList.tsx +++ b/spiffworkflow-frontend/src/routes/MessageInstanceList.tsx @@ -113,11 +113,12 @@ export default function MessageInstanceList() { )}:link`, ], [ - `${searchParams.get('process_instance_id')}`, + `Process Instance: ${searchParams.get('process_instance_id')}`, `/admin/process-models/${searchParams.get( 'process_model_id' )}/process-instances/${searchParams.get('process_instance_id')}`, ], + ['Messages'], ]} /> ); diff --git a/spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx b/spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx index 22303dec..bb8ef4c1 100644 --- a/spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx @@ -88,9 +88,10 @@ export default function ProcessInstanceLogList() { )}:link`, ], [ - `${params.process_instance_id}`, + `Process Instance: ${params.process_instance_id}`, `/admin/process-models/${params.process_model_id}/process-instances/${params.process_instance_id}`, ], + ['Logs'], ]} /> { return ( @@ -155,7 +168,7 @@ export default function ProcessInstanceShow() { return null; } - return spiffStepLink(processInstanceToUse, '<<', -1); + return spiffStepLink(processInstanceToUse, , -1); }; const nextStepLink = (processInstanceToUse: any) => { @@ -163,49 +176,87 @@ export default function ProcessInstanceShow() { return null; } - return spiffStepLink(processInstanceToUse, '>>', 1); + return spiffStepLink(processInstanceToUse, , 1); }; const getInfoTag = (processInstanceToUse: any) => { - const currentEndDate = convertSecondsToFormattedDate( + const currentEndDate = convertSecondsToFormattedDateTime( processInstanceToUse.end_in_seconds ); let currentEndDateTag; if (currentEndDate) { currentEndDateTag = ( -
  • - Completed:{' '} - {convertSecondsToFormattedDate(processInstanceToUse.end_in_seconds) || - 'N/A'} -
    • + + + Completed:{' '} + + + {convertSecondsToFormattedDateTime( + processInstanceToUse.end_in_seconds + ) || 'N/A'} + + ); } + let statusIcon = ; + if (processInstanceToUse.status === 'suspended') { + statusIcon = ; + } else if (processInstanceToUse.status === 'complete') { + statusIcon = ; + } else if (processInstanceToUse.status === 'terminated') { + statusIcon = ; + } else if (processInstanceToUse.status === 'faulted') { + statusIcon = ; + } + return ( - -
  • - Started:{' '} - {convertSecondsToFormattedDate(processInstanceToUse.start_in_seconds)} -
    • + <> + + + Started:{' '} + + + {convertSecondsToFormattedDateTime( + processInstanceToUse.start_in_seconds + )} + + {currentEndDateTag} -
  • Status: {processInstanceToUse.status}
    • -
  • - - Logs - -
    • -
  • - - Messages - -
    • -     + + + Status:{' '} + + + + {processInstanceToUse.status} {statusIcon} + + + +
    + + + + + + + + + ); }; @@ -216,9 +267,15 @@ export default function ProcessInstanceShow() { ) === -1 ) { return ( - + ); } return
    ; @@ -231,9 +288,14 @@ export default function ProcessInstanceShow() { ) === -1 ) { return ( - + +