Explore: fixes toolbars datasource selector and date picker responsiveness (#19718)

* Explore: fixes toolbars datasource selector and date picker responsiveness

* Explore: updates grafana UI time picker component - adds a class on long date

* Explore: updates styles for responsive long date without split

* Explore: adds styles for responsive time picker with long date during split

* Explore: updates long datetime detector to isDateTime, renames isAbsolute to hasAbsolute

* Explore: updates datasource responsiveness

* Explore: moves time picker styles

* Explore: updates datasource picker and select component responsiveness

* Explore: updates data source picker

* Explore: updates explore toolbar to use container width

* Explore: updates styles for datasource picker

* Explore: updates Grafana UI elements - select and single value with an ability to hide text

* Explore: updates time picker styles

* Explore: updates datasource select and date picker

* Explore: updates toolbar elements margin

* Explore: updates toolbar elements split breakpoints

* Explore: updates datasource picker label length with substrings

* Explore: updates the datasource picker label length

* Explore: removes refresh picker hide media query

* Explore: updates refresh picker style query to use xs breakpoint
This commit is contained in:
Lukas Siatka
2019-11-06 20:19:50 +01:00
committed by David
parent 08f7edbf5a
commit a79f5980d3
10 changed files with 59 additions and 28 deletions

View File

@@ -17,6 +17,7 @@ import { getShiftedTimeRange, getZoomedTimeRange } from 'app/core/utils/timePick
export interface Props {
exploreId: ExploreId;
hideText?: boolean;
range: TimeRange;
timeZone: TimeZone;
splitted: boolean;
@@ -71,7 +72,7 @@ export class ExploreTimeControls extends Component<Props> {
};
render() {
const { range, timeZone, splitted, syncedTimes, onChangeTimeSync } = this.props;
const { range, timeZone, splitted, syncedTimes, onChangeTimeSync, hideText } = this.props;
const timeSyncButton = splitted ? <TimeSyncButton onClick={onChangeTimeSync} isSynced={syncedTimes} /> : null;
const timePickerCommonProps = {
value: range,
@@ -81,6 +82,7 @@ export class ExploreTimeControls extends Component<Props> {
onMoveForward: this.onMoveForward,
onZoom: this.onZoom,
selectOptions: this.setActiveTimeOption(defaultSelectOptions, range.raw),
hideText,
};
return <TimePicker {...timePickerCommonProps} timeSyncButton={timeSyncButton} isSynced={syncedTimes} />;