Observable Alerts

Summary

Observable Alerts fire when an observed event happens to grid data
There are 3 types of changes which can be observed;
- Row Changes
- Grid Changes
- No Changes
Observable Alerts leverage AdapTable Rx which can be set to watch for particular changes or behaviour in AG Grid

Alerts can be fired using Observable Expressions which watch for changes (or lack of changes).

These are advanced, reactive-type Expressions, which are triggered by Adaptable Rx.

There are 5 main elements to an Observable Expression:

Scope - either a particular Row (or set of Rows) or the entire Grid
Observable Type - can be ROW_CHANGE, GRID_CHANGE, ROW_ADDED or ROW_REMOVED
Change Type - can be - MIN, MAX, COUNT or NONE
Duration - how long should the change be observed
WHERE Clause - limits the change only to rows that match the expression

Find Out More

The AdapTableQL Guide provides full details on writing Observable Expressions

For instance we can set an Alert to fire in each of these use cases:

a particular row has not changed in the last hour
a given row has changed 5 times in 10 minutes
a column / cell value is the highest that its been all day
there have been no changes in the Grid for 2 hours
a new row has been added to the Grid
3 rows have been removed from the Grid in the last 4 hours

Caution

Observable Expressions require the Alert to have a Scope of All (i.e. the whole row)

Row Changes

The most common use case for Observable Alerts is to see if a particular change has happened in each row.

A row change Observable Alert will watch each (relevant) row in the Grid and fire if needed.

Alerts: Observing Row Changes

Fork Fork

This demo showcases 2 Alerts which are triggered by Observable Row Change Expressions:
- If Github Stars in any Row changes 3 times within a 2 minute timeframe
- When Open Issues count in a Row is the highest value it has been within the last hour - for rows where the language is JavaScript

Try It Out

Click the Add Star Action Column button next to Github Stars; once it is clicked 3 times in a row, the Info Alert will be triggered
Click the Open an Issue Action Column button next to Open Issues Column - if the row matches the WHERE clause, it will trigger the Success Alert

import {
  ActionColumnButton,
  ActionColumnContext,
  AdaptableApi,
  AdaptableButton,
  AdaptableOptions,
  CellUpdateRequest,
} from '@adaptabletools/adaptable';

export function incrementCellValue(
  columnName: string,
  context: ActionColumnContext,
  amount: number = 1
): void {
  const currentItemCount = context.rowNode.data[columnName];
  const cellUpdateRequest: CellUpdateRequest = {
    columnId: columnName,
    newValue: currentItemCount + amount,
    primaryKeyValue: context.primaryKeyValue,
    rowNode: context.rowNode,
  };
  context.adaptableApi.gridApi.setCellValue(cellUpdateRequest);
}
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Observable Alerts Row Changes',
  adaptableStateKey: `${Date.now()}`,
  actionColumnOptions: {
    actionColumns: [
      {
        columnId: 'increaseStars',
        friendlyName: 'Add Star',
        actionColumnButton: {
          label: '+',
          buttonStyle: {
            tone: 'neutral',
            variant: 'raised',
          },
          onClick: (
            _button: ActionColumnButton<ActionColumnContext>,
            context: ActionColumnContext
          ) => {
            incrementCellValue('github_stars', context);
          },
        },
      },
      {
        columnId: 'openIssue',
        friendlyName: 'Open an Issue',
        actionColumnButton: {
          label: '+',
          buttonStyle: {
            tone: 'neutral',
            variant: 'raised',
          },
          onClick: (
            _button: ActionColumnButton<ActionColumnContext>,
            context: ActionColumnContext
          ) => {
            incrementCellValue('open_issues_count', context);
          },
        },
      },
      {
        columnId: 'closeIssue',
        friendlyName: 'Close an Issue',
        actionColumnButton: {
          label: '-',
          buttonStyle: {
            tone: 'neutral',
            variant: 'raised',
          },
          onClick: (
            _button: ActionColumnButton<ActionColumnContext>,
            context: ActionColumnContext
          ) => {
            incrementCellValue('open_issues_count', context, -1);
          },
        },
      },
    ],
  },

  initialState: {
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'increaseStars',
            'license',
            'openIssue',
            'open_issues_count',
            'closeIssue',
          ],
        },
      ],
    },
    Dashboard: {
      ModuleButtons: ['Alert'],
      Tabs: [
        {
          Name: 'Toolbars',
          Toolbars: ['Alert'],
        },
      ],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Alert'],
        },
      ],
    },
    Alert: {
      AlertDefinitions: [
        {
          Name: 'alert-observable-github-stars-change',
          MessageType: 'Info',
          MessageHeader: "That's 3 Changes!",
          MessageText: 'Github Stars Changed 3 times in this Row',
          Scope: {All: true},
          Rule: {
            ObservableExpression:
              "ROW_CHANGE(COUNT([github_stars],3) ,TIMEFRAME('2m'))",
          },
          AlertProperties: {
            DisplayNotification: true,
          },
        },
        {
          Name: 'alert-observable-open-issues-count-change',
          MessageType: 'Success',
          Scope: {All: true},
          Rule: {
            ObservableExpression:
              "ROW_CHANGE( MAX([open_issues_count] ),  TIMEFRAME('1h')) WHERE [language] = 'JavaScript'",
          },
          AlertProperties: {
            DisplayNotification: true,
          },
        },
      ],
    },
  },
};

