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 06562491fda88a56d65c2146b9f2a4b8cf3cdc7b Author: Vadim Ogievetsky <[email protected]> AuthorDate: Fri Nov 8 11:51:31 2024 -0800 misc fixes --- web-console/src/components/auto-form/auto-form.tsx | 1 - .../src/components/rule-editor/rule-editor.scss | 4 ++ .../src/components/rule-editor/rule-editor.tsx | 2 +- .../segment-timeline/segment-bar-chart-render.scss | 1 + .../segment-timeline/segment-bar-chart-render.tsx | 2 +- .../segment-timeline/segment-timeline.tsx | 55 +++++++++++----------- .../table-clickable-cell/table-clickable-cell.tsx | 5 +- .../views/datasources-view/datasources-view.tsx | 18 +++++-- .../src/views/lookups-view/lookups-view.tsx | 1 + .../src/views/segments-view/segments-view.tsx | 6 +++ .../views/supervisors-view/supervisors-view.tsx | 5 +- web-console/src/views/tasks-view/tasks-view.tsx | 1 + .../execution-stages-pane.tsx | 2 +- 13 files changed, 63 insertions(+), 40 deletions(-) diff --git a/web-console/src/components/auto-form/auto-form.tsx b/web-console/src/components/auto-form/auto-form.tsx index 4c51d2cbf5a..7026ca5d5dc 100644 --- a/web-console/src/components/auto-form/auto-form.tsx +++ b/web-console/src/components/auto-form/auto-form.tsx @@ -539,7 +539,6 @@ export class AutoForm<T extends Record<string, any>> extends React.PureComponent text={showMore ? 'Show less' : 'Show more'} rightIcon={showMore ? IconNames.CHEVRON_UP : IconNames.CHEVRON_DOWN} minimal - fill onClick={() => { this.setState(({ showMore }) => ({ showMore: !showMore })); }} diff --git a/web-console/src/components/rule-editor/rule-editor.scss b/web-console/src/components/rule-editor/rule-editor.scss index e5757bc2999..cb021e85c01 100644 --- a/web-console/src/components/rule-editor/rule-editor.scss +++ b/web-console/src/components/rule-editor/rule-editor.scss @@ -28,4 +28,8 @@ .include-future { margin-left: 15px; } + + .rule-detail { + border: 1px solid rgba(255, 255, 255, 0.15); + } } diff --git a/web-console/src/components/rule-editor/rule-editor.tsx b/web-console/src/components/rule-editor/rule-editor.tsx index 0181e4341ba..8cea5321cfd 100644 --- a/web-console/src/components/rule-editor/rule-editor.tsx +++ b/web-console/src/components/rule-editor/rule-editor.tsx @@ -170,7 +170,7 @@ export const RuleEditor = React.memo(function RuleEditor(props: RuleEditorProps) </div> <Collapse isOpen={isOpen}> - <Card elevation={2}> + <Card className="rule-detail" elevation={2}> <FormGroup> <ControlGroup> <HTMLSelect 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 7667dc5b1f3..75da5e4e666 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 @@ -109,6 +109,7 @@ padding-left: 2px; top: 0; height: 100%; + text-overflow: ellipsis; } } 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 7bdef7e2db2..7ba310048c0 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 @@ -458,7 +458,7 @@ export const SegmentBarChartRender = function SegmentBarChartRender( backgroundColor: colors[i % colors.length], }} > - {width > 90 ? title : undefined} + {title} </div> ); } diff --git a/web-console/src/components/segment-timeline/segment-timeline.tsx b/web-console/src/components/segment-timeline/segment-timeline.tsx index d4294750a7b..065e8e5a5ae 100644 --- a/web-console/src/components/segment-timeline/segment-timeline.tsx +++ b/web-console/src/components/segment-timeline/segment-timeline.tsx @@ -245,7 +245,31 @@ export const SegmentTimeline = function SegmentTimeline(props: SegmentTimelinePr /> </Popover> <div className="expander" /> - + <ButtonGroup> + <Button + icon={IconNames.CARET_LEFT} + data-tooltip={ + previousDateRange && `Previous time period\n${formatDateRange(previousDateRange)}` + } + small + disabled={!previousDateRange} + onClick={() => setDateRange(previousDateRange)} + /> + <Button + icon={IconNames.ZOOM_OUT} + data-tooltip={zoomedOutDateRange && `Zoom out\n${formatDateRange(zoomedOutDateRange)}`} + small + disabled={!zoomedOutDateRange} + onClick={() => setDateRange(zoomedOutDateRange)} + /> + <Button + icon={IconNames.CARET_RIGHT} + data-tooltip={nextDateRange && `Next time period\n${formatDateRange(nextDateRange)}`} + small + disabled={!nextDateRange} + onClick={() => setDateRange(nextDateRange)} + /> + </ButtonGroup> <ButtonGroup> {SHOWN_DURATION_OPTIONS.map((d, i) => { const dr = getDateRange(d); @@ -284,38 +308,15 @@ export const SegmentTimeline = function SegmentTimeline(props: SegmentTimelinePr <Button icon={IconNames.CALENDAR} text={ - effectiveDateRange ? formatDateRange(effectiveDateRange) : '????-??-?? → ????-??-??' + effectiveDateRange + ? formatDateRange(effectiveDateRange) + : `Loading datasource date range` } small data-tooltip={showCustomDatePicker ? undefined : `Select a custom date range`} /> </Popover> </ButtonGroup> - <ButtonGroup> - <Button - icon={IconNames.CARET_LEFT} - data-tooltip={ - previousDateRange && `Previous time period\n${formatDateRange(previousDateRange)}` - } - small - disabled={!previousDateRange} - onClick={() => setDateRange(previousDateRange)} - /> - <Button - icon={IconNames.ZOOM_OUT} - data-tooltip={zoomedOutDateRange && `Zoom out\n${formatDateRange(zoomedOutDateRange)}`} - small - disabled={!zoomedOutDateRange} - onClick={() => setDateRange(zoomedOutDateRange)} - /> - <Button - icon={IconNames.CARET_RIGHT} - data-tooltip={nextDateRange && `Next time period\n${formatDateRange(nextDateRange)}`} - small - disabled={!nextDateRange} - onClick={() => setDateRange(nextDateRange)} - /> - </ButtonGroup> </div> <ResizeSensor onResize={(entries: ResizeObserverEntry[]) => { diff --git a/web-console/src/components/table-clickable-cell/table-clickable-cell.tsx b/web-console/src/components/table-clickable-cell/table-clickable-cell.tsx index aec706a50fc..38c69e297e0 100644 --- a/web-console/src/components/table-clickable-cell/table-clickable-cell.tsx +++ b/web-console/src/components/table-clickable-cell/table-clickable-cell.tsx @@ -28,7 +28,7 @@ export interface TableClickableCellProps { className?: string; onClick: MouseEventHandler<any>; hoverIcon?: IconName; - title?: string; + tooltip?: string; disabled?: boolean; children?: ReactNode; } @@ -36,12 +36,13 @@ export interface TableClickableCellProps { export const TableClickableCell = React.memo(function TableClickableCell( props: TableClickableCellProps, ) { - const { className, onClick, hoverIcon, disabled, children, ...rest } = props; + const { className, onClick, hoverIcon, disabled, children, tooltip, ...rest } = props; return ( <div className={classNames('table-clickable-cell', className, { disabled })} onClick={disabled ? undefined : onClick} + data-tooltip={tooltip} {...rest} > {children} diff --git a/web-console/src/views/datasources-view/datasources-view.tsx b/web-console/src/views/datasources-view/datasources-view.tsx index 30f17061d4f..9891368e585 100644 --- a/web-console/src/views/datasources-view/datasources-view.tsx +++ b/web-console/src/views/datasources-view/datasources-view.tsx @@ -245,6 +245,7 @@ interface DatasourcesAndDefaultRules { interface RetentionDialogOpenOn { readonly datasource: string; readonly rules: Rule[]; + readonly defaultRules: Rule[]; } interface CompactionConfigDialogOpenOn { @@ -927,6 +928,7 @@ GROUP BY 1, 2`; retentionDialogOpenOn: { datasource: '_default', rules: defaultRules, + defaultRules, }, }; }); @@ -1036,10 +1038,13 @@ GROUP BY 1, 2`; icon: IconNames.AUTOMATIC_UPDATES, title: 'Edit retention rules', onAction: () => { + const defaultRules = this.state.datasourcesAndDefaultRulesState.data?.defaultRules; + if (!defaultRules) return; this.setState({ retentionDialogOpenOn: { datasource, rules: rules || [], + defaultRules, }, }); }, @@ -1103,9 +1108,8 @@ GROUP BY 1, 2`; private renderRetentionDialog() { const { capabilities } = this.props; - const { retentionDialogOpenOn, datasourcesAndDefaultRulesState } = this.state; - const defaultRules = datasourcesAndDefaultRulesState.data?.defaultRules; - if (!retentionDialogOpenOn || !defaultRules) return; + const { retentionDialogOpenOn } = this.state; + if (!retentionDialogOpenOn) return; return ( <RetentionDialog @@ -1113,7 +1117,7 @@ GROUP BY 1, 2`; rules={retentionDialogOpenOn.rules} capabilities={capabilities} onEditDefaults={this.editDefaultRules} - defaultRules={defaultRules} + defaultRules={retentionDialogOpenOn.defaultRules} onCancel={() => this.setState({ retentionDialogOpenOn: undefined })} onSave={this.saveRules} /> @@ -1205,6 +1209,7 @@ GROUP BY 1, 2`; <TableClickableCell onClick={() => this.onDetail(original)} hoverIcon={IconNames.SEARCH_TEMPLATE} + tooltip="Show detail" > {showSegmentTimeline ? ( <> @@ -1334,7 +1339,7 @@ GROUP BY 1, 2`; <TableClickableCell onClick={() => goToTasks(original.datasource)} hoverIcon={IconNames.ARROW_TOP_RIGHT} - title="Go to tasks" + tooltip="Go to tasks" > {formatRunningTasks(runningTasks)} </TableClickableCell> @@ -1514,6 +1519,7 @@ GROUP BY 1, 2`; if (!compaction) return; return ( <TableClickableCell + tooltip="Open compaction configuration" disabled={!compaction} onClick={() => { if (!compaction) return; @@ -1630,6 +1636,7 @@ GROUP BY 1, 2`; return ( <TableClickableCell + tooltip="Open retention (load rule) configuration" disabled={!defaultRules} onClick={() => { if (!defaultRules) return; @@ -1637,6 +1644,7 @@ GROUP BY 1, 2`; retentionDialogOpenOn: { datasource, rules, + defaultRules, }, }); }} diff --git a/web-console/src/views/lookups-view/lookups-view.tsx b/web-console/src/views/lookups-view/lookups-view.tsx index f9d188078a7..99c3d2b03f3 100644 --- a/web-console/src/views/lookups-view/lookups-view.tsx +++ b/web-console/src/views/lookups-view/lookups-view.tsx @@ -387,6 +387,7 @@ export class LookupsView extends React.PureComponent<LookupsViewProps, LookupsVi width: 200, Cell: ({ value, original }) => ( <TableClickableCell + tooltip="Show detail" onClick={() => this.onDetail(original)} hoverIcon={IconNames.SEARCH_TEMPLATE} > diff --git a/web-console/src/views/segments-view/segments-view.tsx b/web-console/src/views/segments-view/segments-view.tsx index 6f3cd468360..3233c587a4e 100644 --- a/web-console/src/views/segments-view/segments-view.tsx +++ b/web-console/src/views/segments-view/segments-view.tsx @@ -577,6 +577,7 @@ export class SegmentsView extends React.PureComponent<SegmentsViewProps, Segment filterable: allowGeneralFilter, Cell: row => ( <TableClickableCell + tooltip="Show detail" onClick={() => this.onDetail(row.value, row.row.datasource)} hoverIcon={IconNames.SEARCH_TEMPLATE} > @@ -688,6 +689,7 @@ export class SegmentsView extends React.PureComponent<SegmentsViewProps, Segment return ( <TableClickableCell className="range-detail" + tooltip="Show full shardSpec" onClick={onShowFullShardSpec} hoverIcon={IconNames.EYE_OPEN} > @@ -704,6 +706,7 @@ export class SegmentsView extends React.PureComponent<SegmentsViewProps, Segment return ( <TableClickableCell className="range-detail" + tooltip="Show full shardSpec" onClick={onShowFullShardSpec} hoverIcon={IconNames.EYE_OPEN} > @@ -725,6 +728,7 @@ export class SegmentsView extends React.PureComponent<SegmentsViewProps, Segment if (!Array.isArray(partitionDimensions)) return JSONBig.stringify(value); return ( <TableClickableCell + tooltip="Show full shardSpec" onClick={onShowFullShardSpec} hoverIcon={IconNames.EYE_OPEN} > @@ -742,6 +746,7 @@ export class SegmentsView extends React.PureComponent<SegmentsViewProps, Segment case 'tombstone': return ( <TableClickableCell + tooltip="Show full shardSpec" onClick={onShowFullShardSpec} hoverIcon={IconNames.EYE_OPEN} > @@ -752,6 +757,7 @@ export class SegmentsView extends React.PureComponent<SegmentsViewProps, Segment default: return ( <TableClickableCell + tooltip="Show full shardSpec" onClick={onShowFullShardSpec} hoverIcon={IconNames.EYE_OPEN} > diff --git a/web-console/src/views/supervisors-view/supervisors-view.tsx b/web-console/src/views/supervisors-view/supervisors-view.tsx index 334339bc7cc..045ec45e1f8 100644 --- a/web-console/src/views/supervisors-view/supervisors-view.tsx +++ b/web-console/src/views/supervisors-view/supervisors-view.tsx @@ -715,6 +715,7 @@ export class SupervisorsView extends React.PureComponent< show: visibleColumns.shown('Supervisor ID'), Cell: ({ value, original }) => ( <TableClickableCell + tooltip="Show detail" onClick={() => this.onSupervisorDetail(original)} hoverIcon={IconNames.SEARCH_TEMPLATE} > @@ -811,9 +812,9 @@ export class SupervisorsView extends React.PureComponent< } return ( <TableClickableCell + tooltip="Go to tasks" onClick={() => goToTasks(original.supervisor_id, `index_${original.type}`)} hoverIcon={IconNames.ARROW_TOP_RIGHT} - title="Go to tasks" > {label} </TableClickableCell> @@ -923,9 +924,9 @@ export class SupervisorsView extends React.PureComponent< if (!value) return null; return ( <TableClickableCell + tooltip="Show errors" onClick={() => this.onSupervisorDetail(original)} hoverIcon={IconNames.SEARCH_TEMPLATE} - title="See errors" > {pluralIfNeeded(value.length, 'error')} </TableClickableCell> diff --git a/web-console/src/views/tasks-view/tasks-view.tsx b/web-console/src/views/tasks-view/tasks-view.tsx index 0e44c96413f..5142da787cd 100644 --- a/web-console/src/views/tasks-view/tasks-view.tsx +++ b/web-console/src/views/tasks-view/tasks-view.tsx @@ -372,6 +372,7 @@ ORDER BY width: 440, Cell: ({ value, original }) => ( <TableClickableCell + tooltip="Show detail" onClick={() => this.onTaskDetail(original)} hoverIcon={IconNames.SEARCH_TEMPLATE} > diff --git a/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.tsx b/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.tsx index 5ea2e97bb09..d7c447d090c 100644 --- a/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.tsx +++ b/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.tsx @@ -251,7 +251,7 @@ export const ExecutionStagesPane = React.memo(function ExecutionStagesPane( return ( <TableClickableCell hoverIcon={IconNames.SHARE} - data-tooltip={`Go to task: ${taskId}`} + tooltip={`Go to task: ${taskId}`} onClick={() => { goToTask(taskId); }} --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
