diff --git a/nginx/generate-config b/nginx/generate-config
index fe563e5..6d5b3b8 100755
--- a/nginx/generate-config
+++ b/nginx/generate-config
@@ -14,8 +14,8 @@ LOCATIONS=$(
[ "$name" == "restreamer" ] && generate_location / "http://restreamer:$port"
# thrimshim takes any calls to thrimshim/
[ "$name" == "thrimshim" ] && generate_location /thrimshim "http://thrimshim:$port"
- # thrimbletrimmer takes any calls to thrimbletrimmer/; serves content from /etc/nginx/html/thrimbletrimmer
- [ "$name" == "thrimbletrimmer" ] && echo -e "\t\tlocation /thrimbletrimmer { }"
+ # thrimbletrimmer takes any calls to thrimbletrimmer/; serves content from /etc/nginx/html/thrimbletrimmer; requests to the plain URL get redirect to the dashboard page.
+ [ "$name" == "thrimbletrimmer" ] && echo -e "\t\tlocation = / { return 301 \$scheme://\$host/thrimbletrimmer/dashboard.html; }\n\t\tlocation /thrimbletrimmer { }"
# all services have metrics under /metrics/SERVICE, except for thrimebletrimmer
[ "$name" != "thrimbletrimmer" ] && generate_location "/metrics/$name" "http://$name:$port/metrics"
done
diff --git a/thrimbletrimmer/dashboard.html b/thrimbletrimmer/dashboard.html
index c3d4f5c..f4f7b6b 100644
--- a/thrimbletrimmer/dashboard.html
+++ b/thrimbletrimmer/dashboard.html
@@ -9,7 +9,10 @@
+
@@ -80,11 +103,32 @@
Wubloader Queue
+
+
+
| Start Time |
End Time |
- Event Type |
+ Category |
Description |
State |
Edit |
@@ -99,9 +143,70 @@
// document.getElementById("StreamStart").value = new Date(startOfHour.getTime() - 1000*60*60).toISOString().substring(0,19);
// document.getElementById("StreamEnd").value = startOfHour.toISOString().substring(0,19);
- fetch("/thrimshim").then(data => data.json()).then(function (data) {
- data.forEach((event) => {
- var row = document.createElement("TR");
+ async function getEvents() {
+ let response = await fetch("/thrimshim");
+ let data = await response.json();
+ return data;
+ }
+
+ function populateFilters(events) {
+ var urlParams = new URLSearchParams(window.location.search);
+
+ //Set up Date filters
+ if (urlParams.has("start")) {
+ document.getElementById("DateFilterStart").value = urlParams.get("start");
+ }
+ if (urlParams.has("end")) {
+ document.getElementById("DateFilterEnd").value = urlParams.get("end");
+ }
+
+ //Set up Category filters
+ let categoryFilters = urlParams.has("category") ? urlParams.get("category").split(","):null;
+ new Set(events.map(event => event.category)).forEach((category, index) => {
+ let row = document.createElement("TR");
+ row.innerHTML = `=0 ? "checked":""}>`;
+ document.getElementById('CategoryFilter').appendChild(row);
+ });
+
+ //Set up State filters
+ let stateFilters = urlParams.has("state") ? urlParams.get("state").split(","):null;
+ new Set(events.map(event => event.state)).forEach((state, index) => {
+ let row = document.createElement("TR");
+ row.innerHTML = `=0 ? "checked":""}>`;
+ document.getElementById('StateFilter').appendChild(row);
+ });
+ return events;
+ }
+
+ function filterEvents(events) {
+ if(!window.location.search) { return events; }
+
+ var urlParams = new URLSearchParams(window.location.search);
+
+ if(urlParams.has("start")) {
+ let startDate = new Date(urlParams.get("start"));
+ events = events.filter(event => new Date(event.event_start) >= startDate);
+ }
+
+ if(urlParams.has("end")) {
+ let endDate = new Date(urlParams.get("end"));
+ events = events.filter(event => new Date(event.event_start) <= endDate);
+ }
+
+ if(urlParams.has("category")) {
+ events = events.filter(event => urlParams.get("category").split(",").indexOf(event.category) >= 0);
+ }
+
+ if(urlParams.has("state")) {
+ events = events.filter(event => urlParams.get("state").split(",").indexOf(event.state) >= 0);
+ }
+
+ return events;
+ }
+
+ function populateTable (events) {
+ events.forEach(event => {
+ let row = document.createElement("TR");
row.innerHTML = `
${event.event_start} |
${event.event_end} |
@@ -114,7 +219,18 @@
`;
document.getElementById('QueueTable').appendChild(row);
});
- });
+ }
+
+ function applyFilters() {
+ let startDateFilter = document.getElementById("DateFilterStart").value;
+ let endDateFilter = document.getElementById("DateFilterEnd").value;
+ let categoryfilters = Array.from(document.querySelectorAll("#CategoryFilter :checked")).map(checkbox => checkbox.getAttribute("filtervalue")).join();
+ let statefilters = Array.from(document.querySelectorAll("#StateFilter :checked")).map(checkbox => checkbox.getAttribute("filtervalue")).join();
+ window.location.href = `/thrimbletrimmer/dashboard.html?${startDateFilter ? "start="+startDateFilter+"&":""}${endDateFilter ? "end="+endDateFilter+"&":""}category=${categoryfilters}&state=${statefilters}`;
+ }
+
+ //On Page Load
+ getEvents().then(populateFilters).then(filterEvents).then(populateTable);