${formatter(d.start_time)}
+${Intl.NumberFormat().format(d.total)} Requests
+ `; + }); + + barChartSVG.call(tip); + + // render the chart + d3.select('.http-requests-bar-chart') + .attr('width', width + margin.left + margin.right) + .attr('height', height + margin.top + margin.bottom) + .attr('viewBox', `0 0 ${width} ${height}`); + + // scale and render the axes + const yAxis = d3Axis + .axisRight(yScale) + .ticks(3, '.0s') + .tickSizeOuter(0); + const xAxis = d3Axis + .axisBottom(xScale) + .tickFormat(d3TimeFormat.utcFormat('%b %Y')) + .tickSizeOuter(0); + + barChartSVG + .select('g.x-axis') + .attr('transform', `translate(0,${height})`) + .call(xAxis); + + barChartSVG + .select('g.y-axis') + .attr('transform', `translate(${width - margin.left - margin.right}, 0)`) + .call(yAxis); + + // render the gridlines + const gridlines = d3Axis + .axisRight(yScale) + .ticks(3) + .tickFormat('') + .tickSize(width - margin.left - margin.right); + + barChartSVG.select('.gridlines').call(gridlines); + + // render the bars + const bars = barsContainer.selectAll('.bar').data(parsedCounters, c => +c.start_time); + + const barsEnter = bars + .enter() + .append('rect') + .attr('class', 'bar'); + + const t = d3Transition + .transition() + .duration(DURATION) + .ease(d3Ease.easeQuad); + + bars + .merge(barsEnter) + .attr('x', counter => xScale(counter.start_time)) + // set the initial y value to 0 so the bars animate upwards + .attr('y', () => yScale(0)) + .attr('width', xScale.bandwidth()) + .transition(t) + .delay(function(d, i) { + return i * BASE_SPEED; + }) + .attr('height', counter => height - yScale(counter.total)) + .attr('y', counter => yScale(counter.total)); + + bars.exit().remove(); + + // render transparent bars and bind the tooltip to them since we cannot + // bind the tooltip to the actual bars. this is because the bars are + // within a clipPath & you cannot bind DOM events to non-display elements. + const shadowBarsContainer = d3.select('.shadow-bars'); + + const shadowBars = shadowBarsContainer.selectAll('.bar').data(parsedCounters, c => +c.start_time); + + const shadowBarsEnter = shadowBars + .enter() + .append('rect') + .attr('class', 'bar') + .on('mouseenter', tip.show) + .on('mouseleave', tip.hide); + + shadowBars + .merge(shadowBarsEnter) + .attr('width', xScale.bandwidth()) + .attr('height', counter => height - yScale(counter.total) + HOVER_PADDING) + .attr('x', counter => xScale(counter.start_time)) + .attr('y', counter => yScale(counter.total) - HOVER_PADDING) + .attr('fill', 'transparent') + .attr('stroke', 'transparent'); + + shadowBars.exit().remove(); + }, + + updateDimensions() { + const newWidth = this.element.clientWidth; + const { margin } = this; + + this.set('width', newWidth - margin.left - margin.right); + this.renderBarChart(); + }, + + waitForResize: task(function*() { + while (true) { + yield waitForEvent(window, 'resize'); + run.scheduleOnce('afterRender', this, 'updateDimensions'); + } + }) + .on('didInsertElement') + .cancelOn('willDestroyElement') + .drop(), +}); diff --git a/ui/app/components/http-requests-container.js b/ui/app/components/http-requests-container.js new file mode 100644 index 000000000000..f58b01fce819 --- /dev/null +++ b/ui/app/components/http-requests-container.js @@ -0,0 +1,56 @@ +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 + *
- {{#if showPrefix}}
- {{! need this to prevent a shift in the layout before we transition when saving }}
- {{#if key.isCreating}}
- {{key.initialParentKey}}
- {{else}}
- {{key.parentKey}}
- {{/if}}
- {{/if}}
-
- {{/if}}
-
- {{#if (eq mode "edit") }}
- Edit
- {{/if}}
-
- {{title}}
- - * I will be toggled! - *
- *- {{@message}} -
diff --git a/ui/app/templates/components/alert-popup.hbs b/ui/app/templates/components/alert-popup.hbs index 3a018dd48e21..c6d73c1fa9ef 100644 --- a/ui/app/templates/components/alert-popup.hbs +++ b/ui/app/templates/components/alert-popup.hbs @@ -1,19 +1,24 @@{{i-con glyph="chevron-right" size=12}}{{content}}+{{!-- using Icon here instead of Chevron because two nested tagless components results in a rendered line break between the tags breaking the layout in the
--}} +diff --git a/ui/app/templates/components/console/log-error-with-html.hbs b/ui/app/templates/components/console/log-error-with-html.hbs index 625365907fa9..45e0c4540d24 100644 --- a/ui/app/templates/components/console/log-error-with-html.hbs +++ b/ui/app/templates/components/console/log-error-with-html.hbs @@ -1,5 +1,5 @@ {{! template-lint-disable no-triple-curlies}} {{content}}- {{i-con glyph="close-circled" aria-hidden="true" size=12}} +diff --git a/ui/app/templates/components/console/log-error.hbs b/ui/app/templates/components/console/log-error.hbs index add86ec49224..11cd2647b2a5 100644 --- a/ui/app/templates/components/console/log-error.hbs +++ b/ui/app/templates/components/console/log-error.hbs @@ -1,4 +1,4 @@{{{content}}}- {{i-con glyph="close-circled" aria-hidden="true" size=12}} +diff --git a/ui/app/templates/components/console/log-help.hbs b/ui/app/templates/components/console/log-help.hbs index 09472f01acf9..6d9aa8419fcd 100644 --- a/ui/app/templates/components/console/log-help.hbs +++ b/ui/app/templates/components/console/log-help.hbs @@ -1,5 +1,5 @@{{content}}-{{i-con glyph="information-circled" aria-hidden="true" size=12}} +diff --git a/ui/app/templates/components/console/log-success.hbs b/ui/app/templates/components/console/log-success.hbs index e16ae924c55e..d5bcaa7b05b4 100644 --- a/ui/app/templates/components/console/log-success.hbs +++ b/ui/app/templates/components/console/log-success.hbs @@ -1,4 +1,4 @@Usage: vault <command> [args] Commands: @@ -9,9 +9,10 @@ Commands: list List data or secrets Web CLI Commands: - fullscreen Toggle fullscreen display + api Navigate to the Vault API explorer. Use 'api [filter]' to prefilter the list. clear Clear output from the log clearall Clear output and command history + fullscreen Toggle fullscreen display refresh Refresh the data on the current screen under the CLI window- {{i-con glyph="checkmark-circled" aria-hidden="true" size=12}} +diff --git a/ui/app/templates/components/console/ui-panel.hbs b/ui/app/templates/components/console/ui-panel.hbs index 369f0a733b00..bc3dc043b426 100644 --- a/ui/app/templates/components/console/ui-panel.hbs +++ b/ui/app/templates/components/console/ui-panel.hbs @@ -1,5 +1,5 @@ -{{content}}