mirror of
https://github.com/openobserve/openobserve.git
synced 2026-11-05 16:10:43 +00:00
0730d5f7a4
### **User description**
1. This PR implements the latest UI of landing page / Home page with 2
charts for showing alerts and pipelines
2.
___
### **PR Type**
Enhancement
___
### **Description**
- Redesigned Home page layout and tiles
- Added alerts and pipelines charts
- Implemented theme-aware icons and styles
- Added loading state for summary fetch
___
### Diagram Walkthrough
```mermaid
flowchart LR
HomeView["HomeView.vue"]
SummaryAPI["Summary fetch & parsing"]
Charts["CustomChartRenderer charts"]
Tiles["Responsive metric tiles"]
Theming["Dark/Light computed icons & styles"]
Loading["Loading spinner state"]
HomeView -- "fetches org summary" --> SummaryAPI
SummaryAPI -- "sets metrics & statuses" --> Tiles
SummaryAPI -- "feeds alert/pipeline data" --> Charts
HomeView -- "applies theme classes" --> Theming
HomeView -- "shows while fetching" --> Loading
```
<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>HomeView.vue</strong><dd><code>Home page redesign with
charts and theme-aware UI</code>
</dd></summary>
<hr>
web/src/views/HomeView.vue
<ul><li>Rebuilt template with responsive sections and tiles.<br> <li>
Added alerts pie and pipelines bar charts via CustomChartRenderer.<br>
<li> Introduced loading state, improved summary parsing, and theme-aware
<br>icons.<br> <li> Added extensive SCSS for dark/light theming and
layout.</ul>
</details>
</td>
<td><a
href="https://github.com/openobserve/openobserve/pull/6729/files#diff-9af441af191d3254ef5f9db603dca75486de7638cda41a3c050e7b3c33d68280">+568/-229</a></td>
</tr>
</table></td></tr></tr></tbody></table>
</details>
___
---------
Signed-off-by: Yashodhan Joshi <yjdoc2@gmail.com>
Co-authored-by: Taiming Liu <liutaiming3@gmail.com>
Co-authored-by: Yashodhan Joshi <yjdoc2@gmail.com>
Co-authored-by: ByteBaker <42913098+ByteBaker@users.noreply.github.com>