Bug 931, Bug 910 - Enhance Restconf Swagger Documentation
[controller.git] / opendaylight / md-sal / sal-rest-docgen / src / main / resources / explorer / index.html
index b8f67750c369e819bae4352b17713b10a7d3bdbf..2816f79e2413a90afc4125346a1a64804658a548 100644 (file)
 <!DOCTYPE html>\r
 <html>\r
 <head>\r
-  <title>Swagger UI</title>\r
-  <link href='//fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'/>\r
-  <link href='css/highlight.default.css' media='screen' rel='stylesheet' type='text/css'/>\r
-  <link href='css/screen.css' media='screen' rel='stylesheet' type='text/css'/>\r
-  <script type="text/javascript" src="lib/shred.bundle.js" /></script>  \r
-  <script src='lib/jquery-1.8.0.min.js' type='text/javascript'></script>\r
-  <script src='lib/jquery.slideto.min.js' type='text/javascript'></script>\r
-  <script src='lib/jquery.wiggle.min.js' type='text/javascript'></script>\r
-  <script src='lib/jquery.ba-bbq.min.js' type='text/javascript'></script>\r
-  <script src='lib/handlebars-1.0.0.js' type='text/javascript'></script>\r
-  <script src='lib/underscore-min.js' type='text/javascript'></script>\r
-  <script src='lib/backbone-min.js' type='text/javascript'></script>\r
-  <script src='lib/swagger.js' type='text/javascript'></script>\r
-  <script src='swagger-ui.js' type='text/javascript'></script>\r
-  <script src='lib/highlight.7.3.pack.js' type='text/javascript'></script>\r
-  <script type="text/javascript">\r
-    $(function () {\r
-      window.swaggerUi = new SwaggerUi({\r
-      url: "http://localhost:8080/apidoc/apis",\r
-      dom_id: "swagger-ui-container",\r
-      supportedSubmitMethods: ['get', 'post', 'put', 'delete'],\r
-      onComplete: function(swaggerApi, swaggerUi){\r
-        if(console) {\r
-          console.log("Loaded SwaggerUI")\r
-        }\r
-        $('pre code').each(function(i, e) {hljs.highlightBlock(e)});\r
-      },\r
-      onFailure: function(data) {\r
-        if(console) {\r
-          console.log("Unable to Load SwaggerUI");\r
-          console.log(data);\r
-        }\r
-      },\r
-      docExpansion: "none"\r
-    });\r
+<title>RestConf Documentation</title>\r
+<link href='//fonts.googleapis.com/css?family=Droid+Sans:400,700'\r
+       rel='stylesheet' type='text/css' />\r
+<link href='css/highlight.default.css' media='screen' rel='stylesheet'\r
+       type='text/css' />\r
+<link href='css/screen.css' media='screen' rel='stylesheet'\r
+       type='text/css' />\r
+<link rel="stylesheet" type="text/css" href="/css/opendaylight.css">\r
+<link rel="stylesheet" type="text/css"\r
+       href="css/ui-lightness/jquery-ui-1.10.4.custom.min.css">\r
+<script type="text/javascript" src="lib/shred.bundle.js"></script>\r
+<script src='lib/jquery-1.8.0.min.js' type='text/javascript'></script>\r
+<script src='lib/jquery-ui-1.11.0.min.js' type="text/javascript"></script>\r
+<script src='lib/jquery.slideto.min.js' type='text/javascript'></script>\r
+<script src='lib/jquery.wiggle.min.js' type='text/javascript'></script>\r
+<script src='lib/jquery.ba-bbq.min.js' type='text/javascript'></script>\r
+<script src='lib/handlebars-1.0.0.js' type='text/javascript'></script>\r
+<script src='lib/underscore-min.js' type='text/javascript'></script>\r
+<script src='lib/backbone-min.js' type='text/javascript'></script>\r
+<script src='lib/swagger.js' type='text/javascript'></script>\r
+<script src='swagger-ui.js' type='text/javascript'></script>\r
+<script src='lib/odl/list_mounts.js' type='text/javascript'></script>\r
+<script src='lib/highlight.7.3.pack.js' type='text/javascript'></script>\r
+<script src='lib/odl/rest-tree.js' type='text/javascript'></script>\r
+<script src='lib/odl/swagger.js' type='text/javascript'></script>\r
 \r
-    $('#input_apiKey').change(function() {\r
-      var key = $('#input_apiKey')[0].value;\r
-      console.log("key: " + key);\r
-      if(key && key.trim() != "") {\r
-        console.log("added key " + key);\r
-        window.authorizations.add("key", new ApiKeyAuthorization("api_key", key, "query"));\r
-      }\r
-    })\r
-    window.swaggerUi.load();\r
-  });\r
+<script type="text/javascript">\r
+       \r
+       //reloads the swagger UI documentation for the specified mount.\r
+       var loadMount = function(mountIndex, mountPath) {\r
+               $("#message").empty();\r
+               $("#message").append( "<p>Loading...</p>" );\r
+               loadSwagger("http://localhost:8080/apidoc/apis/mounts/" + mountIndex,\r
+                               "swagger-ui-container");\r
+               $("#message").empty();\r
+               $("#message").append( "<h2><b>Showing mount points for " + mountPath + "</b></h2>");\r
+       }\r
 \r
