[8.x] [ML] Remove legacy scss overwrites Single Metric Viewer (#195259)…

… (#196085)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ML] Remove legacy scss overwrites Single Metric Viewer
(#195259)](#195259)

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

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

<!--BACKPORT [{"author":{"name":"Robert
Jaszczurek","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-14T10:14:37Z","message":"[ML]
Remove legacy scss overwrites Single Metric Viewer (#195259)\n\n##
Summary\r\n\r\nRemoves SCSS files for the Single Metric Viewer and adds
BEM classes for\r\n`annotations`.\r\nAffects the Single Metric Viewer in
ML and the embeddable.\r\nPart of
[#140695](https://github.com/elastic/kibana/issues/140695)","sha":"87c91f4e258db1910e13daec7e8267d1110735dd","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":[":ml","release_note:skip","v9.0.0","Team:ML","v8.16.0","backport:version"],"title":"[ML]
Remove legacy scss overwrites Single Metric
Viewer","number":195259,"url":"https://github.com/elastic/kibana/pull/195259","mergeCommit":{"message":"[ML]
Remove legacy scss overwrites Single Metric Viewer (#195259)\n\n##
Summary\r\n\r\nRemoves SCSS files for the Single Metric Viewer and adds
BEM classes for\r\n`annotations`.\r\nAffects the Single Metric Viewer in
ML and the embeddable.\r\nPart of
[#140695](https://github.com/elastic/kibana/issues/140695)","sha":"87c91f4e258db1910e13daec7e8267d1110735dd"}},"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/195259","number":195259,"mergeCommit":{"message":"[ML]
Remove legacy scss overwrites Single Metric Viewer (#195259)\n\n##
Summary\r\n\r\nRemoves SCSS files for the Single Metric Viewer and adds
BEM classes for\r\n`annotations`.\r\nAffects the Single Metric Viewer in
ML and the embeddable.\r\nPart of
[#140695](https://github.com/elastic/kibana/issues/140695)","sha":"87c91f4e258db1910e13daec7e8267d1110735dd"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Robert Jaszczurek <[email protected]>

x-pack/plugins/ml/public/application/_index.scss

@@ -7,7 +7,6 @@
   // Sub applications
   @import 'data_frame_analytics/index';
   @import 'explorer/index'; // SASSTODO: This file needs to be rewritten
-  @import 'timeseriesexplorer/index';
 
   // Components
   @import 'components/annotations/annotation_description_list/index'; // SASSTODO: This file overwrites EUI directly

x-pack/plugins/ml/public/application/explorer/annotation_timeline.tsx

@@ -139,7 +139,7 @@ export const AnnotationTimeline = <T extends { timestamp: number; end_timestamp?
             : startingXPos;
         svg
           .append('rect')
-          .classed('mlAnnotationRect', true)
+          .classed('ml-annotation__rect', true)
           // If annotation is at the end, prevent overflow by shifting it back
           .attr('x', xPos + annotationWidth >= endingXPos ? endingXPos - annotationWidth : xPos)
           .attr('y', 0)

x-pack/plugins/ml/public/application/explorer/swimlane_annotation_container.tsx

@@ -15,6 +15,7 @@ import { useCurrentThemeVars } from '../contexts/kibana';
 import type { Annotation, AnnotationsTable } from '../../../common/types/annotations';
 import type { ChartTooltipService } from '../components/chart_tooltip';
 import { Y_AXIS_LABEL_PADDING, Y_AXIS_LABEL_WIDTH } from './constants';
+import { getAnnotationStyles } from '../timeseriesexplorer/styles';
 
 const ANNOTATION_CONTAINER_HEIGHT = 12;
 const ANNOTATION_MIN_WIDTH = 8;
@@ -29,6 +30,8 @@ interface SwimlaneAnnotationContainerProps {
   tooltipService: ChartTooltipService;
 }
 
+const annotationStyles = getAnnotationStyles();
+
 export const SwimlaneAnnotationContainer: FC<SwimlaneAnnotationContainerProps> = ({
   chartWidth,
   domain,
@@ -135,7 +138,7 @@ export const SwimlaneAnnotationContainer: FC<SwimlaneAnnotationContainerProps> =
         const xPos = d.start >= domain.min ? (xScale(d.start) as number) : startingXPos;
         svg
           .append('rect')
-          .classed('mlAnnotationRect', true)
+          .classed('ml-annotation__rect', true)
           // If annotation is at the end, prevent overflow by shifting it back
           .attr('x', xPos + annotationWidth >= endingXPos ? endingXPos - annotationWidth : xPos)
           .attr('y', 0)
@@ -221,5 +224,5 @@ export const SwimlaneAnnotationContainer: FC<SwimlaneAnnotationContainerProps> =
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [chartWidth, domain, annotationsData, tooltipService]);
 
-  return <div ref={canvasRef} />;
+  return <div css={annotationStyles} ref={canvasRef} />;
 };

x-pack/plugins/ml/public/application/styles.ts

@@ -0,0 +1,17 @@
+/*
+ * 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.
+ */
+
+// Replacement for ./_variables.scss as we aim to remove the scss files
+
+export const mlColors = {
+  critical: '#FE5050',
+  major: '#FBA740',
+  minor: '#FDEC25',
+  warning: '#8BC8FB',
+  lowWarning: '#D2E9F7',
+  unknown: '#C0C0C0',
+};