xevion/glance
1
0
Fork 0
mirror of https://github.com/Xevion/glance.git synced 2025-12-10 04:07:26 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add DNS Stats widget

Browse Source
This commit is contained in:
Svilen Markov
2024-08-22 23:11:45 +01:00
parent 822b72eee4
commit 1df080983a
10 changed files with 591 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
internal/assets/static/main.css
View File

@@ -35,7 +35,11 @@
--color-widget-content-border: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 4%)));
--color-widget-background-highlight: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 4%)));
--color-popover-background: hsl(var(--bgh), calc(var(--bgs) + 3%), calc(var(--bgl) + 3%));
--color-popover-border: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 10%)));
--color-popover-border: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 12%)));
--color-progress-bar-border: hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 10% * var(--cm))));
--color-progress-bar-background: hsl(var(--bgh), calc(var(--bgs) * var(--tsm)), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 27% * var(--cm))));
--color-graph-gridlines: hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 6% * var(--cm))));
--ths: var(--bgh), calc(var(--bgs) * var(--tsm));
--color-text-base: hsl(var(--ths), calc(var(--scheme) var(--cm) * 58%));
@@ -126,6 +130,15 @@
.list-gap-24 { --list-half-gap: 1.2rem; }
.list-gap-34 { --list-half-gap: 1.7rem; }
.page-columns-transitioned .list-with-transition > * { animation: collapsibleItemReveal .25s backwards; }
.list-with-transition > *:nth-child(2) { animation-delay: 30ms; }
.list-with-transition > *:nth-child(3) { animation-delay: 60ms; }
.list-with-transition > *:nth-child(4) { animation-delay: 90ms; }
.list-with-transition > *:nth-child(5) { animation-delay: 120ms; }
.list-with-transition > *:nth-child(6) { animation-delay: 150ms; }
.list-with-transition > *:nth-child(7) { animation-delay: 180ms; }
.list-with-transition > *:nth-child(8) { animation-delay: 210ms; }
.list > *:not(:first-child) {
margin-top: calc(var(--list-half-gap) * 2);
}
@@ -649,7 +662,10 @@ details[open] .summary::after {
@container widget (max-width: 750px) { .cards-grid { --cards-per-row: 3; } }
@container widget (max-width: 650px) { .cards-grid { --cards-per-row: 2; } }
.widget-small-content-bounds {
max-width: 350px;
margin: 0 auto;
}
.widget-error-header {
display: flex;
@@ -1003,12 +1019,136 @@ details[open] .summary::after {
padding: 0.6rem 0;
}
.calendar-day-today {
border-radius: var(--border-radius);
background-color: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) (var(--bgl)) + 6%)));
color: var(--color-text-highlight);
}
.dns-stats-totals {
transition: opacity .3s;
transition-delay: 50ms;
}
.dns-stats:has(.dns-stats-graph .popover-active) .dns-stats-totals {
opacity: 0.1;
transition-delay: 0s;
}
.dns-stats-graph {
--graph-height: 70px;
height: var(--graph-height);
position: relative;
margin-bottom: 2.5rem;
}
.dns-stats-graph-gridlines-container {
position: absolute;
z-index: -1;
inset: 0;
}
.dns-stats-graph-gridlines {
height: 100%;
width: 100%;
}
.dns-stats-graph-columns {
display: flex;
height: 100%;
}
.dns-stats-graph-column {
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: column;
width: calc(100% / 8);
position: relative;
}
.dns-stats-graph-column::before {
content: '';
position: absolute;
inset: 1px 0;
z-index: -1;
opacity: 0;
background: var(--color-text-base);
transition: opacity .2s;
}
.dns-stats-graph-column:hover::before {
opacity: 0.05;
}
.dns-stats-graph-bar {
width: 14px;
height: calc((var(--bar-height) / 100) * var(--graph-height));
border: 1px solid var(--color-progress-bar-border);
border-radius: var(--border-radius) var(--border-radius) 0 0;
display: flex;
background: var(--color-widget-background);
padding: 2px 2px 0 2px;
display: flex;
flex-direction: column;
gap: 2px;
transition: border-color .2s;
min-height: 10px;
}
.dns-stats-graph-column.popover-active .dns-stats-graph-bar {
border-color: var(--color-text-subdue);
border-bottom-color: var(--color-progress-bar-border);
}
.dns-stats-graph-bar > * {
border-radius: 2px;
background: var(--color-progress-bar-background);
min-height: 1px;
}
.dns-stats-graph-bar > .queries {
flex-grow: 1;
}
.dns-stats-graph-bar > *:last-child {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.dns-stats-graph-bar > .blocked {
background-color: var(--color-negative);
}
.dns-stats-graph-column:nth-child(even) .dns-stats-graph-time {
opacity: 1;
transform: translateY(0);
}
.dns-stats-graph-time, .dns-stats-graph-columns:hover .dns-stats-graph-time {
position: absolute;
font-size: var(--font-size-h6);
inset-inline: 0;
text-align: center;
height: 2.5rem;
line-height: 2.5rem;
top: 100%;
user-select: none;
opacity: 0;
transform: translateY(-0.5rem);
transition: opacity .2s, transform .2s;
}
.dns-stats-graph-column:hover .dns-stats-graph-time {
opacity: 1;
transform: translateY(0);
}
.dns-stats-graph-columns:hover .dns-stats-graph-column:not(:hover) .dns-stats-graph-time {
opacity: 0;
}
.weather-column {
position: relative;
display: flex;
@@ -1547,6 +1687,7 @@ details[open] .summary::after {
.color-positive { color: var(--color-positive); }
.color-primary { color: var(--color-primary); }
.cursor-help { cursor: help; }
.break-all { word-break: break-all; }
.text-left { text-align: left; }
.text-right { text-align: right; }
@@ -1592,6 +1733,8 @@ details[open] .summary::after {
.margin-top-15 { margin-top: 1.5rem; }
.margin-top-20 { margin-top: 2rem; }
.margin-top-25 { margin-top: 2.5rem; }
.margin-top-35 { margin-top: 3.5rem; }
.margin-top-40 { margin-top: 4rem; }
.margin-top-auto { margin-top: auto; }
.margin-block-3 { margin-block: 0.3rem; }
.margin-block-5 { margin-block: 0.5rem; }

1
internal/assets/templates.go
View File

@@ -38,6 +38,7 @@ var (
SearchTemplate = compileTemplate("search.html", "widget-base.html")
ExtensionTemplate = compileTemplate("extension.html", "widget-base.html")
GroupTemplate = compileTemplate("group.html", "widget-base.html")
DNSStatsTemplate = compileTemplate("dns-stats.html", "widget-base.html")
)
var globalTemplateFunctions = template.FuncMap{

85
internal/assets/templates/dns-stats.html Normal file
View File

@@ -0,0 +1,85 @@
{{ template "widget-base.html" . }}
{{ define "widget-content" }}
<div class="widget-small-content-bounds dns-stats">
<div class="flex text-center justify-between dns-stats-totals">
<div>
<div class="color-highlight size-h3">{{ .Stats.TotalQueries | formatNumber }}</div>
<div class="size-h6">QUERIES</div>
</div>
<div>
<div class="color-highlight size-h3">{{ .Stats.BlockedPercent }}%</div>
<div class="size-h6">BLOCKED</div>
</div>
{{ if gt .Stats.ResponseTime 0 }}
<div>
<div class="color-highlight size-h3">{{ .Stats.ResponseTime | formatNumber }}ms</div>
<div class="size-h6">LATENCY</div>
</div>
{{ else }}
<div class="cursor-help" data-popover-type="text" data-popover-text="Total number of blocked domains from all adlists" data-popover-max-width="200px" data-popover-text-align="center">
<div class="color-highlight size-h3">{{ .Stats.DomainsBlocked | formatViewerCount }}</div>
<div class="size-h6">DOMAINS</div>
</div>
{{ end }}
</div>
<div class="dns-stats-graph margin-top-15">
<div class="dns-stats-graph-gridlines-container">
<svg class="dns-stats-graph-gridlines" shape-rendering="crispEdges" viewBox="0 0 1 100" preserveAspectRatio="none">
<g stroke="var(--color-graph-gridlines)" stroke-width="1">
<line x1="0" y1="1" x2="1" y2="1" vector-effect="non-scaling-stroke" />
<line x1="0" y1="25" x2="1" y2="25" vector-effect="non-scaling-stroke" />
<line x1="0" y1="50" x2="1" y2="50" vector-effect="non-scaling-stroke" />
<line x1="0" y1="75" x2="1" y2="75" vector-effect="non-scaling-stroke" />
<line x1="0" y1="99" x2="1" y2="99" vector-effect="non-scaling-stroke" stroke="var(--color-progress-bar-border)"/>
</g>
</svg>
</div>
<div class="dns-stats-graph-columns">
{{ range $i, $column := .Stats.Series }}
<div class="dns-stats-graph-column" data-popover-type="html" data-popover-position="above" data-popover-show-delay="500">
<div data-popover-html>
<div class="flex text-center justify-between gap-25">
<div>
<div class="color-highlight size-h3">{{ $column.Queries | formatNumber }}</div>
<div class="size-h6">QUERIES</div>
</div>
<div>
<div class="color-highlight size-h3">{{ $column.PercentBlocked }}%</div>
<div class="size-h6">BLOCKED</div>
</div>
</div>
</div>
{{ if gt $column.PercentTotal 0}}
<div class="dns-stats-graph-bar" style="--bar-height: {{ $column.PercentTotal }}">
{{ if ne $column.Queries $column.Blocked }}
<div class="queries"></div>
{{ end }}
{{ if or (gt $column.Blocked 0) (and (lt $column.PercentTotal 15) (lt $column.PercentBlocked 10)) }}
<div class="blocked" style="flex-basis: {{ $column.PercentBlocked }}%"></div>
{{ end }}
</div>
{{ end }}
<div class="dns-stats-graph-time">{{ index $.TimeLabels $i }}</div>
</div>
{{ end }}
</div>
</div>
{{ if .Stats.TopBlockedDomains }}
<details class="details margin-top-40">
<summary class="summary">Top blocked domains</summary>
<ul class="list list-gap-4 list-with-transition size-h5">
{{ range .Stats.TopBlockedDomains }}
<li class="flex justify-between align-center">
<div class="text-truncate rtl">{{ .Domain }}</div>
<div class="text-right" style="width: 4rem;"><span class="color-highlight">{{ .PercentBlocked }}</span>%</div>
</li>
{{ end }}
</ul>
</details>
{{ end }}
</div>
{{ end }}