Merge pull request #5790 from Bargs/filebeatWizard

Filebeat wizard

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

@@ -0,0 +1,10 @@
+<h2>Install filebeat step</h2>
+
+<div>
+Results:
+  <ul>
+    <li>Logs: {{results.samples}}</li>
+    <li>Docs: {{results.sampleDocs}}</li>
+    <li>Pattern: {{results.indexPattern}}</li>
+  </ul>
+</div>

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

@@ -0,0 +1,16 @@
+var modules = require('ui/modules');
+var template = require('plugins/kibana/settings/sections/indices/directives/install_filebeat_step.html');
+
+modules.get('apps/settings')
+  .directive('installFilebeatStep', function () {
+    return {
+      template: template,
+      scope: {
+        results: '='
+      },
+      controller: function ($scope) {
+        var results = $scope.results;
+      }
+    };
+  });
+

src/plugins/kibana/public/settings/sections/indices/directives/paste_samples_step.html

@@ -0,0 +1,3 @@
+<h2>Paste samples step</h2>
+
+<button ng-click="samples = 'some sample logs'">Do Stuff</button>

src/plugins/kibana/public/settings/sections/indices/directives/paste_samples_step.js

@@ -0,0 +1,13 @@
+var modules = require('ui/modules');
+var template = require('plugins/kibana/settings/sections/indices/directives/paste_samples_step.html');
+
+modules.get('apps/settings')
+  .directive('pasteSamplesStep', function () {
+    return {
+      template: template,
+      scope: {
+        samples: '='
+      }
+    };
+  });
+

src/plugins/kibana/public/settings/sections/indices/directives/pattern_review_step.html

@@ -0,0 +1,7 @@
+<h2>Pattern review step</h2>
+
+<div>
+  Docs: {{sampleDocs}}
+</div>
+
+<button ng-click="indexPattern = {id: 'logstash-*', title: 'myFirstIndexPattern'}">Create an index pattern</button>

src/plugins/kibana/public/settings/sections/indices/directives/pattern_review_step.js

@@ -0,0 +1,15 @@
+var modules = require('ui/modules');
+var template = require('plugins/kibana/settings/sections/indices/directives/pattern_review_step.html');
+
+modules.get('apps/settings')
+  .directive('patternReviewStep', function () {
+    return {
+      template: template,
+      scope: {
+        sampleDocs: '=',
+        indexPattern: '=',
+        pipeline: '='
+      }
+    };
+  });
+

src/plugins/kibana/public/settings/sections/indices/directives/pipeline_step.html

@@ -0,0 +1,7 @@
+<h2>Build pipeline step</h2>
+
+<div>
+    Logs: {{samples}}
+</div>
+
+<button ng-click="sampleDocs = {results: {os: 'osx'}}; pipeline = {processor: 'I processor'};">Build a pipeline</button>

src/plugins/kibana/public/settings/sections/indices/directives/pipeline_step.js

@@ -0,0 +1,15 @@
+var modules = require('ui/modules');
+var template = require('plugins/kibana/settings/sections/indices/directives/pipeline_step.html');
+
+modules.get('apps/settings')
+  .directive('pipelineStep', function () {
+    return {
+      template: template,
+      scope: {
+        samples: '=',
+        sampleDocs: '=',
+        pipeline: '='
+      }
+    };
+  });
+

src/plugins/kibana/public/settings/sections/indices/filebeat/directives/filebeat_wizard.html

