Add show-failing-only property to the monitor widget

docs/configuration.md

@@ -1043,14 +1043,18 @@ You can hover over the "ERROR" text to view more information.
 
 #### Properties
 
-| Name | Type | Required |
-| ---- | ---- | -------- |
-| sites | array | yes |
-| style | string | no |
+| Name | Type | Required | Default |
+| ---- | ---- | -------- | ------- |
+| sites | array | yes | |
+| show-failing-only | boolean | no | false |
+| style | string | no | |
 
 ##### `style`
 To make the widget scale appropriately in a `full` size column, set the style to the experimental `dynamic-columns-experimental` option.
 
+##### `show-failing-only`
+Shows only a list of failing sites when set to `true`.
+
 ##### `sites`
 
 Properties for each site:

internal/assets/static/main.css

@@ -1509,4 +1509,5 @@ kbd:active {
 .margin-bottom-10   { margin-bottom: 1rem; }
 .margin-bottom-15   { margin-bottom: 1.5rem; }
 .margin-bottom-auto { margin-bottom: auto; }
+.padding-block-5    { padding-block: 0.5rem; }
 .scale-half         { transform: scale(0.5); }

internal/assets/templates/monitor.html

@@ -10,13 +10,24 @@
     {{ end }}
 </ul>
 {{ else }}
+
+{{ if not (and .ShowFailingOnly (not .HasFailing)) }}
 <ul class="dynamic-columns">
     {{ range .Sites }}
+    {{ if and $.ShowFailingOnly (eq .StatusStyle "ok" ) }} {{ continue }} {{ end }}
     <div class="flex items-center gap-15">
         {{ template "site" . }}
     </div>
     {{ end }}
 </ul>
+{{ else }}
+<div class="flex items-center justify-center gap-10 padding-block-5">
+    <p>All sites are online</p>
+    <svg class="shrink-0" style="width: 1.7rem;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--color-positive)">
+        <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
+    </svg>
+</div>
+{{ end }}
 {{ end }}
 {{ end }}
 

internal/widget/monitor.go

@@ -53,7 +53,9 @@ type Monitor struct {
 		StatusText              string           `yaml:"-"`
 		StatusStyle             string           `yaml:"-"`
 	} `yaml:"sites"`
-	Style string `yaml:"style"`
+	Style           string `yaml:"style"`
+	ShowFailingOnly bool   `yaml:"show-failing-only"`
+	HasFailing      bool   `yaml:"-"`
 }
 
 func (widget *Monitor) Initialize() error {
@@ -79,12 +81,17 @@ func (widget *Monitor) Update(ctx context.Context) {
 		return
 	}
 
+	widget.HasFailing = false
+
 	for i := range widget.Sites {
 		site := &widget.Sites[i]
 		status := &statuses[i]
-
 		site.Status = status
 
+		if status.Code >= 400 || status.TimedOut || status.Error != nil {
+			widget.HasFailing = true
+		}
+
 		if !status.TimedOut {
 			site.StatusText = statusCodeToText(status.Code)
 			site.StatusStyle = statusCodeToStyle(status.Code)