periscope-ui/src/controls/grid-menu.html

Perscope default set of widget/dashboard implementations

<template>
  <button type="button" class="btn btn-link" click.trigger="openPopup()" show.bind="showDrillDownButton"><i class="fa fa-cog"></i> Drill Down</button>
  <div id="popupDrilldown" class="modal fade" ref='popupDrilldown'>
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h3 class="modal-title">Drilldown config</h3>
        </div>
        <div class="modal-body widgets-panel-modal">
          <form>
            <ul class="list-unstyled">
              <li repeat.for="error of errors">
                <span class="text-danger">${error.message}</span>
              </li>
            </ul>
            <h4>DataService:</h4>
            <div class="form-group">
              <label for="url">Url:</label>
              <input type="text" class="form-control" id="url" placeholder="Url" tabindex="1" value.bind="drillDownModel.url">
              <!--<a class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                With Credentials:
              </a>-->
            </div>
            <!--<div class="collapse" id="collapseExample">
              <div class="well">
                <div class="form-group">
                  <label for="username">Username:</label>
                  <input type="text" class="form-control" id="username" placeholder="Username"  value.bind="drillDownModel.username">
                </div>
                <div class="form-group">
                  <label for="username">Password:</label>
                  <input type="text" class="form-control" id="password" placeholder="Password" value.bind="drillDownModel.password">
                </div>
              </div>
            </div>-->

            <h4>Query:</h4>
            <div class="form-group">
              <label for="query">Query:</label>
              <textarea id="query" rows="5" class="form-control" tabindex="2"  value.bind="drillDownModel.query"></textarea>
            </div>
            <div class="form-group">
              <label>Available Query Params:</label>
              <ul  class="list-inline">
                <li repeat.for="param of availableParams">${param}</li>
              </ul>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal" tabindex="3" >Close</button>
          <button type="button" class="btn btn-primary" click.trigger="save()" tabindex="4" >Save</button>
        </div>
      </div>
    </div>
  </div>
</template>