update

ts_web/elements/upl-statuspage-statusdetails.ts

@@ -28,6 +28,9 @@ export class UplStatuspageStatusdetails extends DeesElement {
   @property({ type: Array })
   public historyData: IStatusHistoryPoint[] = [];
   
+  @property({ type: Array })
+  public dataPoints: IStatusHistoryPoint[] = [];
+
   @property({ type: String })
   public serviceId: string = '';
 
@@ -62,122 +65,130 @@ export class UplStatuspageStatusdetails extends DeesElement {
         padding: 0 ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)};
       }
       
+      .graph-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+      
+      .graph-container {
+        position: relative;
+      }
+
       .mainbox {
-        background: ${colors.background.card};
+        background: transparent;
-        border: 1px solid ${colors.border.default};
+        border: none;
-        border-radius: ${unsafeCSS(borderRadius.md)};
+        border-radius: 0;
-        padding: ${unsafeCSS(spacing.md)};
+        padding: 0;
-        box-shadow: ${unsafeCSS(shadows.sm)};
       }
 
       .mainbox .barContainer {
         position: relative;
         display: flex;
-        gap: 2px;
+        gap: 1px;
         padding: ${unsafeCSS(spacing.sm)};
+        background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+        border: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')};
         border-radius: ${unsafeCSS(borderRadius.base)};
         overflow: hidden;
+        height: 40px;
       }
 
       .mainbox .barContainer .bar {
         flex: 1;
-        height: 48px;
+        height: 100%;
-        border-radius: ${unsafeCSS(borderRadius.sm)};
         cursor: pointer;
-        transition: all 0.2s ease;
+        transition: opacity 0.15s ease;
         position: relative;
       }
 
       .mainbox .barContainer .bar:hover {
-        transform: scaleY(1.1);
+        opacity: 0.8;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
       }
 
       .mainbox .barContainer .bar.operational {
-        background: ${colors.status.operational};
+        background: ${cssManager.bdTheme('#22c55e', '#22c55e')};
       }
 
       .mainbox .barContainer .bar.degraded {
-        background: ${colors.status.degraded};
+        background: ${cssManager.bdTheme('#fbbf24', '#fbbf24')};
       }
 
       .mainbox .barContainer .bar.partial_outage {
-        background: ${colors.status.partial};
+        background: ${cssManager.bdTheme('#f87171', '#f87171')};
       }
 
       .mainbox .barContainer .bar.major_outage {
-        background: ${colors.status.major};
+        background: ${cssManager.bdTheme('#ef4444', '#ef4444')};
       }
 
       .mainbox .barContainer .bar.maintenance {
-        background: ${colors.status.maintenance};
+        background: ${cssManager.bdTheme('#60a5fa', '#60a5fa')};
       }
 
       .mainbox .barContainer .bar.no-data {
-        background: ${cssManager.bdTheme('#d1d5db', '#52525b')};
+        background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
-        opacity: ${cssManager.bdTheme('0.5', '0.35')};
       }
 
 
       .time-labels {
         display: flex;
         justify-content: space-between;
-        padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.sm)} 0;
+        padding: 0;
-        font-size: 12px;
+        margin-top: ${unsafeCSS(spacing.xs)};
-        color: ${cssManager.bdTheme('#4b5563', '#9ca3af')};
+        font-size: 10px;
-        font-family: ${unsafeCSS(fonts.mono)};
+        color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
-        font-weight: 500;
+        font-family: ${unsafeCSS(fonts.base)};
+        opacity: 0.8;
       }
 
       .tooltip {
         position: absolute;
-        background: ${cssManager.bdTheme('#18181b', '#ffffff')};
+        background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
-        color: ${cssManager.bdTheme('#fafafa', '#18181b')};
+        color: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
-        padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.md)};
+        padding: 6px 10px;
-        border-radius: ${unsafeCSS(borderRadius.base)};
+        border-radius: 4px;
-        font-size: 13px;
+        font-size: 11px;
         pointer-events: none;
         opacity: 0;
-        transition: opacity 0.2s;
+        transition: opacity 0.15s;
-        z-index: 10;
+        z-index: 50;
         white-space: nowrap;
-        box-shadow: ${unsafeCSS(shadows.lg)};
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-        border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+        line-height: 1.4;
       }
 
       .tooltip.visible {
-        opacity: 0.95;
+        opacity: 1;
       }
 
