diff --git a/ui-v2/app/components/consul-external-source/index.hbs b/ui-v2/app/components/consul-external-source/index.hbs new file mode 100644 index 0000000000..9a66b3a9ce --- /dev/null +++ b/ui-v2/app/components/consul-external-source/index.hbs @@ -0,0 +1,17 @@ +{{#let (if _externalSource _externalSource (service/external-source item)) as |externalSource|}} + {{#if externalSource}} + {{#if (has-block)}} + {{yield + (component 'consul-external-source' item=item _externalSource=externalSource) + }} + {{else}} + + {{#if (eq externalSource 'aws')}} + Synced from {{uppercase externalSource}} + {{else}} + Synced from {{capitalize externalSource}} + {{/if}} + + {{/if}} + {{/if}} +{{/let}} diff --git a/ui-v2/app/components/consul-external-source/index.js b/ui-v2/app/components/consul-external-source/index.js new file mode 100644 index 0000000000..4798652642 --- /dev/null +++ b/ui-v2/app/components/consul-external-source/index.js @@ -0,0 +1,5 @@ +import Component from '@ember/component'; + +export default Component.extend({ + tagName: '', +}); diff --git a/ui-v2/app/components/consul-service-list/index.hbs b/ui-v2/app/components/consul-service-list/index.hbs index 3781b18cb8..426a461a96 100644 --- a/ui-v2/app/components/consul-service-list/index.hbs +++ b/ui-v2/app/components/consul-service-list/index.hbs @@ -6,7 +6,6 @@ {{item.Name}} - {{yield}} diff --git a/ui-v2/app/styles/base/icons/base-variables.scss b/ui-v2/app/styles/base/icons/base-variables.scss index 39ec2fb8ac..4fe842f294 100644 --- a/ui-v2/app/styles/base/icons/base-variables.scss +++ b/ui-v2/app/styles/base/icons/base-variables.scss @@ -1,6 +1,6 @@ $alert-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); $alert-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$alert-triangle-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +$alert-triangle-color-svg: url('data:image/svg+xml;charset=UTF-8,'); $alert-triangle-svg: url('data:image/svg+xml;charset=UTF-8,'); $arrow-down-svg: url('data:image/svg+xml;charset=UTF-8,'); $arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,'); @@ -16,12 +16,12 @@ $calendar-svg: url('data:image/svg+xml;charset=UTF-8,'); $cancel-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); $cancel-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); -$cancel-square-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +$cancel-square-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,'); $cancel-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); $cancel-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); $caret-down-svg: url('data:image/svg+xml;charset=UTF-8,'); $caret-up-svg: url('data:image/svg+xml;charset=UTF-8,'); -$check-circle-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +$check-circle-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,'); $check-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); $check-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); $check-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); @@ -153,7 +153,7 @@ $sub-right-svg: url('data:image/svg+xml;charset=UTF-8,'); $swap-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,'); $swap-vertical-svg: url('data:image/svg+xml;charset=UTF-8,'); -$tag-svg: url('data:image/svg+xml;charset=UTF-8,'); +$tag-svg: url('data:image/svg+xml;charset=UTF-8,'); $terraform-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); $trash-svg: url('data:image/svg+xml;charset=UTF-8,'); $tune-svg: url('data:image/svg+xml;charset=UTF-8,'); diff --git a/ui-v2/app/styles/components/composite-row/layout.scss b/ui-v2/app/styles/components/composite-row/layout.scss index 760ef739a9..a1c52b0046 100644 --- a/ui-v2/app/styles/components/composite-row/layout.scss +++ b/ui-v2/app/styles/components/composite-row/layout.scss @@ -4,7 +4,6 @@ padding: 12px; padding-right: 0; border: 1px solid; - border-bottom: 0; } %composite-row-intent { border: 1px solid; diff --git a/ui-v2/app/styles/components/composite-row/skin.scss b/ui-v2/app/styles/components/composite-row/skin.scss index 3759364a20..b262f8cd7c 100644 --- a/ui-v2/app/styles/components/composite-row/skin.scss +++ b/ui-v2/app/styles/components/composite-row/skin.scss @@ -3,6 +3,7 @@ } %composite-row a { border-top-color: $gray-200; + border-bottom-color: $gray-200; border-right-color: transparent; border-left-color: transparent; } diff --git a/ui-v2/app/styles/components/consul-external-source.scss b/ui-v2/app/styles/components/consul-external-source.scss new file mode 100644 index 0000000000..3c8147a832 --- /dev/null +++ b/ui-v2/app/styles/components/consul-external-source.scss @@ -0,0 +1,33 @@ +.consul-external-source { + background-color: $gray-100; + padding: 0 8px; + height: 16px; + line-height: 12px; + margin-top: 3px; + border-radius: $decor-radius-100; +} +.consul-external-source > span { + position: relative; + top: -1px; +} +.consul-external-source::before { + font-size: 0.7em; + margin-right: 2px; + position: relative; + top: 2px; +} +.source-kubernetes::before { + @extend %with-kubernetes-logo-color-icon, %as-pseudo; +} +.source-terraform::before { + @extend %with-terraform-logo-color-icon, %as-pseudo; +} +.source-nomad::before { + @extend %with-nomad-logo-color-icon, %as-pseudo; +} +.source-consul::before { + @extend %with-consul-logo-color-icon, %as-pseudo; +} +.source-aws::before { + @extend %with-logo-aws-color-icon, %as-pseudo; +} diff --git a/ui-v2/app/styles/components/consul-service-list/layout.scss b/ui-v2/app/styles/components/consul-service-list/layout.scss index 3484961ca9..6b617ceb7d 100644 --- a/ui-v2/app/styles/components/consul-service-list/layout.scss +++ b/ui-v2/app/styles/components/consul-service-list/layout.scss @@ -1,12 +1,7 @@ -%consul-service-list { - // Used for every DOM-Recycle scroll pane - // TODO: Refactor to have all this DOM-Recycle styling in one place - overflow-x: hidden !important; -} %consul-service-row > a > span:first-child { margin-right: 4px; - width: 18px; - height: 18px; + width: 16px; + height: 16px; } %consul-service-row > a > span:nth-child(3) { margin-left: 4px; diff --git a/ui-v2/app/styles/components/consul-service-list/skin.scss b/ui-v2/app/styles/components/consul-service-list/skin.scss index e2b499d5c9..bec1796c48 100644 --- a/ui-v2/app/styles/components/consul-service-list/skin.scss +++ b/ui-v2/app/styles/components/consul-service-list/skin.scss @@ -6,38 +6,25 @@ %consul-service-row > a > span:nth-child(3) { @extend %as-pseudo; } + +// Health Checks %consul-service-row .empty { - @extend %with-minus-square-fill-color-mask; + @extend %with-minus-square-fill-mask; background-color: #7c8797; } -%consul-service-row .kubernetes { - @extend %with-kubernetes-logo-color-icon; -} -%consul-service-row .terraform { - @extend %with-terraform-logo-color-icon; -} -%consul-service-row .nomad { - @extend %with-nomad-logo-color-icon; -} -%consul-service-row .consul { - @extend %with-consul-logo-color-icon; -} -%consul-service-row .aws { - @extend %with-logo-aws-color-icon; -} %consul-service-row .passing { - @extend %with-check-circle-fill-color-mask; + @extend %with-check-circle-fill-mask; background-color: $green-500; } %consul-service-row .warning { - @extend %with-alert-triangle-color-mask; + @extend %with-alert-triangle-mask; background-color: $orange-500; } %consul-service-row .critical { - @extend %with-cancel-square-fill-color-mask; + @extend %with-cancel-square-fill-mask; background-color: $red-500; } %consul-service-row .proxy::before { - @extend %with-swap-horizontal-mask, %as-pseudo; + @extend %with-git-commit-mask, %as-pseudo; background-color: $gray-500; } diff --git a/ui-v2/app/styles/components/index.scss b/ui-v2/app/styles/components/index.scss index 2c39e143d6..9338c1f7fb 100644 --- a/ui-v2/app/styles/components/index.scss +++ b/ui-v2/app/styles/components/index.scss @@ -28,7 +28,7 @@ @import './discovery-chain'; @import './consul-intention-list'; @import './empty-state'; - +@import './consul-external-source'; @import './tabular-details'; @import './tabular-collection'; @import './list-collection'; diff --git a/ui-v2/app/styles/components/list-collection.scss b/ui-v2/app/styles/components/list-collection.scss index dbe2063d19..a91557d061 100644 --- a/ui-v2/app/styles/components/list-collection.scss +++ b/ui-v2/app/styles/components/list-collection.scss @@ -2,3 +2,6 @@ height: 500px; position: relative; } +.list-collection > ul { + overflow-x: hidden !important; +} diff --git a/ui-v2/app/styles/components/tag-list/layout.scss b/ui-v2/app/styles/components/tag-list/layout.scss index 4b8a342ff2..74cc4bc2a8 100644 --- a/ui-v2/app/styles/components/tag-list/layout.scss +++ b/ui-v2/app/styles/components/tag-list/layout.scss @@ -7,7 +7,6 @@ // only add padding to dl's in edit pages %tag-list::before { @extend %with-tag-mask, %as-pseudo; - transform: rotate(-45deg); margin-right: 4px; } %tag-list dd { diff --git a/ui-v2/app/templates/dc/services/index.hbs b/ui-v2/app/templates/dc/services/index.hbs index 1a30391a96..1df6c9ba5a 100644 --- a/ui-v2/app/templates/dc/services/index.hbs +++ b/ui-v2/app/templates/dc/services/index.hbs @@ -17,6 +17,11 @@