Mango OS

This is the 8th article of a Dashboard development series. You can check all the articles by clicking here

In this article, we are going to build the next component:

Alarm list component

This component shows the total consumed energy as a bar chart and the kW/ton ratio as a line chart. Let's start by creating the alarmList.js and alarmList.html files in the components/alarmList directory:

alarmList.js

/**
 * @copyright 2020 {@link http://infiniteautomation.com|Infinite Automation Systems, Inc.} All rights reserved.
 * @author Luis Güette
 */
define(['angular', 'require'], (angular, require) => {
'use strict';
class AlarmListController {
    static get $$ngIsClass() {
        return true;
    }

    static get $inject() {
        return [];
    }

    constructor() {

    }

    $onInit() {

    }
}

return {
    bindings: {

    },
    controller: AlarmListController,
    templateUrl: require.toUrl('./alarmList.html')
};

});

alarmList.html

<h1>Alarm List</h1>

Then, we need to import it in hvac.js module:

hvac.js

/**
 * @copyright 2020 {@link http://infiniteautomation.com|Infinite Automation Systems, Inc.} All rights reserved.
 * @author Luis Güette
 */
define([
'angular',
'require',
'./pages/overview/overview.js',

'./components/map/map.js',
'./components/selectedUnitCard/selectedUnitCard.js',
'./components/unitsTable/unitsTable.js',
'./components/kpiIndicators/kpiIndicators.js',
'./components/energyChart/energyChart.js',
'./components/alarmList/alarmList.js',

'./services/unit.js'

], (
angular,
require,
overview,
map,
selectedUnitCard,
unitsTable,
kpiIndicators,
energyChart,
alarmList,
unitService
) => {
'use strict';
const hvacModule = angular
    .module('hvacModule', ['maUiApp'])
    .component('hvacOverview', overview)
    .component('hvacMap', map)
    .component('hvacSelectedUnitCard', selectedUnitCard)
    .component('hvacUnitsTable', unitsTable)
    .component('hvacKpiIndicators', kpiIndicators)
    .component('hvacAlarmList', alarmList)
    .component('hvacEnergyChart', energyChart)

    .factory('hvacUnit', unitService);

hvacModule.config([
    'maUiMenuProvider',
    (maUiMenuProvider) =&gt; {
        maUiMenuProvider.registerMenuItems([
            {
                name: 'ui.overview',
                url: '/overview',
                menuIcon: 'map',
                template: '&lt;hvac-overview&gt;&lt;/hvac-overview&gt;',
                menuText: 'Overview',
                weight: 100,
                params: {
                    dateBar: {
                        rollupControls: true
                    }
                }
            },
        ]);
    }
]);

return hvacModule;

}); // define

Let's call the hvac-energy-chart component in the overview.html file:

overview.html

<div class="left-container" layout="row" layout-wrap layout-align="space-between start">
    <div flex="100" flex-gt-sm="50" flex-gt-md="60">
        <hvac-kpi-indicators units-count="$ctrl.units.length"></hvac-kpi-indicators>
    &lt;md-card&gt;
        &lt;md-card-header&gt;
            &lt;p md-colors=&quot;::{color: 'accent'}&quot;&gt;Active Alarms&lt;/p&gt;
        &lt;/md-card-header&gt;

        &lt;md-card-content&gt;
            &lt;hvac-map units=&quot;$ctrl.units&quot; on-select-unit=&quot;$ctrl.onSelectUnit(unit)&quot;&gt;&lt;/hvac-map&gt;
        &lt;/md-card-content&gt;
    &lt;/md-card&gt;

    &lt;hvac-selected-unit-card ng-if=&quot;$ctrl.selectedUnit&quot; unit=&quot;$ctrl.selectedUnit&quot;&gt;&lt;/hvac-selected-unit-card&gt;
