Skip to content

Commit

Permalink
WiP on flyout
Browse files Browse the repository at this point in the history 
Showing name in title
  • Loading branch information
@jloleysens
jloleysens committed Apr 8, 2020
1 parent 86f50c8 commit 4804b65
Show file tree
Hide file tree
Showing 5 changed files with 86 additions and 115 deletions.
40 changes: 0 additions & 40 deletions x-pack/plugins/ingest_pipelines/public/application/components/expandable_text.tsx
View file

This file was deleted.

7 changes: 0 additions & 7 deletions x-pack/plugins/ingest_pipelines/public/application/components/index.ts
View file

This file was deleted.

26 changes: 18 additions & 8 deletions x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};
113 changes: 63 additions & 50 deletions x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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);
Expand All @@ -52,6 +56,7 @@ export const PipelinesList: React.FunctionComponent = () => {
<PipelineTable
onEditPipelineClick={() => {}}
onDeletePipelineClick={() => {}}
onViewPipelineClick={setSelectedPipeline}
pipelines={data}
/>
);
Expand All @@ -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)}
/>
)}
</>
);
};
15 changes: 5 additions & 10 deletions x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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', {
Expand Down

0 comments on commit 4804b65

Please sign in to comment.