@uptime.link/statuspage 1.0.74 → 1.1.0

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

@@ -7,9 +7,13 @@ import {
   type TemplateResult,
   css,
   cssManager,
+  unsafeCSS,
 } from '@design.estate/dees-element';
+import type { IStatusHistoryPoint } from '../interfaces/index.js';
+import * as sharedStyles from '../styles/shared.styles.js';
 
 import './internal/uplinternal-miniheading.js';
+import { demoFunc } from './upl-statuspage-statusdetails.demo.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -19,7 +23,25 @@ declare global {
 
 @customElement('upl-statuspage-statusdetails')
 export class UplStatuspageStatusdetails extends DeesElement {
-  public static demo = () => html` <upl-statuspage-statusdetails></upl-statuspage-statusdetails> `;
+  public static demo = demoFunc;
+
+  @property({ type: Array })
+  accessor historyData: IStatusHistoryPoint[] = [];
+
+  @property({ type: Array })
+  accessor dataPoints: IStatusHistoryPoint[] = [];
+
+  @property({ type: String })
+  accessor serviceId: string = '';
+
+  @property({ type: String })
+  accessor serviceName: string = 'Service';
+
+  @property({ type: Boolean })
+  accessor loading: boolean = false;
+
+  @property({ type: Number })
+  accessor hoursToShow: number = 48;
 
   constructor() {
     super();
@@ -27,69 +49,306 @@ export class UplStatuspageStatusdetails extends DeesElement {
 
   public static styles = [
     plugins.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)};
+      }
+      
+      .graph-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+      
+      .graph-container {
+        position: relative;
       }
 
       .mainbox {
-        margin: auto;
-        max-width: 900px;
-        text-align: right;
-        background:  ${cssManager.bdTheme('#ffffff', '#333333')};;
-        line-height: 50px;
-        border-radius: 3px;
+        background: transparent;
+        border: none;
+        border-radius: 0;
+        padding: 0;
       }
 
       .mainbox .barContainer {
         position: relative;
         display: flex;
-        padding: 6px;
+        gap: 2px;
+        padding: ${unsafeCSS(sharedStyles.spacing.sm)};
+        background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
         overflow: hidden;
+        height: 40px;
       }
 
       .mainbox .barContainer .bar {
-        margin: 4px;
-        width: 11px;
-        border-radius: 3px;
-        height: 40px;
-        background: #2deb51;
+        flex: 1;
+        height: 100%;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        position: relative;
+        border-radius: 2px;
+      }
+
+      .mainbox .barContainer .bar:hover {
+        transform: scaleY(1.1);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+
+      .mainbox .barContainer .bar.operational {
+        background: ${cssManager.bdTheme('#22c55e', '#22c55e')};
+      }
+
+      .mainbox .barContainer .bar.degraded {
+        background: ${cssManager.bdTheme('#fbbf24', '#fbbf24')};
+      }
+
+      .mainbox .barContainer .bar.partial_outage {
+        background: ${cssManager.bdTheme('#f87171', '#f87171')};
+      }
+
+      .mainbox .barContainer .bar.major_outage {
+        background: ${cssManager.bdTheme('#ef4444', '#ef4444')};
+      }
+
+      .mainbox .barContainer .bar.maintenance {
+        background: ${cssManager.bdTheme('#60a5fa', '#60a5fa')};
       }
-      .timeIndicator {
+
+      .mainbox .barContainer .bar.no-data {
+        background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        opacity: 0.6;
+      }
+
+
+      .time-labels {
+        display: flex;
+        justify-content: space-between;
+        padding: 0;
+        margin-top: ${unsafeCSS(sharedStyles.spacing.xs)};
+        font-size: 10px;
+        color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
+        font-family: ${unsafeCSS(sharedStyles.fonts.base)};
+        opacity: 0.8;
+      }
+
+      .tooltip {
         position: absolute;
-        width: 11px;
-        height: 11px;
-        background: #FF9800;
-        top: 56px;
-        left: 400px;
-        transform: rotate(45deg);
+        background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        color: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+        padding: 6px 10px;
+        border-radius: 4px;
+        font-size: 11px;
+        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.4;
+      }
+
+      .tooltip.visible {
+        opacity: 1;
+      }
+
+      .tooltip-time {
+        font-weight: 600;
+        display: block;
+        margin-bottom: 2px;
+      }
+
+      .tooltip-stat {
+        font-size: 10px;
+        opacity: 0.9;
+      }
+
+      .loading-skeleton {
+        display: flex;
+        gap: 1px;
+        height: 24px;
+      }
+
+      .loading-skeleton .skeleton-bar {
+        flex: 1;
+        height: 100%;
+        background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
+        animation: pulse 2s infinite;
+      }
+      
+      @keyframes pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+      }
+
+      @keyframes loading {
+        0% { background-position: 200% 0; }
+        100% { background-position: -200% 0; }
+      }
+
+
+      @media (max-width: 640px) {
+        .container {
+          padding: 0 ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)};
+        }
+
+        .graph-container {
+          padding: ${unsafeCSS(sharedStyles.spacing.sm)};
+        }
+
+        .mainbox .barContainer {
+          height: 32px;
+          padding: ${unsafeCSS(sharedStyles.spacing.xs)};
+        }
+
+        .time-labels {
+          font-size: 9px;
+        }
+
+        .stats-row {
+          font-size: 11px;
+          flex-direction: column;
+          gap: ${unsafeCSS(sharedStyles.spacing.sm)};
+          align-items: flex-start;
+        }
       }
     `,
   ];
 
   public render(): TemplateResult {
     return html`
