TOSCA web changes

Add TOSCA templates to the app-catalog web

Change-Id: I65639e39ec85f792d36645b86882723f4ecf7911
Partially-Implements: blueprint add-tosca-assets

openstack_catalog/templates/index.html

@@ -9,7 +9,7 @@
     <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
 
     <meta name="description" content="OpenStack market place" />
-    <meta name="keywords" content="openstack, glance images, heat templates, murano applications" />
+    <meta name="keywords" content="openstack, glance images, heat templates, murano applications, tosca templates, tosca csar" />
     <meta name="author" content="Mirantis on behalf of OpenStack Foundation" />
 
     <title>Community App Catalog</title>
@@ -73,6 +73,7 @@
               <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>
+              <li><a href="#tosca-templates">TOSCA Templates</a></li>
               <li><a href="#addContent">Add New Content</a></li>
             </ul>
           </div>
@@ -178,6 +179,26 @@
         </div>
       </div>
 
+      <div class="col-md-4 bluebox">
+        <div class="inner">
+              <a href="#tab=tosca-templates">
+            <h2>TOSCA Templates</h2>
+            <img src="static/images/tosca-diagram.png"
+                     class="text-center">
+              </a>
+          <p>
+                In TOSCA Templates you will find templates and Cloud Service Archive (CSAR). To use them:
+              </p>
+          <ol>
+                <li>Browse the list and find the one you want</li>
+                <li>Download the raw template file or CSAR to your local machine</li>
+                <li>Use the template or CSAR per your need</li>
+                <li>To deploy template with OpenStack Heat, provide the template or CSAR to the OpenStack <a href="http://docs.openstack.org/developer/heat-translator/usage.html" target="_blank">Heat-Translator</a> which will produce a Heat Orchestration Template (HOT) as an output.</li>
+                <li>To simply parse the template, use it with OpenStack <a href="http://docs.openstack.org/developer/tosca-parser/usage.html" target="_blank">TOSCA-Parser</a> project.</li>
+          </ol>
+        </div>
+      </div>
+
     </div>
 
     <div class="row">
@@ -287,6 +308,37 @@
 
       </div>
 
+      <div id="tosca-templates" class="content" style="display:none">
+
+    <div class="row">
+      <div class="col-md-6 filters">
+        <form class="form-inline">
+              <div class="form-group">
+        <label>Release</label>
+        <input type="hidden" id="tosca-release"
+               style="width:10em" data-placeholder="Any release"/>
+              </div>
+        </form>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-md-12">
+        <table id="tosca-templates-table" class="table table-striped">
+              <thead>
+        <tr>
+          <th>Template&nbsp;Name</th>
+          <th>Description</th>
+          <th>Release</th>
+          <th>Format</th>
+        </tr>
+              </thead>
+        </table>
+      </div>
+    </div>
+
+      </div>
+
       <div id="info-page" class="content">
     <div class="row">
       <div class="col-md-12">
@@ -437,6 +489,32 @@
       {{/if}}
 
     </script>
+
+    <script id="tosca-templates-info" type="text/x-jquery-tmpl">
+
+      <h2>${name} (${service['template_format']})</h2>
+      <div>
+      <span class="label">Last modified: </span><span class="value">${last_modified}</span>
+      </div>
+      {{if supported_by}}
+      <div><span class="label">Supported by</span> <span class="value">${supported_by.name}</span></div>
+      {{/if}}
+      <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>
+
+      {{if attributes }}
+      <h3>Attributes</h3>
+      {{each( key, value ) attributes }}
+      <div><span class="label">${key}:</span> <span class="value">${value}</span></div>
+      {{/each}}
+      {{/if}}
+
+    </script>
   </body>
 </html>
 {% endverbatim %}

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

@@ -199,6 +199,15 @@ function show_murano_apps ()
       filterData (murano_apps.assets, getUrlVars ()));
 }
 
+var tosca_templates = { assets: [] };
+
+function show_tosca_templates ()
+{
+  populate_table ("tosca-templates-table",
+      ["name_html", "description", "release_html", "service.template_format"],
+      filterData (tosca_templates.assets, getUrlVars ()));
+}
+
 function initTabs ()
 {
   $( "ul.nav > li > a" ).on("click", function (event) {
@@ -260,6 +269,9 @@ function build_recently_added ()
                (sorted_assets[i].service.type == 'bundle')) {
       divclass = "murano";
       hreftab = "#tab=murano-apps&asset=";
+    }else if (sorted_assets[i].service.type == 'tosca') {
+      divclass = "tosca";
+      hreftab = "#tab=tosca-templates&asset=";
     }
     $('.featured').append(
         $('<div>', {class: "col-md-2 col-sm-6"})
@@ -310,6 +322,8 @@ function initMarketPlace ()
             murano_apps.assets.push(asset);
             asset.service.format = 'bundle';
           }
+        }else if (asset.service.type == 'tosca') {
+          tosca_templates.assets.push(asset);
         }
       }
 
@@ -325,7 +339,10 @@ function initMarketPlace ()
 
       tableData = heat_templates.assets;
       for (var i = 0; i < tableData.length; i++) {
-        tableData[i].release_html = tableData[i].release.join (", ");
+        tableData[i].release_html = "";
+        if (tableData[i].release) {
+          tableData[i].release_html = tableData[i].release.join(", ");
+        }
         setupInfoHandler ("heat-templates", i, tableData[i]);
       }
 
@@ -336,7 +353,10 @@ function initMarketPlace ()
 
       tableData = murano_apps.assets;
       for (var i = 0; i < tableData.length; i++) {
-        tableData[i].release_html = tableData[i].release.join (", ");
+        tableData[i].release_html = "";
+        if (tableData[i].release) {
+          tableData[i].release_html = tableData[i].release.join(", ");
+        }
         setupInfoHandler ("murano-apps", i, tableData[i]);
       }
 
@@ -344,6 +364,20 @@ function initMarketPlace ()
       show_murano_apps ();
 
       initSingleSelector ("murano-release", "release", tableData, show_murano_apps);
+
+      tableData = tosca_templates.assets;
+      for (var i = 0; i < tableData.length; i++) {
+        tableData[i].release_html = "";
+        if (tableData[i].release) {
+          tableData[i].release_html = tableData[i].release.join(", ");
+        }
+        setupInfoHandler ("tosca-templates", i, tableData[i]);
+      }
+
+      show_asset ("tosca-templates", tableData);
+      show_tosca_templates ();
+
+      initSingleSelector ("tosca-release", "release", tableData, show_tosca_templates);
     });
 }
 
@@ -375,6 +409,7 @@ function navigate ()
     show_asset ("murano-apps", murano_apps.assets);
     show_asset ("heat-templates", heat_templates.assets);
     show_asset ("glance-images", glance_images.assets);
+    show_asset ("tosca-templates", tosca_templates.assets);
   } else {
     $( "#" + selected_tab_name ).show ();
   }