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

228
example.statuspage.html Normal file
View File

@@ -0,0 +1,228 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Status Page Example</title>
<script type="module" src="./dist_bundle/bundle.js"></script>
<style>
body {
margin: 0;
padding: 0;
font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
background: #fafafa;
}
@media (prefers-color-scheme: dark) {
body {
background: #09090b;
}
}
.page-container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
</style>
</head>
<body>
<div class="page-container">
<!-- Header -->
<upl-statuspage-header
title="System Status"
brandName="Example Corp"
description="Real-time status of our services"
></upl-statuspage-header>
<!-- Status Bar -->
<upl-statuspage-statusbar></upl-statuspage-statusbar>
<!-- Stats Grid - NEW COMPONENT -->
<upl-statuspage-statsgrid
uptime="99.95"
avgResponseTime="125"
totalIncidents="0"
affectedServices="0"
totalServices="12"
currentStatus="operational"
timePeriod="90 days"
></upl-statuspage-statsgrid>
<main>
<!-- Assets Selector -->
<upl-statuspage-assetsselector></upl-statuspage-assetsselector>
<!-- Status Details (48 hours) -->
<upl-statuspage-statusdetails
serviceName="API Gateway"
hoursToShow="48"
></upl-statuspage-statusdetails>
<!-- Status Month -->
<upl-statuspage-statusmonth
serviceName="API Gateway"
monthsToShow="3"
></upl-statuspage-statusmonth>
<!-- Incidents -->
<upl-statuspage-incidents
daysToShow="90"
></upl-statuspage-incidents>
</main>
<!-- Footer -->
<upl-statuspage-footer
showPoweredBy="true"
showApiLink="true"
></upl-statuspage-footer>
</div>
<script>
// Example: Initialize with demo data
document.addEventListener('DOMContentLoaded', () => {
// Status bar data
const statusBar = document.querySelector('upl-statuspage-statusbar');
if (statusBar) {
statusBar.overallStatus = {
status: 'operational',
message: 'All systems operational',
lastUpdated: Date.now(),
affectedServices: 0,
totalServices: 12
};
}
// Assets selector data
const assetsSelector = document.querySelector('upl-statuspage-assetsselector');
if (assetsSelector) {
assetsSelector.services = [
{
id: 'api-gateway',
displayName: 'API Gateway',
category: 'Core Services',
description: 'Main API endpoint',
currentStatus: 'operational',
selected: true
},
{
id: 'web-app',
displayName: 'Web Application',
category: 'Frontend',
description: 'Customer-facing web app',
currentStatus: 'operational',
selected: true
},
{
id: 'database',
displayName: 'Database Cluster',
category: 'Core Services',
description: 'Primary data storage',
currentStatus: 'operational',
selected: true
},
{
id: 'cdn',
displayName: 'CDN',
category: 'Infrastructure',
description: 'Content delivery network',
currentStatus: 'operational',
selected: false
}
];
}
// Status details data (48 hours)
const statusDetails = document.querySelector('upl-statuspage-statusdetails');
if (statusDetails) {
const now = Date.now();
statusDetails.historyData = Array.from({ length: 48 }, (_, i) => {
const date = new Date();
date.setMinutes(0, 0, 0);
date.setHours(date.getHours() - (47 - i));
return {
timestamp: date.getTime(),
status: Math.random() > 0.95 ? 'degraded' : 'operational',
responseTime: 50 + Math.random() * 50,
errorRate: 0
};
});
}
// Monthly data
const statusMonth = document.querySelector('upl-statuspage-statusmonth');
if (statusMonth) {
const generateMonthData = (monthOffset) => {
const date = new Date();
date.setMonth(date.getMonth() - monthOffset);
const year = date.getFullYear();
const month = date.getMonth();
const daysInMonth = new Date(year, month + 1, 0).getDate();
return {
month: `${year}-${(month + 1).toString().padStart(2, '0')}`,
days: Array.from({ length: daysInMonth }, (_, i) => ({
date: `${year}-${(month + 1).toString().padStart(2, '0')}-${(i + 1).toString().padStart(2, '0')}`,
uptime: Math.random() > 0.05 ? 100 : 95 + Math.random() * 5,
status: Math.random() > 0.05 ? 'operational' : 'degraded',
incidents: Math.random() > 0.05 ? 0 : 1,
totalDowntime: 0
})),
overallUptime: 99.5 + Math.random() * 0.5,
totalIncidents: Math.floor(Math.random() * 3)
};
};
statusMonth.monthlyData = [
generateMonthData(0),
generateMonthData(1),
generateMonthData(2)
];
}
// Incidents data
const incidents = document.querySelector('upl-statuspage-incidents');
if (incidents) {
incidents.currentIncidents = [];
incidents.pastIncidents = [
{
id: 'inc-001',
title: 'Database connection pool exhaustion',
severity: 'minor',
startTime: Date.now() - 7 * 24 * 60 * 60 * 1000,
endTime: Date.now() - 7 * 24 * 60 * 60 * 1000 + 2 * 60 * 60 * 1000,
impact: 'Slower response times for some API endpoints',
affectedServices: ['API Gateway', 'Database Cluster'],
updates: [
{
id: 'update-1',
timestamp: Date.now() - 7 * 24 * 60 * 60 * 1000,
status: 'investigating',
message: 'We are investigating reports of slow API responses',
author: 'Engineering Team'
},
{
id: 'update-2',
timestamp: Date.now() - 7 * 24 * 60 * 60 * 1000 + 30 * 60 * 1000,
status: 'identified',
message: 'The issue has been identified as database connection pool exhaustion',
author: 'Engineering Team'
},
{
id: 'update-3',
timestamp: Date.now() - 7 * 24 * 60 * 60 * 1000 + 2 * 60 * 60 * 1000,
status: 'resolved',
message: 'Connection pool settings have been adjusted and performance is back to normal',
author: 'Engineering Team'
}
],
rootCause: 'Insufficient connection pool size for peak traffic',
resolution: 'Increased connection pool size and implemented better connection management'
}
];
}
});
</script>
</body>
</html>

22
readme.hints.md
View File

