diff --git a/static/billing-dashboard.html b/static/billing-dashboard.html index 7fd54bd..66802bd 100644 --- a/static/billing-dashboard.html +++ b/static/billing-dashboard.html @@ -72,7 +72,7 @@ body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14 .page-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px} .page-title{font-size:24px;font-weight:600;letter-spacing:-.02em} .page-title strong{font-weight:700;background:linear-gradient(135deg,#7c5cff,#00d4a8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} -.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px} +.kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px} .kpi{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 20px;transition:box-shadow var(--tr),border-color var(--tr)} .kpi:hover{border-color:var(--border-h);box-shadow:0 1px 8px rgba(0,0,0,.3)} .kpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} @@ -82,24 +82,13 @@ body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14 .ki-blue{background:var(--blue-bg)}.ki-blue .material-symbols-outlined{color:var(--blue)} .ki-green{background:var(--green-bg)}.ki-green .material-symbols-outlined{color:var(--green)} .ki-yellow{background:var(--yellow-bg)}.ki-yellow .material-symbols-outlined{color:var(--yellow)} -.ki-red{background:var(--red-bg)}.ki-red .material-symbols-outlined{color:var(--red)} -.kpi-val{font-family:var(--mono);font-size:24px;font-weight:500;letter-spacing:-.02em;margin-bottom:6px} -.kpi-delta{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:4px} .charts-row{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-bottom:20px} .card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 20px} .card-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px} .card-title{font-size:14px;font-weight:500} .card-sub{font-size:12px;color:var(--muted)} .chart-wrap{position:relative;height:200px} -.bottom-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px} -.anomaly-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px} -.anomaly-row:last-child{border-bottom:none} -.a-svc{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} -.a-cost{font-family:var(--mono);font-size:12px;color:var(--muted)} -.a-ratio{font-family:var(--mono);font-size:11px;padding:2px 8px;border-radius:12px;font-weight:600} -.r-h{background:var(--red-bg);color:var(--red)} -.r-m{background:var(--yellow-bg);color:var(--yellow)} -.r-l{background:var(--green-bg);color:var(--green)} +.bottom-row{display:grid;grid-template-columns:2fr 1fr;gap:12px} .svc-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)} .svc-row:last-child{border-bottom:none} .svc-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} @@ -187,6 +176,28 @@ footer{padding:10px 20px 16px;font-size:11px;color:var(--faint);text-align:cente border-color: var(--border-h); color: var(--text); } +.sel-opt { + background: transparent; + border: none; + color: var(--muted); + padding: 4px 10px; + cursor: default; + border-radius: 4px; + font-size: 12px; + font-family: var(--font); +} +.sel-opt.active { + background: var(--surface-3); + color: var(--text); + font-weight: 600; +} +.blink { + animation: blink 1.2s ease-in-out infinite; +} +@keyframes blink { + 0%,100% { opacity: 1; } + 50% { opacity: .3; } +} @@ -198,13 +209,13 @@ footer{padding:10px 20px 16px;font-size:11px;color:var(--faint);text-align:cente CostGuard -
- folder_open - propane-will-491900-m5 -
+
+ folder_open + propane-will-491900-m5 +
- GCP + GCP
@@ -220,19 +231,19 @@ footer{padding:10px 20px 16px;font-size:11px;color:var(--faint);text-align:cente
- -
- CSV - PDF -
+ +
+ CSV + PDF +
@@ -271,40 +282,6 @@ footer{padding:10px 20px 16px;font-size:11px;color:var(--faint);text-align:cente -
-
-
Anomali-deteksjonOK
-
Laster...
-
-
-
Kostnad per tjenesteRangert
-
-
-
-
- Budsjett-status -
- - -
-
-
-
- - - - - 0% -
-
-
kr 0,00
-
av kr 500,00 budsjett
-
— gjennstår
-
-
-
-
warning Kan ikke nå API. @@ -315,28 +292,11 @@ footer{padding:10px 20px 16px;font-size:11px;color:var(--faint);text-align:cente Henter data...
-
-

Kostnader siste 30 dager

-

- Denne oversikten viser dine faktiske GCP-kostnader de siste 30 dagene, - hentet direkte fra BigQuery billing export for din billing-konto. -

-

- Dataene er aggregert per dato, prosjekt - og tjeneste, slik at du raskt ser hvor pengene går. -

- - - -

- Viser inntil 100 linjer med de høyeste kostnadene i perioden. Tallene kommer fra tabellen - billing_export.gcp_billing_export_v1_0171F6_057E6B_A260BA i prosjektet - propane-will-491900-m5. +

+

Kostnader siste 30 dager

+

+ Denne oversikten viser dine faktiske GCP-kostnader de siste 30 dagene, hentet direkte fra BigQuery billing export for din billing-konto. + Dataene er aggregert per dato, prosjekt og tjeneste, slik at du raskt ser hvor pengene går.

@@ -365,14 +325,6 @@ footer{padding:10px 20px 16px;font-size:11px;color:var(--faint);text-align:cente
—
— dager gjenstår
-
-
- Anomalier -
warning
-
-
—
-
siste 24t
-
@@ -404,6 +356,37 @@ footer{padding:10px 20px 16px;font-size:11px;color:var(--faint);text-align:cente
+
+
+
Kostnad per tjenesteRangert
+
+
+
+
+ Budsjett-status +
+ + +
+
+
+
+ + + + + 0% +
+
+
kr 0,00
+
av kr 500,00 budsjett
+
— gjenstår
+
+
+
+
+ @@ -413,17 +396,17 @@ footer{padding:10px 20px 16px;font-size:11px;color:var(--faint);text-align:cente