&lt;/div&gt;
&lt;div class=&quot;right-container&quot; flex=&quot;100&quot; flex-gt-sm=&quot;50&quot; flex-gt-md=&quot;40&quot;&gt;

    &lt;div layout=&quot;row&quot; layout-wrap layout-align=&quot;space-between stretch&quot;&gt;
        &lt;div class=&quot;energy-chart-container&quot; flex=&quot;100&quot; flex-gt-md=&quot;60&quot;&gt;
            &lt;md-card&gt;
                &lt;md-card-header&gt;
                    &lt;p md-colors=&quot;::{color: 'accent'}&quot;&gt;Energy vs kW/ton ratio&lt;/p&gt;
                &lt;/md-card-header&gt;

                &lt;md-card-content&gt;
                    &lt;hvac-energy-chart&gt;&lt;/hvac-energy-chart&gt;
                &lt;/md-card-content&gt;
            &lt;/md-card&gt;
        &lt;/div&gt;

        &lt;div class=&quot;alarms-list-container&quot; flex=&quot;100&quot; flex-gt-md=&quot;40&quot;&gt;
            &lt;md-card flex=&quot;100&quot;&gt;
                &lt;md-card-header&gt;
                    &lt;p md-colors=&quot;::{color: 'accent'}&quot;&gt;Active Alarms&lt;/p&gt;
                &lt;/md-card-header&gt;
                &lt;md-card-content&gt;
                    &lt;hvac-alarm-list&gt;&lt;/hvac-alarm-list&gt;
                &lt;/md-card-content&gt;
            &lt;/md-card&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;md-card&gt;
        &lt;md-card-header&gt;
            &lt;p md-colors=&quot;::{color: 'accent'}&quot;&gt;Units&lt;/p&gt;
        &lt;/md-card-header&gt;

        &lt;md-card-content&gt;
            &lt;hvac-units-table units=&quot;$ctrl.units&quot;&gt;&lt;/hvac-units-table&gt;
        &lt;/md-card-content&gt;
    &lt;/md-card&gt;
&lt;/div&gt;

</div>

Reload the page, and you should see something like this:

Overview page

First, we need to get the events count, we will do this in alarmList.js:

alarmList.js

/**
 * @copyright 2020 {@link http://infiniteautomation.com|Infinite Automation Systems, Inc.} All rights reserved.
 * @author Luis Güette
 */
define(['angular', 'require'], (angular, require) => {
'use strict';
const EVENT_KEYS = {
    'NONE': 'none',
    'INFORMATION': 'information',
    'IMPORTANT': 'important',
    'WARNING': 'warning',
    'URGENT': 'urgent',
    'CRITICAL': 'critical',
    'SAFETY': 'safety',
}

class AlarmListController {
    static get $$ngIsClass() {
        return true;
    }

    static get $inject() {
        return ['maEvents', '$scope'];
    }

    constructor(Events, $scope) {
        this.Events = Events;
        this.$scope = $scope;
    }

    $onInit() {
        this.getEvents();
    }

    getEvents() {
        this.Events
            .buildQuery()
            .or()
            .eq('active', true)
            .limit(1000)
            .query()
            .then(events =&gt; {
                this.eventsCount = this.mapEvents(events);
                this.subscribeToEvents();
            });
    }

    mapEvents(events) {
        return events.reduce((result, event) =&gt; {
            const shortName = EVENT_KEYS[event.alarmLevel];

            if (Object.keys(EVENT_KEYS).includes(event.alarmLevel)) {
                result[shortName] += 1;
            }

            return result;
        }, {
            none: 0,
            information: 0,
            important: 0,
            warning: 0,
            urgent: 0,
            critical: 0,
            safety: 0,
        });
    }

    subscribeToEvents () {
        this.Events.notificationManager.subscribe((event, mangoEvent) =&gt; {
            if (mangoEvent.id &lt; 0) {
                return;
            }

            const shortName = EVENT_KEYS[mangoEvent.alarmLevel];

            if (event.name === 'RAISED' &amp;&amp; mangoEvent.active) {
                this.eventsCount[shortName] += 1;
            }

            if (event.name === 'RETURN_TO_NORMAL' &amp;&amp; !mangoEvent.active) {
                this.eventsCount[shortName] -= 1;
            }

        }, this.$scope, ['RAISED', 'RETURN_TO_NORMAL']);
    }
}

return {
    bindings: {

    },
    controller: AlarmListController,
    templateUrl: require.toUrl('./alarmList.html')
};

});

