docs: Add readme and contributing.

CONTRIBUTING.md

@@ -0,0 +1,36 @@
+# Contributing to Heracles
+
+If you would like to help out with Heracles development then this document
+outlines what you can expect.
+
+Heracles is licensed under the Apache 2.0 license. You are welcome to clone or
+copy this source and make any modifications you like with no obligations other
+than what is in the License. If you wish to contribute those changes back then
+you should follow the below steps.
+
+1. Create or identify an existing Github Issue outlining what you wish to add to the project.
+   This will allow you to get feedback on whether your proposed changes fit with
+   the direction I want to take Heracles in.
+2. Submit a PR to the project referencing the Issue from above for review.
+   At this time I have no defined SLA on responses to PRs or Issues since this
+   is effectively a hobby project for personal use. Don't let that discourage
+   you though. If you are patient I will eventually get back to you.
+3. If all goes well with the above then your PR will get merged.
+
+## Notes on acceptable contributions
+
+* We are not interested in adding a database for configuration at this time.
+* Alternative sources of metrics or log queries are of interest to us.
+  But note that if the system is not one I use regularly or have access to then
+  my capacity to maintain that integration will be limited. It's continued
+  existence in Heracles will be dependent on your support of it. If that support
+  is beyond you it may get removed in future versions.
+* We wish to preserve the single binary deploy nature of Heracles. So changes that
+  violate that will be rejected.
+
+# Code of Conduct
+
+Mostly I just want you to be respectful and professional, but the arbiter of
+that is me. I'm not interested in getting super legal about what is allowed and
+what isn't at this time. If you act like a bully then you'll be persona non
+grata. Otherwise have fun with the project.

README.md

@@ -1,2 +1,15 @@
 # Heracles
-An alternative dashboard viewer and manager for prometheus style metrics
+
+An alternative dashboard viewer and manager for prometheus style metrics.
+
+* Stateless. There is no persistent storage for this dashboard.
+* File based configuration. Just YAML to define your dashbaords.
+* Single binary install
+
+Basically this is a small handmade simple to deploy dashboard viewer for prometheus metrics
+and loki log queries.
+
+We aren't looking to make it a full on replacement for Grafana/New Relic/Honeycomb or any
+of those things. But if you want an easy to deploy and use dashboard viewer for your homelab
+then this might be make your life just a little bit simpler.
+

static/lib.js

@@ -333,7 +333,6 @@ export class GraphPlot extends HTMLElement {
       * @returns {HTMLDivElement}
       */
     buildSelectElement(key) {
-        // TODO(jwall): Should we have a select all?
         var id = key + "-select" + Math.random();
         const element = document.createElement("div");
         const select = document.createElement("select");
@@ -341,13 +340,14 @@ export class GraphPlot extends HTMLElement {
         // TODO(jwall): This is how you set boolean attributes. Use the attribute named... :-(
         select.setAttribute("multiple", "multiple");
         const optElement = document.createElement("option");
-        const optValue = "Select " + key;
+        const optValue = "Select All: " + key;
         optElement.innerText = optValue;
         select.appendChild(optElement);
         for (var opt of this.#filterLabels[key]) {
             const optElement = document.createElement("option");
             optElement.setAttribute("value", opt);
             optElement.setAttribute("selected", "selected");
+            optElement.selected = true;
             optElement.innerText = opt;
             select.appendChild(optElement);
         }
@@ -356,8 +356,29 @@ export class GraphPlot extends HTMLElement {
         select.onchange = function(evt) {
             evt.stopPropagation();
             var filteredValues = [];
-            for (var opt of /** @type {HTMLSelectElement} */(evt.target).selectedOptions) {
-                filteredValues.push(opt.getAttribute("value"));
+            const selectElement = /** @type {HTMLSelectElement} */(evt.target);
+            var selectAll = /** @type {?HTMLOptionElement}*/(null);
+            for (const optEl of selectElement.selectedOptions) {
+                if (optEl.value && optEl.value.startsWith("Select All: ")) {
+                    selectAll = optEl;
+                    break;
+                }
+            }
+            for (const o of selectElement.options) {
+                if (selectAll) {
+                    if (o != selectAll) {
+                        o.setAttribute("selected", "selected");
+                        o.selected = true;
+                        filteredValues.push(o.value);
+                    } else {
+                        o.removeAttribute("selected");
+                    }
+                } else if (!o.selected) {
+                    o.removeAttribute("selected");
+                } else {
+                    o.setAttribute("selected", "selected");
+                    filteredValues.push(o.value);
+                }
             }
             self.#filteredLabelSets[key] = filteredValues;
             self.reset(true);
@@ -527,7 +548,7 @@ export class GraphPlot extends HTMLElement {
                     columnwidth: [15, 20, 70],
                     header: {
                         align: "left",
-                        values: ["Timestamp","Labels", "Log"],
+                        values: ["Timestamp", "Labels", "Log"],
                         fill: { color: layout.xaxis.paper_bgcolor },
                         font: { color: getCssVariableValue('--text-color').trim() }
                     },
@@ -540,7 +561,7 @@ export class GraphPlot extends HTMLElement {
                 const dateColumn = [];
                 const metaColumn = [];
                 const logColumn = [];
-                
+
                 loopStream: for (const pair of subplot.Stream) {
                     const labels = pair[0];
                     var labelList = [];
@@ -556,7 +577,6 @@ export class GraphPlot extends HTMLElement {
                     // TODO(jwall): Headers
                     for (const line of lines) {
                         // For streams the timestamps are in nanoseconds
-                        // TODO(zaphar): We should improve the timstamp formatting a bit
                         let timestamp = new Date(line.timestamp / 1000000);
                         dateColumn.push(timestamp.toISOString());
                         metaColumn.push(labelsName);

static/site.css

@@ -39,6 +39,10 @@ input, textarea, select, option, button {
     border-radius: 4px;
 }
 
+option[selected] {
+    background-color: var(--plot-background-color);
+}
+
 body * {
     padding-left: .3em;
     padding-right: .3em;