kibana-123/src/ui/public/field_editor/field_editor.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

<form ng-submit="editor.save()" name="form">
  <div ng-if="editor.scriptingLangs.length === 0" class="hintbox">
    <p>
      <i class="fa fa-danger text-danger"></i>
      <strong>Scripting disabled:</strong>
      All inline scripting has been disabled in Elasticsearch. You must enable inline scripting for at least one language in order to use scripted fields in Kibana.
    </p>
  </div>
  <div ng-if="editor.creating" class="form-group">
    <label>Name</label>
    <input
      ng-model="editor.field.name"
      required
      placeholder="New Scripted Field"
      input-focus
      class="form-control"
      data-test-subj="editorFieldName">
  </div>
  <div ng-if="editor.creating && editor.indexPattern.fields.byName[editor.field.name]" class="hintbox">
    <p>
      <i class="fa fa-danger text-danger"></i>
      <strong>Mapping Conflict:</strong>
      You already have a field with the name {{ editor.field.name }}. Naming your scripted
      field with the same name means you won't be able to query both fields at the same time.
    </p>
  </div>

  <div ng-if="editor.field.scripted" class="form-group">
    <label>Language</label>
    <div class="hintbox" ng-if="editor.field.lang && !editor.isSupportedLang(editor.field.lang)">
      <h4>
        <i class="fa fa-warning text-warning"></i> Deprecation Warning
      </h4>
      <p>
        <span class="text-capitalize">{{editor.field.lang}}</span> is deprecated and support will be removed in the
        next major version of Kibana and Elasticsearch. We recommend using
        <a target="_window" ng-href="{{editor.docLinks.painless}}">Painless <i class="fa-link fa"></i></a>
        for new scripted fields.
      </p>
    </div>
    <select
      ng-model="editor.field.lang"
      ng-options="lang as lang for lang in editor.scriptingLangs"
      required
      class="form-control"
      data-test-subj="editorFieldLang">
      <option value="">-- Select Language --</option>
    </select>
  </div>

  <div class="form-group">
    <label>Type</label>
    <select
      ng-if="editor.field.scripted"
      ng-model="editor.field.type"
      ng-options="type as type for type in editor.fieldTypes"
      class="form-control"
      data-test-subj="editorFieldType">
    </select>
    <input
      ng-if="!editor.field.scripted"
      ng-model="editor.field.type"
      readonly
      class="form-control">
  </div>

  <div class="form-group">
    <span class="pull-right text-warning hintbox-label" ng-click="editor.showFormatHelp = !editor.showFormatHelp">
      <i class="fa fa-warning"></i> Warning
    </span>

    <label>Format <small>(Default: <i>{{editor.defFormatType.resolvedTitle}}</i>)</small></label>

    <div class="hintbox" ng-if="editor.showFormatHelp">
      <h4 class="hintbox-heading">
        <i class="fa fa-warning text-warning"></i> Format Warning
      </h4>

      <p>
        Formatting allows you to control the way that specific values are displayed. It can also cause values to be completely changed and prevent highlighting in Discover from working.
      </p>
    </div>

    <select
      ng-model="editor.selectedFormatId"
      ng-options="format.id as format.title for format in editor.fieldFormatTypes"
      class="form-control"
      data-test-subj="editorSelectedFormatId">
    </select>
    <fieldset
      field-format-editor
      ng-if="editor.selectedFormatId"
      field="editor.field"
      format-params="editor.formatParams">
    </fieldset>
  </div>

  <div class="form-group">
    <label for="editor.field.count">Popularity</label>
    <div class="input-group">

      <input
        ng-model="editor.field.count"
        type="number"
        class="form-control"
        data-test-subj=editorFieldCount>

      <span class="input-group-btn">
        <button
          type="button"
          ng-click="editor.field.count = editor.field.count + 1"
          aria-label="Plus"
          class="btn btn-default">
          <i aria-hidden="true" class="fa fa-plus" data-test-subj=editorFieldCountPlus></i>
        </button>
        <button
          type="button"
          ng-click="editor.field.count = editor.field.count - 1"
          aria-label="Minus"
          class="btn btn-default">
          <i aria-hidden="true" class="fa fa-minus" data-test-subj=editorFieldCountMinus></i>
        </button>
      </span>
    </div>
  </div>

  <div ng-if="editor.field.scripted">
    <div class="form-group">
      <label>Script</label>
      <textarea required class="field-editor_script-input form-control text-monospace"
      ng-model="editor.field.script" data-test-subj="editorFieldScript"></textarea>
    </div>

    <div class="form-group">
      <div class="hintbox">
        <h4>
          <i class="fa fa-warning text-warning"></i> Proceed with caution
        </h4>

        <p>
          Please familiarize yourself with <a target="_window" ng-href="{{ editor.docLinks.scriptFields }}">script fields <i class="fa-link fa"></i></a> and with <a target="_window" ng-href="">scripts in aggregations <i class="fa-link fa"></i></a> before using scripted fields.
        </p>

        <p>
          Scripted fields can be used to display and aggregate calculated values. As such, they can be very slow, and if done incorrectly, can cause Kibana to be unusable. There's no safety net here. If you make a typo, unexpected exceptions will be thrown all over the place!
        </p>
      </div>
    </div>

    <div class="form-group">
      <div class="hintbox">
        <h4>
          <i class="fa fa-question-circle text-info"></i> Scripting Help
        </h4>

        <p>
          By default, Kibana scripted fields use <a target="_window" ng-href="{{editor.docLinks.painless}}">Painless <i class="fa-link fa"></i></a>, a simple and secure scripting language designed specifically for use with Elasticsearch.  To access values in the document use the following format:
        </p>

        <p><code>doc['some_field'].value</code></p>

        <p>
          Painless is powerful but easy to use. It provides access to many <a target="_window" ng-href="{{editor.docLinks.painlessApi}}">native Java APIs <i class="fa-link fa"></i></a>. Read up on its <a target="_window" ng-href="{{editor.docLinks.painlessSyntax}}">syntax <i class="fa-link fa"></i></a> and you'll be up to speed in no time!
        </p>

        <p>
          Kibana currently imposes one special limitation on the painless scripts you write. They cannot contain named functions.
        </p>

        <p>
          Coming from an older version of Kibana? The <a target="_window" ng-href="{{editor.docLinks.luceneExpressions}}">Lucene Expressions <i class="fa-link fa"></i></a> you know and love are still available. Lucene expressions are a lot like JavaScript, but limited to basic arithmetic, bitwise and comparison operations.
        </p>

        <p>
          There are a few limitations when using Lucene Expressions:
        </p>
        <ul>
          <li> Only numeric, boolean, date, and geo_point fields may be accessed </li>
          <li> Stored fields are not available </li>
          <li> If a field is sparse (only some documents contain a value), documents missing the field will have a value of 0 </li>
        </ul>

        <p>
          Here are all the operations available to lucene expressions:
        </p>
        <ul>
          <li> Arithmetic operators: + - * / % </li>
          <li> Bitwise operators: | & ^ ~ << >> >>> </li>
          <li> Boolean operators (including the ternary operator): && || ! ?: </li>
          <li> Comparison operators: < <= == >= > </li>
          <li> Common mathematic functions: abs ceil exp floor ln log10 logn max min sqrt pow </li>
          <li> Trigonometric library functions: acosh acos asinh asin atanh atan atan2 cosh cos sinh sin tanh tan </li>
          <li> Distance functions: haversin </li>
          <li> Miscellaneous functions: min, max </li>
        </ul>
      </div>
    </div>

  </div>

  <div  ng-if="editor.conflictDescriptionsLength > 0">
    <p>
      <i class="fa fa-warning text-warning"></i>
      <strong>Field Type Conflict:</strong>
      The type of this field changes across indices. It is unavailable for many analysis functions. The indices per type are as follows:
      <table class="table">
      <thead>
        <th> Field Type </th>
        <th> Index Names </th>
      </thead>
      <tbody>
      <tr ng-repeat="(type, indices) in editor.field.conflictDescriptions">
        <td>{{type}}</td> <td>{{indices.join(', ')}}</td>
      </tr>
      </tbody>
      </table>
    </p>
  </div>

  <div class="form-group">
    <button
      type="button"
      ng-click="editor.cancel()"
      aria-label="Cancel"
      class="btn btn-primary">
      Cancel
    </button>
    <button
      type="button"
      ng-if="editor.field.scripted && !editor.creating"
      confirm-click="editor.delete()"
      confirmation="Are you sure want to delete '{{ editor.field.name }}'? This action is irreversible!"
      aria-label="Delete"
      class="btn btn-danger">
      Delete Field
    </button>
    <button
      ng-disabled="form.$invalid"
      type="submit"
      aria-label="{{ editor.creating ? 'Create' : 'Update' }} Field"
      class="btn btn-success">
      {{ editor.creating ? 'Create' : 'Update' }} Field
    </button>
  </div>
</form>