{{#if (not @noMetricsReason)}}
  <DataSource
    @src={{uri
      '/${nspace}/${dc}/metrics/summary-for-service/${service}/${protocol}'
      (hash
        nspace=@nspace
        dc=@dc
        service=@service
        protocol=@protocol
      )
    }}
    @onchange={{action 'change'}}
    @onerror={{action (mut error) value="error"}}
  />
{{/if}}

{{on-window 'resize' (action 'redraw')}}
{{did-insert (action 'redraw')}}

{{#if (not empty)}}
  {{#if data.labels}}
    <a
      class="sparkline-key-link"
      {{on "click" (optional this.modal.open)}}
    >
      Key
    </a>
  {{/if}}
{{/if}}

<div data-test-sparkline class="sparkline-wrapper">
  <div class="tooltip">
    <div class="sparkline-time">Timestamp</div>
  </div>
  {{#if empty}}
    <TopologyMetrics::Status
      @noMetricsReason={{@noMetricsReason}}
      @error={{error}}
    />
  {{/if}}
  <svg class="sparkline"></svg>
</div>

<ModalDialog
  class="sparkline-key"
  @aria={{hash
    label="Metrics Key"
  }}
  as |modal|>
    <Ref @target={{this}} @name="modal" @value={{modal}} />
    <BlockSlot @name="header">
      <h3>Metrics Key</h3>
    </BlockSlot>
    <BlockSlot @name="body">
      <div class="sparkline-key-content">
        <p>This key describes the metrics corresponding to the graph tooltip labels in more detail.</p>
        <dl>
          {{#each-in data.labels as |label desc| }}
            <dt>{{label}}</dt>
            <dd>{{desc}}</dd>
          {{/each-in}}
        </dl>
        {{#unless data.labels}}
          <span class="no-data">No metrics loaded.</span>
        {{/unless}}
      </div>
    </BlockSlot>
    <BlockSlot @name="actions">
      <button
        type="button"
        class="type-cancel"
        onclick={{action modal.close}}
      >
        Close
      </button>
    </BlockSlot>
</ModalDialog>