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

[ML] Transform: Fix wizard width. (#48778) (#48872)

Browse source 
The Kibana management section pages default to a max-width of 1200px. The transform creation wizard had a max-width of 100% when it was part of the ML plugin. Because of the existing two-column layout, the new default width can be a bit narrow for table with a lot of columns.
This PR provides an override to replicate the previous full-page-width of the transforms creation wizard. We might revisit this for future versions to blend in more with the overall design of the Kibana management section.
This commit is contained in:
Walter Rafelsberger 2019-10-22 02:42:45 -07:00 • committed by GitHub
parent 3574a084a3
commit 32f12a8397
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,3 +3,11 @@
padding-right: 0px;
}
}
/* 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. */
.mgtPage__body--transformWizard {
max-width: 100%;
}

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

@ -4,7 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React, { Fragment, SFC, useContext, useRef, useState } from 'react';
import React, { Fragment, SFC, useContext, useEffect, useRef, useState } from 'react';
import { i18n } from '@kbn/i18n';
@ -24,6 +24,11 @@ import { getDefaultStepCreateState, StepCreateForm, StepCreateSummary } from '..
import { getDefaultStepDetailsState, StepDetailsForm, StepDetailsSummary } from '../step_details';
import { WizardNav } from '../wizard_nav';
enum KBN_MANAGEMENT_PAGE_CLASSNAME {
DEFAULT_BODY = 'mgtPage__body',
TRANSFORM_BODY_MODIFIER = 'mgtPage__body--transformWizard',
}
enum WIZARD_STEPS {
DEFINE,
DETAILS,
@ -84,6 +89,25 @@ export const Wizard: SFC = React.memo(() => {
// 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.
const managementBody = document.getElementsByClassName(
KBN_MANAGEMENT_PAGE_CLASSNAME.DEFAULT_BODY
);
if (managementBody.length > 0) {
managementBody[0].classList.add(KBN_MANAGEMENT_PAGE_CLASSNAME.TRANSFORM_BODY_MODIFIER);
return () => {
managementBody[0].classList.remove(KBN_MANAGEMENT_PAGE_CLASSNAME.TRANSFORM_BODY_MODIFIER);
};
}
}, []);
if (!isKibanaContextInitialized(kibanaContext)) {
// TODO proper loading indicator
return null;