[ML] Replace swim lane implementation with elastic-charts Heatmap

package.json

@@ -230,7 +230,7 @@
     "@babel/register": "^7.10.5",
     "@babel/types": "^7.11.0",
     "@elastic/apm-rum": "^5.6.1",
-    "@elastic/charts": "23.1.1",
+    "@elastic/charts": "23.2.0",
     "@elastic/ems-client": "7.10.0",
     "@elastic/eslint-config-kibana": "0.15.0",
     "@elastic/eslint-plugin-eui": "0.0.2",

packages/kbn-ui-shared-deps/package.json

@@ -9,7 +9,7 @@
     "kbn:watch": "node scripts/build --dev --watch"
   },
   "dependencies": {
-    "@elastic/charts": "23.1.1",
+    "@elastic/charts": "23.2.0",
     "@elastic/eui": "29.3.0",
     "@elastic/numeral": "^2.5.0",
     "@kbn/i18n": "1.0.0",

x-pack/package.json

@@ -73,7 +73,6 @@
     "@types/d3-shape": "^1.3.1",
     "@types/d3-time": "^1.0.10",
     "@types/d3-time-format": "^2.1.1",
-    "@types/dragselect": "^1.13.1",
     "@types/elasticsearch": "^5.0.33",
     "@types/fancy-log": "^1.3.1",
     "@types/file-saver": "^2.0.0",
@@ -165,7 +164,6 @@
     "cypress-promise": "^1.1.0",
     "d3": "3.5.17",
     "d3-scale": "1.0.7",
-    "dragselect": "1.13.1",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "enzyme-adapter-utils": "^1.13.0",

x-pack/plugins/ml/common/constants/anomalies.ts

@@ -21,6 +21,15 @@ export enum ANOMALY_THRESHOLD {
   LOW = 0,
 }
 
+export const SEVERITY_COLORS = {
+  CRITICAL: '#fe5050',
+  MAJOR: '#fba740',
+  MINOR: '#fdec25',
+  WARNING: '#8bc8fb',
+  LOW: '#d2e9f7',
+  BLANK: '#ffffff',
+};
+
 export const PARTITION_FIELDS = ['partition_field', 'over_field', 'by_field'] as const;
 export const JOB_ID = 'job_id';
 export const PARTITION_FIELD_VALUE = 'partition_field_value';

x-pack/plugins/ml/common/index.ts

@@ -5,6 +5,6 @@
  */
 
 export { SearchResponse7 } from './types/es_client';
-export { ANOMALY_SEVERITY, ANOMALY_THRESHOLD } from './constants/anomalies';
+export { ANOMALY_SEVERITY, ANOMALY_THRESHOLD, SEVERITY_COLORS } from './constants/anomalies';
 export { getSeverityColor, getSeverityType } from './util/anomaly_utils';
 export { composeValidators, patternValidator } from './util/validators';

x-pack/plugins/ml/common/util/anomaly_utils.ts

@@ -12,7 +12,7 @@
 import { i18n } from '@kbn/i18n';
 import { CONDITIONS_NOT_SUPPORTED_FUNCTIONS } from '../constants/detector_rule';
 import { MULTI_BUCKET_IMPACT } from '../constants/multi_bucket_impact';
-import { ANOMALY_SEVERITY, ANOMALY_THRESHOLD } from '../constants/anomalies';
+import { ANOMALY_SEVERITY, ANOMALY_THRESHOLD, SEVERITY_COLORS } from '../constants/anomalies';
 import { AnomalyRecordDoc } from '../types/anomalies';
 
 export interface SeverityType {
@@ -109,6 +109,13 @@ function getSeverityTypes() {
   });
 }
 
