[ML] Updates icons for Machine Learning embeddable dashboard panel ty…

…pes (elastic#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 elastic#187730
kibanamachine · Sep 3, 2024 · 73f15a1 · 73f15a1
1 parent 6b1cac9
commit 73f15a1
Show file tree

Hide file tree

Showing 14 changed files with 14 additions and 37 deletions.
diff --git 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',

diff --git a/...sualizer/public/application/index_data_visualizer/ui_actions/create_field_stats_table.tsx b/...sualizer/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',

diff --git a/...ugins/ml/public/application/components/annotations/annotations_table/annotations_table.js b/...ugins/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`,

diff --git 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();

diff --git a/...ic/application/components/anomaly_results_view_selector/anomaly_results_view_selector.tsx b/...ic/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,

diff --git a/...k/plugins/ml/public/application/components/field_stats_flyout/field_stats_info_button.tsx b/...k/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') {

diff --git 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}

diff --git 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"

diff --git a/...blic/application/jobs/jobs_list/components/job_details/forecasts_table/forecasts_table.js b/...blic/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"
             />

diff --git a/...s/ml/public/application/timeseriesexplorer/components/forecasting_modal/forecasts_list.js b/...s/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}
           />
         );

diff --git 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',

diff --git 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',

diff --git 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',

diff --git 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', {