easel-dashboard 0.4.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: e0a7fbceaa1d9f616dd3a373aa892d371b8d4a77df06d66cb91734a4e581055f
+  data.tar.gz: 38cbd403c831aff841ba9e1a2bb6a10581f938f6491775123de3a6bcbf8b47d3
+SHA512:
+  metadata.gz: 94f4e6a90899dc3c06817fc6eb4ce10484ebc58d3f3b9d79009167aca58701878c05ba3d1a9715d305196cb5ea76d9eeacfe9b7d05c61c3bf4e3b3c929474d83
+  data.tar.gz: 9f6af45a6fc1c55092e680fdd5a5a1b1e93801d8db6ee895ea77e7fc387098a619eea603f8cee7ce3d32b7ddd5ae4dda8f20a647ebac28734fa87ce5f4657a5e

data/bin/easel

@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+require 'easel-dashboard'
+
+launch

data/lib/easel/build_pages.rb

@@ -0,0 +1,56 @@
+#!/snap/bin/ruby
+#
+# Author: Eric Power
+
+# Imports
+require 'erb'
+
+# Key Variables
+@code_names = {
+  200 => "OK",
+  404 => "Not Found",
+  405 => "Forbidden",
+  418 => "I'm a teapot",
+  500 => "Internal Server Error"
+}
+
+# build_app
+#
+#
+def build_app
+  app_erb = File.new("#{File.dirname(__FILE__)}/../html/app.html.erb").read
+  page = ERB.new(app_erb).result()
+
+  "HTTP/1.1 200 OK\r\n" +
+  "Content-Type: text/html; charset=UTF-8\r\n" +
+  "Content-Length: #{page.bytesize}\r\n" +
+  "Connection: close\r\n" +
+  "\r\n" +
+  page
+end
+
+
+def build_error code
+  error_erb = File.new("#{File.dirname(__FILE__)}/../html/error.html.erb").read
+  page = ERB.new(error_erb).result(binding)
+
+  "HTTP/1.1 #{code} #{@code_names[code]}\r\n" +
+  "Content-Type: text/html; charset=UTF-8\r\n" +
+  "Content-Length: #{page.bytesize}\r\n" +
+  "Connection: close\r\n" +
+  "\r\n" +
+  page
+end
+
+
+def build_css
+  error_erb = File.new("#{File.dirname(__FILE__)}/../html/app.css.erb").read
+  css = ERB.new(error_erb).result(binding)
+
+  "HTTP/1.1 200 OK\r\n" +
+  "Content-Type: text/css; charset=UTF-8\r\n" +
+  "Content-Length: #{css.bytesize}\r\n" +
+  "Connection: close\r\n" +
+  "\r\n" +
+  css
+end

data/lib/easel/configuration.rb

@@ -0,0 +1,43 @@
+#!/snap/bin/ruby
+#
+# Author: Eric Power
+#
+# Description:
+#     This file contains the global variable $config. These values are only
+#     defaults. If the YAML file passed to launch.rb contains the same keys,
+#     then these values are overwritten.
+
+
+# Global Variables
+$config = {
+  logging: 2,             # 0=Fatal, 1=Error, 2=Warning, 3=Info
+  port: 4200,             # Default port
+  hostname: 'localhost',  # Default hostname
+  log_file: STDOUT,       # Default logging to STDOUT
+  title: 'Easel - Your Custom Dashboard',
+  colours: {
+    surface:        '#222222',
+    background:     '#000000',
+    primary:        '#7DF9FF',
+    secondary:      '#00FF00',
+    on_surface:     '#ffffff',
+    on_background:  '#ffffff',
+    on_primary:     '#000000',
+    on_secondary:   '#000000',
+    shadow:         '#000000',
+    stdout_colour:  '#ffffff',
+    stderr_colour:  '#00FF00'
+  },
+  commands: [
+      {
+        name: 'Test 1',
+        cmd:  'echo "this is the output of Test 1"',
+        desc: 'Simple output test #1'
+      },
+      {
+        name: 'Test 2',
+        cmd:  'echo "this is the output of Test 2"',
+        desc: 'Simple output test #2'
+      }
+  ]
+}

data/lib/easel/logging.rb

