Allow event table access to customer using custom dashboard.

[ganeshvarahade]

Hi guys as example show event table in mango.
On click on data points it allows us to edit and see history of data point.
We want same functionality in our custom dashboard.
I have copied code as Below:-

<md-card>
    <md-toolbar class="md-whiteframe-1dp md-hue-3">
        <div class="md-toolbar-tools">
            <h2 flex>
                <span>Events Table</span>
            </h2>
            <div>
                <md-button class="md-raised md-primary md-hue-1" ng-init="eventType='*'" ng-class="{ 'active md-accent': eventType === '*' }" ng-click="eventType='*'">All
                </md-button>
                <md-button class="md-raised md-primary md-hue-1" ng-class="{ 'active md-accent': eventType === 'DATA_POINT' }" ng-click="eventType='DATA_POINT'">Data Point
                </md-button>
                <md-button class="md-raised md-primary md-hue-1" ng-class="{ 'active md-accent': eventType === 'DATA_SOURCE' }" ng-click="eventType='DATA_SOURCE'">
                    Data Source
                </md-button>
                <md-button class="md-raised md-primary md-hue-1" ng-class="{ 'active md-accent': eventType === 'SYSTEM' }" ng-click="eventType='SYSTEM'">System
                </md-button>
            </div>
        </div>
    </md-toolbar>

    <md-card-actions layout="row" layout-align="start center" layout-wrap>
        <md-input-container flex>
            <label>Alarm Level</label>
            <md-select ng-model="alarmLevel" ng-init="alarmLevel='*'">
                <md-option value="*">All <i class="fa fa-flag fa-lg alarm-flag ALL"></i></md-option>
                <md-option value="NONE">None <i class="fa fa-flag fa-lg alarm-flag NONE"></i></md-option>
                <md-option value="INFORMATION">Information <i class="fa fa-flag fa-lg alarm-flag INFORMATION"></i></md-option>
                <md-option value="IMPORTANT">Important <i class="fa fa-flag fa-lg alarm-flag IMPORTANT"></i></md-option>
                <md-option value="WARNING">Warning <i class="fa fa-flag fa-lg alarm-flag WARNING"></i></md-option>
                <md-option value="URGENT">{{ 'ui.app.urgent' | maTr }} <i class="fa fa-flag fa-lg alarm-flag URGENT"></i>
                </md-option>
                <md-option value="CRITICAL">Critical <i class="fa fa-flag fa-lg alarm-flag CRITICAL"></i></md-option>
                <md-option value="LIFE_SAFETY">Safety <i class="fa fa-flag fa-lg alarm-flag LIFE_SAFETY"></i></md-option>
            </md-select>
        </md-input-container>
        <md-input-container flex>
            <label>Active Status</label>
            <md-select ng-model="activeStatus" ng-init="activeStatus='*'">
                <md-option value="*">All</md-option>
                <md-option value="active">Active</md-option>
                <md-option value="noRtn">No Return</md-option>
                <md-option value="normal">Returned to Normal</md-option>
            </md-select>
        </md-input-container>
        <md-input-container flex>
            <label>Acknowledged</label>
            <md-select ng-model="acknowledged" ng-init="acknowledged='*'">
                <md-option value="*">All</md-option>
                <md-option value="true">True</md-option>
                <md-option value="false">False</md-option>
            </md-select>
        </md-input-container>
    </md-card-actions>

    <ma-events-table event-type="eventType" alarm-level="alarmLevel" acknowledged="acknowledged" event-id="eventId" active-status="activeStatus" limit="10" sort="'-alarmLevel'"></ma-events-table>
</md-card>

I can see event table
but on click of data point details ,I'm getting following error:-
angular.js?v=undefined:123 Error: Could not resolve 'ui.dataPointDetails' from state 'dashboard.eventdetails'
at Object.z.transitionTo (angular-ui-router.js?v=undefined:7)
at Object.z.go (angular-ui-router.js?v=undefined:7)
at angular-ui-router.js?v=undefined:7
at angular.js?v=undefined:161
at e (angular.js?v=undefined:48)
at angular.js?v=undefined:51
(anonymous) @ angular.js?v=undefined:123
(anonymous) @ angular.js?v=undefined:95
(anonymous) @ angular.js?v=undefined:161
e @ angular.js?v=undefined:48
(anonymous) @ angular.js?v=undefined:51
setTimeout (async)
k.defer @ angular.js?v=undefined:51
f @ angular.js?v=undefined:161
(anonymous) @ angular-ui-router.js?v=undefined:7
dispatch @ jquery.js?v=undefined:3
q.handle @ jquery.js?v=undefined:3
angular.js?v=undefined:123 Error: Could not resolve 'ui.dataPointDetails' from state 'dashboard.eventdetails'
at Object.z.transitionTo (angular-ui-router.js?v=undefined:7)
at Object.z.go (angular-ui-router.js?v=undefined:7)
at angular-ui-router.js?v=undefined:7
at angular.js?v=undefined:161
at e (angular.js?v=undefined:48)
at angular.js?v=undefined:51 "Possibly unhandled rejection: {}"

[Jared Wiltshire]

Yep you are quite right, the links will not work inside a custom dashboard if you are using a UI module prior to v3.2.3. They will however work inside a custom page.

UI module v3.2.3 includes a way to customize the links in your custom app. e..g

myApp.constant('MA_EVENT_LINK_INFO', {
    DATA_POINT: {
        icon: 'timeline',
        tooltipTranslation: 'ui.app.dpd',
        stateName: 'ui.dataPointDetails',
        stateParams: event => {
            return { pointId: event.eventType.dataPointId };
        }
    },
    DATA_SOURCE: {
        icon: 'device_hub',
        tooltipTranslation: 'header.dataSources',
        stateName: 'ui.settings.dataSources',
        stateParams: event => {
            return { dataSourceId: event.eventType.dataSourceId };
        }
    }
});

You would need to change ui.dataPointDetails to a state name that exists inside your application.

[ganeshvarahade]

@Jared-Wiltshire We are using Mango 3.1.1 , can we use event table
in custom dashboard ?

[Jared Wiltshire]

@ganeshvarahade said in Allow event table access to customer using custom dashboard.:

@Jared-Wiltshire We are using Mango 3.1.1 , can we use event table
in custom dashboard ?

Yes, as I said above you need UI module v3.2.3 to customize the links though. I'd suggest upgrading to Mango 3.2.