ui: New overlays (#9305)
Replaces ember-popover with tippy.js based overlay modifier.
This commit is contained in:
John Cowen
GitHub
parent
af9687e0b8
commit
6ef7c15e51
|
|
@ -0,0 +1,35 @@
|
|||
{{#if @for}}
|
||||
<label
|
||||
for={{@for}}
|
||||
...attributes
|
||||
>
|
||||
{{yield}}
|
||||
</label>
|
||||
{{else if @href}}
|
||||
{{#if @external}}
|
||||
<a
|
||||
href={{@href}}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
...attributes
|
||||
>
|
||||
{{yield}}
|
||||
</a>
|
||||
{{else}}
|
||||
<a
|
||||
href={{@href}}
|
||||
...attributes
|
||||
>
|
||||
{{yield}}
|
||||
</a>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<button
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
{{on 'click' (optional @onclick)}}
|
||||
...attributes
|
||||
>
|
||||
{{yield}}
|
||||
</button>
|
||||
{{/if}}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<li class="dangerous">
|
||||
<button tabindex="-1" type="button" onclick={{action onclick}}>{{yield}}</button>
|
||||
</li>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import Component from '@ember/component';
|
||||
|
||||
export default Component.extend({
|
||||
tagName: '',
|
||||
});
|
||||
|
|
@ -1,22 +1,29 @@
|
|||
{{yield}}
|
||||
<div class="confirmation-alert" ...attributes>
|
||||
<div>
|
||||
<header>
|
||||
<YieldSlot @name="header">{{yield}}</YieldSlot>
|
||||
</header>
|
||||
<InformedAction
|
||||
class="confirmation-alert warning"
|
||||
...attributes
|
||||
>
|
||||
<:header>
|
||||
<YieldSlot @name="header">{{yield}}</YieldSlot>
|
||||
</:header>
|
||||
<:body>
|
||||
<YieldSlot @name="body">{{yield}}</YieldSlot>
|
||||
</div>
|
||||
<ul>
|
||||
<YieldSlot @name="confirm" @params={{
|
||||
block-params (component 'confirmation-alert/action'
|
||||
onclick=(action onclick)
|
||||
)
|
||||
}}
|
||||
>
|
||||
{{yield}}
|
||||
</YieldSlot>
|
||||
<li>
|
||||
<label for={{name}}>Cancel</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</:body>
|
||||
<:actions as |Actions|>
|
||||
<Actions.Action class="dangerous">
|
||||
<YieldSlot @name="confirm" @params={{
|
||||
block-params (component 'action'
|
||||
onclick=(action @onclick)
|
||||
)
|
||||
}}
|
||||
>
|
||||
{{yield}}
|
||||
</YieldSlot>
|
||||
</Actions.Action>
|
||||
<Actions.Action>
|
||||
<Action @for={{@name}}>
|
||||
Cancel
|
||||
</Action>
|
||||
</Actions.Action>
|
||||
</:actions>
|
||||
</InformedAction>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<div
|
||||
class="informed-action"
|
||||
...attributes
|
||||
>
|
||||
<div>
|
||||
<header>
|
||||
{{yield to="header"}}
|
||||
</header>
|
||||
{{yield to="body"}}
|
||||
</div>
|
||||
<ul>
|
||||
{{yield (hash
|
||||
Action=(component "anonymous" tagName="li")
|
||||
)
|
||||
to="actions"}}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
||||
.informed-action {
|
||||
@extend %informed-action;
|
||||
}
|
||||
%informed-action {
|
||||
& > ul > li > * {
|
||||
@extend %internal-button;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
%informed-action {
|
||||
& {
|
||||
min-width: 190px;
|
||||
}
|
||||
> div {
|
||||
padding: 1rem;
|
||||
}
|
||||
header {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
header::before {
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
}
|
||||
> ul {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 4px;
|
||||
}
|
||||
> ul > li {
|
||||
width: 50%;
|
||||
}
|
||||
> ul > li > * {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
%informed-action {
|
||||
& {
|
||||
border-radius: $decor-radius-200;
|
||||
border: $decor-border-100;
|
||||
border-color: $gray-300;
|
||||
background-color: $white;
|
||||
}
|
||||
> div {
|
||||
border-top-left-radius: $decor-radius-200;
|
||||
border-top-right-radius: $decor-radius-200;
|
||||
cursor: default;
|
||||
}
|
||||
header {
|
||||
@extend %h4;
|
||||
}
|
||||
header > * {
|
||||
@extend %typo-inherit;
|
||||
}
|
||||
p {
|
||||
@extend %p2;
|
||||
color: $black;
|
||||
}
|
||||
> ul {
|
||||
list-style: none;
|
||||
}
|
||||
> ul > li > *:hover,
|
||||
> ul > li > *:focus {
|
||||
background-color: $gray-100;
|
||||
}
|
||||
/* variants */
|
||||
&.info {
|
||||
header {
|
||||
color: $blue-700;
|
||||
}
|
||||
header::before {
|
||||
@extend %with-info-circle-fill-mask, %as-pseudo;
|
||||
background-color: $blue-500;
|
||||
margin-right: 5px;
|
||||
}
|
||||
> div {
|
||||
background-color: $blue-010;
|
||||
}
|
||||
}
|
||||
&.dangerous {
|
||||
header {
|
||||
color: $red-700;
|
||||
}
|
||||
header::before {
|
||||
@extend %with-alert-triangle-mask, %as-pseudo;
|
||||
background-color: $red-500;
|
||||
}
|
||||
> div {
|
||||
background-color: $red-010;
|
||||
}
|
||||
}
|
||||
&.warning {
|
||||
header {
|
||||
color: $orange-700;
|
||||
}
|
||||
header::before {
|
||||
@extend %with-alert-triangle-mask, %as-pseudo;
|
||||
background-color: $yellow-500;
|
||||
margin-right: 5px;
|
||||
}
|
||||
> div {
|
||||
background-color: $yellow-050;
|
||||
}
|
||||
}
|
||||
> ul > .action > * {
|
||||
color: $blue-500;
|
||||
}
|
||||
> ul > .dangerous > * {
|
||||
@extend %frame-red-300;
|
||||
}
|
||||
> ul > .dangerous > *:hover,
|
||||
> ul > .dangerous > *:focus {
|
||||
@extend %frame-red-700;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import './none.scss';
|
||||
@import './square-tail.scss';
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
.tippy-box {
|
||||
@extend %overlay;
|
||||
}
|
||||
[data-tippy-root] {
|
||||
@extend %overlay-layer;
|
||||
}
|
||||
%overlay-layer {
|
||||
max-width: calc(100vw - 10px);
|
||||
}
|
||||
%overlay {
|
||||
& {
|
||||
position: relative;
|
||||
outline: 0;
|
||||
transition-property: transform, visibility, opacity;
|
||||
}
|
||||
&[data-animation=fade][data-state=hidden] {
|
||||
opacity: 0;
|
||||
}
|
||||
&[data-inertia][data-state=visible] {
|
||||
transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11);
|
||||
}
|
||||
&[data-animation=fade][data-state=hidden] {
|
||||
opacity: 0;
|
||||
}
|
||||
&[data-inertia][data-state=visible] {
|
||||
transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11);
|
||||
}
|
||||
& {
|
||||
background-color: $white;
|
||||
border-radius: $decor-radius-100;
|
||||
box-shadow: $decor-elevation-400;
|
||||
}
|
||||
.tippy-arrow {
|
||||
@extend %overlay-tail;
|
||||
}
|
||||
&[data-placement^=bottom] > .tippy-arrow {
|
||||
@extend %overlay-tail-bottom;
|
||||
}
|
||||
&[data-placement^=top] > .tippy-arrow {
|
||||
@extend %overlay-tail-top;
|
||||
}
|
||||
&[data-placement^=left] > .tippy-arrow {
|
||||
@extend %overlay-tail-left;
|
||||
}
|
||||
&[data-placement^=right] > .tippy-arrow {
|
||||
@extend %overlay-tail-right;
|
||||
}
|
||||
}
|
||||
%overlay-tail {
|
||||
--size: 5px;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
%overlay-tail-top {
|
||||
& {
|
||||
bottom: 0;
|
||||
}
|
||||
&::before {
|
||||
left: 0;
|
||||
bottom: calc(0px - var(--size));
|
||||
transform-origin: center top;
|
||||
}
|
||||
}
|
||||
%overlay-tail-bottom {
|
||||
& {
|
||||
top: 0
|
||||
}
|
||||
&::before {
|
||||
left: 0;
|
||||
top: calc(0px - var(--size));
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
}
|
||||
%overlay-tail-left {
|
||||
& {
|
||||
right: 0;
|
||||
}
|
||||
&::before {
|
||||
right: calc(0px - var(--size));
|
||||
transform-origin: center left;
|
||||
}
|
||||
}
|
||||
%overlay-tail-right {
|
||||
& {
|
||||
left: 0
|
||||
}
|
||||
&::before {
|
||||
left: calc(0px - var(--size));
|
||||
transform-origin: center right;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
[data-theme~="square-tail"] {
|
||||
.tippy-arrow {
|
||||
--size: 18px;
|
||||
left: calc(0px - (var(--size) / 2)) !important;
|
||||
}
|
||||
.tippy-arrow::before {
|
||||
background-color: $white;
|
||||
width: calc(1px + var(--size));
|
||||
height: calc(1px + var(--size));
|
||||
border: $decor-border-100;
|
||||
border-color: $gray-300;
|
||||
}
|
||||
// potential icon
|
||||
.tippy-arrow::after {
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
}
|
||||
&[data-placement^=top] {
|
||||
& {
|
||||
bottom: -10px;
|
||||
}
|
||||
.informed-action {
|
||||
border-bottom-left-radius: 0 !important;
|
||||
}
|
||||
.tippy-arrow::before {
|
||||
border-bottom-left-radius: $decor-radius-200;
|
||||
border-bottom-right-radius: $decor-radius-200;
|
||||
border-top: 0 !important;
|
||||
}
|
||||
.tippy-arrow::after {
|
||||
bottom: calc(0px - var(--size));
|
||||
}
|
||||
}
|
||||
&[data-placement^=bottom] {
|
||||
& {
|
||||
top: -10px;
|
||||
}
|
||||
.informed-action {
|
||||
border-top-left-radius: 0 !important;
|
||||
}
|
||||
.tippy-arrow::before {
|
||||
border-top-left-radius: $decor-radius-200;
|
||||
border-top-right-radius: $decor-radius-200;
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
.tippy-arrow::after {
|
||||
top: calc(0px - var(--size));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,10 +1,13 @@
|
|||
[data-tippy-root] {
|
||||
@extend %tooltip-layer;
|
||||
}
|
||||
.tippy-box[data-theme~=tooltip] {
|
||||
& {
|
||||
@extend %tooltip-bubble;
|
||||
}
|
||||
.tippy-content {
|
||||
@extend %tooltip-content;
|
||||
}
|
||||
.tippy-arrow {
|
||||
@extend %tooltip-tail;
|
||||
}
|
||||
&[data-placement^=bottom] > .tippy-arrow {
|
||||
@extend %tooltip-tail-bottom;
|
||||
}
|
||||
|
|
@ -17,33 +20,19 @@
|
|||
&[data-placement^=right] > .tippy-arrow {
|
||||
@extend %tooltip-tail-right;
|
||||
}
|
||||
.tippy-arrow {
|
||||
@extend %tooltip-tail;
|
||||
}
|
||||
.tippy-content {
|
||||
@extend %tooltip-content;
|
||||
}
|
||||
}
|
||||
%tooltip-content {
|
||||
@extend %p3;
|
||||
padding: 12px;
|
||||
max-width: 192px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
%tooltip-layer {
|
||||
max-width: calc(100vw - 10px);
|
||||
}
|
||||
%tooltip-bubble {
|
||||
& {
|
||||
position: relative;
|
||||
outline: 0;
|
||||
|
||||
background-color: $gray-700;
|
||||
color: $white;
|
||||
border-radius: $decor-radius-100;
|
||||
box-shadow: $decor-elevation-400;
|
||||
transition-property: transform, visibility, opacity;
|
||||
}
|
||||
&[data-animation=fade][data-state=hidden] {
|
||||
opacity: 0;
|
||||
}
|
||||
&[data-inertia][data-state=visible] {
|
||||
transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11);
|
||||
}
|
||||
}
|
||||
%tooltip-tail {
|
||||
|
|
@ -54,66 +43,32 @@
|
|||
height: calc(var(--size) * 2);
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
||||
border-color: $transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
%tooltip-tail-top {
|
||||
& {
|
||||
bottom: 0;
|
||||
}
|
||||
&::before {
|
||||
bottom: calc(0px - var(--size));
|
||||
left: 0;
|
||||
|
||||
%tooltip-tail-top {
|
||||
&::before {
|
||||
border-width: var(--size) var(--size) 0;
|
||||
border-top-color: initial;
|
||||
transform-origin: center top;
|
||||
}
|
||||
}
|
||||
%tooltip-tail-bottom {
|
||||
& {
|
||||
top: 0
|
||||
}
|
||||
&::before {
|
||||
top: calc(0px - var(--size));
|
||||
left: 0;
|
||||
border-width: 0 var(--size) var(--size);
|
||||
border-bottom-color: initial;
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
}
|
||||
%tooltip-tail-left {
|
||||
& {
|
||||
right: 0;
|
||||
}
|
||||
&::before {
|
||||
right: calc(0px - var(--size));
|
||||
border-width: var(--size) 0 var(--size) var(--size);
|
||||
border-left-color: initial;
|
||||
transform-origin: center left;
|
||||
}
|
||||
}
|
||||
%tooltip-tail-right {
|
||||
& {
|
||||
left: 0
|
||||
}
|
||||
&::before {
|
||||
left: calc(0px - var(--size));
|
||||
border-width: var(--size) var(--size) var(--size) 0;
|
||||
border-right-color: initial;
|
||||
transform-origin: center right;
|
||||
}
|
||||
}
|
||||
|
||||
%tooltip-content {
|
||||
@extend %p3;
|
||||
padding: 12px;
|
||||
max-width: 192px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -56,10 +56,13 @@
|
|||
{{/if}}
|
||||
|
||||
{{#each @items as |item|}}
|
||||
<TopologyMetrics::Popover
|
||||
@position={{find-by 'id' (concat item.Namespace item.Name) this.iconPositions}}
|
||||
@item={{item}}
|
||||
@oncreate={{action @oncreate item @service}}
|
||||
/>
|
||||
{{#if (or (not item.Intention.Allowed) item.Intention.HasPermissions)}}
|
||||
<TopologyMetrics::Popover
|
||||
@type={{if item.Intention.HasPermissions 'l7' 'deny'}}
|
||||
@position={{find-by 'id' (concat item.Namespace item.Name) this.iconPositions}}
|
||||
@item={{item}}
|
||||
@oncreate={{action @oncreate item @service}}
|
||||
/>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,8 +16,8 @@ export default class TopoloyMetricsDownLines extends Component {
|
|||
|
||||
return {
|
||||
id: item.id,
|
||||
x: thirdLen.x - view.x,
|
||||
y: thirdLen.y - view.y,
|
||||
x: Math.round(thirdLen.x - view.x),
|
||||
y: Math.round(thirdLen.y - view.y),
|
||||
};
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,71 +1,94 @@
|
|||
<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;'}}}
|
||||
<div
|
||||
class="topology-metrics-popover {{@type}}"
|
||||
...attributes
|
||||
>
|
||||
|
||||
{{#if (eq @type 'deny')}}
|
||||
|
||||
<InformedAction
|
||||
class="dangerous"
|
||||
{{did-insert (set this 'popover')}}
|
||||
>
|
||||
<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}}
|
||||
<:header>
|
||||
<h3>
|
||||
Connection Denied
|
||||
</h3>
|
||||
</:header>
|
||||
<:body>
|
||||
<p>
|
||||
Add an intention that allows these two services to connect.
|
||||
</p>
|
||||
</:body>
|
||||
<:actions as |Actions|>
|
||||
<Actions.Action class="action">
|
||||
<button
|
||||
{{on "click" @oncreate}}
|
||||
type="button"
|
||||
>
|
||||
Create
|
||||
</button>
|
||||
{{/if}}
|
||||
</Actions.Action>
|
||||
<Actions.Action>
|
||||
<button
|
||||
{{on "click" this.togglePopover}}
|
||||
{{on 'click' (fn (optional this.popoverController.hide))}}
|
||||
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;'}}}
|
||||
</Actions.Action>
|
||||
</:actions>
|
||||
</InformedAction>
|
||||
|
||||
{{else}}
|
||||
|
||||
<InformedAction
|
||||
class="info"
|
||||
{{did-insert (set this 'popover')}}
|
||||
>
|
||||
<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>
|
||||
<: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" this.togglePopover}}
|
||||
{{on 'click' (fn (optional this.popoverController.hide))}}
|
||||
class="cancel"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</EmberPopover>
|
||||
</button>
|
||||
</Actions.Action>
|
||||
</:actions>
|
||||
</InformedAction>
|
||||
|
||||
{{/if}}
|
||||
<button
|
||||
{{with-overlay
|
||||
this.popover
|
||||
options=(hash
|
||||
theme="square-tail"
|
||||
placement="bottom-start"
|
||||
)
|
||||
returns=(set this 'popoverController')
|
||||
}}
|
||||
type="button"
|
||||
{{on 'click' (fn (optional this.popoverController.show))}}
|
||||
style={{{concat 'top:' @position.y 'px;left:' @position.x 'px;'}}}
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,3 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
export default class TopologyMetricsButton extends Component {}
|
||||
|
|
|
|||
|
|
@ -1,87 +1,27 @@
|
|||
.topology-metrics-popover {
|
||||
.deny-target,
|
||||
.L7-target {
|
||||
transform: translate(-50%,-50%);
|
||||
> button {
|
||||
position: absolute;
|
||||
transform: translate(-50%,-50%);
|
||||
background-color: $white;
|
||||
padding: 1px 2px;
|
||||
padding: 1px 1px;
|
||||
&:hover {
|
||||
cursor:pointer;
|
||||
}
|
||||
&:active, &:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
.deny-target:hover,
|
||||
.L7-target:hover {
|
||||
cursor:pointer;
|
||||
&.deny .informed-action header::before {
|
||||
display: none;
|
||||
}
|
||||
.deny-target:active,
|
||||
.deny-target:focus,
|
||||
.L7-target:active,
|
||||
.L7-target:focus {
|
||||
outline: none;
|
||||
}
|
||||
.deny-target::before {
|
||||
&.deny > button::before,
|
||||
&.deny .tippy-arrow::after {
|
||||
@extend %with-cancel-square-fill-color-mask, %as-pseudo;
|
||||
background-color: $red-500;
|
||||
}
|
||||
.L7-target::before {
|
||||
&.l7 > button::before,
|
||||
&.l7 .tippy-arrow::after {
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
|
@ -56,9 +56,12 @@
|
|||
{{/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}}
|
||||
/>
|
||||
{{#if (or (not item.Intention.Allowed) item.Intention.HasPermissions)}}
|
||||
<TopologyMetrics::Popover
|
||||
@type={{if item.Intention.HasPermissions 'l7' 'deny'}}
|
||||
@position={{find-by 'id' (concat item.Namespace item.Name) this.iconPositions}}
|
||||
@item={{item}}
|
||||
@oncreate={{action @oncreate @service item}}
|
||||
/>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ export default class TopologyMetricsUpLines extends Component {
|
|||
const partLen = item.getPointAtLength(Math.ceil(pathLen * 0.666));
|
||||
return {
|
||||
id: item.id,
|
||||
x: partLen.x - center.x,
|
||||
y: partLen.y - center.y * 0.81,
|
||||
x: Math.round(partLen.x - center.x),
|
||||
y: Math.round(partLen.y - center.y * 0.81),
|
||||
};
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
import { modifier } from 'ember-modifier';
|
||||
import tippy, { followCursor } from 'tippy.js';
|
||||
|
||||
/**
|
||||
* Overlay modifier using Tippy.js
|
||||
* https://atomiks.github.io/tippyjs
|
||||
*
|
||||
* {{tooltip 'Text' options=(hash )}}
|
||||
*/
|
||||
export default modifier(($element, [content], hash = {}) => {
|
||||
const options = hash.options || {};
|
||||
|
||||
let $anchor = $element;
|
||||
|
||||
// make it easy to specify the modified element as the actual tooltip
|
||||
if (typeof options.triggerTarget === 'string') {
|
||||
const $el = $anchor;
|
||||
switch (options.triggerTarget) {
|
||||
case 'parentNode':
|
||||
$anchor = $anchor.parentNode;
|
||||
break;
|
||||
default:
|
||||
$anchor = $anchor.querySelectorAll(options.triggerTarget);
|
||||
}
|
||||
content = $anchor.cloneNode(true);
|
||||
$el.remove();
|
||||
hash.options.triggerTarget = undefined;
|
||||
}
|
||||
// {{tooltip}} will just use the HTML content
|
||||
if (typeof content === 'undefined') {
|
||||
content = $anchor.innerHTML;
|
||||
$anchor.innerHTML = '';
|
||||
}
|
||||
if (hash.returns) {
|
||||
options.trigger = 'manual';
|
||||
}
|
||||
let interval;
|
||||
if (options.trigger === 'manual') {
|
||||
// if we are manually triggering, a out delay means only show for the
|
||||
// amount of time specified by the delay
|
||||
const delay = options.delay || [];
|
||||
if (typeof delay[1] !== 'undefined') {
|
||||
hash.options.onShown = popover => {
|
||||
clearInterval(interval);
|
||||
interval = setTimeout(() => {
|
||||
popover.hide();
|
||||
}, delay[1]);
|
||||
};
|
||||
}
|
||||
}
|
||||
let $trigger = $anchor;
|
||||
const popover = tippy($anchor, {
|
||||
triggerTarget: $trigger,
|
||||
content: $anchor => content,
|
||||
// showOnCreate: true,
|
||||
// hideOnClick: false,
|
||||
interactive: true,
|
||||
plugins: [typeof options.followCursor !== 'undefined' ? followCursor : undefined].filter(item =>
|
||||
Boolean(item)
|
||||
),
|
||||
...hash.options,
|
||||
});
|
||||
if (hash.returns) {
|
||||
hash.returns(popover);
|
||||
}
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
popover.destroy();
|
||||
};
|
||||
});
|
||||
|
|
@ -79,6 +79,7 @@ $green-600: #26912f;
|
|||
$green-700: #1e7125;
|
||||
$green-800: #15501a;
|
||||
$green-900: #0d3010;
|
||||
$blue-010: #fbfcff;
|
||||
$blue-050: #f0f5ff;
|
||||
$blue-100: #bfd4ff;
|
||||
$blue-200: #8ab1ff;
|
||||
|
|
@ -89,6 +90,7 @@ $blue-600: #0f4fd1;
|
|||
$blue-700: #0e40a3;
|
||||
$blue-800: #0a2d74;
|
||||
$blue-900: #061b46;
|
||||
$red-010: #fdfafb;
|
||||
$red-050: #f9ecee;
|
||||
$red-100: #efc7cc;
|
||||
$red-200: #e5a2aa;
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
||||
%confirmation-alert > ul > li > * {
|
||||
@extend %internal-button;
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
%confirmation-alert > div {
|
||||
padding: 1rem;
|
||||
}
|
||||
%confirmation-alert > ul {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 4px;
|
||||
}
|
||||
%confirmation-alert > ul > li {
|
||||
width: 50%;
|
||||
}
|
||||
%confirmation-alert > ul > li > * {
|
||||
width: 100%;
|
||||
}
|
||||
%confirmation-alert.warning header::before {
|
||||
margin-right: 5px;
|
||||
}
|
||||
%confirmation-alert.warning header {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
%confirmation-alert {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
%confirmation-alert > div {
|
||||
background-color: $yellow-050;
|
||||
border-top-left-radius: $decor-radius-200;
|
||||
border-top-right-radius: $decor-radius-200;
|
||||
cursor: default;
|
||||
}
|
||||
%confirmation-alert > ul {
|
||||
list-style: none;
|
||||
}
|
||||
%confirmation-alert > ul > li > * {
|
||||
cursor: pointer;
|
||||
}
|
||||
%confirmation-alert > ul > li > *:hover,
|
||||
%confirmation-alert > ul > li > *:focus {
|
||||
background-color: $gray-100;
|
||||
}
|
||||
%confirmation-alert > ul > .dangerous > * {
|
||||
@extend %frame-red-300;
|
||||
}
|
||||
%confirmation-alert > ul > .dangerous > *:hover,
|
||||
%confirmation-alert > ul > .dangerous > *:focus {
|
||||
@extend %frame-red-700;
|
||||
}
|
||||
%confirmation-alert.warning header {
|
||||
color: $orange-700;
|
||||
}
|
||||
%confirmation-alert.warning header::before {
|
||||
@extend %with-alert-triangle-mask, %as-pseudo;
|
||||
background-color: $yellow-500;
|
||||
margin-right: 5px;
|
||||
}
|
||||
%confirmation-alert p {
|
||||
color: $black;
|
||||
}
|
||||
|
|
@ -2,7 +2,6 @@
|
|||
@import './breadcrumbs/index';
|
||||
@import './buttons/index';
|
||||
@import './checkbox-group/index';
|
||||
@import './confirmation-alert/index';
|
||||
@import './display-toggle/index';
|
||||
@import './form-elements/index';
|
||||
@import './inline-alert/index';
|
||||
|
|
|
|||
|
|
@ -14,3 +14,6 @@
|
|||
%menu-panel > ul > li.dangerous > *:not(div) {
|
||||
@extend %internal-button-dangerous;
|
||||
}
|
||||
%menu-panel .informed-action {
|
||||
border: 0 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ $info-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 2
|
|||
$info-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.543 2 12 6.486 2 12 2zm0 1.886c-4.486 0-8.143 3.628-8.143 8.114 0 4.486 3.657 8.143 8.143 8.143 4.486 0 8.143-3.643 8.143-8.143 0-4.5-3.657-8.129-8.143-8.129v.015zm1.429 8.128a1.555 1.555 0 0 0-.443-.985c-.286-.272-.6-.429-.986-.443h-1.429c-.385.028-.685.185-.985.443a1.456 1.456 0 0 0-.443.985h1.428V16.3c.029.386.158.714.443.986.286.285.6.443.986.443h1.429c.385 0 .685-.158.985-.443.286-.272.429-.6.443-.986H13.43V12v.014zM11 8.73a1.345 1.345 0 0 1-.4-1c0-.4.129-.743.4-1 .271-.258.6-.4 1-.4s.743.128 1 .4c.257.271.4.6.4 1s-.129.742-.4 1a1.433 1.433 0 0 1-1 .428c-.4 0-.743-.157-1-.428z" fill="%23000"/></svg>');
|
||||
$key-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 18v3h-2.969L17 20v-2h-2v-2h-2l-4-4 3.052-3L21 18zM10 6L8 4 5.003 5 4 8l2 2 4-4zm-4.217 7.839L1.132 9.188l1.702-6.354 6.354-1.702 4.65 4.65-1.702 6.354-6.353 1.703z" fill="%23000"/></svg>');
|
||||
$kubernetes-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="21" height="20" xmlns="http://www.w3.org/2000/svg"><g stroke="%23FFF" fill="none"><path d="M10.21 1.002a1.241 1.241 0 0 0-.472.12L3.29 4.201a1.225 1.225 0 0 0-.667.83l-1.591 6.922a1.215 1.215 0 0 0 .238 1.035l4.463 5.55c.234.29.59.46.964.46l7.159-.002c.375 0 .73-.168.964-.459l4.462-5.55c.234-.292.322-.673.238-1.036L17.927 5.03a1.225 1.225 0 0 0-.667-.83l-6.45-3.08a1.242 1.242 0 0 0-.598-.12z" fill="%23326CE5"/><path d="M10.275 3.357c-.213 0-.386.192-.386.429v.11c.005.136.035.24.052.367.033.27.06.492.043.7a.421.421 0 0 1-.125.2l-.01.163a4.965 4.965 0 0 0-3.22 1.548 6.47 6.47 0 0 1-.138-.099c-.07.01-.139.03-.23-.022-.172-.117-.33-.277-.52-.47-.087-.093-.15-.181-.254-.27L5.4 5.944a.46.46 0 0 0-.269-.101.372.372 0 0 0-.307.136c-.133.167-.09.422.094.57l.006.003.08.065c.11.08.21.122.32.187.231.142.422.26.574.403.06.063.07.175.078.223l.123.11a4.995 4.995 0 0 0-.787 3.483l-.162.047c-.042.055-.103.141-.166.167-.198.063-.422.086-.692.114-.126.01-.236.004-.37.03-.03.005-.07.016-.103.023l-.003.001-.006.002c-.228.055-.374.264-.327.47.047.206.27.331.498.282h.006c.003-.001.005-.003.008-.003l.1-.022c.131-.036.227-.088.346-.133.255-.092.467-.168.673-.198.086-.007.177.053.222.078l.168-.029a5.023 5.023 0 0 0 2.226 2.78l-.07.168c.025.065.053.154.034.218-.075.195-.203.4-.35.628-.07.106-.142.188-.206.309l-.05.104c-.099.212-.026.456.165.548.191.092.43-.005.532-.218h.001v-.001c.015-.03.036-.07.048-.098.055-.126.073-.233.111-.354.102-.257.159-.526.3-.694.038-.046.1-.063.166-.08l.087-.159a4.987 4.987 0 0 0 3.562.01l.083.148c.066.021.138.032.197.12.105.179.177.391.265.648.038.121.057.229.112.354.012.029.033.069.048.099.102.213.341.311.533.219.19-.092.264-.337.164-.549l-.05-.104c-.064-.12-.136-.202-.207-.307-.146-.23-.267-.419-.342-.613-.032-.1.005-.163.03-.228-.015-.017-.047-.111-.065-.156a5.023 5.023 0 0 0 2.225-2.8l.165.03c.058-.039.112-.088.216-.08.206.03.418.106.673.198.12.045.215.098.347.133.028.008.068.015.1.022l.007.002.006.001c.229.05.45-.076.498-.282.047-.206-.1-.415-.327-.47l-.112-.027c-.134-.025-.243-.019-.37-.03-.27-.027-.494-.05-.692-.113-.081-.031-.139-.128-.167-.167l-.156-.046a4.997 4.997 0 0 0-.804-3.474l.137-.123c.006-.069.001-.142.073-.218.151-.143.343-.261.574-.404.11-.064.21-.106.32-.187.025-.018.06-.047.086-.068.185-.148.227-.403.094-.57-.133-.166-.39-.182-.575-.034-.027.02-.062.048-.086.068-.104.09-.168.178-.255.27-.19.194-.348.355-.52.471-.075.044-.185.029-.235.026l-.146.104A5.059 5.059 0 0 0 10.7 5.328a9.325 9.325 0 0 1-.009-.172c-.05-.048-.11-.09-.126-.193-.017-.208.011-.43.044-.7.018-.126.047-.23.053-.367l-.001-.11c0-.237-.173-.429-.386-.429zM9.79 6.351l-.114 2.025-.009.004a.34.34 0 0 1-.54.26l-.003.002-1.66-1.177A3.976 3.976 0 0 1 9.79 6.351zm.968 0a4.01 4.01 0 0 1 2.313 1.115l-1.65 1.17-.006-.003a.34.34 0 0 1-.54-.26h-.003L10.76 6.35zm-3.896 1.87l1.516 1.357-.002.008a.34.34 0 0 1-.134.585l-.001.006-1.944.561a3.975 3.975 0 0 1 .565-2.516zm6.813.001a4.025 4.025 0 0 1 .582 2.51l-1.954-.563-.001-.008a.34.34 0 0 1-.134-.585v-.004l1.507-1.35zm-3.712 1.46h.62l.387.483-.139.602-.557.268-.56-.269-.138-.602.387-.482zm1.99 1.652a.339.339 0 0 1 .08.005l.002-.004 2.01.34a3.98 3.98 0 0 1-1.609 2.022l-.78-1.885.002-.003a.34.34 0 0 1 .296-.475zm-3.375.008a.34.34 0 0 1 .308.474l.005.007-.772 1.866a3.997 3.997 0 0 1-1.604-2.007l1.993-.339.003.005a.345.345 0 0 1 .067-.006zm1.683.817a.338.338 0 0 1 .312.179h.008l.982 1.775a3.991 3.991 0 0 1-2.57-.002l.979-1.772h.001a.34.34 0 0 1 .288-.18z" stroke-width=".25" fill="%23FFF"/></g></svg>');
|
||||
$layers-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.14 20.131l-.12.035a2.501 2.501 0 01-.613.077h-.119l-.107-.009a2.095 2.095 0 01-.383-.065l-.074-.011-.196-.07c-.13-.052-4.6-2-8.009-3.49-1.614.838-2.88 1.495-3.07 1.596a.507.507 0 00-.223.177.394.394 0 00-.052.308l.001.013c.012.05.035.095.065.139.007.01.007.021.016.032l.008.008c.022.025.05.046.08.068.029.024.058.049.093.067l.009.006c.153.071 11.554 5.047 11.711 5.11.012.006.025.005.037.009a.61.61 0 00.16.034.672.672 0 00.216-.02l.028-.01c.038-.012.075-.018.11-.037L23.89 18.3c.018-.008.027-.022.043-.032a.542.542 0 00.15-.137c.01-.014.024-.022.032-.037.007-.013.006-.027.013-.04a.446.446 0 00.035-.181.417.417 0 00-.051-.178c-.007-.014-.007-.027-.016-.04-.01-.014-.024-.022-.035-.034a.557.557 0 00-.074-.072.58.58 0 00-.088-.055c-.017-.01-.028-.022-.044-.03l-2.975-1.297-7.353 3.813c-.13.076-.292.125-.386.151z" fill="%23000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M13.146 14.415l-.114.033c-.201.053-.418.08-.637.08h-.088l-.127-.01a2.145 2.145 0 01-.41-.071l-.068-.012-.174-.061c-.14-.057-4.603-2.003-8.009-3.49C1.905 11.722.64 12.38.45 12.48a.507.507 0 00-.223.177.397.397 0 00-.052.309l.001.012c.012.05.035.095.065.139.007.01.007.021.016.032l.008.008c.022.025.05.046.08.068.029.024.058.05.093.068.003 0 .006.004.009.005.153.071 11.554 5.048 11.711 5.111.012.005.025.004.037.008a.61.61 0 00.16.034c.014.002.028.001.04.001a.65.65 0 00.204-.031c.038-.012.075-.017.11-.037l11.182-5.797c.018-.01.027-.023.043-.032a.482.482 0 00.15-.138c.01-.014.024-.022.032-.036.007-.013.006-.027.013-.041a.435.435 0 00.035-.18.373.373 0 00-.015-.088.405.405 0 00-.036-.09c-.007-.014-.007-.028-.016-.04-.01-.014-.024-.023-.035-.035a.515.515 0 00-.162-.128c-.017-.008-.027-.02-.044-.029l-2.974-1.298-7.354 3.814c-.137.076-.291.124-.381.149z" fill="%23000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12.198.22c-.021-.01-.043-.01-.064-.017a.541.541 0 00-.222-.036.529.529 0 00-.218.048c-.012.006-.027.005-.04.012C11.506.304 1.03 6.07.448 6.397a.52.52 0 00-.222.187.444.444 0 00-.052.328l.001.013c.012.053.035.1.065.148.007.01.007.023.016.034l.008.008c.022.028.05.049.08.073.029.025.058.052.093.07a.023.023 0 00.009.007c.153.076 11.554 5.359 11.711 5.427.012.005.025.005.037.009a.575.575 0 00.2.037c.06 0 .118-.007.177-.023l.027-.01c.038-.012.075-.018.11-.039L23.89 6.51c.018-.01.027-.025.043-.035a.549.549 0 00.15-.146c.01-.014.024-.023.032-.039.007-.013.006-.028.013-.042a.524.524 0 00.035-.193.411.411 0 00-.015-.091.444.444 0 00-.036-.098c-.007-.014-.007-.028-.016-.041-.01-.015-.024-.024-.035-.037a.56.56 0 00-.162-.136c-.017-.01-.027-.023-.044-.03L12.198.221z" fill="%23000"/></svg>');
|
||||
$layers-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.815 18.637l-.101.029c-.169.043-.34.064-.51.064H12.103l-.09-.007a1.74 1.74 0 01-.319-.054l-.061-.01-.163-.058c-.108-.043-3.833-1.667-6.675-2.907l-2.559 1.328a.422.422 0 00-.184.149.329.329 0 00-.044.256v.01c.011.042.03.08.055.117.006.008.006.018.013.026l.007.007c.018.021.042.038.066.056.025.021.049.041.078.057.002 0 .005.004.007.005.128.059 9.629 4.205 9.76 4.258.01.005.02.004.03.007a.506.506 0 00.315.012l.023-.008c.03-.01.062-.015.09-.03l9.319-4.833c.015-.006.023-.019.036-.026a.461.461 0 00.125-.115c.008-.011.02-.018.026-.03.007-.01.006-.023.012-.034a.368.368 0 00.029-.151.323.323 0 00-.013-.072.343.343 0 00-.03-.076c-.006-.011-.006-.023-.013-.034-.008-.01-.02-.018-.03-.028a.445.445 0 00-.134-.106c-.014-.007-.023-.018-.037-.024l-2.479-1.082-6.128 3.178a1.403 1.403 0 01-.321.126z" fill="%23000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12.819 13.873l-.095.028a2.104 2.104 0 01-.531.067h-.073l-.106-.008c-.1-.006-.22-.027-.342-.06l-.056-.01-.145-.05a2798 2798 0 01-6.674-2.909l-2.56 1.33a.423.423 0 00-.184.148.33.33 0 00-.044.257v.01c.011.041.03.079.055.116.006.008.006.017.013.026.002.004.005.005.007.007.018.021.042.039.066.057.025.02.049.041.078.056l.007.005c.128.06 9.629 4.206 9.76 4.26.01.003.02.002.03.006a.506.506 0 00.135.028l.033.001a.542.542 0 00.17-.026c.03-.01.062-.014.09-.03l9.319-4.832c.015-.008.023-.019.036-.027a.489.489 0 00.125-.114c.008-.012.02-.019.026-.03.007-.011.006-.023.012-.035a.362.362 0 00.029-.15.311.311 0 00-.013-.072.333.333 0 00-.03-.076c-.006-.012-.006-.023-.013-.034-.008-.011-.02-.018-.03-.028a.412.412 0 00-.134-.107c-.014-.007-.023-.017-.037-.024l-2.478-1.082-6.129 3.178a1.462 1.462 0 01-.317.124z" fill="%23000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12.029 2.045c-.018-.008-.036-.01-.053-.015A.45.45 0 0011.79 2a.44.44 0 00-.182.04c-.01.005-.023.005-.034.01-.123.064-8.853 4.87-9.338 5.141a.433.433 0 00-.184.157.37.37 0 00-.044.273v.01c.011.045.03.085.055.124.006.01.006.02.013.029l.007.006c.018.024.042.041.066.06.025.022.049.044.078.06a5453.121 5453.121 0 009.766 4.528c.011.004.021.004.031.007a.482.482 0 00.315.012l.023-.008c.03-.01.062-.016.09-.033l9.319-5.13c.015-.008.023-.02.036-.029a.464.464 0 00.125-.122c.008-.011.02-.019.026-.032.007-.011.006-.023.012-.035A.435.435 0 0022 6.907a.345.345 0 00-.013-.076.367.367 0 00-.03-.081c-.006-.012-.006-.024-.013-.035-.008-.013-.02-.02-.03-.03a.457.457 0 00-.134-.113c-.014-.008-.023-.02-.037-.026l-9.714-4.501z" fill="%23000"/></svg>');
|
||||
$learn-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.409 5.273l8.915 3.958c.46.204.676.681.676 1.108 0 .427-.216.904-.676 1.108l-3.111 1.381v3.767c0 .145-.05.279-.134.385-.157.35-.434.633-.743.858-.377.274-.855.502-1.39.684-1.073.365-2.462.578-3.963.578-1.5 0-2.89-.213-3.962-.578-.536-.182-1.014-.41-1.39-.684-.31-.225-.586-.509-.744-.858a.618.618 0 0 1-.133-.385v-2.824l.029-.945L5.5 12.5c-.38.525-.897 1.436-1.023 2.536a1.122 1.122 0 0 1 .007 1.912 3.343 3.343 0 0 1-.039.813h.028c0 .004.003.028.016.074.015.052.04.119.077.196.074.156.186.333.327.497.3.35.628.533.9.533L5.014 20c-.346 0-.726-.252-1.14-.756-.583.504-1.04.756-1.374.756l-.404-.987c.37 0 .703-.266.938-.812.112-.26.181-.546.207-.806.02-.165.014-.332-.017-.496a1.121 1.121 0 0 1 .329-1.976c.134-1.173.522-2.041.942-2.668l-1.819-.808C2.216 11.243 2 10.766 2 10.34c0-.427.216-.904.676-1.108l8.915-3.958c.262-.116.556-.116.818 0v-.001zm-.432 3.745l-5.52 2.749L12 14.227l8.758-3.888L12 6.45l-8.758 3.89 2.11.937L11 8.5l.977.518zm4.994 4.362l-4.562 2.025a1.003 1.003 0 0 1-.818 0L7.01 13.371l-.013.429v2.6a.531.531 0 0 1 .008.027c.022.079.107.224.358.407.244.178.6.356 1.059.512.917.313 2.167.512 3.562.512s2.645-.2 3.563-.512c.46-.156.814-.334 1.058-.512.251-.183.336-.328.358-.407a.61.61 0 0 1 .009-.027v-3.02h-.001zM17 2.5V1h6v6h-1.5V3.429L18.25 6.75 17 6l3.5-3.5H17z" fill="%23000"/></svg>');
|
||||
$link-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M20.073 10.015l-2.294 2.294a3.063 3.063 0 0 1-2.25.926c-.897 0-1.661-.323-2.294-.97l-.97.97c.647.633.97 1.401.97 2.305 0 .883-.305 1.63-.915 2.24l-2.272 2.282c-.61.625-1.36.938-2.25.938-.883 0-1.629-.305-2.24-.915l-1.62-1.61C3.312 17.863 3 17.117 3 16.234c0-.882.309-1.632.926-2.25l2.295-2.294a3.063 3.063 0 0 1 2.25-.926c.897 0 1.661.323 2.294.97l.97-.97a3.102 3.102 0 0 1-.97-2.305c0-.883.305-1.63.915-2.24l2.272-2.282c.61-.626 1.36-.938 2.25-.938.883 0 1.629.305 2.24.915l1.62 1.61c.625.611.938 1.357.938 2.24 0 .882-.309 1.632-.927 2.25zm-9.436 4.83l-.204.21a6.67 6.67 0 0 1-.237.238c-.044.04-.113.096-.209.166a.886.886 0 0 1-.583.182c-.294 0-.543-.103-.749-.31a1.025 1.025 0 0 1-.308-.75.89.89 0 0 1 .182-.586c.07-.096.124-.166.165-.21.04-.045.119-.124.236-.238l.21-.205A1.062 1.062 0 0 0 8.346 13c-.301 0-.55.1-.749.298l-2.29 2.299a1.025 1.025 0 0 0-.308.751c0 .287.103.534.308.74l1.619 1.614c.212.199.462.298.748.298.294 0 .543-.103.749-.31l2.268-2.287c.205-.206.308-.456.308-.751 0-.31-.121-.578-.363-.807zm8.055-7.944l-1.619-1.614A1.058 1.058 0 0 0 16.325 5c-.301 0-.55.1-.749.298l-2.268 2.288a1.025 1.025 0 0 0-.308.751c0 .31.121.578.363.807l.204-.21c.114-.118.193-.197.237-.238a2.61 2.61 0 0 1 .209-.166.885.885 0 0 1 .583-.182c.294 0 .543.103.749.31.205.206.308.456.308.75a.89.89 0 0 1-.182.586c-.07.096-.124.166-.165.21-.04.045-.119.124-.236.238l-.21.204c.22.236.485.354.793.354.294 0 .543-.103.749-.31l2.29-2.298c.205-.206.308-.456.308-.751 0-.287-.103-.534-.308-.74z" fill="%23000"/></svg>');
|
||||
$loading-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" class="structure-icon-loading"><style>.structure-icon-loading-base{opacity:.1}.structure-icon-loading-progress{animation:structure-icon-loading-fancy-spin 3s infinite linear;opacity:.25;stroke-dasharray:0 44;stroke-dashoffset:0;stroke-linecap:round;transform-origin:50% 50%}@keyframes structure-icon-loading-fancy-spin{0%{stroke-dasharray:0 44;stroke-dashoffset:0}25%{stroke-dasharray:33 11;stroke-dashoffset:-40}50%{stroke-dasharray:0 44;stroke-dashoffset:-110}75%{stroke-dasharray:33 11;stroke-dashoffset:-150}to{stroke-dasharray:0 44;stroke-dashoffset:-220}}@keyframes structure-icon-loading-simple-spin{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}</style><defs><path stroke="%23000" stroke-width="3" fill="none" id="a" d="M12 5l6 3v8l-6 3-6-3V8z"/></defs><use xlink:href="%23a" class="structure-icon-loading-base"/><use xlink:href="%23a" class="structure-icon-loading-progress"/></svg>');
|
||||
|
|
|
|||
|
|
@ -1,3 +1,9 @@
|
|||
%typo-inherit {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
font-style: inherit;
|
||||
}
|
||||
%typo-body {
|
||||
font-size: $typo-size-600;
|
||||
font-family: $typo-family-sans;
|
||||
|
|
|
|||
|
|
@ -32,7 +32,6 @@
|
|||
@import './components/tooltip-panel';
|
||||
@import './components/menu-panel';
|
||||
@import './components/more-popover-menu';
|
||||
@import './components/confirmation-alert';
|
||||
@import './components/definition-table';
|
||||
@import './components/radio-card';
|
||||
|
||||
|
|
@ -47,11 +46,13 @@
|
|||
/**/
|
||||
|
||||
@import './components/app-view';
|
||||
@import 'consul-ui/components/overlay';
|
||||
@import 'consul-ui/components/tooltip';
|
||||
@import 'consul-ui/components/notice';
|
||||
@import 'consul-ui/components/modal-dialog';
|
||||
@import 'consul-ui/components/filter-bar';
|
||||
@import 'consul-ui/components/freetext-filter';
|
||||
@import 'consul-ui/components/informed-action';
|
||||
|
||||
@import 'consul-ui/components/consul/tomography/graph';
|
||||
@import 'consul-ui/components/consul/discovery-chain';
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
.confirmation-alert {
|
||||
@extend %confirmation-alert;
|
||||
}
|
||||
|
|
@ -20,7 +20,6 @@ fieldset > header,
|
|||
%app-view-content div > dl > dt,
|
||||
%table caption,
|
||||
%tbody-th,
|
||||
%confirmation-alert header,
|
||||
%form-element > span {
|
||||
@extend %h4;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -131,7 +131,6 @@
|
|||
"ember-stargate": "^0.2.0",
|
||||
"ember-string-fns": "^1.4.0",
|
||||
"ember-test-selectors": "^4.0.0",
|
||||
"ember-tooltips": "^3.4.3",
|
||||
"ember-truth-helpers": "^2.0.0",
|
||||
"eslint": "^7.12.1",
|
||||
"eslint-plugin-ember": "^7.7.2",
|
||||
|
|
|
|||
45
ui/yarn.lock
45
ui/yarn.lock
|
|
@ -5250,7 +5250,7 @@ broccoli-output-wrapper@^3.2.1:
|
|||
heimdalljs-logger "^0.1.10"
|
||||
symlink-or-copy "^1.2.0"
|
||||
|
||||
broccoli-persistent-filter@^1.1.5, broccoli-persistent-filter@^1.1.6, broccoli-persistent-filter@^1.4.3:
|
||||
broccoli-persistent-filter@^1.1.6, broccoli-persistent-filter@^1.4.3:
|
||||
version "1.4.6"
|
||||
resolved "https://registry.yarnpkg.com/broccoli-persistent-filter/-/broccoli-persistent-filter-1.4.6.tgz#80762d19000880a77da33c34373299c0f6a3e615"
|
||||
integrity sha512-0RejLwoC95kv4kta8KAa+FmECJCK78Qgm8SRDEK7YyU0N9Cx6KpY3UCDy9WELl3mCXLN8TokNxc7/hp3lL4lfw==
|
||||
|
|
@ -5400,11 +5400,6 @@ broccoli-source@^1.1.0:
|
|||
resolved "https://registry.yarnpkg.com/broccoli-source/-/broccoli-source-1.1.0.tgz#54f0e82c8b73f46580cbbc4f578f0b32fca8f809"
|
||||
integrity sha1-VPDoLItz9GWAy7xPV48LMvyo+Ak=
|
||||
|
||||
broccoli-source@^2.0.0:
|
||||
version "2.1.2"
|
||||
resolved "https://registry.yarnpkg.com/broccoli-source/-/broccoli-source-2.1.2.tgz#e9ae834f143b607e9ec114ade66731500c38b90b"
|
||||
integrity sha512-1lLayO4wfS0c0Sj50VfHJXNWf94FYY0WUhxj0R77thbs6uWI7USiOWFqQV5dRmhAJnoKaGN4WyLGQbgjgiYFwQ==
|
||||
|
||||
broccoli-source@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/broccoli-source/-/broccoli-source-3.0.0.tgz#c7c9ba24505941b72a0244568285bc859f69dfbd"
|
||||
|
|
@ -5443,14 +5438,6 @@ broccoli-stew@^3.0.0:
|
|||
symlink-or-copy "^1.2.0"
|
||||
walk-sync "^1.1.3"
|
||||
|
||||
broccoli-string-replace@^0.1.2:
|
||||
version "0.1.2"
|
||||
resolved "https://registry.yarnpkg.com/broccoli-string-replace/-/broccoli-string-replace-0.1.2.tgz#1ed92f85680af8d503023925e754e4e33676b91f"
|
||||
integrity sha1-HtkvhWgK+NUDAjkl51Tk4zZ2uR8=
|
||||
dependencies:
|
||||
broccoli-persistent-filter "^1.1.5"
|
||||
minimatch "^3.0.3"
|
||||
|
||||
broccoli-uglify-sourcemap@^3.1.0:
|
||||
version "3.2.0"
|
||||
resolved "https://registry.yarnpkg.com/broccoli-uglify-sourcemap/-/broccoli-uglify-sourcemap-3.2.0.tgz#d96f1d41f6c18e9a5d49af1a5ab9489cdcac1c6c"
|
||||
|
|
@ -7541,7 +7528,7 @@ ember-cli-htmlbars@^3.0.0, ember-cli-htmlbars@^3.0.1:
|
|||
json-stable-stringify "^1.0.1"
|
||||
strip-bom "^3.0.0"
|
||||
|
||||
ember-cli-htmlbars@^4.0.5, ember-cli-htmlbars@^4.2.0, ember-cli-htmlbars@^4.2.3, ember-cli-htmlbars@^4.3.1:
|
||||
ember-cli-htmlbars@^4.0.5, ember-cli-htmlbars@^4.2.3, ember-cli-htmlbars@^4.3.1:
|
||||
version "4.4.0"
|
||||
resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-4.4.0.tgz#7ca17d5ca8f7550984346d9e6e93da0c3323f8d9"
|
||||
integrity sha512-ohgctqk7dXIZR4TgN0xRoUYltWhghFJgqmtuswQTpZ7p74RxI9PKx+E8WV/95mGcPzraesvMNBg5utQNvcqgNg==
|
||||
|
|
@ -8427,23 +8414,6 @@ ember-text-measurer@^0.6.0:
|
|||
ember-cli-babel "^7.19.0"
|
||||
ember-cli-htmlbars "^4.3.1"
|
||||
|
||||
ember-tooltips@^3.4.3:
|
||||
version "3.4.5"
|
||||
resolved "https://registry.yarnpkg.com/ember-tooltips/-/ember-tooltips-3.4.5.tgz#c6724cd9d2c274ad567541f6cd50cc3841606afe"
|
||||
integrity sha512-wElt+f0jujQkOUHIu3MfXqeHcV0bRxOgfmCro2RSNbJ/pM/ndYcsNsMuT3BCPPFikuLoTHEc85XDpzNcKoW9Fw==
|
||||
dependencies:
|
||||
broccoli-file-creator "^2.1.1"
|
||||
broccoli-funnel "^2.0.2"
|
||||
broccoli-merge-trees "^2.0.0"
|
||||
broccoli-source "^2.0.0"
|
||||
broccoli-string-replace "^0.1.2"
|
||||
ember-cli-babel "^7.13.0"
|
||||
ember-cli-htmlbars "^4.2.0"
|
||||
ember-in-element-polyfill "^1.0.0"
|
||||
popper.js "^1.12.5"
|
||||
resolve "^1.10.1"
|
||||
tooltip.js "^1.1.5"
|
||||
|
||||
ember-truth-helpers@2.1.0, ember-truth-helpers@^2.0.0, ember-truth-helpers@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/ember-truth-helpers/-/ember-truth-helpers-2.1.0.tgz#d4dab4eee7945aa2388126485977baeb33ca0798"
|
||||
|
|
@ -12558,7 +12528,7 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
|
|||
resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
|
||||
integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
|
||||
|
||||
"minimatch@2 || 3", minimatch@3.0.4, minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4:
|
||||
"minimatch@2 || 3", minimatch@3.0.4, minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.4:
|
||||
version "3.0.4"
|
||||
resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
|
||||
integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
|
||||
|
|
@ -13669,7 +13639,7 @@ polished@^3.4.4:
|
|||
dependencies:
|
||||
"@babel/runtime" "^7.9.2"
|
||||
|
||||
popper.js@^1.0.2, popper.js@^1.12.5, popper.js@^1.14.4, popper.js@^1.14.7:
|
||||
popper.js@^1.14.4, popper.js@^1.14.7:
|
||||
version "1.16.1"
|
||||
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
|
||||
integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
|
||||
|
|
@ -16271,13 +16241,6 @@ toidentifier@1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
|
||||
integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
|
||||
|
||||
tooltip.js@^1.1.5:
|
||||
version "1.3.3"
|
||||
resolved "https://registry.yarnpkg.com/tooltip.js/-/tooltip.js-1.3.3.tgz#2ad0d77bb6776a76e117eac0afcd3c7d3a237121"
|
||||
integrity sha512-XWWuy/dBdF/F/YpRE955yqBZ4VdLfiTAUdOqoU+wJm6phJlMpEzl/iYHZ+qJswbeT9VG822bNfsETF9wzmoy5A==
|
||||
dependencies:
|
||||
popper.js "^1.0.2"
|
||||
|
||||
topo@2.x.x:
|
||||
version "2.0.2"
|
||||
resolved "https://registry.yarnpkg.com/topo/-/topo-2.0.2.tgz#cd5615752539057c0dc0491a621c3bc6fbe1d182"
|
||||
|
|
|
|||
Loading…
Reference in New Issue