With getEvents() we get all the active events and calculate the counts by the alarm level.
Then we call subscribeToEvents(), which will update the counts in real time if we have new alarms or if any alarm has returned to normal state

Now, we update the alarmList.html and the hvac.css to show this data:

alarmList.html

<div>
    <div class="header" layout="row" layout-align="space-between center">
        <span>Alarm Level</span>
        <span>Count</span>
    </div>
&lt;div class=&quot;body&quot;&gt;
    &lt;div layout=&quot;row&quot; layout-align=&quot;space-between center&quot;&gt;
        &lt;span&gt;
            &lt;md-icon class=&quot;fa fa-flag fa-lg ma-alarm-flag ma-alarm-level-life-safety&quot;&gt;&lt;/md-icon&gt;
            Safety
        &lt;/span&gt;
        &lt;span ng-bind=&quot;$ctrl.eventsCount.safety&quot;&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div layout=&quot;row&quot; layout-align=&quot;space-between center&quot;&gt;
        &lt;span&gt;
            &lt;md-icon class=&quot;fa fa-flag fa-lg ma-alarm-flag ma-alarm-level-critical&quot;&gt;&lt;/md-icon&gt;
            Critical
        &lt;/span&gt;
        &lt;span ng-bind=&quot;$ctrl.eventsCount.critical&quot;&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div layout=&quot;row&quot; layout-align=&quot;space-between center&quot;&gt;
        &lt;span&gt;
            &lt;md-icon class=&quot;fa fa-flag fa-lg ma-alarm-flag ma-alarm-level-urgent&quot;&gt;&lt;/md-icon&gt;
            Urgent
        &lt;/span&gt;
        &lt;span ng-bind=&quot;$ctrl.eventsCount.urgent&quot;&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div layout=&quot;row&quot; layout-align=&quot;space-between center&quot;&gt;
        &lt;span&gt;
            &lt;md-icon class=&quot;fa fa-flag fa-lg ma-alarm-flag ma-alarm-level-warning&quot;&gt;&lt;/md-icon&gt;
            Warning
        &lt;/span&gt;
        &lt;span ng-bind=&quot;$ctrl.eventsCount.warning&quot;&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div layout=&quot;row&quot; layout-align=&quot;space-between center&quot;&gt;
        &lt;span&gt;
            &lt;md-icon class=&quot;fa fa-flag fa-lg ma-alarm-flag ma-alarm-level-important&quot;&gt;&lt;/md-icon&gt;
            Important
        &lt;/span&gt;
        &lt;span ng-bind=&quot;$ctrl.eventsCount.important&quot;&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div layout=&quot;row&quot; layout-align=&quot;space-between center&quot;&gt;
        &lt;span&gt;
            &lt;md-icon class=&quot;fa fa-flag fa-lg ma-alarm-flag ma-alarm-level-information&quot;&gt;&lt;/md-icon&gt;
            Information
        &lt;/span&gt;
        &lt;span ng-bind=&quot;$ctrl.eventsCount.information&quot;&gt;&lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;

</div>

We use the same flag colors that Mango use by default

hvac.css

...
hvac-alarm-list div .header {
    padding: 0.5rem 0;
    border-bottom: var(--ma-primary-700) solid 1px;
    color: var(--ma-accent);
    font-size: 1.25rem;
    text-transform: uppercase;
    font-weight: 700;
}
hvac-alarm-list div .body {
margin-top: 0.5rem;
color: var(--ma-primary-700);
font-size: 1.5rem;
text-transform: uppercase;
}
hvac-alarm-list div .body div span:last-child {
font-weight: 700;
}
...

