### **User description** This PR helps to highlight text in logs page and also adds a left border for each depending upon the status of the logs ___ ### **PR Type** Enhancement ___ ### **Description** Add LogsHighLighting component for semantic highlighting Highlight query terms across logs and JSON Visual status indicators via colored borders/lines FTS-aware coloring for selected columns ___ ### Diagram Walkthrough ```mermaid flowchart LR Highlighter["LogsHighLighting.vue (new)"] -- "used by" --> Detail["DetailTable.vue"] Highlighter -- "used by" --> JsonPrev["JsonPreview.vue"] Highlighter -- "used by" --> Table["TenstackTable.vue"] Status["statusParser.ts (new)"] -- "row/log status color" --> Detail Status -- "row status stripe" --> Table Colors["keyValueParser.ts (new)"] -- "theme colors" --> Highlighter Composable["useTextHighlighter.ts (new)"] -- "highlight + semantic color" --> Highlighter Search["SearchResult.vue"] -- "pass highlight + FTS keys" --> Table ``` <details> <summary><h3> File Walkthrough</h3></summary> <table><thead><tr><th></th><th align="left">Relevant files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><details><summary>8 files</summary><table> <tr> <td><strong>LogsHighLighting.vue</strong><dd><code>New component for semantic JSON/log highlighting</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8059/files#diff-4ef4ac0444004add270de4da30fa39bafd95bd7f1c408d28cf6737655fc152eb">+324/-0</a> </td> </tr> <tr> <td><strong>DetailTable.vue</strong><dd><code>Add status top border and inline highlighting</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8059/files#diff-80552b5d25fa6cef9fbbe430b1865d761c4b132284c2d2175afceea8cbabc8c7">+21/-6</a> </td> </tr> <tr> <td><strong>JsonPreview.vue</strong><dd><code>Use highlighter for key/value rendering</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8059/files#diff-3985073134d35ff074742944b114d0905524038b42e6d2ac887fef2c8436fb16">+8/-14</a> </td> </tr> <tr> <td><strong>SearchResult.vue</strong><dd><code>Provide highlight query and FTS keys downstream</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8059/files#diff-5e65533aa4754bb6d0074fda18ffc1ecacded3b9ca6bc28a161c3f6b12f20195">+16/-0</a> </td> </tr> <tr> <td><strong>TenstackTable.vue</strong><dd><code>Integrate highlighter and add status stripe</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8059/files#diff-bc3c669f5ab65a42ae378df1f7d6b35014c9c220790bdcc72b47f55d1385dc22">+34/-6</a> </td> </tr> <tr> <td><strong>useTextHighlighter.ts</strong><dd><code>New composable for text highlighting logic</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8059/files#diff-b18d6e5b667ce7b485a0592cddcaf47cf68b10b6a1b75bd006f21917c4343147">+486/-0</a> </td> </tr> <tr> <td><strong>keyValueParser.ts</strong><dd><code>Theme-aware color palette utilities</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8059/files#diff-efcf08bdfe13eeac90f7dadbdb5892ae614d49b16f4f75bfc6225700d0ba7b73">+53/-0</a> </td> </tr> <tr> <td><strong>statusParser.ts</strong><dd><code>Derive log severity and colors</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8059/files#diff-c189f5de10234dccf5f5e5b332dbb41f54c21a366ed4817c963bbf2e954d620a">+246/-0</a> </td> </tr> </table></details></td></tr><tr><td><strong>Bug fix</strong></td><td><details><summary>2 files</summary><table> <tr> <td><strong>Index.vue</strong><dd><code>Fix column update timeout scoping</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8059/files#diff-0323c3da69b369843c5d72bf4df5b00ca6b5147192a213baf331659ecf92af62">+3/-3</a> </td> </tr> <tr> <td><strong>useLogs.ts</strong><dd><code>Correct FTS key detection logic</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8059/files#diff-1040f61354f92711e0e77ed4e9bfa15586d45a94c7e2ab06cc37372068030e7b">+1/-1</a> </td> </tr> </table></details></td></tr></tr></tbody></table> </details> ___
🚀 10x easier, 🚀 140x lower storage cost, 🚀 high performance, 🚀 petabyte scale - Elasticsearch/Splunk/Datadog alternative for 🚀 (logs, metrics, traces).
OpenObserve (O2 for short) is a cloud-native observability platform built specifically for logs, metrics, traces, analytics, RUM (Real User Monitoring - Performance, Errors, Session Replay) designed to work at petabyte scale.
It is straightforward and easy to operate, in contrast to Elasticsearch, which requires understanding and tuning numerous settings. Get OpenObserve up and running in under 2 minutes.
OpenObserve serves as a seamless replacement for Elasticsearch for users who ingest data using APIs and perform searches. OpenObserve comes with its own user interface, eliminating the need for separate installation.
You can reduce your log storage costs by ~140x compared to Elasticsearch by using OpenObserve. Below, we present the results from pushing logs from our production Kubernetes cluster to both Elasticsearch and OpenObserve using Fluent Bit.
🎥 Introduction Video
🌟 Features:
- Logs, Metrics, Traces: Comprehensive support for various data types.
- OpenTelemetry Support: Full compatibility with OTLP for logs, metrics, and traces.
- Real User Monitoring (RUM): Includes performance tracking, error logging, and session replay.
- Dashboards, Reports, Alerts: Features over 18 different chart types for comprehensive data visualization for on-the-fly analysis and reporting along with alerting.
- Pipelines: Enrich, redact, reduce, normalize data on the fly. Stream processing for logs to metrics and more.
- Advanced Embedded GUI: Intuitive and user-friendly interface.
- SQL and PromQL Support: Query logs and traces with SQL, and metrics with SQL and PromQL.
- Single Binary or HA Installation: Install using a single binary for small deployments or in HA mode for large deployments.
- Versatile Storage Options: Supports local disk, S3, MinIO, GCS, Azure Blob Storage.
- High Availability and Clustering: Ensures reliable and scalable performance.
- Dynamic Schema: Adapts to your data structure seamlessly.
- Built-in Authentication: Secure and ready to use.
- Ease of Operation: Designed for simplicity and efficiency.
- Seamless Upgrades: Hassle-free updates.
- Multilingual UI: Supports 11 languages, including English, Spanish, German, French, Chinese, and more.
For a full list of features, check the documentation.
⚡️ Quick start
🐳 Docker:
docker run -d \
--name openobserve \
-v $PWD/data:/data \
-p 5080:5080 \
-e ZO_ROOT_USER_EMAIL="root@example.com" \
-e ZO_ROOT_USER_PASSWORD="Complexpass#123" \
public.ecr.aws/zinclabs/openobserve:latest
🐙 Docker Compose:
services:
openobserve:
image: public.ecr.aws/zinclabs/openobserve:latest
restart: unless-stopped
environment:
ZO_ROOT_USER_EMAIL: "root@example.com"
ZO_ROOT_USER_PASSWORD: "Complexpass#123"
ports:
- "5080:5080"
volumes:
- data:/data
volumes:
data:
For other ways to quickly install OpenObserve or use OpenObserve cloud, check quickstart documentation.
For installing OpenObserve in HA mode, check HA deployment documentation.
📷 Screenshots
Home
Logs
Traces (OpenTelemetry)
Golden metrics based on traces

Visualizations and Dashboards
Front end monitoring
Alerts
Streams
Ingestion
Pipeline
IAM
RBAC (Role Based Access Control)

SBOM
Software Bill of Materials for OpenObserve
Rust
SBOM can be found here. You can analyze it using dependency track.
In order to generate the SBOM, you can use the following commands:
Install cargo-cyclonedx:
cargo install cargo-cyclonedx
Generate the SBOM:
cargo-cyclonedx cyclonedx
JavaScript
SBOM can be found here. You can analyze it using dependency track.
In order to generate the SBOM, you can use the following commands:
Install cyclonedx-npm:
npm install --global @cyclonedx/cyclonedx-npm
Generate the SBOM:
cd web
cyclonedx-npm > sbom.json
⚖️ License
OpenObserve is licensed under the AGPL-3.0 license. For more details, see the LICENSE.
🌍 Community
🔗 Join OpenObserve community on Slack
Easiest way to get support is to join the Slack channel.
📱 Join OpenObserve community on WeChat

















