Merge branch 'swagger-ui-react' into 'master'

Embed Swagger UI into VILLASweb React App

See merge request acs/public/villas/web!72

package.json

@@ -57,6 +57,7 @@
     "react-trafficlight": "^5.2.1",
     "sass": "^1.29.0",
     "superagent": "^6.1.0",
+    "swagger-ui-react": "^3.42.0",
     "ts-node": "^9.0.0",
     "type-fest": "^0.13.1",
     "typescript": "^4.1.2",

src/app.js

@@ -38,6 +38,7 @@ import Scenarios from './scenario/scenarios';
 import Scenario from './scenario/scenario';
 import Users from './user/users';
 import User from './user/user';
+import APIBrowser from './common/api-browser';
 
 import './styles/app.css';
 
@@ -117,6 +118,7 @@ class App extends React.Component {
                 <Route path="/infrastructure" component={InfrastructureComponents} />
                 <Route path="/account" component={User} />
                 <Route path="/users" component={Users} />
+                <Route path="/api" component={APIBrowser} />
               </div>
             </div>
 

src/common/api-browser.js

@@ -0,0 +1,82 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import React from 'react';
+
+import SwaggerUI from 'swagger-ui-react'
+import 'swagger-ui-react/swagger-ui.css'
+import '../styles/swagger-ui.css';
+import RestAPI from './api/rest-api';
+import RestDataManager from './data-managers/rest-data-manager';
+
+class APIBrowser extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      'spec': null
+    };
+  }
+
+  mangleSpec(spec) {
+    spec.host = window.location.host;
+
+    return spec;
+  }
+
+  componentWillMount() {
+    this._asyncRequest = RestAPI.get('/api/v2/openapi')
+      .then((spec) => {
+        this._asyncRequest = null;
+
+        this.setState({
+          'spec': this.mangleSpec(spec)
+        });
+      });
+  }
+
+  componentWillUnmount() {
+    if (this._asyncRequest) {
+      this._asyncRequest.cancel();
+    }
+  }
+
+  requestInterceptor(req) {
+    var token = localStorage.getItem('token');
+
+    if (token)
+      req.headers.Authorization = 'Bearer ' + token;
+
+    return req
+  }
+
+  render() {
+    return (
+      <div>
+        { this.state.spec &&
+        <SwaggerUI
+          spec={this.state.spec}
+          tryItOutEnabled={true}
+          requestInterceptor={this.requestInterceptor}
+        /> }
+      </div>
+    );
+  }
+}
+
+export default APIBrowser;

src/common/home.js

@@ -18,28 +18,10 @@
 import React from 'react';
 
 import config from '../config';
-import {Redirect} from "react-router-dom";
+import { Redirect } from "react-router-dom";
+import { NavLink } from 'react-router-dom';
 
 class Home extends React.Component {
-  constructor(props) {
-    super(props);
-
-    // create url for API documentation, distinguish between localhost and production deployment
-    let docs_url = "";
-    let docs_location = "/swagger/index.html";
-    let base_url = window.location.origin;
-    if (base_url.search("localhost") === -1){
-      docs_url = base_url + docs_location;
-    } else {
-      // useful for local testing, replace port 3000 with port 4000 (port of backend)
-      docs_url = base_url.replace("3000", "4000") + docs_location;
-    }
-
-    this.state = {
-      docs_url: docs_url
-    };
-
-  }
 
   getCounts(type) {
     if (this.state.hasOwnProperty('counts'))
@@ -68,10 +50,9 @@ class Home extends React.Component {
         </p>
 
         <p>
-          An interactive documentation of the VILLASweb API is available <a href={this.state.docs_url} target="_blank" rel="noopener noreferrer">here</a>.
+          An interactive documentation of the VILLASweb API is available <NavLink to="/api">here</NavLink>.
         </p>
 
-
         <h3>Data Model</h3>
         <img height={400} src={require('../img/datamodel.png').default} alt="Datamodel VILLASweb" />
 
@@ -103,8 +84,6 @@ class Home extends React.Component {
             <li>Users can have access to multiple scenarios</li>
           </ul>
 
-
-
         <h3>Credits</h3>
         <p>VILLASweb is developed by the <a href="http://acs.eonerc.rwth-aachen.de">Institute for Automation of Complex Power Systems</a> at the <a href="https;//www.rwth-aachen.de">RWTH Aachen University</a>.</p>
         <ul>

src/common/menu-sidebar.js

@@ -33,6 +33,7 @@ class SidebarMenu extends React.Component {
           }
           <li><NavLink to="/account" title="Account">Account</NavLink></li>
           <li><NavLink to="/logout" title="Logout">Logout</NavLink></li>
+          <li><NavLink to="/api" title="API Browser">API Browser</NavLink></li>
         </ul>
       </div>
     );

src/styles/swagger-ui.css

@@ -0,0 +1,3 @@
+.swagger-ui div.scheme-container {
+	display: none
+}

src/user/login-form.js

@@ -70,14 +70,14 @@ class LoginForm extends Component {
         <FormGroup controlId="username">
           <FormLabel column={true}>Username</FormLabel>
           <Col>
-            <FormControl type="text" placeholder="Username" onChange={(e) => this.handleChange(e)} />
+            <FormControl type="text" placeholder="Username" autoComplete="username" onChange={(e) => this.handleChange(e)} />
           </Col>
         </FormGroup>
 
         <FormGroup controlId="password">
           <FormLabel column={true}>Password</FormLabel>
           <Col >
-            <FormControl type="password" placeholder="Password" onChange={(e) => this.handleChange(e)} />
+            <FormControl type="password" placeholder="Password" autoComplete="current-password" onChange={(e) => this.handleChange(e)} />
           </Col>
         </FormGroup>
 
@@ -95,11 +95,11 @@ class LoginForm extends Component {
             <Button variant="link" size="sm" style={{marginLeft: 85}} onClick={() => this.openRecoverPassword()}>Forgot your password?</Button>
           </Col>
         </FormGroup>
-        
+
         <RecoverPassword show={this.state.forgottenPassword} onClose={() => this.closeRecoverPassword()} sessionToken={this.props.sessionToken} />
 
       </Form>
-      
+
     );
   }
 }

src/user/recover-password.js

@@ -17,7 +17,7 @@
 
 import React from 'react';
 import Dialog from '../common/dialogs/dialog';
-import Config from '../config.js';
+import Config from '../config';
 
 
 class RecoverPassword extends React.Component {
@@ -29,13 +29,10 @@ class RecoverPassword extends React.Component {
     }
   }
 
-
   onClose() {
       this.props.onClose();
   }
 
-
-
   render() {
     return (
       <Dialog show={this.props.show} title="Recover password" buttonTitle="Close" onClose={(c) => this.onClose(c)} blendOutCancel = {true} valid={true} size = 'lg'>
@@ -43,7 +40,7 @@ class RecoverPassword extends React.Component {
         <div>Please contact:</div>
         <div>{this.state.admin.name}</div>
         <div>E-Mail:</div>
-        <a href={`mailto:${this.state.admin.mail}`}>{this.state.admin.mail}</a>          
+        <a href={`mailto:${this.state.admin.mail}`}>{this.state.admin.mail}</a>
       </div>
       </Dialog>
     );