mirror of
https://github.com/glanceapp/glance.git
synced 2025-06-22 02:41:23 +02:00
Add compact style for monitor widget
This commit is contained in:
parent
c6b07852fe
commit
9c5298aebf
@ -1149,11 +1149,19 @@ You can hover over the "ERROR" text to view more information.
|
|||||||
| Name | Type | Required | Default |
|
| Name | Type | Required | Default |
|
||||||
| ---- | ---- | -------- | ------- |
|
| ---- | ---- | -------- | ------- |
|
||||||
| sites | array | yes | |
|
| sites | array | yes | |
|
||||||
|
| style | string | no | |
|
||||||
| show-failing-only | boolean | no | false |
|
| show-failing-only | boolean | no | false |
|
||||||
|
|
||||||
##### `show-failing-only`
|
##### `show-failing-only`
|
||||||
Shows only a list of failing sites when set to `true`.
|
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`:
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
##### `sites`
|
##### `sites`
|
||||||
|
|
||||||
Properties for each site:
|
Properties for each site:
|
||||||
|
BIN
docs/images/monitor-widget-compact-preview.png
Normal file
BIN
docs/images/monitor-widget-compact-preview.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 15 KiB |
@ -1830,6 +1830,7 @@ details[open] .summary::after {
|
|||||||
.list { --list-half-gap: 0rem; }
|
.list { --list-half-gap: 0rem; }
|
||||||
.list-gap-2 { --list-half-gap: 0.1rem; }
|
.list-gap-2 { --list-half-gap: 0.1rem; }
|
||||||
.list-gap-4 { --list-half-gap: 0.2rem; }
|
.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-10 { --list-half-gap: 0.5rem; }
|
||||||
.list-gap-14 { --list-half-gap: 0.7rem; }
|
.list-gap-14 { --list-half-gap: 0.7rem; }
|
||||||
.list-gap-20 { --list-half-gap: 1rem; }
|
.list-gap-20 { --list-half-gap: 1rem; }
|
||||||
|
@ -32,6 +32,7 @@ var (
|
|||||||
RSSHorizontalCardsTemplate = compileTemplate("rss-horizontal-cards.html", "widget-base.html")
|
RSSHorizontalCardsTemplate = compileTemplate("rss-horizontal-cards.html", "widget-base.html")
|
||||||
RSSHorizontalCards2Template = compileTemplate("rss-horizontal-cards-2.html", "widget-base.html")
|
RSSHorizontalCards2Template = compileTemplate("rss-horizontal-cards-2.html", "widget-base.html")
|
||||||
MonitorTemplate = compileTemplate("monitor.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")
|
TwitchGamesListTemplate = compileTemplate("twitch-games-list.html", "widget-base.html")
|
||||||
TwitchChannelsTemplate = compileTemplate("twitch-channels.html", "widget-base.html")
|
TwitchChannelsTemplate = compileTemplate("twitch-channels.html", "widget-base.html")
|
||||||
RepositoryTemplate = compileTemplate("repository.html", "widget-base.html")
|
RepositoryTemplate = compileTemplate("repository.html", "widget-base.html")
|
||||||
|
39
internal/assets/templates/monitor-compact.html
Normal file
39
internal/assets/templates/monitor-compact.html
Normal 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 }}
|
@ -11,37 +11,6 @@ import (
|
|||||||
"github.com/glanceapp/glance/internal/feed"
|
"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 {
|
type Monitor struct {
|
||||||
widgetBase `yaml:",inline"`
|
widgetBase `yaml:",inline"`
|
||||||
Sites []struct {
|
Sites []struct {
|
||||||
@ -54,8 +23,9 @@ type Monitor struct {
|
|||||||
StatusStyle string `yaml:"-"`
|
StatusStyle string `yaml:"-"`
|
||||||
AltStatusCodes []int `yaml:"alt-status-codes"`
|
AltStatusCodes []int `yaml:"alt-status-codes"`
|
||||||
} `yaml:"sites"`
|
} `yaml:"sites"`
|
||||||
ShowFailingOnly bool `yaml:"show-failing-only"`
|
Style string `yaml:"style"`
|
||||||
HasFailing bool `yaml:"-"`
|
ShowFailingOnly bool `yaml:"show-failing-only"`
|
||||||
|
HasFailing bool `yaml:"-"`
|
||||||
}
|
}
|
||||||
|
|
||||||
func (widget *Monitor) Initialize() error {
|
func (widget *Monitor) Initialize() error {
|
||||||
@ -96,5 +66,40 @@ func (widget *Monitor) Update(ctx context.Context) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
func (widget *Monitor) Render() template.HTML {
|
func (widget *Monitor) Render() template.HTML {
|
||||||
|
if widget.Style == "compact" {
|
||||||
|
return widget.render(widget, assets.MonitorCompactTemplate)
|
||||||
|
}
|
||||||
|
|
||||||
return widget.render(widget, assets.MonitorTemplate)
|
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"
|
||||||
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user