Skip to content

Commit

Permalink
ui: Redesign - Create ConsulExternalSource (#7632)
Browse files Browse the repository at this point in the history
* Create ConsulExternalSource with test and styling

* Implement ConsulExternalSource to Service list page

* Update icons for redesign

* Refactor ListCollection and CompositeRow styling
  • Loading branch information
kaxcode authored and John Cowen committed Apr 30, 2020
1 parent 3415206 commit 6dc636a
Show file tree
Hide file tree
Showing 16 changed files with 110 additions and 36 deletions.
17 changes: 17 additions & 0 deletions ui-v2/app/components/consul-external-source/index.hbs
Original file line number Diff line number Diff line change
@@ -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}}
5 changes: 5 additions & 0 deletions ui-v2/app/components/consul-external-source/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import Component from '@ember/component';

export default Component.extend({
tagName: '',
});
1 change: 0 additions & 1 deletion ui-v2/app/components/consul-service-list/index.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions ui-v2/app/styles/base/icons/base-variables.scss
Original file line number Diff line number Diff line change
@@ -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>');
Expand All @@ -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>');
Expand Down Expand Up @@ -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>');
Expand Down
1 change: 0 additions & 1 deletion ui-v2/app/styles/components/composite-row/layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
padding: 12px;
padding-right: 0;
border: 1px solid;
border-bottom: 0;
}
%composite-row-intent {
border: 1px solid;
Expand Down
1 change: 1 addition & 0 deletions ui-v2/app/styles/components/composite-row/skin.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
33 changes: 33 additions & 0 deletions ui-v2/app/styles/components/consul-external-source.scss
Original file line number Diff line number Diff line change
@@ -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;
}
9 changes: 2 additions & 7 deletions ui-v2/app/styles/components/consul-service-list/layout.scss
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
27 changes: 7 additions & 20 deletions ui-v2/app/styles/components/consul-service-list/skin.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
2 changes: 1 addition & 1 deletion ui-v2/app/styles/components/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
3 changes: 3 additions & 0 deletions ui-v2/app/styles/components/list-collection.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,6 @@
height: 500px;
position: relative;
}
.list-collection > ul {
overflow-x: hidden !important;
}
1 change: 0 additions & 1 deletion ui-v2/app/styles/components/tag-list/layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
5 changes: 5 additions & 0 deletions ui-v2/app/templates/dc/services/index.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion ui-v2/ember-cli-build.js
Original file line number Diff line number Diff line change
Expand Up @@ -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']
Expand Down
5 changes: 5 additions & 0 deletions ui-v2/tests/acceptance/dc/services/index.feature
Original file line number Diff line number Diff line change
Expand Up @@ -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
---
Expand All @@ -34,5 +38,6 @@ Feature: dc / services / index: List Services
- nomad
- terraform
- kubernetes
- aws
---

26 changes: 26 additions & 0 deletions ui-v2/tests/integration/components/consul-external-source-test.js
Original file line number Diff line number Diff line change
@@ -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');
});
});

0 comments on commit 6dc636a

Please sign in to comment.