diff --git a/ui-v2/app/components/consul/intention/components.scss b/ui-v2/app/components/consul/intention/components.scss new file mode 100644 index 000000000..51c5755f9 --- /dev/null +++ b/ui-v2/app/components/consul/intention/components.scss @@ -0,0 +1,34 @@ +%pill-allow::before, +%pill-deny::before, +%pill-l7::before { + @extend %as-pseudo; + margin-right: 5px; + font-size: 0.9em; +} +%pill-allow, +%pill-deny, +%pill-l7 { + display: inline-block; + font-weight: $typo-weight-normal; + font-size: $typo-size-600; +} +%pill-allow { + color: $green-800; + background-color: $green-100; +} +%pill-deny { + color: $red-800; + background-color: $red-100; +} +%pill-l7 { + @extend %frame-gray-900; +} +%pill-allow::before { + @extend %with-arrow-right-color-mask; +} +%pill-deny::before { + @extend %with-deny-color-mask; +} +%pill-l7::before { + @extend %with-layers-mask; +} diff --git a/ui-v2/app/components/consul/intention/form/fieldsets/index.hbs b/ui-v2/app/components/consul/intention/form/fieldsets/index.hbs index be1570673..02dcd0853 100644 --- a/ui-v2/app/components/consul/intention/form/fieldsets/index.hbs +++ b/ui-v2/app/components/consul/intention/form/fieldsets/index.hbs @@ -119,7 +119,7 @@ ) (hash intent="" - header="L7 Permissions" + header="Application Aware" body="The source service may or may not connect to the destination service via unique permissions based on L7 criteria: path, header, or method." ) ) diff --git a/ui-v2/app/components/consul/intention/index.scss b/ui-v2/app/components/consul/intention/index.scss new file mode 100644 index 000000000..c7539a74c --- /dev/null +++ b/ui-v2/app/components/consul/intention/index.scss @@ -0,0 +1,8 @@ +@import './components'; + +@import './search-bar'; +@import './list'; +@import './form/fieldsets'; +@import './permission/list'; +@import './permission/form'; +@import './permission/header/list'; diff --git a/ui-v2/app/components/consul/intention/list/components.scss b/ui-v2/app/components/consul/intention/list/components.scss index e6b00fdad..b7a0760b8 100644 --- a/ui-v2/app/components/consul/intention/list/components.scss +++ b/ui-v2/app/components/consul/intention/list/components.scss @@ -12,7 +12,7 @@ td.intent-deny strong { @extend %pill-deny; } - td.intent-l7-rules strong { + td.intent- strong { @extend %pill-l7; } .notice.allow { diff --git a/ui-v2/app/components/consul/intention/list/layout.scss b/ui-v2/app/components/consul/intention/list/layout.scss index 515bcbd52..e208890f7 100644 --- a/ui-v2/app/components/consul/intention/list/layout.scss +++ b/ui-v2/app/components/consul/intention/list/layout.scss @@ -6,13 +6,13 @@ width: calc(30% - 50px); } tr > *:nth-child(2) { - width: 100px; + width: 120px; } tr > *:nth-child(3) { width: calc(30% - 50px); } tr > *:nth-child(4) { - width: calc(40% - 220px); + width: calc(40% - 240px); } tr > *:nth-child(5) { width: 160px; diff --git a/ui-v2/app/components/consul/intention/list/table/index.hbs b/ui-v2/app/components/consul/intention/list/table/index.hbs index 89ab400d2..56da9040d 100644 --- a/ui-v2/app/components/consul/intention/list/table/index.hbs +++ b/ui-v2/app/components/consul/intention/list/table/index.hbs @@ -28,11 +28,9 @@ as |item index|> {{or item.SourceNS 'default'}} -{{#let (or item.Action "L7 rules") as |intent|}} - - {{capitalize intent}} + + {{capitalize (or item.Action "App aware")}} -{{/let}} {{#if (eq item.DestinationName '*') }} diff --git a/ui-v2/app/components/consul/intention/permission/list/index.hbs b/ui-v2/app/components/consul/intention/permission/list/index.hbs index 5247a2ce0..8780a4689 100644 --- a/ui-v2/app/components/consul/intention/permission/list/index.hbs +++ b/ui-v2/app/components/consul/intention/permission/list/index.hbs @@ -6,7 +6,7 @@ as |item|>
- {{item.Action}} + {{capitalize item.Action}} {{#if (gt item.HTTP.Methods.length 0)}}
diff --git a/ui-v2/app/components/consul/intention/search-bar/index.hbs b/ui-v2/app/components/consul/intention/search-bar/index.hbs index c848f9a51..0c3e87dda 100644 --- a/ui-v2/app/components/consul/intention/search-bar/index.hbs +++ b/ui-v2/app/components/consul/intention/search-bar/index.hbs @@ -1,4 +1,4 @@ -
+ - Permissions + Intent {{#let components.Optgroup components.Option as |Optgroup Option|}} - - + + {{/let}} diff --git a/ui-v2/app/components/consul/intention/search-bar/index.scss b/ui-v2/app/components/consul/intention/search-bar/index.scss new file mode 100644 index 000000000..22ee1ea74 --- /dev/null +++ b/ui-v2/app/components/consul/intention/search-bar/index.scss @@ -0,0 +1,9 @@ +.consul-intention-search-bar { + .value-allow button::before { + @extend %with-arrow-right-color-mask, %as-pseudo; + color: $green-500; + } + .value-deny button::before { + @extend %with-deny-color-icon, %as-pseudo; + } +} diff --git a/ui-v2/app/styles/base/components/pill/layout.scss b/ui-v2/app/styles/base/components/pill/layout.scss index e38eb941b..6b63f13d6 100644 --- a/ui-v2/app/styles/base/components/pill/layout.scss +++ b/ui-v2/app/styles/base/components/pill/layout.scss @@ -19,5 +19,4 @@ %pill-700 { @extend %pill; padding: 4px 8px; - min-width: 87px; } diff --git a/ui-v2/app/styles/components.scss b/ui-v2/app/styles/components.scss index 5bcb175de..254c98bd3 100644 --- a/ui-v2/app/styles/components.scss +++ b/ui-v2/app/styles/components.scss @@ -64,11 +64,7 @@ @import 'consul-ui/components/consul/exposed-path/list'; @import 'consul-ui/components/consul/external-source'; @import 'consul-ui/components/consul/kind'; -@import 'consul-ui/components/consul/intention/list'; -@import 'consul-ui/components/consul/intention/form/fieldsets'; -@import 'consul-ui/components/consul/intention/permission/list'; -@import 'consul-ui/components/consul/intention/permission/form'; -@import 'consul-ui/components/consul/intention/permission/header/list'; +@import 'consul-ui/components/consul/intention'; @import 'consul-ui/components/role-selector'; @import 'consul-ui/components/topology-metrics'; @import 'consul-ui/components/topology-metrics/series'; diff --git a/ui-v2/app/styles/components/pill.scss b/ui-v2/app/styles/components/pill.scss index 8b2cbacc5..038a7e93e 100644 --- a/ui-v2/app/styles/components/pill.scss +++ b/ui-v2/app/styles/components/pill.scss @@ -33,37 +33,3 @@ span.policy-service-identity::before { %pill.leader::before { @extend %with-star-outline-mask, %as-pseudo; } -%pill-allow:before, -%pill-deny:before, -%pill-l7:before { - @extend %as-pseudo; - margin-right: 5px; - font-size: 0.9em; -} -%pill-allow, -%pill-deny, -%pill-l7 { - text-transform: capitalize; - font-weight: $typo-weight-normal; - font-size: $typo-size-600; -} -%pill-allow { - color: $green-800; - background-color: $green-100; -} -%pill-deny { - color: $red-800; - background-color: $red-100; -} -%pill-l7 { - @extend %frame-gray-900; -} -%pill-allow::before { - @extend %with-arrow-right-color-mask; -} -%pill-deny::before { - @extend %with-deny-color-mask; -} -%pill-l7::before { - @extend %with-layers-mask; -} diff --git a/ui-v2/app/styles/components/popover-select.scss b/ui-v2/app/styles/components/popover-select.scss index 7cc3675e4..6cad84b09 100644 --- a/ui-v2/app/styles/components/popover-select.scss +++ b/ui-v2/app/styles/components/popover-select.scss @@ -17,13 +17,10 @@ %popover-select.type-sort label > * { @extend %sort-button; } - -%popover-select.type-access button::before, -%popover-select.type-source button::before, -%popover-select.type-status button::before { +%popover-select button::before { margin-right: 10px; } -%popover-select .value-allow button::before, + %popover-select .value-passing button::before { @extend %with-check-circle-fill-mask, %as-pseudo; color: $green-500; @@ -32,7 +29,6 @@ @extend %with-alert-triangle-mask, %as-pseudo; color: $orange-500; } -%popover-select .value-deny button::before, %popover-select .value-critical button::before { @extend %with-cancel-square-fill-mask, %as-pseudo; color: $red-500;