1// Libraries
2import React, { memo } from 'react';
3
4// Types
5import { AbsoluteTimeRange, QueryEditorProps } from '@grafana/data';
6import { InlineFormLabel } from '@grafana/ui';
7import { CloudWatchDatasource } from '../datasource';
8import { CloudWatchJsonData, CloudWatchLogsQuery, CloudWatchQuery } from '../types';
9import { CloudWatchLogsQueryField } from './LogsQueryField';
10import CloudWatchLink from './CloudWatchLink';
11import { css } from '@emotion/css';
12
13type Props = QueryEditorProps<CloudWatchDatasource, CloudWatchQuery, CloudWatchJsonData> & {
14  allowCustomValue?: boolean;
15};
16
17const labelClass = css`
18  margin-left: 3px;
19  flex-grow: 0;
20`;
21
22export const CloudWatchLogsQueryEditor = memo(function CloudWatchLogsQueryEditor(props: Props) {
23  const { query, data, datasource, onRunQuery, onChange, exploreId, allowCustomValue = false } = props;
24
25  let absolute: AbsoluteTimeRange;
26  if (data?.request?.range?.from) {
27    const { range } = data.request;
28    absolute = {
29      from: range.from.valueOf(),
30      to: range.to.valueOf(),
31    };
32  } else {
33    absolute = {
34      from: Date.now() - 10000,
35      to: Date.now(),
36    };
37  }
38
39  return (
40    <CloudWatchLogsQueryField
41      exploreId={exploreId}
42      datasource={datasource}
43      query={query}
44      onBlur={() => {}}
45      onChange={(val: CloudWatchQuery) => {
46        onChange({ ...val, queryMode: 'Logs' });
47      }}
48      onRunQuery={onRunQuery}
49      history={[]}
50      data={data}
51      absoluteRange={absolute}
52      allowCustomValue={allowCustomValue}
53      ExtraFieldElement={
54        <InlineFormLabel className={`gf-form-label--btn ${labelClass}`} width="auto" tooltip="Link to Graph in AWS">
55          <CloudWatchLink query={query as CloudWatchLogsQuery} panelData={data} datasource={datasource} />
56        </InlineFormLabel>
57      }
58    />
59  );
60});
61
62export default CloudWatchLogsQueryEditor;
63