Add show-failing-only property to the monitor widget

This commit is contained in:
Svilen Markov 2024-08-29 21:14:50 +01:00
parent d7bd34531f
commit 725d0da15d
4 changed files with 29 additions and 6 deletions

View File

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

View File

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

View File

@ -10,13 +10,24 @@
{{ end }} {{ end }}
</ul> </ul>
{{ else }} {{ else }}
{{ if not (and .ShowFailingOnly (not .HasFailing)) }}
<ul class="dynamic-columns"> <ul class="dynamic-columns">
{{ range .Sites }} {{ range .Sites }}
{{ if and $.ShowFailingOnly (eq .StatusStyle "ok" ) }} {{ continue }} {{ end }}
<div class="flex items-center gap-15"> <div class="flex items-center gap-15">
{{ template "site" . }} {{ template "site" . }}
</div> </div>
{{ end }} {{ end }}
</ul> </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 }}
{{ end }} {{ end }}

View File

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