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

Refactored time filter.

Browse Source
This commit is contained in:
Magnus Åhall 2024-07-04 13:29:39 +02:00
parent 4c908f4891
commit 9700bc9d3c
16 changed files with 252 additions and 296 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
helper.go
View File

@ -63,7 +63,7 @@ func applyTimeOffset(t time.Time, duration time.Duration, amountStr string) time
return t.Add(duration * time.Duration(amount))
} // }}}
func presetTimeInterval(duration time.Duration, presetStr string, timeFrom, timeTo *time.Time) () {
func presetTimeInterval(duration time.Duration, presetStr string, timeFrom, timeTo *time.Time) () {// {{{
if presetStr == "" {
return
}
@ -73,4 +73,4 @@ func presetTimeInterval(duration time.Duration, presetStr string, timeFrom, time
(*timeFrom) = now.Add(duration * -1 * time.Duration(presetTime))
(*timeTo) = now
return
}
}// }}}

75
main.go
View File

@ -709,31 +709,14 @@ func pageDatapointValues(w http.ResponseWriter, r *http.Request, _ *session.T) {
return
}
// GET parameters.
display := r.URL.Query().Get("display")
if display == "" && datapoint.Datatype == INT {
display = "graph"
}
// Manage the values from the timefilter component
var timeFrom, timeTo time.Time
yesterday := time.Now().Add(time.Duration(-24 * time.Hour))
timeFrom, err = parseHTMLDateTime(r.URL.Query().Get("f"), yesterday)
if err != nil {
httpError(w, werr.Wrap(err).WithData(r.URL.Query().Get("f")).Log())
return
}
timeTo, err = parseHTMLDateTime(r.URL.Query().Get("t"), time.Now())
if err != nil {
httpError(w, werr.Wrap(err).WithData(r.URL.Query().Get("t")).Log())
return
}
presetTimeInterval(time.Hour, r.URL.Query().Get("preset"), &timeFrom, &timeTo)
// Apply an optionally set offset (in seconds).
timeFrom = applyTimeOffset(timeFrom, time.Second, r.URL.Query().Get("offset-time"))
timeTo = applyTimeOffset(timeTo, time.Second, r.URL.Query().Get("offset-time"))
timeFrom, timeTo, err = timefilterParse(
r.URL.Query().Get("time-f"),
r.URL.Query().Get("time-t"),
r.URL.Query().Get("time-offset"),
r.URL.Query().Get("time-preset"),
)
// Fetch data point values according to the times.
var values []DatapointValue
@ -743,6 +726,12 @@ func pageDatapointValues(w http.ResponseWriter, r *http.Request, _ *session.T) {
return
}
// GET parameters.
display := r.URL.Query().Get("display")
if display == "" && datapoint.Datatype == INT {
display = "graph"
}
page := Page{
LAYOUT: "main",
PAGE: "datapoint_values",
@ -755,9 +744,11 @@ func pageDatapointValues(w http.ResponseWriter, r *http.Request, _ *session.T) {
page.Data = map[string]any{
"Datapoint": datapoint,
"Values": values,
"TimeFrom": timeFrom.Format("2006-01-02T15:04:05"),
"TimeTo": timeTo.Format("2006-01-02T15:04:05"),
"Display": display,
"TimeSubmit": "/datapoint/values/" + strconv.Itoa(datapoint.ID),
"TimeFrom": timeFrom.Format("2006-01-02T15:04:05"),
"TimeTo": timeTo.Format("2006-01-02T15:04:05"),
}
page.Render(w, r)
return
@ -770,14 +761,14 @@ func actionDatapointJson(w http.ResponseWriter, r *http.Request, _ *session.T) {
return
}
fromStr := r.URL.Query().Get("f")
fromStr := r.URL.Query().Get("time-f")
from, err := time.ParseInLocation("2006-01-02 15:04:05", fromStr[0:min(19, len(fromStr))], smonConfig.Timezone())
if err != nil {
httpError(w, werr.Wrap(err).Log())
return
}
toStr := r.URL.Query().Get("t")
toStr := r.URL.Query().Get("time-t")
to, err := time.ParseInLocation("2006-01-02 15:04:05", toStr[0:min(19, len(toStr))], smonConfig.Timezone())
if err != nil {
httpError(w, werr.Wrap(err).Log())
@ -1198,27 +1189,14 @@ func actionConfigurationNotificationDelete(w http.ResponseWriter, r *http.Reques
func pageNotifications(w http.ResponseWriter, r *http.Request, _ *session.T) { // {{{
var err error
// GET parameters.
// Manage the values from the timefilter component
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
}
presetTimeInterval(time.Hour, r.URL.Query().Get("preset"), &timeFrom, &timeTo)
// Apply an optionally set offset (in seconds).
timeFrom = applyTimeOffset(timeFrom, time.Second, r.URL.Query().Get("offset-time"))
timeTo = applyTimeOffset(timeTo, time.Second, r.URL.Query().Get("offset-time"))
timeFrom, timeTo, err = timefilterParse(
r.URL.Query().Get("time-f"),
r.URL.Query().Get("time-t"),
r.URL.Query().Get("time-offset"),
r.URL.Query().Get("time-preset"),
)
nss, err := notificationsSent(timeFrom, timeTo)
if err != nil {
@ -1231,6 +1209,7 @@ func pageNotifications(w http.ResponseWriter, r *http.Request, _ *session.T) { /
CONFIG: smonConfig.Settings,
Data: map[string]any{
"Notifications": nss,
"TimeSubmit": "/notifications",
"TimeFrom": timeFrom.Format("2006-01-02T15:04:05"),
"TimeTo": timeTo.Format("2006-01-02T15:04:05"),
},

1
sql/00023.sql Normal file
View File

@ -0,0 +1 @@
ALTER TABLE public.problem ADD COLUMN trigger_expression VARCHAR NOT NULL DEFAULT '';

22
static/css/default_light/datapoints.css
View File

@ -99,25 +99,3 @@
.graph #graph-values {
height: calc(100vh - 416px);
}
.time-offset {
display: grid;
grid-template-columns: min-content repeat(3, min-content);
grid-gap: 16px;
margin-top: 16px;
align-items: center;
justify-items: center;
}
.time-offset .header-1 {
font-weight: bold;
justify-self: start;
}
.time-offset .header-2 {
font-weight: bold;
justify-self: start;
grid-column: 2 / -1;
}
.time-offset .preset {
white-space: nowrap;
justify-self: start;
padding-right: 32px;
}

34
static/css/default_light/main.css
View File

@ -226,3 +226,37 @@ label {
width: min-content;
border-radius: 8px;
}
#time-selector {
display: grid;
grid-template-columns: min-content min-content;
grid-gap: 6px 16px;
width: min-content;
border-radius: 6px;
}
#time-selector button {
width: 100px;
margin-top: 12px;
justify-self: end;
}
#time-selector #time-filter {
display: grid;
grid-template-columns: min-content repeat(3, min-content);
grid-gap: 16px;
margin-top: 16px;
align-items: center;
justify-items: center;
}
#time-selector #time-filter .header-1 {
font-weight: bold;
justify-self: start;
}
#time-selector #time-filter .header-2 {
font-weight: bold;
justify-self: start;
grid-column: 2 / -1;
}
#time-selector #time-filter .preset {
white-space: nowrap;
justify-self: start;
padding-right: 32px;
}

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

