List pipelines

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>
+  );
+};

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';

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 = (

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,

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,109 @@ 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} />
+                ),
+              },
+              {
+                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>
   );

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,19 +16,19 @@ 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 {
     this.client = httpClient;
   }
 
   public useLoadPipelines() {
-    return this.useRequest({
+    return this.useRequest<Pipeline[]>({
       path: API_BASE_PATH,
       method: 'get',
     });

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>();