easel-dashboard 0.4.3 → 0.5

data/lib/html/app.css.erb

@@ -46,17 +46,16 @@ html, body {
 span.stderr { color: var(--stderr-colour); }
 span.stdout { color: var(--stdout-colour); }
 
-h1, .h1 {font-size: var(--text-size-xlarge); font-weight: var(--text-weight-bold);}
-h2, .h2 {font-size: var(--text-size-large); font-weight: var(--text-weight-bold);}
-h3, .h3 {font-size: var(--text-size-large); font-weight: var(--text-weight-semi-bold);}
-h4, .h4 {font-size: var(--text-size); font-weight: var(--text-weight-semi-bold);}
+h1 {font-size: var(--text-size-xlarge); font-weight: var(--text-weight-bold);}
+h2 {font-size: var(--text-size-large); font-weight: var(--text-weight-bold);}
+h3 {font-size: var(--text-size-large); font-weight: var(--text-weight-semi-bold);}
+h4 {font-size: var(--text-size); font-weight: var(--text-weight-semi-bold);}
 
+a { color: inherit; text-decoration: none; }
 *{padding: 0; margin: 0;}
 
-
-
-.screen {
-  height: 100vh;
+.interface {
+  height: calc(100vh - var(--size-xlarge));
   width: 100vw;
   display: flex;
   flex-direction: row;
@@ -64,24 +63,26 @@ h4, .h4 {font-size: var(--text-size); font-weight: var(--text-weight-semi-bold);
   align-items: stretch;
 }
 
-.cmd-picker {
+.dashboard-selector {
   width: 320px;
   height: 100%;
-  overflow-y: scroll;
+  overflow-y: auto;
+  direction: rtl;
 }
-.cmd-picker .command:not(:last-child) {border-bottom: solid 1px var(--accent);}
 
-.command-box{
+.selector-card{
+  direction: ltr;
   display: flex;
   flex-direction: column;
   background-color: var(--surface);
   border-radius: var(--size-small);
   align-items: stretch;
-  margin: var(--size-small);
+  margin: var(--size-large);
   overflow: hidden;
+  box-shadow: 0 var(--size-medium) var(--size-large) var(--shadow);
 }
 
-.command-info {
+.card-info {
   background-color: var(--surface);
   color: var(--on-surface);
   padding: var(--size-medium);
@@ -94,9 +95,9 @@ h4, .h4 {font-size: var(--text-size); font-weight: var(--text-weight-semi-bold);
   box-shadow: 0 0 var(--size-small) var(--shadow);
   cursor: pointer;
 }
-.command-info:hover { color: var(--primary); }
+.card-info:hover { color: var(--primary); }
 
-.command-controls {
+.card-controls {
   display: flex;
   flex-direction: row;
   justify-content: stretch;
@@ -104,14 +105,14 @@ h4, .h4 {font-size: var(--text-size); font-weight: var(--text-weight-semi-bold);
   box-shadow: inset 0 var(--size-tiny) var(--size-small) #000000;
 }
 
-.command-icon {
+.card-icon {
   flex-grow: 2;
   text-align: center;
   padding: var(--size-tiny);
   background-color: var(--primary);
   color: var(--on-primary);
 }
-.command-icon:hover {
+.card-icon:hover {
   background-color: var(--secondary);
   color: var(--on-secondary);
   cursor: pointer;
@@ -120,7 +121,7 @@ h4, .h4 {font-size: var(--text-size); font-weight: var(--text-weight-semi-bold);
 ::-webkit-scrollbar {
   width: var(--size-small);
   height: var(--size-small);
-  background-color: var(--background);
+  background-color: none;
 }
 ::-webkit-scrollbar-thumb {
     background: var(--primary);
@@ -132,47 +133,78 @@ h4, .h4 {font-size: var(--text-size); font-weight: var(--text-weight-semi-bold);
 
 
 
+.header {
+  width: 100vw;
+  height: var(--size-xlarge);
+  background-color: var(--surface);
+  z-index: 1;
+  box-shadow: 0 0 var(--size-medium) var(--shadow);
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+.header-logo {
+  margin-left: var(--size-large);
+  color: var(--primary);
+}
+.on-hover-secondary:hover {
+  color: var(--secondary);
+}
 
 
 
-
-.interface {
-  /* margin: var(--size-large); */
+#dashboard-wrapper {
+  overflow: hidden;
+  border-radius: var(--size-small);
+  margin: var(--size-large);
+  width: calc(100vw - calc(320px + calc(3 * var(--size-small))));
+  box-shadow: 0 var(--size-medium) var(--size-large) var(--shadow);
+}
+.dashboard {
   flex-grow: 2;
   display: flex;
   flex-direction: column;
   justify-content: stretch;
   align-items: stretch;
-  overflow: hidden;
-  border-radius: var(--size-small);
-  padding: var(--size-medium);
-  margin: var(--size-small);
+  height: 100%;
 }
-#interface-title {
-  padding-bottom: var(--size-medium);
+
+.dashboard-title-wrapper {
+  margin: var(--size-medium);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: baseline;
 }
-.interface-output {
+.dashboard-main-text {
   flex-grow: 2;
   flex-basis: 0;
   padding: var(--size-medium);
-  box-shadow: inset 0 0 var(--size-medium) var(--background);
-}
-.interface-footer{
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  padding-top: var(--size-medium);
+  background-color: var(--background);
+  box-shadow: inset 0 0 var(--size-medium) var(--shadow);
+  margin: 0 var(--size-medium) 0;
 }
-.interface-commands {
-  width: 33%;
+.dashboard-main-graphics {
+  flex-grow: 2;
+  flex-basis: 0;
+  margin: 0 var(--size-medium) 0;
+  display: grid;
+  overflow: scroll;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+}
+.dashboard-footer {
+  margin-top: var(--size-medium);
+  width: 100%;
   position: relative;
   display: flex;
   flex-direction: row;
   justify-content: stretch;
-  border-radius: var(--size-small);
   overflow: hidden;
+  border-top: solid 1px var(--primary);
 }
-.interface-button {
+.dashboard-button {
   flex-grow: 2;
   flex-basis: 0;
   flex-shrink: 2;
@@ -182,7 +214,7 @@ h4, .h4 {font-size: var(--text-size); font-weight: var(--text-weight-semi-bold);
   color: var(--on-primary);
   overflow: hidden;
 }
-.interface-button:hover {
+.dashboard-button:hover {
   background-color: var(--secondary);
   color: var(--on-secondary);
   cursor: pointer;
@@ -190,15 +222,17 @@ h4, .h4 {font-size: var(--text-size); font-weight: var(--text-weight-semi-bold);
 .top-shadow {
   position: absolute;
   width: 100%;
-  transform: translate(calc( -1 * var(--size-small)),calc( -1 * calc( var(--size-large))));
+  transform: translate(0,calc( -1 * calc( var(--size-large))));
   height: var(--size-large);
   background-color: none;
   z-index: 50;
   box-shadow: 0 0 var(--size-small) var(--shadow);
 }
+.chart-wrapper {
+  position: relative;
+}
 
 
 .surface{ background-color: var(--surface); color: var(--on-surface); }
 .background{ background-color: var(--background); color: var(--on-background); }
-
 .scroll-content { min-height: min-content; overflow: auto; }

data/lib/html/app.html.erb

@@ -1,4 +1,18 @@
-<!DOCTYPE html>
+<%#
+    Notes on the refactor for HTML/CSS stuff:
+      - Think about how I want to build the CSS/JS/HTML stuff. Do I want to send
+        as one file? Multiple different ones?
+      - Fix the ugliness that is the HTML for the main interface. Build it initially
+       as an empty <div> that has the write surface/interface classes, and is
+       positioned properly. Then use JS to load the first dashboard (or the first)
+       command.
+        - Why is there a span.h2 instead of just an h2? the line break. Fix with
+          flex?
+        - Why do commands and dashboards need different html? Can't it just be a
+          different onclick (and I guess remove the 'Run' button)?
+        - Need to show state a little better - how to highlight the current
+          dashboard or command?
+%><!DOCTYPE html>
 <html lang="en" dir="ltr">
   <head>
     <meta charset="utf-8">
@@ -6,176 +20,77 @@
       <%= $config[:title] %>
     </title>
     <link rel="stylesheet" href="/app.css">
-    <script type="text/javascript">
-
-        // TODO: Add a RUN and STOP variable, that point to a div as a play button
-        // or a square.
-        let ws_socket = new WebSocket("ws://" + location.hostname + ":" + location.port);
-        let current_cmd = null;
-        let keep_pane_contents = false; // Remove default contents when you run a command.
-
-        let streams = { <%$config[:commands].each do |command|%>
-          <%= command[:id] %>: { is_running: false,  content: "", name: "<%= command[:name] %>" },<% end %>
-        };
-
-        // Receive message
-        ws_socket.onmessage = (event) => {
-
-          pane = document.getElementById('output-pane');
-          console.log("Received: " + event.data);
-
-          // Clear pane if appropriate
-          if (!keep_pane_contents) {
-            pane.innerHTML = "";
-            keep_pane_contents = true;
-          }
-
-          // Split message into [ID, CMD, MSG]
-          msg_frags = event.data.split(":");
-          id = msg_frags[0];
-          cmd_type = msg_frags[1];
-          msg = msg_frags.slice(2).join(":");
-
-
-          // Validate
-          if (!(id in streams) || !(["ERR", "OUT", "CLEAR", "FINISHED"].includes(cmd_type)) ) {
-            console.log("Error validating message: " + events.data);
-            return;
-          }
-
-          // Process message
-          switch (cmd_type) {
-            case "ERR":
-              append_stream_content(id, "<span class=\"stderr\">" + msg + "</span>");
-              break;
-            case "OUT":
-              append_stream_content(id, msg);
-              break;
-            case "CLEAR":
-              streams[id]['content'] = "";
-              update_pane();
-              break;
-            case "FINISHED":
-              document.getElementById('cmd-' + id + '-run-icon').innerHTML = "Run";
-              streams[id]['is_running'] = false;
-              update_pane();
-              break;
-            default:
-              console.log("Error: Message not understood. Id: " + id + ", cmd_type: " + cmd_type + ", msg:" + msg);
-          }
-        }
-
-        // append_stream_content
-        function append_stream_content(id, content){
-          console.log("Id: " + id + ", current_cmd: " + current_cmd + ", content: " + content);
-          streams[id]['content'] += content;
-          update_pane();
-        }
-
-        function toggle_run(id){
-          if (streams[id]['is_running']) { // STOP (already running)
-            ws_socket.send("STOP:" + id);
-            document.getElementById('cmd-' + id + '-run-icon').innerHTML = "Run";
-          } else { // RUN (currently not running)
-            streams[id]['content'] = "";
-            ws_socket.send("RUN:" + id);
-            document.getElementById('cmd-' + id + '-run-icon').innerHTML = "Stop";
-            current_cmd = id;
-          }
-          streams[id]['is_running'] = !streams[id]['is_running'];
-          update_pane();
-        }
-
-        function load_pane(id) {
-          current_cmd = id;
-          update_pane();
-        }
-
-        function update_pane() {
-          pane = document.getElementById('output-pane');
-          pane_state = document.getElementById('interface-state');
-          pane_state_details = document.getElementById('interface-state-details');
-
-          pane.innerHTML = streams[current_cmd]['content'];
-          if (streams[current_cmd]['is_running']) {
-            pane_state.innerHTML = "Running: ";
-          } else {
-            pane_state.innerHTML = "Output Of: ";
-          }
-          pane_state_details.innerHTML = streams[current_cmd]['name'];
-        }
-
-        function show_help_message() {
-          current_cmd = null;
-          pane = document.getElementById('output-pane');
-          pane_state = document.getElementById('interface-state');
-          pane_state_details = document.getElementById('interface-state-details');
-
-
-          pane.innerHTML =
-            "Welcome to the CDash Dashboard! Programs are set up via a YAML file on the server.\n\n" +
-            "You can run these programs by clicking 'Run' under a program's information.\n\n" +
-            "Programs' output will update even if you are looking at the output of another program.\n\n" +
-            "Use the 'Show' button to select which programs' output you are seeing.";
-          pane_state.innerHTML = "Showing: ";
-          pane_state_details = "Help Message";
-        }
-
-    </script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js"></script>
+    <script src="dashboardElements.js" charset="utf-8"></script>
+    <script src="createComponents.js" charset="utf-8"></script>
+    <script src="controller.js" charset="utf-8"></script>
   </head>
   <body>
-    <div class="screen">
-      <div class="cmd-picker">
+    <div class="header">
+      <div class="header-logo h2">
+        <%= $config[:header_logo] %>
+        <%= $config[:header_title] %>
+      </div>
+    </div>
+    <div class="interface">
+      <div class="dashboard-selector">
+
+        <%# GraphicDashboards %>
+        <% $config[:dashboards].each do |dashboard| %>
+          <div class="selector-card">
+            <div class="card-info"
+              onclick="load_dashboard('<%= dashboard[:id] %>')"
+              id="dash-<%=dashboard[:id]%>"
+              data-id="<%=dashboard[:id]%>">
+              <h2><%= dashboard[:name] %></h2>
+              <p><%= dashboard[:desc] %></p>
+            </div>
+            <div class="card-controls">
+              <div class="card-icon"
+                id="cmd-<%=dashboard[:id]%>-log-icon"
+                onclick="load_dashboard('<%= dashboard[:id] %>')">
+                Show
+              </div>
+            </div>
+          </div>
+        <% end %>
 
+        <%# Commands %>
         <% $config[:commands].each do |command| %>
-          <div class="command-box">
-            <div class="command-info"
-              onclick="load_pane(<%=command[:id]%>)"
+          <div class="selector-card">
+            <div class="card-info"
+              onclick="load_dashboard(<%=command[:id]%>)"
               id="cmd-<%=command[:id]%>"
               data-id="<%=command[:id]%>"
               data-cmd="<%=command[:cmd]%>">
               <h2><%= command[:name] %></h2>
               <p><%= command[:desc] %></p>
             </div>
-            <div class="command-controls">
-              <div class="command-icon"
+            <div class="card-controls">
+              <div class="card-icon"
                 id="cmd-<%=command[:id]%>-run-icon"
                 onclick="toggle_run(<%= command[:id] %>)">
                 Run
               </div>
-              <div class="command-icon"
+              <div class="card-icon"
                 id="cmd-<%=command[:id]%>-log-icon"
-                onclick="load_pane(<%=command[:id]%>)">
+                onclick="load_dashboard(<%=command[:id]%>)">
                 Show
               </div>
             </div>
           </div>
         <% end %>
+
       </div>
-      <div class="interface surface">
-        <div id="interface-title">
-          <span class="h2" id="interface-state">Waiting:</span>
-          <span id="interface-state-details"></span>
-        </div>
-        <div class="interface-output scroll-content">
-          <pre class="output-pane" id="output-pane">Click 'Run' to run a command and see it's output.
 
-Click 'Help' (below) to see more.</pre>
-        </div>
-        <div class="interface-footer">
-          <div class="interface-commands">
-            <div class="top-shadow"></div>
-            <div class="interface-button"
-              onclick="show_help_message()">
-              Help
-            </div>
-            <div class="interface-button"
-              onclick="console.log('Save output button has not been implemented.')">
-              Save Output
-            </div>
-          </div>
+      <div class="surface" id="dashboard-wrapper">
+        <div class="dashboard-loading">
+          LOADING
         </div>
       </div>
     </div>
   </body>
+  <script type="text/javascript">
+    load_dashboard("<%=$config[:dashboards].nil? ? 0 : $config[:dashboards][0][:id]%>")
+  </script>
 </html>

data/lib/html/app.js.erb

@@ -0,0 +1,177 @@
+/* app.js.erb
+ *
+ * Author: Eric Power
+ *
+ * Description:
+ *    This ERB file generates the javascript that runs the client side of the Easel
+ *    Dashboard.
+ */
+
+/* Plan for a refactor:
+ *
+ *    This needs to be broken out into a few files (which could be merged into one
+ *    before sending to the client). Basically, I want:
+ *      - Controller: sets up state variables (eg. dashboards, comands,
+ *        websocket), builds the websocket and initiates getting historical
+ *        dashboard data.
+ *      - Component Builder: builds components like a new
+ *      - Messaging: functions that are used to send and receive messages via
+ *        the WebSocket.
+ *      - Chart: functions that build and update the various Chart JS elements
+ *        in dashboards. Some ideological overlap with Component Builder, so need
+ *        a better taxonomy.
+ *
+ *    TODO: I want a 'plug and play' way to add in new element types. How this
+ *    works needs to be designed. Basically, I need to drop in code on the client
+ *    side that goes from knowing the type (eg. 'time-series') to building the
+ *    canvas element, and handles updating it. I don't want to have to edit the
+ *    html.erb stuff to set up the canvas specifically.
+ *
+ *    On the server side, I might be able to get away with without anythnig if I
+ *    can design the YAML structure well enough to not need it.
+ */
+"use strict";
+
+
+
+// Key Variables
+let ws_socket = new WebSocket("ws://" + location.hostname + ":" + location.port);
+let dashboard = {
+  dashboard:
+}
+let current_cmd = null;
+let keep_pane_contents = false; // Remove default contents when you run a command.
+let commands = { <% $config[:commands].each do |command| %>
+  <%= command[:id] %>: {
+    is_running: false,
+    content: "[Click 'Run' to run the command.]",
+     name: "<%= command[:name] %>" },
+  <% end %>
+};
+let dashboards = { <% $config[:dashboards].each do |dashboard| %>
+  "<%= dashboard[:id] %>": {
+    name: "<%= dashboard[:name] %>",
+    elements: [
+      <% dashboard[:elements].each do |element| %>
+        {
+          name: "<%= element[:name] %>",
+          type: "<%= element[:type] %>",
+          canvas: document.createElement("CANVAS"),
+          config: {
+            type: 'line',
+            data: {
+              labels: [],
+              datasets: [
+                <% element[:data].each_with_index do |datum, index| %>
+                {
+                  label:  "<%= datum[:name] %>",
+                  data: [],
+                  borderColor: "<%= $config[:colours][:primary] %>",
+                },
+                <% end %>
+              ]
+            }
+          },
+          data: [
+            <% element[:data].each do |datum| %>
+              {
+                name: "<%= datum[:name] %>",
+                store: []
+              },
+            <% end %> <%# end data loop %>
+          ]
+        },
+      <% end %> <%# end element loop %>
+    ]
+  },
+  <% end %> <%# end dashboard loop %>
+};
+
+// Turn cdashboards > elements > canvases into Charts
+Object.keys(dashboards).forEach( (dashboard_id) => {
+  Object.keys(dashboards[dashboard_id]['elements']).forEach( (element_id) => {
+    let element = dashboards[dashboard_id]['elements'][element_id];
+    element['chart'] = new Chart(
+        element['canvas'],
+        element['config'])
+  })
+});
+
+
+
+
+/* toggle_run
+ *
+ * Sends a message to the server to stop or run the given id (dependent on its
+ * state), and updates the run/stop button accordingly.
+ */
+function toggle_run(id){
+  if (commands[id]['is_running']) { // STOP (already running)
+    ws_socket.send("STOP:" + id);
+    document.getElementById('cmd-' + id + '-run-icon').innerHTML = "Run";
+  } else { // RUN (currently not running)
+    commands[id]['content'] = "";
+    ws_socket.send("RUN:" + id);
+    document.getElementById('cmd-' + id + '-run-icon').innerHTML = "Stop";
+    current_cmd = id;
+  }
+  commands[id]['is_running'] = !commands[id]['is_running'];
+  update_dashboard();
+}
+
+/* load_pane
+ *
+ * Loads the output/dashboard associated with the id.
+ */
+function load_dashboard(id) {
+  current_cmd = id; // TODO: update the name of this to represent that it refers to a dashboard.
+  update_dashboard();
+}
+
+/* updates_pane
+ *
+ * Updates the contents of the pane. Typically called after a message has been
+ * received that wants to put new content onto the pane.
+ */
+function update_dashboard() {
+
+  let pane = document.getElementById('output-pane');
+  let pane_state = document.getElementById('interface-state');
+  let pane_state_details = document.getElementById('interface-state-details');
+
+
+  if (Number.isInteger(current_cmd)){
+    if (commands[current_cmd]['is_running']) {
+      pane_state.innerHTML = "Running: ";
+    } else {
+      pane_state.innerHTML = "Output Of: ";
+    }
+    pane_state_details.innerHTML = commands[current_cmd]['name'];
+    pane.innerHTML = commands[current_cmd]['content'];
+  } else { // is a dashboard
+    pane_state.innerHTML = dashboards[current_cmd]['name'];
+    pane_state_details.innerHTML = dashboards[current_cmd]['desc'];
+    document.getElementById('dash-elem').appendChild(
+      dashboards[current_cmd]['elements'][0]['canvas']
+    );
+  }
+}
+
+/* show_help_message
+ *
+ * Displays the help message on the pane. Called when the user clicks the 'help'
+ * button.
+ */
+function show_help_message() {
+  current_cmd = null;
+  let pane = document.getElementById('output-pane');
+  let pane_state = document.getElementById('interface-state');
+  let pane_state_details = document.getElementById('interface-state-details');
+  pane.innerHTML =
+    "Welcome to the CDash Dashboard! Programs are set up via a YAML file on the server.\n\n" +
+    "You can run these programs by clicking 'Run' under a program's information.\n\n" +
+    "Programs' output will update even if you are looking at the output of another program.\n\n" +
+    "Use the 'Show' button to select which programs' output you are seeing.";
+  pane_state.innerHTML = "Showing: ";
+  pane_state_details = "Help Message";
+}