Service Type Filters and table tweaks.

Add checkboxes so that Users can filter by service type.
Add pagination, sorting, and text search. Lay groundwork
for when magic-search widget works.

Change-Id: I73cdee3acef070b5cc83eb76a385714b8b7aefc3
This commit is contained in:
Kevin Fox 2015-08-04 05:05:43 -07:00
parent 3d677a4654
commit 57a958be87
2 changed files with 92 additions and 15 deletions

View File

@ -42,17 +42,45 @@
]).directive('stars', stars);
function appCatalogModel($http, heatAPI, glanceAPI) {
var $scope = this;
var callbacks = [];
this.register_callback = function(callback) {
callbacks.push(callback);
this.assets = [];
this.assets_filtered = [];
this.service_filters = [
{id:'heat', name:'Orchestration'},
{id:'glance', name: 'Images'}
];
this.service_filters_selections = {
'heat':true,
'glance':true
};
var notify = function(){
angular.forEach(callbacks, function(callback){
callback();
});
};
this.assets = [];
var $scope = this;
this.update_assets_filtered = function(){
$scope.assets_filtered.length = 0;
angular.forEach($scope.assets, function(asset){
if($scope.service_filters_selections[asset.service.type] == true){
$scope.assets_filtered.push(asset);
}
});
notify();
};
this.toggle_service_filter = function(service_name) {
var value = $scope.service_filters_selections[service_name];
if(value) {
value = false;
} else {
value = true;
}
$scope.service_filters_selections[service_name] = value;
$scope.update_assets_filtered();
};
this.register_callback = function(callback) {
callbacks.push(callback);
};
var heat_req = {
url: 'http://apps.openstack.org/static/heat_templates.json',
headers: {'X-Requested-With': undefined}
@ -77,7 +105,7 @@
}
process(asset);
}
notify();
update_found_assets($scope)
});
var glance_req = {
url: 'http://apps.openstack.org/static/glance_images.json',
@ -92,7 +120,6 @@
}
$scope.glance_names = glance_names;
update_found_assets($scope)
notify();
});
$http(glance_req).success(function(data) {
for (var i in data.assets){
@ -101,32 +128,53 @@
}
$scope.glance_loaded = true;
update_found_assets($scope);
notify();
});
this.asset_filter_strings = {
cancel: gettext('Cancel'),
prompt: gettext('Prompt'),
remove: gettext('Remove'),
text: gettext('Text')
};
this.asset_filter_facets = [
{
name: 'name',
label: gettext('Name'),
singleton: true
}];
}
function common_init($scope, appCatalogModel) {
$scope.toggle_service_filter = appCatalogModel.toggle_service_filter;
$scope.service_filters = appCatalogModel.service_filters;
$scope.service_filters_selections = appCatalogModel.service_filters_selections;
$scope.asset_filter_strings = appCatalogModel.asset_filter_strings;
$scope.asset_filter_facets = appCatalogModel.asset_filter_facets;
}
function appCatalogTableCtrl($scope, $http, $timeout, appCatalogModel) {
$scope.assets = []
var update = function(){
$scope.assets = []
for (var i in appCatalogModel.assets){
var asset = appCatalogModel.assets[i];
for (var i in appCatalogModel.assets_filtered){
var asset = appCatalogModel.assets_filtered[i];
if(typeof asset.tags !== "undefined" && asset.tags.indexOf('app') > -1){
$scope.assets.push(asset);
}
}
};
appCatalogModel.register_callback(update);
common_init($scope, appCatalogModel);
}
function appComponentCatalogTableCtrl($scope, $http, $timeout, appCatalogModel) {
$scope.assets = appCatalogModel.assets
$scope.assets = appCatalogModel.assets_filtered
var update = function(){
$timeout(function() {
$scope.assets = appCatalogModel.assets
$scope.assets = appCatalogModel.assets_filtered
}, 0, false);
};
appCatalogModel.register_callback(update);
common_init($scope, appCatalogModel);
}
function update_found_assets($scope) {
@ -143,6 +191,7 @@
}
}
}
$scope.update_assets_filtered();
}
function stars() {

View File

@ -1,16 +1,36 @@
<table hz-table ng-cloak
Service Types: <label ng-repeat="service in service_filters">
<input
type="checkbox"
name="selected_filters[]"
value="{$ service.id $}"
ng-checked="service_filters_selections[service.id]"
ng-click="toggle_service_filter(service.id)"
> {$ service.name $}
</label>
<table hz-table ng-cloak st-table="dispassets" st-safe-src="assets"
class="table-striped table-rsp table-detail modern">
<thead>
<tr>
<th colspan="4">
<hz-search-bar group-classes="input-group-sm" icon-classes="fa-search"></hz-search-bar>
<!--
<st-magic-search>
<hz-magic-search-bar filter-facets="{$ asset_filter_facets $}" filter-strings="asset_filter_strings">
</hz-magic-search-bar>
</st-magic-search>
-->
</th>
</tr>
<tr>
<th class="expander"></th>
<th class="rsp-p1">Name</th>
<th class="rsp-p1">License</th>
<th st-sort="name" st-sort-default="true" class="rsp-p1">Name</th>
<th st-sort='license' class="rsp-p1">License</th>
<th class="rsp-p1"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="asset in assets | orderBy:'-name':true track by asset.name">
<tr ng-repeat-start="asset in dispassets track by asset.name">
<td class="expander">
<i class="fa fa-chevron-right" hz-expand-detail duration="200"></i>
</td>
@ -54,4 +74,12 @@
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="7"></div>
</td>
</tr>
</tfoot>
</table>