From 3f767ee70902ea013ce99597f8fbb5f7f2b1269c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Fri, 18 Sep 2026 14:30:44 +0200 Subject: [PATCH] Rework the uptime page, add gauge cards, fix card with code (#3090) --- .changeset/fix-card-with-code-pre.md | 5 + .changeset/system-status-panel.md | 5 + .changeset/widgets-gauge-cards.md | 5 + preview/pages/uptime.astro | 162 +++++++++++--------- preview/pages/widgets.astro | 12 +- shared/components/cards/Code.astro | 20 +-- shared/components/cards/Gauge.astro | 91 +++++++++++ shared/components/cards/SystemStatus.astro | 114 ++++++++++++++ shared/components/layout/HeaderUptime.astro | 2 +- 9 files changed, 331 insertions(+), 85 deletions(-) create mode 100644 .changeset/fix-card-with-code-pre.md create mode 100644 .changeset/system-status-panel.md create mode 100644 .changeset/widgets-gauge-cards.md create mode 100644 shared/components/cards/Gauge.astro create mode 100644 shared/components/cards/SystemStatus.astro diff --git a/.changeset/fix-card-with-code-pre.md b/.changeset/fix-card-with-code-pre.md new file mode 100644 index 000000000..e49f53d8f --- /dev/null +++ b/.changeset/fix-card-with-code-pre.md @@ -0,0 +1,5 @@ +--- +"@tabler/preview": patch +--- + +Fixed the "Card with code" widget rendering its code as plain text instead of a `pre` block. diff --git a/.changeset/system-status-panel.md b/.changeset/system-status-panel.md new file mode 100644 index 000000000..2d8d3cdb1 --- /dev/null +++ b/.changeset/system-status-panel.md @@ -0,0 +1,5 @@ +--- +"@tabler/preview": minor +--- + +Added a System status panel with 60-day uptime history bars to the Uptime preview page. diff --git a/.changeset/widgets-gauge-cards.md b/.changeset/widgets-gauge-cards.md new file mode 100644 index 000000000..7dfae568a --- /dev/null +++ b/.changeset/widgets-gauge-cards.md @@ -0,0 +1,5 @@ +--- +"@tabler/preview": minor +--- + +Added ApexCharts gauge cards to the Widgets preview page. diff --git a/preview/pages/uptime.astro b/preview/pages/uptime.astro index 2b8a325ca..11ba1b6e1 100644 --- a/preview/pages/uptime.astro +++ b/preview/pages/uptime.astro @@ -1,58 +1,102 @@ --- -import Subheader from '@ui/Subheader.astro' import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import Chart from '@components/demo/Chart.astro' import Card from '@ui/Card.astro' import CardBody from '@ui/CardBody.astro' +import CardHeader from '@ui/CardHeader.astro' import CardTitle from '@ui/CardTitle.astro' +import StatusDot from '@ui/StatusDot.astro' +import StatCard from '@components/cards/StatCard.astro' +import SystemStatus from '@components/cards/SystemStatus.astro' + +const incidents = [ + { color: 'red', title: 'Email delivery outage', date: 'Aug 24, 2026', duration: '42 minutes', resolved: true }, + { color: 'yellow', title: 'Slow webhook deliveries', date: 'Aug 12, 2026', duration: '1 hour 8 minutes', resolved: true }, + { color: 'yellow', title: 'Dashboard loading slowly', date: 'Aug 3, 2026', duration: '17 minutes', resolved: true }, + { color: 'red', title: 'Email delivery outage', date: 'Jul 21, 2026', duration: '2 hours 5 minutes', resolved: true }, +] + +const periods = [ + { period: 'Today', availability: '100%', downtime: 'none', incidents: 0, longest: '–', average: '–' }, + { period: 'Last 7 days', availability: '100%', downtime: 'none', incidents: 0, longest: '–', average: '–' }, + { period: 'Last 30 days', availability: '99.9028%', downtime: '42 minutes', incidents: 1, longest: '42 minutes', average: '42 minutes' }, + { period: 'Last 365 days', availability: '99.9414%', downtime: '5 hours 8 minutes', incidents: 9, longest: '2 hours 5 minutes', average: '34 minutes' }, + { period: 'All time', availability: '99.9533%', downtime: '11 hours 40 minutes', incidents: 23, longest: '2 hours 5 minutes', average: '30 minutes' }, +] ---
-
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + + Recent incidents + +
+ { + incidents.map((incident) => ( +
+
+
+ +
+
+
{incident.title}
+
+ {incident.date} · {incident.duration} +
+
+
+ Resolved +
+
+
+ )) + } +
+
+ View all incidents +
+ +
+
- Currently up for -
14 days 2 hours 54 mins 34 seconds
+ Response time in the last 4 months (ms) +
-
+
- Last checked at -
27 seconds ago
- - -
-
- - - Incidents -
3
- - -
-
- - - Response times across regions in the last day - - - -
-
- - - Uptime incidents per day - + Incidents per day +
+ + Availability +
- +
@@ -63,47 +107,19 @@ import CardTitle from '@ui/CardTitle.astro' - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + { + periods.map((row) => ( + + + + + + + + + )) + }
Time periodAvg. incident
Today98.9533%1 minute11 minute1 minute
Last 7 days98.9533%1 minute11 minute1 minute
Last 30 days98.9533%1 minute11 minute1 minute
Last 365 days98.9533%1 minute11 minute1 minute
All time98.9533%1 minute11 minute1 minute
{row.period}{row.availability}{row.downtime}{row.incidents}{row.longest}{row.average}
diff --git a/preview/pages/widgets.astro b/preview/pages/widgets.astro index 03671f227..f6b6b13c3 100644 --- a/preview/pages/widgets.astro +++ b/preview/pages/widgets.astro @@ -12,9 +12,10 @@ import ProjectSummary from '@shared/components/cards/ProjectSummary.astro' import ProjectKanban from '@shared/components/cards/ProjectKanban.astro' import UserInfo from '@shared/components/cards/UserInfo.astro' import Configuration from '@shared/components/cards/Configuration.astro' +import Gauge from '@shared/components/cards/Gauge.astro' --- - +
@@ -29,6 +30,15 @@ import Configuration from '@shared/components/cards/Configuration.astro'
+
+ +
+
+ +
+
+ +
diff --git a/shared/components/cards/Code.astro b/shared/components/cards/Code.astro index 72f9512dc..6f9c4e33d 100644 --- a/shared/components/cards/Code.astro +++ b/shared/components/cards/Code.astro @@ -1,21 +1,21 @@ --- -// Raw CSS text inside .card-code (no highlight markup). +// Plain 
 inside .card-code (no highlight markup).
 import CardTitle from '@ui/CardTitle.astro'
 
-const code = `
-.card-footer {
-	background: transparent;
+const code = `.card-footer {
+  background: transparent;
 
-	&:last-child {
-		border-radius: 0 0 1 2;
-	}
-}
-`
+  &:last-child {
+    border-radius: 0 0 4px 4px;
+  }
+}`
 ---
 
 

   

     Card with code
   

-  
{code}

+  

+    
{code}

+  

 

diff --git a/shared/components/cards/Gauge.astro b/shared/components/cards/Gauge.astro
new file mode 100644
index 000000000..fa412c47c
--- /dev/null
+++ b/shared/components/cards/Gauge.astro
@@ -0,0 +1,91 @@
+---
+import CaptureScript from '../CaptureScript.astro'
+
+interface Props {
+  id: string
+  title: string
+  description: string
+  value: number
+  label: string
+  count: number
+  total: number
+  countLabel?: string
+  color?: 'green' | 'yellow' | 'neutral'
+}
+
+const { id, title, description, value, label, count, total, countLabel = 'of', color = 'neutral' } = Astro.props
+
+// Needs the `apexcharts` lib on the page (pageLibs / docs-libs).
+const chartId = `chart-gauge-${id}`
+const chartColor = color === 'neutral' ? 'var(--tblr-body-color)' : `var(--tblr-${color})`
+const format = (n: number) => n.toLocaleString('en-US')
+---
+
+

+  

+    
{title}

+    
+    
{description}

+  

+  

+    
{format(count)} {countLabel} {format(total)}

+    
{format(total - count)} remaining

+  

+

+
+  
+  
+  
+
diff --git a/shared/components/cards/SystemStatus.astro b/shared/components/cards/SystemStatus.astro
new file mode 100644
index 000000000..9323d395a
--- /dev/null
+++ b/shared/components/cards/SystemStatus.astro
@@ -0,0 +1,114 @@
+---
+import CaptureScript from '../CaptureScript.astro'
+
+interface Props {
+  id: string
+  services?: string[]
+  days?: number
+  seed?: number
+  class?: string
+}
+
+const { id, services = ['API', 'Dashboard', 'Webhooks', 'Email delivery'], days = 60, seed = 18, class: className } = Astro.props
+
+const cardId = `system-status-${id}`
+---
+
+

+  

+    
System status

+    

+      
+        
+        All systems operational
+      
+    

+  

+  

+    {
+      services.map((service) => (
+        

+          

+            
{service}

+            

+              – uptime
+            

+          

+          

+        

+      ))
+    }
+  

+  

+    

+      
{days} days ago

+      

+        Operational
+        Degraded
+        Outage
+      

+      
Today

+    

+  

+

+
+  
+  
+  
+
diff --git a/shared/components/layout/HeaderUptime.astro b/shared/components/layout/HeaderUptime.astro
index c87a80a2a..8349b2978 100644
--- a/shared/components/layout/HeaderUptime.astro
+++ b/shared/components/layout/HeaderUptime.astro
@@ -6,7 +6,7 @@ import PageTitle from '@ui/PageTitle.astro'
 
 
 

-  

+