x/bansho
Code Issues Proposed changes

Add paging in actionbar

Browse Source 
Change-Id: If39fe55e5fad048fa3f1095ee77234434e472cbb
This commit is contained in:
flavien peyre 2015-08-11 09:37:00 -04:00
parent cd297b3d0e
commit 2d14a3cad0
13 changed files with 163 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/sass/temporary/temporary.scss
View File

@ -87,3 +87,11 @@
margin-left:30px;
font-family: Courier New;
}
.disabled {
cursor: not-allowed;
}
.small__input {
width: 50px;
}

27
app/components/config/defaultLayoutConfig.json
View File

@ -176,7 +176,8 @@
"inputSource": "hostOpenProblems",
"isWrappable": false,
"checkColumn": true,
"noRepeatCell": ""
"noRepeatCell": "",
"pagingbar": false
}
},
{
@ -209,7 +210,8 @@
"inputSource": "serviceOpenProblemsOnly",
"isWrappable": true,
"checkColumn": true,
"noRepeatCell": "host"
"noRepeatCell": "host",
"pagingbar": false
}
}
]
@ -303,7 +305,8 @@
"inputSource": "hostsProblems",
"isWrappable": false,
"checkColumn": true,
"noRepeatCell": ""
"noRepeatCell": "",
"pagingbar": false
}
},
{
@ -336,7 +339,8 @@
"inputSource": "servicesProblems",
"isWrappable": true,
"checkColumn": true,
"noRepeatCell": "host"
"noRepeatCell": "host",
"pagingbar": false
}
}
]
@ -430,7 +434,8 @@
"inputSource": "hosts",
"isWrappable": false,
"noRepeatCell": "",
"checkColumn": true
"checkColumn": true,
"pagingbar": true
}
}
]
@ -520,7 +525,8 @@
"inputSource": "services",
"isWrappable": false,
"checkColumn": true,
"noRepeatCell": "host"
"noRepeatCell": "host",
"pagingbar": true
}
}
]
@ -602,7 +608,8 @@
"inputSource": "events",
"isWrappable": false,
"checkColumn": false,
"noRepeatCell": ""
"noRepeatCell": "",
"pagingbar": true
}
}
]
@ -765,7 +772,8 @@
"inputSource": "hostsConfig",
"isWrappable": false,
"noRepeatCell": "",
"checkColumn": false
"checkColumn": false,
"pagingbar": true
}
}
]
@ -839,7 +847,8 @@
"inputSource": "hostsConfigTemplate",
"isWrappable": false,
"noRepeatCell": "",
"checkColumn": false
"checkColumn": false,
"pagingbar": true
}
}
]

31
app/components/datasource/datasource.js
View File

@ -35,7 +35,7 @@ angular.module('bansho.datasource', ['bansho.surveil'])
filter = componentsConfig.mergeFilters([config[tableId].queryFilter, filter]);
}
promise = providerServices[inputSource.provider].getData([], filter, inputSource.endpoint);
promise = providerServices[inputSource.provider].getData([], filter, inputSource.endpoint, conf.queryPaging);
promise.then(function (newData) {
data[tableId] = newData;
@ -56,6 +56,13 @@ angular.module('bansho.datasource', ['bansho.surveil'])
config[tableId].requestFields.push(_value);
});
});
if (config[tableId].pagingbar) {
config[tableId].queryPaging = {
page: 0,
size: 50
};
}
},
getConfig: function (tableId) {
return config[tableId];
@ -87,12 +94,30 @@ angular.module('bansho.datasource', ['bansho.surveil'])
setSearchFilter: function (tableId, searchFilter) {
config[tableId].searchFilter = searchFilter;
filterData(tableId);
notifyDataChanged(tableId);
},
setQueryFilter: function (tableId, queryFilter) {
config[tableId].queryFilter = queryFilter;
refreshTableData(tableId);
},
nextPage: function (tableId) {
config[tableId].queryPaging.page += 1;
refreshTableData(tableId);
},
previousPage: function (tableId) {
if (config[tableId].queryPaging.page > 0) {
config[tableId].queryPaging.page -= 1;
refreshTableData(tableId);
}
},
getPage: function (tableId) {
return config[tableId].queryPaging.page;
},
setPageSize: function (tableId, pageSize) {
config[tableId].queryPaging.size = pageSize;
refreshTableData(tableId);
},
getPageSize: function (tableId) {
return config[tableId].queryPaging.size;
}
};
}])

2
app/components/directive/actionbar/component_search_filter/search_filter.html
View File

