mirror of
https://github.com/hashicorp/vault.git
synced 2025-11-27 05:31:40 +01:00
* 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
47 lines
1.3 KiB
JavaScript
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);
|
|
}
|
|
},
|
|
},
|
|
});
|