Improve icons and tooltips on the UI

Signed-off-by: Xabier Larrakoetxea <[email protected]>

Author: slok

internal/http/ui/handler_select_service.go

@@ -52,10 +52,11 @@ func (u ui) handlerSelectService() http.HandlerFunc {
 	)
 
 	type tplDataService struct {
-		Name        string
-		HasWarning  bool
-		HasCritical bool
-		DetailsURL  string
+		Name              string
+		HasWarning        bool
+		HasCritical       bool
+		DetailsURL        string
+		TotalAlertsFiring int
 	}
 	type tplData struct {
 		Services           []tplDataService
@@ -75,22 +76,23 @@ func (u ui) handlerSelectService() http.HandlerFunc {
 		for _, svc := range s {
 			hasCritical := false
 			hasWarning := false
+			totalAlertsFiring := 0
 			for _, sloAlert := range svc.Alerts {
 				if sloAlert.FiringPage != nil {
 					hasCritical = true
+					totalAlertsFiring++
 				}
 				if sloAlert.FiringWarning != nil {
 					hasWarning = true
-				}
-				if hasCritical && hasWarning {
-					break
+					totalAlertsFiring++
 				}
 			}
 			tplServices = append(tplServices, tplDataService{
-				Name:        svc.Service.ID,
-				HasWarning:  hasWarning,
-				HasCritical: hasCritical,
-				DetailsURL:  urls.AppURL("/services/" + svc.Service.ID),
+				Name:              svc.Service.ID,
+				HasWarning:        hasWarning,
+				HasCritical:       hasCritical,
+				DetailsURL:        urls.AppURL("/services/" + svc.Service.ID),
+				TotalAlertsFiring: totalAlertsFiring,
 			})
 		}
 		return tplServices

internal/http/ui/handler_select_service_test.go

@@ -70,9 +70,9 @@ func TestHandlerSelectService(t *testing.T) {
 				`<input type="search" name="service-search" value="" placeholder="Search" aria-label="Search" hx-get="/u/app/services?component=service-list&service-sort-mode=service-name-asc" hx-trigger="change, keyup changed delay:500ms, search" hx-target="#services-list" hx-include="this" />`, // We have the search bar with HTMX.
 				`<th scope="col"> <div hx-get="/u/app/services?component=service-list&service-search=&service-sort-mode=service-name-desc" hx-target="#services-list" hx-swap="innerHTML show:window:top"> Service ↑</div> </th>`,                                                                        // We have sortable HTMX Service column.
 				`<th scope="col"> <div hx-get="/u/app/services?component=service-list&service-search=&service-sort-mode=status-desc" hx-target="#services-list" hx-swap="innerHTML show:window:top"> Status ⇅</div> </th>`,                                                                               // We have sortable HTMX status column.
-				`<td><a href="/u/app/services/test-svc1">test-svc1</a></td> <td> <div class="icon-triangle-alert is-critical"></div>`,                                                                                                                                                                    // Svc1 should be critical.
-				`<td><a href="/u/app/services/test-svc2">test-svc2</a></td> <td> <div class="icon-triangle-alert is-warning"></div>`,                                                                                                                                                                     // Svc2 should be warning.
-				`<td><a href="/u/app/services/test-svc3">test-svc3</a></td> <td> <div class="icon-circle-check is-ok"></div>`,                                                                                                                                                                            // Svc3 should be ok.
+				`<td><a href="/u/app/services/test-svc1">test-svc1</a></td> <td> <div class="is-critical"> <i data-lucide="triangle-alert"></i> Firing 2 alerts</div>`,                                                                                                                                   // Svc1 should be critical.
+				`<td><a href="/u/app/services/test-svc2">test-svc2</a></td> <td> <div class="is-warning"> <i data-lucide="triangle-alert"></i> Firing 1 alerts</div>`,                                                                                                                                    // Svc2 should be warning.
+				`<td><a href="/u/app/services/test-svc3">test-svc3</a></td> <td> <div class="is-ok"> <i data-lucide="circle-check"></i> No alerts firing</div>`,                                                                                                                                          // Svc3 should be ok.
 				`<button class="secondary" hx-get="/u/app/services?service-search=&service-sort-mode=service-name-asc&component=service-list&forward-cursor=test-next-cursor" hx-target="#services-list" hx-swap="innerHTML show:window:top"> Next >> </button>`,                                         // We have the pagination prev.
 				`<button class="secondary" hx-get="/u/app/services?service-search=&service-sort-mode=service-name-asc&component=service-list&backward-cursor=test-prev-cursor" hx-target="#services-list" hx-swap="innerHTML show:window:top"> << Previous </button>`,                                    // We have the pagination next.
 			},
@@ -130,7 +130,7 @@ func TestHandlerSelectService(t *testing.T) {
 			},
 			expCode: 200,
 			expBody: []string{
-				`<td><a href="/u/app/services/test-svc1">test-svc1</a></td> <td> <div class="icon-triangle-alert is-critical"></div>`,                                                                                                                                     // Svc1 should be critical.
+				`<td><a href="/u/app/services/test-svc1">test-svc1</a></td> <td> <div class="is-critical"> <i data-lucide="triangle-alert"></i> Firing 1 alerts</div>`,                                                                                                    // Svc1 should be critical.
 				`<button class="secondary" hx-get="/u/app/services?service-search=test&service-sort-mode=service-name-asc&component=service-list&backward-cursor=test-prev-cursor" hx-target="#services-list" hx-swap="innerHTML show:window:top"> << Previous </button>`, // We have the pagination prev.
 				`<button class="secondary"  disabled hx-get="" hx-target="#services-list" hx-swap="innerHTML show:window:top"> Next >> </button>`,                                                                                                                         // We have the pagination next.
 			},
@@ -169,7 +169,7 @@ func TestHandlerSelectService(t *testing.T) {
 			},
 			expCode: 200,
 			expBody: []string{
-				`<td><a href="/u/app/services/test-svc1">test-svc1</a></td> <td> <div class="icon-triangle-alert is-critical"></div>`,                                                                                                                            // Svc1 should be critical.
+				`<td><a href="/u/app/services/test-svc1">test-svc1</a></td> <td> <div class="is-critical"> <i data-lucide="triangle-alert"></i> Firing 1 alerts</div>`,                                                                                           // Svc1 should be critical.
 				`<button class="secondary"  disabled hx-get="" hx-target="#services-list" hx-swap="innerHTML show:window:top"> << Previous </button>`,                                                                                                            // We have the pagination prev.
 				`<button class="secondary" hx-get="/u/app/services?service-search=&service-sort-mode=service-name-asc&component=service-list&forward-cursor=test-next-cursor" hx-target="#services-list" hx-swap="innerHTML show:window:top"> Next >> </button>`, // We have the pagination next.
 			},
@@ -210,7 +210,7 @@ func TestHandlerSelectService(t *testing.T) {
 			},
 			expCode: 200,
 			expBody: []string{
-				`<td><a href="/u/app/services/test-svc1">test-svc1</a></td> <td> <div class="icon-triangle-alert is-critical"></div>`,                                                                                                                                     // Svc1 should be critical.
+				`<td><a href="/u/app/services/test-svc1">test-svc1</a></td> <td> <div class="is-critical"> <i data-lucide="triangle-alert"></i> Firing 1 alerts</div>`,                                                                                                    // Svc1 should be critical.
 				`<button class="secondary" hx-get="/u/app/services?service-search=test&service-sort-mode=service-name-asc&component=service-list&backward-cursor=test-prev-cursor" hx-target="#services-list" hx-swap="innerHTML show:window:top"> << Previous </button>`, // We have the pagination prev.
 				`<button class="secondary" hx-get="/u/app/services?service-search=test&service-sort-mode=service-name-asc&component=service-list&forward-cursor=test-next-cursor" hx-target="#services-list" hx-swap="innerHTML show:window:top"> Next >> </button>`,      // We have the pagination next.
 			},
@@ -253,7 +253,7 @@ func TestHandlerSelectService(t *testing.T) {
 			expBody: []string{
 				`<th scope="col"> <div hx-get="/u/app/services?component=service-list&service-search=test&service-sort-mode=service-name-asc" hx-target="#services-list" hx-swap="innerHTML show:window:top"> Service ↓</div> </th>`,                                       //We have service name sorting column.
 				`<th scope="col"> <div hx-get="/u/app/services?component=service-list&service-search=test&service-sort-mode=status-desc" hx-target="#services-list" hx-swap="innerHTML show:window:top"> Status ⇅</div> </th>`,                                             //We have status sorting column.
-				`<td><a href="/u/app/services/test-svc1">test-svc1</a></td> <td> <div class="icon-triangle-alert is-critical"></div>`,                                                                                                                                      // Svc1 should be critical.
+				`<td><a href="/u/app/services/test-svc1">test-svc1</a></td> <td> <div class="is-critical"> <i data-lucide="triangle-alert"></i> Firing 1 alerts</div>`,                                                                                                     // Svc1 should be critical.
 				`<button class="secondary" hx-get="/u/app/services?service-search=test&service-sort-mode=service-name-desc&component=service-list&backward-cursor=test-prev-cursor" hx-target="#services-list" hx-swap="innerHTML show:window:top"> << Previous </button>`, // We have the pagination prev.
 				`<button class="secondary" hx-get="/u/app/services?service-search=test&service-sort-mode=service-name-desc&component=service-list&forward-cursor=test-next-cursor" hx-target="#services-list" hx-swap="innerHTML show:window:top"> Next >> </button>`,      // We have the pagination next.
 			},
@@ -295,7 +295,7 @@ func TestHandlerSelectService(t *testing.T) {
 			expBody: []string{
 				`<th scope="col"> <div hx-get="/u/app/services?component=service-list&service-search=&service-sort-mode=service-name-asc" hx-target="#services-list" hx-swap="innerHTML show:window:top"> Service ⇅</div> </th>`,                                //We have service name sorting column.
 				`<th scope="col"> <div hx-get="/u/app/services?component=service-list&service-search=&service-sort-mode=status-desc" hx-target="#services-list" hx-swap="innerHTML show:window:top"> Status ↑</div> </th>`,                                      //We have status sorting column.
-				`<td><a href="/u/app/services/test-svc1">test-svc1</a></td> <td> <div class="icon-triangle-alert is-critical"></div>`,                                                                                                                           // Svc1 should be critical.
+				`<td><a href="/u/app/services/test-svc1">test-svc1</a></td> <td> <div class="is-critical"> <i data-lucide="triangle-alert"></i> Firing 1 alerts</div>`,                                                                                          // Svc1 should be critical.
 				`<button class="secondary" hx-get="/u/app/services?service-search=&service-sort-mode=status-asc&component=service-list&backward-cursor=test-prev-cursor" hx-target="#services-list" hx-swap="innerHTML show:window:top"> << Previous </button>`, // We have the pagination prev.
 				`<button class="secondary" hx-get="/u/app/services?service-search=&service-sort-mode=status-asc&component=service-list&forward-cursor=test-next-cursor" hx-target="#services-list" hx-swap="innerHTML show:window:top"> Next >> </button>`,      // We have the pagination next.
 			},

internal/http/ui/handler_slo_details_test.go

@@ -147,11 +147,11 @@ func TestHandlerSLODetails(t *testing.T) {
 				`<div><mark>operation: <strong>create</strong></mark> <span> </span><mark>type: <strong>something</strong></mark> <span> </span></div>`,
 
 				// Stats.
-				`<div class="grid stats" hx-trigger="every 30s" hx-get="/u/app/slos/slo-1?component=slo-stats" hx-swap="outerHTML">`,                                                           // Autoreload status with HTMX.
-				`<article><header data-tooltip="The % of error budget being consumed right now">Current Burning budget</header> <div class="is-critical">101.5%</div> </article>`,              // Burning budget stat.
-				`<article><header data-tooltip="The % of error budget remaining in the period as a rolling window">Remaining budget (Window)</header> <div class="is-ok">90%</div> </article>`, // Remaining budget stat.
-				`<article><header>Warning Alert</header> <div class="is-warning">FIRING</div> </article>`,                                                                                      // Warning alert stat.
-				`<article><header>Critical Alert</header> <div class="is-critical">FIRING</div> </article>`,                                                                                    // Critical alert stat.
+				`<div class="grid stats" hx-trigger="every 30s" hx-get="/u/app/slos/slo-1?component=slo-stats" hx-swap="outerHTML">`,                                                                                                                                                                  // Autoreload status with HTMX.
+				`<article> <header> Current Burning budget <span data-tooltip="The % of error budget being consumed now (0% means none, 100% means all, >100% more than available budget)."> <i data-lucide="info"></i> </span> </header> <div class="is-critical">101.5%</div> </article> <article>`, // Burning budget stat.
+				`<article> <header> Remaining budget on period (Window) <span data-tooltip="The % of error budget remaining in the period as a rolling window."> <i data-lucide="info"></i> </span> </header> <div class="is-ok">90%</div> </article> <article>`,                                      // Remaining budget stat.
+				`<article><header>Warning Alert</header> <div class="is-warning"><i data-lucide="triangle-alert"></i>FIRING</div> </article>`,                                                                                                                                                         // Warning alert stat.
+				`<article><header>Critical Alert</header> <div class="is-critical"><i data-lucide="triangle-alert"></i>FIRING</div> </article>`,                                                                                                                                                       // Critical alert stat.
 
 				// SLI chart.
 				`<article id="sli-chart-section">`, // SLI chart section.
@@ -202,12 +202,11 @@ func TestHandlerSLODetails(t *testing.T) {
 			expCode: 200,
 			expBody: []string{
 				// Stats.
-				`<div class="grid stats" hx-trigger="every 30s" hx-get="/u/app/slos/slo-1?component=slo-stats" hx-swap="outerHTML">`,                                                           // Autoreload status with HTMX.
-				`<article><header data-tooltip="The % of error budget being consumed right now">Current Burning budget</header> <div class="is-critical">101.5%</div> </article>`,              // Burning budget stat.
-				`<article><header data-tooltip="The % of error budget remaining in the period as a rolling window">Remaining budget (Window)</header> <div class="is-ok">90%</div> </article>`, // Remaining budget stat.
-				`<article><header>Warning Alert</header> <div class="is-warning">FIRING</div> </article>`,                                                                                      // Warning alert stat.
-				`<article><header>Critical Alert</header> <div class="is-critical">FIRING</div> </article>`,                                                                                    // Critical alert stat.
-
+				`<div class="grid stats" hx-trigger="every 30s" hx-get="/u/app/slos/slo-1?component=slo-stats" hx-swap="outerHTML">`,                                                                                                                                                                  // Autoreload status with HTMX.
+				`<article> <header> Current Burning budget <span data-tooltip="The % of error budget being consumed now (0% means none, 100% means all, >100% more than available budget)."> <i data-lucide="info"></i> </span> </header> <div class="is-critical">101.5%</div> </article> <article>`, // Burning budget stat.
+				`<article> <header> Remaining budget on period (Window) <span data-tooltip="The % of error budget remaining in the period as a rolling window."> <i data-lucide="info"></i> </span> </header> <div class="is-ok">90%</div> </article> <article>`,                                      // Remaining budget stat.
+				`<article><header>Warning Alert</header> <div class="is-warning"><i data-lucide="triangle-alert"></i>FIRING</div> </article>`,                                                                                                                                                         // Warning alert stat.
+				`<article><header>Critical Alert</header> <div class="is-critical"><i data-lucide="triangle-alert"></i>FIRING</div> </article>`,                                                                                                                                                       // Critical alert stat.
 			},
 		},
 

internal/http/ui/static/css/main.css

@@ -26,6 +26,7 @@
     --sloth-ok: rgb(58, 135, 19);
     --sloth-warning: rgb(253, 147, 3);
     --sloth-critical: rgb(197, 47, 33);
+    --pico-mark-background-color: rgb(223, 227, 235);
 }
 
 /* Dark color scheme (Auto) */
@@ -60,3 +61,20 @@
     color: var(--sloth-critical);
 }
 
+
+svg.lucide {
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 0.25em;
+    margin-right: 0.25em;
+    margin-bottom: 0.15em;
+}
+
+header svg.lucide {
+    width: 1em;
+    height: 1em;
+}
+
+span[data-tooltip] {
+    border-bottom: none !important;
+}

internal/http/ui/static/js/main.js

@@ -19,7 +19,7 @@ function isColorThemeLight() {
     return true; // Default to light.
 }
 
-// CSS utils.
+// --------- CSS  ---------.
 function getCSSVariableValue(cssVar) {
     // Sanitize variable name.
     if (cssVar.startsWith("--")) {
@@ -28,6 +28,11 @@ function getCSSVariableValue(cssVar) {
     return getComputedStyle(document.documentElement).getPropertyValue(cssVar).trim();
 }
 
+// Re-create lucide icons after htmx content swap.
+document.body.addEventListener('htmx:afterSwap', function(evt) {
+    lucide.createIcons();
+});
+
 // --------- PLOTS ---------.
 
 function renderUplotSLIChart(domElID, json) {

internal/http/ui/templates/app/services/comp_service_list.tmpl

@@ -30,11 +30,11 @@
         <td><a href="{{.DetailsURL}}">{{.Name}}</a></td>
         <td>
         {{ if .HasCritical }}
-        <div class="icon-triangle-alert is-critical"></div>
+            <div class="is-critical"> <i data-lucide="triangle-alert"></i> Firing {{.TotalAlertsFiring}} alerts</div>
         {{ else if .HasWarning }}
-        <div class="icon-triangle-alert is-warning"></div>
+            <div class="is-warning"> <i data-lucide="triangle-alert"></i> Firing {{.TotalAlertsFiring}} alerts</div>
         {{ else }}
-        <div class="icon-circle-check is-ok"></div>
+            <div class="is-ok"> <i data-lucide="circle-check"></i> No alerts firing</div>
         {{ end }}
         </td>
         </tr>