-      .tooltip strong {
+      .tooltip-time {
         font-weight: 600;
         display: block;
-        margin-bottom: ${unsafeCSS(spacing.xs)};
+        margin-bottom: 2px;
-        color: ${cssManager.bdTheme('#fafafa', '#18181b')};
       }
 
-      .tooltip div {
+      .tooltip-stat {
-        line-height: 1.4;
+        font-size: 10px;
+        opacity: 0.9;
       }
 
       .loading-skeleton {
         display: flex;
-        padding: ${unsafeCSS(spacing.sm)};
+        gap: 1px;
-        gap: 2px;
+        height: 24px;
-        background: ${colors.background.secondary};
-        border-radius: ${unsafeCSS(borderRadius.base)};
       }
 
       .loading-skeleton .skeleton-bar {
         flex: 1;
-        height: 48px;
+        height: 100%;
-        background: ${cssManager.bdTheme(
+        background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
-          'linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%)',
+        animation: pulse 2s infinite;
-          'linear-gradient(90deg, #1f1f1f 25%, #262626 50%, #1f1f1f 75%)'
+      }
-        )};
+      
-        background-size: 200% 100%;
+      @keyframes pulse {
-        animation: loading 1.5s infinite;
+        0%, 100% { opacity: 1; }
-        border-radius: ${unsafeCSS(borderRadius.sm)};
+        50% { opacity: 0.5; }
       }
 
       @keyframes loading {
@@ -185,45 +196,35 @@ export class UplStatuspageStatusdetails extends DeesElement {
         100% { background-position: -200% 0; }
       }
 
-      .status-legend {
+      .stats-row {
-        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)};
+        justify-content: space-between;
+        margin-top: ${unsafeCSS(spacing.lg)};
+        padding: ${unsafeCSS(spacing.sm)} 0;
+        border-top: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')};
+        font-size: 12px;
       }
       
-      .legend-color {
+      .stat-item {
-        width: 12px;
+        display: flex;
-        height: 12px;
+        align-items: center;
-        border-radius: ${unsafeCSS(borderRadius.sm)};
+        gap: ${unsafeCSS(spacing.sm)};
+        color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
       }
       
-      .legend-color.operational {
+      .stat-value {
-        background: ${colors.status.operational};
+        font-weight: 500;
+        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        font-variant-numeric: tabular-nums;
       }
       
-      .legend-color.degraded {
+      .status-indicator {
-        background: ${colors.status.degraded};
+        display: inline-block;
-      }
+        width: 6px;
-      
+        height: 6px;
-      .legend-color.partial_outage {
+        border-radius: 50%;
-        background: ${colors.status.partial};
+        margin-right: 4px;
-      }
-      
-      .legend-color.major_outage {
-        background: ${colors.status.major};
-      }
-      
-      .legend-color.maintenance {
-        background: ${colors.status.maintenance};
       }
 
       @media (max-width: 640px) {
@@ -231,17 +232,24 @@ export class UplStatuspageStatusdetails extends DeesElement {
           padding: 0 ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)};
         }
         
-        .mainbox {
+        .graph-container {
           padding: ${unsafeCSS(spacing.sm)};
         }
 
-        .time-labels {
+        .mainbox .barContainer {
-          font-size: 11px;
+          height: 32px;
+          padding: ${unsafeCSS(spacing.xs)};
         }
 
-        .status-legend {
+        .time-labels {
-          gap: ${unsafeCSS(spacing.md)};
+          font-size: 9px;
-          font-size: 12px;
+        }
+
+        .stats-row {
+          font-size: 11px;
+          flex-direction: column;
+          gap: ${unsafeCSS(spacing.sm)};
+          align-items: flex-start;
         }
       }
     `,
@@ -253,44 +261,31 @@ export class UplStatuspageStatusdetails extends DeesElement {
         <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: ${borderRadius.base}; padding: ${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(0)}</span>
+            <span>${this.getTimeLabel(this.hoursToShow - 1)}</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>
+            <span>${this.getTimeLabel(Math.floor(this.hoursToShow / 2))}</span>
+            <span>${this.getTimeLabel(Math.floor(this.hoursToShow / 4))}</span>
+            <span>now</span>
           </div>
         `}
         </div>
-        ${!this.loading ? html`
+        ${!this.loading && this.getData().length > 0 ? html`
-          <div class="status-legend">
+          <div class="stats-row">
-            <div class="legend-item">
+            ${this.renderStats()}
-              <div class="legend-color operational"></div>
-              <span>Operational</span>
-            </div>
-            <div class="legend-item">
-              <div class="legend-color degraded"></div>
-              <span>Degraded</span>
-            </div>
-            <div class="legend-item">
-              <div class="legend-color partial_outage"></div>
-              <span>Partial Outage</span>
-            </div>
-            <div class="legend-item">
-              <div class="legend-color major_outage"></div>
-              <span>Major Outage</span>
-            </div>
-            <div class="legend-item">
-              <div class="legend-color maintenance"></div>
-              <span>Maintenance</span>
-            </div>
           </div>
         ` : ''}
         <div class="tooltip" id="tooltip"></div>
@@ -322,14 +317,19 @@ export class UplStatuspageStatusdetails extends DeesElement {
     return bars;
   }
 
+  private getData(): IStatusHistoryPoint[] {
+    return this.dataPoints?.length > 0 ? this.dataPoints : this.historyData || [];
+  }
+  
   private findDataPointForTime(timestamp: number): IStatusHistoryPoint | undefined {
-    if (!this.historyData || this.historyData.length === 0) return 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 this.historyData.find(point => {
+    return data.find(point => {
       const pointDate = new Date(point.timestamp);
       return pointDate.toDateString() === targetDate && 
              pointDate.getHours() === targetHour;
@@ -340,9 +340,9 @@ export class UplStatuspageStatusdetails extends DeesElement {
   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.getMonth() + 1}/${date.getDate()}`;
     }
-    return `${date.getHours()}:00`;
+    return `${date.getHours()}h`;
   }
 
   private showTooltip(event: MouseEvent, timestamp: number, status: string, responseTime: number) {
@@ -354,17 +354,17 @@ export class UplStatuspageStatusdetails extends DeesElement {
     const statusStr = status.replace(/_/g, ' ').replace('no-data', 'No Data');
     
     tooltip.innerHTML = `
-      <div><strong>${timeStr}</strong></div>
+      <div class="tooltip-time">${timeStr}</div>
-      <div>Status: ${statusStr}</div>
+      <div class="tooltip-stat">Status: ${statusStr}</div>
-      ${responseTime > 0 ? `<div>Response Time: ${responseTime.toFixed(0)}ms</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 - 60}px`;
+    tooltip.style.top = `${rect.top - containerRect.top - 10}px`;
-    tooltip.style.transform = 'translateX(-50%)';
+    tooltip.style.transform = 'translate(-50%, -100%)';
     tooltip.classList.add('visible');
   }
 
@@ -382,4 +382,46 @@ export class UplStatuspageStatusdetails extends DeesElement {
       composed: true
     }));
   }
+
+  private renderStats(): TemplateResult {
+    const data = this.getData();
+    const operational = data.filter(d => d.status === 'operational').length;
+    const uptime = (operational / data.length) * 100;
+    const avgResponseTime = data
+      .filter(d => d.responseTime && d.responseTime > 0)
+      .reduce((sum, d) => sum + (d.responseTime || 0), 0) / data.length || 0;
+    
+    const currentStatus = data[data.length - 1]?.status || 'no-data';
+    
+    return html`
+      <div class="stat-item">
+        <span class="status-indicator" style="background: ${this.getStatusColor(currentStatus)}"></span>
+        <span class="stat-value">${this.formatStatus(currentStatus)}</span>
+      </div>
+      <div class="stat-item">
+        <span>${uptime.toFixed(1)}%</span>
+        <span style="color: ${cssManager.bdTheme('#9ca3af', '#71717a')}">uptime</span>
+      </div>
+      <div class="stat-item">
+        <span>${avgResponseTime.toFixed(0)}ms</span>
+        <span style="color: ${cssManager.bdTheme('#9ca3af', '#71717a')}">avg response</span>
+      </div>
+    `;
+  }
+  
+  private getStatusColor(status: string): string {
+    const colors: Record<string, string> = {
+      operational: '#22c55e',
+      degraded: '#fbbf24',
+      partial_outage: '#f87171',
+      major_outage: '#ef4444',
+      maintenance: '#60a5fa',
+      'no-data': '#e5e7eb'
+    };
+    return colors[status] || '#e5e7eb';
+  }
+  
+  private formatStatus(status: string): string {
+    return status.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+  }
 }