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>

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

@@ -0,0 +1,56 @@
+{{#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}}

ui-v2/app/components/topology-metrics/index.hbs

@@ -11,48 +11,23 @@
         </Tooltip>
       </span>
     </div>
-  {{#each @downstreams as |downstream|}}
-    <div class="card"
-      data-permission={{service/intention-permissions downstream}}
-      id="{{downstream.Namespace}}{{downstream.Name}}"
-    >
-      <p>
-        {{downstream.Name}}
-      </p>
-      <div class="detail">
-      {{#if (env 'CONSUL_NSPACES_ENABLED')}}
-        <dl class="nspace">
-          <dt>
-            <Tooltip>
-                Namespace
-            </Tooltip>
-          </dt>
-          <dd>
-            {{downstream.Namespace}}
-          </dd>
-        </dl>
-      {{/if}}
-    {{#let (service/health-percentage downstream) 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}}
-      </div>
-    </div>
-  {{/each}}
+    <TopologyMetrics::Card
+      @items={{@downstreams}}
+      @service={{@service.Service.Service}}
+      @dc={{@dc}}
+      @hasMetricsProvider={{this.hasMetricsProvider}}
+    />
   </div>
 {{/if}}
   <div id="metrics-container">
     <div>
       {{@service.Service.Service}}
     </div>
-    <div>
+    {{#if this.hasMetricsProvider }}
+      <TopologyMetrics::Series @service={{@service.Service.Service}} @protocol={{@protocol}} />
+      <TopologyMetrics::Stats @endpoint='summary-for-service' @service={{@service.Service.Service}} @protocol={{@protocol}} />
+    {{/if}}
+    <div class="link">
      {{#if @metricsHref}}
       <a class="metrics-link" href={{@metricsHref}} target="_blank" rel="noopener noreferrer">Open metrics Dashboard</a>
     {{else}}
@@ -74,54 +49,13 @@
   {{#each-in (group-by "Datacenter" @upstreams) as |dc upstreams|}}
     <div id="upstream-container">
       <p>{{dc}}</p>
-      {{#each upstreams as |upstream|}}
-      <div class="card"
-        data-permission={{service/intention-permissions upstream}}
-        id="{{upstream.Namespace}}{{upstream.Name}}"
-      >
-        <p>
-          {{upstream.Name}}
-        </p>
-        <div class="detail">
-        {{#if (env 'CONSUL_NSPACES_ENABLED')}}
-          <dl class="nspace">
-            <dt>
-              <Tooltip>
-                  Namespace
-              </Tooltip>
-            </dt>
-            <dd>
-              {{upstream.Namespace}}
-            </dd>
-          </dl>
-        {{/if}}
-      {{#if (eq upstream.Datacenter @dc)}}
-      {{#let (service/health-percentage upstream) 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>
-      </div>
-    {{/each}}
+      <TopologyMetrics::Card
+        @items={{upstreams}}
+        @service={{@service.Service.Service}}
+        @dc={{@dc}}
+        @type='upstream'
+        @hasMetricsProvider={{this.hasMetricsProvider}}
+      />
     </div>
   {{/each-in}}
   </div>

ui-v2/app/components/topology-metrics/index.js

@@ -1,14 +1,23 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
 
 export default class TopologyMetrics extends Component {
+  @service('ui-config') cfg;
+
   // =attributes
   @tracked centerDimensions;
   @tracked downView;
   @tracked downLines = [];
   @tracked upView;
   @tracked upLines = [];
+  @tracked hasMetricsProvider = false;
+
+  constructor(owner, args) {
+    super(owner, args);
+    this.hasMetricsProvider = !!this.cfg.get().metrics_provider
+  }
 
   // =methods
   drawDownLines(items) {

ui-v2/app/components/topology-metrics/layout.scss

@@ -14,10 +14,12 @@
 #downstream-lines {
   grid-row: 1 / 3;
   grid-column: 2 / 5;
+  pointer-events: none;
 }
 #upstream-lines {
   grid-row: 1 / 3;
   grid-column: 6 / 9;
+  pointer-events: none;
 }
 #upstream-column {
   grid-row: 1 / 3;
@@ -51,8 +53,10 @@
 }
 #upstream-container .card,
 #downstream-container .card {
-  padding: 12px;
+  display: flex;
+  flex-direction: column;
   p {
+    padding: 12px 12px 0 12px;
     font-size: 16px;
     font-weight: 600;
     margin-bottom: 0 !important;
@@ -75,6 +79,10 @@
       margin-top: 2px;
     }
   }
+  .details {
+    padding: 0 12px 12px 12px;
+  }
+
 }
 
 // Metrics Container
@@ -88,7 +96,7 @@
     font-size: 16px;
     font-weight: bold;
   }
-  div:nth-child(2) {
+  .link {
     padding: 18px;
     a::before {
       margin-right: 4px;

ui-v2/app/components/topology-metrics/series/index.hbs

@@ -0,0 +1,14 @@
+<DataSource
+  @src={{uri nspace dc 'metrics' 'summary-for-service' @service @protocol}}
+  @onchange={{action 'change'}} />
+
+{{on-window 'resize' (action 'redraw')}}
+
+<div class="sparkline-wrapper">
+  <div class="tooltip">
+    <div class="sparkline-time">Timestamp</div>
+  </div>
+  <div class="sparkline-loader"><span>Loading Metrics</span></div>
+  <svg class="sparkline"></svg>
+</div>
+