From f023b9e017b72f3296c52b3b58b19697073c3083 Mon Sep 17 00:00:00 2001
From: Marc Sune <marcdevel@gmail.com>
Date: Sun, 2 Jun 2024 19:55:20 +0200
Subject: [PATCH] dashboards: new REST API+support edit/delete

Refactor dashboard support to use the new REST API and to support
edit/delete dashboard.
---
 src/dashboard_defs/index.json               |   8 -
 src/dashboard_defs/pkts_bytes_ip_split.json |  66 ---
 src/index.html                              |  93 +++--
 src/js/alerts.js                            |  15 +-
 src/js/navigation.js                        | 424 ++++++++++++--------
 5 files changed, 325 insertions(+), 281 deletions(-)
 delete mode 100644 src/dashboard_defs/index.json
 delete mode 100644 src/dashboard_defs/pkts_bytes_ip_split.json

diff --git a/src/dashboard_defs/index.json b/src/dashboard_defs/index.json
deleted file mode 100644
index 7dfbb73..0000000
--- a/src/dashboard_defs/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "dashboards" : {
-	"pkts_bytes_ip_split" : {
-		"shortName" : "pkts_bytes_ip_split",
-		"name": "Pkts/Bytes per IPsrc/dst split"
-	}
-  }
-}
diff --git a/src/dashboard_defs/pkts_bytes_ip_split.json b/src/dashboard_defs/pkts_bytes_ip_split.json
deleted file mode 100644
index 1f4b2b3..0000000
--- a/src/dashboard_defs/pkts_bytes_ip_split.json
+++ /dev/null
@@ -1,66 +0,0 @@
-{
-  "dataCubeName": "networkFlows",
-  "viewDefinitionVersion": "4",
-  "viewDefinition": {
-    "visualization": "grid",
-    "visualizationSettings": null,
-    "timezone": "Etc/UTC",
-    "filters": [
-      {
-        "type": "time",
-        "ref": "time",
-        "timePeriods": [
-          {
-            "duration": "P1D",
-            "step": -1,
-            "type": "latest"
-          }
-        ]
-      }
-    ],
-    "splits": [
-      {
-        "type": "string",
-        "dimension": "ip_src",
-        "sort": {
-          "ref": "bytes",
-          "type": "series",
-          "direction": "descending",
-          "period": ""
-        },
-        "limit": 100
-      },
-      {
-        "type": "string",
-        "dimension": "ip_dst",
-        "sort": {
-          "ref": "bytes",
-          "type": "series",
-          "direction": "descending",
-          "period": ""
-        },
-        "limit": 100
-      }
-    ],
-    "series": [
-      {
-        "reference": "packets",
-        "format": {
-          "type": "default",
-          "value": ""
-        },
-        "type": "measure"
-      },
-      {
-        "reference": "bytes",
-        "format": {
-          "type": "default",
-          "value": ""
-        },
-        "type": "measure"
-      }
-    ],
-    "pinnedDimensions": [],
-    "pinnedSort": "packets"
-  }
-}
diff --git a/src/index.html b/src/index.html
index ea27309..d6d1447 100644
--- a/src/index.html
+++ b/src/index.html
@@ -36,9 +36,10 @@
 			<span data-feather="monitor"></span> <span id="dashboards-label">Dashboards</span> 
 		  </a>
 		  <div class="dropdown-menu" aria-labelledby="dashboards" id="nav-dashboards">
-                      <h6 class="dropdown-header">Preset</h6>
+		      <div id="dashboard-list-custom"></div>
                       <div class="dropdown-divider"></div>
-                      <a class="dropdown-item dashboard" href="#" id="manage-dashboards"><span data-feather="tool"></span>&nbsp;&nbsp;Manage dashboards</a>
+                      <h6 class="dropdown-header">Preset</h6>
+		      <div id="dashboard-list-preset"></div>
 		  </div>
 		</li>
 		<li class="nav-item px-2">
@@ -71,12 +72,12 @@ <h6 class="dropdown-header">Preset</h6>
         </li>
 	<li class="nav-item dropdown">
 	  <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-		<span data-feather="user"></span> Root
+		<span data-feather="user"></span> <span id="username">Root</span>
 	  </a>
 	  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="User">
 	      <a class="dropdown-item" href="#"><span data-feather="edit-2"></span>&nbsp;&nbsp;Edit</a>
 	      <div class="dropdown-divider"></div>