@@ -186,6 +186,16 @@ To make these components production-ready requires implementing:
## Recent Updates (Post v1.0.74) ## Recent Updates (Post v1.0.74)
### Component Order (Top to Bottom)
1. `upl-statuspage-header` - Navigation header
2. `upl-statuspage-statusbar` - Overall system status
3. `upl-statuspage-statsgrid` - Key metrics grid (uptime, response time, incidents)
4. `upl-statuspage-assetsselector` - Service selection
5. `upl-statuspage-statusdetails` - 48-hour status visualization
6. `upl-statuspage-statusmonth` - Monthly calendar view
7. `upl-statuspage-incidents` - Current and past incidents
8. `upl-statuspage-footer` - Page footer
### Components Made Production-Ready ### Components Made Production-Ready
All components have been significantly enhanced with the following improvements: All components have been significantly enhanced with the following improvements:
@@ -238,6 +248,16 @@ All components have been significantly enhanced with the following improvements:
- RSS feed and API status links - RSS feed and API status links
- Last updated timestamp with relative formatting - Last updated timestamp with relative formatting
8. **upl-statuspage-statsgrid** (NEW)
- Displays key performance metrics in a responsive grid
- Shows current status with color indicator
- Uptime percentage with configurable time period
- Average response time with performance trend indicators
- Total incidents count with affected services
- Loading state with skeleton animation
- Responsive design that stacks on mobile
- Used stats data that was previously in statusdetails component
### Demo Architecture ### Demo Architecture
- All demos have been updated to use dees-demowrapper with runAfterRender callbacks - All demos have been updated to use dees-demowrapper with runAfterRender callbacks
- Properties are set dynamically on elements within runAfterRender - Properties are set dynamically on elements within runAfterRender
@@ -252,7 +272,7 @@ Created comprehensive TypeScript interfaces in ts_web/interfaces/index.ts:
- IIncidentUpdate - Incident update entries - IIncidentUpdate - Incident update entries
- IIncidentDetails - Full incident information - IIncidentDetails - Full incident information
- IMonthlyUptime - Monthly uptime calendar data - IMonthlyUptime - Monthly uptime calendar data
- IStatusDetail - Hourly status data points - IStatusHistoryPoint - Hourly status data points
- IStatusPageConfig - Configuration options - IStatusPageConfig - Configuration options
### Remaining Tasks ### Remaining Tasks

84
test-demo-no-banners.html Normal file
View File

