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

[ML] Transforms: Fix page layout on resize and link button widths (#104680)

Browse source
This commit is contained in:
Pete Harverson 2021-07-08 16:01:23 +01:00 • committed by GitHub
parent 31298d0422
commit 80ab2ff36d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 19 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -131,7 +131,10 @@ export const CloneTransformSection: FC<Props> = ({ match, location }) => {
<EuiSpacer size="l" />
<EuiPageContentBody data-test-subj="transformPageCloneTransform">
<EuiPageContentBody
data-test-subj="transformPageCloneTransform"
className="transform__wizardBody"
>
{typeof errorMessage !== 'undefined' && (
<>
<EuiCallOut

11
x-pack/plugins/transform/public/app/sections/create_transform/components/step_create/step_create_form.tsx
View file

@ -12,7 +12,6 @@ import {
EuiButton,
EuiCard,
EuiCopy,
EuiFlexGrid,
EuiFlexGroup,
EuiFlexItem,
EuiForm,
@ -480,8 +479,8 @@ export const StepCreateForm: FC<StepCreateFormProps> = React.memo(
{created && (
<Fragment>
<EuiHorizontalRule />
<EuiFlexGrid gutterSize="l">
<EuiFlexItem style={PANEL_ITEM_STYLE}>
<EuiFlexGroup gutterSize="l">
<EuiFlexItem style={PANEL_ITEM_STYLE} grow={false}>
<EuiCard
icon={<EuiIcon size="xxl" type="list" />}
title={i18n.translate('xpack.transform.stepCreateForm.transformListCardTitle', {
@ -498,7 +497,7 @@ export const StepCreateForm: FC<StepCreateFormProps> = React.memo(
/>
</EuiFlexItem>
{started === true && createIndexPattern === true && indexPatternId === undefined && (
<EuiFlexItem style={PANEL_ITEM_STYLE}>
<EuiFlexItem style={PANEL_ITEM_STYLE} grow={false}>
<EuiPanel style={{ position: 'relative' }}>
<EuiProgress size="xs" color="primary" position="absolute" />
<EuiText color="subdued" size="s">
@ -515,7 +514,7 @@ export const StepCreateForm: FC<StepCreateFormProps> = React.memo(
</EuiFlexItem>
)}
{isDiscoverAvailable && discoverLink !== undefined && (
<EuiFlexItem style={PANEL_ITEM_STYLE}>
<EuiFlexItem style={PANEL_ITEM_STYLE} grow={false}>
<EuiCard
icon={<EuiIcon size="xxl" type="discoverApp" />}
title={i18n.translate('xpack.transform.stepCreateForm.discoverCardTitle', {
@ -532,7 +531,7 @@ export const StepCreateForm: FC<StepCreateFormProps> = React.memo(
/>
</EuiFlexItem>
)}
</EuiFlexGrid>
</EuiFlexGroup>
</Fragment>
)}
</EuiForm>

21
x-pack/plugins/transform/public/app/sections/create_transform/components/wizard/_wizard.scss
View file

@ -8,22 +8,11 @@
}
}
.transform__stepDefineForm {
align-items: flex-start;
}
.transform__stepDefineFormLeftColumn {
min-width: 420px;
border-right: 1px solid $euiColorLightShade;
}
/*
This is an override to replicate the previous full-page-width of the transforms creation wizard
when it was in use within the ML plugin. The Kibana management section limits a max-width to 1200px
which is a bit narrow for the two column layout of the transform wizard. We might revisit this for
future versions to blend in more with the overall design of the Kibana management section.
The management section's navigation width is 192px + 24px right margin
This ensures the wizard goes full page width, and that the data grid in the page does not
cause the body of the wizard page to overflow into the side navigation of the Kibana
Stack Management page on resize.
*/
.mgtPage__body--transformWizard {
max-width: calc(100% - 216px);
.transform__wizardBody {
max-width: calc(100% - 16px);
}

35
x-pack/plugins/transform/public/app/sections/create_transform/components/wizard/wizard.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import React, { Fragment, FC, useEffect, useRef, useState, createContext, useMemo } from 'react';
import React, { Fragment, FC, useRef, useState, createContext, useMemo } from 'react';
import { i18n } from '@kbn/i18n';
@ -34,11 +34,6 @@ import { WizardNav } from '../wizard_nav';
import { IndexPattern } from '../../../../../../../../../src/plugins/data/public';
import type { RuntimeMappings } from '../step_define/common/types';
enum KBN_MANAGEMENT_PAGE_CLASSNAME {
DEFAULT_BODY = 'mgtPage__body',
TRANSFORM_BODY_MODIFIER = 'mgtPage__body--transformWizard',
}
enum WIZARD_STEPS {
DEFINE,
DETAILS,
@ -121,34 +116,6 @@ export const Wizard: FC<WizardProps> = React.memo(({ cloneConfig, searchItems })
// The CREATE state
const [stepCreateState, setStepCreateState] = useState(getDefaultStepCreateState);
useEffect(() => {
// The transform plugin doesn't control the wrapping management page via React
// so we use plain JS to add and remove a custom CSS class to set the full
// page width to 100% for the transform wizard. It's done to replicate the layout
// as it was when transforms were part of the ML plugin. This will be revisited
// to come up with an approach that's more in line with the overall layout
// of the Kibana management section.
let managementBody = document.getElementsByClassName(
KBN_MANAGEMENT_PAGE_CLASSNAME.DEFAULT_BODY
);
if (managementBody.length > 0) {
managementBody[0].classList.replace(
KBN_MANAGEMENT_PAGE_CLASSNAME.DEFAULT_BODY,
KBN_MANAGEMENT_PAGE_CLASSNAME.TRANSFORM_BODY_MODIFIER
);
return () => {
managementBody = document.getElementsByClassName(
KBN_MANAGEMENT_PAGE_CLASSNAME.TRANSFORM_BODY_MODIFIER
);
managementBody[0].classList.replace(
KBN_MANAGEMENT_PAGE_CLASSNAME.TRANSFORM_BODY_MODIFIER,
KBN_MANAGEMENT_PAGE_CLASSNAME.DEFAULT_BODY
);
};
}
}, []);
const transformConfig = getCreateTransformRequestBody(
indexPattern.title,
stepDefineState,

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

@ -68,7 +68,10 @@ export const CreateTransformSection: FC<Props> = ({ match }) => {
<EuiSpacer size="l" />
<EuiPageContentBody data-test-subj="transformPageCreateTransform">
<EuiPageContentBody
data-test-subj="transformPageCreateTransform"
className="transform__wizardBody"
>
{searchItemsError !== undefined && (
<>
<EuiCallOut title={searchItemsError} color="danger" iconType="alert" />