title: "Vargo"
pages:
- name: "Vargo Dashboard"
columns:
- size: small
widgets:
- type: calendar
first-day-of-week: monday
- type: clock
timezone: "timezone"
hour-format: 12h
show-seconds: false
show-date: true
- type: markets
markets:
- symbol: BTC
name: Bitcoin
- symbol: ETH
name: Ethereum
- symbol: SOL
name: Solana
- symbol: DOGE
name: DogeCoin
- type: reddit
title: "Reddit"
show-flairs: true
subreddit: name-of-your-subreddit
limit: 5
collapse-after: 3
- size: full
widgets:
- type: docker-containers
containers:
<container-1>:
name: Name 1
description: Desc 1
icon: simple-icons-icon
hide: false
<container-2>:
name: Name 2
url: Url
description: Desc 2
icon: simple-icons-icon
<container-3>:
hide: true
<container-4>:
hide: true
<container-5>:
name: Name 5
url: Url
description: Desc 5
icon: simple-icons-icon
<container-6>:
name: Name 6
url: url
description: Desc 6
icon: simple-icons-icon
<container-7>:
hide: true
<container-8>:
name: Name 8
url: url
description: Desc 8
icon: simple-icons-icon
<container-9>:
name: Name 9
url: url
description: Desc 9
icon: simple-icons-icon
<container-10>:
name: Name 10
url: url
description: Desc 10
icon: simple-icons-icon
<container-11>:
name: Name 11
url: url
description: Desc 11
icon: simple-icons-icon
<container-12>:
hide: true
sort-by: cpu
limit: 8
refresh-interval: 15
- type: monitor
cache: 5m # HTTP check every 5 minutes
title: "Services"
sites:
- title: Service_1
url: site-url
timeout: 12s
icon: simple-icons-icon
- title: Service_2
url: site-url
timeout: 12s
icon: simple-icons-icon
- title: Service_3
url: site-url
timeout: 12s
icon: simple-icons-icon
- title: Service_4
url: site-url
timeout: 12s
icon: simple-icons-icon
- title: Service_5
url: site-url
timeout: 12s
icon: simple-icons-icon
- title: Service_6
url: site-url
timeout: 12s
icon: simple-icons-icon
- title: Service_7
url: site-url
timeout: 12s
icon: simple-icons-icon
- type: server-stats
title: "Server Metrics"
servers:
- type: remote
name: "Vargo"
url: glance-agent-url
timeout: 12s
refresh-interval: 10
- type: custom-api
cache: 1h
title: Internet Speed
title-url: title-url
url: url
headers:
Authorization: Bearer <TOKEN>
Accept: application/json
subrequests:
stats:
url: https://your.speedtest.com/api/v1/stats
headers:
Authorization: Bearer <TOKEN>
Accept: application/json
options:
showPercentageDiff: true
template: |
{{ $showPercentage := .Options.BoolOr "showPercentageDiff" true }}
{{ $stats := .Subrequest "stats" }}
<div class="flex justify-between text-center margin-block-3">
<div>
{{ $downloadChange := percentChange ($stats.JSON.Float "data.download.avg_bits") (.JSON.Float "data.download_bits")
}}
{{ if $showPercentage }}
<div
class="size-small {{ if gt $downloadChange 0.0 }}color-positive{{ else if lt $downloadChange 0.0 }}color-negative{{ else }}color-primary{{ end }}"
style="display: inline-flex; align-items: center;">
{{ $downloadChange | printf "%+.1f%%" }}
{{ if gt $downloadChange 0.0 }}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
style="height: 1em; margin-left: 0.25em;" class="size-4">
<path fill-rule="evenodd"
d="M9.808 4.057a.75.75 0 0 1 .92-.527l3.116.849a.75.75 0 0 1 .528.915l-.823 3.121a.75.75 0 0 1-1.45-.382l.337-1.281a23.484 23.484 0 0 0-3.609 3.056.75.75 0 0 1-1.07.01L6 8.06l-3.72 3.72a.75. 75 0 1 1-1.06-1.061l4.25-4.25a.75.75 0 0 1 1.06 0l1.756 1.755a25.015 25.015 0 0 1 3.508-2.85l-1.46-.398a.75.75 0 0 1-.526-.92Z"
clip-rule="evenodd" />
</svg>
{{ else if lt $downloadChange 0.0 }}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
style="height: 1em; margin-left: 0.25em;" class="size-4">
<path fill-rule="evenodd"
d="M1.22 4.22a.75.75 0 0 1 1.06 0L6 7.94l2.761-2.762a.75.75 0 0 1 1.158.12 24.9 24.9 0 0 1 2.718 5.556l.729-1.261a.75.75 0 0 1 1.299.75l-1.591 2.755a.75.75 0 0 1-1.025.275l-2.756-1.591a.75.7 5 0 1 1 .75-1.3l1.097.634a23.417 23.417 0 0 0-1.984-4.211L6.53 9.53a.75.75 0 0 1-1.06 0L1.22 5.28a.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd" />
</svg>
{{ end }}
</div>
{{ end }}
<div class="color-highlight size-h3">{{ .JSON.Float "data.download_bits" | mul 0.000001 | printf "%.1f" }}</div>
<div class="size-h6">DOWNLOAD</div>
</div>
<div>
{{ $uploadChange := percentChange ($stats.JSON.Float "data.upload.avg_bits") (.JSON.Float "data.upload_bits") }}
{{ if $showPercentage }}
<div
class="size-small {{ if gt $uploadChange 0.0 }}color-positive{{ else if lt $uploadChange 0.0 }}color-negative{{ else }}color-primary{{ end }}"
style="display: inline-flex; align-items: center;">
{{ $uploadChange | printf "%+.1f%%" }}
{{ if gt $uploadChange 0.0 }}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
style="height: 1em; margin-left: 0.25em;" class="size-4">
<path fill-rule="evenodd"
d="M9.808 4.057a.75.75 0 0 1 .92-.527l3.116.849a.75.75 0 0 1 .528.915l-.823 3.121a.75.75 0 0 1-1.45-.382l.337-1.281a23.484 23.484 0 0 0-3.609 3.056.75.75 0 0 1-1.07.01L6 8.06l-3.72 3.72a.75. 75 0 1 1-1.06-1.061l4.25-4.25a.75.75 0 0 1 1.06 0l1.756 1.755a25.015 25.015 0 0 1 3.508-2.85l-1.46-.398a.75.75 0 0 1-.526-.92Z"
clip-rule="evenodd" />
</svg>
{{ else if lt $uploadChange 0.0 }}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
style="height: 1em; margin-left: 0.25em;" class="size-4">
<path fill-rule="evenodd"
d="M1.22 4.22a.75.75 0 0 1 1.06 0L6 7.94l2.761-2.762a.75.75 0 0 1 1.158.12 24.9 24.9 0 0 1 2.718 5.556l.729-1.261a.75.75 0 0 1 1.299.75l-1.591 2.755a.75.75 0 0 1-1.025.275l-2.756-1.591a.75.7 5 0 1 1 .75-1.3l1.097.634a23.417 23.417 0 0 0-1.984-4.211L6.53 9.53a.75.75 0 0 1-1.06 0L1.22 5.28a.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd" />
</svg>
{{ end }}
</div>
{{ end }}
<div class="color-highlight size-h3">{{ .JSON.Float "data.upload_bits" | mul 0.000001 | printf "%.1f" }}</div>
<div class="size-h6">UPLOAD</div>
</div>
<div>
{{ $pingChange := percentChange ($stats.JSON.Float "data.ping.avg") (.JSON.Float "data.ping") }}
{{ if $showPercentage }}
<div
class="size-small {{ if gt $pingChange 0.0 }}color-negative{{ else if lt $pingChange 0.0 }}color-positive{{ else }}color-primary{{ end }}"
style="display: inline-flex; align-items: center;">
{{ $pingChange | printf "%+.1f%%" }}
{{ if lt $pingChange 0.0 }}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
style="height: 1em; margin-left: 0.25em;" class="size-4">
<path fill-rule="evenodd"
d="M1.22 4.22a.75.75 0 0 1 1.06 0L6 7.94l2.761-2.762a.75.75 0 0 1 1.158.12 24.9 24.9 0 0 1 2.718 5.556l.729-1.261a.75.75 0 0 1 1.299.75l-1.591 2.755a.75.75 0 0 1-1.025.275l-2.756-1.591a.75.7 5 0 1 1 .75-1.3l1.097.634a23.417 23.417 0 0 0-1.984-4.211L6.53 9.53a.75.75 0 0 1-1.06 0L1.22 5.28a.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd" />
</svg>
{{ else if gt $pingChange 0.0 }}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
style="height: 1em; margin-left: 0.25em;" class="size-4">
<path fill-rule="evenodd"
d="M9.808 4.057a.75.75 0 0 1 .92-.527l3.116.849a.75.75 0 0 1 .528.915l-.823 3.121a.75.75 0 0 1-1.45-.382l.337-1.281a23.484 23.484 0 0 0-3.609 3.056.75.75 0 0 1-1.07.01L6 8.06l-3.72 3.72a.75. 75 0 1 1-1.06-1.061l4.25-4.25a.75.75 0 0 1 1.06 0l1.756 1.755a25.015 25.015 0 0 1 3.508-2.85l-1.46-.398a.75.75 0 0 1-.526-.92Z"
clip-rule="evenodd" />
</svg>
{{ end }}
</div>
{{ end }}
<div class="color-highlight size-h3">{{ .JSON.Float "data.ping" | printf "%.0f ms" }}</div>
<div class="size-h6">PING</div>
</div>
</div>
- type: custom-api
title: Nearby Aircraft
cache: 1m
url: "https://opensky-network.org/api/states/all?lamin=min-latitude&lomin=min-longitude&lamax=max-latitutde&lomax=max-longitude"
template: |-
<div class="opensky-aircraft-stats">
{{ $states := .JSON.Array "states" }}
{{ $statesCount := len $states }}
<div class="margin-block-2">
<div class="size-h6">AIRCRAFT NEARBY: {{ $statesCount }}</div>
</div>
{{ if gt $statesCount 0 }}
{{ $plane := index $states 0 }}
{{ $callsign := $plane.String "1" }}
{{ $icao24 := $plane.String "0" }}
{{ $origin := $plane.String "2" }}
{{ $onGround := $plane.Bool "8" }}
{{ $altitude := $plane.Float "7" }}
{{ $speed := $plane.Float "9" }}
<div class="margin-block-2">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
<div>
<div class="color-highlight size-h3">
{{ if ne $callsign "" }}{{ $callsign }}{{ else }}{{ $icao24 }}{{ end }}
</div>
<div class="size-h6">CALLSIGN</div>
</div>
<div>
<div class="color-highlight size-h3 text-truncate" style="max-width: 100%;">
{{ if ne $origin "" }}{{ $origin }}{{ else }}-{{ end }}
</div>
<div class="size-h6">ORIGIN</div>
</div>
</div>
</div>
<div class="margin-block-2">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
<div>
<div class="color-highlight size-h3">
{{ if and (not $onGround) (ne $altitude 0.0) }}{{ printf "%.0f" $altitude }}m{{ else }}-{{ end }}
</div>
<div class="size-h6">ALTITUDE</div>
</div>
<div>
<div class="color-highlight size-h3">
{{ if and (not $onGround) (ne $speed 0.0) }}{{ printf "%.0f" $speed }}m/s{{ else }}-{{ end }}
</div>
<div class="size-h6">SPEED</div>
</div>
</div>
</div>
{{ end }}
</div>
- type: group
layout: horizontal
widgets:
- type: custom-api
title: "F1 • Next Race"
cache: 1h
url: "https://f1api.dev/api/current/next?timezone={TIMEZONE}"
template: |-
{{ $img := "https://cdn-icons-png.flaticon.com/512/668/668087.png" }}
{{ $race := .JSON.String "race.0.raceName" }}
{{ if not $race }}{{ $race = (printf "Round %s" (.JSON.String "round")) }}{{ end }}
{{ $date := .JSON.String "race.0.schedule.race.date" }}
{{ $time := .JSON.String "race.0.schedule.race.time" }}
{{ $cname := .JSON.String "race.0.circuit.circuitName" }}
{{ $city := .JSON.String "race.0.circuit.city" }}
{{ $country := .JSON.String "race.0.circuit.country" }}
<div style="display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:start">
<img src="{{ $img }}" alt="F1" style="width:56px;height:56px;object-fit:contain;opacity:.9;filter:grayscale(1);" />
<div>
<div class="size-h4 color-highlight">{{ $race }}</div>
<div class="size-h6">{{ $cname }}</div>
<div class="size-h6">{{ $city }}, {{ $country }}</div>
<div class="size-h6" style="margin-top:6px">
Race: {{ $date }} {{ if $time }}• {{ $time }}{{ end }}
</div>
<div style="border-top:1px solid;margin-top:10px;padding-top:8px" class="size-h6">
FP1: {{ .JSON.String "race.0.schedule.fp1.date" }} {{ if .JSON.String "race.0.schedule.fp1.time" }}• {{ .JSON.String "race.0.schedule.fp1.time" }}{{ end }}<br/>
Qualy: {{ .JSON.String "race.0.schedule.qualy.date" }} {{ if .JSON.String "race.0.schedule.qualy.time" }}• {{ .JSON.String "race.0.schedule.qualy.time" }}{{ end }}
</div>
</div>
</div>
- type: custom-api
title: "F1 • Last Race Result"
cache: 12h
url: "https://f1api.dev/api/current/last?timezone={TIMEZONE}"
template: |-
{{ $img := "https://cdn-icons-png.flaticon.com/512/668/668087.png" }}
{{ $name := .JSON.String "race.0.raceName" }}
{{ $cname := .JSON.String "race.0.circuit.circuitName" }}
{{ $city := .JSON.String "race.0.circuit.city" }}
{{ $country := .JSON.String "race.0.circuit.country" }}
{{ $date := .JSON.String "race.0.schedule.race.date" }}
{{ $winName := .JSON.String "race.0.winner.name" }}
{{ $winSur := .JSON.String "race.0.winner.surname" }}
{{ $winShort := .JSON.String "race.0.winner.shortName" }}
{{ $team := .JSON.String "race.0.teamWinner.teamName" }}
{{ $laps := .JSON.String "race.0.laps" }}
<div style="display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:start">
<img src="{{ $img }}" alt="Winner" style="width:56px;height:56px;object-fit:contain;opacity:.9;filter:grayscale(1);" />
<div>
<div class="size-h4 color-highlight">{{ $name }}</div>
<div class="size-h6">{{ $cname }}</div>
<div class="size-h6">{{ $city }}, {{ $country }}</div>
<div class="size-h6" style="margin-top:6px">Race: {{ $date }} • Laps: {{ $laps }}</div>
<div style="border-top:1px solid;margin-top:10px;padding-top:8px">
<div class="size-h5 color-positive">Winner</div>
<div class="size-h3">
{{ if $winShort }}{{ $winShort }} · {{ end }}{{ $winName }} {{ $winSur }}
</div>
<div class="size-h6">{{ $team }}</div>
</div>
</div>
</div>
- size: small
widgets:
- type: weather
location: Location
units: metric
hour-format: 12h
- type: custom-api
title: Air Quality
cache: 10m
url: "https://api.waqi.info/feed/geo:coordinates/?token=generate-token-from-site"
template: |-
{{ $aqi := printf "%03s" (.JSON.String "data.aqi") }}
{{ $aqiraw := .JSON.String "data.aqi" }}
{{ $updated := .JSON.String "data.time.iso" }}
{{ $humidity := .JSON.Float "data.iaqi.h.v" }}
{{ $ozone := .JSON.String "data.iaqi.o3.v" }}
{{ $pm25 := .JSON.String "data.iaqi.pm25.v" }}
{{ $pressure := .JSON.Float "data.iaqi.p.v" }}
<div class="flex justify-between">
<div class="size-h5">
{{ if le $aqi "050" }}
<div class="color-positive">Good air quality</div>
{{ else if le $aqi "100" }}
<div class="color-primary">Moderate air quality</div>
{{ else }}
<div class="color-negative">Bad air quality</div>
{{ end }}
</div>
</div>
<div class="color-highlight size-h2">AQI: {{ $aqiraw }}</div>
<div style="border-bottom: 1px solid; margin-block: 10px;"></div>
<div class="margin-block-2">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
<div>
<div class="size-h3 color-highlight">{{ printf "%.1f" $humidity }}%</div>
<div class="size-h6">HUMIDITY</div>
</div>
<div>
<div class="size-h3 color-highlight">{{ $ozone }} μg/m³</div>
<div class="size-h6">OZONE</div>
</div>
<div>
<div class="size-h3 color-highlight">{{ $pm25 }} μg/m³</div>
<div class="size-h6">PM2.5</div>
</div>
<div>
<div class="size-h3 color-highlight">{{ printf "%.1f" $pressure }} hPa</div>
<div class="size-h6">PRESSURE</div>
</div>
</div>
<div class="size-h6" style="margin-top: 10px;">Last Updated at {{ slice $updated 11 16 }}</div>
</div>
- type: custom-api
title: Random Capybara
cache: 10m
url: "https://animals.maxz.dev/api/capybara/random"
template: |-
{{ $img := .JSON.String "image" }}
{{ if $img }}
<img src="{{ $img }}" style="width:100%;height:auto;border-radius:8px;" />
{{ else }}
<div class="color-negative">No image in API response</div>
{{ end }}
- type: releases
show-source-icon: true
token: Github_TOKEN
repositories:
- nextcloud/server
- dani-garcia/vaultwarden
- portainer/portainer
- fastapi/fastapi
limit: 6
refresh-interval: 43200 # 12 hours
- type: to-do
title: "Todo"
items:
- text: "Add more services to Monitor"
done: false
- text: "Tune server-stats agent"
done: false