-	      <a class="dropdown-item" href="github.com"><span data-feather="log-out"></span>&nbsp;&nbsp;Signout</a>
+	      <a class="dropdown-item" href="http://www.datahangar.io"><span data-feather="log-out"></span>&nbsp;&nbsp;Signout</a>
 	  </div>
 	</li>
       </ul>
@@ -89,38 +90,68 @@ <h6 class="dropdown-header">Preset</h6>
           <iframe class="h-100 w-100 border-0" src="home.html" id="main-iframe"/></iframe>
         </main>
     </div>
-<div class="modal fade" id="create-dashboard-modal" tabindex="-1" role="dialog" aria-labelledby="createAdashboard" aria-hidden="true">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="exampleModalLabel">Create a Dashboard</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <form>
-          <div class="name-group">
-            <label for="create-dashboard-name" class="col-form-label">Name:</label>
-            <input type="text" class="form-control" id="create-dashboard-name">
+
+    <div class="modal fade" id="modal-dashboard" tabindex="-1" role="dialog" aria-labelledby="createadashboard" aria-hidden="true">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="examplemodallabel">Create a dashboard</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="close">
+              <span aria-hidden="true">&times;</span>
+            </button>
           </div>
-          <div class="form-group">
-            <label for="create-dashboard-description" class="col-form-label">Description:</label>
-            <textarea class="form-control" id="create-dashboard-description"></textarea>
+          <div class="modal-body">
+            <form>
+              <div class="name-group">
+                <label for="modal-dashboard-id" class="col-form-label">Id:</label>
+                <input type="text" class="form-control" id="modal-dashboard-id" disabled>
+              </div>
+              <div class="name-group">
+                <label for="modal-dashboard-name" class="col-form-label">Name:</label>
+                <input type="text" class="form-control" id="modal-dashboard-name">
+              </div>
+              <div class="form-group">
+                <label for="modal-dashboard-description" class="col-form-label">Description:</label>
+                <textarea class="form-control" id="modal-dashboard-description"></textarea>
+              </div>
+              <div class="form-group">
+                <label for="modal-dashboard-url" class="col-form-label">URL:</label>
+                <textarea class="form-control" id="modal-dashboard-url" disabled></textarea>
+              </div>
+            </form>
           </div>
-          <div class="form-group">
-            <label for="create-dashboard-url" class="col-form-label">URL:</label>
-            <textarea class="form-control" id="create-dashboard-url" disabled></textarea>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal" id="modal-dashboard-close">Close</button>
+            <button type="button" class="btn btn-danger" data-dismiss="modal" id="modal-dashboard-delete">Delete</button>
+            <button type="button" class="btn btn-primary" id="modal-dashboard-create">Create</button>
+            <button type="button" class="btn btn-primary" id="modal-dashboard-update">Update</button>
           </div>
-        </form>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-        <button type="button" class="btn btn-primary" id="create-dashboard-submit">Create</button>
+        </div>
       </div>
     </div>
-  </div>
-</div>
+
+    <div class="modal fade" id="modal-confirm" tabindex="-1" role="dialog" aria-labelledby="createadashboard" aria-hidden="true">
+      <div class="modal-dialog" role="document">
+        <div class="modal-dialog">
+          <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="examplemodallabel">Delete a dashboard</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="close">
+                  <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+              <p>Are you sure you want to delete dashboard '<span id="modal-confirm-dashboard-name"></span>'?</p>
+            </div>
+            <div class="modal-footer">
+              <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
+              <button type="button" class="btn btn-danger confirm_delete" data-dismiss="modal">Yes</button>
+            </div>
+            </div>
+          </div>
+        </div>
+    </div>
+
     <footer class="footer w-100">
       Copyright &#169; datahangar.io 2024. All rights reserved.
     </footer>