@@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo Pages Without Banners</title>
<script type="module" src="./dist_bundle/bundle.js"></script>
<style>
body {
margin: 0;
padding: 0;
font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
background: #fafafa;
}
@media (prefers-color-scheme: dark) {
body {
background: #09090b;
}
}
.page-selector {
position: fixed;
top: 20px;
right: 20px;
z-index: 100;
background: white;
padding: 10px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
@media (prefers-color-scheme: dark) {
.page-selector {
background: #18181b;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
}
</style>
</head>
<body>
<div class="page-selector">
<label for="demoSelect">Select Demo:</label>
<select id="demoSelect">
<option value="demo">Main Demo (Degraded)</option>
<option value="allgreen">All Green</option>
<option value="outage">Major Outage</option>
<option value="maintenance">Maintenance</option>
</select>
</div>
<div id="demoContainer"></div>
<script type="module">
import { statuspageDemo } from './dist_ts_web/pages/statuspage-demo.js';
import { statuspageAllgreen } from './dist_ts_web/pages/statuspage-allgreen.js';
import { statuspageOutage } from './dist_ts_web/pages/statuspage-outage.js';
import { statuspageMaintenance } from './dist_ts_web/pages/statuspage-maintenance.js';
const demoContainer = document.getElementById('demoContainer');
const demoSelect = document.getElementById('demoSelect');
const demos = {
demo: statuspageDemo,
allgreen: statuspageAllgreen,
outage: statuspageOutage,
maintenance: statuspageMaintenance
};
function loadDemo(demoName) {
const demoFunc = demos[demoName];
if (demoFunc) {
demoContainer.innerHTML = '';
const template = demoFunc();
demoContainer.innerHTML = template.strings.join('');
}
}
demoSelect.addEventListener('change', (e) => {
loadDemo(e.target.value);
});
// Load initial demo
loadDemo('demo');
</script>
</body>
</html>

107
test-statsgrid.html Normal file
View File

@@ -0,0 +1,107 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stats Grid Test</title>
<script type="module" src="./dist_bundle/bundle.js"></script>
<style>
body {
margin: 0;
padding: 20px;
font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
background: #fafafa;
}
@media (prefers-color-scheme: dark) {
body {
background: #09090b;
}
}
.test-section {
margin-bottom: 40px;
}
h2 {
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>Stats Grid Component Test</h1>
<div class="test-section">
<h2>Normal Operation</h2>
<upl-statuspage-statsgrid
id="grid1"
current-status="operational"
uptime="99.95"
avg-response-time="125"
total-incidents="0"
affected-services="0"
total-services="12"
time-period="90 days"
></upl-statuspage-statsgrid>
</div>
<div class="test-section">
<h2>Degraded Performance</h2>
<upl-statuspage-statsgrid
id="grid2"
current-status="degraded"
uptime="98.50"
avg-response-time="450"
total-incidents="3"
affected-services="2"
total-services="12"
time-period="30 days"
></upl-statuspage-statsgrid>
</div>
<div class="test-section">
<h2>Major Outage</h2>
<upl-statuspage-statsgrid
id="grid3"
current-status="major_outage"
uptime="95.20"
avg-response-time="1250"
total-incidents="8"
affected-services="7"
total-services="12"
time-period="7 days"
></upl-statuspage-statsgrid>
</div>
<div class="test-section">
<h2>Loading State</h2>
<upl-statuspage-statsgrid
id="grid4"
loading="true"
></upl-statuspage-statsgrid>
</div>
<script>
// Test dynamic updates
setTimeout(() => {
const grid1 = document.getElementById('grid1');
console.log('Updating grid1 to show degraded status...');
grid1.currentStatus = 'degraded';
grid1.avgResponseTime = 350;
grid1.totalIncidents = 1;
grid1.affectedServices = 1;
}, 3000);
// Test loading state toggle
setTimeout(() => {
const grid4 = document.getElementById('grid4');
console.log('Loading complete, showing data...');
grid4.loading = false;
grid4.currentStatus = 'operational';
grid4.uptime = 99.99;
grid4.avgResponseTime = 85;
grid4.totalIncidents = 0;
grid4.affectedServices = 0;
grid4.totalServices = 15;
grid4.timePeriod = '24 hours';
}, 5000);
</script>
</body>
</html>

1
ts_web/elements/index.ts
View File

@@ -7,6 +7,7 @@ export * from './upl-statuspage-pagetitle.js';
export * from './upl-statuspage-statusbar.js'; export * from './upl-statuspage-statusbar.js';
export * from './upl-statuspage-statusdetails.js'; export * from './upl-statuspage-statusdetails.js';
export * from './upl-statuspage-statusmonth.js'; export * from './upl-statuspage-statusmonth.js';
export * from './upl-statuspage-statsgrid.js';
// Export interfaces // Export interfaces
export * from '../interfaces/index.js'; export * from '../interfaces/index.js';

10
ts_web/elements/upl-statuspage-assetsselector.ts
View File

@@ -257,11 +257,11 @@ export class UplStatuspageAssetsselector extends DeesElement {
border-radius: ${unsafeCSS(borderRadius.full)}; border-radius: ${unsafeCSS(borderRadius.full)};
} }
.status-indicator.operational, .status-dot.operational { background: ${cssManager.bdTheme('#10b981', '#10b981')}; } .status-indicator.operational, .status-dot.operational { background: #22c55e; }
.status-indicator.degraded, .status-dot.degraded { background: ${cssManager.bdTheme('#f59e0b', '#f59e0b')}; } .status-indicator.degraded, .status-dot.degraded { background: #fbbf24; }
.status-indicator.partial_outage, .status-dot.partial_outage { background: ${cssManager.bdTheme('#ef4444', '#ef4444')}; } .status-indicator.partial_outage, .status-dot.partial_outage { background: #f87171; }
.status-indicator.major_outage, .status-dot.major_outage { background: ${cssManager.bdTheme('#dc2626', '#dc2626')}; } .status-indicator.major_outage, .status-dot.major_outage { background: #ef4444; }
.status-indicator.maintenance, .status-dot.maintenance { background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')}; } .status-indicator.maintenance, .status-dot.maintenance { background: #60a5fa; }
.status-text { .status-text {
font-size: 12px; font-size: 12px;

315
ts_web/elements/upl-statuspage-statsgrid.demo.ts Normal file
View File

@@ -0,0 +1,315 @@
import { html } from '@design.estate/dees-element';
export const demoFunc = () => html`
<style>
.demo-container {
display: flex;
flex-direction: column;
gap: 20px;
}
.demo-section {
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
background: #f5f5f5;
}
.demo-title {
font-size: 14px;
font-weight: 600;
margin-bottom: 16px;
color: #333;
}
.demo-controls {
display: flex;
gap: 10px;
margin-top: 16px;
flex-wrap: wrap;
}
.demo-button {
padding: 6px 12px;
border: 1px solid #ddd;
background: white;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
}
.demo-button:hover {
background: #f0f0f0;
}
.demo-button.active {
background: #2196F3;
color: white;
border-color: #2196F3;
}
</style>
<div class="demo-container">
<!-- Normal Operation -->
<div class="demo-section">
<div class="demo-title">Normal Operation</div>
<dees-demowrapper
.runAfterRender=${async (wrapperElement: any) => {
const statsGrid = wrapperElement.querySelector('upl-statuspage-statsgrid') as any;
// Set initial values
statsGrid.currentStatus = 'operational';
statsGrid.uptime = 99.95;
statsGrid.avgResponseTime = 125;
statsGrid.totalIncidents = 0;
statsGrid.affectedServices = 0;
statsGrid.totalServices = 12;
statsGrid.timePeriod = '90 days';
}}
>
<upl-statuspage-statsgrid></upl-statuspage-statsgrid>
</dees-demowrapper>
</div>
<!-- Degraded Performance -->
<div class="demo-section">
<div class="demo-title">Degraded Performance</div>
<dees-demowrapper
.runAfterRender=${async (wrapperElement: any) => {
const statsGrid = wrapperElement.querySelector('upl-statuspage-statsgrid') as any;
statsGrid.currentStatus = 'degraded';
statsGrid.uptime = 98.50;
statsGrid.avgResponseTime = 450;
statsGrid.totalIncidents = 3;
statsGrid.affectedServices = 2;
statsGrid.totalServices = 12;
statsGrid.timePeriod = '30 days';
}}
>
<upl-statuspage-statsgrid></upl-statuspage-statsgrid>
</dees-demowrapper>
</div>
<!-- Major Outage -->
<div class="demo-section">
<div class="demo-title">Major Outage</div>
<dees-demowrapper
.runAfterRender=${async (wrapperElement: any) => {
const statsGrid = wrapperElement.querySelector('upl-statuspage-statsgrid') as any;
statsGrid.currentStatus = 'major_outage';
statsGrid.uptime = 95.20;
statsGrid.avgResponseTime = 1250;
statsGrid.totalIncidents = 8;
statsGrid.affectedServices = 7;
statsGrid.totalServices = 12;
statsGrid.timePeriod = '7 days';
}}
>
<upl-statuspage-statsgrid></upl-statuspage-statsgrid>
</dees-demowrapper>
</div>
<!-- Interactive Demo -->
<div class="demo-section">
<div class="demo-title">Interactive Demo</div>
<dees-demowrapper
.runAfterRender=${async (wrapperElement: any) => {
const statsGrid = wrapperElement.querySelector('upl-statuspage-statsgrid') as any;
// Initial state
statsGrid.currentStatus = 'operational';
statsGrid.uptime = 99.99;
statsGrid.avgResponseTime = 85;
statsGrid.totalIncidents = 0;
statsGrid.affectedServices = 0;
statsGrid.totalServices = 15;
statsGrid.timePeriod = '90 days';
// Create controls
const controls = document.createElement('div');
controls.className = 'demo-controls';
// Status buttons
const statuses = ['operational', 'degraded', 'partial_outage', 'major_outage', 'maintenance'];
statuses.forEach((status, index) => {
const button = document.createElement('button');
button.className = 'demo-button' + (index === 0 ? ' active' : '');
button.textContent = status.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
button.onclick = () => {
controls.querySelectorAll('.demo-button').forEach(btn => btn.classList.remove('active'));
button.classList.add('active');
statsGrid.currentStatus = status;
// Adjust other values based on status
switch (status) {
case 'operational':
statsGrid.uptime = 99.99;
statsGrid.avgResponseTime = 85;
statsGrid.totalIncidents = 0;
statsGrid.affectedServices = 0;
break;
case 'degraded':
statsGrid.uptime = 98.50;
statsGrid.avgResponseTime = 350;
statsGrid.totalIncidents = 2;
statsGrid.affectedServices = 1;
break;
case 'partial_outage':
statsGrid.uptime = 97.00;
statsGrid.avgResponseTime = 750;
statsGrid.totalIncidents = 5;
statsGrid.affectedServices = 3;
break;
case 'major_outage':
statsGrid.uptime = 94.50;
statsGrid.avgResponseTime = 1500;
statsGrid.totalIncidents = 10;
statsGrid.affectedServices = 8;
break;
case 'maintenance':
statsGrid.uptime = 99.00;
statsGrid.avgResponseTime = 150;
statsGrid.totalIncidents = 1;
statsGrid.affectedServices = 2;
break;
}
};
controls.appendChild(button);
});
wrapperElement.appendChild(controls);
// Add time period selector
const timePeriodControls = document.createElement('div');
timePeriodControls.className = 'demo-controls';
timePeriodControls.style.marginTop = '10px';
const periods = ['24 hours', '7 days', '30 days', '90 days'];
periods.forEach((period, index) => {
const button = document.createElement('button');
button.className = 'demo-button' + (index === 3 ? ' active' : '');
button.textContent = period;
button.onclick = () => {
timePeriodControls.querySelectorAll('.demo-button').forEach(btn => btn.classList.remove('active'));
button.classList.add('active');
statsGrid.timePeriod = period;
};
timePeriodControls.appendChild(button);
});
wrapperElement.appendChild(timePeriodControls);
}}
>
<upl-statuspage-statsgrid></upl-statuspage-statsgrid>
</dees-demowrapper>
</div>
<!-- Loading State -->
<div class="demo-section">
<div class="demo-title">Loading State</div>
<dees-demowrapper
.runAfterRender=${async (wrapperElement: any) => {
const statsGrid = wrapperElement.querySelector('upl-statuspage-statsgrid') as any;
statsGrid.loading = true;
// Create toggle button
const controls = document.createElement('div');
controls.className = 'demo-controls';
const toggleButton = document.createElement('button');
toggleButton.className = 'demo-button';
toggleButton.textContent = 'Toggle Loading';
toggleButton.onclick = () => {
statsGrid.loading = !statsGrid.loading;
if (!statsGrid.loading) {
statsGrid.currentStatus = 'operational';
statsGrid.uptime = 99.95;
statsGrid.avgResponseTime = 125;
statsGrid.totalIncidents = 0;
statsGrid.affectedServices = 0;
statsGrid.totalServices = 12;
}
};
controls.appendChild(toggleButton);
wrapperElement.appendChild(controls);
}}
>
<upl-statuspage-statsgrid></upl-statuspage-statsgrid>
</dees-demowrapper>
</div>
<!-- Real-time Updates -->
<div class="demo-section">
<div class="demo-title">Real-time Updates</div>
<dees-demowrapper
.runAfterRender=${async (wrapperElement: any) => {
const statsGrid = wrapperElement.querySelector('upl-statuspage-statsgrid') as any;
// Initial values
statsGrid.currentStatus = 'operational';
statsGrid.uptime = 99.95;
statsGrid.avgResponseTime = 100;
statsGrid.totalIncidents = 0;
statsGrid.affectedServices = 0;
statsGrid.totalServices = 10;
statsGrid.timePeriod = '24 hours';
// Simulate real-time updates
let interval = setInterval(() => {
// Slight variations in response time
statsGrid.avgResponseTime = Math.floor(80 + Math.random() * 40);
// Occasionally change status
if (Math.random() < 0.1) {
const statuses = ['operational', 'degraded'];
statsGrid.currentStatus = statuses[Math.floor(Math.random() * statuses.length)];
if (statsGrid.currentStatus === 'degraded') {
statsGrid.avgResponseTime = Math.floor(300 + Math.random() * 200);
statsGrid.totalIncidents = Math.min(statsGrid.totalIncidents + 1, 5);
statsGrid.affectedServices = Math.min(Math.floor(Math.random() * 3) + 1, statsGrid.totalServices);
statsGrid.uptime = Math.max(99.0, statsGrid.uptime - 0.05);
} else {
statsGrid.affectedServices = 0;
}
}
}, 2000);
// Add control button
const controls = document.createElement('div');
controls.className = 'demo-controls';
const toggleButton = document.createElement('button');
toggleButton.className = 'demo-button active';
toggleButton.textContent = 'Stop Updates';
toggleButton.onclick = () => {
if (interval) {
clearInterval(interval);
interval = null;
toggleButton.textContent = 'Start Updates';
toggleButton.classList.remove('active');
} else {
interval = setInterval(() => {
statsGrid.avgResponseTime = Math.floor(80 + Math.random() * 40);
if (Math.random() < 0.1) {
const statuses = ['operational', 'degraded'];
statsGrid.currentStatus = statuses[Math.floor(Math.random() * statuses.length)];
}
}, 2000);
toggleButton.textContent = 'Stop Updates';
toggleButton.classList.add('active');
}
};
controls.appendChild(toggleButton);
wrapperElement.appendChild(controls);
// Cleanup on unmount
wrapperElement.addEventListener('remove', () => {
if (interval) clearInterval(interval);
});
}}
>
<upl-statuspage-statsgrid></upl-statuspage-statsgrid>
</dees-demowrapper>
</div>
</div>
`;

306
ts_web/elements/upl-statuspage-statsgrid.ts Normal file
View File

@@ -0,0 +1,306 @@
import {
DeesElement,
property,
html,
customElement,
type TemplateResult,
css,
cssManager,
unsafeCSS,
} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import { fonts, colors, shadows, borderRadius, spacing, commonStyles } from '../styles/shared.styles.js';
import './internal/uplinternal-miniheading.js';
import { demoFunc } from './upl-statuspage-statsgrid.demo.js';
declare global {
interface HTMLElementTagNameMap {
'upl-statuspage-statsgrid': UplStatuspageStatsgrid;
}
}
@customElement('upl-statuspage-statsgrid')
export class UplStatuspageStatsgrid extends DeesElement {
public static demo = demoFunc;
@property({ type: Number })
public uptime: number = 99.99;
@property({ type: Number })
public avgResponseTime: number = 125;
@property({ type: Number })
public totalIncidents: number = 0;
@property({ type: Number })
public affectedServices: number = 0;
@property({ type: Number })
public totalServices: number = 0;
@property({ type: String })
public currentStatus: string = 'operational';
@property({ type: Boolean })
public loading: boolean = false;
@property({ type: String })
public timePeriod: string = '90 days';
constructor() {
super();
}
public static styles = [
domtools.elementBasic.staticStyles,
commonStyles,
css`
:host {
display: block;
background: transparent;
font-family: ${unsafeCSS(fonts.base)};
color: ${colors.text.primary};
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)};
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: ${unsafeCSS(spacing.md)};
}
.stat-card {
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border-radius: ${unsafeCSS(borderRadius.base)};
padding: ${unsafeCSS(spacing.lg)};
transition: all 0.2s ease;
}
.stat-card:hover {
border-color: ${cssManager.bdTheme('#d1d5db', '#3f3f46')};
box-shadow: ${cssManager.bdTheme(
'0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
'0 0 0 1px rgba(255, 255, 255, 0.1)'
)};
}
.stat-label {
font-size: 12px;
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 500;
margin-bottom: ${unsafeCSS(spacing.sm)};
display: flex;
align-items: center;
gap: ${unsafeCSS(spacing.xs)};
}
.stat-value {
font-size: 24px;
font-weight: 600;
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
font-variant-numeric: tabular-nums;
line-height: 1.2;
}
.stat-unit {
font-size: 14px;
font-weight: 400;
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
margin-left: 4px;
}
.stat-change {
font-size: 12px;
margin-top: ${unsafeCSS(spacing.xs)};
display: flex;
align-items: center;
gap: 4px;
}
.stat-change.positive {
color: ${cssManager.bdTheme('#10b981', '#10b981')};
}
.stat-change.negative {
color: ${cssManager.bdTheme('#ef4444', '#ef4444')};
}
.stat-change.neutral {
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
}
.loading-skeleton {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: ${unsafeCSS(spacing.md)};
}
.skeleton-card {
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border-radius: ${unsafeCSS(borderRadius.base)};
padding: ${unsafeCSS(spacing.lg)};
height: 100px;
}
.skeleton-label {
height: 14px;
width: 80px;
background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
border-radius: 4px;
margin-bottom: ${unsafeCSS(spacing.sm)};
animation: pulse 2s infinite;
}
.skeleton-value {
height: 28px;
width: 120px;
background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
border-radius: 4px;
animation: pulse 2s infinite;
animation-delay: 0.1s;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.status-indicator {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
}
.status-indicator.operational {
background: ${colors.status.operational};
}
.status-indicator.degraded {
background: ${colors.status.degraded};
}
.status-indicator.partial_outage {
background: ${colors.status.partial};
}
.status-indicator.major_outage {
background: ${colors.status.major};
}
.status-indicator.maintenance {
background: ${colors.status.maintenance};
}
@media (max-width: 640px) {
.container {
padding: 0 ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)};
}
.stats-grid {
grid-template-columns: 1fr;
gap: ${unsafeCSS(spacing.sm)};
}
.stat-card {
padding: ${unsafeCSS(spacing.md)};
}
.stat-value {
font-size: 20px;
}
}
`,
];
public render(): TemplateResult {
return html`
<div class="container">
${this.loading ? html`
<div class="loading-skeleton">
${Array(4).fill(0).map(() => html`
<div class="skeleton-card">
<div class="skeleton-label"></div>
<div class="skeleton-value"></div>
</div>
`)}
</div>
` : html`
<div class="stats-grid">
<div class="stat-card">
<div class="stat-label">
<span class="status-indicator ${this.currentStatus}"></span>
Current Status
</div>
<div class="stat-value">
${this.formatStatus(this.currentStatus)}
</div>
</div>
<div class="stat-card">
<div class="stat-label">Uptime</div>
<div class="stat-value">
${this.uptime.toFixed(2)}<span class="stat-unit">%</span>
</div>
<div class="stat-change neutral">
Last ${this.timePeriod}
</div>
</div>
<div class="stat-card">
<div class="stat-label">Avg Response Time</div>
<div class="stat-value">
${this.avgResponseTime}<span class="stat-unit">ms</span>
</div>
${this.renderResponseChange()}
</div>
<div class="stat-card">
<div class="stat-label">Incidents</div>
<div class="stat-value">
${this.totalIncidents}
</div>
<div class="stat-change neutral">
${this.affectedServices} of ${this.totalServices} services
</div>
</div>
</div>
`}
</div>
`;
}
private formatStatus(status: string): string {
const statusMap: Record<string, string> = {
operational: 'Operational',
degraded: 'Degraded',
partial_outage: 'Partial Outage',
major_outage: 'Major Outage',
maintenance: 'Maintenance',
};
return statusMap[status] || 'Unknown';
}
private renderResponseChange(): TemplateResult {
// This could be enhanced with actual trend data
const trend = this.avgResponseTime < 200 ? 'positive' : this.avgResponseTime > 500 ? 'negative' : 'neutral';
const icon = trend === 'positive' ? '↓' : trend === 'negative' ? '↑' : '→';
return html`
<div class="stat-change ${trend}">
<span>${icon}</span>
<span>${trend === 'positive' ? 'Fast' : trend === 'negative' ? 'Slow' : 'Normal'}</span>
</div>
`;
}
}

89
ts_web/elements/upl-statuspage-statusdetails.ts
View File

@@ -85,10 +85,10 @@ export class UplStatuspageStatusdetails extends DeesElement {
.mainbox .barContainer { .mainbox .barContainer {
position: relative; position: relative;
display: flex; display: flex;
gap: 1px; gap: 2px;
padding: ${unsafeCSS(spacing.sm)}; padding: ${unsafeCSS(spacing.sm)};
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')}; background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
border: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')}; border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border-radius: ${unsafeCSS(borderRadius.base)}; border-radius: ${unsafeCSS(borderRadius.base)};
overflow: hidden; overflow: hidden;
height: 40px; height: 40px;
@@ -98,12 +98,14 @@ export class UplStatuspageStatusdetails extends DeesElement {
flex: 1; flex: 1;
height: 100%; height: 100%;
cursor: pointer; cursor: pointer;
transition: opacity 0.15s ease; transition: all 0.15s ease;
position: relative; position: relative;
border-radius: 2px;
} }
.mainbox .barContainer .bar:hover { .mainbox .barContainer .bar:hover {
opacity: 0.8; transform: scaleY(1.1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} }
.mainbox .barContainer .bar.operational { .mainbox .barContainer .bar.operational {
@@ -127,7 +129,8 @@ export class UplStatuspageStatusdetails extends DeesElement {
} }
.mainbox .barContainer .bar.no-data { .mainbox .barContainer .bar.no-data {
background: ${cssManager.bdTheme('#f3f4f6', '#27272a')}; background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
opacity: 0.6;
} }
@@ -196,36 +199,6 @@ export class UplStatuspageStatusdetails extends DeesElement {
100% { background-position: -200% 0; } 100% { background-position: -200% 0; }
} }
.stats-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: ${unsafeCSS(spacing.lg)};
padding: ${unsafeCSS(spacing.sm)} 0;
border-top: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')};
font-size: 12px;
}
.stat-item {
display: flex;
align-items: center;
gap: ${unsafeCSS(spacing.sm)};
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
}
.stat-value {
font-weight: 500;
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
font-variant-numeric: tabular-nums;
}
.status-indicator {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 4px;
}
@media (max-width: 640px) { @media (max-width: 640px) {
.container { .container {
@@ -283,11 +256,6 @@ export class UplStatuspageStatusdetails extends DeesElement {
</div> </div>
`} `}
</div> </div>
${!this.loading && this.getData().length > 0 ? html`
<div class="stats-row">
${this.renderStats()}
</div>
` : ''}
<div class="tooltip" id="tooltip"></div> <div class="tooltip" id="tooltip"></div>
</div> </div>
`; `;
@@ -383,45 +351,4 @@ export class UplStatuspageStatusdetails extends DeesElement {
})); }));
} }
private renderStats(): TemplateResult {
const data = this.getData();
const operational = data.filter(d => d.status === 'operational').length;
const uptime = (operational / data.length) * 100;
const avgResponseTime = data
.filter(d => d.responseTime && d.responseTime > 0)
.reduce((sum, d) => sum + (d.responseTime || 0), 0) / data.length || 0;
const currentStatus = data[data.length - 1]?.status || 'no-data';
return html`
<div class="stat-item">
<span class="status-indicator" style="background: ${this.getStatusColor(currentStatus)}"></span>
<span class="stat-value">${this.formatStatus(currentStatus)}</span>
</div>
<div class="stat-item">
<span>${uptime.toFixed(1)}%</span>
<span style="color: ${cssManager.bdTheme('#9ca3af', '#71717a')}">uptime</span>
</div>
<div class="stat-item">
<span>${avgResponseTime.toFixed(0)}ms</span>
<span style="color: ${cssManager.bdTheme('#9ca3af', '#71717a')}">avg response</span>
</div>
`;
}
private getStatusColor(status: string): string {
const colors: Record<string, string> = {
operational: '#22c55e',
degraded: '#fbbf24',
partial_outage: '#f87171',
major_outage: '#ef4444',
maintenance: '#60a5fa',
'no-data': '#e5e7eb'
};
return colors[status] || '#e5e7eb';
}
private formatStatus(status: string): string {
return status.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
}
} }

16
ts_web/elements/upl-statuspage-statusmonth.ts
View File

@@ -138,24 +138,28 @@ export class UplStatuspageStatusmonth extends DeesElement {
} }
.statusDay.operational { .statusDay.operational {
background: ${cssManager.bdTheme('#10b981', '#10b981')}; background: #22c55e;
} }
.statusDay.degraded { .statusDay.degraded {
background: ${cssManager.bdTheme('#f59e0b', '#f59e0b')}; background: #fbbf24;
} }
.statusDay.partial_outage { .statusDay.partial_outage {
background: ${cssManager.bdTheme('#ef4444', '#ef4444')}; background: #f87171;
} }
.statusDay.major_outage { .statusDay.major_outage {
background: ${cssManager.bdTheme('#dc2626', '#dc2626')}; background: #ef4444;
}
.statusDay.maintenance {
background: #60a5fa;
} }
.statusDay.no-data { .statusDay.no-data {
background: ${cssManager.bdTheme('#f3f4f6', '#27272a')}; background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
opacity: 0.5; opacity: 0.6;
} }
.statusDay.empty { .statusDay.empty {

34
ts_web/pages/statuspage-allgreen.ts
View File

@@ -7,37 +7,15 @@ export const statuspageAllgreen = () => html`
min-height: 100vh; min-height: 100vh;
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')}; background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
} }
.demo-info {
padding: 20px;
background: #4CAF50;
color: white;
text-align: center;
font-family: 'Geist Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
position: relative;
z-index: 1;
}
.demo-info h3 {
margin: 0 0 10px 0;
font-weight: 600;
}
.demo-info p {
margin: 0;
opacity: 0.9;
font-size: 14px;
}
</style> </style>
<div class="demo-page-wrapper"> <div class="demo-page-wrapper">
<div class="demo-info">
<h3>All Systems Operational</h3>
<p>This demo shows a status page where everything is running perfectly with no issues.</p>
</div>
<dees-demowrapper <dees-demowrapper
.runAfterRender=${async (wrapperElement: any) => { .runAfterRender=${async (wrapperElement: any) => {
const header = wrapperElement.querySelector('upl-statuspage-header') as any; const header = wrapperElement.querySelector('upl-statuspage-header') as any;
const statusBar = wrapperElement.querySelector('upl-statuspage-statusbar') 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 assetsSelector = wrapperElement.querySelector('upl-statuspage-assetsselector') as any;
const statusDetails = wrapperElement.querySelector('upl-statuspage-statusdetails') as any; const statusDetails = wrapperElement.querySelector('upl-statuspage-statusdetails') as any;
const statusMonth = wrapperElement.querySelector('upl-statuspage-statusmonth') as any; const statusMonth = wrapperElement.querySelector('upl-statuspage-statusmonth') as any;
@@ -221,6 +199,15 @@ export const statuspageAllgreen = () => html`
assetsSelector.services = services; assetsSelector.services = services;
// Configure Stats Grid - All green metrics
statsGrid.currentStatus = 'operational';
statsGrid.uptime = 99.98;
statsGrid.avgResponseTime = Math.round(services.reduce((sum, s) => sum + (s.responseTime || 0), 0) / services.length);
statsGrid.totalIncidents = 0;
statsGrid.affectedServices = 0;
statsGrid.totalServices = services.length;
statsGrid.timePeriod = '30 days';
// Configure Status Details - All operational for 48 hours // Configure Status Details - All operational for 48 hours
const generateStatusDetails = (): IStatusHistoryPoint[] => { const generateStatusDetails = (): IStatusHistoryPoint[] => {
const details: IStatusHistoryPoint[] = []; const details: IStatusHistoryPoint[] = [];
@@ -409,6 +396,7 @@ export const statuspageAllgreen = () => html`
> >
<upl-statuspage-header></upl-statuspage-header> <upl-statuspage-header></upl-statuspage-header>
<upl-statuspage-statusbar></upl-statuspage-statusbar> <upl-statuspage-statusbar></upl-statuspage-statusbar>
<upl-statuspage-statsgrid></upl-statuspage-statsgrid>
<upl-statuspage-assetsselector></upl-statuspage-assetsselector> <upl-statuspage-assetsselector></upl-statuspage-assetsselector>
<upl-statuspage-statusdetails></upl-statuspage-statusdetails> <upl-statuspage-statusdetails></upl-statuspage-statusdetails>
<upl-statuspage-statusmonth></upl-statuspage-statusmonth> <upl-statuspage-statusmonth></upl-statuspage-statusmonth>

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

@@ -7,37 +7,16 @@ export const statuspageDemo = () => html`
min-height: 100vh; min-height: 100vh;
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')}; 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> </style>
<div class="demo-page-wrapper"> <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 <dees-demowrapper
.runAfterRender=${async (wrapperElement: any) => { .runAfterRender=${async (wrapperElement: any) => {
const header = wrapperElement.querySelector('upl-statuspage-header') as any; const header = wrapperElement.querySelector('upl-statuspage-header') as any;
const pageTitle = wrapperElement.querySelector('upl-statuspage-pagetitle') as any; const pageTitle = wrapperElement.querySelector('upl-statuspage-pagetitle') as any;
const statusBar = wrapperElement.querySelector('upl-statuspage-statusbar') 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 assetsSelector = wrapperElement.querySelector('upl-statuspage-assetsselector') as any;
const statusDetails = wrapperElement.querySelector('upl-statuspage-statusdetails') as any; const statusDetails = wrapperElement.querySelector('upl-statuspage-statusdetails') as any;
const statusMonth = wrapperElement.querySelector('upl-statuspage-statusmonth') as any; const statusMonth = wrapperElement.querySelector('upl-statuspage-statusmonth') as any;
@@ -578,6 +557,20 @@ export const statuspageDemo = () => html`
incidents.currentIncidents = currentIncidents; incidents.currentIncidents = currentIncidents;
incidents.pastIncidents = pastIncidents; 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 // Configure Footer
footer.companyName = 'CloudFlow Infrastructure'; footer.companyName = 'CloudFlow Infrastructure';
footer.legalUrl = 'https://cloudflow.example.com/legal'; footer.legalUrl = 'https://cloudflow.example.com/legal';
@@ -644,6 +637,7 @@ export const statuspageDemo = () => html`
<upl-statuspage-header></upl-statuspage-header> <upl-statuspage-header></upl-statuspage-header>
<upl-statuspage-pagetitle></upl-statuspage-pagetitle> <upl-statuspage-pagetitle></upl-statuspage-pagetitle>
<upl-statuspage-statusbar></upl-statuspage-statusbar> <upl-statuspage-statusbar></upl-statuspage-statusbar>
<upl-statuspage-statsgrid></upl-statuspage-statsgrid>
<upl-statuspage-assetsselector></upl-statuspage-assetsselector> <upl-statuspage-assetsselector></upl-statuspage-assetsselector>
<upl-statuspage-statusdetails></upl-statuspage-statusdetails> <upl-statuspage-statusdetails></upl-statuspage-statusdetails>
<upl-statuspage-statusmonth></upl-statuspage-statusmonth> <upl-statuspage-statusmonth></upl-statuspage-statusmonth>

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

@@ -7,37 +7,15 @@ export const statuspageMaintenance = () => html`
min-height: 100vh; min-height: 100vh;
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')}; background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
} }
.demo-info {
padding: 20px;
background: #2196F3;
color: white;
text-align: center;
font-family: 'Geist Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
position: relative;
z-index: 1;
}
.demo-info h3 {
margin: 0 0 10px 0;
font-weight: 600;
}
.demo-info p {
margin: 0;
opacity: 0.9;
font-size: 14px;
}
</style> </style>
<div class="demo-page-wrapper"> <div class="demo-page-wrapper">
<div class="demo-info">
<h3>Scheduled Maintenance</h3>
<p>This demo shows a status page during a scheduled maintenance window with some services offline.</p>
</div>
<dees-demowrapper <dees-demowrapper
.runAfterRender=${async (wrapperElement: any) => { .runAfterRender=${async (wrapperElement: any) => {
const header = wrapperElement.querySelector('upl-statuspage-header') as any; const header = wrapperElement.querySelector('upl-statuspage-header') as any;
const statusBar = wrapperElement.querySelector('upl-statuspage-statusbar') 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 assetsSelector = wrapperElement.querySelector('upl-statuspage-assetsselector') as any;
const statusDetails = wrapperElement.querySelector('upl-statuspage-statusdetails') as any; const statusDetails = wrapperElement.querySelector('upl-statuspage-statusdetails') as any;
const statusMonth = wrapperElement.querySelector('upl-statuspage-statusmonth') as any; const statusMonth = wrapperElement.querySelector('upl-statuspage-statusmonth') as any;
@@ -252,6 +230,19 @@ export const statuspageMaintenance = () => html`
assetsSelector.services = services; assetsSelector.services = services;
// Configure Stats Grid - Maintenance mode metrics
const operationalCount = services.filter(s => s.currentStatus === 'operational').length;
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 = 'maintenance';
statsGrid.uptime = avgUptime;
statsGrid.avgResponseTime = Math.round(avgResponseTime);
statsGrid.totalIncidents = 1; // Just the maintenance
statsGrid.affectedServices = services.filter(s => s.currentStatus === 'maintenance').length;
statsGrid.totalServices = services.length;
statsGrid.timePeriod = '30 days';
// Configure Status Details - Showing maintenance period // Configure Status Details - Showing maintenance period
const generateStatusDetails = (): IStatusHistoryPoint[] => { const generateStatusDetails = (): IStatusHistoryPoint[] => {
const details: IStatusHistoryPoint[] = []; const details: IStatusHistoryPoint[] = [];
@@ -563,6 +554,7 @@ export const statuspageMaintenance = () => html`
> >
<upl-statuspage-header></upl-statuspage-header> <upl-statuspage-header></upl-statuspage-header>
<upl-statuspage-statusbar></upl-statuspage-statusbar> <upl-statuspage-statusbar></upl-statuspage-statusbar>
<upl-statuspage-statsgrid></upl-statuspage-statsgrid>
<upl-statuspage-assetsselector></upl-statuspage-assetsselector> <upl-statuspage-assetsselector></upl-statuspage-assetsselector>
<upl-statuspage-statusdetails></upl-statuspage-statusdetails> <upl-statuspage-statusdetails></upl-statuspage-statusdetails>
<upl-statuspage-statusmonth></upl-statuspage-statusmonth> <upl-statuspage-statusmonth></upl-statuspage-statusmonth>

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

@@ -7,37 +7,15 @@ export const statuspageOutage = () => html`
min-height: 100vh; min-height: 100vh;
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')}; background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
} }
.demo-info {
padding: 20px;
background: #F44336;
color: white;
text-align: center;
font-family: 'Geist Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
position: relative;
z-index: 1;
}
.demo-info h3 {
margin: 0 0 10px 0;
font-weight: 600;
}
.demo-info p {
margin: 0;
opacity: 0.9;
font-size: 14px;
}
</style> </style>
<div class="demo-page-wrapper"> <div class="demo-page-wrapper">
<div class="demo-info">
<h3>Major Outage Scenario</h3>
<p>This demo shows a critical situation with multiple services experiencing major outages.</p>
</div>
<dees-demowrapper <dees-demowrapper
.runAfterRender=${async (wrapperElement: any) => { .runAfterRender=${async (wrapperElement: any) => {
const header = wrapperElement.querySelector('upl-statuspage-header') as any; const header = wrapperElement.querySelector('upl-statuspage-header') as any;
const statusBar = wrapperElement.querySelector('upl-statuspage-statusbar') 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 assetsSelector = wrapperElement.querySelector('upl-statuspage-assetsselector') as any;
const statusDetails = wrapperElement.querySelector('upl-statuspage-statusdetails') as any; const statusDetails = wrapperElement.querySelector('upl-statuspage-statusdetails') as any;
const statusMonth = wrapperElement.querySelector('upl-statuspage-statusmonth') as any; const statusMonth = wrapperElement.querySelector('upl-statuspage-statusmonth') as any;
@@ -265,6 +243,19 @@ export const statuspageOutage = () => html`
assetsSelector.services = services; assetsSelector.services = services;
// Configure Stats Grid - Major outage metrics
const operationalCount = services.filter(s => s.currentStatus === 'operational').length;
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 = 'major_outage';
statsGrid.uptime = avgUptime;
statsGrid.avgResponseTime = Math.round(avgResponseTime);
statsGrid.totalIncidents = 15; // High number of incidents
statsGrid.affectedServices = services.filter(s => s.currentStatus !== 'operational').length;
statsGrid.totalServices = services.length;
statsGrid.timePeriod = '30 days';
// Configure Status Details - Showing the outage timeline // Configure Status Details - Showing the outage timeline
const generateStatusDetails = (): IStatusHistoryPoint[] => { const generateStatusDetails = (): IStatusHistoryPoint[] => {
const details: IStatusHistoryPoint[] = []; const details: IStatusHistoryPoint[] = [];
@@ -561,6 +552,7 @@ export const statuspageOutage = () => html`
> >
<upl-statuspage-header></upl-statuspage-header> <upl-statuspage-header></upl-statuspage-header>
<upl-statuspage-statusbar></upl-statuspage-statusbar> <upl-statuspage-statusbar></upl-statuspage-statusbar>
<upl-statuspage-statsgrid></upl-statuspage-statsgrid>
<upl-statuspage-assetsselector></upl-statuspage-assetsselector> <upl-statuspage-assetsselector></upl-statuspage-assetsselector>
<upl-statuspage-statusdetails></upl-statuspage-statusdetails> <upl-statuspage-statusdetails></upl-statuspage-statusdetails>
<upl-statuspage-statusmonth></upl-statuspage-statusmonth> <upl-statuspage-statusmonth></upl-statuspage-statusmonth>

12
ts_web/styles/shared.styles.ts
View File

@@ -27,13 +27,13 @@ export const colors = {
muted: cssManager.bdTheme('#9ca3af', '#71717a') muted: cssManager.bdTheme('#9ca3af', '#71717a')
}, },
// Status colors // Status colors - using bright colors for better visibility in both themes
status: { status: {
operational: cssManager.bdTheme('#047857', '#10b981'), operational: cssManager.bdTheme('#22c55e', '#22c55e'),
degraded: cssManager.bdTheme('#b45309', '#fbbf24'), degraded: cssManager.bdTheme('#fbbf24', '#fbbf24'),
partial: cssManager.bdTheme('#b91c1c', '#f87171'), partial: cssManager.bdTheme('#f87171', '#f87171'),
major: cssManager.bdTheme('#7f1d1d', '#ef4444'), major: cssManager.bdTheme('#ef4444', '#ef4444'),
maintenance: cssManager.bdTheme('#1e40af', '#60a5fa') maintenance: cssManager.bdTheme('#60a5fa', '#60a5fa')
} }
}; };