@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

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

@@ -0,0 +1,271 @@
+---
+/**
+ * ThresholdAlert Component
+ *
+ * Displays warning/critical alerts when resource usage exceeds thresholds.
+ */
+
+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;
+}
+
+const { thresholds } = 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'
+);
+
+// If no alerts, don't render anything
+if (alertWarnings.length === 0) {
+  return null;
+}
+
+function getLevelStyles(level: string) {
+  switch (level) {
+    case 'critical':
+      return {
+        bg: 'bg-critical',
+        border: 'border-critical',
+        icon: '🚨',
+        label: 'CRITICAL',
+      };
+    case 'high':
+      return {
+        bg: 'bg-high',
+        border: 'border-high',
+        icon: '⚠️',
+        label: 'HIGH',
+      };
+    case 'warning':
+      return {
+        bg: 'bg-warning',
+        border: 'border-warning',
+        icon: '⚠',
+        label: 'WARNING',
+      };
+    default:
+      return {
+        bg: 'bg-normal',
+        border: 'border-normal',
+        icon: 'ℹ️',
+        label: 'INFO',
+      };
+  }
+}
+
+function formatNumber(num: number): string {
+  if (num >= 1_000_000_000) return `${(num / 1_000_000_000).toFixed(2)}B`;
+  if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(2)}M`;
+  if (num >= 1_000) return `${(num / 1_000).toFixed(1)}K`;
+  return num.toLocaleString();
+}
+---
+
+<div class="threshold-alerts">
+  {
+    alertWarnings.map((warning) => {
+      const styles = getLevelStyles(warning.level);
+      return (
+        <div class={`alert-banner ${styles.bg} ${styles.border}`} role="alert">
+          <span class="alert-icon" set:html={styles.icon} />
+          <div class="alert-content">
+            <div class="alert-header">
+              <span class={`alert-level level-${warning.level}`}>{styles.label}</span>
+              <span class="alert-resource">
+                {warning.resource}: {warning.resourceName}
+              </span>
+            </div>
+            <div class="alert-details">
+              <span class="alert-metric">{warning.metric}</span>
+              <span class="alert-progress">
+                <span class="progress-bar">
+                  <span
+                    class={`progress-fill fill-${warning.level}`}
+                    style={`width: ${Math.min(warning.percentage, 100)}%`}
+                  />
+                </span>
+                <span class="progress-text">
+                  {formatNumber(warning.current)} / {formatNumber(warning.limit)}(
+                  {warning.percentage.toFixed(0)}%)
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      );
+    })
+  }
+</div>
+
+<style>
+  .threshold-alerts {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .alert-banner {
+    display: flex;
+    gap: 0.75rem;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    border-width: 1px;
+    border-style: solid;
+  }
+
+  .bg-critical {
+    background-color: #fef2f2;
+  }
+  .border-critical {
+    border-color: #fecaca;
+  }
+
+  .bg-high {
+    background-color: #fff7ed;
+  }
+  .border-high {
+    border-color: #fed7aa;
+  }
+
+  .bg-warning {
+    background-color: #fefce8;
+  }
+  .border-warning {
+    border-color: #fef08a;
+  }
+
+  .bg-normal {
+    background-color: #eff6ff;
+  }
+  .border-normal {
+    border-color: #bfdbfe;
+  }
+
+  .alert-icon {
+    font-size: 1.25rem;
+    flex-shrink: 0;
+    line-height: 1;
+  }
+
+  .alert-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .alert-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 0.5rem;
+    flex-wrap: wrap;
+  }
+
+  .alert-level {
+    font-size: 0.625rem;
+    font-weight: 700;
+    padding: 0.125rem 0.5rem;
+    border-radius: 9999px;
+    letter-spacing: 0.1em;
+  }
+
+  .level-critical {
+    background-color: #dc2626;
+    color: white;
+  }
+
+  .level-high {
+    background-color: #ea580c;
+    color: white;
+  }
+
+  .level-warning {
+    background-color: #ca8a04;
+    color: white;
+  }
+
+  .alert-resource {
+    font-weight: 600;
+    color: #374151;
+    font-size: 0.875rem;
+  }
+
+  .alert-details {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+  }
+
+  .alert-metric {
+    font-size: 0.75rem;
+    color: #6b7280;
+  }
+
+  .alert-progress {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .progress-bar {
+    flex: 1;
+    max-width: 200px;
+    height: 0.375rem;
+    background-color: #e5e7eb;
+    border-radius: 9999px;
+    overflow: hidden;
+  }
+
+  .progress-fill {
+    height: 100%;
+    border-radius: 9999px;
+    transition: width 0.3s ease;
+  }
+
+  .fill-critical {
+    background-color: #dc2626;
+  }
+
+  .fill-high {
+    background-color: #ea580c;
+  }
+
+  .fill-warning {
+    background-color: #ca8a04;
+  }
+
+  .progress-text {
+    font-size: 0.75rem;
+    color: #374151;
+    font-family: monospace;
+    white-space: nowrap;
+  }
+
+  @media (max-width: 640px) {
+    .alert-progress {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .progress-bar {
+      width: 100%;
+      max-width: none;
+    }
+  }
+</style>