ui: Redesign - Create ConsulExternalSource (#7632)

* Create ConsulExternalSource with test and styling * Implement ConsulExternalSource to Service list page * Update icons for redesign * Refactor ListCollection and CompositeRow styling
2020-04-14 16:07:09 -04:00 · 2020-04-14 16:07:09 -04:00 · b43ecb8fa7
parent d0c4312923
commit b43ecb8fa7
16 changed files with 110 additions and 36 deletions
--- a/ui-v2/app/components/consul-external-source/index.hbs
+++ 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}}
+      <span data-test-external-source={{externalSource}} class="consul-external-source source-{{externalSource}}">
+        {{#if (eq externalSource 'aws')}}
+          <span>Synced from {{uppercase externalSource}}</span>
+        {{else}}
+          <span>Synced from {{capitalize externalSource}}</span>
+        {{/if}}
+      </span>
+    {{/if}}
+  {{/if}}
+{{/let}}
--- a/ui-v2/app/components/consul-external-source/index.js
+++ b/ui-v2/app/components/consul-external-source/index.js
@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  tagName: '',
+});
--- a/ui-v2/app/components/consul-service-list/index.hbs
+++ b/ui-v2/app/components/consul-service-list/index.hbs
@ -6,7 +6,6 @@
    <span>
      {{item.Name}}
    </span>
-    <span data-test-external-source="{{service/external-source item}}" class={{service/external-source item}}></span>
    <YieldSlot @name="metadata" @params={{block-params item}}>
      {{yield}}
    </YieldSlot>
--- 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,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" fill="%23000"/></svg>');
 $alert-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" fill="%23000"/></svg>');
-$alert-triangle-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="%23fa8f37"/></svg>');
+$alert-triangle-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.5311 21C21.0718 21 22.0339 19.3313 21.262 17.9979L13.7308 4.98966C12.9605 3.65909 11.0395 3.65909 10.2691 4.98966L2.73804 17.9979C1.96611 19.3313 2.92822 21 4.46889 21H19.5311ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z" fill="%23fa8f37"/></svg>');
 $alert-triangle-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19.531 21c1.54 0 2.503-1.669 1.731-3.002L13.731 4.99c-.77-1.33-2.691-1.33-3.462 0L2.738 17.998C1.966 19.33 2.928 21 4.468 21h15.063zM13 18h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="%23000"/></svg>');
 $arrow-down-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 3v14.17l-3.59-3.58L6 15l6 6 6-6-1.41-1.41L13 17.17V3h-2z" fill="%23000"/></svg>');
 $arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M21 11H6.83l3.58-3.59L9 6l-6 6 6 6 1.41-1.41L6.83 13H21v-2z" fill="%23000"/></svg>');
@ -16,12 +16,12 @@ $calendar-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fi
 $cancel-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" fill="%23000"/></svg>');
 $cancel-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.266 8.5L12 10.766 9.734 8.5 8.5 9.734 10.766 12 8.5 14.266 9.734 15.5 12 13.234l2.266 2.266 1.234-1.234L13.234 12 15.5 9.734 14.266 8.5zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zM4 12c0-4.41 3.59-8 8-8s8 3.59 8 8-3.59 8-8 8-8-3.59-8-8z" fill="%23000"/></svg>');
 $cancel-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" fill="%23000"/></svg>');
-$cancel-square-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 3c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h14zm-2 12.59L13.41 12 17 8.41 15.59 7 12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59z" fill="%23c73445"/></svg>');
+$cancel-square-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 3H19C20.1 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3ZM15.59 17L17 15.59L13.41 12L17 8.41L15.59 7L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17Z" fill="%23c73445"/></svg>');
 $cancel-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2zm10.59 14L17 15.59 13.41 12 17 8.41 15.59 7 12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17z" fill="%23000"/></svg>');
 $cancel-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 5v14H5V5h14zM5 3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5zm9.266 5.5L12 10.766 9.734 8.5 8.5 9.734 10.766 12 8.5 14.266 9.734 15.5 12 13.234l2.266 2.266 1.234-1.234L13.234 12 15.5 9.734 14.266 8.5z" fill="%23000"/></svg>');
 $caret-down-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 10l5 5 5-5H7z" fill="%23000"/></svg>');
 $caret-up-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 14l5-5 5 5H7z" fill="%23000"/></svg>');
