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

<div
  class="topology-metrics-popover {{@type}}"
  ...attributes
>

{{#if (eq @type 'deny')}}

  <InformedAction
    class="dangerous"
    {{did-insert (set this 'popover')}}
  >
    <:header>
      <h3>
        Connection Denied
      </h3>
    </:header>
    <:body>
      <p>
        {{#if @item.Intention.HasExact}}
          Change the action of this intention to allow.
        {{else}}
          Add an intention that allows these two services to connect.
        {{/if}}
      </p>
    </:body>
    <:actions as |Actions|>
      <Actions.Action class="action">
        <button
          {{on "click" @oncreate}}
          data-test-confirm
          type="button"
        >
          {{#if @item.Intention.HasExact}}
            Allow
          {{else}}
            Create
          {{/if}}
        </button>
      </Actions.Action>
      <Actions.Action>
        <button
          {{on 'click' (fn (optional this.popoverController.hide))}}
          class="cancel"
          type="button"
        >
          Cancel
        </button>
      </Actions.Action>
    </:actions>
  </InformedAction>

{{else}}

  <InformedAction
    class="info"
    {{did-insert (set this 'popover')}}
  >
    <:header>
      <h3>
        Layer 7 permissions
      </h3>
    </:header>
    <:body>
      <p>
        Certain HTTP request info must be identified.
      </p>
    </:body>
    <:actions as |Actions|>
      <Actions.Action class="action">
        <a
          href={{href-to 'dc.services.show.intentions.edit' (concat @item.Intention.ID)}}
        >
            View
        </a>
      </Actions.Action>
      <Actions.Action>
        <button
          {{on 'click' (fn (optional this.popoverController.hide))}}
          class="cancel"
          type="button"
        >
          Close
        </button>
      </Actions.Action>
    </:actions>
  </InformedAction>

{{/if}}
  <button
    {{with-overlay
      this.popover
      options=(hash
        theme="square-tail"
        placement="bottom-start"
      )
      returns=(set this 'popoverController')
    }}
    {{on 'click' (fn (optional this.popoverController.show))}}
    type="button"
    style={{{concat 'top:' @position.y 'px;left:' @position.x 'px;'}}}
    aria-label={{if (eq @type 'deny') 'Add intention' 'View intention'}}
    data-test-action
  >
  </button>
</div>