diff --git a/package.json b/package.json
index b5907154e7ac9..92d072bad674e 100644
--- a/package.json
+++ b/package.json
@@ -180,7 +180,7 @@
     "https-proxy-agent": "^5.0.0",
     "inert": "^5.1.0",
     "joi": "^13.5.2",
-    "jquery": "^3.4.1",
+    "jquery": "^3.5.0",
     "js-yaml": "3.13.1",
     "json-stringify-pretty-compact": "1.0.4",
     "json-stringify-safe": "5.0.1",
diff --git a/packages/kbn-ui-framework/package.json b/packages/kbn-ui-framework/package.json
index a74e020a7cda9..9488d9053e529 100644
--- a/packages/kbn-ui-framework/package.json
+++ b/packages/kbn-ui-framework/package.json
@@ -50,7 +50,7 @@
     "html": "1.0.0",
     "html-loader": "^0.5.5",
     "imports-loader": "^0.8.0",
-    "jquery": "^3.4.1",
+    "jquery": "^3.5.0",
     "keymirror": "0.1.1",
     "moment": "^2.20.1",
     "node-sass": "^4.9.4",
diff --git a/packages/kbn-ui-shared-deps/package.json b/packages/kbn-ui-shared-deps/package.json
new file mode 100644
index 0000000000000..ae883a5032fe7
--- /dev/null
+++ b/packages/kbn-ui-shared-deps/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@kbn/ui-shared-deps",
+  "version": "1.0.0",
+  "private": true,
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "node scripts/build",
+    "kbn:bootstrap": "node scripts/build --dev",
+    "kbn:watch": "node scripts/build --watch"
+  },
+  "dependencies": {
+    "@elastic/charts": "19.2.0",
+    "@elastic/eui": "22.3.0",
+    "@kbn/i18n": "1.0.0",
+    "abortcontroller-polyfill": "^1.4.0",
+    "angular": "^1.7.9",
+    "compression-webpack-plugin": "^3.1.0",
+    "core-js": "^3.6.4",
+    "custom-event-polyfill": "^0.3.0",
+    "elasticsearch-browser": "^16.7.0",
+    "jquery": "^3.5.0",
+    "moment": "^2.24.0",
+    "moment-timezone": "^0.5.27",
+    "monaco-editor": "~0.17.0",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-intl": "^2.8.0",
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
+    "regenerator-runtime": "^0.13.3",
+    "rxjs": "^6.5.3",
+    "symbol-observable": "^1.2.0",
+    "whatwg-fetch": "^3.0.0"
+  },
+  "devDependencies": {
+    "@kbn/babel-preset": "1.0.0",
+    "@kbn/dev-utils": "1.0.0",
+    "css-loader": "^3.4.2",
+    "del": "^5.1.0",
+    "webpack": "^4.41.5"
+  }
+}
diff --git a/src/legacy/core_plugins/console/public/src/directives/history.html b/src/legacy/core_plugins/console/public/src/directives/history.html
index e13642225a5f3..df0e61686addb 100644
--- a/src/legacy/core_plugins/console/public/src/directives/history.html
+++ b/src/legacy/core_plugins/console/public/src/directives/history.html
@@ -32,7 +32,7 @@
     </li>
   </ul>
 
-  <sense-history-viewer class="conHistory__viewer" req="history.viewingReq" />
+  <sense-history-viewer class="conHistory__viewer" req="history.viewingReq"></sense-history-viewer>
 </div>
 
 <div class="conHistory__footer">
diff --git a/src/legacy/core_plugins/kibana/public/context/components/loading_button/loading_button.html b/src/legacy/core_plugins/kibana/public/context/components/loading_button/loading_button.html
index b994ede80dbed..3f83a78a343b4 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/loading_button/loading_button.html
+++ b/src/legacy/core_plugins/kibana/public/context/components/loading_button/loading_button.html
@@ -5,8 +5,7 @@
   <span class="kuiButton__inner">
     <span
       class="kuiButton__icon kuiIcon fa-spinner fa-spin"
-      ng-class="isDisabled ? ['fa-spinner', 'fa-spin'] : [icon]"
-    />
-    <span ng-transclude />
+      ng-class="isDisabled ? ['fa-spinner', 'fa-spin'] : [icon]"></span>
+    <span ng-transclude></span>
   </span>
 </button>
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/listing/dashboard_listing_ng_wrapper.html b/src/legacy/core_plugins/kibana/public/dashboard/listing/dashboard_listing_ng_wrapper.html
index 8fb0cfe5621c5..6c81673a78880 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/listing/dashboard_listing_ng_wrapper.html
+++ b/src/legacy/core_plugins/kibana/public/dashboard/listing/dashboard_listing_ng_wrapper.html
@@ -4,4 +4,4 @@
   listing-limit="listingLimit"
   hide-write-controls="hideWriteControls"
   initial-filter="initialFilter"
-/>
+></dashboard-listing>
diff --git a/src/legacy/core_plugins/kibana/public/home/home_ng_wrapper.html b/src/legacy/core_plugins/kibana/public/home/home_ng_wrapper.html
index 2a046a0549cb5..2ffe56e40073c 100644
--- a/src/legacy/core_plugins/kibana/public/home/home_ng_wrapper.html
+++ b/src/legacy/core_plugins/kibana/public/home/home_ng_wrapper.html
@@ -1,4 +1,4 @@
 <home-app
   directories="directories"
   recently-accessed="recentlyAccessed"
-/>
+></home-app>
diff --git a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html
index 5a31a97c56966..434bc6f243997 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html
+++ b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html
@@ -66,7 +66,7 @@
     </div>
   </div>
 
-  <div class="visualize" ng-if="!chrome.getVisible()"/>
+  <div class="visualize" ng-if="!chrome.getVisible()"></div>
 
   <visualization-editor
     ng-if="chrome.getVisible()"
@@ -75,6 +75,6 @@
     time-range="timeRange"
     filters="globalFilters"
     class="visEditor__content"
-  />
+  ></visualization-editor>
 
 </visualize-app>
diff --git a/src/plugins/dashboard/public/application/listing/dashboard_listing_ng_wrapper.html b/src/plugins/dashboard/public/application/listing/dashboard_listing_ng_wrapper.html
new file mode 100644
index 0000000000000..f57c10d1a48dd
--- /dev/null
+++ b/src/plugins/dashboard/public/application/listing/dashboard_listing_ng_wrapper.html
@@ -0,0 +1,11 @@
+<dashboard-listing
+  core="core"
+  create-item="create"
+  get-view-url="getViewUrl"
+  edit-item="editItem"
+  find-items="find"
+  delete-items="delete"
+  listing-limit="listingLimit"
+  hide-write-controls="hideWriteControls"
+  initial-filter="initialFilter"
+></dashboard-listing>
diff --git a/src/plugins/visualize/public/application/editor/editor.html b/src/plugins/visualize/public/application/editor/editor.html
new file mode 100644
index 0000000000000..3c3455fb34f18
--- /dev/null
+++ b/src/plugins/visualize/public/application/editor/editor.html
@@ -0,0 +1,104 @@
+<visualize-app class="app-container visEditor visEditor--{{ vis.type.name }}">
+
+  <!--
+    Local nav.
+    Most visualizations have all search bar components enabled
+    Some visualizations have fewer options but all visualizations have a search bar
+    which is why show-search-baris set to "true".
+    All visualizaions also have least a timepicker \ autorefresh component, which is why
+    show-query-bar is set to "true".
+  -->
+  <kbn-top-nav
+    ng-if="isVisible"
+    app-name="'visualize'"
+    config="topNavMenu"
+    show-search-bar="true"
+    show-query-bar="true"
+    show-query-input="showQueryInput()"
+    show-filter-bar="showFilterBar() && isVisible"
+    show-date-picker="showQueryBarTimePicker()"
+    show-auto-refresh-only="!showQueryBarTimePicker()"
+    query="query"
+    saved-query="savedQuery"
+    screen-title="vis.title"
+    on-query-submit="updateQueryAndFetch"
+    index-patterns="[indexPattern]"
+    filters="filters"
+    on-filters-updated="onFiltersUpdated"
+    date-range-from="timeRange.from"
+    date-range-to="timeRange.to"
+    is-refresh-paused="refreshInterval.pause"
+    refresh-interval="refreshInterval.value"
+    on-refresh-change="onRefreshChange"
+    show-save-query="showSaveQuery"
+    on-saved="updateSavedQuery"
+    on-saved-query-updated="updateSavedQuery"
+    on-clear-saved-query="onClearSavedQuery"
+  >
+  </kbn-top-nav>
+
+  <!--
+    The top nav is hidden in embed mode but the filter bar must still be present so
+    we show the filter bar on its own here if the chrome is not visible.
+  -->
+  <kbn-top-nav
+    ng-if="showFilterBar() && !isVisible"
+
+    app-name="'visualize'"
+    show-search-bar="true"
+    show-filter-bar="true"
+    show-save-query="false"
+    show-date-picker="false"
+
+    filters="filters"
+    on-filters-updated="onFiltersUpdated"
+    index-patterns="[indexPattern]"
+  >
+  </kbn-top-nav>
+
+  <div
+    class="euiCallOut euiCallOut--primary euiCallOut--small hide-for-sharing"
+    ng-if="vis.type.shouldMarkAsExperimentalInUI()"
+    data-test-subj="experimentalVisInfo"
+  >
+    <div class="euiText">
+      <p ng-bind-html="getAdditionalMessage()"></p>
+    </div>
+  </div>
+
+  <visualization-embedded
+    ng-if="!isVisible"
+    class="visualize"
+    vis="vis"
+    embeddable-handler="embeddableHandler"
+    ui-state="uiState"
+    time-range="timeRange"
+    filters="filters"
+    query="query"
+    app-state="appState"
+  ></visualization-embedded>
+
+  <h1
+    class="euiScreenReaderOnly"
+    i18n-id="visualize.pageHeading"
+    i18n-default-message="{chartName} {chartType} visualization"
+    i18n-values="{
+      chartName: savedVis.title,
+      chartType: vis.type.title
+    }"
+  >
+  </h1>
+  <visualization-editor
+    ng-if="isVisible"
+    vis="vis"
+    saved-search="savedSearch"
+    embeddable-handler="embeddableHandler"
+    event-emitter="eventEmitter"
+    ui-state="uiState"
+    time-range="timeRange"
+    filters="filters"
+    query="query"
+    class="visEditor__content"
+  ></visualization-editor>
+
+</visualize-app>
diff --git a/src/ui/public/vis/editors/default/default.html b/src/ui/public/vis/editors/default/default.html
index 3e7a94c77ac42..82364d650b377 100644
--- a/src/ui/public/vis/editors/default/default.html
+++ b/src/ui/public/vis/editors/default/default.html
@@ -1,6 +1,6 @@
 <div class="visEditor--default">
   <div class="collapsible-sidebar visEditor__collapsibleSidebar" ng-class="::getSidebarClass()">
