Sai Nikhil 1e9761ba61 feat: logs page highlighting (#8059)
### **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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8059/files#diff-4ef4ac0444004add270de4da30fa39bafd95bd7f1c408d28cf6737655fc152eb">+324/-0</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>DetailTable.vue</strong><dd><code>Add status top border and
inline highlighting</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8059/files#diff-80552b5d25fa6cef9fbbe430b1865d761c4b132284c2d2175afceea8cbabc8c7">+21/-6</a>&nbsp;
&nbsp; </td>

</tr>

<tr>
<td><strong>JsonPreview.vue</strong><dd><code>Use highlighter for
key/value rendering</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8059/files#diff-3985073134d35ff074742944b114d0905524038b42e6d2ac887fef2c8436fb16">+8/-14</a>&nbsp;
&nbsp; </td>

</tr>

<tr>
<td><strong>SearchResult.vue</strong><dd><code>Provide highlight query
and FTS keys downstream</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8059/files#diff-5e65533aa4754bb6d0074fda18ffc1ecacded3b9ca6bc28a161c3f6b12f20195">+16/-0</a>&nbsp;
&nbsp; </td>

</tr>

<tr>
<td><strong>TenstackTable.vue</strong><dd><code>Integrate highlighter
and add status stripe</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8059/files#diff-bc3c669f5ab65a42ae378df1f7d6b35014c9c220790bdcc72b47f55d1385dc22">+34/-6</a>&nbsp;
&nbsp; </td>

</tr>

<tr>
<td><strong>useTextHighlighter.ts</strong><dd><code>New composable for
text highlighting logic</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8059/files#diff-b18d6e5b667ce7b485a0592cddcaf47cf68b10b6a1b75bd006f21917c4343147">+486/-0</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>keyValueParser.ts</strong><dd><code>Theme-aware color
palette utilities</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8059/files#diff-efcf08bdfe13eeac90f7dadbdb5892ae614d49b16f4f75bfc6225700d0ba7b73">+53/-0</a>&nbsp;
&nbsp; </td>

</tr>

<tr>
<td><strong>statusParser.ts</strong><dd><code>Derive log severity and
colors</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8059/files#diff-c189f5de10234dccf5f5e5b332dbb41f54c21a366ed4817c963bbf2e954d620a">+246/-0</a>&nbsp;
</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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8059/files#diff-0323c3da69b369843c5d72bf4df5b00ca6b5147192a213baf331659ecf92af62">+3/-3</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>

<tr>
<td><strong>useLogs.ts</strong><dd><code>Correct FTS key detection
logic</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8059/files#diff-1040f61354f92711e0e77ed4e9bfa15586d45a94c7e2ab06cc37372068030e7b">+1/-1</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>
</table></details></td></tr></tr></tbody></table>

</details>

___
2025-08-31 14:53:28 +05:30
2025-08-31 14:53:28 +05:30
2024-09-25 11:09:26 +08:00
2025-07-28 11:02:00 +08:00
2025-08-13 16:53:12 +08:00
2024-06-10 13:10:01 -07:00
2023-11-26 11:04:37 -08:00
2024-09-22 17:57:47 +08:00
2025-08-11 17:06:35 -07:00

OpenObserve

🚀 10x easier, 🚀 140x lower storage cost, 🚀 high performance, 🚀 petabyte scale - Elasticsearch/Splunk/Datadog alternative for 🚀 (logs, metrics, traces).

Last Commit GitHub Stars GitHub Issues Contributors GitHub Release

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.

OpenObserve Vs Elasticsearch

🎥 Introduction Video

OpenObserve Introduction

🌟 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

Home

Logs

Logs

Traces (OpenTelemetry)

Trace details page Traces using OpenTelemetry

Golden metrics based on traces Traces golden metrics

Visualizations and Dashboards

Dashboard Dashboard Create panel Map

Front end monitoring

Performance analytics Performance

Session replay Session replay

Error tracking Error tracking

Alerts

Alerts

Streams

Streams

Ingestion

Ingestion

Pipeline

Pipeline Pipeline

Function Function

IAM

SSO (Single Sign On) SSO

RBAC (Role Based Access Control) RBAC

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

Slack

Easiest way to get support is to join the Slack channel.

📱 Join OpenObserve community on WeChat

S
Description
Open source observability platform for logs, metrics, traces, RUM (web, android, ios), Session replay, pipelines, SLO and LLM observability. A sophisticated, simple and highly performant alternative to Datadog, Splunk, and Elasticsearch with 140x lower storage costs and single binary deployment.
Readme AGPL-3.0
1 GiB
Languages
TypeScript 40.1%
Rust 29.4%
Vue 16.9%
JavaScript 10.9%
Python 2.3%
Other 0.3%