5cd7e924fe
* init dropdown * add dropdown to storybook * move http requests components into container * add event handler for selecting new time window * no need for this. in the template * filter bar chart and table * add bar chart transitions * handle Last 12 Months in dropdown * don't use fake data * start tests * add jsdoc and notes for storybook * add container to storybook * compute filteredCounters when counters change * move static dropdown options to template * add tests * style the dropdown * use this.elementId * fix linting errors * use ember array extensions * use fillIn instead of page object and make dom assertions consistent * calculate the correct percent change between months * use data-test selector instead of id * show plus or minus next to percent change
33 lines
1 KiB
Handlebars
33 lines
1 KiB
Handlebars
<div class="http-requests-table">
|
|
<table class="is-fullwidth">
|
|
<caption class="is-collapsed">HTTP Request Volume</caption>
|
|
<thead class="has-text-weight-semibold">
|
|
<tr>
|
|
<th scope="col">Month</th>
|
|
<th scope="col">Requests</th>
|
|
{{#if (gt counters.length 1)}}
|
|
<th scope="col">Change</th>
|
|
{{/if}}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{#each (reverse countersWithChange) as |c|}}
|
|
<tr>
|
|
<th scope="row" class="start-time has-text-black">{{ format-utc c.start_time '%B %Y' }}</th>
|
|
<td>{{format-number c.total}}</td>
|
|
{{#if (gt counters.length 1)}}
|
|
<td class="has-text-grey-dark percent-change" data-test-change="{{c.percentChange}}">
|
|
{{#if c.percentChange}}
|
|
<Icon @glyph={{c.glyph}} class={{c.glyph}}/>
|
|
{{c.percentChange}}%
|
|
{{else}}
|
|
<Icon @glyph="minus-plain" />
|
|
{{/if}}
|
|
</td>
|
|
{{/if}}
|
|
</tr>
|
|
{{/each}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|