Skip to content

Commit

Permalink
[ML] Transforms: Converts management pages to new layout (#102648) (#…
Browse files Browse the repository at this point in the history 
…103236)

* [ML] Transforms: Converts management pages to new layout

* [ML] Fix vertical centering of error state in app

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Pete Harverson <peteharverson@users.noreply.github.com>
  • Loading branch information
@kibanamachine @peteharverson
kibanamachine and peteharverson authored Jun 24, 2021
1 parent a3e8360 commit 697f8ba
Show file tree
Hide file tree
Showing 8 changed files with 287 additions and 228 deletions.
36 changes: 19 additions & 17 deletions x-pack/plugins/transform/public/app/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { render, unmountComponentAtNode } from 'react-dom';
import { Router, Route, Switch } from 'react-router-dom';
import { ScopedHistory } from 'kibana/public';

import { EuiErrorBoundary } from '@elastic/eui';
import { EuiErrorBoundary, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';

import { FormattedMessage } from '@kbn/i18n/react';

Expand All @@ -35,7 +35,7 @@ export const App: FC<{ history: ScopedHistory }> = ({ history }) => {
title={
<FormattedMessage
id="xpack.transform.app.checkingPrivilegesErrorMessage"
defaultMessage="Error fetching user privileges from the server."
defaultMessage="Error fetching user privileges from the server"
/>
}
error={apiError}
Expand All @@ -44,21 +44,23 @@ export const App: FC<{ history: ScopedHistory }> = ({ history }) => {
}

return (
<div data-test-subj="transformApp">
<Router history={history}>
<Switch>
<Route
path={`/${SECTION_SLUG.CLONE_TRANSFORM}/:transformId`}
component={CloneTransformSection}
/>
<Route
path={`/${SECTION_SLUG.CREATE_TRANSFORM}/:savedObjectId`}
component={CreateTransformSection}
/>
<Route path={`/`} component={TransformManagementSection} />
</Switch>
</Router>
</div>
<EuiFlexGroup justifyContent="spaceAround" data-test-subj="transformApp">
<EuiFlexItem grow={true}>
<Router history={history}>
<Switch>
<Route
path={`/${SECTION_SLUG.CLONE_TRANSFORM}/:transformId`}
component={CloneTransformSection}
/>
<Route
path={`/${SECTION_SLUG.CREATE_TRANSFORM}/:savedObjectId`}
component={CreateTransformSection}
/>
<Route path={`/`} component={TransformManagementSection} />
</Switch>
</Router>
</EuiFlexItem>
</EuiFlexGroup>
);
};

Expand Down
18 changes: 13 additions & 5 deletions x-pack/plugins/transform/public/app/components/section_error.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* 2.0.
*/

import { EuiCallOut } from '@elastic/eui';
import { EuiEmptyPrompt, EuiPageContent } from '@elastic/eui';
import React from 'react';

interface Props {
Expand All @@ -23,9 +23,17 @@ export const SectionError: React.FunctionComponent<Props> = ({
const errorMessage = error?.message ?? JSON.stringify(error, null, 2);

return (
<EuiCallOut title={title} color="danger" iconType="alert" {...rest}>
<pre>{errorMessage}</pre>
{actions ? actions : null}
</EuiCallOut>
<EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
<EuiEmptyPrompt
iconType="alert"
title={<h2>{title}</h2>}
body={
<p>
<pre>{errorMessage}</pre>
{actions ? actions : null}
</p>
}
/>
</EuiPageContent>
);
};
44 changes: 24 additions & 20 deletions x-pack/plugins/transform/public/app/lib/authorization/components/with_privileges.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

import React, { useContext, FC } from 'react';

import { EuiPageContent } from '@elastic/eui';
import { EuiFlexItem, EuiFlexGroup, EuiPageContent } from '@elastic/eui';

import { FormattedMessage } from '@kbn/i18n/react';

Expand Down Expand Up @@ -74,27 +74,31 @@ const MissingClusterPrivileges: FC<MissingClusterPrivilegesProps> = ({
missingPrivileges,
privilegesCount,
}) => (
<EuiPageContent>
<NotAuthorizedSection
title={
<FormattedMessage
id="xpack.transform.app.deniedPrivilegeTitle"
defaultMessage="You're missing cluster privileges"
/>
}
message={
<FormattedMessage
id="xpack.transform.app.deniedPrivilegeDescription"
defaultMessage="To use this section of Transforms, you must have {privilegesCount,
<EuiFlexGroup justifyContent="spaceAround">
<EuiFlexItem grow={false}>
<EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
<NotAuthorizedSection
title={
<FormattedMessage
id="xpack.transform.app.deniedPrivilegeTitle"
defaultMessage="You're missing cluster privileges"
/>
}
message={
<FormattedMessage
id="xpack.transform.app.deniedPrivilegeDescription"
defaultMessage="To use this section of Transforms, you must have {privilegesCount,
plural, one {this cluster privilege} other {these cluster privileges}}: {missingPrivileges}."
values={{
missingPrivileges,
privilegesCount,
}}
values={{
missingPrivileges,
privilegesCount,
}}
/>
}
/>
}
/>
</EuiPageContent>
</EuiPageContent>
</EuiFlexItem>
</EuiFlexGroup>
);

export const PrivilegesWrapper: FC<{ privileges: string | string[] }> = ({
Expand Down
77 changes: 38 additions & 39 deletions x-pack/plugins/transform/public/app/sections/clone_transform/clone_transform_section.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,9 @@ import { i18n } from '@kbn/i18n';
import {
EuiButtonEmpty,
EuiCallOut,
EuiFlexGroup,
EuiFlexItem,
EuiPageContent,
EuiPageContentBody,
EuiPageHeader,
EuiSpacer,
EuiTitle,
} from '@elastic/eui';

import { APP_CREATE_TRANSFORM_CLUSTER_PRIVILEGES } from '../../../../common/constants';
Expand Down Expand Up @@ -105,37 +102,38 @@ export const CloneTransformSection: FC<Props> = ({ match, location }) => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

const docsLink = (
<EuiButtonEmpty
href={esTransform}
target="_blank"
iconType="help"
data-test-subj="documentationLink"
>
<FormattedMessage
id="xpack.transform.transformsWizard.transformDocsLinkText"
defaultMessage="Transform docs"
/>
</EuiButtonEmpty>
);

return (
<PrivilegesWrapper privileges={APP_CREATE_TRANSFORM_CLUSTER_PRIVILEGES}>
<EuiPageContent data-test-subj="transformPageCloneTransform">
<EuiTitle size="l">
<EuiFlexGroup alignItems="center">
<EuiFlexItem grow={true}>
<h1>
<FormattedMessage
id="xpack.transform.transformsWizard.cloneTransformTitle"
defaultMessage="Clone transform"
/>
</h1>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonEmpty
href={esTransform}
target="_blank"
iconType="help"
data-test-subj="documentationLink"
>
<FormattedMessage
id="xpack.transform.transformsWizard.transformDocsLinkText"
defaultMessage="Transform docs"
/>
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
</EuiTitle>
<EuiPageContentBody>
<EuiSpacer size="l" />
{typeof errorMessage !== 'undefined' && (
<EuiPageHeader
pageTitle={
<FormattedMessage
id="xpack.transform.transformsWizard.cloneTransformTitle"
defaultMessage="Clone transform"
/>
}
rightSideItems={[docsLink]}
bottomBorder
/>

<EuiSpacer size="l" />

<EuiPageContentBody data-test-subj="transformPageCloneTransform">
{typeof errorMessage !== 'undefined' && (
<>
<EuiCallOut
title={i18n.translate('xpack.transform.clone.errorPromptTitle', {
defaultMessage: 'An error occurred getting the transform configuration.',
Expand All @@ -145,12 +143,13 @@ export const CloneTransformSection: FC<Props> = ({ match, location }) => {
>
<pre>{JSON.stringify(errorMessage)}</pre>
</EuiCallOut>
)}
{searchItems !== undefined && isInitialized === true && transformConfig !== undefined && (
<Wizard cloneConfig={transformConfig} searchItems={searchItems} />
)}
</EuiPageContentBody>
</EuiPageContent>
<EuiSpacer size="l" />
</>
)}
{searchItems !== undefined && isInitialized === true && transformConfig !== undefined && (
<Wizard cloneConfig={transformConfig} searchItems={searchItems} />
)}
</EuiPageContentBody>
</PrivilegesWrapper>
);
};
73 changes: 36 additions & 37 deletions x-pack/plugins/transform/public/app/sections/create_transform/create_transform_section.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,9 @@ import { FormattedMessage } from '@kbn/i18n/react';
import {
EuiButtonEmpty,
EuiCallOut,
EuiFlexGroup,
EuiFlexItem,
EuiPageContent,
EuiPageContentBody,
EuiPageHeader,
EuiSpacer,
EuiTitle,
} from '@elastic/eui';

import { APP_CREATE_TRANSFORM_CLUSTER_PRIVILEGES } from '../../../../common/constants';
Expand All @@ -42,42 +39,44 @@ export const CreateTransformSection: FC<Props> = ({ match }) => {

const { error: searchItemsError, searchItems } = useSearchItems(match.params.savedObjectId);

const docsLink = (
<EuiButtonEmpty
href={esTransform}
target="_blank"
iconType="help"
data-test-subj="documentationLink"
>
<FormattedMessage
id="xpack.transform.transformsWizard.transformDocsLinkText"
defaultMessage="Transform docs"
/>
</EuiButtonEmpty>
);

return (
<PrivilegesWrapper privileges={APP_CREATE_TRANSFORM_CLUSTER_PRIVILEGES}>
<EuiPageContent data-test-subj="transformPageCreateTransform">
<EuiTitle size="l">
<EuiFlexGroup alignItems="center">
<EuiFlexItem grow={true}>
<h1>
<FormattedMessage
id="xpack.transform.transformsWizard.createTransformTitle"
defaultMessage="Create transform"
/>
</h1>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonEmpty
href={esTransform}
target="_blank"
iconType="help"
data-test-subj="documentationLink"
>
<FormattedMessage
id="xpack.transform.transformsWizard.transformDocsLinkText"
defaultMessage="Transform docs"
/>
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
</EuiTitle>
<EuiPageContentBody>
<EuiSpacer size="l" />
{searchItemsError !== undefined && (
<EuiPageHeader
pageTitle={
<FormattedMessage
id="xpack.transform.transformsWizard.createTransformTitle"
defaultMessage="Create transform"
/>
}
rightSideItems={[docsLink]}
bottomBorder
/>

<EuiSpacer size="l" />

<EuiPageContentBody data-test-subj="transformPageCreateTransform">
{searchItemsError !== undefined && (
<>
<EuiCallOut title={searchItemsError} color="danger" iconType="alert" />
)}
{searchItems !== undefined && <Wizard searchItems={searchItems} />}
</EuiPageContentBody>
</EuiPageContent>
<EuiSpacer size="l" />
</>
)}
{searchItems !== undefined && <Wizard searchItems={searchItems} />}
</EuiPageContentBody>
</PrivilegesWrapper>
);
};
Loading

0 comments on commit 697f8ba

Please sign in to comment.