-$check-circle-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="%232eb039"/></svg>');
+$check-circle-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z" fill="%232eb039"/></svg>');
 $check-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="%23000"/></svg>');
 $check-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.41 3.59-8 8-8s8 3.59 8 8-3.59 8-8 8-8-3.59-8-8zm4.41-1.41L7 12l4 4 7-7-1.41-1.42L11 13.17l-2.59-2.58z" fill="%23000"/></svg>');
 $check-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="%23000"/></svg>');
@ -153,7 +153,7 @@ $sub-right-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" f
 $support-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2c5.52.006 9.994 4.48 10 10 0 5.523-4.477 10-10 10S2 17.523 2 12zm17.83-2.588a.208.208 0 0 0 .027-.19 8.376 8.376 0 0 0-5.079-5.079.209.209 0 0 0-.278.197v3.213c0 .074.04.142.102.18.68.416 1.251.988 1.667 1.667a.21.21 0 0 0 .179.1h3.213a.208.208 0 0 0 .17-.088zM12 15.333a3.333 3.333 0 1 1 0-6.666 3.333 3.333 0 0 1 0 6.666zM9.412 4.17a.21.21 0 0 0-.19-.027A8.376 8.376 0 0 0 4.14 9.227a.206.206 0 0 0 .026.19.21.21 0 0 0 .172.083h3.213a.21.21 0 0 0 .181-.102c.416-.68.988-1.25 1.667-1.666a.21.21 0 0 0 .1-.179V4.34a.21.21 0 0 0-.088-.17zM4.143 14.778a.207.207 0 0 1 .196-.278h3.213a.21.21 0 0 1 .179.1c.416.68.987 1.25 1.666 1.667a.21.21 0 0 1 .1.178v3.213a.208.208 0 0 1-.278.196 8.376 8.376 0 0 1-5.076-5.076zm10.446 5.054a.208.208 0 0 0 .19.026 8.376 8.376 0 0 0 5.072-5.077.208.208 0 0 0-.192-.277h-3.214a.21.21 0 0 0-.178.1A5.042 5.042 0 0 1 14.6 16.27a.209.209 0 0 0-.1.178v3.214c0 .067.033.13.088.17z" fill="%23000"/></svg>');
 $swap-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z" fill="%23000"/></svg>');
 $swap-vertical-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 17.01V10h-2v7.01h-3L15 21l4-3.99h-3zM9 3L5 6.99h3V14h2V6.99h3L9 3z" fill="%23000"/></svg>');