@@ -0,0 +1,70 @@
+<div>
+  <div class="page-header">
+    <h1>Tail a File</h1>
+    Let's send some log data to Elasticsearch.
+  </div>
+</div>
+
+<div>
+  <div class="wizard-step-headings" ng-class="{complete: wizard.complete}">
+      <span ng-class="{active: wizard.currentStep === 0}"
+            class="wizard-step-heading"
+            ng-click="wizard.setCurrentStep(0)">
+        1. Paste
+      </span>
+      <span ng-class="{active: wizard.currentStep === 1, aheadActive: wizard.currentStep < 1}"
+            class="wizard-step-heading"
+            ng-click="wizard.currentStep < 1 || wizard.setCurrentStep(1)">
+        2. Parse
+      </span>
+      <span ng-class="{active: wizard.currentStep === 2, aheadActive: wizard.currentStep < 2}"
+            class="wizard-step-heading"
+            ng-click="wizard.currentStep < 2 || wizard.setCurrentStep(2)">
+        3. Review
+      </span>
+      <span ng-class="{active: wizard.currentStep === 3, aheadActive: wizard.currentStep < 3}"
+            class="wizard-step-heading"
+            ng-click="wizard.currentStep < 3 || wizard.setCurrentStep(3)">
+        4. Install Filebeat
+      </span>
+  </div>
+
+  <div ng-switch="wizard.currentStep">
+    <div ng-switch-when="0">
+      <paste-samples-step samples="wizard.stepResults.samples"></paste-samples-step>
+      <div class="nav-buttons">
+        <button ng-disabled="!wizard.stepResults.samples" ng-click="wizard.nextStep()">Next</button>
+      </div>
+    </div>
+
+    <div ng-switch-when="1">
+      <pipeline-step
+        samples="wizard.stepResults.samples"
+        pipeline="wizard.stepResults.pipeline"
+        sample-docs="wizard.stepResults.sampleDocs">
+      </pipeline-step>
+
+      <div class="nav-buttons">
+        <button ng-click="wizard.prevStep()">Prev</button>
+        <button ng-disabled="!wizard.stepResults.pipeline || !wizard.stepResults.sampleDocs" ng-click="wizard.nextStep()">Next</button>
+      </div>
+    </div>
+
+    <div ng-switch-when="2">
+      <pattern-review-step
+        index-pattern="wizard.stepResults.indexPattern"
+        sample-docs="wizard.stepResults.sampleDocs"
+        pipeline="wizard.stepResults.pipeline">
+      </pattern-review-step>
+
+      <div class="nav-buttons">
+        <button ng-click="wizard.prevStep()">Prev</button>
+        <button ng-disabled="!wizard.stepResults.indexPattern" ng-click="wizard.nextStep()">Save</button>
+      </div>
+    </div>
+
+    <div ng-switch-when="3">
+      <install-filebeat-step results="wizard.stepResults"></install-filebeat-step>
+    </div>
+  </div>
+</div>

src/plugins/kibana/public/settings/sections/indices/filebeat/directives/filebeat_wizard.js

@@ -0,0 +1,75 @@
+var modules = require('ui/modules');
+var template = require('plugins/kibana/settings/sections/indices/filebeat/directives/filebeat_wizard.html');
+
+require('plugins/kibana/settings/sections/indices/directives/pattern_review_step');
+require('plugins/kibana/settings/sections/indices/directives/paste_samples_step');
+require('plugins/kibana/settings/sections/indices/directives/pipeline_step');
+require('plugins/kibana/settings/sections/indices/directives/install_filebeat_step');
+
+// wrapper directive, which sets up the breadcrumb for all filebeat steps
+modules.get('apps/settings')
+.directive('filebeatWizard', function () {
+  return {
+    restrict: 'E',
+    template: template,
+    scope: {},
+    bindToController: true,
+    controllerAs: 'wizard',
+    controller: function ($scope, AppState, safeConfirm) {
+      var $state = this.state = new AppState();
+      var totalSteps = 4;
+      this.stepResults = {};
+
+      this.setCurrentStep = (step) => {
+        if (!this.complete) {
+          $state.currentStep = step;
+          $state.save();
+        }
+      };
+      this.setCurrentStep(0);
+
+      this.nextStep = () => {
+        if ($state.currentStep + 1 < totalSteps) {
+          this.setCurrentStep($state.currentStep + 1);
+        }
+      };
+      this.prevStep = () => {
+        if ($state.currentStep > 0) {
+          this.setCurrentStep($state.currentStep - 1);
+        }
+      };
+
+      $scope.$watch('wizard.state.currentStep', (newValue, oldValue) => {
+        if (this.complete) {
+          $state.currentStep = totalSteps - 1;
+          $state.save();
+          return;
+        }
+        if (newValue + 1 === totalSteps) {
+          this.complete = true;
+        }
+        if (newValue < oldValue) {
+          return safeConfirm('Going back will reset any changes you\'ve made to this step, do you want to continue?')
+            .then(
+              () => {
+                if ($state.currentStep < 1) {
+                  delete this.stepResults.pipeline;
+                }
+                if ($state.currentStep < 2) {
+                  delete this.stepResults.indexPattern;
+                }
+                this.currentStep = newValue;
+              },
+              () => {
+                $state.currentStep = oldValue;
+                $state.save();
+              }
+            );
+        }
+        else {
+          this.currentStep = newValue;
+        }
+      });
+    }
+  };
+});

