Add EUI Framework as a dependency

package.json

@@ -72,6 +72,7 @@
     "url": "https://github.com/elastic/kibana.git"
   },
   "dependencies": {
+    "@elastic/eui": "0.0.1",
     "@elastic/datemath": "2.3.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/numeral": "2.2.1",
@@ -154,7 +155,7 @@
     "mkdirp": "0.5.1",
     "moment": "2.13.0",
     "moment-timezone": "0.5.4",
-    "ngreact": "0.3.0",
+    "ngreact": "0.5.1",
     "no-ui-slider": "1.2.0",
     "node-fetch": "1.3.2",
     "pegjs": "0.9.0",
@@ -290,6 +291,7 @@
     "strip-ansi": "^3.0.1",
     "supertest": "3.0.0",
     "supertest-as-promised": "2.0.2",
+    "svg-sprite-loader": "3.4.1",
     "tree-kill": "1.1.0",
     "webpack-dev-server": "2.9.1",
     "yeoman-generator": "1.1.1",

src/core_plugins/kibana/public/management/index.js

@@ -9,6 +9,8 @@ import landingTemplate from 'plugins/kibana/management/landing.html';
 import { management } from 'ui/management';
 import 'ui/kbn_top_nav';
 
+import { ManagementLandingPage } from './management_landing_page';
+
 uiRoutes
 .when('/management', {
   template: landingTemplate
@@ -23,9 +25,18 @@ require('ui/index_patterns/route_setup/load_default')({
   whenMissingRedirectTo: '/management/kibana/index'
 });
 
-uiModules
-.get('apps/management')
-.directive('kbnManagementApp', function (Private, $location, timefilter) {
+const app = uiModules.get('apps/management', ['react']);
+
+app.directive('managementLandingPage', function (reactDirective) {
+  return reactDirective(ManagementLandingPage, [
+    'version',
+    'addBasePath',
+    // Prevent the 'Maximum call stack exceeded' error.
+    ['sections', {  watchDepth: 'collection' }],
+  ]);
+});
+
+app.directive('kbnManagementApp', function (Private, $location, timefilter) {
   return {
     restrict: 'E',
     template: appTemplate,
@@ -50,12 +61,11 @@ uiModules
   };
 });
 
-uiModules
-.get('apps/management')
-.directive('kbnManagementLanding', function (kbnVersion) {
+app.directive('kbnManagementLanding', function (kbnVersion, chrome) {
   return {
     restrict: 'E',
     link: function ($scope) {
+      $scope.addBasePath = chrome.addBasePath;
       $scope.sections = management.items.inOrder;
       $scope.kbnVersion = kbnVersion;
     }

src/core_plugins/kibana/public/management/landing.html

@@ -1,52 +1,9 @@
 <kbn-management-app>
   <kbn-management-landing>
-    <!-- General info -->
-    <div class="page-row">
-      <div class="page-row-text">Version: {{::kbnVersion}}</div>
-    </div>
-
-    <!-- Management sections for the ES stack -->
-    <div
-      ng-if="section.visibleItems.length > 0"
-      ng-repeat="section in sections"
-      class="page-row"
-    >
-      <div class="kuiPanel management-panel">
-        <div class="kuiPanelHeader">
-          <div class="kuiPanelHeaderSection">
-            <div
-              class="management-panel__heading-icon management-panel__heading-icon--{{::section.id}}"
-            ></div>
-            <div class="kuiPanelHeader__title">
-              {{::section.display}}
-            </div>
-          </div>
-        </div>
-
-        <div class="kuiPanelBody management-panel__body">
-          <div class="row">
-            <ul class="list-unstyled">
-              <li
-                class="col-xs-4 col-md-3"
-                ng-repeat="item in section.visibleItems"
-              >
-                <a
-                  data-test-subj="{{::item.name}}"
-                  class="management-panel__link"
-                  ng-class="{ 'management-panel__link--disabled': item.disabled || !item.url }"
-                  kbn-href="{{::item.disabled ? '' : item.url}}"
-                  tooltip="{{::item.tooltip}}"
-                  tooltip-placement="bottom"
-                  tooltip-popup-delay="400"
-                  tooltip-append-to-body="1"
-                >
-                  {{::item.display}}
-                </a>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
+    <management-landing-page
+      sections="sections"
+      version="kbnVersion"
+      add-base-path="::addBasePath"
+    ></management-landing-page>
   </kbn-management-landing>
 </kbn-management-app>

src/core_plugins/kibana/public/management/management_landing_page.js

@@ -0,0 +1,109 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiLink,
+  EuiPage,
+  EuiPageContentBody,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+
+export class ManagementLandingPage extends Component {
+  renderSections = sections => {
+    return sections.map((section, index) => {
+      const items = section.visibleItems.map((item, itemIndex) => {
+        // TO-DO: Links need a disabled state
+        return (
+          <EuiFlexItem
+            key={itemIndex}
+          >
+            <EuiLink
+              data-test-subj={item.name}
+              href={item.disabled ? '' : this.props.addBasePath(item.url)}
+              isDisabled={item.disabled || !item.url}
+            >
+              {item.display}
+            </EuiLink>
+          </EuiFlexItem>
+        );
+      });
+
+      const iconClasses = classNames(
+        'management-panel__heading-icon',
+        `management-panel__heading-icon--${section.id}`,
+      );
+
+      const title = (
+        <EuiFlexGroup alignItems="center">
+          <EuiFlexItem grow={false}>
+            <div className={iconClasses} />
+          </EuiFlexItem>
+
+          <EuiFlexItem>
+            <EuiTitle>
+              <h3>{section.display}</h3>
+            </EuiTitle>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      );
+
+      return (
+        <div key={index}>
+          <EuiPanel paddingSize="l">
+            {title}
+            <EuiHorizontalRule margin="s" />
+
+            <EuiPageContentBody>
+              <EuiFlexGroup>
+                {items}
+              </EuiFlexGroup>
+            </EuiPageContentBody>
+          </EuiPanel>
+
+          {(index < sections.length - 1) &&
+            <EuiSpacer size="m" />
+          }
+        </div>
+      );
+    });
+  };
+
+  render() {
+    const {
+      sections,
+      version,
+    } = this.props;
+
+    const renderedSections =
+      this.renderSections(sections.filter(section => section.visibleItems.length > 0));
+
+    return (
+      <EuiPage>
+        <EuiText>
+          <p>Version: {version}</p>
+        </EuiText>
+
+        <EuiSpacer size="l" />
+
+        {renderedSections}
+      </EuiPage>
+    );
+  }
+}
+
+ManagementLandingPage.propTypes = {
+  sections: PropTypes.array,
+  version: PropTypes.string,
+  addBasePath: PropTypes.func,
+};
+
+ManagementLandingPage.defaultProps = {
+  sections: [],
+};

src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/edit_index_pattern.js

@@ -38,7 +38,7 @@ uiRoutes
   }
 });
 
-uiModules.get('apps/management')
+uiModules.get('apps/management', ['app/kibana'])
 .controller('managementIndicesEdit', function (
     $scope, $location, $route, config, courier, Notifier, Private, AppState, docTitle, confirmModal) {
   const notify = new Notifier();

src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/indexed_fields_table/indexed_fields_table.html

@@ -3,7 +3,7 @@
   rows="rows"
   per-page="perPage"
   link-to-top="true"
-  show-blank-rows="false">
-</paginated-table>
+  show-blank-rows="false"
+></paginated-table>
 
 <p class="text-center default-message" ng-if="rows.length === 0">No matching fields found.</p>