Omkar Kesarkhane c2c0ccdf2e feat: Rate, Errors and Duration (RED) metrics on traces list page (#8757) ...

### **PR Type**
Enhancement
#8784 


___

### **Description**
- Add RED traces metrics dashboard

- Replace scatter chart with metrics widgets

- Support view-only mode in panel schemas

- Improve traces loading and empty states


___

### Diagram Walkthrough


```mermaid
flowchart LR
  TracesPage["Traces Index.vue"] -- embeds --> SearchResult["SearchResult.vue"]
  SearchResult -- uses --> MetricsDashboard["TracesMetricsDashboard.vue"]
  MetricsDashboard -- loads --> MetricsJSON["metrics.json"]
  MetricsDashboard -- renders via --> RenderCharts["RenderDashboardCharts.vue"]
  PanelContainer["PanelContainer.vue"] -- passes --> viewOnlyProp["viewOnly prop"]
  PanelSchema["PanelSchemaRenderer.vue"] -- respects --> viewOnlyProp
```



<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>Pass view-only
flag and tidy tooltips</code>&nbsp; &nbsp; &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>Pass <code>viewOnly</code> prop to schema renderer<br> <li>
Tooltip attribute wrapping for readability<br> <li> Minor i18n quote
consistency changes<br> <li> Notification formatting improvements</ul>


</details>


  </td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8757/files#diff-414737cba6064461f7026e0b016afcb9620bd5bb29c4708fc170dee789dbcd4d">+32/-17</a>&nbsp;
</td>

</tr>

<tr>
  <td>
    <details>
<summary><strong>PanelSchemaRenderer.vue</strong><dd><code>Add view-only
support to schema renderer</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/PanelSchemaRenderer.vue

<ul><li>Add <code>viewOnly</code> prop to disable editing<br> <li> Gate
annotation button when <code>viewOnly</code><br> <li> Minor formatting
of icon tag<br> <li> Route/alert creation string refinements</ul>


</details>


  </td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8757/files#diff-e5376e7e77bf3aaf6590c2522d8c2dbffcc95a8006ae0d6dc0040a37825367d6">+20/-10</a>&nbsp;
</td>

</tr>

<tr>
  <td>
    <details>
<summary><strong>Index.vue</strong><dd><code>Simplify traces page and
delegate states</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</dd></summary>
<hr>

web/src/plugins/traces/Index.vue

<ul><li>Remove inline loading/empty blocks from page<br> <li> Delegate
result states to SearchResult<br> <li> Trigger metrics dashboard load on
first page<br> <li> Simplify histogram date setter</ul>


</details>


  </td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8757/files#diff-952e26660e4d6aadd292ea2ef7b314e139a4f516d0b3931e20d42d6394700d07">+10/-46</a>&nbsp;
</td>

</tr>

<tr>
  <td>
    <details>
<summary><strong>SearchResult.vue</strong><dd><code>Integrate RED
metrics and improve UX</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></summary>
<hr>

web/src/plugins/traces/SearchResult.vue

<ul><li>Replace scatter chart with RED metrics dashboard<br> <li> Add
loading and empty states within component<br> <li> Emit time-range on
metric zoom selection<br> <li> Adjust layout heights and refs</ul>


</details>


  </td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8757/files#diff-7fc8153d64d38cf0945757bad8ab5e95ceae7e1c7daaeb300edbbfb484314e50">+76/-62</a>&nbsp;
</td>

</tr>

<tr>
  <td>
    <details>
<summary><strong>TracesMetricsDashboard.vue</strong><dd><code>New traces
metrics dashboard component</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; </dd></summary>
<hr>

web/src/plugins/traces/metrics/TracesMetricsDashboard.vue

<ul><li>New dashboard component rendering metrics<br> <li> Accepts
stream, timeRange, filter, show<br> <li> Loads and customizes schema,
handles zoom<br> <li> Exposes refresh/load methods, auto-refresh
hooks</ul>


</details>


  </td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8757/files#diff-7b6f29a2737d9501b18dbd8622eba4965e4bc2b92115627ae7d2e70cc3382087">+217/-0</a>&nbsp;
</td>

</tr>

<tr>
  <td>
    <details>
<summary><strong>metrics.json</strong><dd><code>Add traces metrics
schema (Rate/Errors/Duration)</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; </dd></summary>
<hr>

web/src/plugins/traces/metrics/metrics.json

<ul><li>Add predefined dashboard with three panels<br> <li> Rate,
Errors, Duration queries using histogram<br> <li> Uses
<code>[WHERE_CLAUSE]</code> placeholder for filters<br> <li> Layout and
visualization configs included</ul>


</details>


  </td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8757/files#diff-8bf43bcbba5150a185625f458adcb6756145e7bfcbbf632d87a9d487a937524e">+415/-0</a>&nbsp;
</td>

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

</details>

___

2025-10-10 13:02:55 +05:30

..

tracesPage.js

feat: Rate, Errors and Duration (RED) metrics on traces list page (#8757)

2025-10-10 13:02:55 +05:30