db053601e5
* Core usage metrics v1 (merge to side-branch) (#8238) * restructure menu layout per designs * setup new routing that will set the stage for a metrics landing page * fix formatting * Revert "fix formatting" This reverts commit e77cdec5e58cdcea49aa1b97f80238433c4f7d1e. * fix formatting * small styling changes * change request routing to metrics * rename route js file * Core usage metrics v2 (#8263) * restructure menu layout per designs * setup new routing that will set the stage for a metrics landing page * fix formatting * Revert "fix formatting" This reverts commit e77cdec5e58cdcea49aa1b97f80238433c4f7d1e. * fix formatting * small styling changes * change request routing to metrics * rename route js file * setup selectable card component and api request * add token and http request models to route and template * add entities to route and template * clean up * add breadcrumbs and some clean up work * remove unused selectable-card component * refactor to a serializer * move adapters, serializers, and models into metrics folder * remove unused file * address pr comments * address pr comments * Core Usage Metrics V3 (#8316) * restructure menu layout per designs * setup new routing that will set the stage for a metrics landing page * fix formatting * Revert "fix formatting" This reverts commit e77cdec5e58cdcea49aa1b97f80238433c4f7d1e. * fix formatting * small styling changes * change request routing to metrics * rename route js file * setup selectable card component and api request * add token and http request models to route and template * add entities to route and template * clean up * add breadcrumbs and some clean up work * remove unused selectable-card component * setup smaller http request bar chart * refactor to a serializer * move adapters, serializers, and models into metrics folder * remove unused file * setup change part of component * fix broken model * add conditional class * setting up computed properties in new component * small fixes * setup components * minor fixes * rename * clean up * firefox fix * remove shadow bars * move out of metrics folders * modify permissions to show difference between token entities and requests * make tests * fix class names and associated tests * clean up * fix text overflow in non-chrome browsers * address pr comments, specifically class names and tests * move into one component * clean up component descriptions in comments * small wording changes * fix for accessibility * address pr comments around component examples for storybook * fix test * fix failing test * fix test
55 lines
2.2 KiB
JavaScript
55 lines
2.2 KiB
JavaScript
import Component from '@ember/component';
|
|
import { computed } from '@ember/object';
|
|
|
|
/**
|
|
* @module SelectableCardContainer
|
|
* SelectableCardContainer components are used to hold SelectableCard components. They act as a CSS grid container, and change grid configurations based on the boolean of @gridContainer.
|
|
*
|
|
* @example
|
|
* ```js
|
|
* <SelectableCardContainer @counters={{model}} @gridContainer="true" />
|
|
* ```
|
|
* @param counters=null {Object} - Counters is an object that returns total entities, tokens, and an array of objects with the total https request per month.
|
|
* @param gridContainer=false {Boolean} - gridContainer is optional. If true, it's telling the container it will have a nested CSS grid.
|
|
*
|
|
* const MODEL = {
|
|
* totalEntities: 0,
|
|
* httpsRequests: [{ start_time: '2019-04-01T00:00:00Z', total: 5500 }],
|
|
* totalTokens: 1,
|
|
* };
|
|
*/
|
|
|
|
export default Component.extend({
|
|
classNameBindings: ['isGridContainer'],
|
|
counters: null,
|
|
gridContainer: false,
|
|
isGridContainer: computed('counters', function() {
|
|
return this.counters.httpsRequests.length > 1
|
|
? 'selectable-card-container has-grid'
|
|
: 'selectable-card-container';
|
|
}),
|
|
totalHttpRequests: computed('counters', function() {
|
|
let httpsRequestsArray = this.counters.httpsRequests || [];
|
|
return httpsRequestsArray.firstObject.total;
|
|
}),
|
|
// Limit number of months returned to the most recent 12
|
|
filteredHttpsRequests: computed('counters', function() {
|
|
let httpsRequestsArray = this.counters.httpsRequests || [];
|
|
if (httpsRequestsArray.length > 12) {
|
|
httpsRequestsArray = httpsRequestsArray.slice(0, 12);
|
|
}
|
|
return httpsRequestsArray;
|
|
}),
|
|
percentChange: computed('counters', function() {
|
|
let httpsRequestsArray = this.counters.httpsRequests || [];
|
|
let lastTwoMonthsArray = httpsRequestsArray.slice(0, 2);
|
|
let previousMonthVal = lastTwoMonthsArray.lastObject.total;
|
|
let thisMonthVal = lastTwoMonthsArray.firstObject.total;
|
|
|
|
let percentChange = (((previousMonthVal - thisMonthVal) / previousMonthVal) * 100).toFixed(1);
|
|
// a negative value indicates a percentage increase, so we swap the value
|
|
percentChange = -percentChange;
|
|
return percentChange;
|
|
}),
|
|
});
|