Merge pull request #6493 from Bargs/ingest/filebeatVerify

Implements a pattern checker directive for use in the Add Data UI

src/plugins/kibana/public/settings/sections/indices/add_data_steps/install_filebeat_step.html

@@ -3,7 +3,7 @@
   Now that you've got a fresh pipeline and index pattern, let's throw some data at it!
 </div>
 
-<div>
+<div class="install-filebeat">
   <ol>
     <li>Install Filebeat on all servers on which you want to tail logs
       (<a target="_blank" href="https://www.elastic.co/guide/en/beats/filebeat/master/filebeat-installation.html">
@@ -43,5 +43,10 @@ output:
         instructions
       </a>)
     </li>
+    <li>Verify your filebeat installation below. We'll poll your new index pattern for documents and let you know when
+      they show up. If you'd like to skip this step, simply click Done now.
+    </li>
   </ol>
 </div>
+
+<pattern-checker pattern="installStep.results.indexPattern.id"/>

src/plugins/kibana/public/settings/sections/indices/add_data_steps/install_filebeat_step.js

@@ -1,5 +1,6 @@
 import modules from 'ui/modules';
 import template from 'plugins/kibana/settings/sections/indices/add_data_steps/install_filebeat_step.html';
+import 'ui/pattern_checker';
 import { patternToIngest } from '../../../../../common/lib/convert_pattern_and_ingest_name';
 
 modules.get('apps/settings')

src/plugins/kibana/public/settings/styles/main.less

@@ -191,6 +191,12 @@ kbn-settings-indices {
   .time-and-pattern > div {}
 }
 
+filebeat-wizard {
+  .nav-buttons {
+    float: right;
+  }
+}
+
 .wizard-step-headings{
   margin-top: 1em;
 
@@ -238,3 +244,6 @@ kbn-settings-indices {
   }
 }
 
+.install-filebeat {
+  padding-bottom: 1em;
+}

src/ui/public/pattern_checker/__tests__/pattern_checker.js

@@ -0,0 +1,95 @@
+import ngMock from 'ng_mock';
+import expect from 'expect.js';
+import _ from 'lodash';
+import sinon from 'auto-release-sinon';
+
+describe('pattern checker', function () {
+  let $httpBackend;
+  let $compile;
+  let $rootScope;
+  let apiResponse;
+  let $timeout;
+  const notifyFatalStub = sinon.stub();
+
+  beforeEach(ngMock.module('kibana'));
+
+  beforeEach(ngMock.module(function ($provide) {
+    notifyFatalStub.reset();
+
+    $provide.value('Notifier', function () {
+      this.fatal = notifyFatalStub;
+    });
+  }));
+
+  beforeEach(ngMock.inject(function ($injector, Private) {
+    $httpBackend = $injector.get('$httpBackend');
+    $compile = $injector.get('$compile');
+    $rootScope = $injector.get('$rootScope');
+    $timeout = $injector.get('$timeout');
+
+    apiResponse = $httpBackend.when('POST', /\/api\/kibana\/.*\/_count/);
+  }));
+
+  it('should display the number of documents in a given index pattern', function () {
+    apiResponse.respond(200, {count: 1});
+
+    const element = $compile('<pattern-checker pattern="logstash"></pattern-checker>')($rootScope);
+
+    $httpBackend.flush();
+    $rootScope.$digest();
+    expect(_.contains(element.html(), `1 results`)).to.be.ok();
+  });
+
+  it('should poll the api for changes to the document count and update the ui', function () {
+    apiResponse.respond(200, {count: 1});
+
+    const element = $compile('<pattern-checker pattern="logstash"></pattern-checker>')($rootScope);
+
+    $httpBackend.flush();
+    $rootScope.$digest();
+    expect(_.contains(element.html(), `1 results`)).to.be.ok();
+
+    apiResponse.respond(200, {count: 2});
+    $timeout.flush();
+    $httpBackend.flush();
+    $rootScope.$digest();
+    expect(_.contains(element.html(), `2 results`)).to.be.ok();
+  });
+
+  it('should display 0 results when API responds with 404', function () {
+    apiResponse.respond(404);
+
+    const element = $compile('<pattern-checker pattern="logstash"></pattern-checker>')($rootScope);
+
+    $httpBackend.flush();
+    $rootScope.$digest();
+    expect(_.contains(element.html(), `0 results`)).to.be.ok();
+  });
+
+  it('should throw a fatal notificaiton for any error other than a 404', function () {
+    apiResponse.respond(500, 'Bad things happened');
+
+    const element = $compile('<pattern-checker pattern="logstash"></pattern-checker>')($rootScope);
+
+    $httpBackend.flush();
+    $rootScope.$digest();
+
+    expect(notifyFatalStub.called).to.be.ok();
+  });
+
+  it('should stop polling when the scope is destroyed', function () {
+    apiResponse.respond(200, {count: 1});
+
+    const element = $compile('<pattern-checker pattern="logstash"></pattern-checker>')($rootScope);
+    const scope = element.scope();
+
+    $httpBackend.flush();
+    $rootScope.$digest();
+    expect(_.contains(element.html(), `1 results`)).to.be.ok();
+
+    scope.$destroy();
+    $timeout.flush();
+    $httpBackend.verifyNoOutstandingRequest();
+  });
+
+});

src/ui/public/pattern_checker/pattern_checker.html

@@ -0,0 +1,2 @@
+<span class="spinner"></span>
+Querying {{checker.pattern}}... {{checker.resultCount}} results

src/ui/public/pattern_checker/pattern_checker.js

@@ -0,0 +1,52 @@
+import uiModules from 'ui/modules';
+import template from './pattern_checker.html';
+import './pattern_checker.less';
+import chrome from 'ui/chrome';
+
+const module = uiModules.get('kibana');
+
+module.directive('patternChecker', function () {
+  return {
+    restrict: 'E',
+    template: template,
+    controllerAs: 'checker',
+    bindToController: true,
+    scope: {
+      pattern: '='
+    },
+    controller: function (Notifier, $scope, $timeout, $http) {
+      let validationTimeout;
+
+      var notify = new Notifier({
+        location: 'Add Data'
+      });
+
+      this.validateInstall = () => {
+        $http.post(chrome.addBasePath(`/api/kibana/${this.pattern}/_count`))
+        .then(
+          (response) => {
+            this.resultCount = response.data.count;
+          },
+          (error) => {
+            if (error.status === 404) {
+              this.resultCount = 0;
+            }
+            else {
+              notify.fatal(error);
+            }
+          }
+        )
+        .then(() => {
+          validationTimeout = $timeout(this.validateInstall, 5000);
+        });
+      };
+
+      $scope.$on('$destroy', () => {
+        $timeout.cancel(validationTimeout);
+      });
+
+      this.validateInstall();
+    }
+  };
+});
+

src/ui/public/pattern_checker/pattern_checker.less

@@ -0,0 +1,3 @@
+pattern-checker .spinner {
+  padding: 0 1em;
+}