Merge pull request #160 from maeisabelle/75-SwaggerUIForHubAPIs

75 - Swagger UI to browse the Hub APIs

Author: paxtonhare

quick-start/build.gradle

@@ -33,6 +33,8 @@ dependencies {
     compile('org.springframework.boot:spring-boot-starter')
     compile('org.springframework.boot:spring-boot-starter-web')
     compile project(':marklogic-data-hub')
+    compile('io.springfox:springfox-swagger2:2.4.0')
+    compile('org.webjars.bower:angular-swagger-ui:0.3.1')
     providedRuntime('org.springframework.boot:spring-boot-starter-tomcat')
     testCompile('junit:junit')
 }

quick-start/src/main/java/com/marklogic/hub/Application.java

@@ -17,9 +17,11 @@
 
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
-import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
 import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
 
+import springfox.documentation.swagger2.annotations.EnableSwagger2;
+
+@EnableSwagger2
 @SpringBootApplication
 public class Application extends WebMvcConfigurerAdapter {
 

quick-start/src/main/resources/static/app/directives/header.html

@@ -1,7 +1,10 @@
 <div id="header" class="container-fluid">
   <div class="row">
     <div class="col-xs-6 col-sm-6 col-md-6 logo">
-      <img id="img_logo" src="images/logo.svg">
+      <div class="row">
+         <div class="col-xs-11 col-sm-11 col-md-11"><img id="img_logo" src="images/logo.svg" align="left"></div>
+         <div class="col-xs-1 col-sm-1 col-md-1"><i class="fa fa-question-circle" ng-click="showApiDoc()"></i></div>
+      </div>
     </div>
     <div id="sitemenu" class="col-xs-6 col-sm-6 col-md-6 dropdown" ng-if="status != null">
       <button type="submit" name="installUserModules" class="btn btn-primary" ng-if="status.installed" ng-click="installUserModules()" ng-disabled="action.type != null">Deploy to server</button>

quick-start/src/main/resources/static/app/directives/headerDirective.js

@@ -48,6 +48,11 @@
             scope.action.type = null;
           });
         };
+        
+        scope.showApiDoc = function() {
+        	DataHub.showApiDoc();
+        };
+        
       }
     };
   }

quick-start/src/main/resources/static/app/quickStartApp.js

@@ -6,6 +6,7 @@
     'ngRoute',
     'dhib.quickstart.controller.login',
     'dhib.quickstart.controller.top',
+    'dhib.quickstart.controller.api.doc',
     'dhib.quickstart.directives.header',
     'dhib.quickstart.directives.footer',
     'dhib.quickstart.directives.spinner',
@@ -14,8 +15,10 @@
     'ngAnimate',
     'ui.bootstrap',
     'ngMaterial',
-    'treeControl'
+    'treeControl',
     //'angucomplete-alt'
+    'ngSanitize',
+    'swaggerUi'
   ];
   angular.module('quickStartApp', dependencies)
     .factory('$exceptionHandler', ExceptionHandler)
@@ -98,6 +101,10 @@
     .when('/dismiss', {
       //do nothing
     })
+    .when('/api-doc', {
+    	templateUrl: 'doc/apiDoc.html',
+    	controller: 'apiDocController'
+    })
     .otherwise({
       redirectTo: '/login'
     });

quick-start/src/main/resources/static/app/services/dataHubService.js

@@ -6,7 +6,7 @@
     .service('DataHub', DataHubService)
     .service('TaskManager', TaskManagerService);
 
