@spalger/kibana/src/plugins/kibana/public/discover/index.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-controller="discover" class="app-container">
  <navbar>
    <form role="form" class="fill inline-form" ng-submit="fetch()" name="discoverSearch">
      <div class="typeahead" kbn-typeahead="discover">
        <div class="input-group"
          ng-class="discoverSearch.$invalid ? 'has-error' : ''">
          <input validate-query="searchSource"
            input-focus
            kbn-typeahead-input
            ng-model="state.query"
            placeholder="Search..."
            aria-label="Search input"
            type="text"
            class="form-control">
          <button type="submit"
            ng-disabled="discoverSearch.$invalid"
            aria-label="Search">
            <span aria-hidden="true" class="fa fa-search"></span></button>
          <!--<button type="button" ng-click="resetQuery()" aria-label="Reset query"><span aria-hidden="true" class="fa fa-ban"></span></button>-->
        </div>
        <kbn-typeahead-items></kbn-typeahead-items>
      </div>
    </form>

    <div class="button-group" role="toolbar">
      <kbn-tooltip text="New Search" placement="bottom" append-to-body="1">
        <button
          ng-click="newQuery()"
          aria-label="New Search">
          <i aria-hidden="true" class="fa fa-file-new-o"></i>
        </button>
      </kbn-tooltip>
      <kbn-tooltip text="Save Search" placement="bottom" append-to-body="1">
        <button
          ng-click="configTemplate.toggle('save');"
          ng-class="{active: configTemplate.is('save')}"
          aria-haspopup="true"
          aria-expanded="{{ configTemplate.is('save') }}"
          aria-label="Save Search">
          <i aria-hidden="true" class="fa fa-save"></i>
        </button>
      </kbn-tooltip>
      <kbn-tooltip text="Load Saved Search" placement="bottom" append-to-body="1">
        <button
          aria-haspopup="true"
          aria-expanded="{{ configTemplate.is('load') }}"
          ng-click="configTemplate.toggle('load');"
          ng-class="{active: configTemplate.is('load')}"
          aria-label="Load Saved Search">
          <i aria-hidden="true" class="fa fa-folder-open-o"></i>
        </button>
      </kbn-tooltip>
    </div>
  </navbar>

  <config config-template="configTemplate" config-object="opts" config-close="configClose"></config>

  <div class="container-fluid" role="main">
    <div class="row">
      <filter-bar state="state"></filter-bar>
    </div>
    <div class="row">
      <div class="col-md-2 sidebar-container collapsible-sidebar">
        <disc-field-chooser
          columns="state.columns"
          refresh="refreshFieldList"
          hits="rows"
          field-counts="fieldCounts"
          filter="filterQuery"
          index-pattern="searchSource.get('index')"
          index-pattern-list="opts.indexPatternList"
          state="state">
        </disc-field-chooser>
      </div>

      <div class="discover-wrapper col-md-10">

        <div class="discover-info">
          <span ng-show="opts.savedSearch.id" class="discover-info-title">
            <span bindonce bo-bind="opts.savedSearch.title"></span>
            <i aria-label="Reload Saved Search" tooltip="Reload Saved Search" ng-click="resetQuery();" class="fa fa-undo small"></i>
          </span>

          <strong class="discover-info-hits">{{(hits || 0) | number:0}}</strong>
          <ng-pluralize count="hits" when="{'1':'hit', 'other':'hits'}"></ng-pluralize>
        </div>

        <div class="discover-content">
          <!-- no results -->
          <div ng-show="resultState === 'none'">
              <div class="col-md-10 col-md-offset-1">

                <h1>No results found <i aria-hidden="true" class="fa fa-meh-o"></i></h1>

                <p>
                  Unfortunately I could not find any results matching your search. I tried really hard. I looked all over the place and frankly, I just couldn't find anything good. Help me, help you. Here's some ideas:
                </p>

                <div class="shard-failures" ng-show="failures">
                  <h3>Shard Failures</h3>
                  <p>The following shard failures ocurred:</p>
                  <ul>
                    <li ng-repeat="failure in failures | limitTo: failuresShown"><strong>Index:</strong> {{failure.index}} <strong>Shard:</strong> {{failure.shard}} <strong>Reason:</strong> {{failure.reason}} </li>
                  </ul>
                  <a ng-click="showAllFailures()" ng-if="failures.length > failuresShown" title="Show More">Show More</a>
                  <a ng-click="showLessFailures()" ng-if="failures.length === failuresShown && failures.length > 5" title="Show Less">Show Less</a>
                </div>

                <div ng-show="opts.timefield">
                  <p>
                    <h3>Expand your time range</h3>
                    <p>I see you are looking at an index with a date field. It is possible your query does not match anything in the current time range, or that there is no data at all in the currently selected time range. Click the button below to open the time picker. For future reference you can open the time picker by clicking the <a class="btn btn-xs navbtn" ng-click="toggleTimepicker(); toggledTimepicker = !toggledTimepicker" aria-expanded="{{toggledTimepicker}}" aria-label="time picker">time picker <i aria-hidden="true" class="fa fa-clock-o"></i></a> in the top right corner of your screen.
                  </p>
                </div>

                <h3>Refine your query</h3>
                <p>
                  The search bar at the top uses Elasticsearch's support for Lucene <a href="http://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-query-string-query.html#query-string-syntax" target="_blank">Query String syntax</a>. Let's say we're searching web server logs that have been parsed into a few fields.
                </p>

                <p>
                  <h4>Examples:</h4>
                  Find requests that contain the number 200, in any field:
                  <pre>200</pre>

                  Or we can search in a specific field. Find 200 in the status field:
                  <pre>status:200</pre>

                  Find all status codes between 400-499:
                  <pre>status:[400 TO 499]</pre>

                  Find status codes 400-499 with the extension php:
                  <pre>status:[400 TO 499] AND extension:PHP</pre>

                  Or HTML
                  <pre>status:[400 TO 499] AND (extension:php OR extension:html)</pre>
                </p>

              </div>
          </div>

          <!-- loading -->
          <div ng-show="resultState === 'loading'">
            <div class="discover-overlay">
              <h2>Searching</h2>
              <div class="spinner large"></div>
              <div ng-show="fetchStatus">{{fetchStatus.complete}}/{{fetchStatus.total}}</div>
            </div>
          </div>

          <!-- result -->
          <div class="results" ng-show="resultState === 'ready'">
            <div class="discover-timechart" ng-if="opts.timefield">
              <header>
                <center class="small">
                  <span tooltip="To change the time, click the clock icon in the navigation bar">{{timeRange.from | moment}} - {{timeRange.to | moment}}</span>

                  &mdash;

                  <span class="results-interval" ng-hide="showInterval">
                    <a
                      ng-click="toggleInterval()">
                      {{ intervalName }}
                    </a>
                  </span>

                  <span ng-show="showInterval" class="results-interval form-inline">
                    <select
                      class="form-control"
                      ng-model="state.interval"
                      ng-options="interval.val as interval.display for interval in intervalOptions | filter: intervalEnabled"
                      >
                    </select>
                  </span>
                </center>

              </header>

              <visualize ng-if="vis && rows.length != 0" vis="vis" es-resp="mergedEsResp" search-source="searchSource"></visualize>
            </div>

            <div class="discover-table" fixed-scroll>
              <doc-table
                hits="rows"
                index-pattern="indexPattern"
                sorting="state.sort"
                columns="state.columns"
                infinite-scroll="true"
                filter="filterQuery">
              </doc-table>

              <div ng-if="rows.length == opts.sampleSize" class="discover-table-footer">
                <center>
                  These are the first {{opts.sampleSize}} documents matching
                  your search, refine your search to see others.
                  <a ng-click="toTop()" title="Back to top">Back to top.</a>
                </center>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>