Skip to content

Commit

Permalink
[ML] Converts management app jobs list pages to new layout (#103117) (#…
Browse files Browse the repository at this point in the history 
…103408)

* [ML] Converts management app jobs list pages to new layout

* i[ML] Fix translations

* [ML] Set acccessDenied default state back to false

* [ML] Remove headers for error states and text updates following review

Co-authored-by: Kibana Machine <[email protected]>

Co-authored-by: Pete Harverson <[email protected]>
  • Loading branch information
@kibanamachine @peteharverson
kibanamachine and peteharverson authored Jun 25, 2021
1 parent 8a92b0f commit 8e7741b
Show file tree
Hide file tree
Showing 6 changed files with 140 additions and 215 deletions.
63 changes: 22 additions & 41 deletions x-pack/plugins/ml/public/application/access_denied/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,11 @@
* 2.0.
*/

import React, { Fragment } from 'react';
import React from 'react';

import { FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
import {
EuiCallOut,
EuiPage,
EuiPageBody,
EuiPageContentBody,
EuiPageContentHeader,
EuiPageContentHeaderSection,
EuiSpacer,
EuiText,
EuiTitle,
} from '@elastic/eui';

import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiPageContent, EuiSpacer } from '@elastic/eui';
import { NavigationMenu } from '../components/navigation_menu';
import { HelpMenu } from '../components/help_menu';
import { useMlKibana } from '../contexts/kibana';
Expand All @@ -30,44 +20,35 @@ export const Page = () => {
} = useMlKibana();
const helpLink = docLinks.links.ml.guide;
return (
<Fragment>
<>
<NavigationMenu tabId="access-denied" />
<EuiPage>
<EuiPageBody>
<EuiPageContentHeader>
<EuiPageContentHeaderSection>
<EuiTitle>
<h1>
<EuiSpacer size="xxl" />
<EuiFlexGroup justifyContent="spaceAround">
<EuiFlexItem grow={false}>
<EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
<EuiEmptyPrompt
iconType="alert"
title={
<h2>
<FormattedMessage
id="xpack.ml.management.jobsList.accessDeniedTitle"
defaultMessage="Access denied"
/>
</h1>
</EuiTitle>
</EuiPageContentHeaderSection>
</EuiPageContentHeader>
<EuiPageContentBody>
<EuiSpacer size="m" />
<EuiCallOut
title={i18n.translate('xpack.ml.accessDenied.label', {
defaultMessage: 'Insufficient permissions',
})}
color="danger"
iconType="cross"
>
<EuiText size="s">
</h2>
}
body={
<p>
<FormattedMessage
id="xpack.ml.accessDenied.description"
defaultMessage="You don’t have permission to access the ML plugin"
defaultMessage="You don’t have permission to view the Machine Learning plugin. Access to the plugin requires the Machine Learning feature to be visible in this space."
/>
</p>
</EuiText>
</EuiCallOut>
</EuiPageContentBody>
</EuiPageBody>
</EuiPage>
}
/>
</EuiPageContent>
</EuiFlexItem>
</EuiFlexGroup>
<HelpMenu docLink={helpLink} />
</Fragment>
</>
);
};
80 changes: 30 additions & 50 deletions x-pack/plugins/ml/public/application/management/jobs_list/components/access_denied_page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,59 +5,39 @@
* 2.0.
*/

import React, { Fragment } from 'react';
import React from 'react';

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

import {
EuiCallOut,
EuiPage,
EuiPageBody,
EuiPageContentBody,
EuiPageContentHeader,
EuiPageContentHeaderSection,
EuiSpacer,
EuiText,
EuiTitle,
} from '@elastic/eui';
import { EuiEmptyPrompt, EuiPageContent } from '@elastic/eui';