@ -18,4 +18,4 @@
<li>...</li>
</ul>
</div>
</li>
</li>

2
app/components/directive/service/service.js
View File

@ -23,7 +23,7 @@ angular.module('bansho.service', ['bansho.datasource'])
$scope.param.service.iframeUrls[metricName] = iframeUrl.getIFrameUrl("metric_" + metricName, hostname, serviceDescription);
surveilStatus.getServiceMetric(hostname, serviceDescription, metricName).then(function(data) {
// TODO: waiting for ORBER BY DESC support in InfluxDB
})
});
});
});
});

38
app/components/directive/table/pagingbar/pagingbar.html Normal file
View File

@ -0,0 +1,38 @@
<menu class="filters">
<ul class="filters__list clearfix">
<li class="filters__item" data-mover="true">
<button class="filters__button" ng-class="{disabled: page === 0}" type="button" ng-click="previousPage()">
<span class="visuallyhidden">Previous</span>
<i class="fa fa-chevron-left"></i>
</button>
</li>
<li class="filters__item">
<button class="filters__button" type="button">{{page}}</button>
</li>
<li class="filters__item" data-mover="true"ng-click="nextPage()">
<button class="filters__button" type="button" >
<span class="visuallyhidden">Next</span>
<i class="fa fa-chevron-right"></i>
</button>
</li>
<li class="filters__item filters__item--settings">
<button class="filters__button"
type="button"
data-toggle="collapse"
data-target="#tableSettings"
aria-expanded="false"
aria-controls="filtersSettings">
<span class="visuallyhidden">Current page size</span>
{{size}}
</button>
<div class="filters__panel collapse" id="tableSettings">
<ul class="filters__sublist">
<li data-ng-repeat="size in pageSizes" class="topbar__settings__subitem" ng-click="setPageSize(size)">
<a>{{size}}</a>
</li>
<li class="topbar__settings__subitem"><input type="text" class="small__input" data-ng-model="size"></li>
</ul>
</div>
</li>
</ul>
</menu>

40
app/components/directive/table/pagingbar/pagingbar.js Normal file
View File

@ -0,0 +1,40 @@
'use strict';
angular.module('bansho.table.pagingbar', ['bansho.datasource', 'bansho.surveil', 'bansho.notifications'])
.directive('banshoPagingbar', function () {
return {
restrict: 'E',
scope: {
options: '='
},
templateUrl: 'components/directive/table/pagingbar/pagingbar.html',
controller: ['$scope', 'datasource',
function ($scope, datasource) {
$scope.tableId = $scope.options.attributes.tableId;
$scope.pageSizes = [5, 25, 50, 75, 100];
$scope.page = datasource.getPage($scope.tableId);
$scope.size = datasource.getPageSize($scope.tableId);
$scope.previousPage = function () {
datasource.previousPage($scope.tableId);
$scope.page = datasource.getPage($scope.tableId);
};
$scope.nextPage = function () {
datasource.nextPage($scope.tableId);
$scope.page = datasource.getPage($scope.tableId);
};
$scope.setPageSize = function (pageSize) {
$scope.size = pageSize;
};
$scope.$watch('size', function (newValue) {
if (newValue !== "") {
datasource.setPageSize($scope.tableId, newValue);
}
});
}]
};
});

5
app/components/directive/table/table.html
View File

@ -1,6 +1,6 @@
<div>
<header class="main__content__header clearfix">
<h2 data-ng-show="title" class="main__content__title">tets{{title}}</h2>
<h2 data-ng-show="title" class="main__content__title">{{title}}</h2>
</header>
<table class="data-table">
<thead class="moving-thead">
@ -37,4 +37,5 @@
</tr>
</tbody>
</table>
</div>
<bansho-pagingbar data-ng-if="pagingbar" options="options"></bansho-pagingbar>
</div>

7
app/components/directive/table/table.js
View File

