openstack/app-catalog
Code Issues Proposed changes

Implemented landing page with featured applications

Browse Source 
Change-Id: I524a7c737a87393b8f6b4ca6a33c23608827d497
This commit is contained in:
Herman Narkaytis 2015-04-14 06:12:53 +03:00
parent ed47896449
commit 0995ce58f8
11 changed files with 220 additions and 72 deletions

223
openstack_catalog/web/index.html

@ -20,7 +20,6 @@
<!-- 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">
@ -58,9 +57,9 @@
<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 packages</a></li>
<li><a href="#heat-templates">Heat Templates</a></li>
<li><a href="#glance-images">Glance Images</a></li>
</ul>
</div>
</div>
@ -70,114 +69,210 @@
<div class="container" role="main">
<!-- Main jumbotron for a primary marketing message or call to action -->
<!-- Main jumbotron for a primary marketing message or call to
action -->
<div id="landing-page" class="content" style="display:none">
<h1>The OpenStack Asset Catalog will help you make applications available on your cloud. </h1>
<div class="row featured">
<div class="col-md-2 col-sm-6">
<h3>Featured Apps</h3>
<p>(Requires OpenStack)</p>
</div>
<div class="col-md-2 col-sm-6">
<div class="inner murano">
<img src="static/images/logo-kubernetes.png">
<p>Kubernetes</p>
</div>
</div>
<div class="col-md-2 col-sm-6">
<div class="inner murano">
<img src="static/images/logo-redis.png">
<p>Redis</p>
</div>
</div>
<div class="col-md-2 col-sm-6">
<div class="inner glance">
<img src="static/images/logo-pivotal.png">
<p>Pivotal Cloud Foundry Dev Environment</p>
</div>
</div>
<div class="col-md-2 col-sm-6">
<div class="inner glance">
<img src="static/images/logo-lamp.png">
<p>LAMP Dev Environment</p>
</div>
</div>
<div class="col-md-2 col-sm-6">
<div class="inner heat">
<img src="static/images/logo-wordpress.png">
<p>Wordpress</p>
</div>
</div>
</div>
<p><strong>Don't have OpenStack yet?</strong></p>
<p>Get over to the <a href="https://www.openstack.org/marketplace/" target="_blank">OpenStack Marketplace</a> and find the best way to build your cloud. Once you have a cloud come back to the OpenStack Asset Catalog to make your cloud sing with applications.</p>
<div class="row">
<div class="col-md-4 bluebox">
<div class="inner">
<h2>Murano Packages</h2>
<img src="static/images/openstack-logo.png">
<p>In Murano Packages you will find complete applications, simple and clustered, ready to deploy into your cloud. To use them:</p>
<ol>
<li>Verify that you have Murano installed</li>
<li>Browse the list and find the app package you want</li>
<li>Copy the name of the app package</li>
<li>In Horizon navigate to the Application Catalog &gt; Packages page and Click Download Package</li>
<li>Paste the app package name, and click Download</li>
<li>You can now deploy the app into your cloud using Horizon or the <a href="https://github.com/stackforge/python-muranoclient">Murano client</a></li>
</ol>
</div>
</div>
<div class="col-md-4 bluebox">
<div class="inner">
<h2>Heat Templates</h2>
<img src="static/images/openstack-logo.png" class="text-center">
<p>In Heat Templates you will find templates for creating complete stacks in your cloud. To use them:</p>
<ol>
<li>Browse the list and find the one you want</li>
<li>Copy URL for the image file</li>
<li>Use the <a href="http://docs.openstack.org/cli-reference/content/glanceclient_commands.html" target="_blank">Glance client</a> to add it to your cloud with the --copy-from option, or add the image from Horizon by specifying the URL as the image location.</li>
<li>Use Nova to launch a vm from the new image
</li>
</ol>
</div>
</div>
<div class="col-md-4 bluebox">
<div class="inner">
<h2>Glance Images</h2>
<img src="static/images/openstack-logo.png">
<p>In Glance Images you will find a library of preconfigured images ready to launch virtual machines on your cloud. To use them:</p>
<ol>
<li>Browse the list and find the one you want</li>
<li>Download the template yaml file to your local machine</li>
<li>Use Horizon to add the template to Heat </li>
<li>Use the <a href="http://docs.openstack.org/cli-reference/content/heatclient_commands.html" target="_blank">Heat client</a> to create a stack</li>
</ol>
</div>
</div>
</div>
</div>
<div id="glance-images" class="content" style="display:none">
<div class="row filters">
<div class="col-md-6">
<form class="form-inline">
<div class="row filters">
<div class="col-md-6">
<form class="form-inline">
<div class="form-group">
<label>Supported by</label>
<label>Supported by</label>
<input type="hidden" id="glance-supported-by"
style="width:10em" data-placeholder="Any vendor"/>
</div>
</form>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table id="glance-images-table" class="table table-striped">
<div class="col-md-12">
<table id="glance-images-table" class="table table-striped">
<thead>
<tr>
<th>Image&nbsp;Name</th>
<th>Description</th>
<th>Format</th>
<th>Supported&nbsp;by</th>
<th>License</th>
<th>Image&nbsp;Name</th>
<th>Description</th>
<th>Format</th>
<th>Supported&nbsp;by</th>
<th>License</th>
</tr>
</thead>
</table>
</div>
</table>
</div>
</div>
</div>
<div id="heat-templates" class="content" style="display:none">
<div class="row filters">
<div class="col-md-6">
<form class="form-inline">
<div class="row filters">
<div class="col-md-6">
<form class="form-inline">
<div class="form-group">
<label>Supported by</label>
<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>
<label>Release</label>
<input type="hidden" id="heat-release"
style="width:10em" data-placeholder="Any release"/>
</div>
</form>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table id="heat-templates-table" class="table table-striped">
<div class="col-md-12">
<table id="heat-templates-table" class="table table-striped">
<thead>
<tr>
<th>Template&nbsp;Name</th>
<th>Description</th>
<th>Release</th>
<th>Format</th>
<th>Supported&nbsp;by</th>
<th>License</th>
<th>Template&nbsp;Name</th>
<th>Description</th>
<th>Release</th>
<th>Format</th>
<th>Supported&nbsp;by</th>
<th>License</th>
</tr>
</thead>
</table>
</div>
</table>
</div>
</div>
</div>
<div id="murano-apps" class="content" style="display:none">
<div class="row filters">
<div class="col-md-6">
<form class="form-inline">
<div class="row filters">
<div class="col-md-6">
<form class="form-inline">
<div class="form-group">
<label>Supported by</label>
<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>
<label>Release</label>
<input type="hidden" id="murano-release"
style="width:10em" data-placeholder="Any release"/>
</div>
</form>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table id="murano-apps-table" class="table table-striped">
<div class="col-md-12">
<table id="murano-apps-table" class="table table-striped">
<thead>
<tr>
<th>Package&nbsp;Name</th>
<th>Description</th>
<th>Release</th>
<th>Format</th>
<th>Supported&nbsp;by</th>
<th>License</th>
<th>Package&nbsp;Name</th>
<th>Description</th>
<th>Release</th>
<th>Format</th>
<th>Supported&nbsp;by</th>
<th>License</th>
</tr>
</thead>
</table>
</div>
</table>
</div>
</div>
</div>
@ -187,11 +282,11 @@
<div id="info-dialog" title="Details">
<div id="info-container"></div>
</div>
<div id="info-page" class="content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-12">
<div id="info-content"></div>
</div>
</div>
@ -206,16 +301,16 @@
<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="//cdn.jsdelivr.net/jquery.timeago/1.4.1/jquery.timeago.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.6.0/jquery.matchHeight-min.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="glance-images-info" type="text/x-jquery-tmpl">
<h2>${image_name} (${format})</h2>

