From 2a885928f40777333b2edc5ff2d169989beea9eb Mon Sep 17 00:00:00 2001
From: Jean-Louis Leysens <jloleysens@gmail.com>
Date: Tue, 7 Apr 2020 15:39:42 +0200
Subject: [PATCH 01/11] First iteration of ingest table

---
 .../components/expandable_text.tsx            | 40 +++++++++
 .../public/application/components/index.ts    |  7 ++
 .../public/application/index.tsx              |  3 +-
 .../application/mount_management_section.ts   |  2 +
 .../pipelines_list/pipelines_list.tsx         | 85 +++++++++++++++++--
 .../public/application/services/api.ts        |  7 +-
 .../ingest_pipelines/public/shared_imports.ts |  4 +
 7 files changed, 136 insertions(+), 12 deletions(-)
 create mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/expandable_text.tsx
 create mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/index.ts

diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/expandable_text.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/expandable_text.tsx
new file mode 100644
index 0000000000000..7dfe7c142dd54
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/expandable_text.tsx
@@ -0,0 +1,40 @@
+/*
+ * 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.
+ */
+import React, { useState, FunctionComponent } from 'react';
+import { EuiLink, EuiText } from '@elastic/eui';
+
+interface Props {
+  text: string;
+  charLimit?: number;
+}
+
+const DEFAULT_CHAR_LIMIT = 25;
+
+export const ExpandableText: FunctionComponent<Props> = ({
+  text,
+  charLimit = DEFAULT_CHAR_LIMIT,
+}) => {
+  const [isExpanded, setExpanded] = useState(false);
+  const exceedsCharLimit = text.length > charLimit;
+
+  const processedText = exceedsCharLimit
+    ? isExpanded
+      ? text
+      : text.substr(0, charLimit) + '...'
+    : text;
+
+  return (
+    <EuiText size="s">
+      {processedText}
+      {exceedsCharLimit && (
+        <>
+          &nbsp;
+          <EuiLink onClick={() => setExpanded(!isExpanded)}>{isExpanded ? 'Less' : 'More'}</EuiLink>
+        </>
+      )}
+    </EuiText>
+  );
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/index.ts b/x-pack/plugins/ingest_pipelines/public/application/components/index.ts
new file mode 100644
index 0000000000000..2ade8f98dcc7f
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/index.ts
@@ -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 { ExpandableText } from './expandable_text';
diff --git a/x-pack/plugins/ingest_pipelines/public/application/index.tsx b/x-pack/plugins/ingest_pipelines/public/application/index.tsx
index 752d1ef270128..f19863b9d233f 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/index.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/index.tsx
@@ -6,7 +6,7 @@
 
 import React, { ReactNode } from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
-import { ChromeBreadcrumb } from 'src/core/public';
+import { ChromeBreadcrumb, IToasts } from 'src/core/public';
 import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public';
 
 import { App } from './app';
@@ -17,6 +17,7 @@ export interface AppServices {
   metric: UiMetricService;
   documentation: DocumentationService;
   api: ApiService;
+  notifications: IToasts;
 }
 
 export const renderApp = (
diff --git a/x-pack/plugins/ingest_pipelines/public/application/mount_management_section.ts b/x-pack/plugins/ingest_pipelines/public/application/mount_management_section.ts
index 29db501488e53..ed458f9a47cd3 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/mount_management_section.ts
+++ b/x-pack/plugins/ingest_pipelines/public/application/mount_management_section.ts
@@ -18,6 +18,7 @@ export async function mountManagementSection(
   const [coreStart] = await coreSetup.getStartServices();
   const {
     docLinks,
+    notifications,
     i18n: { Context: I18nContext },
   } = coreStart;
 
@@ -33,6 +34,7 @@ export async function mountManagementSection(
 
   const services = {
     setBreadcrumbs,
+    notifications: notifications.toasts,
     metric: uiMetricService,
     documentation: documentationService,
     api: apiService,
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/pipelines_list.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/pipelines_list.tsx
index d2ea0f77ebcf3..bc56e329eab1a 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/pipelines_list.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/pipelines_list.tsx
@@ -5,6 +5,8 @@
  */
 
 import React, { useEffect } from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 import {
   EuiPageBody,
@@ -13,13 +15,17 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiButtonEmpty,
+  EuiInMemoryTable,
+  EuiCallOut,
+  EuiEmptyPrompt,
+  EuiButton,
+  EuiLink,
 } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiSpacer, EuiText } from '@elastic/eui';
 
-import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
-
+import { useKibana } from '../../../shared_imports';
 import { UIM_PIPELINES_LIST_LOAD } from '../../constants';
+import { ExpandableText } from '../../components';
 
 export const PipelinesList: React.FunctionComponent = () => {
   const { services } = useKibana();
@@ -29,6 +35,8 @@ export const PipelinesList: React.FunctionComponent = () => {
     services.metric.trackUiMetric(UIM_PIPELINES_LIST_LOAD);
   }, [services.metric]);
 
+  const { data, isLoading, error } = services.api.useLoadPipelines();
+
   return (
     <EuiPageBody>
       <EuiPageContent>
@@ -37,7 +45,7 @@ export const PipelinesList: React.FunctionComponent = () => {
             <EuiFlexItem>
               <h1 data-test-subj="appTitle">
                 <FormattedMessage
-                  id="xpack.ingestPipelines.pipelinesListTitle"
+                  id="xpack.ingestPipelines.list.listTitle"
                   defaultMessage="Ingest Pipelines"
                 />
               </h1>
@@ -49,24 +57,85 @@ export const PipelinesList: React.FunctionComponent = () => {
                 iconType="help"
               >
                 <FormattedMessage
-                  id="xpack.ingestPipelines.pipelinesListDocsLinkText"
+                  id="xpack.ingestPipelines.list.pipelinesDocsLinkText"
                   defaultMessage="Ingest Pipelines docs"
                 />
               </EuiButtonEmpty>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiTitle>
-
         <EuiSpacer size="s" />
-
         <EuiTitle size="s">
           <EuiText color="subdued">
             <FormattedMessage
-              id="xpack.ingestPipelines.pipelinesListDescription"
+              id="xpack.ingestPipelines.list.pipelinesDescription"
               defaultMessage="Use ingest node pipelines to pre-process documents before indexing."
             />
           </EuiText>
         </EuiTitle>
+        <EuiSpacer size="m" />
+        {/* Error call out or pipeline table */}
+        {error ? (
+          <EuiCallOut
+            iconType="faceSad"
+            color="danger"
+            title={i18n.translate('xpack.ingestPipelines.list.loadErrorTitle', {
+              defaultMessage: 'Cannot load pipelines, please refresh the page to try again.',
+            })}
+          />
+        ) : (
+          <EuiInMemoryTable
+            loading={isLoading}
+            search={{
+              box: {
+                incremental: true,
+              },
+            }}
+            pagination={{
+              initialPageSize: 5,
+              pageSizeOptions: [3, 5, 8],
+            }}
+            message={
+              <EuiEmptyPrompt
+                titleSize="xs"
+                title={
+                  <h3>
+                    {i18n.translate('xpack.ingestPipelines.list.table.emptyPromptTitle', {
+                      defaultMessage: 'No pipelines',
+                    })}
+                  </h3>
+                }
+                actions={
+                  <EuiButton onClick={() => {}}>
+                    {i18n.translate(
+                      'xpack.ingestPipelines.list.table.emptyPrompt.createButtonLabel',
+                      { defaultMessage: 'Create Pipeline' }
+                    )}
+                  </EuiButton>
+                }
+              />
+            }
+            columns={[
+              {
+                field: 'name',
+                name: i18n.translate('xpack.ingestPipelines.list.table.nameColumnTitle', {
+                  defaultMessage: 'Name',
+                }),
+                render: (name: string) => <EuiLink onClick={() => {}}>{name}</EuiLink>,
+              },
+              {
+                field: 'description',
+                name: i18n.translate('xpack.ingestPipelines.list.table.descriptionColumnTitle', {
+                  defaultMessage: 'Description',
+                }),
+                render: (description: string) => (
+                  <ExpandableText charLimit={50} text={description} />
+                ),
+              },
+            ]}
+            items={(data as any) ?? []}
+          />
+        )}
       </EuiPageContent>
     </EuiPageBody>
   );
diff --git a/x-pack/plugins/ingest_pipelines/public/application/services/api.ts b/x-pack/plugins/ingest_pipelines/public/application/services/api.ts
index 71ebb4b25d829..98d5c0db7b867 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/services/api.ts
+++ b/x-pack/plugins/ingest_pipelines/public/application/services/api.ts
@@ -6,6 +6,7 @@
 import { HttpSetup } from 'src/core/public';
 
 import { API_BASE_PATH } from '../../../common/constants';
+import { Pipeline } from '../../../common/types';
 import {
   UseRequestConfig,
   sendRequest as _sendRequest,
@@ -15,11 +16,11 @@ import {
 export class ApiService {
   private client: HttpSetup | undefined;
 
-  private useRequest(config: UseRequestConfig) {
+  private useRequest<R = any, E = Error>(config: UseRequestConfig) {
     if (!this.client) {
       throw new Error('Api service has not be initialized.');
     }
-    return _useRequest(this.client, config);
+    return _useRequest<R, E>(this.client, config);
   }
 
   public setup(httpClient: HttpSetup): void {
@@ -27,7 +28,7 @@ export class ApiService {
   }
 
   public useLoadPipelines() {
-    return this.useRequest({
+    return this.useRequest<Pipeline[]>({
       path: API_BASE_PATH,
       method: 'get',
     });
diff --git a/x-pack/plugins/ingest_pipelines/public/shared_imports.ts b/x-pack/plugins/ingest_pipelines/public/shared_imports.ts
index 1a278a04adedf..2b69b2e6ac6ef 100644
--- a/x-pack/plugins/ingest_pipelines/public/shared_imports.ts
+++ b/x-pack/plugins/ingest_pipelines/public/shared_imports.ts
@@ -3,6 +3,8 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+import { useKibana as _useKibana } from '../../../../src/plugins/kibana_react/public';
+import { AppServices } from './application';
 
 export {
   SendRequestConfig,
@@ -11,3 +13,5 @@ export {
   sendRequest,
   useRequest,
 } from '../../../../src/plugins/es_ui_shared/public/request/np_ready_request';
+
+export const useKibana = () => _useKibana<AppServices>();

From 466f690b107484af417bc25e0c5a1627480eab4b Mon Sep 17 00:00:00 2001
From: Jean-Louis Leysens <jloleysens@gmail.com>
Date: Tue, 7 Apr 2020 15:49:04 +0200
Subject: [PATCH 02/11] Add action placeholders

---
 .../pipelines_list/pipelines_list.tsx         | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/pipelines_list.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/pipelines_list.tsx
index bc56e329eab1a..ebe11235b8098 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/pipelines_list.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/pipelines_list.tsx
@@ -132,6 +132,30 @@ export const PipelinesList: React.FunctionComponent = () => {
                   <ExpandableText charLimit={50} text={description} />
                 ),
               },
+              {
+                name: i18n.translate('xpack.ingestPipelines.list.table.actionColumnTitle', {
+                  defaultMessage: 'Actions',
+                }),
+                actions: [
+                  {
+                    name: i18n.translate('xpack.ingestPipelines.list.table.editActionLabel', {
+                      defaultMessage: 'Edit',
+                    }),
+                    icon: 'pencil',
+                    type: 'icon',
+                    onClick: () => {},
+                  },
+                  {
+                    name: i18n.translate('xpack.ingestPipelines.list.table.deleteActionLabel', {
+                      defaultMessage: 'Delete',
+                    }),
+                    type: 'icon',
+                    icon: 'trash',
+                    color: 'danger',
+                    onClick: () => {},
+                  },
+                ],
+              } as any,
             ]}
             items={(data as any) ?? []}
           />

From 86f50c83f9cd6d3758464c1c4323f15caf2447e7 Mon Sep 17 00:00:00 2001
From: Jean-Louis Leysens <jloleysens@gmail.com>
Date: Wed, 8 Apr 2020 11:27:16 +0200
Subject: [PATCH 03/11] Refactor list and address PR feedback

Refactored the list into smaller pieces and assemble in main.tsx

Also addressed feedback on copy, removed unused notifications dep
---
 .../public/application/index.tsx              |   3 +-
 .../application/mount_management_section.ts   |   2 -
 .../sections/pipelines_list/details.tsx       |  22 +++
 .../sections/pipelines_list/empty_list.tsx    |  33 ++++
 .../sections/pipelines_list/index.ts          |   2 +-
 .../sections/pipelines_list/main.tsx          | 114 ++++++++++++
 .../pipelines_list/pipelines_list.tsx         | 166 ------------------
 .../sections/pipelines_list/table.tsx         |  87 +++++++++
 8 files changed, 258 insertions(+), 171 deletions(-)
 create mode 100644 x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx
 create mode 100644 x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/empty_list.tsx
 create mode 100644 x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx
 delete mode 100644 x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/pipelines_list.tsx
 create mode 100644 x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/table.tsx

diff --git a/x-pack/plugins/ingest_pipelines/public/application/index.tsx b/x-pack/plugins/ingest_pipelines/public/application/index.tsx
index f19863b9d233f..752d1ef270128 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/index.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/index.tsx
@@ -6,7 +6,7 @@
 
 import React, { ReactNode } from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
-import { ChromeBreadcrumb, IToasts } from 'src/core/public';
+import { ChromeBreadcrumb } from 'src/core/public';
 import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public';
 
 import { App } from './app';
@@ -17,7 +17,6 @@ export interface AppServices {
   metric: UiMetricService;
   documentation: DocumentationService;
   api: ApiService;
-  notifications: IToasts;
 }
 
 export const renderApp = (
diff --git a/x-pack/plugins/ingest_pipelines/public/application/mount_management_section.ts b/x-pack/plugins/ingest_pipelines/public/application/mount_management_section.ts
index ed458f9a47cd3..29db501488e53 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/mount_management_section.ts
+++ b/x-pack/plugins/ingest_pipelines/public/application/mount_management_section.ts
@@ -18,7 +18,6 @@ export async function mountManagementSection(
   const [coreStart] = await coreSetup.getStartServices();
   const {
     docLinks,
-    notifications,
     i18n: { Context: I18nContext },
   } = coreStart;
 
@@ -34,7 +33,6 @@ export async function mountManagementSection(
 
   const services = {
     setBreadcrumbs,
-    notifications: notifications.toasts,
     metric: uiMetricService,
     documentation: documentationService,
     api: apiService,
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx
new file mode 100644
index 0000000000000..b624e64a8cfda
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx
@@ -0,0 +1,22 @@
+/*
+ * 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.
+ */
+
+import React, { FunctionComponent } from 'react';
+import { EuiFlyout, EuiFlyoutHeader, EuiFlyoutBody } from '@elastic/eui';
+import { Pipeline } from '../../../../common/types';
+
+export interface Props {
+  visible: boolean;
+  pipeline: Pipeline;
+}
+
+export const PipelineDetails: FunctionComponent<Props> = ({ pipeline, visible }) => {
+  if (!visible) {
+    return null;
+  }
+
+  return;
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/empty_list.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/empty_list.tsx
new file mode 100644
index 0000000000000..e86a895d6b9dc
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/empty_list.tsx
@@ -0,0 +1,33 @@
+/*
+ * 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.
+ */
+import React, { FunctionComponent } from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
+
+interface Props {
+  onClick: () => void;
+}
+
+export const EmptyList: FunctionComponent<Props> = ({ onClick }) => (
+  <EuiEmptyPrompt
+    iconType="managementApp"
+    titleSize="xs"
+    title={
+      <h1>
+        {i18n.translate('xpack.ingestPipelines.list.table.emptyPromptTitle', {
+          defaultMessage: 'Create your first pipeline',
+        })}
+      </h1>
+    }
+    actions={
+      <EuiButton onClick={onClick}>
+        {i18n.translate('xpack.ingestPipelines.list.table.emptyPrompt.createButtonLabel', {
+          defaultMessage: 'Create pipeline',
+        })}
+      </EuiButton>
+    }
+  />
+);
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/index.ts b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/index.ts
index d750aaba177ba..a541e3bb85fd0 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/index.ts
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/index.ts
@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { PipelinesList } from './pipelines_list';
+export { PipelinesList } from './main';
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx
new file mode 100644
index 0000000000000..314118e632e96
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx
@@ -0,0 +1,114 @@
+/*
+ * 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.
+ */
+
+import React, { useEffect } from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import {
+  EuiPageBody,
+  EuiPageContent,
+  EuiTitle,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonEmpty,
+  EuiCallOut,
+  EuiLoadingSpinner,
+} from '@elastic/eui';
+
+import { EuiSpacer, EuiText } from '@elastic/eui';
+
+import { useKibana } from '../../../shared_imports';
+import { UIM_PIPELINES_LIST_LOAD } from '../../constants';
+
+import { EmptyList } from './empty_list';
+import { PipelineTable } from './table';
+
+export const PipelinesList: React.FunctionComponent = () => {
+  const { services } = useKibana();
+
+  // Track component loaded
+  useEffect(() => {
+    services.metric.trackUiMetric(UIM_PIPELINES_LIST_LOAD);
+  }, [services.metric]);
+
+  const { data, isLoading, error } = services.api.useLoadPipelines();
+
+  let content: React.ReactNode;
+
+  if (isLoading) {
+    content = (
+      <EuiFlexGroup justifyContent="spaceAround">
+        <EuiFlexItem grow={false}>
+          <EuiLoadingSpinner size="xl" />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  } else if (data?.length) {
+    content = (
+      <PipelineTable
+        onEditPipelineClick={() => {}}
+        onDeletePipelineClick={() => {}}
+        pipelines={data}
+      />
+    );
+  } else {
+    content = <EmptyList onClick={() => {}} />;
+  }
+
+  return (
+    <EuiPageBody>
+      <EuiPageContent>
+        <EuiTitle size="l">
+          <EuiFlexGroup alignItems="center">
+            <EuiFlexItem>
+              <h1 data-test-subj="appTitle">
+                <FormattedMessage
+                  id="xpack.ingestPipelines.list.listTitle"
+                  defaultMessage="Ingest Pipelines"
+                />
+              </h1>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty
+                href={services.documentation.getIngestNodeUrl()}
+                target="_blank"
+                iconType="help"
+              >
+                <FormattedMessage
+                  id="xpack.ingestPipelines.list.pipelinesDocsLinkText"
+                  defaultMessage="Ingest Pipelines docs"
+                />
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiTitle>
+        <EuiSpacer size="s" />
+        <EuiTitle size="s">
+          <EuiText color="subdued">
+            <FormattedMessage
+              id="xpack.ingestPipelines.list.pipelinesDescription"
+              defaultMessage="Use ingest node pipelines to pre-process documents before indexing."
+            />
+          </EuiText>
+        </EuiTitle>
+        <EuiSpacer size="m" />
+        {/* Error call out or pipeline table */}
+        {error ? (
+          <EuiCallOut
+            iconType="faceSad"
+            color="danger"
+            title={i18n.translate('xpack.ingestPipelines.list.loadErrorTitle', {
+              defaultMessage: 'Cannot load pipelines, please refresh the page to try again.',
+            })}
+          />
+        ) : (
+          content
+        )}
+      </EuiPageContent>
+    </EuiPageBody>
+  );
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/pipelines_list.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/pipelines_list.tsx
deleted file mode 100644
index ebe11235b8098..0000000000000
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/pipelines_list.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-/*
- * 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.
- */
-
-import React, { useEffect } from 'react';
-import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n/react';
-
-import {
-  EuiPageBody,
-  EuiPageContent,
-  EuiTitle,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiButtonEmpty,
-  EuiInMemoryTable,
-  EuiCallOut,
-  EuiEmptyPrompt,
-  EuiButton,
-  EuiLink,
-} from '@elastic/eui';
-import { EuiSpacer, EuiText } from '@elastic/eui';
-
-import { useKibana } from '../../../shared_imports';
-import { UIM_PIPELINES_LIST_LOAD } from '../../constants';
-import { ExpandableText } from '../../components';
-
-export const PipelinesList: React.FunctionComponent = () => {
-  const { services } = useKibana();
-
-  // Track component loaded
-  useEffect(() => {
-    services.metric.trackUiMetric(UIM_PIPELINES_LIST_LOAD);
-  }, [services.metric]);
-
-  const { data, isLoading, error } = services.api.useLoadPipelines();
-
-  return (
-    <EuiPageBody>
-      <EuiPageContent>
-        <EuiTitle size="l">
-          <EuiFlexGroup alignItems="center">
-            <EuiFlexItem>
-              <h1 data-test-subj="appTitle">
-                <FormattedMessage
-                  id="xpack.ingestPipelines.list.listTitle"
-                  defaultMessage="Ingest Pipelines"
-                />
-              </h1>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                href={services.documentation.getIngestNodeUrl()}
-                target="_blank"
-                iconType="help"
-              >
-                <FormattedMessage
-                  id="xpack.ingestPipelines.list.pipelinesDocsLinkText"
-                  defaultMessage="Ingest Pipelines docs"
-                />
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiTitle>
-        <EuiSpacer size="s" />
-        <EuiTitle size="s">
-          <EuiText color="subdued">
-            <FormattedMessage
-              id="xpack.ingestPipelines.list.pipelinesDescription"
-              defaultMessage="Use ingest node pipelines to pre-process documents before indexing."
-            />
-          </EuiText>
-        </EuiTitle>
-        <EuiSpacer size="m" />
-        {/* Error call out or pipeline table */}
-        {error ? (
-          <EuiCallOut
-            iconType="faceSad"
-            color="danger"
-            title={i18n.translate('xpack.ingestPipelines.list.loadErrorTitle', {
-              defaultMessage: 'Cannot load pipelines, please refresh the page to try again.',
-            })}
-          />
-        ) : (
-          <EuiInMemoryTable
-            loading={isLoading}
-            search={{
-              box: {
-                incremental: true,
-              },
-            }}
-            pagination={{
-              initialPageSize: 5,
-              pageSizeOptions: [3, 5, 8],
-            }}
-            message={
-              <EuiEmptyPrompt
-                titleSize="xs"
-                title={
-                  <h3>
-                    {i18n.translate('xpack.ingestPipelines.list.table.emptyPromptTitle', {
-                      defaultMessage: 'No pipelines',
-                    })}
-                  </h3>
-                }
-                actions={
-                  <EuiButton onClick={() => {}}>
-                    {i18n.translate(
-                      'xpack.ingestPipelines.list.table.emptyPrompt.createButtonLabel',
-                      { defaultMessage: 'Create Pipeline' }
-                    )}
-                  </EuiButton>
-                }
-              />
-            }
-            columns={[
-              {
-                field: 'name',
-                name: i18n.translate('xpack.ingestPipelines.list.table.nameColumnTitle', {
-                  defaultMessage: 'Name',
-                }),
-                render: (name: string) => <EuiLink onClick={() => {}}>{name}</EuiLink>,
-              },
-              {
-                field: 'description',
-                name: i18n.translate('xpack.ingestPipelines.list.table.descriptionColumnTitle', {
-                  defaultMessage: 'Description',
-                }),
-                render: (description: string) => (
-                  <ExpandableText charLimit={50} text={description} />
-                ),
-              },
-              {
-                name: i18n.translate('xpack.ingestPipelines.list.table.actionColumnTitle', {
-                  defaultMessage: 'Actions',
-                }),
-                actions: [
-                  {
-                    name: i18n.translate('xpack.ingestPipelines.list.table.editActionLabel', {
-                      defaultMessage: 'Edit',
-                    }),
-                    icon: 'pencil',
-                    type: 'icon',
-                    onClick: () => {},
-                  },
-                  {
-                    name: i18n.translate('xpack.ingestPipelines.list.table.deleteActionLabel', {
-                      defaultMessage: 'Delete',
-                    }),
-                    type: 'icon',
-                    icon: 'trash',
-                    color: 'danger',
-                    onClick: () => {},
-                  },
-                ],
-              } as any,
-            ]}
-            items={(data as any) ?? []}
-          />
-        )}
-      </EuiPageContent>
-    </EuiPageBody>
-  );
-};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/table.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/table.tsx
new file mode 100644
index 0000000000000..a7321564e54b8
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/table.tsx
@@ -0,0 +1,87 @@
+/*
+ * 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.
+ */
+import React, { FunctionComponent } from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiInMemoryTable, EuiLink } from '@elastic/eui';
+
+import { Pipeline } from '../../../../common/types';
+
+import { ExpandableText } from '../../components';
+
+export interface Props {
+  pipelines: Pipeline[];
+  onEditPipelineClick: (pipeline: Pipeline) => void;
+  onDeletePipelineClick: (pipeline: Pipeline) => void;
+}
+
+export const PipelineTable: FunctionComponent<Props> = ({
+  pipelines,
+  onEditPipelineClick,
+  onDeletePipelineClick,
+}) => {
+  return (
+    <EuiInMemoryTable
+      search={{
+        box: {
+          incremental: true,
+        },
+      }}
+      pagination={{
+        initialPageSize: 10,
+        pageSizeOptions: [10, 20, 50],
+      }}
+      columns={[
+        {
+          field: 'name',
+          name: i18n.translate('xpack.ingestPipelines.list.table.nameColumnTitle', {
+            defaultMessage: 'Name',
+          }),
+          render: (name: any) => <EuiLink onClick={() => {}}>{name}</EuiLink>,
+        },
+        {
+          field: 'description',
+          name: i18n.translate('xpack.ingestPipelines.list.table.descriptionColumnTitle', {
+            defaultMessage: 'Description',
+          }),
+          render: (description: any) => <ExpandableText charLimit={50} text={description} />,
+        },
+        {
+          name: i18n.translate('xpack.ingestPipelines.list.table.actionColumnTitle', {
+            defaultMessage: 'Actions',
+          }),
+          actions: [
+            {
+              name: i18n.translate('xpack.ingestPipelines.list.table.editActionLabel', {
+                defaultMessage: 'Edit',
+              }),
+              description: i18n.translate(
+                'xpack.ingestPipelines.list.table.editActionDescription',
+                { defaultMessage: 'Edit a pipeline' }
+              ),
+              type: 'icon',
+              icon: 'pencil',
+              onClick: onEditPipelineClick,
+            },
+            {
+              name: i18n.translate('xpack.ingestPipelines.list.table.deleteActionLabel', {
+                defaultMessage: 'Delete',
+              }),
+              description: i18n.translate(
+                'xpack.ingestPipelines.list.table.deleteActionDescription',
+                { defaultMessage: 'Delete a pipeline' }
+              ),
+              type: 'icon',
+              icon: 'trash',
+              color: 'danger',
+              onClick: onDeletePipelineClick,
+            },
+          ],
+        },
+      ]}
+      items={pipelines ?? []}
+    />
+  );
+};

From 4804b65f29132607e006a0faec8a068712c81834 Mon Sep 17 00:00:00 2001
From: Jean-Louis Leysens <jloleysens@gmail.com>
Date: Wed, 8 Apr 2020 11:47:58 +0200
Subject: [PATCH 04/11] WiP on flyout

Showing name in title
---
 .../components/expandable_text.tsx            |  40 -------
 .../public/application/components/index.ts    |   7 --
 .../sections/pipelines_list/details.tsx       |  26 ++--
 .../sections/pipelines_list/main.tsx          | 113 ++++++++++--------
 .../sections/pipelines_list/table.tsx         |  15 +--
 5 files changed, 86 insertions(+), 115 deletions(-)
 delete mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/expandable_text.tsx
 delete mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/index.ts

diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/expandable_text.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/expandable_text.tsx
deleted file mode 100644
index 7dfe7c142dd54..0000000000000
--- a/x-pack/plugins/ingest_pipelines/public/application/components/expandable_text.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * 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.
- */
-import React, { useState, FunctionComponent } from 'react';
-import { EuiLink, EuiText } from '@elastic/eui';
-
-interface Props {
-  text: string;
-  charLimit?: number;
-}
-
-const DEFAULT_CHAR_LIMIT = 25;
-
-export const ExpandableText: FunctionComponent<Props> = ({
-  text,
-  charLimit = DEFAULT_CHAR_LIMIT,
-}) => {
-  const [isExpanded, setExpanded] = useState(false);
-  const exceedsCharLimit = text.length > charLimit;
-
-  const processedText = exceedsCharLimit
-    ? isExpanded
-      ? text
-      : text.substr(0, charLimit) + '...'
-    : text;
-
-  return (
-    <EuiText size="s">
-      {processedText}
-      {exceedsCharLimit && (
-        <>
-          &nbsp;
-          <EuiLink onClick={() => setExpanded(!isExpanded)}>{isExpanded ? 'Less' : 'More'}</EuiLink>
-        </>
-      )}
-    </EuiText>
-  );
-};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/index.ts b/x-pack/plugins/ingest_pipelines/public/application/components/index.ts
deleted file mode 100644
index 2ade8f98dcc7f..0000000000000
--- a/x-pack/plugins/ingest_pipelines/public/application/components/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/*
- * 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 { ExpandableText } from './expandable_text';
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx
index b624e64a8cfda..8d59f77b301eb 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx
@@ -5,18 +5,28 @@
  */
 
 import React, { FunctionComponent } from 'react';
-import { EuiFlyout, EuiFlyoutHeader, EuiFlyoutBody } from '@elastic/eui';
+import { i18n } from '@kbn/118n';
+import { EuiFlyout, EuiFlyoutHeader, EuiFlyoutBody, EuiTitle } from '@elastic/eui';
 import { Pipeline } from '../../../../common/types';
 
 export interface Props {
-  visible: boolean;
   pipeline: Pipeline;
+  onClose: () => void;
 }
 
-export const PipelineDetails: FunctionComponent<Props> = ({ pipeline, visible }) => {
-  if (!visible) {
-    return null;
-  }
-
-  return;
+export const PipelineDetails: FunctionComponent<Props> = ({ pipeline, onClose }) => {
+  return (
+    <EuiFlyout
+      onClose={onClose}
+      aria-labelledby="pipelineDetailsFlyoutTitle"
+      size="m"
+      maxWidth={550}
+    >
+      <EuiFlyoutHeader>
+        <EuiTitle id="pipelineDetailsFlyoutTitle">
+          <h2>{pipeline.name}</h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+    </EuiFlyout>
+  );
 };
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx
index 314118e632e96..6b48ea0bca8b0 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
@@ -21,15 +21,19 @@ import {
 
 import { EuiSpacer, EuiText } from '@elastic/eui';
 
+import { Pipeline } from '../../../../common/types';
 import { useKibana } from '../../../shared_imports';
 import { UIM_PIPELINES_LIST_LOAD } from '../../constants';
 
 import { EmptyList } from './empty_list';
 import { PipelineTable } from './table';
+import { PipelineDetails } from './details';
 
 export const PipelinesList: React.FunctionComponent = () => {
   const { services } = useKibana();
 
+  const [selectedPipeline, setSelectedPipeline] = useState<Pipeline | undefined>(undefined);
+
   // Track component loaded
   useEffect(() => {
     services.metric.trackUiMetric(UIM_PIPELINES_LIST_LOAD);
@@ -52,6 +56,7 @@ export const PipelinesList: React.FunctionComponent = () => {
       <PipelineTable
         onEditPipelineClick={() => {}}
         onDeletePipelineClick={() => {}}
+        onViewPipelineClick={setSelectedPipeline}
         pipelines={data}
       />
     );
@@ -60,55 +65,63 @@ export const PipelinesList: React.FunctionComponent = () => {
   }
 
   return (
-    <EuiPageBody>
-      <EuiPageContent>
-        <EuiTitle size="l">
-          <EuiFlexGroup alignItems="center">
-            <EuiFlexItem>
-              <h1 data-test-subj="appTitle">
-                <FormattedMessage
-                  id="xpack.ingestPipelines.list.listTitle"
-                  defaultMessage="Ingest Pipelines"
-                />
-              </h1>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                href={services.documentation.getIngestNodeUrl()}
-                target="_blank"
-                iconType="help"
-              >
-                <FormattedMessage
-                  id="xpack.ingestPipelines.list.pipelinesDocsLinkText"
-                  defaultMessage="Ingest Pipelines docs"
-                />
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiTitle>
-        <EuiSpacer size="s" />
-        <EuiTitle size="s">
-          <EuiText color="subdued">
-            <FormattedMessage
-              id="xpack.ingestPipelines.list.pipelinesDescription"
-              defaultMessage="Use ingest node pipelines to pre-process documents before indexing."
+    <>
+      <EuiPageBody>
+        <EuiPageContent>
+          <EuiTitle size="l">
+            <EuiFlexGroup alignItems="center">
+              <EuiFlexItem>
+                <h1 data-test-subj="appTitle">
+                  <FormattedMessage
+                    id="xpack.ingestPipelines.list.listTitle"
+                    defaultMessage="Ingest Pipelines"
+                  />
+                </h1>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiButtonEmpty
+                  href={services.documentation.getIngestNodeUrl()}
+                  target="_blank"
+                  iconType="help"
+                >
+                  <FormattedMessage
+                    id="xpack.ingestPipelines.list.pipelinesDocsLinkText"
+                    defaultMessage="Ingest Pipelines docs"
+                  />
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiTitle>
+          <EuiSpacer size="s" />
+          <EuiTitle size="s">
+            <EuiText color="subdued">
+              <FormattedMessage
+                id="xpack.ingestPipelines.list.pipelinesDescription"
+                defaultMessage="Use ingest node pipelines to pre-process documents before indexing."
+              />
+            </EuiText>
+          </EuiTitle>
+          <EuiSpacer size="m" />
+          {/* Error call out or pipeline table */}
+          {error ? (
+            <EuiCallOut
+              iconType="faceSad"
+              color="danger"
+              title={i18n.translate('xpack.ingestPipelines.list.loadErrorTitle', {
+                defaultMessage: 'Cannot load pipelines, please refresh the page to try again.',
+              })}
             />
-          </EuiText>
-        </EuiTitle>
-        <EuiSpacer size="m" />
-        {/* Error call out or pipeline table */}
-        {error ? (
-          <EuiCallOut
-            iconType="faceSad"
-            color="danger"
-            title={i18n.translate('xpack.ingestPipelines.list.loadErrorTitle', {
-              defaultMessage: 'Cannot load pipelines, please refresh the page to try again.',
-            })}
-          />
-        ) : (
-          content
-        )}
-      </EuiPageContent>
-    </EuiPageBody>
+          ) : (
+            content
+          )}
+        </EuiPageContent>
+      </EuiPageBody>
+      {selectedPipeline && (
+        <PipelineDetails
+          pipeline={selectedPipeline}
+          onClose={() => setSelectedPipeline(undefined)}
+        />
+      )}
+    </>
   );
 };
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/table.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/table.tsx
index a7321564e54b8..0e5d90c891931 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/table.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/table.tsx
@@ -9,18 +9,18 @@ import { EuiInMemoryTable, EuiLink } from '@elastic/eui';
 
 import { Pipeline } from '../../../../common/types';
 
-import { ExpandableText } from '../../components';
-
 export interface Props {
   pipelines: Pipeline[];
   onEditPipelineClick: (pipeline: Pipeline) => void;
   onDeletePipelineClick: (pipeline: Pipeline) => void;
+  onViewPipelineClick: (pipeline: Pipeline) => void;
 }
 
 export const PipelineTable: FunctionComponent<Props> = ({
   pipelines,
   onEditPipelineClick,
   onDeletePipelineClick,
+  onViewPipelineClick,
 }) => {
   return (
     <EuiInMemoryTable
@@ -39,14 +39,9 @@ export const PipelineTable: FunctionComponent<Props> = ({
           name: i18n.translate('xpack.ingestPipelines.list.table.nameColumnTitle', {
             defaultMessage: 'Name',
           }),
-          render: (name: any) => <EuiLink onClick={() => {}}>{name}</EuiLink>,
-        },
-        {
-          field: 'description',
-          name: i18n.translate('xpack.ingestPipelines.list.table.descriptionColumnTitle', {
-            defaultMessage: 'Description',
-          }),
-          render: (description: any) => <ExpandableText charLimit={50} text={description} />,
+          render: (name: any, pipeline) => (
+            <EuiLink onClick={() => onViewPipelineClick(pipeline)}>{name}</EuiLink>
+          ),
         },
         {
           name: i18n.translate('xpack.ingestPipelines.list.table.actionColumnTitle', {

From 58a4deb230062d70c7c205288026b6d83cff3de1 Mon Sep 17 00:00:00 2001
From: Jean-Louis Leysens <jloleysens@gmail.com>
Date: Wed, 8 Apr 2020 11:57:20 +0200
Subject: [PATCH 05/11] Add reload button

---
 .../application/sections/pipelines_list/main.tsx      |  5 ++++-
 .../application/sections/pipelines_list/table.tsx     | 11 ++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx
index 6b48ea0bca8b0..643e037b0e99b 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx
@@ -39,7 +39,7 @@ export const PipelinesList: React.FunctionComponent = () => {
     services.metric.trackUiMetric(UIM_PIPELINES_LIST_LOAD);
   }, [services.metric]);
 
-  const { data, isLoading, error } = services.api.useLoadPipelines();
+  const { data, isLoading, error, sendRequest } = services.api.useLoadPipelines();
 
   let content: React.ReactNode;
 
@@ -54,6 +54,9 @@ export const PipelinesList: React.FunctionComponent = () => {
   } else if (data?.length) {
     content = (
       <PipelineTable
+        onReloadClick={() => {
+          sendRequest();
+        }}
         onEditPipelineClick={() => {}}
         onDeletePipelineClick={() => {}}
         onViewPipelineClick={setSelectedPipeline}
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/table.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/table.tsx
index 0e5d90c891931..cd59e1e69f74e 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/table.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/table.tsx
@@ -5,12 +5,13 @@
  */
 import React, { FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiInMemoryTable, EuiLink } from '@elastic/eui';
+import { EuiInMemoryTable, EuiLink, EuiButton } from '@elastic/eui';
 
 import { Pipeline } from '../../../../common/types';
 
 export interface Props {
   pipelines: Pipeline[];
+  onReloadClick: () => void;
   onEditPipelineClick: (pipeline: Pipeline) => void;
   onDeletePipelineClick: (pipeline: Pipeline) => void;
   onViewPipelineClick: (pipeline: Pipeline) => void;
@@ -18,6 +19,7 @@ export interface Props {
 
 export const PipelineTable: FunctionComponent<Props> = ({
   pipelines,
+  onReloadClick,
   onEditPipelineClick,
   onDeletePipelineClick,
   onViewPipelineClick,
@@ -25,6 +27,13 @@ export const PipelineTable: FunctionComponent<Props> = ({
   return (
     <EuiInMemoryTable
       search={{
+        toolsRight: (
+          <EuiButton iconType="refresh" color="secondary" onClick={onReloadClick}>
+            {i18n.translate('xpack.ingestPipelines.list.table.reloadButtonLabel', {
+              defaultMessage: 'Reload',
+            })}
+          </EuiButton>
+        ),
         box: {
           incremental: true,
         },

From cabce84dd945b60898baddd2800b136e7668097b Mon Sep 17 00:00:00 2001
From: Jean-Louis Leysens <jloleysens@gmail.com>
Date: Wed, 8 Apr 2020 12:28:41 +0200
Subject: [PATCH 06/11] Finish first version of flyout

---
 .../sections/pipelines_list/details.tsx       | 85 ++++++++++++++++++-
 .../sections/pipelines_list/main.tsx          |  2 +
 2 files changed, 84 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx
index 8d59f77b301eb..66353d81d9314 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx
@@ -5,16 +5,60 @@
  */
 
 import React, { FunctionComponent } from 'react';
-import { i18n } from '@kbn/118n';
-import { EuiFlyout, EuiFlyoutHeader, EuiFlyoutBody, EuiTitle } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import {
+  EuiFlyout,
+  EuiFlyoutHeader,
+  EuiFlyoutBody,
+  EuiTitle,
+  EuiDescriptionList,
+  EuiCodeBlock,
+  EuiFlyoutFooter,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonEmpty,
+} from '@elastic/eui';
 import { Pipeline } from '../../../../common/types';
 
 export interface Props {
   pipeline: Pipeline;
+  onEditClick: () => void;
+  onDeleteClick: () => void;
   onClose: () => void;
 }
 
-export const PipelineDetails: FunctionComponent<Props> = ({ pipeline, onClose }) => {
+export const PipelineDetails: FunctionComponent<Props> = ({
+  pipeline,
+  onClose,
+  onEditClick,
+  onDeleteClick,
+}) => {
+  const descriptionListItems = [
+    {
+      title: i18n.translate('xpack.ingestPipelines.list.pipelineDetails.descriptionTitle', {
+        defaultMessage: 'Description',
+      }),
+      description: pipeline.description ?? '',
+    },
+  ];
+
+  if (pipeline.version) {
+    descriptionListItems.push({
+      title: i18n.translate('xpack.ingestPipelines.list.pipelineDetails.versionTitle', {
+        defaultMessage: 'Version',
+      }),
+      description: String(pipeline.version),
+    });
+  }
+
+  descriptionListItems.push({
+    title: i18n.translate('xpack.ingestPipelines.list.pipelineDetails.processorsTitle', {
+      defaultMessage: 'Processors',
+    }),
+    // We use this title from the description list and display the processors in a code block underneath
+    description: '',
+  });
+
   return (
     <EuiFlyout
       onClose={onClose}
@@ -27,6 +71,41 @@ export const PipelineDetails: FunctionComponent<Props> = ({ pipeline, onClose })
           <h2>{pipeline.name}</h2>
         </EuiTitle>
       </EuiFlyoutHeader>
+
+      <EuiFlyoutBody>
+        <EuiDescriptionList listItems={descriptionListItems} />
+        <EuiCodeBlock overflowHeight={500} isCopyable language="json">
+          {JSON.stringify(pipeline.processors, null, 2)}
+        </EuiCodeBlock>
+      </EuiFlyoutBody>
+
+      <EuiFlyoutFooter>
+        <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty iconType="cross" onClick={onClose} flush="left">
+              {i18n.translate('xpack.ingestPipelines.list.pipelineDetails.closeButtonLabel', {
+                defaultMessage: 'Close',
+              })}
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          <EuiFlexGroup gutterSize="none" alignItems="center" justifyContent="flexEnd">
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty onClick={onEditClick}>
+                {i18n.translate('xpack.ingestPipelines.list.pipelineDetails.deleteButtonLabel', {
+                  defaultMessage: 'Edit',
+                })}
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty color="danger" onClick={onDeleteClick}>
+                {i18n.translate('xpack.ingestPipelines.list.pipelineDetails.deleteButtonLabel', {
+                  defaultMessage: 'Delete',
+                })}
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexGroup>
+      </EuiFlyoutFooter>
     </EuiFlyout>
   );
 };
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx
index 643e037b0e99b..823b30dde11bf 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx
@@ -123,6 +123,8 @@ export const PipelinesList: React.FunctionComponent = () => {
         <PipelineDetails
           pipeline={selectedPipeline}
           onClose={() => setSelectedPipeline(undefined)}
+          onDeleteClick={() => {}}
+          onEditClick={() => {}}
         />
       )}
     </>

From be78f6d7118e279a13b2664ab2650a19c7bdd7ec Mon Sep 17 00:00:00 2001
From: Jean-Louis Leysens <jloleysens@gmail.com>
Date: Wed, 8 Apr 2020 12:32:18 +0200
Subject: [PATCH 07/11] Slight update to copy

---
 .../public/application/sections/pipelines_list/details.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx
index 66353d81d9314..2377fbe3d3a1d 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx
@@ -53,7 +53,7 @@ export const PipelineDetails: FunctionComponent<Props> = ({
 
   descriptionListItems.push({
     title: i18n.translate('xpack.ingestPipelines.list.pipelineDetails.processorsTitle', {
-      defaultMessage: 'Processors',
+      defaultMessage: 'Processors JSON',
     }),
     // We use this title from the description list and display the processors in a code block underneath
     description: '',

From a2935f37f59d40dedea9c029435b78514d07be12 Mon Sep 17 00:00:00 2001
From: Jean-Louis Leysens <jloleysens@gmail.com>
Date: Wed, 8 Apr 2020 13:33:58 +0200
Subject: [PATCH 08/11] `delete` -> `edit`

---
 .../public/application/sections/pipelines_list/details.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx
index 2377fbe3d3a1d..1f25b47800546 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx
@@ -91,7 +91,7 @@ export const PipelineDetails: FunctionComponent<Props> = ({
           <EuiFlexGroup gutterSize="none" alignItems="center" justifyContent="flexEnd">
             <EuiFlexItem grow={false}>
               <EuiButtonEmpty onClick={onEditClick}>
-                {i18n.translate('xpack.ingestPipelines.list.pipelineDetails.deleteButtonLabel', {
+                {i18n.translate('xpack.ingestPipelines.list.pipelineDetails.editButtonLabel', {
                   defaultMessage: 'Edit',
                 })}
               </EuiButtonEmpty>

From 8d665ae3d548e152ee7008d87637d2106a7b769c Mon Sep 17 00:00:00 2001
From: Jean-Louis Leysens <jloleysens@gmail.com>
Date: Thu, 9 Apr 2020 12:06:08 +0200
Subject: [PATCH 09/11] Address PR feedback

Copy and a11y updates
---
 .../sections/pipelines_list/details.tsx       | 29 +++++++++++++------
 .../sections/pipelines_list/empty_list.tsx    |  5 ++--
 .../sections/pipelines_list/main.tsx          | 13 +++++----
 .../sections/pipelines_list/table.tsx         |  4 +--
 .../ingest_pipelines/public/shared_imports.ts |  2 ++
 5 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx
index 1f25b47800546..1c539addf2d2f 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx
@@ -12,6 +12,8 @@ import {
   EuiFlyoutBody,
   EuiTitle,
   EuiDescriptionList,
+  EuiText,
+  EuiSpacer,
   EuiCodeBlock,
   EuiFlyoutFooter,
   EuiFlexGroup,
@@ -51,14 +53,6 @@ export const PipelineDetails: FunctionComponent<Props> = ({
     });
   }
 
-  descriptionListItems.push({
-    title: i18n.translate('xpack.ingestPipelines.list.pipelineDetails.processorsTitle', {
-      defaultMessage: 'Processors JSON',
-    }),
-    // We use this title from the description list and display the processors in a code block underneath
-    description: '',
-  });
-
   return (
     <EuiFlyout
       onClose={onClose}
@@ -74,7 +68,24 @@ export const PipelineDetails: FunctionComponent<Props> = ({
 
       <EuiFlyoutBody>
         <EuiDescriptionList listItems={descriptionListItems} />
-        <EuiCodeBlock overflowHeight={500} isCopyable language="json">
+
+        <EuiSpacer size="m" />
+
+        <EuiText size="s">
+          <label htmlFor="piplineDetailsProcessorsJson">
+            <b>
+              {i18n.translate('xpack.ingestPipelines.list.pipelineDetails.processorsTitle', {
+                defaultMessage: 'Processors JSON',
+              })}
+            </b>
+          </label>
+        </EuiText>
+        <EuiCodeBlock
+          id="piplineDetailsProcessorsJson"
+          language="json"
+          overflowHeight={500}
+          isCopyable
+        >
           {JSON.stringify(pipeline.processors, null, 2)}
         </EuiCodeBlock>
       </EuiFlyoutBody>
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/empty_list.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/empty_list.tsx
index e86a895d6b9dc..c109334168da9 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/empty_list.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/empty_list.tsx
@@ -14,13 +14,12 @@ interface Props {
 export const EmptyList: FunctionComponent<Props> = ({ onClick }) => (
   <EuiEmptyPrompt
     iconType="managementApp"
-    titleSize="xs"
     title={
-      <h1>
+      <h2>
         {i18n.translate('xpack.ingestPipelines.list.table.emptyPromptTitle', {
           defaultMessage: 'Create your first pipeline',
         })}
-      </h1>
+      </h2>
     }
     actions={
       <EuiButton onClick={onClick}>
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx
index 823b30dde11bf..f6e0eb60c71ae 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx
@@ -22,7 +22,7 @@ import {
 import { EuiSpacer, EuiText } from '@elastic/eui';
 
 import { Pipeline } from '../../../../common/types';
-import { useKibana } from '../../../shared_imports';
+import { useKibana, SectionLoading } from '../../../shared_imports';
 import { UIM_PIPELINES_LIST_LOAD } from '../../constants';
 
 import { EmptyList } from './empty_list';
@@ -45,11 +45,12 @@ export const PipelinesList: React.FunctionComponent = () => {
 
   if (isLoading) {
     content = (
-      <EuiFlexGroup justifyContent="spaceAround">
-        <EuiFlexItem grow={false}>
-          <EuiLoadingSpinner size="xl" />
-        </EuiFlexItem>
-      </EuiFlexGroup>
+      <SectionLoading>
+        <FormattedMessage
+          id="xpack.ingestPipelines.list.loadingMessage"
+          defaultMessage="Loading pipelines..."
+        />
+      </SectionLoading>
     );
   } else if (data?.length) {
     content = (
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/table.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/table.tsx
index cd59e1e69f74e..fb79c062c7722 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/table.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/table.tsx
@@ -63,7 +63,7 @@ export const PipelineTable: FunctionComponent<Props> = ({
               }),
               description: i18n.translate(
                 'xpack.ingestPipelines.list.table.editActionDescription',
-                { defaultMessage: 'Edit a pipeline' }
+                { defaultMessage: 'Edit this pipeline' }
               ),
               type: 'icon',
               icon: 'pencil',
@@ -75,7 +75,7 @@ export const PipelineTable: FunctionComponent<Props> = ({
               }),
               description: i18n.translate(
                 'xpack.ingestPipelines.list.table.deleteActionDescription',
-                { defaultMessage: 'Delete a pipeline' }
+                { defaultMessage: 'Delete this pipeline' }
               ),
               type: 'icon',
               icon: 'trash',
diff --git a/x-pack/plugins/ingest_pipelines/public/shared_imports.ts b/x-pack/plugins/ingest_pipelines/public/shared_imports.ts
index 2b69b2e6ac6ef..7bcba3a638a97 100644
--- a/x-pack/plugins/ingest_pipelines/public/shared_imports.ts
+++ b/x-pack/plugins/ingest_pipelines/public/shared_imports.ts
@@ -14,4 +14,6 @@ export {
   useRequest,
 } from '../../../../src/plugins/es_ui_shared/public/request/np_ready_request';
 
+export { SectionLoading } from '../../../../src/plugins/es_ui_shared/public';
+
 export const useKibana = () => _useKibana<AppServices>();

From f710083528e1e95fce1d216b549d53a7940b1ad4 Mon Sep 17 00:00:00 2001
From: Jean-Louis Leysens <jloleysens@gmail.com>
Date: Thu, 9 Apr 2020 12:32:00 +0200
Subject: [PATCH 10/11] Add on failure JSON to flyout if it is available

---
 .../sections/pipelines_list/details.tsx       | 46 +++++++++++--------
 1 file changed, 27 insertions(+), 19 deletions(-)

diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx
index 1c539addf2d2f..2fa13b5da43e2 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx
@@ -12,9 +12,7 @@ import {
   EuiFlyoutBody,
   EuiTitle,
   EuiDescriptionList,
-  EuiText,
   EuiSpacer,
-  EuiCodeBlock,
   EuiFlyoutFooter,
   EuiFlexGroup,
   EuiFlexItem,
@@ -22,6 +20,8 @@ import {
 } from '@elastic/eui';
 import { Pipeline } from '../../../../common/types';
 
+import { PipelineDetailsJsonBlock } from './details_json_block';
+
 export interface Props {
   pipeline: Pipeline;
   onEditClick: () => void;
@@ -71,23 +71,31 @@ export const PipelineDetails: FunctionComponent<Props> = ({
 
         <EuiSpacer size="m" />
 
-        <EuiText size="s">
-          <label htmlFor="piplineDetailsProcessorsJson">
-            <b>
-              {i18n.translate('xpack.ingestPipelines.list.pipelineDetails.processorsTitle', {
-                defaultMessage: 'Processors JSON',
-              })}
-            </b>
-          </label>
-        </EuiText>
-        <EuiCodeBlock
-          id="piplineDetailsProcessorsJson"
-          language="json"
-          overflowHeight={500}
-          isCopyable
-        >
-          {JSON.stringify(pipeline.processors, null, 2)}
-        </EuiCodeBlock>
+        <PipelineDetailsJsonBlock
+          htmlForId="pipelineDetailsProcessorsJson"
+          label={i18n.translate('xpack.ingestPipelines.list.pipelineDetails.processorsTitle', {
+            defaultMessage: 'Processors JSON',
+          })}
+          json={pipeline.processors}
+        />
+
+        {/* On Failure Processor JSON */}
+        {pipeline.onFailure?.length && (
+          <>
+            <EuiSpacer size="m" />
+            <PipelineDetailsJsonBlock
+              htmlForId="pipelineDetailsOnFailureProcessorsJson"
+              label={i18n.translate(
+                'xpack.ingestPipelines.list.pipelineDetails.failureProcessorsTitle',
+                {
+                  defaultMessage: 'On failure processors JSON',
+                }
+              )}
+              json={pipeline.onFailure}
+            />
+          </>
+        )}
+        {/* End On Failure Processor JSON */}
       </EuiFlyoutBody>
 
       <EuiFlyoutFooter>

From 5236ad70f0612ad0c037898f1d3e66785e830768 Mon Sep 17 00:00:00 2001
From: Jean-Louis Leysens <jloleysens@gmail.com>
Date: Thu, 9 Apr 2020 14:03:17 +0200
Subject: [PATCH 11/11] Add details json block file and remove ununsed import

---
 .../pipelines_list/details_json_block.tsx     | 27 +++++++++++++++++++
 .../sections/pipelines_list/main.tsx          |  1 -
 2 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details_json_block.tsx

diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details_json_block.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details_json_block.tsx
new file mode 100644
index 0000000000000..b648d2445b271
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details_json_block.tsx
@@ -0,0 +1,27 @@
+/*
+ * 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.
+ */
+
+import React, { FunctionComponent } from 'react';
+import { EuiCodeBlock, EuiText } from '@elastic/eui';
+
+export interface Props {
+  htmlForId: string;
+  label: string;
+  json: Record<string, any>;
+}
+
+export const PipelineDetailsJsonBlock: FunctionComponent<Props> = ({ label, htmlForId, json }) => (
+  <>
+    <EuiText size="s">
+      <label htmlFor={htmlForId}>
+        <b>{label}</b>
+      </label>
+    </EuiText>
+    <EuiCodeBlock paddingSize="s" id={htmlForId} language="json" overflowHeight={200} isCopyable>
+      {JSON.stringify(json, null, 2)}
+    </EuiCodeBlock>
+  </>
+);
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx
index f6e0eb60c71ae..5cd63a61123f3 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx
@@ -16,7 +16,6 @@ import {
   EuiFlexItem,
   EuiButtonEmpty,
   EuiCallOut,
-  EuiLoadingSpinner,
 } from '@elastic/eui';
 
 import { EuiSpacer, EuiText } from '@elastic/eui';