@ -1,37 +1,3 @@
#time-select {
display: grid;
grid-template-columns: min-content min-content;
grid-gap: 6px 16px;
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;
}

22
static/css/gruvbox/datapoints.css
View File

@ -99,25 +99,3 @@
.graph #graph-values {
height: calc(100vh - 416px);
}
.time-offset {
display: grid;
grid-template-columns: min-content repeat(3, min-content);
grid-gap: 16px;
margin-top: 16px;
align-items: center;
justify-items: center;
}
.time-offset .header-1 {
font-weight: bold;
justify-self: start;
}
.time-offset .header-2 {
font-weight: bold;
justify-self: start;
grid-column: 2 / -1;
}
.time-offset .preset {
white-space: nowrap;
justify-self: start;
padding-right: 32px;
}

34
static/css/gruvbox/main.css
View File

@ -226,3 +226,37 @@ label {
width: min-content;
border-radius: 8px;
}
#time-selector {
display: grid;
grid-template-columns: min-content min-content;
grid-gap: 6px 16px;
width: min-content;
border-radius: 6px;
}
#time-selector button {
width: 100px;
margin-top: 12px;
justify-self: end;
}
#time-selector #time-filter {
display: grid;
grid-template-columns: min-content repeat(3, min-content);
grid-gap: 16px;
margin-top: 16px;
align-items: center;
justify-items: center;
}
#time-selector #time-filter .header-1 {
font-weight: bold;
justify-self: start;
}
#time-selector #time-filter .header-2 {
font-weight: bold;
justify-self: start;
grid-column: 2 / -1;
}
#time-selector #time-filter .preset {
white-space: nowrap;
justify-self: start;
padding-right: 32px;
}

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

