+ ${this.loading ? html`
+ ${Array(this.monthsToShow).fill(0).map(() => html`
+
+ `)}
+ ` : this.monthlyData.length === 0 ? html`
+
No uptime data available
+ ` : this.monthlyData.map(month => this.renderMonth(month))}
+ `;
+ }
+
+ private renderMonth(monthData: IMonthlyUptime): TemplateResult {
+ const monthDate = new Date(monthData.month + '-01');
+ const monthName = monthDate.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ const firstDayOfWeek = new Date(monthDate.getFullYear(), monthDate.getMonth(), 1).getDay();
+
+ return html`
+
+
+
+ ${this.renderWeekdayLabels()}
+ ${this.renderEmptyDays(firstDayOfWeek)}
+ ${monthData.days.map(day => this.renderDay(day))}
-
- ${(() => {
- let counter = 0;
- const returnArray: TemplateResult[] = [];
- while (counter < 30) {
- counter++;
- returnArray.push(html`
`);
- }
- return returnArray;
- })()}
-
-
- ${(() => {
- let counter = 0;
- const returnArray: TemplateResult[] = [];
- while (counter < 30) {
- counter++;
- returnArray.push(html`
`);
- }
- return returnArray;
- })()}
-
-
- ${(() => {
- let counter = 0;
- const returnArray: TemplateResult[] = [];
- while (counter < 30) {
- counter++;
- returnArray.push(html`
`);
- }
- return returnArray;
- })()}
+
+ ${monthData.overallUptime.toFixed(2)}% uptime
+ ${monthData.totalIncidents > 0 ? html`
${monthData.totalIncidents} incidents` : ''}
`;
}
+
+ private renderWeekdayLabels(): TemplateResult[] {
+ const weekdays = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+ return weekdays.map(day => html`
${day}
`);
+ }
+
+ private renderEmptyDays(count: number): TemplateResult[] {
+ return Array(count).fill(0).map(() => html`
`);
+ }
+
+ private renderDay(day: any): TemplateResult {
+ const status = day.status || 'no-data';
+ const date = new Date(day.date);
+ const dayNumber = date.getDate();
+
+ return html`
+
this.showTooltip && this.showDayTooltip(e, day)}
+ @click=${() => this.handleDayClick(day)}
+ >
+ ${status === 'major_outage' || status === 'partial_outage' ? html`
+
${day.incidents}
+ ` : ''}
+
+ `;
+ }
+
+ private showDayTooltip(event: MouseEvent, day: any) {
+ const tooltip = this.shadowRoot?.getElementById('tooltip') as HTMLElement;
+ if (!tooltip) return;
+
+ const date = new Date(day.date);
+ const dateStr = date.toLocaleDateString('en-US', {
+ weekday: 'long',
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric'
+ });
+
+ let statusText = day.status.replace(/_/g, ' ');
+ statusText = statusText.charAt(0).toUpperCase() + statusText.slice(1);
+
+ tooltip.innerHTML = `
+
${dateStr}
+
Status: ${statusText}
+
Uptime: ${day.uptime.toFixed(2)}%
+ ${day.incidents > 0 ? `
Incidents: ${day.incidents}
` : ''}
+ ${day.totalDowntime > 0 ? `
Downtime: ${day.totalDowntime} minutes
` : ''}
+ `;
+
+ const rect = (event.target as HTMLElement).getBoundingClientRect();
+ const containerRect = this.getBoundingClientRect();
+
+ tooltip.style.left = `${rect.left - containerRect.left + rect.width / 2}px`;
+ tooltip.style.top = `${rect.top - containerRect.top - 80}px`;
+ tooltip.style.transform = 'translateX(-50%)';
+ tooltip.classList.add('visible');
+ }
+
+ private hideTooltip() {
+ const tooltip = this.shadowRoot?.getElementById('tooltip') as HTMLElement;
+ if (tooltip) {
+ tooltip.classList.remove('visible');
+ }
+ }
+
+ private handleDayClick(day: any) {
+ this.dispatchEvent(new CustomEvent('dayClick', {
+ detail: {
+ date: day.date,
+ uptime: day.uptime,
+ incidents: day.incidents,
+ status: day.status,
+ serviceId: this.serviceId
+ },
+ bubbles: true,
+ composed: true
+ }));
+ }
}
diff --git a/ts_web/interfaces/index.ts b/ts_web/interfaces/index.ts
new file mode 100644
index 0000000..e1c2bb4
--- /dev/null
+++ b/ts_web/interfaces/index.ts
@@ -0,0 +1,95 @@
+export interface IServiceStatus {
+ id: string;
+ name: string;
+ displayName: string;
+ description?: string;
+ currentStatus: 'operational' | 'degraded' | 'partial_outage' | 'major_outage' | 'maintenance';
+ lastChecked: number; // timestamp
+ uptime30d: number; // percentage
+ uptime90d: number; // percentage
+ responseTime: number; // milliseconds
+ category?: string;
+ dependencies?: string[];
+ selected?: boolean;
+}
+
+export interface IStatusHistoryPoint {
+ timestamp: number;
+ status: 'operational' | 'degraded' | 'partial_outage' | 'major_outage' | 'maintenance';
+ responseTime?: number;
+ errorRate?: number;
+}
+
+export interface IIncidentUpdate {
+ id: string;
+ timestamp: number;
+ status: 'investigating' | 'identified' | 'monitoring' | 'resolved' | 'postmortem';
+ message: string;
+ author?: string;
+}
+
+export interface IIncidentDetails {
+ id: string;
+ title: string;
+ status: 'investigating' | 'identified' | 'monitoring' | 'resolved' | 'postmortem';
+ severity: 'critical' | 'major' | 'minor' | 'maintenance';
+ affectedServices: string[];
+ startTime: number;
+ endTime?: number;
+ updates: IIncidentUpdate[];
+ impact: string;
+ rootCause?: string;
+ resolution?: string;
+}
+
+export interface IUptimeDay {
+ date: string; // YYYY-MM-DD
+ uptime: number; // percentage
+ incidents: number;
+ totalDowntime: number; // minutes
+ status: 'operational' | 'degraded' | 'partial_outage' | 'major_outage';
+}
+
+export interface IMonthlyUptime {
+ month: string; // YYYY-MM
+ days: IUptimeDay[];
+ overallUptime: number; // percentage
+ totalIncidents: number;
+}
+
+export interface IOverallStatus {
+ status: 'operational' | 'degraded' | 'partial_outage' | 'major_outage' | 'maintenance';
+ message: string;
+ lastUpdated: number;
+ affectedServices: number;
+ totalServices: number;
+}
+
+export interface IStatusPageConfig {
+ apiEndpoint?: string;
+ refreshInterval?: number; // milliseconds
+ timeZone?: string;
+ dateFormat?: string;
+ enableWebSocket?: boolean;
+ enableNotifications?: boolean;
+ theme?: 'light' | 'dark' | 'auto';
+ language?: string;
+ showHistoricalDays?: number;
+ whitelabel?: boolean;
+ companyName?: string;
+ companyLogo?: string;
+ supportEmail?: string;
+ statusPageUrl?: string;
+ legalUrl?: string;
+}
+
+export interface ISubscription {
+ email?: string;
+ phone?: string;
+ webhook?: string;
+ services: string[];
+ severityFilter: ('critical' | 'major' | 'minor' | 'maintenance')[];
+}
+
+// Re-export the incident interface from @uptime.link/interfaces if needed
+// Note: The IIncident interface is imported in the incidents component directly from plugins
\ No newline at end of file
diff --git a/ts_web/styles/shared.styles.ts b/ts_web/styles/shared.styles.ts
new file mode 100644
index 0000000..c6db558
--- /dev/null
+++ b/ts_web/styles/shared.styles.ts
@@ -0,0 +1,181 @@
+import { css, cssManager, unsafeCSS } from '@design.estate/dees-element';
+
+export const fonts = {
+ base: `'Geist Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif`,
+ mono: `'Geist Mono', ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace`
+};
+
+export const colors = {
+ // Background colors
+ background: {
+ primary: cssManager.bdTheme('#ffffff', '#0a0a0a'),
+ secondary: cssManager.bdTheme('#f9fafb', '#18181b'),
+ muted: cssManager.bdTheme('#f3f4f6', '#27272a'),
+ card: cssManager.bdTheme('#ffffff', '#18181b')
+ },
+
+ // Border colors
+ border: {
+ default: cssManager.bdTheme('#e5e7eb', '#27272a'),
+ muted: cssManager.bdTheme('#f3f4f6', '#3f3f46')
+ },
+
+ // Text colors
+ text: {
+ primary: cssManager.bdTheme('#0a0a0a', '#fafafa'),
+ secondary: cssManager.bdTheme('#6b7280', '#a1a1aa'),
+ muted: cssManager.bdTheme('#9ca3af', '#71717a')
+ },
+
+ // Status colors
+ status: {
+ operational: cssManager.bdTheme('#10b981', '#064e3b'),
+ degraded: cssManager.bdTheme('#f59e0b', '#78350f'),
+ partial: cssManager.bdTheme('#ef4444', '#7f1d1d'),
+ major: cssManager.bdTheme('#dc2626', '#450a0a'),
+ maintenance: cssManager.bdTheme('#3b82f6', '#1e3a8a')
+ }
+};
+
+export const shadows = {
+ sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+ base: '0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)',
+ md: '0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06)',
+ lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+ xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)'
+};
+
+export const borderRadius = {
+ sm: '4px',
+ base: '6px',
+ md: '8px',
+ lg: '12px',
+ xl: '16px',
+ full: '9999px'
+};
+
+export const spacing = {
+ xs: '4px',
+ sm: '8px',
+ md: '16px',
+ lg: '24px',
+ xl: '32px',
+ '2xl': '48px',
+ '3xl': '64px'
+};
+
+export const commonStyles = css`
+ /* Button styles */
+ .button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ font-family: ${unsafeCSS(fonts.base)};
+ font-size: 14px;
+ font-weight: 500;
+ height: 36px;
+ padding: 0 16px;
+ border-radius: ${unsafeCSS(borderRadius.base)};
+ border: 1px solid ${colors.border.default};
+ background: transparent;
+ color: ${colors.text.primary};
+ cursor: pointer;
+ user-select: none;
+ transition: all 0.2s ease;
+ gap: 8px;
+ }
+
+ .button:hover {
+ background: ${cssManager.bdTheme('#f9fafb', '#262626')};
+ border-color: ${cssManager.bdTheme('#d1d5db', '#404040')};
+ transform: translateY(-1px);
+ }
+
+ .button:active {
+ transform: translateY(0);
+ }
+
+ .button.primary {
+ background: ${colors.text.primary};
+ color: ${colors.background.primary};
+ border-color: ${colors.text.primary};
+ }
+
+ .button.primary:hover {
+ background: ${cssManager.bdTheme('#262626', '#f4f4f5')};
+ border-color: ${cssManager.bdTheme('#262626', '#f4f4f5')};
+ }
+
+ /* Card styles */
+ .card {
+ background: ${colors.background.card};
+ border: 1px solid ${colors.border.default};
+ border-radius: ${unsafeCSS(borderRadius.md)};
+ padding: ${unsafeCSS(spacing.lg)};
+ box-shadow: ${unsafeCSS(shadows.sm)};
+ }
+
+ /* Loading skeleton */
+ .skeleton {
+ background: ${cssManager.bdTheme(
+ 'linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%)',
+ 'linear-gradient(90deg, #1f1f1f 25%, #262626 50%, #1f1f1f 75%)'
+ )};
+ background-size: 200% 100%;
+ animation: skeleton-loading 1.5s infinite;
+ border-radius: ${unsafeCSS(borderRadius.base)};
+ }
+
+ @keyframes skeleton-loading {
+ 0% { background-position: 200% 0; }
+ 100% { background-position: -200% 0; }
+ }
+
+ /* Container styles */
+ .container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 ${unsafeCSS(spacing.lg)};
+ }
+
+ /* Responsive utilities */
+ @media (max-width: 640px) {
+ .container {
+ padding: 0 ${unsafeCSS(spacing.md)};
+ }
+ }
+`;
+
+export const getStatusColor = (status: string) => {
+ switch (status) {
+ case 'operational':
+ return colors.status.operational;
+ case 'degraded':
+ return colors.status.degraded;
+ case 'partial_outage':
+ return colors.status.partial;
+ case 'major_outage':
+ return colors.status.major;
+ case 'maintenance':
+ return colors.status.maintenance;
+ default:
+ return colors.text.secondary;
+ }
+};
+
+export const getStatusIcon = (status: string) => {
+ switch (status) {
+ case 'operational':
+ return '✓';
+ case 'degraded':
+ return '!';
+ case 'partial_outage':
+ return '⚠';
+ case 'major_outage':
+ return '✕';
+ case 'maintenance':
+ return '🔧';
+ default:
+ return '?';
+ }
+};
\ No newline at end of file