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

Explore: query history: fix error when removing last item (#42179) (#42222)

Browse Source 
* explore: rich-history: fix data inconsistency

* also handle starred-queries tab

(cherry picked from commit 06e474dfd5)

Co-authored-by: Gábor Farkas <gabor.farkas@gmail.com>
This commit is contained in:
Grot (@grafanabot) 2021-11-24 08:15:29 -05:00 committed by GitHub
parent 2e2e6c4920
commit c1afc4deac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
View File

@ -137,16 +137,13 @@ export function RichHistoryQueriesTab(props: Props) {
} = props; } = props;
const [timeFilter, setTimeFilter] = useState<[number, number]>([0, retentionPeriod]); const [timeFilter, setTimeFilter] = useState<[number, number]>([0, retentionPeriod]);
const [filteredQueries, setFilteredQueries] = useState<RichHistoryQuery[]>([]); const [data, setData] = useState<[RichHistoryQuery[], ReturnType<typeof createDatasourcesList>]>([[], []]);
const [searchInput, setSearchInput] = useState(''); const [searchInput, setSearchInput] = useState('');
const [debouncedSearchInput, setDebouncedSearchInput] = useState(''); const [debouncedSearchInput, setDebouncedSearchInput] = useState('');
const theme = useTheme(); const theme = useTheme();
const styles = getStyles(theme, height); const styles = getStyles(theme, height);
const datasourcesRetrievedFromQueryHistory = uniqBy(queries, 'datasourceName').map((d) => d.datasourceName);
const listOfDatasources = createDatasourcesList(datasourcesRetrievedFromQueryHistory);
useDebounce( useDebounce(
() => { () => {
setDebouncedSearchInput(searchInput); setDebouncedSearchInput(searchInput);
@ -156,17 +153,23 @@ export function RichHistoryQueriesTab(props: Props) {
); );
useEffect(() => { useEffect(() => {
setFilteredQueries( const datasourcesRetrievedFromQueryHistory = uniqBy(queries, 'datasourceName').map((d) => d.datasourceName);
const listOfDatasources = createDatasourcesList(datasourcesRetrievedFromQueryHistory);
setData([
filterAndSortQueries( filterAndSortQueries(
queries, queries,
sortOrder, sortOrder,
datasourceFilters.map((d) => d.value), datasourceFilters.map((d) => d.value),
debouncedSearchInput, debouncedSearchInput,
timeFilter timeFilter
) ),
); listOfDatasources,
]);
}, [timeFilter, queries, sortOrder, datasourceFilters, debouncedSearchInput]); }, [timeFilter, queries, sortOrder, datasourceFilters, debouncedSearchInput]);
const [filteredQueries, listOfDatasources] = data;
/* mappedQueriesToHeadings is an object where query headings (stringified dates/data sources) /* mappedQueriesToHeadings is an object where query headings (stringified dates/data sources)
* are keys and arrays with queries that belong to that headings are values. * are keys and arrays with queries that belong to that headings are values.
*/ */

16
public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx
View File

@ -80,16 +80,13 @@ export function RichHistoryStarredTab(props: Props) {
exploreId, exploreId,
} = props; } = props;
const [filteredQueries, setFilteredQueries] = useState<RichHistoryQuery[]>([]); const [data, setData] = useState<[RichHistoryQuery[], ReturnType<typeof createDatasourcesList>]>([[], []]);
const [searchInput, setSearchInput] = useState(''); const [searchInput, setSearchInput] = useState('');
const [debouncedSearchInput, setDebouncedSearchInput] = useState(''); const [debouncedSearchInput, setDebouncedSearchInput] = useState('');
const theme = useTheme(); const theme = useTheme();
const styles = getStyles(theme); const styles = getStyles(theme);
const datasourcesRetrievedFromQueryHistory = uniqBy(queries, 'datasourceName').map((d) => d.datasourceName);
const listOfDatasources = createDatasourcesList(datasourcesRetrievedFromQueryHistory);
useDebounce( useDebounce(
() => { () => {
setDebouncedSearchInput(searchInput); setDebouncedSearchInput(searchInput);
@ -99,17 +96,22 @@ export function RichHistoryStarredTab(props: Props) {
); );
useEffect(() => { useEffect(() => {
const datasourcesRetrievedFromQueryHistory = uniqBy(queries, 'datasourceName').map((d) => d.datasourceName);
const listOfDatasources = createDatasourcesList(datasourcesRetrievedFromQueryHistory);
const starredQueries = queries.filter((q) => q.starred === true); const starredQueries = queries.filter((q) => q.starred === true);
setFilteredQueries( setData([
filterAndSortQueries( filterAndSortQueries(
starredQueries, starredQueries,
sortOrder, sortOrder,
datasourceFilters.map((d) => d.value), datasourceFilters.map((d) => d.value),
debouncedSearchInput debouncedSearchInput
) ),
); listOfDatasources,
]);
}, [queries, sortOrder, datasourceFilters, debouncedSearchInput]); }, [queries, sortOrder, datasourceFilters, debouncedSearchInput]);
const [filteredQueries, listOfDatasources] = data;
return ( return (
<div className={styles.container}> <div className={styles.container}>
<div className={styles.containerContent}> <div className={styles.containerContent}>