Finish first version of flyout

elastic · Apr 8, 2020 · cabce84 · cabce84
1 parent 58a4deb
commit cabce84
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 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
@@ -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
@@ -123,6 +123,8 @@ export const PipelinesList: React.FunctionComponent = () => {
         <PipelineDetails
           pipeline={selectedPipeline}
           onClose={() => setSelectedPipeline(undefined)}
+          onDeleteClick={() => {}}
+          onEditClick={() => {}}
         />
       )}
     </>