[8.x] [ML] Migrate anomaly explorer components from SCSS to Emotion (#…

…212793) (#213352) # Backport This will backport the following commits from `main` to `8.x`: - [[ML] Migrate anomaly explorer components from SCSS to Emotion (#212793)](#212793)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)
elastic · Mar 6, 2025 · 6fd617c · 6fd617c
1 parent 2e9c3e3
commit 6fd617c
Show file tree

Hide file tree

Showing 31 changed files with 351 additions and 351 deletions.
diff --git a/x-pack/platform/plugins/private/translations/translations/fr-FR.json b/x-pack/platform/plugins/private/translations/translations/fr-FR.json
@@ -28519,10 +28519,8 @@
     "xpack.ml.anomaliesTable.hideDetailsAriaLabel": "Masquer les détails",
     "xpack.ml.anomaliesTable.influencersCell.addFilterAriaLabel": "Ajouter un filtre",
     "xpack.ml.anomaliesTable.influencersCell.addFilterTooltip": "Ajouter un filtre",
-    "xpack.ml.anomaliesTable.influencersCell.moreInfluencersLinkText": "et {othersCount} de plus",
     "xpack.ml.anomaliesTable.influencersCell.removeFilterAriaLabel": "Supprimer le filtre",
     "xpack.ml.anomaliesTable.influencersCell.removeFilterTooltip": "Supprimer le filtre",
-    "xpack.ml.anomaliesTable.influencersCell.showLessInfluencersLinkText": "afficher moins",
     "xpack.ml.anomaliesTable.influencersColumnName": "Influencé par",
     "xpack.ml.anomaliesTable.jobIdColumnName": "ID tâche",
     "xpack.ml.anomaliesTable.linksMenu.autoGeneratedDiscoverLinkErrorMessage": "Liaison avec Discover impossible ; aucune vue de données n’existe pour le modèle d'index \"{index}\"",

diff --git a/x-pack/platform/plugins/private/translations/translations/ja-JP.json b/x-pack/platform/plugins/private/translations/translations/ja-JP.json
@@ -28381,10 +28381,8 @@
     "xpack.ml.anomaliesTable.hideDetailsAriaLabel": "詳細を非表示",
     "xpack.ml.anomaliesTable.influencersCell.addFilterAriaLabel": "フィルターを追加します",
     "xpack.ml.anomaliesTable.influencersCell.addFilterTooltip": "フィルターを追加します",
-    "xpack.ml.anomaliesTable.influencersCell.moreInfluencersLinkText": "他 {othersCount} 件",
     "xpack.ml.anomaliesTable.influencersCell.removeFilterAriaLabel": "フィルターを削除",
     "xpack.ml.anomaliesTable.influencersCell.removeFilterTooltip": "フィルターを削除",
-    "xpack.ml.anomaliesTable.influencersCell.showLessInfluencersLinkText": "縮小表示",
     "xpack.ml.anomaliesTable.influencersColumnName": "影響因子：",
     "xpack.ml.anomaliesTable.jobIdColumnName": "ジョブID",
     "xpack.ml.anomaliesTable.linksMenu.autoGeneratedDiscoverLinkErrorMessage": "Discoverにリンクできません。インデックスパターン''{index}''のデータビューが存在しません",

diff --git a/x-pack/platform/plugins/private/translations/translations/zh-CN.json b/x-pack/platform/plugins/private/translations/translations/zh-CN.json
@@ -28465,10 +28465,8 @@
     "xpack.ml.anomaliesTable.hideDetailsAriaLabel": "隐藏详情",
     "xpack.ml.anomaliesTable.influencersCell.addFilterAriaLabel": "添加筛选",
     "xpack.ml.anomaliesTable.influencersCell.addFilterTooltip": "添加筛选",
-    "xpack.ml.anomaliesTable.influencersCell.moreInfluencersLinkText": "及另外 {othersCount} 个",
     "xpack.ml.anomaliesTable.influencersCell.removeFilterAriaLabel": "移除筛选",
     "xpack.ml.anomaliesTable.influencersCell.removeFilterTooltip": "移除筛选",
-    "xpack.ml.anomaliesTable.influencersCell.showLessInfluencersLinkText": "显示更少",
     "xpack.ml.anomaliesTable.influencersColumnName": "影响因素",
     "xpack.ml.anomaliesTable.jobIdColumnName": "作业 ID",
     "xpack.ml.anomaliesTable.linksMenu.autoGeneratedDiscoverLinkErrorMessage": "无法链接到 Discover；索引模式“{index}”的数据视图不存在",

diff --git a/x-pack/platform/plugins/shared/ml/public/application/_index.scss b/x-pack/platform/plugins/shared/ml/public/application/_index.scss
@@ -5,9 +5,7 @@
   @import 'explorer/index'; // SASSTODO: This file needs to be rewritten
 
   // 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/entity_cell/index';
   @import 'components/job_selector/index';
   @import 'components/rule_editor/index'; // SASSTODO: This file overwrites EUI directly
 

diff --git a/...tion/components/annotations/annotation_description_list/__snapshots__/index.test.tsx.snap b/...tion/components/annotations/annotation_description_list/__snapshots__/index.test.tsx.snap
diff --git a/...ared/ml/public/application/components/annotations/annotation_description_list/_index.scss b/...ared/ml/public/application/components/annotations/annotation_description_list/_index.scss
diff --git a/...shared/ml/public/application/components/annotations/annotation_description_list/index.tsx b/...shared/ml/public/application/components/annotations/annotation_description_list/index.tsx
@@ -114,7 +114,6 @@ export const AnnotationDescriptionList = ({ annotation, detectorDescription }: P
   return (
     <EuiDescriptionList
       data-test-subj={'mlAnnotationDescriptionList'}
-      className="ml-annotation-description-list"
       type="column"
       columnWidths={[3, 7]}
       listItems={listItems}

diff --git a/...tform/plugins/shared/ml/public/application/components/anomalies_table/influencers_cell.js b/...tform/plugins/shared/ml/public/application/components/anomalies_table/influencers_cell.js
diff --git a/...form/plugins/shared/ml/public/application/components/anomalies_table/influencers_cell.tsx b/...form/plugins/shared/ml/public/application/components/anomalies_table/influencers_cell.tsx
@@ -0,0 +1,157 @@
+/*
+ * 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 type { FC } from 'react';
+import React, { useState } from 'react';
+
+import { EuiLink, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { i18n } from '@kbn/i18n';
+import { useEntityCellStyles } from '../entity_cell/entity_cell_styles';
+import { blurButtonOnClick } from '../../util/component_utils';
+
+type InfluencerCellFilter = (
+  influencerFieldName: string,
+  influencerFieldValue: string,
+  direction: '+' | '-'
+) => void;
+
+interface Influencer {
+  influencerFieldName: string;
+  influencerFieldValue: string;
+}
+
+interface InfluencerCellProps {
+  influencerFilter: InfluencerCellFilter | undefined;
+  influencers: Influencer[] | undefined;
+  limit: number;
+}
+
+/*
+ * Component for rendering a list of record influencers inside a cell in the anomalies table.
+ * Truncates long lists of influencers to the supplied limit, with the full list of influencers
+ * expanded or collapsed via 'and x more' / 'show less' links.
+ */
+export const InfluencersCell: FC<InfluencerCellProps> = ({
+  influencers = [],
+  influencerFilter,
+  limit,
+}) => {
+  const { filterButton } = useEntityCellStyles();
+
+  const [showAllInfluencers, setShowAllInfluencers] = useState(false);
+  const toggleAllInfluencers = () => setShowAllInfluencers((prev) => !prev);
+
+  let numberToDisplay = showAllInfluencers === false ? limit : influencers.length;
+  let othersCount = 0;
+  if (influencers !== undefined) {
+    othersCount = Math.max(influencers.length - numberToDisplay, 0);
+  }
+  if (othersCount === 1) {
+    // Display the additional influencer.
+    numberToDisplay++;
+    othersCount = 0;
+  }
+
+  const displayInfluencers = influencers
+    .reduce<Influencer[]>((acc, influencer) => {
+      const [influencerFieldName, influencerFieldValue] = Object.entries(influencer)[0] ?? [];
+      if (typeof influencerFieldName === 'string' && typeof influencerFieldValue === 'string') {
+        acc.push({
+          influencerFieldName,
+          influencerFieldValue,
+        });
+      }
+      return acc;
+    }, [])
+    .slice(0, numberToDisplay);
+
+  return (
+    <div>
+      {displayInfluencers.map((influencer, index) => (
+        <div key={index}>
+          {influencer.influencerFieldName}: {influencer.influencerFieldValue}
+          {influencerFilter !== undefined && (
+            <>
+              <EuiToolTip
+                content={
+                  <FormattedMessage
+                    id="xpack.ml.anomaliesTable.influencersCell.addFilterTooltip"
+                    defaultMessage="Add filter"
+                  />
+                }
+              >
+                <EuiButtonIcon
+                  size="s"
+                  css={filterButton}
+                  onClick={blurButtonOnClick(() => {
+                    influencerFilter(
+                      influencer.influencerFieldName,
+                      influencer.influencerFieldValue,
+                      '+'
+                    );
+                  })}
+                  iconType="plusInCircle"
+                  aria-label={i18n.translate(
+                    'xpack.ml.anomaliesTable.influencersCell.addFilterAriaLabel',
+                    {
+                      defaultMessage: 'Add filter',
+                    }
+                  )}
+                />
+              </EuiToolTip>
+              <EuiToolTip
+                content={
+                  <FormattedMessage
+                    id="xpack.ml.anomaliesTable.influencersCell.removeFilterTooltip"
+                    defaultMessage="Remove filter"
+                  />
+                }
+              >
+                <EuiButtonIcon
+                  size="s"
+                  css={filterButton}
+                  onClick={blurButtonOnClick(() => {
+                    influencerFilter(
+                      influencer.influencerFieldName,
+                      influencer.influencerFieldValue,
+                      '-'
+                    );
+                  })}
+                  iconType="minusInCircle"
+                  aria-label={i18n.translate(
+                    'xpack.ml.anomaliesTable.influencersCell.removeFilterAriaLabel',
+                    {
+                      defaultMessage: 'Remove filter',
+                    }
+                  )}
+                />
+              </EuiToolTip>
+            </>
+          )}
+        </div>
+      ))}
+      {othersCount > 0 && (
+        <EuiLink onClick={() => toggleAllInfluencers()}>
+          <FormattedMessage
+            id="xpack.ml.anomaliesTable.anomalyDetails.anomalyDescriptionListMoreLinkText"
+            defaultMessage="and {othersCount} more"
+            values={{ othersCount }}
+          />
+        </EuiLink>
+      )}
+      {numberToDisplay > limit + 1 && (
+        <EuiLink onClick={() => toggleAllInfluencers()}>
+          <FormattedMessage
+            id="xpack.ml.anomaliesTable.anomalyDetails.anomalyDescriptionShowLessLinkText"
+            defaultMessage="Show less"
+          />
+        </EuiLink>
+      )}
+    </div>
+  );
+};