Files
openobserve/web/src/utils/dashboard/checkConfigChangeApiCall.ts
T
ktx-vaidehiandktx-abhay ca99331c98 feat: dashboard stop unnecessary api call for config change (#7713)
### **PR Type**
Enhancement, Bug fix


___

### **Description**
Add config-change detection to avoid API calls
Debounce and auto-apply non-API config updates
Fix metric panel field resets and builder UI
Refactor panel data conversion into reusable helper


___

### Diagram Walkthrough


```mermaid
flowchart LR
  A["Dashboard/Logs/Metrics configs"] -- "watch changes" --> B["checkConfigChangeApiCallOrNot"]
  B -- "needs API" --> C["loadData() / keep state"]
  B -- "no API" --> D["apply local config + resize"]
  E["PanelSchemaRenderer"] -- "convertPanelDataCommon" --> F["panelData refresh"]
```



<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><details><summary>7
files</summary><table>
<tr>
<td><strong>PanelSchemaRenderer.vue</strong><dd><code>Refactor data
conversion and watch schema changes</code>&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7713/files#diff-e5376e7e77bf3aaf6590c2522d8c2dbffcc95a8006ae0d6dc0040a37825367d6">+70/-52</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>DashboardQueryBuilder.vue</strong><dd><code>Hide X-axis
controls for metric panels</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7713/files#diff-a4f9abbeaad1156ab6ba5740d59ccb869d6a9172ca1c64b89cff78f3d7783409">+3/-0</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>

<tr>
<td><strong>Index.vue</strong><dd><code>Debounce config updates; skip
API when unnecessary</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7713/files#diff-0323c3da69b369843c5d72bf4df5b00ca6b5147192a213baf331659ecf92af62">+23/-0</a>&nbsp;
&nbsp; </td>

</tr>

<tr>
<td><strong>Index.vue</strong><dd><code>Debounced config watcher with
API necessity check</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7713/files#diff-a6734928ea4dcb5244e90de5a16fe6f5cafa95ccf58430ac7b548a065daf3d61">+21/-1</a>&nbsp;
&nbsp; </td>

</tr>

<tr>
<td><strong>AddPanel.vue</strong><dd><code>Outdated detection uses
API-need; debounce updates</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7713/files#diff-c9632db1ad95af95aba10161bcbc7c5608318919f228637bdafae3f3a31267e8">+32/-5</a>&nbsp;
&nbsp; </td>

</tr>

<tr>
<td><strong>usePanelDataLoader.ts</strong><dd><code>Separate schema/time
watchers; API-need gating</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7713/files#diff-5a42e9493a7bcd722b88e61fd38883c4f61001bc9cafa399f65f8eafda3aace9">+22/-1</a>&nbsp;
&nbsp; </td>

</tr>

<tr>
<td><strong>checkConfigChangeApiCall.ts</strong><dd><code>Add utility to
detect API-required config changes</code>&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7713/files#diff-5c85b8000a7da159a0fe523af41fa5db2cc5318b164e81a0755178f6df9e0b9d">+65/-0</a>&nbsp;
&nbsp; </td>

</tr>
</table></details></td></tr><tr><td><strong>Bug
fix</strong></td><td><details><summary>1 files</summary><table>
<tr>
<td><strong>useDashboardPanel.ts</strong><dd><code>Reset fields for
metric type on type switch</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7713/files#diff-fbba1700750053b9eaf38ddd30dab84531bc44131c795ebb713811e4930cd7cb">+43/-0</a>&nbsp;
&nbsp; </td>

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

</details>

___

---------

Co-authored-by: ktx-abhay <abhay.padamani@kiara.tech>
2025-08-19 18:34:26 +05:30

66 lines
1.6 KiB
TypeScript

// Whitelist of config keys that require API calls when changed
const API_REQUIRING_CHANGES = new Set(["queries", "variables"]);
/**
* Flattens an object's keys with dot notation
*/
const flattenObject = (obj: any, prefix = ""): Record<string, any> => {
if (obj === null || obj === undefined) {
return {};
}
return Object.keys(obj).reduce((acc: Record<string, any>, k: string) => {
const pre = prefix.length ? prefix + "." : "";
if (
typeof obj[k] === "object" &&
obj[k] !== null &&
!Array.isArray(obj[k])
) {
Object.assign(acc, flattenObject(obj[k], pre + k));
} else {
acc[pre + k] = obj[k];
}
return acc;
}, {});
};
/**
* Gets changed keys between two objects
*/
const getChangedKeys = (oldObj: any, newObj: any): string[] => {
const flatOld = flattenObject(oldObj);
const flatNew = flattenObject(newObj);
const changedKeys: string[] = [];
// Check all keys in both objects
const allKeys = Array.from(
new Set([...Object.keys(flatOld), ...Object.keys(flatNew)]),
);
for (const key of allKeys) {
if (JSON.stringify(flatOld[key]) !== JSON.stringify(flatNew[key])) {
changedKeys.push(key);
}
}
return changedKeys;
};
/**
* Checks if the changes between old and new config require an API call
*/
export const checkIfConfigChangeRequiredApiCallOrNot = (
oldConfig: any,
newConfig: any,
): boolean => {
const changedKeys = getChangedKeys(oldConfig, newConfig);
const configNeedsApiCall = changedKeys.some((key) =>
Array.from(API_REQUIRING_CHANGES).some((apiKey) => key.startsWith(apiKey)),
);
if (configNeedsApiCall) {
return true;
}
return false;
};