From 6e6a6385cf7c94d882ab2c2c2a76d43c406c40a4 Mon Sep 17 00:00:00 2001 From: James Gowdy Date: Mon, 27 Feb 2023 15:41:20 +0000 Subject: [PATCH 1/7] [ML] Removing scss override files for anomaly detection jobs --- .../plugins/ml/public/application/_index.scss | 1 - .../components/job_messages/job_messages.tsx | 1 - .../ml/public/application/jobs/_index.scss | 3 - .../custom_url_editor/_custom_url_editor.scss | 19 --- .../components/custom_url_editor/_index.scss | 1 - .../components/custom_url_editor/editor.tsx | 1 - .../application/jobs/jobs_list/_index.scss | 8 - .../jobs/jobs_list/_jobs_list.scss | 3 - .../edit_job_flyout/_edit_job_flyout.scss | 8 - .../components/edit_job_flyout/_index.scss | 1 - .../edit_job_flyout/tabs/custom_urls.tsx | 1 - .../components/job_details/_index.scss | 1 - .../components/job_details/_job_details.scss | 87 ----------- .../components/job_details/job_details.js | 6 +- .../job_details/job_details_pane.js | 110 -------------- .../job_details/job_details_pane.tsx | 139 ++++++++++++++++++ .../components/job_filter_bar/_index.scss | 1 - .../job_filter_bar/_job_filter_bar.scss | 23 --- .../job_filter_bar/job_filter_bar.tsx | 1 - .../components/job_group/_index.scss | 1 - .../components/job_group/_job_group.scss | 10 -- .../components/jobs_list/jobs_list.js | 5 + .../components/jobs_list_view/_index.scss | 1 - .../jobs_list_view/_jobs_list_view.scss | 10 -- .../jobs_list_view/jobs_list_view.js | 43 +++--- .../components/multi_job_actions/_index.scss | 2 - .../multi_job_actions/_multi_job_actions.scss | 35 ----- .../group_selector/_group_selector.scss | 7 - .../group_selector/_index.scss | 3 - .../group_list/_group_list.scss | 40 ----- .../group_selector/group_list/_index.scss | 1 - .../group_selector/group_list/group_list.js | 2 +- .../group_selector/group_selector.js | 2 +- .../new_group_input/_index.scss | 1 - .../new_group_input/_new_group_input.scss | 3 - .../multi_job_actions/multi_job_actions.js | 107 ++++++++------ .../components/custom_urls/description.tsx | 14 +- .../components/custom_urls/index.scss | 12 -- 38 files changed, 250 insertions(+), 464 deletions(-) delete mode 100644 x-pack/plugins/ml/public/application/jobs/_index.scss delete mode 100644 x-pack/plugins/ml/public/application/jobs/components/custom_url_editor/_custom_url_editor.scss delete mode 100644 x-pack/plugins/ml/public/application/jobs/components/custom_url_editor/_index.scss delete mode 100644 x-pack/plugins/ml/public/application/jobs/jobs_list/_index.scss delete mode 100644 x-pack/plugins/ml/public/application/jobs/jobs_list/_jobs_list.scss delete mode 100644 x-pack/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/_edit_job_flyout.scss delete mode 100644 x-pack/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/_index.scss delete mode 100644 x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/_index.scss delete mode 100644 x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/_job_details.scss delete mode 100644 x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details_pane.js create mode 100644 x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details_pane.tsx delete mode 100644 x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_filter_bar/_index.scss delete mode 100644 x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_filter_bar/_job_filter_bar.scss delete mode 100644 x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_group/_index.scss delete mode 100644 x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_group/_job_group.scss delete mode 100644 x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list_view/_index.scss delete mode 100644 x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list_view/_jobs_list_view.scss delete mode 100644 x-pack/plugins/ml/public/application/jobs/jobs_list/components/multi_job_actions/_index.scss delete mode 100644 x-pack/plugins/ml/public/application/jobs/jobs_list/components/multi_job_actions/_multi_job_actions.scss delete mode 100644 x-pack/plugins/ml/public/application/jobs/jobs_list/components/multi_job_actions/group_selector/_group_selector.scss delete mode 100644 x-pack/plugins/ml/public/application/jobs/jobs_list/components/multi_job_actions/group_selector/_index.scss delete mode 100644 x-pack/plugins/ml/public/application/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/_group_list.scss delete mode 100644 x-pack/plugins/ml/public/application/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/_index.scss delete mode 100644 x-pack/plugins/ml/public/application/jobs/jobs_list/components/multi_job_actions/group_selector/new_group_input/_index.scss delete mode 100644 x-pack/plugins/ml/public/application/jobs/jobs_list/components/multi_job_actions/group_selector/new_group_input/_new_group_input.scss delete mode 100644 x-pack/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/additional_section/components/custom_urls/index.scss diff --git a/x-pack/plugins/ml/public/application/_index.scss b/x-pack/plugins/ml/public/application/_index.scss index 309eea83dd527..8bf3ee08cabb3 100644 --- a/x-pack/plugins/ml/public/application/_index.scss +++ b/x-pack/plugins/ml/public/application/_index.scss @@ -10,7 +10,6 @@ // Sub applications @import 'data_frame_analytics/index'; @import 'explorer/index'; // SASSTODO: This file needs to be rewritten - @import 'jobs/index'; // SASSTODO: This collection of sass files has multiple problems @import 'overview/index'; @import 'timeseriesexplorer/index'; diff --git a/x-pack/plugins/ml/public/application/components/job_messages/job_messages.tsx b/x-pack/plugins/ml/public/application/components/job_messages/job_messages.tsx index d78f311475501..41b005c7da58b 100644 --- a/x-pack/plugins/ml/public/application/components/job_messages/job_messages.tsx +++ b/x-pack/plugins/ml/public/application/components/job_messages/job_messages.tsx @@ -137,7 +137,6 @@ export const JobMessages: FC = ({ <> = ({ label={ } - className="url-label" error={invalidLabelError} isInvalid={isInvalidLabel} display="rowCompressed" diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/_index.scss b/x-pack/plugins/ml/public/application/jobs/jobs_list/_index.scss deleted file mode 100644 index 4af4814be8362..0000000000000 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/_index.scss +++ /dev/null @@ -1,8 +0,0 @@ -@import 'jobs_list'; - -@import 'components/edit_job_flyout/index'; -@import 'components/job_details/index'; // SASSTODO: Dangerous EUI overwrites -@import 'components/job_filter_bar/index'; // SASSTODO: Dangerous EUI overwrites -@import 'components/job_group/index'; -@import 'components/jobs_list_view/index'; -@import 'components/multi_job_actions/index'; // SASSTODO: Dangerous EUI overwrites diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/_jobs_list.scss b/x-pack/plugins/ml/public/application/jobs/jobs_list/_jobs_list.scss deleted file mode 100644 index 824f764de3902..0000000000000 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/_jobs_list.scss +++ /dev/null @@ -1,3 +0,0 @@ -.new-job-button-container { - float: right; -} diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/_edit_job_flyout.scss b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/_edit_job_flyout.scss deleted file mode 100644 index 7018a991ce1dc..0000000000000 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/_edit_job_flyout.scss +++ /dev/null @@ -1,8 +0,0 @@ -.edit-custom-url-panel { - .close-editor-button { - position: relative; - float: right; - top: -$euiSizeXS; - right: 0; - } -} diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/_index.scss b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/_index.scss deleted file mode 100644 index 2fdf5a9671be3..0000000000000 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'edit_job_flyout'; \ No newline at end of file diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/tabs/custom_urls.tsx b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/tabs/custom_urls.tsx index 9a7508c634c6b..ac6ad4ae70b8b 100644 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/tabs/custom_urls.tsx +++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/tabs/custom_urls.tsx @@ -268,7 +268,6 @@ class CustomUrlsUI extends Component { defaultMessage: 'Close custom URL editor', } )} - className="close-editor-button" /> {editor} diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/_index.scss b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/_index.scss deleted file mode 100644 index 3930bb1cf73a5..0000000000000 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'job_details'; diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/_job_details.scss b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/_job_details.scss deleted file mode 100644 index fe61be550ecac..0000000000000 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/_job_details.scss +++ /dev/null @@ -1,87 +0,0 @@ -.tab-contents { - margin: -$euiSizeS; - padding: $euiSizeS; - background-color: $euiColorEmptyShade; - - // SASSTODO: Need to remove bootstrap grid - .col-md-6:nth-child(1) { - // SASSTODO: Why is this 7? - padding-right: 7px; - } - - // SASSTODO: Need to remove bootstrap grid - .col-md-6:nth-child(2) { - // SASSTODO: Why is this 7? - padding-left: 7px; - } - - // SASSTODO: This needs to be rewriten. Tons of EUI overwrites - .job-section { - overflow: auto; - padding: 5px 15px; - background-color: $euiColorLightestShade; - border: 1px solid $euiColorLightShade; - border-radius: $euiBorderRadius; - margin: $euiSizeXS 0; - - .euiTable { - background-color: transparent; - - .euiTableRow:first-child { - .euiTableRowCell { - border-top: 0; - } - } - - .euiTableRow:last-child { - .euiTableRowCell { - border-bottom: 0; - } - } - - .euiTableRow { - .euiTableRowCell { - vertical-align: top; - border-bottom: 1px solid $euiColorLightShade; - - .euiTableCellContent__text { - word-wrap: break-word; - } - } - } - - .euiTableRow:hover { - background-color: inherit; - } - } - - .job-item { - font-size: 12px; - } - - .job-item.header { - font-weight: bold; - } - } - - // SASSTODO: This needs a proper calc - .json-textarea { - height: 500px; - } -} - -.job-messages-table { - max-height: 500px; - overflow: auto; - text-align: left; - - tr:last-child { - td { - border-bottom: none; - } - } - - .euiTableRowCell { - background-color: $euiColorEmptyShade; - } -} diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details.js b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details.js index 4eec95106eca2..facf0b2f335e7 100644 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details.js +++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details.js @@ -267,7 +267,11 @@ export class JobDetailsUI extends Component { }); return ( -
+
{}} />
); diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details_pane.js b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details_pane.js deleted file mode 100644 index c70c049dd7489..0000000000000 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details_pane.js +++ /dev/null @@ -1,110 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import PropTypes from 'prop-types'; -import React, { Component } from 'react'; - -import { - EuiFlexGroup, - EuiFlexItem, - EuiTitle, - EuiTable, - EuiTableBody, - EuiTableRow, - EuiTableRowCell, - EuiSpacer, -} from '@elastic/eui'; - -function SectionItem({ item }) { - return ( - - {item[0] !== '' && ( - - {item[0]} - - )} - - {item[1]} - - - ); -} -SectionItem.propTypes = { - item: PropTypes.array.isRequired, -}; - -function Section({ section }) { - if (section.items.length === 0) { - return
; - } - - return ( - - - - -

{section.title}

- - - {section.titleAction} - -
- - - {section.items.map((item, i) => ( - - ))} - - -
- - ); -} -Section.propTypes = { - section: PropTypes.object.isRequired, -}; - -export class JobDetailsPane extends Component { - constructor(props) { - super(props); - this.state = {}; - } - - static getDerivedStateFromProps(props) { - const { sections, time } = props; - return { sections, time }; - } - - render() { - const { sections, time } = this.state; - return ( - - -
-
- {sections - .filter((s) => s.position === 'left') - .map((s, i) => ( -
- ))} -
-
- {sections - .filter((s) => s.position === 'right') - .map((s, i) => ( -
- ))} -
-
- - ); - } -} -JobDetailsPane.propTypes = { - sections: PropTypes.array.isRequired, - 'data-test-subj': PropTypes.string, -}; diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details_pane.tsx b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details_pane.tsx new file mode 100644 index 0000000000000..c6b0bbf7f5a5b --- /dev/null +++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details_pane.tsx @@ -0,0 +1,139 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React, { FC } from 'react'; +import { css } from '@emotion/react'; + +import { + EuiFlexGroup, + EuiFlexItem, + EuiTitle, + EuiTable, + EuiTableBody, + EuiTableRow, + EuiTableRowCell, + EuiSpacer, + useEuiTheme, +} from '@elastic/eui'; + +type Item = [string, string]; + +interface Section { + id: string; + title: string; + titleAction: string; + position: 'left' | 'right'; + items: Item[]; +} + +// fix for the annotation label being hidden inside the bounds of the chart container + +const SectionItem: FC<{ item: Item }> = ({ item }) => { + return ( + + {item[0] !== '' && ( + + {item[0]} + + )} + + {item[1]} + + + ); +}; + +const Section: FC<{ section: Section }> = ({ section }) => { + const theme = useEuiTheme(); + if (section.items.length === 0) { + return
; + } + + const cssOverride = css({ + overflow: 'auto', + padding: '5px 15px', + backgroundColor: theme.euiTheme.colors.lightestShade, + border: `1px solid ${theme.euiTheme.colors.lightShade}`, + borderRadius: theme.euiTheme.border.radius.medium, + margin: `${theme.euiTheme.size.s} 0`, + + '.euiTable': { + backgroundColor: 'transparent', + }, + + '.euiTableRow:hover': { + backgroundColor: 'inherit', + }, + '.euiTableRow:first-child': { + '.euiTableRowCell': { + borderTop: 0, + }, + }, + '.euiTableRow:last-child': { + '.euiTableRowCell': { + borderBottom: 0, + }, + }, + }); + + return ( + <> + + + + + +

{section.title}

+ + + {section.titleAction} + + + +
+ + + {section.items.map((item, i) => ( + + ))} + + +
+ + + + ); +}; + +export const JobDetailsPane: FC<{ sections: any[]; 'data-test-subj': string }> = ({ + sections, + ...props +}) => { + return ( + <> + +
+ + + {sections + .filter((s) => s.position === 'left') + .map((s, i) => ( +
+ ))} + + + {sections + .filter((s) => s.position === 'right') + .map((s, i) => ( +
+ ))} + + +
+ + ); +}; diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_filter_bar/_index.scss b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_filter_bar/_index.scss deleted file mode 100644 index bd0e4ba6a9d45..0000000000000 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_filter_bar/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'job_filter_bar'; \ No newline at end of file diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_filter_bar/_job_filter_bar.scss b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_filter_bar/_job_filter_bar.scss deleted file mode 100644 index ecea309314dce..0000000000000 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_filter_bar/_job_filter_bar.scss +++ /dev/null @@ -1,23 +0,0 @@ -.mlJobFilterBar { - // SASSTODO: Dangerou EUI overwrites - .euiFilterGroup { - .euiPopover .euiPanel { - .group-item { - padding: $euiSizeS $euiSize; - } - - .inline-group { - border: 1px solid $euiColorEmptyShade; - border-radius: $euiBorderRadius; - } - - .euiFilterSelectItem:hover, .euiFilterSelectItem:focus { - text-decoration: none; - .inline-group { - border: 1px solid $euiColorDarkShade; - box-shadow: 0 1px 2px $euiColorMediumShade; - } - } - } - } -} diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_filter_bar/job_filter_bar.tsx b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_filter_bar/job_filter_bar.tsx index dbc64d082f117..0384b8895dd6c 100644 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_filter_bar/job_filter_bar.tsx +++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_filter_bar/job_filter_bar.tsx @@ -155,7 +155,6 @@ export const JobFilterBar: FC = ({ queryText, setFilters }) = query={queryInstance} filters={filters} onChange={onChange} - className="mlJobFilterBar" /> diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_group/_index.scss b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_group/_index.scss deleted file mode 100644 index 361f78b08fcc9..0000000000000 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_group/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'job_group'; \ No newline at end of file diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_group/_job_group.scss b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_group/_job_group.scss deleted file mode 100644 index fc5bce54afb6a..0000000000000 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_group/_job_group.scss +++ /dev/null @@ -1,10 +0,0 @@ -.inline-group { - font-size: 12px; - background-color: $euiColorLightShade; - padding: 2px 5px; - border-radius: 2px; - display: inline-block; - margin: 0 3px; - color: $euiColorEmptyShade; - vertical-align: text-top; -} diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list/jobs_list.js b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list/jobs_list.js index a2a03ef7ce69c..5e72748bdb8dd 100644 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list/jobs_list.js +++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list/jobs_list.js @@ -385,6 +385,11 @@ export class JobsList extends Component { } itemId="id" className={`jobs-list-table ${selectedJobsClass}`} + css={{ + '.euiTableRow-isExpandedRow': { + backgroundColor: '#fff', + }, + }} items={pageOfItems} columns={columns} pagination={pagination} diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list_view/_index.scss b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list_view/_index.scss deleted file mode 100644 index c1d8b70a054a2..0000000000000 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list_view/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'jobs_list_view'; \ No newline at end of file diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list_view/_jobs_list_view.scss b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list_view/_jobs_list_view.scss deleted file mode 100644 index ef0fbc358193e..0000000000000 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list_view/_jobs_list_view.scss +++ /dev/null @@ -1,10 +0,0 @@ -// SASSTODO: Proper calcs -.actions-bar { - min-height: 60px; - display: flex; - align-items: center; -} - -.job-management { - padding: 20px; -} diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js index 179d5d48b3fe5..047f4b83522e4 100644 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js +++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js @@ -418,23 +418,32 @@ export class JobsListView extends Component {
-
- this.refreshJobSummaryList()} - /> - -
+ + + this.refreshJobSummaryList()} + /> + + + + + + {groups.map((g, index) => (
this.closePopover()} > -
+
0; + if (!jobsSelected) { + return null; + } + return (
- {jobsSelected && ( - - - -

- -

- - - -
- - - - - - - - - - - - )} + + + +

+ +

+ + + +
+ + + + + + + + + + +
); } diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/additional_section/components/custom_urls/description.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/additional_section/components/custom_urls/description.tsx index cd2156b059f47..f0043ca3ea47b 100644 --- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/additional_section/components/custom_urls/description.tsx +++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/additional_section/components/custom_urls/description.tsx @@ -9,6 +9,7 @@ import React, { memo, FC } from 'react'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; import { EuiDescribedFormGroup, EuiFormRow, EuiLink } from '@elastic/eui'; +import { css } from '@emotion/react'; import { useMlKibana } from '../../../../../../../../../contexts/kibana'; export const Description: FC = memo(({ children }) => { @@ -22,10 +23,21 @@ export const Description: FC = memo(({ children }) => { defaultMessage: 'Custom URLs', } ); + + const cssOverride = css({ + '> .euiFlexGroup': { + '> .euiFlexItem': { + '&:last-child': { + flexBasis: '50%', + }, + }, + }, + }); + return ( {title}} description={ .euiFlexGroup { - > .euiFlexItem { - &:first-child { - max-width: 388px; - } - &:last-child { - flex-basis: 50%; - } - } - } -} From 91ec8f4767f493cef53f8fb533e6acdb1bba929b Mon Sep 17 00:00:00 2001 From: James Gowdy Date: Mon, 27 Feb 2023 16:15:39 +0000 Subject: [PATCH 2/7] fixes for dark mode --- .../jobs/jobs_list/components/job_details/job_details.js | 2 +- .../jobs/jobs_list/components/jobs_list/jobs_list.js | 5 ----- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details.js b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details.js index facf0b2f335e7..efd21ea1b5963 100644 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details.js +++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details.js @@ -269,7 +269,7 @@ export class JobDetailsUI extends Component { return (
{}} /> diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list/jobs_list.js b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list/jobs_list.js index 5e72748bdb8dd..a2a03ef7ce69c 100644 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list/jobs_list.js +++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list/jobs_list.js @@ -385,11 +385,6 @@ export class JobsList extends Component { } itemId="id" className={`jobs-list-table ${selectedJobsClass}`} - css={{ - '.euiTableRow-isExpandedRow': { - backgroundColor: '#fff', - }, - }} items={pageOfItems} columns={columns} pagination={pagination} From 7ba751fd95985b75a489d7f2d4965bde8cb8868b Mon Sep 17 00:00:00 2001 From: James Gowdy Date: Mon, 27 Feb 2023 17:47:49 +0000 Subject: [PATCH 3/7] further style removals --- .../plugins/ml/public/application/_hacks.scss | 33 ------------------- .../plugins/ml/public/application/_index.scss | 8 ----- .../components/controls/_controls.scss | 16 --------- .../components/controls/_index.scss | 2 -- .../controls/select_severity/_index.scss | 1 - .../select_severity/_select_severity.scss | 6 ---- .../components/items_grid/_index.scss | 1 - .../components/items_grid/_items_grid.scss | 3 -- .../components/loading_indicator/_index.scss | 1 - .../loading_indicator/_loading_indicator.scss | 10 ------ .../loading_indicator/loading_indicator.tsx | 9 ++++- .../components/ml_embedded_map/_index.scss | 1 - .../ml_embedded_map/_ml_embedded_map.scss | 8 ----- .../ml_embedded_map/ml_embedded_map.tsx | 9 ++++- .../components/stats_bar/_index.scss | 2 -- .../components/stats_bar/_stat.scss | 3 -- .../components/stats_bar/_stats_bar.scss | 6 ---- .../application/components/stats_bar/stat.tsx | 4 ++- .../components/stats_bar/stats_bar.tsx | 7 +++- .../explorer_chart_distribution.test.js | 6 ++-- .../explorer_chart_single_metric.test.js | 6 ++-- .../job_details/job_details_pane.tsx | 10 +++--- .../public/application/overview/_index.scss | 1 - .../overview/components/_index.scss | 8 ----- .../analytics_panel/analytics_panel.tsx | 10 +++--- 25 files changed, 42 insertions(+), 129 deletions(-) delete mode 100644 x-pack/plugins/ml/public/application/_hacks.scss delete mode 100644 x-pack/plugins/ml/public/application/components/controls/_controls.scss delete mode 100644 x-pack/plugins/ml/public/application/components/controls/_index.scss delete mode 100644 x-pack/plugins/ml/public/application/components/controls/select_severity/_index.scss delete mode 100644 x-pack/plugins/ml/public/application/components/controls/select_severity/_select_severity.scss delete mode 100644 x-pack/plugins/ml/public/application/components/items_grid/_index.scss delete mode 100644 x-pack/plugins/ml/public/application/components/items_grid/_items_grid.scss delete mode 100644 x-pack/plugins/ml/public/application/components/loading_indicator/_index.scss delete mode 100644 x-pack/plugins/ml/public/application/components/loading_indicator/_loading_indicator.scss delete mode 100644 x-pack/plugins/ml/public/application/components/ml_embedded_map/_index.scss delete mode 100644 x-pack/plugins/ml/public/application/components/ml_embedded_map/_ml_embedded_map.scss delete mode 100644 x-pack/plugins/ml/public/application/components/stats_bar/_index.scss delete mode 100644 x-pack/plugins/ml/public/application/components/stats_bar/_stat.scss delete mode 100644 x-pack/plugins/ml/public/application/components/stats_bar/_stats_bar.scss delete mode 100644 x-pack/plugins/ml/public/application/overview/_index.scss delete mode 100644 x-pack/plugins/ml/public/application/overview/components/_index.scss diff --git a/x-pack/plugins/ml/public/application/_hacks.scss b/x-pack/plugins/ml/public/application/_hacks.scss deleted file mode 100644 index 13fabcb8045aa..0000000000000 --- a/x-pack/plugins/ml/public/application/_hacks.scss +++ /dev/null @@ -1,33 +0,0 @@ -.tab-datavisualizer_index_select, -.tab-timeseriesexplorer, -.tab-explorer { - // Make all page background white until More of the pages use EuiPage to wrap in panel-like components - background-color: $euiColorEmptyShade; -} - -// ML specific bootstrap hacks -.button-wrapper { - display: inline; -} - -.button-wrapper.disabled .kuiButton[disabled] { - pointer-events: none; -} - -.button-wrapper.disabled { - cursor: not-allowed; -} - -// SASSTODO: Remove all the floats -.clear, .clearfix { - clear: both; -} - -// Helper class for functional tests to disable anti-aliasing for canvas elements -.mlDisableAntiAliasing { - -webkit-font-smoothing : none; - - * canvas { - image-rendering: pixelated; - } -} diff --git a/x-pack/plugins/ml/public/application/_index.scss b/x-pack/plugins/ml/public/application/_index.scss index 8bf3ee08cabb3..fbbbe753d52ec 100644 --- a/x-pack/plugins/ml/public/application/_index.scss +++ b/x-pack/plugins/ml/public/application/_index.scss @@ -10,23 +10,15 @@ // Sub applications @import 'data_frame_analytics/index'; @import 'explorer/index'; // SASSTODO: This file needs to be rewritten - @import 'overview/index'; @import 'timeseriesexplorer/index'; // Components @import 'components/annotations/annotation_description_list/index'; // SASSTODO: This file overwrites EUI directly @import 'components/anomalies_table/index'; // SASSTODO: This file overwrites EUI directly @import 'components/color_range_legend/index'; - @import 'components/controls/index'; @import 'components/entity_cell/index'; @import 'components/influencers_list/index'; - @import 'components/items_grid/index'; @import 'components/job_selector/index'; - @import 'components/loading_indicator/index'; // SASSTODO: This component should be replaced with EuiLoadingSpinner @import 'components/rule_editor/index'; // SASSTODO: This file overwrites EUI directly - @import 'components/stats_bar/index'; - @import 'components/ml_embedded_map/index'; - // Hacks are last so they can overwrite anything above if needed - @import 'hacks'; } diff --git a/x-pack/plugins/ml/public/application/components/controls/_controls.scss b/x-pack/plugins/ml/public/application/components/controls/_controls.scss deleted file mode 100644 index d491e88dffa24..0000000000000 --- a/x-pack/plugins/ml/public/application/components/controls/_controls.scss +++ /dev/null @@ -1,16 +0,0 @@ -.ml-table-controls { - label { - font-size: $euiFontSizeXS; - padding: 0 0 $euiSizeXS $euiSizeXS; - } - - .ml-table-controls-element { - display: inline-block; - padding-left: $euiSize; - } - - select { - font-size: $euiFontSizeXS; - font-style: normal; - } -} diff --git a/x-pack/plugins/ml/public/application/components/controls/_index.scss b/x-pack/plugins/ml/public/application/components/controls/_index.scss deleted file mode 100644 index 84c0e21734b89..0000000000000 --- a/x-pack/plugins/ml/public/application/components/controls/_index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import 'controls'; -@import 'select_severity/index'; diff --git a/x-pack/plugins/ml/public/application/components/controls/select_severity/_index.scss b/x-pack/plugins/ml/public/application/components/controls/select_severity/_index.scss deleted file mode 100644 index f238b65c9b955..0000000000000 --- a/x-pack/plugins/ml/public/application/components/controls/select_severity/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'select_severity'; \ No newline at end of file diff --git a/x-pack/plugins/ml/public/application/components/controls/select_severity/_select_severity.scss b/x-pack/plugins/ml/public/application/components/controls/select_severity/_select_severity.scss deleted file mode 100644 index 2edfe612183d0..0000000000000 --- a/x-pack/plugins/ml/public/application/components/controls/select_severity/_select_severity.scss +++ /dev/null @@ -1,6 +0,0 @@ -// SASSTODO: Should be removed -.ml-select-severity { - .euiFormControlLayoutClearButton { - display: none; - } -} diff --git a/x-pack/plugins/ml/public/application/components/items_grid/_index.scss b/x-pack/plugins/ml/public/application/components/items_grid/_index.scss deleted file mode 100644 index 243c80da52918..0000000000000 --- a/x-pack/plugins/ml/public/application/components/items_grid/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'items_grid'; \ No newline at end of file diff --git a/x-pack/plugins/ml/public/application/components/items_grid/_items_grid.scss b/x-pack/plugins/ml/public/application/components/items_grid/_items_grid.scss deleted file mode 100644 index c3bd6b115bbd6..0000000000000 --- a/x-pack/plugins/ml/public/application/components/items_grid/_items_grid.scss +++ /dev/null @@ -1,3 +0,0 @@ -.ml-items-grid-page-size-menu { - width: 140px; // SASSTODO: Needs a proper calc -} diff --git a/x-pack/plugins/ml/public/application/components/loading_indicator/_index.scss b/x-pack/plugins/ml/public/application/components/loading_indicator/_index.scss deleted file mode 100644 index aaab50ac5763f..0000000000000 --- a/x-pack/plugins/ml/public/application/components/loading_indicator/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'loading_indicator'; \ No newline at end of file diff --git a/x-pack/plugins/ml/public/application/components/loading_indicator/_loading_indicator.scss b/x-pack/plugins/ml/public/application/components/loading_indicator/_loading_indicator.scss deleted file mode 100644 index e0a048223b7ff..0000000000000 --- a/x-pack/plugins/ml/public/application/components/loading_indicator/_loading_indicator.scss +++ /dev/null @@ -1,10 +0,0 @@ -// SASSTODO: This needs to be replaced with EuiLoadingSpinner - -.ml-loading-indicator { - text-align: center; - font-size: 17px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; -} diff --git a/x-pack/plugins/ml/public/application/components/loading_indicator/loading_indicator.tsx b/x-pack/plugins/ml/public/application/components/loading_indicator/loading_indicator.tsx index d4c214cf2a1b6..0af264892cb35 100644 --- a/x-pack/plugins/ml/public/application/components/loading_indicator/loading_indicator.tsx +++ b/x-pack/plugins/ml/public/application/components/loading_indicator/loading_indicator.tsx @@ -13,7 +13,14 @@ export const LoadingIndicator: FC<{ height?: number; label?: string }> = ({ heig height = height ? +height : 100; return (
diff --git a/x-pack/plugins/ml/public/application/components/ml_embedded_map/_index.scss b/x-pack/plugins/ml/public/application/components/ml_embedded_map/_index.scss deleted file mode 100644 index 6d0d30dae670e..0000000000000 --- a/x-pack/plugins/ml/public/application/components/ml_embedded_map/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'ml_embedded_map'; diff --git a/x-pack/plugins/ml/public/application/components/ml_embedded_map/_ml_embedded_map.scss b/x-pack/plugins/ml/public/application/components/ml_embedded_map/_ml_embedded_map.scss deleted file mode 100644 index 495fc40ddb27c..0000000000000 --- a/x-pack/plugins/ml/public/application/components/ml_embedded_map/_ml_embedded_map.scss +++ /dev/null @@ -1,8 +0,0 @@ -.mlEmbeddedMapContent { - width: 100%; - height: 100%; - display: flex; - flex: 1 1 100%; - z-index: 1; - min-height: 0; // Absolute must for Firefox to scroll contents -} diff --git a/x-pack/plugins/ml/public/application/components/ml_embedded_map/ml_embedded_map.tsx b/x-pack/plugins/ml/public/application/components/ml_embedded_map/ml_embedded_map.tsx index ae9dbac3c2d02..57d2abe3577b9 100644 --- a/x-pack/plugins/ml/public/application/components/ml_embedded_map/ml_embedded_map.tsx +++ b/x-pack/plugins/ml/public/application/components/ml_embedded_map/ml_embedded_map.tsx @@ -143,7 +143,14 @@ export function MlEmbeddedMapComponent({ return (
); diff --git a/x-pack/plugins/ml/public/application/components/stats_bar/_index.scss b/x-pack/plugins/ml/public/application/components/stats_bar/_index.scss deleted file mode 100644 index e8d8e85763eff..0000000000000 --- a/x-pack/plugins/ml/public/application/components/stats_bar/_index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import 'stat'; -@import 'stats_bar'; diff --git a/x-pack/plugins/ml/public/application/components/stats_bar/_stat.scss b/x-pack/plugins/ml/public/application/components/stats_bar/_stat.scss deleted file mode 100644 index ea570c24f0d7b..0000000000000 --- a/x-pack/plugins/ml/public/application/components/stats_bar/_stat.scss +++ /dev/null @@ -1,3 +0,0 @@ -.stat { - margin-right: $euiSizeS; -} diff --git a/x-pack/plugins/ml/public/application/components/stats_bar/_stats_bar.scss b/x-pack/plugins/ml/public/application/components/stats_bar/_stats_bar.scss deleted file mode 100644 index c433b53789573..0000000000000 --- a/x-pack/plugins/ml/public/application/components/stats_bar/_stats_bar.scss +++ /dev/null @@ -1,6 +0,0 @@ -.mlStatsBar { - // SASSTODO: proper calcs - height: 42px; - padding: 14px; - background-color: $euiColorLightestShade; -} diff --git a/x-pack/plugins/ml/public/application/components/stats_bar/stat.tsx b/x-pack/plugins/ml/public/application/components/stats_bar/stat.tsx index ae04a7a3b2448..2a0e8aad89bf0 100644 --- a/x-pack/plugins/ml/public/application/components/stats_bar/stat.tsx +++ b/x-pack/plugins/ml/public/application/components/stats_bar/stat.tsx @@ -6,6 +6,7 @@ */ import React, { FC } from 'react'; +import { useEuiTheme } from '@elastic/eui'; export interface StatsBarStat { label: string; @@ -18,8 +19,9 @@ interface StatProps { } export const Stat: FC = ({ stat }) => { + const { euiTheme } = useEuiTheme(); return ( - + {stat.label}:{' '} {stat.value} diff --git a/x-pack/plugins/ml/public/application/components/stats_bar/stats_bar.tsx b/x-pack/plugins/ml/public/application/components/stats_bar/stats_bar.tsx index 15324c180e293..7f2c82d3476e3 100644 --- a/x-pack/plugins/ml/public/application/components/stats_bar/stats_bar.tsx +++ b/x-pack/plugins/ml/public/application/components/stats_bar/stats_bar.tsx @@ -6,6 +6,7 @@ */ import React, { FC } from 'react'; +import { useEuiTheme } from '@elastic/eui'; import { Stat, StatsBarStat } from './stat'; interface Stats { @@ -37,9 +38,13 @@ interface StatsBarProps { } export const StatsBar: FC = ({ stats, dataTestSub }) => { + const { euiTheme } = useEuiTheme(); const statsList = Object.keys(stats).map((k) => stats[k as StatsKey]); return ( -
+
{statsList .filter((s: StatsBarStat) => s.show) .map((s: StatsBarStat) => ( diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.test.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.test.js index 339925d3f16ee..d77b66b960625 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.test.js +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.test.js @@ -60,7 +60,7 @@ describe('ExplorerChart', () => { // the directive just ends up being empty. expect(wrapper.isEmptyRender()).toBeTruthy(); expect(wrapper.find('.content-wrapper')).toHaveLength(0); - expect(wrapper.find('.ml-loading-indicator .euiLoadingChart')).toHaveLength(0); + expect(wrapper.find('.euiLoadingChart')).toHaveLength(0); }); test('Loading status active, no chart', () => { @@ -84,7 +84,7 @@ describe('ExplorerChart', () => { // test if the loading indicator is shown // Added span because class appears twice with classNames and Emotion - expect(wrapper.find('.ml-loading-indicator span.euiLoadingChart')).toHaveLength(1); + expect(wrapper.find('span.euiLoadingChart')).toHaveLength(1); }); // For the following tests the directive needs to be rendered in the actual DOM, @@ -121,7 +121,7 @@ describe('ExplorerChart', () => { const wrapper = init(mockChartData); // the loading indicator should not be shown - expect(wrapper.find('.ml-loading-indicator .euiLoadingChart')).toHaveLength(0); + expect(wrapper.find('.euiLoadingChart')).toHaveLength(0); // test if all expected elements are present // need to use getDOMNode() because the chart is not rendered via react itself diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.test.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.test.js index 3748a196e742d..abe8c0c991cc4 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.test.js +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.test.js @@ -62,7 +62,7 @@ describe('ExplorerChart', () => { // the directive just ends up being empty. expect(wrapper.isEmptyRender()).toBeTruthy(); expect(wrapper.find('.content-wrapper')).toHaveLength(0); - expect(wrapper.find('.ml-loading-indicator .euiLoadingChart')).toHaveLength(0); + expect(wrapper.find('.euiLoadingChart')).toHaveLength(0); }); test('Loading status active, no chart', () => { @@ -87,7 +87,7 @@ describe('ExplorerChart', () => { // test if the loading indicator is shown // Added span because class appears twice with classNames and Emotion - expect(wrapper.find('.ml-loading-indicator span.euiLoadingChart')).toHaveLength(1); + expect(wrapper.find('span.euiLoadingChart')).toHaveLength(1); }); // For the following tests the directive needs to be rendered in the actual DOM, @@ -126,7 +126,7 @@ describe('ExplorerChart', () => { const wrapper = init(mockChartData); // the loading indicator should not be shown - expect(wrapper.find('.ml-loading-indicator .euiLoadingChart')).toHaveLength(0); + expect(wrapper.find('.euiLoadingChart')).toHaveLength(0); // test if all expected elements are present // need to use getDOMNode() because the chart is not rendered via react itself diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details_pane.tsx b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details_pane.tsx index c6b0bbf7f5a5b..90f4f044188b8 100644 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details_pane.tsx +++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details_pane.tsx @@ -48,7 +48,7 @@ const SectionItem: FC<{ item: Item }> = ({ item }) => { }; const Section: FC<{ section: Section }> = ({ section }) => { - const theme = useEuiTheme(); + const { euiTheme } = useEuiTheme(); if (section.items.length === 0) { return
; } @@ -56,10 +56,10 @@ const Section: FC<{ section: Section }> = ({ section }) => { const cssOverride = css({ overflow: 'auto', padding: '5px 15px', - backgroundColor: theme.euiTheme.colors.lightestShade, - border: `1px solid ${theme.euiTheme.colors.lightShade}`, - borderRadius: theme.euiTheme.border.radius.medium, - margin: `${theme.euiTheme.size.s} 0`, + backgroundColor: euiTheme.colors.lightestShade, + border: `1px solid ${euiTheme.colors.lightShade}`, + borderRadius: euiTheme.border.radius.medium, + margin: `${euiTheme.size.s} 0`, '.euiTable': { backgroundColor: 'transparent', diff --git a/x-pack/plugins/ml/public/application/overview/_index.scss b/x-pack/plugins/ml/public/application/overview/_index.scss deleted file mode 100644 index 841415620d691..0000000000000 --- a/x-pack/plugins/ml/public/application/overview/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'components/index'; diff --git a/x-pack/plugins/ml/public/application/overview/components/_index.scss b/x-pack/plugins/ml/public/application/overview/components/_index.scss deleted file mode 100644 index 10abd3d6a25d5..0000000000000 --- a/x-pack/plugins/ml/public/application/overview/components/_index.scss +++ /dev/null @@ -1,8 +0,0 @@ -.mlOverviewPanel__isLoading { - text-align: center; - padding: 10%; -} - -.mlOverviewPanel__spinner { - display: inline-block; -} diff --git a/x-pack/plugins/ml/public/application/overview/components/analytics_panel/analytics_panel.tsx b/x-pack/plugins/ml/public/application/overview/components/analytics_panel/analytics_panel.tsx index e5c1bb867bbd9..094693be8787e 100644 --- a/x-pack/plugins/ml/public/application/overview/components/analytics_panel/analytics_panel.tsx +++ b/x-pack/plugins/ml/public/application/overview/components/analytics_panel/analytics_panel.tsx @@ -75,8 +75,6 @@ export const AnalyticsPanel: FC = ({ setLazyJobCount }) => { ); - const panelClass = isInitialized === false ? 'mlOverviewPanel__isLoading' : 'mlOverviewPanel'; - const noDFAJobs = errorMessage === undefined && isInitialized === true && analytics.length === 0; return ( @@ -84,10 +82,14 @@ export const AnalyticsPanel: FC = ({ setLazyJobCount }) => { {noDFAJobs ? ( ) : ( - + {typeof errorMessage !== 'undefined' ? errorDisplay : null} {isInitialized === false && ( - + )} {isInitialized === true && analytics.length > 0 && ( From 05e9c4a7e76be3d0c3b769cb305a1a27556c37c1 Mon Sep 17 00:00:00 2001 From: James Gowdy Date: Mon, 27 Feb 2023 17:55:14 +0000 Subject: [PATCH 4/7] icon styles removed --- .../plugins/ml/public/application/_app.scss | 30 -------------- .../plugins/ml/public/application/_index.scss | 3 -- .../anomalies_table/_anomalies_table.scss | 40 ------------------- 3 files changed, 73 deletions(-) delete mode 100644 x-pack/plugins/ml/public/application/_app.scss diff --git a/x-pack/plugins/ml/public/application/_app.scss b/x-pack/plugins/ml/public/application/_app.scss deleted file mode 100644 index 6dfae7a8921f3..0000000000000 --- a/x-pack/plugins/ml/public/application/_app.scss +++ /dev/null @@ -1,30 +0,0 @@ -// ML has app specific coloring for it's various warning levels. -// These are used almost everywhere. - -.ml-icon-severity-critical, -.ml-icon-severity-major, -.ml-icon-severity-minor, -.ml-icon-severity-warning, -.ml-icon-severity-unknown { - text-shadow: 1px 1px 1px $euiColorLightShade; -} - -.ml-icon-severity-critical { - color: $mlColorCriticalText; -} - -.ml-icon-severity-major { - color: $mlColorMajorText; -} - -.ml-icon-severity-minor { - color: $mlColorMinorText; -} - -.ml-icon-severity-warning { - color: $mlColorWarningText; -} - -.ml-icon-severity-unknown { - color: $mlColorUnknownText; -} diff --git a/x-pack/plugins/ml/public/application/_index.scss b/x-pack/plugins/ml/public/application/_index.scss index fbbbe753d52ec..ac9e16e5f3e78 100644 --- a/x-pack/plugins/ml/public/application/_index.scss +++ b/x-pack/plugins/ml/public/application/_index.scss @@ -4,9 +4,6 @@ // Protect the rest of Kibana from ML generic namespacing // SASSTODO: Prefix ml selectors instead .ml-app { - // App level - @import 'app'; - // Sub applications @import 'data_frame_analytics/index'; @import 'explorer/index'; // SASSTODO: This file needs to be rewritten diff --git a/x-pack/plugins/ml/public/application/components/anomalies_table/_anomalies_table.scss b/x-pack/plugins/ml/public/application/components/anomalies_table/_anomalies_table.scss index 06dfacf63a213..4f11115e82712 100644 --- a/x-pack/plugins/ml/public/application/components/anomalies_table/_anomalies_table.scss +++ b/x-pack/plugins/ml/public/application/components/anomalies_table/_anomalies_table.scss @@ -1,45 +1,5 @@ // SASSTODO: This file has several direct EUI overwrites that need to be removed .ml-anomalies-table { - .ml-icon-severity-critical, - .ml-icon-severity-major, - .ml-icon-severity-minor, - .ml-icon-severity-warning, - .ml-icon-severity-unknown { - color: inherit; - text-shadow: none; - } - - // SASSTODO: Should only be three options, logic moved to the JS, where EuiIcon accepts a color - .ml-icon-severity-critical { - .euiIcon { - fill: $mlColorCriticalText; - } - } - - .ml-icon-severity-major { - .euiIcon { - fill: $mlColorMajorText; - } - } - - .ml-icon-severity-minor { - .euiIcon { - fill: $mlColorMinorText; - } - } - - .ml-icon-severity-warning { - .euiIcon { - fill: $mlColorWarningText; - } - } - - .ml-icon-severity-unknown { - .euiIcon { - fill: $mlColorUnknownText; - } - } - tr th:first-child, tr td:first-child { width: $euiSizeXL; From 93de1e1dfd24318b9738cac1d5d97c9458ceb7b3 Mon Sep 17 00:00:00 2001 From: James Gowdy Date: Mon, 27 Feb 2023 17:58:06 +0000 Subject: [PATCH 5/7] updating snapshots --- .../custom_url_editor/__snapshots__/editor.test.tsx.snap | 6 ------ 1 file changed, 6 deletions(-) diff --git a/x-pack/plugins/ml/public/application/jobs/components/custom_url_editor/__snapshots__/editor.test.tsx.snap b/x-pack/plugins/ml/public/application/jobs/components/custom_url_editor/__snapshots__/editor.test.tsx.snap index 6c5d3d473d413..163bad28d8cc2 100644 --- a/x-pack/plugins/ml/public/application/jobs/components/custom_url_editor/__snapshots__/editor.test.tsx.snap +++ b/x-pack/plugins/ml/public/application/jobs/components/custom_url_editor/__snapshots__/editor.test.tsx.snap @@ -21,7 +21,6 @@ exports[`CustomUrlEditor renders the editor for a dashboard type URL with a labe data-test-subj="mlJobCustomUrlForm" > Date: Tue, 28 Feb 2023 10:53:11 +0000 Subject: [PATCH 6/7] fixing test --- .../jobs_list_view/jobs_list_view.js | 1 + .../multi_job_actions/multi_job_actions.js | 96 +++++++++---------- 2 files changed, 47 insertions(+), 50 deletions(-) diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js index 047f4b83522e4..75ada48dbdc4c 100644 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js +++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js @@ -423,6 +423,7 @@ export class JobsListView extends Component { alignItems: 'center', minHeight: '60px', }} + gutterSize="none" > 0; - if (!jobsSelected) { - return null; - } return (
- - - -

- -

- - - -
- - - - - - - - - - - + {jobsSelected ? ( + + + +

+ +

+ + + +
+ + + + + + + + + + + + ) : null}
); } From c0b3e32ad44dbd2646b2c2e627c3b9858d3c812b Mon Sep 17 00:00:00 2001 From: James Gowdy Date: Tue, 28 Feb 2023 16:18:56 +0000 Subject: [PATCH 7/7] changes based on review --- .../loading_indicator/loading_indicator.tsx | 35 ++++++++----------- .../components/stats_bar/stats_bar.tsx | 2 +- .../components/job_details/job_details.js | 6 +--- .../job_details/job_details_pane.tsx | 9 +++-- 4 files changed, 22 insertions(+), 30 deletions(-) diff --git a/x-pack/plugins/ml/public/application/components/loading_indicator/loading_indicator.tsx b/x-pack/plugins/ml/public/application/components/loading_indicator/loading_indicator.tsx index 0af264892cb35..d202c080e2dcb 100644 --- a/x-pack/plugins/ml/public/application/components/loading_indicator/loading_indicator.tsx +++ b/x-pack/plugins/ml/public/application/components/loading_indicator/loading_indicator.tsx @@ -7,30 +7,23 @@ import React, { FC } from 'react'; -import { EuiLoadingChart, EuiSpacer } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiLoadingChart, EuiSpacer } from '@elastic/eui'; export const LoadingIndicator: FC<{ height?: number; label?: string }> = ({ height, label }) => { height = height ? +height : 100; return ( -
- - {label && ( - <> - -
{label}
- - )} -
+ + +
+ + {label && ( + <> + +
{label}
+ + )} +
+ + ); }; diff --git a/x-pack/plugins/ml/public/application/components/stats_bar/stats_bar.tsx b/x-pack/plugins/ml/public/application/components/stats_bar/stats_bar.tsx index 7f2c82d3476e3..535f5708693b0 100644 --- a/x-pack/plugins/ml/public/application/components/stats_bar/stats_bar.tsx +++ b/x-pack/plugins/ml/public/application/components/stats_bar/stats_bar.tsx @@ -42,7 +42,7 @@ export const StatsBar: FC = ({ stats, dataTestSub }) => { const statsList = Object.keys(stats).map((k) => stats[k as StatsKey]); return (
{statsList diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details.js b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details.js index efd21ea1b5963..4eec95106eca2 100644 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details.js +++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details.js @@ -267,11 +267,7 @@ export class JobDetailsUI extends Component { }); return ( -
+
{}} />
); diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details_pane.tsx b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details_pane.tsx index 90f4f044188b8..9d090425ff4ef 100644 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details_pane.tsx +++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details_pane.tsx @@ -33,15 +33,18 @@ interface Section { // fix for the annotation label being hidden inside the bounds of the chart container const SectionItem: FC<{ item: Item }> = ({ item }) => { + const { euiTheme } = useEuiTheme(); + const fontSize = euiTheme.size.m; + return ( {item[0] !== '' && ( - {item[0]} + {item[0]} )} - {item[1]} + {item[1]} ); @@ -55,7 +58,7 @@ const Section: FC<{ section: Section }> = ({ section }) => { const cssOverride = css({ overflow: 'auto', - padding: '5px 15px', + padding: `${euiTheme.size.xs} ${euiTheme.size.m}`, backgroundColor: euiTheme.colors.lightestShade, border: `1px solid ${euiTheme.colors.lightShade}`, borderRadius: euiTheme.border.radius.medium,