-    <vis-editor-sidebar class="visEditor__sidebar" />
+    <vis-editor-sidebar class="visEditor__sidebar"></vis-editor-sidebar>
     <vis-editor-resizer
       class="visEditor__resizer"
       tabindex="0"
@@ -16,6 +16,6 @@
     render-complete
     data-title="{{vis.title}}"
     data-description="{{vis.description}}"
-  />
+  ></div>
 
 </div>
diff --git a/x-pack/package.json b/x-pack/package.json
index 2ecbc2bdfa950..1d38df6f56dd1 100644
--- a/x-pack/package.json
+++ b/x-pack/package.json
@@ -189,7 +189,7 @@
     "intl": "^1.2.5",
     "io-ts": "^1.4.2",
     "joi": "^13.5.2",
-    "jquery": "^3.4.1",
+    "jquery": "^3.5.0",
     "json-stable-stringify": "^1.0.1",
     "jsonwebtoken": "^8.3.0",
     "jstimezonedetect": "1.0.5",
diff --git a/x-pack/plugins/graph/public/angular/templates/index.html b/x-pack/plugins/graph/public/angular/templates/index.html
new file mode 100644
index 0000000000000..8555658596179
--- /dev/null
+++ b/x-pack/plugins/graph/public/angular/templates/index.html
@@ -0,0 +1,399 @@
+<main id="graphBasic" ng-controller="graphuiPlugin" aria-labelledby="graphHeading">
+  <!-- Local nav. -->
+  <kbn-top-nav name="workspacesTopNav" config="topNavMenu">
+  </kbn-top-nav>
+
+  <div class="gphGraph__menus" ng-show="menus.showInspect">
+    <div>
+      <div
+        class="kuiLocalDropdownTitle"
+        i18n-id="xpack.graph.inspect.title"
+        i18n-default-message="Inspect"
+      ></div>
+
+      <div
+        class="list-group-item"
+        ng-if="(workspace !== null)"
+      >
+        <small class="help-block">http://host:port/{{ selectedIndex.name }}/_graph/explore</small>
+        <ul class="nav nav-tabs">
+          <li ng-class="{active: spymode === 'request'}">
+            <a
+              ng-click="spymode='request'"
+              i18n-id="xpack.graph.inspect.requestTabTitle"
+              i18n-default-message="Request"
+            ></a>
+          </li>
+          <li ng-class="{active: spymode === 'response'}">
+            <a
+              ng-click="spymode='response'"
+              i18n-id="xpack.graph.inspect.responseTabTitle"
+              i18n-default-message="Response"
+            ></a>
+          </li>
+        </ul>
+
+        <div
+          ng-show="spymode == 'request'"
+          ui-ace="{ onLoad: aceLoaded, mode: 'json', advanced: { readOnly: true } }"
+          ng-model="workspace.lastRequest"
+          class="gphSettings__jsonView"
+        ></div>
+        <div
+          ng-show="spymode == 'response'"
+          ui-ace="{ onLoad: aceLoaded, mode: 'json', advanced: { readOnly: true } }"
+          ng-model="workspace.lastResponse"
+          class="gphSettings__jsonView"
+        ></div>
+      </div>
+    </div>
+  </div>
+
+  <div
+    graph-app
+    current-index-pattern="selectedIndex"
+    on-query-submit="submit"
+    index-pattern-provider="indexPatternProvider"
+    redux-store="reduxStore"
+    confirm-wipe-workspace="confirmWipeWorkspace"
+    is-loading="loading"
+    is-initialized="workspaceInitialized || savedWorkspace.id"
+    initial-query="initialQuery"
+    plugin-data-start="pluginDataStart"
+    core-start="coreStart"
+    storage="storage"
+    no-index-patterns="noIndexPatterns"
+  ></div>
+
+  <div class="gphGraph__container" id="GraphSvgContainer" ng-if="workspaceInitialized || savedWorkspace.id">
+    <div
+      class="gphVisualization"
+      graph-visualization
+      nodes="workspace.nodes"
+      edges="workspace.edges"
+      edge-click="clickEdge"
+      node-click="nodeClick"
+    ></div>
+
+    <div id="sidebar" class="gphSidebar" ng-if="workspace !== null">
+
+      <div>
+        <button
+          class="kuiButton kuiButton--basic kuiButton--small"
+          tooltip="{{ ::'xpack.graph.sidebar.topMenu.undoButtonTooltip' | i18n: { defaultMessage: 'Undo' } }}"
+          aria-label="{{ ::'xpack.graph.sidebar.topMenu.undoButtonTooltip' | i18n: { defaultMessage: 'Undo' } }}"
+          type="button"
+          ng-click="workspace.undo()"
+          ng-disabled="workspace === null||workspace.undoLog.length <1"
+        >
+          <span class="kuiIcon fa-history"></span>
+        </button>
+
+        <button
+          class="kuiButton kuiButton--basic kuiButton--small"
+          tooltip="{{ ::'xpack.graph.sidebar.topMenu.redoButtonTooltip' | i18n: { defaultMessage: 'Redo' } }}"
+          aria-label="{{ ::'xpack.graph.sidebar.topMenu.redoButtonTooltip' | i18n: { defaultMessage: 'Redo' } }}"
+          type="button"
+          ng-disabled="workspace === null ||workspace.redoLog.length === 0"
+          ng-click="workspace.redo()"
+        >
+          <span class="kuiIcon fa-repeat"></span>
+        </button>
+
+        <button class="kuiButton kuiButton--basic kuiButton--small" ng-disabled="workspace === null ||liveResponseFields.length === 0||workspace.nodes.length === 0"
+          tooltip="{{ ::'xpack.graph.sidebar.topMenu.expandSelectionButtonTooltip' | i18n: { defaultMessage: 'Expand selection' } }}"
+          aria-label="{{ ::'xpack.graph.sidebar.topMenu.expandSelectionButtonTooltip' | i18n: { defaultMessage: 'Expand selection' } }}"
+          ng-click="setDetail(null);workspace.expandSelecteds({toFields:liveResponseFields});">
+          <span class="kuiIcon fa-plus"></span>
+        </button>
+
+        <button class="kuiButton kuiButton--basic kuiButton--small" ng-disabled="workspace === null ||workspace.nodes.length === 0"
+          tooltip="{{ ::'xpack.graph.sidebar.topMenu.addLinksButtonTooltip' | i18n: { defaultMessage: 'Add links between existing terms' } }}"
+          aria-label="{{ ::'xpack.graph.sidebar.topMenu.addLinksButtonTooltip' | i18n: { defaultMessage: 'Add links between existing terms' } }}"
+          ng-click="workspace.fillInGraph();">
+          <span class="kuiIcon fa-link"></span>
+        </button>
+
+        <button class="kuiButton kuiButton--basic kuiButton--small" ng-disabled="workspace === null ||workspace.nodes.length === 0"
+          tooltip="{{ ::'xpack.graph.sidebar.topMenu.removeVerticesButtonTooltip' | i18n: { defaultMessage: 'Remove vertices from workspace' } }}"
+          aria-label="{{ ::'xpack.graph.sidebar.topMenu.removeVerticesButtonTooltip' | i18n: { defaultMessage: 'Remove vertices from workspace' } }}"
+          ng-click="setDetail(null);workspace.deleteSelection();" data-test-subj="graphRemoveSelection">
+          <span class="kuiIcon fa-trash"></span>
+        </button>
+
+        <button class="kuiButton kuiButton--basic kuiButton--small" ng-disabled="workspace === null ||workspace.selectedNodes.length === 0"
+          tooltip="{{ ::'xpack.graph.sidebar.topMenu.blacklistButtonTooltip' | i18n: { defaultMessage: 'Blacklist selection from return to workspace' } }}"
+          aria-label="{{ ::'xpack.graph.sidebar.topMenu.blacklistButtonTooltip' | i18n: { defaultMessage: 'Blacklist selection from return to workspace' } }}"
+          ng-click="workspace.blacklistSelection();">
+          <span class="kuiIcon fa-ban"></span>
+        </button>
+
+        <button class="kuiButton kuiButton--basic kuiButton--small" ng-disabled="workspace === null ||workspace.selectedNodes.length === 0"
+          tooltip="{{ ::'xpack.graph.sidebar.topMenu.customStyleButtonTooltip' | i18n: { defaultMessage: 'Custom style selected vertices' } }}"
+          aria-label="{{ ::'xpack.graph.sidebar.topMenu.customStyleButtonTooltip' | i18n: { defaultMessage: 'Custom style selected vertices' } }}"
+          ng-click="setDetail({showStyle:true})">
+          <span class="kuiIcon fa-paint-brush"></span>
+        </button>
+
+        <button class="kuiButton kuiButton--basic kuiButton--small" ng-disabled="workspace === null||workspace.nodes.length === 0"
+          tooltip="{{ ::'xpack.graph.sidebar.topMenu.drillDownButtonTooltip' | i18n: { defaultMessage: 'Drill down' } }}"
+          aria-label="{{ ::'xpack.graph.sidebar.topMenu.drillDownButtonTooltip' | i18n: { defaultMessage: 'Drill down' } }}"
+          ng-click="setDetail({showDrillDowns:true})">
+          <span class="kuiIcon fa-info"></span>
+        </button>
+
+        <button class="kuiButton kuiButton--basic kuiButton--small" ng-disabled="workspace.nodes.length === 0" ng-if="workspace.nodes.length === 0||workspace.force === null"
+          tooltip="{{ ::'xpack.graph.sidebar.topMenu.runLayoutButtonTooltip' | i18n: { defaultMessage: 'Run layout' } }}"
+          aria-label="{{ ::'xpack.graph.sidebar.topMenu.runLayoutButtonTooltip' | i18n: { defaultMessage: 'Run layout' } }}"
+          ng-click="workspace.runLayout()" data-test-subj="graphResumeLayout">
+          <span class="kuiIcon fa-play"></span>
+        </button>
+
+        <button class="kuiButton kuiButton--basic kuiButton--small" ng-if="workspace.force !== null&&workspace.nodes.length>0"
+          tooltip="{{ ::'xpack.graph.sidebar.topMenu.pauseLayoutButtonTooltip' | i18n: { defaultMessage: 'Pause layout' } }}"
+          aria-label="{{ ::'xpack.graph.sidebar.topMenu.pauseLayoutButtonTooltip' | i18n: { defaultMessage: 'Pause layout' } }}"
+          ng-click="workspace.stopLayout()" data-test-subj="graphPauseLayout">
+          <span class="kuiIcon fa-pause"></span>
+        </button>
+      </div>
+
+      <div>
+        <div class="gphSidebar__header">
+          {{ ::'xpack.graph.sidebar.selectionsTitle' | i18n: { defaultMessage: 'Selections' } }}
+        </div>
+
+        <div id="vertexSelectionTypesBar">
+          <button
+            tooltip="{{ ::'xpack.graph.sidebar.selections.selectAllButtonTooltip' | i18n: { defaultMessage: 'Select all' } }}"
+            type="button" class="kuiButton kuiButton--basic kuiButton--small gphVertexSelect__button"
+            ng-disabled="workspace.nodes.length === 0" ng-click="setDetail(null);workspace.selectAll()"
+            i18n-id="xpack.graph.sidebar.selections.selectAllButtonLabel"
+            i18n-default-message="all" data-test-subj="graphSelectAll"
+          ></button>
+
+          <button
+            tooltip="{{ ::'xpack.graph.sidebar.selections.selectNoneButtonTooltip' | i18n: { defaultMessage: 'Select none' } }}"
+            type="button" class="kuiButton kuiButton--basic kuiButton--small gphVertexSelect__button"
+            ng-disabled="workspace.nodes.length === 0" ng-click="setDetail(null);workspace.selectNone()"
+            i18n-id="xpack.graph.sidebar.selections.selectNoneButtonLabel"
+            i18n-default-message="none"
+          ></button>
+
+          <button
+            tooltip="{{ ::'xpack.graph.sidebar.selections.invertSelectionButtonTooltip' | i18n: { defaultMessage: 'Invert selection' } }}"
+            type="button" class="kuiButton kuiButton--basic kuiButton--small gphVertexSelect__button"
+            ng-disabled="workspace.nodes.length === 0" ng-click="setDetail(null);workspace.selectInvert()"
+            i18n-id="xpack.graph.sidebar.selections.invertSelectionButtonLabel"
+            i18n-default-message="invert" data-test-subj="graphInvertSelection"
+          ></button>
+
+          <button
+            tooltip="{{ ::'xpack.graph.sidebar.selections.selectNeighboursButtonTooltip' | i18n: { defaultMessage: 'Select neighbours' } }}"
+            type="button" class="kuiButton kuiButton--basic kuiButton--small gphVertexSelect__button"
+            ng-disabled="workspace.selectedNodes.length === 0" ng-click="setDetail(null);workspace.selectNeighbours()"
+            i18n-id="xpack.graph.sidebar.selections.selectNeighboursButtonLabel"
+            i18n-default-message="linked" data-test-subj="graphLinkedSelection"
+          ></button>
+        </div>
+
+        <div class="gphSelectionList">
+          <p
+            ng-if="workspace.selectedNodes.length === 0"
+            class="help-block"
+            i18n-id="xpack.graph.sidebar.selections.noSelectionsHelpText"
+            i18n-default-message="No selections. Click on vertices to add."
+          ></p>
+
+          <div ng-repeat="n in workspace.selectedNodes" class="gphSelectionList__field" ng-class="{'gphSelectionList__field--selected': isSelectedSelected(n)}"
+            ng-click="selectSelected(n)">
+            <svg width="24" height="24">
+              <circle class="gphNode__circle " r="10" cx="12" cy="12" ng-attr-style="fill:{{n.color}}"
+                ng-click="workspace.deselectNode(n)" ></circle>
+
+              <text
+                ng-if="n.icon"
+                class="fa gphNode__text gphSelectionList__icon"
+                text-anchor="middle"
+                x="12"
+                y="16"
+                ng-click="workspace.deselectNode(n)"
+                ng-class="{'gphNode__text--inverse': isColorDark(n.color)}"
+              >{{n.icon.code}}</text>
+            </svg>
+            <span>{{n.label}}</span>
+            <span ng-if="n.numChildren>0"> (+{{n.numChildren}})</span>
+
+          </div>
+        </div>
+      </div>
+
+      <!-- Any drill-downs with a choice of button icon appear here for quick access -->
+      <div ng-if="(urlTemplates | filter:{icon: {class:''}}).length > 0">
+        <button ng-repeat="urlTemplate in urlTemplates  | filter:{icon: {class:''}}" class="kuiButton kuiButton--basic kuiButton--small gphVertexSelect__button"
+          tooltip="{{urlTemplate.description}}" type="button" ng-disabled="workspace === null ||workspace.nodes.length === 0"
+          ng-click="openUrlTemplate(urlTemplate)">
+          <span class="kuiIcon" ng-class="urlTemplate.icon.class"></span>
+        </button>
+      </div>
+
+      <div ng-if="detail.showDrillDowns">
+        <div class="gphSidebar__header">
+          <span class="kuiIcon fa-info"></span>
+          {{ ::'xpack.graph.sidebar.drillDownsTitle' | i18n: { defaultMessage: 'Drill-downs' } }}
+        </div>
+
+        <div class="gphSidebar__panel">
+          <p
+            ng-if="urlTemplates.length === 0"
+            class="help-block"
+            i18n-id="xpack.graph.sidebar.drillDowns.noDrillDownsHelpText"
+            i18n-default-message="Configure drill-downs from the settings menu"
+          ></p>
+
+          <ul class="list-group">
+            <li class="list-group-item" ng-repeat="urlTemplate in urlTemplates">
+              <span ng-if="urlTemplate.icon" class="kuiIcon gphNoUserSelect">
+                {{urlTemplate.icon.code}}</span>
+              <a ng-click="openUrlTemplate(urlTemplate)">{{urlTemplate.description}}</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="gphSidebar__panel" ng-if="(detail.showStyle)&&(workspace.selectedNodes.length>0)">
+        <div class="gphSidebar__header">
+          <span class="kuiIcon fa-paint-brush"></span>
+          {{ ::'xpack.graph.sidebar.styleVerticesTitle' | i18n: { defaultMessage: 'Style selected vertices' } }}
+        </div>
+
+        <div class="form-group form-group-sm gphFormGroup--small">
+          <span ng-repeat="c in colors" ng-disabled="!selectedField.selected" ng-click="workspace.colorSelected(c)"
+            ng-style="{color: c}" class="kuiIcon gphColorPicker__color fa-circle">
+          </span>
+        </div>
+      </div>
+
+      <div class="gphSidebar__panel" ng-if="detail.latestNodeSelection">
+        <div class="gphSidebar__header">
+          <span class="kuiIcon {{detail.latestNodeSelection.icon.class}}" ng-if="detail.latestNodeSelection.icon"></span>
+          {{detail.latestNodeSelection.data.field}} {{detail.latestNodeSelection.data.term}}
+        </div>
+
+        <button
+          class="kuiButton kuiButton--basic kuiButton--iconText kuiButton--small"
+          ng-if="workspace.selectedNodes.length>1||(workspace.selectedNodes.length>0&&workspace.selectedNodes[0] !== detail.latestNodeSelection)"
+          tooltip="{{ 'xpack.graph.sidebar.groupButtonTooltip' | i18n: {
+            defaultMessage: 'group the currently selected items into {latestSelectionLabel}',
+            values: { latestSelectionLabel: detail.latestNodeSelection.label },
+          } }}"
+          ng-click="workspace.groupSelections(detail.latestNodeSelection)"
+        >
+          <span class="kuiButton__icon kuiIcon fa-object-group"></span>
+          <span
+            i18n-id="xpack.graph.sidebar.groupButtonLabel"
+            i18n-default-message="group"
+          ></span>
+        </button>
+
+        <button
+          class="kuiButton kuiButton--basic kuiButton--iconText kuiButton--small"
+          ng-if="detail.latestNodeSelection.numChildren>0"
+          tooltip="{{ 'xpack.graph.sidebar.ungroupButtonTooltip' | i18n: {
+            defaultMessage: 'ungroup {latestSelectionLabel}',
+            values: { latestSelectionLabel: detail.latestNodeSelection.label },
+          } }}"
+          ng-click="workspace.ungroup(detail.latestNodeSelection)"
+        >
+          <span class="kuiIcon fa-object-ungroup"></span>
+          <span
+            i18n-id="xpack.graph.sidebar.ungroupButtonLabel"
+            i18n-default-message="ungroup"
+          ></span>
+        </button>
+
+        <form class="form-horizontal">
+          <div class="form-group form-group-sm gphFormGroup--small">
+            <label
+              for="labelEdit"
+              class="col-sm-3 control-label"
+              i18n-id="xpack.graph.sidebar.displayLabelLabel"
+              i18n-default-message="Display label"
+            ></label>
+            <div class="col-sm-9">
+              <input type="text" id="labelEdit" class="form-control input-sm" ng-model="detail.latestNodeSelection.label">
+              <div
+                class="help-block"
+                i18n-id="xpack.graph.sidebar.displayLabelHelpText"
+                i18n-default-message="Change the label for this vertex."
+              ></div>
+            </div>
+          </div>
+        </form>
+      </div>
+
+      <div ng-if="detail.mergeCandidates.length>0" class="gphSidebar__panel">
+        <div class="gphSidebar__header">
+          <span class="kuiIcon fa-link"></span>
+          {{ ::'xpack.graph.sidebar.linkSummaryTitle' | i18n: { defaultMessage: 'Link summary' } }}
+        </div>
+        <div ng-repeat="mc in detail.mergeCandidates">
+          <span>
+            <button
+              tooltip="{{ ::'xpack.graph.sidebar.linkSummary.mergeTerm1ToTerm2ButtonTooltip' | i18n: {
+                  defaultMessage: 'Merge {term1} into {term2}',
+                  values: { term1: mc.term1, term2: mc.term2 },
+                } }}"
+              type="button" ng-attr-style="opacity:{{0.2+(mc.overlap/mc.v1)}};"
+              class="kuiButton kuiButton--basic kuiButton--small" ng-click="performMerge(mc.id2, mc.id1)">
+              <span class="kuiIcon fa-chevron-circle-right"></span>
+            </button>
+
+            <span class="gphLinkSummary__term--1">{{mc.term1}}</span>
+            <span class="gphLinkSummary__term--2">{{mc.term2}}</span>
+
+            <button
+              tooltip="{{ ::'xpack.graph.sidebar.linkSummary.mergeTerm2ToTerm1ButtonTooltip' | i18n: {
+                defaultMessage: 'Merge {term2} into {term1}',
+                values: { term1: mc.term1, term2: mc.term2 },
+              } }}"
+              type="button" class="kuiButton kuiButton--basic kuiButton--small"
+              ng-attr-style="opacity:{{0.2+(mc.overlap/mc.v2)}};" ng-click="performMerge(mc.id1, mc.id2)">
+              <span class="kuiIcon fa-chevron-circle-left"></span>
+            </button>
+          </span>
+
+          <!-- Venn diagram of term/shared doc intersections -->
+          <venn-diagram left-value="mc.v1" right-value="mc.v2" overlap="mc.overlap"></venn-diagram>
+
+          <small
+            class="gphLinkSummary__term--1"
+            tooltip="{{ ::'xpack.graph.sidebar.linkSummary.leftTermCountTooltip' | i18n: {
+              defaultMessage: '{count} documents have term {term}',
+              values: { count: mc.v1, term: mc.term1 },
+            } }}"
+          >{{mc.v1}}</small>
+          <small
+            class="gphLinkSummary__term--1-2"
+            tooltip="{{ ::'xpack.graph.sidebar.linkSummary.bothTermsCountTooltip' | i18n: {
+              defaultMessage: '{count} documents have both terms',
+              values: { count: mc.overlap },
+            } }}"
+          >&nbsp;({{mc.overlap}})&nbsp;</small>
+          <small
+            class="gphLinkSummary__term--2"
+            tooltip="{{ ::'xpack.graph.sidebar.linkSummary.rightTermCountTooltip' | i18n: {
+              defaultMessage: '{count} documents have term {term}',
+              values: { count: mc.v2, term: mc.term2 },
+            } }}"
+          >{{mc.v2}}</small>
+        </div>
+      </div>
+      <!-- end edge-merge detail panel -->
+
+    </div>
+    <!-- end sidebar -->
+
+  </div>
+  <!--end svg container-->
+
+</main>
diff --git a/x-pack/plugins/graph/public/angular/templates/listing_ng_wrapper.html b/x-pack/plugins/graph/public/angular/templates/listing_ng_wrapper.html
new file mode 100644
index 0000000000000..2f75d663126b2
--- /dev/null
+++ b/x-pack/plugins/graph/public/angular/templates/listing_ng_wrapper.html
@@ -0,0 +1,11 @@
+<graph-listing
+  create-item="create"
+  get-view-url="getViewUrl"
+  edit-item="editItem"
+  find-items="find"
+  delete-items="delete"
+  listing-limit="listingLimit"
+  capabilities="capabilities"
+  initial-filter="initialFilter"
+  core-start="coreStart"
+></graph-listing>
diff --git a/x-pack/plugins/graph/public/templates/index.html b/x-pack/plugins/graph/public/templates/index.html
index 07492f53f4651..8086a91b81b63 100644
--- a/x-pack/plugins/graph/public/templates/index.html
+++ b/x-pack/plugins/graph/public/templates/index.html
@@ -37,7 +37,7 @@
         >
           <svg class="gphNode" width="30" height="30" ng-click="clickVertexFieldIcon(f, $event)" ng-class="{'gphNode-disabled':f.hopSize<=0}">
             <circle class="gphNode__circle" r="13" cx="15" cy="15" ng-class="{selectedNode:kbnTopNav.currentKey === 'fieldConfig'&&f === selectedFieldConfig}"