Grid Changes

Another common use case for Observable Alerts is for any change in the Grid.

This is useful if you want to be alerted about all behaviour in the Grid rather than particular rows.

Alerts: Observing Grid Changes

Fork Fork

This example contains 2 Alerts which are triggered by Observable Grid Change Expressions:
- If Language Column in the Grid changes 3 times within a 5 minute timeframe
- If Github Stars Column in the Grid changes 2 times within a 1 minute timeframe - but only for rows where License is 'MIT License'

No Changes

Another use case for Observable Alerts is to watch for no changes in the data.

Hint

This is particularly useful if you have ticking data or you expect some changes at some point

AdapTable can observe for No Change on either a per-Row or a per-Grid basis.

Alerts: Observing No Changes

Fork Fork

This demo contains an Alert which is triggered by Observable Expressions watching for No Changes
The Alert triggers if the Github Stars Column in the Grid is not updated within a 5 second timeframe
We have subscribed to the Alert Fired Event and we set Column Formatting for the Github Stars Column

Try It Out

Click the "Turn Off Ticking Data" button and wait for 5 seconds and note the Alert will fire

import {AdaptableOptions} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';
import {turnOffTickingData} from './tickingDataHelper';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Observable Alert No Changes',
  dashboardOptions: {
    customToolbars: [
      {
        name: 'tickingToolbar',
        title: 'Ticking',
        toolbarButtons: [
          {
            label: 'Turn off Ticking Data',

            onClick: () => {
              turnOffTickingData();
            },
            buttonStyle: {
              tone: 'accent',
              variant: 'raised',
            },
          },
        ],
      },
    ],
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['Alert'],
      Tabs: [
        {
          Name: 'Toolbars',
          Toolbars: ['Alert', 'tickingToolbar', 'SystemStatus'],
        },
      ],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Alert', 'SystemStatus'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Alert: {
      AlertDefinitions: [
        {
          Name: 'alert-observable-github-stars-no-change',
          MessageType: 'Warning',
          MessageHeader: 'Stale Data!',
          MessageText: 'No Changes in Github Stars in last 5 seconds',
          Scope: {All: true},
          Rule: {
            ObservableExpression:
              "GRID_CHANGE(NONE([github_stars]) , TIMEFRAME('5s')) ",
          },
          AlertProperties: {
            DisplayNotification: true,
          },
        },
      ],
    },
    FlashingCell: {
      FlashingCellDefinitions: [
        {
          Name: 'flashingCell-numeric-anyChange',
          Scope: {
            DataTypes: ['number'],
          },
          Rule: {
            BooleanExpression: 'ANY_CHANGE()',
          },
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'github_stars',
            'license',
            'github_watchers',
            'language',
            'open_issues_count',
            'closed_issues_count',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'description',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Row Added / Removed

Observable Alerts can also be used to monitor when Rows have been added or removed from the Grid.

This is done using the ROW_ADDED and ROW_REMOVED Observable Expression keywords.

Find Out More

See Row Change Alerts for more details and accompanying demos

Suspending Alerts

When an Observable Alert is suspended, the subscription is removed, and will be re-created when unsuspended.

Caution

This means that any changes in the data during the Alert's suspension are not observed
The count / watch starts again from scratch when the Alert is unuspended

PreviousAggregation Alerts NextValidation Alerts

Framework: