openstack/app-catalog
Code Issues Proposed changes

Refactored HTML using Bootstrap

Browse Source 
Change-Id: I0a7b152dd62f6566f18c2f7aaf5bb39561367f39
This commit is contained in:
Herman Narkaytis 2015-04-10 05:26:06 +03:00
parent 910733e667
commit 84b93f9b7e
5 changed files with 386 additions and 306 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

378
openstack_catalog/web/index.html
View File

@ -1,199 +1,247 @@
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Market place</title>
<meta name="description" content="OpenStack market place">
<meta name="keywords" content="openstack, glance images, heat templates, murano applications">
<meta name="author" content="Mirantis on behalf of OpenStack Foundation">
<title>OpenStack Application Catalog</title>
<!-- Bootstrap core CSS -->
<link href="//cdn.jsdelivr.net/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="static/css/theme.css" rel="stylesheet" type="text/css">
<link href="//cdn.jsdelivr.net/fontawesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=PT+Sans:400,700,400italic" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Open+Sans:400italic,400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/cupertino/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.datatables/1.10.4/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/select2/3.5.2/select2.css">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body role="document">
<!-- Fixed navbar -->
<div class="masthead navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="#"></a> <h1>Application Catalog</h1>
</div>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-collapse collapse">
<ul id="navbar" class="nav navbar-nav">
<li><a href="#glance-images">Glance Images</a></li>
<li><a href="#heat-templates">Heat Templates</a></li>
<li><a href="#murano-apps">Murano Apps</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container" role="main">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div id="glance-images" class="content">
<div class="row filters">
<div class="col-md-6">
<form class="form-inline">
<div class="form-group">
<label>Supported by</label>
<input type="hidden" id="glance-supported-by"
style="width:10em" data-placeholder="Any vendor"/>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table id="glance-images-table" class="table table-striped">
<thead>
<tr>
<th>Image&nbsp;Name</th>
<th width="35%">Description</th>
<th width="60">Format</th>
<th width="60">Supported&nbsp;by</th>
<th width="60">License</th>
<th width="60">&nbsp;</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<div id="heat-templates" class="content">
<div class="row filters">
<div class="col-md-6">
<form class="form-inline">
<div class="form-group">
<label>Supported by</label>
<input type="hidden" id="heat-supported-by"
style="width:10em" data-placeholder="Any vendor"/>
</div>
&nbsp;
<div class="form-group">
<label>Release</label>
<input type="hidden" id="heat-release"
style="width:10em" data-placeholder="Any release"/>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table id="heat-templates-table" class="table table-striped">
<thead>
<tr>
<th>Template&nbsp;Name</th>
<th width="35%">Description</th>
<th width="60">Release</th>
<th width="60">Format</th>
<th width="60">Supported&nbsp;by</th>
<th width="60">License</th>
<th width="60">&nbsp;</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<div id="murano-apps" class="content">
<div class="row filters">
<div class="col-md-6">
<form class="form-inline">
<div class="form-group">
<label>Supported by</label>
<input type="hidden" id="murano-supported-by"
style="width:10em" data-placeholder="Any vendor"/>
</div>
&nbsp;
<div class="form-group">
<label>Release</label>
<input type="hidden" id="murano-release"
style="width:10em" data-placeholder="Any release"/>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table id="murano-apps-table" class="table table-striped">
<thead>
<tr>
<th>Application&nbsp;Name</th>
<th width="35%">Description</th>
<th width="60">Release</th>
<th width="60">Format</th>
<th width="60">Supported&nbsp;by</th>
<th width="60">License</th>
<th width="60">&nbsp;</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<div id="info_dialog" title="Details">
<div id="info_container"></div>
</div>
<!-- core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.datatables/1.10.4/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/select2/3.5.2/select2.min.js"></script>
<script type="text/javascript" src="//ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.timeago/1.4.1/jquery.timeago.js"></script>
<script type="text/javascript" src="static/js/mp.js"></script>
<script type="text/javascript"
src="//cdn.jsdelivr.net/jquery.timeago/1.4.1/jquery.timeago.js"></script>
<script type="text/javascript" src="static/js/apps-catalog.js"></script>
<script type="text/javascript">
$(function() { initMarketPlace (); });
$(document).ready(function () {} );
</script>
<script id="image-info-template" type="text/x-jquery-tmpl">
</head>
<h2>${image_name} (${format})</h2>
<div><span class="label">Supported by</span> <span class="value">${supported_by}</span></div>
<div><span class="label">Description:</span> <span class="value">${description}</span></div>
<body>
<div id="content">
<h3>Author</h3>
<div><span class="label">Contact:
</span><a href="${provided_by.href}"> <span class="value">${provided_by.name}</span> </a></div>
<div><span class="label">Company:</span> <span class="value">${provided_by.company}</span></div>
<div class="page">
<div id="tabs">
<ul>
<li><a href="#glance-images"> Glance Images </a></li>
<li><a href="#heat-templates"> Heat Templates </a></li>
<li><a href="#murano-apps"> Murano Apps </a></li>
</ul>
<div id="glance-images">
<div class="drops">
</script>
<div class="drop">
<label for="glance_supported_by" title="Vendor">Supported by</label>
<input type="hidden" id="glance_supported_by" style="width:240px" data-placeholder="Any vendor"/>
</div>
<script id="template-info-template" type="text/x-jquery-tmpl">
</div>
<h2>${template_name} (${format})</h2>
<div><span class="label">Supported by</span> <span class="value">${supported_by}</span></div>
<div><span class="label">Description:</span> <span class="value">${description}</span></div>
<div><span class="label">Available in Releases:</span> <span class="value">${release_html}</span></div>
<div style="margin-top: 2em; margin-bottom: 2em">
<table id="glance_images_table" class="display">
<thead>
<tr>
<th>Image name</th>
<th>Provided by</th>
<th>Description</th>
<th>Format</th>
<th>Supported by</th>
<th>License</th>
</tr>
</thead>
</table>
</div>
</div>
<div id="heat-templates">
<div class="drops">
<h3>Author</h3>
<div><span class="label">Contact:
</span><a href="${provided_by.href}"> <span class="value">${provided_by.name}</span> </a></div>
<div><span class="label">Company:</span> <span class="value">${provided_by.company}</span></div>
</script>
<div class="drop">
<label for="heat_supported_by" title="Vendor">Supported by</label>
<input type="hidden" id="heat_supported_by" style="width:240px" data-placeholder="Any vendor"/>
</div>
<script id="application-info-template" type="text/x-jquery-tmpl">
<div class="drop">
<label for="heat_release" title="OpenStack Release">Release</label>
<input type="hidden" id="heat_release" style="width:240px" data-placeholder="Any release"/>
</div>
<h2>${package_name} (${format})</h2>
</div>
<h3>Description</h3>
<div><span class="value">${description}</span></div>
<div style="margin-top: 2em; margin-bottom: 2em">
<table id="heat_templates_table" class="display">
<thead>
<tr>
<th>Template name</th>
<th>Provided by</th>
<th>Description</th>
<th>Release</th>
<th>Format</th>
<th>Supported by</th>
<th>License</th>
</tr>
</thead>
</table>
</div>
<h3>Supported OpenStack Releases</h3>
<div><span class="value">${release_html}</span></div>
</div>
<div id="murano-apps">
<div class="drops">
<h3>Support</h3>
<div><span class="label">Supported by:</span> <span class="value">${supported_by}</span></div>
<div class="drop">
<label for="murano_supported_by" title="Vendor">Supported by</label>
<input type="hidden" id="murano_supported_by" style="width:240px" data-placeholder="Any vendor"/>
</div>
<h3>Author</h3>
<div><span class="label">Contact: </span><a href="${provided_by.href}"> <span class="value">${provided_by.name}</span> </a></div>
<div><span class="label">Company:</span> <span class="value">${provided_by.company}</span></div>
</script>
<div class="drop">
<label for="murano_release" title="OpenStack Release">Release</label>
<input type="hidden" id="murano_release" style="width:240px" data-placeholder="Any release"/>
</div>
</div>
<div style="margin-top: 2em; margin-bottom: 2em">
<table id="murano_apps_table" class="display">
<thead>
<tr>
<th>Package name</th>
<th>Provided by</th>
<th>Description</th>
<th>Release</th>
<th>Format</th>
<th>Supported by</th>
<th>License</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<div id="info_dialog" title="Details">
<div id="info_container"></div>
</div>
<script id="image_info_template" type="text/x-jquery-tmpl">
<h2>${image_name} (${format})</h2>
<div><span class="label">Supported by</span> <span class="value">${supported_by}</span></div>
<div><span class="label">Description:</span> <span class="value">${description}</span></div>
<h3>Author</h3>
<div><span class="label">Contact:
</span><a href="${provided_by.href}" <span class="value">${provided_by.name}</span> </a></div>
<div><span class="label">Company:</span> <span class="value">${provided_by.company}</span></div>
</script>
<script id="template_info_template" type="text/x-jquery-tmpl">
<h2>${template_name} (${format})</h2>
<div><span class="label">Supported by</span> <span class="value">${supported_by}</span></div>
<div><span class="label">Description:</span> <span class="value">${description}</span></div>
<div><span class="label">Available in Releases:</span> <span class="value">${release_html}</span></div>
<h3>Author</h3>
<div><span class="label">Contact:
</span><a href="${provided_by.href}" <span class="value">${provided_by.name}</span> </a></div>
<div><span class="label">Company:</span> <span class="value">${provided_by.company}</span></div>
</script>
<script id="application_info_template" type="text/x-jquery-tmpl">
<h2>${package_name} (${format})</h2>
<h3>Description</h3>
<div><span class="value">${description}</span></div>
<h3>Supported OpenStack Releases</h3>
<div><span class="value">${release_html}</span></div>
<h3>Support</h3>
<div><span class="label">Supported by:</span> <span class="value">${supported_by}</span></div>
<h3>Author</h3>
<div><span class="label">Contact:
</span><a href="${provided_by.href}" <span class="value">${provided_by.name}</span> </a></div>
<div><span class="label">Company:</span> <span class="value">${provided_by.company}</span></div>
</script>
</div>
<div id="dummy"></div>
</div>
</body>
</html>

74
openstack_catalog/web/static/css/style.css
View File

@ -1,74 +0,0 @@
html, body {
font-family: 'PT Sans', arial, sans-serif;
font-size: 14px;
height: 100%;
color: #41454d;
margin: 0;
}
a {
color: #D32F1A;
text-decoration: none;
}
a:hover {
color: #F00;
}
p {
font-size: 15px;
color: #41454D;
font-style: normal;
margin: 6px 0px 15px 0px;
}
div.page {
margin: 0 auto;
}
h2 {
font-family: 'PT Sans Narrow', 'Arial Narrow', arial, sans-serif;
font-size: 23px;
font-weight: normal;
font-style: normal;
margin-bottom: 10px;
color: #a41200;
text-shadow: 1px 1px 0 #fff;
}
h3 {
font-family: 'PT Sans Narrow', 'Arial Narrow', arial, sans-serif;
font-size: 19px;
font-weight: normal;
font-style: normal;
margin-bottom: 10px;
color: #a41200;
}
h4 {
font-family: 'PT Sans Narrow', 'Arial Narrow', arial, sans-serif;
font-size: 16px;
font-weight: bold;
font-style: normal;
margin-top: 0.1em;
margin-bottom: 0.5em;
color: #a41200;
}
div.drops {
height: 60px;
margin-top: 10px;
}
div.drop label {
color: #909cb5;
}
.drop {
height: 30px;
float: left;
margin-right: 20px;
}
.drop label {
display: block;
}

