@uptime.link/statuspage 1.0.74 → 1.1.0

package/ts_web/elements/upl-statuspage-statusmonth.ts

@@ -5,11 +5,15 @@ import {
   customElement,
   type TemplateResult,
   css,
-  cssManager
+  cssManager,
+  unsafeCSS
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
+import type { IMonthlyUptime } from '../interfaces/index.js';
+import * as sharedStyles from '../styles/shared.styles.js';
 
 import './internal/uplinternal-miniheading.js';
+import { demoFunc } from './upl-statuspage-statusmonth.demo.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -19,7 +23,25 @@ declare global {
 
 @customElement('upl-statuspage-statusmonth')
 export class UplStatuspageStatusmonth extends DeesElement {
-  public static demo = () => html` <upl-statuspage-statusmonth></upl-statuspage-statusmonth> `;
+  public static demo = demoFunc;
+
+  @property({ type: Array })
+  accessor monthlyData: IMonthlyUptime[] = [];
+
+  @property({ type: String })
+  accessor serviceId: string = '';
+
+  @property({ type: String })
+  accessor serviceName: string = 'Service';
+
+  @property({ type: Boolean })
+  accessor loading: boolean = false;
+
+  @property({ type: Boolean })
+  accessor showTooltip: boolean = true;
+
+  @property({ type: Number })
+  accessor monthsToShow: number = 5;
 
   constructor() {
     super();
@@ -27,104 +49,403 @@ export class UplStatuspageStatusmonth extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
+    sharedStyles.commonStyles,
     css`
       :host {
           position: relative;
-          padding: 0px 0px 15px 0px;
           display: block;
-          background:  ${cssManager.bdTheme('#eeeeeb', '#222222')};;
-          font-family: Inter;
-          color: #fff;
+          background: transparent;
+          font-family: ${unsafeCSS(sharedStyles.fonts.base)};
+          color: ${sharedStyles.colors.text.primary};
+        }
+
+        .container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 0 ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.lg)};
         }
 
         .mainbox {
-          margin: auto;
-          max-width: 900px;
           display: grid;
-          grid-template-columns: repeat(5, calc(100% / 5 - 80px / 5));
-          grid-column-gap: 20px;
+          grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+          gap: ${unsafeCSS(sharedStyles.spacing.lg)};
         }
 
         .statusMonth {
-          background:  ${cssManager.bdTheme('#ffffff', '#333333')};;
-          min-height: 20px;
+          background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
+          padding: ${unsafeCSS(sharedStyles.spacing.lg)};
+          border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
+          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+          position: relative;
+          transition: all 0.2s ease;
+          display: flex;
+          flex-direction: column;
+          min-height: 280px;
+          box-shadow: ${cssManager.bdTheme('0 1px 2px 0 rgba(0, 0, 0, 0.05)', 'none')};
+        }
+
+        .statusMonth:hover {
+          border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+          box-shadow: ${cssManager.bdTheme('0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', '0 0 0 1px rgba(255, 255, 255, 0.1)')};
+        }
+
+        .month-header {
+          font-size: 13px;
+          font-weight: 600;
+          margin-bottom: ${unsafeCSS(sharedStyles.spacing.md)};
+          color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+          letter-spacing: 0.02em;
+          text-transform: uppercase;
+        }
+
+        .days-container {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          margin-bottom: ${unsafeCSS(sharedStyles.spacing.lg)};
+        }
+
+        .days-grid {
+          display: grid;
+          grid-template-columns: repeat(7, 1fr);
+          gap: 3px;
+          width: 100%;
+        }
+
+        .weekday-label {
+          font-size: 10px;
+          text-align: center;
+          color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
+          font-weight: 500;
+          height: 20px;
+          line-height: 20px;
+          margin-bottom: ${unsafeCSS(sharedStyles.spacing.sm)};
+          text-transform: uppercase;
+        }
+
+        .statusDay {
+          aspect-ratio: 1;
+          border-radius: 4px;
+          cursor: pointer;
+          transition: all 0.15s ease;
+          position: relative;
+        }
+
+        .statusDay:hover:not(.empty) {
+          transform: scale(1.15);
+          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+          z-index: 1;
+        }
+
+        .statusDay.operational {
+          background: #22c55e;
+        }
+
+        .statusDay.degraded {
+          background: #fbbf24;
+        }
+
+        .statusDay.partial_outage {
+          background: #f87171;
+        }
+
+        .statusDay.major_outage {
+          background: #ef4444;
+        }
+        
+        .statusDay.maintenance {
+          background: #60a5fa;
+        }
+
+        .statusDay.no-data {
+          background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+          opacity: 0.6;
+        }
+
+        .statusDay.empty {
+          background: transparent;
+          cursor: default;
+          pointer-events: none;
+        }
+
+        .overall-uptime {
+          font-size: 12px;
+          margin-top: auto;
+          padding-top: ${unsafeCSS(sharedStyles.spacing.md)};
+          color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
+          display: flex;
+          flex-direction: column;
+          gap: 6px;
+          border-top: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')};
+        }
+
+        .uptime-stat {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        
+        .uptime-value {
+          font-weight: 600;
+          color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+          font-variant-numeric: tabular-nums;
+          font-size: 13px;
+        }
+
+        .loading-skeleton {
+          display: flex;
+          flex-direction: column;
+          gap: ${unsafeCSS(sharedStyles.spacing.sm)};
+          height: 100%;
+        }
+        
+        .skeleton-header {
+          height: 20px;
+          width: 80px;
+          background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
+          border-radius: 4px;
+          animation: pulse 2s infinite;
+        }
+        
+        .skeleton-grid {
+          flex: 1;
           display: grid;
-          padding: 10px;
-          grid-template-columns: repeat(6, auto);
-          grid-gap: 9px;
-          border-radius: 3px;
+          grid-template-columns: repeat(7, 1fr);
+          gap: 2px;
+        }
+        
+        .skeleton-day {
+          background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
+          border-radius: 2px;
+          animation: pulse 2s infinite;
+          animation-delay: calc(var(--index) * 0.05s);
+        }
+        
+        @keyframes pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.5; }
+        }
+
+        @keyframes loading {
+          0% { transform: translateX(-100%); }
+          100% { transform: translateX(200%); }
+        }
+
+        .tooltip {
+          position: absolute;
+          background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+          color: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+          padding: 8px 12px;
+          border-radius: 4px;
+          font-size: 12px;
+          pointer-events: none;
+          opacity: 0;
+          transition: opacity 0.15s;
+          z-index: 50;
+          white-space: nowrap;
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+          line-height: 1.5;
+        }
+
+        .tooltip.visible {
+          opacity: 1;
+        }
+        
+        .tooltip-date {
+          font-weight: 500;
+          margin-bottom: 4px;
+        }
+        
+        .tooltip-stat {
+          font-size: 11px;
+          opacity: 0.9;
         }
 
-        .statusMonth .statusDay {
-          width: 16px;
-          height: 16px;
-          background: #2deb51;
-          border-radius: 3px;
+        .no-data-message {
+          grid-column: 1 / -1;
+          text-align: center;
+          padding: ${unsafeCSS(sharedStyles.spacing['2xl'])};
+          color: ${sharedStyles.colors.text.secondary};
+        }
+
+        @media (max-width: 640px) {
+          .container {
+            padding: 0 ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)};
+          }
+
+          .mainbox {
+            grid-template-columns: 1fr;
+            gap: ${unsafeCSS(sharedStyles.spacing.md)};
+          }
+
+          .statusMonth {
+            padding: ${unsafeCSS(sharedStyles.spacing.md)};
+            min-height: 260px;
+          }
+
+          .loading-skeleton {
+            height: 180px;
+            padding: ${unsafeCSS(sharedStyles.spacing.md)};
+          }
         }
     `
   ]
 
   public render(): TemplateResult {
+    const totalDays = this.monthlyData.reduce((sum, month) => sum + month.days.length, 0);
+    
     return html`
-      <style></style>
-      <uplinternal-miniheading>Last 150 days</uplinternal-miniheading>
-      <div class="mainbox">
-        <div class="statusMonth">
-          ${(() => {
-            let counter = 0;
-            const returnArray: TemplateResult[] = [];
-            while (counter < 30) {
-              counter++;
-              returnArray.push(html` <div class="statusDay"></div> `);
-            }
-            return returnArray;
-          })()}
-        </div>
-        <div class="statusMonth">
-          ${(() => {
-            let counter = 0;
-            const returnArray: TemplateResult[] = [];
-            while (counter < 30) {
-              counter++;
-              returnArray.push(html` <div class="statusDay"></div> `);
-            }
-            return returnArray;
-          })()}
+      <div class="container">
+        <uplinternal-miniheading>${this.serviceName} - Last ${totalDays} Days</uplinternal-miniheading>
+        <div class="mainbox">
+          ${this.loading ? html`
+            ${Array(this.monthsToShow).fill(0).map((_, index) => html`
+              <div class="statusMonth">
+                <div class="loading-skeleton">
+                  <div class="skeleton-header"></div>
+                  <div class="days-container">
+                    <div class="skeleton-grid">
+                      ${Array(42).fill(0).map((_, i) => html`
+                        <div class="skeleton-day" style="--index: ${i}"></div>
+                      `)}
+                    </div>
+                  </div>
+                  <div style="height: 48px; border-top: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')}; margin-top: auto; padding-top: 16px;"></div>
+                </div>
+              </div>
+            `)}
+          ` : this.monthlyData.length === 0 ? html`
+            <div class="no-data-message">No uptime data available</div>
+          ` : this.monthlyData.map(month => this.renderMonth(month))}
         </div>
-        <div class="statusMonth">
-          ${(() => {
-            let counter = 0;
-            const returnArray: TemplateResult[] = [];
-            while (counter < 30) {
-              counter++;
-              returnArray.push(html` <div class="statusDay"></div> `);
-            }
-            return returnArray;
-          })()}
-        </div>
-        <div class="statusMonth">
-          ${(() => {
-            let counter = 0;
-            const returnArray: TemplateResult[] = [];
-            while (counter < 30) {
-              counter++;
-              returnArray.push(html` <div class="statusDay"></div> `);
-            }
-            return returnArray;
-          })()}
+        ${this.showTooltip ? html`<div class="tooltip" id="tooltip"></div>` : ''}
+      </div>
+    `;
+  }
+
+  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`
+      <div class="statusMonth" @mouseleave=${this.hideTooltip}>
+        <div class="month-header">${monthName}</div>
+        <div class="days-container">
+          <div class="days-grid">
+            ${this.renderWeekdayLabels()}
+            ${this.renderEmptyDays(firstDayOfWeek)}
+            ${monthData.days.map(day => this.renderDay(day))}
+            ${this.renderTrailingEmptyDays(firstDayOfWeek + monthData.days.length)}
+          </div>
         </div>
-        <div class="statusMonth">
-          ${(() => {
-            let counter = 0;
-            const returnArray: TemplateResult[] = [];
-            while (counter < 30) {
-              counter++;
-              returnArray.push(html` <div class="statusDay"></div> `);
-            }
-            return returnArray;
-          })()}
+        <div class="overall-uptime">
+          <div class="uptime-stat">
+            <span>Uptime</span>
+            <span class="uptime-value">${monthData.overallUptime.toFixed(2)}%</span>
+          </div>
+          ${monthData.totalIncidents > 0 ? html`
+            <div class="uptime-stat">
+              <span>Incidents</span>
+              <span class="uptime-value">${monthData.totalIncidents}</span>
+            </div>
+          ` : ''}
         </div>
       </div>
     `;
   }
+
+  private renderWeekdayLabels(): TemplateResult[] {
+    const weekdays = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+    return weekdays.map(day => html`<div class="weekday-label">${day}</div>`);
+  }
+
+  private renderEmptyDays(count: number): TemplateResult[] {
+    return Array(count).fill(0).map(() => html`<div class="statusDay empty"></div>`);
+  }
+  
+  private renderTrailingEmptyDays(totalCells: number): TemplateResult[] {
+    const remainder = totalCells % 7;
+    const trailingCount = remainder === 0 ? 0 : 7 - remainder;
+    return Array(trailingCount).fill(0).map(() => html`<div class="statusDay empty"></div>`);
+  }
+
+  private renderDay(day: any): TemplateResult {
+    const status = day.status || 'no-data';
+    const date = new Date(day.date);
+    const dayNumber = date.getDate();
+    
+    return html`
+      <div 
+        class="statusDay ${status}"
+        @mouseenter=${(e: MouseEvent) => this.showTooltip && this.showDayTooltip(e, day)}
+        @click=${() => this.handleDayClick(day)}
+      >
+        ${status === 'major_outage' || status === 'partial_outage' ? html`
+          <div style="
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 8px;
+            font-weight: bold;
+            color: white;
+          ">${day.incidents}</div>
+        ` : ''}
+      </div>
+    `;
+  }
+
+  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 = `
+      <div class="tooltip-date">${dateStr}</div>
+      <div class="tooltip-stat">Status: ${statusText}</div>
+      <div class="tooltip-stat">Uptime: ${day.uptime.toFixed(2)}%</div>
+      ${day.incidents > 0 ? `<div class="tooltip-stat">Incidents: ${day.incidents}</div>` : ''}
+      ${day.totalDowntime > 0 ? `<div class="tooltip-stat">Downtime: ${day.totalDowntime} min</div>` : ''}
+    `;
+    
+    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
+    }));
+  }
 }

package/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

package/ts_web/pages/index.ts

@@ -1 +1,4 @@
-export * from './page1.js';
+export * from './statuspage-demo.js';
+export * from './statuspage-allgreen.js';
+export * from './statuspage-outage.js';
+export * from './statuspage-maintenance.js';