[ML] Updates icons for Machine Learning embeddable dashboard panel types (#191718)

## Summary Updates icons in ML embeddable dashboard panel types. ![image](https://github.com/user-attachments/assets/6c20bde7-121b-4ce8-a659-a59d4fcfbf61)\ Also updates other links to the Single Metric Viewer to use the new `singleMetricViewer` icon. Fixes https://github.com/elastic/kibana/issues/187730
2025-04-23 09:19:04 -04:00 · 2024-09-03 13:39:58 +02:00 · 2024-09-03 13:39:58 +02:00 · 73f15a17a9
commit 73f15a17a9
parent 6b1cac9da1
14 changed files with 14 additions and 37 deletions
--- a/x-pack/plugins/aiops/public/ui_actions/create_change_point_chart.tsx
+++ b/x-pack/plugins/aiops/public/ui_actions/create_change_point_chart.tsx
@ -40,7 +40,7 @@ export function createAddChangePointChartAction(
      },
    ],
    order: 10,
-    getIconType: () => 'machineLearningApp',
+    getIconType: () => 'changePointDetection',
    getDisplayName: () =>
      i18n.translate('xpack.aiops.embeddableChangePointChartDisplayName', {
        defaultMessage: 'Change point detection',
--- a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/ui_actions/create_field_stats_table.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/ui_actions/create_field_stats_table.tsx
@ -134,7 +134,7 @@ export function createAddFieldStatsTableAction(
    id: 'create-field-stats-table',
    grouping: COMMON_VISUALIZATION_GROUPING,
    order: 10,
-    getIconType: () => 'inspect',
+    getIconType: () => 'fieldStatistics',
    getDisplayName: () =>
      i18n.translate('xpack.dataVisualizer.fieldStatistics.displayName', {
        defaultMessage: 'Field statistics',
--- a/x-pack/plugins/ml/public/application/components/annotations/annotations_table/annotations_table.js
+++ b/x-pack/plugins/ml/public/application/components/annotations/annotations_table/annotations_table.js
@ -558,7 +558,7 @@ class AnnotationsTableUI extends Component {
                );
          },
          enabled: (annotation) => isTimeSeriesViewJob(this.getJob(annotation.job_id)),
-          icon: 'visLine',
+          icon: 'singleMetricViewer',
          type: 'icon',
          onClick: (annotation) => this.openSingleMetricView(annotation),
          'data-test-subj': `mlAnnotationsActionOpenInSingleMetricViewer`,
--- a/x-pack/plugins/ml/public/application/components/anomalies_table/links_menu.tsx
+++ b/x-pack/plugins/ml/public/application/components/anomalies_table/links_menu.tsx
@ -819,7 +819,7 @@ export const LinksMenuUI = (props: LinksMenuProps) => {
        items.push(
          <EuiContextMenuItem
            key="view_series"
-            icon="visLine"
+            icon="singleMetricViewer"
            onClick={() => {
              closePopover();
              viewSeries();
--- a/x-pack/plugins/ml/public/application/components/anomaly_results_view_selector/anomaly_results_view_selector.tsx
+++ b/x-pack/plugins/ml/public/application/components/anomaly_results_view_selector/anomaly_results_view_selector.tsx
@ -53,7 +53,7 @@ export const AnomalyResultsViewSelector: FC<Props> = ({ viewId, selectedJobs })
            : i18n.translate('xpack.ml.anomalyResultsViewSelector.singleMetricViewerLabel', {
                defaultMessage: 'View results in the Single Metric Viewer',
              }),
-        iconType: 'visLine',
+        iconType: 'singleMetricViewer',
        value: ML_PAGES.SINGLE_METRIC_VIEWER,
        'data-test-subj': 'mlAnomalyResultsViewSelectorSingleMetricViewer',
        isDisabled: viewId === 'explorer' && isSingleMetricViewerDisabled,
--- a/x-pack/plugins/ml/public/application/components/field_stats_flyout/field_stats_info_button.tsx
+++ b/x-pack/plugins/ml/public/application/components/field_stats_flyout/field_stats_info_button.tsx
@ -55,7 +55,7 @@ export const FieldStatsInfoButton = ({
              data-test-subj={`mlInspectFieldStatsButton-${field.id}`}
              disabled={disabled === true}
              size="xs"
-              iconType="inspect"
+              iconType="fieldStatistics"
              css={{ color: isEmpty ? themeVars.euiTheme.euiColorDisabled : undefined }}
              onClick={(ev: React.MouseEvent<HTMLButtonElement>) => {
                if (ev.type === 'click') {
--- 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
@ -279,7 +279,7 @@ function ExplorerChartContainer({
                {/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
                <EuiButtonEmpty
                  iconSide="right"
-                  iconType="visLine"
+                  iconType="singleMetricViewer"
                  size="xs"
                  href={explorerSeriesLink}
                  onClick={addToRecentlyAccessed}
--- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_actions/results.js
+++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_actions/results.js
@ -75,7 +75,7 @@ export function ResultLinks({ jobs }) {
          >
            <EuiButtonIcon
              href={timeSeriesExplorerLink}
-              iconType="visLine"
+              iconType="singleMetricViewer"
              aria-label={openJobsInSingleMetricViewerText}
              isDisabled={singleMetricEnabled === false || jobActionsDisabled === true}
              data-test-subj="mlOpenJobsInSingleMetricViewerButton"
--- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/forecasts_table/forecasts_table.js
+++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/forecasts_table/forecasts_table.js
@ -324,7 +324,7 @@ export class ForecastsTable extends Component {
                this.props.job.blocked !== undefined ||
                forecast.forecast_status !== FORECAST_REQUEST_STATE.FINISHED
              }
-              iconType="visLine"
+              iconType="singleMetricViewer"
              aria-label={viewForecastAriaLabel}
              data-test-subj="mlJobListForecastTabOpenSingleMetricViewButton"
            />
--- a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/forecasting_modal/forecasts_list.js
+++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/forecasting_modal/forecasts_list.js
@ -66,7 +66,7 @@ function getColumns(viewForecast) {
        return (
          <EuiButtonIcon
            onClick={() => viewForecast(forecast.forecast_id)}
-            iconType="visLine"
+            iconType="singleMetricViewer"
            aria-label={viewForecastAriaLabel}
          />
        );
--- a/x-pack/plugins/ml/public/ui_actions/create_anomaly_chart.tsx
+++ b/x-pack/plugins/ml/public/ui_actions/create_anomaly_chart.tsx
@ -42,9 +42,7 @@ export function createAddAnomalyChartsPanelAction(
      },
    ],
    order: 30,
-    getIconType(): string {
-      return 'visLine';
-    },
+    getIconType: () => 'anomalyChart',
    getDisplayName: () =>
      i18n.translate('xpack.ml.components.mlAnomalyExplorerEmbeddable.displayName', {
        defaultMessage: 'Anomaly chart',
--- a/x-pack/plugins/ml/public/ui_actions/create_single_metric_viewer.tsx
+++ b/x-pack/plugins/ml/public/ui_actions/create_single_metric_viewer.tsx
@ -43,7 +43,7 @@ export function createAddSingleMetricViewerPanelAction(
      },
    ],
    order: 20,
-    getIconType: () => 'visLine',
+    getIconType: () => 'singleMetricViewer',
    getDisplayName: () =>
      i18n.translate('xpack.ml.components.singleMetricViewerEmbeddable.displayName', {
        defaultMessage: 'Single metric viewer',
--- a/x-pack/plugins/ml/public/ui_actions/create_swim_lane.tsx
+++ b/x-pack/plugins/ml/public/ui_actions/create_swim_lane.tsx
@ -5,7 +5,6 @@
 * 2.0.
 */

-import React from 'react';
 import { i18n } from '@kbn/i18n';
 import type { PresentationContainer } from '@kbn/presentation-containers';
 import type { EmbeddableApiContext } from '@kbn/presentation-publishing';
@ -43,27 +42,7 @@ export function createAddSwimlanePanelAction(
      },
    ],
    order: 40,
-    // @ts-expect-error getIconType is typed as string, but EuiIcon accepts ReactComponent for custom icons.
-    // See https://github.com/elastic/kibana/issues/184643
-    getIconType: () => (iconProps) =>
-      (
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 16 16"
-          xmlns="http://www.w3.org/2000/svg"
-          {...iconProps}
-        >
-          <path
-            d="M1 5V1H5V5H1ZM4 4V2H2V4H4ZM6 5V1H10V5H6ZM9 4V2H7V4H9ZM11 5V1H15V5H11ZM12 4H14V2H12V4ZM1 10V6H5V10H1ZM4 9V7H2V9H4ZM6 10V6H10V10H6ZM9 9V7H7V9H9ZM11 10V6H15V10H11ZM14 9V7H12V9H14ZM1 15V11H5V15H1ZM2 14H4V12H2V14ZM6 15V11H10V15H6ZM7 14H9V12H7V14ZM11 15V11H15V15H11ZM12 14H14V12H12V14Z"
-            fill="currentColor"
-          />
-          <rect width="4" height="4" transform="translate(6 1)" fill="currentColor" />
-          <rect width="4" height="4" transform="translate(11 6)" fill="currentColor" />
-          <rect width="4" height="4" transform="translate(6 6)" fill="currentColor" />
-          <rect width="4" height="4" transform="translate(1 11)" fill="currentColor" />
-        </svg>
-      ),
+    getIconType: () => 'anomalySwimLane',
    getDisplayName: () =>
      i18n.translate('xpack.ml.components.jobAnomalyScoreEmbeddable.displayName', {
        defaultMessage: 'Anomaly swim lane',
--- a/x-pack/plugins/ml/public/ui_actions/open_in_single_metric_viewer_action.tsx
+++ b/x-pack/plugins/ml/public/ui_actions/open_in_single_metric_viewer_action.tsx
@ -42,7 +42,7 @@ export function createOpenInSingleMetricViewerAction(
    type: OPEN_IN_SINGLE_METRIC_VIEWER_ACTION,
    order: 100,
    getIconType(): string {
-      return 'visLine';
+      return 'singleMetricViewer';
    },
    getDisplayName() {
      return i18n.translate('xpack.ml.actions.openInSingleMetricViewerTitle', {