vault/ui/app/components/http-requests-dropdown.js
Noelle Daley 177115366b
Http request volume/dropdown (#7016)
* 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
2019-07-03 10:46:40 -07:00

47 lines
1.3 KiB
JavaScript

import Component from '@ember/component';
import { computed } from '@ember/object';
/**
* @module HttpRequestsDropdown
* HttpRequestsDropdown components are used to render a dropdown that filters the HttpRequestsBarChart.
*
* @example
* ```js
* <HttpRequestsDropdown @counters={counters} />
* ```
*
* @param counters=null {Array} - A list of objects containing the total number of HTTP Requests for each month. `counters` should be the response from the `/internal/counters/requests` endpoint which looks like:
* COUNTERS = [
* {
* "start_time": "2019-05-01T00:00:00Z",
* "total": 50
* }
* ]
*/
export default Component.extend({
classNames: ['http-requests-dropdown'],
counters: null,
timeWindow: 'All',
options: computed('counters', function() {
let counters = this.counters || [];
let options = [];
if (counters.length) {
const years = counters.map(counter => counter.start_time.substr(0, 4)).uniq();
years.sort().reverse();
options = options.concat(years);
}
return options;
}),
onChange() {},
actions: {
onSelectTimeWindow(e) {
const newValue = e.target.value;
const { timeWindow } = this;
if (newValue !== timeWindow) {
this.onChange(newValue);
}
},
},
});