blob: e26a10cfc74d4498246b407047b7696d94abb124 [file] [log] [blame]
<!-- ================= Events view =================== -->
<dom-module id="events-view">
<template>
<style>
:host {
display: flex;
flex-direction: row;
overflow: hidden;
}
</style>
<div id=events-view-left-pane class="flexcol">
<!-- Filter Box: This the top bar which contains the search box. -->
<div id=events-view-filter-box>
<table width=100%>
<tr>
<td width=1%>
<span id=events-view-filter-help-hover class=mouse-over-help-hover>(?)</span>
</td>
<td width=98%><input type="search" incremental id=events-view-filter-input
title="Sort and filter"></td>
<td width=1% id=events-view-filter-count>(1 of 34)</td>
</tr>
</table>
</div>
<!-- Inline filter help -->
<div id=events-view-filter-help class=mouse-over-help>
Sort options:
<ul>
<li>sort:id (default)
<li>sort:active
<li>sort:desc
<li>sort:duration
<li>sort:type
<li>-sort:&lt;option&gt; Reverses sort order
</ul>
Additional filters:
<ul>
<li>id:#[,#]*
<li>type:&lt;type&gt;[,&lt;type&gt;]*
<li>is:active
<li>is:error
<li>-&lt;filter&gt; Inverts a filter.
</ul>
</div>
<!-- Events Box: This the panel on the left which lists the sources -->
<div id=events-view-source-list class="flexfill scrollable">
<table id=events-view-source-list-table cellspacing=0 cellpadding=0 width=100%>
<thead>
<tr>
<td style='border-left:0'><input type=checkbox id=events-view-select-all
title="Select all"></td>
<td id=events-view-sort-by-id>ID</td>
<td id=events-view-sort-by-source>Source Type</td>
<td id=events-view-sort-by-description width=99%>Description</td>
</tr>
</thead>
<!-- Events table body: This is where request rows go into -->
<tbody id=events-view-source-list-tbody></tbody>
</table>
</div>
</div>
<!-- Splitter Box: This is a handle to resize the vertical divider -->
<div id=events-view-splitter-box class=vertical-splitter></div>
<!-- Details box: This is the panel on the right which shows information -->
<div class="flexfill scrollable">
<div id=events-view-details-log-box class="event-log content-box"></div>
</div>
</template>
<script>
Polymer({
is: 'events-view',
});
</script>
</dom-module>