[Maps] Should be able to zoom-in on selected range of timeslider (#12…

…2131) * 105596 - Added calendar button that allows users to set global time of kibana according selected time slice * #105596 - refactoring; Title and aria-label updated for zoom-in button * #105596 - icon filling was removed Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Jan 25, 2022 · 10c96e5 · 10c96e5
1 parent aaf1621
commit 10c96e5
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 7 deletions.
diff --git a/x-pack/plugins/maps/public/connected_components/map_container/map_container.tsx b/x-pack/plugins/maps/public/connected_components/map_container/map_container.tsx
@@ -14,14 +14,15 @@ import uuid from 'uuid/v4';
 import { Filter } from '@kbn/es-query';
 import { ActionExecutionContext, Action } from 'src/plugins/ui_actions/public';
 import { Observable } from 'rxjs';
+import moment from 'moment';
 import { MBMap } from '../mb_map';
 import { RightSideControls } from '../right_side_controls';
 import { Timeslider } from '../timeslider';
 import { ToolbarOverlay } from '../toolbar_overlay';
 import { EditLayerPanel } from '../edit_layer_panel';
 import { AddLayerPanel } from '../add_layer_panel';
 import { ExitFullScreenButton } from '../../../../../../src/plugins/kibana_react/public';
-import { getCoreChrome } from '../../kibana_services';
+import { getCoreChrome, getData } from '../../kibana_services';
 import { RawValue } from '../../../common/constants';
 import { FLYOUT_STATE } from '../../reducers/ui';
 import { MapSettings } from '../../reducers/map';
@@ -156,6 +157,13 @@ export class MapContainer extends Component<Props, State> {
     }, 5000);
   };
 
+  _updateGlobalTimeRange(data: number[]) {
+    getData().query.timefilter.timefilter.setTime({
+      from: moment(data[0]).toISOString(),
+      to: moment(data[1]).toISOString(),
+    });
+  }
+
   render() {
     const {
       addFilters,
@@ -240,7 +248,10 @@ export class MapContainer extends Component<Props, State> {
           <RightSideControls />
         </EuiFlexItem>
 
-        <Timeslider waitForTimesliceToLoad$={this.props.waitUntilTimeLayersLoad$} />
+        <Timeslider
+          waitForTimesliceToLoad$={this.props.waitUntilTimeLayersLoad$}
+          updateGlobalTimeRange={this._updateGlobalTimeRange.bind(this)}
+        />
 
         <EuiFlexItem
           className={classNames('mapMapLayerPanel', {

diff --git a/x-pack/plugins/maps/public/connected_components/timeslider/_index.scss b/x-pack/plugins/maps/public/connected_components/timeslider/_index.scss
@@ -1,4 +1,4 @@
-$timesliderWidth: 585px;
+$timesliderWidth: 650px;
 
 .mapTimeslider {
   @include euiBottomShadowLarge;
@@ -16,15 +16,12 @@ $timesliderWidth: 585px;
 
 .mapTimeslider__row {
   display: flex;
+  align-items: center;
 
   & + & {
     margin-top: $euiSizeS;
   }
 
-  > * {
-    align-items: center;
-  }
-
   &:first-child {
     padding: 0 $euiSize;
   }

diff --git a/x-pack/plugins/maps/public/connected_components/timeslider/timeslider.tsx b/x-pack/plugins/maps/public/connected_components/timeslider/timeslider.tsx
@@ -23,6 +23,7 @@ export interface Props {
   isTimesliderOpen: boolean;
   timeRange: TimeRange;
   waitForTimesliceToLoad$: Observable<void>;
+  updateGlobalTimeRange: (timeslice: number[]) => void;
 }
 
 interface State {
@@ -182,6 +183,21 @@ class KeyedTimeslider extends Component<Props, State> {
             <EuiText size="s">{prettyPrintTimeslice(this.state.timeslice)}</EuiText>
           </div>
 
+          <EuiButtonIcon
+            onClick={() => {
+              this.props.updateGlobalTimeRange(this.state.timeslice);
+            }}
+            iconType="calendar"
+            aria-label={i18n.translate('xpack.maps.timeslider.setGlobalTime', {
+              defaultMessage: 'Set global time to {timeslice}',
+              values: { timeslice: prettyPrintTimeslice(this.state.timeslice) },
+            })}
+            title={i18n.translate('xpack.maps.timeslider.setGlobalTime', {
+              defaultMessage: 'Set global time to {timeslice}',
+              values: { timeslice: prettyPrintTimeslice(this.state.timeslice) },
+            })}
+          />
+
           <div className="mapTimeslider__innerPanel">
             <div className="mapTimeslider__controls">
               <EuiButtonIcon