diff --git a/ui-v2/app/helpers/css-var.js b/ui-v2/app/helpers/css-var.js deleted file mode 100644 index 480abba38f..0000000000 --- a/ui-v2/app/helpers/css-var.js +++ /dev/null @@ -1,19 +0,0 @@ -import { helper } from '@ember/component/helper'; -// TODO: Look at ember-inline-svg -const cssVars = { - '--decor-border-100': '1px solid', - '--decor-border-200': '2px solid', - '--decor-radius-300': '3px', - '--white': '#FFF', - '--gray-500': '#6f7682', - '--kubernetes-color-svg': `url('data:image/svg+xml;charset=UTF-8,')`, - '--terraform-color-svg': `url('data:image/svg+xml;charset=UTF-8,')`, - '--nomad-color-svg': `url('data:image/svg+xml;charset=UTF-8,')`, - '--consul-color-svg': `url('data:image/svg+xml;charset=UTF-8,')`, - '--aws-color-svg': `url('data:image/svg+xml;charset=UTF-8,')`, -}; -export function cssVar(params, hash) { - return typeof cssVars[params[0]] !== 'undefined' ? cssVars[params[0]] : params[1]; -} - -export default helper(cssVar); diff --git a/ui-v2/app/helpers/service/external-source.js b/ui-v2/app/helpers/service/external-source.js index 32cc4f3dd0..44d8107c88 100644 --- a/ui-v2/app/helpers/service/external-source.js +++ b/ui-v2/app/helpers/service/external-source.js @@ -7,7 +7,7 @@ export function serviceExternalSource(params, hash) { source = get(params[0], 'Meta.external-source'); } const prefix = typeof hash.prefix === 'undefined' ? '' : hash.prefix; - if (source) { + if (source && ['kubernetes', 'terraform', 'nomad', 'consul', 'aws'].includes(source)) { return `${prefix}${source}`; } return; diff --git a/ui-v2/app/styles/base/icons/base-variables.scss b/ui-v2/app/styles/base/icons/base-variables.scss index 400fefb7e9..f4666044f7 100644 --- a/ui-v2/app/styles/base/icons/base-variables.scss +++ b/ui-v2/app/styles/base/icons/base-variables.scss @@ -7,6 +7,7 @@ $arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,'); $arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,'); $arrow-up-svg: url('data:image/svg+xml;charset=UTF-8,'); +$aws-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); $calendar-svg: url('data:image/svg+xml;charset=UTF-8,'); $cancel-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); $cancel-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); diff --git a/ui-v2/app/styles/components/app-view/skin.scss b/ui-v2/app/styles/components/app-view/skin.scss index 511d08cf13..e8ba60393a 100644 --- a/ui-v2/app/styles/components/app-view/skin.scss +++ b/ui-v2/app/styles/components/app-view/skin.scss @@ -4,6 +4,12 @@ background-size: contain; width: 18px; height: 18px; + + --kubernetes-icon: #{$kubernetes-logo-color-svg}; + --terraform-icon: #{$terraform-logo-color-svg}; + --nomad-icon: #{$nomad-logo-color-svg}; + --consul-icon: #{$consul-logo-color-svg}; + --aws-icon: #{$aws-logo-color-svg}; } %app-view h2, %app-view fieldset { diff --git a/ui-v2/app/styles/variables/index.scss b/ui-v2/app/styles/variables/index.scss index a06fe64e82..eb90ae130c 100644 --- a/ui-v2/app/styles/variables/index.scss +++ b/ui-v2/app/styles/variables/index.scss @@ -1,4 +1,15 @@ @import './custom-query'; + +// TODO: Setup only the CSS props we actually need here +// potentially see if our compiled can automatically remove +// unused CSS props +:root { + --white: #{$white}; + --decor-border-100: #{$decor-border-100}; + --decor-radius-300: #{$decor-radius-300}; + --gray-500: #{$gray-500}; +} + $gray: $gray-200; $gray-025: #fafbfc; diff --git a/ui-v2/app/templates/components/discovery-chain.hbs b/ui-v2/app/templates/components/discovery-chain.hbs index 9a8f4f3597..4d4682b46b 100644 --- a/ui-v2/app/templates/components/discovery-chain.hbs +++ b/ui-v2/app/templates/components/discovery-chain.hbs @@ -4,10 +4,10 @@ {{selected.nodes}} { opacity: 1 !important; - background-color: {{css-var '--white'}}; - border: {{css-var '--decor-border-100'}}; - border-radius: {{css-var '--decor-radius-300'}}; - border-color: {{css-var '--gray-500'}}; + background-color: var(--white); + border: var(--decor-border-100); + border-radius: var(--decor-radius-300); + border-color: var(--gray-500); box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); } {{/if}} diff --git a/ui-v2/app/templates/dc/nodes/-services.hbs b/ui-v2/app/templates/dc/nodes/-services.hbs index f53bb7fc97..11d67c765a 100644 --- a/ui-v2/app/templates/dc/nodes/-services.hbs +++ b/ui-v2/app/templates/dc/nodes/-services.hbs @@ -18,7 +18,13 @@ {{#block-slot name='row'}} - + {{#let (service/external-source item) as |externalSource| }} + {{#if externalSource }} + + {{else}} + + {{/if}} + {{/let}} {{item.Service}}{{#if (not-eq item.ID item.Service) }} ({{item.ID}}){{/if}} diff --git a/ui-v2/app/templates/dc/services/-instances.hbs b/ui-v2/app/templates/dc/services/-instances.hbs index d0ca30a9a3..83faba5570 100644 --- a/ui-v2/app/templates/dc/services/-instances.hbs +++ b/ui-v2/app/templates/dc/services/-instances.hbs @@ -18,10 +18,16 @@ Service Checks {{/block-slot}} {{#block-slot name='row'}} - - - - {{ or item.Service.ID item.Service.Service }} + + + {{#let (service/external-source item.Service) as |externalSource| }} + {{#if externalSource }} + + {{else}} + + {{/if}} + {{/let}} + {{or item.Service.ID item.Service.Service}} diff --git a/ui-v2/app/templates/dc/services/index.hbs b/ui-v2/app/templates/dc/services/index.hbs index 1484086167..348b6cd00d 100644 --- a/ui-v2/app/templates/dc/services/index.hbs +++ b/ui-v2/app/templates/dc/services/index.hbs @@ -35,7 +35,13 @@ {{#block-slot name='row'}} - + {{#let (service/external-source item) as |externalSource| }} + {{#if externalSource }} + + {{else}} + + {{/if}} + {{/let}} {{item.Name}} diff --git a/ui-v2/app/templates/dc/services/instance.hbs b/ui-v2/app/templates/dc/services/instance.hbs index aad4f7b2cd..f80daa8391 100644 --- a/ui-v2/app/templates/dc/services/instance.hbs +++ b/ui-v2/app/templates/dc/services/instance.hbs @@ -13,13 +13,11 @@ {{#block-slot name='header'}}