Finally, let's update the overview.html to add a link to the events page:

overview.html

 <div class="left-container" layout="row" layout-wrap layout-align="space-between start">
    <div flex="100" flex-gt-sm="50" flex-gt-md="60">
        <hvac-kpi-indicators units-count="$ctrl.units.length"></hvac-kpi-indicators>
    &lt;md-card&gt;
        &lt;md-card-header&gt;
            &lt;p md-colors=&quot;::{color: 'accent'}&quot;&gt;Active Alarms&lt;/p&gt;
        &lt;/md-card-header&gt;

        &lt;md-card-content&gt;
            &lt;hvac-map units=&quot;$ctrl.units&quot; on-select-unit=&quot;$ctrl.onSelectUnit(unit)&quot;&gt;&lt;/hvac-map&gt;
        &lt;/md-card-content&gt;
    &lt;/md-card&gt;

    &lt;hvac-selected-unit-card ng-if=&quot;$ctrl.selectedUnit&quot; unit=&quot;$ctrl.selectedUnit&quot;&gt;&lt;/hvac-selected-unit-card&gt;
&lt;/div&gt;
&lt;div class=&quot;right-container&quot; flex=&quot;100&quot; flex-gt-sm=&quot;50&quot; flex-gt-md=&quot;40&quot;&gt;

    &lt;div layout=&quot;row&quot; layout-wrap layout-align=&quot;space-between stretch&quot;&gt;
        &lt;div class=&quot;energy-chart-container&quot; flex=&quot;100&quot; flex-gt-md=&quot;60&quot;&gt;
            &lt;md-card&gt;
                &lt;md-card-header&gt;
                    &lt;p md-colors=&quot;::{color: 'accent'}&quot;&gt;Energy vs kW/ton ratio&lt;/p&gt;
                &lt;/md-card-header&gt;

                &lt;md-card-content&gt;
                    &lt;hvac-energy-chart&gt;&lt;/hvac-energy-chart&gt;
                &lt;/md-card-content&gt;
            &lt;/md-card&gt;
        &lt;/div&gt;

        &lt;div class=&quot;alarms-list-container&quot; flex=&quot;100&quot; flex-gt-md=&quot;40&quot;&gt;
            &lt;md-card flex=&quot;100&quot;&gt;
                &lt;md-card-header layout=&quot;row&quot; layout-align=&quot;space-between center&quot;&gt;
                    &lt;p md-colors=&quot;::{color: 'accent'}&quot;&gt;Active Alarms&lt;/p&gt;
                    &lt;a ui-sref=&quot;ui.events&quot;&gt;
                        &lt;md-icon&gt;visibility&lt;/md-icon&gt;
                    &lt;/a&gt;
                &lt;/md-card-header&gt;
                &lt;md-card-content&gt;
                    &lt;hvac-alarm-list&gt;&lt;/hvac-alarm-list&gt;
                &lt;/md-card-content&gt;
            &lt;/md-card&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;md-card&gt;
        &lt;md-card-header&gt;
            &lt;p md-colors=&quot;::{color: 'accent'}&quot;&gt;Units&lt;/p&gt;
        &lt;/md-card-header&gt;

        &lt;md-card-content&gt;
            &lt;hvac-units-table units=&quot;$ctrl.units&quot;&gt;&lt;/hvac-units-table&gt;
        &lt;/md-card-content&gt;
    &lt;/md-card&gt;
&lt;/div&gt;

</div>

and let's add some styles to hvac.css:

hvac.css

...
hvac-overview .right-container .alarms-list-container a {
   border-bottom-color: transparent;
}
hvac-overview .right-container .alarms-list-container a md-icon {
color: var(--ma-accent);
}
...

Overview page

And we ar done! We have built an overview dashboard. You can download de project files from here

Create alarm list component

Creating an alarm list component to show all active events count