607 lines
22 KiB
TypeScript
607 lines
22 KiB
TypeScript
import { html } from '@design.estate/dees-element';
|
|
import type { IServiceStatus } from '../interfaces/index.js';
|
|
|
|
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-info {
|
|
margin-top: 12px;
|
|
padding: 12px;
|
|
background: white;
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
}
|
|
.event-log {
|
|
margin-top: 12px;
|
|
padding: 12px;
|
|
background: #f9f9f9;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
max-height: 150px;
|
|
overflow-y: auto;
|
|
font-family: monospace;
|
|
}
|
|
</style>
|
|
|
|
<div class="demo-container">
|
|
<!-- Full Featured Demo -->
|
|
<div class="demo-section">
|
|
<div class="demo-title">Full Featured Service Selector</div>
|
|
<dees-demowrapper
|
|
.runAfterRender=${async (wrapperElement: any) => {
|
|
const assetsSelector = wrapperElement.querySelector('upl-statuspage-assetsselector') as any;
|
|
|
|
// Comprehensive demo data
|
|
const demoServices: IServiceStatus[] = [
|
|
// Infrastructure
|
|
{
|
|
id: 'api-gateway',
|
|
name: 'api-gateway',
|
|
displayName: 'API Gateway',
|
|
description: 'Main API endpoint for all services',
|
|
currentStatus: 'operational',
|
|
lastChecked: Date.now(),
|
|
uptime30d: 99.95,
|
|
uptime90d: 99.92,
|
|
responseTime: 45,
|
|
category: 'Infrastructure',
|
|
selected: true
|
|
},
|
|
{
|
|
id: 'web-server',
|
|
name: 'web-server',
|
|
displayName: 'Web Server',
|
|
description: 'Frontend web application server',
|
|
currentStatus: 'operational',
|
|
lastChecked: Date.now(),
|
|
uptime30d: 99.99,
|
|
uptime90d: 99.97,
|
|
responseTime: 28,
|
|
category: 'Infrastructure',
|
|
selected: true
|
|
},
|
|
{
|
|
id: 'load-balancer',
|
|
name: 'load-balancer',
|
|
displayName: 'Load Balancer',
|
|
description: 'Traffic distribution system',
|
|
currentStatus: 'operational',
|
|
lastChecked: Date.now(),
|
|
uptime30d: 100,
|
|
uptime90d: 99.99,
|
|
responseTime: 5,
|
|
category: 'Infrastructure',
|
|
selected: false
|
|
},
|
|
{
|
|
id: 'cdn',
|
|
name: 'cdn',
|
|
displayName: 'CDN',
|
|
description: 'Content delivery network',
|
|
currentStatus: 'operational',
|
|
lastChecked: Date.now(),
|
|
uptime30d: 100,
|
|
uptime90d: 99.99,
|
|
responseTime: 12,
|
|
category: 'Infrastructure',
|
|
selected: false
|
|
},
|
|
// Data Services
|
|
{
|
|
id: 'database',
|
|
name: 'database',
|
|
displayName: 'Database Cluster',
|
|
description: 'Primary database cluster with replicas',
|
|
currentStatus: 'degraded',
|
|
lastChecked: Date.now(),
|
|
uptime30d: 98.5,
|
|
uptime90d: 99.1,
|
|
responseTime: 120,
|
|
category: 'Data',
|
|
selected: true
|
|
},
|
|
{
|
|
id: 'redis-cache',
|
|
name: 'redis-cache',
|
|
displayName: 'Redis Cache',
|
|
description: 'In-memory data caching',
|
|
currentStatus: 'operational',
|
|
lastChecked: Date.now(),
|
|
uptime30d: 99.98,
|
|
uptime90d: 99.96,
|
|
responseTime: 5,
|
|
category: 'Data',
|
|
selected: true
|
|
},
|
|
{
|
|
id: 'elasticsearch',
|
|
name: 'elasticsearch',
|
|
displayName: 'Search Engine',
|
|
description: 'Full-text search service',
|
|
currentStatus: 'partial_outage',
|
|
lastChecked: Date.now(),
|
|
uptime30d: 95.2,
|
|
uptime90d: 97.8,
|
|
responseTime: 180,
|
|
category: 'Data',
|
|
selected: false
|
|
},
|
|
{
|
|
id: 'backup-service',
|
|
name: 'backup-service',
|
|
displayName: 'Backup Service',
|
|
description: 'Automated backup and recovery',
|
|
currentStatus: 'operational',
|
|
lastChecked: Date.now(),
|
|
uptime30d: 100,
|
|
uptime90d: 99.99,
|
|
responseTime: 95,
|
|
category: 'Data',
|
|
selected: true
|
|
},
|
|
// Application Services
|
|
{
|
|
id: 'auth-service',
|
|
name: 'auth-service',
|
|
displayName: 'Authentication Service',
|
|
description: 'User authentication and authorization',
|
|
currentStatus: 'operational',
|
|
lastChecked: Date.now(),
|
|
uptime30d: 99.98,
|
|
uptime90d: 99.95,
|
|
responseTime: 65,
|
|
category: 'Services',
|
|
selected: true
|
|
},
|
|
{
|
|
id: 'payment-gateway',
|
|
name: 'payment-gateway',
|
|
displayName: 'Payment Gateway',
|
|
description: 'Payment processing service',
|
|
currentStatus: 'maintenance',
|
|
lastChecked: Date.now(),
|
|
uptime30d: 97.5,
|
|
uptime90d: 98.8,
|
|
responseTime: 250,
|
|
category: 'Services',
|
|
selected: false
|
|
},
|
|
{
|
|
id: 'email-service',
|
|
name: 'email-service',
|
|
displayName: 'Email Service',
|
|
description: 'Transactional email delivery',
|
|
currentStatus: 'operational',
|
|
lastChecked: Date.now(),
|
|
uptime30d: 99.9,
|
|
uptime90d: 99.85,
|
|
responseTime: 150,
|
|
category: 'Services',
|
|
selected: true
|
|
},
|
|
{
|
|
id: 'notification-service',
|
|
name: 'notification-service',
|
|
displayName: 'Notification Service',
|
|
description: 'Push notifications and alerts',
|
|
currentStatus: 'operational',
|
|
lastChecked: Date.now(),
|
|
uptime30d: 99.7,
|
|
uptime90d: 99.8,
|
|
responseTime: 88,
|
|
category: 'Services',
|
|
selected: false
|
|
},
|
|
{
|
|
id: 'analytics',
|
|
name: 'analytics',
|
|
displayName: 'Analytics Engine',
|
|
description: 'Real-time analytics processing',
|
|
currentStatus: 'major_outage',
|
|
lastChecked: Date.now(),
|
|
uptime30d: 89.5,
|
|
uptime90d: 94.2,
|
|
responseTime: 450,
|
|
category: 'Services',
|
|
selected: false
|
|
},
|
|
// Monitoring
|
|
{
|
|
id: 'monitoring',
|
|
name: 'monitoring',
|
|
displayName: 'Monitoring System',
|
|
description: 'System health and metrics monitoring',
|
|
currentStatus: 'operational',
|
|
lastChecked: Date.now(),
|
|
uptime30d: 99.95,
|
|
uptime90d: 99.93,
|
|
responseTime: 78,
|
|
category: 'Monitoring',
|
|
selected: true
|
|
},
|
|
{
|
|
id: 'logging',
|
|
name: 'logging',
|
|
displayName: 'Logging Service',
|
|
description: 'Centralized log management',
|
|
currentStatus: 'operational',
|
|
lastChecked: Date.now(),
|
|
uptime30d: 99.9,
|
|
uptime90d: 99.88,
|
|
responseTime: 92,
|
|
category: 'Monitoring',
|
|
selected: false
|
|
}
|
|
];
|
|
|
|
// Set initial data
|
|
assetsSelector.services = demoServices;
|
|
|
|
// Demo loading state
|
|
assetsSelector.loading = true;
|
|
setTimeout(() => {
|
|
assetsSelector.loading = false;
|
|
}, 1000);
|
|
|
|
// Create event log
|
|
const eventLog = document.createElement('div');
|
|
eventLog.className = 'event-log';
|
|
eventLog.innerHTML = '<strong>Event Log:</strong><br>';
|
|
wrapperElement.appendChild(eventLog);
|
|
|
|
const logEvent = (message: string) => {
|
|
const time = new Date().toLocaleTimeString();
|
|
eventLog.innerHTML += `[${time}] ${message}<br>`;
|
|
eventLog.scrollTop = eventLog.scrollHeight;
|
|
};
|
|
|
|
// Listen for selection changes
|
|
assetsSelector.addEventListener('selectionChanged', (event: CustomEvent) => {
|
|
const selected = event.detail.selectedServices.length;
|
|
const total = demoServices.length;
|
|
logEvent(`Selection changed: ${selected}/${total} services selected`);
|
|
});
|
|
|
|
// Simulate status updates
|
|
setInterval(() => {
|
|
const randomService = demoServices[Math.floor(Math.random() * demoServices.length)];
|
|
const statuses: Array<IServiceStatus['currentStatus']> = ['operational', 'degraded', 'partial_outage', 'major_outage', 'maintenance'];
|
|
const newStatus = statuses[Math.floor(Math.random() * statuses.length)];
|
|
|
|
if (randomService.currentStatus !== newStatus) {
|
|
const oldStatus = randomService.currentStatus;
|
|
randomService.currentStatus = newStatus;
|
|
randomService.lastChecked = Date.now();
|
|
assetsSelector.requestUpdate();
|
|
logEvent(`${randomService.displayName}: ${oldStatus} → ${newStatus}`);
|
|
}
|
|
}, 5000);
|
|
}}
|
|
>
|
|
<upl-statuspage-assetsselector></upl-statuspage-assetsselector>
|
|
</dees-demowrapper>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div class="demo-section">
|
|
<div class="demo-title">Empty State</div>
|
|
<dees-demowrapper
|
|
.runAfterRender=${async (wrapperElement: any) => {
|
|
const assetsSelector = wrapperElement.querySelector('upl-statuspage-assetsselector') as any;
|
|
|
|
// No services
|
|
assetsSelector.services = [];
|
|
|
|
const controls = document.createElement('div');
|
|
controls.className = 'demo-controls';
|
|
controls.innerHTML = `
|
|
<button class="demo-button" id="addServices">Add Services</button>
|
|
`;
|
|
wrapperElement.appendChild(controls);
|
|
|
|
controls.querySelector('#addServices')?.addEventListener('click', () => {
|
|
assetsSelector.services = [
|
|
{
|
|
id: 'new-service-1',
|
|
name: 'new-service-1',
|
|
displayName: 'New Service 1',
|
|
description: 'Just added',
|
|
currentStatus: 'operational',
|
|
lastChecked: Date.now(),
|
|
uptime30d: 100,
|
|
uptime90d: 100,
|
|
responseTime: 50,
|
|
selected: true
|
|
},
|
|
{
|
|
id: 'new-service-2',
|
|
name: 'new-service-2',
|
|
displayName: 'New Service 2',
|
|
description: 'Just added',
|
|
currentStatus: 'operational',
|
|
lastChecked: Date.now(),
|
|
uptime30d: 100,
|
|
uptime90d: 100,
|
|
responseTime: 60,
|
|
selected: false
|
|
}
|
|
];
|
|
});
|
|
}}
|
|
>
|
|
<upl-statuspage-assetsselector></upl-statuspage-assetsselector>
|
|
</dees-demowrapper>
|
|
</div>
|
|
|
|
<!-- Filtering Scenarios -->
|
|
<div class="demo-section">
|
|
<div class="demo-title">Advanced Filtering Demo</div>
|
|
<dees-demowrapper
|
|
.runAfterRender=${async (wrapperElement: any) => {
|
|
const assetsSelector = wrapperElement.querySelector('upl-statuspage-assetsselector') as any;
|
|
|
|
// Generate many services for filtering
|
|
const generateServices = (): IServiceStatus[] => {
|
|
const services: IServiceStatus[] = [];
|
|
const regions = ['us-east', 'us-west', 'eu-central', 'ap-south'];
|
|
const types = ['api', 'web', 'db', 'cache', 'queue'];
|
|
const statuses: Array<IServiceStatus['currentStatus']> = ['operational', 'degraded', 'partial_outage'];
|
|
|
|
regions.forEach(region => {
|
|
types.forEach(type => {
|
|
const id = `${region}-${type}`;
|
|
services.push({
|
|
id,
|
|
name: id,
|
|
displayName: `${region.toUpperCase()} ${type.toUpperCase()}`,
|
|
description: `${type} service in ${region} region`,
|
|
currentStatus: statuses[Math.floor(Math.random() * statuses.length)],
|
|
lastChecked: Date.now(),
|
|
uptime30d: 95 + Math.random() * 5,
|
|
uptime90d: 94 + Math.random() * 6,
|
|
responseTime: 20 + Math.random() * 200,
|
|
category: region,
|
|
selected: Math.random() > 0.5
|
|
});
|
|
});
|
|
});
|
|
|
|
return services;
|
|
};
|
|
|
|
assetsSelector.services = generateServices();
|
|
|
|
// Demo different filter scenarios
|
|
const scenarios = [
|
|
{
|
|
name: 'Show All',
|
|
action: () => {
|
|
assetsSelector.filterText = '';
|
|
assetsSelector.filterCategory = 'all';
|
|
assetsSelector.showOnlySelected = false;
|
|
}
|
|
},
|
|
{
|
|
name: 'Filter by Text: "api"',
|
|
action: () => {
|
|
assetsSelector.filterText = 'api';
|
|
assetsSelector.filterCategory = 'all';
|
|
assetsSelector.showOnlySelected = false;
|
|
}
|
|
},
|
|
{
|
|
name: 'Filter by Region: EU',
|
|
action: () => {
|
|
assetsSelector.filterText = '';
|
|
assetsSelector.filterCategory = 'eu-central';
|
|
assetsSelector.showOnlySelected = false;
|
|
}
|
|
},
|
|
{
|
|
name: 'Show Only Selected',
|
|
action: () => {
|
|
assetsSelector.filterText = '';
|
|
assetsSelector.filterCategory = 'all';
|
|
assetsSelector.showOnlySelected = true;
|
|
}
|
|
},
|
|
{
|
|
name: 'Complex: "db" in US regions',
|
|
action: () => {
|
|
assetsSelector.filterText = 'db';
|
|
assetsSelector.filterCategory = 'us-east';
|
|
assetsSelector.showOnlySelected = false;
|
|
}
|
|
}
|
|
];
|
|
|
|
const controls = document.createElement('div');
|
|
controls.className = 'demo-controls';
|
|
scenarios.forEach(scenario => {
|
|
const button = document.createElement('button');
|
|
button.className = 'demo-button';
|
|
button.textContent = scenario.name;
|
|
button.onclick = scenario.action;
|
|
controls.appendChild(button);
|
|
});
|
|
wrapperElement.appendChild(controls);
|
|
|
|
const info = document.createElement('div');
|
|
info.className = 'demo-info';
|
|
wrapperElement.appendChild(info);
|
|
|
|
// Update info on changes
|
|
const updateInfo = () => {
|
|
const filtered = assetsSelector.getFilteredServices();
|
|
const selected = assetsSelector.services.filter((s: any) => s.selected).length;
|
|
info.innerHTML = `
|
|
<strong>Filter Status:</strong><br>
|
|
Total Services: ${assetsSelector.services.length}<br>
|
|
Visible Services: ${filtered.length}<br>
|
|
Selected Services: ${selected}<br>
|
|
Active Filters: ${assetsSelector.filterText ? 'Text="' + assetsSelector.filterText + '" ' : ''}${assetsSelector.filterCategory !== 'all' ? 'Category=' + assetsSelector.filterCategory + ' ' : ''}${assetsSelector.showOnlySelected ? 'Selected Only' : ''}
|
|
`;
|
|
};
|
|
|
|
// Watch for changes
|
|
assetsSelector.addEventListener('selectionChanged', updateInfo);
|
|
setInterval(updateInfo, 500);
|
|
updateInfo();
|
|
}}
|
|
>
|
|
<upl-statuspage-assetsselector></upl-statuspage-assetsselector>
|
|
</dees-demowrapper>
|
|
</div>
|
|
|
|
<!-- Performance Test -->
|
|
<div class="demo-section">
|
|
<div class="demo-title">Performance Test - Many Services</div>
|
|
<dees-demowrapper
|
|
.runAfterRender=${async (wrapperElement: any) => {
|
|
const assetsSelector = wrapperElement.querySelector('upl-statuspage-assetsselector') as any;
|
|
|
|
const controls = document.createElement('div');
|
|
controls.className = 'demo-controls';
|
|
controls.innerHTML = `
|
|
<button class="demo-button" id="load50">Load 50 Services</button>
|
|
<button class="demo-button" id="load100">Load 100 Services</button>
|
|
<button class="demo-button" id="load200">Load 200 Services</button>
|
|
<button class="demo-button" id="clear">Clear All</button>
|
|
`;
|
|
wrapperElement.appendChild(controls);
|
|
|
|
const loadServices = (count: number) => {
|
|
const services: IServiceStatus[] = [];
|
|
const statuses: Array<IServiceStatus['currentStatus']> = ['operational', 'degraded', 'partial_outage', 'major_outage', 'maintenance'];
|
|
|
|
for (let i = 0; i < count; i++) {
|
|
services.push({
|
|
id: `service-${i}`,
|
|
name: `service-${i}`,
|
|
displayName: `Service ${i}`,
|
|
description: `Auto-generated service number ${i}`,
|
|
currentStatus: statuses[Math.floor(Math.random() * statuses.length)],
|
|
lastChecked: Date.now() - Math.random() * 3600000,
|
|
uptime30d: 85 + Math.random() * 15,
|
|
uptime90d: 80 + Math.random() * 20,
|
|
responseTime: 10 + Math.random() * 500,
|
|
category: `Category ${Math.floor(i / 10)}`,
|
|
selected: Math.random() > 0.7
|
|
});
|
|
}
|
|
|
|
assetsSelector.loading = true;
|
|
setTimeout(() => {
|
|
assetsSelector.services = services;
|
|
assetsSelector.loading = false;
|
|
}, 500);
|
|
};
|
|
|
|
controls.querySelector('#load50')?.addEventListener('click', () => loadServices(50));
|
|
controls.querySelector('#load100')?.addEventListener('click', () => loadServices(100));
|
|
controls.querySelector('#load200')?.addEventListener('click', () => loadServices(200));
|
|
controls.querySelector('#clear')?.addEventListener('click', () => {
|
|
assetsSelector.services = [];
|
|
});
|
|
|
|
// Start with 50 services
|
|
loadServices(50);
|
|
}}
|
|
>
|
|
<upl-statuspage-assetsselector></upl-statuspage-assetsselector>
|
|
</dees-demowrapper>
|
|
</div>
|
|
|
|
<!-- Loading States -->
|
|
<div class="demo-section">
|
|
<div class="demo-title">Loading and Error States</div>
|
|
<dees-demowrapper
|
|
.runAfterRender=${async (wrapperElement: any) => {
|
|
const assetsSelector = wrapperElement.querySelector('upl-statuspage-assetsselector') as any;
|
|
|
|
// Start with loading
|
|
assetsSelector.loading = true;
|
|
|
|
const controls = document.createElement('div');
|
|
controls.className = 'demo-controls';
|
|
controls.innerHTML = `
|
|
<button class="demo-button" id="toggleLoading">Toggle Loading</button>
|
|
<button class="demo-button" id="simulateError">Simulate Error</button>
|
|
<button class="demo-button" id="loadSuccess">Load Successfully</button>
|
|
`;
|
|
wrapperElement.appendChild(controls);
|
|
|
|
controls.querySelector('#toggleLoading')?.addEventListener('click', () => {
|
|
assetsSelector.loading = !assetsSelector.loading;
|
|
});
|
|
|
|
controls.querySelector('#simulateError')?.addEventListener('click', () => {
|
|
assetsSelector.loading = true;
|
|
setTimeout(() => {
|
|
assetsSelector.loading = false;
|
|
assetsSelector.services = [];
|
|
// You could add an error message property to the component
|
|
assetsSelector.errorMessage = 'Failed to load services';
|
|
}, 1500);
|
|
});
|
|
|
|
controls.querySelector('#loadSuccess')?.addEventListener('click', () => {
|
|
assetsSelector.loading = true;
|
|
setTimeout(() => {
|
|
assetsSelector.loading = false;
|
|
assetsSelector.services = [
|
|
{
|
|
id: 'loaded-1',
|
|
name: 'loaded-1',
|
|
displayName: 'Successfully Loaded Service',
|
|
description: 'This service was loaded after simulated delay',
|
|
currentStatus: 'operational',
|
|
lastChecked: Date.now(),
|
|
uptime30d: 99.9,
|
|
uptime90d: 99.8,
|
|
responseTime: 45,
|
|
selected: true
|
|
}
|
|
];
|
|
}, 1000);
|
|
});
|
|
}}
|
|
>
|
|
<upl-statuspage-assetsselector></upl-statuspage-assetsselector>
|
|
</dees-demowrapper>
|
|
</div>
|
|
</div>
|
|
`; |