0ct0pu5/glance
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add compact style for monitor widget

Browse source
This commit is contained in:
Svilen Markov 2024-11-16 11:10:46 +00:00
parent c6b07852fe
commit 9c5298aebf
6 changed files with 87 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
docs/configuration.md
View file

@ -1149,11 +1149,19 @@ You can hover over the "ERROR" text to view more information.
| Name | Type | Required | Default |
| ---- | ---- | -------- | ------- |
| sites | array | yes | |
| style | string | no | |
| show-failing-only | boolean | no | false |
##### `show-failing-only`
Shows only a list of failing sites when set to `true`.
##### `style`
Used to change the appearance of the widget. Possible values are `compact`.
Preview of `compact`:
![](images/monitor-widget-compact-preview.png)
##### `sites`
Properties for each site:

BIN
docs/images/monitor-widget-compact-preview.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

1
internal/assets/static/main.css
View file

@ -1830,6 +1830,7 @@ details[open] .summary::after {
.list { --list-half-gap: 0rem; }
.list-gap-2 { --list-half-gap: 0.1rem; }
.list-gap-4 { --list-half-gap: 0.2rem; }
.list-gap-8 { --list-half-gap: 0.4rem; }
.list-gap-10 { --list-half-gap: 0.5rem; }
.list-gap-14 { --list-half-gap: 0.7rem; }
.list-gap-20 { --list-half-gap: 1rem; }

1
internal/assets/templates.go
View file

@ -32,6 +32,7 @@ var (
RSSHorizontalCardsTemplate = compileTemplate("rss-horizontal-cards.html", "widget-base.html")
RSSHorizontalCards2Template = compileTemplate("rss-horizontal-cards-2.html", "widget-base.html")
MonitorTemplate = compileTemplate("monitor.html", "widget-base.html")
MonitorCompactTemplate = compileTemplate("monitor-compact.html", "widget-base.html")
TwitchGamesListTemplate = compileTemplate("twitch-games-list.html", "widget-base.html")
TwitchChannelsTemplate = compileTemplate("twitch-channels.html", "widget-base.html")
RepositoryTemplate = compileTemplate("repository.html", "widget-base.html")

39
internal/assets/templates/monitor-compact.html Normal file
View file

@ -0,0 +1,39 @@
{{ template "widget-base.html" . }}
{{ define "widget-content" }}
{{ if not (and .ShowFailingOnly (not .HasFailing)) }}
<ul class="dynamic-columns list-gap-8">
{{ 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 }}
{{ define "site" }}
<a class="size-h3 color-highlight text-truncate block grow" href="{{ .URL }}" {{ if not .SameTab }}target="_blank"{{ end }} rel="noreferrer">{{ .Title }}</a>
{{ if not .Status.TimedOut }}<div>{{ .Status.ResponseTime.Milliseconds | formatNumber }}ms</div>{{ end }}
{{ if eq .StatusStyle "ok" }}
<div class="monitor-site-status-icon" title="{{ .Status.Code }}">
<svg 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>
{{ else }}
<div class="monitor-site-status-icon" title="{{ if .Status.Error }}{{ .Status.Error }}{{ else }}{{ .Status.Code }}{{ end }}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--color-negative)">
<path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" />
</svg>
</div>
{{ end }}
{{ end }}

71
internal/widget/monitor.go
View file

@ -11,37 +11,6 @@ import (
"github.com/glanceapp/glance/internal/feed"
)
func statusCodeToText(status int, altStatusCodes []int) string {
if status == 200 || slices.Contains(altStatusCodes, status) {
return "OK"
}
if status == 404 {
return "Not Found"
}
if status == 403 {
return "Forbidden"
}
if status == 401 {
return "Unauthorized"
}
if status >= 400 {
return "Client Error"
}
if status >= 500 {
return "Server Error"
}
return strconv.Itoa(status)
}
func statusCodeToStyle(status int, altStatusCodes []int) string {
if status == 200 || slices.Contains(altStatusCodes, status) {
return "ok"
}
return "error"
}
type Monitor struct {
widgetBase `yaml:",inline"`
Sites []struct {
@ -54,8 +23,9 @@ type Monitor struct {
StatusStyle string `yaml:"-"`
AltStatusCodes []int `yaml:"alt-status-codes"`
} `yaml:"sites"`
ShowFailingOnly bool `yaml:"show-failing-only"`
HasFailing bool `yaml:"-"`
Style string `yaml:"style"`
ShowFailingOnly bool `yaml:"show-failing-only"`
HasFailing bool `yaml:"-"`
}
func (widget *Monitor) Initialize() error {
@ -96,5 +66,40 @@ func (widget *Monitor) Update(ctx context.Context) {
}
func (widget *Monitor) Render() template.HTML {
if widget.Style == "compact" {
return widget.render(widget, assets.MonitorCompactTemplate)
}
return widget.render(widget, assets.MonitorTemplate)
}
func statusCodeToText(status int, altStatusCodes []int) string {
if status == 200 || slices.Contains(altStatusCodes, status) {
return "OK"
}
if status == 404 {
return "Not Found"
}
if status == 403 {
return "Forbidden"
}
if status == 401 {
return "Unauthorized"
}
if status >= 400 {
return "Client Error"
}
if status >= 500 {
return "Server Error"
}
return strconv.Itoa(status)
}
func statusCodeToStyle(status int, altStatusCodes []int) string {
if status == 200 || slices.Contains(altStatusCodes, status) {
return "ok"
}
return "error"
}