@ -11,6 +11,7 @@ angular.module('bansho.table', ['bansho.datasource',
'bansho.table.cell_status_host_status',
'bansho.table.cell_config_host',
'bansho.table.cell_config_host_register',
'bansho.table.pagingbar',
'ngMaterial'
])
@ -37,14 +38,16 @@ angular.module('bansho.table', ['bansho.datasource',
conf.cells.name = $scope.options.attributes.cells.name;
conf.inputSource = $scope.options.attributes.inputSource;
conf.isWrappable = $scope.$eval($scope.options.attributes.isWrappable);
conf.isWrappable = $scope.options.attributes.isWrappable;
conf.pagingbar = $scope.options.attributes.pagingbar;
conf.noRepeatCell = $scope.options.attributes.noRepeatCell;
datasource.addTable($scope.tableId, conf);
// Handle table layout
$scope.checkColumn = $scope.options.attributes.checkColumn;
$scope.pagingbar = conf.pagingbar;
if ($scope.options.attributes.headerFollow) {
headerFollow.activate();

8
app/components/surveil/config.js
View File

@ -15,14 +15,14 @@ angular.module('bansho.surveil')
});
};
var getData = function (fields, filters, endpoint) {
var getData = function (fields, filters, endpoint, paging) {
var promise = $q.defer();
if (!queryEndpoint[endpoint]) {
throw new Error('getData in surveilConfig : Invalid endpoint ' + endpoint);
}
queryEndpoint[endpoint](fields, filters, function (data) {
queryEndpoint[endpoint](fields, filters, paging, function (data) {
promise.resolve(data);
});
@ -30,8 +30,8 @@ angular.module('bansho.surveil')
};
var queryEndpoint = {
"hosts": function (fields, filters, callback) {
var hostQuery = surveilQuery(fields, filters.hosts),
"hosts": function (fields, filters, paging, callback) {
var hostQuery = surveilQuery(fields, filters.hosts, paging),
method = 'POST',
hostUrl = surveilApiConfig.endpoint('config') + '/hosts/';

6
app/components/surveil/query.js
View File

@ -11,7 +11,11 @@ angular.module('bansho.surveil')
}
query.filters = JSON.stringify(filters);
// TODO handle paging and timeInterval
if (paging) {
query.paging = paging;
}
// TODO handle timeInterval
return query;
};

22
app/components/surveil/status.js
View File

@ -58,23 +58,23 @@ angular.module('bansho.surveil')
});
};
var getData = function (fields, filters, endpoint) {
var getData = function (fields, filters, endpoint, paging) {
var promise = $q.defer();
if (!queryEndpoint[endpoint]) {
throw new Error('getData in surveilStatus : Invalid endpoint ' + endpoint);
}
queryEndpoint[endpoint](fields, filters, function (data) {
queryEndpoint[endpoint](fields, filters, paging, function (data) {
promise.resolve(data);
});
return promise.promise;
};
var queryHostsServices = function (fields, filters, callback) {
var hostQuery = surveilQuery(fields, filters.hosts),
serviceQuery = surveilQuery(fields, filters.services);
var queryHostsServices = function (fields, filters, paging, callback) {
var hostQuery = surveilQuery(fields, filters.hosts, paging),
serviceQuery = surveilQuery(fields, filters.services, paging);
executeQuery(surveilApiConfig.endpoint('status') + '/hosts/', 'POST', hostQuery)
.success(function (hosts) {
@ -104,8 +104,8 @@ angular.module('bansho.surveil')
};
var queryEndpoint = {
"services": function (fields, filters, callback) {
queryHostsServices(fields, filters, function (hosts, services) {
"services": function (fields, filters, paging, callback) {
queryHostsServices(fields, filters, paging, function (hosts, services) {
var hostsDict = createHostsDict(hosts),
response = [];
@ -124,8 +124,8 @@ angular.module('bansho.surveil')
callback(response);
});
},
"hosts": function (fields, filters, callback) {
var hostQuery = surveilQuery(fields, filters.hosts),
"hosts": function (fields, filters, paging, callback) {
var hostQuery = surveilQuery(fields, filters.hosts, paging),
method = 'POST',
hostUrl = surveilApiConfig.endpoint('status') + '/hosts/';
@ -141,8 +141,8 @@ angular.module('bansho.surveil')
callback(response);
});
},
"events": function (fields, filters, callback) {
var query = surveilQuery(fields, filters.events);
"events": function (fields, filters, paging, callback) {
var query = surveilQuery(fields, filters.events, paging);
executeQuery(surveilApiConfig.endpoint('status') + '/events/', 'POST', query)
.success(function (events) {

1
app/index.html
View File

@ -80,6 +80,7 @@
<script src="components/directive/actionbar/component_recheck/recheck.js"></script>
<script src="components/directive/actionbar/component_search_filter/search_filter.js"></script>
<script src="components/directive/table/table.js"></script>
<script src="components/directive/table/pagingbar/pagingbar.js"></script>
<script src="components/directive/table/cell_status_duration/cell_status_duration.js"></script>
<script src="components/directive/table/cell_config_host/cell_config_host.js"></script>