-  function DataHubService($http, $q, $route, $rootScope) {
+  function DataHubService($http, $q, $route, $rootScope, $window) {
     var self = this;
 
     angular.extend(self, {
@@ -29,7 +29,8 @@
       testFlow: testFlow,
       saveFlow: saveFlow,
       displayMessage: displayMessage,
-      searchPath: searchPath
+      searchPath: searchPath,
+      showApiDoc: showApiDoc
     });
 
     function login(loginForm) {
@@ -193,6 +194,11 @@
       $rootScope.notificationBar.message = message;
       $rootScope.notificationBar.show = true;
     }
+    
+    function showApiDoc() {
+    	$window.open('#/api-doc', '_blank');
+    }
+    
   }
 
   function TaskManagerService($http, $q, $route) {

quick-start/src/main/resources/static/css/quick-start.css

@@ -23,8 +23,13 @@ ul {
 div#header {
     background-color: #fff;
     padding: 15px 15px;
+    color: #2a2d2b;
+}
+
+button, div#header button {
     color: #ffffff;
 }
+
 .btn, div#header .btn, div#content div#sidebar .btn, ul.dropdown-menu {
     font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
     font-size: 24px;
@@ -264,3 +269,15 @@ ul.nav.abn-tree i {
 .fade.ng-leave.ng-leave-active {
   opacity:0;
 }
+
+/* This is specifically for Swagger UI */
+
+.swagger-validator {
+    display: none;
+}
+
+div.api-doc > div {
+    padding: 15px;
+}
+
+

quick-start/src/main/resources/static/doc/apiDoc.html

@@ -0,0 +1,21 @@
+<div id="header" class="container-fluid">
+  <div class="row">
+    <div class="col-xs-6 col-sm-6 col-md-6 logo">
+      <div class="row">
+         <div class="col-xs-11 col-sm-11 col-md-11"><img id="img_logo" src="images/logo.svg" align="left"></div>
+      </div>
+    </div>
+    <div class="col-xs-6 col-sm-6 col-md-6"></div>
+  </div>
+  <notification></notification>
+</div>
+<div class="divider"></div>
+<spinner></spinner>
+<div id="content" class="container-fluid api-doc">
+  <div class="row">
+    <div class="col-xs-12">
+      <div swagger-ui url="swaggerUrl" loading="loading" parser="json" api-explorer="true"  error-handler="myErrorHandler"></div>
+    </div>
+  </div>
+</div>
+<footer></footer>

quick-start/src/main/resources/static/doc/apiDocController.js

@@ -0,0 +1,21 @@
+(function () {
+
+  'use strict';
+
+  var dependencies = [];
+
+  angular.module('dhib.quickstart.controller.api.doc', dependencies)
+    .controller('apiDocController', ApiDocController);
+
+  function ApiDocController($scope) {
+    
+    $scope.loading = false;
+    $scope.url = $scope.swaggerUrl = 'v2/api-docs';
+    $scope.myErrorHandler = function (data, status) {
+        alert('Failed to load swagger: ' + status + '   ' + data);
+    };
+    $scope.infos = false;
+  }
+
+
+})();

quick-start/src/main/resources/static/index.html

@@ -17,6 +17,7 @@
   <script src="lib/angular.js/js/ui-bootstrap-tpls-1.2.4.js"></script>
   <script src="lib/angular.js/js/angular-aria.min.js"></script>
   <script src="lib/angular.js/js/angular-material.min.js"></script>
+  <script src="lib/angular.js/js/angular-sanitize.min.js"></script>
 
   <!-- tree control -->
   <script type="text/javascript" src="lib/angular-tree-control/angular-tree-control.js"></script>
@@ -31,6 +32,9 @@
   <!-- Bootstrap -->
   <script src="lib/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
   <script src="lib/abn_tree/js/abn_tree_directive.js"></script>
+  
+  <!-- angular-swagger-ui JS -->
+  <script src="webjars/angular-swagger-ui/0.3.1/dist/scripts/swagger-ui.min.js"></script>
 
   <!-- App-Specific JS -->
   <script src="app/quickStartApp.js"></script>
@@ -44,12 +48,16 @@
 
   <script src="login/loginController.js"></script>
   <script src="top/topController.js"></script>
+  <script src="doc/apiDocController.js"></script>
 
   <!-- Bootstrap CSS -->
   <link href="lib/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet"></link>
   <link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet"></link>
   <link href="lib/abn_tree/css/abn_tree.css" rel="stylesheet"></link>
   <link href="lib/angular.js/css/angular-material.min.css" rel="stylesheet"></link>
+  
+  <!-- angular-swagger-ui CSS -->
+  <link href="webjars/angular-swagger-ui/0.3.1/dist/css/swagger-ui.min.css" rel="stylesheet" >
 
   <!-- App-Specific CSS -->
   <link href="css/quick-start.css" rel="stylesheet"></link>