diff --git a/ui-v2/app/controllers/dc/services/index.js b/ui-v2/app/controllers/dc/services/index.js index 6da28085fc9b..912a5316b34e 100644 --- a/ui-v2/app/controllers/dc/services/index.js +++ b/ui-v2/app/controllers/dc/services/index.js @@ -51,7 +51,12 @@ export default Controller.extend(WithEventSource, WithSearching, WithHealthFilte return widthDeclaration(get(this, 'maxWidth')); }), remainingWidth: computed('maxWidth', function() { - return htmlSafe(`width: calc(50% - ${Math.round(get(this, 'maxWidth') / 2)}px)`); + // maxWidth is the maximum width of the healthchecks column + // there are currently 2 other columns so divide it by 2 and + // take that off 50% (100% / number of fluid columns) + // also we added a Type column which we've currently fixed to 100px + // so again divide that by 2 and take it off each fluid column + return htmlSafe(`width: calc(50% - 50px - ${Math.round(get(this, 'maxWidth') / 2)}px)`); }), maxPassing: computed('filtered', function() { return max(get(this, 'filtered'), 'ChecksPassing'); diff --git a/ui-v2/app/styles/components/app-view.scss b/ui-v2/app/styles/components/app-view.scss index 2ddc65d217d4..11f634561a7e 100644 --- a/ui-v2/app/styles/components/app-view.scss +++ b/ui-v2/app/styles/components/app-view.scss @@ -1,6 +1,7 @@ @import './app-view/index'; @import './filter-bar/index'; @import './buttons/index'; +@import './type-icon/index'; main { @extend %app-view; } @@ -15,9 +16,13 @@ main { margin-top: 5px; } } -%app-view h1 span { +// TODO: This should be its own component +%app-view h1 span[data-tooltip] { @extend %with-external-source-icon; } +%app-view h1 span.kind-proxy { + @extend %type-icon, %with-proxy; +} %app-view h1 em { color: $gray-600; } diff --git a/ui-v2/app/styles/components/icons/index.scss b/ui-v2/app/styles/components/icons/index.scss index 4c61d11f3cf6..13e97516725c 100644 --- a/ui-v2/app/styles/components/icons/index.scss +++ b/ui-v2/app/styles/components/icons/index.scss @@ -54,6 +54,7 @@ %with-folder { text-indent: 30px; } +%with-proxy, %with-hashicorp, %with-folder, %with-chevron, @@ -79,6 +80,15 @@ margin-top: -10px; background-color: $color-transparent; } +%with-proxy::before { + @extend %pseudo-icon; + background-image: url('data:image/svg+xml;charset=UTF-8,'); + width: 18px; + height: 18px; + left: 3px; + margin-top: -9px; + background-color: $color-transparent; +} %with-clipboard { padding-left: 38px !important; } diff --git a/ui-v2/app/styles/components/table.scss b/ui-v2/app/styles/components/table.scss index 749774ad1a08..1a98bbc9983a 100644 --- a/ui-v2/app/styles/components/table.scss +++ b/ui-v2/app/styles/components/table.scss @@ -1,5 +1,6 @@ @import './icons/index'; @import './table/index'; +@import './type-icon/index'; html.template-service.template-list td:first-child a span, html.template-node.template-show #services td:first-child a span, @@ -19,6 +20,13 @@ html.template-service.template-list main th:first-child { td.folder { @extend %with-folder; } +td .kind-proxy { + @extend %type-icon, %with-proxy; + text-indent: -9000px !important; + width: 24px; + margin-top: -8px; + transform: scale(0.7); +} table:not(.sessions) tr { cursor: pointer; } diff --git a/ui-v2/app/styles/components/table/layout.scss b/ui-v2/app/styles/components/table/layout.scss index 2706e64dc5aa..6cf8ef1ccd2f 100644 --- a/ui-v2/app/styles/components/table/layout.scss +++ b/ui-v2/app/styles/components/table/layout.scss @@ -65,6 +65,9 @@ td:not(.actions) a { html.template-policy.template-list tr > :nth-child(2) { display: none; } + html.template-service.template-list tr > :nth-child(2) { + display: none; + } } @media #{$--lt-wide-table} { html.template-intention.template-list tr > :nth-last-child(2) { diff --git a/ui-v2/app/styles/components/tabular-collection.scss b/ui-v2/app/styles/components/tabular-collection.scss index d26b72e656c3..c90adf3f9b81 100644 --- a/ui-v2/app/styles/components/tabular-collection.scss +++ b/ui-v2/app/styles/components/tabular-collection.scss @@ -174,6 +174,9 @@ html.template-node.template-show main table.sessions tr { // (100% / 2) - (160px / 2) // width: calc(50% - 160px); // } +%services-row > *:nth-child(2) { + width: 100px; +} %services-row > * { width: auto; } diff --git a/ui-v2/app/styles/components/type-icon/index.scss b/ui-v2/app/styles/components/type-icon/index.scss new file mode 100644 index 000000000000..bc182521964a --- /dev/null +++ b/ui-v2/app/styles/components/type-icon/index.scss @@ -0,0 +1,2 @@ +@import './skin'; +@import './layout'; diff --git a/ui-v2/app/styles/components/type-icon/layout.scss b/ui-v2/app/styles/components/type-icon/layout.scss new file mode 100644 index 000000000000..a88b65d79e98 --- /dev/null +++ b/ui-v2/app/styles/components/type-icon/layout.scss @@ -0,0 +1,5 @@ +%type-icon { + display: inline-block; + text-indent: 20px; + padding: 3px; +} diff --git a/ui-v2/app/styles/components/type-icon/skin.scss b/ui-v2/app/styles/components/type-icon/skin.scss new file mode 100644 index 000000000000..b6d0be112935 --- /dev/null +++ b/ui-v2/app/styles/components/type-icon/skin.scss @@ -0,0 +1,6 @@ +%type-icon { + border-radius: 4px; + + background: $gray-100; + color: $gray-400; +} diff --git a/ui-v2/app/styles/components/with-tooltip.scss b/ui-v2/app/styles/components/with-tooltip.scss index df1a62d51a87..c4e536ff12fe 100644 --- a/ui-v2/app/styles/components/with-tooltip.scss +++ b/ui-v2/app/styles/components/with-tooltip.scss @@ -1,4 +1,4 @@ @import './with-tooltip/index'; -%app-view h1 span { +%app-view h1 span[data-tooltip] { @extend %with-pseudo-tooltip; } diff --git a/ui-v2/app/styles/components/with-tooltip/index.scss b/ui-v2/app/styles/components/with-tooltip/index.scss index 3ee08c67cbb9..bca4c98e29d4 100644 --- a/ui-v2/app/styles/components/with-tooltip/index.scss +++ b/ui-v2/app/styles/components/with-tooltip/index.scss @@ -12,7 +12,7 @@ %with-pseudo-tooltip { text-indent: -9000px; font-size: 0; - top: -9px; + top: -7px; } %with-pseudo-tooltip::after, diff --git a/ui-v2/app/styles/core/typography.scss b/ui-v2/app/styles/core/typography.scss index 5f01d4be8e88..298874a03533 100644 --- a/ui-v2/app/styles/core/typography.scss +++ b/ui-v2/app/styles/core/typography.scss @@ -54,7 +54,8 @@ th, %breadcrumbs li > *, %action-group-action, %tab-nav, -%tooltip-bubble { +%tooltip-bubble, +%type-icon { font-weight: $typo-weight-medium; } main label a[rel*='help'], @@ -96,7 +97,8 @@ caption, %form-element > span, %tooltip-bubble, %healthchecked-resource strong, -%footer { +%footer, +%type-icon { font-size: $typo-size-700; } %toggle label span { diff --git a/ui-v2/app/templates/dc/services/index.hbs b/ui-v2/app/templates/dc/services/index.hbs index 16f287eb4d3b..25885f12e518 100644 --- a/ui-v2/app/templates/dc/services/index.hbs +++ b/ui-v2/app/templates/dc/services/index.hbs @@ -24,6 +24,7 @@ }} {{#block-slot 'header'}} Service + Type Health ChecksThe number of health checks for the service on all nodes Tags {{/block-slot}} @@ -34,6 +35,13 @@ {{item.Name}} + +{{#if (eq item.Kind 'connect-proxy')}} + Proxy +{{else}} +   +{{/if}} + {{healthcheck-info passing=item.ChecksPassing warning=item.ChecksWarning critical=item.ChecksCritical diff --git a/ui-v2/app/templates/dc/services/instance.hbs b/ui-v2/app/templates/dc/services/instance.hbs index 9b3a286ba4e0..76a0b95d266e 100644 --- a/ui-v2/app/templates/dc/services/instance.hbs +++ b/ui-v2/app/templates/dc/services/instance.hbs @@ -16,6 +16,9 @@ {{/if}} {{/with}} {{/with}} +{{#if (eq item.Kind 'connect-proxy')}} + Proxy +{{/if}}
Service Name
diff --git a/ui-v2/app/templates/dc/services/show.hbs b/ui-v2/app/templates/dc/services/show.hbs index bd693d9b854b..07f19a069065 100644 --- a/ui-v2/app/templates/dc/services/show.hbs +++ b/ui-v2/app/templates/dc/services/show.hbs @@ -14,6 +14,9 @@ {{/if}} {{/with}} {{/with}} +{{#if (eq item.Service.Kind 'connect-proxy')}} + Proxy +{{/if}} {{tab-nav