From f15e27e5fd2ea3d6823f514e183fbb4ee93f9bc1 Mon Sep 17 00:00:00 2001 From: ktx-vaidehi <134508096+ktx-vaidehi@users.noreply.github.com> Date: Mon, 20 Jul 2026 23:36:21 +0530 Subject: [PATCH] refactor: design token migration + CI guards (#13173) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # 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 Co-authored-by: Claude Fable 5 Co-authored-by: ktx-mihir --- .claude/skills/ui-architect/SKILL.md | 137 +- .../references/component-catalog.md | 2 +- .../ui-architect/references/conventions.md | 27 +- .../references/creating-components.md | 5 +- .../ui-architect/references/design-tokens.md | 103 +- .../ui-architect/references/forms-inputs.md | 8 +- .../references/forms-specialized.md | 2 +- .../ui-architect/references/house-rules.md | 102 +- .../references/overlay-navigation.md | 2 +- .../ui-architect/references/page-recipes.md | 41 +- .gitattributes | 1 + .github/workflows/build-pr-image.yml | 12 + .github/workflows/playwright.yml | 12 + .../pages/alertsPages/alertCreationWizard.js | 29 +- .../alertsPages/alertDestinationsPage.js | 14 +- .../pages/alertsPages/alertManagement.js | 2 +- .../pages/alertsPages/alertTemplatesPage.js | 32 +- .../pages/alertsPages/alertsPage.js | 45 +- .../anomalyPages/anomalyDetectionPage.js | 16 +- tests/ui-testing/pages/commonActions.js | 2 +- .../pages/dashboardPages/dashCreation.js | 2 +- .../pages/dashboardPages/dashboard-import.js | 2 +- .../dashboardPages/dashboard-multi-sql.js | 2 +- .../dashboardPages/dashboard-panel-configs.js | 14 +- .../pages/dashboardPages/dashboard-refresh.js | 2 +- .../dashboardPages/dashboard-selectors.js | 14 +- .../dashboardPages/dashboard-settings.js | 2 +- .../dashboard-variables-scoped.js | 2 +- .../pages/dashboardPages/dashboardPage.js | 2 +- .../generalPages/correlationSettingsPage.js | 44 +- .../pages/generalPages/enrichmentPage.js | 8 +- .../ui-testing/pages/generalPages/homePage.js | 8 +- .../pages/generalPages/sanityPage.js | 4 +- .../pages/generalPages/schemaPage.js | 4 +- .../pages/generalPages/themePage.js | 12 +- tests/ui-testing/pages/iamPages/iamPage.js | 5 +- tests/ui-testing/pages/logsPages/logsPage.js | 24 +- .../pages/metricsPages/metricsBuilderPage.js | 10 +- .../pages/metricsPages/metricsPage.js | 26 +- .../pipelinesFormValidationPage.js | 2 +- .../pages/pipelinesPages/pipelinesPage.js | 36 +- .../pages/streamsPages/streamsPage.js | 9 +- .../pages/tracesPages/serviceGraphPage.js | 2 +- .../Alerts/alerts-anomaly-detection.spec.js | 2 +- .../Alerts/alerts-scheduled-features.spec.js | 4 +- .../Dashboards/crossLinking.spec.js | 2 +- .../dashboard-config-markline.spec.js | 2 +- .../Dashboards/dashboard-create-alert.spec.js | 2 +- .../Dashboards/dashboard-share-link.spec.js | 4 +- .../dashboard-table-column-filtering.spec.js | 2 +- .../dashboard-variables-dependency.spec.js | 2 +- .../dashboard-variables-global.spec.js | 2 +- .../Dashboards/utils/panelTimeSetup.js | 4 +- .../GeneralTests/theme-management.spec.js | 8 +- .../Metrics/metrics-promql-builder.spec.js | 4 +- .../metrics-table-column-order.spec.js | 2 +- .../RegressionSet/Alerts/alerts-bugs.spec.js | 2 +- .../Alerts/alerts-stream-switching.spec.js | 2 +- .../RegressionSet/Logs/logs-bugs.spec.js | 2 +- .../Logs/logs-regression.spec.js | 2 +- .../Streams/multiselect-stream.spec.js | 8 +- .../traces-autocomplete-suggestions.spec.js | 2 +- web/.stylelintrc.json | 51 + web/eslint.config.js | 362 +- web/package-lock.json | 1106 +++++- web/package.json | 10 +- web/scripts/check-css-tokens.mjs | 160 + web/scripts/check-design-consistency.mjs | 337 ++ web/scripts/check-token-purity.mjs | 221 ++ web/scripts/css-selector-diff.mjs | 109 + web/scripts/design-debt-baseline.json | 564 +++ web/scripts/find-class-consumers.mjs | 144 + web/scripts/o2-token-map.json | 179 + web/scripts/raw-token-audit.sh | 69 + web/scripts/spacing-audit.sh | 61 + web/src/App.vue | 4 +- web/src/assets/base.css | 74 - web/src/assets/images/common/monitoring.svg | 58 +- web/src/assets/images/common/windows.svg | 140 +- web/src/assets/images/ingestion/airbyte.svg | 44 +- web/src/assets/images/ingestion/java.svg | 18 +- .../assets/images/ingestion/microsoft-iis.svg | 50 +- web/src/assets/images/ingestion/python.svg | 26 +- web/src/assets/images/ingestion/rust.svg | 8 +- web/src/assets/images/left_nav/dashb2.svg | 112 +- web/src/assets/images/pipeline/query.svg | 72 +- web/src/assets/images/streams/config.svg | 60 +- web/src/assets/images/streams/timeline.svg | 8 +- web/src/assets/main.css | 39 - web/src/assets/styles/log-highlighting.css | 18 +- web/src/components/AttributeValueCell.vue | 2 +- .../components/AutoRefreshInterval.spec.ts | 14 - web/src/components/AutoRefreshInterval.vue | 33 +- web/src/components/CodeQueryEditor.vue | 255 +- web/src/components/CommunitySlackInvite.vue | 10 +- web/src/components/ConfirmDialog.spec.ts | 2 +- web/src/components/CopyContent.vue | 2 +- .../components/CustomDateTimePicker.spec.ts | 25 +- web/src/components/CustomDateTimePicker.vue | 24 +- .../DatabaseDeprecationBanner.spec.ts | 8 +- .../components/DatabaseDeprecationBanner.vue | 5 +- web/src/components/DateTime.spec.ts | 22 +- web/src/components/DateTime.vue | 51 +- web/src/components/DateTimePicker.vue | 385 -- .../EnterpriseUpgradeDialog.spec.ts | 3 - .../components/EnterpriseUpgradeDialog.vue | 109 +- web/src/components/Header.spec.ts | 39 +- web/src/components/Header.vue | 60 +- web/src/components/HighLight.spec.ts | 59 - web/src/components/HighLight.vue | 110 - web/src/components/JsonPreview.spec.ts | 6 +- web/src/components/JsonPreview.vue | 9 +- web/src/components/MenuLink.vue | 44 +- web/src/components/NLModeQueryBar.vue | 427 --- web/src/components/O2AIChat.spec.js | 28 +- web/src/components/O2AIChat.vue | 2271 +++-------- web/src/components/O2AIConfirmDialog.vue | 80 +- web/src/components/OrganizationSelector.vue | 29 +- .../PendingSubscriptionWarning.spec.ts | 313 -- .../components/PendingSubscriptionWarning.vue | 66 - web/src/components/PredefinedThemes.spec.ts | 36 +- web/src/components/PredefinedThemes.vue | 42 +- web/src/components/QueryEditor.vue | 18 +- web/src/components/QueryPlanDialog.spec.ts | 10 - web/src/components/QueryPlanDialog.vue | 67 +- .../components/ResumePipelineDialog.spec.ts | 8 +- web/src/components/ResumePipelineDialog.vue | 4 +- web/src/components/RichTextInput.vue | 212 +- web/src/components/RouteTabs.spec.ts | 409 -- web/src/components/RouteTabs.vue | 61 - .../components/TelemetryCorrelationPanel.vue | 297 -- web/src/components/TenstackTable.spec.ts | 4 +- web/src/components/TenstackTable.vue | 187 +- web/src/components/ThemeSwitcher.vue | 20 +- web/src/components/WebinarBanner.vue | 35 +- .../about/FeatureComparisonTable.vue | 62 +- .../actionScripts/ActionScripts.spec.ts | 2 +- .../actionScripts/ActionScripts.vue | 40 +- .../actionScripts/EditScript.schema.ts | 65 +- .../components/actionScripts/EditScript.vue | 69 +- .../components/actionScripts/FileItem.spec.ts | 398 -- web/src/components/actionScripts/FileItem.vue | 100 - .../actionScripts/ScriptEditor.spec.ts | 412 -- .../components/actionScripts/ScriptEditor.vue | 85 - .../actionScripts/ScriptToolbar.schema.ts | 39 - .../actionScripts/ScriptToolbar.spec.ts | 243 -- .../actionScripts/ScriptToolbar.vue | 158 - .../ai-assistant/welcome/CapabilityCards.vue | 27 +- .../ai-assistant/welcome/O2AIHomeWelcome.vue | 2 +- .../welcome/PromptSuggestions.vue | 8 +- .../ai-assistant/welcome/WelcomeGreeting.vue | 45 +- .../ai-assistant/welcome/welcomeContent.ts | 1 - .../ai_toolsets/AddAiToolset.schema.ts | 36 +- .../components/ai_toolsets/AddAiToolset.vue | 43 +- web/src/components/alerts/AddAlert.schema.ts | 154 +- web/src/components/alerts/AddAlert.spec.ts | 2 +- web/src/components/alerts/AddAlert.vue | 182 +- .../alerts/AddDestination.schema.ts | 52 +- web/src/components/alerts/AddDestination.vue | 138 +- .../components/alerts/AddTemplate.schema.ts | 48 +- web/src/components/alerts/AddTemplate.vue | 40 +- .../components/alerts/AlertHistory.spec.ts | 8 +- web/src/components/alerts/AlertHistory.vue | 70 +- .../alerts/AlertHistoryDrawer.spec.ts | 4 +- .../components/alerts/AlertHistoryDrawer.vue | 101 +- .../alerts/AlertHistorySummary.spec.ts | 486 --- .../components/alerts/AlertHistorySummary.vue | 280 -- .../alerts/AlertHistoryTimeline.vue | 141 +- web/src/components/alerts/AlertInsights.vue | 48 +- .../alerts/AlertInsightsContextMenu.vue | 25 +- web/src/components/alerts/AlertList.vue | 89 +- .../alerts/AlertSettingsHelpDrawer.vue | 65 +- web/src/components/alerts/AlertSummary.vue | 57 +- .../alerts/AlertWizardRightColumn.spec.ts | 590 --- .../alerts/AlertWizardRightColumn.vue | 329 -- .../components/alerts/AlertsContainer.spec.ts | 441 --- web/src/components/alerts/AlertsContainer.vue | 122 - .../alerts/AlertsDestinationList.vue | 49 +- .../components/alerts/DedupSummaryCards.vue | 24 +- .../alerts/DeduplicationConfig.spec.ts | 204 - .../components/alerts/DeduplicationConfig.vue | 205 - .../components/alerts/DestinationPreview.vue | 201 +- .../alerts/DestinationTestResult.vue | 48 +- web/src/components/alerts/FieldsInput.vue | 15 +- .../components/alerts/FilterCondition.spec.ts | 2 +- web/src/components/alerts/FilterCondition.vue | 34 +- web/src/components/alerts/FilterGroup.spec.ts | 21 - web/src/components/alerts/FilterGroup.vue | 128 +- .../alerts/HorizontalStepper.spec.ts | 323 -- .../components/alerts/HorizontalStepper.vue | 219 -- web/src/components/alerts/ImportAlert.spec.ts | 2 +- web/src/components/alerts/ImportAlert.vue | 44 +- .../components/alerts/ImportDestination.vue | 45 +- .../alerts/ImportSemanticGroups.vue | 79 +- .../alerts/ImportSemanticGroupsDrawer.vue | 28 +- web/src/components/alerts/ImportTemplate.vue | 31 +- .../alerts/IncidentAlertTriggersTable.vue | 10 +- .../alerts/IncidentDetailDrawer.spec.ts | 5 +- .../alerts/IncidentDetailDrawer.vue | 383 +- .../components/alerts/IncidentList.spec.ts | 12 +- web/src/components/alerts/IncidentList.vue | 126 +- .../alerts/IncidentRCAAnalysis.spec.ts | 10 +- .../components/alerts/IncidentRCAAnalysis.vue | 250 +- .../alerts/IncidentServiceGraph.vue | 109 +- .../alerts/IncidentTableOfContents.spec.ts | 34 +- .../alerts/IncidentTableOfContents.vue | 50 +- .../alerts/IncidentTimeline.spec.ts | 22 +- .../components/alerts/IncidentTimeline.vue | 187 +- ...rganizationDeduplicationSettings.schema.ts | 24 +- .../OrganizationDeduplicationSettings.vue | 47 +- .../alerts/PipelinesDestinationList.spec.ts | 6 +- .../alerts/PipelinesDestinationList.vue | 47 +- .../alerts/PrebuiltDestinationForm.schema.ts | 16 +- .../alerts/PrebuiltDestinationForm.vue | 2 +- .../alerts/PrebuiltDestinationSelector.vue | 34 +- web/src/components/alerts/PreviewAlert.vue | 14 +- .../alerts/QueryEditorDialog.spec.ts | 6 +- .../components/alerts/QueryEditorDialog.vue | 169 +- web/src/components/alerts/RealTimeAlert.vue | 24 - .../alerts/SemanticFieldGroupsConfig.vue | 27 +- .../alerts/SemanticGroupItem.schema.ts | 7 +- .../components/alerts/SemanticGroupItem.vue | 47 +- .../components/alerts/TemplateList.spec.ts | 2 +- web/src/components/alerts/TemplateList.vue | 42 +- web/src/components/alerts/steps/Advanced.vue | 28 +- .../alerts/steps/AlertSettings.schema.ts | 60 +- .../components/alerts/steps/AlertSettings.vue | 92 +- .../alerts/steps/CompareWithPast.spec.ts | 10 +- .../alerts/steps/CompareWithPast.vue | 76 +- .../alerts/steps/Deduplication.spec.ts | 2 +- .../components/alerts/steps/Deduplication.vue | 35 +- .../alerts/steps/QueryConfig.schema.ts | 118 +- .../components/alerts/steps/QueryConfig.vue | 397 +- .../AnomalyDetectionList.spec.ts | 579 --- .../AnomalyDetectionList.vue | 471 --- .../anomaly_detection/AnomalySummary.vue | 34 +- .../steps/AnomalyAlerting.vue | 11 +- .../steps/AnomalyDetectionConfig.schema.ts | 69 +- .../steps/AnomalyDetectionConfig.vue | 193 +- .../components/cipherkeys/AddAkeylessType.vue | 34 +- .../cipherkeys/AddCipherKey.schema.spec.ts | 2 +- .../cipherkeys/AddCipherKey.schema.ts | 35 +- .../components/cipherkeys/AddCipherKey.vue | 60 +- .../cipherkeys/AddOpenobserveType.vue | 4 +- web/src/components/common/AppBreadcrumb.vue | 160 - web/src/components/common/AppDialog.spec.ts | 443 --- web/src/components/common/AppDialog.vue | 182 - web/src/components/common/BaseImport.vue | 69 +- web/src/components/common/ConstrainedPage.vue | 2 +- .../common/DualListSelector.spec.ts | 696 ---- .../components/common/DualListSelector.vue | 270 -- .../components/common/ErrorDetailPanel.vue | 4 +- web/src/components/common/FieldExpansion.vue | 17 +- .../components/common/FieldListPagination.vue | 25 +- web/src/components/common/FieldRow.vue | 2 +- .../components/common/FieldTypeBadge.spec.ts | 204 - web/src/components/common/FieldTypeBadge.vue | 73 - .../components/common/FieldValuesPanel.vue | 31 +- web/src/components/common/GroupHeader.spec.ts | 6 +- web/src/components/common/GroupHeader.vue | 2 +- .../components/common/GroupedFieldList.vue | 8 +- web/src/components/common/JsonEditor.spec.ts | 11 +- web/src/components/common/JsonEditor.vue | 10 +- web/src/components/common/KpiCard.vue | 104 + web/src/components/common/KpiCardRow.vue | 62 + .../components/common/LoadingProgress.spec.ts | 4 +- web/src/components/common/LoadingProgress.vue | 59 +- .../common/O2AIContextAddBtn.spec.js | 4 +- .../components/common/O2AIContextAddBtn.vue | 40 +- web/src/components/common/PageLayout.vue | 178 - web/src/components/common/QueryErrorState.vue | 12 +- web/src/components/common/SecondaryNav.vue | 86 - web/src/components/common/SectionHub.vue | 10 +- web/src/components/common/SectionRail.vue | 18 +- .../common/empty-states/EmptyState.vue | 28 +- .../common/empty-states/QuickStartCard.vue | 6 +- .../common/illustrations/EmptyDashboards.vue | 89 - .../common/sidebar/FolderList.spec.ts | 2 +- .../components/common/sidebar/FolderList.vue | 57 +- .../InlineSelectFolderDropdown.spec.ts | 14 +- .../sidebar/InlineSelectFolderDropdown.vue | 17 +- .../common/sidebar/SearchFieldList.vue | 128 +- .../sidebar/SelectFolderDropDown.spec.ts | 6 +- .../cross-linking/CrossLinkDialog.schema.ts | 17 +- .../cross-linking/CrossLinkDialog.vue | 8 +- .../cross-linking/CrossLinkManager.spec.ts | 8 +- .../cross-linking/CrossLinkManager.vue | 15 +- .../cross-linking/CrossLinkUserGuide.vue | 66 +- .../dashboards/AddDashboardFromGitHub.vue | 24 +- .../dashboards/AlertContextMenu.spec.ts | 4 +- .../dashboards/AlertContextMenu.vue | 6 +- .../dashboards/ColorSwatchPicker.vue | 121 +- .../dashboards/ColumnFormatControls.vue | 49 +- .../dashboards/OverrideConfigPopup.vue | 66 +- .../dashboards/PanelContainer.spec.ts | 36 +- .../components/dashboards/PanelContainer.vue | 6 +- .../PanelEditor/PanelEditor.spec.ts | 8 - .../dashboards/PanelEditor/PanelEditor.vue | 132 +- .../PanelEditor/composables/usePanelEditor.ts | 3 +- .../dashboards/PanelErrorButtons.vue | 26 +- .../dashboards/PanelSchemaRenderer.vue | 94 +- .../dashboards/QueryInspector.spec.ts | 6 - .../components/dashboards/QueryInspector.vue | 102 +- .../SelectDashboardDropdown.spec.ts | 2 +- .../dashboards/VariablesValueSelector.spec.ts | 10 +- .../dashboards/VariablesValueSelector.vue | 13 +- .../dashboards/addPanel/AddAnnotation.vue | 5 +- .../addPanel/BackGroundColorConfig.spec.ts | 13 +- .../addPanel/BackGroundColorConfig.vue | 5 +- .../addPanel/BuildFieldPopUp.schema.ts | 17 - .../addPanel/BuildFieldPopUp.spec.ts | 554 --- .../dashboards/addPanel/BuildFieldPopUp.vue | 154 - .../dashboards/addPanel/ChartSelection.vue | 15 +- .../dashboards/addPanel/ColorBySeries.vue | 3 +- .../addPanel/ColorBySeriesPopUp.schema.ts | 18 +- .../addPanel/ColorBySeriesPopUp.vue | 2 +- .../addPanel/ColorPaletteDropDown.spec.ts | 2 +- .../addPanel/ColorPaletteDropDown.vue | 20 +- .../dashboards/addPanel/ColumnOrderPopUp.vue | 12 +- .../addPanel/CommonAutoComplete.spec.ts | 663 ---- .../addPanel/CommonAutoComplete.vue | 139 - .../dashboards/addPanel/ConfigPanel.vue | 98 +- .../addPanel/ConfigPanelSearch.spec.ts | 2 +- .../addPanel/CustomChartEditor.spec.ts | 42 +- .../dashboards/addPanel/CustomChartEditor.vue | 29 +- .../addPanel/CustomHTMLEditor.spec.ts | 8 +- .../dashboards/addPanel/CustomHTMLEditor.vue | 22 +- .../addPanel/CustomMarkdownEditor.spec.ts | 60 +- .../addPanel/CustomMarkdownEditor.vue | 22 +- .../addPanel/DashboardErrors.spec.ts | 15 +- .../dashboards/addPanel/DashboardErrors.vue | 15 +- .../DashboardGeoMapsQueryBuilder.spec.ts | 11 +- .../addPanel/DashboardGeoMapsQueryBuilder.vue | 86 +- .../DashboardMapsQueryBuilder.spec.ts | 11 +- .../addPanel/DashboardMapsQueryBuilder.vue | 68 +- .../addPanel/DashboardQueryBuilder.vue | 153 +- .../addPanel/DashboardQueryEditor.spec.ts | 16 +- .../addPanel/DashboardQueryEditor.vue | 64 +- .../DashboardSankeyChartBuilder.spec.ts | 7 - .../addPanel/DashboardSankeyChartBuilder.vue | 86 +- .../addPanel/DrilldownPopUp.schema.ts | 23 +- .../dashboards/addPanel/DrilldownPopUp.vue | 92 +- .../addPanel/DrilldownUserGuide.spec.ts | 50 +- .../addPanel/DrilldownUserGuide.vue | 140 +- .../HistogramIntervalDropDown.spec.ts | 2 +- .../dashboards/addPanel/MarkLineConfig.vue | 4 +- .../addPanel/OverrideConfig.spec.ts | 8 +- .../dashboards/addPanel/PanelFieldList.vue | 70 +- .../dashboards/addPanel/PanelSidebar.spec.ts | 16 +- .../dashboards/addPanel/PanelSidebar.vue | 9 +- .../addPanel/PromQLChartConfig.spec.ts | 8 +- .../dashboards/addPanel/QueryTypeSelector.vue | 25 +- .../addPanel/ShowLegendsPopup.spec.ts | 14 - .../dashboards/addPanel/ShowLegendsPopup.vue | 42 +- .../addPanel/ValueMappingPopUp.spec.ts | 2 +- .../CustomChartConfirmDialog.vue | 2 +- .../CustomChartTypeSelector.vue | 58 +- .../dynamicFunction/DynamicFunctionPopUp.vue | 20 +- .../dynamicFunction/RawQueryBuilder.spec.ts | 4 +- .../dynamicFunction/RawQueryBuilder.vue | 2 +- .../dynamicFunction/SelectFunction.vue | 16 +- .../dashboards/panels/ChartRenderer.spec.ts | 5 +- .../dashboards/panels/ChartRenderer.vue | 99 +- .../panels/CustomChartRenderer.spec.ts | 5 +- .../dashboards/panels/CustomChartRenderer.vue | 6 +- .../dashboards/panels/GeoMapRenderer.spec.ts | 12 +- .../dashboards/panels/GeoMapRenderer.vue | 10 +- .../dashboards/panels/HTMLRenderer.spec.ts | 70 +- .../dashboards/panels/HTMLRenderer.vue | 14 +- .../panels/JsonFieldRenderer.spec.ts | 59 +- .../dashboards/panels/JsonFieldRenderer.vue | 52 +- .../dashboards/panels/MapsRenderer.spec.ts | 5 +- .../dashboards/panels/MapsRenderer.vue | 11 +- .../panels/MarkdownRenderer.spec.ts | 77 +- .../dashboards/panels/MarkdownRenderer.vue | 11 +- .../dashboards/panels/PromQLTableChart.vue | 16 +- .../dashboards/panels/TableRenderer.vue | 63 +- .../settings/AddSettingVariable.schema.ts | 51 +- .../settings/AddSettingVariable.vue | 68 +- .../dashboards/settings/TabsDeletePopUp.vue | 2 +- .../dashboards/settings/TabsSettings.spec.ts | 8 +- .../dashboards/settings/TabsSettings.vue | 10 +- .../settings/VariableAdHocValueSelector.vue | 16 +- .../settings/VariableCustomValueSelector.vue | 3 +- .../VariableQueryValueSelector.spec.ts | 2 +- .../settings/VariableQueryValueSelector.vue | 9 +- .../settings/VariableSettings.spec.ts | 30 +- .../dashboards/settings/VariableSettings.vue | 16 +- .../VariablesDependenciesGraph.spec.ts | 5 +- .../settings/VariablesDependenciesGraph.vue | 3 +- .../settings/common/DashboardHeader.spec.ts | 2 +- .../dashboards/tabs/AddTab.schema.ts | 7 +- .../dashboards/tabs/TabList.spec.ts | 25 +- .../components/dashboards/tabs/TabList.vue | 16 +- .../dashboards/viewPanel/ViewPanel.spec.ts | 52 +- .../dashboards/viewPanel/ViewPanel.vue | 30 +- .../AddEnrichmentTable.schema.spec.ts | 2 +- .../functions/AddEnrichmentTable.schema.ts | 25 +- .../functions/AddEnrichmentTable.vue | 78 +- .../functions/AddFunction.schema.spec.ts | 2 +- .../functions/AddFunction.schema.ts | 12 +- web/src/components/functions/AddFunction.vue | 52 +- .../AssociatedStreamFunction.spec.ts | 21 +- .../functions/AssociatedStreamFunction.vue | 32 +- .../functions/EnrichmentSchema.spec.ts | 8 +- .../components/functions/EnrichmentSchema.vue | 29 +- .../functions/EnrichmentTableList.spec.ts | 4 +- .../functions/EnrichmentTableList.vue | 67 +- .../functions/FullViewContainer.spec.ts | 40 +- .../functions/FullViewContainer.vue | 21 +- web/src/components/functions/FunctionList.vue | 55 +- .../components/functions/FunctionsToolbar.vue | 20 +- .../functions/RetryJobDialog.spec.ts | 335 -- .../components/functions/RetryJobDialog.vue | 424 -- .../functions/StreamRouting.spec.ts | 501 --- .../components/functions/StreamRouting.vue | 294 -- web/src/components/functions/TestFunction.vue | 91 +- .../components/iam/IngestionTokens.schema.ts | 6 +- .../components/iam/IngestionTokens.spec.ts | 2 +- web/src/components/iam/IngestionTokens.vue | 24 +- web/src/components/iam/McpServer.vue | 23 +- .../components/iam/groups/AddGroup.schema.ts | 7 +- .../components/iam/groups/AppGroups.spec.ts | 25 +- web/src/components/iam/groups/AppGroups.vue | 39 +- .../components/iam/groups/EditGroup.spec.ts | 2 +- web/src/components/iam/groups/EditGroup.vue | 23 +- .../components/iam/groups/GroupRoles.spec.ts | 2 - web/src/components/iam/groups/GroupRoles.vue | 14 +- .../iam/groups/GroupServiceAccounts.vue | 16 +- .../components/iam/groups/GroupUsers.spec.ts | 4 - web/src/components/iam/groups/GroupUsers.vue | 20 +- .../AddUpdateOrganization.schema.ts | 6 - .../organizations/ListOrganizations.spec.js | 46 +- .../iam/organizations/ListOrganizations.vue | 52 +- .../organizations/OrgCleanupTasksDialog.vue | 92 +- web/src/components/iam/quota/Quota.vue | 112 +- .../components/iam/roles/AddRole.schema.ts | 9 +- web/src/components/iam/roles/AppRoles.spec.ts | 25 +- web/src/components/iam/roles/AppRoles.vue | 22 +- web/src/components/iam/roles/EditRole.spec.js | 2 +- web/src/components/iam/roles/EditRole.vue | 50 +- .../iam/roles/EntityPermissionTable.spec.ts | 217 -- .../iam/roles/EntityPermissionTable.vue | 208 - .../components/iam/roles/PermissionsTable.vue | 13 +- web/src/components/iam/roles/RoleTable.vue | 15 +- .../AddServiceAccount.schema.ts | 35 +- .../ServiceAccountsList.spec.js | 20 +- .../serviceAccounts/ServiceAccountsList.vue | 62 +- .../components/iam/users/AddUser.schema.ts | 22 +- web/src/components/iam/users/AddUser.vue | 71 +- .../iam/users/InvitationList.spec.ts | 8 +- .../components/iam/users/InvitationList.vue | 34 +- .../iam/users/MemberInvitation.schema.ts | 8 +- .../components/iam/users/MemberInvitation.vue | 4 +- .../components/iam/users/UpdateRole.schema.ts | 7 +- web/src/components/iam/users/User.spec.ts | 22 +- web/src/components/iam/users/User.vue | 70 +- web/src/components/icons/FunctionIcon.spec.ts | 316 -- web/src/components/icons/FunctionIcon.vue | 30 - web/src/components/icons/PipelineIcon.spec.ts | 340 -- web/src/components/icons/PipelineIcon.vue | 16 - web/src/components/icons/SubTaskArrow.vue | 4 +- .../ingestion/AIIntegrations.spec.ts | 9 - .../components/ingestion/AIIntegrations.vue | 38 +- web/src/components/ingestion/Database.vue | 2 +- web/src/components/ingestion/DevOps.vue | 2 +- web/src/components/ingestion/Languages.vue | 2 +- web/src/components/ingestion/McpCrossLink.vue | 2 +- .../ingestion/MessageQueues.spec.ts | 4 - .../components/ingestion/MessageQueues.vue | 2 +- web/src/components/ingestion/Networking.vue | 2 +- web/src/components/ingestion/Others.vue | 2 +- .../components/ingestion/Recommended.spec.ts | 2 +- web/src/components/ingestion/Recommended.vue | 2 +- web/src/components/ingestion/Security.spec.ts | 36 +- web/src/components/ingestion/Security.vue | 2 +- web/src/components/ingestion/Server.vue | 2 +- .../ingestion/ai/AIIntegrationDetail.vue | 4 +- .../components/ingestion/ai/McpServerCard.vue | 4 +- .../ai/content/AIIntegrationCard.vue | 22 +- .../components/ingestion/ai/content/index.ts | 7 - .../ingestion/ai/content/renderMarkdown.ts | 5 +- web/src/components/ingestion/logs/Index.vue | 2 +- .../ingestion/logs/OtelConfig.spec.ts | 363 -- .../components/ingestion/logs/OtelConfig.vue | 89 - .../ingestion/logs/ingestionIndex.spec.ts | 6 - .../components/ingestion/metrics/Index.vue | 2 +- .../recommended/AWSIndividualServices.vue | 4 +- .../recommended/AWSIntegrationTile.vue | 6 +- .../ingestion/recommended/AWSQuickSetup.vue | 47 +- .../ingestion/recommended/AzureConfig.vue | 4 +- .../AzureIndividualServices.spec.ts | 243 -- .../recommended/AzureIndividualServices.vue | 123 - .../recommended/AzureIntegrationTile.spec.ts | 211 - .../recommended/AzureIntegrationTile.vue | 236 -- .../recommended/AzureQuickSetup.spec.ts | 258 -- .../ingestion/recommended/AzureQuickSetup.vue | 376 -- .../components/ingestion/rum/Index.spec.ts | 411 -- web/src/components/ingestion/rum/Index.vue | 159 - .../ingestion/setupCard/SetupCardRenderer.vue | 251 +- .../ingestion/setupCard/content/sqlServer.ts | 5 +- web/src/components/ingestion/traces/Index.vue | 2 +- web/src/components/login/GetStarted.vue | 38 +- web/src/components/login/Login.vue | 19 +- web/src/components/login/SsoLogin.spec.ts | 295 -- web/src/components/login/SsoLogin.vue | 106 - web/src/components/logs/ChunkedContent.vue | 4 +- web/src/components/logs/LogsHighLighting.vue | 7 +- .../components/logstream/AddStream.schema.ts | 42 +- web/src/components/logstream/AddStream.vue | 44 +- .../logstream/AssociatedRegexPatterns.spec.ts | 2 +- .../logstream/AssociatedRegexPatterns.vue | 146 +- .../logstream/LlmEvaluationSettings.schema.ts | 87 - .../logstream/LlmEvaluationSettings.spec.ts | 459 --- .../logstream/LlmEvaluationSettings.vue | 650 ---- .../logstream/PerformanceFieldsDialog.spec.ts | 14 +- .../logstream/PerformanceFieldsDialog.vue | 14 +- web/src/components/logstream/Schema.schema.ts | 17 +- web/src/components/logstream/Schema.spec.ts | 2 +- .../logstream/StreamFieldInputs.schema.ts | 13 +- .../logstream/StreamFieldInputs.vue | 22 +- .../logstream/explore/SearchBar.spec.ts | 2 +- .../logstream/explore/SearchBar.vue | 9 +- web/src/components/logstream/schema.vue | 263 +- web/src/components/pipeline/FlowChart.spec.ts | 188 - web/src/components/pipeline/FlowChart.vue | 39 - .../components/pipeline/ImportPipeline.vue | 36 +- .../NodeForm/AssociateFunction.schema.ts | 16 +- .../pipeline/NodeForm/AssociateFunction.vue | 133 +- .../pipeline/NodeForm/Condition.schema.ts | 14 +- .../pipeline/NodeForm/Condition.vue | 82 +- .../NodeForm/CreateDestinationForm.schema.ts | 53 +- .../NodeForm/CreateDestinationForm.spec.ts | 8 - .../NodeForm/CreateDestinationForm.vue | 97 +- .../NodeForm/ExternalDestination.schema.ts | 11 +- .../pipeline/NodeForm/ExternalDestination.vue | 2 +- .../pipeline/NodeForm/LlmEvaluation.schema.ts | 36 - .../pipeline/NodeForm/LlmEvaluation.spec.ts | 543 --- .../pipeline/NodeForm/LlmEvaluation.vue | 440 --- .../pipeline/NodeForm/PreviewPromqlQuery.vue | 4 +- .../pipeline/NodeForm/Query.schema.ts | 55 +- .../pipeline/NodeForm/Query.spec.ts | 8 +- .../components/pipeline/NodeForm/Query.vue | 44 +- .../NodeForm/RealtimePipeline.spec.ts | 250 -- .../pipeline/NodeForm/RealtimePipeline.vue | 50 - .../NodeForm/ScheduledPipeline.spec.js | 7 - .../pipeline/NodeForm/ScheduledPipeline.vue | 254 +- .../pipeline/NodeForm/Stream.schema.ts | 10 +- .../components/pipeline/NodeForm/Stream.vue | 37 +- web/src/components/pipeline/NodeSidebar.vue | 127 +- .../pipeline/PipelineDestinationEditor.vue | 21 +- .../components/pipeline/PipelineEditor.vue | 166 +- .../pipeline/PipelineSectionTabs.vue | 4 +- web/src/components/pipeline/PipelineView.vue | 58 +- .../components/pipeline/PipelinesList.spec.ts | 2 +- web/src/components/pipeline/PipelinesList.vue | 45 +- .../pipeline/StreamSelection.schema.ts | 8 +- .../components/pipeline/StreamSelection.vue | 16 +- .../pipeline/pipelineMeta.schema.ts | 6 +- .../pipelines/BackfillJobDetails.vue | 42 +- .../components/pipelines/BackfillJobsList.vue | 20 +- .../pipelines/CreateBackfillJobDialog.vue | 49 +- .../pipelines/EditBackfillJobDialog.vue | 22 +- .../components/pipelines/PipelineHistory.vue | 86 +- .../pipelines/backfillJob.schema.ts | 20 +- .../promql/components/LabelFilterEditor.vue | 12 +- .../promql/components/MetricSelector.vue | 2 +- .../promql/components/OperationsList.vue | 45 +- .../components/PromQLBuilderOptions.vue | 8 +- .../promql/operations/queryModeller.ts | 4 +- web/src/components/promql/types/index.ts | 29 +- web/src/components/queries/QueryList.vue | 6 - .../components/queries/RunningQueries.spec.ts | 19 +- web/src/components/queries/RunningQueries.vue | 59 +- .../queries/RunningQueriesList.spec.ts | 9 +- .../components/queries/RunningQueriesList.vue | 9 +- .../components/queries/SummaryList.spec.ts | 38 +- web/src/components/queries/SummaryList.vue | 10 +- .../query-plan/CollapsibleProjection.spec.ts | 202 - .../query-plan/CollapsibleProjection.vue | 120 - .../query-plan/MetricsSummaryCard.spec.ts | 2 +- .../query-plan/MetricsSummaryCard.vue | 26 +- .../query-plan/QueryPlanNode.spec.ts | 4 +- .../components/query-plan/QueryPlanNode.vue | 37 +- .../components/query-plan/QueryPlanTree.vue | 2 +- .../reports/CreateReport.schema.spec.ts | 6 +- .../components/reports/CreateReport.schema.ts | 105 +- web/src/components/reports/CreateReport.vue | 173 +- web/src/components/reports/ReportList.spec.js | 4 +- web/src/components/reports/ReportList.spec.ts | 13 +- web/src/components/reports/ReportList.vue | 50 +- web/src/components/rum/ErrorDetail.spec.ts | 296 -- web/src/components/rum/ErrorDetail.vue | 75 - web/src/components/rum/ErrorsList.spec.ts | 457 --- web/src/components/rum/ErrorsList.vue | 146 - .../rum/EventDetailDrawerContent.spec.ts | 8 +- .../rum/EventDetailDrawerContent.vue | 72 +- .../components/rum/FrustrationBadge.spec.ts | 207 - web/src/components/rum/FrustrationBadge.vue | 69 - .../components/rum/PlayerEventsSidebar.vue | 12 +- web/src/components/rum/PlayerTracesTab.vue | 38 +- .../rum/ResourceDetailDrawer.spec.ts | 890 ----- .../components/rum/ResourceDetailDrawer.vue | 293 -- web/src/components/rum/SearchBar.spec.ts | 971 ----- web/src/components/rum/SearchBar.vue | 359 -- web/src/components/rum/SessionsList.spec.ts | 496 --- web/src/components/rum/SessionsList.vue | 174 - web/src/components/rum/VideoPlayer.vue | 18 +- web/src/components/rum/common/KeyValueRow.vue | 4 +- .../rum/common/PerformanceMetrics.spec.ts | 218 -- .../rum/common/PerformanceMetrics.vue | 60 - .../ActionPerformanceMetrics.spec.ts | 294 -- .../performance/ActionPerformanceMetrics.vue | 98 - .../ErrorPerformanceMetrics.spec.ts | 260 -- .../performance/ErrorPerformanceMetrics.vue | 76 - .../rum/common/performance/MetricCard.spec.ts | 330 -- .../rum/common/performance/MetricCard.vue | 179 - .../ResourcePerformanceMetrics.spec.ts | 270 -- .../ResourcePerformanceMetrics.vue | 128 - .../ViewPerformanceMetrics.spec.ts | 270 -- .../performance/ViewPerformanceMetrics.vue | 172 - .../rum/correlation/TraceCorrelationCard.vue | 48 +- .../rum/errorTracking/list/ErrorIssueCell.vue | 26 +- .../rum/errorTracking/list/ErrorTrendCell.vue | 68 +- .../errorTracking/list/ErrorsFilterBar.vue | 2 +- .../rum/errorTracking/list/ErrorsKpiCards.vue | 8 +- .../list/ErrorsOverTimeChart.vue | 10 +- .../view/ErrorEventDescription.vue | 6 +- .../rum/errorTracking/view/ErrorEvents.vue | 19 +- .../errorTracking/view/ErrorHeader.spec.ts | 2 +- .../rum/errorTracking/view/ErrorHeader.vue | 12 +- .../errorTracking/view/ErrorSessionReplay.vue | 2 +- .../view/ErrorStackTrace.spec.ts | 12 +- .../errorTracking/view/ErrorStackTrace.vue | 6 +- .../errorTracking/view/PrettyStackTrace.vue | 89 +- .../rum/performance/ErrorsDashboard.vue | 2 +- .../rum/performance/PerformanceSummary.vue | 2 +- .../WebVitalsDashboard.spec.ts.backup | 1306 ------- .../rum/performance/WebVitalsDashboard.vue | 8 +- .../SessionActivitySparkline.vue | 52 +- .../sessionReplay/SessionLocationColumn.vue | 2 +- .../sessionReplay/SessionsInsightBanner.vue | 21 +- .../sessionReplay/SessionsMetricsStrip.vue | 47 +- .../settings/AddRegexPattern.schema.ts | 3 +- .../components/settings/AddRegexPattern.vue | 127 +- web/src/components/settings/AiToolsets.vue | 32 +- .../settings/BuiltInModelPricingTab.vue | 396 -- .../settings/BuiltInPatternsTab.spec.ts | 7 - .../settings/BuiltInPatternsTab.vue | 28 +- .../components/settings/CipherKeys.spec.ts | 117 +- web/src/components/settings/CipherKeys.vue | 38 +- .../settings/CorrelationSettings.spec.ts | 2 - .../settings/CorrelationSettings.vue | 47 +- .../settings/DiscoveredServices.spec.ts | 15 - .../settings/DiscoveredServices.vue | 72 +- .../DomainManagement.integration.spec.ts | 7 +- .../settings/DomainManagement.schema.ts | 17 +- .../components/settings/DomainManagement.vue | 61 +- .../settings/GenAiAgentMappingSettings.vue | 19 +- web/src/components/settings/General.schema.ts | 12 +- web/src/components/settings/General.vue | 164 +- .../settings/ImportModelPricing.vue | 16 +- .../settings/ImportRegexPattern.spec.ts | 5 - .../settings/ImportRegexPattern.vue | 42 +- web/src/components/settings/License.schema.ts | 3 - web/src/components/settings/License.vue | 131 +- .../settings/LlmProvidersSettings.vue | 38 +- .../settings/ModelPricingEditor.schema.ts | 15 +- .../settings/ModelPricingEditor.spec.ts | 58 - .../settings/ModelPricingEditor.vue | 178 +- .../settings/ModelPricingList.spec.ts | 36 +- .../components/settings/ModelPricingList.vue | 150 +- web/src/components/settings/Nodes.spec.ts | 21 - web/src/components/settings/Nodes.vue | 59 +- .../settings/OrgStorageEditor.schema.ts | 17 +- .../settings/OrgStorageEditor.spec.ts | 2 +- .../components/settings/OrgStorageEditor.vue | 128 +- .../settings/OrgStorageSettings.vue | 126 +- .../settings/OrganizationManagement.schema.ts | 11 +- .../settings/OrganizationManagement.spec.ts | 22 +- .../settings/OrganizationManagement.vue | 41 +- .../settings/OrganizationSettings.schema.ts | 10 +- .../settings/RegexPatternList.spec.ts | 10 +- .../components/settings/RegexPatternList.vue | 26 +- .../settings/ServiceIdentityConfig.spec.ts | 225 -- .../settings/ServiceIdentityConfig.vue | 375 -- .../settings/ServiceIdentitySetup.spec.ts | 2 - .../settings/ServiceIdentitySetup.vue | 492 +-- .../settings/TestModelMatchDialog.spec.ts | 24 - .../settings/TestModelMatchDialog.vue | 92 +- web/src/components/settings/index.spec.ts | 4 +- web/src/components/settings/index.vue | 27 +- .../components/settings/settingsIndex.spec.ts | 4 +- .../shared/HomeViewSkeleton.spec.ts | 115 +- .../components/shared/HomeViewSkeleton.vue | 310 +- web/src/components/shared/SkeletonBox.spec.ts | 337 -- web/src/components/shared/SkeletonBox.vue | 91 +- .../filter/FilterCreatorPopup.schema.ts | 25 - .../shared/filter/FilterCreatorPopup.spec.ts | 256 -- .../shared/filter/FilterCreatorPopup.vue | 127 - .../grid/NoOrganizationSelected.spec.ts | 8 +- .../shared/grid/NoOrganizationSelected.vue | 12 +- .../components/shared/grid/NoPanel.spec.ts | 8 - .../components/shared/grid/Pagination.spec.ts | 18 +- web/src/components/shared/grid/Pagination.vue | 3 +- .../synthetic-monitoring/MonitorTable.vue | 4 +- .../synthetics/CreateBrowserTestSkeleton.vue | 49 +- .../synthetics/configure/CheckAlerts.vue | 10 +- .../synthetics/configure/CheckAuthNetwork.vue | 6 +- .../configure/CheckBrowserDevices.vue | 10 +- .../synthetics/configure/CheckCapture.vue | 6 +- .../synthetics/configure/CheckDetails.vue | 6 +- .../synthetics/configure/CheckLocations.vue | 8 +- .../synthetics/configure/CheckRUM.vue | 2 +- .../synthetics/configure/CheckSchedule.vue | 6 +- .../configure/types/CheckHttpConfig.vue | 6 +- .../configure/types/CheckSshConfig.vue | 6 +- .../configure/types/CheckTcpConfig.vue | 6 +- .../configure/types/CheckTlsConfig.vue | 6 +- .../synthetics/journey/BrowserJourney.vue | 31 +- .../synthetics/journey/BrowserJourneyStep.vue | 14 +- .../synthetics/journey/JourneySteps.vue | 6 +- .../results/ExecutionDetailDrawer.vue | 12 +- .../results/ProtocolRunSummary.spec.ts | 4 +- .../synthetics/results/ProtocolRunSummary.vue | 70 +- .../synthetics/results/RunDetailDrawer.vue | 43 +- .../synthetics/results/RunRowExpansion.vue | 28 +- .../components/traces/FlameGraphView.spec.ts | 6 +- web/src/components/traces/FlameGraphView.vue | 54 +- web/src/components/traces/TracesTable.spec.ts | 4 +- .../dashboard/usePanelDataLoader.ts | 23 +- .../dashboard/usePanelDrilldown.ts | 2 +- .../dashboard/usePanelPromQLExecutor.ts | 49 +- .../dashboard/usePanelSearchHandlers.ts | 5 +- .../dashboard/useVariablesManager.ts | 3 +- web/src/composables/fieldValueDB.ts | 94 +- web/src/composables/metrics/useFilterHint.ts | 26 +- .../metrics/useMetricsExplorerGrid.spec.ts | 48 +- .../metrics/useMetricsExplorerGrid.ts | 124 +- .../metrics/useMetricsPreviewQueue.ts | 24 +- web/src/composables/shared/router.ts | 2 +- web/src/composables/useAiIcon.ts | 4 +- web/src/composables/useAlertForm.ts | 29 +- web/src/composables/useCorrelatedLogs.ts | 10 - web/src/composables/useDurationPercentiles.ts | 18 - .../composables/useEventFormatters.spec.ts | 26 +- web/src/composables/useEventFormatters.ts | 16 +- web/src/composables/useFieldValueStore.ts | 104 +- web/src/composables/useFieldValuesStream.ts | 2 +- web/src/composables/useLogs/logsUtils.ts | 179 +- web/src/composables/useLogs/searchAround.ts | 2 - web/src/composables/useLogs/searchState.ts | 100 +- web/src/composables/useLogs/useHistogram.ts | 26 +- web/src/composables/useLogs/usePagination.ts | 1 - web/src/composables/useLogs/useSearchBar.ts | 7 +- .../useLogs/useSearchPagination.ts | 1 - web/src/composables/useLogs/useSearchQuery.ts | 1 - .../composables/useLogs/useSearchStream.ts | 49 +- .../useLogs/useSearchStreamRefactored.ts | 45 +- .../composables/useLogs/useStreamFields.ts | 7 +- .../useLogs/useTemplateTokenizer.ts | 10 +- web/src/composables/useLogsHighlighter.ts | 13 +- .../composables/useMetricSubjectButtons.ts | 4 +- .../composables/usePrebuiltDestinations.ts | 10 - web/src/composables/useServiceGraphTree.ts | 8 +- .../composables/useSqlEditorDiagnostics.ts | 4 +- web/src/composables/useStickyColumns.spec.ts | 25 +- web/src/composables/useStickyColumns.ts | 9 +- web/src/composables/useSuggestions.ts | 6 +- web/src/composables/useTextHighlighter.ts | 59 +- web/src/composables/useTheme.ts | 34 + web/src/composables/useToolbarPins.ts | 2 - web/src/constants/features.ts | 6 - web/src/constants/themes.ts | 22 +- .../components/EvalTemplateEditor.schema.ts | 33 - .../components/EvalTemplateEditor.spec.ts | 239 -- .../components/EvalTemplateEditor.vue | 360 -- .../components/EvalTemplateList.spec.ts | 241 -- .../components/EvalTemplateList.vue | 420 -- web/src/enterprise/components/OnlineEvals.vue | 55 +- .../components/billings/Billing.spec.ts | 49 - .../components/billings/Billing.vue | 30 +- .../billings/BillingGroup.schema.ts | 6 +- .../components/billings/BillingGroup.vue | 70 +- .../components/billings/LicensePeriod.vue | 2 +- .../components/billings/TrialPeriod.spec.ts | 2 +- .../components/billings/TrialPeriod.vue | 4 +- .../components/billings/UsageMemberList.vue | 35 +- .../components/billings/UsageReportBanner.vue | 10 +- .../billings/enterprisePlan.spec.ts | 6 - .../components/billings/enterprisePlan.vue | 26 +- .../components/billings/invoiceHistory.vue | 2 +- .../enterprise/components/billings/plans.vue | 42 +- .../components/billings/proPlan.spec.ts | 7 - .../components/billings/proPlan.vue | 36 +- .../components/billings/usage.spec.ts | 5 +- .../enterprise/components/billings/usage.vue | 94 +- .../components/onlineEvals/EvalJobList.vue | 8 +- .../onlineEvals/EvalListShell.spec.ts | 2 +- .../components/onlineEvals/EvalListShell.vue | 4 +- .../onlineEvals/ImportScoreConfig.vue | 24 +- .../components/onlineEvals/ImportScorer.vue | 24 +- .../components/onlineEvals/QualityPage.vue | 73 +- .../onlineEvals/ScoreConfigLibrary.vue | 18 +- .../onlineEvals/ScoreConfigList.vue | 18 +- .../components/onlineEvals/ScorerLibrary.vue | 22 +- .../components/onlineEvals/ScorerList.vue | 8 +- .../onlineEvals/composables/useQualityData.ts | 4 +- .../composables/useQualityScoreConfigs.ts | 8 +- .../onlineEvals/forms/EvalJobDetail.vue | 441 +-- .../onlineEvals/forms/JobFormPage.schema.ts | 9 +- .../onlineEvals/forms/JobFormPage.spec.ts | 2 +- .../onlineEvals/forms/JobFormPage.vue | 92 +- .../onlineEvals/forms/KpiCardsSkeleton.vue | 21 +- .../forms/ProviderFormPage.schema.ts | 26 +- .../onlineEvals/forms/ProviderFormPage.vue | 76 +- .../onlineEvals/forms/ScoreConfigDetail.vue | 207 +- .../forms/ScoreConfigDialog.schema.ts | 53 +- .../onlineEvals/forms/ScoreConfigDialog.vue | 549 +-- .../onlineEvals/forms/ScorerDetail.vue | 129 +- .../forms/ScorerFormPage.schema.ts | 45 +- .../onlineEvals/forms/ScorerFormPage.vue | 247 +- .../onlineEvals/forms/ScorerTypeDialog.vue | 76 +- .../forms/job/JobFilterBuilder.vue | 19 +- .../onlineEvals/forms/job/JobInputMapping.vue | 22 +- .../onlineEvals/forms/job/JobPreviewPanel.vue | 22 +- .../onlineEvals/forms/job/JobScorerPicker.vue | 6 +- .../forms/scorer/ScorerTestPanel.vue | 76 +- .../quality/QualityBooleanBarsChart.vue | 9 +- .../quality/QualityBooleanTrendChart.vue | 9 +- .../quality/QualityCategoryBarsChart.vue | 9 +- .../quality/QualityConfigSidebar.vue | 175 - .../quality/QualityDetailPanel.vue | 96 +- .../quality/QualityDistributionChart.vue | 9 +- .../onlineEvals/quality/QualityKpiCard.vue | 24 +- .../quality/QualityKpiSkeleton.vue | 66 +- .../quality/QualityScoreConfigsTable.vue | 24 +- .../onlineEvals/quality/QualityTrendChart.vue | 9 +- .../views/AIObservability/AgentGraphPage.vue | 52 +- .../views/AIObservability/Index.vue | 7 +- .../views/AIObservability/LLMInsightsPage.vue | 39 +- .../views/AIObservability/SessionsPage.vue | 41 +- web/src/layouts/MainLayout.spec.ts | 2 +- web/src/layouts/MainLayout.vue | 36 +- web/src/lib/core/Badge/OBadge.types.ts | 12 +- web/src/lib/core/Badge/OBadge.vue | 10 +- web/src/lib/core/Badge/ODimensionChip.vue | 4 +- web/src/lib/core/Badge/OTag.spec.ts | 6 +- web/src/lib/core/Badge/OTag.vue | 19 +- web/src/lib/core/Badge/badgeGroups.ts | 128 +- web/src/lib/core/Button/OButton.types.ts | 2 +- web/src/lib/core/Button/OButton.vue | 68 +- web/src/lib/core/Button/OButtonGroup.types.ts | 70 +- web/src/lib/core/Button/OButtonGroup.vue | 6 +- web/src/lib/core/Card/OCard.vue | 2 +- web/src/lib/core/Code/OCode.vue | 12 +- web/src/lib/core/Code/OCodeBlock.vue | 216 +- web/src/lib/core/Collapsible/OCollapsible.vue | 17 +- web/src/lib/core/Content/OContent.vue | 70 + .../EmptyState/EmptyStateActionCard.spec.ts | 9 +- .../core/EmptyState/EmptyStateActionCard.vue | 6 +- .../EmptyState/EmptyStateIngestionCard.vue | 45 +- .../EmptyState/EmptyStateIngestionChip.vue | 43 +- web/src/lib/core/EmptyState/OEmptyState.vue | 15 +- .../EmptyState/illustrations/EmptyAlert.vue | 8 +- .../illustrations/EmptyAllClear.vue | 18 +- .../EmptyState/illustrations/EmptyBoard.vue | 41 +- .../EmptyState/illustrations/EmptyBox.vue | 8 +- .../illustrations/EmptyBrokenPanel.vue | 8 +- .../illustrations/EmptyBrowserCheck.vue | 2 + .../EmptyState/illustrations/EmptyBuilder.vue | 22 +- .../EmptyState/illustrations/EmptyCheck.vue | 8 +- .../EmptyState/illustrations/EmptyConnect.vue | 10 +- .../EmptyState/illustrations/EmptyError.vue | 16 +- .../illustrations/EmptyExplorer.vue | 34 +- .../illustrations/EmptyFunction.vue | 8 +- .../EmptyState/illustrations/EmptyHistory.vue | 10 +- .../illustrations/EmptyHourglass.vue | 37 +- .../EmptyState/illustrations/EmptyLogs.vue | 8 +- .../illustrations/EmptyPipeline.vue | 8 +- .../EmptyState/illustrations/EmptyQuery.vue | 8 +- .../EmptyState/illustrations/EmptyReport.vue | 8 +- .../illustrations/EmptySchedule.vue | 10 +- .../illustrations/EmptyServiceGraph.vue | 11 + .../illustrations/EmptyServicesCatalog.vue | 6 + .../illustrations/EmptyStreamSelect.vue | 6 + .../EmptyState/illustrations/EmptyTrace.vue | 8 +- .../EmptyState/illustrations/EmptyWaiting.vue | 74 +- .../core/EmptyState/illustrations/index.ts | 2 +- web/src/lib/core/Icon/McpLogo.vue | 2 +- web/src/lib/core/Icon/OIcon.icons.ts | 7 +- web/src/lib/core/Icon/OIcon.vue | 2 +- web/src/lib/core/Navbar/ONavGroup.vue | 22 +- web/src/lib/core/Navbar/ONavbar.spec.ts | 2 +- web/src/lib/core/Navbar/ONavbar.types.ts | 14 + web/src/lib/core/Navbar/ONavbar.vue | 142 +- .../core/PageHeader/OPageHeader.vue} | 60 +- web/src/lib/core/PageLayout/OPageLayout.vue | 257 ++ web/src/lib/core/Shortcut/OShortcut.vue | 6 +- web/src/lib/core/Splitter/OSplitter.vue | 29 +- .../lib/core/Table/OTable.flexwidth.spec.ts | 28 +- web/src/lib/core/Table/OTable.spec.ts | 2 +- web/src/lib/core/Table/OTable.types.ts | 25 +- web/src/lib/core/Table/OTable.vue | 108 +- web/src/lib/core/Table/cells/OCodeCell.vue | 6 +- web/src/lib/core/Table/cells/ODataBarCell.vue | 4 +- web/src/lib/core/Table/cells/ONumberCell.vue | 6 +- web/src/lib/core/Table/cells/OTimeCell.vue | 4 +- web/src/lib/core/Table/cells/OUserCell.vue | 4 +- web/src/lib/core/Table/cells/statusVariant.ts | 7 +- .../composables/useTableColumnPersistence.ts | 4 +- .../core/Table/composables/useTableCore.ts | 46 +- .../Table/composables/useTableHighlight.ts | 22 +- .../core/Table/sub-components/OTableBody.vue | 12 +- .../Table/sub-components/OTableBodyCell.vue | 57 +- .../Table/sub-components/OTableBodyRow.vue | 34 +- .../sub-components/OTableColumnToggle.vue | 14 +- .../core/Table/sub-components/OTableError.vue | 2 +- .../sub-components/OTableExpandButton.vue | 2 +- .../Table/sub-components/OTableHeader.vue | 75 +- .../Table/sub-components/OTableLoading.vue | 124 +- .../Table/sub-components/OTablePagination.vue | 25 +- .../core/ToggleGroup/OToggleGroup.types.ts | 11 + web/src/lib/core/ToggleGroup/OToggleGroup.vue | 141 +- .../lib/core/ToggleGroup/OToggleGroupItem.vue | 22 +- web/src/lib/core/Typography/OText.types.ts | 2 +- web/src/lib/core/Typography/OText.vue | 8 +- web/src/lib/data/Timeline/OTimeline.vue | 12 +- .../lib/data/Timeline/OTimelineItem.types.ts | 14 +- web/src/lib/data/Timeline/OTimelineItem.vue | 4 +- web/src/lib/data/Tree/OTreeNode.vue | 24 +- web/src/lib/feedback/Banner/OBanner.vue | 14 +- .../InnerLoading/OInnerLoading.types.ts | 10 + .../feedback/InnerLoading/OInnerLoading.vue | 4 +- .../lib/feedback/Skeleton/OSkeleton.spec.ts | 53 +- web/src/lib/feedback/Skeleton/OSkeleton.vue | 74 +- web/src/lib/feedback/Toast/OToast.vue | 25 +- web/src/lib/forms/Checkbox/OCheckbox.types.ts | 2 +- web/src/lib/forms/Checkbox/OCheckbox.vue | 6 +- web/src/lib/forms/Color/OColor.vue | 18 +- web/src/lib/forms/Combobox/OCombobox.vue | 12 +- web/src/lib/forms/Date/ODate.vue | 14 +- .../lib/forms/DateTime/OFormDateTimeRange.vue | 12 +- .../DateTimeRange/ODateRangeCalendar.vue | 31 +- .../forms/DateTimeRange/ODateTimeRange.vue | 28 +- web/src/lib/forms/File/OFile.vue | 15 +- web/src/lib/forms/Form/OForm.spec.ts | 2 +- web/src/lib/forms/Form/OForm.types.ts | 2 +- web/src/lib/forms/Form/OForm.vue | 18 +- web/src/lib/forms/Form/useOForm.ts | 2 +- web/src/lib/forms/Input/OInput.types.ts | 2 +- web/src/lib/forms/Input/OInput.vue | 29 +- web/src/lib/forms/Input/OTextarea.types.ts | 2 +- web/src/lib/forms/Input/OTextarea.vue | 16 +- .../lib/forms/OptionGroup/OOptionGroup.vue | 4 +- web/src/lib/forms/Radio/ORadio.types.ts | 2 +- web/src/lib/forms/Radio/ORadio.vue | 6 +- web/src/lib/forms/Range/ORange.vue | 20 +- web/src/lib/forms/Select/OSelect.types.ts | 2 +- web/src/lib/forms/Select/OSelect.vue | 86 +- web/src/lib/forms/Select/OSelectItem.vue | 2 +- web/src/lib/forms/Slider/OSlider.vue | 7 +- web/src/lib/forms/Switch/OSwitch.types.ts | 4 +- web/src/lib/forms/Switch/OSwitch.vue | 6 +- web/src/lib/forms/TagInput/OTagInput.vue | 33 +- web/src/lib/forms/Time/OTime.vue | 18 +- web/src/lib/lists/FieldList/OFieldLabel.vue | 4 +- web/src/lib/lists/FieldList/OFieldList.vue | 58 +- web/src/lib/lists/FieldList/OFieldRow.vue | 4 +- .../lib/navigation/Pagination/OPagination.vue | 6 +- web/src/lib/navigation/Stepper/OStep.vue | 2 +- web/src/lib/navigation/Stepper/OStepper.vue | 8 +- web/src/lib/navigation/Tabs/OTab.vue | 15 +- web/src/lib/navigation/Tabs/OTabPanel.spec.ts | 8 - web/src/lib/navigation/Tabs/OTabs.spec.ts | 5 +- web/src/lib/navigation/Tabs/OTabs.vue | 8 +- web/src/lib/overlay/Dialog/ODialog.spec.ts | 40 - web/src/lib/overlay/Dialog/ODialog.vue | 54 +- web/src/lib/overlay/Drawer/ODrawer.spec.ts | 40 - web/src/lib/overlay/Drawer/ODrawer.types.ts | 12 + web/src/lib/overlay/Drawer/ODrawer.vue | 56 +- web/src/lib/overlay/Dropdown/ODropdown.vue | 2 +- .../lib/overlay/Dropdown/ODropdownItem.vue | 2 +- web/src/lib/overlay/Popover/OPopover.vue | 2 +- web/src/lib/overlay/Tooltip/OTooltip.vue | 25 +- web/src/lib/styles/tokens/base.css | 897 ++--- web/src/lib/styles/tokens/component.css | 3413 +++-------------- web/src/lib/styles/tokens/dark.css | 558 ++- web/src/lib/styles/tokens/semantic.css | 379 +- .../ShortcutCheatsheet.vue | 57 +- web/src/locales/languages/en-US.json | 18 +- web/src/locales/numberFormat.ts | 6 +- web/src/main.ts | 4 + .../correlation/CorrelatedLogsTable.vue | 134 +- .../correlation/CorrelationEventHeader.vue | 22 +- .../correlation/DimensionFilterEditor.spec.ts | 697 ---- .../correlation/DimensionFilterEditor.vue | 255 -- .../correlation/DimensionFiltersBar.vue | 2 +- .../TelemetryCorrelationDashboard.spec.ts | 8 +- .../TelemetryCorrelationDashboard.vue | 133 +- .../correlation/TimeRangeEditor.schema.ts | 69 - .../correlation/TimeRangeEditor.spec.ts | 323 -- .../plugins/correlation/TimeRangeEditor.vue | 376 -- web/src/plugins/logs/DetailTable.spec.ts | 12 +- web/src/plugins/logs/DetailTable.vue | 97 +- web/src/plugins/logs/FunctionSelector.spec.ts | 39 +- web/src/plugins/logs/FunctionSelector.vue | 18 +- web/src/plugins/logs/Index.vue | 100 +- web/src/plugins/logs/IndexList.vue | 108 +- web/src/plugins/logs/JsonPreview.vue | 48 +- web/src/plugins/logs/LogsNoStreamState.vue | 2 +- .../logs/SearchBar.SavedFunction.schema.ts | 5 - .../logs/SearchBar.SavedView.schema.ts | 11 +- web/src/plugins/logs/SearchBar.spec.ts | 4 +- web/src/plugins/logs/SearchBar.vue | 289 +- web/src/plugins/logs/SearchHistory.vue | 175 +- .../plugins/logs/SearchJobInspector.spec.ts | 46 +- web/src/plugins/logs/SearchJobInspector.vue | 173 +- web/src/plugins/logs/SearchResult.spec.ts | 2 +- web/src/plugins/logs/SearchResult.vue | 355 +- .../plugins/logs/SearchSchedulersList.spec.ts | 10 - web/src/plugins/logs/SearchSchedulersList.vue | 134 +- web/src/plugins/logs/SyntaxGuide.spec.ts | 7 +- web/src/plugins/logs/SyntaxGuide.vue | 130 +- web/src/plugins/logs/TenstackTable.vue | 173 +- web/src/plugins/logs/TransformSelector.vue | 25 +- .../plugins/logs/VisualizeLogsQuery.spec.ts | 15 +- web/src/plugins/logs/VisualizeLogsQuery.vue | 2 +- .../logs/components/FieldExpansion.spec.ts | 6 +- .../components/FieldListPagination.spec.ts | 558 --- .../logs/components/FieldListPagination.vue | 258 -- .../plugins/logs/components/FieldRow.spec.ts | 2 +- .../components/LogsPluginFieldList.spec.ts | 543 --- .../logs/components/LogsPluginFieldList.vue | 348 -- .../logs/data-table/CellActions.spec.ts | 10 +- .../plugins/logs/data-table/CellActions.vue | 10 +- web/src/plugins/logs/patterns/PatternCard.vue | 24 +- .../logs/patterns/PatternDetailsDialog.vue | 69 +- .../plugins/logs/patterns/PatternList.spec.ts | 2 +- web/src/plugins/logs/patterns/PatternList.vue | 44 +- .../logs/patterns/PatternStatistics.spec.ts | 213 - .../logs/patterns/PatternStatistics.vue | 59 - .../logs/patterns/WildcardValuePopover.vue | 81 +- .../plugins/metrics/AddToDashboard.spec.ts | 13 - web/src/plugins/metrics/AddToDashboard.vue | 2 +- web/src/plugins/metrics/Index.spec.ts | 6 - web/src/plugins/metrics/Index.vue | 32 +- web/src/plugins/metrics/MetricLegends.spec.ts | 151 +- web/src/plugins/metrics/MetricLegends.vue | 2 +- web/src/plugins/metrics/MetricList.spec.ts | 1274 ------ web/src/plugins/metrics/MetricList.vue | 538 --- .../metrics/SyntaxGuideMetrics.spec.ts | 15 +- .../plugins/metrics/SyntaxGuideMetrics.vue | 42 +- .../metrics/explorer/FunctionConfigDialog.vue | 27 +- .../metrics/explorer/LabelFilterBar.vue | 12 +- .../metrics/explorer/MetricCard.spec.ts | 2 +- .../plugins/metrics/explorer/MetricCard.vue | 87 +- .../metrics/explorer/MetricCardChart.vue | 45 +- .../metrics/explorer/MetricsExplorer.spec.ts | 2 +- .../metrics/explorer/MetricsExplorer.vue | 133 +- .../metrics/explorer/PrefixFilterPanel.vue | 15 +- web/src/plugins/pipelines/CustomEdge.vue | 5 +- web/src/plugins/pipelines/CustomNode.spec.ts | 4 +- web/src/plugins/pipelines/CustomNode.vue | 321 +- web/src/plugins/pipelines/EdgeWithButton.vue | 4 - web/src/plugins/pipelines/PipelineFlow.vue | 24 +- web/src/plugins/traces/DbSpanDetails.vue | 26 +- web/src/plugins/traces/Index.vue | 92 +- web/src/plugins/traces/IndexList.spec.ts | 2 +- web/src/plugins/traces/IndexList.vue | 116 +- web/src/plugins/traces/LLMContentRenderer.vue | 144 +- web/src/plugins/traces/LLMErrorTable.vue | 16 +- .../traces/LLMInsightsDashboard.spec.ts | 10 +- .../plugins/traces/LLMInsightsDashboard.vue | 77 +- .../plugins/traces/LLMInsightsSkeleton.vue | 148 +- web/src/plugins/traces/LLMSchemaPanel.vue | 36 +- web/src/plugins/traces/SearchBar.vue | 38 +- web/src/plugins/traces/SearchResult.spec.ts | 1 - web/src/plugins/traces/SearchResult.vue | 73 +- web/src/plugins/traces/ServiceGraph.vue | 201 +- .../traces/ServiceGraphEdgeSidePanel.vue | 1205 ------ .../traces/ServiceGraphNodeSidePanel.spec.ts | 49 +- .../traces/ServiceGraphNodeSidePanel.vue | 251 +- .../plugins/traces/ServicesCatalog.spec.ts | 19 +- web/src/plugins/traces/ServicesCatalog.vue | 93 +- web/src/plugins/traces/SessionDetails.spec.ts | 12 +- web/src/plugins/traces/SessionDetails.vue | 361 +- web/src/plugins/traces/SessionRibbon.vue | 48 +- web/src/plugins/traces/SessionsList.spec.ts | 9 +- web/src/plugins/traces/SessionsList.vue | 42 +- web/src/plugins/traces/SpanBlock.spec.ts | 4 +- web/src/plugins/traces/SpanBlock.vue | 38 +- web/src/plugins/traces/SpanRenderer.spec.ts | 292 -- web/src/plugins/traces/SpanRenderer.vue | 73 - web/src/plugins/traces/SyntaxGuide.spec.ts | 90 +- web/src/plugins/traces/SyntaxGuide.vue | 74 +- web/src/plugins/traces/ThreadToolCalls.vue | 139 +- web/src/plugins/traces/ThreadView.vue | 236 +- web/src/plugins/traces/TraceDAG.spec.ts | 165 +- web/src/plugins/traces/TraceDAG.vue | 93 +- .../TraceDetails.all-missing-fields.spec.ts | 1 - .../TraceDetails.missing-span-kind.spec.ts | 3 +- web/src/plugins/traces/TraceDetails.spec.ts | 16 +- web/src/plugins/traces/TraceDetails.vue | 260 +- .../traces/TraceDetailsSidebar.spec.ts | 19 +- .../plugins/traces/TraceDetailsSidebar.vue | 1115 ++---- .../plugins/traces/TraceEvaluationsView.vue | 1121 ------ web/src/plugins/traces/TraceHeader.spec.ts | 15 +- web/src/plugins/traces/TraceHeader.vue | 9 +- web/src/plugins/traces/TraceTree.spec.ts | 10 +- web/src/plugins/traces/TraceTree.vue | 100 +- .../plugins/traces/TracesNoStreamState.vue | 2 +- web/src/plugins/traces/TurnPreviewCard.vue | 28 +- .../components/ServiceCatalogBarCell.vue | 30 +- .../traces/components/SpanStatusCodeBadge.vue | 4 +- .../traces/components/TraceErrorTab.vue | 226 +- .../traces/components/TraceLatencyCell.vue | 33 +- .../traces/components/TraceServiceCell.vue | 10 +- .../traces/components/TraceTimestampCell.vue | 2 +- .../components/TracesSearchResultList.vue | 30 +- .../traces/composables/useLLMInsights.ts | 23 +- .../plugins/traces/composables/useSessions.ts | 9 +- .../composables/useTracesTableColumns.ts | 8 +- .../traces/config/llmInsightsPanels.ts | 30 +- web/src/plugins/traces/llmAgentFilter.ts | 6 +- web/src/plugins/traces/llmInsightsCache.ts | 2 +- .../traces/llmInsightsDashboard.utils.ts | 4 +- web/src/plugins/traces/llmPanelSchema.ts | 37 +- web/src/plugins/traces/llmTrendPanel.utils.ts | 22 - .../metrics/TracesAnalysisDashboard.vue | 116 +- .../metrics/TracesMetricsContextMenu.vue | 10 +- .../traces/metrics/TracesMetricsDashboard.vue | 37 +- web/src/plugins/traces/threadView.utils.ts | 18 - web/src/plugins/traces/traceDetails.utils.ts | 9 +- web/src/plugins/traces/tracesIndex.utils.ts | 5 +- .../plugins/traces/tracesSearchBar.utils.ts | 6 +- web/src/router/index.ts | 7 +- web/src/services/action_scripts.ts | 2 +- web/src/services/incidents.ts | 2 +- web/src/services/reports.ts | 2 +- web/src/services/users.ts | 2 +- web/src/styles/base-elements.css | 331 ++ .../fonts/ibm-plex-mono-latin-400.woff2 | Bin 14708 -> 0 bytes .../fonts/ibm-plex-mono-latin-500.woff2 | Bin 14888 -> 0 bytes .../fonts/ibm-plex-mono-latin-600.woff2 | Bin 15620 -> 0 bytes .../fonts/ibm-plex-mono-latin-ext-400.woff2 | Bin 13348 -> 0 bytes .../fonts/ibm-plex-mono-latin-ext-500.woff2 | Bin 13432 -> 0 bytes .../fonts/ibm-plex-mono-latin-ext-600.woff2 | Bin 14328 -> 0 bytes .../fonts/ibm-plex-sans-latin-400.woff2 | Bin 22588 -> 0 bytes .../fonts/ibm-plex-sans-latin-500.woff2 | Bin 24184 -> 0 bytes .../fonts/ibm-plex-sans-latin-600.woff2 | Bin 24252 -> 0 bytes .../fonts/ibm-plex-sans-latin-700.woff2 | Bin 22832 -> 0 bytes .../fonts/ibm-plex-sans-latin-ext-400.woff2 | Bin 15980 -> 0 bytes .../fonts/ibm-plex-sans-latin-ext-500.woff2 | Bin 16456 -> 0 bytes .../fonts/ibm-plex-sans-latin-ext-600.woff2 | Bin 16448 -> 0 bytes .../fonts/ibm-plex-sans-latin-ext-700.woff2 | Bin 16188 -> 0 bytes ...V9wNvrwlNstMKW3Y6K5WMwd-1aLZx3lE4-Hw.woff2 | Bin 17308 -> 0 bytes ...V9wNvrwlNstMKW3Y6K5WMwd-RaLZx3lE4-Hw.woff2 | Bin 22828 -> 0 bytes ...V9wNvrwlNstMKW3Y6K5WMwd-ZaLZx3lE4-Hw.woff2 | Bin 11516 -> 0 bytes ...V9wNvrwlNstMKW3Y6K5WMwd-daLZx3lE4-Hw.woff2 | Bin 29384 -> 0 bytes ...EOvV9wNvrwlNstMKW3Y6K5WMwd-laLZx3lE4.woff2 | Bin 33052 -> 0 bytes ...n64CL7U8upHZIbMV51Q42ptCp7t1R-tQKr51.woff2 | Bin 31040 -> 0 bytes ...CL7U8upHZIbMV51Q42ptCp7t4R-tQKr51pE8.woff2 | Bin 21584 -> 0 bytes ...CL7U8upHZIbMV51Q42ptCp7t6R-tQKr51pE8.woff2 | Bin 10280 -> 0 bytes ...CL7U8upHZIbMV51Q42ptCp7t7R-tQKr51pE8.woff2 | Bin 27308 -> 0 bytes ...CL7U8upHZIbMV51Q42ptCp7txR-tQKr51pE8.woff2 | Bin 16388 -> 0 bytes web/src/styles/keyframes.css | 52 + web/src/styles/palette-reset.css | 31 + web/src/styles/tailwind.css | 116 +- web/src/test/unit/Nodes.spec.ts | 11 - web/src/test/unit/helpers/setupTests.ts | 4 +- web/src/test/unit/mockData/overview.ts | 131 + web/src/test/unit/mockData/synthetics.ts | 4 +- .../plugins/logs/TransformSelector.spec.ts | 201 +- .../components/FieldListPagination.spec.ts | 380 -- .../components/LogsPluginFieldList.spec.ts | 549 --- .../unit/plugins/pipelines/CustomNode.spec.ts | 46 +- web/src/test/unit/views/AppMetrics.spec.ts | 60 - web/src/test/unit/views/AppTraces.spec.ts | 72 - .../unit/views/RUM/RealUserMonitoring.spec.ts | 16 - web/src/utils/alerts/alertDataTransforms.ts | 1 - web/src/utils/alerts/alertPayload.ts | 15 +- web/src/utils/alerts/alertQueryBuilder.ts | 3 - web/src/utils/alerts/alertSummaryGenerator.ts | 4 +- web/src/utils/alerts/conditionsFormatter.ts | 239 +- web/src/utils/alerts/focusManager.ts | 1 - web/src/utils/chartTheme.ts | 71 + web/src/utils/commons.ts | 2 +- web/src/utils/dashboard/aliasUtils.ts | 35 +- web/src/utils/dashboard/chartColorUtils.ts | 1 - .../utils/dashboard/chartDimensionUtils.ts | 14 +- web/src/utils/dashboard/colorPalette.ts | 1 - .../utils/dashboard/convertCustomChartData.ts | 649 ++-- .../utils/dashboard/convertPivotTableData.ts | 2 +- .../utils/dashboard/convertPromQLData.spec.ts | 33 +- web/src/utils/dashboard/convertPromQLData.ts | 21 +- web/src/utils/dashboard/convertSQLData.ts | 4 +- .../utils/dashboard/heatmapDefaults.spec.ts | 5 +- web/src/utils/dashboard/heatmapDefaults.ts | 8 +- .../utils/dashboard/legendConfiguration.ts | 6 +- web/src/utils/dashboard/panelTimeUtils.ts | 2 +- .../promql/convertPromQLGaugeChart.spec.ts | 9 +- .../promql/convertPromQLGaugeChart.ts | 3 +- .../promql/convertPromQLHeatmapChart.spec.ts | 17 +- .../promql/convertPromQLHeatmapChart.ts | 74 +- .../promql/convertPromQLTableChart.ts | 4 +- .../dashboard/promql/shared/axisBuilder.ts | 8 +- .../utils/dashboard/promql/shared/spectral.ts | 9 +- web/src/utils/dashboard/promqlSeed.ts | 20 +- .../sql/charts/convertSQLGaugeChart.ts | 8 +- .../sql/charts/convertSQLHBarChart.ts | 2 +- .../sql/charts/convertSQLHStackedChart.ts | 2 +- .../sql/charts/convertSQLHeatmapChart.ts | 10 +- .../sql/charts/convertSQLMetricChart.ts | 2 +- .../sql/charts/convertSQLPieDonutChart.ts | 13 +- .../sql/charts/convertSQLStackedChart.ts | 2 +- .../dashboard/sql/shared/contextBuilder.ts | 17 +- .../dashboard/sql/shared/seriesBuilder.ts | 5 +- .../dashboard/sql/shared/trellisConfig.ts | 3 +- web/src/utils/dashboard/sqlProcessData.ts | 40 +- web/src/utils/dashboard/urlTimeParams.ts | 2 +- web/src/utils/date.ts | 10 +- web/src/utils/fieldCategories.ts | 2 +- web/src/utils/fonts.ts | 117 + web/src/utils/html.ts | 6 +- web/src/utils/logs/convertLogData.spec.ts | 13 +- web/src/utils/logs/convertLogData.ts | 6 +- web/src/utils/logs/statusParser.ts | 86 +- web/src/utils/metrics/explorerUrlState.ts | 4 +- web/src/utils/metrics/metricDefaults.js | 50 +- web/src/utils/metrics/metricFamily.ts | 2 +- web/src/utils/metrics/metricIntent.ts | 8 +- web/src/utils/metrics/metricPanelSeed.ts | 16 +- web/src/utils/metrics/prefixGrouping.ts | 14 +- web/src/utils/prebuilt-templates/email.ts | 6 +- web/src/utils/prebuilt-templates/slack.ts | 2 +- .../utils/rum/sessionReplayChangeFormat.ts | 22 +- web/src/utils/theme.spec.ts | 32 +- web/src/utils/theme.ts | 209 +- web/src/utils/traces/convertTraceData.ts | 4 +- web/src/utils/traces/traceColors.spec.ts | 44 +- web/src/utils/traces/traceColors.ts | 54 +- .../utils/traces/treeTooltipHelpers.spec.ts | 6 +- web/src/utils/traces/treeTooltipHelpers.ts | 36 +- .../utils/traces/treeVisualizationEngine.ts | 7 +- web/src/views/About.vue | 161 +- web/src/views/ActionScript.spec.ts | 111 - web/src/views/ActionScript.vue | 40 - web/src/views/AddAlertView.vue | 2 +- web/src/views/AppAlerts.spec.ts | 2 +- web/src/views/AppAlerts.vue | 2 +- web/src/views/AppMetrics.spec.ts | 61 - web/src/views/AppMetrics.vue | 21 - web/src/views/AppTraces.spec.ts | 47 - web/src/views/AppTraces.vue | 22 - web/src/views/AwsMarketplaceSetup.schema.ts | 10 +- web/src/views/AwsMarketplaceSetup.vue | 29 +- web/src/views/AzureMarketplaceSetup.schema.ts | 11 +- web/src/views/AzureMarketplaceSetup.vue | 27 +- web/src/views/CorrelationDemo.spec.ts | 410 -- web/src/views/CorrelationDemo.vue | 207 - .../views/Dashboards/DashboardJsonEditor.vue | 5 +- .../Dashboards/DashboardSettings.spec.ts | 18 +- .../views/Dashboards/DashboardSettings.vue | 39 +- web/src/views/Dashboards/Dashboards.spec.ts | 34 +- web/src/views/Dashboards/Dashboards.vue | 66 +- .../Dashboards/ImportDashboard.schema.ts | 26 +- web/src/views/Dashboards/ImportDashboard.vue | 90 +- .../Dashboards/PanelLayoutSettings.spec.ts | 4 +- .../views/Dashboards/PanelLayoutSettings.vue | 13 +- .../Dashboards/RenderDashboardCharts.spec.ts | 8 - .../Dashboards/RenderDashboardCharts.vue | 76 +- .../Dashboards/ScheduledDashboards.spec.ts | 27 +- .../views/Dashboards/ScheduledDashboards.vue | 70 +- web/src/views/Dashboards/ViewDashboard.vue | 117 +- .../Dashboards/addPanel/AddCondition.spec.ts | 12 - .../Dashboards/addPanel/AddCondition.vue | 7 +- .../Dashboards/addPanel/AddJoinPopUp.vue | 28 +- .../Dashboards/addPanel/AddPanel.schema.ts | 4 +- .../Dashboards/addPanel/AddPanel.spec.ts | 78 +- .../views/Dashboards/addPanel/AddPanel.vue | 130 +- .../addPanel/DashboardFiltersOption.vue | 3 +- .../views/Dashboards/addPanel/Group.spec.ts | 4 +- web/src/views/Dashboards/addPanel/Group.vue | 7 +- .../views/Dashboards/viewDashboard.spec.ts | 17 +- web/src/views/DetailTable.spec.ts | 273 -- web/src/views/DetailTable.vue | 129 - web/src/views/EmptyStateDemo.vue | 20 +- web/src/views/Error404.vue | 13 +- web/src/views/Functions.spec.ts | 8 +- web/src/views/Functions.vue | 38 +- web/src/views/HomeChatHistory.vue | 25 +- web/src/views/HomeView.vue | 137 +- .../views/IdentityAccessManagement.spec.ts | 8 +- web/src/views/IdentityAccessManagement.vue | 6 +- web/src/views/Ingestion.spec.ts | 6 +- web/src/views/Ingestion.vue | 30 +- web/src/views/LogStream.spec.ts | 2 +- web/src/views/LogStream.vue | 42 +- web/src/views/Login.vue | 5 +- web/src/views/Logs.spec.ts | 54 - web/src/views/Logs.vue | 21 - web/src/views/MemberSubscription.spec.ts | 6 +- web/src/views/MemberSubscription.vue | 9 +- web/src/views/OverviewSkeleton.vue | 116 + web/src/views/OverviewTab.spec.ts | 629 +++ web/src/views/OverviewTab.vue | 334 +- web/src/views/PinnedDashboardTab.vue | 10 +- web/src/views/PromQL/QueryBuilder.vue | 26 +- web/src/views/RUM/AppErrors.vue | 43 +- web/src/views/RUM/AppPerformance.spec.ts | 3 - web/src/views/RUM/AppPerformance.vue | 26 +- web/src/views/RUM/AppSessions.vue | 61 +- web/src/views/RUM/ErrorViewer.spec.ts | 2 +- web/src/views/RUM/ErrorViewer.vue | 6 +- web/src/views/RUM/RealUserMonitoring.vue | 9 +- web/src/views/RUM/SessionViewer.vue | 27 +- web/src/views/RUM/SourceMapDropzone.vue | 18 +- web/src/views/RUM/SourceMaps.spec.ts | 8 +- web/src/views/RUM/SourceMaps.vue | 14 +- web/src/views/RUM/UploadSourceMaps.schema.ts | 15 +- web/src/views/RUM/UploadSourceMaps.vue | 26 +- web/src/views/Search.spec.ts | 47 - web/src/views/Search.vue | 22 - web/src/views/ShortUrl.spec.ts | 2 +- web/src/views/ShortUrl.vue | 2 +- web/src/views/StreamExplorer.vue | 2 +- web/src/views/SyntheticMonitoring.vue | 24 +- web/src/views/UsageTab.spec.ts | 50 +- web/src/views/UsageTab.vue | 1042 ++--- .../views/__snapshots__/ShortUrl.spec.ts.snap | 2 +- .../synthetics/CreateBrowserTest.spec.ts | 2 +- .../views/synthetics/CreateBrowserTest.vue | 22 +- .../synthetics/CreateProtocolCheck.spec.ts | 2 +- .../views/synthetics/CreateProtocolCheck.vue | 15 +- .../views/synthetics/MonitorResults.spec.ts | 4 +- web/src/views/synthetics/MonitorResults.vue | 30 +- web/src/views/synthetics/MonitorRuns.vue | 222 +- .../synthetics/MonitorStatusTimeline.spec.ts | 8 +- .../synthetics/MonitorStatusTimeline.vue | 14 +- web/src/views/synthetics/RunDetail.vue | 70 +- 1341 files changed, 25080 insertions(+), 73593 deletions(-) create mode 100644 .gitattributes create mode 100644 web/.stylelintrc.json create mode 100644 web/scripts/check-css-tokens.mjs create mode 100644 web/scripts/check-design-consistency.mjs create mode 100644 web/scripts/check-token-purity.mjs create mode 100644 web/scripts/css-selector-diff.mjs create mode 100644 web/scripts/design-debt-baseline.json create mode 100644 web/scripts/find-class-consumers.mjs create mode 100644 web/scripts/o2-token-map.json create mode 100644 web/scripts/raw-token-audit.sh create mode 100644 web/scripts/spacing-audit.sh delete mode 100644 web/src/assets/base.css delete mode 100644 web/src/assets/main.css delete mode 100644 web/src/components/DateTimePicker.vue delete mode 100644 web/src/components/HighLight.spec.ts delete mode 100644 web/src/components/HighLight.vue delete mode 100644 web/src/components/NLModeQueryBar.vue delete mode 100644 web/src/components/PendingSubscriptionWarning.spec.ts delete mode 100644 web/src/components/PendingSubscriptionWarning.vue delete mode 100644 web/src/components/RouteTabs.spec.ts delete mode 100644 web/src/components/RouteTabs.vue delete mode 100644 web/src/components/TelemetryCorrelationPanel.vue delete mode 100644 web/src/components/actionScripts/FileItem.spec.ts delete mode 100644 web/src/components/actionScripts/FileItem.vue delete mode 100644 web/src/components/actionScripts/ScriptEditor.spec.ts delete mode 100644 web/src/components/actionScripts/ScriptEditor.vue delete mode 100644 web/src/components/actionScripts/ScriptToolbar.schema.ts delete mode 100644 web/src/components/actionScripts/ScriptToolbar.spec.ts delete mode 100644 web/src/components/actionScripts/ScriptToolbar.vue delete mode 100644 web/src/components/alerts/AlertHistorySummary.spec.ts delete mode 100644 web/src/components/alerts/AlertHistorySummary.vue delete mode 100644 web/src/components/alerts/AlertWizardRightColumn.spec.ts delete mode 100644 web/src/components/alerts/AlertWizardRightColumn.vue delete mode 100644 web/src/components/alerts/AlertsContainer.spec.ts delete mode 100644 web/src/components/alerts/AlertsContainer.vue delete mode 100644 web/src/components/alerts/DeduplicationConfig.spec.ts delete mode 100644 web/src/components/alerts/DeduplicationConfig.vue delete mode 100644 web/src/components/alerts/HorizontalStepper.spec.ts delete mode 100644 web/src/components/alerts/HorizontalStepper.vue delete mode 100644 web/src/components/alerts/RealTimeAlert.vue delete mode 100644 web/src/components/anomaly_detection/AnomalyDetectionList.spec.ts delete mode 100644 web/src/components/anomaly_detection/AnomalyDetectionList.vue delete mode 100644 web/src/components/common/AppBreadcrumb.vue delete mode 100644 web/src/components/common/AppDialog.spec.ts delete mode 100644 web/src/components/common/AppDialog.vue delete mode 100644 web/src/components/common/DualListSelector.spec.ts delete mode 100644 web/src/components/common/DualListSelector.vue delete mode 100644 web/src/components/common/FieldTypeBadge.spec.ts delete mode 100644 web/src/components/common/FieldTypeBadge.vue create mode 100644 web/src/components/common/KpiCard.vue create mode 100644 web/src/components/common/KpiCardRow.vue delete mode 100644 web/src/components/common/PageLayout.vue delete mode 100644 web/src/components/common/SecondaryNav.vue delete mode 100644 web/src/components/common/illustrations/EmptyDashboards.vue delete mode 100644 web/src/components/dashboards/addPanel/BuildFieldPopUp.schema.ts delete mode 100644 web/src/components/dashboards/addPanel/BuildFieldPopUp.spec.ts delete mode 100644 web/src/components/dashboards/addPanel/BuildFieldPopUp.vue delete mode 100644 web/src/components/dashboards/addPanel/CommonAutoComplete.spec.ts delete mode 100644 web/src/components/dashboards/addPanel/CommonAutoComplete.vue delete mode 100644 web/src/components/functions/RetryJobDialog.spec.ts delete mode 100644 web/src/components/functions/RetryJobDialog.vue delete mode 100644 web/src/components/functions/StreamRouting.spec.ts delete mode 100644 web/src/components/functions/StreamRouting.vue delete mode 100644 web/src/components/iam/roles/EntityPermissionTable.spec.ts delete mode 100644 web/src/components/iam/roles/EntityPermissionTable.vue delete mode 100644 web/src/components/icons/FunctionIcon.spec.ts delete mode 100644 web/src/components/icons/FunctionIcon.vue delete mode 100644 web/src/components/icons/PipelineIcon.spec.ts delete mode 100644 web/src/components/icons/PipelineIcon.vue delete mode 100644 web/src/components/ingestion/logs/OtelConfig.spec.ts delete mode 100644 web/src/components/ingestion/logs/OtelConfig.vue delete mode 100644 web/src/components/ingestion/recommended/AzureIndividualServices.spec.ts delete mode 100644 web/src/components/ingestion/recommended/AzureIndividualServices.vue delete mode 100644 web/src/components/ingestion/recommended/AzureIntegrationTile.spec.ts delete mode 100644 web/src/components/ingestion/recommended/AzureIntegrationTile.vue delete mode 100644 web/src/components/ingestion/recommended/AzureQuickSetup.spec.ts delete mode 100644 web/src/components/ingestion/recommended/AzureQuickSetup.vue delete mode 100644 web/src/components/ingestion/rum/Index.spec.ts delete mode 100644 web/src/components/ingestion/rum/Index.vue delete mode 100644 web/src/components/login/SsoLogin.spec.ts delete mode 100644 web/src/components/login/SsoLogin.vue delete mode 100644 web/src/components/logstream/LlmEvaluationSettings.schema.ts delete mode 100644 web/src/components/logstream/LlmEvaluationSettings.spec.ts delete mode 100644 web/src/components/logstream/LlmEvaluationSettings.vue delete mode 100644 web/src/components/pipeline/FlowChart.spec.ts delete mode 100644 web/src/components/pipeline/FlowChart.vue delete mode 100644 web/src/components/pipeline/NodeForm/LlmEvaluation.schema.ts delete mode 100644 web/src/components/pipeline/NodeForm/LlmEvaluation.spec.ts delete mode 100644 web/src/components/pipeline/NodeForm/LlmEvaluation.vue delete mode 100644 web/src/components/pipeline/NodeForm/RealtimePipeline.spec.ts delete mode 100644 web/src/components/pipeline/NodeForm/RealtimePipeline.vue delete mode 100644 web/src/components/query-plan/CollapsibleProjection.spec.ts delete mode 100644 web/src/components/query-plan/CollapsibleProjection.vue delete mode 100644 web/src/components/rum/ErrorDetail.spec.ts delete mode 100644 web/src/components/rum/ErrorDetail.vue delete mode 100644 web/src/components/rum/ErrorsList.spec.ts delete mode 100644 web/src/components/rum/ErrorsList.vue delete mode 100644 web/src/components/rum/FrustrationBadge.spec.ts delete mode 100644 web/src/components/rum/FrustrationBadge.vue delete mode 100644 web/src/components/rum/ResourceDetailDrawer.spec.ts delete mode 100644 web/src/components/rum/ResourceDetailDrawer.vue delete mode 100644 web/src/components/rum/SearchBar.spec.ts delete mode 100644 web/src/components/rum/SearchBar.vue delete mode 100644 web/src/components/rum/SessionsList.spec.ts delete mode 100644 web/src/components/rum/SessionsList.vue delete mode 100644 web/src/components/rum/common/PerformanceMetrics.spec.ts delete mode 100644 web/src/components/rum/common/PerformanceMetrics.vue delete mode 100644 web/src/components/rum/common/performance/ActionPerformanceMetrics.spec.ts delete mode 100644 web/src/components/rum/common/performance/ActionPerformanceMetrics.vue delete mode 100644 web/src/components/rum/common/performance/ErrorPerformanceMetrics.spec.ts delete mode 100644 web/src/components/rum/common/performance/ErrorPerformanceMetrics.vue delete mode 100644 web/src/components/rum/common/performance/MetricCard.spec.ts delete mode 100644 web/src/components/rum/common/performance/MetricCard.vue delete mode 100644 web/src/components/rum/common/performance/ResourcePerformanceMetrics.spec.ts delete mode 100644 web/src/components/rum/common/performance/ResourcePerformanceMetrics.vue delete mode 100644 web/src/components/rum/common/performance/ViewPerformanceMetrics.spec.ts delete mode 100644 web/src/components/rum/common/performance/ViewPerformanceMetrics.vue delete mode 100644 web/src/components/rum/performance/WebVitalsDashboard.spec.ts.backup delete mode 100644 web/src/components/settings/BuiltInModelPricingTab.vue delete mode 100644 web/src/components/settings/ServiceIdentityConfig.spec.ts delete mode 100644 web/src/components/settings/ServiceIdentityConfig.vue delete mode 100644 web/src/components/shared/SkeletonBox.spec.ts delete mode 100644 web/src/components/shared/filter/FilterCreatorPopup.schema.ts delete mode 100644 web/src/components/shared/filter/FilterCreatorPopup.spec.ts delete mode 100644 web/src/components/shared/filter/FilterCreatorPopup.vue create mode 100644 web/src/composables/useTheme.ts delete mode 100644 web/src/enterprise/components/EvalTemplateEditor.schema.ts delete mode 100644 web/src/enterprise/components/EvalTemplateEditor.spec.ts delete mode 100644 web/src/enterprise/components/EvalTemplateEditor.vue delete mode 100644 web/src/enterprise/components/EvalTemplateList.spec.ts delete mode 100644 web/src/enterprise/components/EvalTemplateList.vue delete mode 100644 web/src/enterprise/components/onlineEvals/quality/QualityConfigSidebar.vue create mode 100644 web/src/lib/core/Content/OContent.vue rename web/src/{components/common/AppPageHeader.vue => lib/core/PageHeader/OPageHeader.vue} (75%) create mode 100644 web/src/lib/core/PageLayout/OPageLayout.vue delete mode 100644 web/src/plugins/correlation/DimensionFilterEditor.spec.ts delete mode 100644 web/src/plugins/correlation/DimensionFilterEditor.vue delete mode 100644 web/src/plugins/correlation/TimeRangeEditor.schema.ts delete mode 100644 web/src/plugins/correlation/TimeRangeEditor.spec.ts delete mode 100644 web/src/plugins/correlation/TimeRangeEditor.vue delete mode 100644 web/src/plugins/logs/components/FieldListPagination.spec.ts delete mode 100644 web/src/plugins/logs/components/FieldListPagination.vue delete mode 100644 web/src/plugins/logs/components/LogsPluginFieldList.spec.ts delete mode 100644 web/src/plugins/logs/components/LogsPluginFieldList.vue delete mode 100644 web/src/plugins/logs/patterns/PatternStatistics.spec.ts delete mode 100644 web/src/plugins/logs/patterns/PatternStatistics.vue delete mode 100644 web/src/plugins/metrics/MetricList.spec.ts delete mode 100644 web/src/plugins/metrics/MetricList.vue delete mode 100644 web/src/plugins/traces/ServiceGraphEdgeSidePanel.vue delete mode 100644 web/src/plugins/traces/SpanRenderer.spec.ts delete mode 100644 web/src/plugins/traces/SpanRenderer.vue delete mode 100644 web/src/plugins/traces/TraceEvaluationsView.vue create mode 100644 web/src/styles/base-elements.css delete mode 100644 web/src/styles/fonts/ibm-plex-mono-latin-400.woff2 delete mode 100644 web/src/styles/fonts/ibm-plex-mono-latin-500.woff2 delete mode 100644 web/src/styles/fonts/ibm-plex-mono-latin-600.woff2 delete mode 100644 web/src/styles/fonts/ibm-plex-mono-latin-ext-400.woff2 delete mode 100644 web/src/styles/fonts/ibm-plex-mono-latin-ext-500.woff2 delete mode 100644 web/src/styles/fonts/ibm-plex-mono-latin-ext-600.woff2 delete mode 100644 web/src/styles/fonts/ibm-plex-sans-latin-400.woff2 delete mode 100644 web/src/styles/fonts/ibm-plex-sans-latin-500.woff2 delete mode 100644 web/src/styles/fonts/ibm-plex-sans-latin-600.woff2 delete mode 100644 web/src/styles/fonts/ibm-plex-sans-latin-700.woff2 delete mode 100644 web/src/styles/fonts/ibm-plex-sans-latin-ext-400.woff2 delete mode 100644 web/src/styles/fonts/ibm-plex-sans-latin-ext-500.woff2 delete mode 100644 web/src/styles/fonts/ibm-plex-sans-latin-ext-600.woff2 delete mode 100644 web/src/styles/fonts/ibm-plex-sans-latin-ext-700.woff2 delete mode 100644 web/src/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-1aLZx3lE4-Hw.woff2 delete mode 100644 web/src/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-RaLZx3lE4-Hw.woff2 delete mode 100644 web/src/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-ZaLZx3lE4-Hw.woff2 delete mode 100644 web/src/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-daLZx3lE4-Hw.woff2 delete mode 100644 web/src/styles/fonts/pe0RMImSLYBIv1o4X1M8cce4OdVisMz5nZRqy6cmmmU3t2FQWEAEOvV9wNvrwlNstMKW3Y6K5WMwd-laLZx3lE4.woff2 delete mode 100644 web/src/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-tQKr51.woff2 delete mode 100644 web/src/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t4R-tQKr51pE8.woff2 delete mode 100644 web/src/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t6R-tQKr51pE8.woff2 delete mode 100644 web/src/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t7R-tQKr51pE8.woff2 delete mode 100644 web/src/styles/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7txR-tQKr51pE8.woff2 create mode 100644 web/src/styles/keyframes.css create mode 100644 web/src/styles/palette-reset.css create mode 100644 web/src/test/unit/mockData/overview.ts delete mode 100644 web/src/test/unit/plugins/logs/components/FieldListPagination.spec.ts delete mode 100644 web/src/test/unit/plugins/logs/components/LogsPluginFieldList.spec.ts delete mode 100644 web/src/test/unit/views/AppMetrics.spec.ts delete mode 100644 web/src/test/unit/views/AppTraces.spec.ts create mode 100644 web/src/utils/chartTheme.ts create mode 100644 web/src/utils/fonts.ts delete mode 100644 web/src/views/ActionScript.spec.ts delete mode 100644 web/src/views/ActionScript.vue delete mode 100644 web/src/views/AppMetrics.spec.ts delete mode 100644 web/src/views/AppMetrics.vue delete mode 100644 web/src/views/AppTraces.spec.ts delete mode 100644 web/src/views/AppTraces.vue delete mode 100644 web/src/views/CorrelationDemo.spec.ts delete mode 100644 web/src/views/CorrelationDemo.vue delete mode 100644 web/src/views/DetailTable.spec.ts delete mode 100644 web/src/views/DetailTable.vue delete mode 100644 web/src/views/Logs.spec.ts delete mode 100644 web/src/views/Logs.vue create mode 100644 web/src/views/OverviewSkeleton.vue create mode 100644 web/src/views/OverviewTab.spec.ts delete mode 100644 web/src/views/Search.spec.ts delete mode 100644 web/src/views/Search.vue diff --git a/.claude/skills/ui-architect/SKILL.md b/.claude/skills/ui-architect/SKILL.md index ed3e38f532..5d804df2a3 100644 --- a/.claude/skills/ui-architect/SKILL.md +++ b/.claude/skills/ui-architect/SKILL.md @@ -4,15 +4,19 @@ description: >- Authoring guardrails for building ANY new frontend UI in the OpenObserve web app (web/) — new views, pages, panels, dialogs, feature components, or edits to existing ones. Enforce six house rules the moment you write Vue/template - markup: (1) use AppPageHeader for every page/module header, (2) build UI from - O2 library components in web/src/lib — never raw Quasar or bare HTML controls - when an O2 equivalent exists, (3) no hardcoded px anywhere — including inside + markup: (1) use OPageHeader for every page/module header, (2) build UI from + O2 library components in web/src/lib — never bare HTML controls when an O2 + equivalent exists, (3) no hardcoded px anywhere — including inside Tailwind class arbitrary values ([320px]) — size with rem/%/vh/vw or Tailwind's - rem-based scale, (4) no scoped-CSS blocks and no inline style="", (5) never - hardcode colors/sizes — use the modern registered --color-* design tokens and - register a new --color-* token if one is missing; the legacy --o2-* token - vocabulary is BANNED (never write var(--o2-*), never define one, never add a - .body--dark block — migrate any --o2-* you touch to its --color-* equivalent), + rem-based scale, and corner radius uses only the two-tier scale rounded-default + (4px controls) / rounded-surface (12px surfaces) / rounded-full — never + rounded-[..] or the retired rounded-sm/md/lg/xl, (4) no scoped-CSS blocks and no + inline style="", (5) never hardcode colors/sizes and never reach a token by raw + var() in a component — use the modern registered --color-* design tokens through + their utility class (bg-x/text-x), register a new --color-* token if one is + missing; the legacy --o2-* token vocabulary is BANNED (never write var(--o2-*), + never define one, never add a .body--dark block — migrate any --o2-* you touch to + its --color-* equivalent); all of this is CI-enforced and fails the build, (6) no hardcoded user-facing text — every label, title, placeholder, and message comes from i18n (useI18n t()) with keys added to web/src/locales/languages/en-US.json. It also settles the recurring @@ -33,7 +37,7 @@ description: >- hover-flyout — how to register its route, and how to gate it for cloud / enterprise / RBAC — even if they don't mention these rules by name. If you are - about to type
-
+
.
-
+
. name="update" size="sm" :class="[ - isAnimating ? '![animation:rotate_2s_linear_infinite] ![transform-origin:center_center] !inline-block' : '', + isAnimating ? 'auto-refresh-icon--spinning' : '', isAnimating ? 'text-primary' : '', 'mr-0.5', ]" /> -
{{ selectedLabel }}
+
{{ selectedLabel }}
-
+
.
- + diff --git a/web/src/components/CodeQueryEditor.vue b/web/src/components/CodeQueryEditor.vue index 11098cd324..ad068b0511 100644 --- a/web/src/components/CodeQueryEditor.vue +++ b/web/src/components/CodeQueryEditor.vue @@ -18,7 +18,7 @@ along with this program. If not, see .
@@ -27,8 +27,8 @@ along with this program. If not, see . v-if="showAiIcon && !disableAi" variant="sidebar-toggle" size="icon-toolbar" - class="absolute! top-2 right-2 z-10 bg-(--o2-bg-primary) border border-(--o2-border-color) transition-all duration-200 hover:bg-(--color-button-outline-hover-bg) hover:border-[var(--o2-color-primary)]" - :class="nlpMode ? 'bg-[var(--o2-color-primary-light)] border-[var(--o2-color-primary)]' : ''" + class="absolute! top-2 right-2 z-10 bg-card-glass-bg border border-card-glass-border transition-all duration-200 hover:bg-button-outline-hover-bg hover:border-accent" + :class="nlpMode ? 'bg-primary-100 border-accent' : ''" @click="toggleNlpMode" data-test="query-editor-ai-icon-btn" > @@ -75,6 +75,7 @@ const loadMonaco = async () => { import { vrlLanguageDefinition } from "@/utils/query/vrlLanguageDefinition"; import { useStore } from "vuex"; +import { useTheme } from "@/composables/useTheme"; import { debounce } from "lodash-es"; import searchState from "@/composables/useLogs/searchState"; import { useNLQuery } from "@/composables/useNLQuery"; @@ -82,6 +83,7 @@ import { useI18n } from "vue-i18n"; import useNotifications from "@/composables/useNotifications"; import { getImageURL } from "@/utils/zincutils"; import { isAuthError } from "@/utils/authErrors"; +import { getFontMono } from "@/utils/fonts"; import OButton from "@/lib/core/Button/OButton.vue"; import OIcon from "@/lib/core/Icon/OIcon.vue"; import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue"; @@ -177,10 +179,10 @@ export default defineComponent({ ], setup(props, { emit }) { const store = useStore(); + const { isDark } = useTheme(); const { t } = useI18n(); const { showErrorNotification } = useNotifications(); const editorRef: any = ref(); - // editor object is used to interact with the monaco editor instance let editorObj: any = null; // Emits the editor's content immediately instead of waiting out the change // debounce. Assigned when the editor is created; see `commitModelChange`. @@ -362,11 +364,11 @@ export default defineComponent({ ]; watch( - () => store.state.theme, + () => isDark.value, () => { if (!monaco) return; monaco.editor.setTheme( - store.state.theme == "dark" ? "myCustomDarkTheme" : "myCustomTheme", + isDark.value ? "myCustomDarkTheme" : "myCustomTheme", ); }, ); @@ -427,7 +429,6 @@ export default defineComponent({ const currentLanguage = props.language?.toLowerCase() || "sql"; try { - // Get organization ID from store const orgId = store.state.selectedOrganization?.identifier || "default"; // Create language-appropriate prompt @@ -649,7 +650,11 @@ export default defineComponent({ editorObj = monaco.editor.create(editorElement as HTMLElement, { value: props.query?.trim(), language: props.language, - theme: store.state.theme == "dark" ? "myCustomDarkTheme" : "myCustomTheme", + // Monaco paints its own text and ignores the CSS cascade — without this it + // falls back to its built-in Menlo/Monaco/Courier New stack, which differs + // per OS and from the rest of the app. + fontFamily: getFontMono(), + theme: isDark.value ? "myCustomDarkTheme" : "myCustomTheme", showFoldingControls: enableCodeFolding.value ? "always" : "never", folding: enableCodeFolding.value, wordWrap: "on", @@ -877,11 +882,11 @@ export default defineComponent({ ); watch( - () => store.state.theme, + () => isDark.value, () => { if (!monaco) return; monaco.editor.setTheme( - store.state.theme == "dark" ? "myCustomDarkTheme" : "myCustomTheme", + isDark.value ? "myCustomDarkTheme" : "myCustomTheme", ); }, ); @@ -1174,7 +1179,7 @@ export default defineComponent({ // Computed property for AI icon based on theme const aiIcon = computed(() => { - return store.state.theme === "dark" + return isDark.value ? getImageURL("images/common/ai_icon_dark.svg") : getImageURL("images/common/ai_icon_gradient.svg"); }); @@ -1209,216 +1214,42 @@ export default defineComponent({ }); - diff --git a/web/src/components/CommunitySlackInvite.vue b/web/src/components/CommunitySlackInvite.vue index 92c8c60731..0ea78f934c 100644 --- a/web/src/components/CommunitySlackInvite.vue +++ b/web/src/components/CommunitySlackInvite.vue @@ -153,7 +153,7 @@ const joinSlack = () => {