Each of the four charts in the dashboard has its own data source and these are specified in the bind configuration for each. The definitions for these sources are in the dashboard view model:
// app/view/dashboard/DashboardModel.js
Ext.define('Instrumatics.view.dashboard.DashboardModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.dashboard-dashboard',
stores: {
webLogs: {
type: 'logstream',
filters: [{
property: 'type',
value: 'web'
}]
},
sqlLogs: {
type: 'logstream',
filters: [{
property: 'type',
value: 'sql'
}]
},
historicalWebLogs: {
type: 'logentries',
filters: [{
property: 'type',
value: 'web'
}]
},
historicalSqlLogs: {
type: 'logentries',
filters: [{
property: 'type',
value: 'sql'
}]
}
}
});We're setting up the data sources for the dashboard. If you look back at the associated store definitions, you'll see matching aliases and also the remoteFilter option set to true. This enables us to set the filter on the store definition in the view model and have these passed through to the server as JSON.
This makes for a very simple method to set up stores to retrieve filtered data from the server side (just pass over an array of filters and let the backend take care of it).
We've put together nearly all the pieces of the dashboard with one exception: the view controller. Let's look at this now.