zeppelin-web/src/app/interpreter/interpreter.html

<!--
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<div class="interpreterHead">
  <div class="header">
    <div class="row">
      <div class="col-md-12">
        <h3 class="new_h3">
          Interpreters
        </h3>
        <div class="pull-right" style="margin-top:10px;">
          <button class="btn btn-default btn-sm"
                  ng-click="showRepositoryInfo = !showRepositoryInfo">
            <i class="fa fa-database" ng-style="{color: showRepositoryInfo ? '#3071A9' : 'black' }"></i>
            Repository
          </button>
          <button class="btn btn-default btn-sm"
                  ng-click="showAddNewSetting = !showAddNewSetting">
            <i class="fa fa-plus"></i>
            Create
          </button>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        Manage interpreters settings. You can create / edit / remove settings. Note can bind / unbind these interpreter settings.
      </div>
    </div>

    <div class="row">
      <div class="col-md-4">
        <div class="input-group" style="margin-top: 10px">
          <form>
            <input type="text" ng-model="searchInterpreter"
                   class="form-control ng-pristine ng-untouched ng-valid ng-empty"
                   ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 300, 'blur': 0 } }"
                   placeholder="Search interpreters"/>
          </form>
          <span class="input-group-btn">
            <button type="submit" class="btn btn-default" ng-disabled="!navbar.connected">
              <i class="glyphicon glyphicon-search"></i>
            </button>
          </span>
        </div>
      </div>
    </div>
  </div>

  <div class="row" ng-if="showRepositoryInfo">
    <div class="col-md-12">
      <hr />
      <h4>Repositories</h4>
      <p>Available repository lists. These repositories are used to resolve external dependencies of interpreter.</p>
      <ul class="noDot">
        <li class="liVertical" ng-repeat="repo in repositories">
          <a tabindex="0" class="btn btn-info" role="button"
             tooltip-append-to-body="true" tooltip-placement="top-left"
             uib-tooltip="{{repo.url}}">
            <span class="fa fa-database"></span>
            {{repo.id}}&nbsp;
            <span ng-if="!isDefaultRepository(repo.id)" class="fa fa-close blackOpc"
                  ng-click="removeRepository(repo.id)"></span>
          </a>
        </li>
        <li class="liVertical">
          <div ng-include src="'app/interpreter/repository-create.html'"></div>
          <div class="btn btn-default"
               data-toggle="modal"
               data-target="#repoModal">
            <span class="fa fa-plus"></span>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <div ng-include src="'app/interpreter/interpreter-create.html'"></div>
</div>

