## Summary
Completes the Sentinel **Page Object Model** compliance sweep of the
Playwright suite (follow-up to #13727, which covered the non-Dashboards
shards). Every raw `page.locator(...)` / `page.getBy*(...)` selector —
in **actions and assertions** — is relocated out of the spec files into
the relevant page object; specs now call page-object methods/getters
only.
**Result: 0 raw fixture-`page` selectors across the entire
`playwright-tests` suite** (single-line *and* multi-line, verified with
a dotall/multiline scanner). Together with #13727, the whole suite is
POM-clean.
## What's in this PR
**Dashboards shards — ~1,460 selectors** relocated into their page
objects (`dashboard-panel-configs/actions/edit/time`, `dashboard-chart`,
`dashboard-variables-scoped`, `dashboard-filter`, `dashboard-drilldown`,
`crossLinkPage`, `visualise`, `dashboard-share-export`,
`dashboard-create`, `dashboard-settings`, `dashboard-variables`):
| Shard | selectors |
|-------|----------:|
| Dashboard-Config-Settings (11 specs) | ~255 |
| Dashboards-Variables (12 specs, 4 batches) | ~693 |
| Dashboards-Tables (7 specs) | ~127 |
| Dashboards-Charts (9 specs) | ~81 |
| Dashboards-Core + Visualize (10 specs) | ~144 |
| Dashboards-Settings + Panel-DateTime (8 specs) | ~107 |
| Dashboard-Regression (1 spec) | ~52 |
**Correlation UI specs** (3 new `Correlation/*.ui.spec.js` that arrived
via main's merge, after the original audit) — converted into a new
`correlationDrawerPage` + an extended `correlationSettingsPage`, with
`PageManager` wired into specs that previously used none.
**Audit stragglers** the original **single-line** audit grep
undercounted — multi-line `page\n.locator(...)` chains in
`logstable.spec.js` (→ `logsPage.getTableHeaderByField()`) and
`dashboard-streaming.spec.js` (2 add-panel selectors).
**AI-review fixes** (DeepSeek, on this PR) — removed 2 dead-code
duplicate getters + 1 redundant method alias (merge artifacts from the
sequential batch commits).
One Node-context `console.log` (`dashboard-general-setting`'s
`beforeEach`) → `testLogger.info`.
## Approach
Nearly every Dashboards spec shares the same page objects, so the work
was done in **sequential batches** (one committed, verified unit at a
time) to keep page-object edits conflict-free. 13 commits, mapping 1:1
to those batches.
## Not changed (by design)
- **`waitForTimeout`** left as-is — logged in the audit, not rewritten
(per direction).
- **Browser-context code inside `page.evaluate()` /
`waitForFunction()`** (`document.querySelector`, `window.*`) left as-is
— it runs in the page's JS engine, not Node, so `testLogger` (a Node
module) can't be called there. *No `console.*` remained in dashboards
specs*; the Node-context ones were converted to `testLogger`.
- **`newPage.locator(...)`** on separate popup `Page` instances left
as-is (not the fixture `page`).
## Verification
- **0 raw fixture-`page` selectors** across all specs — single- and
multi-line, comments stripped.
- All changed `.js` files pass `node --check`.
- **CI-gated** for browser execution (no local runs), consistent with
#13727. The enterprise E2E crosscheck already passed against this PR.
## Stats
82 files changed (+3,355 / −2,211) — 61 specs, 21 page objects.
Selectors **moved into page objects, not deleted**.
# Design System Unification — one visual language, enforced end-to-end
Establishes **one source of truth for every visual decision**, wires the
whole app to it, and **locks it in with CI** so it can't drift back.
### Foundations
- **Design-token system ("one knob per decision").** Every colour, text
size, spacing, corner radius, and shadow is a named token defined in
exactly one place — change the token, every screen updates. Collapsed
hundreds of near-duplicate definitions and removed "fake" duplicates
that pretended to be different but weren't.
- **Shared component library (O2).** Buttons, tables, dialogs, drawers,
form fields, badges, etc. already know the correct colours, spacing, and
dark-mode behaviour; new screens compose them instead of hand-styling.
Added new primitives on this branch (`OContent`, `KpiCard`) and
standardized existing ones.
- **One page structure everywhere** (`PageLayout` / `AppPageHeader` /
`AppPage` / `OContent`) — titles, breadcrumbs, spacing, and content
edges line up identically across every screen.
- **One table implementation** — all tabular data uses the same table
(sorting, density, sticky headers, empty states).
- **Styling consolidated onto Tailwind; old systems removed** —
hand-written CSS driven to the practical minimum, the legacy **Quasar**
framework fully removed, surviving stylesheets required to justify
themselves.
- **Two-tier corner radius** — a tight **4px** for controls and a soft
**12px** for surfaces (dialogs, cards, the app shell), plus a
full-circle option — replacing five radius names that all secretly meant
the same thing.
### Detailed improvements across screens
**Page structure & alignment** — unified page shell rolled across ~40+
screens (IAM, Settings, Alerts, Dashboards, Functions, Pipelines, RUM,
Metrics, Synthetics, Billing, editors, lists); one header height; one
page-edge grid driving headers, tables, rails, and tabs; unified
side-rail widths; inset rail selection/hover pills; every tab strip on
the grid line; tightened title/subtitle spacing.
**Tables (cross-screen)** — action columns consistently centered (incl.
Organizations); unified row-number column with no "#" truncation;
non-standard tables restyled to match; loading skeletons made
geometrically identical to the loaded table; symmetric edge inset; IAM
first-column grid alignment fixed.
**Traces** — flame graph + span-detail correlation panel fixes;
correlated logs/metrics placeholder fit; sticky headers; removed a
double scrollbar + a 1px sliver; aligned table fonts/badges; polished
the service detail drawer; stream-selector + correlation alignment;
aligned loading spinners; floating overlay arrows for the
disabled-services strip.
**Logs** — field-list controls aligned (focus ring no longer clipped);
detail-drawer spacing + metrics-tab overflow fixed; Run Query toolbar
tidied; listing sizing + stray border fixed.
**Metrics** — search added to the "Type" facet rail and aligned with the
other rails; proper empty states for the explorer and facet rail.
**Dashboards** — removed inconsistent card shadows; tightened
borders/resizers/field-list spacing; aligned View Dashboard chrome to
the grid; chart colours via the token helper.
**Home** — redesigned the Usage tab; added reusable KPI stat cards so
summary strips stop drifting.
**Dark mode** — new theme-switch animation; fixed a 1px content shift on
toggle and a white flash on load; fixed AI-chat text and assorted
light/dark mismatches; completed the token-driven dark migration.
**Empty states, controls & small polish** — restored 3 broken
empty-state animations; adopted the standard empty state; added the
sliding indicator to the toggle control; fixed the Quality-page inset +
drawer badge; refreshed Search History / Schedulers; fixed the
alert-history drawer scrollbar + timeline hover; removed a stray
menu-bar border.
### Dead code & cruft removal
- **Deleted the entire legacy `utilities.css`** global stylesheet (well
over a thousand lines) — evacuated in waves, roughly half of it dead
once traced.
- **Removed Quasar entirely**, including dead `.q-*` styles and ~25
phantom `--q-*` variables that were silently breaking bits of the UI.
- Stripped hundreds of **dead CSS classes and tokens that compiled to
nothing** — e.g. 46 uses of a colour class with no backing token, a
no-op shadow class on 51 elements, dead layout/utility classes, a
leftover `card-container` block, a dead table-actions token, and a
mis-registered gradient that rendered nothing.
- Cut **unused keyframe animations (19 → 3)** and removed **unused
components** + a stray build artifact.
- Net effect: a much smaller, leaner styling surface — less to maintain,
fewer dead ends to copy.
## Safety & verification
Large but low-risk: this is overwhelmingly a **styling and structure**
change, not product behaviour or data. Guarded by the
design-token/consistency/type checks above plus the existing test suite,
and reviewed screen-by-screen.
---------
Co-authored-by: Kirtan Thakkar <kirtan@kiara.tech>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Co-authored-by: ktx-mihir <mihir.patel@kiara.tech>
ktx-akshay
Shrinath Rao
ktx-kirtan