[8.x] [ML] Single Metric Viewer embeddable: Add action for dashboard …

…to apply filter from the embeddable to the page (#198869) (#200638) # Backport This will backport the following commits from `main` to `8.x`: - [[ML] Single Metric Viewer embeddable: Add action for dashboard to apply filter from the embeddable to the page (#198869)](#198869)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Melissa Alvarez <[email protected]>
elastic · Nov 18, 2024 · 852d6d9 · 852d6d9
1 parent 7c5c0fc
commit 852d6d9
Show file tree

Hide file tree

Showing 13 changed files with 251 additions and 120 deletions.
diff --git a/.../explorer/explorer_charts/components/explorer_chart_label/entity_filter/entity_filter.tsx b/.../explorer/explorer_charts/components/explorer_chart_label/entity_filter/entity_filter.tsx
@@ -22,19 +22,21 @@ interface EntityFilterProps {
   }) => void;
   influencerFieldName: string;
   influencerFieldValue: string;
+  isEmbeddable?: boolean;
 }
 export const EntityFilter: FC<EntityFilterProps> = ({
   onFilter,
   influencerFieldName,
   influencerFieldValue,
+  isEmbeddable,
 }) => {
   return (
     <React.Fragment>
       <EuiToolTip
         content={
           <FormattedMessage
             id="xpack.ml.entityFilter.addFilterTooltip"
-            defaultMessage="Add filter"
+            defaultMessage="Filter for"
           />
         }
       >
@@ -57,10 +59,17 @@ export const EntityFilter: FC<EntityFilterProps> = ({
       </EuiToolTip>
       <EuiToolTip
         content={
-          <FormattedMessage
-            id="xpack.ml.entityFilter.removeFilterTooltip"
-            defaultMessage="Remove filter"
-          />
+          isEmbeddable ? (
+            <FormattedMessage
+              id="xpack.ml.entityFilter.filterOutTooltip"
+              defaultMessage={'Filter out'}
+            />
+          ) : (
+            <FormattedMessage
+              id="xpack.ml.entityFilter.removeFilterTooltip"
+              defaultMessage={'Remove filter'}
+            />
+          )
         }
       >
         <EuiButtonIcon

diff --git a/...lication/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js b/...lication/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js
@@ -19,6 +19,7 @@ export function ExplorerChartLabel({
   detectorLabel,
   entityFields,
   infoTooltip,
+  isEmbeddable,
   wrapLabel = false,
   onSelectEntity,
 }) {
@@ -34,9 +35,9 @@ export function ExplorerChartLabel({
   // Using &nbsp;s here to make sure those spaces get rendered.
   const labelSeparator =
     wrapLabel === true || entityFields.length === 0 || detectorLabel.length === 0 ? (
-      <React.Fragment>&nbsp;</React.Fragment>
+      <>&nbsp;</>
     ) : (
-      <React.Fragment>&nbsp;&ndash;&nbsp;</React.Fragment>
+      <>&nbsp;&ndash;&nbsp;</>
     );
 
   const applyFilter = useCallback(
@@ -52,6 +53,7 @@ export function ExplorerChartLabel({
         <ExplorerChartLabelBadge entity={entity} />
         {onSelectEntity !== undefined && (
           <EntityFilter
+            isEmbeddable={isEmbeddable}
             onFilter={applyFilter}
             influencerFieldName={entity.fieldName}
             influencerFieldValue={entity.fieldValue}
@@ -73,25 +75,26 @@ export function ExplorerChartLabel({
   );
 
   return (
-    <React.Fragment>
+    <>
       <span className="ml-explorer-chart-label">
         <span className="ml-explorer-chart-label-detector">
           {detectorLabel}
           {labelSeparator}
         </span>
         {wrapLabel && infoIcon}
         {!wrapLabel && (
-          <React.Fragment>
+          <>
             {entityFieldBadges} {infoIcon}
-          </React.Fragment>
+          </>
         )}
       </span>
       {wrapLabel && <span className="ml-explorer-chart-label-badges">{entityFieldBadges}</span>}
-    </React.Fragment>
+    </>
   );
 }
 ExplorerChartLabel.propTypes = {
   detectorLabel: PropTypes.object.isRequired,
+  isEmbeddable: PropTypes.boolean,
   entityFields: PropTypes.arrayOf(ExplorerChartLabelBadge.propTypes.entity),
   infoTooltip: PropTypes.object.isRequired,
   wrapLabel: PropTypes.bool,

diff --git a/...k/plugins/ml/public/application/explorer/explorer_charts/explorer_anomalies_container.tsx b/...k/plugins/ml/public/application/explorer/explorer_charts/explorer_anomalies_container.tsx
@@ -90,6 +90,7 @@ export const ExplorerAnomaliesContainer: FC<ExplorerAnomaliesContainerProps> = (
         <ExplorerChartsContainer
           {...{
             ...chartsData,
+            isEmbeddable: true,
             severity: severity.val,
             mlLocator,
             tableData,

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
@@ -86,6 +86,7 @@ function getChartId(series, randomId) {
 // Wrapper for a single explorer chart
 function ExplorerChartContainer({
   id,
+  isEmbeddable,
   series,
   severity,
   tooManyBuckets,
@@ -251,6 +252,7 @@ function ExplorerChartContainer({
       <EuiFlexGroup justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
           <ExplorerChartLabel
+            isEmbeddable={isEmbeddable}
             detectorLabel={DetectorLabel}
             entityFields={entityFields}
             infoTooltip={{ ...series.infoTooltip, chartType }}
@@ -376,6 +378,7 @@ function ExplorerChartContainer({
 // Flex layout wrapper for all explorer charts
 export const ExplorerChartsContainerUI = ({
   id: uuid,
+  isEmbeddable,
   chartsPerRow,
   seriesToPlot,
   severity,
@@ -443,6 +446,7 @@ export const ExplorerChartsContainerUI = ({
                 <ExplorerChartContainer
                   key={chartId}
                   id={chartId}
+                  isEmbeddable={isEmbeddable}
                   series={series}
                   severity={severity}
                   tooManyBuckets={tooManyBuckets}

diff --git a/...seriesexplorer/timeseriesexplorer_embeddable_chart/timeseriesexplorer_embeddable_chart.js b/...seriesexplorer/timeseriesexplorer_embeddable_chart/timeseriesexplorer_embeddable_chart.js
@@ -30,15 +30,7 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { context } from '@kbn/kibana-react-plugin/public';
 import { ML_JOB_AGGREGATION, aggregationTypeTransform } from '@kbn/ml-anomaly-utils';
 
-import {
-  EuiCallOut,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-  EuiTitle,
-  EuiTextColor,
-} from '@elastic/eui';
-import { TimeSeriesExplorerHelpPopover } from '../timeseriesexplorer_help_popover';
+import { EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 
 import { ANOMALIES_TABLE_DEFAULT_QUERY_SIZE } from '../../../../common/constants/search';
 import {
@@ -67,16 +59,11 @@ import { timeSeriesExplorerServiceFactory } from '../../util/time_series_explore
 import { getTimeseriesexplorerDefaultState } from '../timeseriesexplorer_utils';
 import { mlJobServiceFactory } from '../../services/job_service';
 import { forecastServiceFactory } from '../../services/forecast_service';
-
-// Used to indicate the chart is being plotted across
-// all partition field values, where the cardinality of the field cannot be
-// obtained as it is not aggregatable e.g. 'all distinct kpi_indicator values'
-const allValuesLabel = i18n.translate('xpack.ml.timeSeriesExplorer.allPartitionValuesLabel', {
-  defaultMessage: 'all',
-});
+import { SingleMetricViewerTitle } from './timeseriesexplorer_title';
 
 export class TimeSeriesExplorerEmbeddableChart extends React.Component {
   static propTypes = {
+    api: PropTypes.object,
     appStateHandler: PropTypes.func.isRequired,
     autoZoomDuration: PropTypes.number.isRequired,
     bounds: PropTypes.object.isRequired,
@@ -930,70 +917,11 @@ export class TimeSeriesExplorerEmbeddableChart extends React.Component {
           (fullRefresh === false || loading === false) &&
           hasResults === true && (
             <div>
-              <EuiFlexGroup gutterSize="xs" alignItems="center">
-                <EuiFlexItem grow={false}>
-                  <EuiTitle size={'xs'}>
-                    <h2>
-                      <span>
-                        {i18n.translate(
-                          'xpack.ml.timeSeriesExplorer.singleTimeSeriesAnalysisTitle',
-                          {
-                            defaultMessage: 'Single time series analysis of {functionLabel}',
-                            values: { functionLabel: chartDetails.functionLabel },
-                          }
-                        )}
-                      </span>
-                      &nbsp;
-                      {chartDetails.entityData.count === 1 && (
-                        <EuiTextColor color={'success'} size={'s'} component={'span'}>
-                          {chartDetails.entityData.entities.length > 0 && '('}
-                          {chartDetails.entityData.entities
-                            .map((entity) => {
-                              return `${entity.fieldName}: ${entity.fieldValue}`;
-                            })
-                            .join(', ')}
-                          {chartDetails.entityData.entities.length > 0 && ')'}
-                        </EuiTextColor>
-                      )}
-                      {chartDetails.entityData.count !== 1 && (
-                        <EuiTextColor color={'success'} size={'s'} component={'span'}>
-                          {chartDetails.entityData.entities.map((countData, i) => {
-                            return (
-                              <Fragment key={countData.fieldName}>
-                                {i18n.translate(
-                                  'xpack.ml.timeSeriesExplorer.countDataInChartDetailsDescription',
-                                  {
-                                    defaultMessage:
-                                      '{openBrace}{cardinalityValue} distinct {fieldName} {cardinality, plural, one {} other { values}}{closeBrace}',
-                                    values: {
-                                      openBrace: i === 0 ? '(' : '',
-                                      closeBrace:
-                                        i === chartDetails.entityData.entities.length - 1
-                                          ? ')'
-                                          : '',
-                                      cardinalityValue:
-                                        countData.cardinality === 0
-                                          ? allValuesLabel
-                                          : countData.cardinality,
-                                      cardinality: countData.cardinality,
-                                      fieldName: countData.fieldName,
-                                    },
-                                  }
-                                )}
-                                {i !== chartDetails.entityData.entities.length - 1 ? ', ' : ''}
-                              </Fragment>
-                            );
-                          })}
-                        </EuiTextColor>
-                      )}
-                    </h2>
-                  </EuiTitle>
-                </EuiFlexItem>
-
-                <EuiFlexItem grow={false}>
-                  <TimeSeriesExplorerHelpPopover embeddableMode />
-                </EuiFlexItem>
-              </EuiFlexGroup>
+              <SingleMetricViewerTitle
+                api={this.props.api}
+                functionLabel={chartDetails.functionLabel}
+                entityData={chartDetails.entityData}
+              />
               <EuiFlexGroup style={{ float: 'right' }} alignItems="center">
                 {showModelBoundsCheckbox && (
                   <TimeseriesExplorerCheckbox