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

<link rel="import" href="/libs/vendor/polymer/polymer/polymer.html">
<link rel="import" href="/libs/ui-components/data-grid/grid/component.html">
<link rel="import" href="/libs/ui-components/data-grid/grid/column/component.html">
<link rel="import" href="/libs/ui-components/data-grid/filter/select/component.html">
<link rel="import" href="/libs/ui-components/data-grid/filter/select/item/component.html">
<link rel="import" href="/libs/ui-components/data-grid/filter/toggle/component.html">
<link rel="import" href="/libs/ui-components/data-grid/search/component.html">

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

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

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

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

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

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

      <!-- Columns, sorting and cell templates -->
      <p2b-grid-column sortable label="Level" key="level">
        <template>{{ item.level }}</template>
      </p2b-grid-column>
      <p2b-grid-column sortable label="File" key="file">
        <template>{{ item.file }}<span class="lineNumber">{{ item.fileLine }}</template>
      </p2b-grid-column>
      <p2b-grid-column label="Message" key="message">
        <template>{{ item.message }}</template>
      </p2b-grid-column>
      <p2b-grid-column sortable label="Date" key="date">
        <template>{{ item.date }}</template>
      </p2b-grid-column>
      <p2b-grid-column sortable label="threadid" key="threadid">
        <template>{{ item.threadid }}</template>
      </p2b-grid-column>

    </p2b-grid>
  </template>

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