@uptime.link/statuspage 1.0.74 → 1.1.0

package/ts_web/elements/upl-statuspage-pagetitle.demo.ts

@@ -0,0 +1,25 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+  <style>
+    .demo-container {
+      background: #fafafa;
+      padding: 40px 0;
+      min-height: 400px;
+    }
+  </style>
+  <div class="demo-container">
+    <upl-statuspage-pagetitle 
+      .pageTitle=${'System Status'}
+      .pageSubtitle=${'Real-time operational status and incident reports for all services'}
+    ></upl-statuspage-pagetitle>
+    
+    <br>
+    
+    <upl-statuspage-pagetitle 
+      .pageTitle=${'API Documentation'}
+      .pageSubtitle=${'Comprehensive guides and references for integrating with our platform'}
+      .centered=${true}
+    ></upl-statuspage-pagetitle>
+  </div>
+`;

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

@@ -0,0 +1,89 @@
+import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager, unsafeCSS } from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+import * as sharedStyles from '../styles/shared.styles.js';
+import { demoFunc } from './upl-statuspage-pagetitle.demo.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'upl-statuspage-pagetitle': UplStatuspagePagetitle;
+  }
+}
+
+@customElement('upl-statuspage-pagetitle')
+export class UplStatuspagePagetitle extends DeesElement {
+  public static demo = demoFunc;
+
+  @property({ type: String })
+  accessor pageTitle: string = 'System Status';
+
+  @property({ type: String })
+  accessor pageSubtitle: string = '';
+
+  @property({ type: Boolean })
+  accessor centered: boolean = false;
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    domtools.elementBasic.staticStyles,
+    css`
+      :host {
+        display: block;
+        font-family: ${unsafeCSS(sharedStyles.fonts.base)};
+      }
+
+      .title-container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: ${unsafeCSS(sharedStyles.spacing.lg)};
+      }
+
+      .title-container.centered {
+        text-align: center;
+      }
+
+      h1 {
+        font-size: 48px;
+        font-weight: 700;
+        letter-spacing: -0.03em;
+        line-height: 1.1;
+        color: ${sharedStyles.colors.text.primary};
+        margin: 0 0 ${unsafeCSS(sharedStyles.spacing.md)} 0;
+      }
+
+      p {
+        font-size: 18px;
+        color: ${sharedStyles.colors.text.secondary};
+        margin: 0;
+        line-height: 1.6;
+      }
+
+      @media (max-width: 640px) {
+        .title-container {
+          padding: ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.md)};
+        }
+
+        h1 {
+          font-size: 32px;
+        }
+
+        p {
+          font-size: 16px;
+        }
+      }
+    `
+  ]
+
+  public render(): TemplateResult {
+    return html`
+      <div class="title-container ${this.centered ? 'centered' : ''}">
+        <h1>${this.pageTitle}</h1>
+        ${this.pageSubtitle ? html`
+          <p>${this.pageSubtitle}</p>
+        ` : ''}
+      </div>
+    `;
+  }
+}

package/ts_web/elements/upl-statuspage-statsgrid.demo.ts

@@ -0,0 +1,315 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+  <style>
+    .demo-container {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+    .demo-section {
+      border: 1px solid #ddd;
+      border-radius: 8px;
+      padding: 20px;
+      background: #f5f5f5;
+    }
+    .demo-title {
+      font-size: 14px;
+      font-weight: 600;
+      margin-bottom: 16px;
+      color: #333;
+    }
+    .demo-controls {
+      display: flex;
+      gap: 10px;
+      margin-top: 16px;
+      flex-wrap: wrap;
+    }
+    .demo-button {
+      padding: 6px 12px;
+      border: 1px solid #ddd;
+      background: white;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 13px;
+    }
+    .demo-button:hover {
+      background: #f0f0f0;
+    }
+    .demo-button.active {
+      background: #2196F3;
+      color: white;
+      border-color: #2196F3;
+    }
+  </style>
+
+  <div class="demo-container">
+    <!-- Normal Operation -->
+    <div class="demo-section">
+      <div class="demo-title">Normal Operation</div>
+      <dees-demowrapper
+        .runAfterRender=${async (wrapperElement: any) => {
+          const statsGrid = wrapperElement.querySelector('upl-statuspage-statsgrid') as any;
+          
+          // Set initial values
+          statsGrid.currentStatus = 'operational';
+          statsGrid.uptime = 99.95;
+          statsGrid.avgResponseTime = 125;
+          statsGrid.totalIncidents = 0;
+          statsGrid.affectedServices = 0;
+          statsGrid.totalServices = 12;
+          statsGrid.timePeriod = '90 days';
+        }}
+      >
+        <upl-statuspage-statsgrid></upl-statuspage-statsgrid>
+      </dees-demowrapper>
+    </div>
+
+    <!-- Degraded Performance -->
+    <div class="demo-section">
+      <div class="demo-title">Degraded Performance</div>
+      <dees-demowrapper
+        .runAfterRender=${async (wrapperElement: any) => {
+          const statsGrid = wrapperElement.querySelector('upl-statuspage-statsgrid') as any;
+          
+          statsGrid.currentStatus = 'degraded';
+          statsGrid.uptime = 98.50;
+          statsGrid.avgResponseTime = 450;
+          statsGrid.totalIncidents = 3;
+          statsGrid.affectedServices = 2;
+          statsGrid.totalServices = 12;
+          statsGrid.timePeriod = '30 days';
+        }}
+      >
+        <upl-statuspage-statsgrid></upl-statuspage-statsgrid>
+      </dees-demowrapper>
+    </div>
+
+    <!-- Major Outage -->
+    <div class="demo-section">
+      <div class="demo-title">Major Outage</div>
+      <dees-demowrapper
+        .runAfterRender=${async (wrapperElement: any) => {
+          const statsGrid = wrapperElement.querySelector('upl-statuspage-statsgrid') as any;
+          
+          statsGrid.currentStatus = 'major_outage';
+          statsGrid.uptime = 95.20;
+          statsGrid.avgResponseTime = 1250;
+          statsGrid.totalIncidents = 8;
+          statsGrid.affectedServices = 7;
+          statsGrid.totalServices = 12;
+          statsGrid.timePeriod = '7 days';
+        }}
+      >
+        <upl-statuspage-statsgrid></upl-statuspage-statsgrid>
+      </dees-demowrapper>
+    </div>
+
+    <!-- Interactive Demo -->
+    <div class="demo-section">
+      <div class="demo-title">Interactive Demo</div>
+      <dees-demowrapper
+        .runAfterRender=${async (wrapperElement: any) => {
+          const statsGrid = wrapperElement.querySelector('upl-statuspage-statsgrid') as any;
+          
+          // Initial state
+          statsGrid.currentStatus = 'operational';
+          statsGrid.uptime = 99.99;
+          statsGrid.avgResponseTime = 85;
+          statsGrid.totalIncidents = 0;
+          statsGrid.affectedServices = 0;
+          statsGrid.totalServices = 15;
+          statsGrid.timePeriod = '90 days';
+          
+          // Create controls
+          const controls = document.createElement('div');
+          controls.className = 'demo-controls';
+          
+          // Status buttons
+          const statuses = ['operational', 'degraded', 'partial_outage', 'major_outage', 'maintenance'];
+          statuses.forEach((status, index) => {
+            const button = document.createElement('button');
+            button.className = 'demo-button' + (index === 0 ? ' active' : '');
+            button.textContent = status.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+            button.onclick = () => {
+              controls.querySelectorAll('.demo-button').forEach(btn => btn.classList.remove('active'));
+              button.classList.add('active');
+              
+              statsGrid.currentStatus = status;
+              
+              // Adjust other values based on status
+              switch (status) {
+                case 'operational':
+                  statsGrid.uptime = 99.99;
+                  statsGrid.avgResponseTime = 85;
+                  statsGrid.totalIncidents = 0;
+                  statsGrid.affectedServices = 0;
+                  break;
+                case 'degraded':
+                  statsGrid.uptime = 98.50;
+                  statsGrid.avgResponseTime = 350;
+                  statsGrid.totalIncidents = 2;
+                  statsGrid.affectedServices = 1;
+                  break;
+                case 'partial_outage':
+                  statsGrid.uptime = 97.00;
+                  statsGrid.avgResponseTime = 750;
+                  statsGrid.totalIncidents = 5;
+                  statsGrid.affectedServices = 3;
+                  break;
+                case 'major_outage':
+                  statsGrid.uptime = 94.50;
+                  statsGrid.avgResponseTime = 1500;
+                  statsGrid.totalIncidents = 10;
+                  statsGrid.affectedServices = 8;
+                  break;
+                case 'maintenance':
+                  statsGrid.uptime = 99.00;
+                  statsGrid.avgResponseTime = 150;
+                  statsGrid.totalIncidents = 1;
+                  statsGrid.affectedServices = 2;
+                  break;
+              }
+            };
+            controls.appendChild(button);
+          });
+          
+          wrapperElement.appendChild(controls);
+          
+          // Add time period selector
+          const timePeriodControls = document.createElement('div');
+          timePeriodControls.className = 'demo-controls';
+          timePeriodControls.style.marginTop = '10px';
+          
+          const periods = ['24 hours', '7 days', '30 days', '90 days'];
+          periods.forEach((period, index) => {
+            const button = document.createElement('button');
+            button.className = 'demo-button' + (index === 3 ? ' active' : '');
+            button.textContent = period;
+            button.onclick = () => {
+              timePeriodControls.querySelectorAll('.demo-button').forEach(btn => btn.classList.remove('active'));
+              button.classList.add('active');
+              statsGrid.timePeriod = period;
+            };
+            timePeriodControls.appendChild(button);
+          });
+          
+          wrapperElement.appendChild(timePeriodControls);
+        }}
+      >
+        <upl-statuspage-statsgrid></upl-statuspage-statsgrid>
+      </dees-demowrapper>
+    </div>
+
+    <!-- Loading State -->
+    <div class="demo-section">
+      <div class="demo-title">Loading State</div>
+      <dees-demowrapper
+        .runAfterRender=${async (wrapperElement: any) => {
+          const statsGrid = wrapperElement.querySelector('upl-statuspage-statsgrid') as any;
+          statsGrid.loading = true;
+          
+          // Create toggle button
+          const controls = document.createElement('div');
+          controls.className = 'demo-controls';
+          
+          const toggleButton = document.createElement('button');
+          toggleButton.className = 'demo-button';
+          toggleButton.textContent = 'Toggle Loading';
+          toggleButton.onclick = () => {
+            statsGrid.loading = !statsGrid.loading;
+            if (!statsGrid.loading) {
+              statsGrid.currentStatus = 'operational';
+              statsGrid.uptime = 99.95;
+              statsGrid.avgResponseTime = 125;
+              statsGrid.totalIncidents = 0;
+              statsGrid.affectedServices = 0;
+              statsGrid.totalServices = 12;
+            }
+          };
+          controls.appendChild(toggleButton);
+          
+          wrapperElement.appendChild(controls);
+        }}
+      >
+        <upl-statuspage-statsgrid></upl-statuspage-statsgrid>
+      </dees-demowrapper>
+    </div>
+
+    <!-- Real-time Updates -->
+    <div class="demo-section">
+      <div class="demo-title">Real-time Updates</div>
+      <dees-demowrapper
+        .runAfterRender=${async (wrapperElement: any) => {
+          const statsGrid = wrapperElement.querySelector('upl-statuspage-statsgrid') as any;
+          
+          // Initial values
+          statsGrid.currentStatus = 'operational';
+          statsGrid.uptime = 99.95;
+          statsGrid.avgResponseTime = 100;
+          statsGrid.totalIncidents = 0;
+          statsGrid.affectedServices = 0;
+          statsGrid.totalServices = 10;
+          statsGrid.timePeriod = '24 hours';
+          
+          // Simulate real-time updates
+          let interval = setInterval(() => {
+            // Slight variations in response time
+            statsGrid.avgResponseTime = Math.floor(80 + Math.random() * 40);
+            
+            // Occasionally change status
+            if (Math.random() < 0.1) {
+              const statuses = ['operational', 'degraded'];
+              statsGrid.currentStatus = statuses[Math.floor(Math.random() * statuses.length)];
+              
+              if (statsGrid.currentStatus === 'degraded') {
+                statsGrid.avgResponseTime = Math.floor(300 + Math.random() * 200);
+                statsGrid.totalIncidents = Math.min(statsGrid.totalIncidents + 1, 5);
+                statsGrid.affectedServices = Math.min(Math.floor(Math.random() * 3) + 1, statsGrid.totalServices);
+                statsGrid.uptime = Math.max(99.0, statsGrid.uptime - 0.05);
+              } else {
+                statsGrid.affectedServices = 0;
+              }
+            }
+          }, 2000);
+          
+          // Add control button
+          const controls = document.createElement('div');
+          controls.className = 'demo-controls';
+          
+          const toggleButton = document.createElement('button');
+          toggleButton.className = 'demo-button active';
+          toggleButton.textContent = 'Stop Updates';
+          toggleButton.onclick = () => {
+            if (interval) {
+              clearInterval(interval);
+              interval = null;
+              toggleButton.textContent = 'Start Updates';
+              toggleButton.classList.remove('active');
+            } else {
+              interval = setInterval(() => {
+                statsGrid.avgResponseTime = Math.floor(80 + Math.random() * 40);
+                if (Math.random() < 0.1) {
+                  const statuses = ['operational', 'degraded'];
+                  statsGrid.currentStatus = statuses[Math.floor(Math.random() * statuses.length)];
+                }
+              }, 2000);
+              toggleButton.textContent = 'Stop Updates';
+              toggleButton.classList.add('active');
+            }
+          };
+          controls.appendChild(toggleButton);
+          
+          wrapperElement.appendChild(controls);
+          
+          // Cleanup on unmount
+          wrapperElement.addEventListener('remove', () => {
+            if (interval) clearInterval(interval);
+          });
+        }}
+      >
+        <upl-statuspage-statsgrid></upl-statuspage-statsgrid>
+      </dees-demowrapper>
+    </div>
+  </div>
+`;