computed columns UI WIP 2

Signed-off-by: Gavin Reynolds <[email protected]>

src/App.jsx

@@ -162,7 +162,7 @@ const App = () => {
     dispatch({ type: START_QUEUE_STATS_POLLING });
   }, []);
 
-  if (catastrophe) {
+  if (catastrophe && 1 === 2) {
     return (
       <CatastropheModal
         errorMessage={connectionStatusMessage}

src/components/ColumnsModal/ColumnsModalComponent.jsx

@@ -53,6 +53,7 @@ import {
 import {
   toggleColumnsModal as toggleColumnsModalConnected,
   setAlertCustomDetailColumns as setAlertCustomDetailColumnsConnected,
+  setComputedColumns as setComputedColumnsConnected,
 } from 'src/redux/settings/actions';
 
 import ColumnsModalItem from './subcomponents/ColumnsModalItem';
@@ -61,6 +62,7 @@ import DraggableColumnsModalItem from './subcomponents/DraggableColumnsModalItem
 const TableColumnsModalComponent = () => {
   const displayColumnsModal = useSelector((state) => state.settings.displayColumnsModal);
   const alertCustomDetailFields = useSelector((state) => state.settings.alertCustomDetailFields);
+  const computedFields = useSelector((state) => state.settings.computedFields);
   const incidentTableColumns = useSelector((state) => state.incidentTable.incidentTableColumns);
   const {
     incidentTableState,
@@ -71,6 +73,9 @@ const TableColumnsModalComponent = () => {
   const setAlertCustomDetailColumns = (newAlertCustomDetailFields) => {
     dispatch(setAlertCustomDetailColumnsConnected(newAlertCustomDetailFields));
   };
+  const setComputedColumns = (newComputedFields) => {
+    dispatch(setComputedColumnsConnected(newComputedFields));
+  };
   const saveIncidentTable = (updatedIncidentTableColumns) => {
     dispatch(saveIncidentTableConnected(updatedIncidentTableColumns));
   };
@@ -159,19 +164,19 @@ const TableColumnsModalComponent = () => {
   };
 
   const addCustomComputedColumn = (value) => {
-    const [Header, accessorPath, aggregator, expression] = value.split(':');
+    const [Header, accessorPath, expression] = value.split(':');
     const newColumn = {
       Header,
       accessorPath,
-      aggregator,
       value,
-      // expressionType,
+      expressionType: 'regex-single',
       expression,
       // label: value,
-      columnType: 'alert',
+      columnType: 'computed',
     };
-    const newAlertCustomDetailFields = [...alertCustomDetailFields, newColumn];
-    setAlertCustomDetailColumns(newAlertCustomDetailFields);
+    console.error('newColumn', newColumn);
+    const newComputedFields = [...computedFields, newColumn];
+    setComputedColumns(newComputedFields);
   };
 
   const removeCustomAlertColumn = (column) => {
@@ -182,6 +187,14 @@ const TableColumnsModalComponent = () => {
     setAlertCustomDetailColumns(newAlertCustomDetailFields);
   };
 
+  const removeCustomComputedColumn = (column) => {
+    unselectColumn(column);
+    const newComputedFields = computedFields.filter(
+      (c) => c.value !== column.value,
+    );
+    setComputedColumns(newComputedFields);
+  };
+
   const columnTypeInputRef = useRef(null);
   const headerInputRef = useRef(null);
   const accessorPathInputRef = useRef(null);
@@ -290,6 +303,14 @@ const TableColumnsModalComponent = () => {
                       itemType="custom"
                     />
                   ))}
+                  {computedFields.map((column) => (
+                    <ColumnsModalItem
+                      key={columnValue(column)}
+                      column={column}
+                      onClick={() => removeCustomComputedColumn(column)}
+                      itemType="custom"
+                    />
+                  ))}
                 </Box>
                 <InputGroup>
                   <Select
@@ -336,12 +357,14 @@ const TableColumnsModalComponent = () => {
                     ref={addButtonRef}
                     isDisabled={!inputIsValid}
                     onClick={() => {
-                      const value = `${headerInputRef.current.value}:`
-                        + `${accessorPathInputRef.current.value}`;
                       if (columnType === 'alert') {
+                        const value = `${headerInputRef.current.value}:`
+                        + `${accessorPathInputRef.current.value}`;
                         addCustomAlertColumn(value);
                       } else {
-                        console.error('computed submitted');
+                        const value = `${headerInputRef.current.value}:`
+                        + `${accessorPathInputRef.current.value}:`
+                        + `${regexInputRef.current.value}`;
                         addCustomComputedColumn(value);
                       }
                     }}

src/components/NavigationBar/subcomponents/LoadSavePresetsModal.jsx

@@ -33,6 +33,7 @@ import {
   setFuzzySearch as setFuzzySearchConnected,
   setRespondersInEpFilter as setRespondersInEpFilterConnected,
   setAlertCustomDetailColumns as setAlertCustomDetailColumnsConnected,
+  setComputedColumns as setComputedColumnsConnected,
   setDarkMode as setDarkModeConnected,
   setRelativeDates as setRelativeDatesConnected,
 } from 'src/redux/settings/actions';
@@ -69,6 +70,7 @@ const SettingsModalComponent = () => {
     fuzzySearch,
     respondersInEpFilter,
     alertCustomDetailFields,
+    computedFields,
     darkMode,
     relativeDates,
   } = useSelector((state) => state.settings);
@@ -103,6 +105,7 @@ const SettingsModalComponent = () => {
   const setFuzzySearch = (search) => dispatch(setFuzzySearchConnected(search));
   const setRespondersInEpFilter = (show) => dispatch(setRespondersInEpFilterConnected(show));
   const setAlertCustomDetailColumns = (columns) => dispatch(setAlertCustomDetailColumnsConnected(columns));
+  const setComputedColumns = (columns) => dispatch(setComputedColumnsConnected(columns));
   const setDarkMode = (mode) => dispatch(setDarkModeConnected(mode));
   const setRelativeDates = (relative) => dispatch(setRelativeDatesConnected(relative));
   const toggleDisplayQuerySettings = () => dispatch(toggleDisplayQuerySettingsConnected());
@@ -128,6 +131,7 @@ const SettingsModalComponent = () => {
       fuzzySearch: !!fuzzySearch,
       respondersInEpFilter,
       alertCustomDetailFields,
+      computedFields,
       darkMode,
       relativeDates,
     };
@@ -173,6 +177,7 @@ const SettingsModalComponent = () => {
     setFuzzySearch(!!presets.settings.fuzzySearch);
     setRespondersInEpFilter(presets.settings.respondersInEpFilter);
     setAlertCustomDetailColumns(presets.settings.alertCustomDetailFields);
+    setComputedColumns(presets.settings.computedFields);
     setDarkMode(presets.settings.darkMode);
     setColorMode(presets.settings.darkMode ? 'dark' : 'light');
     setRelativeDates(presets.settings.relativeDates);

src/redux/incidents/sagas.test.js

@@ -65,6 +65,7 @@ const initialSettings = {
       aggregator: null,
     },
   ],
+  computedFields: [],
   darkMode: false,
   relativeDates: false,
   status: '',

src/redux/rootSaga.js

@@ -117,6 +117,7 @@ import {
   setFuzzySearch,
   setRespondersInEpFilter,
   setAlertCustomDetailColumns,
+  setComputedColumns,
   setShowIncidentAlertsModalForIncidentId,
   setMaxRateLimit,
   setAutoAcceptIncidentsQuery,
@@ -250,6 +251,7 @@ export default function* rootSaga() {
       setFuzzySearch(),
       setRespondersInEpFilter(),
       setAlertCustomDetailColumns(),
+      setComputedColumns(),
       setShowIncidentAlertsModalForIncidentId(),
       setMaxRateLimit(),
       setAutoAcceptIncidentsQuery(),

src/redux/settings/actions.js

@@ -24,6 +24,9 @@ export const SET_RESPONDERS_IN_EP_FILTER_COMPLETED = 'SET_RESPONDERS_IN_EP_FILTE
 export const SET_ALERT_CUSTOM_DETAIL_COLUMNS_REQUESTED = 'SET_ALERT_CUSTOM_DETAIL_COLUMNS_REQUESTED';
 export const SET_ALERT_CUSTOM_DETAIL_COLUMNS_COMPLETED = 'SET_ALERT_CUSTOM_DETAIL_COLUMNS_COMPLETED';
 
+export const SET_COMPUTED_COLUMNS_REQUESTED = 'SET_COMPUTED_COLUMNS_REQUESTED';
+export const SET_COMPUTED_COLUMNS_COMPLETED = 'SET_COMPUTED_COLUMNS_COMPLETED';
+
 export const SET_SHOW_INCIDENT_ALERTS_MODAL_FOR_INCIDENT_ID_REQUESTED = 'SET_SHOW_INCIDENT_ALERTS_MODAL_FOR_INCIDENT_ID_REQUESTED';
 export const SET_SHOW_INCIDENT_ALERTS_MODAL_FOR_INCIDENT_ID_COMPLETED = 'SET_SHOW_INCIDENT_ALERTS_MODAL_FOR_INCIDENT_ID_COMPLETED';
 
@@ -83,6 +86,11 @@ export const setAlertCustomDetailColumns = (alertCustomDetailFields) => ({
   alertCustomDetailFields,
 });
 
+export const setComputedColumns = (computedFields) => ({
+  type: SET_COMPUTED_COLUMNS_REQUESTED,
+  computedFields,
+});
+
 export const setShowIncidentAlertsModalForIncidentId = (incidentId) => ({
   type: SET_SHOW_INCIDENT_ALERTS_MODAL_FOR_INCIDENT_ID_REQUESTED,
   incidentId,

src/redux/settings/reducers.js

@@ -19,6 +19,8 @@ import {
   SET_RESPONDERS_IN_EP_FILTER_COMPLETED,
   SET_ALERT_CUSTOM_DETAIL_COLUMNS_REQUESTED,
   SET_ALERT_CUSTOM_DETAIL_COLUMNS_COMPLETED,
+  SET_COMPUTED_COLUMNS_REQUESTED,
+  SET_COMPUTED_COLUMNS_COMPLETED,
   SET_SHOW_INCIDENT_ALERTS_MODAL_FOR_INCIDENT_ID_REQUESTED,
   SET_SHOW_INCIDENT_ALERTS_MODAL_FOR_INCIDENT_ID_COMPLETED,
   SET_MAX_RATE_LIMIT_REQUESTED,
@@ -83,6 +85,15 @@ const settings = produce(
         draft.status = SET_ALERT_CUSTOM_DETAIL_COLUMNS_COMPLETED;
         break;
 
+      case SET_COMPUTED_COLUMNS_REQUESTED:
+        draft.status = SET_COMPUTED_COLUMNS_REQUESTED;
+        break;
+
+      case SET_COMPUTED_COLUMNS_COMPLETED:
+        draft.computedFields = action.computedFields;
+        draft.status = SET_COMPUTED_COLUMNS_COMPLETED;
+        break;
+
       case SET_SHOW_INCIDENT_ALERTS_MODAL_FOR_INCIDENT_ID_REQUESTED:
         draft.status = SET_SHOW_INCIDENT_ALERTS_MODAL_FOR_INCIDENT_ID_REQUESTED;
         break;
@@ -197,6 +208,7 @@ const settings = produce(
         aggregator: null,
       },
     ],
+    computedFields: [],
     showIncidentAlertsModalForIncidentId: null,
     darkMode: false,
     relativeDates: false,

src/redux/settings/sagas.js

@@ -33,6 +33,8 @@ import {
   SET_RESPONDERS_IN_EP_FILTER_COMPLETED,
   SET_ALERT_CUSTOM_DETAIL_COLUMNS_REQUESTED,
   SET_ALERT_CUSTOM_DETAIL_COLUMNS_COMPLETED,
+  SET_COMPUTED_COLUMNS_REQUESTED,
+  SET_COMPUTED_COLUMNS_COMPLETED,
   SET_MAX_RATE_LIMIT_REQUESTED,
   SET_MAX_RATE_LIMIT_COMPLETED,
   SET_AUTO_ACCEPT_INCIDENTS_QUERY_REQUESTED,
@@ -166,6 +168,21 @@ export function* setAlertCustomDetailColumnsImpl(action) {
   });
 }
 
+export function* setComputedColumns() {
+  yield takeLatest(SET_COMPUTED_COLUMNS_REQUESTED, setComputedColumnsImpl);
+}
+
+export function* setComputedColumnsImpl(action) {
+  console.error('setComputedColumnsImpl', action);
+  const {
+    computedFields,
+  } = action;
+  yield put({
+    type: SET_COMPUTED_COLUMNS_COMPLETED,
+    computedFields,
+  });
+}
+
 export function* setShowIncidentAlertsModalForIncidentId() {
   yield takeLatest(
     SET_SHOW_INCIDENT_ALERTS_MODAL_FOR_INCIDENT_ID_REQUESTED,

src/redux/settings/sagas.test.js

@@ -19,6 +19,8 @@ import {
   SET_DEFAULT_SINCE_DATE_TENOR_COMPLETED,
   SET_ALERT_CUSTOM_DETAIL_COLUMNS_REQUESTED,
   SET_ALERT_CUSTOM_DETAIL_COLUMNS_COMPLETED,
+  SET_COMPUTED_COLUMNS_REQUESTED,
+  SET_COMPUTED_COLUMNS_COMPLETED,
   SET_MAX_RATE_LIMIT_REQUESTED,
   SET_MAX_RATE_LIMIT_COMPLETED,
   SET_AUTO_ACCEPT_INCIDENTS_QUERY_REQUESTED,
@@ -33,6 +35,7 @@ import {
 import {
   setDefaultSinceDateTenor,
   setAlertCustomDetailColumns,
+  setComputedColumns,
   setMaxRateLimit,
   setAutoAcceptIncidentsQuery,
   setAutoRefreshInterval,
@@ -71,6 +74,7 @@ describe('Sagas: Settings', () => {
             aggregator: null,
           },
         ],
+        computedFields: [],
         showIncidentAlertsModalForIncidentId: null,
         darkMode: false,
         searchAllCustomDetails: false,
@@ -111,6 +115,7 @@ describe('Sagas: Settings', () => {
         autoAcceptIncidentsQuery: true,
         autoRefreshInterval: 5,
         alertCustomDetailFields,
+        computedFields: [],
         showIncidentAlertsModalForIncidentId: null,
         darkMode: false,
         searchAllCustomDetails: false,
@@ -121,6 +126,58 @@ describe('Sagas: Settings', () => {
       })
       .silentRun();
   });
+  it('setComputedColumns', () => {
+    const computedFields = [
+      {
+        label: faker.git.branch(),
+        value: faker.git.branch(),
+        columnType: 'computed',
+        Header: 'Regex',
+        accessorPath: 'details.env',
+        aggregator: null,
+        expression: '.*',
+        expressionType: 'regex-single',
+      },
+    ];
+    return expectSaga(setComputedColumns)
+      .withReducer(settings)
+      .dispatch({
+        type: SET_COMPUTED_COLUMNS_REQUESTED,
+        computedFields,
+      })
+      .put({
+        type: SET_COMPUTED_COLUMNS_COMPLETED,
+        computedFields,
+      })
+      .hasFinalState({
+        displaySettingsModal: false,
+        displayLoadSavePresetsModal: false,
+        displayColumnsModal: false,
+        defaultSinceDateTenor: '1 Day',
+        maxRateLimit: 200,
+        autoAcceptIncidentsQuery: true,
+        autoRefreshInterval: 5,
+        alertCustomDetailFields: [
+          {
+            label: 'Environment:details.env',
+            value: 'Environment:details.env',
+            columnType: 'alert',
+            Header: 'Environment',
+            accessorPath: 'details.env',
+            aggregator: null,
+          },
+        ],
+        computedFields,
+        showIncidentAlertsModalForIncidentId: null,
+        darkMode: false,
+        searchAllCustomDetails: false,
+        fuzzySearch: false,
+        respondersInEpFilter: false,
+        relativeDates: false,
+        status: SET_COMPUTED_COLUMNS_COMPLETED,
+      })
+      .silentRun();
+  });
   it('setMaxRateLimit', () => {
     const maxRateLimit = faker.number.int({
       min: MAX_RATE_LIMIT_LOWER,
@@ -154,6 +211,7 @@ describe('Sagas: Settings', () => {
             aggregator: null,
           },
         ],
+        computedFields: [],
         showIncidentAlertsModalForIncidentId: null,
         darkMode: false,
         searchAllCustomDetails: false,
@@ -194,6 +252,7 @@ describe('Sagas: Settings', () => {
             aggregator: null,
           },
         ],
+        computedFields: [],
         showIncidentAlertsModalForIncidentId: null,
         darkMode: false,
         searchAllCustomDetails: false,
@@ -237,6 +296,7 @@ describe('Sagas: Settings', () => {
             aggregator: null,
           },
         ],
+        computedFields: [],
         showIncidentAlertsModalForIncidentId: null,
         darkMode: false,
         searchAllCustomDetails: false,
@@ -277,6 +337,7 @@ describe('Sagas: Settings', () => {
             aggregator: null,
           },
         ],
+        computedFields: [],
         showIncidentAlertsModalForIncidentId: null,
         darkMode: true,
         searchAllCustomDetails: false,
@@ -317,6 +378,7 @@ describe('Sagas: Settings', () => {
             aggregator: null,
           },
         ],
+        computedFields: [],
         showIncidentAlertsModalForIncidentId: null,
         darkMode: false,
         searchAllCustomDetails: false,