UI to change default Dgraph Alpha URL

Author: Paul Korzhyk

published/js/runnable.js

@@ -76,10 +76,8 @@ var cm;
     serverLatencyInfo,
     networkLatency
   ) {
-    var isModal = $runnable.parents("#runnable-modal").length > 0;
-
-    var totalServerLatency = getTotalServerLatencyInMS(serverLatencyInfo);
-    var networkOnlyLatency = Math.round(networkLatency - totalServerLatency);
+    const totalServerLatency = getTotalServerLatencyInMS(serverLatencyInfo);
+    const networkOnlyLatency = Math.round(networkLatency - totalServerLatency);
 
     $runnable.find(".latency-info").removeClass("hidden");
     $runnable.find(".server-latency .number").text(serverLatencyInfo.total);

themes/hugo-tutorials/layouts/partials/runnable.html

@@ -66,43 +66,37 @@
   </div>
 </div>
 
-<div class="modal fade runnable-url-modal" id="runnable-url-modal" tabindex="-1" role="dialog"
+<style>
+  .modal.show {
+    display: block;
+    opacity: 1;
+    background-color: rgba(0,0,0,0.3);
+  }
+</style>
+<div class="modal fade runnable-url-modal" tabindex="-1" role="dialog"
   aria-labelledby="runnable-url-modal-label" aria-hidden="true">
   <div class="modal-dialog modal-md" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="runnable-url-modal-label">Change Dgraph Alpha URLs</h5>
+        <h5 class="modal-title" id="runnable-url-modal-label">Change Dgraph Alpha URL</h5>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
       <div class="modal-body">
         <div class="container-fluid">
           <form>
-            <table class="table table-striped">
-              <thead class="thead-dark">
-                <tr>
-                  <th scope="col">Type</th>
-                  <th scope="col" class="col-11">URL</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <th scope="row" class="align-middle py-1">Alter</th>
-                  <td class="py-1">
-                    <input type="text" class="form-control" data-module="runnable-url" data-path-type="alter"
-                      data-default="http://127.0.0.1:8080/alter" placeholder="http://127.0.0.1:8080/alter">
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+            <div class="form-group">
+              <label for="inputDgraphUrl">Dgraph Alpha Address</label>
+              <input type="text" class="form-control" id="inputDgraphUrl" placeholder="http://localhost:8080">
+              <!-- <small id="serverStatus" class="form-text text-muted">Server status goes hear.</small> -->
+            </div>
           </form>
         </div>
       </div>
       <div class="modal-footer">
-        <button type="button" id="load-defaults" class="code-btn">Load Defaults</button>
-        <button type="button" class="code-btn" data-dismiss="modal">Close</button>
-        <button type="button" id="save" class="code-btn primary" data-dismiss="modal">Save</button>
+        <button type="button" class="code-btn" data-action="default-url">Reset to Default</button>
+        <button type="button" class="code-btn" data-action="apply">Apply</button>
       </div>
     </div>
   </div>

themes/hugo-tutorials/layouts/partials/topbar.html

@@ -39,7 +39,7 @@
     position: fixed;
     z-index: 1;
     left: 40vw;
-    right: 10vw;
+    right: 100px;
     top: 5px;
     border-radius: 8px;
     box-shadow: -2px 2px 6px 0px rgba(0,0,0,0.75);
@@ -56,7 +56,7 @@
   <strong>{{ $.Site.Params.thisRelease }}</strong>.
   Latest stable release is
   <strong>{{ $.Site.Params.latestRelease }}</strong>.
-  <a href="/" class="btn btn-primary btn-small">Go to
+  <a href="/" class="btn btn-primary">Go to
     <strong>
       Dgraph {{ $.Site.Params.latestRelease }}
     </strong>

themes/hugo-tutorials/static/js/build/dgraph-tour.js

@@ -7,22 +7,36 @@ import '../css/runnable.css';
 
 import javascript from 'codemirror/mode/javascript/javascript';
 
-// cm stores reference to the codemirror for the page
-var cm;
+// Stores reference to the codemirror for the page
+let codeMirror;
+
+// Key in localStorage of the server URL string.
+const SERVER_ADDR = 'tourDgraphAddr';
+
+let serverAddress = localStorage.getItem(SERVER_ADDR) || "http://localhost:8080";
+
+changeServerAddress(serverAddress);
+
+function changeServerAddress(newAddr) {
+  serverAddress = newAddr;
+  localStorage.setItem(SERVER_ADDR, newAddr);
+  $('.runnable .pane-title .url').text(newAddr);
+  $('input#inputDgraphUrl').val(newAddr);
+}
 
 function initCodeMirror($runnable) {
   $runnable.find(".CodeMirror").remove();
 
   var editableEl = $runnable.find(".query-content-editable")[0];
-  cm = CodeMirror.fromTextArea(editableEl, {
+  codeMirror = CodeMirror.fromTextArea(editableEl, {
     lineNumbers: true,
     autoCloseBrackets: true,
     lineWrapping: true,
     autofocus: false,
     tabSize: 2
   });
 
-  cm.on("change", function(c) {
+  codeMirror.on("change", function(c) {
     var val = c.doc.getValue();
     $runnable.attr("data-current", val);
     c.save();
@@ -84,7 +98,6 @@ function updateLatencyInformation(
   serverLatencyInfo,
   networkLatency
 ) {
-  const isModal = $runnable.parents('#runnable-modal').length > 0;
   serverLatencyInfo.total_ns = Object.values(serverLatencyInfo).reduce((x, y) => x + y, 0);
 
   const totalServerLatency =  serverLatencyInfo.total_ns / 1e6;
@@ -130,10 +143,10 @@ $(document).on('click', '.runnable [data-action="run"]', async function(e) {
   $currentRunnable.find(".output-container").removeClass("empty error");
   codeEl.text("Waiting for the server response...");
 
-  var startTime = new Date().getTime();
+  const startTime = Date.now();
 
   const method = endpoint.substring(1);
-  const stub = new dgraph.DgraphClientStub("http://localhost:8080")
+  const stub = new dgraph.DgraphClientStub(serverAddress)
   const client = new dgraph.DgraphClient(stub)
   client.setDebugMode(true)
   // TODO: this should be done once per URL, but good enough for now.
@@ -191,6 +204,24 @@ $(document).on('click', '.runnable [data-action="run"]', async function(e) {
   }
 });
 
+$(document).on('click', '.runnable a.btn-change', async function(e) {
+  e.preventDefault();
+  $('.runnable-url-modal.modal').addClass('show');
+})
+
+$(document).on('click', '.runnable-url-modal button[data-dismiss="modal"]', async function(e) {
+  $('.runnable-url-modal.modal').removeClass('show');
+})
+
+$(document).on('click', '.runnable-url-modal button[data-action=apply]', async function(e) {
+  $('.runnable-url-modal.modal').removeClass('show');
+  changeServerAddress($('input#inputDgraphUrl').val())
+})
+
+$(document).on('click', '.runnable-url-modal button[data-action=default-url]', async function(e) {
+  changeServerAddress("http://localhost:8080")
+})
+
 // Refresh code
 $(document).on("click", '.runnable [data-action="reset"]', function(e) {
   var $runnable = $(this).closest(".runnable");
@@ -209,8 +240,7 @@ $(document).on("click", '.runnable [data-action="reset"]', function(e) {
   }, 80);
 });
 
-$(document).on("click", ".runnable-content.runnable-code", () => cm.focus());
-
+$(document).on("click", ".runnable-content.runnable-code", () => codeMirror.focus());
 
 // Initialize runnables
 $(".runnable").each(function() {