+/**
+ * Return formatted severity score.
+ */
+export function getFormattedSeverityScore(score: number): string {
+  return score < 1 ? '< 1' : String(parseInt(String(score), 10));
+}
+
 // Returns a severity label (one of critical, major, minor, warning or unknown)
 // for the supplied normalized anomaly score (a value between 0 and 100).
 export function getSeverity(normalizedScore: number): SeverityType {
@@ -168,17 +175,17 @@ export function getSeverityWithLow(normalizedScore: number): SeverityType {
 // for the supplied normalized anomaly score (a value between 0 and 100).
 export function getSeverityColor(normalizedScore: number): string {
   if (normalizedScore >= ANOMALY_THRESHOLD.CRITICAL) {
-    return '#fe5050';
+    return SEVERITY_COLORS.CRITICAL;
   } else if (normalizedScore >= ANOMALY_THRESHOLD.MAJOR) {
-    return '#fba740';
+    return SEVERITY_COLORS.MAJOR;
   } else if (normalizedScore >= ANOMALY_THRESHOLD.MINOR) {
-    return '#fdec25';
+    return SEVERITY_COLORS.MINOR;
   } else if (normalizedScore >= ANOMALY_THRESHOLD.WARNING) {
-    return '#8bc8fb';
+    return SEVERITY_COLORS.WARNING;
   } else if (normalizedScore >= ANOMALY_THRESHOLD.LOW) {
-    return '#d2e9f7';
+    return SEVERITY_COLORS.LOW;
   } else {
-    return '#ffffff';
+    return SEVERITY_COLORS.BLANK;
   }
 }
 

x-pack/plugins/ml/public/application/components/chart_tooltip/_chart_tooltip.scss

@@ -1,7 +1,6 @@
 .mlChartTooltip {
   @include euiToolTipStyle('s');
   @include euiFontSizeXS;
-  position: absolute;
   padding: 0;
   transition: opacity $euiAnimSpeedNormal;
   pointer-events: none;

x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx

@@ -23,6 +23,57 @@ const renderHeader = (headerData?: ChartTooltipValue, formatter?: TooltipValueFo
   return formatter ? formatter(headerData) : headerData.label;
 };
 
+/**
+ * Pure component for rendering the tooltip content with a custom layout across the ML plugin.
+ */
+export const FormattedTooltip: FC<{ tooltipData: TooltipData }> = ({ tooltipData }) => {
+  return (
+    <div className="mlChartTooltip">
+      {tooltipData.length > 0 && tooltipData[0].skipHeader === undefined && (
+        <div className="mlChartTooltip__header">{renderHeader(tooltipData[0])}</div>
+      )}
+      {tooltipData.length > 1 && (
+        <div className="mlChartTooltip__list">
+          {tooltipData
+            .slice(1)
+            .map(({ label, value, color, isHighlighted, seriesIdentifier, valueAccessor }) => {
+              const classes = classNames('mlChartTooltip__item', {
+                // eslint-disable-next-line @typescript-eslint/naming-convention
+                echTooltip__rowHighlighted: isHighlighted,
+              });
+
+              const renderValue = Array.isArray(value)
+                ? value.map((v) => <div key={v}>{v}</div>)
+                : value;
+
+              return (
+                <div
+                  key={`${seriesIdentifier.key}__${valueAccessor}`}
+                  className={classes}
+                  style={{
+                    borderLeftColor: color,
+                  }}
+                >
+                  <EuiFlexGroup>
+                    <EuiFlexItem className="eui-textBreakWord mlChartTooltip__label" grow={false}>
+                      {label}
+                    </EuiFlexItem>
+                    <EuiFlexItem className="eui-textBreakAll mlChartTooltip__value">
+                      {renderValue}
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </div>
+              );
+            })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+/**
+ * Tooltip component bundled with the {@link ChartTooltipService}
+ */
 const Tooltip: FC<{ service: ChartTooltipService }> = React.memo(({ service }) => {
   const [tooltipData, setData] = useState<TooltipData>([]);
   const refCallback = useRef<ChildrenArg['triggerRef']>();
@@ -57,50 +108,9 @@ const Tooltip: FC<{ service: ChartTooltipService }> = React.memo(({ service }) =
         <div
           {...getTooltipProps({
             ref: tooltipRef,
-            className: 'mlChartTooltip',
           })}
         >
-          {tooltipData.length > 0 && tooltipData[0].skipHeader === undefined && (
-            <div className="mlChartTooltip__header">{renderHeader(tooltipData[0])}</div>
-          )}
-          {tooltipData.length > 1 && (
-            <div className="mlChartTooltip__list">
-              {tooltipData
-                .slice(1)
-                .map(({ label, value, color, isHighlighted, seriesIdentifier, valueAccessor }) => {
-                  const classes = classNames('mlChartTooltip__item', {
-                    // eslint-disable-next-line @typescript-eslint/naming-convention
-                    echTooltip__rowHighlighted: isHighlighted,
-                  });
-
-                  const renderValue = Array.isArray(value)
-                    ? value.map((v) => <div key={v}>{v}</div>)
-                    : value;
-
-                  return (
-                    <div
-                      key={`${seriesIdentifier.key}__${valueAccessor}`}
-                      className={classes}
-                      style={{
-                        borderLeftColor: color,
-                      }}
-                    >
-                      <EuiFlexGroup>
-                        <EuiFlexItem
-                          className="eui-textBreakWord mlChartTooltip__label"
-                          grow={false}
-                        >
-                          {label}
-                        </EuiFlexItem>
-                        <EuiFlexItem className="eui-textBreakAll mlChartTooltip__value">
-                          {renderValue}
-                        </EuiFlexItem>
-                      </EuiFlexGroup>
-                    </div>
-                  );
-                })}
-            </div>
-          )}
+          <FormattedTooltip tooltipData={tooltipData} />
         </div>
       );
     }) as TooltipTriggerProps['tooltip'],