diff --git a/src/js/alerts.js b/src/js/alerts.js
index 4d32b87..c8f74d9 100644
--- a/src/js/alerts.js
+++ b/src/js/alerts.js
@@ -3,15 +3,18 @@ function rand_str(){
 }
 
 function _notify(content, type){
-  id="div_" + rand_str();
+  const id="div_" + rand_str();
   $("#notifications").append(
       '<div class="alert alert-'+type+'" style="display:none" role="alert" id="'+id+'">'+content+'</div>'
   )
-  id="#"+id;
-  $(id).slideDown(400);
-  setTimeout(function(id_) {
-    $(id_).slideUp(600, function(id_){ $(id_).remove()});
-  }, 2500, id);
+  const selector = "#" + id;
+  $(selector).slideDown(400);
+
+  setTimeout(function() {
+    $(selector).slideUp(600, function(id_){
+      $(this).remove();
+    });
+  }, 2500);
 }
 
 function notify_success(content){
diff --git a/src/js/navigation.js b/src/js/navigation.js
index c3337ba..1fec2bb 100644
--- a/src/js/navigation.js
+++ b/src/js/navigation.js
@@ -1,9 +1,9 @@
 //Iframe
 function main_iframe_set_url(url){
-   $("#main-iframe").attr("src", url);
+  $("#main-iframe").attr("src", url);
 }
 function main_iframe_get_url(){
-   return $("#main-iframe").contents().get(0).location.hash;
+  return $("#main-iframe").contents().get(0).location.hash;
 }
 
 function main_iframe_has_turnilo(){
@@ -11,192 +11,276 @@ function main_iframe_has_turnilo(){
 }
 
 function get_datacube_from_url(url){
-  return url.match("#([^\/]*)\/.*")[1];
+  try{
+    return url.match("#([^\/]*)\/.*")[1];
+  }catch(error){
+    return null;
+  }
 }
 
-//Nav
-$( "#main-navbar li.nav-item a.nav-link" ).on("click", function(){
-     if($(this).hasClass("disabled") || $(this).hasClass("dropdown-toggle")) return;
-     $("#main-navbar li.nav-item a.active").removeClass("active");
-     //$("#main-navbar li.nav-item a.active2").removeClass("active2");
-     curr = $(this).attr("id");
-     switch(curr) {
-       case 'home':
-       case 'help':
-       case 'alarms':
-       case 'reports':
-         $("#main-iframe").attr("src", $(this).attr("id")+".html");
-         break;
-       case 'datacubes':
-         $("#create-dashboard").removeClass("disabled");
-         main_iframe_set_url("turnilo/");
-         break;
-       case 'create-dashboard':
-         url = main_iframe_get_url();
-         if(url == ""){
-           $("#datacubes").addClass("active"); //revert
-           return;
-         }
-         $("#create-dashboard-url").val(url);
-         $("#create-dashboard-modal").modal("show");
-         return;
-       default:
-         break;
-     }
-     if($(this).hasClass("active"))
-       $(this).removeClass("active");
-     else
-       $(this).addClass("active");
-});
+//Dashboard REST API recovery
+datacubes = {};
+dashboards = {};
+dashboard_urls = {};
+curr_datacube = null;
 
-//Dashboards
-function dashboards_add_link(short_name, name, preset){
-    dashboards_menu_divider = $("#nav-dashboards h6.dropdown-header");
-    if(!preset)
-      $('<a class="dropdown-item dashboard" href="#" id="'+short_name+'">'+name+'</a>').insertBefore(dashboards_menu_divider);
-    else
-      $('<a class="dropdown-item dashboard" href="#" id="'+short_name+'">'+name+'</a>').insertAfter(dashboards_menu_divider);
+function rest_query_datacubes(){
+  $.getJSON( "turnilo/sources/", function(custom_data){
+    datacubes_ = {}
+    $.each(custom_data["dataCubes"], function(idx, elem) {
+      datacubes_[elem["name"]] = elem;
+    });
+    datacubes = datacubes_;
+  });
 }
 
-function dashboards_load_dashboard(hash, shortName, name){
-  main_iframe_set_url("turnilo/"+hash);
-  $("#main-navbar li.nav-item a.active").removeClass("active");
-  $("#dashboards").addClass("active");
-
-  //Store for watcher (last clicked dashboard)
-  curr = {
-    "hash" : hash,
-    "shortName": shortName,
-    "name": name
-  };
-  $("body").data("curr_dashboard", curr);
+function rest_query_dashboards(){
+  $.getJSON( "rest/turnilo/dashboards/", function(custom_data){
+    dashboards_ = {};
+    $.each(custom_data, function(idx, elem) {
+      dashboards_[elem["shortName"]] = elem;
+    });
+    dashboards = dashboards_;
+  });
 }
 
-function dashboards_reprogram_handlers(){
-    $("#main-navbar li.nav-item a.dashboard" ).on("click", function(){
-      dashboard_link = $(this)
-      //Check if it's a custom Dashboard
-      dashboards_dict=$("#nav-dashboards").data("dashboards");
-      dashboard = dashboards_dict[$(this).attr("id")]
-      shortName = dashboard["shortName"];
-      name = dashboard["name"]
-      if("hash" in dashboard){
-        dashboards_load_dashboard(dashboard["hash"], shortName, name);
-      }else{
-       //Preset (View Definition)
-        $.getJSON("dashboard_defs/"+dashboard["shortName"]+".json", function( data ) {
-         $.post( "turnilo/mkurl", data, function(data) {
-           dashboards_load_dashboard(data["hash"], shortName, name);
-         });
-        });
-      }
-    });
+//Navigation
+$("#main-navbar li.nav-item a.nav-link").on("click", function(){
+    if($(this).hasClass("disabled") || $(this).hasClass("dropdown-toggle"))
+      return;
 
-    $("#manage-dashboards" ).on("click", function(){
-      main_iframe_set_url("dashboards.html");
-    });
-}
+    $("#main-navbar li.nav-item a.active").removeClass("active");
 
-function dashboards_program_create_handler(){
-  $("#create-dashboard-submit").on("click", function(){
-     //Validate
-     name = $("#create-dashboard-name").val();
-     description = $("#create-dashboard-description").val();
-     url_val = $("#create-dashboard-url").val();
-     if(!name || name == "" || !url_val || url_val == ""){
-        notify_error("Unable to create dashboard. Invalid name or URL!");
+    switch($(this).attr("id")) {
+      case 'datacubes':
+        $("#create-dashboard").removeClass("disabled");
+        main_iframe_set_url("turnilo/");
+        break;
+      case 'create-dashboard':
+        url = main_iframe_get_url();
+        if(url == ""){
+          $("#datacubes").addClass("active"); //revert
+          return;
+        }
+        $("#modal-dashboard-url").val(url);
+        $("#modal-dashboard-id").val("");
+        $("#modal-dashboard-name").val("");
+        $("#modal-dashboard-description").val("");
+        $("#modal-dashboard-create").show();
+        $("#modal-dashboard-close").show();
+        $("#modal-dashboard-update").hide();
+        $("#modal-dashboard-delete").hide();
+        $("#modal-dashboard").modal("show");
         return;
-     }
-
-     //Create a dashboard
-     shortName = rand_str();
-     dashboard = {
-        "dataCube":  get_datacube_from_url(url_val),
-        "shortName": shortName,
-        "name":      name,
-        "hash":      url_val
-     }
-     //Add to the backend
-     $.ajax({
-       url: '/rest/turnilo/dashboards/',
-       type: 'POST',
-       headers: {'Content-Type': 'application/json'},
-       data: JSON.stringify(dashboard),
-       success: function(dashboard, status) {
-         console.log("Dashboard successfully created in the backend...");
-         console.log(JSON.stringify((dashboard)));
-         shortName = dashboard["shortName"];
-         dashboards_dict=$("#nav-dashboards").data("dashboards");
-         dashboards_dict[shortName] = dashboard;
-         dashboards_add_link(shortName, name, false);
-         dashboards_reprogram_handlers();
-         $("#create-dashboard-modal").modal("hide");
-         dashboards_load_dashboard(url_val, shortName, name);
-         notify_success("Created dashboard '"+name+"'");
-       }
-    });
-  });
-}
+      default:
+        $("#main-iframe").attr("src", $(this).attr("id")+".html");
+        break;
+    }
 
-function dashboards_program_watcher(){
-  setInterval(function(){
-    //DataCube
-    curr_hash = main_iframe_get_url();
-    if(curr_hash && curr_hash != ""){
-      $.getJSON( "turnilo/sources/", function( custom_data ) {
-        datacube_name = get_datacube_from_url(curr_hash);
-        name = datacube_name;
-        $.each(custom_data["dataCubes"], function(idx, elem) {
-           if(elem["name"] == name){
-             name = elem["title"];
-             return false;
-           }
-        });
-        $("#datacube-label").text("("+name+")");
-      });
-    }else{
-        $("#datacube-label").text("");
+    $(this).toggleClass("active")
+});
+
+//Create or update dashboard
+function create_update_dashboard(create){
+    //Validate
+    id = $("#modal-dashboard-id").val();
+    name = $("#modal-dashboard-name").val();
+    description = $("#modal-dashboard-description").val();
+    url_val = $("#modal-dashboard-url").val();
+
+    if(!name || name == "" || !url_val || url_val == ""){
+      notify_error("Unable to create dashboard. Invalid name or URL!");
+      return;
     }
 
-    //Dashboard
-    if($("body").data("curr_dashboard") == null) return;
-    last_hash = $("body").data("curr_dashboard")["hash"];
-    if(last_hash == curr_hash){
-      $("#dashboards-label").text("Dashboards("+$("body").data("curr_dashboard")["name"]+")");
+    //Create a dashboard
+    dataCube = get_datacube_from_url(url_val);
+    dashboard = {
+      "dataCube":    dataCube,
+      "shortName":   name,
+      "description": description,
+      "name":        name,
+      "hash":        url_val
+    }
+
+    url = '/rest/turnilo/dashboards/';
+    if(create){
+      type = 'POST';
+      op_str = "Create";
     }else{
-      $("#dashboards-label").text("Dashboards");
-     $("#dashboards").removeClass("active");
-     $("#datacubes").addClass("active");
+      dashboard['id'] = id;
+      url += id;
+      type = 'PUT';
+      op_str = "Update";
     }
-  }, 500);
-}
 
-$( document ).ready(function() {
-  //Get list of preset dashboards
-  $.getJSON( "dashboard_defs/index.json", function( data ) {
-    dashboards = data["dashboards"];
-    $.each(dashboards, function( key, val ) {
-	dashboards_add_link(key, val["name"], true);
-    });
+    //Add to the backend
+    $.ajax({
+      url: url,
+      type: type,
+      crossDomain: true,
+      headers: {'Content-Type': 'application/json'},
+      data: JSON.stringify(dashboard),
+      success: function(dashboard, status) {
+        console.log("Dashboard successfully "+op_str.toLowerCase()+"d in the backend...");
+        console.log(JSON.stringify((dashboard)));
+        $("#modal-dashboard-id").val(dashboard['id']);
+        $("#modal-dashboard").modal("hide");
+        notify_success(op_str+"d dashboard '"+name+"'");
 
-    $("#nav-dashboards").data("dashboards", dashboards);
-    dashboards_reprogram_handlers();
-    feather.replace();
-
-    //Get the list of custom dashboards
-    $.getJSON( "rest/turnilo/dashboards/", function( custom_data ) {
-      $.each(custom_data, function(idx, elem) {
-        console.log("Adding custom dashboard '"+elem["name"]+"':\n"+JSON.stringify(elem));
-        dashboards[elem["shortName"]] = elem;
-        dashboards_add_link(elem["shortName"], elem["name"], false);
-      });
-      $("#nav-dashboards").data("dashboards", dashboards);
-      dashboards_reprogram_handlers();
-      feather.replace();
+        timer_query_rest(true);
+        timer_update_views(true);
+      },
+      error: function(xhr, status, error) {
+        notify_error("Failed: "+op_str+" dashboard '"+name+"'");
+      }
     });
+}
+$("#modal-dashboard-create").on("click", function(){
+  create_update_dashboard(true);
+});
+$("#modal-dashboard-update").on("click", function(){
+  create_update_dashboard(false);
+});
+$("#modal-dashboard-delete").on("click", function(){
+    id = $("#modal-dashboard-id").val();
+    name = $("#modal-dashboard-name").val();
+    url = '/rest/turnilo/dashboards/'+id;
 
-  dashboards_program_create_handler();
-  dashboards_program_watcher();
+    //Be kind
+    $("#modal-confirm-dashboard-name").html(name);
+    $("#modal-confirm button.confirm_delete").attr('data-url', url);
+    $("#modal-confirm button.confirm_delete").attr('data-name', name);
+    $("#modal-confirm").modal("show");
+});
+$("#modal-confirm button.confirm_delete").on("click", function(){
+  url = $(this).attr('data-url');
+  name = $(this).attr('data-name');
+  $.ajax({
+    url: url,
+    type: 'DELETE',
+    crossDomain: true,
+    headers: {'Content-Type': 'application/json'},
+    success: function(status) {
+      console.log("Dashboard successfully deleted in the backend...");
+      $("#modal-dashboard").modal("hide");
+      notify_success("Deleted dashboard '"+name+"'");
+
+      timer_query_rest(true);
+      timer_update_views(true);
+    },
+    error: function(xhr, status, error) {
+      console.log("ERROR deleting dashboard '"+name+"':"+error);
+      notify_error("Failed: deleting dashboard '"+name+"'");
+    }
+  });
+});
+
+//Update labels
+function set_current_datacube(){
+  curr_datacube = get_datacube_from_url(main_iframe_get_url());
+  label = "";
+  try{
+    label = "("+datacubes[curr_datacube]["title"]+")";
+  }catch(error){};
+
+  if($("#datacube-label").text() == label)
+    return;
+
+  $("#datacube-label").text(label);
+}
+
+function update_dashboard_list(){
+  dashboard_list_preset = "";
+  dashboard_list_custom = "";
+  dashboard_urls_ = {}
+
+  for(let i in dashboards){
+    d = dashboards[i];
+    if(d["dataCube"] != curr_datacube)
+      continue;
+    elem = '<div class="d-flex"><span class="w-100"><a class="dropdown-item dashboard" datacube="'+d["dataCube"]+'" href="#" dash-id="'+d["shortName"]+'">'+d["shortName"]+'</a></span>';
+    if(d["preset"])
+      dashboard_list_preset += elem+"</div>";
+    else
+      dashboard_list_custom += elem+'<span class="pr-3"><a class="dashboard-edit pl-1 cursor-pointer" dash-id="'+d["shortName"]+'"><span data-feather="edit-2"></span></a></span></div>';
+    dashboard_urls_[d["hash"]] = d;
+  }
+
+  //Do not change DOM unless strictly necessary
+  changes = false;
+  dashboard_urls = dashboard_urls_;
+  if($("#dashboard-list-custom").attr('content') != dashboard_list_custom){
+    $("#dashboard-list-custom").attr('content', dashboard_list_custom);
+    $("#dashboard-list-custom").html(dashboard_list_custom);
+    changes = true;
+  }
+  if($("#dashboard-list-preset").html() != dashboard_list_preset){
+    $("#dashboard-list-preset").attr('content', dashboard_list_preset);
+    $("#dashboard-list-preset").html(dashboard_list_preset);
+    changes = true;
+  }
+
+  //Don't do any more (expensive) changes if not strictly necessary
+  if(!changes)
+    return;
+
+  if(dashboard_list_preset == "" && dashboard_list_custom == "")
+    $("#dashboards").addClass("disabled");
+  else
+    $("#dashboards").removeClass("disabled");
+
+  //Reprogram click handler
+  feather.replace({ container: $("#nav-dashboards").get(0) }); //replace edit icons
+
+  $("a.dashboard-edit").on("click", function(event){
+    d = dashboards[$(this).attr('dash-id')];
+    $("#modal-dashboard-id").val(d['id']);
+    $("#modal-dashboard-url").val(d['hash']);
+    $("#modal-dashboard-name").val(d['name']);
+    $("#modal-dashboard-description").val(d['description']);
+    $("#modal-dashboard-create").hide();
+    $("#modal-dashboard-close").hide();
+    $("#modal-dashboard-update").show();
+    $("#modal-dashboard-delete").show();
+    $("#modal-dashboard").modal("show");
+  });
+  $("#nav-dashboards a.dashboard" ).on("click", function(){
+    d = dashboards[$(this).attr('dash-id')];
+    main_iframe_set_url("turnilo/"+d["hash"]);
   });
-  notify_info("Welcome!");
+}
+
+function set_current_dashboard(){
+  url = main_iframe_get_url();
+  label = $("#dashboards-label")
+  label_text = "Dashboards";
+  if(url in dashboard_urls){
+    d = dashboard_urls[url];
+    label_text = "Dashboards("+d["name"]+")";
+  }
+  if(label.text() != label_text)
+    label.text(label_text);
+}
+
+function timer_query_rest(){
+  rest_query_datacubes();
+  rest_query_dashboards();
+}
+
+function timer_update_views(){
+  set_current_datacube();
+  update_dashboard_list();
+  set_current_dashboard();
+}
+
+//Main routines
+$( document ).ready(function(){
+  //Query REST periodically
+  setInterval(timer_query_rest, 5000);
+  timer_query_rest();
+
+  //Update labels
+  setInterval(timer_update_views, 250);
+  timer_update_views();
 });