kibana-123/src/core_plugins/timelion/public/partials/docs/tutorial.html

Kibana is an open source (Apache Licensed), browser based analytics and search dashboard for Elasticsearch. Kibana is a snap to setup and start using. Kibana strives to be easy to get started with, while also being flexible and powerful, just like Elastic

<div ng-show="section === 'tutorial'">
  <div ng-show="page === 1">
    <div class="doc-container-content">
      <h1>Welcome to <strong>Timelion</strong>!</h1>
      <p>
        Timelion is the clawing, gnashing, zebra killing, pluggable time
        series interface for <em>everything</em>. If your datastore can
        produce a time series, then you have all of the awesome power of
        Timelion at your disposal. Timelion lets you compare, combine, and
        combobulate datasets across multiple datasources with one
        easy-to-master expression syntax. This tutorial focuses on
        Elasticsearch, but you'll quickly discover that what you learn here
        applies to any datasource Timelion supports.
      </p>
      <p>
        Ready to get started? Click <strong>Next</strong>. Want to skip the
        tutorial and view the docs? <a ng-click="section = 'functions'">
        Jump to the function reference</a>.
      </p>
    </div>
    <div class="doc-container-buttons">
      <button
        ng-click="opts.dontShowHelp()"
        class="btn btn-default btn-doc-prev"
      >
        Don't show this again
      </button>
      <button
        ng-click="page = page+1"
        class="btn btn-primary btn-doc-next"
      >
        Next
      </button>
    </div>
  </div>
  <div ng-show="page === 2">
    <div ng-show="!es.valid">
      <div class="doc-container-content">
        <h2>First time configuration</h2>
        <p>
          If you're using Logstash, you don't need to configure anything to
          start exploring your log data with Timelion. To search other
          indices, go to <strong>Management / Kibana / Advanced Settings
          </strong> and configure the <code>timelion:es.default_index</code>
          and <code>timelion:es.timefield</code> settings to match your
          indices.
        </p>
        <p>
          You'll also see some other Timelion settings. For now, you don't need
          to worry about them. Later, you'll see that you can set most of
          them on the fly if you need to.
        </p>
      </div>
      <div class="doc-container-buttons">
        <button
          ng-click="page = page-1"
          class="btn btn-primary btn-doc-prev"
        >
          Previous
        </button>
        <span ng-show="es.invalidCount > 0 && !es.valid">
          Could not validate Elasticsearch settings:
          <strong>{{es.invalidReason}}.</strong> Check your Advanced Settings
          and try again. ({{es.invalidCount}})
        </span>
        <button
          ng-click="recheckElasticsearch()"
          class="btn btn-success btn-doc-next"
        >
          Validate Config
        </button>
      </div>
    </div>
    <div ng-show="es.valid">
      <div class="doc-container-content">
        <h2>Good news, Elasticsearch is configured correctly!</h2>
        <p>
          We validated your default index and your timefield and everything
          looks ok. We found data from <strong>{{es.stats.min}}</strong> to
          <strong>{{es.stats.max}}</strong>. You're probably all set. If this
          doesn't look right, see <a ng-click="es.valid = false">First time
          configuration</a> for information about configuring the Elasticsearch
          datasource.
        </p>
        <p>
          You should already see one chart, but you might need to make a
          couple adjustments before you see any interesting data:
        </p>
        <ul>
          <li>
            <strong>Intervals</strong>
            <p>
              The interval selector at the right of the input bar lets you
              control the sampling frequency. It's currently set to
              <code>{{state.interval}}</code>.
              <span ng-show="state.interval == 'auto'">
                <strong>You're all set!</strong>
              </span>
              <span ng-show="state.interval != 'auto'">
                Set it to <code>auto </code> to let Timelion choose an
                appropriate interval.
              </span>
              If Timelion thinks your combination of time range and interval
              will produce too many data points, it throws an error. You can
              adjust that limit by configuring <code>timelion:max_buckets</code>
              in <strong>Management/Kibana/Advanced Settings</strong>.
            </p>
          </li>
          <li>
            <strong>Time range</strong>
            <p>
              Use the timepicker <i class="fa fa-clock-o"></i> in the
              Kibana toolbar to select the time period that contains the
              data you want to visualize. Make sure you select a time
              period that includes all or part of the time range shown
              above.
            </p>
          </li>
        </ul>
        <p>
          Now, you should see a line chart that displays a count of your
          data points over time.
        </p>
      </div>
      <div class="doc-container-buttons">
        <button
          ng-click="page = page-1"
          class="btn btn-primary btn-doc-prev"
        >
          Previous
        </button>
        <button
          ng-click="page = page+1"
          class="btn btn-primary btn-doc-next"
        >
          Next
        </button>
      </div>
    </div>
  </div>
  <div ng-show="page === 3">
    <div class="doc-container-content">
      <h2>Querying the Elasticsearch datasource</h2>
      <p>
        Now that we've validated that you have a working Elasticsearch
        datasource, you can start submitting queries. For starters,
        enter <code>.es(*)</code> in the input bar and hit enter.
      </p>
      <p>
        This says <em>hey Elasticsearch, find everything in my default
        index</em>. If you want to find a subset, you could enter something
        like <code>.es(html)</code> to count events that match <em>html</em>,
        or <code>.es('user:bob AND bytes:>100')</code> to find events
        that contain <em>bob</em> in the <code>user</code> field and have a
        <code>bytes</code> field that is greater than 100. Note that this query
        is enclosed in single quotes&mdash;that's because it contains
        spaces. You can enter any
        <a
           href="https://www.elastic.co/guide/en/elasticsearch/reference/5.1/query-dsl-query-string-query.html#query-string-syntax"
           target="_blank"
        >
          Lucene query string
        </a>
        as the first argument to the <code>.es()</code> function.
      </p>
      <h4>Passing arguments</h4>
      <p>
        Timelion has a number of shortcuts that make it easy to do common
        things. One is that for simple arguments that don't contain spaces or
        special characters, you don't need to use quotes. Many functions also
        have defaults. For example, <code>.es()</code> and <code>.es(*)</code>
        do the same thing. Arguments also have names, so you don't have to
        specify them in a specific order. For example, you can enter
        <code>.es(index='logstash-*', q='*')</code> to tell the
        Elasticsearch datasource <em>use * as the q (query) for the
        logstash-* index</em>.
      </p>
      <h4>Beyond count</h4>
      <p>
        Counting events is all well and good, but the Elasticsearch datasource
        also supports any
        <a
           href="https://www.elastic.co/guide/en/elasticsearch/reference/current/search-aggregations-metrics.html"
           target="_blank"
        >
          Elasticsearch metric aggregation
        </a>
        that returns a single value. Some of the most useful are
        <code>min</code>, <code>max</code>, <code>avg</code>, <code>sum</code>,
        and <code>cardinality</code>. Let's say you want a unique count of the
        <code>src_ip</code> field. Simply use the <code>cardinality</code>
        metric: <code>.es(*, metric='cardinality:src_ip')</code>. To get the
        average of the <code>bytes</code> field, you can use the
        <code>avg</code> metric: <code>.es(metric='avg:bytes')</code>.
      </p>
    </div>
    <div class="doc-container-buttons">
      <button
        ng-click="page = page-1"
        class="btn btn-primary btn-doc-prev"
      >
        Previous
      </button>
      <button
        ng-click="page = page+1"
        class="btn btn-primary btn-doc-next"
      >
        Next
      </button>
    </div>
  </div>

  <div ng-show="page === 4">
    <div class="doc-container-content">
      <h2>Expressing yourself with expressions</h2>
      <p>
        Every  expression starts with a datasource function. From there, you
        can append new functions to the datasource to transform and augment
        it.
      </p>
      <p>
        By the way, from here on out you probably know more about your data
        than we do. Feel free to replace the sample queries with something
        more meaningful!
      </p>
      <p>
        We're going to experiment, so click <strong>Add</strong> in the Kibana
        toolbar to add another chart or three. Then, select a chart, copy
        one of the following expressions, paste it into the input bar,
        and hit enter. Rinse, repeat to try out the other expressions.
      </p>
      <table class="table table-condensed table-striped">
        <tr>
          <td><code>.es(*), .es(US)</code></td>
          <td><strong>Double the fun.</strong> Two expressions on the same
            chart.</td>
        </tr>
        <tr>
          <td><code>.es(*).color(#f66), .es(US).bars(1)</code></td>
          <td>
            <strong>Custom styling.</strong> Colorizes the first series red
            and uses 1 pixel wide bars for the second series.
          </td>
        </tr>
        <tr>
          <td>
            <code>.es(*).color(#f66).lines(fill=3),
            .es(US).bars(1).points(radius=3, weight=1)</code>
          </td>
          <td>
            <strong>Named arguments.</strong> Forget trying to remember what
            order you need to specify arguments in, use named arguments to make
            the expressions easier to read and write.
          </td>
        </tr>
        <tr>
          <td><code>(.es(*), .es(GB)).points()</code></td>
          <td>
            <strong>Grouped expressions.</strong> You can also chain groups
            of expressions to functions. Here, both series are shown as
            points instead of lines.
          </td>
        </tr>
      </table>
      <p>
        Timelion provides additional view transformation functions you can use
        to customize the appearance of your charts. For the complete list, see
        the <a ng-click="section = 'functions'">Function reference</a>.
      </p>
    </div>
    <div class="doc-container-buttons">
      <button
        ng-click="page = page-1"
        class="btn btn-primary btn-doc-prev"
      >
        Previous
      </button>
      <button
        ng-click="page = page+1"
        class="btn btn-primary btn-doc-next"
      >
        Next
      </button>
    </div>
  </div>
  <div ng-show="page === 5">
    <div class="doc-container-content">
      <h2>Transforming your data: the real fun begins!</h2>
      <p>
        Now that you've mastered the basics, it's time to unleash the power of
        Timelion. Let's figure out what percentage some subset of our data
        represents of the whole, over time. For example, what percentage of
        our web traffic comes from the US?
      </p>
      <p>
        First, we need to find all events that contain US:
        <code>.es('US')</code>.
      </p>
      <p>
        Next, we want to calculate the ratio of US events to the whole. To
        divide <code>'US'</code> by everything, we can use the
        <code>divide</code> function: <code>.es('US').divide(.es())</code>.
      </p>
      <p>
        Not bad, but this gives us a number between 0 and 1. To convert it
        to a percentage, simply multiply by 100:
        <code>.es('US').divide(.es()).multiply(100)</code>.
      </p>
      <p>
        Now we know what percentage of our traffic comes from the US, and
        can see how it has changed over time!
        Timelion has a number of built-in arithmetic functions, such as
        <code>sum</code>, <code>subtract</code>, <code>multiply</code>, and
        <code>divide</code>. Many of these can take a series or a number.
        There are also other useful data transformation functions, such as
        <code>movingaverage</code>, <code>abs</code>, and
        <code>derivative</code>.
      </p>
      <p>Now that you're familiar with the syntax, refer to the
        <a ng-click="section = 'functions'">Function reference</a> to see
        how to use all of the available Timelion functions. You can view
        the reference at any time by clicking <strong>Docs</strong>
        in the Kibana toolbar. To get back to this tutorial, click the
        <strong>Tutorial</strong> link at the top of the reference.
      </p>
    </div>
    <div class="doc-container-buttons">
      <button
        ng-click="page = page-1"
        class="btn btn-primary btn-doc-prev"
      >
        Previous
      </button>

      <button
        ng-click="opts.dontShowHelp()"
        class="btn btn-default btn-doc-next"
      >
        Don't show this again
      </button>
    </div>
  </div>
</div>
<div ng-show="section === 'functions'">
  <div class="kuiLocalDropdownTitle">
    Function reference
  </div>
  <div class="kuiLocalDropdownHelpText">
    Click any function for more information. Just getting started?
    <a ng-click="section = 'tutorial'">Check out the tutorial</a>.
  </div>
  <div class="timelionFunctionsDropdownContent">
    <table class="table table-condensed table-bordered timelionFunctionsTable">
      <tr
          class="timelionFunctionsTableRow"
          ng-repeat-start="function in functions.list"
          ng-class="{active: functions.details === function.name}"
          ng-click="functions.details =
                    (functions.details === function.name ?
                      null : function.name)"
      >
        <td><strong>.{{function.name}}()</strong></td>
        <td>{{function.help}}</td>
      </tr>
      <tr ng-if="functions.details === function.name" ng-repeat-end>
        <td colspan=2>
          <div class="suggestion-details" >
            <table
              class="table table-condensed table-bordered
                     timelionFunctionDetailsTable"
              ng-show="function.args.length > (function.chainable ? 1: 0)"
            >
              <thead>
                <th>Argument Name</th>
                <th>Accepted Types</th>
                <th>Information</th>
              </thead>
              <tr
                ng-repeat="arg in function.args"
                ng-hide="$index < 1 && function.chainable"
              >
                <td>{{arg.name}}</td>
                <td><em>{{arg.types.join(', ')}}</em></td>
                <td>{{arg.help}}</td>
              </tr>
            </table>
            <div ng-hide="function.args.length > (function.chainable ? 1: 0)">
              <em>
                This function does not accept any arguments.
                Well that's simple, isn't it?
              </em>
            </div>
          </div>
        </td>
      </tr>
    </table>
  </div>
</div>