feat(admin-ui): introduce view layer and refactor admin UI to use view components, consolidate demos, and update interfaces
This commit is contained in:
@@ -1,83 +0,0 @@
|
||||
import { html, cssManager } from "@design.estate/dees-element";
|
||||
import type { IStatusPageConfig } from '../interfaces/index.js';
|
||||
import '../elements/index.js';
|
||||
|
||||
export const adminpageConfig = () => html`
|
||||
<style>
|
||||
.demo-page-wrapper {
|
||||
min-height: 100vh;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||||
padding: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="demo-page-wrapper">
|
||||
<dees-demowrapper
|
||||
.runAfterRender=${async (wrapperElement: any) => {
|
||||
const config = wrapperElement.querySelector('upladmin-statuspage-config') as any;
|
||||
|
||||
const configData: IStatusPageConfig = {
|
||||
companyName: 'CloudFlow Inc.',
|
||||
companyLogo: '',
|
||||
supportEmail: 'support@cloudflow.io',
|
||||
statusPageUrl: 'https://status.cloudflow.io',
|
||||
legalUrl: 'https://cloudflow.io/terms',
|
||||
apiEndpoint: 'https://api.cloudflow.io/status',
|
||||
refreshInterval: 60,
|
||||
showHistoricalDays: 90,
|
||||
theme: 'auto',
|
||||
language: 'en',
|
||||
timeZone: 'UTC',
|
||||
dateFormat: 'relative',
|
||||
enableWebSocket: true,
|
||||
enableNotifications: false,
|
||||
whitelabel: false,
|
||||
};
|
||||
|
||||
config.config = configData;
|
||||
}}
|
||||
>
|
||||
<upladmin-statuspage-config></upladmin-statuspage-config>
|
||||
</dees-demowrapper>
|
||||
</div>
|
||||
`;
|
||||
|
||||
export const adminpageConfigWhitelabel = () => html`
|
||||
<style>
|
||||
.demo-page-wrapper {
|
||||
min-height: 100vh;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||||
padding: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="demo-page-wrapper">
|
||||
<dees-demowrapper
|
||||
.runAfterRender=${async (wrapperElement: any) => {
|
||||
const config = wrapperElement.querySelector('upladmin-statuspage-config') as any;
|
||||
|
||||
const configData: IStatusPageConfig = {
|
||||
companyName: 'Enterprise Corp',
|
||||
companyLogo: 'https://via.placeholder.com/200x60/1a1a2e/ffffff?text=ENTERPRISE',
|
||||
supportEmail: 'support@enterprise.com',
|
||||
statusPageUrl: 'https://status.enterprise.com',
|
||||
legalUrl: 'https://enterprise.com/legal',
|
||||
apiEndpoint: 'https://api.enterprise.com/v2/status',
|
||||
refreshInterval: 30,
|
||||
showHistoricalDays: 180,
|
||||
theme: 'dark',
|
||||
language: 'en',
|
||||
timeZone: 'America/New_York',
|
||||
dateFormat: 'absolute',
|
||||
enableWebSocket: true,
|
||||
enableNotifications: true,
|
||||
whitelabel: true,
|
||||
};
|
||||
|
||||
config.config = configData;
|
||||
}}
|
||||
>
|
||||
<upladmin-statuspage-config></upladmin-statuspage-config>
|
||||
</dees-demowrapper>
|
||||
</div>
|
||||
`;
|
||||
@@ -1,156 +0,0 @@
|
||||
import { html, cssManager } from "@design.estate/dees-element";
|
||||
import type { IServiceStatus, IIncidentDetails } from '../interfaces/index.js';
|
||||
import '../elements/index.js';
|
||||
|
||||
export const adminpageDashboard = () => html`
|
||||
<style>
|
||||
.demo-page-wrapper {
|
||||
min-height: 100vh;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||||
padding: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="demo-page-wrapper">
|
||||
<dees-demowrapper
|
||||
.runAfterRender=${async (wrapperElement: any) => {
|
||||
const dashboard = wrapperElement.querySelector('upladmin-dashboard') as any;
|
||||
|
||||
// Demo monitors
|
||||
const monitors: IServiceStatus[] = [
|
||||
{
|
||||
id: 'api-server',
|
||||
name: 'api-server',
|
||||
displayName: 'API Server',
|
||||
description: 'Main REST API endpoint',
|
||||
currentStatus: 'operational',
|
||||
lastChecked: Date.now(),
|
||||
uptime30d: 99.98,
|
||||
uptime90d: 99.95,
|
||||
responseTime: 45,
|
||||
category: 'Core Services',
|
||||
},
|
||||
{
|
||||
id: 'web-app',
|
||||
name: 'web-app',
|
||||
displayName: 'Web Application',
|
||||
description: 'Customer-facing web application',
|
||||
currentStatus: 'operational',
|
||||
lastChecked: Date.now(),
|
||||
uptime30d: 99.99,
|
||||
uptime90d: 99.97,
|
||||
responseTime: 120,
|
||||
category: 'Core Services',
|
||||
},
|
||||
{
|
||||
id: 'database-primary',
|
||||
name: 'database-primary',
|
||||
displayName: 'Primary Database',
|
||||
description: 'PostgreSQL primary node',
|
||||
currentStatus: 'operational',
|
||||
lastChecked: Date.now(),
|
||||
uptime30d: 99.999,
|
||||
uptime90d: 99.998,
|
||||
responseTime: 5,
|
||||
category: 'Infrastructure',
|
||||
},
|
||||
{
|
||||
id: 'cdn',
|
||||
name: 'cdn',
|
||||
displayName: 'Content Delivery Network',
|
||||
description: 'Global CDN for static assets',
|
||||
currentStatus: 'degraded',
|
||||
lastChecked: Date.now(),
|
||||
uptime30d: 99.5,
|
||||
uptime90d: 99.8,
|
||||
responseTime: 200,
|
||||
category: 'Infrastructure',
|
||||
},
|
||||
{
|
||||
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: 500,
|
||||
category: 'External Services',
|
||||
},
|
||||
{
|
||||
id: 'payment-gateway',
|
||||
name: 'payment-gateway',
|
||||
displayName: 'Payment Gateway',
|
||||
description: 'Payment processing integration',
|
||||
currentStatus: 'maintenance',
|
||||
lastChecked: Date.now(),
|
||||
uptime30d: 99.95,
|
||||
uptime90d: 99.9,
|
||||
responseTime: 350,
|
||||
category: 'External Services',
|
||||
},
|
||||
];
|
||||
|
||||
// Demo incidents
|
||||
const incidents: IIncidentDetails[] = [
|
||||
{
|
||||
id: 'inc-001',
|
||||
title: 'CDN Performance Degradation',
|
||||
status: 'monitoring',
|
||||
severity: 'minor',
|
||||
affectedServices: ['cdn'],
|
||||
startTime: Date.now() - 2 * 60 * 60 * 1000,
|
||||
impact: 'Some users may experience slower loading times for images and static assets.',
|
||||
updates: [
|
||||
{
|
||||
id: 'upd-001',
|
||||
timestamp: Date.now() - 2 * 60 * 60 * 1000,
|
||||
status: 'investigating',
|
||||
message: 'We are investigating reports of slow asset loading.',
|
||||
author: 'Platform Team',
|
||||
},
|
||||
{
|
||||
id: 'upd-002',
|
||||
timestamp: Date.now() - 1 * 60 * 60 * 1000,
|
||||
status: 'identified',
|
||||
message: 'We have identified the issue as a problem with one of our CDN edge nodes.',
|
||||
author: 'Platform Team',
|
||||
},
|
||||
{
|
||||
id: 'upd-003',
|
||||
timestamp: Date.now() - 30 * 60 * 1000,
|
||||
status: 'monitoring',
|
||||
message: 'Traffic has been rerouted to healthy nodes. Monitoring for stability.',
|
||||
author: 'Platform Team',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'inc-002',
|
||||
title: 'Payment Gateway Scheduled Maintenance',
|
||||
status: 'investigating',
|
||||
severity: 'maintenance',
|
||||
affectedServices: ['payment-gateway'],
|
||||
startTime: Date.now() - 30 * 60 * 1000,
|
||||
impact: 'Payment processing is temporarily unavailable during the maintenance window.',
|
||||
updates: [
|
||||
{
|
||||
id: 'upd-004',
|
||||
timestamp: Date.now() - 30 * 60 * 1000,
|
||||
status: 'investigating',
|
||||
message: 'Scheduled maintenance has begun. Expected duration: 2 hours.',
|
||||
author: 'DevOps Team',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
dashboard.monitors = monitors;
|
||||
dashboard.incidents = incidents;
|
||||
}}
|
||||
>
|
||||
<upladmin-dashboard></upladmin-dashboard>
|
||||
</dees-demowrapper>
|
||||
</div>
|
||||
`;
|
||||
@@ -1,166 +0,0 @@
|
||||
import { html, cssManager } from "@design.estate/dees-element";
|
||||
import type { IServiceStatus, IIncidentDetails } from '../interfaces/index.js';
|
||||
import '../elements/index.js';
|
||||
|
||||
export const adminpageIncidents = () => html`
|
||||
<style>
|
||||
.demo-page-wrapper {
|
||||
min-height: 100vh;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||||
padding: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="demo-page-wrapper">
|
||||
<dees-demowrapper
|
||||
.runAfterRender=${async (wrapperElement: any) => {
|
||||
const incidentList = wrapperElement.querySelector('upladmin-incident-list') as any;
|
||||
|
||||
const incidents: IIncidentDetails[] = [
|
||||
{
|
||||
id: 'inc-001',
|
||||
title: 'CDN Performance Degradation',
|
||||
status: 'monitoring',
|
||||
severity: 'minor',
|
||||
affectedServices: ['cdn'],
|
||||
startTime: Date.now() - 2 * 60 * 60 * 1000,
|
||||
impact: 'Some users may experience slower loading times for images and static assets.',
|
||||
updates: [
|
||||
{ id: 'upd-001', timestamp: Date.now() - 2 * 60 * 60 * 1000, status: 'investigating', message: 'We are investigating reports of slow asset loading.', author: 'Platform Team' },
|
||||
{ id: 'upd-002', timestamp: Date.now() - 1 * 60 * 60 * 1000, status: 'identified', message: 'We have identified the issue as a problem with one of our CDN edge nodes.', author: 'Platform Team' },
|
||||
{ id: 'upd-003', timestamp: Date.now() - 30 * 60 * 1000, status: 'monitoring', message: 'Traffic has been rerouted to healthy nodes. Monitoring for stability.', author: 'Platform Team' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'inc-002',
|
||||
title: 'Payment Gateway Scheduled Maintenance',
|
||||
status: 'investigating',
|
||||
severity: 'maintenance',
|
||||
affectedServices: ['payment-gateway'],
|
||||
startTime: Date.now() - 30 * 60 * 1000,
|
||||
impact: 'Payment processing is temporarily unavailable during the maintenance window.',
|
||||
updates: [
|
||||
{ id: 'upd-004', timestamp: Date.now() - 30 * 60 * 1000, status: 'investigating', message: 'Scheduled maintenance has begun. Expected duration: 2 hours.', author: 'DevOps Team' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'inc-003',
|
||||
title: 'Search Engine Partial Outage',
|
||||
status: 'identified',
|
||||
severity: 'major',
|
||||
affectedServices: ['search-engine', 'api-server'],
|
||||
startTime: Date.now() - 45 * 60 * 1000,
|
||||
impact: 'Search functionality is degraded. Some queries may timeout or return incomplete results.',
|
||||
updates: [
|
||||
{ id: 'upd-005', timestamp: Date.now() - 45 * 60 * 1000, status: 'investigating', message: 'We are aware of issues with search functionality.', author: 'Engineering Team' },
|
||||
{ id: 'upd-006', timestamp: Date.now() - 20 * 60 * 1000, status: 'identified', message: 'Root cause identified: disk space exhaustion on search cluster nodes.', author: 'Engineering Team' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'inc-004',
|
||||
title: 'API Server Outage',
|
||||
status: 'resolved',
|
||||
severity: 'critical',
|
||||
affectedServices: ['api-server', 'web-app'],
|
||||
startTime: Date.now() - 24 * 60 * 60 * 1000,
|
||||
endTime: Date.now() - 23 * 60 * 60 * 1000,
|
||||
impact: 'Complete service unavailability for all API-dependent services.',
|
||||
rootCause: 'Database connection pool exhaustion due to a query performance regression.',
|
||||
resolution: 'Rolled back recent deployment and optimized database queries.',
|
||||
updates: [
|
||||
{ id: 'upd-007', timestamp: Date.now() - 24 * 60 * 60 * 1000, status: 'investigating', message: 'We are aware of service unavailability and actively investigating.', author: 'Platform Team' },
|
||||
{ id: 'upd-008', timestamp: Date.now() - 23.5 * 60 * 60 * 1000, status: 'identified', message: 'Root cause identified as database connection pool exhaustion.', author: 'Platform Team' },
|
||||
{ id: 'upd-009', timestamp: Date.now() - 23 * 60 * 60 * 1000, status: 'resolved', message: 'Service has been restored. All systems operational.', author: 'Platform Team' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'inc-005',
|
||||
title: 'Email Delivery Delays',
|
||||
status: 'resolved',
|
||||
severity: 'minor',
|
||||
affectedServices: ['email-service'],
|
||||
startTime: Date.now() - 48 * 60 * 60 * 1000,
|
||||
endTime: Date.now() - 46 * 60 * 60 * 1000,
|
||||
impact: 'Email notifications may be delayed by up to 30 minutes.',
|
||||
rootCause: 'Third-party email provider experiencing capacity issues.',
|
||||
resolution: 'Provider resolved their capacity issues.',
|
||||
updates: [
|
||||
{ id: 'upd-010', timestamp: Date.now() - 48 * 60 * 60 * 1000, status: 'investigating', message: 'Investigating reports of delayed email delivery.', author: 'Support Team' },
|
||||
{ id: 'upd-011', timestamp: Date.now() - 46 * 60 * 60 * 1000, status: 'resolved', message: 'Email delivery has returned to normal.', author: 'Support Team' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
incidentList.incidents = incidents;
|
||||
}}
|
||||
>
|
||||
<upladmin-incident-list></upladmin-incident-list>
|
||||
</dees-demowrapper>
|
||||
</div>
|
||||
`;
|
||||
|
||||
export const adminpageIncidentForm = () => html`
|
||||
<style>
|
||||
.demo-page-wrapper {
|
||||
min-height: 100vh;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||||
padding: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="demo-page-wrapper">
|
||||
<dees-demowrapper
|
||||
.runAfterRender=${async (wrapperElement: any) => {
|
||||
const incidentForm = wrapperElement.querySelector('upladmin-incident-form') as any;
|
||||
|
||||
const services: IServiceStatus[] = [
|
||||
{ id: 'api-server', name: 'api-server', displayName: 'API Server', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.98, uptime90d: 99.95, responseTime: 45 },
|
||||
{ id: 'web-app', name: 'web-app', displayName: 'Web Application', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.99, uptime90d: 99.97, responseTime: 120 },
|
||||
{ id: 'database-primary', name: 'database-primary', displayName: 'Primary Database', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.999, uptime90d: 99.998, responseTime: 5 },
|
||||
{ id: 'cdn', name: 'cdn', displayName: 'Content Delivery Network', currentStatus: 'degraded', lastChecked: Date.now(), uptime30d: 99.5, uptime90d: 99.8, responseTime: 200 },
|
||||
{ id: 'email-service', name: 'email-service', displayName: 'Email Service', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.9, uptime90d: 99.85, responseTime: 500 },
|
||||
{ id: 'payment-gateway', name: 'payment-gateway', displayName: 'Payment Gateway', currentStatus: 'maintenance', lastChecked: Date.now(), uptime30d: 99.95, uptime90d: 99.9, responseTime: 350 },
|
||||
];
|
||||
|
||||
incidentForm.availableServices = services;
|
||||
}}
|
||||
>
|
||||
<upladmin-incident-form></upladmin-incident-form>
|
||||
</dees-demowrapper>
|
||||
</div>
|
||||
`;
|
||||
|
||||
export const adminpageIncidentUpdate = () => html`
|
||||
<style>
|
||||
.demo-page-wrapper {
|
||||
min-height: 100vh;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||||
padding: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="demo-page-wrapper">
|
||||
<dees-demowrapper
|
||||
.runAfterRender=${async (wrapperElement: any) => {
|
||||
const incidentUpdate = wrapperElement.querySelector('upladmin-incident-update') as any;
|
||||
|
||||
incidentUpdate.incident = {
|
||||
id: 'inc-001',
|
||||
title: 'CDN Performance Degradation',
|
||||
status: 'monitoring',
|
||||
severity: 'minor',
|
||||
affectedServices: ['cdn'],
|
||||
startTime: Date.now() - 2 * 60 * 60 * 1000,
|
||||
impact: 'Some users may experience slower loading times for images and static assets.',
|
||||
updates: [
|
||||
{ id: 'upd-001', timestamp: Date.now() - 2 * 60 * 60 * 1000, status: 'investigating', message: 'We are investigating reports of slow asset loading.', author: 'Platform Team' },
|
||||
{ id: 'upd-002', timestamp: Date.now() - 1 * 60 * 60 * 1000, status: 'identified', message: 'We have identified the issue as a problem with one of our CDN edge nodes.', author: 'Platform Team' },
|
||||
{ id: 'upd-003', timestamp: Date.now() - 30 * 60 * 1000, status: 'monitoring', message: 'Traffic has been rerouted to healthy nodes. Monitoring for stability.', author: 'Platform Team' },
|
||||
],
|
||||
};
|
||||
}}
|
||||
>
|
||||
<upladmin-incident-update></upladmin-incident-update>
|
||||
</dees-demowrapper>
|
||||
</div>
|
||||
`;
|
||||
@@ -1,213 +0,0 @@
|
||||
import { html, cssManager } from "@design.estate/dees-element";
|
||||
import type { IServiceStatus } from '../interfaces/index.js';
|
||||
import '../elements/index.js';
|
||||
|
||||
export const adminpageMonitors = () => html`
|
||||
<style>
|
||||
.demo-page-wrapper {
|
||||
min-height: 100vh;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||||
padding: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="demo-page-wrapper">
|
||||
<dees-demowrapper
|
||||
.runAfterRender=${async (wrapperElement: any) => {
|
||||
const monitorList = wrapperElement.querySelector('upladmin-monitor-list') as any;
|
||||
|
||||
const monitors: IServiceStatus[] = [
|
||||
{
|
||||
id: 'api-server',
|
||||
name: 'api-server',
|
||||
displayName: 'API Server',
|
||||
description: 'Main REST API endpoint',
|
||||
currentStatus: 'operational',
|
||||
lastChecked: Date.now(),
|
||||
uptime30d: 99.98,
|
||||
uptime90d: 99.95,
|
||||
responseTime: 45,
|
||||
category: 'Core Services',
|
||||
},
|
||||
{
|
||||
id: 'web-app',
|
||||
name: 'web-app',
|
||||
displayName: 'Web Application',
|
||||
description: 'Customer-facing web application',
|
||||
currentStatus: 'operational',
|
||||
lastChecked: Date.now(),
|
||||
uptime30d: 99.99,
|
||||
uptime90d: 99.97,
|
||||
responseTime: 120,
|
||||
category: 'Core Services',
|
||||
},
|
||||
{
|
||||
id: 'database-primary',
|
||||
name: 'database-primary',
|
||||
displayName: 'Primary Database',
|
||||
description: 'PostgreSQL primary node',
|
||||
currentStatus: 'operational',
|
||||
lastChecked: Date.now(),
|
||||
uptime30d: 99.999,
|
||||
uptime90d: 99.998,
|
||||
responseTime: 5,
|
||||
category: 'Infrastructure',
|
||||
},
|
||||
{
|
||||
id: 'database-replica',
|
||||
name: 'database-replica',
|
||||
displayName: 'Database Replica',
|
||||
description: 'PostgreSQL read replica',
|
||||
currentStatus: 'operational',
|
||||
lastChecked: Date.now(),
|
||||
uptime30d: 99.99,
|
||||
uptime90d: 99.95,
|
||||
responseTime: 8,
|
||||
category: 'Infrastructure',
|
||||
},
|
||||
{
|
||||
id: 'cdn',
|
||||
name: 'cdn',
|
||||
displayName: 'Content Delivery Network',
|
||||
description: 'Global CDN for static assets',
|
||||
currentStatus: 'degraded',
|
||||
lastChecked: Date.now(),
|
||||
uptime30d: 99.5,
|
||||
uptime90d: 99.8,
|
||||
responseTime: 200,
|
||||
category: 'Infrastructure',
|
||||
},
|
||||
{
|
||||
id: 'redis-cache',
|
||||
name: 'redis-cache',
|
||||
displayName: 'Redis Cache',
|
||||
description: 'In-memory caching layer',
|
||||
currentStatus: 'operational',
|
||||
lastChecked: Date.now(),
|
||||
uptime30d: 99.99,
|
||||
uptime90d: 99.98,
|
||||
responseTime: 2,
|
||||
category: 'Infrastructure',
|
||||
},
|
||||
{
|
||||
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: 500,
|
||||
category: 'External Services',
|
||||
},
|
||||
{
|
||||
id: 'payment-gateway',
|
||||
name: 'payment-gateway',
|
||||
displayName: 'Payment Gateway',
|
||||
description: 'Payment processing integration',
|
||||
currentStatus: 'maintenance',
|
||||
lastChecked: Date.now(),
|
||||
uptime30d: 99.95,
|
||||
uptime90d: 99.9,
|
||||
responseTime: 350,
|
||||
category: 'External Services',
|
||||
},
|
||||
{
|
||||
id: 'sms-service',
|
||||
name: 'sms-service',
|
||||
displayName: 'SMS Service',
|
||||
description: 'SMS notifications and 2FA',
|
||||
currentStatus: 'operational',
|
||||
lastChecked: Date.now(),
|
||||
uptime30d: 99.8,
|
||||
uptime90d: 99.75,
|
||||
responseTime: 800,
|
||||
category: 'External Services',
|
||||
},
|
||||
{
|
||||
id: 'search-engine',
|
||||
name: 'search-engine',
|
||||
displayName: 'Search Engine',
|
||||
description: 'Elasticsearch cluster',
|
||||
currentStatus: 'partial_outage',
|
||||
lastChecked: Date.now(),
|
||||
uptime30d: 98.5,
|
||||
uptime90d: 99.2,
|
||||
responseTime: 150,
|
||||
category: 'Core Services',
|
||||
},
|
||||
];
|
||||
|
||||
monitorList.monitors = monitors;
|
||||
}}
|
||||
>
|
||||
<upladmin-monitor-list></upladmin-monitor-list>
|
||||
</dees-demowrapper>
|
||||
</div>
|
||||
`;
|
||||
|
||||
export const adminpageMonitorForm = () => html`
|
||||
<style>
|
||||
.demo-page-wrapper {
|
||||
min-height: 100vh;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||||
padding: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="demo-page-wrapper">
|
||||
<dees-demowrapper
|
||||
.runAfterRender=${async (wrapperElement: any) => {
|
||||
const monitorForm = wrapperElement.querySelector('upladmin-monitor-form') as any;
|
||||
|
||||
const availableMonitors: IServiceStatus[] = [
|
||||
{ id: 'api-server', name: 'api-server', displayName: 'API Server', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.98, uptime90d: 99.95, responseTime: 45 },
|
||||
{ id: 'database-primary', name: 'database-primary', displayName: 'Primary Database', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.999, uptime90d: 99.998, responseTime: 5 },
|
||||
];
|
||||
|
||||
monitorForm.availableMonitors = availableMonitors;
|
||||
monitorForm.categories = ['Core Services', 'Infrastructure', 'External Services', 'Web Services'];
|
||||
}}
|
||||
>
|
||||
<upladmin-monitor-form></upladmin-monitor-form>
|
||||
</dees-demowrapper>
|
||||
</div>
|
||||
`;
|
||||
|
||||
export const adminpageMonitorFormEdit = () => html`
|
||||
<style>
|
||||
.demo-page-wrapper {
|
||||
min-height: 100vh;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||||
padding: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="demo-page-wrapper">
|
||||
<dees-demowrapper
|
||||
.runAfterRender=${async (wrapperElement: any) => {
|
||||
const monitorForm = wrapperElement.querySelector('upladmin-monitor-form') as any;
|
||||
|
||||
const availableMonitors: IServiceStatus[] = [
|
||||
{ id: 'api-server', name: 'api-server', displayName: 'API Server', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.98, uptime90d: 99.95, responseTime: 45 },
|
||||
{ id: 'database-primary', name: 'database-primary', displayName: 'Primary Database', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.999, uptime90d: 99.998, responseTime: 5 },
|
||||
];
|
||||
|
||||
monitorForm.availableMonitors = availableMonitors;
|
||||
monitorForm.categories = ['Core Services', 'Infrastructure', 'External Services', 'Web Services'];
|
||||
monitorForm.monitor = {
|
||||
id: 'cdn',
|
||||
name: 'cdn',
|
||||
displayName: 'Content Delivery Network',
|
||||
description: 'Global CDN for static assets and media files',
|
||||
category: 'Infrastructure',
|
||||
dependencies: ['api-server'],
|
||||
currentStatus: 'degraded',
|
||||
};
|
||||
}}
|
||||
>
|
||||
<upladmin-monitor-form></upladmin-monitor-form>
|
||||
</dees-demowrapper>
|
||||
</div>
|
||||
`;
|
||||
@@ -1,5 +1,3 @@
|
||||
export * from './adminpage-dashboard.js';
|
||||
export * from './adminpage-monitors.js';
|
||||
export * from './adminpage-incidents.js';
|
||||
export * from './adminpage-config.js';
|
||||
// Consolidated app demo - showcases all views through dees-appui
|
||||
export { demoFunc as adminpageApp } from './upladmin-app/upladmin-app.demo.js';
|
||||
export { UpladminApp } from './upladmin-app/upladmin-app.js';
|
||||
|
||||
@@ -11,14 +11,11 @@ import type { DeesAppuiBase } from '@design.estate/dees-catalog';
|
||||
import { adminState } from '../../services/admin-state.js';
|
||||
import { demoFunc } from './upladmin-app.demo.js';
|
||||
|
||||
// Import components directly
|
||||
import '../../elements/upladmin-dashboard/upladmin-dashboard.js';
|
||||
import '../../elements/upladmin-monitor-list/upladmin-monitor-list.js';
|
||||
import '../../elements/upladmin-monitor-form/upladmin-monitor-form.js';
|
||||
import '../../elements/upladmin-incident-list/upladmin-incident-list.js';
|
||||
import '../../elements/upladmin-incident-form/upladmin-incident-form.js';
|
||||
import '../../elements/upladmin-incident-update/upladmin-incident-update.js';
|
||||
import '../../elements/upladmin-statuspage-config/upladmin-statuspage-config.js';
|
||||
// Import view components
|
||||
import '../../views/upladmin-dashboard-view/upladmin-dashboard-view.js';
|
||||
import '../../views/upladmin-monitors-view/upladmin-monitors-view.js';
|
||||
import '../../views/upladmin-incidents-view/upladmin-incidents-view.js';
|
||||
import '../../views/upladmin-config-view/upladmin-config-view.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
@@ -176,14 +173,14 @@ export class UpladminApp extends DeesElement {
|
||||
id: 'dashboard',
|
||||
name: 'Dashboard',
|
||||
iconName: 'lucide:layoutDashboard',
|
||||
content: 'upladmin-dashboard',
|
||||
content: 'upladmin-dashboard-view',
|
||||
route: 'dashboard',
|
||||
},
|
||||
{
|
||||
id: 'monitors',
|
||||
name: 'Monitors',
|
||||
iconName: 'lucide:activity',
|
||||
content: 'upladmin-monitor-list',
|
||||
content: 'upladmin-monitors-view',
|
||||
route: 'monitors',
|
||||
badge: adminState.monitors.length,
|
||||
},
|
||||
@@ -191,7 +188,7 @@ export class UpladminApp extends DeesElement {
|
||||
id: 'monitor-form',
|
||||
name: 'Monitor',
|
||||
iconName: 'lucide:activity',
|
||||
content: 'upladmin-monitor-form',
|
||||
content: 'upladmin-monitors-view',
|
||||
route: 'monitors/:id',
|
||||
cache: false,
|
||||
},
|
||||
@@ -199,7 +196,7 @@ export class UpladminApp extends DeesElement {
|
||||
id: 'incidents',
|
||||
name: 'Incidents',
|
||||
iconName: 'lucide:alertCircle',
|
||||
content: 'upladmin-incident-list',
|
||||
content: 'upladmin-incidents-view',
|
||||
route: 'incidents',
|
||||
badge: adminState.getActiveIncidents().length,
|
||||
badgeVariant: adminState.getActiveIncidents().length > 0 ? 'warning' : 'default',
|
||||
@@ -208,7 +205,7 @@ export class UpladminApp extends DeesElement {
|
||||
id: 'incident-form',
|
||||
name: 'Incident',
|
||||
iconName: 'lucide:alertCircle',
|
||||
content: 'upladmin-incident-form',
|
||||
content: 'upladmin-incidents-view',
|
||||
route: 'incidents/:id',
|
||||
cache: false,
|
||||
},
|
||||
@@ -216,7 +213,7 @@ export class UpladminApp extends DeesElement {
|
||||
id: 'incident-update',
|
||||
name: 'Post Update',
|
||||
iconName: 'lucide:messageSquarePlus',
|
||||
content: 'upladmin-incident-update',
|
||||
content: 'upladmin-incidents-view',
|
||||
route: 'incidents/:id/update',
|
||||
cache: false,
|
||||
},
|
||||
@@ -224,9 +221,17 @@ export class UpladminApp extends DeesElement {
|
||||
id: 'config',
|
||||
name: 'Settings',
|
||||
iconName: 'lucide:settings',
|
||||
content: 'upladmin-statuspage-config',
|
||||
content: 'upladmin-config-view',
|
||||
route: 'config',
|
||||
},
|
||||
{
|
||||
id: 'config-section',
|
||||
name: 'Settings',
|
||||
iconName: 'lucide:settings',
|
||||
content: 'upladmin-config-view',
|
||||
route: 'config/:section',
|
||||
cache: false,
|
||||
},
|
||||
],
|
||||
|
||||
mainMenu: {
|
||||
|
||||
Reference in New Issue
Block a user