Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ML] Migrate all usages of EuiPage*_Deprecated in Data Visualizer #163029

Merged
merged 2 commits into from
Aug 7, 2023
Merged

[ML] Migrate all usages of EuiPage*_Deprecated in Data Visualizer #163029

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e9a297b
Add template
qn895 Aug 2, 2023
a5d6d59
Merge branch 'main' into ml-dv-migrate-eui-page
kibanamachine Aug 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 43 additions & 52 deletions ...visualizer/public/application/file_data_visualizer/components/about_panel/about_panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,7 @@ import {
EuiFlexGroup,
EuiFlexItem,
EuiSpacer,
EuiPage,
EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent,
EuiPageTemplate,
EuiHorizontalRule,
EuiFilePicker,
EuiLoadingSpinner,
Expand All @@ -31,61 +29,54 @@ interface Props {

export const AboutPanel: FC<Props> = ({ onFilePickerChange, hasPermissionToImport }) => {
return (
<EuiPageBody
paddingSize="none"
panelled={false}
restrictWidth={1000}
data-test-subj="dataVisualizerPageFileUpload"
>
<EuiPageContent hasShadow={false} hasBorder>
<EuiFlexGroup gutterSize="xl">
<EuiFlexItem grow={true}>
<WelcomeContent hasPermissionToImport={hasPermissionToImport} />
<EuiPageTemplate.Section alignment="center" data-test-subj="dataVisualizerPageFileUpload">
<EuiFlexGroup gutterSize="xl">
<EuiFlexItem grow={true}>
<WelcomeContent hasPermissionToImport={hasPermissionToImport} />

<EuiHorizontalRule margin="l" />
<EuiHorizontalRule margin="l" />

<div style={{ textAlign: 'center' }}>
<EuiFilePicker
id="filePicker"
initialPromptText={i18n.translate(
'xpack.dataVisualizer.file.aboutPanel.selectOrDragAndDropFileDescription',
{
defaultMessage: 'Select or drag and drop a file',
}
)}
onChange={(files) => onFilePickerChange(files)}
className="file-datavisualizer-file-picker"
/>
</div>
<EuiSpacer size="l" />
</EuiFlexItem>
</EuiFlexGroup>
</EuiPageContent>
</EuiPageBody>
<div css={{ textAlign: 'center' }}>
<EuiFilePicker
id="filePicker"
initialPromptText={i18n.translate(
'xpack.dataVisualizer.file.aboutPanel.selectOrDragAndDropFileDescription',
{
defaultMessage: 'Select or drag and drop a file',
}
)}
onChange={(files) => onFilePickerChange(files)}
className="file-datavisualizer-file-picker"
/>
</div>
<EuiSpacer size="l" />
</EuiFlexItem>
</EuiFlexGroup>
</EuiPageTemplate.Section>
);
};

export const LoadingPanel: FC = () => {
return (
<EuiPage restrictWidth={400} data-test-subj="dataVisualizerPageFileLoading">
<EuiPageBody>
<EuiPageContent className="file-datavisualizer-about-panel__content" paddingSize="l">
<div style={{ textAlign: 'center' }}>
<EuiTitle size="s">
<h1 role="alert">
<FormattedMessage
id="xpack.dataVisualizer.file.aboutPanel.analyzingDataTitle"
defaultMessage="Analyzing data"
/>
</h1>
</EuiTitle>

<EuiSpacer size="l" />

<EuiLoadingSpinner size="xl" />
</div>
</EuiPageContent>
</EuiPageBody>
</EuiPage>
<EuiPageTemplate.Section
alignment="center"
data-test-subj="dataVisualizerPageFileLoading"
className="file-datavisualizer-about-panel__content"
>
<EuiPageTemplate.EmptyPrompt
title={
<EuiTitle size="s">
<h1 role="alert">
<FormattedMessage
id="xpack.dataVisualizer.file.aboutPanel.analyzingDataTitle"
defaultMessage="Analyzing data"
/>
</h1>
</EuiTitle>
}
>
<EuiLoadingSpinner size="xl" />
</EuiPageTemplate.EmptyPrompt>
</EuiPageTemplate.Section>
);
};
112 changes: 56 additions & 56 deletions ...ndex_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,7 @@ import {
useIsWithinMaxBreakpoint,
EuiFlexGroup,
EuiFlexItem,
EuiPageBody,
EuiPageContentBody_Deprecated as EuiPageContentBody,
EuiPageContentHeader_Deprecated as EuiPageContentHeader,
EuiPageContentHeaderSection_Deprecated as EuiPageContentHeaderSection,
EuiPageTemplate,
EuiPanel,
EuiProgress,
EuiSpacer,
Expand Down Expand Up @@ -496,59 +493,62 @@ export const IndexDataVisualizerView: FC<IndexDataVisualizerViewProps> = (dataVi
});

return (
<EuiPageBody data-test-subj="dataVisualizerIndexPage" paddingSize="none" panelled={false}>
<EuiFlexGroup gutterSize="m">
<EuiFlexItem>
<EuiPageContentHeader data-test-subj="dataVisualizerPageHeader" css={dvPageHeader}>
<EuiPageContentHeaderSection>
<EuiFlexGroup
data-test-subj="dataViewTitleHeader"
direction="row"
alignItems="center"
css={{ padding: `${euiTheme.euiSizeS} 0`, marginRight: `${euiTheme.euiSize}` }}
>
<EuiTitle size={'s'}>
<h2>{currentDataView.getName()}</h2>
</EuiTitle>
<DataVisualizerDataViewManagement
currentDataView={currentDataView}
useNewFieldsApi={true}
/>
</EuiFlexGroup>
</EuiPageContentHeaderSection>

{isWithinLargeBreakpoint ? <EuiSpacer size="m" /> : null}
<EuiFlexGroup
alignItems="center"
justifyContent="flexEnd"
gutterSize="s"
data-test-subj="dataVisualizerTimeRangeSelectorSection"
>
{hasValidTimeField ? (
<EuiFlexItem grow={false}>
<FullTimeRangeSelector
frozenDataPreference={frozenDataPreference}
setFrozenDataPreference={setFrozenDataPreference}
dataView={currentDataView}
query={undefined}
disabled={false}
timefilter={timefilter}
/>
</EuiFlexItem>
) : null}
<EuiPageTemplate
offset={0}
restrictWidth={false}
bottomBorder={false}
grow={false}
data-test-subj="dataVisualizerIndexPage"
paddingSize="none"
panelled={true}
>
<EuiPageTemplate.Section>
<EuiPageTemplate.Header data-test-subj="dataVisualizerPageHeader" css={dvPageHeader}>
<EuiFlexGroup
data-test-subj="dataViewTitleHeader"
direction="row"
alignItems="center"
css={{ padding: `${euiTheme.euiSizeS} 0`, marginRight: `${euiTheme.euiSize}` }}
>
<EuiTitle size={'s'}>
<h2>{currentDataView.getName()}</h2>
</EuiTitle>
<DataVisualizerDataViewManagement
currentDataView={currentDataView}
useNewFieldsApi={true}
/>
</EuiFlexGroup>

{isWithinLargeBreakpoint ? <EuiSpacer size="m" /> : null}
<EuiFlexGroup
alignItems="center"
justifyContent="flexEnd"
gutterSize="s"
data-test-subj="dataVisualizerTimeRangeSelectorSection"
>
{hasValidTimeField ? (
<EuiFlexItem grow={false}>
<DatePickerWrapper
isAutoRefreshOnly={!hasValidTimeField}
showRefresh={!hasValidTimeField}
width="full"
<FullTimeRangeSelector
frozenDataPreference={frozenDataPreference}
setFrozenDataPreference={setFrozenDataPreference}
dataView={currentDataView}
query={undefined}
disabled={false}
timefilter={timefilter}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPageContentHeader>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="m" />
<EuiPageContentBody>
) : null}
<EuiFlexItem grow={false}>
<DatePickerWrapper
isAutoRefreshOnly={!hasValidTimeField}
showRefresh={!hasValidTimeField}
width="full"
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPageTemplate.Header>
<EuiSpacer size="m" />

<EuiFlexGroup gutterSize="m" direction={isWithinLargeBreakpoint ? 'column' : 'row'}>
<EuiFlexItem>
<EuiPanel hasShadow={false} hasBorder>
Expand Down Expand Up @@ -621,7 +621,7 @@ export const IndexDataVisualizerView: FC<IndexDataVisualizerViewProps> = (dataVi
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPageContentBody>
</EuiPageBody>
</EuiPageTemplate.Section>
</EuiPageTemplate>
);
};