-              ng-attr-style="fill:{{f.color}}" />
+              ng-attr-style="fill:{{f.color}}"></circle>
             <text ng-if="f.icon" class="gphNode__text fa" text-anchor="middle" x="15" y="20">
               {{f.icon.code}}
             </text>
@@ -243,11 +243,11 @@
         <g>
           <line ng-repeat="edge in workspace.edges" class="edge" ng-attr-x1="{{edge.topSrc.kx}}" ng-attr-y1="{{edge.topSrc.ky}}"
             ng-attr-x2="{{edge.topTarget.kx}}" ng-attr-y2="{{edge.topTarget.ky}}" ng-click="clickEdge(edge)" ng-class="{'selectedEdge':edge.isSelected, 'inferredEdge':edge.inferred}"
-            ng-attr-style="stroke-width:{{edge.width}}px" stroke-linecap="round" />
+            ng-attr-style="stroke-width:{{edge.width}}px" stroke-linecap="round"></line>
         </g>
         <g ng-repeat="n in workspace.nodes" ng-if="!n.parent">
           <circle class="gphNode__circle" ng-attr-r="{{n.scaledSize}}" ng-attr-cx="{{n.kx}}" ng-attr-cy="{{n.ky}}" ng-click="nodeClick(n, $event)"
-            ng-class="{selectedNode:n.isSelected}" ng-attr-style="fill:{{n.color}}" />
+            ng-class="{selectedNode:n.isSelected}" ng-attr-style="fill:{{n.color}}"></circle>
           <text class="fa gphNode__text gphNode__text--lowOpacity" transform="translate(0,5)" text-anchor="middle" ng-attr-x="{{n.kx}}"
             ng-attr-y="{{n.ky}}" ng-if="n.icon" ng-click="nodeClick(n, $event)">{{n.icon.code}}</text>
 