<div interpreter-item class="box width-full"
     ng-repeat="setting in interpreterSettings | orderBy: 'name' | filter: {name:searchInterpreter}" >
  <div id="{{setting.name | lowercase}}">
    <div class="row interpreter">

      <div class="col-md-12">
        <h3 class="interpreter-title">{{setting.name}}
          <small>
            <span style="display:inline-block" ng-repeat="interpreter in setting.interpreterGroup"
                  title="{{interpreter.class}}">
              <span ng-show="!$first">, </span>
              %<span ng-show="!$parent.$first || $first">{{setting.name}}</span
              ><span ng-show="(!$parent.$first || $first) && !$first">.</span
              ><span ng-show="!$first">{{interpreter.name}}</span>
            </span>
          </small>

          <small ng-switch="setting.status">
            <small ng-switch-when="READY">
              <i style="color: green; margin-right: 3px;" class="fa fa-circle"
                 uib-tooltip="Ready">
              </i>
            </small>
            <small ng-switch-when="ERROR">
              <i style="color: red; cursor: pointer" class="fa fa-circle"
                 ng-click="showErrorMessage(setting)"
                 uib-tooltip="Error downloading dependencies">
              </i>
            </small>
            <small ng-switch-default>
              <i style="color: blue" class="fa fa-spinner spinAnimation"
                 uib-tooltip="Dependencies are downloading">
              </i>
            </small>
          </small>

        </h3>
        <span style="float:right" ng-show="!valueform.$visible" >
          <button class="btn btn-default btn-xs"
                  ng-click="valueform.$show();
                  copyOriginInterpreterSettingProperties(setting.id)">
            <span class="fa fa-pencil"></span> edit</button>
          <button class="btn btn-default btn-xs"
                  ng-click="restartInterpreterSetting(setting.id)">
            <span class="fa fa-refresh"></span> restart</button>
          <button class="btn btn-default btn-xs"
                  ng-click="removeInterpreterSetting(setting.id)">
            <span class="fa fa-trash"></span> remove</button>
        </span>
      </div>
    </div>

    <div class="row interpreter">
      <div class="col-md-12">
        <h5>Option</h5>
        <div class="row interpreter" style="margin-top: 5px;">
          <div class="col-md-6">
            The interpreter will be instantiated
            <span class="btn-group">
              <button type="button" class="btn btn-default btn-xs dropdown-toggle"
                      data-toggle="dropdown"
                      ng-disabled="!valueform.$visible">
                {{getInterpreterRunningOption(setting.id)}} <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li>
                  <a style="cursor:pointer"
                     ng-click="setInterpreterRunningOption(setting.id, 'shared', 'shared')">
                    Globally
                  </a>
                </li>
                <li>
                  <a style="cursor:pointer"
                     ng-click="setInterpreterRunningOption(setting.id, 'scoped', '')">
                    Per Note
                  </a>
                </li>
                <li ng-if="ticket.principal !== 'anonymous'">
                  <a style="cursor:pointer"
                     ng-click="setInterpreterRunningOption(setting.id, 'shared', 'scoped')">
                    Per User
                  </a>
                </li>
              </ul>
            </span>
            in
            <span class="btn-group">
              <button type="button" class="btn btn-default btn-xs dropdown-toggle"
                      data-toggle="dropdown"
                      ng-disabled="!valueform.$visible
                                   || getInterpreterRunningOption(setting.id) === 'Globally'">
                <span ng-if="getInterpreterRunningOption(setting.id) !== 'Per User'">
                  {{getPerNoteOption(setting.id)}}
                </span>
                <span ng-if="getInterpreterRunningOption(setting.id) === 'Per User'">
                  {{getPerUserOption(setting.id)}}
                </span>
                  <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li
                  ng-if="getInterpreterRunningOption(setting.id) === 'Globally'">
                  <a style="cursor:pointer"
                     uib-tooltip="Single interpreter instance are shared across notes"
                     ng-click="setPerNoteOption(setting.id, 'shared')">
                    shared per note
                  </a>
                </li>

                <li>
                  <a style="cursor:pointer"
                     ng-if="getInterpreterRunningOption(setting.id) === 'Per Note'"
                     uib-tooltip="Separate Interpreter instance for each note"
                     ng-click="setPerNoteOption(setting.id, 'scoped')">
                    scoped per note
                  </a>
                </li>
                <li>
                  <a style="cursor:pointer"
                     ng-if="getInterpreterRunningOption(setting.id) === 'Per User'"
                     uib-tooltip="Separate Interpreter instance for each note"
                     ng-click="setPerUserOption(setting.id, 'scoped')">
                    scoped per user
                  </a>
                </li>

                <li>
                  <a style="cursor:pointer"
                     ng-if="getInterpreterRunningOption(setting.id) === 'Per Note'"
                     uib-tooltip="Separate Interpreter process for each note"
                     ng-click="setPerNoteOption(setting.id, 'isolated')">
                    isolated per note
                  </a>
                </li>
                <li>
                  <a style="cursor:pointer"
                     ng-if="getInterpreterRunningOption(setting.id) === 'Per User'"
                     uib-tooltip="Separate Interpreter process for each note"
                     ng-click="setPerUserOption(setting.id, 'isolated')">
                    isolated per user
                  </a>
                </li>
              </ul>
            </span>
            process
            <a class="fa fa-info-circle interpreter-binding-mode-info-link"
               aria-hidden="true"
               uib-tooltip="Can manage interpreter sessions differently by setting this option. Click this button to learn more"
               ng-href="{{getInterpreterBindingModeDocsLink()}}" target="_blank"></a>
            <span ng-if="getInterpreterRunningOption(setting.id) === 'Per User' && ticket.principal !== 'anonymous'">
              <span ng-if="getPerNoteOption(setting.id) === 'shared'">
                <button type="button" class="btn btn-default btn-xs"
                        ng-click="setPerNoteOption(setting.id, 'scoped')"
                        ng-disabled="!valueform.$visible"
                        data-toggle="dropdown">
                  <i class="fa fa-plus"></i>
                </button>
              </span>
            </span>
          </div>
        </div>
        <div class="row interpreter"
             style="margin-top: 6px;"
             ng-if="getInterpreterRunningOption(setting.id) === 'Per User'
                    && ticket.principal !== 'anonymous'
                    && getPerNoteOption(setting.id) !== 'shared'">
          <div class="col-md-12">
            <span>
              <span class="hidden-xs" style="padding-left: 190px;">And </span>
              <span class="visible-xs" style="padding-left: 0px;">And </span>
              <span class="btn-group">
                <button type="button" class="btn btn-default btn-xs dropdown-toggle"
                        data-toggle="dropdown"
                        ng-disabled="true">
                  <span>
                    Per Note
                  </span>
                  <span class="caret"></span>
                </button>
              </span>
              in
              <span class="btn-group">
                <button type="button" class="btn btn-default btn-xs dropdown-toggle"
                        data-toggle="dropdown"
                        ng-disabled="!valueform.$visible">
                  <span>
                    {{getPerNoteOption(setting.id)}}
                  </span>
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                  <li>
                    <a style="cursor:pointer"
                       uib-tooltip="Separate Interpreter instance for each note"
                       ng-click="setPerNoteOption(setting.id, 'scoped')">
                      scoped per note
                    </a>
                  </li>
                  <li>
                    <a style="cursor:pointer"
                       uib-tooltip="Separate Interpreter process for each note"
                       ng-click="setPerNoteOption(setting.id, 'isolated')">
                      isolated per note
                    </a>
                  </li>
                </ul>
              </span>
              process
              <a class="fa fa-info-circle interpreter-binding-mode-info-link"
                 aria-hidden="true"
                 uib-tooltip="Can manage interpreter sessions differently by setting this option. Click this button to learn more"
                 ng-href="{{getInterpreterBindingModeDocsLink()}}" target="_blank"></a>
              <button type="button" class="btn btn-default btn-xs"
                      ng-disabled="!valueform.$visible"
                      ng-click="setPerNoteOption(setting.id, 'shared')"
                      data-toggle="dropdown">
                <i class="fa fa-minus"></i>
              </button>
            </span>
          </div>
        </div>
      </div>
    </div>

    <div class="row interpreter" style="margin-top: 5px;"
         ng-show="getInterpreterRunningOption(setting.id)=='Per User' && getPerUserOption(setting.id)=='isolated'">
      <div class="col-md-12">
        <div class="checkbox remove-margin-top-bottom">
          <span class="input-group" style="line-height:30px;">
            <label>
              <input type="checkbox" style="width:20px"
                     ng-model="setting.option.isUserImpersonate"
                     ng-disabled="!valueform.$visible" />
            User Impersonate
            </label>
          </span>
        </div>
      </div>
    </div>
    <div class="row interpreter">
      <div class="col-md-12">
        <div class="checkbox remove-margin-top-bottom">
          <span class="input-group" style="line-height:30px;">
            <label>
              <input type="checkbox" style="width:20px" id="isExistingProcess" ng-model="setting.option.isExistingProcess" ng-disabled="!valueform.$visible"/>
              Connect to existing process
            </label>
          </span>
        </div>
      </div>
    </div>
    <div class="row interpreter" ng-if="setting.option.isExistingProcess">
      <div class="col-md-12">
        <b>Host</b>
          <input id="newInterpreterSettingHost" input pu-elastic-input
            pu-elastic-input-minwidth="180px" ng-model="setting.option.host" ng-disabled="!valueform.$visible"  />
      </div>
      <div class="col-md-12">
         <b>Port</b>
         <input id="newInterpreterSettingPort" input pu-elastic-input
            pu-elastic-input-minwidth="180px" ng-model="setting.option.port"  ng-disabled="!valueform.$visible" />
      </div>
    </div>
    <div class="row interpreter">
      <div class="col-md-12">
        <div class="checkbox remove-margin-top-bottom">
          <span class="input-group" style="line-height:30px;">
            <label>
              <input type="checkbox" style="width:20px !important" id="idShowPermission" ng-click="togglePermissions(setting.name)" ng-model="setting.option.setPermission" ng-disabled="!valueform.$visible"/>
               Set permission
            </label>
          </span>
        </div>
      </div>
    </div>
    <div class="row interpreter">
      <div class="col-md-12">
        <!-- permissions -->
        <div ng-show="setting.option.setPermission" class="permissionsForm">
          <div>
            <p>
              Enter comma separated users and groups in the fields. <br />
              Empty field (*) implies anyone can run this interpreter.
            </p>
            <div>

            <span class="owners">Owners </span>
            <select id="{{setting.name}}Owners" class="form-control" multiple="multiple" ng-disabled="!valueform.$visible">
              <option ng-repeat="owner in setting.option.owners" selected="selected">{{owner}}</option>
            </select>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row interpreter" style="margin-top:20px !important">
      <div ng-show="_.isEmpty(setting.properties) && _.isEmpty(setting.dependencies) && !valueform.$visible" class="col-md-12 gray40-message">
        <em>Currently there are no properties and dependencies set for this interpreter</em>
      </div>
      <div class="col-md-12" ng-show="!_.isEmpty(setting.properties) || valueform.$visible">
        <h5>Properties</h5>
        <table class="table table-striped">
          <thead>
            <tr>
              <th style="width:40%">name</th>
              <th style="width:40%">value</th>
              <th style="width:20%" ng-if="valueform.$visible">action</th>
            </tr>
          </thead>
          <tr ng-repeat="key in setting.properties | sortByKey" >
            <td style="vertical-align: middle;">{{key}}</td>
            <td style="vertical-align: middle;">
              <span ng-if="setting.properties[key].type === 'textarea'"
                    editable-textarea="setting.properties[key].value" e-form="valueform" e-msd-elastic>
                 {{setting.properties[key].value | breakFilter}}
              </span>
              <span ng-if="setting.properties[key].type === 'string'"
                    editable-text="setting.properties[key].value" e-form="valueform" e-msd-elastic>
                {{setting.properties[key].value}}
              </span>
              <span ng-if="setting.properties[key].type === 'number'"
                    editable-text="setting.properties[key].value" e-widget-number e-form="valueform" e-msd-elastic>
                {{setting.properties[key].value}}
              </span>
              <span ng-if="setting.properties[key].type === 'url'"
                    editable-text="setting.properties[key].value" e-form="valueform" e-msd-elastic>
                <a ng-href="{{setting.properties[key].value}}">{{setting.properties[key].value}}</a>
              </span>
              <span ng-if="setting.properties[key].type === 'password'"
                    editable-password="setting.properties[key].value" e-form="valueform" e-msd-elastic>
                {{setting.properties[key].value ? '***' : ''}}
              </span>
              <span ng-if="setting.properties[key].type === 'checkbox'"
                    editable-checkbox="setting.properties[key].value" e-form="valueform" e-msd-elastic>
                {{setting.properties[key].value}}
              </span>
            </td>
            <td style="vertical-align: middle;" ng-if="valueform.$visible">
              <button class="btn btn-default btn-sm fa fa-remove"
                   ng-click="removeInterpreterProperty(key, setting.id)">
              </button>
            </td>
          </tr>
          <tr ng-if="valueform.$visible">
            <td style="vertical-align: middle;">
              <input ng-model="setting.propertyKey"
                     pu-elastic-input pu-elastic-input-minwidth="180px" />
            </td>

            <td style="vertical-align: middle;" ng-switch on="setting.propertyType">
              <textarea ng-switch-default msd-elastic ng-model="setting.propertyValue"></textarea>
              <input ng-switch-when="string" type="text" msd-elastic ng-model="setting.propertyValue"/>
              <input ng-switch-when="number" type="text" msd-elastic ng-model="setting.propertyValue" number-widget />
              <input ng-switch-when="url" type="text" msd-elastic ng-model="setting.propertyValue" />
              <input ng-switch-when="password" type="password" msd-elastic ng-model="setting.propertyValue" />
              <input ng-switch-when="checkbox" type="checkbox" msd-elastic ng-model="setting.propertyValue" />
            </td>
            <td style="vertical-align: middle;">
              <select ng-model="setting.propertyType" ng-init="setting.propertyType=interpreterPropertyTypes[0]"
                      ng-options="item for item in interpreterPropertyTypes" ng-change="defaultValueByType(setting)">
              </select>

              <button class="btn btn-default btn-sm fa fa-plus"
                      ng-click="addNewInterpreterProperty(setting.id)">
              </button>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <div class="row interpreter">
      <div class="col-md-12" ng-show="!_.isEmpty(setting.dependencies) || valueform.$visible">
        <h5>Dependencies</h5>
        <p class="gray40-message" style="font-size:12px" ng-show="valueform.$visible">
          These dependencies will be added to classpath when interpreter process starts.</p>
        <table class="table table-striped">
          <thead>
            <tr>
              <th style="width:40%">artifact</th>
              <th style="width:40%">exclude</th>
              <th style="width:20%" ng-if="valueform.$visible">action</th>
            </tr>
          </thead>
          <tr ng-repeat="dep in setting.dependencies">
            <td>
              <span editable-text="dep.groupArtifactVersion" e-placeholder="groupId:artifactId:version or local file path"
                    e-form="valueform" e-msd-elastic e-style="width:100%">
                {{dep.groupArtifactVersion | breakFilter}}
              </span>
            </td>
            <td>
              <textarea ng-if="valueform.$visible" ng-model="dep.exclusions"
                        placeholder="(Optional) comma separated groupId:artifactId list"
                        form="valueform"
                        e-msd-elastic
                        ng-list="">
              </textarea>
              <div ng-if="!valueform.$visible">{{dep.exclusions.join()}}</div>
            </td>
            <td ng-if="valueform.$visible">
              <button class="btn btn-default btn-sm fa fa-remove"
                   ng-click="removeInterpreterDependency(dep.groupArtifactVersion, setting.id)">
              </button>
            </td>
          </tr>
          <tr ng-if="valueform.$visible">
            <td>
              <input ng-model="setting.depArtifact"
                     placeholder="groupId:artifactId:version or local file path"
                     style="width: 100%" />
            </td>
            <td>
              <textarea ng-model="setting.depExclude"
                        placeholder="(Optional) comma separated groupId:artifactId list"
                        msd-elastic
                        ng-list="">
              </textarea>
            </td>
            <td>
              <button class="btn btn-default btn-sm fa fa-plus"
                   ng-click="addNewInterpreterDependency(setting.id)">
              </button>
            </td>
          </tr>
        </table>
        <form editable-form name="valueform"
              onaftersave="updateInterpreterSetting(valueform, setting.id)"
              ng-show="valueform.$visible">
          <button type="submit" class="btn btn-primary">
            Save
          </button>
          <button type="button" class="btn btn-default"
                  ng-disabled="valueform.$waiting"
                  ng-click="valueform.$cancel(); resetInterpreterSetting(setting.id)">
            Cancel
          </button>
        </form>
      </div>
    </div>
  </div>
</div>