diff --git a/components/package.json b/components/package.json index 2030e74..80e06b7 100644 --- a/components/package.json +++ b/components/package.json @@ -33,7 +33,7 @@ "@codemirror/lang-json": "^6.0.1", "@fontsource/lato": "^4.5.10", "@mui/x-date-pickers": "^7.23.1", - "@perses-dev/core": "0.53.0-rc.0", + "@perses-dev/core": "file:../../perses/ui/core", "@tanstack/react-table": "^8.20.5", "@uiw/react-codemirror": "^4.19.1", "date-fns": "^4.1.0", @@ -61,4 +61,4 @@ "files": [ "dist" ] -} \ No newline at end of file +} diff --git a/dashboards/package.json b/dashboards/package.json index 32a0ff6..bf5b024 100644 --- a/dashboards/package.json +++ b/dashboards/package.json @@ -30,7 +30,7 @@ }, "dependencies": { "@perses-dev/components": "0.53.0-rc.2", - "@perses-dev/core": "0.53.0-rc.0", + "@perses-dev/core": "file:../../perses/ui/core", "@perses-dev/plugin-system": "0.53.0-rc.2", "@types/react-grid-layout": "^1.3.2", "date-fns": "^4.1.0", @@ -46,8 +46,7 @@ "zustand": "^4.3.3" }, "devDependencies": { - "history": "^5.3.0", - "intersection-observer": "^0.12.2" + "history": "^5.3.0" }, "peerDependencies": { "@mui/material": "^6.1.10", @@ -58,4 +57,4 @@ "files": [ "dist" ] -} \ No newline at end of file +} diff --git a/dashboards/src/components/GridLayout/GridItemContent.tsx b/dashboards/src/components/GridLayout/GridItemContent.tsx index 86d5a5d..71786fc 100644 --- a/dashboards/src/components/GridLayout/GridItemContent.tsx +++ b/dashboards/src/components/GridLayout/GridItemContent.tsx @@ -84,14 +84,6 @@ export function GridItemContent(props: GridItemContentProps): ReactElement { const { data: plugin } = usePlugin('Panel', panelDefinition.spec.plugin.kind); - const queryDefinitions = queries ?? []; - const definitions = queryDefinitions.map((query) => { - return { - kind: query.spec.plugin.kind, - spec: query.spec.plugin.spec, - }; - }); - const pluginQueryOptions = typeof plugin?.queryOptions === 'function' ? plugin?.queryOptions(panelDefinition.spec.plugin.spec) @@ -106,7 +98,7 @@ export function GridItemContent(props: GridItemContentProps): ReactElement { }} > @@ -123,7 +115,7 @@ export function GridItemContent(props: GridItemContentProps): ReactElement { setOpenQueryViewer(false)} /> diff --git a/dashboards/src/components/PanelDrawer/PanelQueriesSharedControls.tsx b/dashboards/src/components/PanelDrawer/PanelQueriesSharedControls.tsx index c1a0ecc..38a1930 100644 --- a/dashboards/src/components/PanelDrawer/PanelQueriesSharedControls.tsx +++ b/dashboards/src/components/PanelDrawer/PanelQueriesSharedControls.tsx @@ -51,23 +51,13 @@ export function PanelQueriesSharedControls({ [panelDefinition.spec.plugin.spec, pluginPreview] ); - const [previewDefinition, setPreviewDefinition] = useState( - () => - panelDefinition.spec.queries?.map((query) => { - return { - kind: query.spec.plugin.kind, - spec: query.spec.plugin.spec, - }; - }) ?? [] - ); + const [previewDefinition, setPreviewDefinition] = useState(panelDefinition.spec.queries ?? []); const handleRunQuery = useCallback((index: number, newDef: QueryDefinition) => { setPreviewDefinition((prev) => { const newDefinitions = [...prev]; - newDefinitions[index] = { - kind: newDef.spec.plugin.kind, - spec: newDef.spec.plugin.spec, - }; + newDefinitions[index] = newDef; + return newDefinitions; }); }, []); diff --git a/explore/package.json b/explore/package.json index 00057ae..4ad3f45 100644 --- a/explore/package.json +++ b/explore/package.json @@ -29,7 +29,7 @@ "dependencies": { "@nexucis/fuzzy": "^0.5.1", "@perses-dev/components": "0.53.0-rc.2", - "@perses-dev/core": "0.53.0-rc.0", + "@perses-dev/core": "file:../../perses/ui/core", "@perses-dev/dashboards": "0.53.0-rc.2", "@perses-dev/plugin-system": "0.53.0-rc.2", "@types/react-grid-layout": "^1.3.2", @@ -50,7 +50,6 @@ "devDependencies": { "@types/qs": "^6.14.0", "history": "^5.3.0", - "intersection-observer": "^0.12.2", "react-router-dom": "^6.30.1" }, "peerDependencies": { @@ -62,4 +61,4 @@ "files": [ "dist" ] -} \ No newline at end of file +} diff --git a/package-lock.json b/package-lock.json index b8d1d0c..ebdd119 100644 --- a/package-lock.json +++ b/package-lock.json @@ -55,6 +55,21 @@ "wait-on": "^7.0.1" } }, + "../perses/ui/core": { + "name": "@perses-dev/core", + "version": "0.53.0-rc.1", + "license": "Apache-2.0", + "dependencies": { + "date-fns": "^4.1.0", + "lodash": "^4.17.21", + "mathjs": "^10.6.4", + "numbro": "^2.3.6", + "zod": "^3.21.4" + }, + "devDependencies": { + "@types/lodash": "^4.17.16" + } + }, "components": { "name": "@perses-dev/components", "version": "0.53.0-rc.2", @@ -65,7 +80,7 @@ "@codemirror/lang-json": "^6.0.1", "@fontsource/lato": "^4.5.10", "@mui/x-date-pickers": "^7.23.1", - "@perses-dev/core": "0.53.0-rc.0", + "@perses-dev/core": "file:../../perses/ui/core", "@tanstack/react-table": "^8.20.5", "@uiw/react-codemirror": "^4.19.1", "date-fns": "^4.1.0", @@ -97,7 +112,7 @@ "license": "Apache-2.0", "dependencies": { "@perses-dev/components": "0.53.0-rc.2", - "@perses-dev/core": "0.53.0-rc.0", + "@perses-dev/core": "file:../../perses/ui/core", "@perses-dev/plugin-system": "0.53.0-rc.2", "@types/react-grid-layout": "^1.3.2", "date-fns": "^4.1.0", @@ -113,8 +128,7 @@ "zustand": "^4.3.3" }, "devDependencies": { - "history": "^5.3.0", - "intersection-observer": "^0.12.2" + "history": "^5.3.0" }, "peerDependencies": { "@mui/material": "^6.1.10", @@ -140,7 +154,7 @@ "dependencies": { "@nexucis/fuzzy": "^0.5.1", "@perses-dev/components": "0.53.0-rc.2", - "@perses-dev/core": "0.53.0-rc.0", + "@perses-dev/core": "file:../../perses/ui/core", "@perses-dev/dashboards": "0.53.0-rc.2", "@perses-dev/plugin-system": "0.53.0-rc.2", "@types/react-grid-layout": "^1.3.2", @@ -161,7 +175,6 @@ "devDependencies": { "@types/qs": "^6.14.0", "history": "^5.3.0", - "intersection-observer": "^0.12.2", "react-router-dom": "^6.30.1" }, "peerDependencies": { @@ -3965,17 +3978,8 @@ "link": true }, "node_modules/@perses-dev/core": { - "version": "0.53.0-rc.0", - "resolved": "https://registry.npmjs.org/@perses-dev/core/-/core-0.53.0-rc.0.tgz", - "integrity": "sha512-hcFY/l7PlQZ9lz/uAh0J8Txw0l+W2mkalNcDu+CGvusc2sgQznrCyn7hh/UppSN7ls1JgwaCqjjVeqBEHEjsrQ==", - "license": "Apache-2.0", - "dependencies": { - "date-fns": "^4.1.0", - "lodash": "^4.17.21", - "mathjs": "^10.6.4", - "numbro": "^2.3.6", - "zod": "^3.21.4" - } + "resolved": "../perses/ui/core", + "link": true }, "node_modules/@perses-dev/dashboards": { "resolved": "dashboards", @@ -6619,15 +6623,6 @@ "node": "*" } }, - "node_modules/bignumber.js": { - "version": "9.3.1", - "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.3.1.tgz", - "integrity": "sha512-Ko0uX15oIUS7wJ3Rb30Fs6SkVbLmPBAKdlm7q9+ak9bbIeFf0MwuBsQV6z7+X768/cHsfg+WlysDWJcmthjsjQ==", - "license": "MIT", - "engines": { - "node": "*" - } - }, "node_modules/bin-version": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/bin-version/-/bin-version-6.0.0.tgz", @@ -10073,13 +10068,6 @@ "node": ">= 0.4" } }, - "node_modules/intersection-observer": { - "version": "0.12.2", - "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.12.2.tgz", - "integrity": "sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg==", - "dev": true, - "license": "Apache-2.0" - }, "node_modules/is-array-buffer": { "version": "3.0.5", "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz", @@ -13181,18 +13169,6 @@ "node": ">=8" } }, - "node_modules/numbro": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/numbro/-/numbro-2.5.0.tgz", - "integrity": "sha512-xDcctDimhzko/e+y+Q2/8i3qNC9Svw1QgOkSkQoO0kIPI473tR9QRbo2KP88Ty9p8WbPy+3OpTaAIzehtuHq+A==", - "license": "MIT", - "dependencies": { - "bignumber.js": "^8 || ^9" - }, - "engines": { - "node": "*" - } - }, "node_modules/nwsapi": { "version": "2.2.22", "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.22.tgz", @@ -16929,7 +16905,7 @@ "dependencies": { "@module-federation/enhanced": "^0.21.4", "@perses-dev/components": "0.53.0-rc.2", - "@perses-dev/core": "0.53.0-rc.0", + "@perses-dev/core": "file:../../perses/ui/core", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "immer": "^10.1.1", diff --git a/plugin-system/package.json b/plugin-system/package.json index eb557c6..1ced6df 100644 --- a/plugin-system/package.json +++ b/plugin-system/package.json @@ -30,7 +30,7 @@ "dependencies": { "@module-federation/enhanced": "^0.21.4", "@perses-dev/components": "0.53.0-rc.2", - "@perses-dev/core": "0.53.0-rc.0", + "@perses-dev/core": "file:../../perses/ui/core", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "immer": "^10.1.1", @@ -49,4 +49,4 @@ "files": [ "dist" ] -} \ No newline at end of file +} diff --git a/plugin-system/src/components/MultiQueryEditor/QueryEditorContainer.tsx b/plugin-system/src/components/MultiQueryEditor/QueryEditorContainer.tsx index 013d875..c39022f 100644 --- a/plugin-system/src/components/MultiQueryEditor/QueryEditorContainer.tsx +++ b/plugin-system/src/components/MultiQueryEditor/QueryEditorContainer.tsx @@ -13,15 +13,28 @@ import { produce } from 'immer'; import { QueryDefinition, QueryPluginType } from '@perses-dev/core'; -import { Stack, IconButton, Typography, BoxProps, Box, CircularProgress } from '@mui/material'; +import { + Stack, + IconButton, + Typography, + BoxProps, + Box, + CircularProgress, + TextField, + Button, + InputAdornment, +} from '@mui/material'; import DeleteIcon from 'mdi-material-ui/DeleteOutline'; import ChevronDown from 'mdi-material-ui/ChevronDown'; import ChevronRight from 'mdi-material-ui/ChevronRight'; -import { forwardRef, ReactElement } from 'react'; +import { forwardRef, ReactElement, useState } from 'react'; import AlertIcon from 'mdi-material-ui/Alert'; import { InfoTooltip } from '@perses-dev/components'; +import PencilIcon from 'mdi-material-ui/Pencil'; +import CheckIcon from 'mdi-material-ui/Check'; import { QueryData } from '../../runtime'; import { PluginEditor, PluginEditorProps, PluginEditorRef } from '../PluginEditor'; +import { defaultQueryName } from './utils'; /** * Properties for {@link QueryEditorContainer} @@ -66,6 +79,20 @@ export const QueryEditorContainer = forwardRef { + draft.spec.name = name; + }) + ); + } + return ( theme.palette.divider} > - - onCollapseExpand(index)}> + + onCollapseExpand(index)} + > {isCollapsed ? : } - - Query #{index + 1} - + + {isEditingName ? ( + setName(e.target.value)} + InputProps={{ + endAdornment: ( + + + + + + ), + }} + /> + ) : ( + <> + + {name} + + + + )} + {queryResult?.isFetching && } diff --git a/plugin-system/src/components/MultiQueryEditor/index.tsx b/plugin-system/src/components/MultiQueryEditor/index.tsx index 1e2c4cd..7390db8 100644 --- a/plugin-system/src/components/MultiQueryEditor/index.tsx +++ b/plugin-system/src/components/MultiQueryEditor/index.tsx @@ -12,3 +12,4 @@ // limitations under the License. export * from './MultiQueryEditor'; +export * from './utils'; diff --git a/plugin-system/src/components/MultiQueryEditor/utils.tsx b/plugin-system/src/components/MultiQueryEditor/utils.tsx new file mode 100644 index 0000000..1c336a3 --- /dev/null +++ b/plugin-system/src/components/MultiQueryEditor/utils.tsx @@ -0,0 +1,17 @@ +import { QueryDefinition } from '@perses-dev/core'; + +export function defaultQueryName(index: number): string { + return `Query #${index + 1}`; +} + +export function getQueryName(definitions: QueryDefinition[], query: QueryDefinition): string { + if (query.spec.name) { + return query.spec.name; + } + const index = definitions.findIndex((definition) => definition === query); + return defaultQueryName(index); +} + +export function generateQueryNames(definitions: QueryDefinition[]): string[] { + return definitions.map((queryDef: QueryDefinition, index: number) => queryDef.spec.name ?? defaultQueryName(index)); +} diff --git a/plugin-system/src/components/PanelSpecEditor/PanelSpecEditor.test.tsx b/plugin-system/src/components/PanelSpecEditor/PanelSpecEditor.test.tsx index f72192f..c60ae8d 100644 --- a/plugin-system/src/components/PanelSpecEditor/PanelSpecEditor.test.tsx +++ b/plugin-system/src/components/PanelSpecEditor/PanelSpecEditor.test.tsx @@ -23,6 +23,7 @@ describe('PanelSpecEditor', () => { const renderComponent = (props: Omit): void => { const DataQueriesProviderMock = (childProps: { children: ReactElement }): ReactElement => { const ctx = { + queryDefinitions: [], queryResults: [], refetchAll: (): void => {}, isFetching: false, diff --git a/plugin-system/src/components/PanelSpecEditor/PanelSpecEditor.tsx b/plugin-system/src/components/PanelSpecEditor/PanelSpecEditor.tsx index 5f45616..a1cde5f 100644 --- a/plugin-system/src/components/PanelSpecEditor/PanelSpecEditor.tsx +++ b/plugin-system/src/components/PanelSpecEditor/PanelSpecEditor.tsx @@ -15,7 +15,7 @@ import { ErrorAlert, JSONEditor, LinksEditor } from '@perses-dev/components'; import { PanelDefinition, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/core'; import { Control, Controller } from 'react-hook-form'; import { forwardRef, ReactElement } from 'react'; -import { QueryCountProvider, useDataQueriesContext, usePlugin } from '../../runtime'; +import { useDataQueriesContext, usePlugin } from '../../runtime'; import { PanelPlugin } from '../../model'; import { OptionsEditorTabsProps, OptionsEditorTabs } from '../OptionsEditorTabs'; import { MultiQueryEditor } from '../MultiQueryEditor'; @@ -131,11 +131,7 @@ export const PanelSpecEditor = forwardRef ), }); - return ( - - - - ); + return ; }); PanelSpecEditor.displayName = 'PanelSpecEditor'; diff --git a/plugin-system/src/runtime/DataQueriesProvider/DataQueriesProvider.test.tsx b/plugin-system/src/runtime/DataQueriesProvider/DataQueriesProvider.test.tsx index 3af305c..bf79344 100644 --- a/plugin-system/src/runtime/DataQueriesProvider/DataQueriesProvider.test.tsx +++ b/plugin-system/src/runtime/DataQueriesProvider/DataQueriesProvider.test.tsx @@ -14,9 +14,7 @@ import React, { ReactElement } from 'react'; import { renderHook } from '@testing-library/react'; import { MOCK_TIME_SERIES_DATA, MOCK_TRACE_DATA, MOCK_PROFILE_DATA, MOCK_LOG_DATA } from '../../test'; -import { useListPluginMetadata } from '../plugin-registry'; import { DataQueriesProvider, useDataQueries } from './DataQueriesProvider'; -import { useQueryType } from './model'; jest.mock('../time-series-queries', () => ({ useTimeSeriesQueries: jest.fn().mockImplementation(() => [{ data: MOCK_TIME_SERIES_DATA }]), @@ -64,9 +62,12 @@ describe('useDataQueries', (): void => { it('should return the correct data for TimeSeriesQuery', () => { const definitions = [ { - kind: 'PrometheusTimeSeriesQuery', + kind: 'TimeSeriesQuery', spec: { - query: 'up', + kind: 'PrometheusTimeSeriesQuery', + spec: { + query: 'up', + }, }, }, ]; @@ -84,9 +85,12 @@ describe('useDataQueries', (): void => { it('should return the correct data for TraceQuery', () => { const definitions = [ { - kind: 'TempoTraceQuery', + kind: 'TraceQuery', spec: { - query: '{ duration > 1000ms }', + kind: 'TempoTraceQuery', + spec: { + query: '{ duration > 1000ms }', + }, }, }, ]; @@ -101,30 +105,3 @@ describe('useDataQueries', (): void => { expect(traceResult.current.queryResults[0]?.data).toEqual(MOCK_TRACE_DATA); }); }); - -describe('useQueryType', () => { - it('should return the correct query type for a given plugin kind', () => { - const { result } = renderHook(() => useQueryType()); - - const getQueryType = result.current; - expect(getQueryType('PrometheusTimeSeriesQuery')).toBe('TimeSeriesQuery'); - expect(getQueryType('TempoTraceQuery')).toBe('TraceQuery'); - }); - - it('should throw an error if query type is not found ', () => { - const { result } = renderHook(() => useQueryType()); - - const getQueryType = result.current; - expect(() => getQueryType('UnknownQuery')).toThrowError(`Unable to determine the query type: UnknownQuery`); - }); - - it('should return undefined if useListPluginMetadata is still loading', () => { - (useListPluginMetadata as jest.Mock).mockReturnValue({ isLoading: true }); - const { result } = renderHook(() => useQueryType()); - - const getQueryType = result.current; - expect(getQueryType('PrometheusTimeSeriesQuery')).toBeUndefined(); - expect(getQueryType('TempoTraceQuery')).toBeUndefined(); - expect(getQueryType('UnknownQuery')).toBeUndefined(); - }); -}); diff --git a/plugin-system/src/runtime/DataQueriesProvider/DataQueriesProvider.tsx b/plugin-system/src/runtime/DataQueriesProvider/DataQueriesProvider.tsx index 97a5ed2..36a7037 100644 --- a/plugin-system/src/runtime/DataQueriesProvider/DataQueriesProvider.tsx +++ b/plugin-system/src/runtime/DataQueriesProvider/DataQueriesProvider.tsx @@ -25,7 +25,6 @@ import { transformQueryResults, DataQueriesContextType, QueryData, - useQueryType, } from './model'; export const DataQueriesContext = createContext(undefined); @@ -41,6 +40,9 @@ export function useDataQueriesContext(): DataQueriesContextType { export function useDataQueries(queryType: T): UseDataQueryResults { const ctx = useDataQueriesContext(); + // Filter query definitions based on the specified query type + const filteredQueryDefinitions = ctx.queryDefinitions.filter((definition) => definition.kind === queryType); + // Filter the query results based on the specified query type const filteredQueryResults = ctx.queryResults.filter( (queryResult) => queryResult?.definition?.kind === queryType @@ -50,52 +52,36 @@ export function useDataQueries(queryType: T): UseData const filteredErrors = ctx.errors.filter((errors, index) => ctx.queryResults[index]?.definition?.kind === queryType); // Create a new context object with the filtered results and errors - const filteredCtx = { + return { + queryDefinitions: filteredQueryDefinitions, queryResults: filteredQueryResults, isFetching: filteredQueryResults.some((result) => result.isFetching), isLoading: filteredQueryResults.some((result) => result.isLoading), refetchAll: ctx.refetchAll, errors: filteredErrors, }; - - return filteredCtx; } export function DataQueriesProvider(props: DataQueriesProviderProps): ReactElement { const { definitions, options, children, queryOptions } = props; - // Returns a query kind, for example "TimeSeriesQuery" = getQueryType("PrometheusTimeSeriesQuery") - const getQueryType = useQueryType(); - - const queryDefinitions = definitions.map((definition) => { - const type = getQueryType(definition.kind); - return { - kind: type, - spec: { - plugin: definition, - }, - }; - }); - const usageMetrics = useUsageMetrics(); // Filter definitions for time series query and other future query plugins - const timeSeriesQueries = queryDefinitions.filter( + const timeSeriesQueries = definitions.filter( (definition) => definition.kind === 'TimeSeriesQuery' ) as TimeSeriesQueryDefinition[]; const timeSeriesResults = useTimeSeriesQueries(timeSeriesQueries, options, queryOptions); - const traceQueries = queryDefinitions.filter( - (definition) => definition.kind === 'TraceQuery' - ) as TraceQueryDefinition[]; + const traceQueries = definitions.filter((definition) => definition.kind === 'TraceQuery') as TraceQueryDefinition[]; const traceResults = useTraceQueries(traceQueries); - const profileQueries = queryDefinitions.filter( + const profileQueries = definitions.filter( (definition) => definition.kind === 'ProfileQuery' ) as ProfileQueryDefinition[]; const profileResults = useProfileQueries(profileQueries); - const logQueries = queryDefinitions.filter((definition) => definition.kind === 'LogQuery') as LogQueryDefinition[]; + const logQueries = definitions.filter((definition) => definition.kind === 'LogQuery') as LogQueryDefinition[]; const logResults = useLogQueries(logQueries); const refetchAll = useCallback(() => { @@ -126,6 +112,7 @@ export function DataQueriesProvider(props: DataQueriesProviderProps): ReactEleme } return { + queryDefinitions: definitions, queryResults: mergedQueryResults, isFetching: mergedQueryResults.some((result) => result.isFetching), isLoading: mergedQueryResults.some((result) => result.isLoading), @@ -133,16 +120,17 @@ export function DataQueriesProvider(props: DataQueriesProviderProps): ReactEleme errors: mergedQueryResults.map((result) => result.error), }; }, [ - timeSeriesQueries, timeSeriesResults, - traceQueries, + timeSeriesQueries, traceResults, - profileQueries, + traceQueries, profileResults, - logQueries, + profileQueries, logResults, - refetchAll, + logQueries, queryOptions?.enabled, + definitions, + refetchAll, usageMetrics, ]); diff --git a/plugin-system/src/runtime/DataQueriesProvider/model.ts b/plugin-system/src/runtime/DataQueriesProvider/model.ts index 8e94759..53194b1 100644 --- a/plugin-system/src/runtime/DataQueriesProvider/model.ts +++ b/plugin-system/src/runtime/DataQueriesProvider/model.ts @@ -11,20 +11,20 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { Definition, QueryDefinition, UnknownSpec, QueryDataType } from '@perses-dev/core'; +import { QueryDefinition, UnknownSpec, QueryDataType } from '@perses-dev/core'; import { QueryObserverOptions, UseQueryResult } from '@tanstack/react-query'; -import { ReactNode, useCallback, useMemo } from 'react'; -import { useListPluginMetadata } from '../plugin-registry'; +import { ReactNode } from 'react'; export type QueryOptions = Record; -export interface DataQueriesProviderProps { - definitions: Array>; +export interface DataQueriesProviderProps { + definitions: Array>; children?: ReactNode; options?: QueryOptions; queryOptions?: Omit; } export interface DataQueriesContextType { + queryDefinitions: QueryDefinition[]; queryResults: QueryData[]; refetchAll: () => void; isFetching: boolean; @@ -57,93 +57,3 @@ export function transformQueryResults(results: UseQueryResult[], definitions: Qu } as QueryData; }); } - -export function useQueryType(): (pluginKind: string) => string | undefined { - const { data: timeSeriesQueryPlugins, isLoading: isTimeSeriesQueryLoading } = useListPluginMetadata([ - 'TimeSeriesQuery', - ]); - const { data: traceQueryPlugins, isLoading: isTraceQueryPluginLoading } = useListPluginMetadata(['TraceQuery']); - const { data: profileQueryPlugins, isLoading: isProfileQueryPluginLoading } = useListPluginMetadata(['ProfileQuery']); - const { data: logQueries, isLoading: isLogQueryPluginLoading } = useListPluginMetadata(['LogQuery']); - - // For example, `map: {"TimeSeriesQuery":["PrometheusTimeSeriesQuery"],"TraceQuery":["TempoTraceQuery"]}` - const queryTypeMap = useMemo(() => { - const map: Record = { - TimeSeriesQuery: [], - TraceQuery: [], - ProfileQuery: [], - LogQuery: [], - }; - - if (timeSeriesQueryPlugins) { - timeSeriesQueryPlugins.forEach((plugin) => { - map[plugin.kind]?.push(plugin.spec.name); - }); - } - - if (traceQueryPlugins) { - traceQueryPlugins.forEach((plugin) => { - map[plugin.kind]?.push(plugin.spec.name); - }); - } - - if (profileQueryPlugins) { - profileQueryPlugins.forEach((plugin) => { - map[plugin.kind]?.push(plugin.spec.name); - }); - } - - if (logQueries) { - logQueries.forEach((plugin) => { - map[plugin.kind]?.push(plugin.spec.name); - }); - } - - return map; - }, [timeSeriesQueryPlugins, traceQueryPlugins, profileQueryPlugins, logQueries]); - - const getQueryType = useCallback( - (pluginKind: string) => { - const isLoading = (pluginKind: string): boolean => { - switch (pluginKind) { - case 'PrometheusTimeSeriesQuery': - return isTimeSeriesQueryLoading; - case 'TempoTraceQuery': - return isTraceQueryPluginLoading; - case 'PyroscopeProfileQuery': - return isProfileQueryPluginLoading; - case 'LokiLogQuery': - return isLogQueryPluginLoading; - } - - return ( - isTraceQueryPluginLoading || - isTimeSeriesQueryLoading || - isProfileQueryPluginLoading || - isLogQueryPluginLoading - ); - }; - - if (isLoading(pluginKind)) { - return undefined; - } - - for (const queryType in queryTypeMap) { - if (queryTypeMap[queryType]?.includes(pluginKind)) { - return queryType; - } - } - - throw new Error(`Unable to determine the query type: ${pluginKind}`); - }, - [ - queryTypeMap, - isTimeSeriesQueryLoading, - isTraceQueryPluginLoading, - isProfileQueryPluginLoading, - isLogQueryPluginLoading, - ] - ); - - return getQueryType; -} diff --git a/plugin-system/src/runtime/QueryCountProvider.tsx b/plugin-system/src/runtime/QueryCountProvider.tsx deleted file mode 100644 index 7769152..0000000 --- a/plugin-system/src/runtime/QueryCountProvider.tsx +++ /dev/null @@ -1,29 +0,0 @@ -// Copyright The Perses Authors -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - -import React, { createContext, useContext, ReactNode } from 'react'; - -interface QueryCountProviderProps { - queryCount: number; - children: ReactNode; -} - -const QueryCountContext = createContext(0); - -export const QueryCountProvider: React.FC = ({ queryCount, children }) => { - return {children}; -}; - -export const useQueryCountContext = (): number => { - return useContext(QueryCountContext); -}; diff --git a/plugin-system/src/runtime/index.ts b/plugin-system/src/runtime/index.ts index 72c8679..f8bdf87 100644 --- a/plugin-system/src/runtime/index.ts +++ b/plugin-system/src/runtime/index.ts @@ -21,6 +21,5 @@ export * from './trace-queries'; export * from './profile-queries'; export * from './item-actions'; export * from './DataQueriesProvider'; -export * from './QueryCountProvider'; export * from './RouterProvider'; export * from './UsageMetricsProvider';