Zakaria/floci-ui
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(api): add CloudWatch alarms and metric charts to the cloud explorer
CI / checks (pull_request) Successful in 27m29s
Details

Browse Source
This commit is contained in:
Zakaria
2026-10-24 22:48:41 -04:00
parent f4b3e45f3d
commit 6dd33b8f65
26 changed files with 1551 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/src/index.css
+59
View File
@@ -25,6 +25,7 @@
--status-error: #ff9a9a;
--accent: #6cc4ff;
--chart-line: #2f9ce0;
--accent-tint: rgba(108, 196, 255, 0.16);
--accent-tint-faint: rgba(108, 196, 255, 0.07);
--accent-tint-border: rgba(108, 196, 255, 0.35);
@@ -148,6 +149,7 @@
--status-error: #bd3f30;
--accent: var(--coral);
--chart-line: #d9573f;
--accent-tint: rgba(237, 111, 92, 0.14);
--accent-tint-faint: rgba(237, 111, 92, 0.07);
--accent-tint-border: rgba(237, 111, 92, 0.3);
@@ -244,6 +246,7 @@
--status-error: #ff8da1;
--accent: #4eff96;
--chart-line: #2fae67;
--accent-tint: rgba(78, 255, 150, 0.14);
--accent-tint-faint: rgba(78, 255, 150, 0.07);
--accent-tint-border: rgba(78, 255, 150, 0.34);
@@ -6538,3 +6541,59 @@ tr[aria-current="true"] td { background: var(--hover-md); }
.cdn-viewer .copy-value { overflow-wrap: anywhere; min-width: 0; }
.cdn-viewer small { flex-basis: 100%; }
/* CloudWatch: alarm states carry a dot in the status colour next to their label. */
.badge.ok::before, .badge.alarm::before, .badge.insufficient-data::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
}
.badge.ok::before { background: var(--status-ok); }
.badge.alarm::before { background: var(--status-error); }
.badge.insufficient-data::before { background: var(--text-3); }
.badge.alarm { border: 1px solid var(--status-error); }
.cloudwatch-state-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cloudwatch-facts { padding: 0 16px 12px; }
.cloudwatch-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; padding: 0 16px 12px; }
.cloudwatch-range { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 16px 8px; }
.cloudwatch-range .input { width: auto; }
.cloudwatch-chart { padding: 4px 16px 12px; }
.cloudwatch-chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.cloudwatch-chart-head .cloudwatch-range { padding: 0; }
.cloudwatch-chart-title { margin: 0 0 6px; font-weight: 600; overflow-wrap: anywhere; }
.cloudwatch-form-actions { display: flex; flex-wrap: wrap; gap: 8px; align-self: end; }
.cognito-row-actions-cell { text-align: right; }
.metric-chart { position: relative; width: 100%; min-width: 0; }
.metric-chart svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.metric-chart svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.metric-chart--empty { padding: 24px 0; }
.metric-chart-grid { stroke: var(--border-faint); stroke-width: 1; }
.metric-chart-axis { fill: var(--text-3); font-size: 11px; }
.metric-chart-line { fill: none; stroke: var(--chart-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.metric-chart-marker { fill: var(--chart-line); stroke: var(--surface); stroke-width: 2; }
.metric-chart-marker--active { stroke-width: 2.5; }
.metric-chart-threshold { stroke: var(--text-3); stroke-width: 1.5; stroke-dasharray: 5 4; }
.metric-chart-crosshair { stroke: var(--text-3); stroke-width: 1; }
.metric-chart-label { fill: var(--text-3); font-size: 11px; }
.metric-chart-label--strong { fill: var(--text-bright, var(--text)); font-weight: 600; }
.metric-chart-tooltip {
position: absolute;
top: 8px;
display: grid;
gap: 2px;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--elevated);
font-size: 12px;
pointer-events: none;
white-space: nowrap;
}
.metric-chart-tooltip strong { font-size: 14px; color: var(--text-bright, var(--text)); }
.metric-chart-key { display: inline-block; width: 12px; height: 2px; margin: 0 6px 3px 0; background: var(--chart-line); vertical-align: middle; }
.metric-chart-table { margin-top: 8px; }
.metric-chart-table summary { cursor: pointer; color: var(--text-3); font-size: 12px; }
.metric-chart-table table { margin-top: 8px; }