@@ -0,0 +1,35 @@
+#!/snap/bin/ruby
+#
+# Author: Eric Power
+#
+# Description:
+#     Provides the functions to provide easy logging for the Easel Dashboard.
+
+# Imports
+require 'time'
+
+
+def log_fatal *msg
+  unless $config[:logging] == 0
+    $config[:log_file].puts "[#{Time.new.strftime("%Y-%m-%d-%H:%M:%S")}] FATAL: " + msg.join(" ")
+  end
+  exit 1
+end
+
+def log_error *msg
+  unless $config[:logging] < 1
+    $config[:log_file].puts "[#{Time.new.strftime("%Y-%m-%d-%H:%M:%S")}] ERROR: " + msg.join(" ")
+  end
+end
+
+def log_warning *msg
+  unless $config[:logging] < 2
+    $config[:log_file].puts "[#{Time.new.strftime("%Y-%m-%d-%H:%M:%S")}] WARNING: " + msg.join(" ")
+  end
+end
+
+def log_info *msg
+  unless $config[:logging] < 3
+    $config[:log_file].puts "[#{Time.new.strftime("%Y-%m-%d-%H:%M:%S")}] INFO: " + msg.join(" ")
+  end
+end

data/lib/easel/server.rb

@@ -0,0 +1,114 @@
+#!/snap/bin/ruby
+#
+# Author: Eric Power
+#
+# Description:
+#     Provides the server that serves Easel Dashboard.
+
+# Imports
+require 'socket'
+require_relative './build_pages.rb'
+require_relative './websocket'
+
+
+def launch_server
+
+  # Lauch the TCPServer
+  begin
+    server = TCPServer.new($config[:hostname], $config[:port])
+  rescue Exception => e
+    log_fatal "Server could not start. Error message: #{e}"
+  end
+
+  Thread.abort_on_exception = true
+
+  # Main Loop
+  begin
+    loop {
+      Thread.start(server.accept) do |client|
+        handle_request client
+    end
+  }
+
+  # Handle shutting down.
+  rescue Interrupt
+    log_info "Interrupt received, server shutting down..."
+  end
+end
+
+
+def handle_request socket
+
+  log_info "Receieved request: #{socket}"
+  request = read_HTTP_message socket
+
+  # TODO: check what the minimum allow handling is. I think there's one more method I need to handle.
+  case request[:method]
+  when "GET"
+    # TODO: respond with app, css file, favicon, or 404 error.
+    if request[:fields][:Upgrade] == "websocket\r\n"
+      run_websocket(socket, request)
+    else
+        handle_get(socket, request)
+    end
+  #when "HEAD"
+    # TODO: Deal with HEAD request. https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.4
+  else
+    # TODO: respond with an appropriate error.
+    response "I don't understand what you sent - go away."
+    socket.print "HTTP/1.1 200 OK\r\n" +
+                 "Content-Type: text/plain\r\n" +
+                 "Content-Length: #{response.bytesize}\r\n" +
+                 "Connection: close\r\n" +
+                 "\r\n" +
+                 response
+    socket.close
+  end
+
+end
+
+
+
+# handle_get
+#
+# Handle a get request.
+def handle_get(socket, request)
+
+  case request[:url]
+  when "/", "/index.html"
+    socket.print build_app
+    socket.close
+  when "/app.css"
+    socket.print build_css
+    socket.close
+  else
+    socket.print build_error 404
+    socket.close
+  end
+
+end
+
+
+# read_HTTP_message
+#
+# Read an HTTP message from the socket, and parse it into a request Hash.
+def read_HTTP_message socket
+  message = []
+  loop do
+    line = socket.gets
+    message << line
+    if line == "\r\n"
+      break
+    end
+  end
+
+
+  request = {fields: {}}
+  (request[:method], request[:url], request[:protocol]) = message[0].split(" ")
+
+  message[1..-1].each{ |line|
+    (key, value) = line.split(": ")
+    request[:fields][key.split("-").join("_").to_sym] = value
+  }
+  request
+end

data/lib/easel/websocket.rb