-$tag-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.0180508,1.53059144 C9.95215711,0.826186691 11.2210727,0.822856755 12.1586551,1.52234975 L17.5225102,5.52410888 C18.2146301,6.04047204 18.6243687,6.86710244 18.6243687,7.7470623 L18.6243687,17.2546969 C18.6243687,18.7708859 17.4304613,20 15.957702,20 L5.29103534,20 C3.818276,20 2.62436867,18.7708859 2.62436867,17.2546969 L2.62436867,7.74412605 C2.62436867,6.9274347 2.97732776,6.15640255 3.58187865,5.63682791 L3.71523922,5.52941433 L9.0180508,1.53059144 Z M4.97500563,7.08324321 C4.75460594,7.25178538 4.62436867,7.51991876 4.62436867,7.80513698 L4.62436867,17.1051579 C4.62436867,17.5993656 5.0081246,18 5.48151153,18 L15.7672258,18 C16.2406127,18 16.6243687,17.5993656 16.6243687,17.1051579 L16.6243687,7.80800823 C16.6243687,7.52118194 16.492667,7.2517386 16.2701999,7.08342805 L11.0979111,3.1702619 C10.7965453,2.94225948 10.3886795,2.94334489 10.0884311,3.17294831 L4.97500563,7.08324321 Z M10.4779221,10.732233 C11.8586339,10.732233 12.9779221,9.61294492 12.9779221,8.23223305 C12.9779221,6.85152117 11.8586339,5.73223305 10.4779221,5.73223305 C9.09721019,5.73223305 7.97792206,6.85152117 7.97792206,8.23223305 C7.97792206,9.61294492 9.09721019,10.732233 10.4779221,10.732233 Z" fill="%23000"/></svg>');
+$tag-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.304 3.195l10.253 10.253-8.031 8.03L3.273 11.227l1.029-7.002 7.002-1.029zM1.86 12.64a2 2 0 01-.564-1.704l1.028-7.003A2 2 0 014.01 2.245l7.003-1.029a2 2 0 011.705.565L22.97 12.034a2 2 0 010 2.828l-8.03 8.031a2 2 0 01-2.83 0L1.86 12.64zM8.5 10a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" fill="%23000"/></svg>');
 $terraform-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%235C4EE5" d="M5.51 3.15l4.886 2.821v5.644L5.509 8.792z"/><path fill="%234040B2" d="M10.931 5.971v5.644l4.888-2.823V3.15z"/><path fill="%235C4EE5" d="M.086 0v5.642l4.887 2.823V2.82zM5.51 15.053l4.886 2.823v-5.644l-4.887-2.82z"/></g></svg>');
 $trash-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M21 4v2H3V4h6l1-1h4l1 1h6zm-4 15V7h2v12c0 1.1-.9 2-2 2H7c-1.1 0-2-.9-2-2V7h2v12h10zm-8-2h2V7H9v10zm6 0h-2V7h2v10z" fill="%23000"/></svg>');
 $tune-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z" fill="%23000"/></svg>');
--- 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;
--- 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;
 }
--- a/ui-v2/app/styles/components/consul-external-source.scss
+++ 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;
+}
--- 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;
--- 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;
 }
--- 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';
--- 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;
+}
--- 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 {
--- a/ui-v2/app/templates/dc/services/index.hbs
+++ b/ui-v2/app/templates/dc/services/index.hbs
@ -17,6 +17,11 @@
            <ConsulServiceList @routeName="dc.services.show" @items={{filtered}}>
              <BlockSlot @name="metadata" as |item|>
                <ul>
+                  <ConsulExternalSource @item={{item}} as |ExternalSource|>
+                    <li>
+                      <ExternalSource />
+                    </li>
+                  </ConsulExternalSource>
                  <li>{{format-number item.InstanceCount}} {{pluralize item.InstanceCount 'Instance' without-count=true}}</li>
                  {{#if (get withProxies item.Name)}}<li class="proxy">connected with proxy</li>{{/if}}
                  <li><TagList @items={{item.Tags}}/></li>
--- a/ui-v2/ember-cli-build.js
+++ b/ui-v2/ember-cli-build.js
@ -20,7 +20,7 @@ module.exports = function(defaults) {
      includePolyfill: true
    },
    'ember-cli-string-helpers': {
-      only: ['capitalize', 'lowercase', 'truncate']
+      only: ['capitalize', 'lowercase', 'truncate', 'uppercase']
    },
    'ember-cli-math-helpers': {
      only: ['div']
--- a/ui-v2/tests/acceptance/dc/services/index.feature
+++ b/ui-v2/tests/acceptance/dc/services/index.feature
@ -20,6 +20,10 @@ Feature: dc / services / index: List Services
      Kind: consul
      ExternalSources:
        - kubernetes
+    - Name: Service 5
+      Kind: consul
+      ExternalSources:
+        - aws
    ---
    When I visit the services page for yaml
    ---
@ -34,5 +38,6 @@ Feature: dc / services / index: List Services
    - nomad
    - terraform
    - kubernetes
+    - aws
    ---

--- a/ui-v2/tests/integration/components/consul-external-source-test.js
+++ b/ui-v2/tests/integration/components/consul-external-source-test.js
@ -0,0 +1,26 @@
+import { module, skip } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | consul-external-source', function(hooks) {
+  setupRenderingTest(hooks);
+
+  skip('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<ConsulExternalSource />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <ConsulExternalSource>
+        template block text
+      </ConsulExternalSource>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});