[6.x] [ML] Convert Angular filters to formatter functions (#18681)

x-pack/plugins/ml/public/components/anomalies_table/anomalies_table_directive.js

@@ -17,6 +17,7 @@ import rison from 'rison-node';
 import { notify } from 'ui/notify';
 import { ES_FIELD_TYPES } from 'plugins/ml/../common/constants/field_types';
 import { parseInterval } from 'plugins/ml/../common/util/parse_interval';
+import { formatValue } from 'plugins/ml/formatters/format_value';
 import { getUrlForRecord } from 'plugins/ml/util/custom_url_utils';
 import { replaceStringTokens, mlEscape } from 'plugins/ml/util/string_utils';
 import { isTimeSeriesViewDetector } from 'plugins/ml/../common/util/job_utils';
@@ -35,8 +36,7 @@ import template from './anomalies_table.html';
 
 import 'plugins/ml/components/controls';
 import 'plugins/ml/components/paginated_table';
-import 'plugins/ml/filters/format_value';
-import 'plugins/ml/filters/metric_change_description';
+import 'plugins/ml/formatters/metric_change_description';
 import './expanded_row/expanded_row_directive';
 import './influencers_cell/influencers_cell_directive';
 
@@ -53,8 +53,7 @@ module.directive('mlAnomaliesTable', function (
   Private,
   mlAnomaliesTableService,
   mlSelectIntervalService,
-  mlSelectSeverityService,
-  formatValueFilter) {
+  mlSelectSeverityService) {
 
   return {
     restrict: 'E',
@@ -854,19 +853,22 @@ module.directive('mlAnomaliesTable', function (
         if (addActual !== undefined) {
           if (_.has(record, 'actual')) {
             tableRow.push({
-              markup: formatValueFilter(record.actual, record.source.function, fieldFormat),
+              markup: formatValue(record.actual, record.source.function, fieldFormat),
               // Store the unformatted value as a number so that sorting works correctly.
-              value: Number(record.actual),
+              // actual and typical values in anomaly record results will be arrays.
+              value: Array.isArray(record.actual) && record.actual.length === 1 ?
+                Number(record.actual[0]) : String(record.actual),
               scope: rowScope });
           } else {
             tableRow.push({ markup: '', value: '' });
           }
         }
         if (addTypical !== undefined) {
           if (_.has(record, 'typical')) {
-            const typicalVal = Number(record.typical);
+            const typicalVal = Array.isArray(record.typical) && record.typical.length === 1 ?
+              Number(record.typical[0]) : String(record.typical);
             tableRow.push({
-              markup: formatValueFilter(record.typical, record.source.function, fieldFormat),
+              markup: formatValue(record.typical, record.source.function, fieldFormat),
               value: typicalVal,
               scope: rowScope });
 
@@ -875,10 +877,15 @@ module.directive('mlAnomaliesTable', function (
               // and add a description cell if not time_of_week/day.
               const detectorFunc = record.source.function;
               if (detectorFunc !== 'time_of_week' && detectorFunc !== 'time_of_day') {
-                const actualVal = Number(record.actual);
-                const factor = (actualVal > typicalVal) ? actualVal / typicalVal : typicalVal / actualVal;
+                let factor = 0;
+                if (Array.isArray(record.typical) && record.typical.length === 1 &&
+                  Array.isArray(record.actual) && record.actual.length === 1) {
+                  const actualVal = Number(record.actual[0]);
+                  factor = (actualVal > typicalVal) ? actualVal / typicalVal : typicalVal / actualVal;
+                }
+
                 tableRow.push({
-                  markup: `<span ng-bind-html="${actualVal} | metricChangeDescription:${typicalVal}"></span>`,
+                  markup: `<span ng-bind-html="[${record.actual}] | metricChangeDescription:[${typicalVal}]"></span>`,
                   value: Math.abs(factor),
                   scope: rowScope });
               } else {

x-pack/plugins/ml/public/components/anomalies_table/expanded_row/expanded_row_directive.js

@@ -23,7 +23,7 @@ import {
   showActualForFunction,
   showTypicalForFunction
 } from 'plugins/ml/util/anomaly_utils';
-import 'plugins/ml/filters/format_value';
+import 'plugins/ml/formatters/format_value';
 
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml');

x-pack/plugins/ml/public/components/influencers_list/influencers_list_directive.js

@@ -13,7 +13,7 @@
 import _ from 'lodash';
 
 import 'plugins/ml/lib/angular_bootstrap_patch';
-import 'plugins/ml/filters/abbreviate_whole_number';
+import 'plugins/ml/formatters/abbreviate_whole_number';
 
 import template from './influencers_list.html';
 import { getSeverity } from 'plugins/ml/util/anomaly_utils';

x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart_directive.js

@@ -18,10 +18,10 @@ import d3 from 'd3';
 import angular from 'angular';
 import moment from 'moment';
 
+import { formatValue } from 'plugins/ml/formatters/format_value';
 import { getSeverityWithLow } from 'plugins/ml/util/anomaly_utils';
 import { drawLineChartDots, numTicksForDateFormat } from 'plugins/ml/util/chart_utils';
 import { TimeBucketsProvider } from 'ui/time_buckets';
-import 'plugins/ml/filters/format_value';
 import loadingIndicatorWrapperTemplate from 'plugins/ml/components/loading_indicator/loading_indicator_wrapper.html';
 import { mlEscape } from 'plugins/ml/util/string_utils';
 import { FieldFormatServiceProvider } from 'plugins/ml/services/field_format_service';
@@ -30,7 +30,6 @@ import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml');
 
 module.directive('mlExplorerChart', function (
-  formatValueFilter,
   mlChartTooltipService,
   Private,
   mlSelectSeverityService) {
@@ -288,10 +287,10 @@ module.directive('mlExplorerChart', function (
         if (_.has(marker, 'actual')) {
           // Display the record actual in preference to the chart value, which may be
           // different depending on the aggregation interval of the chart.
-          contents += (`<br/>actual: ${formatValueFilter(marker.actual, config.functionDescription, fieldFormat)}`);
-          contents += (`<br/>typical: ${formatValueFilter(marker.typical, config.functionDescription, fieldFormat)}`);
+          contents += (`<br/>actual: ${formatValue(marker.actual, config.functionDescription, fieldFormat)}`);
+          contents += (`<br/>typical: ${formatValue(marker.typical, config.functionDescription, fieldFormat)}`);
         } else {
-          contents += (`<br/>value: ${formatValueFilter(marker.value, config.functionDescription, fieldFormat)}`);
+          contents += (`<br/>value: ${formatValue(marker.value, config.functionDescription, fieldFormat)}`);
           if (_.has(marker, 'byFieldName') && _.has(marker, 'numberOfCauses')) {
             const numberOfCauses = marker.numberOfCauses;
             const byFieldName = mlEscape(marker.byFieldName);
@@ -305,7 +304,7 @@ module.directive('mlExplorerChart', function (
           }
         }
       } else {
-        contents += `value: ${formatValueFilter(marker.value, config.functionDescription, fieldFormat)}`;
+        contents += `value: ${formatValue(marker.value, config.functionDescription, fieldFormat)}`;
       }
 
       if (_.has(marker, 'scheduledEvents')) {