@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

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

@@ -0,0 +1,618 @@
+---
+/**
+ * ThresholdSettings Component
+ *
+ * Editable table for configuring alert thresholds per service type.
+ * Part of task-17.16: Configurable Alert Thresholds.
+ *
+ * Features:
+ * - Shows all service types with current thresholds
+ * - Inline editing of warning/high/critical percentages
+ * - Configure absolute maximum cost alerts
+ * - Enable/disable alerts per service
+ * - Save to KV via /usage/settings API
+ */
+
+interface ServiceThreshold {
+  warningPct: number;
+  highPct: number;
+  criticalPct: number;
+  absoluteMax: number;
+  enabled: boolean;
+}
+
+interface Props {
+  thresholds: Record<string, ServiceThreshold>;
+  lastUpdated?: string;
+}
+
+const { thresholds, lastUpdated } = Astro.props;
+
+// Service display labels
+const serviceLabels: Record<string, string> = {
+  workers: 'Workers',
+  d1: 'D1 Database',
+  kv: 'KV Storage',
+  r2: 'R2 Storage',
+  durableObjects: 'Durable Objects',
+  vectorize: 'Vectorize',
+  aiGateway: 'AI Gateway',
+  pages: 'Pages',
+  queues: 'Queues',
+  workflows: 'Workflows',
+};
+
+// Service order for display
+const serviceOrder = [
+  'workers',
+  'd1',
+  'kv',
+  'r2',
+  'durableObjects',
+  'vectorize',
+  'aiGateway',
+  'pages',
+  'queues',
+  'workflows',
+];
+---
+
+<div class="threshold-settings" data-thresholds={JSON.stringify(thresholds)}>
+  <div class="settings-header">
+    <h2>Alert Threshold Configuration</h2>
+    {
+      lastUpdated && (
+        <span class="last-updated">Last updated: {new Date(lastUpdated).toLocaleString()}</span>
+      )
+    }
+  </div>
+
+  <div class="settings-description">
+    <p>
+      Configure when alerts trigger for each service. Percentage thresholds are relative to free
+      tier limits.
+    </p>
+  </div>
+
+  <div class="table-wrapper">
+    <table class="threshold-table">
+      <thead>
+        <tr>
+          <th class="col-service">Service</th>
+          <th class="col-enabled">Enabled</th>
+          <th class="col-warning">Warning (%)</th>
+          <th class="col-high">High (%)</th>
+          <th class="col-critical">Critical (%)</th>
+          <th class="col-absolute">Max Cost ($)</th>
+        </tr>
+      </thead>
+      <tbody>
+        {
+          serviceOrder.map((service) => {
+            const config = thresholds[service];
+            if (!config) return null;
+            return (
+              <tr data-service={service}>
+                <td class="col-service">
+                  <span class="service-label">{serviceLabels[service] || service}</span>
+                </td>
+                <td class="col-enabled">
+                  <label class="toggle-switch">
+                    <input
+                      type="checkbox"
+                      name={`${service}-enabled`}
+                      checked={config.enabled}
+                      class="threshold-input"
+                      data-field="enabled"
+                    />
+                    <span class="toggle-slider" />
+                  </label>
+                </td>
+                <td class="col-warning">
+                  <input
+                    type="number"
+                    name={`${service}-warningPct`}
+                    value={config.warningPct}
+                    min="0"
+                    max="100"
+                    step="5"
+                    class="threshold-input number-input"
+                    data-field="warningPct"
+                  />
+                </td>
+                <td class="col-high">
+                  <input
+                    type="number"
+                    name={`${service}-highPct`}
+                    value={config.highPct}
+                    min="0"
+                    max="100"
+                    step="5"
+                    class="threshold-input number-input"
+                    data-field="highPct"
+                  />
+                </td>
+                <td class="col-critical">
+                  <input
+                    type="number"
+                    name={`${service}-criticalPct`}
+                    value={config.criticalPct}
+                    min="0"
+                    max="100"
+                    step="5"
+                    class="threshold-input number-input"
+                    data-field="criticalPct"
+                  />
+                </td>
+                <td class="col-absolute">
+                  <div class="dollar-input">
+                    <span class="dollar-sign">$</span>
+                    <input
+                      type="number"
+                      name={`${service}-absoluteMax`}
+                      value={config.absoluteMax}
+                      min="0"
+                      step="1"
+                      class="threshold-input number-input"
+                      data-field="absoluteMax"
+                    />
+                  </div>
+                </td>
+              </tr>
+            );
+          })
+        }
+      </tbody>
+    </table>
+  </div>
+
+  <div class="settings-actions">
+    <button type="button" id="reset-defaults" class="btn btn-secondary"> Reset to Defaults </button>
+    <button type="button" id="save-thresholds" class="btn btn-primary"> Save Changes </button>
+  </div>
+
+  <div id="save-status" class="save-status" role="status" aria-live="polite"></div>
+</div>
+
+<style>
+  .threshold-settings {
+    background: var(--card-bg, #fff);
+    border-radius: 8px;
+    padding: 1.5rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  }
+
+  .settings-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .settings-header h2 {
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--text-primary, #1a1a1a);
+  }
+
+  .last-updated {
+    font-size: 0.75rem;
+    color: var(--text-muted, #666);
+  }
+
+  .settings-description {
+    margin-bottom: 1.5rem;
+  }
+
+  .settings-description p {
+    margin: 0;
+    font-size: 0.875rem;
+    color: var(--text-secondary, #444);
+  }
+
+  .table-wrapper {
+    overflow-x: auto;
+    margin-bottom: 1.5rem;
+  }
+
+  .threshold-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.875rem;
+  }
+
+  .threshold-table th,
+  .threshold-table td {
+    padding: 0.75rem;
+    text-align: left;
+    border-bottom: 1px solid var(--border-color, #e5e7eb);
+  }
+
+  .threshold-table th {
+    font-weight: 600;
+    color: var(--text-secondary, #444);
+    background: var(--table-header-bg, #f9fafb);
+    white-space: nowrap;
+  }
+
+  .threshold-table tbody tr:hover {
+    background: var(--row-hover, #f3f4f6);
+  }
+
+  .col-service {
+    min-width: 140px;
+  }
+
+  .col-enabled {
+    width: 80px;
+    text-align: center;
+  }
+
+  .col-warning,
+  .col-high,
+  .col-critical,
+  .col-absolute {
+    width: 100px;
+  }
+
+  .service-label {
+    font-weight: 500;
+    color: var(--text-primary, #1a1a1a);
+  }
+
+  /* Toggle Switch */
+  .toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 40px;
+    height: 22px;
+  }
+
+  .toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .toggle-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: 0.3s;
+    border-radius: 22px;
+  }
+
+  .toggle-slider::before {
+    position: absolute;
+    content: '';
+    height: 16px;
+    width: 16px;
+    left: 3px;
+    bottom: 3px;
+    background-color: white;
+    transition: 0.3s;
+    border-radius: 50%;
+  }
+
+  .toggle-switch input:checked + .toggle-slider {
+    background-color: #3b82f6;
+  }
+
+  .toggle-switch input:checked + .toggle-slider::before {
+    transform: translateX(18px);
+  }
+
+  /* Number Inputs */
+  .number-input {
+    width: 70px;
+    padding: 0.375rem 0.5rem;
+    border: 1px solid var(--input-border, #d1d5db);
+    border-radius: 4px;
+    font-size: 0.875rem;
+    text-align: right;
+    background: var(--input-bg, #fff);
+    color: var(--text-primary, #1a1a1a);
+  }
+
+  .number-input:focus {
+    outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+  }
+
+  .number-input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .dollar-input {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .dollar-sign {
+    color: var(--text-muted, #666);
+    font-size: 0.875rem;
+  }
+
+  /* Actions */
+  .settings-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75rem;
+  }
+
+  .btn {
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s;
+    border: none;
+  }
+
+  .btn-secondary {
+    background: var(--btn-secondary-bg, #f3f4f6);
+    color: var(--text-primary, #1a1a1a);
+    border: 1px solid var(--border-color, #e5e7eb);
+  }
+
+  .btn-secondary:hover {
+    background: var(--btn-secondary-hover, #e5e7eb);
+  }
+
+  .btn-primary {
+    background: #3b82f6;
+    color: white;
+  }
+
+  .btn-primary:hover {
+    background: #2563eb;
+  }
+
+  .btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  /* Save Status */
+  .save-status {
+    margin-top: 1rem;
+    padding: 0.75rem;
+    border-radius: 6px;
+    font-size: 0.875rem;
+    display: none;
+  }
+
+  .save-status.success {
+    display: block;
+    background: #d1fae5;
+    color: #065f46;
+  }
+
+  .save-status.error {
+    display: block;
+    background: #fee2e2;
+    color: #991b1b;
+  }
+
+  .save-status.loading {
+    display: block;
+    background: #e0e7ff;
+    color: #3730a3;
+  }
+
+  /* Dark mode */
+  :global(.dark) .threshold-settings {
+    background: var(--card-bg, #1f2937);
+  }
+
+  :global(.dark) .threshold-table th {
+    background: var(--table-header-bg, #374151);
+  }
+
+  :global(.dark) .number-input {
+    background: var(--input-bg, #374151);
+    border-color: var(--input-border, #4b5563);
+    color: #fff;
+  }
+
+  /* Mobile responsive */
+  @media (max-width: 768px) {
+    .threshold-table th,
+    .threshold-table td {
+      padding: 0.5rem;
+      font-size: 0.8rem;
+    }
+
+    .number-input {
+      width: 55px;
+      padding: 0.25rem;
+      font-size: 0.8rem;
+    }
+
+    .settings-actions {
+      flex-direction: column;
+    }
+
+    .btn {
+      width: 100%;
+    }
+  }
+</style>
+
+<script>
+  const DEFAULT_THRESHOLDS = {
+    workers: { warningPct: 50, highPct: 75, criticalPct: 90, absoluteMax: 5, enabled: true },
+    d1: { warningPct: 40, highPct: 60, criticalPct: 80, absoluteMax: 20, enabled: true },
+    kv: { warningPct: 50, highPct: 75, criticalPct: 90, absoluteMax: 5, enabled: true },
+    r2: { warningPct: 50, highPct: 75, criticalPct: 90, absoluteMax: 20, enabled: true },
+    durableObjects: {
+      warningPct: 50,
+      highPct: 75,
+      criticalPct: 90,
+      absoluteMax: 10,
+      enabled: true,
+    },
+    vectorize: { warningPct: 50, highPct: 75, criticalPct: 90, absoluteMax: 5, enabled: true },
+    aiGateway: { warningPct: 50, highPct: 75, criticalPct: 90, absoluteMax: 0, enabled: false },
+    pages: { warningPct: 50, highPct: 75, criticalPct: 90, absoluteMax: 5, enabled: true },
+    queues: { warningPct: 50, highPct: 75, criticalPct: 90, absoluteMax: 5, enabled: true },
+    workflows: { warningPct: 50, highPct: 75, criticalPct: 90, absoluteMax: 0, enabled: false },
+  };
+
+  document.addEventListener('DOMContentLoaded', () => {
+    const container = document.querySelector('.threshold-settings');
+    if (!container) return;
+
+    const saveBtn = document.getElementById('save-thresholds');
+    const resetBtn = document.getElementById('reset-defaults');
+    const statusEl = document.getElementById('save-status');
+
+    function showStatus(message: string, type: 'success' | 'error' | 'loading') {
+      if (!statusEl) return;
+      statusEl.textContent = message;
+      statusEl.className = 'save-status ' + type;
+    }
+
+    function hideStatus() {
+      if (!statusEl) return;
+      statusEl.className = 'save-status';
+      statusEl.textContent = '';
+    }
+
+    function collectThresholds(): Record<string, Record<string, number | boolean>> {
+      const thresholds: Record<string, Record<string, number | boolean>> = {};
+      const rows = container?.querySelectorAll('tbody tr[data-service]') || [];
+
+      rows.forEach((row) => {
+        const service = row.getAttribute('data-service');
+        if (!service) return;
+
+        const inputs = row.querySelectorAll('.threshold-input');
+        const config: Record<string, number | boolean> = {};
+
+        inputs.forEach((input) => {
+          const field = input.getAttribute('data-field');
+          if (!field) return;
+
+          if (input instanceof HTMLInputElement) {
+            if (input.type === 'checkbox') {
+              config[field] = input.checked;
+            } else {
+              config[field] = parseFloat(input.value) || 0;
+            }
+          }
+        });
+
+        thresholds[service] = config;
+      });
+
+      return thresholds;
+    }
+
+    function applyThresholds(thresholds: Record<string, Record<string, number | boolean>>) {
+      Object.entries(thresholds).forEach(([service, config]) => {
+        const row = container?.querySelector(`tr[data-service="${service}"]`);
+        if (!row) return;
+
+        Object.entries(config).forEach(([field, value]) => {
+          const input = row.querySelector(`[data-field="${field}"]`);
+          if (input instanceof HTMLInputElement) {
+            if (input.type === 'checkbox') {
+              input.checked = Boolean(value);
+            } else {
+              input.value = String(value);
+            }
+          }
+        });
+      });
+    }
+
+    async function saveThresholds() {
+      if (saveBtn instanceof HTMLButtonElement) {
+        saveBtn.disabled = true;
+      }
+      showStatus('Saving...', 'loading');
+
+      try {
+        const thresholds = collectThresholds();
+        // Include credentials to pass Cloudflare Access JWT cookie
+        const response = await fetch('/api/usage/settings', {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ thresholds }),
+          credentials: 'include',
+        });
+
+        const result = await response.json();
+
+        if (!response.ok || !result.success) {
+          throw new Error(result.message || 'Failed to save settings');
+        }
+
+        showStatus('Settings saved successfully!', 'success');
+        setTimeout(hideStatus, 3000);
+      } catch (error) {
+        const msg = error instanceof Error ? error.message : 'Unknown error';
+        showStatus('Error: ' + msg, 'error');
+      } finally {
+        if (saveBtn instanceof HTMLButtonElement) {
+          saveBtn.disabled = false;
+        }
+      }
+    }
+
+    function resetToDefaults() {
+      if (confirm('Reset all thresholds to default values?')) {
+        applyThresholds(DEFAULT_THRESHOLDS);
+        showStatus('Reset to defaults. Click Save to persist.', 'success');
+        setTimeout(hideStatus, 3000);
+      }
+    }
+
+    saveBtn?.addEventListener('click', saveThresholds);
+    resetBtn?.addEventListener('click', resetToDefaults);
+
+    // Disable inputs when service is disabled
+    container?.addEventListener('change', (e) => {
+      const target = e.target;
+      if (!(target instanceof HTMLInputElement)) return;
+
+      if (target.getAttribute('data-field') === 'enabled') {
+        const row = target.closest('tr');
+        if (!row) return;
+
+        const inputs = row.querySelectorAll('.number-input');
+        inputs.forEach((input) => {
+          if (input instanceof HTMLInputElement) {
+            input.disabled = !target.checked;
+          }
+        });
+      }
+    });
+
+    // Initialize disabled state
+    const checkboxes = container?.querySelectorAll('[data-field="enabled"]') || [];
+    checkboxes.forEach((checkbox) => {
+      if (checkbox instanceof HTMLInputElement && !checkbox.checked) {
+        const row = checkbox.closest('tr');
+        const inputs = row?.querySelectorAll('.number-input') || [];
+        inputs.forEach((input) => {
+          if (input instanceof HTMLInputElement) {
+            input.disabled = true;
+          }
+        });
+      }
+    });
+  });
+</script>