@@ -269,7 +269,7 @@
 
           <g ng-if="n.numChildren>0">
             <circle r="5" class="gphNode__markerCircle" transform="translate(10,10)" ng-attr-cx="{{n.kx}}" ng-attr-cy="{{n.ky}}"
-              ng-click="nodeClick(n, $event)" />
+              ng-click="nodeClick(n, $event)"></circle>
             <text class="gphNode__markerText" text-anchor="middle" transform="translate(10,12)" ng-attr-x="{{n.kx}}"
               ng-attr-y="{{n.ky}}" ng-click="nodeClick(n, $event)">{{n.numChildren}}
             </text>
@@ -421,7 +421,7 @@
             ng-click="selectSelected(n)">
             <svg width="24" height="24">
               <circle class="gphNode__circle " r="10" cx="12" cy="12" ng-attr-style="fill:{{n.color}}"
-                ng-click="workspace.deselectNode(n)" />
+                ng-click="workspace.deselectNode(n)"></circle>
 
               <text ng-if="n.icon" class="fa gphNode__text" text-anchor="middle" x="12" y="17" ng-click="workspace.deselectNode(n)">{{n.icon.code}}</text>
             </svg>
@@ -613,7 +613,7 @@
                 <span class="kui fa-chevron-circle-down"></span>
               </button>
               <svg width="24" height="24">
-                <circle class="gphNode__circle " r="10" cx="12" cy="12" ng-attr-style="fill:{{detail.inferredEdge.topSrc.color}}" />
+                <circle class="gphNode__circle " r="10" cx="12" cy="12" ng-attr-style="fill:{{detail.inferredEdge.topSrc.color}}"></circle>
 
                 <text ng-if="detail.inferredEdge.topSrc.icon" class="fa gphNode__text" text-anchor="middle" x="12" y="16">{{detail.inferredEdge.topSrc.icon.code}}</text>
               </svg>
@@ -631,7 +631,7 @@
               </button>
 
               <svg width="24" height="24">
-                <circle class="gphNode__circle " r="10" cx="12" cy="12" ng-attr-style="fill:{{detail.inferredEdge.topTarget.color}}" />
+                <circle class="gphNode__circle " r="10" cx="12" cy="12" ng-attr-style="fill:{{detail.inferredEdge.topTarget.color}}"></circle>
 
                 <text ng-if="detail.inferredEdge.topTarget.icon" class="fa gphNode__text" text-anchor="middle" x="12" y="16">{{detail.inferredEdge.topTarget.icon.code}}</text>
               </svg>
diff --git a/x-pack/plugins/index_lifecycle_management/public/main.html b/x-pack/plugins/index_lifecycle_management/public/main.html
index d54cba0632cdf..c54f29ea169dd 100644
--- a/x-pack/plugins/index_lifecycle_management/public/main.html
+++ b/x-pack/plugins/index_lifecycle_management/public/main.html
@@ -1,3 +1,3 @@
 <kbn-management-app section="elasticsearch/index_lifecycle_policies">
-  <div id="indexLifecycleManagementReactRoot" class="policyTable__horizontalScrollContainer"/>
+  <div id="indexLifecycleManagementReactRoot" class="policyTable__horizontalScrollContainer"></div>
 </kbn-management-app>
diff --git a/x-pack/plugins/maps/public/angular/listing_ng_wrapper.html b/x-pack/plugins/maps/public/angular/listing_ng_wrapper.html
index 38c3a2b5c69fc..cf6a5ed0e6021 100644
--- a/x-pack/plugins/maps/public/angular/listing_ng_wrapper.html
+++ b/x-pack/plugins/maps/public/angular/listing_ng_wrapper.html
@@ -2,4 +2,4 @@
   find="find"
   delete="delete"
   listing-limit="listingLimit"
