update

2025-06-29 19:55:58 +00:00
parent d12147716d
commit 313e736f29
23 changed files with 11550 additions and 1587 deletions
--- a/ts_web/elements/upl-statuspage-statusdetails.ts
+++ b/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 { fonts, colors, shadows, borderRadius, spacing, commonStyles, getStatusColor } 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,22 @@ 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 })
+  public historyData: IStatusHistoryPoint[] = [];
+
+  @property({ type: String })
+  public serviceId: string = '';
+
+  @property({ type: String })
+  public serviceName: string = 'Service';
+
+  @property({ type: Boolean })
+  public loading: boolean = false;
+
+  @property({ type: Number })
+  public hoursToShow: number = 48;

  constructor() {
    super();
@@ -27,69 +46,342 @@ export class UplStatuspageStatusdetails extends DeesElement {

  public static styles = [
    plugins.domtools.elementBasic.staticStyles,
+    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(fonts.base)};
+        color: ${colors.text.primary};
+      }
+
+      .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 0 ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)};
      }

      .mainbox {
-        margin: auto;
-        max-width: 900px;
-        text-align: right;
-        background:  ${cssManager.bdTheme('#ffffff', '#333333')};;
-        line-height: 50px;
-        border-radius: 3px;
+        background: ${colors.background.card};
+        border: 1px solid ${colors.border.default};
+        border-radius: ${unsafeCSS(borderRadius.md)};
+        padding: ${unsafeCSS(spacing.md)};
+        box-shadow: ${unsafeCSS(shadows.sm)};
      }

      .mainbox .barContainer {
        position: relative;
        display: flex;
-        padding: 6px;
+        gap: 2px;
+        padding: ${unsafeCSS(spacing.sm)};
+        background: ${colors.background.secondary};
+        border-radius: ${unsafeCSS(borderRadius.base)};
        overflow: hidden;
      }

      .mainbox .barContainer .bar {
-        margin: 4px;
-        width: 11px;
-        border-radius: 3px;
-        height: 40px;
-        background: #2deb51;
+        flex: 1;
+        height: 48px;
+        border-radius: ${unsafeCSS(borderRadius.sm)};
+        cursor: pointer;
+        transition: all 0.2s ease;
+        position: relative;
+        opacity: 0.9;
      }
+
+      .mainbox .barContainer .bar:hover {
+        opacity: 1;
+        transform: scaleY(1.05);
+      }
+
+      .mainbox .barContainer .bar.operational {
+        background: ${colors.status.operational};
+      }
+
+      .mainbox .barContainer .bar.degraded {
+        background: ${colors.status.degraded};
+      }
+
+      .mainbox .barContainer .bar.partial_outage {
+        background: ${colors.status.partial};
+      }
+
+      .mainbox .barContainer .bar.major_outage {
+        background: ${colors.status.major};
+      }
+
+      .mainbox .barContainer .bar.maintenance {
+        background: ${colors.status.maintenance};
+      }
+
+      .mainbox .barContainer .bar.no-data {
+        background: ${colors.border.muted};
+        opacity: 0.3;
+      }
+
      .timeIndicator {
        position: absolute;
-        width: 11px;
-        height: 11px;
-        background: #FF9800;
-        top: 56px;
-        left: 400px;
-        transform: rotate(45deg);
+        width: 2px;
+        height: calc(100% - ${unsafeCSS(spacing.md)});
+        background: ${colors.text.primary};
+        top: ${unsafeCSS(spacing.sm)};
+        transition: left 0.3s;
+        opacity: 0.5;
+        pointer-events: none;
+      }
+
+      .time-labels {
+        display: flex;
+        justify-content: space-between;
+        padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.sm)} 0;
+        font-size: 12px;
+        color: ${colors.text.secondary};
+        font-family: ${unsafeCSS(fonts.mono)};
+      }
+
+      .tooltip {
+        position: absolute;
+        background: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
+        color: ${cssManager.bdTheme('#ffffff', '#1a1a1a')};
+        padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.md)};
+        border-radius: ${unsafeCSS(borderRadius.base)};
+        font-size: 13px;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 0.2s;
+        z-index: 10;
+        white-space: nowrap;
+        box-shadow: ${unsafeCSS(shadows.lg)};
+        border: 1px solid ${colors.border.default};
+      }
+
+      .tooltip.visible {
+        opacity: 0.95;
+      }
+
+      .tooltip strong {
+        font-weight: 600;
+        display: block;
+        margin-bottom: ${unsafeCSS(spacing.xs)};
+        color: ${cssManager.bdTheme('#ffffff', '#1a1a1a')};
+      }
+
+      .tooltip div {
+        line-height: 1.4;
+      }
+
+      .loading-skeleton {
+        display: flex;
+        padding: ${unsafeCSS(spacing.sm)};
+        gap: 2px;
+        background: ${colors.background.secondary};
+        border-radius: ${unsafeCSS(borderRadius.base)};
+      }
+
+      .loading-skeleton .skeleton-bar {
+        flex: 1;
+        height: 48px;
+        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: loading 1.5s infinite;
+        border-radius: ${unsafeCSS(borderRadius.sm)};
+      }
+
+      @keyframes loading {
+        0% { background-position: 200% 0; }
+        100% { background-position: -200% 0; }
+      }
+
+      .status-legend {
+        display: flex;
+        gap: ${unsafeCSS(spacing.lg)};
+        justify-content: center;
+        margin-top: ${unsafeCSS(spacing.lg)};
+        font-size: 13px;
+        flex-wrap: wrap;
+      }
+
+      .legend-item {
+        display: flex;
+        align-items: center;
+        gap: ${unsafeCSS(spacing.xs)};
+      }
+
+      .legend-color {
+        width: 12px;
+        height: 12px;
+        border-radius: ${unsafeCSS(borderRadius.sm)};
+      }
+
+      @media (max-width: 640px) {
+        .container {
+          padding: 0 ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)};
+        }
+
+        .mainbox {
+          padding: ${unsafeCSS(spacing.sm)};
+        }
+
+        .time-labels {
+          font-size: 11px;
+        }
+
+        .status-legend {
+          gap: ${unsafeCSS(spacing.md)};
+          font-size: 12px;
+        }
      }
    `,
  ];

  public render(): TemplateResult {
+    const now = Date.now();
+    const currentHour = new Date().getHours();
+    const timeIndicatorPosition = this.calculateTimeIndicatorPosition();
+
    return html`
