@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

package/templates/shared/dashboard/src/components/usage/CompactThresholdBanner.astro

@@ -0,0 +1,531 @@
+---
+/**
+ * CompactThresholdBanner Component
+ *
+ * Compact threshold alert display with grouped horizontal bars and severity counts.
+ * Replaces text-heavy ThresholdAlert with visual summary.
+ */
+
+interface ThresholdWarning {
+  resource: string;
+  resourceName: string;
+  metric: string;
+  current: number;
+  limit: number;
+  percentage: number;
+  level: 'normal' | 'warning' | 'high' | 'critical';
+}
+
+interface ThresholdAnalysis {
+  overallLevel: 'normal' | 'warning' | 'high' | 'critical';
+  warnings: ThresholdWarning[];
+}
+
+interface Props {
+  thresholds: ThresholdAnalysis;
+  collapsible?: boolean;
+}
+
+const { thresholds, collapsible = true } = Astro.props;
+
+// Filter to only show warning, high, and critical levels
+const alertWarnings = thresholds.warnings.filter(
+  (w) => w.level === 'warning' || w.level === 'high' || w.level === 'critical'
+);
+
+// Group by severity level
+const criticalCount = alertWarnings.filter((w) => w.level === 'critical').length;
+const highCount = alertWarnings.filter((w) => w.level === 'high').length;
+const warningCount = alertWarnings.filter((w) => w.level === 'warning').length;
+
+// If no alerts, don't render anything
+if (alertWarnings.length === 0) {
+  return null;
+}
+
+// Determine banner style based on overall level
+const bannerStyle =
+  thresholds.overallLevel === 'critical'
+    ? 'banner-critical'
+    : thresholds.overallLevel === 'high'
+      ? 'banner-high'
+      : 'banner-warning';
+
+function formatNumber(num: number): string {
+  if (num >= 1_000_000_000) return `${(num / 1_000_000_000).toFixed(1)}B`;
+  if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(1)}M`;
+  if (num >= 1_000) return `${(num / 1_000).toFixed(1)}K`;
+  return num.toLocaleString();
+}
+
+// Generate unique ID for this component instance
+const componentId = `threshold-banner-${Math.random().toString(36).substr(2, 9)}`;
+---
+
+<div class={`compact-threshold-banner ${bannerStyle}`} role="alert">
+  <div class="banner-summary">
+    <div class="severity-badges">
+      {
+        criticalCount > 0 && (
+          <span class="severity-badge badge-critical">
+            <span class="badge-count">{criticalCount}</span>
+            <span class="badge-label">Critical</span>
+          </span>
+        )
+      }
+      {
+        highCount > 0 && (
+          <span class="severity-badge badge-high">
+            <span class="badge-count">{highCount}</span>
+            <span class="badge-label">High</span>
+          </span>
+        )
+      }
+      {
+        warningCount > 0 && (
+          <span class="severity-badge badge-warning">
+            <span class="badge-count">{warningCount}</span>
+            <span class="badge-label">Warning</span>
+          </span>
+        )
+      }
+    </div>
+
+    <div class="threshold-bars">
+      {
+        alertWarnings.slice(0, 4).map((warning) => (
+          <div
+            class="mini-bar-container"
+            title={`${warning.resourceName}: ${warning.percentage.toFixed(0)}%`}
+          >
+            <div
+              class={`mini-bar bar-${warning.level}`}
+              style={`width: ${Math.min(warning.percentage, 100)}%`}
+            />
+          </div>
+        ))
+      }
+      {alertWarnings.length > 4 && <span class="more-count">+{alertWarnings.length - 4}</span>}
+    </div>
+
+    {
+      collapsible && (
+        <button
+          class="expand-button"
+          aria-expanded="false"
+          aria-controls={`${componentId}-details`}
+          data-toggle-id={componentId}
+        >
+          <span class="expand-icon">▼</span>
+        </button>
+      )
+    }
+  </div>
+
+  {
+    collapsible && (
+      <div
+        id={`${componentId}-details`}
+        class="banner-details"
+        data-details-id={componentId}
+        hidden
+      >
+        <div class="details-grid">
+          {alertWarnings.map((warning) => (
+            <div class={`detail-item detail-${warning.level}`}>
+              <div class="detail-header">
+                <span class={`detail-dot dot-${warning.level}`} />
+                <span class="detail-name">{warning.resourceName}</span>
+                <span class={`detail-level level-${warning.level}`}>
+                  {warning.level.toUpperCase()}
+                </span>
+              </div>
+              <div class="detail-metric">{warning.metric}</div>
+              <div class="detail-progress">
+                <div class="detail-bar">
+                  <div
+                    class={`detail-fill fill-${warning.level}`}
+                    style={`width: ${Math.min(warning.percentage, 100)}%`}
+                  />
+                </div>
+                <span class="detail-values">
+                  {formatNumber(warning.current)} / {formatNumber(warning.limit)}
+                </span>
+                <span class="detail-percent">{warning.percentage.toFixed(0)}%</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+</div>
+
+<style>
+  .compact-threshold-banner {
+    border-radius: 0.5rem;
+    border-width: 1px;
+    border-style: solid;
+    overflow: hidden;
+    margin-bottom: 1rem;
+  }
+
+  .banner-critical {
+    background-color: #fef2f2;
+    border-color: #fecaca;
+  }
+
+  .banner-high {
+    background-color: #fff7ed;
+    border-color: #fed7aa;
+  }
+
+  .banner-warning {
+    background-color: #fefce8;
+    border-color: #fef08a;
+  }
+
+  :global(.dark) .banner-critical {
+    background-color: rgba(239, 68, 68, 0.1);
+    border-color: rgba(239, 68, 68, 0.3);
+  }
+
+  :global(.dark) .banner-high {
+    background-color: rgba(249, 115, 22, 0.1);
+    border-color: rgba(249, 115, 22, 0.3);
+  }
+
+  :global(.dark) .banner-warning {
+    background-color: rgba(245, 158, 11, 0.1);
+    border-color: rgba(245, 158, 11, 0.3);
+  }
+
+  .banner-summary {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.75rem 1rem;
+  }
+
+  .severity-badges {
+    display: flex;
+    gap: 0.5rem;
+    flex-shrink: 0;
+  }
+
+  .severity-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 600;
+  }
+
+  .badge-critical {
+    background-color: #dc2626;
+    color: white;
+  }
+
+  .badge-high {
+    background-color: #ea580c;
+    color: white;
+  }
+
+  .badge-warning {
+    background-color: #ca8a04;
+    color: white;
+  }
+
+  .badge-count {
+    font-weight: 700;
+  }
+
+  .badge-label {
+    font-weight: 500;
+  }
+
+  .threshold-bars {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    min-width: 0;
+  }
+
+  .mini-bar-container {
+    flex: 1;
+    max-width: 80px;
+    height: 6px;
+    background-color: rgba(0, 0, 0, 0.1);
+    border-radius: 3px;
+    overflow: hidden;
+    cursor: help;
+  }
+
+  :global(.dark) .mini-bar-container {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .mini-bar {
+    height: 100%;
+    border-radius: 3px;
+    transition: width 0.3s ease;
+  }
+
+  .bar-critical {
+    background-color: #dc2626;
+  }
+
+  .bar-high {
+    background-color: #ea580c;
+  }
+
+  .bar-warning {
+    background-color: #ca8a04;
+  }
+
+  .more-count {
+    font-size: 0.625rem;
+    color: #6b7280;
+    flex-shrink: 0;
+  }
+
+  :global(.dark) .more-count {
+    color: #9ca3af;
+  }
+
+  .expand-button {
+    background: none;
+    border: none;
+    padding: 0.25rem;
+    cursor: pointer;
+    color: #6b7280;
+    transition: transform 0.2s ease;
+    flex-shrink: 0;
+  }
+
+  :global(.dark) .expand-button {
+    color: #9ca3af;
+  }
+
+  .expand-button:hover {
+    color: #374151;
+  }
+
+  :global(.dark) .expand-button:hover {
+    color: #d1d5db;
+  }
+
+  .expand-button[aria-expanded='true'] .expand-icon {
+    transform: rotate(180deg);
+  }
+
+  .expand-icon {
+    display: inline-block;
+    font-size: 0.625rem;
+    transition: transform 0.2s ease;
+  }
+
+  .banner-details {
+    padding: 0.75rem 1rem;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    background-color: rgba(0, 0, 0, 0.02);
+  }
+
+  :global(.dark) .banner-details {
+    border-top-color: rgba(255, 255, 255, 0.1);
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+
+  .details-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 0.75rem;
+  }
+
+  .detail-item {
+    padding: 0.5rem;
+    border-radius: 0.375rem;
+    background-color: white;
+    border: 1px solid #e5e7eb;
+  }
+
+  :global(.dark) .detail-item {
+    background-color: #1f2937;
+    border-color: #374151;
+  }
+
+  .detail-header {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .detail-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .dot-critical {
+    background-color: #dc2626;
+  }
+
+  .dot-high {
+    background-color: #ea580c;
+  }
+
+  .dot-warning {
+    background-color: #ca8a04;
+  }
+
+  .detail-name {
+    flex: 1;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: #374151;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  :global(.dark) .detail-name {
+    color: #d1d5db;
+  }
+
+  .detail-level {
+    font-size: 0.5rem;
+    font-weight: 700;
+    padding: 0.125rem 0.375rem;
+    border-radius: 9999px;
+    letter-spacing: 0.05em;
+  }
+
+  .level-critical {
+    background-color: #dc2626;
+    color: white;
+  }
+
+  .level-high {
+    background-color: #ea580c;
+    color: white;
+  }
+
+  .level-warning {
+    background-color: #ca8a04;
+    color: white;
+  }
+
+  .detail-metric {
+    font-size: 0.625rem;
+    color: #6b7280;
+    margin-bottom: 0.375rem;
+  }
+
+  :global(.dark) .detail-metric {
+    color: #9ca3af;
+  }
+
+  .detail-progress {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .detail-bar {
+    flex: 1;
+    height: 4px;
+    background-color: #e5e7eb;
+    border-radius: 2px;
+    overflow: hidden;
+  }
+
+  :global(.dark) .detail-bar {
+    background-color: #374151;
+  }
+
+  .detail-fill {
+    height: 100%;
+    border-radius: 2px;
+    transition: width 0.3s ease;
+  }
+
+  .fill-critical {
+    background-color: #dc2626;
+  }
+
+  .fill-high {
+    background-color: #ea580c;
+  }
+
+  .fill-warning {
+    background-color: #ca8a04;
+  }
+
+  .detail-values {
+    font-size: 0.625rem;
+    color: #6b7280;
+    font-family: monospace;
+  }
+
+  :global(.dark) .detail-values {
+    color: #9ca3af;
+  }
+
+  .detail-percent {
+    font-size: 0.625rem;
+    font-weight: 600;
+    color: #374151;
+    min-width: 2.5rem;
+    text-align: right;
+  }
+
+  :global(.dark) .detail-percent {
+    color: #d1d5db;
+  }
+
+  @media (max-width: 640px) {
+    .banner-summary {
+      flex-wrap: wrap;
+    }
+
+    .threshold-bars {
+      order: 3;
+      width: 100%;
+      flex: none;
+      margin-top: 0.5rem;
+    }
+
+    .mini-bar-container {
+      max-width: none;
+    }
+
+    .details-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>
+
+<script>
+  // Handle expand/collapse functionality
+  document.addEventListener('DOMContentLoaded', () => {
+    const expandButtons = document.querySelectorAll('.expand-button[data-toggle-id]');
+
+    expandButtons.forEach((button) => {
+      button.addEventListener('click', () => {
+        const toggleId = button.getAttribute('data-toggle-id');
+        const details = document.querySelector(`[data-details-id="${toggleId}"]`);
+
+        if (details) {
+          const isExpanded = button.getAttribute('aria-expanded') === 'true';
+          button.setAttribute('aria-expanded', String(!isExpanded));
+          details.hidden = isExpanded;
+        }
+      });
+    });
+  });
+</script>