-/>
+></map-listing>
diff --git a/x-pack/plugins/ml/public/components/field_data_card/content_types/card_document_count.html b/x-pack/plugins/ml/public/components/field_data_card/content_types/card_document_count.html
index ab157a5f23198..b9b9be62a7661 100644
--- a/x-pack/plugins/ml/public/components/field_data_card/content_types/card_document_count.html
+++ b/x-pack/plugins/ml/public/components/field_data_card/content_types/card_document_count.html
@@ -5,7 +5,7 @@
       height="335"
       index-pattern="indexPattern"
       query="query" >
-      <div class="content-wrapper" />
+      <div class="content-wrapper"></div>
     </ml-document-count-chart>
   </div>
   <div
diff --git a/x-pack/plugins/ml/public/components/field_data_card/content_types/card_number.html b/x-pack/plugins/ml/public/components/field_data_card/content_types/card_number.html
index f743c1caf015e..972bdbe02c712 100644
--- a/x-pack/plugins/ml/public/components/field_data_card/content_types/card_number.html
+++ b/x-pack/plugins/ml/public/components/field_data_card/content_types/card_number.html
@@ -62,7 +62,7 @@
   </div>
   <div class="details-container" ng-switch on="detailsMode">
     <ml-metric-distribution-chart ng-switch-when="distribution" width="325" height="220">
-      <div class="content-wrapper" />
+      <div class="content-wrapper"></div>
     </ml-metric-distribution-chart>
     <div ng-switch-default>
       <ml-top-values></ml-top-values>
diff --git a/x-pack/plugins/ml/public/components/field_data_card/field_data_card.html b/x-pack/plugins/ml/public/components/field_data_card/field_data_card.html
index 4fbe5e465eed7..305fc937bde77 100644
--- a/x-pack/plugins/ml/public/components/field_data_card/field_data_card.html
+++ b/x-pack/plugins/ml/public/components/field_data_card/field_data_card.html
@@ -1,12 +1,12 @@
 <div class="ml-field-data-card">
-  <ml-field-title-bar card="card" />
+  <ml-field-title-bar card="card"></ml-field-title-bar>
 
   <div ng-if="card.loading === true" class="card-contents">
     <ml-loading-indicator
       label="{{:: 'xpack.ml.fieldDataCard.loadingLabel' | i18n: { defaultMessage: 'Loading' } }}"
       is-loading="card.loading"
       height="200"
-    />
+    ></ml-loading-indicator>
   </div>
 
   <div ng-if="card.existsInDocs === false" class="card-contents">
diff --git a/x-pack/plugins/ml/public/components/job_select_list/job_select_list.html b/x-pack/plugins/ml/public/components/job_select_list/job_select_list.html
index 29b16648c01aa..56b83c1460021 100644
--- a/x-pack/plugins/ml/public/components/job_select_list/job_select_list.html
+++ b/x-pack/plugins/ml/public/components/job_select_list/job_select_list.html
@@ -8,7 +8,7 @@
   <ml-loading-indicator
     label="{{ ::'xpack.ml.jobSelectList.loadingJobsLabel' | i18n: { defaultMessage: 'Loading jobs'} }}"
     is-loading="noJobsCreated===undefined"
-  />
+  ></ml-loading-indicator>
   <div class="select-list" ng-show='noJobsCreated!==undefined'>
     <div ng-if="groups.length && singleSelection !== true">
       <div class="list-section-title">
diff --git a/x-pack/plugins/ml/public/components/loading_indicator/loading_indicator_wrapper.html b/x-pack/plugins/ml/public/components/loading_indicator/loading_indicator_wrapper.html
index 5f75681a2afde..63a9955b46bc2 100644
--- a/x-pack/plugins/ml/public/components/loading_indicator/loading_indicator_wrapper.html
+++ b/x-pack/plugins/ml/public/components/loading_indicator/loading_indicator_wrapper.html
@@ -1,2 +1,2 @@
-<ml-loading-indicator is-loading="isLoading" height="height" />
-<div class="content-wrapper" />
+<ml-loading-indicator is-loading="isLoading" height="height"></ml-loading-indicator>
+<div class="content-wrapper"></div>
diff --git a/x-pack/plugins/ml/public/datavisualizer/datavisualizer.html b/x-pack/plugins/ml/public/datavisualizer/datavisualizer.html
index d9565d1dd1cd7..c4d9c24889b12 100644
--- a/x-pack/plugins/ml/public/datavisualizer/datavisualizer.html
+++ b/x-pack/plugins/ml/public/datavisualizer/datavisualizer.html
@@ -7,7 +7,7 @@
         <h1>{{indexPattern.title}}</h1>
       </div>
       <div class="euiFlexItem euiFlexItem--flexGrowZero">
-          <ml-full-time-range-selector ng-if="showSidebar" index-pattern='indexPattern' query='searchQuery' />
+          <ml-full-time-range-selector ng-if="showSidebar" index-pattern='indexPattern' query='searchQuery'></ml-full-time-range-selector>
       </div>
     </div>
 
@@ -138,7 +138,7 @@ <h1>{{indexPattern.title}}</h1>
               filter="metricFieldFilter"
               filter-icon="metricFilterIcon"
               filter-changed="metricFieldFilterChanged"
-              clear-filter="clearMetricFilter" />
+              clear-filter="clearMetricFilter"></ml-form-filter-input>
           </div>
         </div>
 
@@ -231,7 +231,7 @@ <h1>{{indexPattern.title}}</h1>
                   filter="fieldFilter"
                   filter-icon="fieldFilterIcon"
                   filter-changed="fieldFilterChanged"
-                  clear-filter="clearFieldFilter" />
+                  clear-filter="clearFieldFilter"></ml-form-filter-input>
               </div>
             </div>
           </div>
diff --git a/x-pack/plugins/ml/public/datavisualizer/datavisualizer_sidebar.html b/x-pack/plugins/ml/public/datavisualizer/datavisualizer_sidebar.html
index b4b1e0074b77e..c3c5139cb74ec 100644
--- a/x-pack/plugins/ml/public/datavisualizer/datavisualizer_sidebar.html
+++ b/x-pack/plugins/ml/public/datavisualizer/datavisualizer_sidebar.html
@@ -14,7 +14,7 @@
       <ml-data-recognizer
         class-name='"euiFlexGroup euiFlexGrid--gutterLarge euiFlexGroup--responsive euiFlexGroup--wrap"'
         index-pattern='indexPattern'
-        results=recognizerResults/>
+        results=recognizerResults></ml-data-recognizer>
     </div>
 
     <p
@@ -33,7 +33,7 @@
                 defaultMessage: 'Advanced job'
               } }}"
               class="synopsisIcon"
-            />
+            ></icon>
           </div>
           <div class="euiFlexItem synopsisContent">
             <h4
diff --git a/x-pack/plugins/ml/public/explorer/explorer.html b/x-pack/plugins/ml/public/explorer/explorer.html
index 9fff39b76deeb..0e76e1622de34 100644
--- a/x-pack/plugins/ml/public/explorer/explorer.html
+++ b/x-pack/plugins/ml/public/explorer/explorer.html
@@ -10,5 +10,5 @@
     state="appState">
   </filter-bar>
 
-  <ml-explorer-react-wrapper />
+  <ml-explorer-react-wrapper></ml-explorer-react-wrapper>
 </div>
diff --git a/x-pack/plugins/ml/public/jobs/new_job/advanced/detector_filter_modal/detector_filter_modal.html b/x-pack/plugins/ml/public/jobs/new_job/advanced/detector_filter_modal/detector_filter_modal.html
index 3671b67e18ab2..be16c110b0481 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/advanced/detector_filter_modal/detector_filter_modal.html
+++ b/x-pack/plugins/ml/public/jobs/new_job/advanced/detector_filter_modal/detector_filter_modal.html
@@ -55,7 +55,7 @@ <h3 class="euiTitle euiTitle--small">{{title}}</h3>
         i18n-id="xpack.ml.newJob.advanced.detectorFilterModal.conditionsTitle"
         i18n-default-message="Conditions"
       ></span>
-      <i ml-info-icon="new_action_ruleconditions" />
+      <i ml-info-icon="new_action_ruleconditions"></i>
     </div>
     <div class="table-title">
       <div>
@@ -64,18 +64,18 @@ <h3 class="euiTitle euiTitle--small">{{title}}</h3>
           i18n-id="xpack.ml.newJob.advanced.detectorFilterModal.conditionTypeTitle"
           i18n-default-message="Type"
         ></span>
-        <i ml-info-icon="new_action_conditiontype" />
+        <i ml-info-icon="new_action_conditiontype"></i>
       </div>
-      <div><span aria-describedby="ml_aria_description_new_action_fieldname">field_name</span><i ml-info-icon="new_action_fieldname" /></div>
-      <div><span aria-describedby="ml_aria_description_new_action_fieldvalue">field_value</span><i ml-info-icon="new_action_fieldvalue" /></div>
-      <div><span aria-describedby="ml_aria_description_new_action_condition">lt/gt</span><i ml-info-icon="new_action_condition" /></div>
+      <div><span aria-describedby="ml_aria_description_new_action_fieldname">field_name</span><i ml-info-icon="new_action_fieldname"></i></div>
+      <div><span aria-describedby="ml_aria_description_new_action_fieldvalue">field_value</span><i ml-info-icon="new_action_fieldvalue"></i></div>
+      <div><span aria-describedby="ml_aria_description_new_action_condition">lt/gt</span><i ml-info-icon="new_action_condition"></i></div>
       <div>
         <span
           aria-describedby="ml_aria_description_new_action_value"
           i18n-id="xpack.ml.newJob.advanced.detectorFilterModal.conditionValueLabel"
           i18n-default-message="value"
         ></span>
-        <i ml-info-icon="new_action_value" />
+        <i ml-info-icon="new_action_value"></i>
       </div>
       <div></div>
     </div>
diff --git a/x-pack/plugins/ml/public/jobs/new_job/advanced/new_job.html b/x-pack/plugins/ml/public/jobs/new_job/advanced/new_job.html
index efaf36d0ecfe4..d0ecdc8e9b858 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/advanced/new_job.html
+++ b/x-pack/plugins/ml/public/jobs/new_job/advanced/new_job.html
@@ -18,7 +18,7 @@ <h3 class="euiTitle euiTitle--large">{{ui.pageTitle}}</h3>
 
             <a ng-click="ui.changeTab(tab)">
               {{ tab.title }}
