[BUGFIX] pyroscope: fix timerange

pyroscope/schemas/pyroscope-profile-query/query.cue

@@ -14,14 +14,15 @@
 package model
 
 import (
+	"strings"
 	ds "github.com/perses/plugins/pyroscope/schemas/datasource:model"
 )
 
 kind: "PyroscopeProfileQuery"
 spec: close({
 	ds.#selector
 	maxNodes?:   number
-	profileType: string
+	profileType: strings.MinRunes(1)
 	filters?: [...{
 		labelName:  string
 		labelValue: string

pyroscope/src/components/Service.tsx

@@ -22,9 +22,7 @@ export interface ServiceProps {
   onChange?(value: string): void;
 }
 
-export function Service(props: ServiceProps): ReactElement {
-  const { datasource, value, onChange } = props;
-
+export function Service({ datasource, value, onChange }: ServiceProps): ReactElement {
   const { data: servicesOptions, isLoading: isServicesOptionsLoading } = useServices(datasource);
 
   function handleServiceChange(_event: SyntheticEvent, newValue: string | null): void {

pyroscope/src/explore/PyroscopeExplorer.tsx

@@ -11,12 +11,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Box, Stack } from '@mui/material';
+import { Alert, Box, Stack } from '@mui/material';
 import { ReactElement, useState } from 'react';
 import { DataQueriesProvider, MultiQueryEditor } from '@perses-dev/plugin-system';
 import { Panel } from '@perses-dev/dashboards';
 import { useExplorerManagerContext } from '@perses-dev/explore';
 import { QueryDefinition } from '@perses-dev/spec';
+import { isProfileQueryComplete, PyroscopeProfileQuerySpec } from '../model';
 
 interface ProfilesExplorerQueryParams {
   queries?: QueryDefinition[];
@@ -53,6 +54,11 @@ export function PyroscopeExplorer(): ReactElement {
 
   const [queryDefinitions, setQueryDefinitions] = useState<QueryDefinition[]>(queries);
 
+  // A profile query is only executable once a service and a profile type are selected.
+  const hasIncompleteQuery = queries.some(
+    (query) => !isProfileQueryComplete((query.spec?.plugin?.spec ?? {}) as Partial<PyroscopeProfileQuerySpec>)
+  );
+
   return (
     <Stack gap={2} sx={{ width: '100%' }}>
       <MultiQueryEditor
@@ -61,11 +67,17 @@ export function PyroscopeExplorer(): ReactElement {
         queries={queryDefinitions}
         onQueryRun={() => setData({ queries: queryDefinitions })}
       />
-      <DataQueriesProvider definitions={queries}>
-        <Box height={980}>
-          <FlameGraphPanel queries={queries} />
-        </Box>
-      </DataQueriesProvider>
+      {hasIncompleteQuery ? (
+        <Alert severity="warning">
+          The query is not complete. Please select a service and a profile type to run the query.
+        </Alert>
+      ) : (
+        <DataQueriesProvider definitions={queries}>
+          <Box height={980}>
+            <FlameGraphPanel queries={queries} />
+          </Box>
+        </DataQueriesProvider>
+      )}
     </Stack>
   );
 }

pyroscope/src/model/profile-query-model.ts

@@ -23,3 +23,13 @@ export interface PyroscopeProfileQuerySpec {
   filters?: LabelFilter[];
   service?: string;
 }
+
+/**
+ * A Pyroscope profile query needs at least a service and a profile type to be executable.
+ * When either is missing, the query is considered incomplete and should not be run.
+ */
+export function isProfileQueryComplete(
+  spec: Partial<Pick<PyroscopeProfileQuerySpec, 'service' | 'profileType'>>
+): boolean {
+  return !!spec.service && !!spec.profileType;
+}

pyroscope/src/plugins/pyroscope-profile-query/PyroscopeProfileQueryEditor.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { DatasourceSelect, DatasourceSelectProps } from '@perses-dev/plugin-system';
+import { DatasourceSelect, DatasourceSelectProps, useDatasourceSelectValueToSelector } from '@perses-dev/plugin-system';
 import { useId } from '@perses-dev/components';
 import { produce } from 'immer';
 import { FormControl, InputLabel, Stack, TextField, useTheme } from '@mui/material';
@@ -21,6 +21,7 @@ import {
   isDefaultPyroscopeSelector,
   isPyroscopeDatasourceSelector,
   PYROSCOPE_DATASOURCE_KIND,
+  PyroscopeDatasourceSelector,
 } from '../../model';
 import { ProfileTypeSelector, Service, Filters } from '../../components';
 import {
@@ -34,7 +35,11 @@ import {
 export function PyroscopeProfileQueryEditor(props: ProfileQueryEditorProps): ReactElement {
   const { onChange, value } = props;
   const { datasource } = value;
-  const selectedDatasource = datasource ?? DEFAULT_PYROSCOPE;
+  const datasourceSelectValue = datasource ?? DEFAULT_PYROSCOPE;
+  const selectedDatasource = useDatasourceSelectValueToSelector(
+    datasourceSelectValue,
+    PYROSCOPE_DATASOURCE_KIND
+  ) as PyroscopeDatasourceSelector;
   const datasourceSelectLabelID = useId('pyroscope-datasource-label');
 
   const { maxNodes, handleMaxNodesChange, maxNodesHasError } = useMaxNodesState(props);
@@ -67,7 +72,7 @@ export function PyroscopeProfileQueryEditor(props: ProfileQueryEditorProps): Rea
         </InputLabel>
         <DatasourceSelect
           datasourcePluginKind={PYROSCOPE_DATASOURCE_KIND}
-          value={selectedDatasource}
+          value={datasourceSelectValue}
           onChange={handleDatasourceChange}
           labelId={datasourceSelectLabelID}
           label="Pyroscope Datasource"

pyroscope/src/plugins/pyroscope-profile-query/get-profile-data.ts

@@ -14,9 +14,14 @@
 import { ProfileQueryPlugin } from '@perses-dev/plugin-system';
 import { getUnixTime } from 'date-fns';
 import { AbsoluteTimeRange, ProfileData, StackTrace } from '@perses-dev/spec';
-import { PyroscopeProfileQuerySpec, PYROSCOPE_DATASOURCE_KIND, PyroscopeDatasourceSelector } from '../../model';
-import { PyroscopeClient } from '../../model/pyroscope-client';
-import { SearchProfilesParameters, SearchProfilesResponse } from '../../model/api-types';
+import {
+  PyroscopeProfileQuerySpec,
+  PYROSCOPE_DATASOURCE_KIND,
+  PyroscopeDatasourceSelector,
+  PyroscopeClient,
+  SearchProfilesParameters,
+  SearchProfilesResponse,
+} from '../../model';
 import { computeFilterExpr } from '../../utils/types';
 
 export function getUnixTimeRange(timeRange: AbsoluteTimeRange): { start: number; end: number } {

pyroscope/src/utils/use-query.ts

@@ -24,14 +24,23 @@ import {
 } from '../model';
 import { getUnixTimeRange } from '../plugins';
 
+// Pyroscope need timestamp in milliseconds, but the time range from Perses is in seconds.
+const MILLISECONDS = 1_000;
+
 export function useLabelNames(datasource: DatasourceSelector): UseQueryResult<SearchLabelNamesResponse, StatusError> {
   const { data: client } = useDatasourceClient<PyroscopeClient>(datasource);
+  const { absoluteTimeRange } = useTimeRange();
+  const { start, end } = getUnixTimeRange(absoluteTimeRange);
 
   return useQuery<SearchLabelNamesResponse, StatusError>({
     enabled: !!client,
-    queryKey: ['searchLabelNames', 'datasource', datasource],
+    queryKey: ['searchLabelNames', client],
     queryFn: async () => {
-      return await client!.searchLabelNames({}, { 'content-type': 'application/json' }, {});
+      return await client!.searchLabelNames(
+        {},
+        { 'content-type': 'application/json' },
+        { start: start * MILLISECONDS, end: end * MILLISECONDS }
+      );
     },
   });
 }
@@ -46,12 +55,12 @@ export function useLabelValues(
 
   return useQuery<SearchLabelValuesResponse, StatusError>({
     enabled: !!client,
-    queryKey: ['searchLabelValues', labelName, 'datasource', datasource],
+    queryKey: ['searchLabelValues', labelName, client],
     queryFn: async () => {
       return await client!.searchLabelValues(
         {},
         { 'content-type': 'application/json' },
-        { name: labelName, from: start, until: end }
+        { name: labelName, start: start * MILLISECONDS, end: end * MILLISECONDS }
       );
     },
   });
@@ -66,9 +75,13 @@ export function useProfileTypes(
 
   return useQuery<SearchProfileTypesResponse, StatusError>({
     enabled: !!client,
-    queryKey: ['searchProfileTypes', 'datasource', datasource],
+    queryKey: ['searchProfileTypes', client],
     queryFn: async () => {
-      return await client!.searchProfileTypes({}, { 'content-type': 'application/json' }, { from: start, until: end });
+      return await client!.searchProfileTypes(
+        {},
+        { 'content-type': 'application/json' },
+        { start: start * MILLISECONDS, end: end * MILLISECONDS }
+      );
     },
   });
 }
@@ -80,9 +93,13 @@ export function useServices(datasource: DatasourceSelector): UseQueryResult<Sear
 
   return useQuery<SearchLabelValuesResponse, StatusError>({
     enabled: !!client,
-    queryKey: ['searchServices', 'datasource', datasource],
+    queryKey: ['searchServices', client],
     queryFn: async () => {
-      return await client!.searchServices({}, { 'content-type': 'application/json' }, { from: start, until: end });
+      return await client!.searchServices(
+        {},
+        { 'content-type': 'application/json' },
+        { start: start * MILLISECONDS, end: end * MILLISECONDS }
+      );
     },
   });
 }