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:
parent
3d677a4654
commit
57a958be87
|
@ -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() {
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue