dynamic alert dump via filters

report.tmpl

@@ -40,17 +40,79 @@
 
       function drawAll() {
          const messages = filterMessages(allMessages)
+         console.log(messages);
+
+         dumpEvents(messages);
          drawEventVolumeByName(messages)
          drawEventVolumeByWeekday(messages)
          drawEventVolumeByHour(messages)
          drawEventVolumeByAsset(messages)
       }
 
+      function dumpEvents(messages) {
+         const eventToThreads = {};
+         for(var m of messages) {
+            if (!eventToThreads[m.Event])
+               eventToThreads[m.Event] = [];
+            eventToThreads[m.Event].push(m.Thread);
+         }
+
+         const threadToMessages = {};
+         for(var m of messages) {
+            if (!threadToMessages[m.Thread])
+               threadToMessages[m.Thread] = [];
+            threadToMessages[m.Thread].push(m);
+         }
+
+         const eventToMessages = {};
+         for(var e in eventToThreads) {
+            if (!eventToMessages[e])
+               eventToMessages[e] = [];
+            for (var thread of eventToThreads[e])
+               eventToMessages[e] = eventToMessages[e].concat(threadToMessages[thread]);
+         }
+         for(var e in eventToMessages)
+            eventToMessages[e].sort((a, b) => a.TS - b.TS);
+         var events = Object.keys(eventToMessages);
+         events.sort();
+         events.reverse();
+
+         var keys = ["TS", "Event", "EventName", "Latest"];
+         document.getElementById("events").innerHTML = `
+              <tr>
+                <th>TS</th>
+                <th>Event</th>
+                <th>EventName</th>
+                <th>Latest</th>
+              </tr>
+              ${events.map((e) => `
+                <tr>
+                  <td><a href="${eventToMessages[e][0].Source}">${new Date(eventToMessages[e][0].TS * 1000).toDateString()}</a></td>
+                  <td><a href="${eventToMessages[e][0].Source}">${eventToMessages[e][0].Event}</a></td>
+                  <td>${eventToMessages[e][0].EventName}</td>
+                  <td><a href="${eventToMessages[e].at(-1).Source}">${eventToMessages[e].at(-1).Plaintext}</a></td>
+                </tr>
+              `).join("")}
+         `;
+      }
+
       function filterMessages(messages) {
-         const filters = document.getElementById("form");
-         console.log(filters);
-         return messages.map(() => {
-         });
+         const selects = document.getElementById("form").getElementsByTagName("select");
+         const fieldsToOptions = {};
+         for(var select of selects) {
+            fieldsToOptions[select.name] = [];
+            for(var option of select.getElementsByTagName("option"))
+               if (option.selected)
+                  fieldsToOptions[select.name].push(option.innerHTML);
+         }
+         return messages.map((m) => {
+            for(var k in fieldsToOptions) {
+               if (fieldsToOptions[k].filter((v) => `${v}` == `${m[k]}`).length == 0) {
+                  return null;
+               }
+            }
+            return m;
+         }).filter((m) => { return m != null });
       }
 
       function drawEventVolumeByName() {}
@@ -108,21 +170,7 @@
         <rows>
           <div>
             <h2>Events</h2>
-            <table>
-              <tr>
-                <th>TS</th>
-                <th>Event</th>
-                <th>EventName</th>
-                <th>Latest</th>
-              </tr>
-              {{ range .events.Events }}
-                <tr>
-                  <td><a href="{{ .First.Source }}">{{ time "Unix" .First.TS | time "Time.Format" "Mon Jan 02" }}</a></td>
-                  <td><a href="https://TODO">{{ .Event }}</a></td>
-                  <td>{{ .First.EventName }}</td>
-                  <td><a href="{{ .Last.Source }}">{{ .Last.Plaintext }}</a></td>
-                </tr>
-              {{ end }}
+            <table id="events">
             </table>
           </div>
         </rows>