From e10395fec4155360ee2cb883b124975c3a684f5a Mon Sep 17 00:00:00 2001
From: Amit Galitzky <amgalitz@amazon.com>
Date: Tue, 5 Apr 2022 18:31:51 +0000
Subject: [PATCH 1/3] version bump 2.0 changes

Signed-off-by: Amit Galitzky <amgalitz@amazon.com>
---
 .gitignore                                    |   1 +
 opensearch_dashboards.json                    |   4 +-
 package.json                                  |   6 +-
 .../__snapshots__/ContentPanel.test.tsx.snap  |   2 +-
 .../__snapshots__/AlertsFlyout.test.tsx.snap  | 555 +-----------------
 .../__snapshots__/AnomalyStat.test.tsx.snap   |  35 ++
 .../components/FeatureChart/FeatureChart.tsx  |   4 +-
 .../containers/AnomalyDetailsChart.tsx        |   4 +-
 .../AnomalyHeatmapChart.test.tsx.snap         | 347 +++++------
 .../AggregationSelector.test.tsx.snap         |   4 +-
 .../__snapshots__/CategoryField.test.tsx.snap |  45 +-
 .../CustomAggregation.test.tsx.snap           |  10 +-
 .../__tests__/ConfigureModel.test.tsx         |   4 +-
 .../ConfigureModel.test.tsx.snap              | 271 ++++++---
 .../Components/AnomaliesLiveChart.tsx         |   5 +-
 .../EmptyDashboard.test.tsx.snap              |  29 +-
 .../__snapshots__/IndexOption.test.tsx.snap   |  12 +-
 .../NameAndDescription.test.tsx.snap          |   6 +-
 .../__snapshots__/Settings.test.tsx.snap      |  34 +-
 .../__tests__/DefineDetector.test.tsx         |   4 +-
 .../DefineDetector.test.tsx.snap              | 171 ++++--
 .../__tests__/DetectorConfig.test.tsx         |   8 +-
 .../__snapshots__/ConfirmModal.test.tsx.snap  | 257 +-------
 .../DetectorControls.test.tsx.snap            |   8 +-
 .../MonitorCallout.test.tsx.snap              |  70 ++-
 .../__snapshots__/HistoricalJob.test.tsx.snap |  18 +-
 .../__snapshots__/RealTimeJob.test.tsx.snap   |  18 +-
 .../__snapshots__/DetectorJobs.test.tsx.snap  |  50 +-
 .../__snapshots__/ListControls.test.tsx.snap  |  20 +-
 .../containers/AnomalyResultsLiveChart.tsx    |   4 +-
 .../__snapshots__/EmptyMessage.test.tsx.snap  |   6 -
 .../__tests__/ListActions.test.tsx            |  12 +-
 .../__snapshots__/ListActions.test.tsx.snap   |   4 +-
 .../__snapshots__/ListFilters.test.tsx.snap   |  22 +-
 .../ConfirmDeleteDetectorsModal.test.tsx      |  28 +-
 .../ConfirmStartDetectorsModal.test.tsx       |   6 +-
 .../ConfirmStopDetectorsModal.test.tsx        |   6 +-
 .../containers/List/__tests__/List.test.tsx   |  58 +-
 ...ptyHistoricalDetectorResults.test.tsx.snap |  29 +-
 .../__snapshots__/SampleDataBox.test.tsx.snap |  17 +-
 .../SampleDataCallout.test.tsx.snap           |  70 ++-
 .../AnomalyDetectionOverview.test.tsx         |   6 +-
 .../AnomalyDetectionOverview.test.tsx.snap    | 329 +++++++++--
 .../AdditionalSettings.test.tsx.snap          |  16 +-
 .../DetectorDefinitionFields.test.tsx.snap    |   4 +-
 .../ReviewAndCreate.test.tsx.snap             |  48 +-
 server/router.ts                              |   1 -
 test/jest.config.js                           |   1 +
 yarn.lock                                     | 266 +--------
 49 files changed, 1309 insertions(+), 1626 deletions(-)