60
openstack_catalog/web/static/css/theme.css

@ -1,6 +1,6 @@
h1, h2, h3, h4, h5, h6 {
font-family: "PT Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
body {
padding-top: 133px;
@ -46,7 +46,7 @@ a {
padding-bottom: 10px;
border-radius: 5px;
margin-right: 10px;
font-family: "PT Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
text-transform: uppercase;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.open>a {
@ -56,7 +56,7 @@ a {
}
.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;
color: #486278;
}
.filters #supported-by {
margin-right: 20px;
@ -97,8 +97,60 @@ a.details i {
padding: 2px 3px;
border-radius: 4px;
}
.bluebox .inner {
background-color: #edf2f7;
padding: 20px;
margin: 20px 0;
}
.bluebox h2 {
margin-top: 0;
color: #3597da;
font-size: 24px;
}
.bluebox img {
margin: 20px auto;
text-align: center;
}
.featured {
}
.featured .inner {
padding: 15px;
border: 1px #ccc solid;
border-radius: 4px;
text-align: center;
margin: 20px 0 ;
}
.featured img {
max-width: 100%;
margin-bottom: 10px;
}
.featured .inner p {
margin-bottom: 0;
font-size: .9em;
}
.featured h3 {
font-size: 18px;
text-transform: uppercase;
}
h1 {
color: #2A4E68;
font-weight: 300;
font-size: 28px;
}
.featured .glance {
background: url(../images/featured-corner-glance.png) no-repeat;
background-position: top right;
}
.featured .heat {
background: url(../images/featured-corner-heat.png) no-repeat;
background-position: top right;
}
.featured .murano {
background: url(../images/featured-corner-murano.png) no-repeat;
background-position: top right;
}
.navbar-fixed-top {
z-index: 0;
z-index: 1;
}
.dataTables_wrapper {
z-index: 0;

BIN
openstack_catalog/web/static/images/featured-corner-glance.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 1.4 KiB

BIN
openstack_catalog/web/static/images/featured-corner-heat.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 1.4 KiB

BIN
openstack_catalog/web/static/images/featured-corner-murano.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 1.7 KiB

BIN
openstack_catalog/web/static/images/logo-kubernetes.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 8.5 KiB

BIN
openstack_catalog/web/static/images/logo-lamp.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 8.2 KiB

BIN
openstack_catalog/web/static/images/logo-pivotal.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 12 KiB

BIN
openstack_catalog/web/static/images/logo-redis.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 8.6 KiB

BIN
openstack_catalog/web/static/images/logo-wordpress.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 7.8 KiB

9
openstack_catalog/web/static/js/apps-catalog.js

@ -194,12 +194,12 @@ function initTabs ()
if (selected_tab_name == null) {
selected_tab_name = tabs_list[0].children[0].hash.substring (1);
tabs_list[0].className = "active";
$( "#landing-page" ).show ();
} else {
$( ".content" ).hide ();
$( "#" + selected_tab_name ).show ();
}
$( ".content" ).hide ();
$( "#" + selected_tab_name ).show ();
$( "ul.nav > li > a" ).on("click", function (event) {
event.preventDefault();
});
@ -230,6 +230,7 @@ function show_asset (tab, tableData)
function initMarketPlace ()
{
initTabs ();
$( ".inner" ).matchHeight ();
$("#info-dialog").dialog({
autoOpen: false,