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 020d7ac5477ea9362c9b438b53405b40b2f92b12 Author: Vadim Ogievetsky <[email protected]> AuthorDate: Tue Nov 12 12:21:35 2024 -0800 fixes --- .../segment-timeline/segment-bar-chart-render.scss | 24 ++++++++++ .../segment-timeline/segment-bar-chart-render.tsx | 36 ++++----------- .../segment-timeline/segment-timeline.tsx | 53 ++++++++++++++-------- web-console/src/utils/date.ts | 8 ++++ 4 files changed, 76 insertions(+), 45 deletions(-) diff --git a/web-console/src/components/segment-timeline/segment-bar-chart-render.scss b/web-console/src/components/segment-timeline/segment-bar-chart-render.scss index de13ad4c123..576cf54e146 100644 --- a/web-console/src/components/segment-timeline/segment-bar-chart-render.scss +++ b/web-console/src/components/segment-timeline/segment-bar-chart-render.scss @@ -111,6 +111,30 @@ top: 0; height: 100%; text-overflow: ellipsis; + + &.load { + background-color: $green1; + + &:nth-child(even) { + background-color: $green3; + } + } + + &.drop { + background-color: $dark-gray5; + + &:nth-child(even) { + background-color: $gray1; + } + } + + &.broadcast { + background-color: $indigo1; + + &:nth-child(even) { + background-color: $indigo3; + } + } } } 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 a397c619101..6dcadc9b629 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 @@ -66,27 +66,9 @@ const EXTEND_X_SCALE_DOMAIN_BY = 1; // --------------------------------------- // Load rule stuff -function loadRuleToColors(loadRule: Rule): string[] { - switch (loadRule.type) { - case 'loadForever': - case 'loadByInterval': - case 'loadByPeriod': - return ['#188718', '#095c09']; - - case 'dropForever': - case 'dropByInterval': - case 'dropByPeriod': - case 'dropBeforeByPeriod': - return ['#485348', '#3b4a3b']; - - case 'broadcastForever': - case 'broadcastByInterval': - case 'broadcastByPeriod': - return ['#4e2edc', '#35237c']; - - default: - return ['#000']; - } +function loadRuleToBaseType(loadRule: Rule): string { + const m = /^(load|drop|broadcast)/.exec(loadRule.type); + return m ? m[1] : 'load'; } const NEGATIVE_INFINITY_DATE = new Date(Date.UTC(1000, 0, 1)); @@ -431,9 +413,11 @@ export const SegmentBarChartRender = function SegmentBarChartRender( y: rect.y + CHART_MARGIN.top - 10, text: ( <> - <div>{`${prettyFormatIsoDate(hoveredIntervalBar.start)}/${ - hoveredIntervalBar.originalTimeSpan - }${hoveredIntervalBar.realtime ? ' (realtime)' : ''}`}</div> + <div>{`${prettyFormatIsoDate(hoveredIntervalBar.start) + .replace(/:00:00$/, '') + .replace(/ 00$/, '')}/${hoveredIntervalBar.originalTimeSpan}${ + hoveredIntervalBar.realtime ? ' (realtime)' : '' + }`}</div> <div>Datasource: {hoveredIntervalBar.datasource}</div> <div>{`Size: ${ hoveredIntervalBar.realtime @@ -450,17 +434,15 @@ export const SegmentBarChartRender = function SegmentBarChartRender( function renderLoadRule(loadRule: Rule, i: number, isDefault: boolean) { const [start, end] = loadRuleToDateRange(loadRule); const { x, width } = startEndToXWidth({ start, end }); - const colors = loadRuleToColors(loadRule); const title = RuleUtil.ruleToString(loadRule) + (isDefault ? ' (cluster default)' : ''); return ( <div key={i} - className="load-rule" + className={classNames('load-rule', loadRuleToBaseType(loadRule))} data-tooltip={title} style={{ left: x + CHART_MARGIN.left, width, - backgroundColor: colors[i % colors.length], }} > {title} diff --git a/web-console/src/components/segment-timeline/segment-timeline.tsx b/web-console/src/components/segment-timeline/segment-timeline.tsx index 065e8e5a5ae..44d84cdc7d6 100644 --- a/web-console/src/components/segment-timeline/segment-timeline.tsx +++ b/web-console/src/components/segment-timeline/segment-timeline.tsx @@ -42,6 +42,7 @@ import { getApiArray, isNonNullRange, localToUtcDateRange, + maxDate, queryDruidSql, TZ_UTC, utcToLocalDateRange, @@ -60,7 +61,7 @@ interface SegmentTimelineProps { datasource: string | undefined; } -const DEFAULT_SHOWN_DURATION = new Duration('P3M'); +const DEFAULT_SHOWN_DURATION = new Duration('P1Y'); const SHOWN_DURATION_OPTIONS: Duration[] = [ new Duration('P1D'), new Duration('P1W'), @@ -118,9 +119,11 @@ export const SegmentTimeline = function SegmentTimeline(props: SegmentTimelinePr }, }); - const [initDatasourceDateRangeState] = useQueryManager<string, NonNullDateRange>({ - query: dateRange ? undefined : shownDatasource, + const [initDatasourceDateRangeState] = useQueryManager<string | null, NonNullDateRange>({ + query: dateRange ? undefined : shownDatasource ?? null, processQuery: async (datasource, cancelToken) => { + let queriedStart: Date; + let queriedEnd: Date; if (capabilities.hasSql()) { const baseQuery = SqlQuery.from(N('sys').table('segments')) .changeWhereExpression( @@ -128,37 +131,41 @@ export const SegmentTimeline = function SegmentTimeline(props: SegmentTimelinePr C('start').unequal(START_OF_TIME_DATE), C('end').unequal(END_OF_TIME_DATE), C('is_overshadowed').equal(0), - C('datasource').equal(L(datasource)), + datasource ? C('datasource').equal(L(datasource)) : undefined, ), ) .changeLimitValue(1); - const startQuery = baseQuery - .addSelect(C('start'), { addToOrderBy: 'end', direction: 'ASC' }) + const endQuery = baseQuery + .addSelect(C('end'), { addToOrderBy: 'end', direction: 'DESC' }) .toString(); - const startRes = await queryDruidSql<{ start: string }>({ query: startQuery }, cancelToken); - if (startRes.length !== 1) { + const endRes = await queryDruidSql<{ end: string }>({ query: endQuery }, cancelToken); + if (endRes.length !== 1) { return getDateRange(DEFAULT_SHOWN_DURATION); } - const start = day.floor(new Date(startRes[0].start), TZ_UTC); + queriedEnd = day.ceil(new Date(endRes[0].end), TZ_UTC); - const endQuery = baseQuery - .addSelect(C('end'), { addToOrderBy: 'end', direction: 'DESC' }) + const startQuery = baseQuery + .addSelect(C('start'), { addToOrderBy: 'end', direction: 'ASC' }) .toString(); - const endRes = await queryDruidSql<{ end: string }>({ query: endQuery }, cancelToken); - if (endRes.length !== 1) { - return [start, day.ceil(new Date(), TZ_UTC)]; // Should not really get here + const startRes = await queryDruidSql<{ start: string }>({ query: startQuery }, cancelToken); + if (startRes.length !== 1) { + return [DEFAULT_SHOWN_DURATION.shift(queriedEnd, TZ_UTC, -1), queriedEnd]; // Should not really get here } - const end = day.ceil(new Date(endRes[0].end), TZ_UTC); - return [start, end]; + queriedStart = day.floor(new Date(startRes[0].start), TZ_UTC); } else { // ToDo: fill me throw new Error('fill me'); } + + return [ + maxDate(queriedStart, DEFAULT_SHOWN_DURATION.shift(queriedEnd, TZ_UTC, -1)), + queriedEnd, + ]; }, }); @@ -277,8 +284,8 @@ export const SegmentTimeline = function SegmentTimeline(props: SegmentTimelinePr <Button key={i} text={d.toString().replace('P', '')} - active={effectiveDateRange && dateRangesEqual(effectiveDateRange, dr)} data-tooltip={`Show last ${d.getDescription()}\n${formatDateRange(dr)}`} + active={effectiveDateRange && dateRangesEqual(effectiveDateRange, dr)} small onClick={() => setDateRange(dr)} /> @@ -312,10 +319,20 @@ export const SegmentTimeline = function SegmentTimeline(props: SegmentTimelinePr ? formatDateRange(effectiveDateRange) : `Loading datasource date range` } - small data-tooltip={showCustomDatePicker ? undefined : `Select a custom date range`} + small /> </Popover> + <Button + icon={IconNames.PIN} + data-tooltip={ + dateRange ? 'Pin the date range' : 'Auto determine date range to fit datasource' + } + active={Boolean(dateRange)} + disabled={!effectiveDateRange} + small + onClick={() => setDateRange(dateRange ? undefined : effectiveDateRange)} + /> </ButtonGroup> </div> <ResizeSensor diff --git a/web-console/src/utils/date.ts b/web-console/src/utils/date.ts index e59c01a74df..08f1d1df43b 100644 --- a/web-console/src/utils/date.ts +++ b/web-console/src/utils/date.ts @@ -98,3 +98,11 @@ export function localDateRangeToInterval(localRange: DateRange): string { localEndDate ? localToUtcDate(localEndDate).toISOString().slice(0, 19) : '' }`; } + +export function maxDate(a: Date, b: Date): Date { + return a > b ? a : b; +} + +export function minDate(a: Date, b: Date): Date { + return a < b ? a : b; +} --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
