From e615d9f7ebde0d269b0f6024fc638d3bf2aec91c Mon Sep 17 00:00:00 2001 From: John Cowen Date: Fri, 22 Mar 2019 17:01:10 +0000 Subject: [PATCH] ui: Add proxy icons to proxy services and instances where appropriate (#5463) --- ui-v2/app/controllers/dc/services/index.js | 7 ++++++- ui-v2/app/styles/components/app-view.scss | 7 ++++++- ui-v2/app/styles/components/icons/index.scss | 10 ++++++++++ ui-v2/app/styles/components/table.scss | 8 ++++++++ ui-v2/app/styles/components/table/layout.scss | 3 +++ ui-v2/app/styles/components/tabular-collection.scss | 3 +++ ui-v2/app/styles/components/type-icon/index.scss | 2 ++ ui-v2/app/styles/components/type-icon/layout.scss | 5 +++++ ui-v2/app/styles/components/type-icon/skin.scss | 6 ++++++ ui-v2/app/styles/components/with-tooltip.scss | 2 +- ui-v2/app/styles/components/with-tooltip/index.scss | 2 +- ui-v2/app/styles/core/typography.scss | 6 ++++-- ui-v2/app/templates/dc/services/index.hbs | 8 ++++++++ ui-v2/app/templates/dc/services/instance.hbs | 3 +++ ui-v2/app/templates/dc/services/show.hbs | 3 +++ 15 files changed, 69 insertions(+), 6 deletions(-) create mode 100644 ui-v2/app/styles/components/type-icon/index.scss create mode 100644 ui-v2/app/styles/components/type-icon/layout.scss create mode 100644 ui-v2/app/styles/components/type-icon/skin.scss diff --git a/ui-v2/app/controllers/dc/services/index.js b/ui-v2/app/controllers/dc/services/index.js index 6da28085f..912a5316b 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 2ddc65d21..11f634561 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 4c61d11f3..13e975167 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 749774ad1..1a98bbc99 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 2706e64dc..6cf8ef1cc 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 d26b72e65..c90adf3f9 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 000000000..bc1825219 --- /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 000000000..a88b65d79 --- /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 000000000..b6d0be112 --- /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 df1a62d51..c4e536ff1 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 3ee08c67c..bca4c98e2 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 5f01d4be8..298874a03 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 16f287eb4..25885f12e 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 9b3a286ba..76a0b95d2 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 bd693d9b8..07f19a069 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