@@ -0,0 +1,207 @@
+#!/snap/bin/ruby
+#
+# Author: Eric Power
+#
+# Description:
+#     Contains the functions that control the websocket. The WebSocket protocol
+#     that I'm implementing/creating has a max frame size of MAX_WS_FRAME_SIZE
+#     bytes.
+#
+# Note: Websocket code is based on the code provided in the following article:
+# https://www.honeybadger.io/blog/building-a-simple-websockets-server-from-scratch-in-ruby/
+
+
+# Imports
+require 'digest'
+require 'open3'
+
+# Key Variables
+MAX_WS_FRAME_SIZE = 50.0
+
+# run_websocket
+#
+#
+def run_websocket(socket, initial_request)
+
+  accept_connection(socket, initial_request[:fields][:Sec_WebSocket_Key][0..-3])
+  child_threads = {}
+
+  loop {
+    msg = receive_msg socket
+    break if msg.nil? # The socket was closed by the client.
+
+    case msg.split(":")[0]
+    when "RUN"
+      cmd_id = msg.match(/^RUN:(.*)$/)[1].to_i
+
+      unless child_threads[cmd_id]
+        child_threads[cmd_id] = Thread.new do
+          run_command_and_stream(socket, cmd_id)
+          child_threads[cmd_id] = nil
+        end
+      end
+    when "STOP"
+
+      cmd_id = msg.match(/^STOP:(.*)$/)[1].to_i
+      unless child_threads[cmd_id].nil?
+        child_threads[cmd_id].kill
+        child_threads[cmd_id] = nil
+      end
+
+    else
+      log_error "Received an unrecognized message over the websocket: #{msg}"
+    end
+  }
+
+end
+
+
+# run_command_and_stream
+#
+# Run a command and stream the stdout and stderr through the websocket.
+def run_command_and_stream(socket, cmd_id)
+
+  cmd = get_command cmd_id
+  if cmd.nil?
+    log_error "Client requested command ID #{cmd_id} be run, but that ID does not exist."
+    return
+  end
+  Open3::popen3(cmd) do |stdin, stdout, stderr, cmd_thread|
+
+    continue = true
+
+    while ready_fds = IO.select([stdout, stderr])[0]
+      ready_fds.each{ |fd|
+        resp = fd.gets
+        if resp.nil?
+          continue = false
+          break
+        end
+        if fd == stdout
+          send_msg(socket, cmd_id, "OUT", resp, )
+        elsif fd == stderr
+          send_msg(socket, cmd_id, "ERR", resp, )
+        else
+          raise "Received output from popen3(#{cmd}) that was not via stdout or stderr."
+        end
+      }
+      break unless continue
+    end
+
+    cmd_thread.join
+    send_msg(socket, cmd_id, "FINISHED")
+  end
+end
+
+
+
+# get_command
+#
+#
+def get_command cmd_id
+  $config[:commands].each { |cmd|
+    if cmd[:id] == cmd_id
+      return cmd[:cmd]
+    end
+  }
+  nil
+end
+
+# accept_connection
+#
+# Sends back the HTTP header to initialize the websocket connection.
+def accept_connection(socket, ws_key)
+
+  ws_accept_key = Digest::SHA1.base64digest(
+    ws_key + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11")
+  socket.write "HTTP/1.1 101 Switching Protocols\r\n" +
+               "Upgrade: websocket\r\n" +
+               "Connection: Upgrade\r\n" +
+               "Sec-WebSocket-Accept: #{ws_accept_key}\r\n" +
+               "\r\n"
+end
+
+
+# receive_msg
+#
+#
+def receive_msg socket
+
+  # Check first two bytes
+  byte1 = socket.getbyte
+  byte2 = socket.getbyte
+  if byte1 == 0x88  # Client is requesting that we close the connection.
+    # TODO: Unsure how to properly handle this case. Right now the socket will close and
+    # everything here will shut down - eventually? Kill all child threads first?
+    log_info "Client requested the websocket be closed."
+    socket.close
+    return
+  end
+  fin = byte1 & 0b10000000
+  opcode = byte1 & 0b00001111
+  msg_size = byte2 & 0b01111111
+  is_masked = byte2 & 0b10000000
+  unless fin and opcode == 1 and is_masked and msg_size < MAX_WS_FRAME_SIZE
+    log_error "Invalid websocket message received. #{byte1}-#{byte2}"
+    puts socket.gets
+    msg_size.times.map { socket.getbyte }  # Read message from socket.
+    return
+  end
+
+  # Get message
+  mask = 4.times.map { socket.getbyte }
+  msg = msg_size.times.map { socket.getbyte }.each_with_index.map {
+    |byte, i| byte ^ mask[i % 4]
+  }.pack('C*').force_encoding('utf-8').inspect
+  msg[1..-2] # Remove quotation marks from message
+
+end
+
+
+# send_msg
+#
+#
+def send_msg(socket, cmd_id, msg_type, msg=nil)
+
+
+  # TODO: Figure out the proper frame size (MAX_WS_FRAME_SIZE).
+  def send_frame(socket, fmsg)
+    output = [0b10000001, fmsg.size, fmsg]
+    socket.write output.pack("CCA#{fmsg.size}")
+  end
+
+  case msg_type
+  when "OUT", "ERR"
+    header = "#{cmd_id}:#{msg_type}:"
+    if header.length > MAX_WS_FRAME_SIZE
+      log_error "Message header '#{msg_type}' is too long. Msg: #{msg}."
+    elsif msg.nil?
+      log_error "Message of type '#{msg_type}' sent without a message."
+    else
+      if msg.length > MAX_WS_FRAME_SIZE - header.length
+        msg_part_len = MAX_WS_FRAME_SIZE - header.length
+        msg_parts = (0..(msg.length-1)/msg_part_len).map{ |i|
+          msg[i*msg_part_len,msg_part_len]
+        }
+        msg_parts.each{ |part|
+          send_frame(socket, header + part)
+        }
+      else
+        send_frame(socket, header + msg)
+      end
+    end
+
+  when "CLEAR", "FINISHED"
+    to_send = "#{cmd_id}:#{msg_type}"
+    if to_send.length > MAX_WS_FRAME_SIZE
+      log_error "Message of type '#{msg_type}' is too long. Msg: #{to_send}."
+    elsif !msg.nil?
+      log_error "Message of type '#{msg_type}' passed a message. Msg: #{msg}."
+    else
+      send_frame(socket, to_send)
+    end
+  else
+    log_error "Trying to send a websocket message with unrecognized type: #{msg_type}"
+  end
+
+end

data/lib/easel.rb

@@ -0,0 +1,135 @@
+#!/snap/bin/ruby
+#
+# Author: Eric Power
+#
+# Description:
+#     Easel Dashboard turns a YAML file into a custom dashboard. See docs/configuration for
+#     a description of how to set up the YAML file.
+
+# Imports
+require 'optparse'
+require 'yaml'
+
+require_relative 'easel/logging'
+require_relative 'easel/server'
+require_relative 'easel/configuration'
+
+# launch
+#
+# Launches the Easel Dashboard. Check the $config variable for defaults, although
+# everything can be overridden by the YAML file (and some by the command line
+# arguments).
+def launch
+
+  parse_ARGV
+
+  # Load the provided YAML
+  overwrite_config $config[:yaml_file]
+  log_info("YAML loaded successfully (from: #{$config[:yaml_file]})")
+  $config[:commands].each_with_index{ |cmd, i| cmd[:id] = i } # Give commands an ID.
+  $config.freeze # Set config to read only
+
+  # Lauch the server
+  log_info("Launching server at #{$config[:hostname]}:#{$config[:port]}")
+  launch_server
+end
+
+
+# parse_ARGV
+#
+# Parses the command line arguments (ARGV) using the optparse gem. Optional
+# command line arguments can be seen by running this program with the -h (or
+# --help) flag.
+def parse_ARGV
+  opt_parser = OptionParser.new do |opts|
+    opts.banner = "Useage: launch.rb [flags] configuration.yaml"
+
+    opts.on("-h", "--help", "Prints this help message.") do
+      puts opts
+      exit
+    end
+
+    opts.on("-l LOG_LEVEL", "--log LOG_LEVEL", Integer, "Sets the logging level (default=2). 0=Silent, 1=Errors, 2=Warnings, 3=Info.") do |lvl|
+      if [0, 1, 2, 3].include?(lvl)
+        $config[:logging] = lvl
+      else
+        log_fatal "Command argument LOG_LEVEL '#{lvl}' not recognized. Expected 0, 1, 2, or 3."
+      end
+    end
+
+    opts.on("-p PORT", "--port PORT", Integer, "Sets the port to bind to. Default is #{$config[:port]}.") do |port|
+      if port >= 0 and port <= 65535
+        $config[:port] = port
+      else
+        log_fatal "Command argument PORT '#{port}' not a valid port. Must be between 0 and 65535 (inclusive)"
+      end
+    end
+
+    opts.on("-h HOST", "--hostname HOST",  "Sets the hostname. Default is '#{$config[:hostname]}'.") do |port|
+      if port >= 0 and port <= 65535
+        $config[:port] = port
+      else
+        log_fatal "Command argument PORT '#{port}' not a valid port. Must be between 0 and 65535 (inclusive)"
+      end
+    end
+
+    opts.on("-o [FILE]", "--output [FILE]",  "Set a log file.") do |filename|
+      begin
+        $config[:log_file] = File.new(filename, "a")
+      rescue Exception => e
+        log_error "Log file could not be open. Sending log to STDIN. Error message: #{e}"
+      end
+    end
+  end.parse!
+
+  if ARGV.length != 1
+    log_fatal "launch.rb takes exactly one file. Try -h for more details."
+  else
+    $config[:yaml_file] = ARGV[0]
+  end
+end
+
+
+# overwrite_config
+#
+# Overwrites the $config fields that are set in the YAML file provided on input.
+# TODO: Log (error?) every key in the YAML file that does not exist in $config.
+def overwrite_config yaml_filename
+
+  # TODO: Rewrite using pattern matching to allow checking if the
+  # yaml_contents.each is one of the base keys. If so, check that the associated
+  # value matches the expected nesting. Do that 'no other values' check.
+
+  # TODO: Ensure that the command names are less than 1020 bytes (because I'm
+  # setting the max length of a single websocket message to 1024 (minus 'STOP:'))
+
+  begin
+    yaml_contents = YAML.load_file $config[:yaml_file]
+  rescue Exception => e
+    log_fatal "YAML failed to load. Error Message: #{e}"
+  end
+
+  def loop_overwrite (config, yaml)
+    yaml.each_key { |key|
+        if yaml[key].is_a? Hash
+          loop_overwrite(config[key.to_sym], yaml[key])
+        elsif yaml[key].is_a? Array
+            config[key.to_sym] = []
+            yaml[key].each { |elmnt|
+              element = {}
+              loop_overwrite(element, elmnt)
+              config[key.to_sym] << element
+            }
+        else
+          config[key.to_sym] = yaml[key]
+        end
+    }
+  end
+
+  loop_overwrite($config, yaml_contents)
+end
+
+
+if __FILE__ == $0
+  launch
+end

data/lib/html/app.css.erb

@@ -0,0 +1,204 @@
+html, body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+        sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+    --size-tiny:           5px;
+    --size-small:           10px;
+    --size-medium:          20px;
+    --size-large:           40px;
+    --size-xlarge:          80px;
+
+    --surface:              <%= $config[:colours][:surface] %>;
+    --background:           <%= $config[:colours][:background] %>;
+    --primary:              <%= $config[:colours][:primary] %>;
+    --secondary:            <%= $config[:colours][:secondary] %>;
+    --on-background:        <%= $config[:colours][:on_background] %>;
+    --on-surface:           <%= $config[:colours][:on_surface] %>;
+    --on-primary:           <%= $config[:colours][:on_primary] %>;
+    --on-secondary:         <%= $config[:colours][:on_secondary] %>;
+    --shadow:               <%= $config[:colours][:shadow] %>;
+    --stdout-colour:        <%= $config[:colours][:stdout_colour] %>;
+    --stderr-colour:        <%= $config[:colours][:stderr_colour] %>;
+
+
+    --text-size-small:      12pt;
+    --text-size:            14pt;
+    --text-size-large:      18pt;
+    --text-size-xlarge:    28pt;
+
+    --text-weight:          300;
+    --text-weight-semi-bold:450;
+    --text-weight-bold:     600;
+
+    background-color: var(--background);
+    color: var(--on-background);
+
+    font-size:      var(--text-size);
+    font-weight:    var(--text-weight);
+    line-height:    1;
+
+    margin: 0;
+    box-sizing: border-box;
+}
+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);}
+
+*{padding: 0; margin: 0;}
+
+
+
+.screen {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  flex-direction: row;
+  justify-content: stretch;
+  align-items: stretch;
+}
+
+.cmd-picker {
+  width: 320px;
+  height: 100%;
+  overflow-y: scroll;
+}
+.cmd-picker .command:not(:last-child) {border-bottom: solid 1px var(--accent);}
+
+.command-box{
+  display: flex;
+  flex-direction: column;
+  background-color: var(--surface);
+  border-radius: var(--size-small);
+  align-items: stretch;
+  margin: var(--size-small);
+  overflow: hidden;
+}
+
+.command-info {
+  background-color: var(--surface);
+  color: var(--on-surface);
+  padding: var(--size-medium);
+  padding-bottom: var(--size-small);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  border-bottom: solid 1px var(--primary);
+  z-index: 3;
+  box-shadow: 0 0 var(--size-small) var(--shadow);
+  cursor: pointer;
+}
+.command-info:hover { color: var(--primary); }
+
+.command-controls {
+  display: flex;
+  flex-direction: row;
+  justify-content: stretch;
+  align-items: baseline;
+  box-shadow: inset 0 var(--size-tiny) var(--size-small) #000000;
+}
+
+.command-icon {
+  flex-grow: 2;
+  text-align: center;
+  padding: var(--size-tiny);
+  background-color: var(--primary);
+  color: var(--on-primary);
+}
+.command-icon:hover {
+  background-color: var(--secondary);
+  color: var(--on-secondary);
+  cursor: pointer;
+}
+
+::-webkit-scrollbar {
+  width: var(--size-small);
+  height: var(--size-small);
+  background-color: var(--background);
+}
+::-webkit-scrollbar-thumb {
+    background: var(--primary);
+    border-radius: var(--size-tiny);
+    border: solid 2px var(--background);
+}
+
+
+
+
+
+
+
+
+
+.interface {
+  /* margin: var(--size-large); */
+  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);
+}
+#interface-title {
+  padding-bottom: var(--size-medium);
+}
+.interface-output {
+  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);
+}
+.interface-commands {
+  width: 33%;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: stretch;
+  border-radius: var(--size-small);
+  overflow: hidden;
+}
+.interface-button {
+  flex-grow: 2;
+  flex-basis: 0;
+  flex-shrink: 2;
+  text-align: center;
+  padding: var(--size-tiny) var(--size-small);
+  background-color: var(--primary);
+  color: var(--on-primary);
+  overflow: hidden;
+}
+.interface-button:hover {
+  background-color: var(--secondary);
+  color: var(--on-secondary);
+  cursor: pointer;
+}
+.top-shadow {
+  position: absolute;
+  width: 100%;
+  transform: translate(calc( -1 * var(--size-small)),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);
+}
+
+
+.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

