Info icon for problem values

problem.go

@@ -7,6 +7,9 @@ import (
 	// Standard
 	"database/sql"
 	"encoding/json"
+	"fmt"
+	"sort"
+	"strings"
 	"time"
 )
 
@@ -16,6 +19,7 @@ type Problem struct {// {{{
 	End             sql.NullTime
 	Acknowledged    bool
 	Datapoints      map[string]any
+	DatapointValues map[string]any `json:"datapoints"`
 	TriggerID       int            `json:"trigger_id"`
 	TriggerName     string         `json:"trigger_name"`
 	AreaName        string         `json:"area_name"`
@@ -33,6 +37,7 @@ func ProblemsRetrieve() (problems []Problem, err error) {// {{{
 				p.start,
 				p.end,
 				p.acknowledged,
+				p.datapoints,
 				t.id   AS trigger_id,
 				t.name AS trigger_name,
 				a.name AS area_name,
@@ -53,6 +58,7 @@ func ProblemsRetrieve() (problems []Problem, err error) {// {{{
 				null,
 				null,
 				false,
+				'{}',
 				-1 AS trigger_id,
 				CONCAT(
 					'NODATA: ',
@@ -137,3 +143,17 @@ func ProblemAcknowledge(id int, state bool) (err error) {// {{{
 	}
 	return
 } // }}}
+
+func (p Problem) FormattedValues() string {
+	out := []string{}
+	for key, val := range p.DatapointValues {
+		timeVal, ok := val.(time.Time)
+		if ok {
+			logger.Info("FOO", "timeVal", timeVal)
+		}
+		out = append(out, fmt.Sprintf("%s: %v", key, val))
+	}
+	sort.Strings(out)
+
+	return strings.Join(out, "\n")
+}

static/css/default_light/problems.css

@@ -30,6 +30,10 @@
 #acknowledged-list .acknowledge img {
   height: 16px;
 }
+#problems-list .info,
+#acknowledged-list .info {
+  margin-right: 8px;
+}
 #acknowledged-list.hidden {
   display: none;
 }
@@ -41,7 +45,7 @@
 }
 #areas .area .section {
   display: grid;
-  grid-template-columns: repeat(2, min-content);
+  grid-template-columns: repeat(3, min-content);
   grid-gap: 8px 12px;
 }
 #areas .area .section .name {

static/css/gruvbox/problems.css

@@ -30,6 +30,10 @@
 #acknowledged-list .acknowledge img {
   height: 16px;
 }
+#problems-list .info,
+#acknowledged-list .info {
+  margin-right: 8px;
+}
 #acknowledged-list.hidden {
   display: none;
 }
@@ -41,7 +45,7 @@
 }
 #areas .area .section {
   display: grid;
-  grid-template-columns: repeat(2, min-content);
+  grid-template-columns: repeat(3, min-content);
   grid-gap: 8px 12px;
 }
 #areas .area .section .name {

static/less/problems.less

@@ -32,6 +32,10 @@
 			height: 16px;
 		}
 	}
+
+	.info {
+		margin-right: 8px;
+	}
 }
 
 #acknowledged-list.hidden{
@@ -47,7 +51,7 @@
 	.area {
 		.section {
 			display: grid;
-			grid-template-columns: repeat(2, min-content);
+			grid-template-columns: repeat(3, min-content);
 			grid-gap: 8px 12px;
 
 			.name {

views/pages/problems.gotmpl

@@ -34,13 +34,26 @@
 					<div class="area">{{ .AreaName }}</div>
 					<div class="section">{{ .SectionName }}</div>
 					<div class="start"></div>
-					<div class="acknowledge"><img src="/images/{{ $version }}/{{ $theme }}/acknowledge.svg"></div>
+					<div class="acknowledge">
+						<img class="info" src="/images/{{ $version }}/{{ $theme }}/info-outline.svg">
+						<img src="/images/{{ $version }}/{{ $theme }}/acknowledge.svg">
+					</div>
 				{{ else }}
 					<div class="trigger"><a href="/trigger/edit/{{ .TriggerID }}">{{ .TriggerName }}</a></div>
 					<div class="area">{{ .AreaName }}</div>
 					<div class="section">{{ .SectionName }}</div>
 					<div class="start">{{ format_time .Start }}</div>
-					<div class="acknowledge"><a href="/problem/acknowledge/{{ .ID }}"><img src="/images/{{ $version }}/{{ $theme }}/acknowledge-filled.svg"></a></div>
+					<div class="acknowledge">
+						{{ if .FormattedValues }}
+						<img class="info" src="/images/{{ $version }}/{{ $theme }}/info-filled.svg" title="{{ .FormattedValues }}">
+						{{ else }}
+						<img class="info" src="/images/{{ $version }}/{{ $theme }}/info-outline.svg">
+						{{ end }}
+
+						<a href="/problem/acknowledge/{{ .ID }}">
+							<img src="/images/{{ $version }}/{{ $theme }}/acknowledge-filled.svg">
+						</a>
+					</div>
 				{{ end }}
 			{{ end }}
 		</div>
@@ -63,7 +76,9 @@
 				<div class="area">{{ .AreaName }}</div>
 				<div class="section">{{ .SectionName }}</div>
 				<div class="start">{{ format_time .Start }}</div>
-				<div class="acknowledge"><a href="/problem/unacknowledge/{{ .ID }}"><img src="/images/{{ $version }}/{{ $theme }}/acknowledge-outline.svg"></a></div>
+				<div class="acknowledge">
+					<a href="/problem/unacknowledge/{{ .ID }}"><img src="/images/{{ $version }}/{{ $theme }}/acknowledge-outline.svg"></a>
+				</div>
 			{{ end }}
 		</div>
 	</div>
@@ -79,6 +94,7 @@
 					<div class="name">{{ $sectionName }}</div>
 
 					{{ range $problems }}
+
 					<div class="trigger">{{ .TriggerName }}</div>
 
 					{{ if eq (.Start | html) "0001-01-01 00:00:00 +0000 UTC" }}
@@ -86,6 +102,13 @@
 					{{ else }}
 					<div class="since">{{ format_time .Start }}</div>
 					{{ end }}
+
+					{{ if .FormattedValues }}
+					<div><img src="/images/{{ $version }}/{{ $theme }}/info-filled.svg" title="{{ .FormattedValues }}"></div>
+					{{ else }}
+					<div><img src="/images/{{ $version }}/{{ $theme }}/info-outline.svg"></div>
+					{{ end }}
+
 					{{ end }}
 				</div>
 				{{ end }}