-  </script>\r
+       //clears the swagger UI and adds text prompting use to select a mount point.\r
+    var selectAMount = function(string) {\r
+        $("#swagger-ui-container").empty();\r
+        $("#message").empty();\r
+        $("#message").append("<p>Select a mount point.</p>");\r
+    }\r
+    \r
+       //loads the root swagger documenation (which comes from RestConf)\r
+       var loadRootSwagger = function() {\r
+               $("#message").empty();\r
+               loadSwagger("http://localhost:8080/apidoc/apis", "swagger-ui-container");\r
+       }\r
+\r
+       //main method to initialize the mount list / swagger docs / tabs on page load\r
+       $(function() {\r
+               $("#tabs").tabs();\r
+\r
+               loadMountList($("#mountlist"));\r
+\r
+               loadRootSwagger();\r
+       });\r
+</script>\r
 </head>\r
 \r
 <body>\r
-<div id='header'>\r
-  <div class="swagger-ui-wrap">\r
-    <a id="logo" href="http://swagger.wordnik.com">swagger</a>\r
-\r
-    <form id='api_selector'>\r
-      <div class='input icon-btn'>\r
-        <img id="show-pet-store-icon" src="images/pet_store_api.png" title="Show Swagger Petstore Example Apis">\r
-      </div>\r
-      <div class='input icon-btn'>\r
-        <img id="show-wordnik-dev-icon" src="images/wordnik_api.png" title="Show Wordnik Developer Apis">\r
-      </div>\r
-      <div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text"/></div>\r
-      <div class='input'><input placeholder="api_key" id="input_apiKey" name="apiKey" type="text"/></div>\r
-      <div class='input'><a id="explore" href="#">Explore</a></div>\r
-    </form>\r
-  </div>\r
-</div>\r
+       <div>\r
+               <!-- style="background-color: #FCA000;" -->\r
+               <div class="swagger-ui-wrap ui-tabs">\r
+                       <table>\r
+                               <tr>\r
+                                       <td><img src="images/logo_small.png" /></td>\r
+                                       <td><h1 width="100%">OpenDaylight RestConf API\r
+                                                       Documentation</h1></td>\r
+                               </tr>\r
+                       </table>\r
+               </div>\r
+       </div>\r
 \r
-<div id="message-bar" class="swagger-ui-wrap">\r
-  &nbsp;\r
-</div>\r
+       <div class="navbar-inner">\r
+               <div class="brand"></div>\r
+       </div>\r
 \r
-<div id="swagger-ui-container" class="swagger-ui-wrap">\r
+    <!--  defines the div shells which represent the jquery tabs -->\r
+       <div id="tabs" class="swagger-ui-wrap">\r
+               <ul>\r
+                       <li><a href="#Controller" onclick="loadRootSwagger()">Controller\r
+                                       Resources</a></li>\r
+                       <li><a href="#Mounts" onclick="selectAMount()">Mounted\r
+                                       Resources</a></li>\r
+               </ul>\r
 \r
-</div>\r
+               <div id="Controller">\r
+                       <div>\r
+                               <h3>Below are the list of APIs supported by the Controller.</h3>\r
+                       </div>\r
+               </div>\r
+               <div id="Mounts">\r
+                       <div>\r
+                               <h3>Mount Points - Select an API below for details on available\r
+                                       queries.</h3>\r
+                       </div>\r
+                       <div id="mountlist"></div>\r
+               </div>\r
+       </div>\r
+       \r
+       <div class="swagger-ui-wrap"><hr/></div>\r
+       \r
+       <!-- messages -->\r
+       <div id="message" class="swagger-ui-wrap"></div>\r
+       \r
+       <!-- the swagger is always loaded in this div -->\r
+       <div id="swagger-ui-container" class="swagger-ui-wrap"></div>\r
 \r
+       <div id="message-bar" class="swagger-ui-wrap">&nbsp;</div>\r
 </body>\r
 \r
 </html>\r