Prometheus: Run exemplars explore queries through backend (#39531)

* Prometheus: Run Explore both queries trough backend

* Refactor, simplify

* Set default values for query type selector

* Run multiple queries as one query trough backend

* Remove trailing newlines

* Pass utcOffset

* Remove trailing comma

* WIP: Implementatioon of exemplars

* add sampling for exemplars

* Refactor to use response as custom metadata

* Simplify processing of exemplars

* Update, clean up

* Refactor the way how we get available exemplars

* Simplify exemplars disabling and running on frontend

* Add tests

* Update toggle

* Remove console log

* Fix go linting

* Fix e2e test

* Trigger Build

* Compare lengts, small fix

* Remove duplicated time check

* Address feedback

* Remove redundant ! as not needed

* Update
This commit is contained in:
Ivana Huckova
2021-10-12 13:16:09 +02:00
committed by GitHub
parent 2f0eccb421
commit 19ad08e6b8
18 changed files with 893 additions and 925 deletions

View File

@@ -2,32 +2,39 @@ import { GrafanaTheme2 } from '@grafana/data';
import { IconButton, InlineLabel, Tooltip, useStyles2 } from '@grafana/ui';
import { css, cx } from '@emotion/css';
import React, { useEffect, useState } from 'react';
import { usePrevious } from 'react-use';
import { PrometheusDatasource } from '../datasource';
import { filter } from 'rxjs/operators';
import { PromQuery } from '../types';
interface Props {
isEnabled: boolean;
onChange: (isEnabled: boolean) => void;
onChange: (exemplar: boolean) => void;
datasource: PrometheusDatasource;
refId: string;
query: PromQuery;
}
export function PromExemplarField({ datasource, onChange, isEnabled, refId }: Props) {
export function PromExemplarField({ datasource, onChange, query }: Props) {
const [error, setError] = useState<string | null>(null);
const styles = useStyles2(getStyles);
const prevError = usePrevious(error);
useEffect(() => {
const subscription = datasource.exemplarErrors.pipe(filter((value) => refId === value.refId)).subscribe((err) => {
setError(err.error);
});
return () => {
subscription.unsubscribe();
};
}, [datasource, refId]);
if (!datasource.exemplarsAvailable) {
setError('Exemplars for this query are not available');
onChange(false);
} else if (query.instant && !query.range) {
setError('Exemplars are not available for instant queries');
onChange(false);
} else {
setError(null);
if (prevError !== error) {
onChange(true);
}
}
}, [datasource.exemplarsAvailable, query.instant, query.range, onChange, prevError, error]);
const iconButtonStyles = cx(
{
[styles.activeIcon]: isEnabled,
[styles.activeIcon]: !!query.exemplar,
},
styles.eyeIcon
);
@@ -39,11 +46,11 @@ export function PromExemplarField({ datasource, onChange, isEnabled, refId }: Pr
Exemplars
<IconButton
name="eye"
tooltip={isEnabled ? 'Disable query with exemplars' : 'Enable query with exemplars'}
tooltip={!!query.exemplar ? 'Disable query with exemplars' : 'Enable query with exemplars'}
disabled={!!error}
className={iconButtonStyles}
onClick={() => {
onChange(!isEnabled);
onChange(!query.exemplar);
}}
/>
</div>