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 cf8f1d8f0b1aa8aa871deb9b6fe17aa9af4523a9 Author: Vadim Ogievetsky <[email protected]> AuthorDate: Wed Oct 23 11:35:36 2024 -0700 more cleanup --- .../segment-timeline/segment-timeline.scss | 30 ++++++++-------- .../segment-timeline/segment-timeline.tsx | 41 +++++++++++++--------- .../views/datasources-view/datasources-view.scss | 2 +- .../views/datasources-view/datasources-view.tsx | 1 + .../src/views/segments-view/segments-view.scss | 2 +- .../src/views/segments-view/segments-view.tsx | 1 + 6 files changed, 43 insertions(+), 34 deletions(-) diff --git a/web-console/src/components/segment-timeline/segment-timeline.scss b/web-console/src/components/segment-timeline/segment-timeline.scss index 24ee569ad3a..f739277bea7 100644 --- a/web-console/src/components/segment-timeline/segment-timeline.scss +++ b/web-console/src/components/segment-timeline/segment-timeline.scss @@ -19,14 +19,6 @@ @import '../../variables'; .segment-timeline { - display: grid; - grid-template-columns: 1fr 240px; - gap: 8px; - - .loader { - width: 85%; - } - .loading-error { position: fixed; top: 50%; @@ -34,15 +26,23 @@ transform: translate(-50%, -50%); } - .no-data-text { - position: absolute; - left: 30vw; - top: 15vh; - font-size: 20px; - } - .side-control { @include card-like; padding: 10px; } + + .stacked-bar-chart { + height: 100%; + } + + .empty-placeholder { + height: 100%; + + .no-data-text { + position: absolute; + left: 30vw; + top: 15vh; + font-size: 20px; + } + } } diff --git a/web-console/src/components/segment-timeline/segment-timeline.tsx b/web-console/src/components/segment-timeline/segment-timeline.tsx index f59a59e2399..56f6801b426 100644 --- a/web-console/src/components/segment-timeline/segment-timeline.tsx +++ b/web-console/src/components/segment-timeline/segment-timeline.tsx @@ -16,7 +16,14 @@ * limitations under the License. */ -import { Button, FormGroup, MenuItem, ResizeSensor, SegmentedControl } from '@blueprintjs/core'; +import { + Button, + FormGroup, + MenuItem, + ResizeSensor, + SegmentedControl, + Tag, +} from '@blueprintjs/core'; import type { DateRange, NonNullDateRange } from '@blueprintjs/datetime'; import { DateRangeInput3 } from '@blueprintjs/datetime2'; import { IconNames } from '@blueprintjs/icons'; @@ -39,6 +46,7 @@ import { utcToLocalDateRange, } from '../../utils'; import { Loader } from '../loader/loader'; +import { SplitterLayout } from '../splitter-layout/splitter-layout'; import type { BarUnitData, SegmentStat } from './common'; import { StackedBarChart } from './stacked-bar-chart'; @@ -442,16 +450,12 @@ ORDER BY "start" DESC`; } = this.state; if (loading) { - return ( - <div> - <Loader loading={loading} /> - </div> - ); + return <Loader />; } if (error) { return ( - <div> + <div className="empty-placeholder"> <span className="no-data-text">Error when loading data: {error.message}</span> </div> ); @@ -459,7 +463,7 @@ ORDER BY "start" DESC`; if (xScale === null || yScale === null) { return ( - <div> + <div className="empty-placeholder"> <span className="no-data-text">Error when calculating scales</span> </div> ); @@ -467,7 +471,7 @@ ORDER BY "start" DESC`; if (data![activeSegmentStat].length === 0) { return ( - <div> + <div className="empty-placeholder"> <span className="no-data-text">There are no segments for the selected interval</span> </div> ); @@ -478,9 +482,9 @@ ORDER BY "start" DESC`; data![activeSegmentStat].every((d: any) => d[activeDatasource] === undefined) ) { return ( - <div> + <div className="empty-placeholder"> <span className="no-data-text"> - No data available for <i>{activeDatasource}</i> + No data available for <Tag minimal>{activeDatasource}</Tag> </span> </div> ); @@ -525,7 +529,7 @@ ORDER BY "start" DESC`; if (exactMatch) { return normalizedTitle === normalizedQuery; } else { - return ` ${normalizedTitle}`.includes(normalizedQuery); + return normalizedTitle.includes(normalizedQuery); } }; @@ -533,9 +537,7 @@ ORDER BY "start" DESC`; val, { handleClick, handleFocus, modifiers }, ) => { - if (!modifiers.matchesPredicate) { - return null; - } + if (!modifiers.matchesPredicate) return null; return ( <MenuItem key={val} @@ -576,7 +578,12 @@ ORDER BY "start" DESC`; }; return ( - <div className="segment-timeline"> + <SplitterLayout + className="segment-timeline" + primaryMinSize={400} + secondaryInitialSize={220} + secondaryMaxSize={400} + > {this.renderStackedBarChart()} <div className="side-control"> <FormGroup label="Show"> @@ -616,7 +623,7 @@ ORDER BY "start" DESC`; <DatasourceSelect /> </FormGroup> </div> - </div> + </SplitterLayout> ); } } diff --git a/web-console/src/views/datasources-view/datasources-view.scss b/web-console/src/views/datasources-view/datasources-view.scss index b0abe78ec56..1f9d9df328e 100644 --- a/web-console/src/views/datasources-view/datasources-view.scss +++ b/web-console/src/views/datasources-view/datasources-view.scss @@ -23,7 +23,7 @@ width: 100%; overflow: auto; - .splitter-layout { + .splitter-layout.timeline-datasources-splitter { position: absolute; top: $view-control-bar-height + $standard-padding; bottom: 0; diff --git a/web-console/src/views/datasources-view/datasources-view.tsx b/web-console/src/views/datasources-view/datasources-view.tsx index cafc69cade5..8f89a0f1c38 100644 --- a/web-console/src/views/datasources-view/datasources-view.tsx +++ b/web-console/src/views/datasources-view/datasources-view.tsx @@ -1714,6 +1714,7 @@ GROUP BY 1, 2`; /> </ViewControlBar> <SplitterLayout + className="timeline-datasources-splitter" vertical percentage secondaryInitialSize={35} diff --git a/web-console/src/views/segments-view/segments-view.scss b/web-console/src/views/segments-view/segments-view.scss index a45d8860db1..f64f881fe4c 100644 --- a/web-console/src/views/segments-view/segments-view.scss +++ b/web-console/src/views/segments-view/segments-view.scss @@ -22,7 +22,7 @@ height: 100%; width: 100%; - .splitter-layout { + .splitter-layout.timeline-segments-splitter { position: absolute; top: $view-control-bar-height + $standard-padding; bottom: 0; diff --git a/web-console/src/views/segments-view/segments-view.tsx b/web-console/src/views/segments-view/segments-view.tsx index 9e0d680c854..74373e097a7 100644 --- a/web-console/src/views/segments-view/segments-view.tsx +++ b/web-console/src/views/segments-view/segments-view.tsx @@ -1021,6 +1021,7 @@ END AS "time_span"`, /> </ViewControlBar> <SplitterLayout + className="timeline-segments-splitter" vertical percentage secondaryInitialSize={35} --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
