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

Cloudwatch: Fix issue where selected log groups clear from dashboards if there are more than 50 results (#57196)

Browse Source
This commit is contained in:
Sarah Zinger 2022-10-18 14:34:27 -04:00 committed by GitHub
parent 9c954d06ab
commit b2e2879b07
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
public/app/plugins/datasource/cloudwatch/components/LogGroupSelector.test.tsx
View File

@ -1,4 +1,4 @@
import { act, render, screen, waitFor } from '@testing-library/react'; import { act, render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event'; import userEvent from '@testing-library/user-event';
import lodash from 'lodash'; // eslint-disable-line lodash/import-scope import lodash from 'lodash'; // eslint-disable-line lodash/import-scope
import React from 'react'; import React from 'react';
@ -26,7 +26,7 @@ describe('LogGroupSelector', () => {
jest.resetAllMocks(); jest.resetAllMocks();
}); });
it('updates upstream query log groups on region change', async () => { it('does not clear previously selected log groups after region change', async () => {
ds.datasource.api.describeLogGroups = jest.fn().mockImplementation(async (params: DescribeLogGroupsRequest) => { ds.datasource.api.describeLogGroups = jest.fn().mockImplementation(async (params: DescribeLogGroupsRequest) => {
if (params.region === 'region1') { if (params.region === 'region1') {
return Promise.resolve(['log_group_1'].map(toOption)); return Promise.resolve(['log_group_1'].map(toOption));
@ -40,36 +40,10 @@ describe('LogGroupSelector', () => {
}; };
const { rerender } = render(<LogGroupSelector {...props} />); const { rerender } = render(<LogGroupSelector {...props} />);
await waitFor(() => expect(onChange).toHaveBeenCalledTimes(1));
expect(onChange).toHaveBeenLastCalledWith(['log_group_1']);
expect(await screen.findByText('log_group_1')).toBeInTheDocument(); expect(await screen.findByText('log_group_1')).toBeInTheDocument();
act(() => rerender(<LogGroupSelector {...props} region="region2" />)); act(() => rerender(<LogGroupSelector {...props} region="region2" />));
await waitFor(() => expect(onChange).toHaveBeenCalledTimes(1));
expect(onChange).toHaveBeenLastCalledWith([]);
});
it('does not update upstream query log groups if saved is false', async () => {
ds.datasource.api.describeLogGroups = jest.fn().mockImplementation(async (params: DescribeLogGroupsRequest) => {
if (params.region === 'region1') {
return Promise.resolve(['log_group_1'].map(toOption));
} else {
return Promise.resolve(['log_group_2'].map(toOption));
}
});
const props = {
...defaultProps,
selectedLogGroups: ['log_group_1'],
};
const { rerender } = render(<LogGroupSelector {...props} />);
await waitFor(() => expect(onChange).toHaveBeenCalledTimes(1));
expect(onChange).toHaveBeenLastCalledWith(['log_group_1']);
expect(await screen.findByText('log_group_1')).toBeInTheDocument(); expect(await screen.findByText('log_group_1')).toBeInTheDocument();
act(() => rerender(<LogGroupSelector {...props} region="region2" saved={false} />));
await waitFor(() => expect(onChange).toHaveBeenCalledTimes(1));
expect(onChange).toHaveBeenLastCalledWith(['log_group_1']);
}); });
it('should merge results of remote log groups search with existing results', async () => { it('should merge results of remote log groups search with existing results', async () => {

16
public/app/plugins/datasource/cloudwatch/components/LogGroupSelector.tsx
View File

@ -1,4 +1,4 @@
import { debounce, intersection, unionBy } from 'lodash'; import { debounce, unionBy } from 'lodash';
import React, { useCallback, useEffect, useMemo, useState } from 'react'; import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { SelectableValue, toOption } from '@grafana/data'; import { SelectableValue, toOption } from '@grafana/data';
@ -25,7 +25,7 @@ export interface LogGroupSelectorProps {
onOpenMenu?: () => Promise<void>; onOpenMenu?: () => Promise<void>;
refId?: string; refId?: string;
width?: number | 'auto'; width?: number | 'auto';
saved?: boolean; saved?: boolean; // is only used in the config editor
} }
export const LogGroupSelector: React.FC<LogGroupSelectorProps> = ({ export const LogGroupSelector: React.FC<LogGroupSelectorProps> = ({
@ -90,7 +90,7 @@ export const LogGroupSelector: React.FC<LogGroupSelectorProps> = ({
// Reset the log group options if the datasource or region change and are saved // Reset the log group options if the datasource or region change and are saved
useEffect(() => { useEffect(() => {
async function resetLogGroups() { async function getAvailableLogGroupOptions() {
// Don't call describeLogGroups if datasource or region is undefined // Don't call describeLogGroups if datasource or region is undefined
if (!datasource || !datasource.getActualRegion(region)) { if (!datasource || !datasource.getActualRegion(region)) {
setAvailableLogGroups([]); setAvailableLogGroups([]);
@ -100,19 +100,15 @@ export const LogGroupSelector: React.FC<LogGroupSelectorProps> = ({
setLoadingLogGroups(true); setLoadingLogGroups(true);
return fetchLogGroupOptions(datasource.getActualRegion(region)) return fetchLogGroupOptions(datasource.getActualRegion(region))
.then((logGroups) => { .then((logGroups) => {
const newSelectedLogGroups = intersection(
selectedLogGroups,
logGroups.map((l) => l.value || '')
);
onChange(newSelectedLogGroups);
setAvailableLogGroups(logGroups); setAvailableLogGroups(logGroups);
}) })
.finally(() => { .finally(() => {
setLoadingLogGroups(false); setLoadingLogGroups(false);
}); });
} }
// Only reset if the current datasource is saved
saved && resetLogGroups(); // Config editor does not fetch new log group options unless changes have been saved
saved && getAvailableLogGroupOptions();
// this hook shouldn't get called every time selectedLogGroups or onChange updates // this hook shouldn't get called every time selectedLogGroups or onChange updates
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [datasource, region, saved]); }, [datasource, region, saved]);