open-vault/ui/stories/http-requests-bar-chart.stories.js
Noelle Daley 4fd783d3f4
Add HTTP Request Volume page (#6925)
* Add http request volume table (#6765)

* init http metrics page

* remove flex-table-column

* add http requests table

* calculate percent change between each counter

* start percent change tests

* style request table

* show percent more/less glyph

* add percent more less tests

* add inline alert about recorded metrics

* make arrows diagonal

* remove conditional inside countersWithChange

* add better error msg

* use tagName and wrapping element a la glimmer components

* extend ClusterRouteBase so auth and seal checks happen

* make table accessible

* remove curlies

* add HttpRequestsTable to storybook

* make table accessible

* use qunit dom for better assertions

* remove EmptyState since we will never have 0 requests

* ensure counters is set in test context

* Http request volume/add barchart (#6814)

* Add http request volume table (#6765)

* init http metrics page

* remove flex-table-column

* add http requests table

* calculate percent change between each counter

* start percent change tests

* style request table

* show percent more/less glyph

* add percent more less tests

* add inline alert about recorded metrics

* make arrows diagonal

* remove conditional inside countersWithChange

* add better error msg

* use tagName and wrapping element a la glimmer components

* extend ClusterRouteBase so auth and seal checks happen

* make table accessible

* remove curlies

* add HttpRequestsTable to storybook

* make table accessible

* use qunit dom for better assertions

* remove EmptyState since we will never have 0 requests

* ensure counters is set in test context

* add http-requests-bar-chart

* add HttpRequestsBarChart tests

* add HttpRequestsBarChart to Storybook

* format total number of requests according to locale

* do not show extra minus sign when percent change is negative

* add link to request metrics in status bar menu

* only show bar chart if we have data for more than 1 month

* make ticks lighter

* ensure charts show data for correct month

* make example counters response look like the adapter response instead of the raw api response

* ensure ui shows the same utc date as the api response

* add format-utc tests

* downgrade to d3 v4 to support ie11

* add gridlines

* move dasharray to css

* use scheduleOnce instead of debounce to prevent multiple re-renders

* add key function to bars

* add exit case when data is no longer in parsedCounters

* fix timestamp in table test

* fix timestamps

* use utcParse and fallback to isoParse for non-UTC dates

* fix bar chart tests
2019-06-19 16:14:25 -07:00

29 lines
829 B
JavaScript

/* eslint-disable import/extensions */
import hbs from 'htmlbars-inline-precompile';
import { storiesOf } from '@storybook/ember';
import { withKnobs, object } from '@storybook/addon-knobs';
import notes from './http-requests-bar-chart.md';
const COUNTERS = [
{ start_time: '2019-04-01T00:00:00Z', total: 5500 },
{ start_time: '2019-05-01T00:00:00Z', total: 4500 },
{ start_time: '2019-06-01T00:00:00Z', total: 5000 },
];
storiesOf('HttpRequests/BarChart/', module)
.addParameters({ options: { showPanel: true } })
.addDecorator(
withKnobs()
)
.add(`HttpRequestsBarChart`, () => ({
template: hbs`
<h5 class="title is-5">Http Requests Bar Chart</h5>
<HttpRequestsBarChart @counters={{counters}}/>
`,
context: {
counters: object('counters', COUNTERS)
},
}),
{notes}
);