828185db49
* add SelectDropdown * use SelectDropdown instead of HttpRequestsDropdown * use html selector instead of class name * ensure SelectDropdown still works when rendered inside a Toolbar * add tests * remove old HttpRequests component * make SelectDropdown example easier to read in Storybook * add isFullwidth prop * add SelectDropbown inside a Toolbar story * fix tests * remove actions block and call this.onChange directly * replace dropdownLabel with label * rename SelectDropdown to SelecT * add test for onChange * remove selectedItem prop since we don't need it * make Select accept options as an array of strings or objects * Revert "remove selectedItem prop since we don't need it" This reverts commit 7278516de87bb1df60482edb005137252819931e. * use Select inside TtlPicker * remove debugger * use a test selector * fix pki test selectors * improve storybook docs * fix selected value in ttl picker * ensure httprequests dropdown updates the selected item * ensure select dropdown correctly matches selectedItem * rename selectedItem to selectedValue * remove debugger lol * update selectedItem test * add valueAttribute and labelAttribute to Storybook knobs * udpate jsdocs * remove old httprequestsdropdown component * add note that onChange will receive value of select * use Select inside AuthForm * use correct test selector
72 lines
2.2 KiB
JavaScript
72 lines
2.2 KiB
JavaScript
import Component from '@ember/component';
|
|
import { computed } from '@ember/object';
|
|
import isWithinRange from 'date-fns/is_within_range';
|
|
import addMonths from 'date-fns/add_months';
|
|
|
|
/**
|
|
* @module HttpRequestsContainer
|
|
* The HttpRequestsContainer component is the parent component of the HttpRequestsDropdown, HttpRequestsBarChart, and HttpRequestsTable components. It is used to handle filtering the bar chart and table according to selected time window from the dropdown.
|
|
*
|
|
* @example
|
|
* ```js
|
|
* <HttpRequestsContainer @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-container'],
|
|
counters: null,
|
|
timeWindow: 'All',
|
|
dropdownOptions: computed('counters', function() {
|
|
let counters = this.counters || [];
|
|
let options = ['All', 'Last 12 Months'];
|
|
if (counters.length) {
|
|
const years = counters
|
|
.map(counter => {
|
|
const year = new Date(counter.start_time);
|
|
return year.getUTCFullYear().toString();
|
|
})
|
|
.uniq();
|
|
years.sort().reverse();
|
|
options = options.concat(years);
|
|
}
|
|
return options;
|
|
}),
|
|
filteredCounters: computed('counters', 'timeWindow', function() {
|
|
const { counters, timeWindow } = this;
|
|
if (timeWindow === 'All') {
|
|
return counters;
|
|
}
|
|
|
|
let filteredCounters = [];
|
|
if (timeWindow === 'Last 12 Months') {
|
|
const today = new Date();
|
|
const twelveMonthsAgo = addMonths(today, -12);
|
|
filteredCounters = counters.filter(counter => {
|
|
return isWithinRange(counter.start_time, twelveMonthsAgo, today);
|
|
});
|
|
|
|
return filteredCounters;
|
|
}
|
|
|
|
filteredCounters = counters.filter(counter => {
|
|
const year = new Date(counter.start_time).getUTCFullYear();
|
|
return year.toString() === timeWindow;
|
|
});
|
|
return filteredCounters;
|
|
}),
|
|
actions: {
|
|
updateTimeWindow(newValue) {
|
|
this.set('timeWindow', newValue);
|
|
},
|
|
},
|
|
});
|