Create menu for an Alarm History Table sub-table

🟡 Intermediate

alarm dashboard

In this example, we will see how to define menus used only by a Alarm History Table widget sub-table, and how to define interactions between the main and the sub table.

Configure the alarm history table with defaultHierarchy set to grouped and shareFiltersBetweenTables disabled.
Use a menu condition that checks for groupAlarmId to restrict it to the sub-table context only.
Use an evaluate operation in the menu to copy filters from the main table to the sub-table.

git checkout origin/osp-alarms-configuration .
git checkout origin/osp-web-configuration .
git checkout origin/example-dashboard-alarm-history-table-menus .

Steps

1. Create a dashboard with an alarm history table

For the sake of this example, we will define the defaultHierarchy to grouped and disable the shareFiltersBetweenTables setting, since we want our menu to do that job.

Your dashboard should look like:

root/dashboards/alarm/dashboard.view

{
    "configuration": [
        {
            "type": "AlarmHistoryTable",
            "id": "amq94Tog",
            "title": "",
            "menuReferences" : ["root.alarms.menus.history"],
            "alarmHistoryWidgetSettings": {
                "defaultFilter": "root.alarms.filters.all",
                "defaultView": "root.alarms.views.default",
                "defaultHierarchy": "grouped",
                "disabledHierarchies": [],
                "filtersAppliedToTheFullHistory": true,
                "shareFiltersBetweenTables": false
            }
        }
    ],
    "layout": {
        "lg": [
            {
                "w": 12,
                "h": 4,
                "x": 0,
                "y": 0,
                "i": "amq94Tog"
            }
        ]
    },
    "breakpoints": {
        "lg": 1200,
        "md": 996,
        "sm": 768,
        "xs": 480,
        "xxs": 0
    },
    "cols": {
        "lg": 12,
        "md": 10,
        "sm": 6,
        "xs": 4,
        "xxs": 2
    }
}

2. Define the menu

In the condition, we verify the presence of groupAlarmId to make sure that this menu is only available to sub-table. Then, we use an evaluate operation to retrieve the filters from the main table and copy them. Here, we build the sub-table id based on the main one and the groupAlarmId.

Your menu should look like:

root/alarms/menus/history/menu.web

{
    "moduleId": [
        "modules.web.web-1"
    ],
    "name": "Alarms history menu",
    "description": "Alarm history operations",
    "menus": [
        {
            "label": "Copy filters from main table",
            "icon": "copy_all",
            "context": [
                {
                    "type": "AlarmHistoryTable",
                    "condition": "!!${groupAlarmId}",
                    "output": [
                        {
                            "operation": "evaluate",
                            "input": {
                                "code": {
                                    "expression": "osp.widgets('amq94Tog'+'-'+${groupAlarmId}).setFilters(osp.widgets('amq94Tog').getFilters())"
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ]
}

3. Visualize the table

Load the dashboard, verify you are in a grouped hierarchy, expand a row and you should see the menu on the toolbar of the sub-table.