Convert timepicker to EUI

src/legacy/core_plugins/kibana/ui_setting_defaults.js

@@ -69,7 +69,7 @@ export function getUiSettingDefaults() {
     },
     'dateFormat': {
       name: 'Date format',
-      value: 'MMMM Do YYYY, HH:mm:ss.SSS',
+      value: 'MMM D, YYYY @ HH:mm:ss.SSS',
       description: `When displaying a pretty formatted date, use this <a href="http://momentjs.com/docs/#/displaying/format/"
         target="_blank" rel="noopener noreferrer">format</a>`,
     },
@@ -410,23 +410,6 @@ export function getUiSettingDefaults() {
         { from: 'now/w',    to: 'now',      display: 'Week to date',          section: 0 },
         { from: 'now/M',    to: 'now',      display: 'Month to date',         section: 0 },
         { from: 'now/y',    to: 'now',      display: 'Year to date',          section: 0 },
-
-        { from: 'now-15m',  to: 'now',      display: 'Last 15 minutes',       section: 1 },
-        { from: 'now-30m',  to: 'now',      display: 'Last 30 minutes',       section: 1 },
-        { from: 'now-1h',   to: 'now',      display: 'Last 1 hour',           section: 1 },
-        { from: 'now-4h',   to: 'now',      display: 'Last 4 hours',          section: 1 },
-        { from: 'now-12h',  to: 'now',      display: 'Last 12 hours',         section: 1 },
-        { from: 'now-24h',  to: 'now',      display: 'Last 24 hours',         section: 1 },
-        { from: 'now-7d',   to: 'now',      display: 'Last 7 days',           section: 1 },
-
-        { from: 'now-30d',  to: 'now',      display: 'Last 30 days',          section: 2 },
-        { from: 'now-60d',  to: 'now',      display: 'Last 60 days',          section: 2 },
-        { from: 'now-90d',  to: 'now',      display: 'Last 90 days',          section: 2 },
-        { from: 'now-6M',   to: 'now',      display: 'Last 6 months',         section: 2 },
-        { from: 'now-1y',   to: 'now',      display: 'Last 1 year',           section: 2 },
-        { from: 'now-2y',   to: 'now',      display: 'Last 2 years',          section: 2 },
-        { from: 'now-5y',   to: 'now',      display: 'Last 5 years',          section: 2 },
-
       ], null, 2),
       type: 'json',
       description: `The list of ranges to show in the Quick section of the time picker.

src/ui/public/react_components.js

@@ -23,6 +23,8 @@ import {
   KuiToolBarSearchBox,
 } from '@kbn/ui-framework/components';
 
+import { Timepicker } from 'ui/timepicker';
+
 import {
   EuiConfirmModal,
   EuiIcon,
@@ -46,3 +48,6 @@ app.directive('colorPicker', reactDirective => reactDirective(EuiColorPicker));
 app.directive('iconTip', reactDirective => reactDirective(EuiIconTip, ['content', 'type', 'position', 'title', 'color']));
 
 app.directive('callOut', reactDirective => reactDirective(EuiCallOut, ['title', 'color', 'size', 'iconType', 'children']));
+
+app.directive('newKbnTimepicker', reactDirective => reactDirective(Timepicker, [
+  'from', 'to', 'setTime', 'setRefresh', 'isPaused', 'refreshInterval']));

src/ui/public/timefilter/timefilter.js

@@ -54,6 +54,7 @@ class Timefilter extends SimpleEmitter {
    * @property {string} time.mode (quick | relative | absolute)
    */
   setTime = (time) => {
+    console.log(time);
     // Object.assign used for partially composed updates
     const newTime = Object.assign(this.getTime(), time);
     if (areTimePickerValsDifferent(this.getTime(), newTime)) {

src/ui/public/timepicker/components/absolute_form.js

@@ -0,0 +1,106 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import PropTypes from 'prop-types';
+import React, { Component, Fragment } from 'react';
+
+import moment from 'moment';
+
+import dateMath from '@elastic/datemath';
+
+import {
+  EuiDatePicker,
+  EuiFieldText,
+  EuiFormRow,
+} from '@elastic/eui';
+
+const INPUT_DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss.SSS';
+
+const toMoment = (value, roundUp) => {
+  const valueAsMoment = dateMath.parse(value, { roundUp });
+  return {
+    value: valueAsMoment,
+    textInputValue: valueAsMoment.format(INPUT_DATE_FORMAT)
+  };
+};
+
+export class AbsoluteForm extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      ...toMoment(this.props.value, this.props.roundUp),
+      isTextInvalid: false,
+    };
+  }
+
+  static getDerivedStateFromProps = (nextProps) => {
+    return {
+      ...toMoment(nextProps.value, nextProps.roundUp),
+      isTextInvalid: false,
+    };
+  }
+
+  handleChange = (date) => {
+    this.props.onChange(date.toISOString());
+  }
+
+  handleTextChange = (evt) => {
+    const date = moment(evt.target.value, INPUT_DATE_FORMAT, true);
+    if (date.isValid()) {
+      this.props.onChange(date.toISOString());
+    }
+
+    this.setState({
+      textInputValue: evt.target.value,
+      isTextInvalid: !date.isValid()
+    });
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <EuiFormRow
+          isInvalid={this.state.isTextInvalid}
+          error={this.state.isTextInvalid ? `Expected format ${INPUT_DATE_FORMAT}` : undefined}
+        >
+          <EuiFieldText
+            isInvalid={this.state.isTextInvalid}
+            value={this.state.textInputValue}
+            onChange={this.handleTextChange}
+          />
+        </EuiFormRow>
+        <EuiDatePicker
+          selected={this.state.value}
+          onChange={this.handleChange}
+          inline
+          showTimeSelect
+          shadow={false}
+        />
+      </Fragment>
+    );
+  }
+}
+
+AbsoluteForm.propTypes = {
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  roundUp: PropTypes.bool.isRequired,
+};