kibana/panels/stats_table/module.html

<div ng-controller='marvel.stats_table' ng-init="init()">
  <style>
    .marvel-table {
      vertical-align: middle;
    }
    .marvel-mean {
      font-size: 20pt;
      font-weight: 200;
      display: inline-block;
      vertical-align: middle;
    }
    .marvel-persistent-name {
      font-size: 9pt;
    }
    .marvel-extended {
      display: inline-block;
      font-size:9pt;
      margin-left: 5px;
      vertical-align: middle;
    }
    .marvel-header {
      margin-bottom: 10px;
    }
    .marvel-header .count{
      font-size: 20pt;
      font-weight: bold;
      margin-left: 10px;
    }
    .marvel-stats-sparkline {
      margin-top: 5px;
      display: inline-block;
      height: 10px;
      width: 50px;
    }
  </style>

  <div class="pull-left marvel-header marvel-table" ng-show="rows.length > 0">
    <span class="count">{{rows.length}} {{panel.mode}}</span> / Last 10m </span>
  </div>
  <div class="pull-right">
    <a href="" ng-class="{strong:!panel.compact}" ng-click="panel.compact=false">Full</a> /
    <a href="" ng-class="{strong:panel.compact}" ng-click="panel.compact=true">Compact</a>
  </div>

  <table class="table table-bordered" ng-if="!panel.compact">
    <thead>
      <th class="pointer" ng-click="set_sort('__name__')">
        {{panel.mode}}
        <i ng-show='"__name__" == panel.sort[0]' class="pointer link" ng-class="{'icon-chevron-up': panel.sort[1] == 'asc','icon-chevron-down': panel.sort[1] == 'desc'}"></i>
        <a ng-disabled="!hasSelected(rows)" id="detail_view_link" ng-href="{{detailViewLink()}}" class="btn btn-mini btn-info pull-right"  bs-tooltip="detailViewTip()" data-placement="right">Dashboard</a>
      </th>

      <th ng-repeat="metric in panel.metrics" ng-class="alertClass(warnLevels['_global_'][metric.field])" class="pointer" ng-click="set_sort(metric.field)">
        {{metric.name}}
        <i ng-show='metric.field == panel.sort[0]' class="pointer link" ng-class="{'icon-chevron-up': panel.sort[1] == 'asc','icon-chevron-down': panel.sort[1] == 'desc'}"></i>
      </th>
    </thead>
    <tr ng-repeat="row in rows | orderBy:get_sort_value:panel.sort[1]=='desc'">
      <td>
        <div class="checkbox">
          <label>
            <input type="checkbox" ng-model="row.selected" ng-checked="row.selected">
            <span class="pointer" ng-click="rowClick(row)">{{row.display_name}}</span>
            <div class="marvel-persistent-name pointer" ng-hide="row.id == row.display_name" ng-click="rowClick(row)">{{row.id}}</div>
          </label>
        </div>
      </td>
      <td ng-repeat="metric in panel.metrics" ng-class="alertClass(warnLevels[row.id][metric.field])">
        <div class="marvel-mean pointer" ng-click="rowClick(row,metric)">
          <span>{{data[row.id+"_"+metric.field].mean | number:metric.decimals}}</span>

          <br>

          <div class="marvel-stats-sparkline" panel='panel' field="metric.field" series="data[row.id+'_'+metric.field+'_history'].series"></div>
        </div>
        <div class="marvel-extended pointer" ng-click="rowClick(row,metric)">
          <span>min: {{data[row.id+"_"+metric.field].min | number:metric.decimals}}</span><br>
          <span>max: {{data[row.id+"_"+metric.field].max | number:metric.decimals}}</span>
        </div>
      </td>
    </tr>
  </table>

  <table class="table table-bordered table-condensed marvel-table" ng-if="panel.compact">
    <thead>
      <th class="pointer" ng-click="set_sort('__name__')">
        {{panel.mode}}
        <i ng-show='"__name__" == panel.sort[0]' class="pointer link" ng-class="{'icon-chevron-up': panel.sort[1] == 'asc','icon-chevron-down': panel.sort[1] == 'desc'}"></i>
        <a ng-disabled="!hasSelected(rows)" id="detail_view_link" ng-href="{{detailViewLink()}}" class="btn btn-mini btn-info pull-right"  bs-tooltip="detailViewTip()" data-placement="right">Dashboard</a>
      </th>

      <th ng-repeat="metric in panel.metrics" ng-class="alertClass(warnLevels['_global_'][metric.field])" class="pointer" ng-click="set_sort(metric.field)">
          {{metric.name}}
          <i ng-show='metric.field == panel.sort[0]' class="pointer link" ng-class="{'icon-chevron-up': panel.sort[1] == 'asc','icon-chevron-down': panel.sort[1] == 'desc'}"></i>
      </th>
    </thead>
    <tr ng-repeat="row in rows | orderBy:get_sort_value:panel.sort[1]=='desc'">
      <td>
        <div class="checkbox">
          <label>
            <input type="checkbox" ng-model="row.selected" ng-checked="row.selected">
          </label>
          <span class="pointer" ng-click="rowClick(row)">{{ row.display_name }}</span>
        </div>
      </td>
      <td ng-repeat="metric in panel.metrics" ng-class="alertClass(warnLevels[row.id][metric.field])">
        <div class="pointer" ng-click="rowClick(row,metric)">
          <span>{{data[row.id+"_"+metric.field].mean | number:metric.decimals}}</span>

          <div class="marvel-stats-sparkline pointer" ng-click="rowClick(row,metric)" panel='panel' field="metric.field" series="data[row.id+'_'+metric.field+'_history'].series"></div>
        </div>
      </td>
    </tr>
  </table>

</div>