export const AccessDeniedPage = () => (
<Fragment>
<EuiPage data-test-subj="mlPageAccessDenied">
<EuiPageBody>
<EuiPageContentHeader>
<EuiPageContentHeaderSection>
<EuiTitle>
<h1>
<FormattedMessage
id="xpack.ml.management.jobsList.insufficientLicenseTitle"
defaultMessage="Machine Learning"
/>
</h1>
</EuiTitle>
</EuiPageContentHeaderSection>
</EuiPageContentHeader>
<EuiPageContentBody>
<EuiSpacer size="m" />
<EuiCallOut
title={i18n.translate('xpack.ml.management.jobsList.noPermissionToAccessLabel', {
defaultMessage: 'Access denied',
})}
color="danger"
iconType="cross"
>
<EuiText size="s">
<p>
<FormattedMessage
id="xpack.ml.management.jobsList.noGrantedPrivilegesDescription"
defaultMessage="You don’t have permission to manage ML jobs"
/>
</p>
</EuiText>
</EuiCallOut>
</EuiPageContentBody>
</EuiPageBody>
</EuiPage>
</Fragment>
<>
<EuiPageContent
verticalPosition="center"
horizontalPosition="center"
color="danger"
data-test-subj="mlPageAccessDenied"
>
<EuiEmptyPrompt
iconType="alert"
title={
<h2>
<FormattedMessage
id="xpack.ml.management.jobsList.noPermissionToAccessLabel"
defaultMessage="Access denied"
/>
</h2>
}
body={
<p>
<FormattedMessage
id="xpack.ml.management.jobsList.noGrantedPrivilegesDescription"
defaultMessage="You don’t have permission to manage Machine Learning jobs. Access to the plugin requires the Machine Learning feature to be visible in this space."
/>
</p>
}
/>
</EuiPageContent>
</>
);
104 changes: 40 additions & 64 deletions ...ugins/ml/public/application/management/jobs_list/components/insufficient_license_page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,78 +5,54 @@
* 2.0.
*/

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

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

import {
EuiCallOut,
EuiPage,
EuiPageBody,
EuiPageContentBody,
EuiPageContentHeader,
EuiPageContentHeaderSection,
EuiSpacer,
EuiText,
EuiTitle,
EuiLink,
} from '@elastic/eui';
import { EuiEmptyPrompt, EuiLink, EuiPageContent } from '@elastic/eui';

interface Props {
basePath: CoreStart['http']['basePath'];
}

export const InsufficientLicensePage: FC<Props> = ({ basePath }) => (
<Fragment>
<EuiPage data-test-subj="mlPageInsufficientLicense">
<EuiPageBody>
<EuiPageContentHeader>
<EuiPageContentHeaderSection>
<EuiTitle>
<h1>
<FormattedMessage
id="xpack.ml.management.jobsList.insufficientLicenseTitle"
defaultMessage="Machine Learning"
/>
</h1>
</EuiTitle>
</EuiPageContentHeaderSection>
</EuiPageContentHeader>
<EuiPageContentBody>
<EuiSpacer size="m" />
<EuiCallOut
title={i18n.translate('xpack.ml.management.jobsList.insufficientLicenseLabel', {
defaultMessage:
'Machine Learning is only available on a trial, platinum or enterprise license',
})}
color="danger"
iconType="cross"
>
<EuiText size="s">
<p>
<FormattedMessage
id="xpack.ml.management.jobsList.insufficientLicenseDescription"
defaultMessage="Please {link} to use Machine Learning features"
values={{
link: (
<EuiLink
href={`${basePath.get()}/app/management/stack/license_management/home`}
>
<FormattedMessage
id="xpack.ml.management.jobsList.insufficientLicenseDescription.link"
defaultMessage="upgrade your license or start a trial"
/>
</EuiLink>
),
}}
/>
</p>
</EuiText>
</EuiCallOut>
</EuiPageContentBody>
</EuiPageBody>
</EuiPage>
</Fragment>
<>
<EuiPageContent
verticalPosition="center"
horizontalPosition="center"
color="danger"
data-test-subj="mlPageInsufficientLicense"
>
<EuiEmptyPrompt
iconType="alert"
title={
<h2>
<FormattedMessage
id="xpack.ml.management.jobsList.insufficientLicenseLabel"
defaultMessage="Insufficient license"
/>
</h2>
}
body={
<p>
<FormattedMessage
id="xpack.ml.management.jobsList.insufficientLicenseDescription"
defaultMessage="Machine Learning is available only with trial, platinum or enterprise licenses. Please {link} to use Machine Learning features."
values={{
link: (
<EuiLink href={`${basePath.get()}/app/management/stack/license_management/home`}>
<FormattedMessage
id="xpack.ml.management.jobsList.insufficientLicenseDescription.link"
defaultMessage="upgrade your license or start a trial"
/>
</EuiLink>
),
}}
/>
</p>
}
/>
</EuiPageContent>
</>
);
Loading

0 comments on commit 8e7741b

Please sign in to comment.