mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user