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

packages/grafana-ui/src/components/RefreshPicker/_RefreshPicker.scss

@@ -32,7 +32,7 @@
     }
   }
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-up(xs) {
     display: block;
   }
 }

packages/grafana-ui/src/components/Select/SingleValue.tsx

@@ -35,6 +35,7 @@ type Props = {
   data: {
     imgUrl?: string;
     loading?: boolean;
+    hideText?: boolean;
   };
 };
 
@@ -56,7 +57,7 @@ export const SingleValue = (props: Props) => {
             </div>
           </SlideOutTransition>
         )}
-        {children}
+        {!data.hideText && children}
       </div>
     </components.SingleValue>
   );

packages/grafana-ui/src/components/Select/_Select.scss

@@ -44,6 +44,7 @@ $select-input-bg-disabled: $input-bg-disabled;
 
 .gf-form-select-box__input {
   padding-left: 5px;
+
   input {
     line-height: inherit;
   }
@@ -55,6 +56,7 @@ $select-input-bg-disabled: $input-bg-disabled;
   position: absolute;
   z-index: $zindex-dropdown;
   min-width: 100%;
+
   &-notice--no-options {
     background-color: $input-bg;
     padding: 10px;
@@ -122,6 +124,7 @@ $select-input-bg-disabled: $input-bg-disabled;
   display: inline-block;
   padding: 6px 16px 6px 10px;
   vertical-align: middle;
+
   > div {
     display: inline-block;
     vertical-align: middle;

packages/grafana-ui/src/components/TimePicker/TimePicker.tsx

@@ -44,6 +44,7 @@ const getStyles = memoizeOne((theme: GrafanaTheme) => {
 });
 
 export interface Props extends Themeable {
+  hideText?: boolean;
   value: TimeRange;
   selectOptions: TimeOption[];
   timeZone?: TimeZone;
@@ -159,6 +160,7 @@ class UnThemedTimePicker extends PureComponent<Props, State> {
       timeSyncButton,
       isSynced,
       theme,
+      hideText,
     } = this.props;
 
     const styles = getStyles(theme);
@@ -175,19 +177,21 @@ class UnThemedTimePicker extends PureComponent<Props, State> {
     };
     const rangeString = rangeUtil.describeTimeRange(adjustedTimeRange);
 
-    const label = (
+    const label = !hideText ? (
       <>
         {isCustomOpen && <span>Custom time range</span>}
         {!isCustomOpen && <span>{rangeString}</span>}
         {isUTC && <span className="time-picker-utc">UTC</span>}
       </>
+    ) : (
+      ''
     );
-    const isAbsolute = isDateTime(value.raw.to);
+    const hasAbsolute = isDateTime(value.raw.from) || isDateTime(value.raw.to);
 
     return (
       <div className="time-picker" ref={this.pickerTriggerRef}>
         <div className="time-picker-buttons">
-          {isAbsolute && (
+          {hasAbsolute && (
             <button className="btn navbar-button navbar-button--tight" onClick={onMoveBackward}>
               <i className="fa fa-chevron-left" />
             </button>
@@ -208,7 +212,7 @@ class UnThemedTimePicker extends PureComponent<Props, State> {
 
           {timeSyncButton}
 
-          {isAbsolute && (
+          {hasAbsolute && (
             <button className="btn navbar-button navbar-button--tight" onClick={onMoveForward}>
               <i className="fa fa-chevron-right" />
             </button>

packages/grafana-ui/src/components/TimePicker/_TimePicker.scss

@@ -154,6 +154,7 @@ $arrowPadding: $arrowPaddingToBorder * 3;
   .react-calendar__month-view__days {
     background-color: $calendar-bg-days;
   }
+
   .react-calendar__tile--now {
     background-color: $calendar-bg-now;
   }

public/app/core/components/Select/DataSourcePicker.tsx

@@ -9,6 +9,7 @@ export interface Props {
   onChange: (ds: DataSourceSelectItem) => void;
   datasources: DataSourceSelectItem[];
   current: DataSourceSelectItem;
+  hideTextValue?: boolean;
   onBlur?: () => void;
   autoFocus?: boolean;
   openMenuOnFocus?: boolean;
@@ -33,7 +34,7 @@ export class DataSourcePicker extends PureComponent<Props> {
   };
 
   render() {
-    const { datasources, current, autoFocus, onBlur, openMenuOnFocus, showLoading } = this.props;
+    const { datasources, current, autoFocus, hideTextValue, onBlur, openMenuOnFocus, showLoading } = this.props;
 
     const options = datasources.map(ds => ({
       value: ds.name,
@@ -42,10 +43,11 @@ export class DataSourcePicker extends PureComponent<Props> {
     }));
 
     const value = current && {
-      label: current.name,
+      label: current.name.substr(0, 37),
       value: current.name,
       imgUrl: current.meta.info.logos.small,
       loading: showLoading,
+      hideText: hideTextValue,
     };
 
     return (

public/app/features/explore/ExploreTimeControls.tsx

@@ -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} />;

public/app/features/explore/ExploreToolbar.tsx

@@ -66,6 +66,7 @@ interface StateProps {
   originPanelId: number;
   queries: DataQuery[];
   datasourceLoading: boolean | null;
+  containerWidth: number;
 }
 
 interface DispatchProps {
@@ -83,11 +84,7 @@ interface DispatchProps {
 
 type Props = StateProps & DispatchProps & OwnProps;
 
-export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
-  constructor(props: Props) {
-    super(props);
-  }
-
+export class UnConnectedExploreToolbar extends PureComponent<Props> {
   onChangeDatasource = async (option: { value: any }) => {
     this.props.changeDatasource(this.props.exploreId, option.value);
   };
@@ -162,6 +159,7 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
       isPaused,
       originPanelId,
       datasourceLoading,
+      containerWidth,
     } = this.props;
 
     const styles = getStyles();
@@ -171,6 +169,9 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
       'navbar-button navbar-button--border-right-0': originDashboardIsEditable,
     });
 
+    const showSmallDataSourcePicker = (splitted ? containerWidth < 690 : containerWidth < 800) || false;
+    const showSmallTimePicker = splitted || containerWidth < 1210;
+
     return (
       <div className={splitted ? 'explore-toolbar splitted' : 'explore-toolbar'}>
         <div className="explore-toolbar-item">
@@ -194,12 +195,18 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
           <div className="explore-toolbar-content">
             {!datasourceMissing ? (
               <div className="explore-toolbar-content-item">
-                <div className="datasource-picker">
+                <div
+                  className={classNames(
+                    'explore-ds-picker',
+                    showSmallDataSourcePicker ? 'explore-ds-picker--small' : ''
+                  )}
+                >
                   <DataSourcePicker
                     onChange={this.onChangeDatasource}
                     datasources={exploreDatasources}
                     current={selectedDatasource}
                     showLoading={datasourceLoading}
+                    hideTextValue={showSmallDataSourcePicker}
                   />
                 </div>
                 {supportedModes.length > 1 ? (
@@ -266,6 +273,7 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
                   splitted={splitted}
                   syncedTimes={syncedTimes}
                   onChangeTimeSync={this.onChangeTimeSync}
+                  hideText={showSmallTimePicker}
                 />
               </div>
             )}
@@ -333,6 +341,7 @@ const mapStateToProps = (state: StoreState, { exploreId }: OwnProps): StateProps
     originPanelId,
     queries,
     datasourceLoading,
+    containerWidth,
   } = exploreItem;
   const selectedDatasource = datasourceInstance
     ? exploreDatasources.find(datasource => datasource.name === datasourceInstance.name)
@@ -358,6 +367,7 @@ const mapStateToProps = (state: StoreState, { exploreId }: OwnProps): StateProps
     queries,
     syncedTimes,
     datasourceLoading,
+    containerWidth,
   };
 };
 

public/sass/components/_panel_editor.scss

@@ -230,4 +230,5 @@
 .ds-picker {
   position: relative;
   min-width: 200px;
+  max-width: 300px;
 }

public/sass/pages/_explore.scss

@@ -14,15 +14,18 @@
   }
 }
 
-.datasource-picker {
-  .ds-picker {
-    min-width: 200px;
-    max-width: 200px;
+.explore-ds-picker {
+  min-width: 200px;
+  max-width: 300px;
+}
 
-    .gf-form-select-box__img-value {
-      max-width: 150px;
-      overflow: hidden;
-    }
+.explore-ds-picker--small {
+  min-width: 60px;
+  max-width: 60px;
+
+  .ds-picker {
+    min-width: 60px;
+    max-width: 60px;
   }
 }
 
@@ -138,7 +141,7 @@
   }
 }
 
-@media only screen and (max-width: 788px) {
+@media only screen and (max-width: 897px) {
   .explore-toolbar {
     .explore-toolbar-content-item {
       .navbar-button span {
@@ -148,10 +151,14 @@
   }
 }
 
-@media only screen and (max-width: 702px) {
-  .explore-toolbar-content-item:first-child {
-    padding-left: 2px;
-    margin-right: 0;
+@media only screen and (max-width: 810px) {
+  .explore-toolbar {
+    .explore-toolbar-content-item {
+      &:first-child {
+        padding-left: 2px;
+        margin: 0 12px 0 16px;
+      }
+    }
   }
 }