mirror of
https://github.com/status-im/consul.git
synced 2025-02-08 11:54:12 +00:00
676a520ce3
* 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>
65 lines
1.8 KiB
Handlebars
65 lines
1.8 KiB
Handlebars
{{on-window 'resize' (action this.getIconPositions)}}
|
|
|
|
{{#if (gt @lines.length 0)}}
|
|
<svg
|
|
{{did-insert this.getIconPositions}}
|
|
{{did-update this.getIconPositions @lines}}
|
|
viewBox={{concat @center.x ' ' @view.y ' ' @view.width ' ' @view.height}}
|
|
preserveAspectRatio="none"
|
|
>
|
|
<defs>
|
|
<marker id="allow-dot" viewBox="-2 -2 15 15" refX="6" refY="6" markerWidth="6" markerHeight="6">
|
|
<circle
|
|
cx="6"
|
|
cy="6"
|
|
r="6"
|
|
/>
|
|
</marker>
|
|
<marker id="allow-arrow" viewBox="-1 -1 12 12" refX="5" refY="5"
|
|
markerWidth="6" markerHeight="6"
|
|
orient="auto-start-reverse">
|
|
<polygon points="0 0 10 5 0 10" />
|
|
</marker>
|
|
<marker id="deny-dot" viewBox="-2 -2 15 15" refX="6" refY="6" markerWidth="6" markerHeight="6">
|
|
<circle
|
|
cx="6"
|
|
cy="6"
|
|
r="6"
|
|
/>
|
|
</marker>
|
|
<marker id="deny-arrow" viewBox="-1 -1 12 12" refX="5" refY="5"
|
|
markerWidth="6" markerHeight="6"
|
|
orient="auto-start-reverse">
|
|
<polygon points="0 0 10 5 0 10" />
|
|
</marker>
|
|
</defs>
|
|
{{#each @lines as |line|}}
|
|
{{#if (eq line.permission 'deny')}}
|
|
<path
|
|
id={{line.id}}
|
|
d={{svg-curve line.dest src=line.src}}
|
|
marker-start="url(#deny-dot)"
|
|
marker-end="url(#deny-arrow)"
|
|
data-permission={{line.permission}}
|
|
/>
|
|
{{else}}
|
|
<path
|
|
id={{line.id}}
|
|
d={{svg-curve line.dest src=line.src}}
|
|
marker-start="url(#allow-dot)"
|
|
marker-end="url(#allow-arrow)"
|
|
data-permission={{line.permission}}
|
|
/>
|
|
{{/if}}
|
|
{{/each}}
|
|
</svg>
|
|
{{/if}}
|
|
|
|
{{#each @items as |item|}}
|
|
<TopologyMetrics::Popover
|
|
@position={{find-by 'id' (concat item.Namespace item.Name) this.iconPositions}}
|
|
@item={{item}}
|
|
@oncreate={{action @oncreate @service item}}
|
|
/>
|
|
{{/each}}
|