Kenia 676a520ce3 ui: Topology Intentions Popovers (#9137)
* Refactor grid styling for Topology page

* Crate TopologyMetrics Button component and move styling

* Create intention ID

* fixup button styling

* Return a link to the create intention page

* Rename Button to Popover component

* Fixup serializer test

* ui: Inline Topology Intention Actions  (#9153)

* Add arrow and dot to/from metrics back in

* Add addional space to have metrics wrap and show in smaller screens

* Move logic for finding positioning

* Use color variables

Co-authored-by: John Cowen <johncowen@users.noreply.github.com>
2020-11-13 10:24:34 +00:00

72 lines
1.9 KiB
Handlebars

<div class="topology-metrics-popover">
{{#if (and (not @item.Intention.Allowed) (not @item.Intention.HasPermissions))}}
<button
{{on "click" this.togglePopover}}
type="button"
class="deny-target"
style={{{ concat 'top:' @position.y 'px;left:' @position.x 'px;'}}}
>
<EmberPopover
@isShown={{this.showToggleablePopover}}
@event="none"
@hideOn="mouseleave"
@side="bottom-start"
@tooltipClass="deny-popover"
>
<div class="body">
<h3>Connection Denied</h3>
<p>Add an intention that allows these two services to connect.</p>
</div>
<div class="actions">
{{#if @item.Intention.HasExact}}
<a href={{href-to 'dc.services.show.intentions.edit' (concat @item.Intention.ID)}}>Edit</a>
{{else}}
<button
{{on "click" @oncreate}}
type="button"
>
Create
</button>
{{/if}}
<button
{{on "click" this.togglePopover}}
class="cancel"
>
Cancel
</button>
</div>
</EmberPopover>
</button>
{{else if @item.Intention.HasPermissions}}
<button
{{on "click" this.togglePopover}}
type="button"
class="L7-target"
style={{{ concat 'top:' @position.y 'px;left:' @position.x 'px;'}}}
>
<EmberPopover
@isShown={{this.showToggleablePopover}}
@event="none"
@hideOn="mouseleave"
@side="bottom-start"
@tooltipClass="L7-popover"
>
<div class="body">
<h3>Layer 7 permissions</h3>
<p>Certain HTTP request info must be identified.</p>
</div>
<div class="actions">
<a href={{href-to 'dc.services.show.intentions.edit' (concat @item.Intention.ID)}}>View</a>
<button
{{on "click" this.togglePopover}}
>
Close
</button>
</div>
</EmberPopover>
</button>
{{/if}}
</div>