mirror of
https://github.com/openobserve/openobserve.git
synced 2026-11-05 08:09:22 +00:00
### **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> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/7713/files#diff-e5376e7e77bf3aaf6590c2522d8c2dbffcc95a8006ae0d6dc0040a37825367d6">+70/-52</a> </td> </tr> <tr> <td><strong>DashboardQueryBuilder.vue</strong><dd><code>Hide X-axis controls for metric panels</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/7713/files#diff-a4f9abbeaad1156ab6ba5740d59ccb869d6a9172ca1c64b89cff78f3d7783409">+3/-0</a> </td> </tr> <tr> <td><strong>Index.vue</strong><dd><code>Debounce config updates; skip API when unnecessary</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/7713/files#diff-0323c3da69b369843c5d72bf4df5b00ca6b5147192a213baf331659ecf92af62">+23/-0</a> </td> </tr> <tr> <td><strong>Index.vue</strong><dd><code>Debounced config watcher with API necessity check</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/7713/files#diff-a6734928ea4dcb5244e90de5a16fe6f5cafa95ccf58430ac7b548a065daf3d61">+21/-1</a> </td> </tr> <tr> <td><strong>AddPanel.vue</strong><dd><code>Outdated detection uses API-need; debounce updates</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/7713/files#diff-c9632db1ad95af95aba10161bcbc7c5608318919f228637bdafae3f3a31267e8">+32/-5</a> </td> </tr> <tr> <td><strong>usePanelDataLoader.ts</strong><dd><code>Separate schema/time watchers; API-need gating</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/7713/files#diff-5a42e9493a7bcd722b88e61fd38883c4f61001bc9cafa399f65f8eafda3aace9">+22/-1</a> </td> </tr> <tr> <td><strong>checkConfigChangeApiCall.ts</strong><dd><code>Add utility to detect API-required config changes</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/7713/files#diff-5c85b8000a7da159a0fe523af41fa5db2cc5318b164e81a0755178f6df9e0b9d">+65/-0</a> </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> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/7713/files#diff-fbba1700750053b9eaf38ddd30dab84531bc44131c795ebb713811e4930cd7cb">+43/-0</a> </td> </tr> </table></details></td></tr></tr></tbody></table> </details> ___ --------- Co-authored-by: ktx-abhay <abhay.padamani@kiara.tech>
66 lines
1.6 KiB
TypeScript
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;
|
|
};
|