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">
        <div class="search-field-wrapper">
          <button class="btn btn-success pull-right" config-modal="app/partials/playlist.html">
            <i class="icon-play"></i>
            Playlist
          </button>
          <button class="btn btn-success pull-right" ng-click="toggleImport($event)">
            <i class="icon-download-alt"></i>
            Import
          </button>
          <button class="btn btn-success pull-right" ng-click="newDashboard()">
            <i class="icon-th-large"></i>
            New
          </button>
          <span class="position: relative;">
            <input  type="text"
                    placeholder="search dashboards, metrics, or graphs"
                    xng-focus="giveSearchFocus"
                    ng-keydown="keyDown($event)"
                    ng-model="query.query" spellcheck='false'
                    ng-change="search()" />
            <a class="search-tagview-switch" href="javascript:void(0);"
              ng-class="{'active': tagsOnly}"
              ng-click="showTags($event)">tags</a>
          </span>
        </div>

        <h6 ng-hide="results.dashboards.length || results.metrics.length">No dashboards or metrics matching your query found</h6>

        <table class="table table-condensed table-striped" ng-if="tagsOnly">
          <tr ng-repeat="tag in results.tags" ng-class="{'selected-tag': $index === selectedIndex }">
            <td>
              <a ng-click="filterByTag(tag.term, $event)" class="label label-tag">
                {{tag.term}} &nbsp;({{tag.count}})
              </a>
            </td>
            <td style="width:100%;padding-left: 10px;font-weight: bold;">
            </td>
          </tr>
        </table>

        <table class="table table-condensed table-striped" ng-if="!tagsOnly">
          <tr bindonce ng-repeat="row in 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 results.dashboards"
              ng-class="{'selected': $index === selectedIndex }">
            <td><a confirm-click="deleteDashboard(row._id)" confirmation="Are you sure you want to delete the {{row._id}} dashboard"><i class="icon-remove"></i></a></td>
            <td style="width:100%">
              <a href="#/dashboard/elasticsearch/{{row._id}}" bo-text="row._id"></a>
            </td>
            <td style="white-space: nowrap; text-align: right;">
              <a ng-click="filterByTag(tag, $event)" ng-repeat="tag in row._source.tags" style="margin-right: 5px;" class="label label-tag">
                {{tag}}
              </a>
            </td>
            <td><a><i class="icon-share" ng-click="shareDashboard(row._id, row._id)" config-modal="app/partials/dashLoaderShare.html"></i></a></td>
          </tr>
        </table>
      </div>
    </li>

    <!-- ng-show="dashboard.loader.load_gist || dashboard.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.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>
  </ul>