Create icon and dashed line for intention not explictly defined

This commit is contained in:
kenia 2021-04-12 14:57:56 -04:00
parent f5849fd500
commit 727b6e966b
6 changed files with 64 additions and 17 deletions

View File

@ -2,6 +2,9 @@
& { & {
min-width: 190px; min-width: 190px;
} }
&.documentation {
min-width: 270px;
}
> div { > div {
padding: 1rem; padding: 1rem;
} }

View File

@ -90,6 +90,13 @@
@item={{item}} @item={{item}}
@oncreate={{action @oncreate item @service}} @oncreate={{action @oncreate item @service}}
/> />
{{else if (and item.Intention.Allowed (not item.TransparentProxy) (eq item.Source 'specific-intention'))}}
<TopologyMetrics::Popover
@type='notDefined'
@position={{find-by 'id' (concat this.guid item.Namespace item.Name) this.iconPositions}}
@item={{item}}
@oncreate={{action @oncreate item @service}}
/>
{{/if}} {{/if}}
{{/each}} {{/each}}

View File

@ -4,22 +4,21 @@
> >
{{#if (eq @type 'deny')}} {{#if (eq @type 'deny')}}
<InformedAction <InformedAction
class="dangerous" class="dangerous"
{{did-insert (set this 'popover')}} {{did-insert (set this 'popover')}}
> >
<:header> <:header>
<h3> <h3>
Connection Denied {{t "components.consul.topology-metrics.popover.deny.header"}}
</h3> </h3>
</:header> </:header>
<:body> <:body>
<p> <p>
{{#if @item.Intention.HasExact}} {{#if @item.Intention.HasExact}}
Change the action of this intention to allow. {{t "components.consul.topology-metrics.popover.deny.body.isExact"}}
{{else}} {{else}}
Add an intention that allows these two services to connect. {{t "components.consul.topology-metrics.popover.deny.body.notExact"}}
{{/if}} {{/if}}
</p> </p>
</:body> </:body>
@ -31,9 +30,9 @@
type="button" type="button"
> >
{{#if @item.Intention.HasExact}} {{#if @item.Intention.HasExact}}
Allow {{t "components.consul.topology-metrics.popover.deny.action.isExact"}}
{{else}} {{else}}
Create {{t "components.consul.topology-metrics.popover.deny.action.notExact"}}
{{/if}} {{/if}}
</button> </button>
</Actions.Action> </Actions.Action>
@ -48,29 +47,57 @@
</Actions.Action> </Actions.Action>
</:actions> </:actions>
</InformedAction> </InformedAction>
{{else if (eq @type 'notDefined')}}
{{else}}
<InformedAction <InformedAction
class="info" class="warning documentation"
{{did-insert (set this 'popover')}} {{did-insert (set this 'popover')}}
> >
<:header> <:header>
<h3> <h3>
Layer 7 permissions {{t "components.consul.topology-metrics.popover.notDefined.header"}}
</h3> </h3>
</:header> </:header>
<:body> <:body>
<p> <p>
Certain HTTP request info must be identified. {{t "components.consul.topology-metrics.popover.notDefined.body"}}
</p> </p>
</:body> </:body>
<:actions as |Actions|> <:actions as |Actions|>
<Actions.Action class="action"> <Actions.Action class="action">
<a <a href="{{env 'CONSUL_DOCS_URL'}}/connect/registration/service-registration#upstreams" rel="noopener noreferrer" target="_blank">
href={{href-to 'dc.services.show.intentions.edit' (concat @item.Intention.ID)}} {{t "components.consul.topology-metrics.popover.notDefined.action"}}
> </a>
View </Actions.Action>
<Actions.Action>
<button
{{on 'click' (fn (optional this.popoverController.hide))}}
class="cancel"
type="button"
>
Close
</button>
</Actions.Action>
</:actions>
</InformedAction>
{{else}}
<InformedAction
class="info"
{{did-insert (set this 'popover')}}
>
<:header>
<h3>
{{t "components.consul.topology-metrics.popover.l7.header"}}
</h3>
</:header>
<:body>
<p>
{{t "components.consul.topology-metrics.popover.l7.body"}}
</p>
</:body>
<:actions as |Actions|>
<Actions.Action class="action">
<a href={{href-to 'dc.services.show.intentions.edit' (concat @item.Intention.ID)}}>
{{t "components.consul.topology-metrics.popover.l7.action"}}
</a> </a>
</Actions.Action> </Actions.Action>
<Actions.Action> <Actions.Action>
@ -84,7 +111,6 @@
</Actions.Action> </Actions.Action>
</:actions> </:actions>
</InformedAction> </InformedAction>
{{/if}} {{/if}}
<button <button
{{with-overlay {{with-overlay

View File

@ -27,4 +27,9 @@
@extend %with-layers-mask, %as-pseudo; @extend %with-layers-mask, %as-pseudo;
background-color: $gray-300; background-color: $gray-300;
} }
&.notDefined > button::before,
&.notDefined .tippy-arrow::after {
@extend %with-alert-triangle-mask, %as-pseudo;
color: $yellow-500;
}
} }

View File

@ -65,6 +65,9 @@
stroke: $gray-300; stroke: $gray-300;
stroke-width: 2; stroke-width: 2;
} }
path[data-permission='notDefined'] {
stroke-dasharray: 4;
}
path[data-permission='deny'] { path[data-permission='deny'] {
stroke: $red-500; stroke: $red-500;
} }

View File

@ -3,12 +3,15 @@ import { helper } from '@ember/component/helper';
export default helper(function serviceIntentionPermissions([params] /*, hash*/) { export default helper(function serviceIntentionPermissions([params] /*, hash*/) {
const hasPermissions = params.Intention.HasPermissions; const hasPermissions = params.Intention.HasPermissions;
const allowed = params.Intention.Allowed; const allowed = params.Intention.Allowed;
const notExplicitlyDefined = params.Source === 'specific-intention' && !params.TransparentProxy;
switch (true) { switch (true) {
case hasPermissions: case hasPermissions:
return 'allow'; return 'allow';
case !allowed && !hasPermissions: case !allowed && !hasPermissions:
return 'deny'; return 'deny';
case allowed && notExplicitlyDefined:
return 'notDefined';
default: default:
return 'allow'; return 'allow';
} }