{{ item.ID }} -{{#with (service/external-source item) as |externalSource| }} - {{#with (css-var (concat '--' externalSource '-color-svg') 'none') as |bg| }} - {{#if (not-eq bg 'none') }} - Registered via {{externalSource}} +{{#let (service/external-source item) as |externalSource| }} + {{#if externalSource }} + Registered via {{externalSource}} {{/if}} - {{/with}} -{{/with}} +{{/let}} {{#if (eq item.Kind 'connect-proxy')}} Proxy {{else if (eq item.Kind 'mesh-gateway')}} diff --git a/ui-v2/app/templates/dc/services/show.hbs b/ui-v2/app/templates/dc/services/show.hbs index 846c56f783..f1b1324e40 100644 --- a/ui-v2/app/templates/dc/services/show.hbs +++ b/ui-v2/app/templates/dc/services/show.hbs @@ -11,13 +11,11 @@ {{#block-slot name='header'}}

{{item.Service.Service}} -{{#with (service/external-source item.Service) as |externalSource|}} -{{#with (css-var (concat '--' externalSource '-color-svg') 'none') as |bg|}} - {{#if (not-eq bg 'none')}} - Registered via {{externalSource}} - {{/if}} -{{/with}} -{{/with}} +{{#let (service/external-source item.Service) as |externalSource| }} + {{#if externalSource }} + Registered via {{externalSource}} + {{/if}} +{{/let}} {{#if (eq item.Service.Kind 'connect-proxy')}} Proxy {{else if (eq item.Service.Kind 'mesh-gateway')}} diff --git a/ui-v2/tests/integration/helpers/css-var-test.js b/ui-v2/tests/integration/helpers/css-var-test.js deleted file mode 100644 index 12b4f1f91e..0000000000 --- a/ui-v2/tests/integration/helpers/css-var-test.js +++ /dev/null @@ -1,24 +0,0 @@ -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render } from '@ember/test-helpers'; -import hbs from 'htmlbars-inline-precompile'; - -module('helper:css-var', function(hooks) { - setupRenderingTest(hooks); - - // Replace this with your real tests. - test("it renders nothing if the variable doesn't exist", async function(assert) { - this.set('inputValue', '1234'); - - await render(hbs`{{css-var inputValue}}`); - - assert.dom('*').hasText(''); - }); - test("it renders a default if the variable doesn't exist", async function(assert) { - this.set('inputValue', '1234'); - - await render(hbs`{{css-var inputValue 'none'}}`); - - assert.dom('*').hasText('none'); - }); -});