browser/pipe-viewers/builtin/vlog/component.html

<link rel="import" href="../../../third-party/polymer/polymer.html">
<link rel="import" href="../../../third-party/core-icon/core-icon.html">
<link rel="import" href="../../../third-party/ag-data-grid/ag-data-grid.html">

<polymer-element name="p2b-plugin-vlog">
  <template>
    <link rel="stylesheet" href="../../../libs/css/common-style.css">
    <link rel="stylesheet" href="component.css">

    <ag-data-grid id="grid" defaultSortKey="date" dataSource="{{ dataSource }}" summary="Data Grid displaying Vanadium log items in a tabular format with filters and search options.">

      <!-- Search -->
      <ag-data-grid-search label="Search Logs"></ag-data-grid-search>

      <!-- Filter to select log level (multiple allowed) -->
      <ag-data-grid-filter-select multiple key="level" label="Show levels">
        <ag-data-grid-filter-select-item checked label="Fatal" value="fatal"></ag-data-grid-filter-select-item>
        <ag-data-grid-filter-select-item checked label="Error" value="error"></ag-data-grid-filter-select-item>
        <ag-data-grid-filter-select-item checked label="Warning" value="warning"></ag-data-grid-filter-select-item>
        <ag-data-grid-filter-select-item checked label="Info" value="info"></ag-data-grid-filter-select-item>
      </ag-data-grid-filter-select>

      <!-- Filter to select date range -->
      <ag-data-grid-filter-select key="date" label="Logs since">
        <ag-data-grid-filter-select-item checked label="Any time" value="all"></ag-data-grid-filter-select-item>
        <ag-data-grid-filter-select-item label="Past 1 hour" value="1"></ag-data-grid-filter-select-item>
        <ag-data-grid-filter-select-item label="Past 24 hours" value="24"></ag-data-grid-filter-select-item>
      </ag-data-grid-filter-select>

      <!-- Toggle to allow one to pause the display of incoming logs -->
      <ag-data-grid-filter-toggle key="autorefresh" label="Live Refresh" checked></ag-data-grid-filter-toggle>

      <!-- Columns, sorting and cell templates -->
      <ag-data-grid-column label="Level" key="level" sortable flex="2" priority="2" >
        <template>
          <core-icon class="level-icon {{ item.level }}" icon="{{ item.icon }}" title="{{item.level}}"></core-icon>
          <span  moreInfoOnly style="vertical-align:middle">{{item.level}}</span>
        </template>
      </ag-data-grid-column>
      <ag-data-grid-column label="File" key="file" sortable flex="4" minFlex="2" priority="4" >
        <template>{{ item.file }}<span class="line-number">{{ item.fileLine }}</span></template>
      </ag-data-grid-column>
      <ag-data-grid-column label="Message" key="message" primary flex="8" minFlex="5" priority="1" >
        <template><div class="message-text">{{ item.message }}</div></template>
      </ag-data-grid-column>
      <ag-data-grid-column label="Date" key="date" sortable flex="4" minFlex="3" priority="3">
        <template>
          <abbr gridOnly title="{{item.date}}">{{ item.formattedDate }}</abbr>
          <span moreInfoOnly>{{item.date}}</span>
        </template>

      </ag-data-grid-column>
      <ag-data-grid-column label="Threadid" key="threadid" sortable flex="0" priority="5">
        <template>{{ item.threadId }}</template>
      </ag-data-grid-column>

    </ag-data-grid>
  </template>

  <script>
    Polymer('p2b-plugin-vlog', {
      refreshGrid: function() {
        this.$.grid.refresh();
      }
    });
  </script>
</polymer-element>