-              <i ng-hide='ui.validation.tabs[tab.index].valid' class='validation-error fa fa-exclamation-circle' />
+              <i ng-hide='ui.validation.tabs[tab.index].valid' class='validation-error fa fa-exclamation-circle'></i>
             </a>
           </li>
         </ul>
@@ -66,7 +66,7 @@ <h3 class="euiTitle euiTitle--large">{{ui.pageTitle}}</h3>
                 aria-labelledby="ml_aria_label_new_job_group"
                 aria-describedby="ml_aria_description_new_job_group"
                 job-groups='job.groups'
-                external-update-function='jobGroupsUpdateFunction' />
+                external-update-function='jobGroupsUpdateFunction'></ml-job-group-select>
               <div ng-hide="ui.validation.checks.groupIds.valid" class="validation-error">{{ ui.validation.tabs[0].checks.groupIds.message }}</div>
             </div>
 
@@ -75,7 +75,7 @@ <h3 class="euiTitle euiTitle--large">{{ui.pageTitle}}</h3>
                 class="kuiFormLabel"
                 i18n-id="xpack.ml.newJob.advanced.jobDetails.customUrlsLabel"
                 i18n-default-message="Custom URLs"
-              ></label><i ml-info-icon="new_job_custom_urls" />
+              ></label><i ml-info-icon="new_job_custom_urls"></i>
               <div class="euiSpacer euiSpacer--s"></div>
               <div ng-if="job.custom_settings && job.custom_settings.custom_urls">
                 <div ng-repeat="item in job.custom_settings.custom_urls track by $index" class="custom-url">
@@ -118,7 +118,7 @@ <h3 class="euiTitle euiTitle--large">{{ui.pageTitle}}</h3>
                     tooltip-append-to-body="true"
                     type="button"
                     class="kuiButton kuiButton--danger kuiButton--small remove-button">
-                      <i aria-hidden="true" class="fa fa-times" />
+                      <i aria-hidden="true" class="fa fa-times"></i>
                   </button>
                 </div>
               </div>
@@ -129,7 +129,7 @@ <h3 class="euiTitle euiTitle--large">{{ui.pageTitle}}</h3>
                   ng-click="addCustomUrl()"
                   type="button"
                   class="kuiButton kuiButton--primary kuiButton--small">
-                  <i aria-hidden="true" class="fa fa-plus" />
+                  <i aria-hidden="true" class="fa fa-plus"></i>
                   <span
                     id="ml_aria_label_new_job_custom_urls"
                     i18n-id="xpack.ml.newJob.advanced.jobDetails.addCustomUrlButtonLabel"
@@ -154,7 +154,7 @@ <h3 class="euiTitle euiTitle--large">{{ui.pageTitle}}</h3>
                     i18n-id="xpack.ml.newJob.advanced.jobDetails.useDedicatedIndexLabel"
                     i18n-default-message="Use dedicated index"
                   ></span>
-                  <i ml-info-icon="new_job_dedicated_index" />
+                  <i ml-info-icon="new_job_dedicated_index"></i>
                 </span>
               </label>
             </div>
@@ -223,7 +223,7 @@ <h3 class="euiTitle euiTitle--large">{{ui.pageTitle}}</h3>
                 i18n-id="xpack.ml.newJob.advanced.analysisConfiguration.categorizationFiltersLabel"
                 i18n-default-message="Categorization Filters"
               ></label>
-              <i ml-info-icon="new_job_categorizationfilters" />
+              <i ml-info-icon="new_job_categorizationfilters"></i>
               <div class="euiSpacer euiSpacer--s"></div>
               <div ng-if="job.analysis_config && job.analysis_config.categorization_filters">
                 <div ng-repeat="item in job.analysis_config.categorization_filters track by $index" class="categorization-filter">
@@ -244,7 +244,7 @@ <h3 class="euiTitle euiTitle--large">{{ui.pageTitle}}</h3>
                     tooltip-append-to-body="true"
                     type="button"
                     class="kuiButton kuiButton--danger kuiButton--small remove-button">
-                      <i aria-hidden="true" class="fa fa-times" />
+                      <i aria-hidden="true" class="fa fa-times"></i>
                   </button>
                 </div>
               </div>
@@ -255,7 +255,7 @@ <h3 class="euiTitle euiTitle--large">{{ui.pageTitle}}</h3>
                   type="button"
                   ng-disabled="job.analysis_config.categorization_field_name === undefined || job.analysis_config.categorization_field_name === ''"
                   class="kuiButton kuiButton--primary kuiButton--small">
-                  <i aria-hidden="true" class="fa fa-plus" />
+                  <i aria-hidden="true" class="fa fa-plus"></i>
                   <span
                     id="ml_aria_label_add_categorization_filter"
                     i18n-id="xpack.ml.newJob.advanced.analysisConfiguration.addCategorizationFilterButtonLabel"
@@ -275,7 +275,7 @@ <h3 class="euiTitle euiTitle--large">{{ui.pageTitle}}</h3>
               i18n-id="xpack.ml.newJob.advanced.analysisConfiguration.detectorsLabel"
               i18n-default-message="Detectors"
             ></label>
-            <i ml-info-icon="new_job_detectors" />
+            <i ml-info-icon="new_job_detectors"></i>
 
             <div class="euiSpacer euiSpacer--s"></div>
 
@@ -299,7 +299,7 @@ <h3 class="euiTitle euiTitle--large">{{ui.pageTitle}}</h3>
               i18n-id="xpack.ml.newJob.advanced.analysisConfiguration.influencersLabel"
               i18n-default-message="Influencers"
             ></label>
-            <i ml-info-icon="new_job_influencers" />
+            <i ml-info-icon="new_job_influencers"></i>
             <div class="influencer-list-container">
 
               <div ng-repeat="inf in ui.allInfluencers()" >
@@ -323,7 +323,7 @@ <h3 class="euiTitle euiTitle--large">{{ui.pageTitle}}</h3>
                   class="kuiButton kuiButton--primary kuiButton--small"
                   i18n-id="xpack.ml.newJob.advanced.analysisConfiguration.addLabel"
                   i18n-default-message="{icon} Add"
-                  i18n-values="{ html_icon: '<i aria-hidden=\'true\' class=\'fa fa-plus\' />' }"
+                  i18n-values="{ html_icon: '<i aria-hidden=\'true\' class=\'fa fa-plus\'></i>' }"
                 ></button>
               </div>
             </div>
@@ -346,7 +346,7 @@ <h3 class="euiTitle euiTitle--large">{{ui.pageTitle}}</h3>
                   <span id="ml_aria_label_new_job_enable_model_plot">
                     {{ ui.cardinalityValidator.status === ui.cardinalityValidator.STATUS.RUNNING ? validatingCardinalityLabel : enableModelPlotLabel }}
                   </span>
-                  <i ml-info-icon="new_job_enable_model_plot" />
+                  <i ml-info-icon="new_job_enable_model_plot"></i>
                 </span>
               </label>
               <div class='ml-new-job-callout kuiVerticalRhythm'>
@@ -387,7 +387,7 @@ <h3 class="euiTitle euiTitle--large">{{ui.pageTitle}}</h3>
                   aria-describedby="ml_aria_description_new_job_delimiter"
                   ng-model="ui.selectedFieldDelimiter"
                   ng-options="item.value as item.title for item in ui.fieldDelimiterOptions"
-                  class="form-control" />
+                  class="form-control"></select>
               </div>
               <div class="form-group">
                 <input
@@ -469,7 +469,7 @@ <h3 class="euiTitle euiTitle--large">{{ui.pageTitle}}</h3>
                   i18n-id="xpack.ml.newJob.advanced.datafeed.datafeedJobLabel"
                   i18n-default-message="Datafeed job"
                 ></span>
-                <i ml-info-icon="new_job_enable_datafeed_job" />
+                <i ml-info-icon="new_job_enable_datafeed_job"></i>
               </span>
             </label>
             <div class="euiSpacer euiSpacer--s"></div>
@@ -616,7 +616,7 @@ <h3 class="euiTitle euiTitle--large">{{ui.pageTitle}}</h3>
             <ml-loading-indicator
               label="{{ ::'xpack.ml.newJob.advanced.dataPreview.loadingDataPreviewLabel' | i18n: {defaultMessage: 'Loading data preview'} }}"
               is-loading="(ui.dataPreview === '')"
-            />
+            ></ml-loading-indicator>
             <div ng-hide="(ui.dataPreview === '')">
               <div
                 id="datafeed-preview"
@@ -648,7 +648,7 @@ <h3 class="euiTitle euiTitle--large">{{ui.pageTitle}}</h3>
               is-current-job-config="isCurrentJobConfig"
               is-disabled="(saveLock === true)"
               ng-show="jobState === JOB_STATE.NOT_STARTED"
-            />
+            ></ml-validate-job>
           </div>
           <div class="euiFlexItem euiFlexItem--flexGrowZero">
             <button
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_selection/bucket_span_selection.html b/x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_selection/bucket_span_selection.html
index 20a8686d897f1..49308abfc091f 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_selection/bucket_span_selection.html
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_selection/bucket_span_selection.html
@@ -4,7 +4,7 @@
     id="ml_aria_label_new_job_bucketspan"
     i18n-id="xpack.ml.newJob.simple.bucketSpanSelection.bucketSpanTitle"
     i18n-default-message="Bucket span"
-  ></h4><i ml-info-icon="new_job_bucketspan" />
+  ></h4><i ml-info-icon="new_job_bucketspan"></i>
   <div class="euiSpacer euiSpacer--s"></div>
   <div class="row">
     <div class="col-md-12">
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/general_job_details/general_job_details.html b/x-pack/plugins/ml/public/jobs/new_job/simple/components/general_job_details/general_job_details.html
index 7fe1b10853ae9..322d318489121 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/components/general_job_details/general_job_details.html
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/general_job_details/general_job_details.html
@@ -36,7 +36,7 @@
       aria-labelledby="ml_aria_label_new_job_group"
       aria-describedby="ml_aria_description_new_job_group"
       job-groups='formConfig.jobGroups'
