From 0777bda3174b7f952969f655dc735ae0e7ad616d Mon Sep 17 00:00:00 2001 From: jasquat Date: Fri, 2 Dec 2022 13:47:04 -0500 Subject: [PATCH] filtering by metadata works w/ burnettk --- .../ProcessInstanceListSaveAsReport.tsx | 32 +++- src/components/ProcessInstanceListTable.tsx | 138 ++++++++++++++---- .../ProcessInstanceReportSearch.tsx | 2 +- src/config.tsx | 1 + src/index.css | 7 + src/interfaces.ts | 14 +- 6 files changed, 156 insertions(+), 38 deletions(-) diff --git a/src/components/ProcessInstanceListSaveAsReport.tsx b/src/components/ProcessInstanceListSaveAsReport.tsx index 2942ba4..de5ea22 100644 --- a/src/components/ProcessInstanceListSaveAsReport.tsx +++ b/src/components/ProcessInstanceListSaveAsReport.tsx @@ -6,12 +6,18 @@ import { Stack, // @ts-ignore } from '@carbon/react'; -import { ProcessInstanceReport, ProcessModel } from '../interfaces'; +import { + ReportFilter, + ProcessInstanceReport, + ProcessModel, + ReportColumn, + ReportMetadata, +} from '../interfaces'; import HttpService from '../services/HttpService'; type OwnProps = { onSuccess: (..._args: any[]) => any; - columnArray: { Header: string; accessor: string }; + columnArray: ReportColumn[]; orderBy: string; processModelSelection: ProcessModel | null; processStatusSelection: string[]; @@ -22,6 +28,7 @@ type OwnProps = { buttonText?: string; buttonClassName?: string; processInstanceReportSelection?: ProcessInstanceReport | null; + reportMetadata: ReportMetadata; }; export default function ProcessInstanceListSaveAsReport({ @@ -37,6 +44,7 @@ export default function ProcessInstanceListSaveAsReport({ endToSeconds, buttonText = 'Save as Perspective', buttonClassName, + reportMetadata, }: OwnProps) { const [identifier, setIdentifier] = useState( processInstanceReportSelection?.identifier || '' @@ -59,7 +67,11 @@ export default function ProcessInstanceListSaveAsReport({ const addProcessInstanceReport = (event: any) => { event.preventDefault(); - const orderByArray = orderBy.split(',').filter((n) => n); + // TODO: make a field to set this + let orderByArray = ['-start_in_seconds', '-id']; + if (orderBy) { + orderByArray = orderBy.split(',').filter((n) => n); + } const filterByArray: any = []; if (processModelSelection) { @@ -72,7 +84,8 @@ export default function ProcessInstanceListSaveAsReport({ if (processStatusSelection.length > 0) { filterByArray.push({ field_name: 'process_status', - field_value: processStatusSelection[0], // TODO: support more than one status + field_value: processStatusSelection.join(','), + operator: 'in', }); } @@ -104,6 +117,17 @@ export default function ProcessInstanceListSaveAsReport({ }); } + reportMetadata.filter_by.forEach((reportFilter: ReportFilter) => { + columnArray.forEach((reportColumn: ReportColumn) => { + if ( + reportColumn.accessor === reportFilter.field_name && + reportColumn.filterable + ) { + filterByArray.push(reportFilter); + } + }); + }); + let path = `/process-instances/reports`; let httpMethod = 'POST'; if (isEditMode() && processInstanceReportSelection) { diff --git a/src/components/ProcessInstanceListTable.tsx b/src/components/ProcessInstanceListTable.tsx index cb782c0..92355fe 100644 --- a/src/components/ProcessInstanceListTable.tsx +++ b/src/components/ProcessInstanceListTable.tsx @@ -57,6 +57,9 @@ import { ProcessInstanceReport, ProcessInstance, ReportColumn, + ReportColumnForEditing, + ReportMetadata, + ReportFilter, } from '../interfaces'; import ProcessModelSearch from './ProcessModelSearch'; import ProcessInstanceReportSearch from './ProcessInstanceReportSearch'; @@ -98,7 +101,7 @@ export default function ProcessInstanceListTable({ const navigate = useNavigate(); const [processInstances, setProcessInstances] = useState([]); - const [reportMetadata, setReportMetadata] = useState({}); + const [reportMetadata, setReportMetadata] = useState(); const [pagination, setPagination] = useState(null); const [processInstanceFilters, setProcessInstanceFilters] = useState({}); @@ -143,7 +146,7 @@ export default function ProcessInstanceListTable({ const [showReportColumnForm, setShowReportColumnForm] = useState(false); const [reportColumnToOperateOn, setReportColumnToOperateOn] = - useState(null); + useState(null); const [reportColumnFormMode, setReportColumnFormMode] = useState(''); const dateParametersToAlwaysFilterBy: dateParameters = useMemo(() => { @@ -630,17 +633,19 @@ export default function ProcessInstanceListTable({ endToSeconds, } = calculateStartAndEndSeconds(); - if (!valid) { + if (!valid || !reportMetadata) { return null; } return ( { - const reportMetadataCopy = { ...reportMetadata }; - const newColumns = reportColumns().filter( - (rc: ReportColumn) => rc.accessor !== reportColumn.accessor - ); - Object.assign(reportMetadataCopy, { columns: newColumns }); - setReportMetadata(reportMetadataCopy); + if (reportMetadata) { + const reportMetadataCopy = { ...reportMetadata }; + const newColumns = reportColumns().filter( + (rc: ReportColumn) => rc.accessor !== reportColumn.accessor + ); + Object.assign(reportMetadataCopy, { columns: newColumns }); + setReportMetadata(reportMetadataCopy); + } }; const handleColumnFormClose = () => { @@ -664,8 +671,49 @@ export default function ProcessInstanceListTable({ setReportColumnToOperateOn(null); }; - const handleUpdateColumn = () => { - if (reportColumnToOperateOn) { + const getFilterByFromReportMetadata = (reportColumnAccessor: string) => { + if (reportMetadata) { + return reportMetadata.filter_by.find((reportFilter: ReportFilter) => { + return reportColumnAccessor === reportFilter.field_name; + }); + } + return null; + }; + + const getNewFiltersFromReportForEditing = ( + reportColumnForEditing: ReportColumnForEditing + ) => { + if (!reportMetadata) { + return null; + } + const reportMetadataCopy = { ...reportMetadata }; + let newReportFilters = reportMetadataCopy.filter_by; + if (reportColumnForEditing.filterable) { + const newReportFilter: ReportFilter = { + field_name: reportColumnForEditing.accessor, + field_value: reportColumnForEditing.filter_field_value, + operator: reportColumnForEditing.filter_operator || 'equals', + }; + const existingReportFilter = getFilterByFromReportMetadata( + reportColumnForEditing.accessor + ); + if (existingReportFilter) { + const existingReportFilterIndex = + reportMetadataCopy.filter_by.indexOf(existingReportFilter); + if (reportColumnForEditing.filter_field_value) { + newReportFilters[existingReportFilterIndex] = newReportFilter; + } else { + newReportFilters.splice(existingReportFilterIndex, 1); + } + } else { + newReportFilters = newReportFilters.concat([newReportFilter]); + } + } + return newReportFilters; + }; + + const handleUpdateReportColumn = () => { + if (reportColumnToOperateOn && reportMetadata) { const reportMetadataCopy = { ...reportMetadata }; let newReportColumns = null; if (reportColumnFormMode === 'new') { @@ -680,6 +728,7 @@ export default function ProcessInstanceListTable({ } Object.assign(reportMetadataCopy, { columns: newReportColumns, + filter_by: getNewFiltersFromReportForEditing(reportColumnToOperateOn), }); setReportMetadata(reportMetadataCopy); setReportColumnToOperateOn(null); @@ -688,8 +737,27 @@ export default function ProcessInstanceListTable({ } }; + const reportColumnToReportColumnForEditing = (reportColumn: ReportColumn) => { + const reportColumnForEditing: ReportColumnForEditing = Object.assign( + reportColumn, + { filter_field_value: '', filter_operator: '' } + ); + const reportFilter = getFilterByFromReportMetadata( + reportColumnForEditing.accessor + ); + if (reportFilter) { + reportColumnForEditing.filter_field_value = reportFilter.field_value; + reportColumnForEditing.filter_operator = + reportFilter.operator || 'equals'; + } + return reportColumnForEditing; + }; + const updateReportColumn = (event: any) => { - setReportColumnToOperateOn(event.selectedItem); + const reportColumnForEditing = reportColumnToReportColumnForEditing( + event.selectedItem + ); + setReportColumnToOperateOn(reportColumnForEditing); }; // options includes item and inputValue @@ -709,7 +777,7 @@ export default function ProcessInstanceListTable({ const reportColumnToOperateOnCopy = { ...reportColumnToOperateOn, }; - reportColumnToOperateOnCopy.condition_value = event.target.value; + reportColumnToOperateOnCopy.filter_field_value = event.target.value; setReportColumnToOperateOn(reportColumnToOperateOnCopy); } }; @@ -737,7 +805,6 @@ export default function ProcessInstanceListTable({ />, ]; if (reportColumnToOperateOn && reportColumnToOperateOn.filterable) { - console.log('reportColumnToOperateOn', reportColumnToOperateOn); formElements.push( @@ -799,13 +866,16 @@ export default function ProcessInstanceListTable({ const tags: any = []; (reportColumns() as any).forEach((reportColumn: ReportColumn) => { + const reportColumnForEditing = + reportColumnToReportColumnForEditing(reportColumn); + let tagType = 'cool-gray'; - if (reportColumn.filterable) { + if (reportColumnForEditing.filterable) { tagType = 'green'; } - let reportColumnLabel = reportColumn.Header; - if (reportColumn.condition_value) { - reportColumnLabel = `${reportColumnLabel}=${reportColumn.condition_value}`; + let reportColumnLabel = reportColumnForEditing.Header; + if (reportColumnForEditing.filter_field_value) { + reportColumnLabel = `${reportColumnLabel}=${reportColumnForEditing.filter_field_value}`; } tags.push( @@ -813,9 +883,9 @@ export default function ProcessInstanceListTable({ kind="ghost" size="sm" className="button-tag-icon" - title={`Edit ${reportColumn.accessor}`} + title={`Edit ${reportColumnForEditing.accessor}`} onClick={() => { - setReportColumnToOperateOn(reportColumn); + setReportColumnToOperateOn(reportColumnForEditing); setShowReportColumnForm(true); setReportColumnFormMode('edit'); }} @@ -830,7 +900,7 @@ export default function ProcessInstanceListTable({ hasIconOnly size="sm" kind="ghost" - onClick={() => removeColumn(reportColumn)} + onClick={() => removeColumn(reportColumnForEditing)} /> ); @@ -933,11 +1003,14 @@ export default function ProcessInstanceListTable({ - + + {saveAsReportComponent()} + + - - - {saveAsReportComponent()} - - ); }; @@ -1079,7 +1148,11 @@ export default function ProcessInstanceListTable({ /> , ]; - if (processInstanceReportSelection && showFilterOptions) { + if ( + processInstanceReportSelection && + showFilterOptions && + reportMetadata + ) { columns.push( { - return `${truncateString(processInstanceReport.identifier, 20)} (${ + return `${truncateString(processInstanceReport.identifier, 20)} (Id: ${ processInstanceReport.id })`; }; diff --git a/src/config.tsx b/src/config.tsx index 5e7e96f..b0816a3 100644 --- a/src/config.tsx +++ b/src/config.tsx @@ -14,6 +14,7 @@ export const PROCESS_STATUSES = [ 'complete', 'error', 'suspended', + 'terminated', ]; // with time: yyyy-MM-dd HH:mm:ss diff --git a/src/index.css b/src/index.css index 1c708fe..6b02ea3 100644 --- a/src/index.css +++ b/src/index.css @@ -346,3 +346,10 @@ td.actions-cell { .combo-box-in-modal { height: 300px; } + +.cds--btn.narrow-button { + max-width: 10rem; + min-width: 5rem; + word-break: normal; + +} diff --git a/src/interfaces.ts b/src/interfaces.ts index 8d7abc4..a75b9a8 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -63,15 +63,27 @@ export interface MessageInstance { message_correlations?: MessageCorrelations; } +export interface ReportFilter { + field_name: string; + field_value: string; + operator?: string; +} + export interface ReportColumn { Header: string; accessor: string; filterable: boolean; - condition_value?: string; +} + +export interface ReportColumnForEditing extends ReportColumn { + filter_field_value: string; + filter_operator: string; } export interface ReportMetadata { columns: ReportColumn[]; + filter_by: ReportFilter[]; + order_by: string[]; } export interface ProcessInstanceReport {