update
This commit is contained in:
228
example.statuspage.html
Normal file
228
example.statuspage.html
Normal 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>
|
||||
@@ -186,6 +186,16 @@ To make these components production-ready requires implementing:
|
||||
|
||||
## 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
|
||||
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
|
||||
- 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
|
||||
- All demos have been updated to use dees-demowrapper with runAfterRender callbacks
|
||||
- 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
|
||||
- IIncidentDetails - Full incident information
|
||||
- IMonthlyUptime - Monthly uptime calendar data
|
||||
- IStatusDetail - Hourly status data points
|
||||
- IStatusHistoryPoint - Hourly status data points
|
||||
- IStatusPageConfig - Configuration options
|
||||
|
||||
### Remaining Tasks
|
||||
|
||||
84
test-demo-no-banners.html
Normal file
84
test-demo-no-banners.html
Normal 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
107
test-statsgrid.html
Normal 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>
|
||||
@@ -7,6 +7,7 @@ export * from './upl-statuspage-pagetitle.js';
|
||||
export * from './upl-statuspage-statusbar.js';
|
||||
export * from './upl-statuspage-statusdetails.js';
|
||||
export * from './upl-statuspage-statusmonth.js';
|
||||
export * from './upl-statuspage-statsgrid.js';
|
||||
|
||||
// Export interfaces
|
||||
export * from '../interfaces/index.js';
|
||||
|
||||
@@ -257,11 +257,11 @@ export class UplStatuspageAssetsselector extends DeesElement {
|
||||
border-radius: ${unsafeCSS(borderRadius.full)};
|
||||
}
|
||||
|
||||
.status-indicator.operational, .status-dot.operational { background: ${cssManager.bdTheme('#10b981', '#10b981')}; }
|
||||
.status-indicator.degraded, .status-dot.degraded { background: ${cssManager.bdTheme('#f59e0b', '#f59e0b')}; }
|
||||
.status-indicator.partial_outage, .status-dot.partial_outage { background: ${cssManager.bdTheme('#ef4444', '#ef4444')}; }
|
||||
.status-indicator.major_outage, .status-dot.major_outage { background: ${cssManager.bdTheme('#dc2626', '#dc2626')}; }
|
||||
.status-indicator.maintenance, .status-dot.maintenance { background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')}; }
|
||||
.status-indicator.operational, .status-dot.operational { background: #22c55e; }
|
||||
.status-indicator.degraded, .status-dot.degraded { background: #fbbf24; }
|
||||
.status-indicator.partial_outage, .status-dot.partial_outage { background: #f87171; }
|
||||
.status-indicator.major_outage, .status-dot.major_outage { background: #ef4444; }
|
||||
.status-indicator.maintenance, .status-dot.maintenance { background: #60a5fa; }
|
||||
|
||||
.status-text {
|
||||
font-size: 12px;
|
||||
|
||||
315
ts_web/elements/upl-statuspage-statsgrid.demo.ts
Normal file
315
ts_web/elements/upl-statuspage-statsgrid.demo.ts
Normal 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
306
ts_web/elements/upl-statuspage-statsgrid.ts
Normal 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>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@@ -85,10 +85,10 @@ export class UplStatuspageStatusdetails extends DeesElement {
|
||||
.mainbox .barContainer {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 1px;
|
||||
gap: 2px;
|
||||
padding: ${unsafeCSS(spacing.sm)};
|
||||
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||||
border: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
border-radius: ${unsafeCSS(borderRadius.base)};
|
||||
overflow: hidden;
|
||||
height: 40px;
|
||||
@@ -98,12 +98,14 @@ export class UplStatuspageStatusdetails extends DeesElement {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s ease;
|
||||
transition: all 0.15s ease;
|
||||
position: relative;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@@ -127,7 +129,8 @@ export class UplStatuspageStatusdetails extends DeesElement {
|
||||
}
|
||||
|
||||
.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; }
|
||||
}
|
||||
|
||||
.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) {
|
||||
.container {
|
||||
@@ -283,11 +256,6 @@ export class UplStatuspageStatusdetails extends DeesElement {
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
${!this.loading && this.getData().length > 0 ? html`
|
||||
<div class="stats-row">
|
||||
${this.renderStats()}
|
||||
</div>
|
||||
` : ''}
|
||||
<div class="tooltip" id="tooltip"></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());
|
||||
}
|
||||
}
|
||||
|
||||
@@ -138,24 +138,28 @@ export class UplStatuspageStatusmonth extends DeesElement {
|
||||
}
|
||||
|
||||
.statusDay.operational {
|
||||
background: ${cssManager.bdTheme('#10b981', '#10b981')};
|
||||
background: #22c55e;
|
||||
}
|
||||
|
||||
.statusDay.degraded {
|
||||
background: ${cssManager.bdTheme('#f59e0b', '#f59e0b')};
|
||||
background: #fbbf24;
|
||||
}
|
||||
|
||||
.statusDay.partial_outage {
|
||||
background: ${cssManager.bdTheme('#ef4444', '#ef4444')};
|
||||
background: #f87171;
|
||||
}
|
||||
|
||||
.statusDay.major_outage {
|
||||
background: ${cssManager.bdTheme('#dc2626', '#dc2626')};
|
||||
background: #ef4444;
|
||||
}
|
||||
|
||||
.statusDay.maintenance {
|
||||
background: #60a5fa;
|
||||
}
|
||||
|
||||
.statusDay.no-data {
|
||||
background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
|
||||
opacity: 0.5;
|
||||
background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.statusDay.empty {
|
||||
|
||||
@@ -7,37 +7,15 @@ export const statuspageAllgreen = () => html`
|
||||
min-height: 100vh;
|
||||
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>
|
||||
|
||||
<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
|
||||
.runAfterRender=${async (wrapperElement: any) => {
|
||||
const header = wrapperElement.querySelector('upl-statuspage-header') 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;
|
||||
@@ -221,6 +199,15 @@ export const statuspageAllgreen = () => html`
|
||||
|
||||
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
|
||||
const generateStatusDetails = (): IStatusHistoryPoint[] => {
|
||||
const details: IStatusHistoryPoint[] = [];
|
||||
@@ -409,6 +396,7 @@ export const statuspageAllgreen = () => html`
|
||||
>
|
||||
<upl-statuspage-header></upl-statuspage-header>
|
||||
<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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -7,37 +7,15 @@ export const statuspageMaintenance = () => 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, -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>
|
||||
|
||||
<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
|
||||
.runAfterRender=${async (wrapperElement: any) => {
|
||||
const header = wrapperElement.querySelector('upl-statuspage-header') 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;
|
||||
@@ -252,6 +230,19 @@ export const statuspageMaintenance = () => html`
|
||||
|
||||
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
|
||||
const generateStatusDetails = (): IStatusHistoryPoint[] => {
|
||||
const details: IStatusHistoryPoint[] = [];
|
||||
@@ -563,6 +554,7 @@ export const statuspageMaintenance = () => html`
|
||||
>
|
||||
<upl-statuspage-header></upl-statuspage-header>
|
||||
<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>
|
||||
|
||||
@@ -7,37 +7,15 @@ export const statuspageOutage = () => html`
|
||||
min-height: 100vh;
|
||||
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>
|
||||
|
||||
<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
|
||||
.runAfterRender=${async (wrapperElement: any) => {
|
||||
const header = wrapperElement.querySelector('upl-statuspage-header') 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;
|
||||
@@ -265,6 +243,19 @@ export const statuspageOutage = () => html`
|
||||
|
||||
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
|
||||
const generateStatusDetails = (): IStatusHistoryPoint[] => {
|
||||
const details: IStatusHistoryPoint[] = [];
|
||||
@@ -561,6 +552,7 @@ export const statuspageOutage = () => html`
|
||||
>
|
||||
<upl-statuspage-header></upl-statuspage-header>
|
||||
<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>
|
||||
|
||||
@@ -27,13 +27,13 @@ export const colors = {
|
||||
muted: cssManager.bdTheme('#9ca3af', '#71717a')
|
||||
},
|
||||
|
||||
// Status colors
|
||||
// Status colors - using bright colors for better visibility in both themes
|
||||
status: {
|
||||
operational: cssManager.bdTheme('#047857', '#10b981'),
|
||||
degraded: cssManager.bdTheme('#b45309', '#fbbf24'),
|
||||
partial: cssManager.bdTheme('#b91c1c', '#f87171'),
|
||||
major: cssManager.bdTheme('#7f1d1d', '#ef4444'),
|
||||
maintenance: cssManager.bdTheme('#1e40af', '#60a5fa')
|
||||
operational: cssManager.bdTheme('#22c55e', '#22c55e'),
|
||||
degraded: cssManager.bdTheme('#fbbf24', '#fbbf24'),
|
||||
partial: cssManager.bdTheme('#f87171', '#f87171'),
|
||||
major: cssManager.bdTheme('#ef4444', '#ef4444'),
|
||||
maintenance: cssManager.bdTheme('#60a5fa', '#60a5fa')
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user