Files
Bhargav 268fe6954a fix: logs correlation UI fixes (#9703)
### **PR Type**
Enhancement, Bug fix


___

### **Description**
- Enhance correlation dashboard UI layout
  - increase chart height, update filter button styles

- Improve DetailTable correlation tab behavior
  - add initialTab prop and auto-load watchers

- Adjust log detail navigation column sizes

- Extend correlation handlers in JSON and SearchResult


___



<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>useMetricsCorrelationDashboard.ts</strong><dd><code>Increase
correlation dashboard chart height</code>&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</dd></summary>
<hr>

web/src/composables/useMetricsCorrelationDashboard.ts

- Increase dashboard chart height from 36 to 44 units


</details>


  </td>
<td><a
href="https://github.com/openobserve/openobserve/pull/9703/files#diff-61aa6123b09464987fa96e7e48c9e3d4648735b5bfc996d49af639f44f833c4d">+1/-1</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>

<tr>
  <td>
    <details>

<summary><strong>TelemetryCorrelationDashboard.vue</strong><dd><code>Update
correlation dashboard filter buttons</code>&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</dd></summary>
<hr>

web/src/plugins/correlation/TelemetryCorrelationDashboard.vue

<ul><li>Add flat prop and update text-color on apply buttons<br> <li>
Change filter v-for to use pendingDimensions<br> <li> Update event
handlers for pending dimension changes<br> <li> Add embedded mode apply
button with styling</ul>


</details>


  </td>
<td><a
href="https://github.com/openobserve/openobserve/pull/9703/files#diff-b77a766fa0094f641873071a8f13c73704933b941f387ed105e85a4e59efdb38">+19/-6</a>&nbsp;
&nbsp; </td>

</tr>

<tr>
  <td>
    <details>
<summary><strong>DetailTable.vue</strong><dd><code>Enhance DetailTable
correlation loading</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/DetailTable.vue

<ul><li>Adjust navigation button columns from col-2 to col-1<br> <li>
Introduce initialTab prop for default tab selection<br> <li> Add
watchers to auto-load correlation data on tab/rowData<br> <li> Emit
correlation events with original modelValue</ul>


</details>


  </td>
<td><a
href="https://github.com/openobserve/openobserve/pull/9703/files#diff-80552b5d25fa6cef9fbbe430b1865d761c4b132284c2d2175afceea8cbabc8c7">+61/-12</a>&nbsp;
</td>

</tr>

<tr>
  <td>
    <details>
<summary><strong>JsonPreview.vue</strong><dd><code>Refine JSON preview
correlation handler</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/JsonPreview.vue

<ul><li>Reformat deep watch callback for selectedStreamFields<br> <li>
Update openCorrelation to log and emit props.value</ul>


</details>


  </td>
<td><a
href="https://github.com/openobserve/openobserve/pull/9703/files#diff-3985073134d35ff074742944b114d0905524038b42e6d2ac887fef2c8436fb16">+14/-10</a>&nbsp;
</td>

</tr>

<tr>
  <td>
    <details>
<summary><strong>SearchResult.vue</strong><dd><code>Implement direct
correlation on log rows</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; </dd></summary>
<hr>

web/src/plugins/logs/SearchResult.vue

<ul><li>Rename correlation handler to openLogDetailsWithCorrelation<br>
<li> Add detailTableInitialTab state and reset logic<br> <li> Implement
direct correlation row opening and loading</ul>


</details>


  </td>
<td><a
href="https://github.com/openobserve/openobserve/pull/9703/files#diff-5e65533aa4754bb6d0074fda18ffc1ecacded3b9ca6bc28a161c3f6b12f20195">+45/-1</a>&nbsp;
&nbsp; </td>

</tr>

<tr>
  <td>
    <details>
<summary><strong>detail-table.scss</strong><dd><code>Increase detail
dialog width</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &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/styles/logs/detail-table.scss

- Increase .searchdetaildialog width from 70vw to 85vw


</details>


  </td>
<td><a
href="https://github.com/openobserve/openobserve/pull/9703/files#diff-63d5673331a5ee1ab792d07831e4a6dbb0d2d40d2ad628652d57944e47a96338">+1/-1</a>&nbsp;
&nbsp; &nbsp; </td>

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

</details>

___
2025-12-23 17:21:16 +05:30
..