[8.x] [ML] Anomaly Detection anomaly charts: remove filter icons for charts displayed in cases (#200821) (#201855)

# Backport This will backport the following commits from `main` to `8.x`: - [[ML] Anomaly Detection anomaly charts: remove filter icons for charts displayed in cases (#200821)](https://github.com/elastic/kibana/pull/200821)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Melissa Alvarez <melissa.alvarez@elastic.co>
2025-04-24 09:48:58 -04:00 · 2024-11-27 07:34:31 +11:00 · 2024-11-27 07:34:31 +11:00 · 39db30978d
commit 39db30978d
parent cf4dc3769b
6 changed files with 17 additions and 1 deletions
--- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/snapshots/explorer_chart_label.test.js.snap
+++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/snapshots/explorer_chart_label.test.js.snap
@ -20,6 +20,7 @@ exports[`ExplorerChartLabelBadge Render the chart label in one line. 1`] = `
        }
      }
    />
+     
     
    <span
      className="ml-explorer-chart-info-icon"
@ -97,6 +98,7 @@ exports[`ExplorerChartLabelBadge Render the chart label in two lines. 1`] = `
        }
      }
    />
+     
  </span>
 </Fragment>
 `;
--- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js
+++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js
@ -22,6 +22,7 @@ export function ExplorerChartLabel({
  isEmbeddable,
  wrapLabel = false,
  onSelectEntity,
+  showFilterIcons,
 }) {
  // Depending on whether we wrap the entityField badges to a new line, we render this differently:
  //
@ -51,13 +52,15 @@ export function ExplorerChartLabel({
    return (
      <Fragment key={`badge-wrapper-${key}`}>
        <ExplorerChartLabelBadge entity={entity} />
-        {onSelectEntity !== undefined && (
+        {onSelectEntity !== undefined && showFilterIcons === true ? (
          <EntityFilter
            isEmbeddable={isEmbeddable}
            onFilter={applyFilter}
            influencerFieldName={entity.fieldName}
            influencerFieldValue={entity.fieldValue}
          />
+        ) : (
+          <>&nbsp;</>
        )}
      </Fragment>
    );
--- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_anomalies_container.tsx
+++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_anomalies_container.tsx
@ -39,6 +39,7 @@ interface ExplorerAnomaliesContainerProps {
  showSelectedInterval?: boolean;
  chartsService: ChartsPluginStart;
  timeRange: { from: string; to: string } | undefined;
+  showFilterIcons: boolean;
 }

 const tooManyBucketsCalloutMsg = i18n.translate(
@ -63,6 +64,7 @@ export const ExplorerAnomaliesContainer: FC<ExplorerAnomaliesContainerProps> = (
  showSelectedInterval,
  chartsService,
  timeRange,
+  showFilterIcons,
 }) => {
  return (
    // TODO: Remove data-shared-item and data-rendering-count as part of https://github.com/elastic/kibana/issues/179376
@ -102,6 +104,7 @@ export const ExplorerAnomaliesContainer: FC<ExplorerAnomaliesContainerProps> = (
            showSelectedInterval,
            chartsService,
            id,
+            showFilterIcons,
          }}
        />
      )}
--- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js
+++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js
@ -100,6 +100,7 @@ function ExplorerChartContainer({
  tooManyBucketsCalloutMsg,
  showSelectedInterval,
  chartsService,
+  showFilterIcons,
 }) {
  const [explorerSeriesLink, setExplorerSeriesLink] = useState('');
  const [mapsLink, setMapsLink] = useState('');
@ -258,6 +259,7 @@ function ExplorerChartContainer({
            infoTooltip={{ ...series.infoTooltip, chartType }}
            wrapLabel={wrapLabel}
            onSelectEntity={onSelectEntity}
+            showFilterIcons={showFilterIcons}
          />
        </EuiFlexItem>
        <EuiFlexItem grow={false}>
@ -394,6 +396,7 @@ export const ExplorerChartsContainerUI = ({
  tooManyBucketsCalloutMsg,
  showSelectedInterval,
  chartsService,
+  showFilterIcons = true,
 }) => {
  const {
    services: { embeddable: embeddablePlugin, maps: mapsPlugin },
@ -460,6 +463,7 @@ export const ExplorerChartsContainerUI = ({
                  tooManyBucketsCalloutMsg={tooManyBucketsCalloutMsg}
                  showSelectedInterval={showSelectedInterval}
                  chartsService={chartsService}
+                  showFilterIcons={showFilterIcons}
                />
              </EuiFlexItem>
            );
--- a/x-pack/plugins/ml/public/cases/anomaly_charts_attachments.tsx
+++ b/x-pack/plugins/ml/public/cases/anomaly_charts_attachments.tsx
@ -80,6 +80,7 @@ const AnomalyChartsCaseAttachment = ({
            onRenderComplete={api.onRenderComplete}
            onError={api.onError}
            timeRange$={api.parentApi.timeRange$}
+            showFilterIcons={false}
          />
        </KibanaContextProvider>
      </KibanaRenderContextProvider>
--- a/x-pack/plugins/ml/public/embeddables/anomaly_charts/anomaly_charts_react_container.tsx
+++ b/x-pack/plugins/ml/public/embeddables/anomaly_charts/anomaly_charts_react_container.tsx
@ -51,6 +51,7 @@ export interface AnomalyChartsContainerProps
  onRenderComplete: () => void;
  onLoading: (v: boolean) => void;
  onError: (error: Error) => void;
+  showFilterIcons?: boolean;
 }

 const AnomalyChartsContainer: FC<AnomalyChartsContainerProps> = ({
@ -62,6 +63,7 @@ const AnomalyChartsContainer: FC<AnomalyChartsContainerProps> = ({
  onError,
  onLoading,
  api,
+  showFilterIcons = true,
 }) => {
  const isMounted = useMountedState();

@ -284,6 +286,7 @@ const AnomalyChartsContainer: FC<AnomalyChartsContainerProps> = ({
              showSelectedInterval={false}
              chartsService={chartsService}
              timeRange={timeRange}
+              showFilterIcons={showFilterIcons}
            />
          ) : null}
        </div>