Swapped kui base class with eui equivalent (#34644)

* Swapped kui base class with eui equivalent

* Added the react component instead

x-pack/plugins/monitoring/public/directives/main/index.html

@@ -204,25 +204,11 @@
             i18n-default-message="Advanced"
           >
           </a>
-          <div
-            ng-if="monitoringMain.pipelineVersions"
-            class="euiFlexGroup euiFlexGroup--gutterMedium"
-          >
-            <h1 class="kuiTitle euiFlexItem">{{ monitoringMain.pipelineId }}</h1>
-            <select
-              ng-model="monitoringMain.pipelineHash"
-              class="kuiSelect euiFlexItem"
-              ng-change="monitoringMain.onChangePipelineHash()"
-            >
-              <option
-                ng-repeat="version in monitoringMain.pipelineVersions"
-                ng-value="version.hash"
-                i18n-id="xpack.monitoring.logstashNavigation.pipelineVersionDescription"
-                i18n-default-message="Version active {relativeLastSeen} and first seen {relativeFirstSeen}"
-                i18n-values="{relativeLastSeen: version.relativeLastSeen, relativeFirstSeen: version.relativeFirstSeen}"
-              >
-              </option>
-            </select>
+          <div 
+            class="kuiLocalTab" 
+            ng-if="monitoringMain.pipelineVersions.length" 
+            id="dropdown-elm" 
+            ng-init="monitoringMain.dropdownLoadedHandler()">
           </div>
         </div>
 

x-pack/plugins/monitoring/public/directives/main/index.js

@@ -3,13 +3,57 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-
+import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import {
+  EuiSelect,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTitle
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import { get } from 'lodash';
 import { uiModules } from 'ui/modules';
 import template from './index.html';
 import { shortenPipelineHash } from '../../../common/formatting';
 import 'ui/directives/kbn_href';
 
+const setOptions = (controller) => {
+  if (!controller.pipelineVersions || !controller.pipelineVersions.length || !controller.pipelineDropdownElement) {
+    return;
+  }
+
+  render(
+    <EuiFlexGroup>
+      <EuiFlexItem grow={false}>
+        <EuiTitle style={{ maxWidth: 400, lineHeight: '40px', overflow: 'hidden', whiteSpace: 'nowrap' }}>
+          <h2>{controller.pipelineId}</h2>
+        </EuiTitle>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiSelect
+          value={controller.pipelineHash}
+          options={controller.pipelineVersions.map((option) => {
+            return {
+              text: i18n.translate('xpack.monitoring.logstashNavigation.pipelineVersionDescription',
+                {
+                  defaultMessage: 'Version active {relativeLastSeen} and first seen {relativeFirstSeen}',
+                  values: {
+                    relativeLastSeen: option.relativeLastSeen,
+                    relativeFirstSeen: option.relativeFirstSeen
+                  }
+                }
+              ),
+              value: option.hash
+            };
+          })}
+          onChange={controller.onChangePipelineHash}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+    , controller.pipelineDropdownElement);
+};
+
 /*
  * Manage data and provide helper methods for the "main" directive's template
  */
@@ -26,6 +70,11 @@ export class MonitoringMainController {
     this.inApm = false;
   }
 
+  dropdownLoadedHandler() {
+    this.pipelineDropdownElement = document.querySelector('#dropdown-elm');
+    setOptions(this);
+  }
+
   // kick things off from the directive link function
   setup(options) {
     this._licenseService = options.licenseService;
@@ -114,8 +163,10 @@ uiModule.directive('monitoringMain', (breadcrumbs, license, kbnUrl, $injector) =
       Object.keys(setupObj.attributes).forEach(key => {
         attributes.$observe(key, () => controller.setup(getSetupObj()));
       });
+      scope.$on('$destroy', () => controller.pipelineDropdownElement && unmountComponentAtNode(controller.pipelineDropdownElement));
       scope.$watch('pageData.versions', versions => {
         controller.pipelineVersions = versions;
+        setOptions(controller);
       });
     }
   };