magnus/smon
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases 6 Wiki Activity

Time filtering of notifications

Browse Source
This commit is contained in:
Magnus Åhall 2024-06-29 19:30:26 +02:00
parent b0ffce05f0
commit 17a22caa5d
9 changed files with 291 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
main.go
View File

@ -1198,7 +1198,45 @@ func actionConfigurationNotificationDelete(w http.ResponseWriter, r *http.Reques
} // }}}
func pageNotifications(w http.ResponseWriter, r *http.Request, _ *session.T) { // {{{
nss, err := notificationsSent()
var err error
// GET parameters.
var timeFrom, timeTo time.Time
lastWeek := time.Now().Add(time.Duration(-7 * 24 * time.Hour))
timeFrom, err = parseHTMLDateTime(r.URL.Query().Get("f"), lastWeek)
if err != nil {
httpError(w, werr.Wrap(err).Log())
return
}
timeTo, err = parseHTMLDateTime(r.URL.Query().Get("t"), time.Now())
if err != nil {
httpError(w, werr.Wrap(err).Log())
return
}
var presetTime int
now := time.Now()
presetStr := r.URL.Query().Get("preset")
if presetStr != "" {
presetTime, err = strconv.Atoi(presetStr)
if err != nil {
pageError(w, "/notifications", werr.Wrap(err).WithData(presetStr).Log())
return
}
timeFrom = now.Add(time.Hour * -1 * time.Duration(presetTime))
timeTo = now
}
// Apply an optionally set offset (in seconds).
var offsetTime int
offsetTimeStr := r.URL.Query().Get("offset-time")
offsetTime, err = strconv.Atoi(offsetTimeStr)
timeFrom = timeFrom.Add(time.Second * time.Duration(offsetTime))
timeTo = timeTo.Add(time.Second * time.Duration(offsetTime))
nss, err := notificationsSent(timeFrom, timeTo)
if err != nil {
pageError(w, "/", werr.Wrap(err).Log())
}
@ -1209,6 +1247,8 @@ func pageNotifications(w http.ResponseWriter, r *http.Request, _ *session.T) { /
CONFIG: smonConfig.Settings,
Data: map[string]any{
"Notifications": nss,
"TimeFrom": timeFrom.Format("2006-01-02T15:04:05"),
"TimeTo": timeTo.Format("2006-01-02T15:04:05"),
},
}

13
notification_log.go
View File

@ -40,7 +40,7 @@ func notificationLog(notificationService *notification.Service, problemID int, e
}
}
func notificationsSent() (nss []NotificationSend, err error) {
func notificationsSent(from, to time.Time) (nss []NotificationSend, err error) {
var rows *sqlx.Rows
rows, err = service.Db.Conn.Queryx(
`
@ -57,15 +57,20 @@ func notificationsSent() (nss []NotificationSend, err error) {
ns.error::varchar,
ns.acknowledged
FROM
public.notification_send ns
FROM public.notification_send ns
INNER JOIN notification n ON ns.notification_id = n.id
INNER JOIN problem p ON ns.problem_id = p.id
INNER JOIN "trigger" t ON p.trigger_id = t.id
WHERE
ns.send >= $1 AND
ns.send <= $2
ORDER BY
send DESC
`)
`,
from,
to,
)
if err != nil {
err = werr.Wrap(err)
return

7
static/css/default_light/default_light.css
View File

@ -40,11 +40,16 @@ button:focus {
#areas .area .section .name {
font-weight: normal;
}
dialog {
border-radius: 8px;
}
dialog,
#datapoints,
#problems-list,
#acknowledged-list,
#values,
#services {
#services,
#notifications {
background-color: #fff !important;
border: 1px solid #ddd;
box-shadow: 5px 5px 8px 0px rgba(0, 0, 0, 0.25);

45
static/css/default_light/notifications.css
View File

@ -1,3 +1,42 @@
#time-select {
display: grid;
grid-template-columns: min-content min-content;
grid-gap: 6px 16px;
padding: 16px;
border: 1px solid #7bb8eb;
width: min-content;
border-radius: 6px;
}
#time-select button {
width: 100px;
margin-top: 12px;
justify-self: end;
}
#time-select #time-offsets {
display: grid;
grid-template-columns: min-content repeat(3, min-content);
grid-gap: 16px;
margin-top: 16px;
align-items: center;
justify-items: center;
}
#time-select #time-offsets .header-1 {
font-weight: bold;
justify-self: start;
}
#time-select #time-offsets .header-2 {
font-weight: bold;
justify-self: start;
grid-column: 2 / -1;
}
#time-select #time-offsets .preset {
white-space: nowrap;
justify-self: start;
padding-right: 32px;
}
input[type="datetime-local"] {
padding: 6px;
}
#notifications {
display: grid;
grid-template-columns: repeat(5, min-content);
@ -18,3 +57,9 @@
font-weight: 800;
color: #7bb8eb;
}
#notifications .ok {
color: #0a0;
}
#notifications .error {
color: #a00;
}

7
static/css/gruvbox/default_light.css
View File

@ -40,11 +40,16 @@ button:focus {
#areas .area .section .name {
font-weight: normal;
}
dialog {
border-radius: 8px;
}
dialog,
#datapoints,
#problems-list,
#acknowledged-list,
#values,
#services {
#services,
#notifications {
background-color: #fff !important;
border: 1px solid #ddd;
box-shadow: 5px 5px 8px 0px rgba(0, 0, 0, 0.25);

45
static/css/gruvbox/notifications.css
View File

@ -1,3 +1,42 @@
#time-select {
display: grid;
grid-template-columns: min-content min-content;
grid-gap: 6px 16px;
padding: 16px;
border: 1px solid #777;
width: min-content;
border-radius: 6px;
}
#time-select button {
width: 100px;
margin-top: 12px;
justify-self: end;
}
#time-select #time-offsets {
display: grid;
grid-template-columns: min-content repeat(3, min-content);
grid-gap: 16px;
margin-top: 16px;
align-items: center;
justify-items: center;
}
#time-select #time-offsets .header-1 {
font-weight: bold;
justify-self: start;
}
#time-select #time-offsets .header-2 {
font-weight: bold;
justify-self: start;
grid-column: 2 / -1;
}
#time-select #time-offsets .preset {
white-space: nowrap;
justify-self: start;
padding-right: 32px;
}
input[type="datetime-local"] {
padding: 6px;
}
#notifications {
display: grid;
grid-template-columns: repeat(5, min-content);
@ -18,3 +57,9 @@
font-weight: 800;
color: #777;
}
#notifications .ok {
color: #0a0;
}
#notifications .error {
color: #a00;
}

6
static/less/default_light.less
View File

@ -58,7 +58,11 @@ button {
}
}
#datapoints, #problems-list, #acknowledged-list, #values, #services {
dialog {
border-radius: 8px;
}
dialog, #datapoints, #problems-list, #acknowledged-list, #values, #services, #notifications {
background-color: #fff !important;
border: 1px solid #ddd;
box-shadow: 5px 5px 8px 0px rgba(0,0,0,0.25);

57
static/less/notifications.less
View File

@ -1,5 +1,54 @@
@import "theme-@{THEME}.less";
#time-select {
display: grid;
grid-template-columns: min-content min-content;
grid-gap: 6px 16px;
padding: 16px;
border: 1px solid @text3;
width: min-content;
border-radius: 6px;
button {
//grid-column: ~"1 / -1";
width: 100px;
margin-top: 12px;
justify-self: end;
}
#time-offsets {
display: grid;
grid-template-columns: min-content repeat(3, min-content);
grid-gap: 16px;
margin-top: 16px;
align-items: center;
justify-items: center;
.header-1 {
font-weight: bold;
justify-self: start;
}
.header-2 {
font-weight: bold;
justify-self: start;
grid-column: ~"2 / -1";
}
.preset {
white-space: nowrap;
justify-self: start;
padding-right: 32px;
}
}
}
input[type="datetime-local"] {
padding: 6px;
}
#notifications {
display: grid;
grid-template-columns: repeat(5, min-content);
@ -21,4 +70,12 @@
font-weight: @bold;
color: @text3;
}
.ok {
color: #0a0;
}
.error {
color: #a00;
}
}

79
views/pages/notifications.gotmpl
View File

@ -4,6 +4,67 @@
{{ $version := .VERSION }}
{{ $theme := .CONFIG.THEME }}
<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/{{ .CONFIG.THEME }}/notifications.css">
<script type="text/javascript">
function dialogClick(evt) {
if (evt.target.tagName.toUpperCase() == 'DIALOG') {
evt.target.close()
}
}
function preset(hours) {
const inputPreset = document.querySelector('input[name="preset"]')
inputPreset.value = hours
inputPreset.form.submit()
}
function offsetTime(seconds) {
const el = document.querySelector('input[name="offset-time"]')
el.value = seconds
el.form.submit()
}
</script>
<form action="/notifications" method="get">
<input type="hidden" name="preset" value="">
<input type="hidden" name="offset-time" value="">
<div id="time-select">
<div>From</div>
<div>To</div>
<input name="f" value="{{ .Data.TimeFrom }}" type="datetime-local">
<input name="t" value="{{ .Data.TimeTo }}" type="datetime-local">
<div id="time-offsets">
<div class="header-1">Presets</div>
<div class="header-2">Offsets</div>
<div class="preset"><a href="#" onclick="preset(1)">Last hour</a></div>
<div><a href="#" onclick="offsetTime(-3600)">◀</a></div>
<div>Hour</div>
<div><a href="#" onclick="offsetTime(3600)">▶</a></div>
<div class="preset"><a href="#" onclick="preset(24)">Last 24 hours</a></div>
<div><a href="#" onclick="offsetTime(-86400)">◀</a></div>
<div>Day</div>
<div><a href="#" onclick="offsetTime(86400)">▶</a></div>
<div class="preset"><a href="#" onclick="preset(24 * 7)">Last 7 days</a></div>
<div><a href="#" onclick="offsetTime(-7 * 86400)">◀</a></div>
<div>Week</div>
<div><a href="#" onclick="offsetTime(7 * 86400)">▶</a></div>
<div class="preset"><a href="#" onclick="preset(24 * 7 * 31)">Last 31 days</a></div>
<div><a href="#" onclick="offsetTime(-31 * 86400)">◀</a></div>
<div>Month</div>
<div><a href="#" onclick="offsetTime(31 * 86400)">▶</a></div>
</div>
<button>OK</button>
</div>
</form>
<div id="notifications">
<div class="header">Sent</div>
@ -13,10 +74,24 @@
<div class="header">Error</div>
{{ range .Data.Notifications }}
<div>{{ format_time .Sent }}</div>
<div>{{ if .OK }}✔{{ else }}✗{{ end }}</div>
<div>{{ if .OK }}<span class="ok">✔</span>{{ else }}<span class="error">✗</span>{{ end }}</div>
<div>{{ .TriggerName }}</div>
<div>{{ .Prio }}:{{ .Service }}</div>
<div><pre>{{ if .Error.Valid }}{{ .ErrorIndented }}{{ end }}</pre></div>
<div>
{{ if .Error.Valid }}
<img src="/images/{{ $version }}/{{ $theme }}/info-filled.svg" onclick="document.getElementById('error-{{ .ID }}').showModal()">
<dialog id="error-{{ .ID }}" onclick="dialogClick(event)">
<div style="padding: 16px 32px">
<pre>{{ .ErrorIndented }}</pre>
<div style="text-align: center">
<button onclick="document.getElementById('error-{{ .ID }}').close()">Close</button>
</div>
</div>
</dialog>
{{ else }}
<img src="/images/{{ $version }}/{{ $theme }}/info-outline.svg">
{{ end }}
</div>
{{ end }}
</div>