Improve admin ui (#75)

* Improving the admin ui * Adding unified ui, mysql dependency in pom
lyft · Sep 25, 2019 · 2135fb6 · 2135fb6
1 parent cbdfc1c
commit 2135fb6
Show file tree

Hide file tree

Showing 15 changed files with 217 additions and 103 deletions.
diff --git a/README.md b/README.md
@@ -2,31 +2,8 @@
 
 A load balancer / proxy / gateway for presto compute engine.
 
-## Getting started
-
-
-### Build and run
-run `mvn clean install` to build `presto-gateway`
-
-Edit the [config file](/gateway-ha/gateway-ha-config.yml) and update the mysql db information.
-
-```
-cd gateway-ha/target/
-java -jar gateway-ha-{{VERSION}}-jar-with-dependencies.jar server ../gateway-ha-config.yml
-```
-Now you can access load balanced presto at localhost:8080 port. We will refer to this as `prestogateway.lyft.com`
-
-### Query History UI - check query plans etc.
-PrestoGateway records history of recent queries and displays links to check query details page in respective presto cluster.  
-![prestogateway.lyft.com](/docs/assets/prestogateway_query_history.png) 
-
-### Gateway Admin UI - add and modify backend information
-The Gateway admin page is used to configure the gateway to multiple backends. Existing backend information can also be modified using the same.
-![prestogateway.lyft.com/entity](/docs/assets/prestogateway_ha_admin.png) 
-
 How to setup a dev environment
-----------------------------
-
+------------------------------
 Step 1: setup mysql. Install docker and run the below command when setting up first time:
 ```$xslt
 docker run -d -p 3306:3306  --name mysqldb -e MYSQL_ROOT_PASSWORD=root123 -e MYSQL_DATABASE=prestogateway -d mysql:5.7
@@ -50,7 +27,17 @@ Step 3: Add below program argument to class `HaGatewayLauncher` and debug in IDE
 ```$xslt
 server /path/to/gateway-ha/src/test/resources/config-template.yml
 ``` 
+### Build and run
+run `mvn clean install` to build `presto-gateway`
+
+Edit the [config file](/gateway-ha/gateway-ha-config.yml) and update the mysql db information.
 
+```
+cd gateway-ha/target/
+java -jar gateway-ha-{{VERSION}}-jar-with-dependencies.jar server ../gateway-ha-config.yml
+```
+Now you can access load balanced presto at localhost:8080 port. We will refer to this as `prestogateway.lyft.com`
+
 ## Gateway API
 
 ### Add or update a backend
@@ -111,6 +98,14 @@ curl -X POST http://localhost:8080/gateway/backend/deactivate/presto2
 `curl -X POST http://localhost:8080/gateway/backend/activate/presto2`
 
 
+### Query History UI - check query plans etc.
+PrestoGateway records history of recent queries and displays links to check query details page in respective presto cluster.  
+![prestogateway.lyft.com](/docs/assets/prestogateway_query_history.png) 
+
+### Gateway Admin UI - add and modify backend information
+The Gateway admin page is used to configure the gateway to multiple backends. Existing backend information can also be modified using the same.
+![prestogateway.lyft.com/entity](/docs/assets/prestogateway_ha_admin.png) 
+
 ## Contributing
 
 Want to help build Presto Gateway? Check out our [contributing documentation](CONTRIBUTING.md)
diff --git a/baseapp/pom.xml b/baseapp/pom.xml
@@ -7,7 +7,7 @@
     <parent>
         <groupId>com.lyft.data</groupId>
         <artifactId>prestogateway-parent</artifactId>
-        <version>1.6.3</version>
+        <version>1.6.4</version>
         <relativePath>../</relativePath>
     </parent>
 

diff --git a/gateway-ha/pom.xml b/gateway-ha/pom.xml
@@ -8,7 +8,7 @@
     <parent>
         <groupId>com.lyft.data</groupId>
         <artifactId>prestogateway-parent</artifactId>
-        <version>1.6.3</version>
+        <version>1.6.4</version>
         <relativePath>../</relativePath>
     </parent>
 
@@ -95,6 +95,11 @@
             <artifactId>ehcache</artifactId>
             <version>${ehcache.version}</version>
         </dependency>
+        <dependency>
+            <groupId>mysql</groupId>
+            <artifactId>mysql-connector-java</artifactId>
+            <version>8.0.17</version>
+        </dependency>
         <!-- Test deps -->
         <dependency>
             <groupId>org.testng</groupId>

diff --git a/gateway-ha/src/main/java/com/lyft/data/gateway/ha/resource/GatewayViewResource.java b/gateway-ha/src/main/java/com/lyft/data/gateway/ha/resource/GatewayViewResource.java
@@ -26,7 +26,23 @@ public class GatewayViewResource {
 
   @GET
   @Produces(MediaType.TEXT_HTML)
-  public GatewayView getAdminUi() {
+  public GatewayView getQueryDetailsView() {
+    GatewayView queryHistoryView = new GatewayView("/template/query-history-view.ftl");
+    // Get All active backends
+    queryHistoryView.setBackendConfigurations(
+        gatewayBackendManager.getAllBackends().stream()
+            .filter(ProxyBackendConfiguration::isActive)
+            .collect(Collectors.toList()));
+
+    queryHistoryView.setQueryHistory(queryHistoryManager.fetchQueryHistory());
+    queryHistoryView.setQueryDistribution(getQueryHistoryDistribution());
+    return queryHistoryView;
+  }
+
+  @GET
+  @Produces(MediaType.TEXT_HTML)
+  @Path("viewgateway")
+  public GatewayView getGatewayView() {
     GatewayView gatewayView = new GatewayView("/template/gateway-view.ftl");
     // Get All active backends
     gatewayView.setBackendConfigurations(

diff --git a/gateway-ha/src/main/java/com/lyft/data/gateway/ha/resource/HaGatewayResource.java b/gateway-ha/src/main/java/com/lyft/data/gateway/ha/resource/HaGatewayResource.java
@@ -24,16 +24,14 @@ public class HaGatewayResource {
   @Path("/add")
   @POST
   public Response addBackend(ProxyBackendConfiguration backend) {
-    ProxyBackendConfiguration updatedBackend =
-        ((HaGatewayManager) haGatewayManager).addBackend(backend);
+    ProxyBackendConfiguration updatedBackend = haGatewayManager.addBackend(backend);
     return Response.ok(updatedBackend).build();
   }
 
   @Path("/update")
   @POST
   public Response updateBackend(ProxyBackendConfiguration backend) {
-    ProxyBackendConfiguration updatedBackend =
-        ((HaGatewayManager) haGatewayManager).updateBackend(backend);
+    ProxyBackendConfiguration updatedBackend = haGatewayManager.updateBackend(backend);
     return Response.ok(updatedBackend).build();
   }
 

diff --git a/gateway-ha/src/main/resources/assets/css/common.css b/gateway-ha/src/main/resources/assets/css/common.css
@@ -0,0 +1,28 @@
+.tablink:hover {
+    background-color: #777;
+}
+
+.tablink {
+    background-color: #555;
+    color: white;
+    float: left;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: 14px 16px;
+    font-size: 17px;
+    width: 25%;
+}
+
+
+.tabcontent {
+    padding: 70px 20px;
+    height: 100%;
+}
+
+
+body, html {
+    height: 100%;
+    margin: 0;
+    font-family: Arial;
+}
diff --git a/gateway-ha/src/main/resources/assets/js/entity-editor.js b/gateway-ha/src/main/resources/assets/js/entity-editor.js
@@ -30,8 +30,8 @@ function renderConfigSelector() {
     var html = "<table><tr><td>Select config type</td><td><select name='entityTypeSelector' id='entityTypeSelector' onchange='renderEntitySelector()'></select></td></tr>"
         + "<tr><td>Select entity to edit</td><td><select name='entitySelector' id='entitySelector' onchange='renderEntityEditor()'></select></td></tr>"
         + "</table>" + "<div id='entityEditorDiv'>"
-        + "<table><tr><td><div id='entityDetails' style='width: 700px; height: 500px;'></div></td>"
-        + "<td><div id='entityDetailsTextArea' style='width: 700px; height: 500px;'></div></td></tr></table>"
+        + "<table><tr><td><div id='entityDetails' style='width: 600px; height: 400px;'></div></td>"
+        + "<td><div id='entityDetailsTextArea' style='width: 600px; height: 400px;'></div></td></tr></table>"
         + "</div> <div id='entityEditorBottom'></div>";
 
     $("#entity-editor-place-holder").html(html);

diff --git a/gateway-ha/src/main/resources/template/entity-view.ftl b/gateway-ha/src/main/resources/template/entity-view.ftl
@@ -1,23 +1,25 @@
 <html>
 <head>
+    <meta charset="UTF-8"/>
+    <link rel="stylesheet" type="text/css" href="assets/css/common.css"/>
     <link rel="stylesheet" type="text/css" href="assets/css/jquery.dataTables.min.css"/>
     <script src="assets/js/jquery-3.3.1.js"></script>
 
     <!-- JSON Editor comes here-->
-    <link rel="stylesheet" href="web/js/jsonedit/jsoneditor.min.css"/>
-    <script src="web/js/jsonedit/jsoneditor.min.js" defer></script>
-    <script src="web/js/entity-editor.js" defer></script>
+    <link rel="stylesheet" href="assets/js/jsonedit/jsoneditor.min.css"/>
+    <script src="assets/js/jsonedit/jsoneditor.min.js" defer></script>
+    <script src="assets/js/entity-editor.js" defer></script>
 
     <script type="text/javascript">
         $(document).ready(function () {
-            renderConfigSelector()
+            renderConfigSelector();
+            document.getElementById("entity_editor_tab").style.backgroundColor = "grey";
         })
     </script>
-
 </head>
 <body>
-
+<#include "header.ftl">
+<h2>!!Admin only!!</h2>
 <div id="entity-editor-place-holder"></div>
 
-</body>
-</html>
+<#include "footer.ftl">
diff --git a/gateway-ha/src/main/resources/template/footer.ftl b/gateway-ha/src/main/resources/template/footer.ftl
@@ -0,0 +1,3 @@
+</div>
+</body>
+</html>
diff --git a/gateway-ha/src/main/resources/template/gateway-view.ftl b/gateway-ha/src/main/resources/template/gateway-view.ftl
@@ -1,6 +1,6 @@
 <#-- @ftlvariable name="" type="com.lyft.data.gateway.resource.GatewayViewResource$GatewayView" -->
 <#setting datetime_format = "MM/dd/yyyy hh:mm:ss a '('zzz')'">
-<html>
+    <html>
 <head>
     <meta charset="UTF-8"/>
     <style>
@@ -16,6 +16,7 @@
             width: 500px
         }
     </style>
+    <link rel="stylesheet" type="text/css" href="assets/css/common.css"/>
     <link rel="stylesheet" type="text/css" href="assets/css/jquery.dataTables.min.css"/>
 
     <script src="assets/js/jquery-3.3.1.js"></script>
@@ -25,19 +26,23 @@
     <script type="application/javascript">
         $(document).ready(function () {
             $('#queryHistory').DataTable(
-                    {
-                        "ordering": false,
-                        "dom": '<"pull-left"f><"pull-right"l>tip',
-                        "width": '100%'
-                    }
+                {
+                    "ordering": false,
+                    "dom": '<"pull-left"f><"pull-right"l>tip',
+                    "width": '100%'
+                }
             );
             $("ul.chart").hBarChart();
+            document.getElementById("active_backends_tab").style.backgroundColor = "grey";
         });
     </script>
 </head>
 <body>
-<div><h3>Gateway Server started at
-    : <script>document.write(new Date(${gatewayStartTime?long?c}).toLocaleString());</script></h3></div>
+<#include "header.ftl">
+<div>
+    Started at :
+    <script>document.write(new Date(${gatewayStartTime?long?c}).toLocaleString());</script>
+</div>
 
 <div>
     <h3>All active backends:</h3>
@@ -51,61 +56,14 @@
         </thead>
         <tbody>
         <#list backendConfigurations as bc>
-        <tr>
-            <td>  ${bc.name}</td>
-            <td><a href="${bc.proxyTo}" target="_blank">${bc.proxyTo}</a></td>
-            <td> ${bc.routingGroup}</td>
-        </tr>
-        </#list>
-        </tbody>
-    </table>
-</div>
-
-
-<a onclick="location.reload()" href="">Refresh</a>
-
-<#if queryHistory?size != 0>
-<div><b>Query details [history size = ${queryHistory?size}]</b></div>
-<div>
-    <table id="queryHistory" class="display" style="width:100%">
-        <thead>
-        <tr>
-            <th>queryId</th>
-            <th>user</th>
-            <th>source</th>
-            <th>queryText</th>
-            <th>submissionTime</th>
-        </tr>
-        </thead>
-        <tbody>
-            <#list queryHistory as q>
             <tr>
-                <td><a href="/ui/query.html?${q.queryId}"
-                       target="_blank">${q.queryId}</a></td>
-                <td>  ${q.user}</td>
-                <td>
-                    <#if q.source??>
-                        ${q.source}
-                    </#if>
-                </td>
-                <td>${q.queryText}</td>
-                <td data-order="${q.captureTime}"><script>document.write(new Date(${q.captureTime?long?c}).toLocaleString());</script></td>
+                <td>  ${bc.name}</td>
+                <td><a href="${bc.proxyTo}" target="_blank">${bc.proxyTo}</a></td>
+                <td> ${bc.routingGroup}</td>
             </tr>
-            </#list>
+        </#list>
         </tbody>
     </table>
 </div>
 
-<div><h3> Query history distribution</h3>
-    <ul class="chart">
-        <#list queryDistribution?keys as cluster>
-            <li data-data="${queryDistribution[cluster]?string}">
-            ${cluster?string} => ${queryDistribution[cluster]?string}
-            </li>
-        </#list>
-    </ul>
-</div>
-
-</#if>
-</body>
-</html>
+<#include "footer.ftl">
diff --git a/gateway-ha/src/main/resources/template/header.ftl b/gateway-ha/src/main/resources/template/header.ftl
@@ -0,0 +1,12 @@
+<h2>Presto Gateway</h2>
+<a href="/">
+    <button class="tablink" id="query_history_tab">QueryHistory</button>
+</a>
+<a href="/viewgateway">
+    <button class="tablink" id="active_backends_tab">Active Backends</button>
+</a>
+<a href="/entity">
+    <button class="tablink" id="entity_editor_tab">Entity Editor</button>
+</a>
+
+<div class="tabcontent">