@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>
+      <%= $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>
+  </head>
+  <body>
+    <div class="screen">
+      <div class="cmd-picker">
+
+        <% $config[:commands].each do |command| %>
+          <div class="command-box">
+            <div class="command-info"
+              onclick="load_pane(<%=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"
+                id="cmd-<%=command[:id]%>-run-icon"
+                onclick="toggle_run(<%= command[:id] %>)">
+                Run
+              </div>
+              <div class="command-icon"
+                id="cmd-<%=command[:id]%>-log-icon"
+                onclick="load_pane(<%=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>
+      </div>
+    </div>
+  </body>
+</html>

data/lib/html/error.html.erb

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>
+      <%= "CDash - #{code} + Error" %>
+    </title>
+    <link rel="stylesheet" href="/app.css">
+  </head>
+  <body>
+    <h2>
+      <%= "#{code} + Error" %>
+    </h2>
+    <p>
+      <%= @code_names[404] %>
+    </p>
+  </body>
+</html>

metadata

@@ -0,0 +1,56 @@
+--- !ruby/object:Gem::Specification
+name: easel-dashboard
+version: !ruby/object:Gem::Version
+  version: 0.4.2
+platform: ruby
+authors:
+- Eric Power
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2021-09-16 00:00:00.000000000 Z
+dependencies: []
+description: Use a YAML file to set up a dashboard, and change everything from the
+  page colours to the commands that can be run. The dashboard shows the output of
+  each command, which can be used to monitor server health, running processes, and
+  much more.
+email: ericpower@outlook.com
+executables:
+- easel
+extensions: []
+extra_rdoc_files: []
+files:
+- bin/easel
+- lib/easel.rb
+- lib/easel/build_pages.rb
+- lib/easel/configuration.rb
+- lib/easel/logging.rb
+- lib/easel/server.rb
+- lib/easel/websocket.rb
+- lib/html/app.css.erb
+- lib/html/app.html.erb
+- lib/html/error.html.erb
+homepage: https://github.com/epwr/cdash
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.2.22
+signing_key: 
+specification_version: 4
+summary: Easily set up and serve a dashboard using only a YAML file.
+test_files: []