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);
|
]).directive('stars', stars);
|
||||||
|
|
||||||
function appCatalogModel($http, heatAPI, glanceAPI) {
|
function appCatalogModel($http, heatAPI, glanceAPI) {
|
||||||
|
var $scope = this;
|
||||||
var callbacks = [];
|
var callbacks = [];
|
||||||
this.register_callback = function(callback) {
|
this.assets = [];
|
||||||
callbacks.push(callback);
|
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(){
|
var notify = function(){
|
||||||
angular.forEach(callbacks, function(callback){
|
angular.forEach(callbacks, function(callback){
|
||||||
callback();
|
callback();
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
this.assets = [];
|
this.update_assets_filtered = function(){
|
||||||
var $scope = this;
|
$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 = {
|
var heat_req = {
|
||||||
url: 'http://apps.openstack.org/static/heat_templates.json',
|
url: 'http://apps.openstack.org/static/heat_templates.json',
|
||||||
headers: {'X-Requested-With': undefined}
|
headers: {'X-Requested-With': undefined}
|
||||||
|
@ -77,7 +105,7 @@
|
||||||
}
|
}
|
||||||
process(asset);
|
process(asset);
|
||||||
}
|
}
|
||||||
notify();
|
update_found_assets($scope)
|
||||||
});
|
});
|
||||||
var glance_req = {
|
var glance_req = {
|
||||||
url: 'http://apps.openstack.org/static/glance_images.json',
|
url: 'http://apps.openstack.org/static/glance_images.json',
|
||||||
|
@ -92,7 +120,6 @@
|
||||||
}
|
}
|
||||||
$scope.glance_names = glance_names;
|
$scope.glance_names = glance_names;
|
||||||
update_found_assets($scope)
|
update_found_assets($scope)
|
||||||
notify();
|
|
||||||
});
|
});
|
||||||
$http(glance_req).success(function(data) {
|
$http(glance_req).success(function(data) {
|
||||||
for (var i in data.assets){
|
for (var i in data.assets){
|
||||||
|
@ -101,32 +128,53 @@
|
||||||
}
|
}
|
||||||
$scope.glance_loaded = true;
|
$scope.glance_loaded = true;
|
||||||
update_found_assets($scope);
|
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) {
|
function appCatalogTableCtrl($scope, $http, $timeout, appCatalogModel) {
|
||||||
$scope.assets = []
|
$scope.assets = []
|
||||||
var update = function(){
|
var update = function(){
|
||||||
$scope.assets = []
|
$scope.assets = []
|
||||||
for (var i in appCatalogModel.assets){
|
for (var i in appCatalogModel.assets_filtered){
|
||||||
var asset = appCatalogModel.assets[i];
|
var asset = appCatalogModel.assets_filtered[i];
|
||||||
if(typeof asset.tags !== "undefined" && asset.tags.indexOf('app') > -1){
|
if(typeof asset.tags !== "undefined" && asset.tags.indexOf('app') > -1){
|
||||||
$scope.assets.push(asset);
|
$scope.assets.push(asset);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
appCatalogModel.register_callback(update);
|
appCatalogModel.register_callback(update);
|
||||||
|
common_init($scope, appCatalogModel);
|
||||||
}
|
}
|
||||||
|
|
||||||
function appComponentCatalogTableCtrl($scope, $http, $timeout, appCatalogModel) {
|
function appComponentCatalogTableCtrl($scope, $http, $timeout, appCatalogModel) {
|
||||||
$scope.assets = appCatalogModel.assets
|
$scope.assets = appCatalogModel.assets_filtered
|
||||||
var update = function(){
|
var update = function(){
|
||||||
$timeout(function() {
|
$timeout(function() {
|
||||||
$scope.assets = appCatalogModel.assets
|
$scope.assets = appCatalogModel.assets_filtered
|
||||||
}, 0, false);
|
}, 0, false);
|
||||||
};
|
};
|
||||||
appCatalogModel.register_callback(update);
|
appCatalogModel.register_callback(update);
|
||||||
|
common_init($scope, appCatalogModel);
|
||||||
}
|
}
|
||||||
|
|
||||||
function update_found_assets($scope) {
|
function update_found_assets($scope) {
|
||||||
|
@ -143,6 +191,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
$scope.update_assets_filtered();
|
||||||
}
|
}
|
||||||
|
|
||||||
function stars() {
|
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">
|
class="table-striped table-rsp table-detail modern">
|
||||||
<thead>
|
<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>
|
<tr>
|
||||||
<th class="expander"></th>
|
<th class="expander"></th>
|
||||||
<th class="rsp-p1">Name</th>
|
<th st-sort="name" st-sort-default="true" class="rsp-p1">Name</th>
|
||||||
<th class="rsp-p1">License</th>
|
<th st-sort='license' class="rsp-p1">License</th>
|
||||||
<th class="rsp-p1"></th>
|
<th class="rsp-p1"></th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
|
||||||
<tbody>
|
<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">
|
<td class="expander">
|
||||||
<i class="fa fa-chevron-right" hz-expand-detail duration="200"></i>
|
<i class="fa fa-chevron-right" hz-expand-detail duration="200"></i>
|
||||||
</td>
|
</td>
|
||||||
|
@ -54,4 +74,12 @@
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
</tbody>
|
</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>
|
</table>
|
||||||
|
|
Loading…
Reference in New Issue