mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Save Drawer: reduce the number of diff elements we show (#48309)
This commit is contained in:
parent
f0f3134cb1
commit
fee291c3c8
@ -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>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user