Skip to content

[BUGFIX] Align definitions for all explorers #680

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Gladorme wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

[BUGFIX] Align definitions for all explorers #680

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 3 additions & 25 deletions logexplorer/src/explore/log-explorer/LogExplorer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import {
usePluginRegistry,
useTimeRange,
} from '@perses-dev/plugin-system';
import { ReactElement, useMemo, useState } from 'react';
import { ReactElement, useState } from 'react';
import { QueryDefinition } from '@perses-dev/spec';
import { Panel } from '@perses-dev/dashboards';
import { useExplorerManagerContext } from '@perses-dev/explore';
Expand All @@ -39,20 +39,9 @@ const EMPTY_QUERIES: QueryDefinition[] = [];
function LogsTablePanel({ queries }: { queries: QueryDefinition[] }): ReactElement {
const height = PANEL_PREVIEW_HEIGHT;

const definitions = useMemo(
() =>
queries.length
? queries.map((query) => ({
kind: query.spec.plugin.kind,
spec: query.spec.plugin.spec,
}))
: [],
[queries]
);

return (
<Box height={height}>
<DataQueriesProvider definitions={definitions}>
<DataQueriesProvider definitions={queries}>
<Panel
panelOptions={{
hideHeader: true,
Expand All @@ -68,20 +57,9 @@ function LogsTablePanel({ queries }: { queries: QueryDefinition[] }): ReactEleme
}

function VolumeHistogramPanel({ queries }: { queries: QueryDefinition[] }): ReactElement {
const definitions = useMemo(
() =>
queries.length
? queries.map((query) => ({
kind: query.spec.plugin.kind,
spec: query.spec.plugin.spec,
}))
: [],
[queries]
);

return (
<Box height={HISTOGRAM_HEIGHT}>
<DataQueriesProvider definitions={definitions}>
<DataQueriesProvider definitions={queries}>
<Panel
panelOptions={{
hideHeader: true,
Expand Down
22 changes: 2 additions & 20 deletions prometheus/src/explore/PrometheusExplorer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,19 +36,9 @@ function TimeSeriesPanel({ queries }: { queries: QueryDefinition[] }): ReactElem

const suggestedStepMs = useSuggestedStepMs(width);

// map TimeSeriesQueryDefinition to Definition<UnknownSpec>
const definitions = queries.length
? queries.map((query) => {
return {
kind: query.spec.plugin.kind,
spec: query.spec.plugin.spec,
};
})
: [];

return (
<Box ref={boxRef} height={height}>
<DataQueriesProvider definitions={definitions} options={{ suggestedStepMs, mode: 'range' }}>
<DataQueriesProvider definitions={queries} options={{ suggestedStepMs, mode: 'range' }}>
<Panel
panelOptions={{
hideHeader: true,
Expand All @@ -66,17 +56,9 @@ function TimeSeriesPanel({ queries }: { queries: QueryDefinition[] }): ReactElem
function MetricDataTable({ queries }: { queries: QueryDefinition[] }): ReactElement {
const height = PANEL_PREVIEW_HEIGHT;

// map TimeSeriesQueryDefinition to Definition<UnknownSpec>
const definitions = queries.map((query) => {
return {
kind: query.spec.plugin.kind,
spec: query.spec.plugin.spec,
};
});

return (
<Box height={height}>
<DataQueriesProvider definitions={definitions} options={{ mode: 'instant' }}>
<DataQueriesProvider definitions={queries} options={{ mode: 'instant' }}>
<Panel
panelOptions={{
hideHeader: true,
Expand Down
50 changes: 20 additions & 30 deletions prometheus/src/explore/PrometheusMetricsFinder/overview/MetricOverview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { Panel } from '@perses-dev/dashboards';
import useResizeObserver from 'use-resize-observer';
import { DataQueriesProvider, useSuggestedStepMs } from '@perses-dev/plugin-system';
import HelpCircleOutlineIcon from 'mdi-material-ui/HelpCircleOutline';
import { DatasourceSelector, Definition, QueryDefinition, UnknownSpec } from '@perses-dev/spec';
import { DatasourceSelector, QueryDefinition } from '@perses-dev/spec';
import { computeFilterExpr, LabelFilter } from '../types';
import { useMetricMetadata } from '../utils';
import { OverviewTab } from './tabs/OverviewTab';
Expand Down Expand Up @@ -46,37 +46,27 @@ export function OverviewPanel({

const [rateEnabled, setRateEnabled] = useState(true);

const { queries, definitions }: { queries: QueryDefinition[]; definitions: Array<Definition<UnknownSpec>> } =
useMemo(() => {
const expr =
type === 'counter' || (rateEnabled && (type === undefined || type === 'summary' || type === 'histogram'))
? `rate({__name__="${metricName}", ${computeFilterExpr(filters)}}[5m])`
: `{__name__="${metricName}", ${computeFilterExpr(filters)}}`;

const queries = [
{
kind: 'TimeSeriesQuery',
spec: {
plugin: {
kind: 'PrometheusTimeSeriesQuery',
spec: {
datasource: datasource,
query: expr,
},
const queries: QueryDefinition[] = useMemo(() => {
const expr =
type === 'counter' || (rateEnabled && (type === undefined || type === 'summary' || type === 'histogram'))
? `rate({__name__="${metricName}", ${computeFilterExpr(filters)}}[5m])`
: `{__name__="${metricName}", ${computeFilterExpr(filters)}}`;

return [
{
kind: 'TimeSeriesQuery',
spec: {
plugin: {
kind: 'PrometheusTimeSeriesQuery',
spec: {
datasource: datasource,
query: expr,
},
},
},
];

const definitions = queries.map((query) => {
return {
kind: query.spec.plugin.kind,
spec: query.spec.plugin.spec,
};
});

return { queries, definitions };
}, [datasource, filters, metricName, rateEnabled, type]);
},
];
}, [datasource, filters, metricName, rateEnabled, type]);

if (isLoading) {
return (
Expand All @@ -96,7 +86,7 @@ export function OverviewPanel({
onChange={(_, checked) => setRateEnabled(checked)}
/>
)}
<DataQueriesProvider definitions={definitions} options={{ suggestedStepMs, mode: 'range' }}>
<DataQueriesProvider definitions={queries} options={{ suggestedStepMs, mode: 'range' }}>
<Panel
panelOptions={{
hideHeader: true,
Expand Down
12 changes: 1 addition & 11 deletions pyroscope/src/explore/PyroscopeExplorer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,16 +53,6 @@ export function PyroscopeExplorer(): ReactElement {

const [queryDefinitions, setQueryDefinitions] = useState<QueryDefinition[]>(queries);

// map ProfileQueryDefinition to Definition<UnknownSpec>
const definitions = queries.length
? queries.map((query: QueryDefinition) => {
return {
kind: query.spec.plugin.kind,
spec: query.spec.plugin.spec,
};
})
: [];

return (
<Stack gap={2} sx={{ width: '100%' }}>
<MultiQueryEditor
Expand All @@ -71,7 +61,7 @@ export function PyroscopeExplorer(): ReactElement {
queries={queryDefinitions}
onQueryRun={() => setData({ queries: queryDefinitions })}
/>
<DataQueriesProvider definitions={definitions}>
<DataQueriesProvider definitions={queries}>
<Box height={980}>
<FlameGraphPanel queries={queries} />
</Box>
Expand Down
12 changes: 1 addition & 11 deletions tempo/src/explore/TempoExplorer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,16 +148,6 @@ export function TempoExplorer(): ReactElement {

const [queryDefinitions, setQueryDefinitions] = useState<QueryDefinition[]>(queries);

// map TraceQueryDefinition to Definition<UnknownSpec>
const definitions = queries.length
? queries.map((query: QueryDefinition) => {
return {
kind: query.spec.plugin.kind,
spec: query.spec.plugin.spec,
};
})
: [];

const firstQuery = (queries[0]?.spec.plugin.spec as TempoTraceQuerySpec | undefined)?.query;
const isSingleTrace = isValidTraceId(firstQuery ?? '');

Expand All @@ -171,7 +161,7 @@ export function TempoExplorer(): ReactElement {
/>

<ErrorBoundary FallbackComponent={ErrorAlert} resetKeys={[queries]}>
<DataQueriesProvider definitions={definitions}>
<DataQueriesProvider definitions={queries}>
<Box height={700}>
{isSingleTrace ? (
<TracingGanttChartPanel queries={queries} selectedSpanId={selectedSpanId} />
Expand Down
Loading