131 lines
3.8 KiB
Cheetah
131 lines
3.8 KiB
Cheetah
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
|
|
<script type="module">
|
|
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
|
|
</script>
|
|
<script>
|
|
const allMessages = {{ json "Marshal" .messages }};
|
|
console.log(allMessages);
|
|
|
|
function fillForm() {
|
|
const filterableFields = [
|
|
"EventName",
|
|
"Asset",
|
|
];
|
|
const fieldsToOptions = {};
|
|
filterableFields.map((field) => {fieldsToOptions[field] = {}});
|
|
allMessages.map((message) => {
|
|
Object.keys(fieldsToOptions).map((field) => {fieldsToOptions[field][message[field]] = true});
|
|
});
|
|
Object.keys(fieldsToOptions).map((field) => {fieldsToOptions[field] = Object.keys(fieldsToOptions[field]); fieldsToOptions[field].sort();});
|
|
|
|
document.getElementById("form").innerHTML = Object.keys(fieldsToOptions).map((field) => {
|
|
return `
|
|
<label for="${field}">${field}</label>
|
|
<select name="${field}" multiple ${fieldsToOptions[field].length > 10 ? "size=10" : `size=${fieldsToOptions[field].length}`}>
|
|
${fieldsToOptions[field].map((option) => `
|
|
<option selected>${option}</option>
|
|
`)}
|
|
</select>
|
|
`
|
|
}).join("\n");
|
|
}
|
|
|
|
function drawAll() {
|
|
const messages = filterMessages(allMessages)
|
|
drawEventVolumeByName(messages)
|
|
drawEventVolumeByWeekday(messages)
|
|
drawEventVolumeByHour(messages)
|
|
drawEventVolumeByAsset(messages)
|
|
}
|
|
|
|
function filterMessages(messages) {
|
|
const filters = document.getElementById("form");
|
|
console.log(filters);
|
|
return messages.map(() => {
|
|
});
|
|
}
|
|
|
|
function drawEventVolumeByName() {}
|
|
|
|
function drawEventVolumeByWeekday() {}
|
|
|
|
function drawEventVolumeByHour() {}
|
|
|
|
function drawEventVolumeByAsset() {}
|
|
</script>
|
|
<style>
|
|
rows {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
}
|
|
columns {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-grow: 1;
|
|
}
|
|
rows, columns { border: 1px solid red; }
|
|
</style>
|
|
</head>
|
|
<body onload="fillForm(); drawAll();">
|
|
<h1>Report</h1>
|
|
<columns>
|
|
<form style="width: 16em; flex-shrink: 0;" onsubmit="drawAll(); return false;">
|
|
<columns>
|
|
<button type="submit">Apply</button>
|
|
</columns>
|
|
<rows id="form"></rows>
|
|
</form>
|
|
<rows>
|
|
<rows>
|
|
<rows>
|
|
<h2>Event Volume by Name</h2>
|
|
<div>DRAW ME</div>
|
|
</rows>
|
|
<columns>
|
|
<rows>
|
|
<h3>by Weekday</h3>
|
|
<div>DRAW ME</div>
|
|
</rows>
|
|
<rows>
|
|
<h3>by Hour</h3>
|
|
<div>DRAW ME</div>
|
|
</rows>
|
|
</columns>
|
|
<rows>
|
|
<h3>by Asset</h3>
|
|
<div>DRAW ME</div>
|
|
</rows>
|
|
</rows>
|
|
<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>
|
|
</div>
|
|
</rows>
|
|
</rows>
|
|
</columns>
|
|
</body>
|
|
<footer>
|
|
</footer>
|
|
</html>
|