315 lines
11 KiB
TypeScript
315 lines
11 KiB
TypeScript
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>
|
|
`; |