110
openstack_catalog/web/static/css/theme.css Normal file
View File

@ -0,0 +1,110 @@
h1, h2, h3, h4, h5, h6 {
font-family: "PT Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
body {
padding-top: 133px;
padding-bottom: 30px;
}
a {
color: #30739c;
}
.masthead {
background: #fff;
}
.masthead h1 {
display: inline-block;
border-left: 1px solid #ccc;
padding-left: 20px;
margin-left: 20px;
height: 33px;
line-height: 33px;
font-size: 21px;
color: #264d69;
}
.navbar {
margin: 0;
border-radius: 0;
border: none:
}
.navbar-brand {
width: 136px;
height: 33px;
background: url(../images/openstack-logo.png) no-repeat;
display: block;
padding: 0;
margin: 20px 0;
}
.navbar-inverse {
background: #edf2f7;
border: none;
padding: 10px 0;
}
.navbar-inverse .navbar-nav>li>a {
color: #486278;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 5px;
margin-right: 10px;
font-family: "PT Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
text-transform: uppercase;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.open>a {
background: #fff;
box-shadow: none;
color: #486278;
}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
background: #fff;
color: #486278;
}
.filters {
margin-bottom: 15px;
}
.filters #supported-by {
margin-right: 20px;
}
.form-inline label {
margin-right: 3px;
}
.table th {
font-weight: 400;
color: #30739c;
}
.table tr td:first-child {
font-weight: 700;
}
.content {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
padding: 25px 0;
}
.btn {
border-radius: 0;
}
a.details {
text-transform: uppercase;
font-weight: 700;
font-size: .9em;
}
a.details i {
background: #30739c;
color: #fff;
display: inline-block;
padding: 2px 3px;
border-radius: 4px;
}
.navbar-fixed-top {
z-index: 0;
}
.dataTables_filter {
margin-top: -42px;
margin-right: -140px;
}
div .dataTables_wrapper .dataTables_length {
float: right;
}
.dataTables_filter input {
width: 70%;
border: 1px solid #ccc;
border-radius: 4px;
}

