From fbc544da36687146dd2a7e8b1f6158ff3184eda8 Mon Sep 17 00:00:00 2001 From: Coen Warmer Date: Thu, 14 Mar 2024 12:29:12 +0100 Subject: [PATCH] [Observability Solution][Maintenance] Move to Emotion CSS, enable Telemetry and i18n ESLint rules for all Obs plugins (#177785) ## Summary This does two things: * Moves to Emotion CSS from .scss files * Enables Telemetry and i18n ESLint rules for all Observability apps ## Why? **Move to Emotion CSS** There were four .scss files total in the 17 Observability plugins. Two of them were empty. The remaining two had one class each. By removing the two empty files and moving to Emotion, we can remove the lines pertaining to .scss files in the CODEOWNERS file. **Enabling Telemetry and i18n ESLint rules for all Observability apps** One of the reasons for consolidating Obs apps into one folder was to create a more consistent development experience across apps in the Observability org. By changing the eslint rule config to enable the [Telemetry](https://github.com/elastic/kibana/tree/main/packages/kbn-eslint-plugin-telemetry) and [i18n](https://github.com/elastic/kibana/tree/main/packages/kbn-eslint-plugin-i18n) ESLint rules on all `.ts` and `tsx` files in `observability_solution`, we enable the rule for 5 apps that did not have them enabled before and we ensure that the rule will immediately be enabled on new Observability applications at the moment of creation. ## Related PRs: - [x] [Move APM ](https://github.com/elastic/kibana/pull/177433) - [x] [Move Data Quality](https://github.com/elastic/kibana/pull/177456) - [x] [Move Exploratory View](https://github.com/elastic/kibana/pull/177440) - [x] [Move Infra](https://github.com/elastic/kibana/pull/177443) - [X] Move Logs Explorer - [x] [Move Logs Shared](https://github.com/elastic/kibana/pull/177735) - [x] [Move Observability AI Assistant](https://github.com/elastic/kibana/pull/177427) - [x] [Move Observability App](https://github.com/elastic/kibana/pull/177437) - [x] [Move Observability Onboarding](https://github.com/elastic/kibana/pull/177458) - [x] [Move Observability Shared](https://github.com/elastic/kibana/pull/177463) - [x] [Move Profiling](https://github.com/elastic/kibana/pull/177453) - [x] [Move Synthetics](https://github.com/elastic/kibana/pull/177464) - [x] [Move Uptime](https://github.com/elastic/kibana/pull/177466) - [x] [Move UX](https://github.com/elastic/kibana/pull/177470) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Marco Antonio Ghiani --- .eslintrc.js | 25 ++----------------- .github/CODEOWNERS | 3 --- .../infra/public/apps/logs_app.tsx | 1 - .../infra/public/apps/metrics_app.tsx | 1 - .../infra/public/index.scss | 0 .../sub_components/add_data_button.tsx | 7 +++++- .../sub_components/list_status.tsx | 6 ++++- .../sub_components/search_controls.tsx | 1 + .../sub_components/highlight_section.tsx | 1 + .../sub_components/hover_popover_action.tsx | 1 + .../components/virtual_columns/content.tsx | 10 ++++++-- .../virtual_columns/virtual_column.scss | 4 --- .../components/data_search_progress.tsx | 1 + .../components/news_feed/news_feed.scss | 3 --- .../components/news_feed/news_feed.tsx | 9 +++++-- .../public/components/nav_control/index.tsx | 1 + .../public/components/alerts_popover.tsx | 1 + 17 files changed, 34 insertions(+), 41 deletions(-) delete mode 100644 x-pack/plugins/observability_solution/infra/public/index.scss delete mode 100644 x-pack/plugins/observability_solution/logs_explorer/public/components/virtual_columns/virtual_column.scss delete mode 100644 x-pack/plugins/observability_solution/observability/public/pages/overview/components/news_feed/news_feed.scss diff --git a/.eslintrc.js b/.eslintrc.js index 2c58a2aebbea3..1ec3718ec74bc 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -911,19 +911,7 @@ module.exports = { { files: [ 'x-pack/plugins/aiops/**/*.tsx', - 'x-pack/plugins/infra/**/*.tsx', - 'x-pack/plugins/observability_solution/apm/**/*.tsx', - 'x-pack/plugins/observability_solution/dataset_quality/**/*.tsx', - 'x-pack/plugins/observability_solution/exploratory_view/**/*.tsx', - 'x-pack/plugins/observability_solution/infra/**/*.tsx', - 'x-pack/plugins/observability_solution/observability/**/*.tsx', - 'x-pack/plugins/observability_solution/observability_ai_assistant/**/*.tsx', - 'x-pack/plugins/observability_solution/observability_onboarding/**/*.tsx', - 'x-pack/plugins/observability_solution/observability_shared/**/*.tsx', - 'x-pack/plugins/observability_solution/profiling/**/*.tsx', - 'x-pack/plugins/observability_solution/synthetics/**/*.tsx', - 'x-pack/plugins/observability_solution/uptime/**/*.tsx', - 'x-pack/plugins/observability_solution/ux/**/*.tsx', + 'x-pack/plugins/observability_solution/**/*.tsx', 'src/plugins/ai_assistant_management/**/*.tsx', ], rules: { @@ -932,16 +920,7 @@ module.exports = { }, { files: [ - 'x-pack/plugins/observability_solution/apm/**/!(*.stories.tsx|*.test.tsx|*.storybook_decorator.tsx|*.mock.tsx)', - 'x-pack/plugins/observability_solution/exploratory_view/**/!(*.stories.tsx|*.test.tsx|*.storybook_decorator.tsx|*.mock.tsx)', - 'x-pack/plugins/observability_solution/infra/**/!(*.stories.tsx|*.test.tsx|*.storybook_decorator.tsx|*.mock.tsx)', - 'x-pack/plugins/observability_solution/observability/**/!(*.stories.tsx|*.test.tsx|*.storybook_decorator.tsx|*.mock.tsx)', - 'x-pack/plugins/observability_solution/observability_ai_assistant/**/!(*.stories.tsx|*.test.tsx|*.storybook_decorator.tsx|*.mock.tsx)', - 'x-pack/plugins/observability_solution/observability_onboarding/**/!(*.stories.tsx|*.test.tsx|*.storybook_decorator.tsx|*.mock.tsx)', - 'x-pack/plugins/observability_solution/observability_shared/**/!(*.stories.tsx|*.test.tsx|*.storybook_decorator.tsx|*.mock.tsx)', - 'x-pack/plugins/observability_solution/profiling/**/!(*.stories.tsx|*.test.tsx|*.storybook_decorator.tsx|*.mock.tsx)', - 'x-pack/plugins/observability_solution/synthetics/**/!(*.stories.tsx|*.test.tsx|*.storybook_decorator.tsx|*.mock.tsx)', - 'x-pack/plugins/observability_solution/ux/**/!(*.stories.tsx|*.test.tsx|*.storybook_decorator.tsx|*.mock.tsx)', + 'x-pack/plugins/observability_solution/**/!(*.stories.tsx|*.test.tsx|*.storybook_decorator.tsx|*.mock.tsx)', 'src/plugins/ai_assistant_management/**/!(*.stories.tsx|*.test.tsx|*.storybook_decorator.tsx|*.mock.tsx)', ], rules: { diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index e0692ae7f398d..5f45529fb4db3 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -1543,8 +1543,6 @@ x-pack/plugins/security_solution/server/lib/security_integrations @elastic/secur **/*.scss @elastic/kibana-design # Observability design -/x-pack/plugins/observability_solution/apm/**/*.scss @elastic/observability-design -/x-pack/plugins/observability_solution/infra/**/*.scss @elastic/observability-design /x-pack/plugins/fleet/**/*.scss @elastic/observability-design /x-pack/plugins/monitoring/**/*.scss @elastic/observability-design @@ -1556,7 +1554,6 @@ x-pack/plugins/security_solution/server/lib/security_integrations @elastic/secur /x-pack/plugins/security_solution/**/*.scss @elastic/security-design /x-pack/plugins/security_solution_ess/**/*.scss @elastic/security-design /x-pack/plugins/security_solution_serverless/**/*.scss @elastic/security-design -/x-pack/plugins/observability_solution/logs_explorer/**/*.scss @elastic/observability-design # Logstash #CC# /x-pack/plugins/logstash/ @elastic/logstash diff --git a/x-pack/plugins/observability_solution/infra/public/apps/logs_app.tsx b/x-pack/plugins/observability_solution/infra/public/apps/logs_app.tsx index f75f6fa29efd7..ff5631872bfe8 100644 --- a/x-pack/plugins/observability_solution/infra/public/apps/logs_app.tsx +++ b/x-pack/plugins/observability_solution/infra/public/apps/logs_app.tsx @@ -12,7 +12,6 @@ import ReactDOM from 'react-dom'; import { Router, Routes, Route } from '@kbn/shared-ux-router'; import { AppMountParameters } from '@kbn/core/public'; import { Storage } from '@kbn/kibana-utils-plugin/public'; -import '../index.scss'; import { LinkToLogsPage } from '../pages/link_to/link_to_logs'; import { LogsPage } from '../pages/logs'; import { InfraClientStartDeps, InfraClientStartExports } from '../types'; diff --git a/x-pack/plugins/observability_solution/infra/public/apps/metrics_app.tsx b/x-pack/plugins/observability_solution/infra/public/apps/metrics_app.tsx index 4bfd65cd1ac63..338f7df860a21 100644 --- a/x-pack/plugins/observability_solution/infra/public/apps/metrics_app.tsx +++ b/x-pack/plugins/observability_solution/infra/public/apps/metrics_app.tsx @@ -12,7 +12,6 @@ import ReactDOM from 'react-dom'; import { Router, Routes, Route } from '@kbn/shared-ux-router'; import { AppMountParameters } from '@kbn/core/public'; import { Storage } from '@kbn/kibana-utils-plugin/public'; -import '../index.scss'; import { InfraPublicConfig } from '../../common/plugin_config_types'; import { LinkToMetricsPage } from '../pages/link_to/link_to_metrics'; import { InfrastructurePage } from '../pages/metrics'; diff --git a/x-pack/plugins/observability_solution/infra/public/index.scss b/x-pack/plugins/observability_solution/infra/public/index.scss deleted file mode 100644 index e69de29bb2d1d..0000000000000 diff --git a/x-pack/plugins/observability_solution/logs_explorer/public/components/data_source_selector/sub_components/add_data_button.tsx b/x-pack/plugins/observability_solution/logs_explorer/public/components/data_source_selector/sub_components/add_data_button.tsx index 51e1925e82cbe..28d08aedc4a77 100644 --- a/x-pack/plugins/observability_solution/logs_explorer/public/components/data_source_selector/sub_components/add_data_button.tsx +++ b/x-pack/plugins/observability_solution/logs_explorer/public/components/data_source_selector/sub_components/add_data_button.tsx @@ -37,7 +37,12 @@ export const AddDataButton: React.FunctionComponent<{}> = ({}) => { }); return ( - + {addDataLabel} ); diff --git a/x-pack/plugins/observability_solution/logs_explorer/public/components/data_source_selector/sub_components/list_status.tsx b/x-pack/plugins/observability_solution/logs_explorer/public/components/data_source_selector/sub_components/list_status.tsx index 3d782544b92c5..ecdffbcefcbef 100644 --- a/x-pack/plugins/observability_solution/logs_explorer/public/components/data_source_selector/sub_components/list_status.tsx +++ b/x-pack/plugins/observability_solution/logs_explorer/public/components/data_source_selector/sub_components/list_status.tsx @@ -60,7 +60,11 @@ export const ListStatus = ({ }} /> } - actions={[{noDataRetryLabel}]} + actions={[ + + {noDataRetryLabel} + , + ]} /> ); } diff --git a/x-pack/plugins/observability_solution/logs_explorer/public/components/data_source_selector/sub_components/search_controls.tsx b/x-pack/plugins/observability_solution/logs_explorer/public/components/data_source_selector/sub_components/search_controls.tsx index 5864dd37e42c0..77cb5082efa26 100644 --- a/x-pack/plugins/observability_solution/logs_explorer/public/components/data_source_selector/sub_components/search_controls.tsx +++ b/x-pack/plugins/observability_solution/logs_explorer/public/components/data_source_selector/sub_components/search_controls.tsx @@ -42,6 +42,7 @@ export const SearchControls = ({ search, onSearch, onSort, isLoading }: SearchCo ( import('@kbn/unified-data-table/src/components/source_document') @@ -26,6 +27,11 @@ const DiscoverSourcePopoverContent = dynamic( () => import('@kbn/unified-data-table/src/components/source_popover_content') ); +const sourceDocumentClassName = css` + display: inline !important; + margin-left: ${euiThemeVars.euiSizeXS}; +`; + const LogMessage = ({ field, value }: { field?: string; value: string }) => { const renderFieldPrefix = field && field !== constants.MESSAGE_FIELD; return ( @@ -115,7 +121,7 @@ export const Content = ({ shouldShowFieldHandler={shouldShowFieldHandler} maxEntries={50} dataTestSubj="logsExplorerCellDescriptionList" - className="logsExplorerVirtualColumn__sourceDocument" + className={sourceDocumentClassName} /> )} diff --git a/x-pack/plugins/observability_solution/logs_explorer/public/components/virtual_columns/virtual_column.scss b/x-pack/plugins/observability_solution/logs_explorer/public/components/virtual_columns/virtual_column.scss deleted file mode 100644 index f4f407875d2b6..0000000000000 --- a/x-pack/plugins/observability_solution/logs_explorer/public/components/virtual_columns/virtual_column.scss +++ /dev/null @@ -1,4 +0,0 @@ -.logsExplorerVirtualColumn__sourceDocument { - display: inline !important; - margin-left: $euiSizeXS; -} diff --git a/x-pack/plugins/observability_solution/logs_shared/public/components/data_search_progress.tsx b/x-pack/plugins/observability_solution/logs_shared/public/components/data_search_progress.tsx index 8ccc14a4d9acd..a03844fa9b2fd 100644 --- a/x-pack/plugins/observability_solution/logs_shared/public/components/data_search_progress.tsx +++ b/x-pack/plugins/observability_solution/logs_shared/public/components/data_search_progress.tsx @@ -29,6 +29,7 @@ export const DataSearchProgress: React.FC<{ {onCancel ? ( )} diff --git a/x-pack/plugins/observability_solution/observability_ai_assistant_app/public/components/nav_control/index.tsx b/x-pack/plugins/observability_solution/observability_ai_assistant_app/public/components/nav_control/index.tsx index 19ee4af2be538..1366c41464241 100644 --- a/x-pack/plugins/observability_solution/observability_ai_assistant_app/public/components/nav_control/index.tsx +++ b/x-pack/plugins/observability_solution/observability_ai_assistant_app/public/components/nav_control/index.tsx @@ -77,6 +77,7 @@ export function NavControl({}: {}) { return ( <> { service.conversations.openNewConversation({ diff --git a/x-pack/plugins/observability_solution/observability_logs_explorer/public/components/alerts_popover.tsx b/x-pack/plugins/observability_solution/observability_logs_explorer/public/components/alerts_popover.tsx index c5f4785712099..fc224093dfe60 100644 --- a/x-pack/plugins/observability_solution/observability_logs_explorer/public/components/alerts_popover.tsx +++ b/x-pack/plugins/observability_solution/observability_logs_explorer/public/components/alerts_popover.tsx @@ -228,6 +228,7 @@ export const AlertsPopover = () => {