-      disabled='(jobState === JOB_STATE.RUNNING  || jobState === JOB_STATE.STOPPING || jobState === JOB_STATE.FINISHED)' />
+      disabled='(jobState === JOB_STATE.RUNNING  || jobState === JOB_STATE.STOPPING || jobState === JOB_STATE.FINISHED)'></ml-job-group-select>
     <div ng-hide="ui.validation.checks.groupIds.valid" class="validation-error">{{ ui.validation.checks.groupIds.message }}</div>
   </div>
 
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/watcher/create_watch.html b/x-pack/plugins/ml/public/jobs/new_job/simple/components/watcher/create_watch.html
index 4dfa7f3750cf9..b6e694a72e537 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/components/watcher/create_watch.html
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/watcher/create_watch.html
@@ -25,7 +25,7 @@
 					<div class="dropdown-group">
 						<ml-severity-control
 							config='config'
-						/>
+            ></ml-severity-control>
 					</div>
 	    </div>
 		</div>
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/create_job.html b/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/create_job.html
index 523551bb97052..1a0a3bd7892fb 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/create_job.html
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/create_job.html
@@ -127,7 +127,7 @@ <h4 class="euiTitle euiTitle--small">
                         is-current-job-config="isCurrentJobConfig"
                         is-disabled="!ui.formValid"
                         ng-show="jobState === JOB_STATE.NOT_STARTED"
-                      />
+                      ></ml-validate-job>
                     </div>
                     <div class="euiFlexItem euiFlexItem--flexGrowZero">
                       <button
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/create_job.html b/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/create_job.html
index 4bcb7eb7226a9..997641cbf95a5 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/create_job.html
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/create_job.html
@@ -137,7 +137,7 @@ <h4 class="euiTitle euiTitle--small">Split Data</h4>
                         is-current-job-config="isCurrentJobConfig"
                         is-disabled="!ui.formValid"
                         ng-show="jobState === JOB_STATE.NOT_STARTED"
-                      />
+                      ></ml-validate-job>
                     </div>
                     <div class="euiFlexItem euiFlexItem--flexGrowZero">
                       <button
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/recognize/create_job/create_job.html b/x-pack/plugins/ml/public/jobs/new_job/simple/recognize/create_job/create_job.html
index c97d5dde13117..05c43824f4447 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/recognize/create_job/create_job.html
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/recognize/create_job/create_job.html
@@ -16,9 +16,8 @@
               <svg class="euiIcon euiCallOutHeader__icon euiIcon--medium" xmlns="http://www.w3.org/2000/svg"
                   width="16" height="16" viewBox="0 0 16 16">
                 <g fill-rule="evenodd">
-                  <path d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"
-                  />
-                  <path d="M7 6h1v5H7zM7 12h1v1H7z" />
+                  <path d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"></path>
+                  <path d="M7 6h1v5H7zM7 12h1v1H7z"></path>
                 </g>
               </svg>
               <span
@@ -84,7 +83,7 @@
                       aria-labelledby="ml_aria_label_new_job_group"
                       aria-describedby="ml_aria_description_new_job_group"
                       job-groups='formConfig.jobGroups'
-                      disabled='(overallState === SAVE_STATE.SAVING)' />
+                      disabled='(overallState === SAVE_STATE.SAVING)'></ml-job-group-select>
                     <div ng-hide="ui.validation.checks.groupIds.valid" class="validation-error">{{ ui.validation.checks.groupIds.message }}</div>
                   </div>
                   <div class="form-group">
@@ -109,7 +108,7 @@
                       <i
                         ml-info-icon="new_job_advanced_settings"
                         aria-label="{{ ::'xpack.ml.newJob.simple.recognize.advancedSettingsAriaLabel' | i18n: {defaultMessage: 'Advanced settings'} }}"
-                      />
+                      ></i>
                     </div>
                     <div class='advanced-group' ng-show="ui.showAdvanced">
                       <label class='kuiCheckBoxLabel kuiVerticalRhythm'>
@@ -127,7 +126,7 @@
                           <i
                             ml-info-icon="new_job_dedicated_index"
                             aria-label="{{ ::'xpack.ml.newJob.simple.recognize.useDedicatedIndexAriaLabel' | i18n: {defaultMessage: 'Use dedicated index'} }}"
-                          />
+                          ></i>
                         </span>
                       </label>
                     </div>
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/create_job.html b/x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/create_job.html
index d639ddd1cf44b..5a1a98579a8fe 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/create_job.html
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/create_job.html
@@ -138,7 +138,7 @@
             i18n-id="xpack.ml.newJob.simple.singleMetric.sparseDataLabel"
             i18n-default-message="Sparse data"
           ></span>
-          <i ml-info-icon="new_job_sparsedata" />
+          <i ml-info-icon="new_job_sparsedata"></i>
         </label>
       </div>
     </div>
@@ -219,7 +219,7 @@ <h2 class="euiTitle euiTitle"><i class='fa fa-spinner fa-spin'></i></h2>
           aria-labelledby="ml_aria_label_new_job_group"
           aria-describedby="ml_aria_description_new_job_group"
           job-groups='formConfig.jobGroups'
-          disabled='(jobState === JOB_STATE.RUNNING  || jobState === JOB_STATE.STOPPING || jobState === JOB_STATE.FINISHED)' />
+          disabled='(jobState === JOB_STATE.RUNNING  || jobState === JOB_STATE.STOPPING || jobState === JOB_STATE.FINISHED)'></ml-job-group-select>
         <div ng-hide="ui.validation.checks.groupIds.valid" class="validation-error">{{ ui.validation.checks.groupIds.message }}</div>
       </div>
 
@@ -236,7 +236,7 @@ <h2 class="euiTitle euiTitle"><i class='fa fa-spinner fa-spin'></i></h2>
           <label
             i18n-id="xpack.ml.newJob.simple.singleMetric.advancedLabel"
             i18n-default-message="Advanced"
-          ></label><i ml-info-icon="new_job_advanced_settings" />
+          ></label><i ml-info-icon="new_job_advanced_settings"></i>
         </div>
         <div class='advanced-group' ng-show="ui.showAdvanced">
           <div class="form-group">
@@ -252,7 +252,7 @@ <h2 class="euiTitle euiTitle"><i class='fa fa-spinner fa-spin'></i></h2>
                   i18n-id="xpack.ml.newJob.simple.singleMetric.useDedicatedIndexLabel"
                   i18n-default-message="Use dedicated index"
                 ></span>
-                <i ml-info-icon="new_job_dedicated_index" />
+                <i ml-info-icon="new_job_dedicated_index"></i>
               </span>
             </label>
           </div>
@@ -263,7 +263,7 @@ <h2 class="euiTitle euiTitle"><i class='fa fa-spinner fa-spin'></i></h2>
                 i18n-id="xpack.ml.newJob.simple.singleMetric.modelMemoryLimitLabel"
                 i18n-default-message="Model memory limit"
               ></span>
-              <i ml-info-icon="new_job_model_memory_limit" />
+              <i ml-info-icon="new_job_model_memory_limit"></i>
             </label>
             <div></div>
             <input
@@ -294,7 +294,7 @@ <h2 class="euiTitle euiTitle"><i class='fa fa-spinner fa-spin'></i></h2>
             is-current-job-config="isCurrentJobConfig"
             is-disabled='ui.formValid === false || ui.dirty === true || formConfig.jobId === undefined || ui.bucketSpanValid === false'
             ng-show="jobState === JOB_STATE.NOT_STARTED"
-          />
+          ></ml-validate-job>
         </div>
         <div class="euiFlexItem euiFlexItem--flexGrowZero">
           <button
diff --git a/x-pack/plugins/ml/public/jobs/new_job/wizard/steps/job_type/job_type.html b/x-pack/plugins/ml/public/jobs/new_job/wizard/steps/job_type/job_type.html
index da0bf3d38d4d5..dc387cff10624 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/wizard/steps/job_type/job_type.html
+++ b/x-pack/plugins/ml/public/jobs/new_job/wizard/steps/job_type/job_type.html
@@ -19,9 +19,8 @@
               <svg class="euiIcon euiCallOutHeader__icon euiIcon--medium" xmlns="http://www.w3.org/2000/svg"
               width="16" height="16" viewBox="0 0 16 16">
                 <g fill-rule="evenodd">
-                  <path d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"
-                  />
-                  <path d="M7 6h1v5H7zM7 12h1v1H7z" />
+                  <path d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"></path>
+                  <path d="M7 6h1v5H7zM7 12h1v1H7z"></path>
                 </g>
               </svg>
               <span class="euiCallOutHeader__title">{{indexWarningTitle}}</span>
@@ -66,7 +65,7 @@
           item-class-name='""'
           index-pattern='indexPattern'
           saved-search='savedSearch'
-          results=recognizerResults/>
+          results=recognizerResults></ml-data-recognizer>
         <div class="euiSpacer euiSpacer--xxl"></div>
       </div>
 
@@ -95,7 +94,7 @@
                     size="'xl'"
                     aria-label="{{ ::'xpack.ml.newJob.wizard.jobType.singleMetricAriaLabel' | i18n: {defaultMessage: 'Single metric job'} }}"
                     class="synopsisIcon"
-                  />
+                  ></icon>
                 </div>
                 <div class="euiFlexItem synopsisContent">
                   <h4
@@ -127,7 +126,7 @@
                     size="'xl'"
                     aria-label="{{ ::'xpack.ml.newJob.wizard.jobType.multiMetricAriaLabel' | i18n: {defaultMessage: 'Multi metric job'} }}"
                     class="synopsisIcon"
-                  />
+                  ></icon>
                 </div>
                 <div class="euiFlexItem synopsisContent">
                   <h4
@@ -159,7 +158,7 @@
                     size="'xl'"
                     aria-label="{{ ::'xpack.ml.newJob.wizard.jobType.populationAriaLabel' | i18n: {defaultMessage: 'Population job'} }}"
                     class="synopsisIcon"
-                  />
+                  ></icon>
                 </div>
                 <div class="euiFlexItem synopsisContent">
                   <h4
@@ -191,7 +190,7 @@
                     size="'xl'"
                     aria-label="{{ ::'xpack.ml.newJob.wizard.jobType.advancedAriaLabel' | i18n: {defaultMessage: 'Advanced job'} }}"
                     class="synopsisIcon"
