From 683eb7073cb852b2e733a8231052dbae628ea201 Mon Sep 17 00:00:00 2001 From: mg Date: Wed, 18 Sep 2019 20:04:12 -0300 Subject: [PATCH] Improvements to Dashboard page, adding filters. --- nginx/generate-config | 4 +- thrimbletrimmer/dashboard.html | 126 +++++++++++++++++++++++++++++++-- thrimbletrimmer/index.html | 5 ++ 3 files changed, 128 insertions(+), 7 deletions(-) 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

+ + +
+
+ +
+
+ +
+
+
Category Filter
+
    +
    +
    +
    State Filter
    +
      +
      + +
      - + @@ -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 = ` @@ -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); \ No newline at end of file diff --git a/thrimbletrimmer/index.html b/thrimbletrimmer/index.html index be0df2a..0ce8936 100644 --- a/thrimbletrimmer/index.html +++ b/thrimbletrimmer/index.html @@ -1,4 +1,9 @@ +
      Start Time End TimeEvent TypeCategory Description State Edit${event.event_start} ${event.event_end}