Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

UI: Add proxy icons to proxy services and instances where appropriate #5463

Merged
merged 1 commit into from Mar 22, 2019
Merged

UI: Add proxy icons to proxy services and instances where appropriate #5463

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 6 additions & 1 deletion ui-v2/app/controllers/dc/services/index.js
View file
Open in desktop
Expand Up @@ -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');
Expand Down
7 changes: 6 additions & 1 deletion ui-v2/app/styles/components/app-view.scss
View file
Open in desktop
@@ -1,6 +1,7 @@
@import './app-view/index';
@import './filter-bar/index';
@import './buttons/index';
@import './type-icon/index';
main {
@extend %app-view;
}
Expand All @@ -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;
}
Expand Down
10 changes: 10 additions & 0 deletions ui-v2/app/styles/components/icons/index.scss
View file
Open in desktop
Expand Up @@ -54,6 +54,7 @@
%with-folder {
text-indent: 30px;
}
%with-proxy,
%with-hashicorp,
%with-folder,
%with-chevron,
Expand All @@ -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,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><path d="M2.242 7.138l6.963.774a1 1 0 0 1 .883.883l.774 6.963a1 1 0 0 1-1.104 1.104l-6.963-.774a1 1 0 0 1-.883-.883l-.774-6.963a1 1 0 0 1 1.104-1.104z" stroke="%23BAC1CC" fill="%23FAFBFC"/><path d="M5.242 4.138l6.963.774a1 1 0 0 1 .883.883l.774 6.963a1 1 0 0 1-1.104 1.104l-6.963-.774a1 1 0 0 1-.883-.883l-.774-6.963a1 1 0 0 1 1.104-1.104z" stroke="%238E96A3" fill="%238E96A3"/><path d="M8.242 1.138l6.963.774a1 1 0 0 1 .883.883l.774 6.963a1 1 0 0 1-1.104 1.104l-6.963-.774a1 1 0 0 1-.883-.883l-.774-6.963a1 1 0 0 1 1.104-1.104z" stroke="%23BAC1CC" fill="%23FAFBFC"/></g></svg>');
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works fine, but it's a little gnarly having to account for the # encoding whenever adding an svg. Other UIs use ember-inline-svg to help treat svgs like svgs. ember-svg-jar is also popular.

Granted these are slightly different, since they put the svg in the DOM, but that also makes it possible to style the svg dynamically.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Those are good options. If we were inlining SVGs into HTML I'd definitely use one of those, but given we're using inline CSS we can’t use them here.

width: 18px;
height: 18px;
left: 3px;
margin-top: -9px;
background-color: $color-transparent;
}
%with-clipboard {
padding-left: 38px !important;
}
Expand Down
8 changes: 8 additions & 0 deletions ui-v2/app/styles/components/table.scss
View file
Open in desktop
@@ -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,
Expand All @@ -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);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The scale here is a little odd. Is this because the SVG is too large? Why not set the width lower?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The scale means I can change the scale of the entire icon in one line, otherwise I'd have to change the width/heights of 2 things in 2 selectors, the gray background which is CSS and the icon itself which is pseudo content, plus the size of the border radius. That would probably be about 10 lines of code as opposed to 1. Plus scale does what it says on the tin, and just seemed easier. Is there any reason why not to use scale here?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think there's a reason not to aside from it being unexpected (with the expected thing being width/height) and maybe a "wtf" down the road if things don't line up and the transform: scale gets overlooked.

Not strong arguments and your reasoning is good, just thought I'd ask.

}
table:not(.sessions) tr {
cursor: pointer;
}
Expand Down
3 changes: 3 additions & 0 deletions ui-v2/app/styles/components/table/layout.scss
View file
Open in desktop
Expand Up @@ -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) {
Expand Down
3 changes: 3 additions & 0 deletions ui-v2/app/styles/components/tabular-collection.scss
View file
Open in desktop
Expand Up @@ -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;
}
Expand Down
2 changes: 2 additions & 0 deletions ui-v2/app/styles/components/type-icon/index.scss
View file
Open in desktop
@@ -0,0 +1,2 @@
@import './skin';
@import './layout';
5 changes: 5 additions & 0 deletions ui-v2/app/styles/components/type-icon/layout.scss
View file
Open in desktop
@@ -0,0 +1,5 @@
%type-icon {
display: inline-block;
text-indent: 20px;
padding: 3px;
}
6 changes: 6 additions & 0 deletions ui-v2/app/styles/components/type-icon/skin.scss
View file
Open in desktop
@@ -0,0 +1,6 @@
%type-icon {
border-radius: 4px;

background: $gray-100;
color: $gray-400;
}
2 changes: 1 addition & 1 deletion ui-v2/app/styles/components/with-tooltip.scss
View file
Open in desktop
@@ -1,4 +1,4 @@
@import './with-tooltip/index';
%app-view h1 span {
%app-view h1 span[data-tooltip] {
@extend %with-pseudo-tooltip;
}
2 changes: 1 addition & 1 deletion ui-v2/app/styles/components/with-tooltip/index.scss
View file
Open in desktop
Expand Up @@ -12,7 +12,7 @@
%with-pseudo-tooltip {
text-indent: -9000px;
font-size: 0;
top: -9px;
top: -7px;
}

%with-pseudo-tooltip::after,
Expand Down
6 changes: 4 additions & 2 deletions ui-v2/app/styles/core/typography.scss
View file
Open in desktop
Expand Up @@ -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'],
Expand Down Expand Up @@ -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 {
Expand Down
8 changes: 8 additions & 0 deletions ui-v2/app/templates/dc/services/index.hbs
View file
Open in desktop
Expand Up @@ -24,6 +24,7 @@
}}
{{#block-slot 'header'}}
<th style={{remainingWidth}}>Service</th>
<th>Type</th>
<th style={{totalWidth}}>Health Checks<span><em>The number of health checks for the service on all nodes</em></span></th>
<th style={{remainingWidth}}>Tags</th>
{{/block-slot}}
Expand All @@ -34,6 +35,13 @@
{{item.Name}}
</a>
</td>
<td>
{{#if (eq item.Kind 'connect-proxy')}}
<span class="kind-proxy">Proxy</span>
{{else}}
&nbsp;
{{/if}}
</td>
<td style={{totalWidth}}>
{{healthcheck-info
passing=item.ChecksPassing warning=item.ChecksWarning critical=item.ChecksCritical
Expand Down
3 changes: 3 additions & 0 deletions ui-v2/app/templates/dc/services/instance.hbs
View file
Open in desktop
Expand Up @@ -16,6 +16,9 @@
{{/if}}
{{/with}}
{{/with}}
{{#if (eq item.Kind 'connect-proxy')}}
<span class="kind-proxy">Proxy</span>
{{/if}}
</h1>
<dl>
<dt>Service Name</dt>
Expand Down
3 changes: 3 additions & 0 deletions ui-v2/app/templates/dc/services/show.hbs
View file
Open in desktop
Expand Up @@ -14,6 +14,9 @@
{{/if}}
{{/with}}
{{/with}}
{{#if (eq item.Service.Kind 'connect-proxy')}}
<span class="kind-proxy">Proxy</span>
{{/if}}
</h1>
<label for="toolbar-toggle"></label>
{{tab-nav
Expand Down