open-consul/ui-v2/app/components/topology-metrics/card.hbs

56 lines
1.5 KiB
Handlebars
Raw Normal View History

Add metrics rendering to the new topology view. (#8858) * Remove unused StatsCard component * Create Card and Stats contextual components with styling * Send endpoint, item, and protocol to Stats as props * WIP basic plumbing for metrics in Ember * WIP metrics data source now works for different protocols and produces reasonable mock responses * WIP sparkline component * Mostly working metrics and graphs in topology * Fix date in tooltip to actually be correct * Clean up console.log * Add loading frame and create a style sheet for Stats * Various polish fixes: - Loading state for graph - Added fake latency cookie value to test loading - If metrics provider has no series/stats for the service show something that doesn't look broken - Graph hover works right to the edge now - Stats boxes now wrap so they are either shown or not as will fit not cut off - Graph resizes when browser window size changes - Some tweaks to number formats and stat metrics to make them more compact/useful * Thread Protocol through topology model correctly * Rebuild assetfs * Fix failing tests and remove stats-card now it's changed and become different * Fix merge conflict * Update api doublt * more merge fixes * Add data-permission and id attr to Card * Run JS linter * Move things around so the tests run with everything available * Get tests passing: 1. Remove fakeLatency setTimeout (will be replaced with CONSUL_LATENCY in mocks) 2. Make sure any event handlers are removed * Make sure the Consul/scripts are available before the app * Make sure interval gets set if there is no cookie value * Upgrade mocks so we can use CONSUL_LATENCY * Fix handling of no series values from Prometheus * Update assetfs and fix a comment * Rebase and rebuild assetfs; fix tcp metric series units to be bits not bytes * Rebuild assetfs * Hide stats when provider is not configured Co-authored-by: kenia <keniavalladarez@gmail.com> Co-authored-by: John Cowen <jcowen@hashicorp.com>
2020-10-09 20:31:15 +00:00
{{#each @items as |item|}}
<div
class="card"
data-permission={{service/intention-permissions item}}
id="{{item.Namespace}}{{item.Name}}"
>
<p>
{{item.Name}}
</p>
<div class="details">
{{#if (and (and nspace (env 'CONSUL_NSPACES_ENABLED')) @type)}}
<dl class="nspace">
<dt>
<Tooltip>
Namespace
</Tooltip>
</dt>
<dd>
{{item.Namespace}}
</dd>
</dl>
{{/if}}
{{#if (eq item.Datacenter @dc)}}
{{#let (service/health-percentage item) as |percentage|}}
{{#if (not-eq percentage.passing 0)}}
<span class="passing">{{percentage.passing}}%</span>
{{/if}}
{{#if (not-eq percentage.warning 0)}}
<span class="warning">{{percentage.warning}}%</span>
{{/if}}
{{#if (not-eq percentage.critical 0)}}
<span class="critical">{{percentage.critical}}%</span>
{{/if}}
{{/let}}
{{else}}
<dl class="health">
<dt>
<Tooltip>
We are unable to determine the health status of services in remote datacenters.
</Tooltip>
</dt>
<dd>
Health
</dd>
</dl>
{{/if}}
</div>
{{#if @hasMetricsProvider }}
{{#if (eq @type 'upstream')}}
<TopologyMetrics::Stats @endpoint='upstream-summary-for-service' @service={{@service}} @item={{item.Name}} />
{{else}}
<TopologyMetrics::Stats @endpoint='downstream-summary-for-service' @service={{@service}} @item={{item.Name}} />
{{/if}}
{{/if}}
</div>
{{/each}}