-      <style></style>
-      <uplinternal-miniheading>Yesterday & Today</uplinternal-miniheading>
+      <uplinternal-miniheading>${this.serviceName} - Last ${this.hoursToShow} Hours</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>
+        ${this.loading ? html`
+          <div class="loading-skeleton">
+            ${Array(this.hoursToShow).fill(0).map(() => html`<div class="skeleton-bar"></div>`)}
+          </div>
+        ` : html`
+          <div class="barContainer" @mouseleave=${this.hideTooltip}>
+            ${this.renderBars()}
+            <div class="timeIndicator" style="left: ${timeIndicatorPosition}px"></div>
+          </div>
+          <div class="time-labels">
+            <span>${this.getTimeLabel(0)}</span>
+            <span>${this.getTimeLabel(Math.floor(this.hoursToShow / 4))}</span>
+            <span>${this.getTimeLabel(Math.floor(this.hoursToShow / 2))}</span>
+            <span>${this.getTimeLabel(Math.floor(this.hoursToShow * 3 / 4))}</span>
+            <span>Now</span>
+          </div>
+        `}
      </div>
+      ${!this.loading ? html`
+        <div class="status-legend">
+          <div class="legend-item">
+            <div class="legend-color" style="background: #2deb51"></div>
+            <span>Operational</span>
+          </div>
+          <div class="legend-item">
+            <div class="legend-color" style="background: #FF9800"></div>
+            <span>Degraded</span>
+          </div>
+          <div class="legend-item">
+            <div class="legend-color" style="background: #FF6F00"></div>
+            <span>Partial Outage</span>
+          </div>
+          <div class="legend-item">
+            <div class="legend-color" style="background: #F44336"></div>
+            <span>Major Outage</span>
+          </div>
+          <div class="legend-item">
+            <div class="legend-color" style="background: #2196F3"></div>
+            <span>Maintenance</span>
+          </div>
+        </div>
+      ` : ''}
+      <div class="tooltip" id="tooltip"></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 findDataPointForTime(timestamp: number): IStatusHistoryPoint | undefined {
+    if (!this.historyData || this.historyData.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 this.historyData.find(point => {
+      const pointDate = new Date(point.timestamp);
+      return pointDate.toDateString() === targetDate && 
+             pointDate.getHours() === targetHour;
+    });
+  }
+
+  private calculateTimeIndicatorPosition(): number {
+    const containerWidth = 888; // Approximate width minus padding
+    const barWidth = 19; // Width + margin
+    const totalBars = this.hoursToShow;
+    const currentMinutes = new Date().getMinutes();
+    const currentPosition = (totalBars - 1 + currentMinutes / 60) * barWidth + 6;
+    return Math.min(currentPosition, containerWidth - 11);
+  }
+
+  private getTimeLabel(hoursAgo: number): string {
+    const date = new Date(Date.now() - (hoursAgo * 60 * 60 * 1000));
+    if (hoursAgo >= 24) {
+      return `${date.getMonth() + 1}/${date.getDate()} ${date.getHours()}:00`;
+    }
+    return `${date.getHours()}:00`;
+  }
+
+  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><strong>${timeStr}</strong></div>
+      <div>Status: ${statusStr}</div>
+      ${responseTime > 0 ? `<div>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 - 60}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 handleBarClick(timestamp: number, status: string, responseTime: number) {
+    this.dispatchEvent(new CustomEvent('barClick', {
+      detail: { timestamp, status, responseTime, serviceId: this.serviceId },
+      bubbles: true,
+      composed: true
+    }));
+  }
 }