mirror of
https://github.com/openobserve/openobserve.git
synced 2026-11-03 16:10:21 +00:00
f15e27e5fd
# Design System Unification — one visual language, enforced end-to-end
Establishes **one source of truth for every visual decision**, wires the
whole app to it, and **locks it in with CI** so it can't drift back.
### Foundations
- **Design-token system ("one knob per decision").** Every colour, text
size, spacing, corner radius, and shadow is a named token defined in
exactly one place — change the token, every screen updates. Collapsed
hundreds of near-duplicate definitions and removed "fake" duplicates
that pretended to be different but weren't.
- **Shared component library (O2).** Buttons, tables, dialogs, drawers,
form fields, badges, etc. already know the correct colours, spacing, and
dark-mode behaviour; new screens compose them instead of hand-styling.
Added new primitives on this branch (`OContent`, `KpiCard`) and
standardized existing ones.
- **One page structure everywhere** (`PageLayout` / `AppPageHeader` /
`AppPage` / `OContent`) — titles, breadcrumbs, spacing, and content
edges line up identically across every screen.
- **One table implementation** — all tabular data uses the same table
(sorting, density, sticky headers, empty states).
- **Styling consolidated onto Tailwind; old systems removed** —
hand-written CSS driven to the practical minimum, the legacy **Quasar**
framework fully removed, surviving stylesheets required to justify
themselves.
- **Two-tier corner radius** — a tight **4px** for controls and a soft
**12px** for surfaces (dialogs, cards, the app shell), plus a
full-circle option — replacing five radius names that all secretly meant
the same thing.
### Detailed improvements across screens
**Page structure & alignment** — unified page shell rolled across ~40+
screens (IAM, Settings, Alerts, Dashboards, Functions, Pipelines, RUM,
Metrics, Synthetics, Billing, editors, lists); one header height; one
page-edge grid driving headers, tables, rails, and tabs; unified
side-rail widths; inset rail selection/hover pills; every tab strip on
the grid line; tightened title/subtitle spacing.
**Tables (cross-screen)** — action columns consistently centered (incl.
Organizations); unified row-number column with no "#" truncation;
non-standard tables restyled to match; loading skeletons made
geometrically identical to the loaded table; symmetric edge inset; IAM
first-column grid alignment fixed.
**Traces** — flame graph + span-detail correlation panel fixes;
correlated logs/metrics placeholder fit; sticky headers; removed a
double scrollbar + a 1px sliver; aligned table fonts/badges; polished
the service detail drawer; stream-selector + correlation alignment;
aligned loading spinners; floating overlay arrows for the
disabled-services strip.
**Logs** — field-list controls aligned (focus ring no longer clipped);
detail-drawer spacing + metrics-tab overflow fixed; Run Query toolbar
tidied; listing sizing + stray border fixed.
**Metrics** — search added to the "Type" facet rail and aligned with the
other rails; proper empty states for the explorer and facet rail.
**Dashboards** — removed inconsistent card shadows; tightened
borders/resizers/field-list spacing; aligned View Dashboard chrome to
the grid; chart colours via the token helper.
**Home** — redesigned the Usage tab; added reusable KPI stat cards so
summary strips stop drifting.
**Dark mode** — new theme-switch animation; fixed a 1px content shift on
toggle and a white flash on load; fixed AI-chat text and assorted
light/dark mismatches; completed the token-driven dark migration.
**Empty states, controls & small polish** — restored 3 broken
empty-state animations; adopted the standard empty state; added the
sliding indicator to the toggle control; fixed the Quality-page inset +
drawer badge; refreshed Search History / Schedulers; fixed the
alert-history drawer scrollbar + timeline hover; removed a stray
menu-bar border.
### Dead code & cruft removal
- **Deleted the entire legacy `utilities.css`** global stylesheet (well
over a thousand lines) — evacuated in waves, roughly half of it dead
once traced.
- **Removed Quasar entirely**, including dead `.q-*` styles and ~25
phantom `--q-*` variables that were silently breaking bits of the UI.
- Stripped hundreds of **dead CSS classes and tokens that compiled to
nothing** — e.g. 46 uses of a colour class with no backing token, a
no-op shadow class on 51 elements, dead layout/utility classes, a
leftover `card-container` block, a dead table-actions token, and a
mis-registered gradient that rendered nothing.
- Cut **unused keyframe animations (19 → 3)** and removed **unused
components** + a stray build artifact.
- Net effect: a much smaller, leaner styling surface — less to maintain,
fewer dead ends to copy.
## Safety & verification
Large but low-risk: this is overwhelmingly a **styling and structure**
change, not product behaviour or data. Guarded by the
design-token/consistency/type checks above plus the existing test suite,
and reviewed screen-by-screen.
---------
Co-authored-by: Kirtan Thakkar <kirtan@kiara.tech>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Co-authored-by: ktx-mihir <mihir.patel@kiara.tech>
158 lines
5.4 KiB
JSON
158 lines
5.4 KiB
JSON
{
|
|
"name": "zinc-observe-web",
|
|
"version": "0.1.0",
|
|
"license": "AGPL-3.0",
|
|
"private": true,
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "vite --base /web/",
|
|
"devcloud": "NODE_ENV=devcloud vite --mode=devcloud",
|
|
"build-alpha1": "run-p type-check build-only-alpha1",
|
|
"build-cloud-prod": "run-p type-check build-only-cloud-prod",
|
|
"build": "run-p type-check build-only",
|
|
"postbuild": "run-p copy",
|
|
"preview": "vite preview",
|
|
"copy": "cd dist && mkdir src && cd src && mkdir assets && cd .. && cd .. && cp -r src/assets/* dist/src/assets/",
|
|
"test:unit": "vitest --environment jsdom --root src/",
|
|
"test:unit:coverage": "NODE_OPTIONS='--max_old_space_size=8192' vitest --coverage --run",
|
|
"test:coverage:check": "./coverage.sh check",
|
|
"test:e2e": "start-server-and-test preview :4173 'cypress run --e2e'",
|
|
"test:e2e:dev": "start-server-and-test 'vite dev --port 4173' :4173 'cypress open --e2e'",
|
|
"build-only": "vite build",
|
|
"build-only-alpha1": "vite build --mode=alpha1",
|
|
"build-only-cloud-prod": "vite build --mode=production",
|
|
"type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
|
|
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
|
|
"lint:ci": "eslint \"src/**/*.vue\" --no-fix",
|
|
"lint:styles": "stylelint \"src/**/*.{css,vue}\"",
|
|
"lint:tokens": "node scripts/check-css-tokens.mjs",
|
|
"lint:token-purity": "node scripts/check-token-purity.mjs",
|
|
"lint:design": "node scripts/check-design-consistency.mjs",
|
|
"lint:design:strict": "node scripts/check-design-consistency.mjs --strict"
|
|
},
|
|
"dependencies": {
|
|
"@esbuild-plugins/node-globals-polyfill": "^0.2.3",
|
|
"@joakimono/echarts-extension-leaflet": "^1.1.0",
|
|
"@openobserve/browser-logs": "0.4.0-beta.7",
|
|
"@openobserve/browser-rum": "0.4.0-beta.7",
|
|
"@openobserve/node-sql-parser": "^0.1.5",
|
|
"@openobserve/rrweb-player": "^0.2.1",
|
|
"@rudderstack/analytics-js": "3.6.0",
|
|
"@tanstack/vue-form": "^1.29.1",
|
|
"@tanstack/vue-table": "^8.21.3",
|
|
"@tanstack/vue-virtual": "^3.13.16",
|
|
"@types/js-yaml": "^4.0.9",
|
|
"@vue-flow/background": "^1.3.2",
|
|
"@vue-flow/controls": "^1.1.3",
|
|
"@vue-flow/core": "^1.48.1",
|
|
"acorn": "^8.15.0",
|
|
"acorn-walk": "^8.3.4",
|
|
"cron-parser": "^5.4.0",
|
|
"d3-force": "^3.0.0",
|
|
"d3-scale": "^4.0.2",
|
|
"date-fns": "^4.1.0",
|
|
"date-fns-tz": "^3.2.0",
|
|
"dompurify": "^3.4.11",
|
|
"echarts": "^6.1.0",
|
|
"echarts-gl": "^2.1.0",
|
|
"escodegen": "^2.1.0",
|
|
"flag-icons": "^7.5.0",
|
|
"gridstack": "^12.4.2",
|
|
"highlight.js": "^11.11.1",
|
|
"js-beautify": "^1.15.4",
|
|
"js-cookie": "^3.0.7",
|
|
"js-yaml": "^4.2.0",
|
|
"json-2-csv": "^5.5.11",
|
|
"jszip": "^3.10.1",
|
|
"leaflet": "^1.9.4",
|
|
"lodash-es": "^4.18.1",
|
|
"lucide-vue-next": "^0.562.0",
|
|
"luxon": "^3.7.2",
|
|
"marked": "^17.0.1",
|
|
"moment": "^2.30.1",
|
|
"moment-timezone": "^0.6.0",
|
|
"monaco-editor": "^0.52.2",
|
|
"node-polyfill-webpack-plugin": "^4.0.0",
|
|
"reka-ui": "^2.9.6",
|
|
"reodotdev": "^1.0.0",
|
|
"rollup-plugin-node-polyfills": "^0.2.1",
|
|
"rollup-plugin-polyfill-node": "^0.13.0",
|
|
"sql-formatter": "^15.6.12",
|
|
"tw-animate-css": "^1.4.0",
|
|
"uuid": "^14.0.0",
|
|
"vue": "^3.5.26",
|
|
"vue-drag-resize": "^1.5.4",
|
|
"vue-draggable-next": "^2.3.0",
|
|
"vue-i18n": "^11.2.8",
|
|
"vue-router": "^4.6.4",
|
|
"vuex": "^4.1.0",
|
|
"zod": "^4.4.3"
|
|
},
|
|
"devDependencies": {
|
|
"@cypress/vue": "^6.0.2",
|
|
"@cypress/webpack-dev-server": "^5.4.1",
|
|
"@iconify-json/majesticons": "^1.2.4",
|
|
"@iconify-json/material-symbols": "^1.2.72",
|
|
"@iconify-json/mdi": "^1.2.3",
|
|
"@iconify-json/octicon": "^1.2.25",
|
|
"@iconify-json/si": "^1.2.17",
|
|
"@rushstack/eslint-patch": "^1.15.0",
|
|
"@tailwindcss/postcss": "^4.1.18",
|
|
"@tailwindcss/typography": "^0.5.19",
|
|
"@tailwindcss/vite": "^4.1.18",
|
|
"@types/d3-force": "^3.0.10",
|
|
"@types/d3-scale": "^4.0.9",
|
|
"@types/fs-extra": "^11.0.4",
|
|
"@types/js-cookie": "^3.0.6",
|
|
"@types/jsdom": "^27.0.0",
|
|
"@types/leaflet": "^1.9.21",
|
|
"@types/lodash-es": "^4.17.12",
|
|
"@types/luxon": "^3.7.1",
|
|
"@types/node": "^25.0.3",
|
|
"@types/uuid": "^11.0.0",
|
|
"@vitejs/plugin-vue": "^6.0.3",
|
|
"@vitejs/plugin-vue-jsx": "^5.1.3",
|
|
"@vitest/coverage-v8": "^4.0.16",
|
|
"@vitest/ui": "^4.0.16",
|
|
"@vue/eslint-config-prettier": "^10.2.0",
|
|
"@vue/eslint-config-typescript": "^14.6.0",
|
|
"@vue/test-utils": "^2.4.6",
|
|
"@vue/tsconfig": "^0.8.1",
|
|
"autoprefixer": "^10.4.23",
|
|
"c8": "^10.1.3",
|
|
"cypress": "^15.8.1",
|
|
"cypress-localstorage-commands": "^2.2.8",
|
|
"dotenv": "^17.2.3",
|
|
"eslint": "^9.39.2",
|
|
"eslint-config-prettier": "^10.1.8",
|
|
"eslint-plugin-cypress": "^5.2.0",
|
|
"eslint-plugin-vue": "^10.6.2",
|
|
"fs-extra": "^11.3.3",
|
|
"happy-dom": "^20.8.9",
|
|
"jsdom": "^27.4.0",
|
|
"msw": "^2.12.7",
|
|
"npm-run-all": "^4.1.5",
|
|
"postcss": "^8.5.10",
|
|
"postcss-html": "^1.8.1",
|
|
"prettier": "^3.7.4",
|
|
"rollup-plugin-analyzer": "^4.0.0",
|
|
"rollup-plugin-visualizer": "^6.0.5",
|
|
"sass": "^1.97.1",
|
|
"sass-loader": "^16.0.6",
|
|
"start-server-and-test": "^2.1.3",
|
|
"stylelint": "^17.14.0",
|
|
"tailwindcss": "^4.1.18",
|
|
"typescript": "~5.9.3",
|
|
"unplugin-icons": "^23.0.1",
|
|
"vite": "^7.3.2",
|
|
"vite-plugin-istanbul": "^7.2.1",
|
|
"vite-plugin-monaco-editor": "^1.1.0",
|
|
"vitest": "^4.0.16",
|
|
"vitest-canvas-mock": "^1.1.3",
|
|
"vue-tsc": "^3.2.1"
|
|
},
|
|
"overrides": {
|
|
"axios": "1.13.2"
|
|
}
|
|
}
|