mirror of https://github.com/grafana/grafana
Alerting: app specific query editors for Loki and Prometheus (#34365)
* Adding simplified version of query editor based on app flag. * cleaned up the absolute time range. * changing placeholder text. * updated snapshot. * added some tests. * adding loki query editor tests. * updating snapshots.mckn/cloud-alerting-viz
Marcus Andersson
4 years ago
committed by
GitHub
parent
f48708bb9e
commit
8ddf6de6e7
@ -0,0 +1,59 @@ |
||||
import React from 'react'; |
||||
import { render, RenderResult } from '@testing-library/react'; |
||||
import { CoreApp } from '@grafana/data'; |
||||
import { noop } from 'lodash'; |
||||
import { LokiDatasource } from '../datasource'; |
||||
import { testIds as alertingTestIds } from './LokiQueryEditorForAlerting'; |
||||
import { testIds as regularTestIds } from './LokiQueryEditor'; |
||||
import LokiQueryEditorByApp from './LokiQueryEditorByApp'; |
||||
|
||||
function setup(app: CoreApp): RenderResult { |
||||
const dataSource = ({ |
||||
languageProvider: { |
||||
start: () => Promise.resolve([]), |
||||
getSyntax: () => {}, |
||||
getLabelKeys: () => [], |
||||
metrics: [], |
||||
}, |
||||
} as unknown) as LokiDatasource; |
||||
|
||||
return render( |
||||
<LokiQueryEditorByApp |
||||
app={app} |
||||
onChange={noop} |
||||
onRunQuery={noop} |
||||
datasource={dataSource} |
||||
query={{ refId: 'A', expr: '' }} |
||||
/> |
||||
); |
||||
} |
||||
|
||||
describe('LokiQueryEditorByApp', () => { |
||||
it('should render simplified query editor for cloud alerting', () => { |
||||
const { getByTestId, queryByTestId } = setup(CoreApp.CloudAlerting); |
||||
|
||||
expect(getByTestId(alertingTestIds.editor)).toBeInTheDocument(); |
||||
expect(queryByTestId(regularTestIds.editor)).toBeNull(); |
||||
}); |
||||
|
||||
it('should render regular query editor for unkown apps', () => { |
||||
const { getByTestId, queryByTestId } = setup(CoreApp.Unknown); |
||||
|
||||
expect(getByTestId(regularTestIds.editor)).toBeInTheDocument(); |
||||
expect(queryByTestId(alertingTestIds.editor)).toBeNull(); |
||||
}); |
||||
|
||||
it('should render regular query editor for explore', () => { |
||||
const { getByTestId, queryByTestId } = setup(CoreApp.Explore); |
||||
|
||||
expect(getByTestId(regularTestIds.editor)).toBeInTheDocument(); |
||||
expect(queryByTestId(alertingTestIds.editor)).toBeNull(); |
||||
}); |
||||
|
||||
it('should render regular query editor for dashboard', () => { |
||||
const { getByTestId, queryByTestId } = setup(CoreApp.Dashboard); |
||||
|
||||
expect(getByTestId(regularTestIds.editor)).toBeInTheDocument(); |
||||
expect(queryByTestId(alertingTestIds.editor)).toBeNull(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,18 @@ |
||||
import React, { memo } from 'react'; |
||||
import { CoreApp } from '@grafana/data'; |
||||
import { LokiQueryEditorProps } from './types'; |
||||
import { LokiQueryEditor } from './LokiQueryEditor'; |
||||
import { LokiQueryEditorForAlerting } from './LokiQueryEditorForAlerting'; |
||||
|
||||
export function LokiQueryEditorByApp(props: LokiQueryEditorProps) { |
||||
const { app } = props; |
||||
|
||||
switch (app) { |
||||
case CoreApp.CloudAlerting: |
||||
return <LokiQueryEditorForAlerting {...props} />; |
||||
default: |
||||
return <LokiQueryEditor {...props} />; |
||||
} |
||||
} |
||||
|
||||
export default memo(LokiQueryEditorByApp); |
||||
@ -0,0 +1,25 @@ |
||||
import React from 'react'; |
||||
import { LokiQueryField } from './LokiQueryField'; |
||||
import { LokiQueryEditorProps } from './types'; |
||||
|
||||
export function LokiQueryEditorForAlerting(props: LokiQueryEditorProps) { |
||||
const { query, data, datasource, onChange, onRunQuery } = props; |
||||
|
||||
return ( |
||||
<LokiQueryField |
||||
datasource={datasource} |
||||
query={query} |
||||
onChange={onChange} |
||||
onRunQuery={onRunQuery} |
||||
onBlur={onRunQuery} |
||||
history={[]} |
||||
data={data} |
||||
placeholder="Enter a Loki query" |
||||
data-testid={testIds.editor} |
||||
/> |
||||
); |
||||
} |
||||
|
||||
export const testIds = { |
||||
editor: 'loki-editor-cloud-alerting', |
||||
}; |
||||
@ -0,0 +1,5 @@ |
||||
import { QueryEditorProps } from '@grafana/data'; |
||||
import LokiDatasource from '../datasource'; |
||||
import { LokiOptions, LokiQuery } from '../types'; |
||||
|
||||
export type LokiQueryEditorProps = QueryEditorProps<LokiDatasource, LokiQuery, LokiOptions>; |
||||
@ -0,0 +1,64 @@ |
||||
import React from 'react'; |
||||
import { render, RenderResult } from '@testing-library/react'; |
||||
import { PromQueryEditorByApp } from './PromQueryEditorByApp'; |
||||
import { CoreApp } from '@grafana/data'; |
||||
import { noop } from 'lodash'; |
||||
import { Observable } from 'rxjs'; |
||||
import { first } from 'rxjs/operators'; |
||||
import { PrometheusDatasource } from '../datasource'; |
||||
import { testIds as alertingTestIds } from './PromQueryEditorForAlerting'; |
||||
import { testIds as regularTestIds } from './PromQueryEditor'; |
||||
|
||||
function setup(app: CoreApp): RenderResult { |
||||
const dataSource = ({ |
||||
createQuery: jest.fn((q) => q), |
||||
getPrometheusTime: jest.fn((date, roundup) => 123), |
||||
languageProvider: { |
||||
start: () => Promise.resolve([]), |
||||
syntax: () => {}, |
||||
getLabelKeys: () => [], |
||||
metrics: [], |
||||
}, |
||||
exemplarErrors: new Observable().pipe(first()), |
||||
} as unknown) as PrometheusDatasource; |
||||
|
||||
return render( |
||||
<PromQueryEditorByApp |
||||
app={app} |
||||
onChange={noop} |
||||
onRunQuery={noop} |
||||
datasource={dataSource} |
||||
query={{ refId: 'A', expr: '' }} |
||||
/> |
||||
); |
||||
} |
||||
|
||||
describe('PromQueryEditorByApp', () => { |
||||
it('should render simplified query editor for cloud alerting', () => { |
||||
const { getByTestId, queryByTestId } = setup(CoreApp.CloudAlerting); |
||||
|
||||
expect(getByTestId(alertingTestIds.editor)).toBeInTheDocument(); |
||||
expect(queryByTestId(regularTestIds.editor)).toBeNull(); |
||||
}); |
||||
|
||||
it('should render regular query editor for unkown apps', () => { |
||||
const { getByTestId, queryByTestId } = setup(CoreApp.Unknown); |
||||
|
||||
expect(getByTestId(regularTestIds.editor)).toBeInTheDocument(); |
||||
expect(queryByTestId(alertingTestIds.editor)).toBeNull(); |
||||
}); |
||||
|
||||
it('should render regular query editor for explore', () => { |
||||
const { getByTestId, queryByTestId } = setup(CoreApp.Explore); |
||||
|
||||
expect(getByTestId(regularTestIds.editor)).toBeInTheDocument(); |
||||
expect(queryByTestId(alertingTestIds.editor)).toBeNull(); |
||||
}); |
||||
|
||||
it('should render regular query editor for dashboard', () => { |
||||
const { getByTestId, queryByTestId } = setup(CoreApp.Dashboard); |
||||
|
||||
expect(getByTestId(regularTestIds.editor)).toBeInTheDocument(); |
||||
expect(queryByTestId(alertingTestIds.editor)).toBeNull(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,18 @@ |
||||
import React, { memo } from 'react'; |
||||
import { CoreApp } from '@grafana/data'; |
||||
import { PromQueryEditorProps } from './types'; |
||||
import { PromQueryEditor } from './PromQueryEditor'; |
||||
import { PromQueryEditorForAlerting } from './PromQueryEditorForAlerting'; |
||||
|
||||
export function PromQueryEditorByApp(props: PromQueryEditorProps) { |
||||
const { app } = props; |
||||
|
||||
switch (app) { |
||||
case CoreApp.CloudAlerting: |
||||
return <PromQueryEditorForAlerting {...props} />; |
||||
default: |
||||
return <PromQueryEditor {...props} />; |
||||
} |
||||
} |
||||
|
||||
export default memo(PromQueryEditorByApp); |
||||
@ -0,0 +1,25 @@ |
||||
import React from 'react'; |
||||
import PromQueryField from './PromQueryField'; |
||||
import { PromQueryEditorProps } from './types'; |
||||
|
||||
export function PromQueryEditorForAlerting(props: PromQueryEditorProps) { |
||||
const { datasource, query, range, data, onChange, onRunQuery } = props; |
||||
|
||||
return ( |
||||
<PromQueryField |
||||
datasource={datasource} |
||||
query={query} |
||||
onRunQuery={onRunQuery} |
||||
onChange={onChange} |
||||
history={[]} |
||||
range={range} |
||||
data={data} |
||||
placeholder="Enter a PromQL query" |
||||
data-testid={testIds.editor} |
||||
/> |
||||
); |
||||
} |
||||
|
||||
export const testIds = { |
||||
editor: 'prom-editor-cloud-alerting', |
||||
}; |
||||
@ -0,0 +1,5 @@ |
||||
import { QueryEditorProps } from '@grafana/data'; |
||||
import { PrometheusDatasource } from '../datasource'; |
||||
import { PromOptions, PromQuery } from '../types'; |
||||
|
||||
export type PromQueryEditorProps = QueryEditorProps<PrometheusDatasource, PromQuery, PromOptions>; |
||||
Loading…
Reference in new issue