IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Save Drawer: reduce the number of diff elements we show (#48309)

Browse Source
This commit is contained in:
Ryan McKinley 2022-04-28 07:02:33 -07:00 committed by GitHub
parent f0f3134cb1
commit fee291c3c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 27 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
public/app/features/dashboard/components/SaveDashboard/SaveDashboardDiff.tsx
View File

@ -1,5 +1,5 @@
import { css } from '@emotion/css';
import React from 'react';
import React, { ReactElement } from 'react';
import { useAsync } from 'react-use';
import { GrafanaTheme2 } from '@grafana/data';
@ -22,12 +22,30 @@ export const SaveDashboardDiff = ({ diff, oldValue, newValue }: SaveDashboardDif
const loader = useAsync(async () => {
const oldJSON = JSON.stringify(oldValue ?? {}, null, 2);
const newJSON = JSON.stringify(newValue ?? {}, null, 2);
// Schema changes will have MANY changes that the user will not understand
let schemaChange: ReactElement | undefined = undefined;
const diffs: ReactElement[] = [];
let count = 0;
if (diff) {
for (const [key, changes] of Object.entries(diff)) {
// this takes a long time for large diffs (so this is async)
const g = <DiffGroup diffs={changes} key={key} title={key} />;
if (key === 'schemaVersion') {
schemaChange = g;
} else {
diffs.push(g);
}
count += changes.length;
}
}
return {
oldJSON,
newJSON,
diffs: Object.entries(diff ?? []).map(([key, diffs]) => (
<DiffGroup diffs={diffs} key={key} title={key} /> // this takes a long time for large diffs
)),
schemaChange,
diffs,
count,
showDiffs: count < 15, // overwhelming if too many changes
};
}, [diff, oldValue, newValue]);
@ -36,15 +54,17 @@ export const SaveDashboardDiff = ({ diff, oldValue, newValue }: SaveDashboardDif
return <Spinner />;
}
if (!value.diffs.length) {
if (value.count < 1) {
return <div>No changes in this dashboard</div>;
}
return (
<div>
<div className={styles.spacer}>{value.diffs}</div>
{value.schemaChange && <div className={styles.spacer}>{value.schemaChange}</div>}
<h4>JSON Diff</h4>
{value.showDiffs && <div className={styles.spacer}>{value.diffs}</div>}
<h4>JSON Model</h4>
<DiffViewer oldValue={value.oldJSON} newValue={value.newJSON} />
</div>
);