mirror of
https://github.com/openobserve/openobserve.git
synced 2026-11-06 08:09:24 +00:00
### **PR Type**
Enhancement, Bug fix
___
### **Description**
- Add shared `PanelErrorButtons` UI component
- Replace duplicated panel warning button code
- Show last refreshed and loading warnings
- Wire partial/cached state from renderer
___
### Diagram Walkthrough
```mermaid
flowchart LR
PSR["`PanelSchemaRenderer` emits state"]
VP["`ViewPanel.vue` / `AddPanel.vue` / `Index.vue` / `VisualizeLogsQuery.vue` / `PanelContainer.vue`"]
PEB["`PanelErrorButtons.vue` renders warnings + time"]
PSR -- "emits (partial/loading/cached/lastTriggeredAt)" --> VP
VP -- "passes props" --> PEB
```
<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>PanelContainer.vue</strong><dd><code>Use shared warning
buttons in container</code>
</dd></summary>
<hr>
web/src/components/dashboards/PanelContainer.vue
<ul><li>Replace inline warning/refresh UI with
<code>PanelErrorButtons</code><br> <li> Lazy-load and register
<code>PanelErrorButtons</code> component<br> <li> Pass
error/warning/refresh props to shared component</ul>
</details>
</td>
<td><a
href="https://github.com/openobserve/openobserve/pull/10140/files#diff-414737cba6064461f7026e0b016afcb9620bd5bb29c4708fc170dee789dbcd4d">+14/-112</a></td>
</tr>
<tr>
<td>
<details>
<summary><strong>PanelErrorButtons.vue</strong><dd><code>New shared
component for panel warnings</code>
</dd></summary>
<hr>
web/src/components/dashboards/PanelErrorButtons.vue
<ul><li>Add reusable warning/error buttons with tooltips<br> <li>
Include cached/partial-data warnings and icons<br> <li> Add "Last
Refreshed At" display with <code>RelativeTime</code><br> <li> Provide
scoped styles for warning/refresh UI</ul>
</details>
</td>
<td><a
href="https://github.com/openobserve/openobserve/pull/10140/files#diff-570007fb3e9612099b25a19987366be1e1bacfe614176bdc146866cb3069a38c">+183/-0</a>
</td>
</tr>
<tr>
<td>
<details>
<summary><strong>ViewPanel.vue</strong><dd><code>Centralize view panel
warning indicators</code>
</dd></summary>
<hr>
web/src/components/dashboards/viewPanel/ViewPanel.vue
<ul><li>Replace local tooltip buttons with
<code>PanelErrorButtons</code><br> <li> Listen to renderer events for
partial/loading/cached state<br> <li> Track new reactive flags and
expose to template<br> <li> Lazy-load/register
<code>PanelErrorButtons</code> component</ul>
</details>
</td>
<td><a
href="https://github.com/openobserve/openobserve/pull/10140/files#diff-e7b26fbbfe7ae57f50377c0f002155df17109ea54708b0f134dd2005356b2930">+40/-64</a>
</td>
</tr>
<tr>
<td>
<details>
<summary><strong>VisualizeLogsQuery.vue</strong><dd><code>Reuse warning
buttons in logs visualize</code>
</dd></summary>
<hr>
web/src/plugins/logs/VisualizeLogsQuery.vue
<ul><li>Adjust panel layout spacing for new header height<br> <li> Add
<code>PanelErrorButtons</code> beside action buttons<br> <li> Track
<code>lastTriggeredAt</code>, partial/loading/cached flags<br> <li> Wire
additional <code>PanelSchemaRenderer</code> event handlers</ul>
</details>
</td>
<td><a
href="https://github.com/openobserve/openobserve/pull/10140/files#diff-979b01d943d58c5d70faeeac5948b7f02f0b2392a12b84ef07ba7f7393ab0261">+56/-62</a>
</td>
</tr>
<tr>
<td>
<details>
<summary><strong>AddPanel.vue</strong><dd><code>Reuse warning buttons in
add panel view</code>
</dd></summary>
<hr>
web/src/views/Dashboards/addPanel/AddPanel.vue
<ul><li>Replace inline error/warning/refresh UI with
<code>PanelErrorButtons</code><br> <li> Add
<code>PanelErrorButtons</code> near errors sidebar area<br> <li> Track
partial/loading/cached state via renderer events<br> <li>
Lazy-load/register <code>PanelErrorButtons</code> component</ul>
</details>
</td>
<td><a
href="https://github.com/openobserve/openobserve/pull/10140/files#diff-c9632db1ad95af95aba10161bcbc7c5608318919f228637bdafae3f3a31267e8">+55/-65</a>
</td>
</tr>
</table></td></tr><tr><td><strong>Bug fix</strong></td><td><table>
<tr>
<td>
<details>
<summary><strong>Index.vue</strong><dd><code>Unify metrics panel
warnings and refresh</code>
</dd></summary>
<hr>
web/src/plugins/metrics/Index.vue
<ul><li>Move "last refreshed" into <code>PanelErrorButtons</code><br>
<li> Add <code>PanelErrorButtons</code> to both panel layouts<br> <li>
Wire partial/loading/cached and series-limit warnings<br> <li> Adjust
panel top spacing and header positioning</ul>
</details>
</td>
<td><a
href="https://github.com/openobserve/openobserve/pull/10140/files#diff-a6734928ea4dcb5244e90de5a16fe6f5cafa95ccf58430ac7b548a065daf3d61">+78/-12</a>
</td>
</tr>
</table></td></tr></tr></tbody></table>
</details>
___