TRACING-5579: Support custom time range

web/src/components/PersesWrapper.tsx

@@ -15,15 +15,15 @@ import {
   PanelProps,
   PluginRegistry,
   RouterProvider,
-  TimeRangeProvider,
+  TimeRangeProviderWithQueryParams,
   useDataQueriesContext,
+  useInitialTimeRange,
 } from '@perses-dev/plugin-system';
 import {
   DatasourceResource,
   Definition,
   DurationString,
   GlobalDatasourceResource,
-  TimeRangeValue,
   TraceData,
   UnknownSpec,
 } from '@perses-dev/core';
@@ -137,23 +137,20 @@ export function PersesWrapper({ children }: PersesWrapperProps) {
 }
 
 interface PersesDashboardWrapperProps {
-  timeRange?: TimeRangeValue;
-  setTimeRange?: (value: TimeRangeValue) => void;
   children?: React.ReactNode;
 }
 
 /**
  * PersesDashboardWrapper initializes the dashboard time range and variable providers.
  */
-export function PersesDashboardWrapper({
-  timeRange = { pastDuration: '0s' },
-  setTimeRange,
-  children,
-}: PersesDashboardWrapperProps) {
+export function PersesDashboardWrapper({ children }: PersesDashboardWrapperProps) {
+  const DEFAULT_DASHBOARD_DURATION = '30m';
+  const initialTimeRange = useInitialTimeRange(DEFAULT_DASHBOARD_DURATION);
+
   return (
-    <TimeRangeProvider timeRange={timeRange} setTimeRange={setTimeRange}>
+    <TimeRangeProviderWithQueryParams initialTimeRange={initialTimeRange}>
       <VariableProvider>{children}</VariableProvider>
-    </TimeRangeProvider>
+    </TimeRangeProviderWithQueryParams>
   );
 }
 

web/src/components/TimeRangeSelect.css

@@ -0,0 +1,4 @@
+.dt-plugin-time-range-select .MuiSelect-select {
+    /** override hardcoded padding https://github.com/perses/perses/blob/601768a329985efeaaf8c43c3ba1b8f7b26cb08c/ui/components/src/TimeRangeSelector/TimeRangeSelector.tsx#L130 */
+    padding: 2px 38px 2px 16px !important;
+}

web/src/components/TimeRangeSelect.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Form, FormGroup } from '@patternfly/react-core';
+import { useTranslation } from 'react-i18next';
+import { TimeRangeControls } from '@perses-dev/plugin-system';
+import './TimeRangeSelect.css';
+
+export const TimeRangeSelect = () => {
+  const { t } = useTranslation('plugin__distributed-tracing-console-plugin');
+
+  return (
+    <Form className="dt-plugin-time-range-select">
+      <FormGroup label={t('Time range')}>
+        <TimeRangeControls
+          showRefreshInterval={false}
+          showRefreshButton={false}
+          showZoomButtons={false}
+        />
+      </FormGroup>
+    </Form>
+  );
+};

web/src/pages/TracesPage/QueryBrowser.tsx

@@ -1,53 +1,24 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { Divider, PageSection, Split, SplitItem, Stack, Title } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
-import {
-  DEFAULT_DURATION,
-  DurationDropdown,
-  DurationValues,
-} from '../../components/DurationDropdown';
+import { TimeRangeSelect } from '../../components/TimeRangeSelect';
 import { ScatterPlot } from './ScatterPlot';
 import { TraceTable } from './TraceTable';
 import {
   PersesDashboardWrapper,
   PersesTempoDatasourceWrapper,
   PersesWrapper,
 } from '../../components/PersesWrapper';
-import { DurationString, RelativeTimeRange, TimeRangeValue } from '@perses-dev/core';
-import {
-  createEnumParam,
-  NumberParam,
-  StringParam,
-  useQueryParam,
-  withDefault,
-} from 'use-query-params';
+import { NumberParam, StringParam, useQueryParam, withDefault } from 'use-query-params';
 import { useTempoInstance } from '../../hooks/useTempoInstance';
 import { useTimeRange } from '@perses-dev/plugin-system';
 import { FilterToolbar } from './Toolbar/FilterToolbar';
 import { DEFAULT_LIMIT, LimitSelect } from './LimitSelect';
 
-const durationQueryParam = withDefault(createEnumParam(DurationValues), DEFAULT_DURATION);
-
 export function QueryBrowser() {
-  const [duration, setDuration] = useQueryParam('duration', durationQueryParam, {
-    updateType: 'replaceIn',
-  });
-  const timeRange = useMemo(() => {
-    return { pastDuration: duration as DurationString };
-  }, [duration]);
-  const setTimeRange = useCallback(
-    (value: TimeRangeValue) => {
-      const pastDuration = (value as RelativeTimeRange).pastDuration;
-      if (pastDuration) {
-        setDuration(pastDuration);
-      }
-    },
-    [setDuration],
-  );
-
   return (
     <PersesWrapper>
-      <PersesDashboardWrapper timeRange={timeRange} setTimeRange={setTimeRange}>
+      <PersesDashboardWrapper>
         <QueryBrowserBody />
       </PersesDashboardWrapper>
     </PersesWrapper>
@@ -59,7 +30,7 @@ export function QueryBrowserBody() {
   const [tempo, setTempo] = useTempoInstance();
   const [query, setQuery] = useQueryParam('q', withDefault(StringParam, '{}'));
   const [limit, setLimit] = useQueryParam('limit', withDefault(NumberParam, DEFAULT_LIMIT));
-  const { timeRange, setTimeRange, refresh } = useTimeRange();
+  const { refresh } = useTimeRange();
 
   // Refresh query if Tempo instance or tenant changes.
   // The Perses data source is selected via a mock DatasourceApiImpl implementation in <PersesWrapper>,
@@ -83,10 +54,7 @@ export function QueryBrowserBody() {
           <SplitItem isFilled>
             <Title headingLevel="h1">{t('Traces')}</Title>
           </SplitItem>
-          <DurationDropdown
-            duration={(timeRange as RelativeTimeRange).pastDuration}
-            setDuration={(value) => setTimeRange({ pastDuration: value })}
-          />
+          <TimeRangeSelect />
           <LimitSelect limit={limit} setLimit={setLimit} />
         </Split>
         <Divider className="pf-v6-u-mt-md" />