[ML] Job Selector conversion to React (#35638)

* wip: create react jobSelector wrapper + main component

* Load jobs and select first if none selected via url

* wip: create flyout content

* Add endpoint for fetching jobs with timerange for table

* display selected ids in flyout

* Add custom table allowing external selection

* add groups table in groups tab

* Get groups and jobs in initial api call

* add ability to select groups

* Hook jobSelector into SingleMetricView

* Show selected group badges with count

* Organize jobSelector component directories

* Move timerange logic to server

* Move group color selection to utils

* hide/show badges and add localization

* fetch jobs in route to enable selector jobid validation

* upate globalState on setting jobId in SingleMetricView

* Add pager options.Retain search query on tab change

* Ensure gantBar timeRanges correct

* cleanup old commented code. tweak flyout header/footer style

* running gantt bar and remove unnecessary api call

* GanttBar running style. Pass timezone to server.

* Running gantt bar limited to timerange. Clean up comments.

* Refactor jobSelector endpoint to use fullJobs

* Retain group selection in globalState

* Recalculate ganttbars on resize

* add test for JobSelectorTable

x-pack/plugins/ml/common/util/group_color_utils.js

@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import * as euiVars from '@elastic/eui/dist/eui_theme_dark.json';
+import { stringHash } from './string_utils';
+
+
+const COLORS = [
+  euiVars.euiColorVis0,
+  euiVars.euiColorVis1,
+  euiVars.euiColorVis2,
+  euiVars.euiColorVis3,
+  // euiVars.euiColorVis4, // light pink, too hard to read with white text
+  euiVars.euiColorVis5,
+  euiVars.euiColorVis6,
+  euiVars.euiColorVis7,
+  euiVars.euiColorVis8,
+  euiVars.euiColorVis9,
+  euiVars.euiColorDarkShade,
+  euiVars.euiColorPrimary
+];
+
+const colorMap = {};
+
+export function tabColor(name) {
+  if (colorMap[name] === undefined) {
+    const n = stringHash(name);
+    const color = COLORS[(n % COLORS.length)];
+    colorMap[name] = color;
+    return color;
+  } else {
+    return colorMap[name];
+  }
+}

x-pack/plugins/ml/public/components/job_selector/_index.scss

@@ -0,0 +1 @@
+@import 'job_selector';

x-pack/plugins/ml/public/components/job_selector/_job_selector.scss

@@ -0,0 +1,80 @@
+.mlJobSelectorBar {
+  padding: 10px;
+  background-color: $euiColorLightShade
+}
+
+.mlJobSelectorFlyoutBody > .euiFlyoutBody__overflow {
+  padding-top: $euiSizeS;
+}
+
+.mlJobSelector__ganttBar {
+  background-color: #79adda;
+  height: 14px;
+  border-radius: 2px;
+}
+
+.mlJobSelector__ganttBarBackEdge {
+  height: 18px;
+  border-left: 1px solid #d6d6d6;
+  border-right: 1px solid #d6d6d6;
+  margin-bottom: -16px;
+  padding-top: 9px;
+}
+
+.mlJobSelector__ganttBarDashed {
+  height: 1px;
+  border-top: 1px dashed #d6d6d6;
+}
+
+.mlJobSelector__ganttBarRunning {
+  background-image:-webkit-gradient(linear,
+    0 100%, 100% 0,
+    color-stop(0.25, rgba(255, 255, 255, 0.15)),
+    color-stop(0.25, transparent),
+    color-stop(0.5, transparent),
+    color-stop(0.5, rgba(255, 255, 255, 0.15)),
+    color-stop(0.75, rgba(255, 255, 255, 0.15)),
+    color-stop(0.75, transparent),
+    to(transparent));
+  background-image:-webkit-linear-gradient(45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%, transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent);
+  background-image:-moz-linear-gradient(45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent);
+  background-image:-o-linear-gradient(45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent);
+  background-image:linear-gradient(45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent);
+  -webkit-background-size:40px 40px;
+  -moz-background-size:40px 40px;
+  -o-background-size:40px 40px;
+  background-size:40px 40px;
+
+  -webkit-animation:progress-bar-stripes 2s linear infinite;
+  -moz-animation:progress-bar-stripes 2s linear infinite;
+  -ms-animation:progress-bar-stripes 2s linear infinite;
+  -o-animation:progress-bar-stripes 2s linear infinite;
+  animation:progress-bar-stripes 2s linear infinite;
+}