mirror of
https://github.com/hashicorp/vault.git
synced 2025-08-21 14:41:09 +02:00
177115366b
* 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
57 lines
1.8 KiB
JavaScript
57 lines
1.8 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',
|
|
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 = counter.start_time.substr(0, 4);
|
|
return year === timeWindow;
|
|
});
|
|
return filteredCounters;
|
|
}),
|
|
actions: {
|
|
updateTimeWindow(newValue) {
|
|
this.set('timeWindow', newValue);
|
|
},
|
|
},
|
|
});
|