diff --git a/.gitignore b/.gitignore
index 892b787a..00ab76a4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,3 +15,4 @@ coverage
 offline-module-cache/v2/*
 offline-module-cache/v1/*
 target
+._.DS_Store
\ No newline at end of file
diff --git a/opensearch_dashboards.json b/opensearch_dashboards.json
index da2d58ef..de7a0fc4 100644
--- a/opensearch_dashboards.json
+++ b/opensearch_dashboards.json
@@ -1,7 +1,7 @@
 {
   "id": "anomalyDetectionDashboards",
-  "version": "1.3.0.0",
-  "opensearchDashboardsVersion": "1.3.0",
+  "version": "2.0.0.0",
+  "opensearchDashboardsVersion": "2.0.0",
   "configPath": ["anomaly_detection_dashboards"],
   "requiredPlugins": ["navigation"],
   "optionalPlugins": [],
diff --git a/package.json b/package.json
index a8332342..e89a8486 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,10 @@
 {
   "name": "anomaly-detection-dashboards",
-  "version": "1.3.0.0",
+  "version": "2.0.0.0",
   "description": "OpenSearch Anomaly Detection Dashboards Plugin",
   "main": "index.js",
   "config": {
-    "plugin_version": "1.3.0.0",
+    "plugin_version": "2.0.0.0",
     "plugin_name": "anomalyDetectionDashboards",
     "plugin_zip_name": "anomaly-detection-dashboards"
   },
@@ -24,8 +24,6 @@
   },
   "devDependencies": {
     "@elastic/eslint-import-resolver-kibana": "link:../../packages/osd-eslint-import-resolver-opensearch-dashboards",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.0.4",
     "@testing-library/user-event": "^12.1.6",
     "@types/react-plotly.js": "^2.2.4",
     "@types/redux-mock-store": "^1.0.1",
diff --git a/public/components/ContentPanel/__snapshots__/ContentPanel.test.tsx.snap b/public/components/ContentPanel/__snapshots__/ContentPanel.test.tsx.snap
index f83c028e..beac4000 100644
--- a/public/components/ContentPanel/__snapshots__/ContentPanel.test.tsx.snap
+++ b/public/components/ContentPanel/__snapshots__/ContentPanel.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<ContentPanel /> spec renders the component 1`] = `
 <div
-  class="euiPanel euiPanel--paddingMedium"
+  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
   style="padding: 20px;"
 >
   <div
diff --git a/public/pages/AnomalyCharts/components/AlertsFlyout/__tests__/__snapshots__/AlertsFlyout.test.tsx.snap b/public/pages/AnomalyCharts/components/AlertsFlyout/__tests__/__snapshots__/AlertsFlyout.test.tsx.snap
index 16b682ec..3c05bf8d 100644
--- a/public/pages/AnomalyCharts/components/AlertsFlyout/__tests__/__snapshots__/AlertsFlyout.test.tsx.snap
+++ b/public/pages/AnomalyCharts/components/AlertsFlyout/__tests__/__snapshots__/AlertsFlyout.test.tsx.snap
@@ -1,554 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<AlertsFlyout /> spec Alerts Flyout renders component with monitor 1`] = `
-<div>
-  <div>
-    <div
-      aria-hidden="true"
-      data-aria-hidden="true"
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="0"
-    />
-    <div
-      aria-hidden="true"
-      data-aria-hidden="true"
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
-    <div
-      data-focus-lock-disabled="false"
-    >
-      <div
-        class="euiFlyout euiFlyout--small"
-        role="dialog"
-        tabindex="0"
-      >
-        <button
-          aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
-          data-test-subj="euiFlyoutCloseButton"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
-            focusable="false"
-            height="16"
-            role="img"
-            viewBox="0 0 16 16"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
-          />
-        </button>
-        <div
-          class="euiFlyoutHeader euiFlyoutHeader--hasBorder flyout"
-        >
-          <div
-            class="euiText euiText--medium preview-title euiText--constrainedWidth"
-          >
-            <h2>
-               Alerts 
-            </h2>
-          </div>
-        </div>
-        <div
-          class="euiFlyoutBody"
-          style="overflow-y: auto;"
-        >
-          <div
-            class="euiFlyoutBody__overflow"
-          >
-            <div
-              class="euiFlyoutBody__overflowContent"
-            >
-              <div
-                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
-              >
-                <div
-                  class="euiFlexItem"
-                >
-                  <div
-                    class="euiText euiText--medium"
-                  >
-                    <p
-                      class="alerts_flyout_p"
-                    >
-                      Anomaly detector alerts are powered by the
-                      <a
-                        class="euiLink euiLink--primary"
-                        href="https://opensearch.org/docs/monitoring-plugins/alerting"
-                        rel="noreferrer"
-                      >
-                         
-                        Alerting plugin
-                      </a>
-                      . If you don't see 
-                      <svg
-                        aria-hidden="true"
-                        class="euiIcon euiIcon--medium euiIcon-isLoading"
-                        focusable="false"
-                        height="16"
-                        role="img"
-                        viewBox="0 0 16 16"
-                        width="16"
-                        xmlns="http://www.w3.org/2000/svg"
-                      />
-                      Alerting in your navigation panel, install it first and follow the instructions below to set up alerts.
-                    </p>
-                  </div>
-                </div>
-                <div
-                  class="euiFlexItem"
-                >
-                  <div
-                    class="euiSteps"
-                  >
-                    <div
-                      class="euiStep"
-                    >
-                      <div
-                        class="euiStep__titleWrapper"
-                      >
-                        <div
-                          aria-label="Step 1"
-                          class="euiStepNumber euiStep__circle"
-                        >
-                          1
-                        </div>
-                        <p
-                          class="euiTitle euiTitle--small euiStep__title"
-                        >
-                          Create a monitor
-                        </p>
-                      </div>
-                      <div
-                        class="euiStep__content"
-                      >
-                        <p
-                          class="alerts_flyout_p"
-                        >
-                          A monitor queries a detector on a specific schedule. In Alerting, choose "Define using anomaly detector".
-                        </p>
-                      </div>
-                    </div>
-                    <div
-                      class="euiStep"
-                    >
-                      <div
-                        class="euiStep__titleWrapper"
-                      >
-                        <div
-                          aria-label="Step 2"
-                          class="euiStepNumber euiStep__circle"
-                        >
-                          2
-                        </div>
-                        <p
-                          class="euiTitle euiTitle--small euiStep__title"
-                        >
-                          Define triggers and actions
-                        </p>
-                      </div>
-                      <div
-                        class="euiStep__content"
-                      >
-                        <p
-                          class="alerts_flyout_p"
-                        >
-                          Triggers specify the thresholds for anomalies to generate alerts. Actions specify the alert message and destination.
-                        </p>
-                      </div>
-                    </div>
-                    <div
-                      class="euiStep"
-                    >
-                      <div
-                        class="euiStep__titleWrapper"
-                      >
-                        <div
-                          aria-label="Step 3"
-                          class="euiStepNumber euiStep__circle"
-                        >
-                          3
-                        </div>
-                        <p
-                          class="euiTitle euiTitle--small euiStep__title"
-                        >
-                          View alerts from detector and monitor
-                        </p>
-                      </div>
-                      <div
-                        class="euiStep__content"
-                      >
-                        <p
-                          class="alerts_flyout_p"
-                        >
-                          View anomaly detector alerts on the anomaly history graph. See details of all alerts over time from the monitor.
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="euiFlyoutFooter"
-        >
-          <div
-            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
-          >
-            <div
-              class="euiFlexItem"
-            >
-              <a
-                class="euiButton euiButton--primary"
-                data-test-subj="setUpAlerts"
-                href="https://opensearch.org/docs/monitoring-plugins/alerting"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                <span
-                  class="euiButtonContent euiButton__content"
-                >
-                  <span
-                    class="euiButton__text"
-                  >
-                    Explore Alerting 
-                    <svg
-                      aria-hidden="true"
-                      class="euiIcon euiIcon--small euiIcon-isLoading"
-                      focusable="false"
-                      height="16"
-                      role="img"
-                      viewBox="0 0 16 16"
-                      width="16"
-                      xmlns="http://www.w3.org/2000/svg"
-                    />
-                  </span>
-                </span>
-              </a>
-            </div>
-            <div
-              class="euiFlexItem"
-            >
-              <a
-                class="euiButton euiButton--primary euiButton--fill"
-                detectorid="GILVg3EBhaIh92zvX8uE"
-                detectorinterval="1"
-                detectorname="test detector"
-                href="/899c56c6-99d0-539b-8"
-                monitor="[object Object]"
-                rel="noreferrer"
-                unit="Minutes"
-              >
-                <span
-                  class="euiButtonContent euiButton__content"
-                >
-                  <span
-                    class="euiButton__text"
-                  >
-                    Edit alert settings
-                  </span>
-                </span>
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      aria-hidden="true"
-      data-aria-hidden="true"
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="0"
-    />
-  </div>
-</div>
+<div
+  aria-hidden="true"
+  data-aria-hidden="true"
+/>
 `;
 
 exports[`<AlertsFlyout /> spec Alerts Flyout renders component with undefined monitor 1`] = `
-<div>
-  <div>
-    <div
-      aria-hidden="true"
-      data-aria-hidden="true"
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="0"
-    />
-    <div
-      aria-hidden="true"
-      data-aria-hidden="true"
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
-    <div
-      data-focus-lock-disabled="false"
-    >
-      <div
-        class="euiFlyout euiFlyout--small"
-        role="dialog"
-        tabindex="0"
-      >
-        <button
-          aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
-          data-test-subj="euiFlyoutCloseButton"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="euiIcon euiIcon--medium euiButtonIcon__icon"
-            focusable="false"
-            height="16"
-            role="img"
-            viewBox="0 0 16 16"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M7.293 8L3.146 3.854a.5.5 0 11.708-.708L8 7.293l4.146-4.147a.5.5 0 01.708.708L8.707 8l4.147 4.146a.5.5 0 01-.708.708L8 8.707l-4.146 4.147a.5.5 0 01-.708-.708L7.293 8z"
-            />
-          </svg>
-        </button>
-        <div
-          class="euiFlyoutHeader euiFlyoutHeader--hasBorder flyout"
-        >
-          <div
-            class="euiText euiText--medium preview-title euiText--constrainedWidth"
-          >
-            <h2>
-               Alerts 
-            </h2>
-          </div>
-        </div>
-        <div
-          class="euiFlyoutBody"
-          style="overflow-y: auto;"
-        >
-          <div
-            class="euiFlyoutBody__overflow"
-          >
-            <div
-              class="euiFlyoutBody__overflowContent"
-            >
-              <div
-                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
-              >
-                <div
-                  class="euiFlexItem"
-                >
-                  <div
-                    class="euiText euiText--medium"
-                  >
-                    <p
-                      class="alerts_flyout_p"
-                    >
-                      Anomaly detector alerts are powered by the
-                      <a
-                        class="euiLink euiLink--primary"
-                        href="https://opensearch.org/docs/monitoring-plugins/alerting"
-                        rel="noreferrer"
-                      >
-                         
-                        Alerting plugin
-                      </a>
-                      . If you don't see 
-                      <svg
-                        aria-hidden="true"
-                        class="euiIcon euiIcon--medium"
-                        focusable="false"
-                        height="16"
-                        role="img"
-                        viewBox="0 0 16 16"
-                        width="16"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M2.316 12h10.368c-.188-.704-.28-1.691-.348-3.037-.07-1.382-.103-1.888-.19-2.612-.028-.236-.06-.462-.096-.68-.31-1.892-1.506-2.923-3.708-3.131a1 1 0 10-1.684 0c-2.202.208-3.397 1.24-3.708 3.13a16.01 16.01 0 00-.096.68c-.087.725-.12 1.23-.19 2.613-.068 1.346-.16 2.333-.348 3.037zm10.843 1H1.84c-.308.353-.737.5-1.341.5a.5.5 0 110-1c.786 0 1.024-.783 1.166-3.587.07-1.407.105-1.926.196-2.681.03-.25.063-.49.102-.724.334-2.041 1.546-3.313 3.556-3.792a2 2 0 013.96 0c2.01.479 3.222 1.75 3.557 3.792a17 17 0 01.102.724c.09.755.125 1.274.196 2.681.14 2.804.379 3.587 1.165 3.587a.5.5 0 110 1c-.604 0-1.033-.147-1.341-.5zM5.5 14h4a2 2 0 11-4 0z"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                      Alerting in your navigation panel, install it first and follow the instructions below to set up alerts.
-                    </p>
-                  </div>
-                </div>
-                <div
-                  class="euiFlexItem"
-                >
-                  <div
-                    class="euiSteps"
-                  >
-                    <div
-                      class="euiStep"
-                    >
-                      <div
-                        class="euiStep__titleWrapper"
-                      >
-                        <div
-                          aria-label="Step 1"
-                          class="euiStepNumber euiStep__circle"
-                        >
-                          1
-                        </div>
-                        <p
-                          class="euiTitle euiTitle--small euiStep__title"
-                        >
-                          Create a monitor
-                        </p>
-                      </div>
-                      <div
-                        class="euiStep__content"
-                      >
-                        <p
-                          class="alerts_flyout_p"
-                        >
-                          A monitor queries a detector on a specific schedule. In Alerting, choose "Define using anomaly detector".
-                        </p>
-                      </div>
-                    </div>
-                    <div
-                      class="euiStep"
-                    >
-                      <div
-                        class="euiStep__titleWrapper"
-                      >
-                        <div
-                          aria-label="Step 2"
-                          class="euiStepNumber euiStep__circle"
-                        >
-                          2
-                        </div>
-                        <p
-                          class="euiTitle euiTitle--small euiStep__title"
-                        >
-                          Define triggers and actions
-                        </p>
-                      </div>
-                      <div
-                        class="euiStep__content"
-                      >
-                        <p
-                          class="alerts_flyout_p"
-                        >
-                          Triggers specify the thresholds for anomalies to generate alerts. Actions specify the alert message and destination.
-                        </p>
-                      </div>
-                    </div>
-                    <div
-                      class="euiStep"
-                    >
-                      <div
-                        class="euiStep__titleWrapper"
-                      >
-                        <div
-                          aria-label="Step 3"
-                          class="euiStepNumber euiStep__circle"
-                        >
-                          3
-                        </div>
-                        <p
-                          class="euiTitle euiTitle--small euiStep__title"
-                        >
-                          View alerts from detector and monitor
-                        </p>
-                      </div>
-                      <div
-                        class="euiStep__content"
-                      >
-                        <p
-                          class="alerts_flyout_p"
-                        >
-                          View anomaly detector alerts on the anomaly history graph. See details of all alerts over time from the monitor.
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="euiFlyoutFooter"
-        >
-          <div
-            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
-          >
-            <div
-              class="euiFlexItem"
-            >
-              <a
-                class="euiButton euiButton--primary"
-                data-test-subj="setUpAlerts"
-                href="https://opensearch.org/docs/monitoring-plugins/alerting"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                <span
-                  class="euiButtonContent euiButton__content"
-                >
-                  <span
-                    class="euiButton__text"
-                  >
-                    Explore Alerting 
-                    <svg
-                      aria-hidden="true"
-                      class="euiIcon euiIcon--small"
-                      focusable="false"
-                      height="16"
-                      role="img"
-                      viewBox="0 0 16 16"
-                      width="16"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </a>
-            </div>
-            <div
-              class="euiFlexItem"
-            >
-              <button
-                class="euiButton euiButton--primary euiButton--fill"
-                detectorid="GILVg3EBhaIh92zvX8uE"
-                detectorinterval="1"
-                detectorname="test detector"
-                type="button"
-                unit="Minutes"
-              >
-                <span
-                  class="euiButtonContent euiButton__content"
-                >
-                  <span
-                    class="euiButton__text"
-                  >
-                    Set up alerts
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      aria-hidden="true"
-      data-aria-hidden="true"
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="0"
-    />
-  </div>
-</div>
+<div
+  aria-hidden="true"
+  data-aria-hidden="true"
+/>
 `;
diff --git a/public/pages/AnomalyCharts/components/AnomaliesStat/__tests__/__snapshots__/AnomalyStat.test.tsx.snap b/public/pages/AnomalyCharts/components/AnomaliesStat/__tests__/__snapshots__/AnomalyStat.test.tsx.snap
index 872f082d..fbc59913 100644
--- a/public/pages/AnomalyCharts/components/AnomaliesStat/__tests__/__snapshots__/AnomalyStat.test.tsx.snap
+++ b/public/pages/AnomalyCharts/components/AnomaliesStat/__tests__/__snapshots__/AnomalyStat.test.tsx.snap
@@ -53,6 +53,25 @@ exports[`<AlertsStat /> spec Alert Stat renders component with monitor and loadi
             d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
           />
         </svg>
+        <svg
+          aria-label="External link"
+          class="euiIcon euiIcon--small euiLink__externalIcon"
+          focusable="false"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
+          />
+        </svg>
+        <span
+          class="euiScreenReaderOnly"
+        >
+          (opens in a new tab or window)
+        </span>
       </a>
     </div>
   </div>
@@ -108,6 +127,22 @@ exports[`<AlertsStat /> spec Alert Stat renders component with monitor and not l
           width="16"
           xmlns="http://www.w3.org/2000/svg"
         />
+        <svg
+          aria-hidden="true"
+          aria-label="External link"
+          class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+          focusable="false"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        />
+        <span
+          class="euiScreenReaderOnly"
+        >
+          (opens in a new tab or window)
+        </span>
       </a>
     </div>
   </div>
diff --git a/public/pages/AnomalyCharts/components/FeatureChart/FeatureChart.tsx b/public/pages/AnomalyCharts/components/FeatureChart/FeatureChart.tsx
index 1c4c46f8..29773470 100644
--- a/public/pages/AnomalyCharts/components/FeatureChart/FeatureChart.tsx
+++ b/public/pages/AnomalyCharts/components/FeatureChart/FeatureChart.tsx
@@ -19,7 +19,7 @@ import {
   Settings,
   ScaleType,
   LineAnnotation,
-  AnnotationDomainTypes,
+  AnnotationDomainType,
 } from '@elastic/charts';
 import { EuiText, EuiLink, EuiButton, EuiIcon } from '@elastic/eui';
 import React, { useState, Fragment } from 'react';
@@ -222,7 +222,7 @@ export const FeatureChart = (props: FeatureChartProps) => {
             ? [
                 <LineAnnotation
                   id="featureMissingAnnotations"
-                  domainType={AnnotationDomainTypes.XDomain}
+                  domainType={AnnotationDomainType.XDomain}
                   dataValues={getFeatureMissingDataAnnotations(
                     props.showFeatureMissingDataPointAnnotation
                       ? flattenData(props.rawFeatureData)
diff --git a/public/pages/AnomalyCharts/containers/AnomalyDetailsChart.tsx b/public/pages/AnomalyCharts/containers/AnomalyDetailsChart.tsx
index d6dc9c91..5286e3dc 100644
--- a/public/pages/AnomalyCharts/containers/AnomalyDetailsChart.tsx
+++ b/public/pages/AnomalyCharts/containers/AnomalyDetailsChart.tsx
@@ -10,7 +10,7 @@
  */
 
 import {
-  AnnotationDomainTypes,
+  AnnotationDomainType,
   Axis,
   Chart,
   LineAnnotation,
@@ -535,7 +535,7 @@ export const AnomalyDetailsChart = React.memo(
                   {alertAnnotations ? (
                     <LineAnnotation
                       id="alertAnnotation"
-                      domainType={AnnotationDomainTypes.XDomain}
+                      domainType={AnnotationDomainType.XDomain}
                       dataValues={alertAnnotations}
                       marker={<EuiIcon type="bell" />}
                     />
diff --git a/public/pages/AnomalyCharts/containers/__tests__/__snapshots__/AnomalyHeatmapChart.test.tsx.snap b/public/pages/AnomalyCharts/containers/__tests__/__snapshots__/AnomalyHeatmapChart.test.tsx.snap
index 6c1c96d0..bad12782 100644
--- a/public/pages/AnomalyCharts/containers/__tests__/__snapshots__/AnomalyHeatmapChart.test.tsx.snap
+++ b/public/pages/AnomalyCharts/containers/__tests__/__snapshots__/AnomalyHeatmapChart.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`<AnomalyHeatmapChart /> spec AnomalyHeatmapChart with Sample anomaly da
         >
           <svg
             aria-hidden="true"
-            class="euiIcon euiIcon--medium euiIcon-isLoading euiCallOutHeader__icon"
+            class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiCallOutHeader__icon"
             focusable="false"
             height="16"
             role="img"
@@ -116,10 +116,11 @@ exports[`<AnomalyHeatmapChart /> spec AnomalyHeatmapChart with Sample anomaly da
                               aria-label="Remove Top 10 from selection in this group"
                               class="euiBadge__iconButton"
                               title="Remove Top 10 from selection in this group"
+                              type="button"
                             >
                               <svg
                                 aria-hidden="true"
-                                class="euiIcon euiIcon--small euiIcon-isLoading euiBadge__icon"
+                                class="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiBadge__icon"
                                 focusable="false"
                                 height="16"
                                 role="img"
@@ -194,52 +195,54 @@ exports[`<AnomalyHeatmapChart /> spec AnomalyHeatmapChart with Sample anomaly da
                 style="min-width: 150px;"
               >
                 <div
-                  class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+                  class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
                 >
                   <div
                     class="euiPopover__anchor"
                   >
-                    <input
-                      type="hidden"
-                      value="severity"
-                    />
-                    <div
-                      class="euiFormControlLayout"
-                    >
+                    <div>
+                      <input
+                        type="hidden"
+                        value="severity"
+                      />
                       <div
-                        class="euiFormControlLayout__childrenWrapper"
+                        class="euiFormControlLayout"
                       >
-                        <span
-                          class="euiScreenReaderOnly"
-                          id="random_html_id"
-                        >
-                          Select an option: By severity, is selected
-                        </span>
-                        <button
-                          aria-haspopup="true"
-                          aria-labelledby="undefined random_html_id"
-                          class="euiSuperSelectControl"
-                          type="button"
-                        >
-                          By severity
-                        </button>
                         <div
-                          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                          class="euiFormControlLayout__childrenWrapper"
                         >
                           <span
-                            class="euiFormControlLayoutCustomIcon"
+                            class="euiScreenReaderOnly"
+                            id="random_html_id"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                              focusable="false"
-                              height="16"
-                              role="img"
-                              viewBox="0 0 16 16"
-                              width="16"
-                              xmlns="http://www.w3.org/2000/svg"
-                            />
+                            Select an option: By severity, is selected
                           </span>
+                          <button
+                            aria-haspopup="true"
+                            aria-labelledby="undefined random_html_id"
+                            class="euiSuperSelectControl"
+                            type="button"
+                          >
+                            By severity
+                          </button>
+                          <div
+                            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                          >
+                            <span
+                              class="euiFormControlLayoutCustomIcon"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                focusable="false"
+                                height="16"
+                                role="img"
+                                viewBox="0 0 16 16"
+                                width="16"
+                                xmlns="http://www.w3.org/2000/svg"
+                              />
+                            </span>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -422,7 +425,7 @@ exports[`<AnomalyHeatmapChart /> spec AnomalyHeatmapChart with anomaly summaries
         >
           <svg
             aria-hidden="true"
-            class="euiIcon euiIcon--medium euiCallOutHeader__icon"
+            class="euiIcon euiIcon--medium euiIcon--inherit euiCallOutHeader__icon"
             focusable="false"
             height="16"
             role="img"
@@ -588,10 +591,11 @@ exports[`<AnomalyHeatmapChart /> spec AnomalyHeatmapChart with anomaly summaries
                               aria-label="Remove Top 10 from selection in this group"
                               class="euiBadge__iconButton"
                               title="Remove Top 10 from selection in this group"
+                              type="button"
                             >
                               <svg
                                 aria-hidden="true"
-                                class="euiIcon euiIcon--small euiBadge__icon"
+                                class="euiIcon euiIcon--small euiIcon--inherit euiBadge__icon"
                                 focusable="false"
                                 height="16"
                                 role="img"
@@ -679,57 +683,59 @@ exports[`<AnomalyHeatmapChart /> spec AnomalyHeatmapChart with anomaly summaries
                 style="min-width: 150px;"
               >
                 <div
-                  class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+                  class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
                 >
                   <div
                     class="euiPopover__anchor"
                   >
-                    <input
-                      type="hidden"
-                      value="severity"
-                    />
-                    <div
-                      class="euiFormControlLayout"
-                    >
+                    <div>
+                      <input
+                        type="hidden"
+                        value="severity"
+                      />
                       <div
-                        class="euiFormControlLayout__childrenWrapper"
+                        class="euiFormControlLayout"
                       >
-                        <span
-                          class="euiScreenReaderOnly"
-                          id="random_html_id"
-                        >
-                          Select an option: By severity, is selected
-                        </span>
-                        <button
-                          aria-haspopup="true"
-                          aria-labelledby="undefined random_html_id"
-                          class="euiSuperSelectControl"
-                          type="button"
-                        >
-                          By severity
-                        </button>
                         <div
-                          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                          class="euiFormControlLayout__childrenWrapper"
                         >
                           <span
-                            class="euiFormControlLayoutCustomIcon"
+                            class="euiScreenReaderOnly"
+                            id="random_html_id"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                              focusable="false"
-                              height="16"
-                              role="img"
-                              viewBox="0 0 16 16"
-                              width="16"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
-                                fill-rule="non-zero"
-                              />
-                            </svg>
+                            Select an option: By severity, is selected
                           </span>
+                          <button
+                            aria-haspopup="true"
+                            aria-labelledby="undefined random_html_id"
+                            class="euiSuperSelectControl"
+                            type="button"
+                          >
+                            By severity
+                          </button>
+                          <div
+                            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                          >
+                            <span
+                              class="euiFormControlLayoutCustomIcon"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                focusable="false"
+                                height="16"
+                                role="img"
+                                viewBox="0 0 16 16"
+                                width="16"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                  fill-rule="non-zero"
+                                />
+                              </svg>
+                            </span>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -916,7 +922,7 @@ exports[`<AnomalyHeatmapChart /> spec AnomalyHeatmapChart with multiple category
         >
           <svg
             aria-hidden="true"
-            class="euiIcon euiIcon--medium euiCallOutHeader__icon"
+            class="euiIcon euiIcon--medium euiIcon--inherit euiCallOutHeader__icon"
             focusable="false"
             height="16"
             role="img"
@@ -1009,10 +1015,11 @@ exports[`<AnomalyHeatmapChart /> spec AnomalyHeatmapChart with multiple category
                               aria-label="Remove test-field-1 from selection in this group"
                               class="euiBadge__iconButton"
                               title="Remove test-field-1 from selection in this group"
+                              type="button"
                             >
                               <svg
                                 aria-hidden="true"
-                                class="euiIcon euiIcon--small euiBadge__icon"
+                                class="euiIcon euiIcon--small euiIcon--inherit euiBadge__icon"
                                 focusable="false"
                                 height="16"
                                 role="img"
@@ -1044,10 +1051,11 @@ exports[`<AnomalyHeatmapChart /> spec AnomalyHeatmapChart with multiple category
                               aria-label="Remove test-field-2 from selection in this group"
                               class="euiBadge__iconButton"
                               title="Remove test-field-2 from selection in this group"
+                              type="button"
                             >
                               <svg
                                 aria-hidden="true"
-                                class="euiIcon euiIcon--small euiBadge__icon"
+                                class="euiIcon euiIcon--small euiIcon--inherit euiBadge__icon"
                                 focusable="false"
                                 height="16"
                                 role="img"
@@ -1168,10 +1176,11 @@ exports[`<AnomalyHeatmapChart /> spec AnomalyHeatmapChart with multiple category
                               aria-label="Remove Top 10 from selection in this group"
                               class="euiBadge__iconButton"
                               title="Remove Top 10 from selection in this group"
+                              type="button"
                             >
                               <svg
                                 aria-hidden="true"
-                                class="euiIcon euiIcon--small euiBadge__icon"
+                                class="euiIcon euiIcon--small euiIcon--inherit euiBadge__icon"
                                 focusable="false"
                                 height="16"
                                 role="img"
@@ -1259,57 +1268,59 @@ exports[`<AnomalyHeatmapChart /> spec AnomalyHeatmapChart with multiple category
                 style="min-width: 150px;"
               >
                 <div
-                  class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+                  class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
                 >
                   <div
                     class="euiPopover__anchor"
                   >
-                    <input
-                      type="hidden"
-                      value="severity"
-                    />
-                    <div
-                      class="euiFormControlLayout"
-                    >
+                    <div>
+                      <input
+                        type="hidden"
+                        value="severity"
+                      />
                       <div
-                        class="euiFormControlLayout__childrenWrapper"
+                        class="euiFormControlLayout"
                       >
-                        <span
-                          class="euiScreenReaderOnly"
-                          id="random_html_id"
-                        >
-                          Select an option: By severity, is selected
-                        </span>
-                        <button
-                          aria-haspopup="true"
-                          aria-labelledby="undefined random_html_id"
-                          class="euiSuperSelectControl"
-                          type="button"
-                        >
-                          By severity
-                        </button>
                         <div
-                          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                          class="euiFormControlLayout__childrenWrapper"
                         >
                           <span
-                            class="euiFormControlLayoutCustomIcon"
+                            class="euiScreenReaderOnly"
+                            id="random_html_id"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                              focusable="false"
-                              height="16"
-                              role="img"
-                              viewBox="0 0 16 16"
-                              width="16"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
-                                fill-rule="non-zero"
-                              />
-                            </svg>
+                            Select an option: By severity, is selected
                           </span>
+                          <button
+                            aria-haspopup="true"
+                            aria-labelledby="undefined random_html_id"
+                            class="euiSuperSelectControl"
+                            type="button"
+                          >
+                            By severity
+                          </button>
+                          <div
+                            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                          >
+                            <span
+                              class="euiFormControlLayoutCustomIcon"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                focusable="false"
+                                height="16"
+                                role="img"
+                                viewBox="0 0 16 16"
+                                width="16"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                  fill-rule="non-zero"
+                                />
+                              </svg>
+                            </span>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -1496,7 +1507,7 @@ exports[`<AnomalyHeatmapChart /> spec AnomalyHeatmapChart with one category fiel
         >
           <svg
             aria-hidden="true"
-            class="euiIcon euiIcon--medium euiCallOutHeader__icon"
+            class="euiIcon euiIcon--medium euiIcon--inherit euiCallOutHeader__icon"
             focusable="false"
             height="16"
             role="img"
@@ -1589,10 +1600,11 @@ exports[`<AnomalyHeatmapChart /> spec AnomalyHeatmapChart with one category fiel
                               aria-label="Remove test-field from selection in this group"
                               class="euiBadge__iconButton"
                               title="Remove test-field from selection in this group"
+                              type="button"
                             >
                               <svg
                                 aria-hidden="true"
-                                class="euiIcon euiIcon--small euiBadge__icon"
+                                class="euiIcon euiIcon--small euiIcon--inherit euiBadge__icon"
                                 focusable="false"
                                 height="16"
                                 role="img"
@@ -1713,10 +1725,11 @@ exports[`<AnomalyHeatmapChart /> spec AnomalyHeatmapChart with one category fiel
                               aria-label="Remove Top 10 from selection in this group"
                               class="euiBadge__iconButton"
                               title="Remove Top 10 from selection in this group"
+                              type="button"
                             >
                               <svg
                                 aria-hidden="true"
-                                class="euiIcon euiIcon--small euiBadge__icon"
+                                class="euiIcon euiIcon--small euiIcon--inherit euiBadge__icon"
                                 focusable="false"
                                 height="16"
                                 role="img"
@@ -1804,57 +1817,59 @@ exports[`<AnomalyHeatmapChart /> spec AnomalyHeatmapChart with one category fiel
                 style="min-width: 150px;"
               >
                 <div
-                  class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+                  class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
                 >
                   <div
                     class="euiPopover__anchor"
                   >
-                    <input
-                      type="hidden"
-                      value="severity"
-                    />
-                    <div
-                      class="euiFormControlLayout"
-                    >
+                    <div>
+                      <input
+                        type="hidden"
+                        value="severity"
+                      />
                       <div
-                        class="euiFormControlLayout__childrenWrapper"
+                        class="euiFormControlLayout"
                       >
-                        <span
-                          class="euiScreenReaderOnly"
-                          id="random_html_id"
-                        >
-                          Select an option: By severity, is selected
-                        </span>
-                        <button
-                          aria-haspopup="true"
-                          aria-labelledby="undefined random_html_id"
-                          class="euiSuperSelectControl"
-                          type="button"
-                        >
-                          By severity
-                        </button>
                         <div
-                          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                          class="euiFormControlLayout__childrenWrapper"
                         >
                           <span
-                            class="euiFormControlLayoutCustomIcon"
+                            class="euiScreenReaderOnly"
+                            id="random_html_id"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                              focusable="false"
-                              height="16"
-                              role="img"
-                              viewBox="0 0 16 16"
-                              width="16"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
-                                fill-rule="non-zero"
-                              />
-                            </svg>
+                            Select an option: By severity, is selected
                           </span>
+                          <button
+                            aria-haspopup="true"
+                            aria-labelledby="undefined random_html_id"
+                            class="euiSuperSelectControl"
+                            type="button"
+                          >
+                            By severity
+                          </button>
+                          <div
+                            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                          >
+                            <span
+                              class="euiFormControlLayoutCustomIcon"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                focusable="false"
+                                height="16"
+                                role="img"
+                                viewBox="0 0 16 16"
+                                width="16"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                  fill-rule="non-zero"
+                                />
+                              </svg>
+                            </span>
+                          </div>
                         </div>
                       </div>
                     </div>
diff --git a/public/pages/ConfigureModel/components/AggregationSelector/__tests__/__snapshots__/AggregationSelector.test.tsx.snap b/public/pages/ConfigureModel/components/AggregationSelector/__tests__/__snapshots__/AggregationSelector.test.tsx.snap
index f52b8f9c..b82301bc 100644
--- a/public/pages/ConfigureModel/components/AggregationSelector/__tests__/__snapshots__/AggregationSelector.test.tsx.snap
+++ b/public/pages/ConfigureModel/components/AggregationSelector/__tests__/__snapshots__/AggregationSelector.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`<AggregationSelector /> spec Empty results renders component with aggre
           class="euiFormControlLayout__childrenWrapper"
         >
           <select
-            aria-describedby="random_html_id-help"
+            aria-describedby="random_html_id-help-0"
             class="euiSelect"
             data-test-subj="aggregationType"
             id="random_html_id"
@@ -81,7 +81,7 @@ exports[`<AggregationSelector /> spec Empty results renders component with aggre
       </div>
       <div
         class="euiFormHelpText euiFormRow__text"
-        id="random_html_id-help"
+        id="random_html_id-help-0"
       >
         The aggregation method determines what constitutes an anomaly. For example, if you choose min(), the detector focuses on finding anomalies based on the minimum values of your feature.
       </div>
diff --git a/public/pages/ConfigureModel/components/CategoryField/__tests__/__snapshots__/CategoryField.test.tsx.snap b/public/pages/ConfigureModel/components/CategoryField/__tests__/__snapshots__/CategoryField.test.tsx.snap
index 39031bf0..a1117607 100644
--- a/public/pages/ConfigureModel/components/CategoryField/__tests__/__snapshots__/CategoryField.test.tsx.snap
+++ b/public/pages/ConfigureModel/components/CategoryField/__tests__/__snapshots__/CategoryField.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`<CategoryField /> spec renders the component when disabled 1`] = `
     action="#"
   >
     <div
-      class="euiPanel euiPanel--paddingMedium"
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       style="padding: 20px;"
     >
       <div
@@ -61,6 +61,22 @@ exports[`<CategoryField /> spec renders the component when disabled 1`] = `
                     width="16"
                     xmlns="http://www.w3.org/2000/svg"
                   />
+                  <svg
+                    aria-hidden="true"
+                    aria-label="External link"
+                    class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                    focusable="false"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  />
+                  <span
+                    class="euiScreenReaderOnly"
+                  >
+                    (opens in a new tab or window)
+                  </span>
                 </a>
               </div>
             </div>
@@ -124,7 +140,7 @@ exports[`<CategoryField /> spec renders the component when enabled 1`] = `
     action="#"
   >
     <div
-      class="euiPanel euiPanel--paddingMedium"
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       style="padding: 20px;"
     >
       <div
@@ -183,6 +199,25 @@ exports[`<CategoryField /> spec renders the component when enabled 1`] = `
                       d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
                     />
                   </svg>
+                  <svg
+                    aria-label="External link"
+                    class="euiIcon euiIcon--small euiLink__externalIcon"
+                    focusable="false"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
+                    />
+                  </svg>
+                  <span
+                    class="euiScreenReaderOnly"
+                  >
+                    (opens in a new tab or window)
+                  </span>
                 </a>
               </div>
             </div>
@@ -245,7 +280,7 @@ exports[`<CategoryField /> spec renders the component when enabled 1`] = `
                 >
                   <svg
                     aria-hidden="true"
-                    class="euiIcon euiIcon--medium euiIcon-isLoading euiCallOutHeader__icon"
+                    class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiCallOutHeader__icon"
                     focusable="false"
                     height="16"
                     role="img"
@@ -283,7 +318,7 @@ exports[`<CategoryField /> spec renders the component when enabled 1`] = `
                   class="euiFormRow__fieldWrapper"
                 >
                   <div
-                    aria-describedby="random_html_id-help"
+                    aria-describedby="random_html_id-help-0"
                     aria-expanded="false"
                     aria-haspopup="listbox"
                     class="euiComboBox"
@@ -349,7 +384,7 @@ exports[`<CategoryField /> spec renders the component when enabled 1`] = `
                   </div>
                   <div
                     class="euiFormHelpText euiFormRow__text"
-                    id="random_html_id-help"
+                    id="random_html_id-help-0"
                   >
                     You can only apply the categorical fields to the 'ip' and 'keyword' OpenSearch data types.
                   </div>
diff --git a/public/pages/ConfigureModel/components/CustomAggregation/__tests__/__snapshots__/CustomAggregation.test.tsx.snap b/public/pages/ConfigureModel/components/CustomAggregation/__tests__/__snapshots__/CustomAggregation.test.tsx.snap
index c85a07d9..9b024565 100644
--- a/public/pages/ConfigureModel/components/CustomAggregation/__tests__/__snapshots__/CustomAggregation.test.tsx.snap
+++ b/public/pages/ConfigureModel/components/CustomAggregation/__tests__/__snapshots__/CustomAggregation.test.tsx.snap
@@ -25,12 +25,10 @@ exports[`<CustomAggregation /> spec renders the component 1`] = `
         data-test-subj="codeEditorContainer"
         style="width: 100%; height: 300px;"
       >
-        <div
+        <button
           class="euiCodeEditorKeyboardHint"
           data-test-subj="codeEditorHint"
           id="random_html_id"
-          role="button"
-          tabindex="0"
         >
           <p
             class="euiText"
@@ -42,14 +40,14 @@ exports[`<CustomAggregation /> spec renders the component 1`] = `
           >
             When you're done, press Escape to stop editing.
           </p>
-        </div>
+        </button>
         <div
           class=" ace_editor ace-tm"
           id="featureList.1.aggregationQuery"
           style="width: 100%; height: 300px;"
         >
           <textarea
-            aria-describedby="random_html_id-help"
+            aria-describedby="random_html_id-help-0"
             autocapitalize="off"
             autocorrect="off"
             class="ace_text-input"
@@ -137,7 +135,7 @@ exports[`<CustomAggregation /> spec renders the component 1`] = `
       </div>
       <div
         class="euiFormHelpText euiFormRow__text"
-        id="random_html_id-help"
+        id="random_html_id-help-0"
       >
         Custom expression uses the OpenSearch query DSL.
       </div>
diff --git a/public/pages/ConfigureModel/containers/__tests__/ConfigureModel.test.tsx b/public/pages/ConfigureModel/containers/__tests__/ConfigureModel.test.tsx
index b4465173..9dbb0c03 100644
--- a/public/pages/ConfigureModel/containers/__tests__/ConfigureModel.test.tsx
+++ b/public/pages/ConfigureModel/containers/__tests__/ConfigureModel.test.tsx
@@ -17,7 +17,7 @@ import {
   Route,
   Switch,
 } from 'react-router-dom';
-import { render, fireEvent, wait } from '@testing-library/react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
 import { ConfigureModel } from '../ConfigureModel';
 import configureStore from '../../../../redux/configureStore';
 import { httpClientMock, coreServicesMock } from '../../../../../test/mocks';
@@ -64,7 +64,7 @@ describe('<ConfigureModel /> spec', () => {
     test('validate all required fields', async () => {
       const { getByText } = renderWithRouter();
       fireEvent.click(getByText('Next'));
-      await wait();
+      await waitFor(()=>{});
       getByText('You must enter a feature name');
       getByText('You must select a field');
     });
diff --git a/public/pages/ConfigureModel/containers/__tests__/__snapshots__/ConfigureModel.test.tsx.snap b/public/pages/ConfigureModel/containers/__tests__/__snapshots__/ConfigureModel.test.tsx.snap
index e837b26a..fdf2f51c 100644
--- a/public/pages/ConfigureModel/containers/__tests__/__snapshots__/ConfigureModel.test.tsx.snap
+++ b/public/pages/ConfigureModel/containers/__tests__/__snapshots__/ConfigureModel.test.tsx.snap
@@ -2,14 +2,14 @@
 
 exports[`<ConfigureModel /> spec creating model configuration renders the component 1`] = `
 <div
-  class="euiPage"
+  class="euiPage euiPage--paddingMedium euiPage--grow"
   style="margin-top: -24px;"
 >
-  <main
-    class="euiPageBody"
+  <div
+    class="euiPageBody euiPageBody--borderRadiusNone"
   >
-    <div
-      class="euiPageHeader euiPageHeader--responsive"
+    <header
+      class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
     >
       <div
         class="euiPageHeaderSection"
@@ -46,15 +46,31 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
               width="16"
               xmlns="http://www.w3.org/2000/svg"
             />
+            <svg
+              aria-hidden="true"
+              aria-label="External link"
+              class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+              focusable="false"
+              height="16"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            />
+            <span
+              class="euiScreenReaderOnly"
+            >
+              (opens in a new tab or window)
+            </span>
           </a>
         </div>
         <div
           class="euiSpacer euiSpacer--s"
         />
       </div>
-    </div>
+    </header>
     <div
-      class="euiPanel euiPanel--paddingMedium"
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       style="padding: 20px;"
     >
       <div
@@ -100,6 +116,22 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
                     width="16"
                     xmlns="http://www.w3.org/2000/svg"
                   />
+                  <svg
+                    aria-hidden="true"
+                    aria-label="External link"
+                    class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                    focusable="false"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  />
+                  <span
+                    class="euiScreenReaderOnly"
+                  >
+                    (opens in a new tab or window)
+                  </span>
                 </a>
               </div>
             </div>
@@ -197,8 +229,11 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
                 </div>
               </div>
               <div
+                aria-labelledby="random_html_id"
                 class="euiAccordion__childWrapper"
                 id="featureList.0"
+                role="region"
+                tabindex="-1"
               >
                 <div>
                   <div
@@ -229,7 +264,7 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
                             class="euiFormControlLayout__childrenWrapper"
                           >
                             <input
-                              aria-describedby="random_html_id-help"
+                              aria-describedby="random_html_id-help-0"
                               class="euiFieldText"
                               data-test-subj="featureNameTextInput-0"
                               id="random_html_id"
@@ -242,7 +277,7 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
                         </div>
                         <div
                           class="euiFormHelpText euiFormRow__text"
-                          id="random_html_id-help"
+                          id="random_html_id-help-0"
                         >
                           Enter a descriptive name. The name must be unique within this detector. Feature name must contain 1-64 characters. Valid characters are a-z, A-Z, 0-9, -(hyphen) and _(underscore).
                         </div>
@@ -376,7 +411,7 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
                             class="euiFormControlLayout__childrenWrapper"
                           >
                             <select
-                              aria-describedby="random_html_id-help"
+                              aria-describedby="random_html_id-help-0"
                               class="euiSelect"
                               data-test-subj="aggregationType"
                               id="random_html_id"
@@ -430,7 +465,7 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
                         </div>
                         <div
                           class="euiFormHelpText euiFormRow__text"
-                          id="random_html_id-help"
+                          id="random_html_id-help-0"
                         >
                           The aggregation method determines what constitutes an anomaly. For example, if you choose min(), the detector focuses on finding anomalies based on the minimum values of your feature.
                         </div>
@@ -568,7 +603,7 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
       class="euiSpacer euiSpacer--l"
     />
     <div
-      class="euiPanel euiPanel--paddingMedium"
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       style="padding: 20px;"
     >
       <div
@@ -623,6 +658,22 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
                     width="16"
                     xmlns="http://www.w3.org/2000/svg"
                   />
+                  <svg
+                    aria-hidden="true"
+                    aria-label="External link"
+                    class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                    focusable="false"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  />
+                  <span
+                    class="euiScreenReaderOnly"
+                  >
+                    (opens in a new tab or window)
+                  </span>
                 </a>
               </div>
             </div>
@@ -656,7 +707,7 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
             >
               <svg
                 aria-hidden="true"
-                class="euiIcon euiIcon--medium euiIcon-isLoading euiCallOutHeader__icon"
+                class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiCallOutHeader__icon"
                 focusable="false"
                 height="16"
                 role="img"
@@ -708,7 +759,7 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
       class="euiSpacer euiSpacer--l"
     />
     <div
-      class="euiPanel euiPanel--paddingMedium"
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       style="padding: 20px;"
     >
       <div
@@ -774,7 +825,7 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
       class="euiSpacer euiSpacer--l"
     />
     <div
-      class="euiPanel euiPanel--paddingMedium"
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       style="padding: 20px;"
     >
       <div
@@ -826,7 +877,7 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
             >
               <svg
                 aria-hidden="true"
-                class="euiIcon euiIcon--medium euiIcon-isLoading euiCallOutHeader__icon"
+                class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiCallOutHeader__icon"
                 focusable="false"
                 height="16"
                 role="img"
@@ -844,58 +895,78 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
               class="euiText euiText--small"
             >
               <div
-                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                class="euiTextColor euiTextColor--default"
               >
                 <div
-                  class="euiFlexItem"
+                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
                 >
                   <div
-                    class="euiText euiText--medium"
+                    class="euiFlexItem"
                   >
-                    You can preview how your anomalies may look like from sample feature output and adjust the feature settings as needed.
-                     
-                    <a
-                      class="euiLink euiLink--primary"
-                      href="https://opensearch.org/docs/monitoring-plugins/ad"
-                      rel="noopener noreferrer"
-                      target="_blank"
+                    <div
+                      class="euiText euiText--medium"
                     >
-                      Learn more 
-                      <svg
-                        aria-hidden="true"
-                        class="euiIcon euiIcon--small euiIcon-isLoading"
-                        focusable="false"
-                        height="16"
-                        role="img"
-                        viewBox="0 0 16 16"
-                        width="16"
-                        xmlns="http://www.w3.org/2000/svg"
-                      />
-                    </a>
+                      You can preview how your anomalies may look like from sample feature output and adjust the feature settings as needed.
+                       
+                      <a
+                        class="euiLink euiLink--primary"
+                        href="https://opensearch.org/docs/monitoring-plugins/ad"
+                        rel="noopener noreferrer"
+                        target="_blank"
+                      >
+                        Learn more 
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--small euiIcon-isLoading"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        />
+                        <svg
+                          aria-hidden="true"
+                          aria-label="External link"
+                          class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        />
+                        <span
+                          class="euiScreenReaderOnly"
+                        >
+                          (opens in a new tab or window)
+                        </span>
+                      </a>
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div
-                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-              >
                 <div
-                  class="euiFlexItem euiFlexItem--flexGrowZero"
+                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
                 >
-                  <button
-                    class="euiButton euiButton--primary"
-                    data-test-subj="previewDetector"
-                    type="button"
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
-                    <span
-                      class="euiButtonContent euiButton__content"
+                    <button
+                      class="euiButton euiButton--primary"
+                      data-test-subj="previewDetector"
+                      type="button"
                     >
                       <span
-                        class="euiButton__text"
+                        class="euiButtonContent euiButton__content"
                       >
-                        Preview anomalies
+                        <span
+                          class="euiButton__text"
+                        >
+                          Preview anomalies
+                        </span>
                       </span>
-                    </span>
-                  </button>
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>
@@ -906,20 +977,20 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
         </div>
       </div>
     </div>
-  </main>
+  </div>
 </div>
 `;
 
 exports[`<ConfigureModel /> spec editing model configuration renders the component 1`] = `
 <div
-  class="euiPage"
+  class="euiPage euiPage--paddingMedium euiPage--grow"
   style="margin-top: -24px;"
 >
-  <main
-    class="euiPageBody"
+  <div
+    class="euiPageBody euiPageBody--borderRadiusNone"
   >
-    <div
-      class="euiPageHeader euiPageHeader--responsive"
+    <header
+      class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
     >
       <div
         class="euiPageHeaderSection"
@@ -960,15 +1031,34 @@ exports[`<ConfigureModel /> spec editing model configuration renders the compone
                 d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
               />
             </svg>
+            <svg
+              aria-label="External link"
+              class="euiIcon euiIcon--small euiLink__externalIcon"
+              focusable="false"
+              height="16"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
+              />
+            </svg>
+            <span
+              class="euiScreenReaderOnly"
+            >
+              (opens in a new tab or window)
+            </span>
           </a>
         </div>
         <div
           class="euiSpacer euiSpacer--s"
         />
       </div>
-    </div>
+    </header>
     <div
-      class="euiPanel euiPanel--paddingMedium"
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       style="padding: 20px;"
     >
       <div
@@ -1018,6 +1108,25 @@ exports[`<ConfigureModel /> spec editing model configuration renders the compone
                       d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
                     />
                   </svg>
+                  <svg
+                    aria-label="External link"
+                    class="euiIcon euiIcon--small euiLink__externalIcon"
+                    focusable="false"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
+                    />
+                  </svg>
+                  <span
+                    class="euiScreenReaderOnly"
+                  >
+                    (opens in a new tab or window)
+                  </span>
                 </a>
               </div>
             </div>
@@ -1120,8 +1229,11 @@ exports[`<ConfigureModel /> spec editing model configuration renders the compone
                 </div>
               </div>
               <div
+                aria-labelledby="random_html_id"
                 class="euiAccordion__childWrapper"
                 id="featureList.0"
+                role="region"
+                tabindex="-1"
               >
                 <div>
                   <div
@@ -1152,7 +1264,7 @@ exports[`<ConfigureModel /> spec editing model configuration renders the compone
                             class="euiFormControlLayout__childrenWrapper"
                           >
                             <input
-                              aria-describedby="random_html_id-help"
+                              aria-describedby="random_html_id-help-0"
                               class="euiFieldText"
                               data-test-subj="featureNameTextInput-0"
                               id="random_html_id"
@@ -1165,7 +1277,7 @@ exports[`<ConfigureModel /> spec editing model configuration renders the compone
                         </div>
                         <div
                           class="euiFormHelpText euiFormRow__text"
-                          id="random_html_id-help"
+                          id="random_html_id-help-0"
                         >
                           Enter a descriptive name. The name must be unique within this detector. Feature name must contain 1-64 characters. Valid characters are a-z, A-Z, 0-9, -(hyphen) and _(underscore).
                         </div>
@@ -1304,7 +1416,7 @@ exports[`<ConfigureModel /> spec editing model configuration renders the compone
                             class="euiFormControlLayout__childrenWrapper"
                           >
                             <select
-                              aria-describedby="random_html_id-help"
+                              aria-describedby="random_html_id-help-0"
                               class="euiSelect"
                               data-test-subj="aggregationType"
                               id="random_html_id"
@@ -1363,7 +1475,7 @@ exports[`<ConfigureModel /> spec editing model configuration renders the compone
                         </div>
                         <div
                           class="euiFormHelpText euiFormRow__text"
-                          id="random_html_id-help"
+                          id="random_html_id-help-0"
                         >
                           The aggregation method determines what constitutes an anomaly. For example, if you choose min(), the detector focuses on finding anomalies based on the minimum values of your feature.
                         </div>
@@ -1506,7 +1618,7 @@ exports[`<ConfigureModel /> spec editing model configuration renders the compone
       class="euiSpacer euiSpacer--l"
     />
     <div
-      class="euiPanel euiPanel--paddingMedium"
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       style="padding: 20px;"
     >
       <div
@@ -1565,6 +1677,25 @@ exports[`<ConfigureModel /> spec editing model configuration renders the compone
                       d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
                     />
                   </svg>
+                  <svg
+                    aria-label="External link"
+                    class="euiIcon euiIcon--small euiLink__externalIcon"
+                    focusable="false"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
+                    />
+                  </svg>
+                  <span
+                    class="euiScreenReaderOnly"
+                  >
+                    (opens in a new tab or window)
+                  </span>
                 </a>
               </div>
             </div>
@@ -1598,7 +1729,7 @@ exports[`<ConfigureModel /> spec editing model configuration renders the compone
             >
               <svg
                 aria-hidden="true"
-                class="euiIcon euiIcon--medium euiCallOutHeader__icon"
+                class="euiIcon euiIcon--medium euiIcon--inherit euiCallOutHeader__icon"
                 focusable="false"
                 height="16"
                 role="img"
@@ -1630,7 +1761,7 @@ exports[`<ConfigureModel /> spec editing model configuration renders the compone
             >
               <svg
                 aria-hidden="true"
-                class="euiIcon euiIcon--medium euiIcon-isLoading euiCallOutHeader__icon"
+                class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiCallOutHeader__icon"
                 focusable="false"
                 height="16"
                 role="img"
@@ -1682,7 +1813,7 @@ exports[`<ConfigureModel /> spec editing model configuration renders the compone
       class="euiSpacer euiSpacer--l"
     />
     <div
-      class="euiPanel euiPanel--paddingMedium"
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       style="padding: 20px;"
     >
       <div
@@ -1744,6 +1875,6 @@ exports[`<ConfigureModel /> spec editing model configuration renders the compone
         </div>
       </div>
     </div>
-  </main>
+  </div>
 </div>
 `;
diff --git a/public/pages/Dashboard/Components/AnomaliesLiveChart.tsx b/public/pages/Dashboard/Components/AnomaliesLiveChart.tsx
index 282235f5..b395256b 100644
--- a/public/pages/Dashboard/Components/AnomaliesLiveChart.tsx
+++ b/public/pages/Dashboard/Components/AnomaliesLiveChart.tsx
@@ -38,7 +38,7 @@ import {
   niceTimeFormatter,
   ScaleType,
   LineAnnotation,
-  AnnotationDomainTypes,
+  AnnotationDomainType,
   LineAnnotationDatum,
 } from '@elastic/charts';
 import { EuiText, EuiTitle } from '@elastic/eui';
@@ -351,7 +351,8 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
                     }}
                   />
                   <LineAnnotation
-                    domainType={AnnotationDomainTypes.XDomain}
+                    id={'lineAnnotation'}
+                    domainType={AnnotationDomainType.XDomain}
                     dataValues={annotations}
                     style={TIME_NOW_LINE_STYLE}
                     marker={'Now'}
diff --git a/public/pages/Dashboard/Components/EmptyDashboard/__tests__/__snapshots__/EmptyDashboard.test.tsx.snap b/public/pages/Dashboard/Components/EmptyDashboard/__tests__/__snapshots__/EmptyDashboard.test.tsx.snap
index ab71ba64..57fb8f90 100644
--- a/public/pages/Dashboard/Components/EmptyDashboard/__tests__/__snapshots__/EmptyDashboard.test.tsx.snap
+++ b/public/pages/Dashboard/Components/EmptyDashboard/__tests__/__snapshots__/EmptyDashboard.test.tsx.snap
@@ -5,14 +5,14 @@ exports[`<EmptyDetector /> spec Empty results renders component with empty messa
   class="euiEmptyPrompt"
   data-test-subj="emptyDashboardHeader"
 >
+  <h2
+    class="euiTitle euiTitle--medium"
+  >
+    You have no detectors
+  </h2>
   <span
     class="euiTextColor euiTextColor--subdued"
   >
-    <h2
-      class="euiTitle euiTitle--medium"
-    >
-      You have no detectors
-    </h2>
     <div
       class="euiSpacer euiSpacer--m"
     />
@@ -45,6 +45,22 @@ exports[`<EmptyDetector /> spec Empty results renders component with empty messa
             width="16"
             xmlns="http://www.w3.org/2000/svg"
           />
+          <svg
+            aria-hidden="true"
+            aria-label="External link"
+            class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+            focusable="false"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          />
+          <span
+            class="euiScreenReaderOnly"
+          >
+            (opens in a new tab or window)
+          </span>
         </a>
          
       </p>
@@ -53,9 +69,6 @@ exports[`<EmptyDetector /> spec Empty results renders component with empty messa
   <div
     class="euiSpacer euiSpacer--l"
   />
-  <div
-    class="euiSpacer euiSpacer--s"
-  />
   <div
     class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
   >
diff --git a/public/pages/DefineDetector/components/Datasource/__tests__/__snapshots__/IndexOption.test.tsx.snap b/public/pages/DefineDetector/components/Datasource/__tests__/__snapshots__/IndexOption.test.tsx.snap
index 5bebbf00..da9f3b91 100644
--- a/public/pages/DefineDetector/components/Datasource/__tests__/__snapshots__/IndexOption.test.tsx.snap
+++ b/public/pages/DefineDetector/components/Datasource/__tests__/__snapshots__/IndexOption.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<IndexOptions /> spec renders the component 1`] = `
 <div
-  class="euiHealth"
+  class="euiHealth euiHealth--textSizeS"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
@@ -12,11 +12,11 @@ exports[`<IndexOptions /> spec renders the component 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="euiIcon euiIcon--medium euiIcon-isLoading"
+        class="euiIcon euiIcon--medium euiIcon--customColor euiIcon-isLoading"
         focusable="false"
         height="16"
         role="img"
-        style="fill: #7DE2D1;"
+        style="color: rgb(125, 226, 209);"
         viewBox="0 0 16 16"
         width="16"
         xmlns="http://www.w3.org/2000/svg"
@@ -39,7 +39,7 @@ exports[`<IndexOptions /> spec renders the component 1`] = `
 
 exports[`<IndexOptions /> spec renders with highlight 1`] = `
 <div
-  class="euiHealth"
+  class="euiHealth euiHealth--textSizeS"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
@@ -49,11 +49,11 @@ exports[`<IndexOptions /> spec renders with highlight 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="euiIcon euiIcon--medium"
+        class="euiIcon euiIcon--medium euiIcon--customColor"
         focusable="false"
         height="16"
         role="img"
-        style="fill: #7DE2D1;"
+        style="color: rgb(125, 226, 209);"
         viewBox="0 0 16 16"
         width="16"
         xmlns="http://www.w3.org/2000/svg"
diff --git a/public/pages/DefineDetector/components/NameAndDescription/__tests__/__snapshots__/NameAndDescription.test.tsx.snap b/public/pages/DefineDetector/components/NameAndDescription/__tests__/__snapshots__/NameAndDescription.test.tsx.snap
index 50e73132..37b1ef77 100644
--- a/public/pages/DefineDetector/components/NameAndDescription/__tests__/__snapshots__/NameAndDescription.test.tsx.snap
+++ b/public/pages/DefineDetector/components/NameAndDescription/__tests__/__snapshots__/NameAndDescription.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<NameAndDescription /> spec renders the component 1`] = `
 <div>
   <div
-    class="euiPanel euiPanel--paddingMedium"
+    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
     style="padding: 20px;"
   >
     <div
@@ -87,7 +87,7 @@ exports[`<NameAndDescription /> spec renders the component 1`] = `
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <input
-                  aria-describedby="random_html_id-help"
+                  aria-describedby="random_html_id-help-0"
                   class="euiFieldText"
                   data-test-subj="detectorNameTextInput"
                   id="random_html_id"
@@ -100,7 +100,7 @@ exports[`<NameAndDescription /> spec renders the component 1`] = `
             </div>
             <div
               class="euiFormHelpText euiFormRow__text"
-              id="random_html_id-help"
+              id="random_html_id-help-0"
             >
               Detector name must contain 1-64 characters. Valid characters are
                 a-z, A-Z, 0-9, -(hyphen), _(underscore) and .(period).
diff --git a/public/pages/DefineDetector/components/Settings/__tests__/__snapshots__/Settings.test.tsx.snap b/public/pages/DefineDetector/components/Settings/__tests__/__snapshots__/Settings.test.tsx.snap
index 44619db2..64ef2edb 100644
--- a/public/pages/DefineDetector/components/Settings/__tests__/__snapshots__/Settings.test.tsx.snap
+++ b/public/pages/DefineDetector/components/Settings/__tests__/__snapshots__/Settings.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Settings /> spec renders the component 1`] = `
 <div>
   <div
-    class="euiPanel euiPanel--paddingMedium"
+    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
     style="padding: 20px;"
   >
     <div
@@ -99,6 +99,22 @@ exports[`<Settings /> spec renders the component 1`] = `
                           width="16"
                           xmlns="http://www.w3.org/2000/svg"
                         />
+                        <svg
+                          aria-hidden="true"
+                          aria-label="External link"
+                          class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        />
+                        <span
+                          class="euiScreenReaderOnly"
+                        >
+                          (opens in a new tab or window)
+                        </span>
                       </a>
                     </div>
                   </div>
@@ -197,6 +213,22 @@ exports[`<Settings /> spec renders the component 1`] = `
                       width="16"
                       xmlns="http://www.w3.org/2000/svg"
                     />
+                    <svg
+                      aria-hidden="true"
+                      aria-label="External link"
+                      class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                      focusable="false"
+                      height="16"
+                      role="img"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                    <span
+                      class="euiScreenReaderOnly"
+                    >
+                      (opens in a new tab or window)
+                    </span>
                   </a>
                 </div>
               </div>
diff --git a/public/pages/DefineDetector/containers/__tests__/DefineDetector.test.tsx b/public/pages/DefineDetector/containers/__tests__/DefineDetector.test.tsx
index 7a7854d0..cb6e5e59 100644
--- a/public/pages/DefineDetector/containers/__tests__/DefineDetector.test.tsx
+++ b/public/pages/DefineDetector/containers/__tests__/DefineDetector.test.tsx
@@ -17,7 +17,7 @@ import {
   Route,
   Switch,
 } from 'react-router-dom';
-import { render, fireEvent, wait } from '@testing-library/react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
 import { DefineDetector } from '../DefineDetector';
 import configureStore from '../../../../redux/configureStore';
 import { httpClientMock, coreServicesMock } from '../../../../../test/mocks';
@@ -71,7 +71,7 @@ describe('<DefineDetector /> spec', () => {
       });
       const { getByText } = renderWithRouter();
       fireEvent.click(getByText('Next'));
-      await wait();
+      await waitFor(()=>{});
       getByText('Detector name cannot be empty');
       getByText('Must specify an index');
       getByText('Required');
diff --git a/public/pages/DefineDetector/containers/__tests__/__snapshots__/DefineDetector.test.tsx.snap b/public/pages/DefineDetector/containers/__tests__/__snapshots__/DefineDetector.test.tsx.snap
index 6357634e..8e3dfe27 100644
--- a/public/pages/DefineDetector/containers/__tests__/__snapshots__/DefineDetector.test.tsx.snap
+++ b/public/pages/DefineDetector/containers/__tests__/__snapshots__/DefineDetector.test.tsx.snap
@@ -2,14 +2,14 @@
 
 exports[`<DefineDetector /> spec creating detector definition renders the component 1`] = `
 <div
-  class="euiPage"
+  class="euiPage euiPage--paddingMedium euiPage--grow"
   style="margin-top: -24px;"
 >
-  <main
-    class="euiPageBody"
+  <div
+    class="euiPageBody euiPageBody--borderRadiusNone"
   >
-    <div
-      class="euiPageHeader euiPageHeader--responsive"
+    <header
+      class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
     >
       <div
         class="euiPageHeaderSection"
@@ -22,9 +22,9 @@ exports[`<DefineDetector /> spec creating detector definition renders the compon
            
         </h1>
       </div>
-    </div>
+    </header>
     <div
-      class="euiPanel euiPanel--paddingMedium"
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       style="padding: 20px;"
     >
       <div
@@ -108,7 +108,7 @@ exports[`<DefineDetector /> spec creating detector definition renders the compon
                   class="euiFormControlLayout__childrenWrapper"
                 >
                   <input
-                    aria-describedby="random_html_id-help"
+                    aria-describedby="random_html_id-help-0"
                     class="euiFieldText"
                     data-test-subj="detectorNameTextInput"
                     id="random_html_id"
@@ -121,7 +121,7 @@ exports[`<DefineDetector /> spec creating detector definition renders the compon
               </div>
               <div
                 class="euiFormHelpText euiFormRow__text"
-                id="random_html_id-help"
+                id="random_html_id-help-0"
               >
                 Detector name must contain 1-64 characters. Valid characters are
                 a-z, A-Z, 0-9, -(hyphen), _(underscore) and .(period).
@@ -182,7 +182,7 @@ exports[`<DefineDetector /> spec creating detector definition renders the compon
       class="euiSpacer euiSpacer--l"
     />
     <div
-      class="euiPanel euiPanel--paddingMedium"
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       style="padding: 20px;"
     >
       <div
@@ -260,7 +260,7 @@ exports[`<DefineDetector /> spec creating detector definition renders the compon
               class="euiFormRow__fieldWrapper"
             >
               <div
-                aria-describedby="random_html_id-help"
+                aria-describedby="random_html_id-help-0"
                 aria-expanded="false"
                 aria-haspopup="listbox"
                 class="euiComboBox"
@@ -329,7 +329,7 @@ exports[`<DefineDetector /> spec creating detector definition renders the compon
               </div>
               <div
                 class="euiFormHelpText euiFormRow__text"
-                id="random_html_id-help"
+                id="random_html_id-help-0"
               >
                 You can use a wildcard (*) in your index pattern.
               </div>
@@ -421,7 +421,7 @@ exports[`<DefineDetector /> spec creating detector definition renders the compon
       class="euiSpacer euiSpacer--l"
     />
     <div
-      class="euiPanel euiPanel--paddingMedium"
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       style="padding: 20px;"
     >
       <div
@@ -573,7 +573,7 @@ exports[`<DefineDetector /> spec creating detector definition renders the compon
       class="euiSpacer euiSpacer--l"
     />
     <div
-      class="euiPanel euiPanel--paddingMedium"
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       style="padding: 20px;"
     >
       <div
@@ -669,6 +669,22 @@ exports[`<DefineDetector /> spec creating detector definition renders the compon
                             width="16"
                             xmlns="http://www.w3.org/2000/svg"
                           />
+                          <svg
+                            aria-hidden="true"
+                            aria-label="External link"
+                            class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                            focusable="false"
+                            height="16"
+                            role="img"
+                            viewBox="0 0 16 16"
+                            width="16"
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                          <span
+                            class="euiScreenReaderOnly"
+                          >
+                            (opens in a new tab or window)
+                          </span>
                         </a>
                       </div>
                     </div>
@@ -767,6 +783,22 @@ exports[`<DefineDetector /> spec creating detector definition renders the compon
                         width="16"
                         xmlns="http://www.w3.org/2000/svg"
                       />
+                      <svg
+                        aria-hidden="true"
+                        aria-label="External link"
+                        class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      />
+                      <span
+                        class="euiScreenReaderOnly"
+                      >
+                        (opens in a new tab or window)
+                      </span>
                     </a>
                   </div>
                 </div>
@@ -823,7 +855,7 @@ exports[`<DefineDetector /> spec creating detector definition renders the compon
       class="euiSpacer euiSpacer--l"
     />
     <div
-      class="euiPanel euiPanel--paddingMedium"
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       style="padding: 20px;"
     >
       <div
@@ -878,6 +910,22 @@ exports[`<DefineDetector /> spec creating detector definition renders the compon
                     width="16"
                     xmlns="http://www.w3.org/2000/svg"
                   />
+                  <svg
+                    aria-hidden="true"
+                    aria-label="External link"
+                    class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                    focusable="false"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  />
+                  <span
+                    class="euiScreenReaderOnly"
+                  >
+                    (opens in a new tab or window)
+                  </span>
                 </a>
               </div>
             </div>
@@ -931,20 +979,20 @@ exports[`<DefineDetector /> spec creating detector definition renders the compon
         </div>
       </div>
     </div>
-  </main>
+  </div>
 </div>
 `;
 
 exports[`<DefineDetector /> spec editing detector definition renders the component 1`] = `
 <div
-  class="euiPage"
+  class="euiPage euiPage--paddingMedium euiPage--grow"
   style="margin-top: -24px;"
 >
-  <main
-    class="euiPageBody"
+  <div
+    class="euiPageBody euiPageBody--borderRadiusNone"
   >
-    <div
-      class="euiPageHeader euiPageHeader--responsive"
+    <header
+      class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
     >
       <div
         class="euiPageHeaderSection"
@@ -957,9 +1005,9 @@ exports[`<DefineDetector /> spec editing detector definition renders the compone
            
         </h1>
       </div>
-    </div>
+    </header>
     <div
-      class="euiPanel euiPanel--paddingMedium"
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       style="padding: 20px;"
     >
       <div
@@ -1043,7 +1091,7 @@ exports[`<DefineDetector /> spec editing detector definition renders the compone
                   class="euiFormControlLayout__childrenWrapper"
                 >
                   <input
-                    aria-describedby="random_html_id-help"
+                    aria-describedby="random_html_id-help-0"
                     class="euiFieldText"
                     data-test-subj="detectorNameTextInput"
                     id="random_html_id"
@@ -1056,7 +1104,7 @@ exports[`<DefineDetector /> spec editing detector definition renders the compone
               </div>
               <div
                 class="euiFormHelpText euiFormRow__text"
-                id="random_html_id-help"
+                id="random_html_id-help-0"
               >
                 Detector name must contain 1-64 characters. Valid characters are
                 a-z, A-Z, 0-9, -(hyphen), _(underscore) and .(period).
@@ -1117,7 +1165,7 @@ exports[`<DefineDetector /> spec editing detector definition renders the compone
       class="euiSpacer euiSpacer--l"
     />
     <div
-      class="euiPanel euiPanel--paddingMedium"
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       style="padding: 20px;"
     >
       <div
@@ -1170,7 +1218,7 @@ exports[`<DefineDetector /> spec editing detector definition renders the compone
               >
                 <svg
                   aria-hidden="true"
-                  class="euiIcon euiIcon--medium euiIcon-isLoading euiCallOutHeader__icon"
+                  class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiCallOutHeader__icon"
                   focusable="false"
                   height="16"
                   role="img"
@@ -1223,7 +1271,7 @@ exports[`<DefineDetector /> spec editing detector definition renders the compone
               class="euiFormRow__fieldWrapper"
             >
               <div
-                aria-describedby="random_html_id-help"
+                aria-describedby="random_html_id-help-0"
                 aria-expanded="false"
                 aria-haspopup="listbox"
                 class="euiComboBox"
@@ -1297,7 +1345,7 @@ exports[`<DefineDetector /> spec editing detector definition renders the compone
               </div>
               <div
                 class="euiFormHelpText euiFormRow__text"
-                id="random_html_id-help"
+                id="random_html_id-help-0"
               >
                 You can use a wildcard (*) in your index pattern.
               </div>
@@ -1394,7 +1442,7 @@ exports[`<DefineDetector /> spec editing detector definition renders the compone
       class="euiSpacer euiSpacer--l"
     />
     <div
-      class="euiPanel euiPanel--paddingMedium"
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       style="padding: 20px;"
     >
       <div
@@ -1551,7 +1599,7 @@ exports[`<DefineDetector /> spec editing detector definition renders the compone
       class="euiSpacer euiSpacer--l"
     />
     <div
-      class="euiPanel euiPanel--paddingMedium"
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       style="padding: 20px;"
     >
       <div
@@ -1651,6 +1699,25 @@ exports[`<DefineDetector /> spec editing detector definition renders the compone
                               d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
                             />
                           </svg>
+                          <svg
+                            aria-label="External link"
+                            class="euiIcon euiIcon--small euiLink__externalIcon"
+                            focusable="false"
+                            height="16"
+                            role="img"
+                            viewBox="0 0 16 16"
+                            width="16"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
+                            />
+                          </svg>
+                          <span
+                            class="euiScreenReaderOnly"
+                          >
+                            (opens in a new tab or window)
+                          </span>
                         </a>
                       </div>
                     </div>
@@ -1753,6 +1820,25 @@ exports[`<DefineDetector /> spec editing detector definition renders the compone
                           d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
                         />
                       </svg>
+                      <svg
+                        aria-label="External link"
+                        class="euiIcon euiIcon--small euiLink__externalIcon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
+                        />
+                      </svg>
+                      <span
+                        class="euiScreenReaderOnly"
+                      >
+                        (opens in a new tab or window)
+                      </span>
                     </a>
                   </div>
                 </div>
@@ -1809,7 +1895,7 @@ exports[`<DefineDetector /> spec editing detector definition renders the compone
       class="euiSpacer euiSpacer--l"
     />
     <div
-      class="euiPanel euiPanel--paddingMedium"
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       style="padding: 20px;"
     >
       <div
@@ -1868,6 +1954,25 @@ exports[`<DefineDetector /> spec editing detector definition renders the compone
                       d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
                     />
                   </svg>
+                  <svg
+                    aria-label="External link"
+                    class="euiIcon euiIcon--small euiLink__externalIcon"
+                    focusable="false"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
+                    />
+                  </svg>
+                  <span
+                    class="euiScreenReaderOnly"
+                  >
+                    (opens in a new tab or window)
+                  </span>
                 </a>
               </div>
             </div>
@@ -1922,6 +2027,6 @@ exports[`<DefineDetector /> spec editing detector definition renders the compone
         </div>
       </div>
     </div>
-  </main>
+  </div>
 </div>
 `;
diff --git a/public/pages/DetectorConfig/containers/__tests__/DetectorConfig.test.tsx b/public/pages/DetectorConfig/containers/__tests__/DetectorConfig.test.tsx
index 88aa302a..d3e3a6a2 100644
--- a/public/pages/DetectorConfig/containers/__tests__/DetectorConfig.test.tsx
+++ b/public/pages/DetectorConfig/containers/__tests__/DetectorConfig.test.tsx
@@ -227,14 +227,14 @@ describe('<DetectorConfig /> spec', () => {
     };
     const { getByTestId, getByText, queryByText } =
       renderWithRouter(randomDetector);
-    await wait(() => {
+    await waitFor(() => {
       getByText('Custom expression:');
       expect(queryByText('detector_1')).toBeNull();
       expect(queryByText('detector_2')).toBeNull();
     });
 
     fireEvent.click(getByTestId('viewFeature-0'));
-    await wait(() => {
+    await waitFor(() => {
       queryByText('detector_1');
       queryByText('detector_2');
     });
@@ -284,7 +284,7 @@ describe('<DetectorConfig /> spec', () => {
         };
         const { getByTestId, getAllByText, queryByText } =
           renderWithRouter(randomDetector);
-        await wait(() => {
+        await waitFor(() => {
           getAllByText('Custom expression:');
           expect(queryByText('detector_1')).toBeNull();
           expect(queryByText('detector_2')).toBeNull();
@@ -293,7 +293,7 @@ describe('<DetectorConfig /> spec', () => {
         });
 
         fireEvent.click(getByTestId(toClick));
-        await wait(() => {
+        await waitFor(() => {
           notExpected.forEach((obj, index) => {
             expect(queryByText(notExpected[index])).toBeNull();
           });
diff --git a/public/pages/DetectorDetail/components/ConfirmModal/__tests__/__snapshots__/ConfirmModal.test.tsx.snap b/public/pages/DetectorDetail/components/ConfirmModal/__tests__/__snapshots__/ConfirmModal.test.tsx.snap
index ca9a0290..83f90bce 100644
--- a/public/pages/DetectorDetail/components/ConfirmModal/__tests__/__snapshots__/ConfirmModal.test.tsx.snap
+++ b/public/pages/DetectorDetail/components/ConfirmModal/__tests__/__snapshots__/ConfirmModal.test.tsx.snap
@@ -1,256 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ConfirmModal /> spec Confirm Modal renders component with callout 1`] = `
-<div>
-  <div
-    aria-hidden="true"
-    data-aria-hidden="true"
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="0"
-  />
-  <div
-    aria-hidden="true"
-    data-aria-hidden="true"
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="1"
-  />
-  <div
-    data-focus-lock-disabled="false"
-  >
-    <div
-      class="euiModal euiModal--maxWidth-default"
-      tabindex="0"
-    >
-      <button
-        aria-label="Closes this modal window"
-        class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
-          focusable="false"
-          height="16"
-          role="img"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        />
-      </button>
-      <div
-        class="euiModal__flex"
-      >
-        <div
-          class="euiModalHeader"
-        >
-          <div
-            class="euiModalHeader__title"
-          >
-            test confirm modal
-             
-          </div>
-        </div>
-        <div
-          class="euiModalBody"
-        >
-          <div
-            class="euiModalBody__overflow"
-          >
-            <div
-              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
-            >
-              <div
-                class="euiFlexItem euiFlexItem--flexGrowZero"
-              >
-                test callout
-              </div>
-              <div
-                class="euiFlexItem euiFlexItem--flexGrowZero"
-              >
-                <div
-                  class="euiText euiText--medium"
-                >
-                  <p>
-                    this is a testing description
-                  </p>
-                </div>
-              </div>
-            </div>
-            <div
-              class="euiSpacer euiSpacer--s"
-            />
-          </div>
-        </div>
-        <div
-          class="euiModalFooter"
-        >
-          <button
-            class="euiButtonEmpty euiButtonEmpty--primary"
-            data-test-subj="cancelButton"
-            type="button"
-          >
-            <span
-              class="euiButtonContent euiButtonEmpty__content"
-            >
-              <span
-                class="euiButtonEmpty__text"
-              >
-                Cancel
-              </span>
-            </span>
-          </button>
-          <button
-            class="euiButton euiButton--primary euiButton--fill"
-            data-test-subj="confirmButton"
-            type="button"
-          >
-            <span
-              class="euiButtonContent euiButton__content"
-            >
-              <span
-                class="euiButton__text"
-              />
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    aria-hidden="true"
-    data-aria-hidden="true"
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="0"
-  />
-</div>
+<div
+  aria-hidden="true"
+  data-aria-hidden="true"
+/>
 `;
 
 exports[`<ConfirmModal /> spec Confirm Modal renders component with empty callout 1`] = `
-<div>
-  <div
-    aria-hidden="true"
-    data-aria-hidden="true"
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="0"
-  />
-  <div
-    aria-hidden="true"
-    data-aria-hidden="true"
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="1"
-  />
-  <div
-    data-focus-lock-disabled="false"
-  >
-    <div
-      class="euiModal euiModal--maxWidth-default"
-      tabindex="0"
-    >
-      <button
-        aria-label="Closes this modal window"
-        class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="euiIcon euiIcon--medium euiButtonIcon__icon"
-          focusable="false"
-          height="16"
-          role="img"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M7.293 8L3.146 3.854a.5.5 0 11.708-.708L8 7.293l4.146-4.147a.5.5 0 01.708.708L8.707 8l4.147 4.146a.5.5 0 01-.708.708L8 8.707l-4.146 4.147a.5.5 0 01-.708-.708L7.293 8z"
-          />
-        </svg>
-      </button>
-      <div
-        class="euiModal__flex"
-      >
-        <div
-          class="euiModalHeader"
-        >
-          <div
-            class="euiModalHeader__title"
-          >
-            test confirm modal
-             
-          </div>
-        </div>
-        <div
-          class="euiModalBody"
-        >
-          <div
-            class="euiModalBody__overflow"
-          >
-            <div
-              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
-            >
-              <div
-                class="euiFlexItem euiFlexItem--flexGrowZero"
-              >
-                <div
-                  class="euiText euiText--medium"
-                >
-                  <p>
-                    this is a testing description
-                  </p>
-                </div>
-              </div>
-            </div>
-            <div
-              class="euiSpacer euiSpacer--s"
-            />
-          </div>
-        </div>
-        <div
-          class="euiModalFooter"
-        >
-          <button
-            class="euiButtonEmpty euiButtonEmpty--primary"
-            data-test-subj="cancelButton"
-            type="button"
-          >
-            <span
-              class="euiButtonContent euiButtonEmpty__content"
-            >
-              <span
-                class="euiButtonEmpty__text"
-              >
-                Cancel
-              </span>
-            </span>
-          </button>
-          <button
-            class="euiButton euiButton--primary euiButton--fill"
-            data-test-subj="confirmButton"
-            type="button"
-          >
-            <span
-              class="euiButtonContent euiButton__content"
-            >
-              <span
-                class="euiButton__text"
-              />
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    aria-hidden="true"
-    data-aria-hidden="true"
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="0"
-  />
-</div>
+<div
+  aria-hidden="true"
+  data-aria-hidden="true"
+/>
 `;
diff --git a/public/pages/DetectorDetail/components/DetectorControls/__tests__/__snapshots__/DetectorControls.test.tsx.snap b/public/pages/DetectorDetail/components/DetectorControls/__tests__/__snapshots__/DetectorControls.test.tsx.snap
index d8e435a9..3d333bb1 100644
--- a/public/pages/DetectorDetail/components/DetectorControls/__tests__/__snapshots__/DetectorControls.test.tsx.snap
+++ b/public/pages/DetectorDetail/components/DetectorControls/__tests__/__snapshots__/DetectorControls.test.tsx.snap
@@ -25,7 +25,7 @@ exports[`<DetectorControls /> spec Detector Controls renders detector controls w
             >
               <svg
                 aria-hidden="true"
-                class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonContent__icon"
+                class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                 focusable="false"
                 height="16"
                 role="img"
@@ -72,7 +72,7 @@ exports[`<DetectorControls /> spec Detector Controls renders detector controls w
             >
               <svg
                 aria-hidden="true"
-                class="euiIcon euiIcon--medium euiButtonContent__icon"
+                class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                 focusable="false"
                 height="16"
                 role="img"
@@ -124,7 +124,7 @@ exports[`<DetectorControls /> spec Detector Controls renders detector controls w
             >
               <svg
                 aria-hidden="true"
-                class="euiIcon euiIcon--medium euiButtonContent__icon"
+                class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                 focusable="false"
                 height="16"
                 role="img"
@@ -176,7 +176,7 @@ exports[`<DetectorControls /> spec Detector Controls renders detector controls w
             >
               <svg
                 aria-hidden="true"
-                class="euiIcon euiIcon--medium euiButtonContent__icon"
+                class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                 focusable="false"
                 height="16"
                 role="img"
diff --git a/public/pages/DetectorDetail/components/MonitorCallout/__tests__/__snapshots__/MonitorCallout.test.tsx.snap b/public/pages/DetectorDetail/components/MonitorCallout/__tests__/__snapshots__/MonitorCallout.test.tsx.snap
index f9401004..7a52d888 100644
--- a/public/pages/DetectorDetail/components/MonitorCallout/__tests__/__snapshots__/MonitorCallout.test.tsx.snap
+++ b/public/pages/DetectorDetail/components/MonitorCallout/__tests__/__snapshots__/MonitorCallout.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`<MonitorCallout /> spec Monitor callout renders component 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="euiIcon euiIcon--medium euiIcon-isLoading euiCallOutHeader__icon"
+      class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiCallOutHeader__icon"
       focusable="false"
       height="16"
       role="img"
@@ -26,31 +26,51 @@ exports[`<MonitorCallout /> spec Monitor callout renders component 1`] = `
   <div
     class="euiText euiText--small"
   >
-    <p>
-      Once a detector is stopped, monitor
-       
-      <a
-        class="euiLink euiLink--primary"
-        href="/dnexZXEBemUf2kpaW2CK"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        test-monitor
+    <div
+      class="euiTextColor euiTextColor--default"
+    >
+      <p>
+        Once a detector is stopped, monitor
+         
+        <a
+          class="euiLink euiLink--primary"
+          href="/dnexZXEBemUf2kpaW2CK"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          test-monitor
+           
+          <svg
+            aria-hidden="true"
+            class="euiIcon euiIcon--small euiIcon-isLoading"
+            focusable="false"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          />
+          <svg
+            aria-hidden="true"
+            aria-label="External link"
+            class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+            focusable="false"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          />
+          <span
+            class="euiScreenReaderOnly"
+          >
+            (opens in a new tab or window)
+          </span>
+        </a>
          
-        <svg
-          aria-hidden="true"
-          class="euiIcon euiIcon--small euiIcon-isLoading"
-          focusable="false"
-          height="16"
-          role="img"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        />
-      </a>
-       
-      associated with this detector will not receive any anomaly results to generate alerts.
-    </p>
+        associated with this detector will not receive any anomaly results to generate alerts.
+      </p>
+    </div>
   </div>
 </div>
 `;
diff --git a/public/pages/DetectorJobs/components/HistoricalJob/__tests__/__snapshots__/HistoricalJob.test.tsx.snap b/public/pages/DetectorJobs/components/HistoricalJob/__tests__/__snapshots__/HistoricalJob.test.tsx.snap
index e76bf234..9816d582 100644
--- a/public/pages/DetectorJobs/components/HistoricalJob/__tests__/__snapshots__/HistoricalJob.test.tsx.snap
+++ b/public/pages/DetectorJobs/components/HistoricalJob/__tests__/__snapshots__/HistoricalJob.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<HistoricalJob /> spec renders the component 1`] = `
 <div>
   <div
-    class="euiPanel euiPanel--paddingMedium"
+    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
     style="padding: 20px;"
   >
     <div
@@ -49,6 +49,22 @@ exports[`<HistoricalJob /> spec renders the component 1`] = `
                   width="16"
                   xmlns="http://www.w3.org/2000/svg"
                 />
+                <svg
+                  aria-hidden="true"
+                  aria-label="External link"
+                  class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                  focusable="false"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                />
+                <span
+                  class="euiScreenReaderOnly"
+                >
+                  (opens in a new tab or window)
+                </span>
               </a>
             </div>
           </div>
diff --git a/public/pages/DetectorJobs/components/RealTimeJob/__tests__/__snapshots__/RealTimeJob.test.tsx.snap b/public/pages/DetectorJobs/components/RealTimeJob/__tests__/__snapshots__/RealTimeJob.test.tsx.snap
index b42fffd7..08e07cf9 100644
--- a/public/pages/DetectorJobs/components/RealTimeJob/__tests__/__snapshots__/RealTimeJob.test.tsx.snap
+++ b/public/pages/DetectorJobs/components/RealTimeJob/__tests__/__snapshots__/RealTimeJob.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<RealTimeJob /> spec renders the component 1`] = `
 <div>
   <div
-    class="euiPanel euiPanel--paddingMedium"
+    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
     style="padding: 20px;"
   >
     <div
@@ -49,6 +49,22 @@ exports[`<RealTimeJob /> spec renders the component 1`] = `
                   width="16"
                   xmlns="http://www.w3.org/2000/svg"
                 />
+                <svg
+                  aria-hidden="true"
+                  aria-label="External link"
+                  class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                  focusable="false"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                />
+                <span
+                  class="euiScreenReaderOnly"
+                >
+                  (opens in a new tab or window)
+                </span>
               </a>
             </div>
           </div>
diff --git a/public/pages/DetectorJobs/containers/__tests__/__snapshots__/DetectorJobs.test.tsx.snap b/public/pages/DetectorJobs/containers/__tests__/__snapshots__/DetectorJobs.test.tsx.snap
index 3808eebf..b68ced76 100644
--- a/public/pages/DetectorJobs/containers/__tests__/__snapshots__/DetectorJobs.test.tsx.snap
+++ b/public/pages/DetectorJobs/containers/__tests__/__snapshots__/DetectorJobs.test.tsx.snap
@@ -2,14 +2,14 @@
 
 exports[`<DetectorJobs /> spec configuring detector jobs renders the component 1`] = `
 <div
-  class="euiPage"
+  class="euiPage euiPage--paddingMedium euiPage--grow"
   style="margin-top: -24px;"
 >
-  <main
-    class="euiPageBody"
+  <div
+    class="euiPageBody euiPageBody--borderRadiusNone"
   >
-    <div
-      class="euiPageHeader euiPageHeader--responsive"
+    <header
+      class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
     >
       <div
         class="euiPageHeaderSection"
@@ -21,9 +21,9 @@ exports[`<DetectorJobs /> spec configuring detector jobs renders the component 1
           Set up detector jobs 
         </h1>
       </div>
-    </div>
+    </header>
     <div
-      class="euiPanel euiPanel--paddingMedium"
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       style="padding: 20px;"
     >
       <div
@@ -69,6 +69,22 @@ exports[`<DetectorJobs /> spec configuring detector jobs renders the component 1
                     width="16"
                     xmlns="http://www.w3.org/2000/svg"
                   />
+                  <svg
+                    aria-hidden="true"
+                    aria-label="External link"
+                    class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                    focusable="false"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  />
+                  <span
+                    class="euiScreenReaderOnly"
+                  >
+                    (opens in a new tab or window)
+                  </span>
                 </a>
               </div>
             </div>
@@ -123,7 +139,7 @@ exports[`<DetectorJobs /> spec configuring detector jobs renders the component 1
       class="euiSpacer euiSpacer--l"
     />
     <div
-      class="euiPanel euiPanel--paddingMedium"
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       style="padding: 20px;"
     >
       <div
@@ -169,6 +185,22 @@ exports[`<DetectorJobs /> spec configuring detector jobs renders the component 1
                     width="16"
                     xmlns="http://www.w3.org/2000/svg"
                   />
+                  <svg
+                    aria-hidden="true"
+                    aria-label="External link"
+                    class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                    focusable="false"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  />
+                  <span
+                    class="euiScreenReaderOnly"
+                  >
+                    (opens in a new tab or window)
+                  </span>
                 </a>
               </div>
             </div>
@@ -222,6 +254,6 @@ exports[`<DetectorJobs /> spec configuring detector jobs renders the component 1
         </div>
       </div>
     </div>
-  </main>
+  </div>
 </div>
 `;
diff --git a/public/pages/DetectorResults/components/ListControls/__tests__/__snapshots__/ListControls.test.tsx.snap b/public/pages/DetectorResults/components/ListControls/__tests__/__snapshots__/ListControls.test.tsx.snap
index 1ebb0f52..0962ac71 100644
--- a/public/pages/DetectorResults/components/ListControls/__tests__/__snapshots__/ListControls.test.tsx.snap
+++ b/public/pages/DetectorResults/components/ListControls/__tests__/__snapshots__/ListControls.test.tsx.snap
@@ -15,13 +15,13 @@ exports[`<ListControls /> spec Empty results renders component with empty messag
     >
       <button
         aria-label="Previous page, 1"
-        class="euiButtonIcon euiButtonIcon--text"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
         data-test-subj="pagination-button-previous"
         type="button"
       >
         <svg
           aria-hidden="true"
-          class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
+          class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
           focusable="false"
           height="16"
           role="img"
@@ -38,7 +38,7 @@ exports[`<ListControls /> spec Empty results renders component with empty messag
         >
           <button
             aria-label="Page 1 of 10"
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
             data-test-subj="pagination-button-0"
             type="button"
           >
@@ -59,7 +59,7 @@ exports[`<ListControls /> spec Empty results renders component with empty messag
           <button
             aria-current="true"
             aria-label="Page 2 of 10"
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
             data-test-subj="pagination-button-1"
             disabled=""
             type="button"
@@ -80,7 +80,7 @@ exports[`<ListControls /> spec Empty results renders component with empty messag
         >
           <button
             aria-label="Page 3 of 10"
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
             data-test-subj="pagination-button-2"
             type="button"
           >
@@ -100,7 +100,7 @@ exports[`<ListControls /> spec Empty results renders component with empty messag
         >
           <button
             aria-label="Page 4 of 10"
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
             data-test-subj="pagination-button-3"
             type="button"
           >
@@ -120,7 +120,7 @@ exports[`<ListControls /> spec Empty results renders component with empty messag
         >
           <button
             aria-label="Page 5 of 10"
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
             data-test-subj="pagination-button-4"
             type="button"
           >
@@ -146,7 +146,7 @@ exports[`<ListControls /> spec Empty results renders component with empty messag
         >
           <button
             aria-label="Page 10 of 10"
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
             data-test-subj="pagination-button-9"
             type="button"
           >
@@ -164,13 +164,13 @@ exports[`<ListControls /> spec Empty results renders component with empty messag
       </ul>
       <button
         aria-label="Next page, 3"
-        class="euiButtonIcon euiButtonIcon--text"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
         data-test-subj="pagination-button-next"
         type="button"
       >
         <svg
           aria-hidden="true"
-          class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
+          class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
           focusable="false"
           height="16"
           role="img"
diff --git a/public/pages/DetectorResults/containers/AnomalyResultsLiveChart.tsx b/public/pages/DetectorResults/containers/AnomalyResultsLiveChart.tsx
index 5ee99853..7ba1d2fb 100644
--- a/public/pages/DetectorResults/containers/AnomalyResultsLiveChart.tsx
+++ b/public/pages/DetectorResults/containers/AnomalyResultsLiveChart.tsx
@@ -30,7 +30,7 @@ import {
   Settings,
   LineAnnotation,
   RectAnnotation,
-  AnnotationDomainTypes,
+  AnnotationDomainType,
   LineAnnotationDatum,
   ScaleType,
 } from '@elastic/charts';
@@ -303,7 +303,7 @@ export const AnomalyResultsLiveChart = (
                   <Settings theme={LIVE_ANOMALY_CHART_THEME} />
                   <LineAnnotation
                     id="annotationNow"
-                    domainType={AnnotationDomainTypes.XDomain}
+                    domainType={AnnotationDomainType.XDomain}
                     dataValues={nowAnnotation([endDateTime.valueOf(), 1])}
                     style={nowLineStyle}
                     // @ts-ignore
diff --git a/public/pages/DetectorsList/components/EmptyMessage/__tests__/__snapshots__/EmptyMessage.test.tsx.snap b/public/pages/DetectorsList/components/EmptyMessage/__tests__/__snapshots__/EmptyMessage.test.tsx.snap
index 0b1b6347..ed30a454 100644
--- a/public/pages/DetectorsList/components/EmptyMessage/__tests__/__snapshots__/EmptyMessage.test.tsx.snap
+++ b/public/pages/DetectorsList/components/EmptyMessage/__tests__/__snapshots__/EmptyMessage.test.tsx.snap
@@ -24,9 +24,6 @@ exports[`<EmptyDetectorMessage /> spec Empty results renders component with empt
   <div
     class="euiSpacer euiSpacer--l"
   />
-  <div
-    class="euiSpacer euiSpacer--s"
-  />
   <div
     class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
   >
@@ -100,9 +97,6 @@ exports[`<EmptyDetectorMessage /> spec Filters results message renders component
   <div
     class="euiSpacer euiSpacer--l"
   />
-  <div
-    class="euiSpacer euiSpacer--s"
-  />
   <button
     class="euiButton euiButton--primary euiButton--fill"
     data-test-subj="resetListFilters"
diff --git a/public/pages/DetectorsList/components/ListActions/__tests__/ListActions.test.tsx b/public/pages/DetectorsList/components/ListActions/__tests__/ListActions.test.tsx
index 916157a6..2f69fd63 100644
--- a/public/pages/DetectorsList/components/ListActions/__tests__/ListActions.test.tsx
+++ b/public/pages/DetectorsList/components/ListActions/__tests__/ListActions.test.tsx
@@ -10,7 +10,7 @@
  */
 
 import React from 'react';
-import { fireEvent, render, wait } from '@testing-library/react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import { ListActions } from '../ListActions';
 
 describe('<ListActions /> spec', () => {
@@ -36,7 +36,7 @@ describe('<ListActions /> spec', () => {
       expect(queryByText('Stop')).toBeNull();
       expect(queryByText('Delete')).toBeNull();
       fireEvent.click(getByTestId('listActionsButton'));
-      await wait();
+      await waitFor(()=>{});
       expect(queryByText('Start')).toBeNull();
       expect(queryByText('Stop')).toBeNull();
       expect(queryByText('Delete')).toBeNull();
@@ -50,7 +50,7 @@ describe('<ListActions /> spec', () => {
       expect(queryByText('Stop')).toBeNull();
       expect(queryByText('Delete')).toBeNull();
       fireEvent.click(getByTestId('listActionsButton'));
-      await wait();
+      await waitFor(()=>{});
       expect(queryByText('Start real-time detectors')).not.toBeNull();
       expect(queryByText('Stop real-time detectors')).not.toBeNull();
       expect(queryByText('Delete detectors')).not.toBeNull();
@@ -60,7 +60,7 @@ describe('<ListActions /> spec', () => {
         <ListActions {...defaultProps} isActionsDisabled={false} />
       );
       fireEvent.click(getByTestId('listActionsButton'));
-      await wait();
+      await waitFor(()=>{});
       fireEvent.click(getByTestId('startDetectors'));
       expect(defaultProps.onStartDetectors).toHaveBeenCalled();
     });
@@ -69,7 +69,7 @@ describe('<ListActions /> spec', () => {
         <ListActions {...defaultProps} isActionsDisabled={false} />
       );
       fireEvent.click(getByTestId('listActionsButton'));
-      await wait();
+      await waitFor(()=>{});
       fireEvent.click(getByTestId('stopDetectors'));
       expect(defaultProps.onStopDetectors).toHaveBeenCalled();
     });
@@ -78,7 +78,7 @@ describe('<ListActions /> spec', () => {
         <ListActions {...defaultProps} isActionsDisabled={false} />
       );
       fireEvent.click(getByTestId('listActionsButton'));
-      await wait();
+      await waitFor(()=>{});
       fireEvent.click(getByTestId('deleteDetectors'));
       expect(defaultProps.onDeleteDetectors).toHaveBeenCalled();
     });
diff --git a/public/pages/DetectorsList/components/ListActions/__tests__/__snapshots__/ListActions.test.tsx.snap b/public/pages/DetectorsList/components/ListActions/__tests__/__snapshots__/ListActions.test.tsx.snap
index 54ac2753..f02e0691 100644
--- a/public/pages/DetectorsList/components/ListActions/__tests__/__snapshots__/ListActions.test.tsx.snap
+++ b/public/pages/DetectorsList/components/ListActions/__tests__/__snapshots__/ListActions.test.tsx.snap
@@ -26,7 +26,7 @@ exports[`<ListActions /> spec List actions renders component when disabled 1`] =
           >
             <svg
               aria-hidden="true"
-              class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonContent__icon"
+              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
               focusable="false"
               height="16"
               role="img"
@@ -72,7 +72,7 @@ exports[`<ListActions /> spec List actions renders component when enabled 1`] =
           >
             <svg
               aria-hidden="true"
-              class="euiIcon euiIcon--medium euiButtonContent__icon"
+              class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
               focusable="false"
               height="16"
               role="img"
diff --git a/public/pages/DetectorsList/components/ListFilters/__tests__/__snapshots__/ListFilters.test.tsx.snap b/public/pages/DetectorsList/components/ListFilters/__tests__/__snapshots__/ListFilters.test.tsx.snap
index 4df8c0cc..6b517bd1 100644
--- a/public/pages/DetectorsList/components/ListFilters/__tests__/__snapshots__/ListFilters.test.tsx.snap
+++ b/public/pages/DetectorsList/components/ListFilters/__tests__/__snapshots__/ListFilters.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<ListFilters /> spec Empty results renders component with empty message
         class="euiFormControlLayout__childrenWrapper"
       >
         <input
-          class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable"
+          class="euiFieldSearch euiFieldSearch--fullWidth"
           data-test-subj="detectorListSearch"
           placeholder="Search"
           type="search"
@@ -188,13 +188,13 @@ exports[`<ListFilters /> spec Empty results renders component with empty message
     >
       <button
         aria-label="Previous page, 1"
-        class="euiButtonIcon euiButtonIcon--text"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
         data-test-subj="pagination-button-previous"
         type="button"
       >
         <svg
           aria-hidden="true"
-          class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
+          class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
           focusable="false"
           height="16"
           role="img"
@@ -211,7 +211,7 @@ exports[`<ListFilters /> spec Empty results renders component with empty message
         >
           <button
             aria-label="Page 1 of 10"
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
             data-test-subj="pagination-button-0"
             type="button"
           >
@@ -232,7 +232,7 @@ exports[`<ListFilters /> spec Empty results renders component with empty message
           <button
             aria-current="true"
             aria-label="Page 2 of 10"
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
             data-test-subj="pagination-button-1"
             disabled=""
             type="button"
@@ -253,7 +253,7 @@ exports[`<ListFilters /> spec Empty results renders component with empty message
         >
           <button
             aria-label="Page 3 of 10"
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
             data-test-subj="pagination-button-2"
             type="button"
           >
@@ -273,7 +273,7 @@ exports[`<ListFilters /> spec Empty results renders component with empty message
         >
           <button
             aria-label="Page 4 of 10"
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
             data-test-subj="pagination-button-3"
             type="button"
           >
@@ -293,7 +293,7 @@ exports[`<ListFilters /> spec Empty results renders component with empty message
         >
           <button
             aria-label="Page 5 of 10"
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
             data-test-subj="pagination-button-4"
             type="button"
           >
@@ -319,7 +319,7 @@ exports[`<ListFilters /> spec Empty results renders component with empty message
         >
           <button
             aria-label="Page 10 of 10"
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
             data-test-subj="pagination-button-9"
             type="button"
           >
@@ -337,13 +337,13 @@ exports[`<ListFilters /> spec Empty results renders component with empty message
       </ul>
       <button
         aria-label="Next page, 3"
-        class="euiButtonIcon euiButtonIcon--text"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
         data-test-subj="pagination-button-next"
         type="button"
       >
         <svg
           aria-hidden="true"
-          class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
+          class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
           focusable="false"
           height="16"
           role="img"
diff --git a/public/pages/DetectorsList/containers/ConfirmActionModals/__tests__/ConfirmDeleteDetectorsModal.test.tsx b/public/pages/DetectorsList/containers/ConfirmActionModals/__tests__/ConfirmDeleteDetectorsModal.test.tsx
index 686dbe92..4386d6a6 100644
--- a/public/pages/DetectorsList/containers/ConfirmActionModals/__tests__/ConfirmDeleteDetectorsModal.test.tsx
+++ b/public/pages/DetectorsList/containers/ConfirmActionModals/__tests__/ConfirmDeleteDetectorsModal.test.tsx
@@ -10,7 +10,7 @@
  */
 
 import React from 'react';
-import { render, fireEvent, wait } from '@testing-library/react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ConfirmDeleteDetectorsModal } from '../ConfirmDeleteDetectorsModal';
 import { DetectorListItem, Monitor } from '../../../../../models/interfaces';
@@ -74,11 +74,11 @@ describe('<ConfirmDeleteDetectorsModal /> spec', () => {
       const { getByTestId, getByPlaceholderText } = render(
         <ConfirmDeleteDetectorsModal {...defaultDeleteProps} />
       );
-      await wait();
+      await waitFor(()=>{});
       userEvent.type(getByPlaceholderText('delete'), 'foo');
-      await wait();
+      await waitFor(()=>{});
       userEvent.click(getByTestId('confirmButton'));
-      await wait();
+      await waitFor(()=>{});
       expect(defaultDeleteProps.onStopDetectors).not.toHaveBeenCalled();
       expect(defaultDeleteProps.onDeleteDetectors).not.toHaveBeenCalled();
       expect(defaultDeleteProps.onConfirm).not.toHaveBeenCalled();
@@ -87,11 +87,11 @@ describe('<ConfirmDeleteDetectorsModal /> spec', () => {
       const { getByTestId, getByPlaceholderText } = render(
         <ConfirmDeleteDetectorsModal {...defaultDeleteProps} />
       );
-      await wait();
+      await waitFor(()=>{});
       userEvent.type(getByPlaceholderText('delete'), 'delete');
-      await wait();
+      await waitFor(()=>{});
       userEvent.click(getByTestId('confirmButton'));
-      await wait();
+      await waitFor(()=>{});
       expect(defaultDeleteProps.onConfirm).toHaveBeenCalled();
     }, 10000);
     test('should not show callout if no detectors are running', async () => {
@@ -126,7 +126,7 @@ describe('<ConfirmDeleteDetectorsModal /> spec', () => {
           }
         />
       );
-      await wait();
+      await waitFor(()=>{});
       expect(
         queryByText('Some of the selected detectors are currently running.')
       ).not.toBeNull();
@@ -135,9 +135,9 @@ describe('<ConfirmDeleteDetectorsModal /> spec', () => {
       const { getByTestId } = render(
         <ConfirmDeleteDetectorsModal {...defaultDeleteProps} />
       );
-      await wait();
+      await waitFor(()=>{});
       fireEvent.click(getByTestId('cancelButton'));
-      await wait();
+      await waitFor(()=>{});
       expect(defaultDeleteProps.onHide).toHaveBeenCalled();
     });
     test('should call onStopDetectors when deleting running detectors', async () => {
@@ -156,14 +156,14 @@ describe('<ConfirmDeleteDetectorsModal /> spec', () => {
         />
       );
       // Try clicking before 'delete' has been typed
-      await wait();
+      await waitFor(()=>{});
       userEvent.click(getByTestId('confirmButton'));
-      await wait();
+      await waitFor(()=>{});
       expect(defaultDeleteProps.onStopDetectors).not.toHaveBeenCalled();
       userEvent.type(getByPlaceholderText('delete'), 'delete');
-      await wait();
+      await waitFor(()=>{});
       userEvent.click(getByTestId('confirmButton'));
-      await wait();
+      await waitFor(()=>{});
       expect(defaultDeleteProps.onStopDetectors).toHaveBeenCalled();
     });
   });
diff --git a/public/pages/DetectorsList/containers/ConfirmActionModals/__tests__/ConfirmStartDetectorsModal.test.tsx b/public/pages/DetectorsList/containers/ConfirmActionModals/__tests__/ConfirmStartDetectorsModal.test.tsx
index f2f01b14..bd2b34b2 100644
--- a/public/pages/DetectorsList/containers/ConfirmActionModals/__tests__/ConfirmStartDetectorsModal.test.tsx
+++ b/public/pages/DetectorsList/containers/ConfirmActionModals/__tests__/ConfirmStartDetectorsModal.test.tsx
@@ -10,7 +10,7 @@
  */
 
 import React from 'react';
-import { render, fireEvent, wait } from '@testing-library/react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
 import { ConfirmStartDetectorsModal } from '../ConfirmStartDetectorsModal';
 import { DetectorListItem, Monitor } from '../../../../../models/interfaces';
 
@@ -59,7 +59,7 @@ describe('<ConfirmStartDetectorsModal /> spec', () => {
         <ConfirmStartDetectorsModal {...defaultStartProps} />
       );
       fireEvent.click(getByTestId('confirmButton'));
-      await wait();
+      await waitFor(()=>{});
       expect(defaultStartProps.onStartDetectors).toHaveBeenCalled();
       expect(defaultStartProps.onConfirm).toHaveBeenCalled();
     });
@@ -68,7 +68,7 @@ describe('<ConfirmStartDetectorsModal /> spec', () => {
         <ConfirmStartDetectorsModal {...defaultStartProps} />
       );
       fireEvent.click(getByTestId('cancelButton'));
-      await wait();
+      await waitFor(()=>{});
       expect(defaultStartProps.onHide).toHaveBeenCalled();
     });
   });
diff --git a/public/pages/DetectorsList/containers/ConfirmActionModals/__tests__/ConfirmStopDetectorsModal.test.tsx b/public/pages/DetectorsList/containers/ConfirmActionModals/__tests__/ConfirmStopDetectorsModal.test.tsx
index dd773cd1..d4654b08 100644
--- a/public/pages/DetectorsList/containers/ConfirmActionModals/__tests__/ConfirmStopDetectorsModal.test.tsx
+++ b/public/pages/DetectorsList/containers/ConfirmActionModals/__tests__/ConfirmStopDetectorsModal.test.tsx
@@ -10,7 +10,7 @@
  */
 
 import React from 'react';
-import { render, fireEvent, wait } from '@testing-library/react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
 import { ConfirmStopDetectorsModal } from '../ConfirmStopDetectorsModal';
 import { DetectorListItem, Monitor } from '../../../../../models/interfaces';
 
@@ -72,7 +72,7 @@ describe('<ConfirmStopDetectorsModal /> spec', () => {
         <ConfirmStopDetectorsModal {...defaultStopProps} />
       );
       fireEvent.click(getByTestId('confirmButton'));
-      await wait();
+      await waitFor(()=>{});
       expect(defaultStopProps.onStopDetectors).toHaveBeenCalled();
     });
     test('should call onHide() when closing', async () => {
@@ -80,7 +80,7 @@ describe('<ConfirmStopDetectorsModal /> spec', () => {
         <ConfirmStopDetectorsModal {...defaultStopProps} />
       );
       fireEvent.click(getByTestId('cancelButton'));
-      await wait();
+      await waitFor(()=>{});
       expect(defaultStopProps.onHide).toHaveBeenCalled();
     });
   });
diff --git a/public/pages/DetectorsList/containers/List/__tests__/List.test.tsx b/public/pages/DetectorsList/containers/List/__tests__/List.test.tsx
index 838d9fe0..4118e890 100644
--- a/public/pages/DetectorsList/containers/List/__tests__/List.test.tsx
+++ b/public/pages/DetectorsList/containers/List/__tests__/List.test.tsx
@@ -9,7 +9,7 @@
  * GitHub history for details.
  */
 
-import { render, wait } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import moment from 'moment';
 import React from 'react';
@@ -79,7 +79,7 @@ describe('<DetectorList /> spec', () => {
         ...initialDetectorsState,
         requesting: true,
       });
-      await wait();
+      await waitFor(()=>{});
       getByText(
         `A detector is an individual anomaly detection task. You can create multiple detectors, and all the detectors can run simultaneously, with each analyzing data from different sources. Create an anomaly detector to get started.`
       );
@@ -110,22 +110,20 @@ describe('<DetectorList /> spec', () => {
         requesting: true,
       });
       // Default view 20 items per page
-      await wait(() => getByText('detector_name_0'));
+      await waitFor(() => getByText('detector_name_0'));
       getByText('index_0');
       expect(queryByText('detector_name_30')).toBeNull();
       expect(queryByText('index_30')).toBeNull();
 
       // Navigate to next page
-      userEvent.click(getAllByTestId('pagination-button-next')[0]);
-      await wait();
+      await waitFor(() => userEvent.click(getAllByTestId('pagination-button-next')[0]));
       getByText('detector_name_30');
       getByText('index_30');
       expect(queryByText('detector_name_0')).toBeNull();
       expect(queryByText('index_0')).toBeNull();
 
       // Navigate to previous page
-      userEvent.click(getAllByTestId('pagination-button-previous')[0]);
-      await wait();
+      await waitFor(()=>userEvent.click(getAllByTestId('pagination-button-previous')[0]));
       getByText('detector_name_0');
       expect(queryByText('detector_name_30')).toBeNull();
     });
@@ -163,23 +161,23 @@ describe('<DetectorList /> spec', () => {
         requesting: true,
       });
       // Default view 20 items per page
-      await wait();
+      await waitFor(()=>{});
       getByText('detector_name_0');
       expect(queryByText('detector_name_30')).toBeNull();
 
       // Sort by name (string sorting)
       userEvent.click(getAllByTestId('tableHeaderSortButton')[0]);
-      await wait();
+      await waitFor(()=>{});
       getByText('detector_name_30');
       expect(queryByText('detector_name_0')).toBeNull();
 
       // Sort by indices (string sorting)
       userEvent.click(getAllByTestId('tableHeaderSortButton')[1]);
-      await wait();
+      await waitFor(()=>{});
       getByText('index_0');
       expect(queryByText('index_30')).toBeNull();
       userEvent.click(getAllByTestId('tableHeaderSortButton')[1]);
-      await wait();
+      await waitFor(()=>{});
       getByText('index_30');
       expect(queryByText('index_0')).toBeNull();
 
@@ -187,21 +185,21 @@ describe('<DetectorList /> spec', () => {
       // NOTE: this is assuming DETECTOR_STATE.RUNNING is higher alphabetically ('running')
       // than DETECTOR_STATE.DISABLED ('stopped')
       userEvent.click(getAllByTestId('tableHeaderSortButton')[2]);
-      await wait();
+      await waitFor(()=>{});
       expect(queryByText(DETECTOR_STATE.RUNNING)).not.toBeNull();
       userEvent.click(getAllByTestId('tableHeaderSortButton')[2]);
-      await wait();
+      await waitFor(()=>{});
       expect(queryByText(DETECTOR_STATE.RUNNING)).toBeNull();
 
       // Sort by totalAnomalies (numeric sorting)
       userEvent.click(getAllByTestId('tableHeaderSortButton')[3]);
-      await wait();
+      await waitFor(()=>{});
       getByText('0');
       getByText('19');
       expect(queryByText('30')).toBeNull();
       expect(queryByText('39')).toBeNull();
       userEvent.click(getAllByTestId('tableHeaderSortButton')[3]);
-      await wait();
+      await waitFor(()=>{});
       getByText('30');
       getByText('39');
       expect(queryByText('0')).toBeNull();
@@ -209,21 +207,21 @@ describe('<DetectorList /> spec', () => {
 
       // Sort by last anomaly occurrence (date sorting)
       userEvent.click(getAllByTestId('tableHeaderSortButton')[4]);
-      await wait();
+      await waitFor(()=>{});
       getByText('04/15/2020 9:00 AM');
       expect(queryByText('04/15/2020 9:30 AM')).toBeNull();
       userEvent.click(getAllByTestId('tableHeaderSortButton')[4]);
-      await wait();
+      await waitFor(()=>{});
       getByText('04/15/2020 9:30 AM');
       expect(queryByText('04/15/2020 9:00 AM')).toBeNull();
 
       // Sort by last updated (date sorting)
       userEvent.click(getAllByTestId('tableHeaderSortButton')[5]);
-      await wait();
+      await waitFor(()=>{});
       getByText('04/15/2020 7:00 AM');
       expect(queryByText('04/15/2020 7:30 AM')).toBeNull();
       userEvent.click(getAllByTestId('tableHeaderSortButton')[5]);
-      await wait();
+      await waitFor(()=>{});
       getByText('04/15/2020 7:30 AM');
       expect(queryByText('04/15/2020 7:00 AM')).toBeNull();
     }, 20000);
@@ -253,14 +251,14 @@ describe('<DetectorList /> spec', () => {
         }
       );
       // Initial load, only first 20 items
-      await wait(() => getByText('detector_name_0'));
+      await waitFor(() => getByText('detector_name_0'));
       getByText('index_0');
       expect(queryByText('detector_name_38')).toBeNull();
       expect(queryByText('index_38')).toBeNull();
 
       //Input search event
       userEvent.type(getByPlaceholderText('Search'), 'detector_name_38');
-      await wait();
+      await waitFor(()=>{});
       getByText('detector_name_38');
       getByText('index_38');
       expect(queryByText('detector_name_39')).toBeNull();
@@ -293,16 +291,16 @@ describe('<DetectorList /> spec', () => {
           requesting: true,
         });
       // Initial load, only first 20 items
-      await wait();
+      await waitFor(()=>{});
       getByText('detector_name_0');
 
       // Go to next page
       userEvent.click(getAllByTestId('pagination-button-next')[0]);
-      await wait();
+      await waitFor(()=>{});
 
       // Search for detector which is on prev page
       userEvent.type(getByPlaceholderText('Search'), 'detector_name_0');
-      await wait();
+      await waitFor(()=>{});
       getByText('detector_name_0');
       expect(queryByText('detector_name_30')).toBeNull();
     });
@@ -349,7 +347,7 @@ describe('<DetectorList /> spec', () => {
         ...initialDetectorsState,
         requesting: true,
       });
-      await wait();
+      await waitFor(()=>{});
       //Assert all visible text are available
       //Test1 Detector
       getByText(randomDetectors[0].name);
@@ -387,7 +385,7 @@ describe('<DetectorList /> spec', () => {
       });
       const { getByText, getByTestId, getAllByRole, queryByText } =
         renderWithRouter();
-      await wait();
+      await waitFor(()=>{});
       userEvent.click(getAllByRole('checkbox')[0]);
       userEvent.click(getByTestId('listActionsButton'));
       userEvent.click(getByText('Start real-time detectors'));
@@ -415,7 +413,7 @@ describe('<DetectorList /> spec', () => {
         },
       });
       const { getByText, getByTestId, getAllByRole } = renderWithRouter();
-      await wait();
+      await waitFor(()=>{});
       userEvent.click(getAllByRole('checkbox')[0]);
       userEvent.click(getByTestId('listActionsButton'));
       userEvent.click(getByText('Start real-time detectors'));
@@ -443,7 +441,7 @@ describe('<DetectorList /> spec', () => {
       });
       const { getByText, getByTestId, getAllByRole, queryByText } =
         renderWithRouter();
-      await wait();
+      await waitFor(()=>{});
       userEvent.click(getAllByRole('checkbox')[0]);
       userEvent.click(getByTestId('listActionsButton'));
       userEvent.click(getByText('Stop real-time detectors'));
@@ -471,7 +469,7 @@ describe('<DetectorList /> spec', () => {
         },
       });
       const { getByText, getByTestId, getAllByRole } = renderWithRouter();
-      await wait();
+      await waitFor(()=>{});
       userEvent.click(getAllByRole('checkbox')[0]);
       userEvent.click(getByTestId('listActionsButton'));
       userEvent.click(getByText('Stop real-time detectors'));
@@ -544,7 +542,7 @@ describe('<DetectorList /> spec', () => {
         },
       });
       const { getByText, getByTestId, getAllByRole } = renderWithRouter();
-      await wait();
+      await waitFor(()=>{});
       // Try to delete disabled detector
       userEvent.click(getAllByRole('checkbox')[1]);
       userEvent.click(getByTestId('listActionsButton'));
diff --git a/public/pages/HistoricalDetectorResults/components/__tests__/__snapshots__/EmptyHistoricalDetectorResults.test.tsx.snap b/public/pages/HistoricalDetectorResults/components/__tests__/__snapshots__/EmptyHistoricalDetectorResults.test.tsx.snap
index ac2c2974..d21810b3 100644
--- a/public/pages/HistoricalDetectorResults/components/__tests__/__snapshots__/EmptyHistoricalDetectorResults.test.tsx.snap
+++ b/public/pages/HistoricalDetectorResults/components/__tests__/__snapshots__/EmptyHistoricalDetectorResults.test.tsx.snap
@@ -5,14 +5,14 @@ exports[`<EmptyHistoricalDetectorResults /> spec renders component 1`] = `
   class="euiEmptyPrompt"
   data-test-subj="emptyHistoricalAnalysisMessage"
 >
+  <h2
+    class="euiTitle euiTitle--medium"
+  >
+    You haven't yet set up historical analysis
+  </h2>
   <span
     class="euiTextColor euiTextColor--subdued"
   >
-    <h2
-      class="euiTitle euiTitle--medium"
-    >
-      You haven't yet set up historical analysis
-    </h2>
     <div
       class="euiSpacer euiSpacer--m"
     />
@@ -39,6 +39,22 @@ exports[`<EmptyHistoricalDetectorResults /> spec renders component 1`] = `
             width="16"
             xmlns="http://www.w3.org/2000/svg"
           />
+          <svg
+            aria-hidden="true"
+            aria-label="External link"
+            class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+            focusable="false"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          />
+          <span
+            class="euiScreenReaderOnly"
+          >
+            (opens in a new tab or window)
+          </span>
         </a>
          
       </p>
@@ -47,9 +63,6 @@ exports[`<EmptyHistoricalDetectorResults /> spec renders component 1`] = `
   <div
     class="euiSpacer euiSpacer--l"
   />
-  <div
-    class="euiSpacer euiSpacer--s"
-  />
   <button
     class="euiButton euiButton--primary euiButton--fill"
     data-test-subj="runHistoricalAnalysisButton"
diff --git a/public/pages/Overview/components/SampleDataBox/__tests__/__snapshots__/SampleDataBox.test.tsx.snap b/public/pages/Overview/components/SampleDataBox/__tests__/__snapshots__/SampleDataBox.test.tsx.snap
index ee100b3a..0b92fa45 100644
--- a/public/pages/Overview/components/SampleDataBox/__tests__/__snapshots__/SampleDataBox.test.tsx.snap
+++ b/public/pages/Overview/components/SampleDataBox/__tests__/__snapshots__/SampleDataBox.test.tsx.snap
@@ -5,19 +5,10 @@ exports[`<SampleDataBox /> spec Data is loaded renders component 1`] = `
   style="height: auto;"
 >
   <div
-    class="euiPanel euiPanel--paddingMedium euiPanel--hasBetaBadge"
+    betabadgelabel="INSTALLED"
+    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
     style="padding: 20px;"
   >
-    <span
-      class="euiPanel__betaBadgeWrapper"
-    >
-      <span
-        class="euiBetaBadge euiPanel__betaBadge"
-        title="INSTALLED"
-      >
-        INSTALLED
-      </span>
-    </span>
     <div
       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
       style="padding: 0px;"
@@ -158,7 +149,7 @@ exports[`<SampleDataBox /> spec Data is loading renders component 1`] = `
   style="height: auto;"
 >
   <div
-    class="euiPanel euiPanel--paddingMedium"
+    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
     style="padding: 20px;"
   >
     <div
@@ -295,7 +286,7 @@ exports[`<SampleDataBox /> spec Data not loaded renders component 1`] = `
   style="height: auto;"
 >
   <div
-    class="euiPanel euiPanel--paddingMedium"
+    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
     style="padding: 20px;"
   >
     <div
diff --git a/public/pages/Overview/components/SampleDataCallout/__tests__/__snapshots__/SampleDataCallout.test.tsx.snap b/public/pages/Overview/components/SampleDataCallout/__tests__/__snapshots__/SampleDataCallout.test.tsx.snap
index dd99e15f..36df3f2c 100644
--- a/public/pages/Overview/components/SampleDataCallout/__tests__/__snapshots__/SampleDataCallout.test.tsx.snap
+++ b/public/pages/Overview/components/SampleDataCallout/__tests__/__snapshots__/SampleDataCallout.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`<SampleDataCallout /> spec Data not loaded renders component 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="euiIcon euiIcon--medium euiIcon-isLoading euiCallOutHeader__icon"
+      class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiCallOutHeader__icon"
       focusable="false"
       height="16"
       role="img"
@@ -26,30 +26,50 @@ exports[`<SampleDataCallout /> spec Data not loaded renders component 1`] = `
   <div
     class="euiText euiText--small"
   >
-    <p>
-      Read the
-       
-      <a
-        class="euiLink euiLink--primary"
-        href="https://opensearch.org/docs/monitoring-plugins/ad"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        documentation
-      </a>
-       
-      or create a
-       
-      <a
-        class="euiLink euiLink--primary"
-        href="anomaly-detection-dashboards#/overview"
-        rel="noreferrer"
-      >
-        sample detector
-      </a>
-       
-      to get started.
-    </p>
+    <div
+      class="euiTextColor euiTextColor--default"
+    >
+      <p>
+        Read the
+         
+        <a
+          class="euiLink euiLink--primary"
+          href="https://opensearch.org/docs/monitoring-plugins/ad"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          documentation
+          <svg
+            aria-hidden="true"
+            aria-label="External link"
+            class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+            focusable="false"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          />
+          <span
+            class="euiScreenReaderOnly"
+          >
+            (opens in a new tab or window)
+          </span>
+        </a>
+         
+        or create a
+         
+        <a
+          class="euiLink euiLink--primary"
+          href="anomaly-detection-dashboards#/overview"
+          rel="noreferrer"
+        >
+          sample detector
+        </a>
+         
+        to get started.
+      </p>
+    </div>
   </div>
 </div>
 `;
diff --git a/public/pages/Overview/containers/__tests__/AnomalyDetectionOverview.test.tsx b/public/pages/Overview/containers/__tests__/AnomalyDetectionOverview.test.tsx
index 595491ca..e57a750f 100644
--- a/public/pages/Overview/containers/__tests__/AnomalyDetectionOverview.test.tsx
+++ b/public/pages/Overview/containers/__tests__/AnomalyDetectionOverview.test.tsx
@@ -10,7 +10,7 @@
  */
 
 import React from 'react';
-import { render, wait } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import { AnomalyDetectionOverview } from '../AnomalyDetectionOverview';
 import { Provider } from 'react-redux';
 import {
@@ -90,7 +90,7 @@ describe('<AnomalyDetectionOverview /> spec', () => {
         },
       });
       const { container, getByText, getAllByText } = renderWithRouter();
-      await wait();
+      await waitFor(()=>{});
       expect(container).toMatchSnapshot();
       getByText('Anomaly detection');
       getByText('Monitor HTTP responses');
@@ -117,7 +117,7 @@ describe('<AnomalyDetectionOverview /> spec', () => {
         },
       });
       const { container, getByText, queryByText } = renderWithRouter();
-      await wait();
+      await waitFor(()=>{});
       expect(container).toMatchSnapshot();
       getByText('Anomaly detection');
       getByText('Monitor HTTP responses');
diff --git a/public/pages/Overview/containers/__tests__/__snapshots__/AnomalyDetectionOverview.test.tsx.snap b/public/pages/Overview/containers/__tests__/__snapshots__/AnomalyDetectionOverview.test.tsx.snap
index 02ae7497..70de4873 100644
--- a/public/pages/Overview/containers/__tests__/__snapshots__/AnomalyDetectionOverview.test.tsx.snap
+++ b/public/pages/Overview/containers/__tests__/__snapshots__/AnomalyDetectionOverview.test.tsx.snap
@@ -2,8 +2,8 @@
 
 exports[`<AnomalyDetectionOverview /> spec No sample detectors created renders component 1`] = `
 <div>
-  <div
-    class="euiPageHeader euiPageHeader--responsive"
+  <header
+    class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
   >
     <div
       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -39,7 +39,7 @@ exports[`<AnomalyDetectionOverview /> spec No sample detectors created renders c
         </a>
       </div>
     </div>
-  </div>
+  </header>
   <div
     class="euiText euiText--medium"
   >
@@ -62,13 +62,29 @@ exports[`<AnomalyDetectionOverview /> spec No sample detectors created renders c
         width="16"
         xmlns="http://www.w3.org/2000/svg"
       />
+      <svg
+        aria-hidden="true"
+        aria-label="External link"
+        class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+        focusable="false"
+        height="16"
+        role="img"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      />
+      <span
+        class="euiScreenReaderOnly"
+      >
+        (opens in a new tab or window)
+      </span>
     </a>
   </div>
   <div
     class="euiSpacer euiSpacer--xl"
   />
   <div
-    class="euiPanel euiPanel--paddingMedium"
+    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
     style="padding: 20px;"
   >
     <div
@@ -159,6 +175,22 @@ exports[`<AnomalyDetectionOverview /> spec No sample detectors created renders c
                       width="16"
                       xmlns="http://www.w3.org/2000/svg"
                     />
+                    <svg
+                      aria-hidden="true"
+                      aria-label="External link"
+                      class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                      focusable="false"
+                      height="16"
+                      role="img"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                    <span
+                      class="euiScreenReaderOnly"
+                    >
+                      (opens in a new tab or window)
+                    </span>
                   </a>
                 </div>
               </div>
@@ -215,6 +247,22 @@ exports[`<AnomalyDetectionOverview /> spec No sample detectors created renders c
                       width="16"
                       xmlns="http://www.w3.org/2000/svg"
                     />
+                    <svg
+                      aria-hidden="true"
+                      aria-label="External link"
+                      class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                      focusable="false"
+                      height="16"
+                      role="img"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                    <span
+                      class="euiScreenReaderOnly"
+                    >
+                      (opens in a new tab or window)
+                    </span>
                   </a>
                 </div>
               </div>
@@ -271,6 +319,22 @@ exports[`<AnomalyDetectionOverview /> spec No sample detectors created renders c
                       width="16"
                       xmlns="http://www.w3.org/2000/svg"
                     />
+                    <svg
+                      aria-hidden="true"
+                      aria-label="External link"
+                      class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                      focusable="false"
+                      height="16"
+                      role="img"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                    <span
+                      class="euiScreenReaderOnly"
+                    >
+                      (opens in a new tab or window)
+                    </span>
                   </a>
                 </div>
               </div>
@@ -327,6 +391,22 @@ exports[`<AnomalyDetectionOverview /> spec No sample detectors created renders c
                       width="16"
                       xmlns="http://www.w3.org/2000/svg"
                     />
+                    <svg
+                      aria-hidden="true"
+                      aria-label="External link"
+                      class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                      focusable="false"
+                      height="16"
+                      role="img"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                    <span
+                      class="euiScreenReaderOnly"
+                    >
+                      (opens in a new tab or window)
+                    </span>
                   </a>
                 </div>
               </div>
@@ -340,7 +420,7 @@ exports[`<AnomalyDetectionOverview /> spec No sample detectors created renders c
     class="euiSpacer euiSpacer--xl"
   />
   <div
-    class="euiPanel euiPanel--paddingMedium"
+    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
     style="padding: 20px;"
   >
     <div
@@ -401,7 +481,7 @@ exports[`<AnomalyDetectionOverview /> spec No sample detectors created renders c
               style="height: auto;"
             >
               <div
-                class="euiPanel euiPanel--paddingMedium"
+                class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
                 style="padding: 20px;"
               >
                 <div
@@ -530,7 +610,7 @@ exports[`<AnomalyDetectionOverview /> spec No sample detectors created renders c
               style="height: auto;"
             >
               <div
-                class="euiPanel euiPanel--paddingMedium"
+                class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
                 style="padding: 20px;"
               >
                 <div
@@ -659,7 +739,7 @@ exports[`<AnomalyDetectionOverview /> spec No sample detectors created renders c
               style="height: auto;"
             >
               <div
-                class="euiPanel euiPanel--paddingMedium"
+                class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
                 style="padding: 20px;"
               >
                 <div
@@ -794,8 +874,8 @@ exports[`<AnomalyDetectionOverview /> spec No sample detectors created renders c
 
 exports[`<AnomalyDetectionOverview /> spec Some detectors created renders component with non-sample detector 1`] = `
 <div>
-  <div
-    class="euiPageHeader euiPageHeader--responsive"
+  <header
+    class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
   >
     <div
       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -831,7 +911,7 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
         </a>
       </div>
     </div>
-  </div>
+  </header>
   <div
     class="euiText euiText--medium"
   >
@@ -858,13 +938,32 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
           d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
         />
       </svg>
+      <svg
+        aria-label="External link"
+        class="euiIcon euiIcon--small euiLink__externalIcon"
+        focusable="false"
+        height="16"
+        role="img"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
+        />
+      </svg>
+      <span
+        class="euiScreenReaderOnly"
+      >
+        (opens in a new tab or window)
+      </span>
     </a>
   </div>
   <div
     class="euiSpacer euiSpacer--xl"
   />
   <div
-    class="euiPanel euiPanel--paddingMedium"
+    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
     style="padding: 20px;"
   >
     <div
@@ -959,6 +1058,25 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
                         d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
                       />
                     </svg>
+                    <svg
+                      aria-label="External link"
+                      class="euiIcon euiIcon--small euiLink__externalIcon"
+                      focusable="false"
+                      height="16"
+                      role="img"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
+                      />
+                    </svg>
+                    <span
+                      class="euiScreenReaderOnly"
+                    >
+                      (opens in a new tab or window)
+                    </span>
                   </a>
                 </div>
               </div>
@@ -1019,6 +1137,25 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
                         d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
                       />
                     </svg>
+                    <svg
+                      aria-label="External link"
+                      class="euiIcon euiIcon--small euiLink__externalIcon"
+                      focusable="false"
+                      height="16"
+                      role="img"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
+                      />
+                    </svg>
+                    <span
+                      class="euiScreenReaderOnly"
+                    >
+                      (opens in a new tab or window)
+                    </span>
                   </a>
                 </div>
               </div>
@@ -1079,6 +1216,25 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
                         d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
                       />
                     </svg>
+                    <svg
+                      aria-label="External link"
+                      class="euiIcon euiIcon--small euiLink__externalIcon"
+                      focusable="false"
+                      height="16"
+                      role="img"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
+                      />
+                    </svg>
+                    <span
+                      class="euiScreenReaderOnly"
+                    >
+                      (opens in a new tab or window)
+                    </span>
                   </a>
                 </div>
               </div>
@@ -1139,6 +1295,25 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
                         d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
                       />
                     </svg>
+                    <svg
+                      aria-label="External link"
+                      class="euiIcon euiIcon--small euiLink__externalIcon"
+                      focusable="false"
+                      height="16"
+                      role="img"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
+                      />
+                    </svg>
+                    <span
+                      class="euiScreenReaderOnly"
+                    >
+                      (opens in a new tab or window)
+                    </span>
                   </a>
                 </div>
               </div>
@@ -1152,7 +1327,7 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
     class="euiSpacer euiSpacer--xl"
   />
   <div
-    class="euiPanel euiPanel--paddingMedium"
+    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
     style="padding: 20px;"
   >
     <div
@@ -1213,7 +1388,7 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
               style="height: auto;"
             >
               <div
-                class="euiPanel euiPanel--paddingMedium"
+                class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
                 style="padding: 20px;"
               >
                 <div
@@ -1346,7 +1521,7 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
               style="height: auto;"
             >
               <div
-                class="euiPanel euiPanel--paddingMedium"
+                class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
                 style="padding: 20px;"
               >
                 <div
@@ -1479,7 +1654,7 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
               style="height: auto;"
             >
               <div
-                class="euiPanel euiPanel--paddingMedium"
+                class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
                 style="padding: 20px;"
               >
                 <div
@@ -1618,8 +1793,8 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
 
 exports[`<AnomalyDetectionOverview /> spec Some detectors created renders component with sample detector 1`] = `
 <div>
-  <div
-    class="euiPageHeader euiPageHeader--responsive"
+  <header
+    class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
   >
     <div
       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -1655,7 +1830,7 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
         </a>
       </div>
     </div>
-  </div>
+  </header>
   <div
     class="euiText euiText--medium"
   >
@@ -1682,13 +1857,32 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
           d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
         />
       </svg>
+      <svg
+        aria-label="External link"
+        class="euiIcon euiIcon--small euiLink__externalIcon"
+        focusable="false"
+        height="16"
+        role="img"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
+        />
+      </svg>
+      <span
+        class="euiScreenReaderOnly"
+      >
+        (opens in a new tab or window)
+      </span>
     </a>
   </div>
   <div
     class="euiSpacer euiSpacer--xl"
   />
   <div
-    class="euiPanel euiPanel--paddingMedium"
+    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
     style="padding: 20px;"
   >
     <div
@@ -1783,6 +1977,25 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
                         d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
                       />
                     </svg>
+                    <svg
+                      aria-label="External link"
+                      class="euiIcon euiIcon--small euiLink__externalIcon"
+                      focusable="false"
+                      height="16"
+                      role="img"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
+                      />
+                    </svg>
+                    <span
+                      class="euiScreenReaderOnly"
+                    >
+                      (opens in a new tab or window)
+                    </span>
                   </a>
                 </div>
               </div>
@@ -1843,6 +2056,25 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
                         d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
                       />
                     </svg>
+                    <svg
+                      aria-label="External link"
+                      class="euiIcon euiIcon--small euiLink__externalIcon"
+                      focusable="false"
+                      height="16"
+                      role="img"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
+                      />
+                    </svg>
+                    <span
+                      class="euiScreenReaderOnly"
+                    >
+                      (opens in a new tab or window)
+                    </span>
                   </a>
                 </div>
               </div>
@@ -1903,6 +2135,25 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
                         d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
                       />
                     </svg>
+                    <svg
+                      aria-label="External link"
+                      class="euiIcon euiIcon--small euiLink__externalIcon"
+                      focusable="false"
+                      height="16"
+                      role="img"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
+                      />
+                    </svg>
+                    <span
+                      class="euiScreenReaderOnly"
+                    >
+                      (opens in a new tab or window)
+                    </span>
                   </a>
                 </div>
               </div>
@@ -1963,6 +2214,25 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
                         d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
                       />
                     </svg>
+                    <svg
+                      aria-label="External link"
+                      class="euiIcon euiIcon--small euiLink__externalIcon"
+                      focusable="false"
+                      height="16"
+                      role="img"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
+                      />
+                    </svg>
+                    <span
+                      class="euiScreenReaderOnly"
+                    >
+                      (opens in a new tab or window)
+                    </span>
                   </a>
                 </div>
               </div>
@@ -1976,7 +2246,7 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
     class="euiSpacer euiSpacer--xl"
   />
   <div
-    class="euiPanel euiPanel--paddingMedium"
+    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
     style="padding: 20px;"
   >
     <div
@@ -2037,19 +2307,10 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
               style="height: auto;"
             >
               <div
-                class="euiPanel euiPanel--paddingMedium euiPanel--hasBetaBadge"
+                betabadgelabel="INSTALLED"
+                class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
                 style="padding: 20px;"
               >
-                <span
-                  class="euiPanel__betaBadgeWrapper"
-                >
-                  <span
-                    class="euiBetaBadge euiPanel__betaBadge"
-                    title="INSTALLED"
-                  >
-                    INSTALLED
-                  </span>
-                </span>
                 <div
                   class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
                   style="padding: 0px;"
@@ -2190,7 +2451,7 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
               style="height: auto;"
             >
               <div
-                class="euiPanel euiPanel--paddingMedium"
+                class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
                 style="padding: 20px;"
               >
                 <div
@@ -2323,7 +2584,7 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
               style="height: auto;"
             >
               <div
-                class="euiPanel euiPanel--paddingMedium"
+                class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
                 style="padding: 20px;"
               >
                 <div
diff --git a/public/pages/ReviewAndCreate/components/__tests__/__snapshots__/AdditionalSettings.test.tsx.snap b/public/pages/ReviewAndCreate/components/__tests__/__snapshots__/AdditionalSettings.test.tsx.snap
index dea4fd2a..4b8acd17 100644
--- a/public/pages/ReviewAndCreate/components/__tests__/__snapshots__/AdditionalSettings.test.tsx.snap
+++ b/public/pages/ReviewAndCreate/components/__tests__/__snapshots__/AdditionalSettings.test.tsx.snap
@@ -36,7 +36,7 @@ exports[`<AdditionalSettings /> spec renders the component with high cardinality
               role="columnheader"
               scope="col"
             >
-              <div
+              <span
                 class="euiTableCellContent"
               >
                 <span
@@ -45,7 +45,7 @@ exports[`<AdditionalSettings /> spec renders the component with high cardinality
                 >
                   Category field
                 </span>
-              </div>
+              </span>
             </th>
             <th
               class="euiTableHeaderCell"
@@ -53,7 +53,7 @@ exports[`<AdditionalSettings /> spec renders the component with high cardinality
               role="columnheader"
               scope="col"
             >
-              <div
+              <span
                 class="euiTableCellContent"
               >
                 <span
@@ -62,7 +62,7 @@ exports[`<AdditionalSettings /> spec renders the component with high cardinality
                 >
                   Shingle size
                 </span>
-              </div>
+              </span>
             </th>
           </tr>
         </thead>
@@ -150,7 +150,7 @@ exports[`<AdditionalSettings /> spec renders the component with high cardinality
               role="columnheader"
               scope="col"
             >
-              <div
+              <span
                 class="euiTableCellContent"
               >
                 <span
@@ -159,7 +159,7 @@ exports[`<AdditionalSettings /> spec renders the component with high cardinality
                 >
                   Category field
                 </span>
-              </div>
+              </span>
             </th>
             <th
               class="euiTableHeaderCell"
@@ -167,7 +167,7 @@ exports[`<AdditionalSettings /> spec renders the component with high cardinality
               role="columnheader"
               scope="col"
             >
-              <div
+              <span
                 class="euiTableCellContent"
               >
                 <span
@@ -176,7 +176,7 @@ exports[`<AdditionalSettings /> spec renders the component with high cardinality
                 >
                   Shingle size
                 </span>
-              </div>
+              </span>
             </th>
           </tr>
         </thead>
diff --git a/public/pages/ReviewAndCreate/components/__tests__/__snapshots__/DetectorDefinitionFields.test.tsx.snap b/public/pages/ReviewAndCreate/components/__tests__/__snapshots__/DetectorDefinitionFields.test.tsx.snap
index b63606bd..ea9b77cd 100644
--- a/public/pages/ReviewAndCreate/components/__tests__/__snapshots__/DetectorDefinitionFields.test.tsx.snap
+++ b/public/pages/ReviewAndCreate/components/__tests__/__snapshots__/DetectorDefinitionFields.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<AdditionalSettings /> spec renders the component in create mode (no ID) 1`] = `
 <div>
   <div
-    class="euiPanel euiPanel--paddingMedium"
+    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
     style="padding: 20px; margin: 0px;"
   >
     <div
@@ -352,7 +352,7 @@ exports[`<AdditionalSettings /> spec renders the component in create mode (no ID
 exports[`<AdditionalSettings /> spec renders the component in edit mode (with ID) 1`] = `
 <div>
   <div
-    class="euiPanel euiPanel--paddingMedium"
+    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
     style="padding: 20px; margin: 0px;"
   >
     <div
diff --git a/public/pages/ReviewAndCreate/containers/__tests__/__snapshots__/ReviewAndCreate.test.tsx.snap b/public/pages/ReviewAndCreate/containers/__tests__/__snapshots__/ReviewAndCreate.test.tsx.snap
index 1f5884c3..8aab4508 100644
--- a/public/pages/ReviewAndCreate/containers/__tests__/__snapshots__/ReviewAndCreate.test.tsx.snap
+++ b/public/pages/ReviewAndCreate/containers/__tests__/__snapshots__/ReviewAndCreate.test.tsx.snap
@@ -2,14 +2,14 @@
 
 exports[`<ReviewAndCreate /> spec renders the component 1`] = `
 <div
-  class="euiPage"
+  class="euiPage euiPage--paddingMedium euiPage--grow"
   style="margin-top: -24px;"
 >
-  <main
-    class="euiPageBody"
+  <div
+    class="euiPageBody euiPageBody--borderRadiusNone"
   >
-    <div
-      class="euiPageHeader euiPageHeader--responsive"
+    <header
+      class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
     >
       <div
         class="euiPageHeaderSection"
@@ -21,9 +21,9 @@ exports[`<ReviewAndCreate /> spec renders the component 1`] = `
           Review and create 
         </h1>
       </div>
-    </div>
+    </header>
     <div
-      class="euiPanel euiPanel--paddingMedium"
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       style="padding: 20px; margin: 0px;"
     >
       <div
@@ -404,7 +404,7 @@ exports[`<ReviewAndCreate /> spec renders the component 1`] = `
       class="euiSpacer euiSpacer--l"
     />
     <div
-      class="euiPanel euiPanel--paddingMedium"
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       style="padding: 20px;"
     >
       <div
@@ -531,7 +531,7 @@ exports[`<ReviewAndCreate /> spec renders the component 1`] = `
                         role="columnheader"
                         scope="col"
                       >
-                        <div
+                        <span
                           class="euiTableCellContent"
                         >
                           <span
@@ -540,7 +540,7 @@ exports[`<ReviewAndCreate /> spec renders the component 1`] = `
                           >
                             Category field
                           </span>
-                        </div>
+                        </span>
                       </th>
                       <th
                         class="euiTableHeaderCell"
@@ -548,7 +548,7 @@ exports[`<ReviewAndCreate /> spec renders the component 1`] = `
                         role="columnheader"
                         scope="col"
                       >
-                        <div
+                        <span
                           class="euiTableCellContent"
                         >
                           <span
@@ -557,7 +557,7 @@ exports[`<ReviewAndCreate /> spec renders the component 1`] = `
                           >
                             Shingle size
                           </span>
-                        </div>
+                        </span>
                       </th>
                     </tr>
                   </thead>
@@ -610,7 +610,7 @@ exports[`<ReviewAndCreate /> spec renders the component 1`] = `
               class="euiSpacer euiSpacer--l"
             />
             <div
-              class="euiPanel euiPanel--paddingMedium"
+              class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
               style="padding: 20px;"
             >
               <div
@@ -706,7 +706,7 @@ exports[`<ReviewAndCreate /> spec renders the component 1`] = `
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonContent__icon"
+                                        class="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                                         focusable="false"
                                         height="16"
                                         role="img"
@@ -755,13 +755,12 @@ exports[`<ReviewAndCreate /> spec renders the component 1`] = `
                                 >
                                   <span
                                     class="euiTableCellContent__text"
-                                    title="Feature name; Sorted in ascending order"
+                                    title="Feature name"
                                   >
                                     Feature name
                                   </span>
                                   <svg
                                     aria-hidden="true"
-                                    aria-label="Sorted in ascending order"
                                     class="euiIcon euiIcon--medium euiIcon-isLoading euiTableSortIcon"
                                     focusable="false"
                                     height="16"
@@ -770,11 +769,6 @@ exports[`<ReviewAndCreate /> spec renders the component 1`] = `
                                     width="16"
                                     xmlns="http://www.w3.org/2000/svg"
                                   />
-                                  <span
-                                    class="euiScreenReaderOnly"
-                                  >
-                                    Click to sort in descending order
-                                  </span>
                                 </span>
                               </button>
                             </th>
@@ -784,7 +778,7 @@ exports[`<ReviewAndCreate /> spec renders the component 1`] = `
                               role="columnheader"
                               scope="col"
                             >
-                              <div
+                              <span
                                 class="euiTableCellContent"
                               >
                                 <span
@@ -793,7 +787,7 @@ exports[`<ReviewAndCreate /> spec renders the component 1`] = `
                                 >
                                   Feature definition
                                 </span>
-                              </div>
+                              </span>
                             </th>
                             <th
                               class="euiTableHeaderCell"
@@ -801,7 +795,7 @@ exports[`<ReviewAndCreate /> spec renders the component 1`] = `
                               role="columnheader"
                               scope="col"
                             >
-                              <div
+                              <span
                                 class="euiTableCellContent"
                               >
                                 <span
@@ -810,7 +804,7 @@ exports[`<ReviewAndCreate /> spec renders the component 1`] = `
                                 >
                                   Feature state
                                 </span>
-                              </div>
+                              </span>
                             </th>
                           </tr>
                         </thead>
@@ -848,7 +842,7 @@ exports[`<ReviewAndCreate /> spec renders the component 1`] = `
       class="euiSpacer euiSpacer--l"
     />
     <div
-      class="euiPanel euiPanel--paddingMedium"
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       style="padding: 20px; margin: 0px;"
     >
       <div
@@ -986,6 +980,6 @@ exports[`<ReviewAndCreate /> spec renders the component 1`] = `
         </div>
       </div>
     </div>
-  </main>
+  </div>
 </div>
 `;
diff --git a/server/router.ts b/server/router.ts
index 3b44076f..1a9b2de5 100644
--- a/server/router.ts
+++ b/server/router.ts
@@ -61,7 +61,6 @@ export default (iRouter: IRouter, basePath: String): Router => {
                 validate: {
                   params: schema.any(),
                   query: schema.any(),
-                  body: schema.any(),
                 },
               },
               requestHandler(handler)
diff --git a/test/jest.config.js b/test/jest.config.js
index e887e2e1..843c5078 100644
--- a/test/jest.config.js
+++ b/test/jest.config.js
@@ -18,6 +18,7 @@ module.exports = {
   moduleNameMapper: {
     '\\.(css|less|scss)$': '<rootDir>/test/mocks/styleMock.ts',
   },
+  testEnvironment: 'jest-environment-jsdom',
   coverageReporters: ['lcov', 'text', 'cobertura'],
   testMatch: ['**/*.test.js', '**/*.test.jsx', '**/*.test.ts', '**/*.test.tsx'],
   collectCoverageFrom: [
diff --git a/yarn.lock b/yarn.lock
index 48d8ca1f..15cbf5e7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,36 +2,7 @@
 # yarn lockfile v1
 
 
-"@babel/code-frame@^7.10.4":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.14.5.tgz#23b08d740e83f49c5e59945fbf1b43e80bbf4edb"
-  integrity sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==
-  dependencies:
-    "@babel/highlight" "^7.14.5"
-
-"@babel/helper-validator-identifier@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz#d0f0e277c512e0c938277faa85a3968c9a44c0e8"
-  integrity sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==
-
-"@babel/highlight@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.14.5.tgz#6861a52f03966405001f6aa534a01a24d99e8cd9"
-  integrity sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.14.5"
-    chalk "^2.0.0"
-    js-tokens "^4.0.0"
-
-"@babel/runtime-corejs3@^7.10.2":
-  version "7.14.7"
-  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.14.7.tgz#0ef292bbce40ca00f874c9724ef175a12476465c"
-  integrity sha512-Wvzcw4mBYbTagyBVZpAJWI06auSIj033T/yNE0Zn1xcup83MieCddZA7ls3kme17L4NOGBrQ09Q+nKB41RLWBA==
-  dependencies:
-    core-js-pure "^3.15.0"
-    regenerator-runtime "^0.13.4"
-
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.9.2":
   version "7.14.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.6.tgz#535203bc0892efc7dec60bdc27b2ecf6e409062d"
   integrity sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==
@@ -54,17 +25,6 @@
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
-"@jest/types@^26.6.2":
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/types/-/types-26.6.2.tgz#bef5a532030e1d88a2f5a6d933f84e97226ed48e"
-  integrity sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==
-  dependencies:
-    "@types/istanbul-lib-coverage" "^2.0.0"
-    "@types/istanbul-reports" "^3.0.0"
-    "@types/node" "*"
-    "@types/yargs" "^15.0.0"
-    chalk "^4.0.0"
-
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -110,43 +70,6 @@
   resolved "https://registry.yarnpkg.com/@sideway/pinpoint/-/pinpoint-2.0.0.tgz#cff8ffadc372ad29fd3f78277aeb29e632cc70df"
   integrity sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==
 
-"@testing-library/dom@^7.28.1":
-  version "7.31.2"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.31.2.tgz#df361db38f5212b88555068ab8119f5d841a8c4a"
-  integrity sha512-3UqjCpey6HiTZT92vODYLPxTBWlM8ZOOjr3LX5F37/VRipW2M1kX6I/Cm4VXzteZqfGfagg8yXywpcOgQBlNsQ==
-  dependencies:
-    "@babel/code-frame" "^7.10.4"
-    "@babel/runtime" "^7.12.5"
-    "@types/aria-query" "^4.2.0"
-    aria-query "^4.2.2"
-    chalk "^4.1.0"
-    dom-accessibility-api "^0.5.6"
-    lz-string "^1.4.4"
-    pretty-format "^26.6.2"
-
-"@testing-library/jest-dom@^5.11.4":
-  version "5.14.1"
-  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.14.1.tgz#8501e16f1e55a55d675fe73eecee32cdaddb9766"
-  integrity sha512-dfB7HVIgTNCxH22M1+KU6viG5of2ldoA5ly8Ar8xkezKHKXjRvznCdbMbqjYGgO2xjRbwnR+rR8MLUIqF3kKbQ==
-  dependencies:
-    "@babel/runtime" "^7.9.2"
-    "@types/testing-library__jest-dom" "^5.9.1"
-    aria-query "^4.2.2"
-    chalk "^3.0.0"
-    css "^3.0.0"
-    css.escape "^1.5.1"
-    dom-accessibility-api "^0.5.6"
-    lodash "^4.17.15"
-    redent "^3.0.0"
-
-"@testing-library/react@^11.0.4":
-  version "11.2.7"
-  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-11.2.7.tgz#b29e2e95c6765c815786c0bc1d5aed9cb2bf7818"
-  integrity sha512-tzRNp7pzd5QmbtXNG/mhdcl7Awfu/Iz1RaVHY75zTdOkmHCuzMhRL83gWHSgOAcjS3CCbyfwUHMZgRJb4kAfpA==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-    "@testing-library/dom" "^7.28.1"
-
 "@testing-library/user-event@^12.1.6":
   version "12.8.3"
   resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-12.8.3.tgz#1aa3ed4b9f79340a1e1836bc7f57c501e838704a"
@@ -154,11 +77,6 @@
   dependencies:
     "@babel/runtime" "^7.12.5"
 
-"@types/aria-query@^4.2.0":
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.1.tgz#78b5433344e2f92e8b306c06a5622c50c245bf6b"
-  integrity sha512-S6oPal772qJZHoRZLFc/XoZW2gFvwXusYUmXPXkgxJLuEk2vOt7jc4Yo6z/vtI0EBkbPBVrJJ0B+prLIKiWqHg==
-
 "@types/d3@^3":
   version "3.5.44"
   resolved "https://registry.yarnpkg.com/@types/d3/-/d3-3.5.44.tgz#28635f8bb9adf1cef5bbef2b06778174a9d34383"
@@ -180,33 +98,6 @@
     "@types/react" "*"
     hoist-non-react-statics "^3.3.0"
 
-"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762"
-  integrity sha512-sz7iLqvVUg1gIedBOvlkxPlc8/uVzyS5OwGz1cKjXzkl3FpL3al0crU8YGU1WoHkxn0Wxbw5tyi6hvzJKNzFsw==
-
-"@types/istanbul-lib-report@*":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#c14c24f18ea8190c118ee7562b7ff99a36552686"
-  integrity sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==
-  dependencies:
-    "@types/istanbul-lib-coverage" "*"
-
-"@types/istanbul-reports@^3.0.0":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz#9153fe98bba2bd565a63add9436d6f0d7f8468ff"
-  integrity sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==
-  dependencies:
-    "@types/istanbul-lib-report" "*"
-
-"@types/jest@*":
-  version "26.0.23"
-  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.23.tgz#a1b7eab3c503b80451d019efb588ec63522ee4e7"
-  integrity sha512-ZHLmWMJ9jJ9PTiT58juykZpL7KjwJywFN3Rr2pTSkyQfydf/rk22yS7W8p5DaVUMQ2BQC7oYiU3FjbTM/mYrOA==
-  dependencies:
-    jest-diff "^26.0.0"
-    pretty-format "^26.0.0"
-
 "@types/minimatch@*":
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.4.tgz#f0ec25dbf2f0e4b18647313ac031134ca5b24b21"
@@ -268,25 +159,6 @@
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.1.tgz#18845205e86ff0038517aab7a18a62a6b9f71275"
   integrity sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==
 
-"@types/testing-library__jest-dom@^5.9.1":
-  version "5.14.0"
-  resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.0.tgz#98eb7537cb5502bcca7a0d82acf5f245a2e6c322"
-  integrity sha512-l2P2GO+hFF4Liye+fAajT1qBqvZOiL79YMpEvgGs1xTK7hECxBI8Wz4J7ntACJNiJ9r0vXQqYovroXRLPDja6A==
-  dependencies:
-    "@types/jest" "*"
-
-"@types/yargs-parser@*":
-  version "20.2.0"
-  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-20.2.0.tgz#dd3e6699ba3237f0348cd085e4698780204842f9"
-  integrity sha512-37RSHht+gzzgYeobbG+KWryeAW8J33Nhr69cjTqSYymXVZEN9NbRYWoYlRtDhHKPVT1FyNKwaTPC1NynKZpzRA==
-
-"@types/yargs@^15.0.0":
-  version "15.0.13"
-  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.13.tgz#34f7fec8b389d7f3c1fd08026a5763e072d3c6dc"
-  integrity sha512-kQ5JNTrbDv3Rp5X2n/iUu37IJBDU2gsZ5R/g1/KHOOEc5IKfUFjXT6DENPGduh08I/pamwtEq4oul7gUqKTQDQ==
-  dependencies:
-    "@types/yargs-parser" "*"
-
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@@ -507,7 +379,7 @@ ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
-ansi-styles@^4.0.0, ansi-styles@^4.1.0:
+ansi-styles@^4.0.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
   integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
@@ -547,14 +419,6 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
-aria-query@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
-  integrity sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==
-  dependencies:
-    "@babel/runtime" "^7.10.2"
-    "@babel/runtime-corejs3" "^7.10.2"
-
 arr-diff@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
@@ -899,7 +763,7 @@ chalk@^1.0.0, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
+chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -908,22 +772,6 @@ chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
-  integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
-chalk@^4.0.0, chalk@^4.1.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.1.tgz#c80b3fab28bf6371e6863325eee67e618b77e6ad"
-  integrity sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
 check-more-types@2.24.0:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600"
@@ -1114,11 +962,6 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
-core-js-pure@^3.15.0:
-  version "3.15.2"
-  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.15.2.tgz#c8e0874822705f3385d3197af9348f7c9ae2e3ce"
-  integrity sha512-D42L7RYh1J2grW8ttxoY1+17Y4wXZeKe7uyplAI3FkNQyI5OgBIAjUfFiTPfL1rs0qLpxaabITNbjKl1Sp82tA==
-
 core-js@^2.4.0, core-js@^2.5.0:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
@@ -1196,20 +1039,6 @@ crypto-browserify@^3.11.0:
     randombytes "^2.0.0"
     randomfill "^1.0.3"
 
-css.escape@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
-  integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=
-
-css@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/css/-/css-3.0.0.tgz#4447a4d58fdd03367c516ca9f64ae365cee4aa5d"
-  integrity sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==
-  dependencies:
-    inherits "^2.0.4"
-    source-map "^0.6.1"
-    source-map-resolve "^0.6.0"
-
 csstype@^3.0.2:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
@@ -1303,11 +1132,6 @@ des.js@^1.0.0:
     inherits "^2.0.1"
     minimalistic-assert "^1.0.0"
 
-diff-sequences@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.6.2.tgz#48ba99157de1923412eed41db6b6d4aa9ca7c0b1"
-  integrity sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==
-
 diffie-hellman@^5.0.0:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
@@ -1324,11 +1148,6 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
-dom-accessibility-api@^0.5.6:
-  version "0.5.6"
-  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.6.tgz#3f5d43b52c7a3bd68b5fb63fa47b4e4c1fdf65a9"
-  integrity sha512-DplGLZd8L1lN64jlT27N9TVSESFR5STaEJvX+thCby7fuCHonfPpAlodYc3vuUYbDuDec5w8AMP7oCM5TWFsqw==
-
 domain-browser@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
@@ -1859,11 +1678,6 @@ has-flag@^3.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
   integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
 
-has-flag@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
-  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
-
 has-value@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
@@ -2239,21 +2053,6 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
-jest-diff@^26.0.0:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-26.6.2.tgz#1aa7468b52c3a68d7d5c5fdcdfcd5e49bd164394"
-  integrity sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==
-  dependencies:
-    chalk "^4.0.0"
-    diff-sequences "^26.6.2"
-    jest-get-type "^26.3.0"
-    pretty-format "^26.6.2"
-
-jest-get-type@^26.3.0:
-  version "26.3.0"
-  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0"
-  integrity sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==
-
 joi@^17.3.0:
   version "17.4.0"
   resolved "https://registry.yarnpkg.com/joi/-/joi-17.4.0.tgz#b5c2277c8519e016316e49ababd41a1908d9ef20"
@@ -2265,7 +2064,7 @@ joi@^17.3.0:
     "@sideway/formula" "^3.0.0"
     "@sideway/pinpoint" "^2.0.0"
 
-"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
+"js-tokens@^3.0.0 || ^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
@@ -2427,7 +2226,7 @@ lodash.isplainobject@^4.0.6:
   resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
   integrity sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=
 
-lodash@^4.17.15, lodash@^4.17.21, lodash@^4.17.4:
+lodash@^4.17.21, lodash@^4.17.4:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -2477,11 +2276,6 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
-lz-string@^1.4.4:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
-  integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=
-
 make-dir@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
@@ -2592,11 +2386,6 @@ mimic-fn@^2.1.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
-min-indent@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
-  integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
-
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
@@ -2996,16 +2785,6 @@ prettier@^2.1.1:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.4.1.tgz#671e11c89c14a4cfc876ce564106c4a6726c9f5c"
   integrity sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==
 
-pretty-format@^26.0.0, pretty-format@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-26.6.2.tgz#e35c2705f14cb7fe2fe94fa078345b444120fc93"
-  integrity sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==
-  dependencies:
-    "@jest/types" "^26.6.2"
-    ansi-regex "^5.0.0"
-    ansi-styles "^4.0.0"
-    react-is "^17.0.1"
-
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -3139,11 +2918,6 @@ react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-is@^17.0.1:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
-  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
-
 react-plotly.js@^2.4.0:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/react-plotly.js/-/react-plotly.js-2.5.1.tgz#11182bf599ef11a0dbfcd171c6f5645535a2b486"
@@ -3201,14 +2975,6 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
-redent@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
-  integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==
-  dependencies:
-    indent-string "^4.0.0"
-    strip-indent "^3.0.0"
-
 redux-mock-store@^1.5.3:
   version "1.5.4"
   resolved "https://registry.yarnpkg.com/redux-mock-store/-/redux-mock-store-1.5.4.tgz#90d02495fd918ddbaa96b83aef626287c9ab5872"
@@ -3504,14 +3270,6 @@ source-map-resolve@^0.5.0:
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
-source-map-resolve@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.6.0.tgz#3d9df87e236b53f16d01e58150fc7711138e5ed2"
-  integrity sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==
-  dependencies:
-    atob "^2.1.2"
-    decode-uri-component "^0.2.0"
-
 source-map-support@~0.5.12:
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
@@ -3701,13 +3459,6 @@ strip-final-newline@^2.0.0:
   resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
   integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
 
-strip-indent@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
-  integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==
-  dependencies:
-    min-indent "^1.0.0"
-
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -3720,13 +3471,6 @@ supports-color@^5.3.0:
   dependencies:
     has-flag "^3.0.0"
 
-supports-color@^7.1.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
-  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
-  dependencies:
-    has-flag "^4.0.0"
-
 symbol-observable@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"

From 61c319b44b7abfd7fc2b6533760bc1cee9e4453f Mon Sep 17 00:00:00 2001
From: Amit Galitzky <amgalitz@amazon.com>
Date: Wed, 6 Apr 2022 17:44:23 +0000
Subject: [PATCH 2/3] changed sampledatabox to euicard, changed style
 incompatibility

Signed-off-by: Amit Galitzky <amgalitz@amazon.com>
---
 .../components/ContentPanel/ContentPanel.tsx  |   8 +-
 .../SampleDataBox/SampleDataBox.tsx           |  16 +-
 .../__snapshots__/SampleDataBox.test.tsx.snap | 329 +++---
 .../containers/AnomalyDetectionOverview.tsx   |   5 +-
 .../AnomalyDetectionOverview.test.tsx.snap    | 975 +++++++-----------
 .../DetectorDefinitionFields.test.tsx.snap    |   4 +-
 .../ReviewAndCreate.test.tsx.snap             |   4 +-
 7 files changed, 498 insertions(+), 843 deletions(-)

diff --git a/public/components/ContentPanel/ContentPanel.tsx b/public/components/ContentPanel/ContentPanel.tsx
index 466ee02e..690ee45f 100644
--- a/public/components/ContentPanel/ContentPanel.tsx
+++ b/public/components/ContentPanel/ContentPanel.tsx
@@ -41,7 +41,6 @@ type ContentPanelProps = {
   hideBody?: boolean;
   titleDataTestSubj?: string;
 };
-
 const ContentPanel = (props: ContentPanelProps) => {
   const titleDataTestSubj = get(
     props,
@@ -50,12 +49,11 @@ const ContentPanel = (props: ContentPanelProps) => {
   );
   return (
     <EuiPanel
-      style={{ padding: '20px', ...props.panelStyles }}
+      style={{ padding: '20px'}}
       className={props.contentPanelClassName}
-      betaBadgeLabel={props.badgeLabel}
     >
       <EuiFlexGroup
-        style={{ padding: '0px', ...props.titleContainerStyles }}
+        style={{ padding: '0px' }}
         justifyContent="spaceBetween"
         alignItems="center"
       >
@@ -135,7 +133,7 @@ const ContentPanel = (props: ContentPanelProps) => {
             margin="s"
             className={props.horizontalRuleClassName}
           />
-          <div style={{ padding: '10px 0px', ...props.bodyStyles }}>
+          <div style={{ padding: '10px 0px' }}>
             {props.children}
           </div>
         </div>
diff --git a/public/pages/Overview/components/SampleDataBox/SampleDataBox.tsx b/public/pages/Overview/components/SampleDataBox/SampleDataBox.tsx
index 9884e488..367d0c8d 100644
--- a/public/pages/Overview/components/SampleDataBox/SampleDataBox.tsx
+++ b/public/pages/Overview/components/SampleDataBox/SampleDataBox.tsx
@@ -18,6 +18,8 @@ import {
   EuiFlexItem,
   EuiTitle,
   EuiLink,
+  EuiCard,
+  EuiHorizontalRule,
 } from '@elastic/eui';
 import { PLUGIN_NAME } from '../../../../utils/constants';
 
@@ -37,7 +39,7 @@ interface SampleDataBoxProps {
 export const SampleDataBox = (props: SampleDataBoxProps) => {
   return (
     <div style={{ height: 'auto' }}>
-      <ContentPanel
+      <EuiCard
         title={
           <div
             style={{
@@ -62,9 +64,15 @@ export const SampleDataBox = (props: SampleDataBoxProps) => {
           </div>
         }
         titleSize="s"
-        badgeLabel={props.isDataLoaded ? 'INSTALLED' : undefined}
+        betaBadgeLabel={props.isDataLoaded ? 'INSTALLED' : undefined}
+        paddingSize='l'
       >
         <EuiFlexGroup direction="column" gutterSize="l">
+        <EuiHorizontalRule
+              size="full"
+              margin="s"
+            >
+            </EuiHorizontalRule>
           <EuiFlexItem grow={false} style={{ height: '70px' }}>
             <p
               style={{
@@ -118,7 +126,7 @@ export const SampleDataBox = (props: SampleDataBoxProps) => {
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexGroup>
-      </ContentPanel>
+      </EuiCard>
     </div>
   );
-};
+};
\ No newline at end of file
diff --git a/public/pages/Overview/components/SampleDataBox/__tests__/__snapshots__/SampleDataBox.test.tsx.snap b/public/pages/Overview/components/SampleDataBox/__tests__/__snapshots__/SampleDataBox.test.tsx.snap
index 0b92fa45..b80d7919 100644
--- a/public/pages/Overview/components/SampleDataBox/__tests__/__snapshots__/SampleDataBox.test.tsx.snap
+++ b/public/pages/Overview/components/SampleDataBox/__tests__/__snapshots__/SampleDataBox.test.tsx.snap
@@ -5,90 +5,58 @@ exports[`<SampleDataBox /> spec Data is loaded renders component 1`] = `
   style="height: auto;"
 >
   <div
-    betabadgelabel="INSTALLED"
-    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-    style="padding: 20px;"
+    class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned euiCard--hasBetaBadge"
   >
     <div
-      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-      style="padding: 0px;"
+      class="euiCard__content"
     >
-      <div
-        class="euiFlexItem"
+      <span
+        class="euiTitle euiTitle--small euiCard__title"
+        id="random_html_idTitle"
       >
         <div
-          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-          data-test-subj="contentPanelTitle"
+          style="display: flex; flex-direction: row; align-content: flexStart;"
         >
-          <div
-            class="euiFlexItem"
+          <svg
+            aria-hidden="true"
+            class="euiIcon euiIcon--medium"
+            focusable="false"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <div
-              style="display: flex; flex-direction: row; align-content: flexStart;"
-            >
-              <svg
-                aria-hidden="true"
-                class="euiIcon euiIcon--medium"
-                focusable="false"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M7.59 10.059L7.35 5.18h1.3L8.4 10.06h-.81zm.394 1.901a.61.61 0 01-.448-.186.606.606 0 01-.186-.444c0-.174.062-.323.186-.446a.614.614 0 01.448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 01-.189.446.607.607 0 01-.437.184zM2 14a1 1 0 01-.878-1.479l6-11a1 1 0 011.756 0l6 11A1 1 0 0114 14H2zm0-1h12L8 2 2 13z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-              <h2
-                class="euiTitle euiTitle--small"
-                style="margin-left: 12px; margin-top: -3px;"
-              >
-                Sample title
-              </h2>
-              <button
-                class="euiLink euiLink--primary"
-                data-test-subj="flyoutInfoButton"
-                style="margin-left: 12px;"
-                type="button"
-              >
-                Info
-              </button>
-            </div>
-          </div>
-        </div>
-        <div
-          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-        >
-          <div
-            class="euiFlexItem content-panel-subTitle"
-            style="line-height: normal; max-width: 75%;"
-          />
-        </div>
-      </div>
-      <div
-        class="euiFlexItem euiFlexItem--flexGrowZero"
-      >
-        <div
-          class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-        >
-          <div
-            class="euiFlexItem"
-          />
+            <path
+              d="M7.59 10.059L7.35 5.18h1.3L8.4 10.06h-.81zm.394 1.901a.61.61 0 01-.448-.186.606.606 0 01-.186-.444c0-.174.062-.323.186-.446a.614.614 0 01.448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 01-.189.446.607.607 0 01-.437.184zM2 14a1 1 0 01-.878-1.479l6-11a1 1 0 011.756 0l6 11A1 1 0 0114 14H2zm0-1h12L8 2 2 13z"
+              fill-rule="evenodd"
+            />
+          </svg>
+          <h2
+            class="euiTitle euiTitle--small"
+            style="margin-left: 12px; margin-top: -3px;"
+          >
+            Sample title
+          </h2>
+          <button
+            class="euiLink euiLink--primary"
+            data-test-subj="flyoutInfoButton"
+            style="margin-left: 12px;"
+            type="button"
+          >
+            Info
+          </button>
         </div>
-      </div>
-    </div>
-    <div>
-      <hr
-        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
-      />
+      </span>
       <div
-        style="padding: 10px 0px;"
+        class="euiCard__children"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
         >
+          <hr
+            class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
+          />
           <div
             class="euiFlexItem euiFlexItem--flexGrowZero"
             style="height: 70px;"
@@ -140,6 +108,17 @@ exports[`<SampleDataBox /> spec Data is loaded renders component 1`] = `
         </div>
       </div>
     </div>
+    <span
+      class="euiCard__betaBadgeWrapper"
+    >
+      <span
+        class="euiBetaBadge euiBetaBadge--hollow euiCard__betaBadge"
+        id="random_html_idBetaBadge"
+        title="INSTALLED"
+      >
+        INSTALLED
+      </span>
+    </span>
   </div>
 </div>
 `;
@@ -149,89 +128,58 @@ exports[`<SampleDataBox /> spec Data is loading renders component 1`] = `
   style="height: auto;"
 >
   <div
-    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-    style="padding: 20px;"
+    class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned"
   >
     <div
-      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-      style="padding: 0px;"
+      class="euiCard__content"
     >
-      <div
-        class="euiFlexItem"
+      <span
+        class="euiTitle euiTitle--small euiCard__title"
+        id="random_html_idTitle"
       >
         <div
-          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-          data-test-subj="contentPanelTitle"
+          style="display: flex; flex-direction: row; align-content: flexStart;"
         >
-          <div
-            class="euiFlexItem"
+          <svg
+            aria-hidden="true"
+            class="euiIcon euiIcon--medium"
+            focusable="false"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <div
-              style="display: flex; flex-direction: row; align-content: flexStart;"
-            >
-              <svg
-                aria-hidden="true"
-                class="euiIcon euiIcon--medium"
-                focusable="false"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M7.59 10.059L7.35 5.18h1.3L8.4 10.06h-.81zm.394 1.901a.61.61 0 01-.448-.186.606.606 0 01-.186-.444c0-.174.062-.323.186-.446a.614.614 0 01.448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 01-.189.446.607.607 0 01-.437.184zM2 14a1 1 0 01-.878-1.479l6-11a1 1 0 011.756 0l6 11A1 1 0 0114 14H2zm0-1h12L8 2 2 13z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-              <h2
-                class="euiTitle euiTitle--small"
-                style="margin-left: 12px; margin-top: -3px;"
-              >
-                Sample title
-              </h2>
-              <button
-                class="euiLink euiLink--primary"
-                data-test-subj="flyoutInfoButton"
-                style="margin-left: 12px;"
-                type="button"
-              >
-                Info
-              </button>
-            </div>
-          </div>
-        </div>
-        <div
-          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-        >
-          <div
-            class="euiFlexItem content-panel-subTitle"
-            style="line-height: normal; max-width: 75%;"
-          />
-        </div>
-      </div>
-      <div
-        class="euiFlexItem euiFlexItem--flexGrowZero"
-      >
-        <div
-          class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-        >
-          <div
-            class="euiFlexItem"
-          />
+            <path
+              d="M7.59 10.059L7.35 5.18h1.3L8.4 10.06h-.81zm.394 1.901a.61.61 0 01-.448-.186.606.606 0 01-.186-.444c0-.174.062-.323.186-.446a.614.614 0 01.448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 01-.189.446.607.607 0 01-.437.184zM2 14a1 1 0 01-.878-1.479l6-11a1 1 0 011.756 0l6 11A1 1 0 0114 14H2zm0-1h12L8 2 2 13z"
+              fill-rule="evenodd"
+            />
+          </svg>
+          <h2
+            class="euiTitle euiTitle--small"
+            style="margin-left: 12px; margin-top: -3px;"
+          >
+            Sample title
+          </h2>
+          <button
+            class="euiLink euiLink--primary"
+            data-test-subj="flyoutInfoButton"
+            style="margin-left: 12px;"
+            type="button"
+          >
+            Info
+          </button>
         </div>
-      </div>
-    </div>
-    <div>
-      <hr
-        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
-      />
+      </span>
       <div
-        style="padding: 10px 0px;"
+        class="euiCard__children"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
         >
+          <hr
+            class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
+          />
           <div
             class="euiFlexItem euiFlexItem--flexGrowZero"
             style="height: 70px;"
@@ -286,84 +234,53 @@ exports[`<SampleDataBox /> spec Data not loaded renders component 1`] = `
   style="height: auto;"
 >
   <div
-    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-    style="padding: 20px;"
+    class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned"
   >
     <div
-      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-      style="padding: 0px;"
+      class="euiCard__content"
     >
-      <div
-        class="euiFlexItem"
-      >
-        <div
-          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-          data-test-subj="contentPanelTitle"
-        >
-          <div
-            class="euiFlexItem"
-          >
-            <div
-              style="display: flex; flex-direction: row; align-content: flexStart;"
-            >
-              <svg
-                aria-hidden="true"
-                class="euiIcon euiIcon--medium euiIcon-isLoading"
-                focusable="false"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              />
-              <h2
-                class="euiTitle euiTitle--small"
-                style="margin-left: 12px; margin-top: -3px;"
-              >
-                Sample title
-              </h2>
-              <button
-                class="euiLink euiLink--primary"
-                data-test-subj="flyoutInfoButton"
-                style="margin-left: 12px;"
-                type="button"
-              >
-                Info
-              </button>
-            </div>
-          </div>
-        </div>
-        <div
-          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-        >
-          <div
-            class="euiFlexItem content-panel-subTitle"
-            style="line-height: normal; max-width: 75%;"
-          />
-        </div>
-      </div>
-      <div
-        class="euiFlexItem euiFlexItem--flexGrowZero"
+      <span
+        class="euiTitle euiTitle--small euiCard__title"
+        id="random_html_idTitle"
       >
         <div
-          class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+          style="display: flex; flex-direction: row; align-content: flexStart;"
         >
-          <div
-            class="euiFlexItem"
+          <svg
+            aria-hidden="true"
+            class="euiIcon euiIcon--medium euiIcon-isLoading"
+            focusable="false"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
           />
+          <h2
+            class="euiTitle euiTitle--small"
+            style="margin-left: 12px; margin-top: -3px;"
+          >
+            Sample title
+          </h2>
+          <button
+            class="euiLink euiLink--primary"
+            data-test-subj="flyoutInfoButton"
+            style="margin-left: 12px;"
+            type="button"
+          >
+            Info
+          </button>
         </div>
-      </div>
-    </div>
-    <div>
-      <hr
-        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
-      />
+      </span>
       <div
-        style="padding: 10px 0px;"
+        class="euiCard__children"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
         >
+          <hr
+            class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
+          />
           <div
             class="euiFlexItem euiFlexItem--flexGrowZero"
             style="height: 70px;"
diff --git a/public/pages/Overview/containers/AnomalyDetectionOverview.tsx b/public/pages/Overview/containers/AnomalyDetectionOverview.tsx
index 73df69e8..829453be 100644
--- a/public/pages/Overview/containers/AnomalyDetectionOverview.tsx
+++ b/public/pages/Overview/containers/AnomalyDetectionOverview.tsx
@@ -20,6 +20,7 @@ import {
   EuiIcon,
   EuiButton,
   EuiLoadingSpinner,
+  EuiFlexGrid,
 } from '@elastic/eui';
 import React, { Fragment, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -241,7 +242,7 @@ export function AnomalyDetectionOverview(props: AnomalyDetectionOverviewProps) {
         }
         horizontalRuleClassName="hide-horizontal-rule"
       >
-        <EuiFlexGroup direction="row" gutterSize="l">
+        <EuiFlexGrid columns={3} gutterSize="l">
           <EuiFlexItem>
             <SampleDataBox
               title="Monitor HTTP responses"
@@ -343,7 +344,7 @@ export function AnomalyDetectionOverview(props: AnomalyDetectionOverviewProps) {
             />
           </EuiFlexItem>
           <EuiSpacer size="m" />
-        </EuiFlexGroup>
+        </EuiFlexGrid>
       </ContentPanel>
       {showHttpResponseDetailsFlyout ? (
         <SampleDetailsFlyout
diff --git a/public/pages/Overview/containers/__tests__/__snapshots__/AnomalyDetectionOverview.test.tsx.snap b/public/pages/Overview/containers/__tests__/__snapshots__/AnomalyDetectionOverview.test.tsx.snap
index 70de4873..b2a2be54 100644
--- a/public/pages/Overview/containers/__tests__/__snapshots__/AnomalyDetectionOverview.test.tsx.snap
+++ b/public/pages/Overview/containers/__tests__/__snapshots__/AnomalyDetectionOverview.test.tsx.snap
@@ -472,7 +472,7 @@ exports[`<AnomalyDetectionOverview /> spec No sample detectors created renders c
         style="padding: 10px 0px;"
       >
         <div
-          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+          class="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--thirds euiFlexGrid--responsive"
         >
           <div
             class="euiFlexItem"
@@ -481,84 +481,53 @@ exports[`<AnomalyDetectionOverview /> spec No sample detectors created renders c
               style="height: auto;"
             >
               <div
-                class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-                style="padding: 20px;"
+                class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                  style="padding: 0px;"
+                  class="euiCard__content"
                 >
-                  <div
-                    class="euiFlexItem"
+                  <span
+                    class="euiTitle euiTitle--small euiCard__title"
+                    id="random_html_idTitle"
                   >
                     <div
-                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-                      data-test-subj="contentPanelTitle"
-                    >
-                      <div
-                        class="euiFlexItem"
-                      >
-                        <div
-                          style="display: flex; flex-direction: row; align-content: flexStart;"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="euiIcon euiIcon--large euiIcon-isLoading"
-                            focusable="false"
-                            height="16"
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width="16"
-                            xmlns="http://www.w3.org/2000/svg"
-                          />
-                          <h2
-                            class="euiTitle euiTitle--small"
-                            style="margin-left: 12px; margin-top: -3px;"
-                          >
-                            Monitor HTTP responses
-                          </h2>
-                          <button
-                            class="euiLink euiLink--primary"
-                            data-test-subj="flyoutInfoButton"
-                            style="margin-left: 12px;"
-                            type="button"
-                          >
-                            Info
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-                    >
-                      <div
-                        class="euiFlexItem content-panel-subTitle"
-                        style="line-height: normal; max-width: 75%;"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    class="euiFlexItem euiFlexItem--flexGrowZero"
-                  >
-                    <div
-                      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                    >
-                      <div
-                        class="euiFlexItem"
+                      style="display: flex; flex-direction: row; align-content: flexStart;"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--large euiIcon-isLoading"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
                       />
+                      <h2
+                        class="euiTitle euiTitle--small"
+                        style="margin-left: 12px; margin-top: -3px;"
+                      >
+                        Monitor HTTP responses
+                      </h2>
+                      <button
+                        class="euiLink euiLink--primary"
+                        data-test-subj="flyoutInfoButton"
+                        style="margin-left: 12px;"
+                        type="button"
+                      >
+                        Info
+                      </button>
                     </div>
-                  </div>
-                </div>
-                <div>
-                  <hr
-                    class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
-                  />
+                  </span>
                   <div
-                    style="padding: 10px 0px;"
+                    class="euiCard__children"
                   >
                     <div
                       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
                     >
+                      <hr
+                        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
+                      />
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                         style="height: 70px;"
@@ -610,84 +579,53 @@ exports[`<AnomalyDetectionOverview /> spec No sample detectors created renders c
               style="height: auto;"
             >
               <div
-                class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-                style="padding: 20px;"
+                class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                  style="padding: 0px;"
+                  class="euiCard__content"
                 >
-                  <div
-                    class="euiFlexItem"
-                  >
-                    <div
-                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-                      data-test-subj="contentPanelTitle"
-                    >
-                      <div
-                        class="euiFlexItem"
-                      >
-                        <div
-                          style="display: flex; flex-direction: row; align-content: flexStart;"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="euiIcon euiIcon--large euiIcon-isLoading"
-                            focusable="false"
-                            height="16"
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width="16"
-                            xmlns="http://www.w3.org/2000/svg"
-                          />
-                          <h2
-                            class="euiTitle euiTitle--small"
-                            style="margin-left: 12px; margin-top: -3px;"
-                          >
-                            Monitor eCommerce orders
-                          </h2>
-                          <button
-                            class="euiLink euiLink--primary"
-                            data-test-subj="flyoutInfoButton"
-                            style="margin-left: 12px;"
-                            type="button"
-                          >
-                            Info
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-                    >
-                      <div
-                        class="euiFlexItem content-panel-subTitle"
-                        style="line-height: normal; max-width: 75%;"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    class="euiFlexItem euiFlexItem--flexGrowZero"
+                  <span
+                    class="euiTitle euiTitle--small euiCard__title"
+                    id="random_html_idTitle"
                   >
                     <div
-                      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                    >
-                      <div
-                        class="euiFlexItem"
+                      style="display: flex; flex-direction: row; align-content: flexStart;"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--large euiIcon-isLoading"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
                       />
+                      <h2
+                        class="euiTitle euiTitle--small"
+                        style="margin-left: 12px; margin-top: -3px;"
+                      >
+                        Monitor eCommerce orders
+                      </h2>
+                      <button
+                        class="euiLink euiLink--primary"
+                        data-test-subj="flyoutInfoButton"
+                        style="margin-left: 12px;"
+                        type="button"
+                      >
+                        Info
+                      </button>
                     </div>
-                  </div>
-                </div>
-                <div>
-                  <hr
-                    class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
-                  />
+                  </span>
                   <div
-                    style="padding: 10px 0px;"
+                    class="euiCard__children"
                   >
                     <div
                       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
                     >
+                      <hr
+                        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
+                      />
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                         style="height: 70px;"
@@ -739,84 +677,53 @@ exports[`<AnomalyDetectionOverview /> spec No sample detectors created renders c
               style="height: auto;"
             >
               <div
-                class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-                style="padding: 20px;"
+                class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                  style="padding: 0px;"
+                  class="euiCard__content"
                 >
-                  <div
-                    class="euiFlexItem"
-                  >
-                    <div
-                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-                      data-test-subj="contentPanelTitle"
-                    >
-                      <div
-                        class="euiFlexItem"
-                      >
-                        <div
-                          style="display: flex; flex-direction: row; align-content: flexStart;"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="euiIcon euiIcon--large euiIcon-isLoading"
-                            focusable="false"
-                            height="16"
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width="16"
-                            xmlns="http://www.w3.org/2000/svg"
-                          />
-                          <h2
-                            class="euiTitle euiTitle--small"
-                            style="margin-left: 12px; margin-top: -3px;"
-                          >
-                            Monitor host health
-                          </h2>
-                          <button
-                            class="euiLink euiLink--primary"
-                            data-test-subj="flyoutInfoButton"
-                            style="margin-left: 12px;"
-                            type="button"
-                          >
-                            Info
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-                    >
-                      <div
-                        class="euiFlexItem content-panel-subTitle"
-                        style="line-height: normal; max-width: 75%;"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    class="euiFlexItem euiFlexItem--flexGrowZero"
+                  <span
+                    class="euiTitle euiTitle--small euiCard__title"
+                    id="random_html_idTitle"
                   >
                     <div
-                      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                    >
-                      <div
-                        class="euiFlexItem"
+                      style="display: flex; flex-direction: row; align-content: flexStart;"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--large euiIcon-isLoading"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
                       />
+                      <h2
+                        class="euiTitle euiTitle--small"
+                        style="margin-left: 12px; margin-top: -3px;"
+                      >
+                        Monitor host health
+                      </h2>
+                      <button
+                        class="euiLink euiLink--primary"
+                        data-test-subj="flyoutInfoButton"
+                        style="margin-left: 12px;"
+                        type="button"
+                      >
+                        Info
+                      </button>
                     </div>
-                  </div>
-                </div>
-                <div>
-                  <hr
-                    class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
-                  />
+                  </span>
                   <div
-                    style="padding: 10px 0px;"
+                    class="euiCard__children"
                   >
                     <div
                       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
                     >
+                      <hr
+                        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
+                      />
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                         style="height: 70px;"
@@ -1379,7 +1286,7 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
         style="padding: 10px 0px;"
       >
         <div
-          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+          class="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--thirds euiFlexGrid--responsive"
         >
           <div
             class="euiFlexItem"
@@ -1388,88 +1295,57 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
               style="height: auto;"
             >
               <div
-                class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-                style="padding: 20px;"
+                class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                  style="padding: 0px;"
+                  class="euiCard__content"
                 >
-                  <div
-                    class="euiFlexItem"
+                  <span
+                    class="euiTitle euiTitle--small euiCard__title"
+                    id="random_html_idTitle"
                   >
                     <div
-                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-                      data-test-subj="contentPanelTitle"
-                    >
-                      <div
-                        class="euiFlexItem"
+                      style="display: flex; flex-direction: row; align-content: flexStart;"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--large"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
                       >
-                        <div
-                          style="display: flex; flex-direction: row; align-content: flexStart;"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="euiIcon euiIcon--large"
-                            focusable="false"
-                            height="16"
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width="16"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M12.654 3.48c.248.225.552.389.888.467L11.24 9.43a1.99 1.99 0 00-.915-.404l2.33-5.547zM9.146 9.19a2.008 2.008 0 00-.769.64l-1.572-2c.311-.136.581-.35.785-.618l1.556 1.978zM5.581 7.956l-2.134 4.268a.5.5 0 01-.894-.448l2.134-4.268c.25.22.557.376.894.448zM1 15h13.5a.5.5 0 110 1H.5a.5.5 0 01-.5-.5v-14a.5.5 0 011 0V15zm5-8a1 1 0 110-2 1 1 0 010 2zm4 5a1 1 0 110-2 1 1 0 010 2zm4-9a1 1 0 110-2 1 1 0 010 2z"
-                            />
-                          </svg>
-                          <h2
-                            class="euiTitle euiTitle--small"
-                            style="margin-left: 12px; margin-top: -3px;"
-                          >
-                            Monitor HTTP responses
-                          </h2>
-                          <button
-                            class="euiLink euiLink--primary"
-                            data-test-subj="flyoutInfoButton"
-                            style="margin-left: 12px;"
-                            type="button"
-                          >
-                            Info
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-                    >
-                      <div
-                        class="euiFlexItem content-panel-subTitle"
-                        style="line-height: normal; max-width: 75%;"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    class="euiFlexItem euiFlexItem--flexGrowZero"
-                  >
-                    <div
-                      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                    >
-                      <div
-                        class="euiFlexItem"
-                      />
+                        <path
+                          d="M12.654 3.48c.248.225.552.389.888.467L11.24 9.43a1.99 1.99 0 00-.915-.404l2.33-5.547zM9.146 9.19a2.008 2.008 0 00-.769.64l-1.572-2c.311-.136.581-.35.785-.618l1.556 1.978zM5.581 7.956l-2.134 4.268a.5.5 0 01-.894-.448l2.134-4.268c.25.22.557.376.894.448zM1 15h13.5a.5.5 0 110 1H.5a.5.5 0 01-.5-.5v-14a.5.5 0 011 0V15zm5-8a1 1 0 110-2 1 1 0 010 2zm4 5a1 1 0 110-2 1 1 0 010 2zm4-9a1 1 0 110-2 1 1 0 010 2z"
+                        />
+                      </svg>
+                      <h2
+                        class="euiTitle euiTitle--small"
+                        style="margin-left: 12px; margin-top: -3px;"
+                      >
+                        Monitor HTTP responses
+                      </h2>
+                      <button
+                        class="euiLink euiLink--primary"
+                        data-test-subj="flyoutInfoButton"
+                        style="margin-left: 12px;"
+                        type="button"
+                      >
+                        Info
+                      </button>
                     </div>
-                  </div>
-                </div>
-                <div>
-                  <hr
-                    class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
-                  />
+                  </span>
                   <div
-                    style="padding: 10px 0px;"
+                    class="euiCard__children"
                   >
                     <div
                       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
                     >
+                      <hr
+                        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
+                      />
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                         style="height: 70px;"
@@ -1521,88 +1397,57 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
               style="height: auto;"
             >
               <div
-                class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-                style="padding: 20px;"
+                class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                  style="padding: 0px;"
+                  class="euiCard__content"
                 >
-                  <div
-                    class="euiFlexItem"
+                  <span
+                    class="euiTitle euiTitle--small euiCard__title"
+                    id="random_html_idTitle"
                   >
                     <div
-                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-                      data-test-subj="contentPanelTitle"
-                    >
-                      <div
-                        class="euiFlexItem"
+                      style="display: flex; flex-direction: row; align-content: flexStart;"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--large"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
                       >
-                        <div
-                          style="display: flex; flex-direction: row; align-content: flexStart;"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="euiIcon euiIcon--large"
-                            focusable="false"
-                            height="16"
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width="16"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M14.447 3.724l-6-3a1 1 0 00-.894 0l-6 3A1 1 0 001 4.618v6.764a1 1 0 00.553.894l6 3a1 1 0 00.894 0l6-3a1 1 0 00.553-.894V4.618a1 1 0 00-.553-.894zM5.871 5.897l5.343-2.672 2.158 1.079L8 6.943zM8 1.618l2.096 1.048-5.353 2.677-2.115-1.039zM2 5.11l2.25 1.105V9a.5.5 0 001 0V6.706L7.5 7.811v6.321L2 11.382zm6.5 9.022v-6.32L14 5.11v6.272z"
-                            />
-                          </svg>
-                          <h2
-                            class="euiTitle euiTitle--small"
-                            style="margin-left: 12px; margin-top: -3px;"
-                          >
-                            Monitor eCommerce orders
-                          </h2>
-                          <button
-                            class="euiLink euiLink--primary"
-                            data-test-subj="flyoutInfoButton"
-                            style="margin-left: 12px;"
-                            type="button"
-                          >
-                            Info
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-                    >
-                      <div
-                        class="euiFlexItem content-panel-subTitle"
-                        style="line-height: normal; max-width: 75%;"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    class="euiFlexItem euiFlexItem--flexGrowZero"
-                  >
-                    <div
-                      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                    >
-                      <div
-                        class="euiFlexItem"
-                      />
+                        <path
+                          d="M14.447 3.724l-6-3a1 1 0 00-.894 0l-6 3A1 1 0 001 4.618v6.764a1 1 0 00.553.894l6 3a1 1 0 00.894 0l6-3a1 1 0 00.553-.894V4.618a1 1 0 00-.553-.894zM5.871 5.897l5.343-2.672 2.158 1.079L8 6.943zM8 1.618l2.096 1.048-5.353 2.677-2.115-1.039zM2 5.11l2.25 1.105V9a.5.5 0 001 0V6.706L7.5 7.811v6.321L2 11.382zm6.5 9.022v-6.32L14 5.11v6.272z"
+                        />
+                      </svg>
+                      <h2
+                        class="euiTitle euiTitle--small"
+                        style="margin-left: 12px; margin-top: -3px;"
+                      >
+                        Monitor eCommerce orders
+                      </h2>
+                      <button
+                        class="euiLink euiLink--primary"
+                        data-test-subj="flyoutInfoButton"
+                        style="margin-left: 12px;"
+                        type="button"
+                      >
+                        Info
+                      </button>
                     </div>
-                  </div>
-                </div>
-                <div>
-                  <hr
-                    class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
-                  />
+                  </span>
                   <div
-                    style="padding: 10px 0px;"
+                    class="euiCard__children"
                   >
                     <div
                       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
                     >
+                      <hr
+                        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
+                      />
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                         style="height: 70px;"
@@ -1654,88 +1499,57 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
               style="height: auto;"
             >
               <div
-                class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-                style="padding: 20px;"
+                class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                  style="padding: 0px;"
+                  class="euiCard__content"
                 >
-                  <div
-                    class="euiFlexItem"
+                  <span
+                    class="euiTitle euiTitle--small euiCard__title"
+                    id="random_html_idTitle"
                   >
                     <div
-                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-                      data-test-subj="contentPanelTitle"
-                    >
-                      <div
-                        class="euiFlexItem"
+                      style="display: flex; flex-direction: row; align-content: flexStart;"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--large"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
                       >
-                        <div
-                          style="display: flex; flex-direction: row; align-content: flexStart;"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="euiIcon euiIcon--large"
-                            focusable="false"
-                            height="16"
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width="16"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M12.877 5.847l-1.02 1.02a.5.5 0 01-.708-.707l1.1-1.099c-.05-.053-.1-.106-.152-.157A6.471 6.471 0 008 3.019V4.5a.5.5 0 01-1 0V3.019a6.47 6.47 0 00-4.261 2.055l1.07 1.071a.5.5 0 01-.706.707l-.99-.99A6.46 6.46 0 001.018 10H2.5a.5.5 0 110 1H1.174c.083.353.196.697.337 1.03a.5.5 0 11-.922.39A7.487 7.487 0 010 9.5a7.483 7.483 0 012.197-5.304A7.487 7.487 0 017.5 2a7.487 7.487 0 015.304 2.197A7.483 7.483 0 0115 9.5a7.487 7.487 0 01-.59 2.92.5.5 0 01-.92-.39c.14-.333.253-.677.336-1.03H12.5a.5.5 0 110-1h1.481a6.483 6.483 0 00-1.104-4.153zm-6.041 5.317a.993.993 0 01-.01-1.404c.384-.385 2.882-2.002 3.149-1.735.267.267-1.35 2.765-1.735 3.15a.993.993 0 01-1.404-.01z"
-                            />
-                          </svg>
-                          <h2
-                            class="euiTitle euiTitle--small"
-                            style="margin-left: 12px; margin-top: -3px;"
-                          >
-                            Monitor host health
-                          </h2>
-                          <button
-                            class="euiLink euiLink--primary"
-                            data-test-subj="flyoutInfoButton"
-                            style="margin-left: 12px;"
-                            type="button"
-                          >
-                            Info
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-                    >
-                      <div
-                        class="euiFlexItem content-panel-subTitle"
-                        style="line-height: normal; max-width: 75%;"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    class="euiFlexItem euiFlexItem--flexGrowZero"
-                  >
-                    <div
-                      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                    >
-                      <div
-                        class="euiFlexItem"
-                      />
+                        <path
+                          d="M12.877 5.847l-1.02 1.02a.5.5 0 01-.708-.707l1.1-1.099c-.05-.053-.1-.106-.152-.157A6.471 6.471 0 008 3.019V4.5a.5.5 0 01-1 0V3.019a6.47 6.47 0 00-4.261 2.055l1.07 1.071a.5.5 0 01-.706.707l-.99-.99A6.46 6.46 0 001.018 10H2.5a.5.5 0 110 1H1.174c.083.353.196.697.337 1.03a.5.5 0 11-.922.39A7.487 7.487 0 010 9.5a7.483 7.483 0 012.197-5.304A7.487 7.487 0 017.5 2a7.487 7.487 0 015.304 2.197A7.483 7.483 0 0115 9.5a7.487 7.487 0 01-.59 2.92.5.5 0 01-.92-.39c.14-.333.253-.677.336-1.03H12.5a.5.5 0 110-1h1.481a6.483 6.483 0 00-1.104-4.153zm-6.041 5.317a.993.993 0 01-.01-1.404c.384-.385 2.882-2.002 3.149-1.735.267.267-1.35 2.765-1.735 3.15a.993.993 0 01-1.404-.01z"
+                        />
+                      </svg>
+                      <h2
+                        class="euiTitle euiTitle--small"
+                        style="margin-left: 12px; margin-top: -3px;"
+                      >
+                        Monitor host health
+                      </h2>
+                      <button
+                        class="euiLink euiLink--primary"
+                        data-test-subj="flyoutInfoButton"
+                        style="margin-left: 12px;"
+                        type="button"
+                      >
+                        Info
+                      </button>
                     </div>
-                  </div>
-                </div>
-                <div>
-                  <hr
-                    class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
-                  />
+                  </span>
                   <div
-                    style="padding: 10px 0px;"
+                    class="euiCard__children"
                   >
                     <div
                       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
                     >
+                      <hr
+                        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
+                      />
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                         style="height: 70px;"
@@ -2298,7 +2112,7 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
         style="padding: 10px 0px;"
       >
         <div
-          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+          class="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--thirds euiFlexGrid--responsive"
         >
           <div
             class="euiFlexItem"
@@ -2307,89 +2121,57 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
               style="height: auto;"
             >
               <div
-                betabadgelabel="INSTALLED"
-                class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-                style="padding: 20px;"
+                class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned euiCard--hasBetaBadge"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                  style="padding: 0px;"
+                  class="euiCard__content"
                 >
-                  <div
-                    class="euiFlexItem"
+                  <span
+                    class="euiTitle euiTitle--small euiCard__title"
+                    id="random_html_idTitle"
                   >
                     <div
-                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-                      data-test-subj="contentPanelTitle"
-                    >
-                      <div
-                        class="euiFlexItem"
+                      style="display: flex; flex-direction: row; align-content: flexStart;"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--large"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
                       >
-                        <div
-                          style="display: flex; flex-direction: row; align-content: flexStart;"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="euiIcon euiIcon--large"
-                            focusable="false"
-                            height="16"
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width="16"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M12.654 3.48c.248.225.552.389.888.467L11.24 9.43a1.99 1.99 0 00-.915-.404l2.33-5.547zM9.146 9.19a2.008 2.008 0 00-.769.64l-1.572-2c.311-.136.581-.35.785-.618l1.556 1.978zM5.581 7.956l-2.134 4.268a.5.5 0 01-.894-.448l2.134-4.268c.25.22.557.376.894.448zM1 15h13.5a.5.5 0 110 1H.5a.5.5 0 01-.5-.5v-14a.5.5 0 011 0V15zm5-8a1 1 0 110-2 1 1 0 010 2zm4 5a1 1 0 110-2 1 1 0 010 2zm4-9a1 1 0 110-2 1 1 0 010 2z"
-                            />
-                          </svg>
-                          <h2
-                            class="euiTitle euiTitle--small"
-                            style="margin-left: 12px; margin-top: -3px;"
-                          >
-                            Monitor HTTP responses
-                          </h2>
-                          <button
-                            class="euiLink euiLink--primary"
-                            data-test-subj="flyoutInfoButton"
-                            style="margin-left: 12px;"
-                            type="button"
-                          >
-                            Info
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-                    >
-                      <div
-                        class="euiFlexItem content-panel-subTitle"
-                        style="line-height: normal; max-width: 75%;"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    class="euiFlexItem euiFlexItem--flexGrowZero"
-                  >
-                    <div
-                      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                    >
-                      <div
-                        class="euiFlexItem"
-                      />
+                        <path
+                          d="M12.654 3.48c.248.225.552.389.888.467L11.24 9.43a1.99 1.99 0 00-.915-.404l2.33-5.547zM9.146 9.19a2.008 2.008 0 00-.769.64l-1.572-2c.311-.136.581-.35.785-.618l1.556 1.978zM5.581 7.956l-2.134 4.268a.5.5 0 01-.894-.448l2.134-4.268c.25.22.557.376.894.448zM1 15h13.5a.5.5 0 110 1H.5a.5.5 0 01-.5-.5v-14a.5.5 0 011 0V15zm5-8a1 1 0 110-2 1 1 0 010 2zm4 5a1 1 0 110-2 1 1 0 010 2zm4-9a1 1 0 110-2 1 1 0 010 2z"
+                        />
+                      </svg>
+                      <h2
+                        class="euiTitle euiTitle--small"
+                        style="margin-left: 12px; margin-top: -3px;"
+                      >
+                        Monitor HTTP responses
+                      </h2>
+                      <button
+                        class="euiLink euiLink--primary"
+                        data-test-subj="flyoutInfoButton"
+                        style="margin-left: 12px;"
+                        type="button"
+                      >
+                        Info
+                      </button>
                     </div>
-                  </div>
-                </div>
-                <div>
-                  <hr
-                    class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
-                  />
+                  </span>
                   <div
-                    style="padding: 10px 0px;"
+                    class="euiCard__children"
                   >
                     <div
                       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
                     >
+                      <hr
+                        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
+                      />
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                         style="height: 70px;"
@@ -2441,6 +2223,17 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
                     </div>
                   </div>
                 </div>
+                <span
+                  class="euiCard__betaBadgeWrapper"
+                >
+                  <span
+                    class="euiBetaBadge euiBetaBadge--hollow euiCard__betaBadge"
+                    id="random_html_idBetaBadge"
+                    title="INSTALLED"
+                  >
+                    INSTALLED
+                  </span>
+                </span>
               </div>
             </div>
           </div>
@@ -2451,88 +2244,57 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
               style="height: auto;"
             >
               <div
-                class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-                style="padding: 20px;"
+                class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                  style="padding: 0px;"
+                  class="euiCard__content"
                 >
-                  <div
-                    class="euiFlexItem"
+                  <span
+                    class="euiTitle euiTitle--small euiCard__title"
+                    id="random_html_idTitle"
                   >
                     <div
-                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-                      data-test-subj="contentPanelTitle"
-                    >
-                      <div
-                        class="euiFlexItem"
+                      style="display: flex; flex-direction: row; align-content: flexStart;"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--large"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
                       >
-                        <div
-                          style="display: flex; flex-direction: row; align-content: flexStart;"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="euiIcon euiIcon--large"
-                            focusable="false"
-                            height="16"
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width="16"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M14.447 3.724l-6-3a1 1 0 00-.894 0l-6 3A1 1 0 001 4.618v6.764a1 1 0 00.553.894l6 3a1 1 0 00.894 0l6-3a1 1 0 00.553-.894V4.618a1 1 0 00-.553-.894zM5.871 5.897l5.343-2.672 2.158 1.079L8 6.943zM8 1.618l2.096 1.048-5.353 2.677-2.115-1.039zM2 5.11l2.25 1.105V9a.5.5 0 001 0V6.706L7.5 7.811v6.321L2 11.382zm6.5 9.022v-6.32L14 5.11v6.272z"
-                            />
-                          </svg>
-                          <h2
-                            class="euiTitle euiTitle--small"
-                            style="margin-left: 12px; margin-top: -3px;"
-                          >
-                            Monitor eCommerce orders
-                          </h2>
-                          <button
-                            class="euiLink euiLink--primary"
-                            data-test-subj="flyoutInfoButton"
-                            style="margin-left: 12px;"
-                            type="button"
-                          >
-                            Info
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-                    >
-                      <div
-                        class="euiFlexItem content-panel-subTitle"
-                        style="line-height: normal; max-width: 75%;"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    class="euiFlexItem euiFlexItem--flexGrowZero"
-                  >
-                    <div
-                      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                    >
-                      <div
-                        class="euiFlexItem"
-                      />
+                        <path
+                          d="M14.447 3.724l-6-3a1 1 0 00-.894 0l-6 3A1 1 0 001 4.618v6.764a1 1 0 00.553.894l6 3a1 1 0 00.894 0l6-3a1 1 0 00.553-.894V4.618a1 1 0 00-.553-.894zM5.871 5.897l5.343-2.672 2.158 1.079L8 6.943zM8 1.618l2.096 1.048-5.353 2.677-2.115-1.039zM2 5.11l2.25 1.105V9a.5.5 0 001 0V6.706L7.5 7.811v6.321L2 11.382zm6.5 9.022v-6.32L14 5.11v6.272z"
+                        />
+                      </svg>
+                      <h2
+                        class="euiTitle euiTitle--small"
+                        style="margin-left: 12px; margin-top: -3px;"
+                      >
+                        Monitor eCommerce orders
+                      </h2>
+                      <button
+                        class="euiLink euiLink--primary"
+                        data-test-subj="flyoutInfoButton"
+                        style="margin-left: 12px;"
+                        type="button"
+                      >
+                        Info
+                      </button>
                     </div>
-                  </div>
-                </div>
-                <div>
-                  <hr
-                    class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
-                  />
+                  </span>
                   <div
-                    style="padding: 10px 0px;"
+                    class="euiCard__children"
                   >
                     <div
                       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
                     >
+                      <hr
+                        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
+                      />
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                         style="height: 70px;"
@@ -2584,88 +2346,57 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
               style="height: auto;"
             >
               <div
-                class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-                style="padding: 20px;"
+                class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                  style="padding: 0px;"
+                  class="euiCard__content"
                 >
-                  <div
-                    class="euiFlexItem"
+                  <span
+                    class="euiTitle euiTitle--small euiCard__title"
+                    id="random_html_idTitle"
                   >
                     <div
-                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-                      data-test-subj="contentPanelTitle"
-                    >
-                      <div
-                        class="euiFlexItem"
+                      style="display: flex; flex-direction: row; align-content: flexStart;"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--large"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
                       >
-                        <div
-                          style="display: flex; flex-direction: row; align-content: flexStart;"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="euiIcon euiIcon--large"
-                            focusable="false"
-                            height="16"
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width="16"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M12.877 5.847l-1.02 1.02a.5.5 0 01-.708-.707l1.1-1.099c-.05-.053-.1-.106-.152-.157A6.471 6.471 0 008 3.019V4.5a.5.5 0 01-1 0V3.019a6.47 6.47 0 00-4.261 2.055l1.07 1.071a.5.5 0 01-.706.707l-.99-.99A6.46 6.46 0 001.018 10H2.5a.5.5 0 110 1H1.174c.083.353.196.697.337 1.03a.5.5 0 11-.922.39A7.487 7.487 0 010 9.5a7.483 7.483 0 012.197-5.304A7.487 7.487 0 017.5 2a7.487 7.487 0 015.304 2.197A7.483 7.483 0 0115 9.5a7.487 7.487 0 01-.59 2.92.5.5 0 01-.92-.39c.14-.333.253-.677.336-1.03H12.5a.5.5 0 110-1h1.481a6.483 6.483 0 00-1.104-4.153zm-6.041 5.317a.993.993 0 01-.01-1.404c.384-.385 2.882-2.002 3.149-1.735.267.267-1.35 2.765-1.735 3.15a.993.993 0 01-1.404-.01z"
-                            />
-                          </svg>
-                          <h2
-                            class="euiTitle euiTitle--small"
-                            style="margin-left: 12px; margin-top: -3px;"
-                          >
-                            Monitor host health
-                          </h2>
-                          <button
-                            class="euiLink euiLink--primary"
-                            data-test-subj="flyoutInfoButton"
-                            style="margin-left: 12px;"
-                            type="button"
-                          >
-                            Info
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-                    >
-                      <div
-                        class="euiFlexItem content-panel-subTitle"
-                        style="line-height: normal; max-width: 75%;"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    class="euiFlexItem euiFlexItem--flexGrowZero"
-                  >
-                    <div
-                      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                    >
-                      <div
-                        class="euiFlexItem"
-                      />
+                        <path
+                          d="M12.877 5.847l-1.02 1.02a.5.5 0 01-.708-.707l1.1-1.099c-.05-.053-.1-.106-.152-.157A6.471 6.471 0 008 3.019V4.5a.5.5 0 01-1 0V3.019a6.47 6.47 0 00-4.261 2.055l1.07 1.071a.5.5 0 01-.706.707l-.99-.99A6.46 6.46 0 001.018 10H2.5a.5.5 0 110 1H1.174c.083.353.196.697.337 1.03a.5.5 0 11-.922.39A7.487 7.487 0 010 9.5a7.483 7.483 0 012.197-5.304A7.487 7.487 0 017.5 2a7.487 7.487 0 015.304 2.197A7.483 7.483 0 0115 9.5a7.487 7.487 0 01-.59 2.92.5.5 0 01-.92-.39c.14-.333.253-.677.336-1.03H12.5a.5.5 0 110-1h1.481a6.483 6.483 0 00-1.104-4.153zm-6.041 5.317a.993.993 0 01-.01-1.404c.384-.385 2.882-2.002 3.149-1.735.267.267-1.35 2.765-1.735 3.15a.993.993 0 01-1.404-.01z"
+                        />
+                      </svg>
+                      <h2
+                        class="euiTitle euiTitle--small"
+                        style="margin-left: 12px; margin-top: -3px;"
+                      >
+                        Monitor host health
+                      </h2>
+                      <button
+                        class="euiLink euiLink--primary"
+                        data-test-subj="flyoutInfoButton"
+                        style="margin-left: 12px;"
+                        type="button"
+                      >
+                        Info
+                      </button>
                     </div>
-                  </div>
-                </div>
-                <div>
-                  <hr
-                    class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
-                  />
+                  </span>
                   <div
-                    style="padding: 10px 0px;"
+                    class="euiCard__children"
                   >
                     <div
                       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
                     >
+                      <hr
+                        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
+                      />
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                         style="height: 70px;"
diff --git a/public/pages/ReviewAndCreate/components/__tests__/__snapshots__/DetectorDefinitionFields.test.tsx.snap b/public/pages/ReviewAndCreate/components/__tests__/__snapshots__/DetectorDefinitionFields.test.tsx.snap
index ea9b77cd..1dd16f3f 100644
--- a/public/pages/ReviewAndCreate/components/__tests__/__snapshots__/DetectorDefinitionFields.test.tsx.snap
+++ b/public/pages/ReviewAndCreate/components/__tests__/__snapshots__/DetectorDefinitionFields.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`<AdditionalSettings /> spec renders the component in create mode (no ID
 <div>
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-    style="padding: 20px; margin: 0px;"
+    style="padding: 20px;"
   >
     <div
       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -353,7 +353,7 @@ exports[`<AdditionalSettings /> spec renders the component in edit mode (with ID
 <div>
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-    style="padding: 20px; margin: 0px;"
+    style="padding: 20px;"
   >
     <div
       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
diff --git a/public/pages/ReviewAndCreate/containers/__tests__/__snapshots__/ReviewAndCreate.test.tsx.snap b/public/pages/ReviewAndCreate/containers/__tests__/__snapshots__/ReviewAndCreate.test.tsx.snap
index 8aab4508..6d34eba6 100644
--- a/public/pages/ReviewAndCreate/containers/__tests__/__snapshots__/ReviewAndCreate.test.tsx.snap
+++ b/public/pages/ReviewAndCreate/containers/__tests__/__snapshots__/ReviewAndCreate.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`<ReviewAndCreate /> spec renders the component 1`] = `
     </header>
     <div
       class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-      style="padding: 20px; margin: 0px;"
+      style="padding: 20px;"
     >
       <div
         class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -843,7 +843,7 @@ exports[`<ReviewAndCreate /> spec renders the component 1`] = `
     />
     <div
       class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-      style="padding: 20px; margin: 0px;"
+      style="padding: 20px;"
     >
       <div
         class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"

From d92c6f1a129932a79637d9230bf86af5b470ad91 Mon Sep 17 00:00:00 2001
From: Amit Galitzky <amgalitz@amazon.com>
Date: Wed, 6 Apr 2022 18:34:21 +0000
Subject: [PATCH 3/3] updated unit and integ test workflows for 2.0

Signed-off-by: Amit Galitzky <amgalitz@amazon.com>
---
 .github/workflows/remote-integ-tests-workflow.yml           | 6 +++---
 .github/workflows/unit-tests-workflow.yml                   | 2 +-
 .../containers/__tests__/DetectorConfig.test.tsx            | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/remote-integ-tests-workflow.yml b/.github/workflows/remote-integ-tests-workflow.yml
index 5235c362..21f496d4 100644
--- a/.github/workflows/remote-integ-tests-workflow.yml
+++ b/.github/workflows/remote-integ-tests-workflow.yml
@@ -10,15 +10,15 @@ on:
     branches:
       - main
 env:
-  OPENSEARCH_DASHBOARDS_VERSION: '1.x'
-  OPENSEARCH_VERSION: '1.3.0-SNAPSHOT'
+  OPENSEARCH_DASHBOARDS_VERSION: 'main'
+  OPENSEARCH_VERSION: '2.0.0-alpha1-SNAPSHOT'
 jobs:
   test-without-security:
     name: Run integ tests without security
     strategy:
       matrix:
         os: [ubuntu-latest]
-        java: [14]
+        java: [11]
     runs-on: ${{ matrix.os }}
     steps:
       - name: Checkout Anomaly-Detection
diff --git a/.github/workflows/unit-tests-workflow.yml b/.github/workflows/unit-tests-workflow.yml
index 4f0c9276..e72e3e88 100644
--- a/.github/workflows/unit-tests-workflow.yml
+++ b/.github/workflows/unit-tests-workflow.yml
@@ -7,7 +7,7 @@ on:
     branches:
       - main
 env:
-  OPENSEARCH_DASHBOARDS_VERSION: '1.x'
+  OPENSEARCH_DASHBOARDS_VERSION: 'main'
 jobs:
   tests:
     name: Run unit tests
diff --git a/public/pages/DetectorConfig/containers/__tests__/DetectorConfig.test.tsx b/public/pages/DetectorConfig/containers/__tests__/DetectorConfig.test.tsx
index d3e3a6a2..2766e3bd 100644
--- a/public/pages/DetectorConfig/containers/__tests__/DetectorConfig.test.tsx
+++ b/public/pages/DetectorConfig/containers/__tests__/DetectorConfig.test.tsx
@@ -17,7 +17,7 @@ import {
   Route,
   Switch,
 } from 'react-router-dom';
-import { render, fireEvent, wait, waitFor } from '@testing-library/react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
 import { DetectorConfig } from '../DetectorConfig';
 import {
   Detector,