uptime.link/catalog
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Jürgen Kunz
2025-06-30 00:17:43 +00:00
parent bff7ec6640
commit df4dd3f539
15 changed files with 1148 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
ts_web/pages/statuspage-demo.ts
View File

@@ -7,37 +7,16 @@ export const statuspageDemo = () => html`
min-height: 100vh;
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
}
.demo-info {
padding: 20px;
background: #2196F3;
color: white;
text-align: center;
font-family: 'Geist Sans', Inter, sans-serif;
}
.demo-info h3 {
margin: 0 0 10px 0;
font-size: 20px;
font-weight: 600;
}
.demo-info p {
margin: 0;
opacity: 0.9;
font-size: 14px;
}
</style>
<div class="demo-page-wrapper">
<div class="demo-info">
<h3>CloudFlow Infrastructure Status Page</h3>
<p>This demo shows a comprehensive status page for a cloud infrastructure provider with real-time monitoring.</p>
</div>
<dees-demowrapper
.runAfterRender=${async (wrapperElement: any) => {
const header = wrapperElement.querySelector('upl-statuspage-header') as any;
const pageTitle = wrapperElement.querySelector('upl-statuspage-pagetitle') as any;
const statusBar = wrapperElement.querySelector('upl-statuspage-statusbar') as any;
const statsGrid = wrapperElement.querySelector('upl-statuspage-statsgrid') as any;
const assetsSelector = wrapperElement.querySelector('upl-statuspage-assetsselector') as any;
const statusDetails = wrapperElement.querySelector('upl-statuspage-statusdetails') as any;
const statusMonth = wrapperElement.querySelector('upl-statuspage-statusmonth') as any;
@@ -578,6 +557,20 @@ export const statuspageDemo = () => html`
incidents.currentIncidents = currentIncidents;
incidents.pastIncidents = pastIncidents;
// Configure Stats Grid
const operationalCount = services.filter(s => s.currentStatus === 'operational').length;
const totalIncidents = currentIncidents.length + 3; // Current + recent past
const avgResponseTime = services.reduce((sum, s) => sum + (s.responseTime || 0), 0) / services.length;
const avgUptime = services.reduce((sum, s) => sum + (s.uptime30d || 0), 0) / services.length;
statsGrid.currentStatus = 'degraded';
statsGrid.uptime = avgUptime;
statsGrid.avgResponseTime = Math.round(avgResponseTime);
statsGrid.totalIncidents = totalIncidents;
statsGrid.affectedServices = services.filter(s => s.currentStatus !== 'operational').length;
statsGrid.totalServices = services.length;
statsGrid.timePeriod = '30 days';
// Configure Footer
footer.companyName = 'CloudFlow Infrastructure';
footer.legalUrl = 'https://cloudflow.example.com/legal';
@@ -644,6 +637,7 @@ export const statuspageDemo = () => html`
<upl-statuspage-header></upl-statuspage-header>
<upl-statuspage-pagetitle></upl-statuspage-pagetitle>
<upl-statuspage-statusbar></upl-statuspage-statusbar>
<upl-statuspage-statsgrid></upl-statuspage-statsgrid>
<upl-statuspage-assetsselector></upl-statuspage-assetsselector>
<upl-statuspage-statusdetails></upl-statuspage-statusdetails>
<upl-statuspage-statusmonth></upl-statuspage-statusmonth>