consul/ui/packages/consul-ui/app/components/topology-metrics/index.hbs

145 lines
4.8 KiB
Handlebars
Raw Normal View History

{{!
Copyright (c) HashiCorp, Inc.
[COMPLIANCE] License changes (#18443) * Adding explicit MPL license for sub-package This directory and its subdirectories (packages) contain files licensed with the MPLv2 `LICENSE` file in this directory and are intentionally licensed separately from the BSL `LICENSE` file at the root of this repository. * Adding explicit MPL license for sub-package This directory and its subdirectories (packages) contain files licensed with the MPLv2 `LICENSE` file in this directory and are intentionally licensed separately from the BSL `LICENSE` file at the root of this repository. * Updating the license from MPL to Business Source License Going forward, this project will be licensed under the Business Source License v1.1. Please see our blog post for more details at <Blog URL>, FAQ at www.hashicorp.com/licensing-faq, and details of the license at www.hashicorp.com/bsl. * add missing license headers * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 --------- Co-authored-by: hashicorp-copywrite[bot] <110428419+hashicorp-copywrite[bot]@users.noreply.github.com>
2023-08-11 13:12:13 +00:00
SPDX-License-Identifier: BUSL-1.1
}}
<div
{{on-resize this.calculate}}
class="topology-container consul-topology-metrics"
>
{{#if (gt this.downstreams.length 0)}}
<div
id="downstream-container"
{{did-insert this.setHeight 'downstream-lines'}}
{{did-update this.setHeight 'downstream-lines' this.downstreams}}
>
{{#if (not this.emptyColumn)}}
<div>
<p>{{@dc.Name}}</p>
<span>
<Tooltip>
Only showing downstreams within the current datacenter for {{@service.Service.Service}}.
</Tooltip>
</span>
</div>
{{/if}}
{{#each this.downstreams as |item|}}
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
<TopologyMetrics::Card
@nspace={{@nspace}}
@dc={{@dc.Name}}
@service={{@service.Service}}
@item={{item}}
@hasMetricsProvider={{@hasMetricsProvider}}
@noMetricsReason={{this.noMetricsReason}}
>
{{#if (and @hasMetricsProvider this.mainNotIngressService (not-eq item.Kind 'ingress-gateway') this.mainNotAPIGatewayService (not-eq item.Kind 'api-gateway'))}}
{{!-- One of the only places in the app where it's acceptable to default to 'default' namespace --}}
<TopologyMetrics::Stats
data-test-topology-metrics-downstream-stats
@nspace={{or item.Namespace 'default'}}
ui: Partitions Application Layer (#11017) * Add Partition to all our models * Add partitions into our serializers/fingerprinting * Make some amends to a few adapters ready for partitions * Amend blueprints to avoid linting error * Update all our repositories to include partitions, also Remove enabled/disable nspace repo and just use a nspace with conditionals * Ensure nspace and parition parameters always return '' no matter what * Ensure data-sink finds the model properly This will later be replaced by a @dataSink decorator but we are find kicking that can down the road a little more * Add all the new partition data layer * Add a way to set the title of the page from inside the route and make it accessibile via a route announcer * Make the Consul Route the default/basic one * Tweak nspace and partition abilities not to check the length * Thread partition through all the components that need it * Some ACL tweaks * Move the entire app to use partitions * Delete all the tests we no longer need * Update some Unit tests to use partition * Fix up KV title tests * Fix up a few more acceptance tests * Fixup and temporarily ignore some acceptance tests * Stop using ember-cli-page-objects fillable as it doesn't seem to work * Fix lint error * Remove old ACL related test * Add a tick after filling out forms * Fix token warning modal * Found some more places where we need a partition var * Fixup some more acceptance tests * Tokens still needs a repo service for CRUD * Remove acceptance tests we no longer need * Fixup and "FIXME ignore" a few tests * Remove an s * Disable blocking queries for KV to revert to previous release for now * Fixup adapter tests to follow async/function resolving interface * Fixup all the serializer integration tests * Fixup service/repo integration tests * Fixup deleting acceptance test * Fixup some ent tests * Make sure nspaces passes the dc through for when thats important * ...aaaand acceptance nspaces with the extra dc param
2021-09-15 18:50:11 +00:00
@partition={{or item.Partition 'default'}}
@dc={{item.Datacenter}}
@endpoint='downstream-summary-for-service'
@service={{@service.Service.Service}}
@item={{item.Name}}
@noMetricsReason={{this.noMetricsReason}}
/>
{{/if}}
</TopologyMetrics::Card>
{{/each}}
</div>
{{/if}}
<div id="metrics-container">
<div class="metrics-header">
{{@service.Service.Service}}
</div>
{{#if (not (and (eq @service.Service.Meta.external-source 'consul-api-gateway') (eq @service.Service.Kind 'ingress-gateway'))) }}
{{#if @hasMetricsProvider}}
<TopologyMetrics::Series
@nspace={{or @service.Service.Namespace 'default'}}
ui: Partitions Application Layer (#11017) * Add Partition to all our models * Add partitions into our serializers/fingerprinting * Make some amends to a few adapters ready for partitions * Amend blueprints to avoid linting error * Update all our repositories to include partitions, also Remove enabled/disable nspace repo and just use a nspace with conditionals * Ensure nspace and parition parameters always return '' no matter what * Ensure data-sink finds the model properly This will later be replaced by a @dataSink decorator but we are find kicking that can down the road a little more * Add all the new partition data layer * Add a way to set the title of the page from inside the route and make it accessibile via a route announcer * Make the Consul Route the default/basic one * Tweak nspace and partition abilities not to check the length * Thread partition through all the components that need it * Some ACL tweaks * Move the entire app to use partitions * Delete all the tests we no longer need * Update some Unit tests to use partition * Fix up KV title tests * Fix up a few more acceptance tests * Fixup and temporarily ignore some acceptance tests * Stop using ember-cli-page-objects fillable as it doesn't seem to work * Fix lint error * Remove old ACL related test * Add a tick after filling out forms * Fix token warning modal * Found some more places where we need a partition var * Fixup some more acceptance tests * Tokens still needs a repo service for CRUD * Remove acceptance tests we no longer need * Fixup and "FIXME ignore" a few tests * Remove an s * Disable blocking queries for KV to revert to previous release for now * Fixup adapter tests to follow async/function resolving interface * Fixup all the serializer integration tests * Fixup service/repo integration tests * Fixup deleting acceptance test * Fixup some ent tests * Make sure nspaces passes the dc through for when thats important * ...aaaand acceptance nspaces with the extra dc param
2021-09-15 18:50:11 +00:00
@partition={{or service.Service.Partition 'default'}}
@dc={{@dc.Name}}
@service={{@service.Service.Service}}
@protocol={{@topology.Protocol}}
@noMetricsReason={{this.noMetricsReason}}
/>
{{#if (or (this.mainNotIngressService) (this.mainNotAPIGatewayService))}}
<TopologyMetrics::Stats
@nspace={{or @service.Service.Namespace 'default'}}
ui: Partitions Application Layer (#11017) * Add Partition to all our models * Add partitions into our serializers/fingerprinting * Make some amends to a few adapters ready for partitions * Amend blueprints to avoid linting error * Update all our repositories to include partitions, also Remove enabled/disable nspace repo and just use a nspace with conditionals * Ensure nspace and parition parameters always return '' no matter what * Ensure data-sink finds the model properly This will later be replaced by a @dataSink decorator but we are find kicking that can down the road a little more * Add all the new partition data layer * Add a way to set the title of the page from inside the route and make it accessibile via a route announcer * Make the Consul Route the default/basic one * Tweak nspace and partition abilities not to check the length * Thread partition through all the components that need it * Some ACL tweaks * Move the entire app to use partitions * Delete all the tests we no longer need * Update some Unit tests to use partition * Fix up KV title tests * Fix up a few more acceptance tests * Fixup and temporarily ignore some acceptance tests * Stop using ember-cli-page-objects fillable as it doesn't seem to work * Fix lint error * Remove old ACL related test * Add a tick after filling out forms * Fix token warning modal * Found some more places where we need a partition var * Fixup some more acceptance tests * Tokens still needs a repo service for CRUD * Remove acceptance tests we no longer need * Fixup and "FIXME ignore" a few tests * Remove an s * Disable blocking queries for KV to revert to previous release for now * Fixup adapter tests to follow async/function resolving interface * Fixup all the serializer integration tests * Fixup service/repo integration tests * Fixup deleting acceptance test * Fixup some ent tests * Make sure nspaces passes the dc through for when thats important * ...aaaand acceptance nspaces with the extra dc param
2021-09-15 18:50:11 +00:00
@partition={{or service.Service.Partition 'default'}}
@dc={{@dc.Name}}
@endpoint='summary-for-service'
@service={{@service.Service.Service}}
@protocol={{@topology.Protocol}}
@noMetricsReason={{this.noMetricsReason}}
/>
{{/if}}
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
{{/if}}
<div class="link">
{{#if @metricsHref}}
<a class="metrics-link" href={{@metricsHref}} target="_blank" rel="noopener noreferrer" data-test-metrics-anchor>Open dashboard</a>
{{else}}
<a class="config-link" href="{{env 'CONSUL_DOCS_URL'}}/connect/observability/ui-visualization" target="_blank" rel="noopener noreferrer">Configure dashboard</a>
{{/if}}
</div>
{{/if}}
</div>
<div id="downstream-lines">
<TopologyMetrics::DownLines
@type='downstream'
@service={{@service}}
@view={{this.downView}}
@center={{this.centerDimensions}}
@lines={{this.downLines}}
@items={{this.downstreams}}
@oncreate={{action @oncreate}}
/>
</div>
{{#if (gt this.upstreams.length 0)}}
<div id="upstream-column">
ui: feature-flagged peering mvp (#13425) * add peers route * add peers to nav * use regular app ui patterns peers template * use empty state in peers UI * mock `v1/peerings` request * implement custom adapter/serializer for `peers`-model * index request for peerings on peers route * update peers list to show as proper list * Use tailwind for easier styling * Unique ids in peerings response mock-api * Add styling peerings list * Allow creating empty tooltip To make it easier to iterate over a set of items where some items should not display a tooltip and others should. * Add tooltip Peerings:Badge * Add undefined peering state badge * Remove imported/exported services count peering This won't be included in the initial version of the API response * Implement Peerings::Search * Make it possible to filter peerings by name * Install ember-keyboard For idiomatic handling of key-presses. * Clear peering search input when pressing `Escape` * use peers.index instead of peers for peerings listing * Allow to include peered services in services-query * update services mock to add peerName * add Consul::Peer component To surface peering information on a resource * add PeerName as attribute to service model * surface peering information in service list * Add tooltip to Consul::Peer * Make services searchable by peer-name * Allow passing optional query-params to href-to * Add peer query-param to dc.services.show * Pass peer as query-param services listing * support option peer route-param * set peer-name undefined in services serializer when empty * update peer route-param when navigating to peered service * request sercice with peer-name if need be * make sure to reset peer route-param when leaving service.show * componentize services.peer-info * surface peer info services.show * make sure to reset peer route-param in main nav * fix services breadcrumb services.intentions we need to reset peer route-param here to not break the app * surface peer when querying for it on service api call * query for peer info service-instance api calls * surface peer info service-instance.show * Camelize peer attributes to match rest of app * Refactor peers.index to reflect camelized attributes for peer * Remove unused query-params services.show * make logo href reset peer route-param * Cleanup optional peer param query service-instance * Use replace decorator instead of serializer for empty peerName * make sure to only send peer info when correct qp is passed * Always send qp for querying peers services request * rename with-imports to with-peers * Use css for peer-icon * Refactor bucket-list component to surface peer-info * Remove Consul::Peer component This info is now displayed via the bucket-list component * Fix bucket-list component to surface service again * Update bucket-list docs to reflect peer-info addition * Remove tailwind related styles * Remove consul-tailwind package We won't be using tailwind for now * Fix typo badge scss * Add with-import handling mock-api nodes * Add peerName to node attributes * include peers when querying nodes * reflect api updates node list mock * Create consul::node::peer-info component * Surface peer-info in nodes list * Mock peer response for node request * Make it possible to add peer-name to node request * Update peer route-param when linking to node * Reset peers route-param when leaving nodes.show We need to reset the route-param to not introduce a bug - otherwise subsequent node show request would request with the old peer query-param * Add sourcePeer intentions api mock * add SourcePeer attr to intentions model * Surface peering info on intentions list * Request peered intentions differently intentions.edit * Handle peer info in intentions/exact mock * Surface peering info intention view * Add randomized peer data topology mock * Surface peer info topology view * fix service/peer-info styling We aren't using tailwind anymore - we need to create a custom scss file * Update peerings api mocks * Update peerings::badge with updated styling * cleanup intentions/exact mock * Create watcher component to declaratively register polling * Poll peers in background when on peers route * use existing colors for peering-badge * Add test for requesting service with `with-peers`-query * add imported/exported count to peers model * update mock-api to surface exported/imported count on peers * Show exported/imported peers count on peers list * Use translations for service import/export UI peers * Make sure to ask for nodes with peers * Add match-url step for easier url testing of service urls * Add test for peer-name on peered services * Add test for service navigation peered service * Implement feature-flag handling * Enable peering feature in test and development * Redirect peers to services.index when feature-flag is disabled * Only query for peers when feature is enabled * Only show peers in nav when feature is enabled * Componentize peering service count detail * Handle non-state Peerings::Badge * Use Peerings::ServiceCount in peerings list * Only send peer query for peered service-instances. * Add step to visit url directly * add test for accessing peered service directly * Remove unused service import peers.index * Only query for peer when peer provided node-adapter * fix tests
2022-06-23 13:16:26 +00:00
{{#each-in (group-by "PeerOrDatacenter" this.upstreams) as |dc upstreams|}}
<div
id="upstream-container"
{{did-insert this.setHeight 'upstream-lines'}}
{{did-update this.setHeight 'upstream-lines' this.upstreams}}
>
{{#if dc}}
<p>{{dc}}</p>
{{/if}}
{{#each upstreams as |item|}}
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
<TopologyMetrics::Card
@dc={{@dc.Name}}
@item={{item}}
@service={{@service.Service}}
>
{{#if (and @hasMetricsProvider this.mainNotIngressService (not-eq item.Kind 'ingress-gateway'))}}
{{!-- One of the only places in the app where it's acceptable to default to 'default' namespace --}}
<TopologyMetrics::Stats
@nspace={{or item.Namespace 'default'}}
ui: Partitions Application Layer (#11017) * Add Partition to all our models * Add partitions into our serializers/fingerprinting * Make some amends to a few adapters ready for partitions * Amend blueprints to avoid linting error * Update all our repositories to include partitions, also Remove enabled/disable nspace repo and just use a nspace with conditionals * Ensure nspace and parition parameters always return '' no matter what * Ensure data-sink finds the model properly This will later be replaced by a @dataSink decorator but we are find kicking that can down the road a little more * Add all the new partition data layer * Add a way to set the title of the page from inside the route and make it accessibile via a route announcer * Make the Consul Route the default/basic one * Tweak nspace and partition abilities not to check the length * Thread partition through all the components that need it * Some ACL tweaks * Move the entire app to use partitions * Delete all the tests we no longer need * Update some Unit tests to use partition * Fix up KV title tests * Fix up a few more acceptance tests * Fixup and temporarily ignore some acceptance tests * Stop using ember-cli-page-objects fillable as it doesn't seem to work * Fix lint error * Remove old ACL related test * Add a tick after filling out forms * Fix token warning modal * Found some more places where we need a partition var * Fixup some more acceptance tests * Tokens still needs a repo service for CRUD * Remove acceptance tests we no longer need * Fixup and "FIXME ignore" a few tests * Remove an s * Disable blocking queries for KV to revert to previous release for now * Fixup adapter tests to follow async/function resolving interface * Fixup all the serializer integration tests * Fixup service/repo integration tests * Fixup deleting acceptance test * Fixup some ent tests * Make sure nspaces passes the dc through for when thats important * ...aaaand acceptance nspaces with the extra dc param
2021-09-15 18:50:11 +00:00
@partition={{or item.Partition 'default'}}
@dc={{item.Datacenter}}
@endpoint='upstream-summary-for-service'
@service={{@service.Service.Service}}
@item={{item.Name}}
@noMetricsReason={{this.noMetricsReason}}
/>
{{/if}}
</TopologyMetrics::Card>
{{/each}}
</div>
{{/each-in}}
</div>
{{/if}}
<div id="upstream-lines">
<TopologyMetrics::UpLines
@type='upstream'
@service={{@service}}
@view={{this.upView}}
@center={{this.centerDimensions}}
@lines={{this.upLines}}
@items={{this.upstreams}}
@oncreate={{action @oncreate}}
/>
</div>
</div>