-      <style></style>
-      <uplinternal-miniheading>Yesterday & Today</uplinternal-miniheading>
-      <div class="mainbox">
-        <div class="barContainer">
-          ${(() => {
-            let counter = 0;
-            const returnArray: TemplateResult[] = [];
-            while (counter < 48) {
-              counter++;
-              returnArray.push(html` <div class="bar"></div> `);
-            }
-            return returnArray;
-          })()}
-          <div class="timeIndicator"></div>
+      <div class="container">
+        <uplinternal-miniheading>${this.serviceName} - Last ${this.hoursToShow} Hours</uplinternal-miniheading>
+        <div class="mainbox">
+          ${this.loading ? html`
+          <div class="graph-container">
+            <div class="barContainer" style="background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')}; border: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')}; border-radius: ${sharedStyles.borderRadius.base}; padding: ${sharedStyles.spacing.sm}; height: 40px;">
+              <div class="loading-skeleton">
+                ${Array(this.hoursToShow).fill(0).map(() => html`<div class="skeleton-bar"></div>`)}
+              </div>
+            </div>
+          </div>
+        ` : html`
+          <div class="graph-container">
+            <div class="barContainer" @mouseleave=${this.hideTooltip}>
+              ${this.renderBars()}
+            </div>
+          </div>
+          <div class="time-labels">
+            <span>${this.getTimeLabel(this.hoursToShow - 1)}</span>
+            <span>${this.getTimeLabel(Math.floor(this.hoursToShow * 3 / 4))}</span>
+            <span>${this.getTimeLabel(Math.floor(this.hoursToShow / 2))}</span>
+            <span>${this.getTimeLabel(Math.floor(this.hoursToShow / 4))}</span>
+            <span>now</span>
+          </div>
+        `}
         </div>
+        <div class="tooltip" id="tooltip"></div>
       </div>
     `;
   }
+
+  private renderBars(): TemplateResult[] {
+    const bars: TemplateResult[] = [];
+    const now = Date.now();
+    
+    for (let i = 0; i < this.hoursToShow; i++) {
+      const hourIndex = this.hoursToShow - 1 - i;
+      const timestamp = now - (hourIndex * 60 * 60 * 1000);
+      const dataPoint = this.findDataPointForTime(timestamp);
+      
+      const status = dataPoint?.status || 'no-data';
+      const responseTime = dataPoint?.responseTime || 0;
+      
+      bars.push(html`
+        <div 
+          class="bar ${status}"
+          @mouseenter=${(e: MouseEvent) => this.showTooltip(e, timestamp, status, responseTime)}
+          @click=${() => this.handleBarClick(timestamp, status, responseTime)}
+        ></div>
+      `);
+    }
+    
+    return bars;
+  }
+
+  private getData(): IStatusHistoryPoint[] {
+    return this.dataPoints?.length > 0 ? this.dataPoints : this.historyData || [];
+  }
+  
+  private findDataPointForTime(timestamp: number): IStatusHistoryPoint | undefined {
+    const data = this.getData();
+    if (!data || data.length === 0) return undefined;
+    
+    // Find the closest data point within the same hour
+    const targetHour = new Date(timestamp).getHours();
+    const targetDate = new Date(timestamp).toDateString();
+    
+    return data.find(point => {
+      const pointDate = new Date(point.timestamp);
+      return pointDate.toDateString() === targetDate && 
+             pointDate.getHours() === targetHour;
+    });
+  }
+
+
+  private getTimeLabel(hoursAgo: number): string {
+    const date = new Date(Date.now() - (hoursAgo * 60 * 60 * 1000));
+    if (hoursAgo >= 24) {
+      return `${date.getMonth() + 1}/${date.getDate()}`;
+    }
+    return `${date.getHours()}h`;
+  }
+
+  private showTooltip(event: MouseEvent, timestamp: number, status: string, responseTime: number) {
+    const tooltip = this.shadowRoot?.getElementById('tooltip') as HTMLElement;
+    if (!tooltip) return;
+    
+    const date = new Date(timestamp);
+    const timeStr = date.toLocaleString();
+    const statusStr = status.replace(/_/g, ' ').replace('no-data', 'No Data');
+    
+    tooltip.innerHTML = `
+      <div class="tooltip-time">${timeStr}</div>
+      <div class="tooltip-stat">Status: ${statusStr}</div>
+      ${responseTime > 0 ? `<div class="tooltip-stat">Response Time: ${responseTime.toFixed(0)}ms</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 - 10}px`;
+    tooltip.style.transform = 'translate(-50%, -100%)';
+    tooltip.classList.add('visible');
+  }
+
+  private hideTooltip() {
+    const tooltip = this.shadowRoot?.getElementById('tooltip') as HTMLElement;
+    if (tooltip) {
+      tooltip.classList.remove('visible');
+    }
+  }
+
+  private handleBarClick(timestamp: number, status: string, responseTime: number) {
+    this.dispatchEvent(new CustomEvent('barClick', {
+      detail: { timestamp, status, responseTime, serviceId: this.serviceId },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
 }