github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[ML] Migrate all usages of EuiPage*_Deprecated (#165087)

Browse source 
## Summary

Closes https://github.com/elastic/kibana/issues/161408

Migrates all usages of `EuiPage*_Deprecated` components in ml and
transform plugins.
This commit is contained in:
Dima Arnautov 2023-08-30 10:13:24 +02:00 • committed by GitHub
parent c5c6574592
commit f13adad484
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 230 additions and 338 deletions
Download patch file Download diff file Expand all files Collapse all files

67
x-pack/plugins/ml/public/application/access_denied/access_denied.tsx
View file

@ -9,13 +9,7 @@ import React, { type FC } from 'react';
import { FormattedMessage } from '@kbn/i18n-react';
import {
EuiEmptyPrompt,
EuiFlexGroup,
EuiFlexItem,
EuiPageContent_Deprecated as EuiPageContent,
EuiSpacer,
} from '@elastic/eui';
import { EuiPageTemplate } from '@elastic/eui';
import { createPermissionFailureMessage } from '../capabilities/check_capabilities';
import { MlCapabilitiesKey } from '../../../common/types/capabilities';
import { HelpMenu } from '../components/help_menu';
@ -35,39 +29,34 @@ export const AccessDeniedCallout: FC<AccessDeniedCalloutProps> = ({ missingCapab
return (
<>
<EuiSpacer size="xxl" />
<EuiFlexGroup justifyContent="spaceAround">
<EuiFlexItem grow={false}>
<EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
<EuiEmptyPrompt
iconType="warning"
title={
<h2>
<FormattedMessage
id="xpack.ml.management.jobsList.accessDeniedTitle"
defaultMessage="Access denied"
/>
</h2>
}
body={
<div>
<FormattedMessage
id="xpack.ml.accessDenied.description"
defaultMessage="You do not have permission to view this page."
/>
{errorMessages ? (
<ul>
{errorMessages.map((v) => (
<li key={v}>{v}</li>
))}
</ul>
) : null}
</div>
}
<EuiPageTemplate.EmptyPrompt
color={'danger'}
alignment={'horizontalCenter'}
iconType="warning"
title={
<h2>
<FormattedMessage
id="xpack.ml.management.jobsList.accessDeniedTitle"
defaultMessage="Access denied"
/>
</EuiPageContent>
</EuiFlexItem>
</EuiFlexGroup>
</h2>
}
body={
<div>
<FormattedMessage
id="xpack.ml.accessDenied.description"
defaultMessage="You do not have permission to view this page."
/>
{errorMessages ? (
<ul>
{errorMessages.map((v) => (
<li key={v}>{v}</li>
))}
</ul>
) : null}
</div>
}
/>
<HelpMenu docLink={helpLink} />
</>
);

16
x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/source_selection/source_selection.tsx
View file

@ -5,20 +5,12 @@
* 2.0.
*/
import React, { useState, FC } from 'react';
import {
EuiCallOut,
EuiSpacer,
EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent,
} from '@elastic/eui';
import React, { FC, useState } from 'react';
import { EuiCallOut, EuiPageBody, EuiPanel, EuiSpacer } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { getNestedProperty } from '@kbn/ml-nested-property';
import { SavedObjectFinder } from '@kbn/saved-objects-finder-plugin/public';
import type { SavedObjectCommon } from '@kbn/saved-objects-finder-plugin/common';
import { useMlKibana, useNavigateToPath } from '../../../../../contexts/kibana';
import { useToastNotificationService } from '../../../../../services/toast_notification_service';
import {
@ -110,7 +102,7 @@ export const SourceSelection: FC = () => {
return (
<div data-test-subj="mlDFAPageSourceSelection">
<EuiPageBody restrictWidth={1200}>
<EuiPageContent hasShadow={false} hasBorder={true}>
<EuiPanel hasShadow={false} hasBorder>
{isCcsCallOut && (
<>
<EuiCallOut
@ -166,7 +158,7 @@ export const SourceSelection: FC = () => {
uiSettings,
}}
/>
</EuiPageContent>
</EuiPanel>
</EuiPageBody>
</div>
);

6
x-pack/plugins/ml/public/application/jobs/new_job/pages/index_or_search/page.tsx
View file

@ -6,7 +6,7 @@
*/
import React, { FC } from 'react';
import { EuiPageBody, EuiPageContent_Deprecated as EuiPageContent } from '@elastic/eui';
import { EuiPageBody, EuiPanel } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
import { SavedObjectFinder } from '@kbn/saved-objects-finder-plugin/public';
@ -39,7 +39,7 @@ export const Page: FC<PageProps> = ({ nextStepPath }) => {
defaultMessage="Select data view or saved search"
/>
</MlPageHeader>
<EuiPageContent hasShadow={false} hasBorder={true}>
<EuiPanel hasShadow={false} hasBorder>
<SavedObjectFinder
key="searchSavedObjectFinder"
onChoose={onObjectSelection}
@ -75,7 +75,7 @@ export const Page: FC<PageProps> = ({ nextStepPath }) => {
uiSettings,
}}
/>
</EuiPageContent>
</EuiPanel>
</EuiPageBody>
</div>
);

21
x-pack/plugins/ml/public/application/jobs/new_job/pages/new_job/page.tsx
View file

@ -6,10 +6,7 @@
*/
import React, { FC, useEffect, Fragment, useMemo } from 'react';
import {
EuiPageContentHeader_Deprecated as EuiPageContentHeader,
EuiPageContentHeaderSection_Deprecated as EuiPageContentHeaderSection,
} from '@elastic/eui';
import { EuiText } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
import { getTimeFilterRange, useTimefilter } from '@kbn/ml-date-picker';
@ -234,15 +231,13 @@ export const Page: FC<PageProps> = ({ existingJobsAndGroups, jobType }) => {
</MlPageHeader>
<div style={{ backgroundColor: 'inherit' }} data-test-subj={`mlPageJobWizard ${jobType}`}>
<EuiPageContentHeader>
<EuiPageContentHeaderSection>
<FormattedMessage
id="xpack.ml.newJob.page.createJob.dataViewName"
defaultMessage="Using data view {dataViewName}"
values={{ dataViewName: jobCreator.indexPatternDisplayName }}
/>
</EuiPageContentHeaderSection>
</EuiPageContentHeader>
<EuiText size={'s'}>
<FormattedMessage
id="xpack.ml.newJob.page.createJob.dataViewName"
defaultMessage="Using data view {dataViewName}"
values={{ dataViewName: jobCreator.indexPatternDisplayName }}
/>
</EuiText>
<Wizard
jobCreator={jobCreator}

53
x-pack/plugins/ml/public/application/management/jobs_list/components/access_denied_page.tsx
View file

@ -6,38 +6,29 @@
*/
import React from 'react';
import { FormattedMessage } from '@kbn/i18n-react';
import { EuiEmptyPrompt, EuiPageContent_Deprecated as EuiPageContent } from '@elastic/eui';
import { EuiPageTemplate } from '@elastic/eui';
export const AccessDeniedPage = () => (
<>
<EuiPageContent
verticalPosition="center"
horizontalPosition="center"
color="danger"
data-test-subj="mlPageAccessDenied"
>
<EuiEmptyPrompt
iconType="warning"
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>
</>
<EuiPageTemplate.EmptyPrompt
data-test-subj="mlPageAccessDenied"
color={'danger'}
iconType="warning"
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>
}
/>
);

17
x-pack/plugins/ml/public/application/management/jobs_list/components/jobs_list_page/jobs_list_page.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import React, { useEffect, useState, FC, useCallback, useMemo } from 'react';
import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { Router } from '@kbn/shared-ux-router';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
@ -13,11 +13,10 @@ import { CoreStart } from '@kbn/core/public';
import {
EuiButtonEmpty,
EuiPageContentBody_Deprecated as EuiPageContentBody,
EuiPageHeader,
EuiSpacer,
EuiFlexGroup,
EuiFlexItem,
EuiPageTemplate,
EuiSpacer,
} from '@elastic/eui';
import type { UsageCollectionSetup } from '@kbn/usage-collection-plugin/public';
@ -29,7 +28,7 @@ import {
RedirectAppLinks,
} from '@kbn/kibana-react-plugin/public';
import type { SharePluginStart } from '@kbn/share-plugin/public';
import type { SpacesPluginStart, SpacesContextProps } from '@kbn/spaces-plugin/public';
import type { SpacesContextProps, SpacesPluginStart } from '@kbn/spaces-plugin/public';
import type { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
import { PLUGIN_ID } from '../../../../../../common/constants/app';
@ -132,7 +131,7 @@ export const JobsListPage: FC<{
>
<ContextWrapper feature={PLUGIN_ID}>
<Router history={history}>
<EuiPageHeader
<EuiPageTemplate.Header
pageTitle={
<FormattedMessage
id="xpack.ml.management.jobsList.jobsListTitle"
@ -147,11 +146,13 @@ export const JobsListPage: FC<{
}
rightSideItems={[<DocsLink currentTabId={currentTabId} />]}
bottomBorder
paddingSize={'none'}
/>
<EuiSpacer size="l" />
<EuiPageContentBody
<EuiPageTemplate.Section
paddingSize={'none'}
id="kibanaManagementMLSection"
data-test-subj="mlPageStackManagementJobsList"
>
@ -183,7 +184,7 @@ export const JobsListPage: FC<{
</EuiFlexItem>
</EuiFlexGroup>
<SpaceManagement spacesApi={spacesApi} setCurrentTab={setCurrentTabId} />
</EuiPageContentBody>
</EuiPageTemplate.Section>
</Router>
</ContextWrapper>
</KibanaContextProvider>

19
x-pack/plugins/ml/public/application/settings/anomaly_detection_settings.tsx
View file

@ -12,7 +12,6 @@ import {
EuiButtonEmpty,
EuiFlexGroup,
EuiFlexItem,
EuiPageContentHeader_Deprecated as EuiPageContentHeader,
EuiSpacer,
EuiText,
EuiTextColor,
@ -78,16 +77,14 @@ export const AnomalyDetectionSettings: FC = () => {
return (
<Fragment>
<EuiPageContentHeader>
<EuiTitle>
<h2>
<FormattedMessage
id="xpack.ml.settings.anomalyDetection.anomalyDetectionTitle"
defaultMessage="Anomaly Detection"
/>
</h2>
</EuiTitle>
</EuiPageContentHeader>
<EuiTitle>
<h2>
<FormattedMessage
id="xpack.ml.settings.anomalyDetection.anomalyDetectionTitle"
defaultMessage="Anomaly Detection"
/>
</h2>
</EuiTitle>
<EuiSpacer size="m" />

25
x-pack/plugins/transform/public/app/components/section_error.tsx
View file

@ -5,8 +5,8 @@
* 2.0.
*/
import { EuiEmptyPrompt, EuiPageContent_Deprecated as EuiPageContent } from '@elastic/eui';
import React from 'react';
import { EuiPageTemplate } from '@elastic/eui';
interface Props {
title: React.ReactNode;
@ -23,17 +23,16 @@ export const SectionError: React.FunctionComponent<Props> = ({
const errorMessage = error?.message ?? JSON.stringify(error, null, 2);
return (
<EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
<EuiEmptyPrompt
iconType="warning"
title={<h2>{title}</h2>}
body={
<p>
<pre>{errorMessage}</pre>
{actions ? actions : null}
</p>
}
/>
</EuiPageContent>
<EuiPageTemplate.EmptyPrompt
color={'danger'}
iconType="warning"
title={<h2>{title}</h2>}
body={
<p>
<pre>{errorMessage}</pre>
{actions ? actions : null}
</p>
}
/>
);
};

9
x-pack/plugins/transform/public/app/lib/authorization/components/not_authorized_section.tsx
View file

@ -6,7 +6,7 @@
*/
import React from 'react';
import { EuiEmptyPrompt } from '@elastic/eui';
import { EuiPageTemplate } from '@elastic/eui';
interface Props {
title: React.ReactNode;
@ -14,5 +14,10 @@ interface Props {
}
export const NotAuthorizedSection = ({ title, message }: Props) => (
<EuiEmptyPrompt iconType="securityApp" title={<h2>{title}</h2>} body={<p>{message}</p>} />
<EuiPageTemplate.EmptyPrompt
color="danger"
iconType="securityApp"
title={<h2>{title}</h2>}
body={<p>{message}</p>}
/>
);

52
x-pack/plugins/transform/public/app/lib/authorization/components/with_privileges.tsx
View file

@ -6,19 +6,9 @@
*/
import React, { useContext, FC } from 'react';
import {
EuiFlexItem,
EuiFlexGroup,
EuiPageContent_Deprecated as EuiPageContent,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { MissingPrivileges } from '../../../../../common/types/privileges';
import { SectionLoading } from '../../../components';
import { AuthorizationContext } from './authorization_provider';
import { NotAuthorizedSection } from './not_authorized_section';
import {
@ -82,31 +72,25 @@ const MissingClusterPrivileges: FC<MissingClusterPrivilegesProps> = ({
missingPrivileges,
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,
<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,
}}
/>
}
/>
</EuiPageContent>
</EuiFlexItem>
</EuiFlexGroup>
values={{
missingPrivileges,
privilegesCount,
}}
/>
}
/>
);
export const PrivilegesWrapper: FC<{ privileges: string | string[] }> = ({

24
x-pack/plugins/transform/public/app/sections/clone_transform/clone_transform_section.tsx
View file

@ -5,20 +5,14 @@
* 2.0.
*/
import React, { useEffect, useState, FC } from 'react';
import React, { FC, useEffect, useState } from 'react';
import { RouteComponentProps } from 'react-router-dom';
import { parse } from 'query-string';
import { FormattedMessage } from '@kbn/i18n-react';
import { i18n } from '@kbn/i18n';
import {
EuiButtonEmpty,
EuiCallOut,
EuiPageContentBody_Deprecated as EuiPageContentBody,
EuiPageHeader,
EuiSpacer,
} from '@elastic/eui';
import { EuiButtonEmpty, EuiCallOut, EuiPageTemplate, EuiSpacer } from '@elastic/eui';
import { isHttpFetchError } from '@kbn/core-http-browser';
import { APP_CREATE_TRANSFORM_CLUSTER_PRIVILEGES } from '../../../../common/constants';
import { TransformConfigUnion } from '../../../../common/types/transform';
@ -27,7 +21,7 @@ import { useApi } from '../../hooks/use_api';
import { useDocumentationLinks } from '../../hooks/use_documentation_links';
import { useSearchItems } from '../../hooks/use_search_items';
import { breadcrumbService, docTitleService, BREADCRUMB_SECTION } from '../../services/navigation';
import { BREADCRUMB_SECTION, breadcrumbService, docTitleService } from '../../services/navigation';
import { PrivilegesWrapper } from '../../lib/authorization';
import { Wizard } from '../create_transform/components/wizard';
@ -119,7 +113,7 @@ export const CloneTransformSection: FC<Props> = ({ match, location }) => {
return (
<PrivilegesWrapper privileges={APP_CREATE_TRANSFORM_CLUSTER_PRIVILEGES}>
<EuiPageHeader
<EuiPageTemplate.Header
pageTitle={
<FormattedMessage
id="xpack.transform.transformsWizard.cloneTransformTitle"
@ -128,12 +122,13 @@ export const CloneTransformSection: FC<Props> = ({ match, location }) => {
}
rightSideItems={[docsLink]}
bottomBorder
paddingSize={'none'}
/>
<EuiSpacer size="l" />
<EuiPageContentBody data-test-subj="transformPageCloneTransform">
{typeof errorMessage !== 'undefined' && (
<EuiPageTemplate.Section data-test-subj="transformPageCloneTransform" paddingSize={'none'}>
{typeof errorMessage !== 'undefined' ? (
<>
<EuiCallOut
title={i18n.translate('xpack.transform.clone.errorPromptTitle', {
@ -146,11 +141,12 @@ export const CloneTransformSection: FC<Props> = ({ match, location }) => {
</EuiCallOut>
<EuiSpacer size="l" />
</>
)}
) : null}
{searchItems !== undefined && isInitialized === true && transformConfig !== undefined && (
<Wizard cloneConfig={transformConfig} searchItems={searchItems} />
)}
</EuiPageContentBody>
</EuiPageTemplate.Section>
</PrivilegesWrapper>
);
};

24
x-pack/plugins/transform/public/app/sections/create_transform/create_transform_section.tsx
View file

@ -5,26 +5,15 @@
* 2.0.
*/
import React, { useEffect, FC } from 'react';
import React, { FC, useEffect } from 'react';
import { RouteComponentProps } from 'react-router-dom';
import { FormattedMessage } from '@kbn/i18n-react';
import {
EuiButtonEmpty,
EuiCallOut,
EuiPageContentBody_Deprecated as EuiPageContentBody,
EuiPageHeader,
EuiSpacer,
} from '@elastic/eui';
import { EuiButtonEmpty, EuiCallOut, EuiPageTemplate, EuiSpacer } from '@elastic/eui';
import { APP_CREATE_TRANSFORM_CLUSTER_PRIVILEGES } from '../../../../common/constants';
import { useDocumentationLinks } from '../../hooks/use_documentation_links';
import { useSearchItems } from '../../hooks/use_search_items';
import { breadcrumbService, docTitleService, BREADCRUMB_SECTION } from '../../services/navigation';
import { BREADCRUMB_SECTION, breadcrumbService, docTitleService } from '../../services/navigation';
import { PrivilegesWrapper } from '../../lib/authorization';
import { Wizard } from './components/wizard';
type Props = RouteComponentProps<{ savedObjectId: string }>;
@ -55,7 +44,7 @@ export const CreateTransformSection: FC<Props> = ({ match }) => {
return (
<PrivilegesWrapper privileges={APP_CREATE_TRANSFORM_CLUSTER_PRIVILEGES}>
<EuiPageHeader
<EuiPageTemplate.Header
pageTitle={
<FormattedMessage
id="xpack.transform.transformsWizard.createTransformTitle"
@ -64,11 +53,12 @@ export const CreateTransformSection: FC<Props> = ({ match }) => {
}
rightSideItems={[docsLink]}
bottomBorder
paddingSize={'none'}
/>
<EuiSpacer size="l" />
<EuiPageContentBody data-test-subj="transformPageCreateTransform">
<EuiPageTemplate.Section data-test-subj="transformPageCreateTransform" paddingSize={'none'}>
{searchItemsError !== undefined && (
<>
<EuiCallOut title={searchItemsError} color="danger" iconType="warning" />
@ -76,7 +66,7 @@ export const CreateTransformSection: FC<Props> = ({ match }) => {
</>
)}
{searchItems !== undefined && <Wizard searchItems={searchItems} />}
</EuiPageContentBody>
</EuiPageTemplate.Section>
</PrivilegesWrapper>
);
};

62
x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/__snapshots__/transform_list.test.tsx.snap generated
View file

@ -1,43 +1,27 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Transform: Transform List <TransformList /> Minimal initialization 1`] = `
<EuiFlexGroup
justifyContent="spaceAround"
>
<EuiFlexItem
grow={false}
>
<EuiSpacer
size="l"
/>
<EuiPageContent_Deprecated
color="subdued"
horizontalPosition="center"
verticalPosition="center"
>
<EuiEmptyPrompt
actions={
Array [
<EuiButton
color="primary"
data-test-subj="transformCreateFirstButton"
fill={true}
isDisabled={true}
onClick={[MockFunction]}
size="m"
>
Create your first transform
</EuiButton>,
]
}
data-test-subj="transformNoTransformsFound"
title={
<h2>
No transforms found
</h2>
}
/>
</EuiPageContent_Deprecated>
</EuiFlexItem>
</EuiFlexGroup>
<_EuiPageEmptyPrompt
actions={
Array [
<EuiButton
color="primary"
data-test-subj="transformCreateFirstButton"
fill={true}
isDisabled={true}
onClick={[MockFunction]}
size="m"
>
Create your first transform
</EuiButton>,
]
}
color="subdued"
data-test-subj="transformNoTransformsFound"
title={
<h2>
No transforms found
</h2>
}
/>
`;

90
x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_list.tsx
View file

@ -5,25 +5,20 @@
* 2.0.
*/
import React, { MouseEventHandler, FC, useContext, useState } from 'react';
import React, { FC, MouseEventHandler, useContext, useState } from 'react';
import { i18n } from '@kbn/i18n';
import {
EuiButton,
EuiButtonEmpty,
EuiButtonIcon,
EuiEmptyPrompt,
EuiFlexGroup,
EuiFlexItem,
EuiPageContent_Deprecated as EuiPageContent,
EuiPopover,
EuiSpacer,
EuiTitle,
EuiInMemoryTable,
EuiPageTemplate,
EuiPopover,
EuiSearchBarProps,
EuiTitle,
} from '@elastic/eui';
import {
isReauthorizeActionDisabled,
ReauthorizeActionModal,
@ -31,44 +26,41 @@ import {
useReauthorizeAction,
} from '../action_reauthorize';
import type { TransformId } from '../../../../../../common/types/transform';
import {
useRefreshTransformList,
TransformListRow,
TRANSFORM_LIST_COLUMN,
TransformListRow,
useRefreshTransformList,
} from '../../../../common';
import { AuthorizationContext } from '../../../../lib/authorization';
import { CreateTransformButton } from '../create_transform_button';
import { RefreshTransformListButton } from '../refresh_transform_list_button';
import {
DeleteActionModal,
DeleteActionName,
isDeleteActionDisabled,
useDeleteAction,
DeleteActionName,
DeleteActionModal,
} from '../action_delete';
import {
isResetActionDisabled,
useResetAction,
ResetActionName,
ResetActionModal,
ResetActionName,
useResetAction,
} from '../action_reset';
import {
isStartActionDisabled,
useStartAction,
StartActionName,
StartActionModal,
StartActionName,
useStartAction,
} from '../action_start';
import {
isScheduleNowActionDisabled,
useScheduleNowAction,
ScheduleNowActionName,
useScheduleNowAction,
} from '../action_schedule_now';
import { isStopActionDisabled, StopActionName, useStopAction } from '../action_stop';
import { useColumns } from './use_columns';
import { ExpandedRow } from './expanded_row';
import { transformFilters, filterTransforms } from './transform_search_bar_filters';
import { filterTransforms, transformFilters } from './transform_search_bar_filters';
import { useTableSettings } from './use_table_settings';
import { useAlertRuleFlyout } from '../../../../../alerting/transform_alerting_flyout';
import { TransformHealthAlertRule } from '../../../../../../common/types/alerting';
@ -148,36 +140,30 @@ export const TransformList: FC<TransformListProps> = ({
if (transforms.length === 0) {
return (
<EuiFlexGroup justifyContent="spaceAround">
<EuiFlexItem grow={false}>
<EuiSpacer size="l" />
<EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
<EuiEmptyPrompt
title={
<h2>
{i18n.translate('xpack.transform.list.emptyPromptTitle', {
defaultMessage: 'No transforms found',
})}
</h2>
}
actions={[
<EuiButton
color="primary"
fill
onClick={onCreateTransform}
isDisabled={disabled}
data-test-subj="transformCreateFirstButton"
>
{i18n.translate('xpack.transform.list.emptyPromptButtonText', {
defaultMessage: 'Create your first transform',
})}
</EuiButton>,
]}
data-test-subj="transformNoTransformsFound"
/>
</EuiPageContent>
</EuiFlexItem>
</EuiFlexGroup>
<EuiPageTemplate.EmptyPrompt
color={'subdued'}
title={
<h2>
{i18n.translate('xpack.transform.list.emptyPromptTitle', {
defaultMessage: 'No transforms found',
})}
</h2>
}
actions={[
<EuiButton
color="primary"
fill
onClick={onCreateTransform}
isDisabled={disabled}
data-test-subj="transformCreateFirstButton"
>
{i18n.translate('xpack.transform.list.emptyPromptButtonText', {
defaultMessage: 'Create your first transform',
})}
</EuiButton>,
]}
data-test-subj="transformNoTransformsFound"
/>
);
}

83
x-pack/plugins/transform/public/app/sections/transform_management/transform_management_section.tsx
View file

@ -6,22 +6,15 @@
*/
import React, { FC, useContext, useEffect, useMemo, useState } from 'react';
import { FormattedMessage } from '@kbn/i18n-react';
import {
EuiButtonEmpty,
EuiEmptyPrompt,
EuiFlexGroup,
EuiFlexItem,
EuiSkeletonText,
EuiModal,
EuiPageContent_Deprecated as EuiPageContent,
EuiPageContentBody_Deprecated as EuiPageContentBody,
EuiPageHeader,
EuiSpacer,
EuiCallOut,
EuiButton,
EuiButtonEmpty,
EuiCallOut,
EuiModal,
EuiPageTemplate,
EuiSkeletonText,
EuiSpacer,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { needsReauthorization } from '../../common/reauthorization_utils';
@ -29,14 +22,12 @@ import {
APP_GET_TRANSFORM_CLUSTER_PRIVILEGES,
TRANSFORM_STATE,
} from '../../../../common/constants';
import { useRefreshTransformList, TransformListRow } from '../../common';
import { TransformListRow, useRefreshTransformList } from '../../common';
import { useDocumentationLinks } from '../../hooks/use_documentation_links';
import { useDeleteTransforms, useGetTransforms } from '../../hooks';
import { RedirectToCreateTransform } from '../../common/navigation';
import { AuthorizationContext, PrivilegesWrapper } from '../../lib/authorization';
import { breadcrumbService, docTitleService, BREADCRUMB_SECTION } from '../../services/navigation';
import { BREADCRUMB_SECTION, breadcrumbService, docTitleService } from '../../services/navigation';
import { useRefreshInterval } from './components/transform_list/use_refresh_interval';
import { SearchSelection } from './components/search_selection';
import { TransformList } from './components/transform_list';
@ -151,7 +142,7 @@ export const TransformManagement: FC = () => {
return (
<>
<EuiPageHeader
<EuiPageTemplate.Header
pageTitle={
<span data-test-subj="transformAppTitle">
<FormattedMessage
@ -168,11 +159,32 @@ export const TransformManagement: FC = () => {
}
rightSideItems={[docsLink]}
bottomBorder
paddingSize={'none'}
/>
<EuiSpacer size="l" />
<EuiPageContentBody data-test-subj="transformPageTransformList">
{typeof errorMessage !== 'undefined' && (
<EuiPageTemplate.EmptyPrompt
iconType="warning"
color="danger"
title={
<h2>
<FormattedMessage
id="xpack.transform.list.errorPromptTitle"
defaultMessage="An error occurred getting the transform list"
/>
</h2>
}
body={
<p>
<pre>{JSON.stringify(errorMessage)}</pre>
</p>
}
/>
)}
<EuiPageTemplate.Section paddingSize={'none'} data-test-subj="transformPageTransformList">
{!isInitialized && <EuiSkeletonText lines={2} />}
{isInitialized && (
<>
@ -180,36 +192,7 @@ export const TransformManagement: FC = () => {
<TransformStatsBar transformNodes={transformNodes} transformsList={transforms} />
<EuiSpacer size="s" />
{typeof errorMessage !== 'undefined' && (
<EuiFlexGroup justifyContent="spaceAround">
<EuiFlexItem grow={false}>
<EuiSpacer size="l" />
<EuiPageContent
verticalPosition="center"
horizontalPosition="center"
color="danger"
>
<EuiEmptyPrompt
iconType="warning"
title={
<h2>
<FormattedMessage
id="xpack.transform.list.errorPromptTitle"
defaultMessage="An error occurred getting the transform list"
/>
</h2>
}
body={
<p>
<pre>{JSON.stringify(errorMessage)}</pre>
</p>
}
actions={[]}
/>
</EuiPageContent>
</EuiFlexItem>
</EuiFlexGroup>
)}
{typeof errorMessage === 'undefined' && (
<AlertRulesManageContext.Provider value={getAlertRuleManageContext()}>
{transformIdsWithoutConfig ? (
@ -268,7 +251,7 @@ export const TransformManagement: FC = () => {
)}
</>
)}
</EuiPageContentBody>
</EuiPageTemplate.Section>
{isSearchSelectionVisible && (
<EuiModal