src/plugins/kibana/public/settings/sections/indices/filebeat/index.html

@@ -0,0 +1,5 @@
+<kbn-settings-app section="indices">
+  <kbn-settings-indices>
+    <filebeat-wizard />
+  </kbn-settings-indices>
+</kbn-settings-app>

src/plugins/kibana/public/settings/sections/indices/filebeat/index.js

@@ -0,0 +1,8 @@
+var routes = require('ui/routes');
+var template = require('plugins/kibana/settings/sections/indices/filebeat/index.html');
+
+require('plugins/kibana/settings/sections/indices/filebeat/directives/filebeat_wizard');
+
+routes.when('/settings/indices/create/filebeat', {
+  template: template
+});

src/plugins/kibana/public/settings/sections/indices/index.html

@@ -13,6 +13,13 @@ <h4>
       <div>
         Pick this option if you already have data in Elasticsearch.
       </div>
+
+      <h4>
+        <a href="#/settings/indices/create/filebeat">Tail a File</a>
+      </h4>
+      <div>
+        Pick this option if you have log file data you'd like to send to Elasticsearch.
+      </div>
     </div>
   </kbn-settings-indices>
 </kbn-settings-app>

src/plugins/kibana/public/settings/sections/indices/index.js

@@ -3,6 +3,7 @@ define(function (require) {
 
   require('plugins/kibana/settings/sections/indices/directives/kbn_settings_indices');
   require('plugins/kibana/settings/sections/indices/_create');
+  require('plugins/kibana/settings/sections/indices/filebeat/index');
   require('plugins/kibana/settings/sections/indices/_edit');
   require('plugins/kibana/settings/sections/indices/_field_editor');
 

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

@@ -186,3 +186,28 @@ kbn-settings-indices {
 .kbn-settings-indices-create {
   .time-and-pattern > div {}
 }
+
+.wizard-step-headings{
+  margin-top: 1em;
+
+  .wizard-step-heading {
+    font-size: 1.5em;
+    padding-right: 1.5em;
+
+    &.active {
+      cursor: default;
+      font-weight: bold;
+    }
+    &.aheadActive {
+      cursor: default;
+      font-weight: 300;
+    }
+  }
+
+  &.complete {
+    .wizard-step-heading:not(.active) {
+      color: #dddddd;
+      cursor: default;
+    }
+  }
+}

test/functional/apps/discover/_collapse_expand.js

@@ -32,7 +32,7 @@ define(function (require) {
         })
         .then(function (navigateTo) {
           common.debug('navigateTo');
-          return settingsPage.navigateTo();
+          return settingsPage.navigateTo().then(settingsPage.clickExistingIndicesAddDataLink);
         })
         .then(function () {
           common.debug('createIndexPattern');

test/functional/apps/discover/_shared_links.js

@@ -37,7 +37,7 @@ define(function (require) {
         })
         .then(function (navigateTo) {
           common.debug('navigateTo');
-          return settingsPage.navigateTo();
+          return settingsPage.navigateTo().then(settingsPage.clickExistingIndicesAddDataLink);
         })
         .then(function () {
           common.debug('createIndexPattern');