Polish form UX in Rollup Job Wizard and list (#23196)

* Polish job list by adding loading and empty states.
* Refine layout of Summary tab and use tables in Terms, Histogram, and Metrics tabs.
* Persist terms, metrics, and histogram tables with an empty prompt when no fields are selected.
* Include JSON tab in Review step.
* Re-label docs links so it's clear that they pertain specifically to the section they're in.
* Use trash icon for removing fields. Fix 'histgogram' typo.
* Position field chooser on right side of the section header.
  - Keep field chooser open as user selects fields.
  - Update SearchSelect to allow consumer to specify anchorPosition and make row text blue on hover.
* Present timezones in a select.
* Prompt user to opt-in to customizing Data Storage section.
* Change ID section to Name and add explanatory text.
* Dynamically update index pattern help text and errors to emphasize to the user that it's async validation.
* Link to cron syntax and validate expression.
* Suggest valid interval values and suggest fixed intervals when calendar intervals are used for Date Histogram interval.
* Validate that page size and histogram interval are greater than 0.
* Validate that types have been selected for chosen metrics in Metrics step.
* Fix bugs:
  - Fix bug in serialization logic.
  - Fix bug in which refresh interval caused an open detail panel to re-open.
  - Fix bug with string value passed to page size number input.
  - Fix bug with auto refresh interval resetting the detail panel's selected tab.

Author: cjcenizal

src/ui/public/utils/parse_es_interval/parse_es_interval.ts

@@ -59,7 +59,7 @@ export function parseEsInterval(interval: string): { value: number; unit: string
   const type = unit && dateMath.unitsMap[unit].type;
 
   if (type === 'calendar' && value !== 1) {
-    throw new ParseEsIntervalInvalidCalendarIntervalError(interval);
+    throw new ParseEsIntervalInvalidCalendarIntervalError(interval, value, unit, type);
   }
 
   return {

src/ui/public/utils/parse_es_interval/parse_es_interval_invalid_calendar_interval_error.ts

@@ -18,9 +18,18 @@
  */
 
 export class ParseEsIntervalInvalidCalendarIntervalError extends Error {
-  constructor(public readonly interval: string) {
+  constructor(
+    public readonly interval: string,
+    public readonly value: number,
+    public readonly unit: string,
+    public readonly type: string
+  ) {
     super(`Invalid calendar interval: ${interval}, value must be 1`);
+
     this.name = 'ParseEsIntervalInvalidCalendarIntervalError';
+    this.value = value;
+    this.unit = unit;
+    this.type = type;
 
     // captureStackTrace is only available in the V8 engine, so any browser using
     // a different JS engine won't have access to this method.

x-pack/package.json

@@ -114,6 +114,7 @@
     "classnames": "2.2.5",
     "concat-stream": "1.5.1",
     "copy-to-clipboard": "^3.0.8",
+    "cronstrue": "^1.51.0",
     "d3": "3.5.6",
     "d3-scale": "1.0.6",
     "dedent": "^0.7.0",

x-pack/plugins/rollup/public/crud_app/index.less

@@ -5,3 +5,7 @@
   max-width: 1000px !important; /* 1 */
   width: 100% !important; /* 1 */
 }
+
+.rollupJobWizardStepActions {
+  align-items: flex-end;
+}

x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/components/field_list.js renamed to x-pack/plugins/rollup/public/crud_app/sections/components/field_list/field_list.js

@@ -9,33 +9,49 @@ import PropTypes from 'prop-types';
 
 import {
   EuiInMemoryTable,
-  EuiSpacer,
+  EuiEmptyPrompt,
 } from '@elastic/eui';
 
 export const FieldList = ({
   columns,
   fields,
   onRemoveField,
+  addButton,
+  emptyMessage,
 }) => {
+  let message;
+
   if (!fields.length) {
-    return null;
+    message = (
+      <EuiEmptyPrompt
+        title={emptyMessage}
+        titleSize="xs"
+      />
+    );
   }
 
-  const extendedColumns = columns.concat({
-    name: 'Remove',
-    width: '80px',
-    actions: [{
+  let extendedColumns;
+
+  if (onRemoveField) {
+    extendedColumns = columns.concat({
       name: 'Remove',
-      isPrimary: true,
-      description: 'Remove this field',
-      icon: 'cross',
-      type: 'icon',
-      color: 'danger',
-      onClick: (field) => onRemoveField(field),
-    }]
-  });
+      width: '80px',
+      actions: [{
+        name: 'Remove',
+        isPrimary: true,
+        description: 'Remove this field',
+        icon: 'trash',
+        type: 'icon',
+        color: 'danger',
+        onClick: (field) => onRemoveField(field),
+      }]
+    });
+  } else {
+    extendedColumns = columns;
+  }
 
   const search = {
+    toolsRight: addButton ? addButton : undefined,
     box: {
       incremental: true,
     },
@@ -48,15 +64,14 @@ export const FieldList = ({
 
   return (
     <Fragment>
-      <EuiSpacer />
-
       <EuiInMemoryTable
         items={fields}
         itemId="name"
         columns={extendedColumns}
         search={search}
         pagination={pagination}
         sorting={true}
+        message={message}
       />
     </Fragment>
   );
@@ -65,5 +80,7 @@ export const FieldList = ({
 FieldList.propTypes = {
   columns: PropTypes.array.isRequired,
   fields: PropTypes.array.isRequired,
-  onRemoveField: PropTypes.func.isRequired,
+  onRemoveField: PropTypes.func,
+  addButton: PropTypes.node,
+  emptyMessage: PropTypes.node,
 };

x-pack/plugins/rollup/public/crud_app/sections/components/field_list/index.js

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { FieldList } from './field_list';

x-pack/plugins/rollup/public/crud_app/sections/components/index.js

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+export { FieldList } from './field_list';
+
 export { JobActionMenu } from './job_action_menu';
 
 export {

x-pack/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_histogram.js

@@ -8,60 +8,43 @@ import React, { Fragment } from 'react';
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 
 import {
-  EuiTitle,
+  EuiDescriptionList,
+  EuiDescriptionListTitle,
+  EuiDescriptionListDescription,
   EuiSpacer,
-  EuiText,
-  EuiFlexGroup,
-  EuiFlexItem,
 } from '@elastic/eui';
 
-export const TabHistogramUi = ({ histogram, histogramInterval }) => {
-  // TODO: Render a table if there are more than 20 fields.
-
-  const renderedTerms = histogram.map(({ name }) => {
-    return (
-      <li key={name}>
-        {name}
-      </li>
-    );
-  });
-
-  return (
-    <Fragment>
-      <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
-        <EuiFlexItem grow={false}>
-          <EuiTitle size="s">
-            <h3>
-              <FormattedMessage
-                id="xpack.rollupJobs.jobDetails.tabHistogram.sectionHistogram.title"
-                defaultMessage="Histogram"
-              />
-            </h3>
-          </EuiTitle>
-        </EuiFlexItem>
-
-        <EuiFlexItem grow={false}>
-          <EuiText>
-            <p>
-              <FormattedMessage
-                id="xpack.rollupJobs.jobDetails.tabHistogram.interval.label"
-                defaultMessage="Interval: {histogramInterval}"
-                values={{ histogramInterval }}
-              />
-            </p>
-          </EuiText>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-
-      <EuiSpacer size="s" />
-
-      <EuiText>
-        <ul>
-          {renderedTerms}
-        </ul>
-      </EuiText>
-    </Fragment>
-  );
-};
+import { FieldList } from '../../field_list';
+
+const columns = [{
+  field: 'name',
+  name: 'Field',
+  truncateText: true,
+  sortable: true,
+}];
+
+export const TabHistogramUi = ({ histogram, histogramInterval }) => (
+  <Fragment>
+    <EuiDescriptionList textStyle="reverse">
+      <EuiDescriptionListTitle>
+        <FormattedMessage
+          id="xpack.rollupJobs.jobDetails.tabHistogram.interval.label"
+          defaultMessage="Histogram interval"
+        />
+      </EuiDescriptionListTitle>
+
+      <EuiDescriptionListDescription>
+        {histogramInterval}
+      </EuiDescriptionListDescription>
+    </EuiDescriptionList>
+
+    <EuiSpacer size="l" />
+
+    <FieldList
+      columns={columns}
+      fields={histogram}
+    />
+  </Fragment>
+);
 
 export const TabHistogram = injectI18n(TabHistogramUi);

x-pack/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_json.js

@@ -4,12 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { Fragment } from 'react';
-import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
+import React from 'react';
+import { injectI18n } from '@kbn/i18n/react';
 
 import {
-  EuiTitle,
-  EuiSpacer,
   EuiCodeEditor,
 } from '@elastic/eui';
 
@@ -19,29 +17,16 @@ export const TabJsonUi = ({
   const jsonString = JSON.stringify(json, null, 2);
 
   return (
-    <Fragment>
-      <EuiTitle size="s">
-        <h3>
-          <FormattedMessage
-            id="xpack.rollupJobs.jobDetails.tabJson.sectionJson.title"
-            defaultMessage="JSON"
-          />
-        </h3>
-      </EuiTitle>
-
-      <EuiSpacer size="s" />
-
-      <EuiCodeEditor
-        mode="json"
-        theme="textmate"
-        isReadOnly
-        setOptions={{ maxLines: Infinity }}
-        value={jsonString}
-        editorProps={{
-          $blockScrolling: Infinity
-        }}
-      />
-    </Fragment>
+    <EuiCodeEditor
+      mode="json"
+      theme="textmate"
+      isReadOnly
+      setOptions={{ maxLines: Infinity }}
+      value={jsonString}
+      editorProps={{
+        $blockScrolling: Infinity
+      }}
+    />
   );
 };
 

x-pack/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_metrics.js

@@ -4,40 +4,26 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { Fragment } from 'react';
-import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
+import React from 'react';
+import { injectI18n } from '@kbn/i18n/react';
 
-import {
-  EuiDescriptionList,
-  EuiTitle,
-  EuiSpacer,
-} from '@elastic/eui';
+import { FieldList } from '../../field_list';
 
-export const TabMetricsUi = ({ metrics }) => {
-  // TODO: Render a table if there are more than 20 metrics.
-  const listMetrics = metrics.map(({ name, types }) => {
-    return {
-      title: name,
-      description: types.join(', '),
-    };
-  });
+const columns = [{
+  field: 'name',
+  name: 'Field',
+  truncateText: true,
+  sortable: true,
+}, {
+  name: 'Types',
+  render: ({ types }) => types.join(', '),
+}];
 
-  return (
-    <Fragment>
-      <EuiTitle size="s">
-        <h3>
-          <FormattedMessage
-            id="xpack.rollupJobs.jobDetails.tabMetrics.sectionMetrics.title"
-            defaultMessage="Metrics"
-          />
-        </h3>
-      </EuiTitle>
-
-      <EuiSpacer size="s" />
-
-      <EuiDescriptionList listItems={listMetrics} />
-    </Fragment>
-  );
-};
+export const TabMetricsUi = ({ metrics }) => (
+  <FieldList
+    columns={columns}
+    fields={metrics}
+  />
+);
 
 export const TabMetrics = injectI18n(TabMetricsUi);