This is an automated email from the ASF dual-hosted git repository. vogievetsky pushed a commit to branch segment_timeline2 in repository https://gitbox.apache.org/repos/asf/druid.git
commit 2036585da68bbc74a48cea8c81e6e81c2c8b221b Author: Vadim Ogievetsky <[email protected]> AuthorDate: Tue Nov 5 15:33:50 2024 -0800 init datasource --- .../segment-timeline/segment-bar-chart-render.tsx | 2 +- .../segment-timeline/segment-timeline.spec.tsx | 4 +++- .../segment-timeline/segment-timeline.tsx | 27 +++++++++++++++------- .../views/datasources-view/datasources-view.tsx | 17 ++++++++++---- .../src/views/segments-view/segments-view.tsx | 4 +++- 5 files changed, 38 insertions(+), 16 deletions(-) diff --git a/web-console/src/components/segment-timeline/segment-bar-chart-render.tsx b/web-console/src/components/segment-timeline/segment-bar-chart-render.tsx index fc5cfd9ccd6..054e06a1725 100644 --- a/web-console/src/components/segment-timeline/segment-bar-chart-render.tsx +++ b/web-console/src/components/segment-timeline/segment-bar-chart-render.tsx @@ -365,10 +365,10 @@ export const SegmentBarChartRender = function SegmentBarChartRender( y: rect.y + CHART_MARGIN.top - 10, text: ( <> - <div>Datasource: {hoveredIntervalBar.datasource}</div> <div>{`${prettyFormatIsoDate(hoveredIntervalBar.start)}/${ hoveredIntervalBar.originalTimeSpan }${hoveredIntervalBar.realtime ? ' (realtime)' : ''}`}</div> + <div>Datasource: {hoveredIntervalBar.datasource}</div> <div>{`Size: ${ hoveredIntervalBar.realtime ? 'estimated for realtime' diff --git a/web-console/src/components/segment-timeline/segment-timeline.spec.tsx b/web-console/src/components/segment-timeline/segment-timeline.spec.tsx index f247f98794a..966e3113153 100644 --- a/web-console/src/components/segment-timeline/segment-timeline.spec.tsx +++ b/web-console/src/components/segment-timeline/segment-timeline.spec.tsx @@ -24,7 +24,9 @@ import { SegmentTimeline } from './segment-timeline'; describe('SegmentTimeline', () => { it('matches snapshot', () => { - const segmentTimeline = <SegmentTimeline capabilities={Capabilities.FULL} />; + const segmentTimeline = ( + <SegmentTimeline capabilities={Capabilities.FULL} initDatasource={undefined} /> + ); const { container } = render(segmentTimeline); expect(container.firstChild).toMatchSnapshot(); }); diff --git a/web-console/src/components/segment-timeline/segment-timeline.tsx b/web-console/src/components/segment-timeline/segment-timeline.tsx index dd79f07f0dd..75964a70205 100644 --- a/web-console/src/components/segment-timeline/segment-timeline.tsx +++ b/web-console/src/components/segment-timeline/segment-timeline.tsx @@ -55,6 +55,7 @@ import './segment-timeline.scss'; interface SegmentTimelineProps { capabilities: Capabilities; + initDatasource: string | undefined; } const DEFAULT_SHOWN_DURATION = new Duration('P3M'); @@ -74,10 +75,10 @@ function getDateRange(shownDuration: Duration): NonNullDateRange { } export const SegmentTimeline = function SegmentTimeline(props: SegmentTimelineProps) { - const { capabilities } = props; + const { capabilities, initDatasource } = props; const [stage, setStage] = useState<Stage | undefined>(); const [activeSegmentStat, setActiveSegmentStat] = useState<IntervalStat>('size'); - const [shownDatasource, setShownDatasource] = useState<string | undefined>(); + const [shownDatasource, setShownDatasource] = useState<string | undefined>(initDatasource); const [dateRange, setDateRange] = useState<NonNullDateRange>( getDateRange(DEFAULT_SHOWN_DURATION), ); @@ -107,6 +108,7 @@ export const SegmentTimeline = function SegmentTimeline(props: SegmentTimelinePr <ButtonGroup> <Button icon={IconNames.CARET_LEFT} + data-tooltip="Previous time period" small onClick={() => { const d = Duration.fromRange(dateRange[0], dateRange[1], TZ_UTC); @@ -115,14 +117,19 @@ export const SegmentTimeline = function SegmentTimeline(props: SegmentTimelinePr /> <Button icon={IconNames.ZOOM_OUT} + data-tooltip="Zoom out" small - onClick={() => { + onClick={e => { const d = Duration.fromRange(dateRange[0], dateRange[1], TZ_UTC); - setDateRange([d.shift(dateRange[0], TZ_UTC, -1), dateRange[1]]); + setDateRange([ + d.shift(dateRange[0], TZ_UTC, -1), + e.altKey ? d.shift(dateRange[1], TZ_UTC, 1) : dateRange[1], + ]); }} /> <Button icon={IconNames.CARET_RIGHT} + data-tooltip="Next time period" small onClick={() => { const d = Duration.fromRange(dateRange[0], dateRange[1], TZ_UTC); @@ -162,9 +169,13 @@ export const SegmentTimeline = function SegmentTimeline(props: SegmentTimelinePr <Button icon={IconNames.CALENDAR} small - data-tooltip={`Select a custom date range\nCurrent range: ${prettyFormatIsoDate( - dateRange[0], - )} - ${prettyFormatIsoDate(dateRange[1])}`} + data-tooltip={ + showCustomDatePicker + ? undefined + : `Select a custom date range\nCurrent range: ${prettyFormatIsoDate( + dateRange[0], + )} - ${prettyFormatIsoDate(dateRange[1])}` + } /> </Popover> </ButtonGroup> @@ -184,7 +195,7 @@ export const SegmentTimeline = function SegmentTimeline(props: SegmentTimelinePr } > <Button - text={`Stat: ${getIntervalStatTitle(activeSegmentStat)}`} + text={`Show: ${getIntervalStatTitle(activeSegmentStat)}`} small rightIcon={IconNames.CARET_DOWN} /> diff --git a/web-console/src/views/datasources-view/datasources-view.tsx b/web-console/src/views/datasources-view/datasources-view.tsx index bfa2262dad1..de30832ce39 100644 --- a/web-console/src/views/datasources-view/datasources-view.tsx +++ b/web-console/src/views/datasources-view/datasources-view.tsx @@ -324,7 +324,7 @@ export interface DatasourcesViewState { useUnuseInterval: string; showForceCompact: boolean; visibleColumns: LocalStorageBackedVisibility; - showSegmentTimeline: boolean; + showSegmentTimeline?: { datasource?: string }; datasourceTableActionDialogId?: string; actions: BasicAction[]; @@ -425,7 +425,7 @@ GROUP BY 1, 2`; LocalStorageKeys.DATASOURCE_TABLE_COLUMN_SELECTION, ['Segment size', 'Segment granularity'], ), - showSegmentTimeline: true, + showSegmentTimeline: {}, // ToDo: remove actions: [], }; @@ -1709,9 +1709,11 @@ GROUP BY 1, 2`; disabled={!capabilities.hasCoordinatorAccess()} /> <Switch - checked={showSegmentTimeline} + checked={Boolean(showSegmentTimeline)} label="Show segment timeline" - onChange={() => this.setState({ showSegmentTimeline: !showSegmentTimeline })} + onChange={() => + this.setState({ showSegmentTimeline: showSegmentTimeline ? undefined : {} }) + } disabled={!capabilities.hasSqlOrCoordinatorAccess()} /> <TableColumnSelector @@ -1737,7 +1739,12 @@ GROUP BY 1, 2`; primaryMinSize={20} secondaryMinSize={10} > - {showSegmentTimeline && <SegmentTimeline capabilities={capabilities} />} + {showSegmentTimeline && ( + <SegmentTimeline + capabilities={capabilities} + initDatasource={showSegmentTimeline.datasource} + /> + )} {this.renderDatasourcesTable()} </SplitterLayout> {datasourceTableActionDialogId && ( diff --git a/web-console/src/views/segments-view/segments-view.tsx b/web-console/src/views/segments-view/segments-view.tsx index af93f65b8fb..98e8fa44bb0 100644 --- a/web-console/src/views/segments-view/segments-view.tsx +++ b/web-console/src/views/segments-view/segments-view.tsx @@ -1053,7 +1053,9 @@ export class SegmentsView extends React.PureComponent<SegmentsViewProps, Segment primaryMinSize={20} secondaryMinSize={10} > - {showSegmentTimeline && <SegmentTimeline capabilities={capabilities} />} + {showSegmentTimeline && ( + <SegmentTimeline capabilities={capabilities} initDatasource={undefined} /> + )} {this.renderSegmentsTable()} </SplitterLayout> {this.renderTerminateSegmentAction()} --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