-                  />
+                  ></icon>
                 </div>
                 <div class="euiFlexItem synopsisContent">
                   <h4
@@ -245,7 +244,7 @@
                     size="'xl'"
                     aria-label="{{ ::'xpack.ml.newJob.wizard.jobType.dataVisualizerAriaLabel' | i18n: {defaultMessage: 'Data Visualizer'} }}"
                     class="synopsisIcon"
-                  />
+                  ></icon>
                 </div>
                 <div class="euiFlexItem synopsisContent">
                   <h4
diff --git a/x-pack/plugins/ml/public/timeseriesexplorer/timeseriesexplorer.html b/x-pack/plugins/ml/public/timeseriesexplorer/timeseriesexplorer.html
index c475a86247b11..c0b9c69acd6a5 100644
--- a/x-pack/plugins/ml/public/timeseriesexplorer/timeseriesexplorer.html
+++ b/x-pack/plugins/ml/public/timeseriesexplorer/timeseriesexplorer.html
@@ -62,14 +62,14 @@
       entities="entities"
       loadForForecastId="loadForForecastId"
       class="forecast-controls"
-    />
+    ></ml-forecasting-modal>
 
   </div>
 
   <ml-loading-indicator
     label="{{ ::'xpack.ml.timeSeriesExplorer.loadingLabel' | i18n: {defaultMessage: 'Loading'} }}"
     is-loading="loading === true"
-  />
+  ></ml-loading-indicator>
 
   <div class="no-results-container" ng-show="jobs.length > 0 && loading === false && hasResults === false">
     <div class="no-results">
@@ -179,7 +179,7 @@
           zoom-from="zoomFrom"
           zoom-to="zoomTo"
           auto-zoom-duration="autoZoomDuration"
-        />
+        ></ml-timeseries-chart>
 
       </div>
 
@@ -189,17 +189,17 @@
           i18n-id="xpack.ml.timeSeriesExplorer.annotationsTitle"
           i18n-default-message="Annotations"
         ></span>
-  
+
         <ml-annotation-table
           annotations="focusAnnotationData"
           drill-down="false"
           number-badge="true"
-        />
+        ></ml-annotation-table>
 
         <div class="euiSpacer euiSpacer--l"></div>
       </div>
 
-      <ml-annotation-flyout />
+      <ml-annotation-flyout></ml-annotation-flyout>
 
       <span
         class="panel-title euiText"
@@ -217,7 +217,7 @@
               i18n-default-message="Severity threshold"
             ></label>
             <div class="euiFormControlLayout">
-              <ml-select-severity id="select_severity" />
+              <ml-select-severity id="select_severity"></ml-select-severity>
             </div>
           </div>
         </div>
@@ -230,7 +230,7 @@
               i18n-default-message="Interval"
             ></label>
             <div class="euiFormControlLayout">
-              <ml-select-interval id="select_interval" />
+              <ml-select-interval id="select_interval"></ml-select-interval>
             </div>
           </div>
         </div>
@@ -239,7 +239,7 @@
       <ml-anomalies-table
         table-data="tableData"
         filter="filter"
-      />
+      ></ml-anomalies-table>
 
     </div>
   </div>
diff --git a/x-pack/plugins/monitoring/public/directives/main/index.html b/x-pack/plugins/monitoring/public/directives/main/index.html
index c15fe98fe370d..66615ec8f09d8 100644
--- a/x-pack/plugins/monitoring/public/directives/main/index.html
+++ b/x-pack/plugins/monitoring/public/directives/main/index.html
@@ -198,7 +198,7 @@
               i18n-id="xpack.monitoring.logstashNavigation.pipelinesLinkText"
               i18n-default-message="Pipelines"
             ></span>
-            <span class="kuiIcon fa-flask monTabs--icon" tooltip="Beta feature" />
+            <span class="kuiIcon fa-flask monTabs--icon" tooltip="Beta feature"></span>
           </a>
           <a
             ng-if="monitoringMain.instance"
@@ -219,7 +219,7 @@
               i18n-id="xpack.monitoring.logstashNavigation.instance.pipelinesLinkText"
               i18n-default-message="Pipelines"
             ></span>
-            <span class="kuiIcon fa-flask fa-sm monTabs--icon" tooltip="Beta feature" />
+            <span class="kuiIcon fa-flask fa-sm monTabs--icon" tooltip="Beta feature"></span>
           </a>
           <a
             ng-if="monitoringMain.instance"
diff --git a/x-pack/plugins/security/public/views/logged_out/logged_out.html b/x-pack/plugins/security/public/views/logged_out/logged_out.html
index b65df2b53f26c..0ae3ea829d23f 100644
--- a/x-pack/plugins/security/public/views/logged_out/logged_out.html
+++ b/x-pack/plugins/security/public/views/logged_out/logged_out.html
@@ -1 +1 @@
-<div id="reactLoggedOutRoot" />
+<div id="reactLoggedOutRoot"></div>
diff --git a/x-pack/plugins/security/public/views/login/login.html b/x-pack/plugins/security/public/views/login/login.html
index 2695fabdd6367..5514b462a1544 100644
--- a/x-pack/plugins/security/public/views/login/login.html
+++ b/x-pack/plugins/security/public/views/login/login.html
@@ -1 +1 @@
-<div id="reactLoginRoot" />
\ No newline at end of file
+<div id="reactLoginRoot"></div>
diff --git a/x-pack/plugins/security/public/views/management/edit_role/edit_role.html b/x-pack/plugins/security/public/views/management/edit_role/edit_role.html
index ca4073dcad6f5..95564af011395 100644
--- a/x-pack/plugins/security/public/views/management/edit_role/edit_role.html
+++ b/x-pack/plugins/security/public/views/management/edit_role/edit_role.html
@@ -1,3 +1,3 @@
 <kbn-management-app section="security/roles" omit-breadcrumb-pages="['edit']">
-  <div id="editRoleReactRoot" />
+  <div id="editRoleReactRoot"></div>
 </kbn-management-app>
diff --git a/x-pack/plugins/security/public/views/management/edit_user.html b/x-pack/plugins/security/public/views/management/edit_user.html
index 4fa2768480874..a8912de8c72fb 100644
--- a/x-pack/plugins/security/public/views/management/edit_user.html
+++ b/x-pack/plugins/security/public/views/management/edit_user.html
@@ -1,3 +1,3 @@
 <kbn-management-app section="security/users" omit-breadcrumb-pages="['edit']">
-  <div id="editUserReactRoot" />
+  <div id="editUserReactRoot"></div>
 </kbn-management-app>
diff --git a/x-pack/plugins/security/public/views/management/users.html b/x-pack/plugins/security/public/views/management/users.html
index 3dce7326d001a..ab3432cbe77b9 100644
--- a/x-pack/plugins/security/public/views/management/users.html
+++ b/x-pack/plugins/security/public/views/management/users.html
@@ -1,3 +1,3 @@
 <kbn-management-app section="security/users">
-  <div id="usersReactRoot" />
+  <div id="usersReactRoot"></div>
 </kbn-management-app>
diff --git a/x-pack/plugins/spaces/public/views/management/template.html b/x-pack/plugins/spaces/public/views/management/template.html
index 3cd8e144b43fc..b586f74b3d0f4 100644
--- a/x-pack/plugins/spaces/public/views/management/template.html
+++ b/x-pack/plugins/spaces/public/views/management/template.html
@@ -1,3 +1,3 @@
 <kbn-management-app section="kibana/manage_spaces" omit-breadcrumb-pages="['edit']">
-  <div id="manageSpacesReactRoot" />
+  <div id="manageSpacesReactRoot"></div>
 </kbn-management-app>
diff --git a/x-pack/plugins/spaces/public/views/nav_control/nav_control.html b/x-pack/plugins/spaces/public/views/nav_control/nav_control.html
index 284866cc43bed..75065b09171f6 100644
--- a/x-pack/plugins/spaces/public/views/nav_control/nav_control.html
+++ b/x-pack/plugins/spaces/public/views/nav_control/nav_control.html
@@ -1,3 +1,3 @@
 <div ng-controller="spacesNavController">
-  <div id="spacesNavReactRoot" />
+  <div id="spacesNavReactRoot"></div>
 </div>
diff --git a/x-pack/plugins/spaces/public/views/space_selector/space_selector.html b/x-pack/plugins/spaces/public/views/space_selector/space_selector.html
index 2dbf9fac3f68b..b1b67ea4d7b81 100644
--- a/x-pack/plugins/spaces/public/views/space_selector/space_selector.html
+++ b/x-pack/plugins/spaces/public/views/space_selector/space_selector.html
@@ -1,3 +1,3 @@
 <div ng-controller="spacesSelectorController" id="spaceSelectorRootWrap">
-  <div id="spaceSelectorRoot" />
+  <div id="spaceSelectorRoot"></div>
 </div>
diff --git a/yarn.lock b/yarn.lock
index b0cd6584b178e..4662ab184f038 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13130,10 +13130,10 @@ jquery@^3.2.1:
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
   integrity sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==
 
-jquery@^3.4.1:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2"
-  integrity sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==
+jquery@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.5.0.tgz#9980b97d9e4194611c36530e7dc46a58d7340fc9"
+  integrity sha512-Xb7SVYMvygPxbFMpTFQiHh1J7HClEaThguL15N/Gg37Lri/qKyhRGZYzHRyLH8Stq3Aow0LsHO2O2ci86fCrNQ==
 
 js-base64@^2.1.8:
   version "2.4.5"
@@ -19437,9 +19437,9 @@ sequencify@~0.0.7:
   integrity sha1-kM/xnQLgcCf9dn9erT57ldHnOAw=
 
 serialize-javascript@^1.4.0, serialize-javascript@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.1.tgz#952907a04a3e3a75af7f73d92d15e233862048b2"
-  integrity sha512-MPLPRpD4FNqWq9tTIjYG5LesFouDhdyH0EPY3gVK4DRD5+g4aDqdNSzLIwceulo3Yj+PL1bPh6laE5+H6LTcrQ==
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61"
+  integrity sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==
 
 serve-index@^1.7.2:
   version "1.9.1"