mirror of https://github.com/hashicorp/consul
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>pull/9175/head
Kenia
4 years ago
committed by
GitHub
parent
b9f1b19bb8
commit
7243f1f4f9
@ -1,17 +0,0 @@
|
||||
{{#each @items as |item|}}
|
||||
{{#let (find-by 'id' (concat item.Namespace item.Name) @positions) as |style|}}
|
||||
{{#if (and (not item.Intention.Allowed) (not item.Intention.HasPermissions))}}
|
||||
<span class="deny" style={{{ concat 'top:' style.y 'px;left:' style.x 'px;'}}}>
|
||||
<Tooltip>
|
||||
An intention is set to 'deny' that prohibits these services from connecting.
|
||||
</Tooltip>
|
||||
</span>
|
||||
{{else if item.Intention.HasPermissions}}
|
||||
<span class="L7" style={{{ concat 'top:' style.y 'px;left:' style.x 'px;'}}}>
|
||||
<Tooltip>
|
||||
The intention between these services has Layer 7 permissions, so certain requests may or may not be permitted.
|
||||
</Tooltip>
|
||||
</span>
|
||||
{{/if}}
|
||||
{{/let}}
|
||||
{{/each}}
|
||||
@ -0,0 +1,71 @@
|
||||
<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>
|
||||
|
||||
|
||||
@ -0,0 +1,14 @@
|
||||
import Component from '@glimmer/component';
|
||||
import { action } from '@ember/object';
|
||||
import { tracked } from '@glimmer/tracking';
|
||||
|
||||
export default class TopoloyMetricsButton extends Component {
|
||||
// =attributes
|
||||
@tracked showToggleablePopover = false;
|
||||
|
||||
// =actions
|
||||
@action
|
||||
togglePopover() {
|
||||
this.showToggleablePopover = !this.showToggleablePopover;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,87 @@
|
||||
.topology-metrics-popover {
|
||||
.deny-target,
|
||||
.L7-target {
|
||||
transform: translate(-50%,-50%);
|
||||
position: absolute;
|
||||
background-color: $white;
|
||||
padding: 1px 2px;
|
||||
}
|
||||
.deny-target:hover,
|
||||
.L7-target:hover {
|
||||
cursor:pointer;
|
||||
}
|
||||
.deny-target:active,
|
||||
.deny-target:focus,
|
||||
.L7-target:active,
|
||||
.L7-target:focus {
|
||||
outline: none;
|
||||
}
|
||||
.deny-target::before {
|
||||
@extend %with-cancel-square-fill-color-mask, %as-pseudo;
|
||||
background-color: $red-500;
|
||||
}
|
||||
.L7-target::before {
|
||||
@extend %with-layers-mask, %as-pseudo;
|
||||
background-color: $gray-300;
|
||||
}
|
||||
.body {
|
||||
padding: 12px 12px 16px 25px;
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
p {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.actions {
|
||||
border-top: 1px solid $gray-300;
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
a,
|
||||
button {
|
||||
width: 50%;
|
||||
height: 36px;
|
||||
padding: 10px 0;
|
||||
font-weight: $typo-weight-medium;
|
||||
text-align: center;
|
||||
line-height: normal;
|
||||
}
|
||||
button:first-child {
|
||||
color: $blue-500;
|
||||
}
|
||||
button:nth-child(2) {
|
||||
color: $gray-800;
|
||||
}
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.ember-popover {
|
||||
padding: 0;
|
||||
width: 200px;
|
||||
z-index: 3 !important;
|
||||
}
|
||||
}
|
||||
.L7-popover {
|
||||
.body {
|
||||
background-color: $white;
|
||||
}
|
||||
h3 {
|
||||
margin-left: -20px;
|
||||
color: $blue-500;
|
||||
}
|
||||
h3::before {
|
||||
@extend %with-info-circle-fill-mask, %as-pseudo;
|
||||
color: $blue-500;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
.deny-popover {
|
||||
.body {
|
||||
background-color: $white;
|
||||
}
|
||||
h3 {
|
||||
color: $red-800;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue