Index pattern management - EUI refactor (elastic#26857)

* Implement EuiInMemoryTable and Flyout, update tests
mattkime · Feb 16, 2019 · 732414e · 732414e
1 parent eb36a8f
commit 732414e
Show file tree

Hide file tree

Showing 33 changed files with 404 additions and 344 deletions.
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/breadcrumbs.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/breadcrumbs.js
@@ -20,14 +20,26 @@
 import { MANAGEMENT_BREADCRUMB } from 'ui/management';
 import { i18n } from '@kbn/i18n';
 
-export function getCreateBreadcrumbs() {
+export function getListBreadcrumbs() {
   return [
     MANAGEMENT_BREADCRUMB,
+    {
+      text: i18n.translate('kbn.management.indexPatterns.listBreadcrumb', {
+        defaultMessage: 'Index patterns'
+      }),
+      href: '#/management/kibana/index_patterns'
+    }
+  ];
+}
+
+export function getCreateBreadcrumbs() {
+  return [
+    ...getListBreadcrumbs(),
     {
       text: i18n.translate('kbn.management.indexPatterns.createBreadcrumb', {
         defaultMessage: 'Create index pattern'
       }),
-      href: '#/management/kibana/objects'
+      href: '#/management/kibana/index_pattern'
     }
   ];
 }
@@ -36,7 +48,7 @@ export function getEditBreadcrumbs($route) {
   const { indexPattern } = $route.current.locals;
 
   return [
-    MANAGEMENT_BREADCRUMB,
+    ...getListBreadcrumbs(),
     {
       text: indexPattern.title,
       href: `#/management/kibana/index_patterns/${indexPattern.id}`

diff --git a/...components/create_button/create_button.js → ..._patterns/create_button/create_button.tsx b/...components/create_button/create_button.js → ..._patterns/create_button/create_button.tsx
@@ -17,79 +17,58 @@
  * under the License.
  */
 
-import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
+// @ts-ignore
 import { euiColorAccent } from '@elastic/eui/dist/eui_theme_k6_light.json';
+import React, { Component, Fragment } from 'react';
 
 import {
   EuiBadge,
   EuiButton,
-  EuiPopover,
-  EuiContextMenuPanel,
   EuiContextMenuItem,
+  EuiContextMenuPanel,
   EuiDescriptionList,
-  EuiDescriptionListTitle,
   EuiDescriptionListDescription,
+  EuiDescriptionListTitle,
+  EuiPopover,
   rgbToHex,
 } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 
-export class CreateButton extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isPopoverOpen: false,
-    };
-  }
-
-  static propTypes = {
-    options: PropTypes.arrayOf(PropTypes.shape({
-      text: PropTypes.string.isRequired,
-      description: PropTypes.string,
-      onClick: PropTypes.func.isRequired,
-    })),
-  }
-
-  togglePopover = () => {
-    this.setState({
-      isPopoverOpen: !this.state.isPopoverOpen,
-    });
-  }
+interface State {
+  isPopoverOpen: boolean;
+}
 
-  closePopover = () => {
-    this.setState({
-      isPopoverOpen: false,
-    });
-  }
+interface Props {
+  options: Array<{
+    text: string;
+    description?: string;
+    testSubj?: string;
+    isBeta?: boolean;
+    onClick: () => void;
+  }>;
+}
 
-  renderBetaBadge = () => {
-    const color = rgbToHex(euiColorAccent);
-    return (
-      <EuiBadge color={color}>
-        <FormattedMessage
-          id="kbn.management.indexPatternList.createButton.betaLabel"
-          defaultMessage="Beta"
-        />
-      </EuiBadge>
-    );
+export class CreateButton extends Component<Props, State> {
+  public state = {
+    isPopoverOpen: false,
   };
 
-  render() {
-    const { options, children } =  this.props;
-    const { isPopoverOpen } =  this.state;
+  public render() {
+    const { options, children } = this.props;
+    const { isPopoverOpen } = this.state;
 
-    if(!options || !options.length) {
+    if (!options || !options.length) {
       return null;
     }
 
-    if(options.length === 1) {
+    if (options.length === 1) {
       return (
         <EuiButton
           data-test-subj="createIndexPatternButton"
           fill={true}
-          size={'s'}
           onClick={options[0].onClick}
+          iconType="plusInCircle"
         >
           {children}
         </EuiButton>
@@ -109,7 +88,7 @@ export class CreateButton extends Component {
       </EuiButton>
     );
 
-    if(options.length > 1) {
+    if (options.length > 1) {
       return (
         <EuiPopover
           id="singlePanel"
@@ -130,12 +109,7 @@ export class CreateButton extends Component {
                   <EuiDescriptionList style={{ whiteSpace: 'nowrap' }}>
                     <EuiDescriptionListTitle>
                       {option.text}
-                      { option.isBeta ? (
-                        <Fragment>
-                          {' '}
-                          {this.renderBetaBadge()}
-                        </Fragment>
-                      ) : null }
+                      {option.isBeta ? <Fragment> {this.renderBetaBadge()}</Fragment> : null}
                     </EuiDescriptionListTitle>
                     <EuiDescriptionListDescription>
                       {option.description}
@@ -149,4 +123,28 @@ export class CreateButton extends Component {
       );
     }
   }
+
+  private togglePopover = () => {
+    this.setState({
+      isPopoverOpen: !this.state.isPopoverOpen,
+    });
+  };
+
+  private closePopover = () => {
+    this.setState({
+      isPopoverOpen: false,
+    });
+  };
+
+  private renderBetaBadge = () => {
+    const color = rgbToHex(euiColorAccent);
+    return (
+      <EuiBadge color={color}>
+        <FormattedMessage
+          id="kbn.management.indexPatternList.createButton.betaLabel"
+          defaultMessage="Beta"
+        />
+      </EuiBadge>
+    );
+  };
 }
diff --git a/...rn_list/components/create_button/index.js → ...ons/index_patterns/create_button/index.ts b/...rn_list/components/create_button/index.js → ...ons/index_patterns/create_button/index.ts
diff --git a/...ns/kibana/public/management/sections/index_patterns/create_index_pattern_prompt/index.tsx b/...ns/kibana/public/management/sections/index_patterns/create_index_pattern_prompt/index.tsx
@@ -0,0 +1,108 @@
+/*
+ * 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 {
+  EuiDescriptionList,
+  EuiDescriptionListDescription,
+  EuiDescriptionListTitle,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiHorizontalRule,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import React from 'react';
+
+export const CreateIndexPatternPrompt = ({ onClose }: { onClose: () => void }) => (
+  <EuiFlyout size="s" onClose={onClose}>
+    <EuiFlyoutHeader hasBorder>
+      <EuiText grow={false}>
+        <h2>
+          <FormattedMessage
+            id="kbn.management.indexPatternPrompt.title"
+            defaultMessage="About index patterns"
+          />
+        </h2>
+      </EuiText>
+    </EuiFlyoutHeader>
+    <EuiFlyoutBody>
+      <EuiText textAlign="left">
+        <p>
+          <FormattedMessage
+            id="kbn.management.indexPatternPrompt.subtitle"
+            defaultMessage="Index patterns allow you to bucket disparate data sources together so their shared fields may be queried in
+          Kibana."
+          />
+        </p>
+      </EuiText>
+      <EuiHorizontalRule margin="l" />
+      <EuiText textAlign="left">
+        <h3>
+          <FormattedMessage
+            id="kbn.management.indexPatternPrompt.examplesTitle"
+            defaultMessage="Examples of index patterns"
+          />
+        </h3>
+      </EuiText>
+      <EuiSpacer />
+      <EuiDescriptionList className="indexPatternListPrompt__descList">
+        <EuiDescriptionListTitle>
+          <FormattedMessage
+            id="kbn.management.indexPatternPrompt.exampleOneTitle"
+            defaultMessage="Single data source"
+          />
+        </EuiDescriptionListTitle>
+        <EuiDescriptionListDescription>
+          <FormattedMessage
+            id="kbn.management.indexPatternPrompt.exampleOne"
+            defaultMessage="Index a single data source named log-west-001 so you can build charts or query its contents fast."
+          />
+        </EuiDescriptionListDescription>
+        <EuiDescriptionListTitle>
+          <FormattedMessage
+            id="kbn.management.indexPatternPrompt.exampleTwoTitle"
+            defaultMessage="Multiple data sources"
+          />
+        </EuiDescriptionListTitle>
+        <EuiDescriptionListDescription>
+          <FormattedMessage
+            id="kbn.management.indexPatternPrompt.exampleTwo"
+            defaultMessage="Group all incoming data sources starting with log-west* so you can query against all your west coast server
+            logs."
+          />
+        </EuiDescriptionListDescription>
+        <EuiDescriptionListTitle>
+          <FormattedMessage
+            id="kbn.management.indexPatternPrompt.exampleThreeTitle"
+            defaultMessage="Custom groupings"
+          />
+        </EuiDescriptionListTitle>
+        <EuiDescriptionListDescription>
+          <FormattedMessage
+            id="kbn.management.indexPatternPrompt.exampleThree"
+            defaultMessage="Specifically group your archived, monthly, roll-up metrics of those logs into a separate index pattern so
+            you can aggregate historical trends to compare."
+          />
+        </EuiDescriptionListDescription>
+      </EuiDescriptionList>
+    </EuiFlyoutBody>
+  </EuiFlyout>
+);
diff --git a/...blic/management/sections/index_patterns/create_index_pattern_wizard/angular_template.html b/...blic/management/sections/index_patterns/create_index_pattern_wizard/angular_template.html
@@ -1,5 +1,5 @@
 <kbn-management-app section="kibana/index_patterns">
-  <kbn-management-index-patterns>
+  <div class="euiPanel euiPanel--paddingLarge">
     <div id="createIndexPatternReact"></div>
-  </kbn-management-index-patterns>
+  </div>
 </kbn-management-app>
diff --git a/...dex_pattern_wizard/components/step_time_field/components/action_buttons/action_buttons.js b/...dex_pattern_wizard/components/step_time_field/components/action_buttons/action_buttons.js
@@ -48,7 +48,7 @@ export const ActionButtons = ({
     <EuiFlexItem grow={false}>
       <EuiButton
         isDisabled={!submittable}
-        data-test-subj="createIndexPatternCreateButton"
+        data-test-subj="createIndexPatternButton"
         fill
         onClick={createIndexPattern}
       >

diff --git a/...ement/sections/index_patterns/edit_index_pattern/create_edit_field/create_edit_field.html b/...ement/sections/index_patterns/edit_index_pattern/create_edit_field/create_edit_field.html
@@ -1,12 +1,11 @@
 <kbn-management-app section="kibana/index_patterns">
-  <kbn-management-index-patterns>
+  <div class="euiPanel euiPanel--paddingLarge">
     <div class="kuiViewContent">
       <kbn-management-index-patterns-header
         index-pattern="fieldSettings.indexPattern"
       ></kbn-management-index-patterns-header>
     </div>
 
     <div id="reactFieldEditor"></div>
-
-  </kbn-management-index-patterns>
+  </div>
 </kbn-management-app>
diff --git a/...bana/public/management/sections/index_patterns/edit_index_pattern/edit_index_pattern.html b/...bana/public/management/sections/index_patterns/edit_index_pattern/edit_index_pattern.html
@@ -1,5 +1,5 @@
 <kbn-management-app section="kibana/index_patterns" omit-breadcrumb-pages="['index_patterns']">
-  <kbn-management-index-patterns>
+  <div class="euiPanel euiPanel--paddingLarge">
     <div
       ng-controller="managementIndexPatternsEdit"
       data-test-subj="editIndexPattern"
@@ -178,5 +178,5 @@
         <div id="reactSourceFiltersTable"></div>
       </div>
     </div>
-  </kbn-management-index-patterns>
+  </div>
 </kbn-management-app>
diff --git a/...kibana/public/management/sections/index_patterns/edit_index_pattern/edit_index_pattern.js b/...kibana/public/management/sections/index_patterns/edit_index_pattern/edit_index_pattern.js
@@ -34,7 +34,6 @@ import { SourceFiltersTable } from './source_filters_table';
 import { IndexedFieldsTable } from './indexed_fields_table';
 import { ScriptedFieldsTable } from './scripted_fields_table';
 import { i18n } from '@kbn/i18n';
-import chrome from 'ui/chrome';
 import { I18nContext } from 'ui/i18n';
 
 import { getEditBreadcrumbs } from '../breadcrumbs';
@@ -164,23 +163,11 @@ uiRoutes
       indexPattern: function ($route, redirectWhenMissing, indexPatterns) {
         return indexPatterns
           .get($route.current.params.indexPatternId)
-          .catch(redirectWhenMissing('/management/kibana/index_pattern'));
+          .catch(redirectWhenMissing('/management/kibana/index_patterns'));
       }
     },
   });
 
-uiRoutes
-  .when('/management/kibana/index_patterns', {
-    redirectTo() {
-      const defaultIndex = chrome.getUiSettingsClient().get('defaultIndex');
-      if (defaultIndex) {
-        return `/management/kibana/index_patterns/${defaultIndex}`;
-      }
-
-      return '/management/kibana/index_pattern';
-    }
-  });
-
 uiModules.get('apps/management')
   .controller('managementIndexPatternsEdit', function (
     $scope, $location, $route, config, indexPatterns, Private, AppState, docTitle, confirmModal) {

diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/index.html b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/index.html
@@ -1,11 +1,5 @@
-<div class="col-md-2 sidebar-container" role="region" aria-label="{{::'kbn.management.editIndexPatternAria' | i18n: { defaultMessage: 'Index patterns' } }}">
-  <div class="sidebar-list">
+<div>
+  <div>
     <div id="indexPatternListReact" role="region" aria-label="{{'kbn.management.editIndexPatternLiveRegionAriaLabel' | i18n: { defaultMessage: 'Index patterns' } }}"></div>
   </div>
 </div>
-
-<div class="col-md-10">
-  <div class="euiPanel euiPanel--paddingLarge">
-    <div ng-transclude></div>
-  </div>
-</div>