Merge pull request #249 from carlosms/version-ui

Show version in UI

Author: carlosms

docs/rest-api.md

@@ -337,3 +337,22 @@ curl -X POST \
     }
 }
 ```
+
+## GET /version
+
+Returns the current version of the server, gitbase, and bblfshd.
+
+```bash
+curl -X GET http://localhost:8080/version
+```
+
+```json
+{
+   "status" : 200,
+   "data" : {
+      "gitbase" : "8.0.11-undefined",
+      "bblfsh" : "v2.7.2",
+      "version" : "dev"
+   }
+}
+```

frontend/package.json

@@ -62,6 +62,9 @@
     },
     "/filter": {
       "target": "http://localhost:8080"
+    },
+    "/version": {
+      "target": "http://localhost:8080"
     }
   }
 }

frontend/src/App.js

@@ -45,6 +45,7 @@ class App extends Component {
       sql: '',
       results: new Map(),
       schema: undefined,
+      version: undefined,
       languages: [],
       history: [],
       lastResult: null,
@@ -246,6 +247,10 @@ AND refs.ref_name = 'HEAD'`
           this.loadSchema();
         }
 
+        if (!this.state.version) {
+          this.loadVersion();
+        }
+
         if (this.state.languages.length === 0) {
           this.loadLanguages();
         }
@@ -304,6 +309,19 @@ AND refs.ref_name = 'HEAD'`
       });
   }
 
+  loadVersion() {
+    api
+      .version()
+      .then(version => {
+        this.setState({ version });
+      })
+      .catch(msgArr => {
+        // left as console message for now, we don't have UI for errors
+        // eslint-disable-next-line no-console
+        console.error(`Error while loading version: ${msgArr}`);
+      });
+  }
+
   handleModalClose() {
     this.setState({ showModal: false, modalTitle: null, modalContent: null });
   }
@@ -330,6 +348,7 @@ AND refs.ref_name = 'HEAD'`
       .then(languages => this.setState({ languages }))
       .catch(err =>
         // we don't have UI for this error
+        // eslint-disable-next-line no-console
         console.error(`Can't get list of languages from bblfsh: ${err}`)
       );
   }
@@ -338,6 +357,7 @@ AND refs.ref_name = 'HEAD'`
     this.setState(loadStateFromStorage());
     this.loadSchema();
     this.loadLanguages();
+    this.loadVersion();
     this.handleExampleClick(this.exampleQueries[0].sql);
   }
 
@@ -414,6 +434,7 @@ AND refs.ref_name = 'HEAD'`
           <Row className="main-row full-height">
             <Sidebar
               schema={this.state.schema}
+              version={this.state.version}
               onTableClick={this.handleTableClick}
               onExampleClick={this.handleExampleClick}
               exampleQueries={this.exampleQueries}

frontend/src/api.js

@@ -166,12 +166,17 @@ function filterUAST(protobufs, filter) {
   }).then(res => res.data);
 }
 
+function version() {
+  return apiCall(`/version`).then(res => res.data);
+}
+
 export default {
   query,
   schema,
   queryExport,
   detectLang,
   parseCode,
   getLanguages,
-  filterUAST
+  filterUAST,
+  version
 };

frontend/src/components/Sidebar.js

@@ -20,19 +20,26 @@ class Sidebar extends Component {
     this.setState({ collapsed: !this.state.collapsed });
   }
 
-  link(text, url) {
+  link(text, url, version) {
     return (
       <div>
         <a href={url} target="_blank" rel="noopener noreferrer">
           <LinkIcon className="small-icon" />
           {text}
         </a>
+        {version && <span className="version">{version}</span>}
       </div>
     );
   }
 
   render() {
-    const { schema, onTableClick, onExampleClick, exampleQueries } = this.props;
+    const {
+      schema,
+      version,
+      onTableClick,
+      onExampleClick,
+      exampleQueries
+    } = this.props;
     const { collapsed } = this.state;
 
     return (
@@ -57,7 +64,21 @@ class Sidebar extends Component {
         </div>
         <div className="footer list">
           {this.link('go-git', 'https://github.com/src-d/go-git')}
-          {this.link('babelfish', 'https://doc.bblf.sh')}
+          {this.link(
+            'babelfish',
+            'https://doc.bblf.sh',
+            version ? version.bblfsh : ''
+          )}
+          {this.link(
+            'gitbase',
+            'https://docs.sourced.tech/gitbase',
+            version ? version.gitbase : ''
+          )}
+          {this.link(
+            'gitbase-web',
+            'https://github.com/src-d/gitbase-web',
+            version ? version.version : ''
+          )}
           {this.link('source{d} © 2018', 'https://sourced.tech')}
         </div>
       </div>
@@ -67,6 +88,11 @@ class Sidebar extends Component {
 
 Sidebar.propTypes = {
   schema: Schema.propTypes.schema,
+  version: PropTypes.shape({
+    version: PropTypes.string.isRequired,
+    bblfsh: PropTypes.string.isRequired,
+    gitbase: PropTypes.string.isRequired
+  }),
   onTableClick: PropTypes.func,
   onExampleClick: PropTypes.func,
   exampleQueries: SampleQueries.propTypes.exampleQueries

frontend/src/components/Sidebar.less

@@ -52,12 +52,16 @@
     }
 
     .footer {
-        font-weight: @bold-font-weight;
         padding-left: @big-spacing;
 
         a {
+            font-weight: @bold-font-weight;
             .icon-container-variant(@primary-tint-2);
         }
+
+        .version {
+            padding-left: 1.5ex;
+        }
     }
 
     .SplitPane {