Skip to content

Commit

Permalink
[ML] Fix job selection flyout overflow (#80621) (#80638)
Browse files Browse the repository at this point in the history 
* [ML] fix overflow in job selection flyout

* [ML] render X axis labels on Overall swim lane to prevent misalignment with the View by swim lane
  • Loading branch information
@darnautov
darnautov authored Oct 15, 2020
1 parent 39e670c commit 2ceec2b
Show file tree
Hide file tree
Showing 4 changed files with 126 additions and 116 deletions.
6 changes: 5 additions & 1 deletion x-pack/plugins/ml/public/application/components/job_selector/job_selector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,11 @@ export function JobSelector({ dateFormatTz, singleSelection, timeseriesOnly }: J
function renderFlyout() {
if (isFlyoutVisible) {
return (
<EuiFlyout onClose={closeFlyout}>
<EuiFlyout
onClose={closeFlyout}
data-test-subj="mlFlyoutJobSelector"
aria-labelledby="jobSelectorFlyout"
>
<JobSelectorFlyoutContent
dateFormatTz={dateFormatTz}
timeseriesOnly={timeseriesOnly}
Expand Down
228 changes: 116 additions & 112 deletions x-pack/plugins/ml/public/application/components/job_selector/job_selector_flyout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,120 +176,124 @@ export const JobSelectorFlyoutContent: FC<JobSelectorFlyoutProps> = ({
}

return (
<EuiResizeObserver onResize={handleResize}>
{(resizeRef) => (
<EuiFlexGroup
direction="column"
gutterSize="none"
ref={(e) => {
flyoutEl.current = e;
resizeRef(e);
}}
aria-labelledby="jobSelectorFlyout"
data-test-subj="mlFlyoutJobSelector"
>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="m">
<h2 id="flyoutTitle">
{i18n.translate('xpack.ml.jobSelector.flyoutTitle', {
defaultMessage: 'Job selection',
})}
</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody className="mlJobSelectorFlyoutBody">
{isLoading ? (
<EuiProgress size="xs" color="accent" />
) : (
<>
<EuiFlexGroup direction="column" responsive={false}>
<EuiFlexItem grow={false}>
<EuiFlexGroup wrap responsive={false} gutterSize="xs" alignItems="center">
<NewSelectionIdBadges
limit={BADGE_LIMIT}
maps={jobGroupsMaps}
newSelection={newSelection}
onDeleteClick={removeId}
onLinkClick={() => setShowAllBadges(!showAllBadges)}
showAllBadges={showAllBadges}
/>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexGroup direction="row" justifyContent="spaceBetween" responsive={false}>
<EuiFlexItem grow={false}>
{!singleSelection && newSelection.length > 0 && (
<EuiButtonEmpty
onClick={clearSelection}
size="xs"
data-test-subj="mlFlyoutJobSelectorButtonClearSelection"
>
{i18n.translate('xpack.ml.jobSelector.clearAllFlyoutButton', {
defaultMessage: 'Clear all',
})}
</EuiButtonEmpty>
)}
</EuiFlexItem>
{withTimeRangeSelector && (
<>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="m">
<h2 id="flyoutTitle">
{i18n.translate('xpack.ml.jobSelector.flyoutTitle', {
defaultMessage: 'Job selection',
})}
</h2>
</EuiTitle>
</EuiFlyoutHeader>

<EuiFlyoutBody className="mlJobSelectorFlyoutBody">
<EuiResizeObserver onResize={handleResize}>
{(resizeRef) => (
<div
ref={(e) => {
flyoutEl.current = e;
resizeRef(e);
}}
>
{isLoading ? (
<EuiProgress size="xs" color="accent" />
) : (
<>
<EuiFlexGroup direction="column" responsive={false}>
<EuiFlexItem grow={false}>
<EuiFlexGroup wrap responsive={false} gutterSize="xs" alignItems="center">
<NewSelectionIdBadges
limit={BADGE_LIMIT}
maps={jobGroupsMaps}
newSelection={newSelection}
onDeleteClick={removeId}
onLinkClick={() => setShowAllBadges(!showAllBadges)}
showAllBadges={showAllBadges}
/>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexGroup
direction="row"
justifyContent="spaceBetween"
responsive={false}
>
<EuiFlexItem grow={false}>
<EuiSwitch
label={i18n.translate(
'xpack.ml.jobSelector.applyTimerangeSwitchLabel',
{
defaultMessage: 'Apply time range',
}
)}
checked={applyTimeRange}
onChange={toggleTimerangeSwitch}
data-test-subj="mlFlyoutJobSelectorSwitchApplyTimeRange"
/>
{!singleSelection && newSelection.length > 0 && (
<EuiButtonEmpty
onClick={clearSelection}
size="xs"
data-test-subj="mlFlyoutJobSelectorButtonClearSelection"
>
{i18n.translate('xpack.ml.jobSelector.clearAllFlyoutButton', {
defaultMessage: 'Clear all',
})}
</EuiButtonEmpty>
)}
</EuiFlexItem>
)}
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
<JobSelectorTable
jobs={jobs}
ganttBarWidth={ganttBarWidth}
groupsList={groups}
onSelection={handleNewSelection}
selectedIds={newSelection}
singleSelection={singleSelection}
timeseriesOnly={timeseriesOnly}
withTimeRangeSelector={withTimeRangeSelector}
/>
</>
)}
</EuiFlyoutBody>
<EuiFlyoutFooter>
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<EuiButton
onClick={applySelection}
fill
isDisabled={newSelection.length === 0}
data-test-subj="mlFlyoutJobSelectorButtonApply"
>
{i18n.translate('xpack.ml.jobSelector.applyFlyoutButton', {
defaultMessage: 'Apply',
})}
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonEmpty
iconType="cross"
onClick={onFlyoutClose}
data-test-subj="mlFlyoutJobSelectorButtonClose"
>
{i18n.translate('xpack.ml.jobSelector.closeFlyoutButton', {
defaultMessage: 'Close',
})}
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlyoutFooter>
{withTimeRangeSelector && (
<EuiFlexItem grow={false}>
<EuiSwitch
label={i18n.translate(
'xpack.ml.jobSelector.applyTimerangeSwitchLabel',
{
defaultMessage: 'Apply time range',
}
)}
checked={applyTimeRange}
onChange={toggleTimerangeSwitch}
data-test-subj="mlFlyoutJobSelectorSwitchApplyTimeRange"
/>
</EuiFlexItem>
)}
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
<JobSelectorTable
jobs={jobs}
ganttBarWidth={ganttBarWidth}
groupsList={groups}
onSelection={handleNewSelection}
selectedIds={newSelection}
singleSelection={singleSelection}
timeseriesOnly={timeseriesOnly}
withTimeRangeSelector={withTimeRangeSelector}
/>
</>
)}
</div>
)}
</EuiResizeObserver>
</EuiFlyoutBody>

<EuiFlyoutFooter>
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<EuiButton
onClick={applySelection}
fill
isDisabled={newSelection.length === 0}
data-test-subj="mlFlyoutJobSelectorButtonApply"
>
{i18n.translate('xpack.ml.jobSelector.applyFlyoutButton', {
defaultMessage: 'Apply',
})}
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonEmpty
iconType="cross"
onClick={onFlyoutClose}
data-test-subj="mlFlyoutJobSelectorButtonClose"
>
{i18n.translate('xpack.ml.jobSelector.closeFlyoutButton', {
defaultMessage: 'Close',
})}
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
)}
</EuiResizeObserver>
</EuiFlyoutFooter>
</>
);
};
5 changes: 3 additions & 2 deletions x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,8 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
// Persists container height during loading to prevent page from jumping
return isLoading
? containerHeightRef.current
: rowsCount * CELL_HEIGHT + LEGEND_HEIGHT + (showTimeline ? Y_AXIS_HEIGHT : 0);
: // TODO update when elastic charts X label will be fixed
rowsCount * CELL_HEIGHT + LEGEND_HEIGHT + (true ? Y_AXIS_HEIGHT : 0);
}, [isLoading, rowsCount, showTimeline]);

useEffect(() => {
Expand Down Expand Up @@ -282,7 +283,7 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
},
},
xAxisLabel: {
visible: showTimeline,
visible: true,
// eui color subdued
fill: `#98A2B3`,
formatter: (v: number) => {
Expand Down
3 changes: 2 additions & 1 deletion x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_setup_flyout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,8 +94,9 @@ export async function resolveAnomalySwimlaneUserInput(
</KibanaContextProvider>
),
{
'data-test-subj': 'mlAnomalySwimlaneEmbeddable',
'data-test-subj': 'mlFlyoutJobSelector',
ownFocus: true,
closeButtonAriaLabel: 'jobSelectorFlyout',
}
);

Expand Down

0 comments on commit 2ceec2b

Please sign in to comment.