Files
openobserve/web/src/plugins
ktx-riya 71f1d085a3 refactor: add a common component for the error/warnings (#10140)
### **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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; </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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; </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>&nbsp;
</td>

</tr>

<tr>
  <td>
    <details>
<summary><strong>ViewPanel.vue</strong><dd><code>Centralize view panel
warning indicators</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; </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>&nbsp;
</td>

</tr>

<tr>
  <td>
    <details>
<summary><strong>VisualizeLogsQuery.vue</strong><dd><code>Reuse warning
buttons in logs visualize</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; </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>&nbsp;
</td>

</tr>

<tr>
  <td>
    <details>
<summary><strong>AddPanel.vue</strong><dd><code>Reuse warning buttons in
add panel view</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; </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>&nbsp;
</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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; </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>&nbsp;
</td>

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

</details>

___
2026-02-05 16:26:24 +05:30
..
2026-02-04 16:25:09 +05:30