initial
This commit is contained in:
83
ts_web/pages/adminpage-config.ts
Normal file
83
ts_web/pages/adminpage-config.ts
Normal file
@@ -0,0 +1,83 @@
|
||||
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>
|
||||
`;
|
||||
156
ts_web/pages/adminpage-dashboard.ts
Normal file
156
ts_web/pages/adminpage-dashboard.ts
Normal file
@@ -0,0 +1,156 @@
|
||||
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>
|
||||
`;
|
||||
166
ts_web/pages/adminpage-incidents.ts
Normal file
166
ts_web/pages/adminpage-incidents.ts
Normal file
@@ -0,0 +1,166 @@
|
||||
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>
|
||||
`;
|
||||
213
ts_web/pages/adminpage-monitors.ts
Normal file
213
ts_web/pages/adminpage-monitors.ts
Normal file
@@ -0,0 +1,213 @@
|
||||
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>
|
||||
`;
|
||||
5
ts_web/pages/index.ts
Normal file
5
ts_web/pages/index.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export * from './adminpage-dashboard.js';
|
||||
export * from './adminpage-monitors.js';
|
||||
export * from './adminpage-incidents.js';
|
||||
export * from './adminpage-config.js';
|
||||
export { demoFunc as adminpageApp } from './upladmin-app/upladmin-app.demo.js';
|
||||
173
ts_web/pages/upladmin-app/upladmin-app.demo.ts
Normal file
173
ts_web/pages/upladmin-app/upladmin-app.demo.ts
Normal file
@@ -0,0 +1,173 @@
|
||||
import { html } from '@design.estate/dees-element';
|
||||
import { adminState } from '../../services/admin-state.js';
|
||||
import type { IServiceStatus, IIncidentDetails, IStatusPageConfig } from '../../interfaces/index.js';
|
||||
import './upladmin-app.js';
|
||||
|
||||
// Initialize demo data
|
||||
const initDemoData = () => {
|
||||
const now = Date.now();
|
||||
|
||||
// Demo monitors
|
||||
const monitors: IServiceStatus[] = [
|
||||
{
|
||||
id: 'api-server',
|
||||
name: 'api-server',
|
||||
displayName: 'API Server',
|
||||
description: 'Main REST API backend',
|
||||
category: 'Core Services',
|
||||
currentStatus: 'operational',
|
||||
lastChecked: now,
|
||||
uptime30d: 99.98,
|
||||
uptime90d: 99.95,
|
||||
responseTime: 45,
|
||||
dependencies: [],
|
||||
},
|
||||
{
|
||||
id: 'web-app',
|
||||
name: 'web-app',
|
||||
displayName: 'Web Application',
|
||||
description: 'Frontend web application',
|
||||
category: 'Core Services',
|
||||
currentStatus: 'operational',
|
||||
lastChecked: now,
|
||||
uptime30d: 99.95,
|
||||
uptime90d: 99.90,
|
||||
responseTime: 120,
|
||||
dependencies: ['api-server'],
|
||||
},
|
||||
{
|
||||
id: 'database',
|
||||
name: 'database',
|
||||
displayName: 'Database',
|
||||
description: 'Primary PostgreSQL database',
|
||||
category: 'Infrastructure',
|
||||
currentStatus: 'operational',
|
||||
lastChecked: now,
|
||||
uptime30d: 99.99,
|
||||
uptime90d: 99.98,
|
||||
responseTime: 5,
|
||||
dependencies: [],
|
||||
},
|
||||
{
|
||||
id: 'cdn',
|
||||
name: 'cdn',
|
||||
displayName: 'CDN',
|
||||
description: 'Content delivery network',
|
||||
category: 'Infrastructure',
|
||||
currentStatus: 'degraded',
|
||||
lastChecked: now,
|
||||
uptime30d: 99.85,
|
||||
uptime90d: 99.80,
|
||||
responseTime: 25,
|
||||
dependencies: [],
|
||||
},
|
||||
{
|
||||
id: 'email-service',
|
||||
name: 'email-service',
|
||||
displayName: 'Email Service',
|
||||
description: 'Transactional email delivery',
|
||||
category: 'External Services',
|
||||
currentStatus: 'operational',
|
||||
lastChecked: now,
|
||||
uptime30d: 99.90,
|
||||
uptime90d: 99.85,
|
||||
responseTime: 200,
|
||||
dependencies: [],
|
||||
},
|
||||
];
|
||||
|
||||
// Demo incidents
|
||||
const incidents: IIncidentDetails[] = [
|
||||
{
|
||||
id: 'incident-1',
|
||||
title: 'CDN Performance Degradation',
|
||||
impact: 'We are experiencing slower than normal response times from our CDN provider.',
|
||||
severity: 'minor',
|
||||
status: 'monitoring',
|
||||
affectedServices: ['cdn'],
|
||||
startTime: now - 2 * 60 * 60 * 1000, // 2 hours ago
|
||||
updates: [
|
||||
{
|
||||
id: 'update-1-1',
|
||||
status: 'investigating',
|
||||
message: 'We are investigating reports of slow load times.',
|
||||
timestamp: now - 2 * 60 * 60 * 1000,
|
||||
},
|
||||
{
|
||||
id: 'update-1-2',
|
||||
status: 'identified',
|
||||
message: 'The issue has been identified as a CDN edge node problem.',
|
||||
timestamp: now - 1 * 60 * 60 * 1000,
|
||||
},
|
||||
{
|
||||
id: 'update-1-3',
|
||||
status: 'monitoring',
|
||||
message: 'A fix has been deployed. We are monitoring the situation.',
|
||||
timestamp: now - 30 * 60 * 1000,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'incident-2',
|
||||
title: 'Scheduled Database Maintenance',
|
||||
impact: 'Routine database maintenance window.',
|
||||
severity: 'maintenance',
|
||||
status: 'resolved',
|
||||
affectedServices: ['database'],
|
||||
startTime: now - 24 * 60 * 60 * 1000,
|
||||
endTime: now - 23 * 60 * 60 * 1000,
|
||||
updates: [
|
||||
{
|
||||
id: 'update-2-1',
|
||||
status: 'investigating',
|
||||
message: 'Maintenance has begun.',
|
||||
timestamp: now - 24 * 60 * 60 * 1000,
|
||||
},
|
||||
{
|
||||
id: 'update-2-2',
|
||||
status: 'resolved',
|
||||
message: 'Maintenance completed successfully.',
|
||||
timestamp: now - 23 * 60 * 60 * 1000,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// Demo config
|
||||
const config: IStatusPageConfig = {
|
||||
theme: 'dark',
|
||||
companyName: 'uptime.link',
|
||||
companyLogo: '',
|
||||
supportEmail: 'support@uptime.link',
|
||||
showHistoricalDays: 90,
|
||||
timeZone: 'UTC',
|
||||
};
|
||||
|
||||
// Set demo data in state
|
||||
adminState.monitors = monitors;
|
||||
adminState.incidents = incidents;
|
||||
adminState.config = config;
|
||||
};
|
||||
|
||||
export const demoFunc = () => {
|
||||
// Initialize demo data
|
||||
initDemoData();
|
||||
|
||||
return html`
|
||||
<dees-demowrapper>
|
||||
<style>
|
||||
.demo-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<div class="demo-container">
|
||||
<upladmin-app></upladmin-app>
|
||||
</div>
|
||||
</dees-demowrapper>
|
||||
`;
|
||||
};
|
||||
283
ts_web/pages/upladmin-app/upladmin-app.ts
Normal file
283
ts_web/pages/upladmin-app/upladmin-app.ts
Normal file
@@ -0,0 +1,283 @@
|
||||
import {
|
||||
DeesElement,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
state,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
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';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'upladmin-app': UpladminApp;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('upladmin-app')
|
||||
export class UpladminApp extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
|
||||
@state()
|
||||
accessor appuiBase: DeesAppuiBase | null = null;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
async firstUpdated() {
|
||||
await this.updateComplete;
|
||||
this.appuiBase = this.shadowRoot!.querySelector('dees-appui-base') as DeesAppuiBase;
|
||||
|
||||
if (this.appuiBase) {
|
||||
await this.appuiBase.updateComplete;
|
||||
this.configureApp();
|
||||
}
|
||||
}
|
||||
|
||||
private configureApp() {
|
||||
if (!this.appuiBase) return;
|
||||
|
||||
const appConfig = {
|
||||
branding: {
|
||||
logoIcon: 'lucide:activity',
|
||||
logoText: 'uptime.link',
|
||||
},
|
||||
|
||||
appBar: {
|
||||
menuItems: [
|
||||
{
|
||||
name: 'File',
|
||||
action: async () => {},
|
||||
submenu: [
|
||||
{
|
||||
name: 'New Monitor',
|
||||
shortcut: 'Cmd+N',
|
||||
iconName: 'plus',
|
||||
action: async () => (window.location.hash = 'monitors/create'),
|
||||
},
|
||||
{
|
||||
name: 'New Incident',
|
||||
shortcut: 'Cmd+I',
|
||||
iconName: 'alertTriangle',
|
||||
action: async () => (window.location.hash = 'incidents/create'),
|
||||
},
|
||||
{ divider: true },
|
||||
{
|
||||
name: 'Reload Data',
|
||||
shortcut: 'Cmd+R',
|
||||
iconName: 'refreshCw',
|
||||
action: async () => this.reloadData(),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'View',
|
||||
action: async () => {},
|
||||
submenu: [
|
||||
{
|
||||
name: 'Dashboard',
|
||||
iconName: 'layoutDashboard',
|
||||
action: async () => (window.location.hash = 'dashboard'),
|
||||
},
|
||||
{
|
||||
name: 'Monitors',
|
||||
iconName: 'activity',
|
||||
action: async () => (window.location.hash = 'monitors'),
|
||||
},
|
||||
{
|
||||
name: 'Incidents',
|
||||
iconName: 'alertCircle',
|
||||
action: async () => (window.location.hash = 'incidents'),
|
||||
},
|
||||
{ divider: true },
|
||||
{
|
||||
name: 'Settings',
|
||||
iconName: 'settings',
|
||||
action: async () => (window.location.hash = 'config'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Help',
|
||||
action: async () => {},
|
||||
submenu: [
|
||||
{
|
||||
name: 'Documentation',
|
||||
iconName: 'book',
|
||||
action: async () => window.open('https://uptime.link/docs', '_blank'),
|
||||
},
|
||||
{
|
||||
name: 'API Reference',
|
||||
iconName: 'code',
|
||||
action: async () => window.open('https://uptime.link/api', '_blank'),
|
||||
},
|
||||
{ divider: true },
|
||||
{
|
||||
name: 'About uptime.link',
|
||||
iconName: 'info',
|
||||
action: async () => console.log('About'),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
breadcrumbs: 'Dashboard',
|
||||
showWindowControls: false,
|
||||
showSearch: true,
|
||||
user: {
|
||||
name: 'Admin User',
|
||||
email: 'admin@uptime.link',
|
||||
status: 'online',
|
||||
},
|
||||
profileMenuItems: [
|
||||
{
|
||||
name: 'Profile',
|
||||
iconName: 'user',
|
||||
action: async () => console.log('Profile'),
|
||||
},
|
||||
{
|
||||
name: 'Account Settings',
|
||||
iconName: 'settings',
|
||||
action: async () => (window.location.hash = 'config'),
|
||||
},
|
||||
{ divider: true },
|
||||
{
|
||||
name: 'Sign Out',
|
||||
iconName: 'logOut',
|
||||
action: async () => console.log('Sign out'),
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
views: [
|
||||
{
|
||||
id: 'dashboard',
|
||||
name: 'Dashboard',
|
||||
iconName: 'lucide:layoutDashboard',
|
||||
content: 'upladmin-dashboard',
|
||||
route: 'dashboard',
|
||||
},
|
||||
{
|
||||
id: 'monitors',
|
||||
name: 'Monitors',
|
||||
iconName: 'lucide:activity',
|
||||
content: 'upladmin-monitor-list',
|
||||
route: 'monitors',
|
||||
badge: adminState.monitors.length,
|
||||
},
|
||||
{
|
||||
id: 'monitor-form',
|
||||
name: 'Monitor',
|
||||
iconName: 'lucide:activity',
|
||||
content: 'upladmin-monitor-form',
|
||||
route: 'monitors/:id',
|
||||
cache: false,
|
||||
},
|
||||
{
|
||||
id: 'incidents',
|
||||
name: 'Incidents',
|
||||
iconName: 'lucide:alertCircle',
|
||||
content: 'upladmin-incident-list',
|
||||
route: 'incidents',
|
||||
badge: adminState.getActiveIncidents().length,
|
||||
badgeVariant: adminState.getActiveIncidents().length > 0 ? 'warning' : 'default',
|
||||
},
|
||||
{
|
||||
id: 'incident-form',
|
||||
name: 'Incident',
|
||||
iconName: 'lucide:alertCircle',
|
||||
content: 'upladmin-incident-form',
|
||||
route: 'incidents/:id',
|
||||
cache: false,
|
||||
},
|
||||
{
|
||||
id: 'incident-update',
|
||||
name: 'Post Update',
|
||||
iconName: 'lucide:messageSquarePlus',
|
||||
content: 'upladmin-incident-update',
|
||||
route: 'incidents/:id/update',
|
||||
cache: false,
|
||||
},
|
||||
{
|
||||
id: 'config',
|
||||
name: 'Settings',
|
||||
iconName: 'lucide:settings',
|
||||
content: 'upladmin-statuspage-config',
|
||||
route: 'config',
|
||||
},
|
||||
],
|
||||
|
||||
mainMenu: {
|
||||
sections: [
|
||||
{ name: 'Overview', views: ['dashboard'] },
|
||||
{ name: 'Management', views: ['monitors', 'incidents'] },
|
||||
],
|
||||
bottomItems: ['config'],
|
||||
},
|
||||
|
||||
defaultView: 'dashboard',
|
||||
|
||||
onViewChange: (viewId, view) => {
|
||||
console.log(`View changed to: ${viewId} (${view.name})`);
|
||||
},
|
||||
|
||||
onSearch: (query) => {
|
||||
console.log('Search query:', query);
|
||||
// Implement search functionality
|
||||
},
|
||||
};
|
||||
|
||||
this.appuiBase.configure(appConfig as any);
|
||||
|
||||
// Update badges when state changes
|
||||
this.setupStateSubscriptions();
|
||||
}
|
||||
|
||||
private setupStateSubscriptions() {
|
||||
if (!this.appuiBase) return;
|
||||
|
||||
const appui = this.appuiBase;
|
||||
|
||||
adminState.monitors$.subscribe((monitors) => {
|
||||
appui.setMainMenuBadge('monitors', monitors.length);
|
||||
});
|
||||
|
||||
adminState.incidents$.subscribe((incidents) => {
|
||||
const activeCount = incidents.filter(
|
||||
(i) => !['resolved', 'postmortem'].includes(i.status)
|
||||
).length;
|
||||
appui.setMainMenuBadge('incidents', activeCount);
|
||||
});
|
||||
}
|
||||
|
||||
private async reloadData() {
|
||||
console.log('Reloading data...');
|
||||
// Implement data reload
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`<dees-appui-base></dees-appui-base>`;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user