energylink/src/app/partials/search.html

  <style>
    #grafana-search {
      position: fixed;
      right: 0;
      left: 0;
      top: 39px;
      margin-right: auto;
      margin-left: auto;
      /* give it dimensions */
      min-height: 10em;
      width: 90%;
    }
  </style>

  <a href="#" bs-tooltip="'Search'" data-placement="bottom" ng-click="openSearch()" class="dropdown-toggle" data-toggle="dropdown">
    <i class='icon-folder-open'></i>
  </a>

  <ul class="dropdown-menu" id="grafana-search">
    <li ng-if="!showImport">
      <div class="grafana-search-panel">
        <input  type="text"
                placeholder="search dashboards, metrics, or graphs"
                xng-focus="giveSearchFocus"
                ng-keydown="keyDown($event)"
                ng-model="elasticsearch.query"
                ng-change="elasticsearch_dblist(elasticsearch.query)" />
        <h6 ng-hide="search_results.dashboards.length || search_results.metrics.length">No dashboards or metrics matching your query found</h6>
        <table class="table table-condensed table-striped">
          <tr bindonce ng-repeat="row in search_results.metrics"
              class="grafana-search-metric-result"
              ng-class="{'selected': $index === selectedIndex }">
            <td><span class="label label-info">metric</span></td>
            <td class="grafana-search-metric-name">
              {{row._id}}
            </td>
            <td style="width:100%;">
              <div class="grafana-search-metric-actions">
                <a ng-click="addMetricToCurrentDashboard(row._id)"><i class="icon-plus-sign"></i> Add to dashboard</a>
              </div>
            </td>
          </tr>

          <tr bindonce
              ng-repeat="row in search_results.dashboards"
              ng-class="{'selected': $index === selectedIndex }">
            <td><a ng-click="elasticsearch_delete(row._id)"><i class="icon-remove"></i></a></td>
            <td style="width:100%"><a href="#/dashboard/elasticsearch/{{row._id}}" bo-text="row._id"></a></td>
            <td><a><i class="icon-share" ng-click="share = dashboard.share_link(row._id,'elasticsearch',row._id)" bs-modal="'app/panels/dashcontrol/share.html'"></i></a></td>
          </tr>
        </table>
      </div>
    </li>

    <li class="pull-right" style="margin: 5px;">
      <a ng-click="toggleImport($event)">Import</a>
    </li>
    <!-- ng-show="dashboard.current.loader.load_gist || dashboard.current.loader.load_local" -->
    <li ng-if="showImport" style="margin: 20px;">
      <div class="editor-row">
        <div class="section">
          <div class="editor-option">
            <h5>Local File <tip>Load dashboard JSON layout from file</tip></h5>
            <form>
              <input type="file" id="dashupload" dash-upload /><br>
            </form>
          </div>
        </div>
      </div>

      <div class="editor-row" ng-show='dashboard.current.loader.load_gist'>
        <h5>Gist <tip>Enter a gist number or url</tip></h5>
        <form>
          <input type="text" ng-model="gist.url" placeholder="Gist number or URL"><br>
          <button class="btn" ng-click="gist_dblist(dashboard.gist_id(gist.url))" ng-show="dashboard.is_gist(gist.url)"><i class="icon-github-alt"></i> Get gist:{{gist.url | gistid}}</button>
          <h6 ng-show="gist.files.length">Dashboards in gist:{{gist.url | gistid}} <small>click to load</small></h6>
          <h6 ng-hide="gist.files.length || !gist.url.length">No gist dashboards found</h6>
          <table class="table table-condensed table-striped">
            <tr ng-repeat="file in gist.files">
              <td><a ng-click="dashboard.dash_load(file)">{{file.title}}</a></td>
            </tr>
          </table>
        </form>
      </div>
    </li>