### **User description**
1. This PR introduces loading skeleton into application and also used in
homepage
2. it also make some UI changes moving dashboards and functions to 2nd
section and adding some hover effects
___
### **PR Type**
Enhancement
___
### **Description**
- Add reusable `SkeletonBox` component
- Introduce `HomeViewSkeleton` for loading
- Redesign functions/dashboards tiles layout
- Add hover, tooltip, and forward icons
___
### Diagram Walkthrough
```mermaid
flowchart LR
HomeView["HomeView.vue"]
SkeletonBox["components/shared/SkeletonBox.vue"]
HomeSkeleton["components/shared/HomeViewSkeleton.vue"]
HomeView -- "uses while loading" --> HomeSkeleton
HomeSkeleton -- "composes" --> SkeletonBox
HomeView -- "imports" --> SkeletonBox
HomeView -- "UI updates" --> "Tiles/Charts/Buttons"
```
<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><table>
<tr>
<td>
<details>
<summary><strong>HomeViewSkeleton.vue</strong><dd><code>New Home view
loading skeleton</code>
</dd></summary>
<hr>
web/src/components/shared/HomeViewSkeleton.vue
<ul><li>Add full-page home loading skeleton layout<br> <li> Theme-aware
skeleton styles and animations<br> <li> Skeletons for streams, tiles,
and charts<br> <li> Responsive layout for tiles and charts</ul>
</details>
</td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8704/files#diff-cfcdd350ab12b088eb8bc8717b3d2c3a6b530c6c78d27c581126f6e4c7ccbda4">+271/-0</a>
</td>
</tr>
<tr>
<td>
<details>
<summary><strong>SkeletonBox.vue</strong><dd><code>Reusable skeleton box
component</code>
</dd></summary>
<hr>
web/src/components/shared/SkeletonBox.vue
<ul><li>Create reusable skeleton component with variants<br> <li> Add
theme-aware wave animation styles<br> <li> Support shapes and sizes via
props<br> <li> Provide multiline text styling hooks</ul>
</details>
</td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8704/files#diff-4260429750bf9f01b844b734b41361e3a95e570062bffa71c36983a113c755d7">+193/-0</a>
</td>
</tr>
<tr>
<td>
<details>
<summary><strong>HomeView.vue</strong><dd><code>Home page layout and
loading UX improvements</code>
</dd></summary>
<hr>
web/src/views/HomeView.vue
<ul><li>Integrate <code>HomeViewSkeleton</code> during loading<br> <li>
Move functions/dashboards tiles near charts<br> <li> Add tooltips and
forward icons to view buttons<br> <li> Update icons, chart sizes, and
hover effects</ul>
</details>
</td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8704/files#diff-9af441af191d3254ef5f9db603dca75486de7638cda41a3c050e7b3c33d68280">+195/-73</a></td>
</tr>
</table></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

