BIN
openstack_catalog/web/static/images/openstack-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

130
openstack_catalog/web/static/js/mp.js → openstack_catalog/web/static/js/apps-catalog.js
View File

@ -74,20 +74,8 @@ function showInfo (template_id, info) {
}
function setupInfoHandler (table_id, element_id, template_id, info) {
$("#info_dialog").dialog({
autoOpen: false,
width: "70%",
modal: true,
buttons: {
Close: function () {
$(this).dialog("close");
}
},
close: function () {
}
});
$("#" + table_id).on("click", "#" + element_id, function (event) {
info.details = "<a id=\"element_id_" + element_id + "\" href=\"#\" class=\"details\"><i class=\"fa fa-ellipsis-h\"></i> Details</a>";
$("#" + table_id).on("click", "#element_id_" + element_id, function (event) {
event.preventDefault();
event.stopPropagation();
@ -136,13 +124,14 @@ function populate_table (table_id, table_column_names, tableData)
if (table_id) {
$("#" + table_id).dataTable({
"aLengthMenu": [
[10, 25, 50, -1],
[10, 25, 50, "All"]
[5, 10, 25, 50, -1],
[5, 10, 25, 50, "All"]
],
"bDestroy": true,
"iDisplayLength": -1,
"bAutoWidth": false,
"bPaginate": true,
"pagingType": "full_numbers",
"aaData": tableData,
"aoColumns": tableColumns
});
@ -156,19 +145,11 @@ function show_glance_images ()
var ops = getUrlVars ();
var tableData = filterData (glance_images["images"], ops);
var table_column_names = ["image_name_html", "provided_by_html", "description", "format", "supported_by", "license"];
var table_id = "glance_images_table";
var table_column_names = ["image_name", "description", "format", "supported_by", "license", "details"];
var table_id = "glance-images-table";
for (var i = 0; i < tableData.length; i++) {
tableData[i].image_name_html = "<a href=\"#\" title=\"Show details\">" + tableData[i].image_name + "</a>";
tableData[i].image_name_html = "<div id=\"image_" + i + "\">" + tableData[i].image_name_html + "</div>";
setupInfoHandler (table_id, "image_" + i, "image_info_template", tableData[i]);
tableData[i].provided_by_html = "<a href=\"" + tableData[i].provided_by.href +
"\" title=\"Show details\">" + tableData[i].provided_by.name + "</a> " +
"[" + tableData[i].provided_by.company + "]";
setupInfoHandler (table_id, i, "image-info-template", tableData[i]);
}
populate_table (table_id, table_column_names, tableData);
@ -181,20 +162,12 @@ function show_heat_templates ()
var ops = getUrlVars ();
var tableData = filterData (heat_templates["templates"], ops);
var table_column_names = ["template_name_html", "provided_by_html", "description", "release_html", "format", "supported_by", "license"];
var table_id = "heat_templates_table";
var table_column_names = ["template_name", "description", "release_html", "format", "supported_by", "license", "details"];
var table_id = "heat-templates-table";
for (var i = 0; i < tableData.length; i++) {
tableData[i].template_name_html = "<a href=\"#\" title=\"Show details\">" + tableData[i].template_name + "</a>";
tableData[i].template_name_html = "<div id=\"template_" + i + "\">" + tableData[i].template_name_html + "</div>";
setupInfoHandler (table_id, "template_" + i, "template_info_template", tableData[i]);
tableData[i].provided_by_html = "<a href=\"" + tableData[i].provided_by.href +
"\" title=\"Show details\">" + tableData[i].provided_by.name + "</a> " +
"[" + tableData[i].provided_by.company + "]";
tableData[i].release_html = tableData[i].release.join (", ");
setupInfoHandler (table_id, i, "template-info-template", tableData[i]);
}
populate_table (table_id, table_column_names, tableData);
@ -207,52 +180,76 @@ function show_murano_apps ()
var ops = getUrlVars ();
var tableData = filterData (murano_apps["applications"], ops);
var table_column_names = ["package_name_html", "provided_by_html", "description", "release_html", "format", "supported_by", "license"];
var table_id = "murano_apps_table";
var table_column_names = ["package_name", "description", "release_html", "format", "supported_by", "license", "details"];
var table_id = "murano-apps-table";
for (var i = 0; i < tableData.length; i++) {
tableData[i].package_name_html = "<a href=\"#\" title=\"Show details\">" + tableData[i].package_name + "</a>";
tableData[i].package_name_html = "<div id=\"package_" + i + "\">" + tableData[i].package_name_html + "</div>";
setupInfoHandler (table_id, "package_" + i, "application_info_template", tableData[i]);
tableData[i].provided_by_html = "<a href=\"" + tableData[i].provided_by.href +
"\" title=\"Show details\">" + tableData[i].provided_by.name + "</a> " +
"[" + tableData[i].provided_by.company + "]";
tableData[i].release_html = tableData[i].release.join (", ");
setupInfoHandler (table_id, i, "application-info-template", tableData[i]);
}
populate_table (table_id, table_column_names, tableData);
}
function initMarketPlace ()
function initTabs ()
{
var tab_idx = 0;
var tabs_list = $("#navbar")[0].children;
var selected_tab_name = null;
var options = getUrlVars ();
if ("tab" in options) {
var tabs_list = $("#tabs")[0].children[0].children;
for (var i = 0; i < tabs_list.length; ++i)
if (tabs_list[i].children[0].hash.substring (1) == options["tab"]) {
tab_idx = i;
for (var i = 0; i < tabs_list.length; ++i) {
var tab_name = tabs_list[i].children[0].hash.substring (1);
if (tab_name == options["tab"]) {
selected_tab_name = tab_name;
tabs_list[i].className = "active";
break;
}
}
}
$( "#tabs" ).tabs({
activate: function( event, ui ) {
update_url ({ tab : ui.newTab.context.hash.substring (1) });
},
active: tab_idx,
if (selected_tab_name == null) {
selected_tab_name = tabs_list[0].children[0].hash.substring (1);
tabs_list[0].className = "active";
}
$( ".content" ).hide ();
$( "#" + selected_tab_name ).show ();
$( "ul.nav > li > a" ).on("click", function (event) { event.preventDefault(); });
$( "ul.nav > li" ).click (function (event) {
var tab_name = this.children[0].hash.substring (1);
$( "ul.nav > li" ).removeClass ("active");
this.className = "active";
$( ".content" ).hide ();
$( "#" + tab_name ).show ();
update_url ({ tab : tab_name });
});
}
function initMarketPlace ()
{
initTabs ();
$("#info_dialog").dialog({
autoOpen: false,
width: "70%",
modal: true,
buttons: {
Close: function () {
$(this).dialog("close");
}
},
close: function () { }
});
$.ajax({
url: make_uri("static/glance_images.json"),
dataType: "json",
success: function (data) {
glance_images = data;
initSingleSelector ("glance_supported_by", "supported_by", glance_images["images"], show_glance_images);
initSingleSelector ("glance-supported-by", "supported_by", glance_images["images"], show_glance_images);
show_glance_images ();
}
});
@ -263,8 +260,8 @@ function initMarketPlace ()
success: function (data) {
heat_templates = data;
initSingleSelector ("heat_supported_by", "supported_by", heat_templates["templates"], show_heat_templates);
initSingleSelector ("heat_release", "release", heat_templates["templates"], show_heat_templates);
initSingleSelector ("heat-supported-by", "supported_by", heat_templates["templates"], show_heat_templates);
initSingleSelector ("heat-release", "release", heat_templates["templates"], show_heat_templates);
show_heat_templates ();
}
});
@ -275,10 +272,9 @@ function initMarketPlace ()
success: function (data) {
murano_apps = data;
initSingleSelector ("murano_supported_by", "supported_by", murano_apps["applications"], show_murano_apps);
initSingleSelector ("murano_release", "release", murano_apps["applications"], show_murano_apps);
initSingleSelector ("murano-supported-by", "supported_by", murano_apps["applications"], show_murano_apps);
initSingleSelector ("murano-release", "release", murano_apps["applications"], show_murano_apps);
show_murano_apps ();
}
});
});
}