computed columns UI WIP 3

Signed-off-by: Gavin Reynolds <[email protected]>
PagerDuty · Jul 5, 2024 · d36a15d · d36a15d
1 parent a3a9929
commit d36a15d
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 2 deletions.
diff --git 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
@@ -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