Bumped to v29

helper.go

@@ -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
-}
+}// }}}

main.go

@@ -29,7 +29,7 @@ import (
 	"time"
 )
 
-const VERSION = "v28"
+const VERSION = "v29"
 
 var (
 	logger              *slog.Logger
@@ -521,7 +521,21 @@ func pageProblems(w http.ResponseWriter, r *http.Request, _ *session.T) { // {{{
 		CONFIG: smonConfig.Settings,
 	}
 
-	problems, err := ProblemsRetrieve()
+	// Manage the values from the timefilter component
+	var err error
+	var timeFrom, timeTo time.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"),
+	)
+	if err != nil {
+		httpError(w, err)
+		return
+	}
+
+	problems, err := ProblemsRetrieve(true, timeFrom, timeTo)
 	if err != nil {
 		httpError(w, werr.Wrap(err).Log())
 		return
@@ -546,6 +560,10 @@ func pageProblems(w http.ResponseWriter, r *http.Request, _ *session.T) { // {{{
 	page.Data = map[string]any{
 		"Problems":        problems,
 		"ProblemsGrouped": problemsGrouped,
+
+		"TimeSubmit": "/problems",
+		"TimeFrom":   timeFrom.Format("2006-01-02T15:04:05"),
+		"TimeTo":     timeTo.Format("2006-01-02T15:04:05"),
 	}
 	page.Render(w, r)
 	return
@@ -709,31 +727,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 +744,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 +762,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 +779,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 +1207,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 +1227,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"),
 		},

problem.go

@@ -2,7 +2,7 @@ package main
 
 import (
 	// External
-	we "git.gibonuddevalla.se/go/wrappederror"
+	werr "git.gibonuddevalla.se/go/wrappederror"
 
 	// Standard
 	"database/sql"
@@ -16,7 +16,7 @@ import (
 type Problem struct { // {{{
 	ID              int
 	Start           time.Time
-	End             sql.NullTime
+	End             time.Time
 	Acknowledged    bool
 	Datapoints      map[string]any
 	DatapointValues map[string]any `json:"datapoints"`
@@ -26,7 +26,7 @@ type Problem struct { // {{{
 	SectionName     string         `json:"section_name"`
 } // }}}
 
-func ProblemsRetrieve() (problems []Problem, err error) { // {{{
+func ProblemsRetrieve(archived bool, from, to time.Time) (problems []Problem, err error) { // {{{
 	problems = []Problem{}
 	row := service.Db.Conn.QueryRow(`
 		SELECT
@@ -35,7 +35,7 @@ func ProblemsRetrieve() (problems []Problem, err error) { // {{{
 			(SELECT
 				p.id,
 				p.start,
-				p.end,
+				TO_CHAR(p.end, 'YYYY-MM-DD"T"HH24:MI:SSTZH:TZM') AS end,
 				p.acknowledged,
 				p.datapoints,
 				t.id   AS trigger_id,
@@ -47,12 +47,18 @@ func ProblemsRetrieve() (problems []Problem, err error) { // {{{
 			INNER JOIN section s ON t.section_id = s.id
 			INNER JOIN area a ON s.area_id = a.id
 			WHERE
-				p.end IS NULL
+				CASE
+					WHEN $1 THEN true
+					WHEN NOT $1 THEN  p.end IS NULL
+				END AND
+				p.start >= $2 AND
+				p.end <= $3
+
 			ORDER BY
 				p.start DESC)
 
 			UNION ALL
-			
+
 			(SELECT
 				-1 AS id,
 				null,
@@ -71,13 +77,16 @@ func ProblemsRetrieve() (problems []Problem, err error) { // {{{
 				dp.nodata_is_problem
 			ORDER BY
 				dp.name ASC)
-		) AS problems
-	`)
+		) AS problems`,
+		archived,
+		from,
+		to,
+	)
 
 	var jsonBody []byte
 	err = row.Scan(&jsonBody)
 	if err != nil {
-		err = we.Wrap(err)
+		err = werr.Wrap(err)
 		return
 	}
 
@@ -87,7 +96,7 @@ func ProblemsRetrieve() (problems []Problem, err error) { // {{{
 
 	err = json.Unmarshal(jsonBody, &problems)
 	if err != nil {
-		err = we.Wrap(err)
+		err = werr.Wrap(err)
 	}
 	return
 } // }}}
@@ -105,17 +114,22 @@ func ProblemStart(trigger Trigger) (problemID int, err error) { // {{{
 	var openProblems int
 	err = row.Scan(&openProblems)
 	if err != nil && err != sql.ErrNoRows {
-		err = we.Wrap(err).WithData(trigger.ID)
+		err = werr.Wrap(err).WithData(trigger.ID)
 		return
 	}
 
 	// Open up a new problem if no open exists.
 	if openProblems == 0 {
 		datapointValuesJson, _ := json.Marshal(trigger.DatapointValues)
-		row = service.Db.Conn.QueryRow(`INSERT INTO problem(trigger_id, datapoints) VALUES($1, $2) RETURNING id`, trigger.ID, datapointValuesJson)
+		row = service.Db.Conn.QueryRow(
+			`INSERT INTO problem(trigger_id, datapoints, trigger_expression) VALUES($1, $2, $3) RETURNING id`,
+			trigger.ID,
+			datapointValuesJson,
+			trigger.Expression,
+		)
 		err = row.Scan(&problemID)
 		if err != nil {
-			err = we.Wrap(err).WithData(trigger)
+			err = werr.Wrap(err).WithData(trigger)
 		}
 	}
 	return
@@ -130,7 +144,7 @@ func ProblemClose(trigger Trigger) (problemID int, err error) { // {{{
 	}
 
 	if err != nil {
-		err = we.Wrap(err).WithData(trigger)
+		err = werr.Wrap(err).WithData(trigger)
 		return
 	}
 	return
@@ -138,13 +152,13 @@ func ProblemClose(trigger Trigger) (problemID int, err error) { // {{{
 func ProblemAcknowledge(id int, state bool) (err error) { // {{{
 	_, err = service.Db.Conn.Exec(`UPDATE problem SET "acknowledged"=$2 WHERE id=$1`, id, state)
 	if err != nil {
-		err = we.Wrap(err).WithData(id)
+		err = werr.Wrap(err).WithData(id)
 		return
 	}
 	return
 } // }}}
 
-func (p Problem) FormattedValues() string {
+func (p Problem) FormattedValues() string { // {{{
 	out := []string{}
 	for key, val := range p.DatapointValues {
 		var keyval string
@@ -174,4 +188,7 @@ func (p Problem) FormattedValues() string {
 	sort.Strings(out)
 
 	return strings.Join(out, "\n")
-}
+} // }}}
+func (p Problem) IsArchived() bool { // {{{
+	return !p.End.IsZero()
+} // }}}

sql/00023.sql

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

static/css/default_light/datapoints.css

@@ -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;
-}

static/css/default_light/main.css

@@ -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;
+}

static/css/default_light/notifications.css

@@ -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;
 }

static/css/gruvbox/datapoints.css

@@ -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;
-}

static/css/gruvbox/main.css

@@ -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;
+}

static/css/gruvbox/notifications.css

@@ -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;
 }

static/js/datapoint_values.js

@@ -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

static/less/datapoints.less

@@ -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;
-	}
-}

static/less/main.less

@@ -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;
+		}
+	}
+}
+

static/less/notifications.less

@@ -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;
 }

timefilter.go

@@ -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
+}

views/components/timefilter.gotmpl

@@ -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 }}

views/pages/datapoint_values.gotmpl

@@ -7,56 +7,20 @@
 
 	{{ block "page_label" . }}{{end}}
 
-	<form action="/datapoint/values/{{ .Data.Datapoint.ID }}" method="get" style="margin-top: -16px">
-		<input type="hidden" name="preset" value="">
-		<input type="hidden" name="offset-time" value=0>
+	<div style="margin-bottom: 16px">
+		<input onchange="selectDisplay('graph')" name="display" type="radio" id="display-graph" {{ if $graph }} checked {{ end}}> <label for="display-graph">Graph</label>
+		<input onchange="selectDisplay('list')"  name="display" type="radio" id="display-list" {{ if not $graph }} checked {{ end }}> <label for="display-list">List</label>
+	</div>
 
-		{{ if eq .Data.Datapoint.Datatype "INT" }}
-		<div>
-			<input name="display" value="graph" type="radio" id="display-graph" {{ if $graph }} checked {{ end}}> <label for="display-graph">Graph</label>
-			<input name="display" value="list" type="radio" id="display-list" {{ if not $graph }} checked {{ end }}> <label for="display-list">List</label>
-		</div>
-		{{ end }}
+	{{ block "timefilter" . }}{{ end }}
 
-		<div class="value-selector">
-			<div>Values from</div>
-			<div>Values to</div>
-
-			<input name="f" type="datetime-local" step="1" value="{{ .Data.TimeFrom }}">
-			<input name="t" type="datetime-local" step="1" value="{{ .Data.TimeTo }}">
-
-			<div class="time-offset">
-				<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>
+	<script type="text/javascript">
+		const inputDisplay = document.createElement('input')
+		inputDisplay.id = 'input-display'
+		inputDisplay.name = 'display'
+		inputDisplay.type = 'hidden'
+		document.getElementById('form-time-selector').append(inputDisplay);
+	</script>
 
 	{{ if $graph }}
 	<div class="graph">
@@ -72,7 +36,6 @@
 			{{ .Data.Datapoint.ID }},
 			{{ .Data.Values }},
 		)
-
 	</script>
 	{{ else }}
 	<div id="values">

views/pages/notifications.gotmpl

@@ -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>

views/pages/problems.gotmpl

@@ -8,13 +8,15 @@
 	</script>
 	<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/{{ .CONFIG.THEME }}/problems.css">
 	
-	{{ block "page_label" . }}{{end}}
+	{{ block "page_label" . }}{{ end }}
 
-	<div>
+	<div style="margin-bottom: 16px">
 		<input type="radio" name="display" id="display-table" onclick="_ui.displayAreas()"> <label for="display-table">Areas</label>
 		<input type="radio" name="display" id="display-list" onclick="_ui.displayList()"> <label for="display-list">List</label>
 	</div>
 
+	{{ block "timefilter" . }}{{ end }}
+
 	<div class="display-list hidden">
 		<div id="problems-list">
 			<div style="grid-column: 1/-1;"><h2>Current</h2></div>