diff --git a/src/components/ColumnsModal/ColumnsModalComponent.jsx b/src/components/ColumnsModal/ColumnsModalComponent.jsx index ac816a0d4..db0d9e89a 100644 --- a/src/components/ColumnsModal/ColumnsModalComponent.jsx +++ b/src/components/ColumnsModal/ColumnsModalComponent.jsx @@ -42,6 +42,7 @@ import { import { defaultColumns, customAlertColumns, + customComputedColumns, // columnsForSavedColumns, } from 'src/config/column-generator'; @@ -97,6 +98,11 @@ const TableColumnsModalComponent = () => { value = column.Header + (column.accessorPath ? `:${column.accessorPath}` : '') + (column.aggregator ? `:${column.aggregator}` : ''); + } else if (column.columnType === 'computed') { + // Computed column based on expression + value = column.Header + + (column.accessorPath ? `:${column.accessorPath}` : '') + + (column.expression ? `:${column.expression}` : ''); } else { // Incident column value = column.Header; @@ -106,11 +112,11 @@ const TableColumnsModalComponent = () => { const getAllAvailableColumns = () => { // eslint-disable-next-line max-len - const v = [...defaultColumns(), ...customAlertColumns(alertCustomDetailFields)].sort((a, b) => columnValue(a).localeCompare(columnValue(b))); + const v = [...defaultColumns(), ...customAlertColumns(alertCustomDetailFields), ...customComputedColumns(computedFields)].sort((a, b) => columnValue(a).localeCompare(columnValue(b))); return v; }; - const allAvailableColumns = useMemo(getAllAvailableColumns, [alertCustomDetailFields]); + const allAvailableColumns = useMemo(getAllAvailableColumns, [alertCustomDetailFields, computedFields]); // const getSelectedColumns = () => columnsForSavedColumns(incidentTableColumns).map((column) => { // // Recreate original value used from react-select in order to populate dual list diff --git a/src/config/column-generator.jsx b/src/config/column-generator.jsx index 704107ac2..018128e48 100644 --- a/src/config/column-generator.jsx +++ b/src/config/column-generator.jsx @@ -872,6 +872,47 @@ export const customAlertColumnForSavedColumn = (savedColumn) => { return column; }; +export const customComputedColumnForSavedColumn = (savedColumn) => { + const { + Header: header, accessorPath, aggregator, width, expression, expressionType, + } = savedColumn; + if (!(header && accessorPath)) { + return null; + } + const accessor = (incident) => { + const path = accessorPath; + let result = null; + try { + result = JSONPath({ + path, + json: incident, + }); + } catch (e) { + result = null; + } + if (aggregator) { + return result; + } + return result[0]; + }; + const column = incidentColumn({ + id: accessorPath, + header, + columnType: 'computed', + accessor, + accessorPath, + expression, + expressionType, + minWidth: 100, + renderer: renderPlainTextAlertCell, + }); + + if (width) { + column.width = width; + } + return column; +}; + export const defaultColumns = () => [...defaultIncidentColumns(), ...defaultAlertsColumns()]; export const customAlertColumns = (savedColumns) => { @@ -887,6 +928,19 @@ export const customAlertColumns = (savedColumns) => { }); }; +export const customComputedColumns = (savedColumns) => { + const allColumns = defaultColumns(); + return savedColumns.map((column) => { + if ( + column.columnType === 'computed' + && !allColumns.find((c) => c.originalHeader === column.Header) + ) { + return customComputedColumnForSavedColumn(column); + } + return undefined; + }); +}; + export const columnsForSavedColumns = (savedColumns) => { const allColumns = defaultColumns(); const columns = savedColumns