diff --git a/pkg/tsdb/cloudwatch/metric_find_query.go b/pkg/tsdb/cloudwatch/metric_find_query.go index bace4f03d7b..fdc9f8e1d7f 100644 --- a/pkg/tsdb/cloudwatch/metric_find_query.go +++ b/pkg/tsdb/cloudwatch/metric_find_query.go @@ -8,10 +8,12 @@ import ( "net/url" "reflect" "sort" + "strconv" "strings" "time" "github.com/aws/aws-sdk-go/aws" + "github.com/aws/aws-sdk-go/service/cloudwatchlogs" "github.com/aws/aws-sdk-go/service/ec2" "github.com/aws/aws-sdk-go/service/resourcegroupstaggingapi" "github.com/grafana/grafana-plugin-sdk-go/backend" @@ -282,3 +284,38 @@ func (e *cloudWatchExecutor) resourceGroupsGetResources(ctx context.Context, plu return &resp, nil } + +// legacy route, will be removed once GovCloud supports Cross Account Observability +func (e *cloudWatchExecutor) handleGetLogGroups(ctx context.Context, pluginCtx backend.PluginContext, parameters url.Values) ([]suggestData, error) { + region := parameters.Get("region") + limit := parameters.Get("limit") + logGroupNamePrefix := parameters.Get("logGroupNamePrefix") + + logsClient, err := e.getCWLogsClient(ctx, pluginCtx, region) + if err != nil { + return nil, err + } + + logGroupLimit := defaultLogGroupLimit + intLimit, err := strconv.ParseInt(limit, 10, 64) + if err == nil && intLimit > 0 { + logGroupLimit = intLimit + } + + input := &cloudwatchlogs.DescribeLogGroupsInput{Limit: aws.Int64(logGroupLimit)} + if len(logGroupNamePrefix) > 0 { + input.LogGroupNamePrefix = aws.String(logGroupNamePrefix) + } + var response *cloudwatchlogs.DescribeLogGroupsOutput + response, err = logsClient.DescribeLogGroups(input) + if err != nil || response == nil { + return nil, err + } + result := make([]suggestData, 0) + for _, logGroup := range response.LogGroups { + logGroupName := *logGroup.LogGroupName + result = append(result, suggestData{Text: logGroupName, Value: logGroupName, Label: logGroupName}) + } + + return result, nil +} diff --git a/pkg/tsdb/cloudwatch/resource_handler.go b/pkg/tsdb/cloudwatch/resource_handler.go index fe41af28ec3..8358ca85d6d 100644 --- a/pkg/tsdb/cloudwatch/resource_handler.go +++ b/pkg/tsdb/cloudwatch/resource_handler.go @@ -26,6 +26,10 @@ func (e *cloudWatchExecutor) newResourceMux() *http.ServeMux { mux.HandleFunc("/accounts", routes.ResourceRequestMiddleware(routes.AccountsHandler, logger, e.getRequestContext)) mux.HandleFunc("/namespaces", routes.ResourceRequestMiddleware(routes.NamespacesHandler, logger, e.getRequestContext)) mux.HandleFunc("/log-group-fields", routes.ResourceRequestMiddleware(routes.LogGroupFieldsHandler, logger, e.getRequestContext)) + + // remove this once AWS's Cross Account Observability is supported in GovCloud + mux.HandleFunc("/legacy-log-groups", handleResourceReq(e.handleGetLogGroups)) + return mux } diff --git a/public/app/plugins/datasource/cloudwatch/components/ConfigEditor.test.tsx b/public/app/plugins/datasource/cloudwatch/components/ConfigEditor.test.tsx index 95df690de0c..a2506f4677e 100644 --- a/public/app/plugins/datasource/cloudwatch/components/ConfigEditor.test.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/ConfigEditor.test.tsx @@ -25,12 +25,23 @@ jest.mock('./XrayLinkConfig', () => ({ const putMock = jest.fn(); const getMock = jest.fn(); +const mockAppEvents = { + subscribe: () => ({ unsubscribe: jest.fn() }), +}; jest.mock('@grafana/runtime', () => ({ ...jest.requireActual('@grafana/runtime'), getBackendSrv: () => ({ put: putMock, get: getMock, }), + getAppEvents: () => mockAppEvents, + config: { + ...jest.requireActual('@grafana/runtime').config, + awsAssumeRoleEnabled: true, + featureToggles: { + cloudWatchCrossAccountQuerying: true, + }, + }, })); const props: Props = { @@ -150,7 +161,7 @@ describe('Render', () => { it('should display log group selector field', async () => { setup(); - await waitFor(async () => expect(await screen.getByText('Select log groups')).toBeInTheDocument()); + await waitFor(async () => expect(screen.getByText('Select log groups')).toBeInTheDocument()); }); it('should only display the first two default log groups and show all of them when clicking "Show all" button', async () => { @@ -204,17 +215,7 @@ describe('Render', () => { }); it('should show error message if Select log group button is clicked when data source is never saved', async () => { - const SAVED_VERSION = undefined; - const newProps = { - ...props, - options: { - ...props.options, - version: SAVED_VERSION, - }, - }; - - render(); - + setup({ version: 1 }); await waitFor(() => expect(screen.getByText('Select log groups')).toBeInTheDocument()); await userEvent.click(screen.getByText('Select log groups')); await waitFor(() => @@ -256,12 +257,11 @@ describe('Render', () => { }); it('should open log group selector if Select log group button is clicked when data source has saved changes', async () => { - const SAVED_VERSION = undefined; const newProps = { ...props, options: { ...props.options, - version: SAVED_VERSION, + version: 1, }, }; const { rerender } = render(); @@ -270,7 +270,7 @@ describe('Render', () => { ...newProps, options: { ...newProps.options, - version: 1, + version: 2, }, }; rerender(); diff --git a/public/app/plugins/datasource/cloudwatch/components/ConfigEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/ConfigEditor.tsx index 55861707828..496ae1ebc21 100644 --- a/public/app/plugins/datasource/cloudwatch/components/ConfigEditor.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/ConfigEditor.tsx @@ -19,7 +19,7 @@ import { CloudWatchDatasource } from '../datasource'; import { SelectableResourceValue } from '../resources/types'; import { CloudWatchJsonData, CloudWatchSecureJsonData } from '../types'; -import { LogGroupsField } from './LogGroups/LogGroupsField'; +import { LogGroupsFieldWrapper } from './LogGroups/LogGroupsField'; import { XrayLinkConfig } from './XrayLinkConfig'; export type Props = DataSourcePluginOptionsEditorProps; @@ -94,39 +94,47 @@ export const ConfigEditor = (props: Props) => { shrink={true} {...logGroupFieldState} > - { - if (saved) { - return; - } + {datasource ? ( + { + if (saved) { + return; + } - let error = 'You need to save the data source before adding log groups.'; - if (props.options.version && props.options.version > 1) { - error = - 'You have unsaved connection detail changes. You need to save the data source before adding log groups.'; - } - setLogGroupFieldState({ - invalid: true, - error, - }); - throw new Error(error); - }} - legacyLogGroupNames={defaultLogGroups} - logGroups={logGroups} - onChange={(updatedLogGroups) => { - onOptionsChange({ - ...props.options, - jsonData: { - ...props.options.jsonData, - logGroups: updatedLogGroups, - defaultLogGroups: undefined, - }, - }); - }} - maxNoOfVisibleLogGroups={2} - /> + let error = 'You need to save the data source before adding log groups.'; + if (props.options.version && props.options.version > 1) { + error = + 'You have unsaved connection detail changes. You need to save the data source before adding log groups.'; + } + setLogGroupFieldState({ + invalid: true, + error, + }); + throw new Error(error); + }} + legacyLogGroupNames={defaultLogGroups} + logGroups={logGroups} + onChange={(updatedLogGroups) => { + onOptionsChange({ + ...props.options, + jsonData: { + ...props.options.jsonData, + logGroups: updatedLogGroups, + defaultLogGroups: undefined, + }, + }); + }} + maxNoOfVisibleLogGroups={2} + //legacy props + legacyOnChange={(logGroups) => { + updateDatasourcePluginJsonDataOption(props, 'defaultLogGroups', logGroups); + }} + /> + ) : ( + <> + )} { - props.options.version && setSaved(true); + props.options.version && props.options.version > 1 && setSaved(true); }, [props.options.version]); return saved; diff --git a/public/app/plugins/datasource/cloudwatch/components/LogGroups/LegacyLogGroupNamesSelection.tsx b/public/app/plugins/datasource/cloudwatch/components/LogGroups/LegacyLogGroupNamesSelection.tsx new file mode 100644 index 00000000000..c0821a17074 --- /dev/null +++ b/public/app/plugins/datasource/cloudwatch/components/LogGroups/LegacyLogGroupNamesSelection.tsx @@ -0,0 +1,30 @@ +import { css } from '@emotion/css'; +import React from 'react'; + +import { CloudWatchDatasource } from '../../datasource'; + +import { LogGroupSelector } from './LegacyLogGroupSelector'; + +type Props = { + datasource: CloudWatchDatasource; + onChange: (logGroups: string[]) => void; + region: string; + legacyLogGroupNames: string[]; +}; + +const rowGap = css` + gap: 3px; +`; + +export const LegacyLogGroupSelection = ({ datasource, region, legacyLogGroupNames, onChange }: Props) => { + return ( +
+ +
+ ); +}; diff --git a/public/app/plugins/datasource/cloudwatch/components/LogGroups/LegacyLogGroupSelector.tsx b/public/app/plugins/datasource/cloudwatch/components/LogGroups/LegacyLogGroupSelector.tsx new file mode 100644 index 00000000000..e88b5622ec9 --- /dev/null +++ b/public/app/plugins/datasource/cloudwatch/components/LogGroups/LegacyLogGroupSelector.tsx @@ -0,0 +1,144 @@ +import { debounce, unionBy } from 'lodash'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; + +import { SelectableValue, toOption } from '@grafana/data'; +import { MultiSelect } from '@grafana/ui'; +import { InputActionMeta } from '@grafana/ui/src/components/Select/types'; +import { notifyApp } from 'app/core/actions'; +import { createErrorNotification } from 'app/core/copy/appNotification'; +import { dispatch } from 'app/store/store'; + +import { CloudWatchDatasource } from '../../datasource'; +import { appendTemplateVariables } from '../../utils/utils'; + +const MAX_LOG_GROUPS = 20; +const MAX_VISIBLE_LOG_GROUPS = 4; +const DEBOUNCE_TIMER = 300; + +export interface LogGroupSelectorProps { + region: string; + selectedLogGroups: string[]; + onChange: (logGroups: string[]) => void; + + datasource?: CloudWatchDatasource; + onOpenMenu?: () => Promise; + width?: number | 'auto'; + saved?: boolean; // is only used in the config editor +} + +export const LogGroupSelector: React.FC = ({ + region, + selectedLogGroups, + onChange, + datasource, + onOpenMenu, + width, + saved = true, +}) => { + const [loadingLogGroups, setLoadingLogGroups] = useState(false); + const [availableLogGroups, setAvailableLogGroups] = useState>>([]); + const logGroupOptions = useMemo( + () => unionBy(availableLogGroups, selectedLogGroups?.map(toOption), 'value'), + [availableLogGroups, selectedLogGroups] + ); + + const fetchLogGroupOptions = useCallback( + async (region: string, logGroupNamePrefix?: string) => { + if (!datasource) { + return []; + } + try { + const logGroups = await datasource.resources.legacyDescribeLogGroups(region, logGroupNamePrefix); + return logGroups; + } catch (err) { + dispatch(notifyApp(createErrorNotification(typeof err === 'string' ? err : JSON.stringify(err)))); + return []; + } + }, + [datasource] + ); + + const onLogGroupSearch = async (searchTerm: string, region: string, actionMeta: InputActionMeta) => { + if (actionMeta.action !== 'input-change' || !datasource) { + return; + } + + // No need to fetch matching log groups if the search term isn't valid + // This is also useful for preventing searches when a user is typing out a log group with template vars + // See https://docs.aws.amazon.com/AmazonCloudWatchLogs/latest/APIReference/API_LogGroup.html for the source of the pattern below + const logGroupNamePattern = /^[\.\-_/#A-Za-z0-9]+$/; + if (!logGroupNamePattern.test(searchTerm)) { + if (searchTerm !== '') { + dispatch(notifyApp(createErrorNotification('Invalid Log Group name: ' + searchTerm))); + } + return; + } + + setLoadingLogGroups(true); + const matchingLogGroups = await fetchLogGroupOptions(region, searchTerm); + setAvailableLogGroups(unionBy(availableLogGroups, matchingLogGroups, 'value')); + setLoadingLogGroups(false); + }; + + // Reset the log group options if the datasource or region change and are saved + useEffect(() => { + async function getAvailableLogGroupOptions() { + // Don't call describeLogGroups if datasource or region is undefined + if (!datasource || !datasource.getActualRegion(region)) { + setAvailableLogGroups([]); + return; + } + + setLoadingLogGroups(true); + return fetchLogGroupOptions(datasource.getActualRegion(region)) + .then((logGroups) => { + setAvailableLogGroups(logGroups); + }) + .finally(() => { + setLoadingLogGroups(false); + }); + } + + // Config editor does not fetch new log group options unless changes have been saved + saved && getAvailableLogGroupOptions(); + + // if component unmounts in the middle of setting state, we reset state and unsubscribe from fetchLogGroupOptions + return () => { + setAvailableLogGroups([]); + setLoadingLogGroups(false); + }; + // this hook shouldn't get called every time selectedLogGroups or onChange updates + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [datasource, region, saved]); + + const onOpenLogGroupMenu = async () => { + if (onOpenMenu) { + await onOpenMenu(); + } + }; + + const onLogGroupSearchDebounced = debounce(onLogGroupSearch, DEBOUNCE_TIMER); + + return ( + onChange(v.filter(({ value }) => value).map(({ value }) => value))} + closeMenuOnSelect={false} + isClearable + isOptionDisabled={() => selectedLogGroups.length >= MAX_LOG_GROUPS} + placeholder="Choose Log Groups" + maxVisibleValues={MAX_VISIBLE_LOG_GROUPS} + noOptionsMessage="No log groups available" + isLoading={loadingLogGroups} + onOpenMenu={onOpenLogGroupMenu} + onInputChange={(value, actionMeta) => { + onLogGroupSearchDebounced(value, region, actionMeta); + }} + width={width} + /> + ); +}; diff --git a/public/app/plugins/datasource/cloudwatch/components/LogGroups/LogGroupsField.tsx b/public/app/plugins/datasource/cloudwatch/components/LogGroups/LogGroupsField.tsx index efb53a7c8fb..d6071af3e46 100644 --- a/public/app/plugins/datasource/cloudwatch/components/LogGroups/LogGroupsField.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/LogGroups/LogGroupsField.tsx @@ -1,17 +1,20 @@ import { css } from '@emotion/css'; import React, { useEffect, useState } from 'react'; +import { config } from '@grafana/runtime'; + import { CloudWatchDatasource } from '../../datasource'; import { useAccountOptions } from '../../hooks'; import { DescribeLogGroupsRequest } from '../../resources/types'; import { LogGroup } from '../../types'; import { isTemplateVariable } from '../../utils/templateVariableUtils'; +import { LegacyLogGroupSelection } from './LegacyLogGroupNamesSelection'; import { LogGroupsSelector } from './LogGroupsSelector'; import { SelectedLogGroups } from './SelectedLogGroups'; type Props = { - datasource?: CloudWatchDatasource; + datasource: CloudWatchDatasource; onChange: (logGroups: LogGroup[]) => void; legacyLogGroupNames?: string[]; logGroups?: LogGroup[]; @@ -89,3 +92,32 @@ export const LogGroupsField = ({ ); }; + +// We had to bring back the Legacy Log Group selector to support due to an issue where GovClouds do not support the new Log Group API +// when that is fixed we can get rid of this wrapper component and just export the LogGroupsField +type WrapperProps = { + datasource: CloudWatchDatasource; + onChange: (logGroups: LogGroup[]) => void; + legacyLogGroupNames?: string[]; // will need this for a while for migration purposes + logGroups?: LogGroup[]; + region: string; + maxNoOfVisibleLogGroups?: number; + onBeforeOpen?: () => void; + + // Legacy Props, can remove once we remove support for Legacy Log Group Selector + legacyOnChange: (logGroups: string[]) => void; +}; + +export const LogGroupsFieldWrapper = (props: WrapperProps) => { + if (!config.featureToggles.cloudWatchCrossAccountQuerying) { + return ( + + ); + } + + return ; +}; diff --git a/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx b/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx index f31b8c26283..60635570b75 100644 --- a/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx @@ -18,10 +18,10 @@ import { // dom also includes Element polyfills import { CloudWatchDatasource } from '../datasource'; import syntax from '../language/cloudwatch-logs/syntax'; -import { CloudWatchJsonData, CloudWatchLogsQuery, CloudWatchQuery } from '../types'; +import { CloudWatchJsonData, CloudWatchLogsQuery, CloudWatchQuery, LogGroup } from '../types'; import { getStatsGroups } from '../utils/query/getStatsGroups'; -import { LogGroupsField } from './LogGroups/LogGroupsField'; +import { LogGroupsFieldWrapper } from './LogGroups/LogGroupsField'; export interface CloudWatchLogsQueryFieldProps extends QueryEditorProps, @@ -82,14 +82,18 @@ export const CloudWatchLogsQueryField = (props: CloudWatchLogsQueryFieldProps) = return ( <> - { + onChange={(logGroups: LogGroup[]) => { onChange({ ...query, logGroups, logGroupNames: undefined }); }} + //legacy props can be removed once we remove support for Legacy Log Group Selector + legacyOnChange={(logGroups: string[]) => { + onChange({ ...query, logGroupNames: logGroups }); + }} />
diff --git a/public/app/plugins/datasource/cloudwatch/components/LogsQueryField/LogsQueryField.tsx b/public/app/plugins/datasource/cloudwatch/components/LogsQueryField/LogsQueryField.tsx index 5a1b4c36fc6..f87b81a712f 100644 --- a/public/app/plugins/datasource/cloudwatch/components/LogsQueryField/LogsQueryField.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/LogsQueryField/LogsQueryField.tsx @@ -11,8 +11,7 @@ import { registerLanguage } from '../../language/monarch/register'; import { CloudWatchJsonData, CloudWatchLogsQuery, CloudWatchQuery } from '../../types'; import { getStatsGroups } from '../../utils/query/getStatsGroups'; -import { LogGroupsField } from './../LogGroups/LogGroupsField'; - +import { LogGroupsFieldWrapper } from './../LogGroups/LogGroupsField'; export interface CloudWatchLogsQueryFieldProps extends QueryEditorProps, Themeable2 { @@ -48,7 +47,7 @@ export const CloudWatchLogsQueryFieldMonaco = (props: CloudWatchLogsQueryFieldPr return ( <> - { onChange({ ...query, logGroups, logGroupNames: undefined }); }} + //legacy props + legacyOnChange={(logGroupNames) => { + onChange({ ...query, logGroupNames }); + }} />
diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor.test.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor.test.tsx index c1b2acd9752..dde91366146 100644 --- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor.test.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor.test.tsx @@ -46,6 +46,15 @@ jest.mock('./SQLCodeEditor', () => ({ })); export { SQLCodeEditor } from './SQLCodeEditor'; +jest.mock('@grafana/runtime', () => ({ + ...jest.requireActual('@grafana/runtime'), + config: { + ...jest.requireActual('@grafana/runtime').config, + featureToggles: { + cloudWatchCrossAccountQuerying: true, + }, + }, +})); describe('QueryEditor should render right editor', () => { describe('when using grafana 6.3.0 metric query', () => { diff --git a/public/app/plugins/datasource/cloudwatch/datasource.ts b/public/app/plugins/datasource/cloudwatch/datasource.ts index 34b95790a3b..787b24d596d 100644 --- a/public/app/plugins/datasource/cloudwatch/datasource.ts +++ b/public/app/plugins/datasource/cloudwatch/datasource.ts @@ -72,6 +72,7 @@ export class CloudWatchDatasource this.annotationQueryRunner = new CloudWatchAnnotationQueryRunner(instanceSettings, templateSrv); this.variables = new CloudWatchVariableSupport(this.resources); this.annotations = CloudWatchAnnotationSupport; + this.defaultLogGroups = instanceSettings.jsonData.defaultLogGroups; } filterQuery(query: CloudWatchQuery) { diff --git a/public/app/plugins/datasource/cloudwatch/resources/ResourcesAPI.ts b/public/app/plugins/datasource/cloudwatch/resources/ResourcesAPI.ts index ab1f1bf7cfb..2d03c1c9f12 100644 --- a/public/app/plugins/datasource/cloudwatch/resources/ResourcesAPI.ts +++ b/public/app/plugins/datasource/cloudwatch/resources/ResourcesAPI.ts @@ -160,4 +160,11 @@ export class ResourcesAPI extends CloudWatchRequest { tags: JSON.stringify(this.convertMultiFilterFormat(tags, 'tag name')), }); } + + legacyDescribeLogGroups(region: string, logGroupNamePrefix?: string) { + return this.memoizedGetRequest('legacy-log-groups', { + region: this.templateSrv.replace(this.getActualRegion(region)), + logGroupNamePrefix: logGroupNamePrefix || '', + }); + } }