Skip to content

Commit

Permalink
[8.x] [ML] Anomaly detection: Adds spacer below split card chart in j…
Browse files Browse the repository at this point in the history 
…ob wizard (elastic#199708) (elastic#199822)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ML] Anomaly detection: Adds spacer below split card chart in job
wizard (elastic#199708)](elastic#199708)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"James
Gowdy","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-12T16:13:29Z","message":"[ML]
Anomaly detection: Adds spacer below split card chart in job wizard
(elastic#199708)\n\nAdds a spacer below the chart so the `Add metric` label
doesn't appear\r\nlike it is underneath the cards due to their drop
shadow.\r\n\r\nRecommend viewing the diff with whitespace hidden as the
change looks\r\nlarger than it actually is.\r\n\r\n<img width=\"1064\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/90e460c4-5ad6-4f4b-bf9f-7163d740747f\">\r\n\r\nvs
\r\n\r\n<img width=\"1057\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/bb8d7bc3-17bb-428d-a8a4-c515a5845025\">","sha":"c58989c41976c50ae097fbca92b4c3b9076c3301","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:enhancement",":ml","Feature:Anomaly
Detection","v9.0.0","backport:version","v8.17.0"],"title":"[ML] Anomaly
detection: Adds spacer below split card chart in job
wizard","number":199708,"url":"https://github.com/elastic/kibana/pull/199708","mergeCommit":{"message":"[ML]
Anomaly detection: Adds spacer below split card chart in job wizard
(elastic#199708)\n\nAdds a spacer below the chart so the `Add metric` label
doesn't appear\r\nlike it is underneath the cards due to their drop
shadow.\r\n\r\nRecommend viewing the diff with whitespace hidden as the
change looks\r\nlarger than it actually is.\r\n\r\n<img width=\"1064\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/90e460c4-5ad6-4f4b-bf9f-7163d740747f\">\r\n\r\nvs
\r\n\r\n<img width=\"1057\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/bb8d7bc3-17bb-428d-a8a4-c515a5845025\">","sha":"c58989c41976c50ae097fbca92b4c3b9076c3301"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/199708","number":199708,"mergeCommit":{"message":"[ML]
Anomaly detection: Adds spacer below split card chart in job wizard
(elastic#199708)\n\nAdds a spacer below the chart so the `Add metric` label
doesn't appear\r\nlike it is underneath the cards due to their drop
shadow.\r\n\r\nRecommend viewing the diff with whitespace hidden as the
change looks\r\nlarger than it actually is.\r\n\r\n<img width=\"1064\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/90e460c4-5ad6-4f4b-bf9f-7163d740747f\">\r\n\r\nvs
\r\n\r\n<img width=\"1057\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/bb8d7bc3-17bb-428d-a8a4-c515a5845025\">","sha":"c58989c41976c50ae097fbca92b4c3b9076c3301"}},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: James Gowdy <[email protected]>
  • Loading branch information
@kibanamachine @jgowdyelastic
kibanamachine and jgowdyelastic authored Nov 12, 2024
1 parent 02a90c1 commit 26dfbab
Showing 1 changed file with 36 additions and 33 deletions.
69 changes: 36 additions & 33 deletions ...ion/jobs/new_job/pages/components/pick_fields_step/components/split_cards/split_cards.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,42 +97,45 @@ export const SplitCards: FC<PropsWithChildren<Props>> = memo(
}

return (
<EuiFlexGroup>
<EuiFlexItem data-test-subj="mlDataSplit">
{(fieldValues.length === 0 || numberOfDetectors === 0) && <>{children}</>}
{fieldValues.length > 0 && numberOfDetectors > 0 && splitField !== null && (
<Fragment>
{(jobType === JOB_TYPE.MULTI_METRIC || jobType === JOB_TYPE.GEO) && (
<Fragment>
<>
<EuiFlexGroup>
<EuiFlexItem data-test-subj="mlDataSplit">
{(fieldValues.length === 0 || numberOfDetectors === 0) && <>{children}</>}
{fieldValues.length > 0 && numberOfDetectors > 0 && splitField !== null && (
<Fragment>
{(jobType === JOB_TYPE.MULTI_METRIC || jobType === JOB_TYPE.GEO) && (
<Fragment>
<div
css={{ fontSize: 'small' }}
data-test-subj={`mlDataSplitTitle ${splitField.name}`}
>
<FormattedMessage
id="xpack.ml.newJob.wizard.pickFieldsStep.splitCards.dataSplitBy"
defaultMessage="Data split by {field}"
values={{ field: splitField.name }}
/>
</div>
<EuiSpacer size="m" />
</Fragment>
)}

{getBackPanels()}
<EuiPanel paddingSize="m" css={splitCardStyle} data-test-subj="mlSplitCard front">
<div
css={{ fontSize: 'small' }}
data-test-subj={`mlDataSplitTitle ${splitField.name}`}
css={{ fontWeight: 'bold', fontSize: 'small' }}
data-test-subj="mlSplitCardTitle"
>
<FormattedMessage
id="xpack.ml.newJob.wizard.pickFieldsStep.splitCards.dataSplitBy"
defaultMessage="Data split by {field}"
values={{ field: splitField.name }}
/>
{fieldValues[0]}
</div>
<EuiSpacer size="m" />
</Fragment>
)}

{getBackPanels()}
<EuiPanel paddingSize="m" css={splitCardStyle} data-test-subj="mlSplitCard front">
<div
css={{ fontWeight: 'bold', fontSize: 'small' }}
data-test-subj="mlSplitCardTitle"
>
{fieldValues[0]}
</div>
<EuiHorizontalRule margin="s" />
<>{children}</>
</EuiPanel>
</Fragment>
)}
</EuiFlexItem>
</EuiFlexGroup>
<EuiHorizontalRule margin="s" />
<>{children}</>
</EuiPanel>
</Fragment>
)}
</EuiFlexItem>
</EuiFlexGroup>
{splitField !== null ? <EuiSpacer size="m" /> : null}
</>
);
}
);

0 comments on commit 26dfbab

Please sign in to comment.