= memo(({ folder }) => {
-
+
diff --git a/public/app/features/search/components/ManageDashboardsNew.tsx b/public/app/features/search/components/ManageDashboardsNew.tsx
index 8c40c37f389..710a6ea2769 100644
--- a/public/app/features/search/components/ManageDashboardsNew.tsx
+++ b/public/app/features/search/components/ManageDashboardsNew.tsx
@@ -6,9 +6,10 @@ import { GrafanaTheme2 } from '@grafana/data';
import { config } from '@grafana/runtime';
import { Input, useStyles2, Spinner } from '@grafana/ui';
import { contextSrv } from 'app/core/services/context_srv';
-import { FolderDTO } from 'app/types';
+import { FolderDTO, AccessControlAction } from 'app/types';
import { SEARCH_PANELS_LOCAL_STORAGE_KEY } from '../constants';
+import { useKeyNavigationListener } from '../hooks/useSearchKeyboardSelection';
import { useSearchQuery } from '../hooks/useSearchQuery';
import { SearchView } from '../page/components/SearchView';
@@ -22,6 +23,7 @@ export const ManageDashboardsNew = React.memo(({ folder }: Props) => {
const styles = useStyles2(getStyles);
// since we don't use "query" from use search... it is not actually loaded from the URL!
const { query, onQueryChange } = useSearchQuery({});
+ const { onKeyDown, keyboardEvents } = useKeyNavigationListener();
// TODO: we need to refactor DashboardActions to use folder.uid instead
const folderId = folder?.id;
@@ -50,6 +52,7 @@ export const ManageDashboardsNew = React.memo(({ folder }: Props) => {
{
suffix={false ? : null}
/>
-
+
{
hidePseudoFolders={true}
includePanels={includePanels!}
setIncludePanels={setIncludePanels}
+ keyboardEvents={keyboardEvents}
/>
);
diff --git a/public/app/features/search/hooks/useSearchKeyboardSelection.ts b/public/app/features/search/hooks/useSearchKeyboardSelection.ts
new file mode 100644
index 00000000000..6533a6d7ebc
--- /dev/null
+++ b/public/app/features/search/hooks/useSearchKeyboardSelection.ts
@@ -0,0 +1,100 @@
+import { useEffect, useRef, useState } from 'react';
+import { Observable, Subject } from 'rxjs';
+
+import { Field, locationUtil } from '@grafana/data';
+import { locationService } from '@grafana/runtime';
+
+import { QueryResponse } from '../service';
+
+export function useKeyNavigationListener() {
+ const eventsRef = useRef(new Subject());
+ return {
+ keyboardEvents: eventsRef.current,
+ onKeyDown: (e: React.KeyboardEvent) => {
+ switch (e.code) {
+ case 'ArrowDown':
+ case 'ArrowUp':
+ case 'ArrowLeft':
+ case 'ArrowRight':
+ case 'Enter':
+ eventsRef.current.next(e);
+ default:
+ // ignore
+ }
+ },
+ };
+}
+
+interface ItemSelection {
+ x: number;
+ y: number;
+}
+
+export function useSearchKeyboardNavigation(
+ keyboardEvents: Observable,
+ numColumns: number,
+ response: QueryResponse
+): ItemSelection {
+ const highlightIndexRef = useRef({ x: 0, y: -1 });
+ const [highlightIndex, setHighlightIndex] = useState({ x: 0, y: -1 });
+ const urlsRef = useRef();
+
+ // Clear selection when the search results change
+ useEffect(() => {
+ urlsRef.current = response.view.fields.url;
+ highlightIndexRef.current.x = 0;
+ highlightIndexRef.current.y = -1;
+ setHighlightIndex({ ...highlightIndexRef.current });
+ }, [response]);
+
+ useEffect(() => {
+ const sub = keyboardEvents.subscribe({
+ next: (keyEvent) => {
+ switch (keyEvent?.code) {
+ case 'ArrowDown': {
+ highlightIndexRef.current.y++;
+ setHighlightIndex({ ...highlightIndexRef.current });
+ break;
+ }
+ case 'ArrowUp':
+ highlightIndexRef.current.y = Math.max(0, highlightIndexRef.current.y - 1);
+ setHighlightIndex({ ...highlightIndexRef.current });
+ break;
+ case 'ArrowRight': {
+ if (numColumns > 0) {
+ highlightIndexRef.current.x = Math.min(numColumns, highlightIndexRef.current.x + 1);
+ setHighlightIndex({ ...highlightIndexRef.current });
+ }
+ break;
+ }
+ case 'ArrowLeft': {
+ if (numColumns > 0) {
+ highlightIndexRef.current.x = Math.max(0, highlightIndexRef.current.x - 1);
+ setHighlightIndex({ ...highlightIndexRef.current });
+ }
+ break;
+ }
+ case 'Enter':
+ if (!urlsRef.current) {
+ break;
+ }
+ const idx = highlightIndexRef.current.x * numColumns + highlightIndexRef.current.y;
+ if (idx < 0) {
+ highlightIndexRef.current.x = 0;
+ highlightIndexRef.current.y = 0;
+ setHighlightIndex({ ...highlightIndexRef.current });
+ break;
+ }
+ const url = urlsRef.current.values?.get(idx) as string;
+ if (url) {
+ locationService.push(locationUtil.stripBaseFromUrl(url));
+ }
+ }
+ },
+ });
+
+ return () => sub.unsubscribe();
+ }, [keyboardEvents, numColumns]);
+
+ return highlightIndex;
+}
diff --git a/public/app/features/search/page/components/SearchResultsGrid.tsx b/public/app/features/search/page/components/SearchResultsGrid.tsx
index 5b4c7e24d54..8d691b5d782 100644
--- a/public/app/features/search/page/components/SearchResultsGrid.tsx
+++ b/public/app/features/search/page/components/SearchResultsGrid.tsx
@@ -8,6 +8,7 @@ import { config } from '@grafana/runtime';
import { useStyles2 } from '@grafana/ui';
import { SearchCard } from '../../components/SearchCard';
+import { useSearchKeyboardNavigation } from '../../hooks/useSearchKeyboardSelection';
import { DashboardSearchItemType, DashboardSectionItem } from '../../types';
import { SearchResultsProps } from './SearchResultsTable';
@@ -19,7 +20,7 @@ export const SearchResultsGrid = ({
selection,
selectionToggle,
onTagSelected,
- onDatasourceChange,
+ keyboardEvents,
}: SearchResultsProps) => {
const styles = useStyles2(getStyles);
@@ -37,12 +38,12 @@ export const SearchResultsGrid = ({
};
const itemCount = response.totalRows ?? response.view.length;
-
const view = response.view;
const numColumns = Math.ceil(width / 320);
const cellWidth = width / numColumns;
const cellHeight = (cellWidth - 64) * 0.75 + 56 + 8;
const numRows = Math.ceil(itemCount / numColumns);
+ const highlightIndex = useSearchKeyboardNavigation(keyboardEvents, numColumns, response);
return (
@@ -100,10 +101,15 @@ export const SearchResultsGrid = ({
}
}
+ let className = styles.virtualizedGridItemWrapper;
+ if (rowIndex === highlightIndex.y && columnIndex === highlightIndex.x) {
+ className += ' ' + styles.selectedItem;
+ }
+
// The wrapper div is needed as the inner SearchItem has margin-bottom spacing
// And without this wrapper there is no room for that margin
return item ? (
-
+
) : null;
@@ -126,4 +132,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
list-style: none;
}
`,
+ selectedItem: css`
+ box-shadow: inset 1px 1px 3px 3px ${theme.colors.primary.border};
+ `,
});
diff --git a/public/app/features/search/page/components/SearchResultsTable.tsx b/public/app/features/search/page/components/SearchResultsTable.tsx
index 564ef43e318..125fab5c9e8 100644
--- a/public/app/features/search/page/components/SearchResultsTable.tsx
+++ b/public/app/features/search/page/components/SearchResultsTable.tsx
@@ -1,15 +1,17 @@
/* eslint-disable react/jsx-no-undef */
import { css } from '@emotion/css';
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, useMemo, useRef, useCallback } from 'react';
import { useTable, Column, TableOptions, Cell, useAbsoluteLayout } from 'react-table';
import { FixedSizeList } from 'react-window';
import InfiniteLoader from 'react-window-infinite-loader';
+import { Observable } from 'rxjs';
import { Field, GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
import { TableCell } from '@grafana/ui/src/components/Table/TableCell';
import { getTableStyles } from '@grafana/ui/src/components/Table/styles';
+import { useSearchKeyboardNavigation } from '../../hooks/useSearchKeyboardSelection';
import { QueryResponse } from '../../service';
import { SelectionChecker, SelectionToggle } from '../selection';
@@ -24,6 +26,7 @@ export type SearchResultsProps = {
clearSelection: () => void;
onTagSelected: (tag: string) => void;
onDatasourceChange?: (datasource?: string) => void;
+ keyboardEvents: Observable;
};
export type TableColumn = Column & {
@@ -42,17 +45,19 @@ export const SearchResultsTable = React.memo(
clearSelection,
onTagSelected,
onDatasourceChange,
+ keyboardEvents,
}: SearchResultsProps) => {
const styles = useStyles2(getStyles);
const tableStyles = useStyles2(getTableStyles);
-
const infiniteLoaderRef = useRef(null);
const listRef = useRef(null);
+ const highlightIndex = useSearchKeyboardNavigation(keyboardEvents, 0, response);
const memoizedData = useMemo(() => {
if (!response?.view?.dataFrame.fields.length) {
return [];
}
+
// as we only use this to fake the length of our data set for react-table we need to make sure we always return an array
// filled with values at each index otherwise we'll end up trying to call accessRow for null|undefined value in
// https://github.com/tannerlinsley/react-table/blob/7be2fc9d8b5e223fc998af88865ae86a88792fdb/src/hooks/useTable.js#L585
@@ -93,14 +98,19 @@ export const SearchResultsTable = React.memo(
const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(options, useAbsoluteLayout);
- const RenderRow = React.useCallback(
+ const RenderRow = useCallback(
({ index: rowIndex, style }) => {
const row = rows[rowIndex];
prepareRow(row);
const url = response.view.fields.url?.values.get(rowIndex);
+ let className = styles.rowContainer;
+ if (rowIndex === highlightIndex.y) {
+ className += ' ' + styles.selectedRow;
+ }
+
return (
-
+
{row.cells.map((cell: Cell, index: number) => {
return (
);
},
- [rows, prepareRow, response.view.fields.url?.values, styles.rowContainer, tableStyles]
+ [rows, prepareRow, response.view.fields.url?.values, highlightIndex, styles, tableStyles]
);
if (!rows.length) {
@@ -212,6 +222,10 @@ const getStyles = (theme: GrafanaTheme2) => {
height: ${HEADER_HEIGHT}px;
align-items: center;
`,
+ selectedRow: css`
+ background-color: ${rowHoverBg};
+ box-shadow: inset 3px 0px ${theme.colors.primary.border};
+ `,
rowContainer: css`
label: row;
&:hover {
diff --git a/public/app/features/search/page/components/SearchView.tsx b/public/app/features/search/page/components/SearchView.tsx
index 5ee3c712f5f..4bec2b71242 100644
--- a/public/app/features/search/page/components/SearchView.tsx
+++ b/public/app/features/search/page/components/SearchView.tsx
@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
import React, { useCallback, useMemo, useState } from 'react';
import { useAsync, useDebounce } from 'react-use';
import AutoSizer from 'react-virtualized-auto-sizer';
+import { Observable } from 'rxjs';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2, Spinner, Button } from '@grafana/ui';
@@ -31,6 +32,7 @@ type SearchViewProps = {
onQueryTextChange: (newQueryText: string) => void;
includePanels: boolean;
setIncludePanels: (v: boolean) => void;
+ keyboardEvents: Observable;
};
export const SearchView = ({
@@ -41,6 +43,7 @@ export const SearchView = ({
hidePseudoFolders,
includePanels,
setIncludePanels,
+ keyboardEvents,
}: SearchViewProps) => {
const styles = useStyles2(getStyles);
@@ -201,6 +204,7 @@ export const SearchView = ({
width: width,
height: height,
onTagSelected: onTagAdd,
+ keyboardEvents,
onDatasourceChange: query.datasource ? onDatasourceChange : undefined,
};
diff --git a/public/app/features/search/service/bluge.ts b/public/app/features/search/service/bluge.ts
index fd1c9a835eb..939063a7715 100644
--- a/public/app/features/search/service/bluge.ts
+++ b/public/app/features/search/service/bluge.ts
@@ -21,13 +21,15 @@ export class BlugeSearcher implements GrafanaSearcher {
async tags(query: SearchQuery): Promise {
const ds = (await getDataSourceSrv().get('-- Grafana --')) as GrafanaDatasource;
const target = {
- ...query,
- refId: 'A',
+ refId: 'TagsQuery',
queryType: GrafanaQueryType.Search,
- query: query.query ?? '*',
- sort: undefined, // no need to sort the initial query results (not used)
- facet: [{ field: 'tag' }],
- limit: 1, // 0 would be better, but is ignored by the backend
+ search: {
+ ...query,
+ query: query.query ?? '*',
+ sort: undefined, // no need to sort the initial query results (not used)
+ facet: [{ field: 'tag' }],
+ limit: 1, // 0 would be better, but is ignored by the backend
+ },
};
const data = (
@@ -70,11 +72,13 @@ async function doSearchQuery(query: SearchQuery): Promise {
query = await replaceCurrentFolderQuery(query);
const ds = (await getDataSourceSrv().get('-- Grafana --')) as GrafanaDatasource;
const target = {
- ...query,
- refId: 'A',
+ refId: 'Search',
queryType: GrafanaQueryType.Search,
- query: query.query ?? '*',
- limit: firstPageSize,
+ search: {
+ ...query,
+ query: query.query ?? '*',
+ limit: firstPageSize,
+ },
};
const rsp = await lastValueFrom(
ds.query({
diff --git a/public/app/features/teams/TeamSettings.test.tsx b/public/app/features/teams/TeamSettings.test.tsx
index 2b6bb754ca3..1092aefede7 100644
--- a/public/app/features/teams/TeamSettings.test.tsx
+++ b/public/app/features/teams/TeamSettings.test.tsx
@@ -1,15 +1,20 @@
-import { shallow } from 'enzyme';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
import React from 'react';
import { Props, TeamSettings } from './TeamSettings';
import { getMockTeam } from './__mocks__/teamMocks';
-jest.mock('app/core/core', () => ({
+jest.mock('app/core/services/context_srv', () => ({
contextSrv: {
hasPermissionInMetadata: () => true,
},
}));
+jest.mock('app/core/components/SharedPreferences/SharedPreferences', () => {
+ return { SharedPreferences: () => };
+});
+
const setup = (propOverrides?: object) => {
const props: Props = {
team: getMockTeam(),
@@ -18,19 +23,36 @@ const setup = (propOverrides?: object) => {
Object.assign(props, propOverrides);
- const wrapper = shallow();
- const instance = wrapper.instance() as any;
-
- return {
- wrapper,
- instance,
- };
+ render();
};
-describe('Render', () => {
+describe('Team settings', () => {
it('should render component', () => {
- const { wrapper } = setup();
+ setup();
- expect(wrapper).toMatchSnapshot();
+ expect(screen.getByText('Team settings')).toBeInTheDocument();
+ });
+
+ it('should validate required fields', async () => {
+ const mockUpdate = jest.fn();
+ setup({ updateTeam: mockUpdate });
+ await userEvent.clear(screen.getByRole('textbox', { name: /Name/ }));
+ await userEvent.type(screen.getByLabelText(/Email/i), 'team@test.com');
+ // Submitting with userEvent doesn't work here
+ fireEvent.submit(screen.getByRole('button', { name: 'Update' }));
+ expect(await screen.findByText('Name is required')).toBeInTheDocument();
+ await waitFor(() => expect(mockUpdate).not.toHaveBeenCalled());
+ });
+
+ it('should submit form with correct values', async () => {
+ const mockUpdate = jest.fn();
+ setup({ updateTeam: mockUpdate });
+ await userEvent.clear(screen.getByRole('textbox', { name: /Name/ }));
+ await userEvent.clear(screen.getByLabelText(/Email/i));
+ await userEvent.type(screen.getByRole('textbox', { name: /Name/ }), 'New team');
+ await userEvent.type(screen.getByLabelText(/Email/i), 'team@test.com');
+ // Submitting with userEvent doesn't work here
+ fireEvent.submit(screen.getByRole('button', { name: 'Update' }));
+ await waitFor(() => expect(mockUpdate).toHaveBeenCalledWith('New team', 'team@test.com'));
});
});
diff --git a/public/app/features/teams/TeamSettings.tsx b/public/app/features/teams/TeamSettings.tsx
index d4fb9016887..7a828f13064 100644
--- a/public/app/features/teams/TeamSettings.tsx
+++ b/public/app/features/teams/TeamSettings.tsx
@@ -32,9 +32,15 @@ export const TeamSettings: FC = ({ team, updateTeam }) => {
}}
disabled={!canWriteTeamSettings}
>
- {({ register }) => (
+ {({ register, errors }) => (
<>
-
+
diff --git a/public/app/features/teams/__snapshots__/TeamSettings.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamSettings.test.tsx.snap
deleted file mode 100644
index 1fe40abc971..00000000000
--- a/public/app/features/teams/__snapshots__/TeamSettings.test.tsx.snap
+++ /dev/null
@@ -1,30 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should render component 1`] = `
-
-
-
-
-`;
diff --git a/public/app/features/transformers/calculateHeatmap/heatmap.test.ts b/public/app/features/transformers/calculateHeatmap/heatmap.test.ts
index 160bc920ed8..afbbcd4a1d3 100644
--- a/public/app/features/transformers/calculateHeatmap/heatmap.test.ts
+++ b/public/app/features/transformers/calculateHeatmap/heatmap.test.ts
@@ -1,7 +1,7 @@
import { FieldType } from '@grafana/data';
import { toDataFrame } from '@grafana/data/src/dataframe/processDataFrame';
-import { bucketsToScanlines, calculateHeatmapFromData } from './heatmap';
+import { rowsToCellsHeatmap, calculateHeatmapFromData } from './heatmap';
import { HeatmapCalculationOptions } from './models.gen';
describe('Heatmap transformer', () => {
@@ -58,7 +58,7 @@ describe('Heatmap transformer', () => {
],
});
- const heatmap = bucketsToScanlines({ frame, value: 'Speed' });
+ const heatmap = rowsToCellsHeatmap({ frame, value: 'Speed' });
expect(heatmap.fields.map((f) => ({ name: f.name, type: f.type, config: f.config }))).toMatchInlineSnapshot(`
Array [
Object {
@@ -92,7 +92,7 @@ describe('Heatmap transformer', () => {
"C",
],
},
- "type": "heatmap-scanlines",
+ "type": "heatmap-cells",
}
`);
expect(heatmap.fields[1].values.toArray()).toMatchInlineSnapshot(`
diff --git a/public/app/features/transformers/calculateHeatmap/heatmap.ts b/public/app/features/transformers/calculateHeatmap/heatmap.ts
index 62416f358bb..9d1a2a03b50 100644
--- a/public/app/features/transformers/calculateHeatmap/heatmap.ts
+++ b/public/app/features/transformers/calculateHeatmap/heatmap.ts
@@ -14,7 +14,7 @@ import {
} from '@grafana/data';
import { ScaleDistribution } from '@grafana/schema';
-import { HeatmapBucketLayout, HeatmapCalculationMode, HeatmapCalculationOptions } from './models.gen';
+import { HeatmapCellLayout, HeatmapCalculationMode, HeatmapCalculationOptions } from './models.gen';
import { niceLinearIncrs, niceTimeIncrs } from './utils';
export interface HeatmapTransformerOptions extends HeatmapCalculationOptions {
@@ -61,15 +61,15 @@ export function readHeatmapScanlinesCustomMeta(frame?: DataFrame): HeatmapScanli
return (frame?.meta?.custom ?? {}) as HeatmapScanlinesCustomMeta;
}
-export interface BucketsOptions {
+export interface RowsHeatmapOptions {
frame: DataFrame;
value?: string; // the field value name
- layout?: HeatmapBucketLayout;
+ layout?: HeatmapCellLayout;
}
/** Given existing buckets, create a values style frame */
// Assumes frames have already been sorted ASC and de-accumulated.
-export function bucketsToScanlines(opts: BucketsOptions): DataFrame {
+export function rowsToCellsHeatmap(opts: RowsHeatmapOptions): DataFrame {
// TODO: handle null-filling w/ fields[0].config.interval?
const xField = opts.frame.fields[0];
const xValues = xField.values.toArray();
@@ -106,13 +106,13 @@ export function bucketsToScanlines(opts: BucketsOptions): DataFrame {
// this name determines whether cells are drawn above, below, or centered on the values
let ordinalFieldName = yFields[0].labels?.le != null ? 'yMax' : 'y';
switch (opts.layout) {
- case HeatmapBucketLayout.le:
+ case HeatmapCellLayout.le:
ordinalFieldName = 'yMax';
break;
- case HeatmapBucketLayout.ge:
+ case HeatmapCellLayout.ge:
ordinalFieldName = 'yMin';
break;
- case HeatmapBucketLayout.unknown:
+ case HeatmapCellLayout.unknown:
ordinalFieldName = 'y';
break;
}
@@ -128,7 +128,7 @@ export function bucketsToScanlines(opts: BucketsOptions): DataFrame {
length: xs.length,
refId: opts.frame.refId,
meta: {
- type: DataFrameType.HeatmapScanlines,
+ type: DataFrameType.HeatmapCells,
custom,
},
fields: [
@@ -261,7 +261,7 @@ export function calculateHeatmapFromData(frames: DataFrame[], options: HeatmapCa
length: heat2d.x.length,
name: getFieldDisplayName(yField),
meta: {
- type: DataFrameType.HeatmapScanlines,
+ type: DataFrameType.HeatmapCells,
},
fields: [
{
diff --git a/public/app/features/transformers/calculateHeatmap/models.gen.ts b/public/app/features/transformers/calculateHeatmap/models.gen.ts
index 02566383d6a..a976ae7712a 100644
--- a/public/app/features/transformers/calculateHeatmap/models.gen.ts
+++ b/public/app/features/transformers/calculateHeatmap/models.gen.ts
@@ -5,7 +5,7 @@ export enum HeatmapCalculationMode {
Count = 'count',
}
-export const enum HeatmapBucketLayout {
+export const enum HeatmapCellLayout {
le = 'le',
ge = 'ge',
unknown = 'unknown', // unknown
diff --git a/public/app/plugins/datasource/elasticsearch/query_builder.ts b/public/app/plugins/datasource/elasticsearch/query_builder.ts
index 8727f3cb80d..3d9e9af82db 100644
--- a/public/app/plugins/datasource/elasticsearch/query_builder.ts
+++ b/public/app/plugins/datasource/elasticsearch/query_builder.ts
@@ -112,13 +112,7 @@ export class ElasticQueryBuilder {
const interval = settings.interval === 'auto' ? '$__interval' : settings.interval;
- if (gte(this.esVersion, '8.0.0')) {
- // The deprecation was actually introduced in 7.0.0, we might want to use that instead of the removal date,
- // but it woudl be a breaking change on our side.
- esAgg.fixed_interval = interval;
- } else {
- esAgg.interval = interval;
- }
+ esAgg.fixed_interval = interval;
return esAgg;
}
diff --git a/public/app/plugins/datasource/elasticsearch/specs/query_builder.test.ts b/public/app/plugins/datasource/elasticsearch/specs/query_builder.test.ts
index f3c00db43cf..0c3ab8d612a 100644
--- a/public/app/plugins/datasource/elasticsearch/specs/query_builder.test.ts
+++ b/public/app/plugins/datasource/elasticsearch/specs/query_builder.test.ts
@@ -763,16 +763,12 @@ describe('ElasticQueryBuilder', () => {
extended_bounds: { max: '$timeTo', min: '$timeFrom' },
field: '@timestamp',
format: 'epoch_millis',
- interval: '$__interval',
+ fixed_interval: '$__interval',
min_doc_count: 0,
},
},
};
- if (gte(builder.esVersion, '8.0.0')) {
- expectedAggs['1'].date_histogram.fixed_interval = expectedAggs['1'].date_histogram.interval;
- delete expectedAggs['1'].date_histogram.interval;
- }
expect(query.aggs).toMatchObject(expectedAggs);
});
@@ -959,7 +955,7 @@ describe('ElasticQueryBuilder', () => {
});
describe('interval parameter', () => {
- it('should use interval if Elasticsearch version <8.0.0', () => {
+ it('should use fixed_interval', () => {
const query = builder77.build({
refId: 'A',
metrics: [{ type: 'count', id: '1' }],
@@ -974,8 +970,7 @@ describe('ElasticQueryBuilder', () => {
],
});
- expect(query.aggs['2'].date_histogram.interval).toBe('1d');
- expect(query.aggs['2'].date_histogram.fixed_interval).toBeUndefined();
+ expect(query.aggs['2'].date_histogram.fixed_interval).toBe('1d');
});
});
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/Field.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/Field.tsx
index 52e2fa818bc..61318cf8527 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/Field.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/Field.tsx
@@ -7,13 +7,18 @@ import { Props as InlineFieldProps } from '@grafana/ui/src/components/Forms/Inli
interface Props extends InlineFieldProps {
label: string;
+ inlineField?: boolean;
+ labelWidth?: number;
}
const DEFAULT_LABEL_WIDTH = 18;
export const Field = (props: Props) => {
- if (config.featureToggles.azureMonitorExperimentalUI) {
- return ;
+ const { labelWidth, inlineField, ...remainingProps } = props;
+
+ if (config.featureToggles.azureMonitorExperimentalUI && !inlineField) {
+ return ;
+ } else {
+ return ;
}
- return ;
};
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/LogsQueryEditor.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/LogsQueryEditor.tsx
index 83d858ac5b6..6879724dc17 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/LogsQueryEditor.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/LogsQueryEditor.tsx
@@ -44,6 +44,8 @@ const LogsQueryEditor: React.FC = ({
= ({
setResource={setResource}
resourceUri={query.azureMonitor?.resourceUri}
/>
-
-
-
-
-
AzureMonitorQuery;
selectableEntryTypes: ResourceRowType[];
resourceUri?: string;
+ inlineField?: boolean;
+ labelWidth?: number;
}
const ResourceField: React.FC = ({
@@ -38,6 +40,8 @@ const ResourceField: React.FC = ({
setResource,
selectableEntryTypes,
resourceUri,
+ inlineField,
+ labelWidth,
}) => {
const styles = useStyles2(getStyles);
const [pickerIsOpen, setPickerIsOpen] = useState(false);
@@ -77,8 +81,7 @@ const ResourceField: React.FC = ({
selectableEntryTypes={selectableEntryTypes}
/>
-
-
+
diff --git a/public/app/plugins/datasource/grafana/components/QueryEditor.tsx b/public/app/plugins/datasource/grafana/components/QueryEditor.tsx
index 668cb94b65c..a72bd5bd881 100644
--- a/public/app/plugins/datasource/grafana/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/grafana/components/QueryEditor.tsx
@@ -9,13 +9,15 @@ import {
DataFrame,
} from '@grafana/data';
import { config, getBackendSrv, getDataSourceSrv } from '@grafana/runtime';
-import { InlineField, Select, Alert, Input, InlineFieldRow, CodeEditor } from '@grafana/ui';
+import { InlineField, Select, Alert, Input, InlineFieldRow } from '@grafana/ui';
import { hasAlphaPanels } from 'app/core/config';
import { SearchQuery } from 'app/features/search/service';
import { GrafanaDatasource } from '../datasource';
import { defaultQuery, GrafanaQuery, GrafanaQueryType } from '../types';
+import SearchEditor from './SearchEditor';
+
type Props = QueryEditorProps;
const labelWidth = 12;
@@ -342,103 +344,46 @@ export class QueryEditor extends PureComponent {
);
}
- handleSearchEnterKey = (e: React.KeyboardEvent) => {
- if (e.key !== 'Enter') {
- return;
- }
- this.checkAndUpdateValue('query', (e.target as any).value);
+ onSearchChange = (search: SearchQuery) => {
+ const { query, onChange, onRunQuery } = this.props;
+
+ onChange({
+ ...query,
+ search,
+ });
+ onRunQuery();
};
- handleSearchBlur = (e: React.FocusEvent) => {
- this.checkAndUpdateValue('query', e.target.value);
- };
-
- onSaveSearchJSON = (rawSearchJSON: string) => {
- try {
- const json = JSON.parse(rawSearchJSON) as GrafanaQuery;
- json.queryType = GrafanaQueryType.Search;
- this.props.onChange(json);
- this.props.onRunQuery();
- } catch (ex) {
- console.log('UNABLE TO parse search', rawSearchJSON, ex);
- }
- };
-
- renderSearch() {
- let query = (this.props.query ?? {}) as SearchQuery;
- const emptySearchQuery: SearchQuery = {
- query: '*',
- location: '', // general, etc
- ds_uid: '',
- sort: 'score desc',
- tags: [],
- kind: ['dashboard', 'folder'],
- uid: [],
- id: [],
- explain: true,
- accessInfo: true,
- facet: [{ field: 'kind' }, { field: 'tag' }, { field: 'location' }],
- hasPreview: 'dark',
- from: 0,
- limit: 20,
- };
-
- const json = JSON.stringify(query ?? {}, null, 2);
- for (const [key, val] of Object.entries(emptySearchQuery)) {
- if ((query as any)[key] == null) {
- (query as any)[key] = val;
- }
- }
-
- return (
- <>
-
- This interface to the grafana search API is experimental, and subject to change at any time without notice
-
-
-
-
-
-
-
-
- );
- }
-
render() {
const query = {
...defaultQuery,
...this.props.query,
};
+ const { queryType } = query;
+
return (
<>
+ {queryType === GrafanaQueryType.Search && (
+
+ Using this datasource to call the new search system is experimental, and subject to change at any time
+ without notice.
+
+ )}
- {query.queryType === GrafanaQueryType.LiveMeasurements && this.renderMeasurementsQuery()}
- {query.queryType === GrafanaQueryType.List && this.renderListPublicFiles()}
- {query.queryType === GrafanaQueryType.Search && this.renderSearch()}
+ {queryType === GrafanaQueryType.LiveMeasurements && this.renderMeasurementsQuery()}
+ {queryType === GrafanaQueryType.List && this.renderListPublicFiles()}
+ {queryType === GrafanaQueryType.Search && (
+
+ )}
);
}
diff --git a/public/app/plugins/datasource/grafana/components/SearchEditor.tsx b/public/app/plugins/datasource/grafana/components/SearchEditor.tsx
new file mode 100644
index 00000000000..f0a52cdbe08
--- /dev/null
+++ b/public/app/plugins/datasource/grafana/components/SearchEditor.tsx
@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from 'react';
+
+import { InlineField, Input, InlineFieldRow, CodeEditor } from '@grafana/ui';
+import { SearchQuery } from 'app/features/search/service';
+
+interface Props {
+ value: SearchQuery;
+ onChange: (value: SearchQuery) => void;
+}
+
+export default function SearchEditor({ value, onChange }: Props) {
+ const [json, setJSON] = useState('');
+ const [query, setQuery] = useState(value.query ?? '');
+
+ useEffect(() => {
+ const emptySearchQuery: SearchQuery = {
+ query: '*',
+ location: '', // general, etc
+ ds_uid: '',
+ sort: '',
+ tags: [],
+ kind: [],
+ explain: false,
+ facet: [{ field: 'kind' }, { field: 'tags' }],
+ from: 0,
+ limit: 20,
+ };
+
+ setJSON(JSON.stringify({ ...emptySearchQuery, ...value }, null, 2));
+ }, [value]);
+
+ const handleSearchBlur = (e: React.FocusEvent) => {
+ if (query !== value.query) {
+ onChange({ ...value, query });
+ }
+ };
+
+ const handleSearchEnterKey = (e: React.KeyboardEvent) => {
+ if (e.key !== 'Enter') {
+ return;
+ }
+ handleSearchBlur(e as any);
+ };
+
+ const onSaveSearchJSON = (rawSearchJSON: string) => {
+ try {
+ const searchQuery = JSON.parse(rawSearchJSON) as SearchQuery;
+ onChange(searchQuery);
+ setQuery(searchQuery.query ?? '');
+ } catch (ex) {
+ console.log('UNABLE TO parse search', rawSearchJSON, ex);
+ }
+ };
+
+ return (
+ <>
+
+
+ setQuery(e.currentTarget.value)}
+ onKeyDown={handleSearchEnterKey}
+ onBlur={handleSearchBlur}
+ spellCheck={false}
+ />
+
+
+
+
+ );
+}
diff --git a/public/app/plugins/datasource/grafana/datasource.ts b/public/app/plugins/datasource/grafana/datasource.ts
index f9df9d68291..390715d59e2 100644
--- a/public/app/plugins/datasource/grafana/datasource.ts
+++ b/public/app/plugins/datasource/grafana/datasource.ts
@@ -85,13 +85,6 @@ export class GrafanaDatasource extends DataSourceWithBackend {
let channel = templateSrv.replace(target.channel, request.scopedVars);
const { filter } = target;
- // Help migrate pre-release channel paths saved in dashboards
- // NOTE: this should be removed before V8 is released
- if (channel && channel.startsWith('telegraf/')) {
- channel = 'stream/' + channel;
- target.channel = channel; // mutate the current query object so it is saved with `stream/` prefix
- }
-
const addr = parseLiveChannelAddress(channel);
if (!isValidLiveChannelAddress(addr)) {
continue;
diff --git a/public/app/plugins/datasource/grafana/types.ts b/public/app/plugins/datasource/grafana/types.ts
index 1773d251f97..76d83798fe5 100644
--- a/public/app/plugins/datasource/grafana/types.ts
+++ b/public/app/plugins/datasource/grafana/types.ts
@@ -1,5 +1,6 @@
import { DataQuery } from '@grafana/data';
import { LiveDataFilter } from '@grafana/runtime';
+import { SearchQuery } from 'app/features/search/service';
//----------------------------------------------
// Query
@@ -22,8 +23,8 @@ export interface GrafanaQuery extends DataQuery {
filter?: LiveDataFilter;
buffer?: number;
path?: string; // for list and read
- query?: string; // for query endpoint
-} // NOTE, query will have more field!!!
+ search?: SearchQuery;
+}
export const defaultQuery: GrafanaQuery = {
refId: 'A',
diff --git a/public/app/plugins/datasource/loki/querybuilder/LokiQueryModeller.test.ts b/public/app/plugins/datasource/loki/querybuilder/LokiQueryModeller.test.ts
index da4c68b1134..9135368d0cd 100644
--- a/public/app/plugins/datasource/loki/querybuilder/LokiQueryModeller.test.ts
+++ b/public/app/plugins/datasource/loki/querybuilder/LokiQueryModeller.test.ts
@@ -73,7 +73,7 @@ describe('LokiQueryModeller', () => {
labels: [{ label: 'app', op: '=', value: 'grafana' }],
operations: [{ id: LokiOperationId.LineContains, params: [''] }],
})
- ).toBe('{app="grafana"}');
+ ).toBe('{app="grafana"} |= ``');
});
it('Can query with line filter contains not operation', () => {
diff --git a/public/app/plugins/datasource/loki/querybuilder/LokiQueryModeller.ts b/public/app/plugins/datasource/loki/querybuilder/LokiQueryModeller.ts
index 461b1688f72..0b68e34a4dc 100644
--- a/public/app/plugins/datasource/loki/querybuilder/LokiQueryModeller.ts
+++ b/public/app/plugins/datasource/loki/querybuilder/LokiQueryModeller.ts
@@ -94,7 +94,7 @@ export class LokiQueryModeller extends LokiAndPromQueryModellerBase {
{ id: LokiOperationId.LineContains, params: [''] },
{ id: LokiOperationId.Logfmt, params: [] },
{ id: LokiOperationId.LabelFilterNoErrors, params: [] },
- { id: LokiOperationId.Unwrap, params: [] },
+ { id: LokiOperationId.Unwrap, params: [''] },
{ id: LokiOperationId.LabelFilterNoErrors, params: [] },
{ id: LokiOperationId.SumOverTime, params: ['$__interval'] },
{ id: LokiOperationId.Sum, params: [] },
@@ -106,7 +106,7 @@ export class LokiQueryModeller extends LokiAndPromQueryModellerBase {
operations: [
{ id: LokiOperationId.LineContains, params: [''] },
{ id: LokiOperationId.CountOverTime, params: ['$__interval'] },
- { id: LokiOperationId.Sum, params: ['label'] },
+ { id: LokiOperationId.Sum, params: [] },
],
},
{
@@ -149,7 +149,7 @@ export class LokiQueryModeller extends LokiAndPromQueryModellerBase {
},
{
name: 'Metrics query for extracted quantile',
- // quantile_over_time(0.99,{} | logfmt | unwrap latency[$__interval]) by ()
+ // quantile_over_time(0.5,{} | logfmt | unwrap latency[$__interval]) by ()
operations: [
{ id: LokiOperationId.Logfmt, params: [] },
{ id: LokiOperationId.LabelFilterNoErrors, params: [] },
diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx
index b0f045f1f4c..71f50c90722 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx
@@ -79,25 +79,21 @@ export const LokiQueryEditorSelector = React.memo((props)
onDismiss={() => setParseModalOpen(false)}
/>
- {editorMode === QueryEditorMode.Builder && (
- <>
- {
- const result = buildVisualQueryFromString(query.expr || '');
- result.query.operations = value?.operations!;
- onChange({
- ...query,
- expr: lokiQueryModeller.renderQuery(result.query),
- });
- }}
- options={lokiQueryModeller.getQueryPatterns().map((x) => ({ label: x.name, value: x }))}
- />
-
-
- )}
+ {
+ const result = buildVisualQueryFromString(query.expr || '');
+ result.query.operations = value?.operations!;
+ onChange({
+ ...query,
+ expr: lokiQueryModeller.renderQuery(result.query),
+ });
+ }}
+ options={lokiQueryModeller.getQueryPatterns().map((x) => ({ label: x.name, value: x }))}
+ />
+
{app !== CoreApp.Explore && (