@ -1,37 +1,3 @@
#time-select {
display: grid;
grid-template-columns: min-content min-content;
grid-gap: 6px 16px;
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;
}

20
static/js/datapoint_values.js
View File

@ -1,13 +1,7 @@
function preset(hours) {
const inputPreset = document.querySelector('input[name="preset"]')
inputPreset.value = hours
inputPreset.form.submit()
}
function offsetTime(seconds) {
const inputPreset = document.querySelector('input[name="offset-time"]')
inputPreset.value = seconds
inputPreset.form.submit()
function selectDisplay(display) {
const inputDisplay = document.getElementById('input-display')
inputDisplay.value = display
inputDisplay.form.submit()
}
class Graph {
@ -61,7 +55,9 @@ class Dataset {
constructor(id, initialData) {
this.datapointID = id
this.values = {}
initialData.forEach(v=>this.values[v.ID] = v)
if (initialData === null)
return
initialData.forEach(v => this.values[v.ID] = v)
}
xValues() {
@ -76,7 +72,7 @@ class Dataset {
return fetch(`/datapoint/json/${this.datapointID}?f=${from}&t=${to}`)
.then(data => data.json())
.then(datapointValues => {
datapointValues.forEach(dp=>{
datapointValues.forEach(dp => {
this.values[dp.ID] = dp
})
document.getElementById('num-values').innerText = Object.keys(this.values).length

27
static/less/datapoints.less
View File

@ -120,30 +120,3 @@
height: calc(100vh - 416px);
}
}
.time-offset {
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;
}
}

43
static/less/main.less
View File

@ -280,3 +280,46 @@ label {
width: min-content;
border-radius: 8px;
}
#time-selector {
display: grid;
grid-template-columns: min-content min-content;
grid-gap: 6px 16px;
width: min-content;
border-radius: 6px;
button {
width: 100px;
margin-top: 12px;
justify-self: end;
}
#time-filter {
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;
}
}
}

42
static/less/notifications.less
View File

@ -1,47 +1,5 @@
@import "theme-@{THEME}.less";
#time-select {
display: grid;
grid-template-columns: min-content min-content;
grid-gap: 6px 16px;
width: min-content;
border-radius: 6px;
button {
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;
}

41
timefilter.go Normal file
View File

@ -0,0 +1,41 @@
package main
import (
// External
werr "git.gibonuddevalla.se/go/wrappederror"
// Standard
"time"
)
func timefilterParse(timeFromStr, timeToStr, offset, preset string) (timeFrom, timeTo time.Time, err error) {
if preset != "" {
presetTimeInterval(time.Hour, preset, &timeFrom, &timeTo)
return
}
yesterday := time.Now().Add(time.Duration(-24 * time.Hour))
timeFrom, err = parseHTMLDateTime(timeFromStr, yesterday)
if err != nil {
err = werr.Wrap(err).WithData(timeFromStr)
return
}
timeTo, err = parseHTMLDateTime(timeToStr, time.Now())
if err != nil {
err = werr.Wrap(err).WithData(timeToStr)
return
}
// Protect the user from switching from/to dates, leading to
// zero matching values from the database.
if timeFrom.After(timeTo) {
timeFrom, timeTo = timeTo, timeFrom
}
// Apply an optionally set offset (in seconds).
timeFrom = applyTimeOffset(timeFrom, time.Second, offset)
timeTo = applyTimeOffset(timeTo, time.Second, offset)
return
}

61
views/components/timefilter.gotmpl Normal file
View File

@ -0,0 +1,61 @@
{{ define "timefilter" }}
<script type="text/javascript">
function preset(hours) {
const inputPreset = document.querySelector('input[name="time-preset"]')
inputPreset.value = hours
inputPreset.form.submit()
}
function offsetTime(seconds) {
const el = document.querySelector('input[name="time-offset"]')
el.value = seconds
el.form.submit()
}
</script>
<form action="{{ .Data.TimeSubmit }}" method="get" id="form-time-selector">
<input type="hidden" name="time-preset" value="">
<input type="hidden" name="time-offset" value=0>
<div id="time-selector">
<div>From</div>
<div>To</div>
<input name="time-f" value="{{ .Data.TimeFrom }}" type="datetime-local">
<input name="time-t" value="{{ .Data.TimeTo }}" type="datetime-local">
<div id="time-filter">
<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 * 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>
{{ end }}

54
views/pages/notifications.gotmpl
View File

@ -10,61 +10,9 @@
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 * 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>
{{ block "timefilter" . }}{{ end }}
<div id="notifications">
<div class="header">Sent</div>