Update Index Pattern header to use UI Framework components. (#10606)

Backports PR #10390

**Commit 1:**
Update Index Pattern header to use UI Framework components.

* Original sha: 0f7ebb71ef
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-16T02:04:08Z

**Commit 2:**
Fix functional tests.

* Original sha: 0504874e5c
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-16T22:42:51Z

src/core_plugins/kibana/public/management/sections/indices/_edit.html

@@ -1,67 +1,129 @@
 <kbn-management-app section="kibana" omit-breadcrumb-pages="['indices']">
   <kbn-management-indices>
-    <div ng-controller="managementIndicesEdit" data-test-subj="editIndexPattern">
-      <div class="page-header">
-        <kbn-management-index-header
-          index-pattern="indexPattern"
-          set-default="setDefaultPattern()"
-          refresh-fields="refreshFields()"
-          delete="removePattern()">
-        </kbn-management-index-header>
+    <div
+      ng-controller="managementIndicesEdit"
+      data-test-subj="editIndexPattern"
+      class="kuiViewContent"
+    >
+      <!-- Header -->
+      <kbn-management-index-header
+        index-pattern="indexPattern"
+        set-default="setDefaultPattern()"
+        refresh-fields="refreshFields()"
+        delete="removePattern()"
+      ></kbn-management-index-header>
 
-        <p>
-          This page lists every field in the <strong>{{::indexPattern.id}}</strong>
-          index and the field's associated core type as recorded by Elasticsearch.
-          While this list allows you to view the core type of each field, changing
-          field types must be done using Elasticsearch's
-          <a target="_window" href="http://www.elastic.co/guide/en/elasticsearch/reference/current/mapping.html">
-            Mapping API
-            <i aria-hidden="true" class="fa-link fa"></i>
-          </a>
-        </p>
-        <div ng-if="indexPattern.timeFieldName && indexPattern.intervalName" class="alert alert-info">
-          This index uses a <strong>Time-based index pattern</strong> which repeats <span ng-bind="::indexPattern.getInterval().display"></span>
+      <p class="kuiText kuiVerticalRhythm">
+        This page lists every field in the <strong>{{::indexPattern.id}}</strong>
+        index and the field's associated core type as recorded by Elasticsearch.
+        While this list allows you to view the core type of each field, changing
+        field types must be done using Elasticsearch's
+        <a target="_window" href="http://www.elastic.co/guide/en/elasticsearch/reference/current/mapping.html">
+          Mapping API
+          <i aria-hidden="true" class="fa-link fa"></i>
+        </a>
+      </p>
+
+      <!-- Alerts -->
+      <div
+        ng-if="indexPattern.timeFieldName && indexPattern.intervalName"
+        class="kuiInfoPanel kuiInfoPanel--warning kuiVerticalRhythm"
+      >
+        <div class="kuiInfoPanelHeader">
+          <span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--warning fa-bolt"></span>
+          <span class="kuiInfoPanelHeader__title">
+            Repeating index pattern
+          </span>
         </div>
-        <div ng-if="!indexPattern.canExpandIndices()" class="alert alert-info">
-          This index pattern is set to be queried directly rather than being
-          expanded into more performant searches against individual indices.
-        </div>
-        <div ng-if="conflictFields.length" class="alert alert-warning">
-          <strong>Mapping conflict!</strong> {{conflictFields.length > 1 ? conflictFields.length : 'A'}} field{{conflictFields.length > 1 ? 's' : ''}} {{conflictFields.length > 1 ? 'are' : 'is'}} defined as several types (string, integer, etc) across the indices that match this pattern. You may still be able to use these conflict fields in parts of Kibana, but they will be unavailable for functions that require Kibana to know their type. Correcting this issue will require reindexing your data.
+
+        <div class="kuiInfoPanelBody">
+          <div class="kuiInfoPanelBody__message">
+            This index uses a <strong>time-based index pattern</strong> which repeats <span ng-bind="::indexPattern.getInterval().display"></span>
+          </div>
         </div>
       </div>
 
-      <form role="form">
-        <input aria-label="Filter" ng-model="fieldFilter" class="form-control span12" type="text" placeholder="Filter" />
+      <div
+        ng-if="!indexPattern.canExpandIndices()"
+        class="kuiInfoPanel kuiInfoPanel--warning kuiVerticalRhythm"
+      >
+        <div class="kuiInfoPanelHeader">
+          <span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--warning fa-bolt"></span>
+          <span class="kuiInfoPanelHeader__title">
+            Non-performant index pattern
+          </span>
+        </div>
+
+        <div class="kuiInfoPanelBody">
+          <div class="kuiInfoPanelBody__message">
+            This index pattern is set to be queried directly rather than being
+            expanded into more performant searches against individual indices.
+          </div>
+        </div>
+      </div>
+
+      <div
+        ng-if="conflictFields.length"
+        class="kuiInfoPanel kuiInfoPanel--warning kuiVerticalRhythm"
+      >
+        <div class="kuiInfoPanelHeader">
+          <span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--warning fa-bolt"></span>
+          <span class="kuiInfoPanelHeader__title">
+            Mapping conflict
+          </span>
+        </div>
+
+        <div class="kuiInfoPanelBody">
+          <div class="kuiInfoPanelBody__message">
+            {{conflictFields.length > 1 ? conflictFields.length : 'A'}} field{{conflictFields.length > 1 ? 's' : ''}} {{conflictFields.length > 1 ? 'are' : 'is'}} defined as several types (string, integer, etc) across the indices that match this pattern. You may still be able to use these conflict fields in parts of Kibana, but they will be unavailable for functions that require Kibana to know their type. Correcting this issue will require reindexing your data.
+          </div>
+        </div>
+      </div>
+
+      <!-- Search box -->
+      <form role="form" class="kuiVerticalRhythm">
+        <input
+          aria-label="Filter"
+          ng-model="fieldFilter"
+          class="kuiTextInput fullWidth"
+          type="text"
+          placeholder="Filter"
+        />
       </form>
 
-      <br />
+      <!-- Tabs -->
+      <div class="kuiTabs kuiVerticalRhythm">
+        <button
+          class="kuiTab"
+          ng-repeat="editSection in editSections"
+          ng-class="{ 'kuiTab-isSelected': state.tab === editSection.index }"
+          title="{{ editSection.title }}"
+          ng-click="changeTab(editSection)"
+          data-test-subj="tab-{{ editSection.index }}"
+        >
+          {{ editSection.title }}
+          <span data-test-subj="tab-count-{{ editSection.index }}">
+            ({{ editSection.count }})
+          </span>
+        </button>
+      </div>
 
-      <!-- tab list -->
-      <ul class="nav nav-tabs">
-        <li class="kbn-management-tab" ng-class="{ active: state.tab === editSection.index }" ng-repeat="editSection in editSections"  data-test-subj="li-{{ editSection.index }}">
-          <a ng-click="changeTab(editSection)" data-test-subj="tab-{{ editSection.index }}" >
-            {{ editSection.title }}
-            <small>({{ editSection.count }})</small>
-          </a>
-        </li>
-      </ul>
-
-      <!-- tabs -->
+      <!-- Tab content -->
       <indexed-fields
         ng-show="state.tab == 'indexedFields'"
         class="fields indexed-fields"
       ></indexed-fields>
+
       <scripted-fields
         ng-show="state.tab == 'scriptedFields'"
         class="fields scripted-fields"
       ></scripted-fields>
+
       <source-filters
         ng-show="state.tab == 'sourceFilters'"
         index-pattern="indexPattern"
         class="fields source-filters"
       ></source-filters>
-
     </div>
   </kbn-management-indices>
 </kbn-management-app>

src/core_plugins/kibana/public/management/sections/indices/_field_editor.html

@@ -1,13 +1,21 @@
 <kbn-management-app section="kibana">
   <kbn-management-indices>
-    <div class="page-header">
-      <kbn-management-index-header index-pattern="fieldSettings.indexPattern"></kbn-management-index-header>
+    <div class="kuiViewContent">
+      <kbn-management-index-header
+        index-pattern="fieldSettings.indexPattern"
+      ></kbn-management-index-header>
 
-      <h2 ng-if="fieldSettings.mode === 'create'">
+      <h2
+        ng-if="fieldSettings.mode === 'create'"
+        class="kuiSubTitle kuiVerticalRhythm"
+      >
         Create {{ fieldSettings.field.scripted ? 'Scripted ' : '' }}Field
       </h2>
 
-      <h2 ng-if="fieldSettings.mode === 'edit'">
+      <h2
+        ng-if="fieldSettings.mode === 'edit'"
+        class="kuiSubTitle kuiVerticalRhythm"
+      >
         {{ fieldSettings.field.name }}
       </h2>
     </div>

src/core_plugins/kibana/public/management/sections/indices/_index_header.html

@@ -1,33 +1,59 @@
-<div class="index-pattern-name">
-  <h1 class="title" css-truncate>
-    <i aria-hidden="true" ng-if="defaultIndex === indexPattern.id" class="fa fa-star"></i>
-    {{indexPattern.id}}
-  </h1>
-  <div class="controls">
+<div class="kuiBar kuiVerticalRhythm">
+  <div class="kuiBarSection">
+    <!-- Index pattern name -->
+    <h1
+      class="kuiTitle kuiVerticalRhythm"
+      css-truncate
+      data-test-subj="indexPatternTitle"
+    >
+      <span
+        aria-hidden="true"
+        ng-if="defaultIndex === indexPattern.id"
+        class="kuiIcon fa-star"
+      ></span>
+      {{indexPattern.id}}
+    </h1>
+  </div>
+
+  <div class="kuiBarSection">
     <button
       ng-if="setDefault"
       ng-click="setDefault()"
       tooltip="Set as default index"
-      class="btn btn-success">
+      class="kuiButton kuiButton--basic"
+      data-test-subj="setDefaultIndexPatternButton"
+    >
       <span class="sr-only">Set as default index</span>
-      <i aria-hidden="true" class="fa fa-star"></i>
+      <ispan
+        aria-hidden="true"
+        class="kuiIcon fa-star"
+      ></span>
     </button>
     <button
       ng-if="refreshFields"
       ng-click="refreshFields()"
       tooltip="Refresh field list"
-      class="btn btn-warning">
+      class="kuiButton kuiButton--basic"
+    >
       <span class="sr-only">Reload field list</span>
-      <i aria-hidden="true" class="fa fa-refresh"></i>
+      <span
+        aria-hidden="true"
+        class="kuiIcon fa-refresh"
+      ></span>
     </button>
     <button
       ng-if="delete"
       ng-click="delete()"
       aria-label="Remove index pattern"
       tooltip="Remove index pattern"
-      class="btn btn-danger">
+      class="kuiButton kuiButton--danger"
+      data-test-subj="deleteIndexPatternButton"
+    >
       <span class="sr-only">Remove index pattern</span>
-      <i aria-hidden="true" class="fa fa-trash"></i>
+      <span
+        aria-hidden="true"
+        class="kuiIcon fa-trash"
+      ></span>
     </button>
   </div>
 </div>

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

@@ -6,11 +6,12 @@ uiModules
   return {
     restrict: 'E',
     template: indexHeaderTemplate,
+    replace: true,
     scope: {
       indexPattern: '=',
       setDefault: '&',
       refreshFields: '&',
-      delete: '&'
+      delete: '&',
     },
     link: function ($scope, $el, attrs) {
       $scope.delete = attrs.delete ? $scope.delete : null;

src/core_plugins/kibana/public/management/styles/main.less

@@ -183,19 +183,6 @@ kbn-management-objects-view {
       display: inline;
     }
   }
-
-  .index-pattern-name {
-    display: flex;
-    align-items: center;
-
-    .title {
-      flex: 1 1 auto;
-    }
-
-    .controls {
-      flex: 4 0 auto;
-    }
-  }
 }
 
 kbn-management-indices {

src/ui/public/partials/paginate_controls.html

@@ -42,7 +42,11 @@
 <form class="form-inline pagination-size" ng-if="showSelector">
   <div class="form-group">
     <label>Page Size</label>
-    <select ng-model="paginate.perPage" ng-options="opt.value as opt.title for opt in paginate.sizeOptions">
+    <select
+      ng-model="paginate.perPage"
+      ng-options="opt.value as opt.title for opt in paginate.sizeOptions"
+      data-test-subj="paginateControlsPageSizeSelect"
+    >
     </select>
   </div>
 </form>

test/support/page_objects/settings_page.js

@@ -98,19 +98,16 @@ export default class SettingsPage {
   }
 
   async clickDefaultIndexButton() {
-    await this.remote.setFindTimeout(defaultFindTimeout)
-    .findByCssSelector('button.btn.btn-success.ng-scope').click();
+    await PageObjects.common.findTestSubject('setDefaultIndexPatternButton').click();
     await PageObjects.header.waitUntilLoadingHasFinished();
   }
 
   async clickDeletePattern() {
-    await this.remote.setFindTimeout(defaultFindTimeout)
-    .findByCssSelector('button.btn.btn-danger.ng-scope').click();
+    await PageObjects.common.findTestSubject('deleteIndexPatternButton').click();
   }
 
   getIndexPageHeading() {
-    return this.remote.setFindTimeout(defaultFindTimeout)
-    .findByCssSelector('h1.title.ng-binding.ng-isolate-scope');
+    return PageObjects.common.findTestSubject('indexPatternTitle');
   }
 
   getConfigureHeader() {
@@ -156,17 +153,17 @@ export default class SettingsPage {
   getFieldsTabCount() {
     const selector = 'a[data-test-subj="tab-indexedFields"] small';
     return PageObjects.common.try(() => {
-      return this.remote.setFindTimeout(defaultFindTimeout / 10)
-      .findByCssSelector('a[data-test-subj="tab-indexedFields"] small').getVisibleText()
-      .then((theText) => {
-      // the value has () around it, remove them
-        return theText.replace(/\((.*)\)/, '$1');
-      });
+      return PageObjects.common.findTestSubject('tab-count-indexedFields')
+        .getVisibleText()
+        .then((theText) => {
+        // the value has () around it, remove them
+          return theText.replace(/\((.*)\)/, '$1');
+        });
     });
   }
 
   async getScriptedFieldsTabCount() {
-    const selector = 'a[data-test-subj="tab-scriptedFields"] small';
+    const selector = '[data-test-subj="tab-count-scriptedFields"]';
     return await PageObjects.common.try(async () => {
       const theText = await this.remote.setFindTimeout(defaultFindTimeout / 10)
       .findByCssSelector(selector).getVisibleText();
@@ -257,7 +254,7 @@ export default class SettingsPage {
 
   async setPageSize(size) {
     await this.remote.setFindTimeout(defaultFindTimeout)
-    .findByCssSelector('form.form-inline.pagination-size.ng-scope.ng-pristine.ng-valid div.form-group option[label="' + size + '"]')
+    .findByCssSelector(`[data-test-subj="paginateControlsPageSizeSelect"] option[label="${size}"]`)
     .click();
     await PageObjects.header.waitUntilLoadingHasFinished();
   }