Share model for apps/components views.
This will enable multiple views of the same data. Apps and Components. Once this is done, the assets can be merged into one file on the server to make it easier for new types to be added. Change-Id: Ie54ee460730bd3584375f069fab28b7c2b004d8d
This commit is contained in:
Kevin Fox
parent
c73b3abffe
commit
3d677a4654
|
|
@ -22,59 +22,64 @@
|
|||
.module('hz.dashboard.project.app_catalog', ['hz.dashboard'])
|
||||
.filter('encodeURIComponent', function() {
|
||||
return window.encodeURIComponent;
|
||||
})
|
||||
.controller('appCatalogTableCtrl', [
|
||||
}).controller('appCatalogTableCtrl', [
|
||||
'$scope',
|
||||
'$http',
|
||||
'horizon.openstack-service-api.heat',
|
||||
'$timeout',
|
||||
'appCatalogModel',
|
||||
appCatalogTableCtrl
|
||||
]).controller('appComponentCatalogTableCtrl', [
|
||||
'$scope',
|
||||
'$http',
|
||||
'horizon.openstack-service-api.glance',
|
||||
'$timeout',
|
||||
'appCatalogModel',
|
||||
appComponentCatalogTableCtrl
|
||||
]).service('appCatalogModel', [
|
||||
'$http',
|
||||
'horizon.openstack-service-api.heat',
|
||||
'horizon.openstack-service-api.glance',
|
||||
appCatalogModel
|
||||
]).directive('stars', stars);
|
||||
|
||||
function appCatalogTableCtrl($scope, $http, heatAPI) {
|
||||
var req = {
|
||||
function appCatalogModel($http, heatAPI, glanceAPI) {
|
||||
var callbacks = [];
|
||||
this.register_callback = function(callback) {
|
||||
callbacks.push(callback);
|
||||
};
|
||||
var notify = function(){
|
||||
angular.forEach(callbacks, function(callback){
|
||||
callback();
|
||||
});
|
||||
};
|
||||
this.assets = [];
|
||||
var $scope = this;
|
||||
var heat_req = {
|
||||
url: 'http://apps.openstack.org/static/heat_templates.json',
|
||||
headers: {'X-Requested-With': undefined}
|
||||
}
|
||||
$http(req).success(function(data) {
|
||||
$scope.assets = data.assets;
|
||||
for (var i in $scope.assets){
|
||||
var process = function(asset, url) {
|
||||
$http(heat_req).success(function(data) {
|
||||
for (var i in data.assets){
|
||||
var asset = data.assets[i];
|
||||
$scope.assets.push(asset);
|
||||
var process = function(asset) {
|
||||
var url = asset.attributes.url;
|
||||
heatAPI.validate({'template_url': url}).success(function(data){
|
||||
asset.validated = true;
|
||||
notify();
|
||||
}).error(function(data, status){
|
||||
var str = 'ERROR: Could not retrieve template:'
|
||||
asset.validated = 'unsupported';
|
||||
if(status == 400 && data.slice(0, str.length) == str) {
|
||||
asset.validated = 'error'
|
||||
}
|
||||
notify();
|
||||
});
|
||||
}
|
||||
process($scope.assets[i]);
|
||||
process(asset);
|
||||
}
|
||||
notify();
|
||||
});
|
||||
}
|
||||
|
||||
function update_found_assets($scope) {
|
||||
if('assets' in $scope && 'glance_names' in $scope){
|
||||
for (var i in $scope.assets){
|
||||
var name = $scope.assets[i].name;
|
||||
var is_installed = name in $scope.glance_names;
|
||||
$scope.assets[i].installed = is_installed;
|
||||
if(is_installed){
|
||||
$scope.assets[i].installed_id = $scope.glance_names[name]['id'];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function appComponentCatalogTableCtrl($scope, $http, glanceAPI) {
|
||||
var req = {
|
||||
var glance_req = {
|
||||
url: 'http://apps.openstack.org/static/glance_images.json',
|
||||
headers: {'X-Requested-With': undefined}
|
||||
}
|
||||
|
|
@ -87,13 +92,59 @@
|
|||
}
|
||||
$scope.glance_names = glance_names;
|
||||
update_found_assets($scope)
|
||||
notify();
|
||||
});
|
||||
$http(req).success(function(data) {
|
||||
$scope.assets = data.assets;
|
||||
$http(glance_req).success(function(data) {
|
||||
for (var i in data.assets){
|
||||
var asset = data.assets[i];
|
||||
$scope.assets.push(asset);
|
||||
}
|
||||
$scope.glance_loaded = true;
|
||||
update_found_assets($scope);
|
||||
notify();
|
||||
});
|
||||
}
|
||||
|
||||
function appCatalogTableCtrl($scope, $http, $timeout, appCatalogModel) {
|
||||
$scope.assets = []
|
||||
var update = function(){
|
||||
$scope.assets = []
|
||||
for (var i in appCatalogModel.assets){
|
||||
var asset = appCatalogModel.assets[i];
|
||||
if(typeof asset.tags !== "undefined" && asset.tags.indexOf('app') > -1){
|
||||
$scope.assets.push(asset);
|
||||
}
|
||||
}
|
||||
};
|
||||
appCatalogModel.register_callback(update);
|
||||
}
|
||||
|
||||
function appComponentCatalogTableCtrl($scope, $http, $timeout, appCatalogModel) {
|
||||
$scope.assets = appCatalogModel.assets
|
||||
var update = function(){
|
||||
$timeout(function() {
|
||||
$scope.assets = appCatalogModel.assets
|
||||
}, 0, false);
|
||||
};
|
||||
appCatalogModel.register_callback(update);
|
||||
}
|
||||
|
||||
function update_found_assets($scope) {
|
||||
if('glance_loaded' in $scope && 'glance_names' in $scope){
|
||||
for (var i in $scope.assets){
|
||||
if($scope.assets[i].service.type != 'glance'){
|
||||
continue;
|
||||
}
|
||||
var name = $scope.assets[i].name;
|
||||
var is_installed = name in $scope.glance_names;
|
||||
$scope.assets[i].installed = is_installed;
|
||||
if(is_installed){
|
||||
$scope.assets[i].installed_id = $scope.glance_names[name]['id'];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function stars() {
|
||||
var star = angular.element('<i>');
|
||||
star.addClass('fa fa-star');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,57 @@
|
|||
<table hz-table ng-cloak
|
||||
class="table-striped table-rsp table-detail modern">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="expander"></th>
|
||||
<th class="rsp-p1">Name</th>
|
||||
<th 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">
|
||||
<td class="expander">
|
||||
<i class="fa fa-chevron-right" hz-expand-detail duration="200"></i>
|
||||
</td>
|
||||
<td class="rsp-p1">{$ asset.name $}</td>
|
||||
<td class="rsp-p2">{$ asset.license $}</td>
|
||||
<td ng-switch="asset.service.type">
|
||||
<div ng-switch-when="heat" ng-switch="asset.validated">
|
||||
<a ng-switch-default class="btn btn-default btn-sm disabled ajax-modal" href="/}">Checking</a>
|
||||
<a ng-switch-when="error" class="btn btn-default btn-sm disabled ajax-modal" href="/">Error</a>
|
||||
<a ng-switch-when="unsupported" class="btn btn-default btn-sm disabled ajax-modal" href="/">Unsupported</a>
|
||||
<a ng-switch-when="true" class="btn btn-default btn-sm ajax-modal" href="/project/stacks/select_template?template_source=url&template_url={$ asset.attributes.url | encodeURIComponent $}">Launch</a>
|
||||
</div>
|
||||
<div ng-switch-when="glance" ng-switch="asset.attributes.indirect_url || '_undefined_'">
|
||||
<a ng-switch-default class="btn btn-default btn-sm" target="_blank" href="{$ asset.attributes.indirect_url $}">Install Instructions</a>
|
||||
<div ng-switch-when="_undefined_" ng-switch="asset.installed">
|
||||
<a ng-switch-default class="btn btn-default btn-sm disabled ajax-modal" href="/}">Checking</a>
|
||||
<a ng-switch-when="false" class="btn btn-default btn-sm ajax-modal" href="/project/images/create/?name={$ asset.name | encodeURIComponent $}&source_type=url&image_url={$ asset.attributes.url | encodeURIComponent $}&disk_format={$ asset.service.disk_format $}&architecture={$ asset.service.architecture $}&minimum_disk={$ asset.service.min_disk $}&minimum_ram={$ asset.service.min_ram $}&description={$ asset.description $}">Install</a>
|
||||
<a ng-switch-when="true" class="btn btn-default btn-sm ajax-modal" href="/project/instances/launch?source_type=image_id&source_id={$ asset.installed_id $}">Launch</a>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr ng-repeat-end class="detail-row">
|
||||
<td class="detail" colspan="4">
|
||||
<dl class="dl-horizontal">
|
||||
<dt>Name</dt>
|
||||
<dd>{$ asset.name $}</dd>
|
||||
<dt>Description</dt>
|
||||
<dd>{$ asset.description $}</dd>
|
||||
<dt>Company</dt>
|
||||
<dd>{$ asset.provided_by.company $}</dd>
|
||||
<dt></dt>
|
||||
<dd ng-switch="asset.license_url || '_undefined_'">
|
||||
<a ng-switch-default class="btn btn-default btn-sm" target="_blank" href="{$ asset.license_url $}">License Details</a>
|
||||
<div ng-switch-when="_undefined_"></div>
|
||||
</dd>
|
||||
</dl>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -8,47 +8,9 @@
|
|||
|
||||
{% block main %}
|
||||
|
||||
<table hz-table ng-cloak
|
||||
class="table-striped table-rsp table-detail modern"
|
||||
<div ng-cloak
|
||||
ng-controller="appCatalogTableCtrl">
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="expander"></th>
|
||||
<th class="rsp-p1">Name</th>
|
||||
<th 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">
|
||||
<td class="expander">
|
||||
<i class="fa fa-chevron-right" hz-expand-detail duration="200"></i>
|
||||
</td>
|
||||
<td class="rsp-p1">{$ asset.name $}</td>
|
||||
<td class="rsp-p2">{$ asset.license $}</td>
|
||||
<td ng-switch="asset.validated">
|
||||
<a ng-switch-default class="btn btn-default btn-sm disabled ajax-modal" href="/}">Checking</a>
|
||||
<a ng-switch-when="error" class="btn btn-default btn-sm disabled ajax-modal" href="/">Error</a>
|
||||
<a ng-switch-when="unsupported" class="btn btn-default btn-sm disabled ajax-modal" href="/">Unsupported</a>
|
||||
<a ng-switch-when="true" class="btn btn-default btn-sm ajax-modal" href="/project/stacks/select_template?template_source=url&template_url={$ asset.attributes.url | encodeURIComponent $}">Launch</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr ng-repeat-end class="detail-row">
|
||||
<td class="detail" colspan="4">
|
||||
<dl class="dl-horizontal">
|
||||
<dt>Name</dt>
|
||||
<dd>{$ asset.name $}</dd>
|
||||
<dt>Description</dt>
|
||||
<dd>{$ asset.description $}</dd>
|
||||
</dl>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<ng-include src="'{{ STATIC_URL }}dashboard/project/app_catalog/main_panel.html'"></ng-include>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,57 +8,9 @@
|
|||
|
||||
{% block main %}
|
||||
|
||||
<table hz-table ng-cloak
|
||||
class="table-striped table-rsp table-detail modern"
|
||||
<div ng-cloak
|
||||
ng-controller="appComponentCatalogTableCtrl">
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="expander"></th>
|
||||
<th class="rsp-p1">Name</th>
|
||||
<th 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">
|
||||
<td class="expander">
|
||||
<i class="fa fa-chevron-right" hz-expand-detail duration="200"></i>
|
||||
</td>
|
||||
<td class="rsp-p1">{$ asset.name $}</td>
|
||||
<td class="rsp-p2">{$ asset.license $}</td>
|
||||
<td ng-switch="asset.attributes.indirect_url || '_undefined_'">
|
||||
<a ng-switch-default class="btn btn-default btn-sm" target="_blank" href="{$ asset.attributes.indirect_url $}">Install Instructions</a>
|
||||
<div ng-switch-when="_undefined_" ng-switch="asset.installed">
|
||||
<a ng-switch-default class="btn btn-default btn-sm disabled ajax-modal" href="/}">Checking</a>
|
||||
<a ng-switch-when="false" class="btn btn-default btn-sm ajax-modal" href="/project/images/create/?name={$ asset.name | encodeURIComponent $}&source_type=url&image_url={$ asset.attributes.url | encodeURIComponent $}&disk_format={$ asset.service.disk_format $}&architecture={$ asset.service.architecture $}&minimum_disk={$ asset.service.min_disk $}&minimum_ram={$ asset.service.min_ram $}&description={$ asset.description $}">Install</a>
|
||||
<a ng-switch-when="true" class="btn btn-default btn-sm ajax-modal" href="/project/instances/launch?source_type=image_id&source_id={$ asset.installed_id $}">Launch</a>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr ng-repeat-end class="detail-row">
|
||||
<td class="detail" colspan="4">
|
||||
<dl class="dl-horizontal">
|
||||
<dt>Name</dt>
|
||||
<dd>{$ asset.name $}</dd>
|
||||
<dt>Description</dt>
|
||||
<dd>{$ asset.description $}</dd>
|
||||
<dt>Company</dt>
|
||||
<dd>{$ asset.provided_by.company $}</dd>
|
||||
<dt></dt>
|
||||
<dd ng-switch="asset.license_url || '_undefined_'">
|
||||
<a ng-switch-default class="btn btn-default btn-sm" target="_blank" href="{$ asset.license_url $}">License Details</a>
|
||||
<div ng-switch-when="_undefined_"></div>
|
||||
</dd>
|
||||
</dl>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<ng-include src="'{{ STATIC_URL }}dashboard/project/app_catalog/main_panel.html'"></ng-include>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue