ui: Add proxy icons to proxy services and instances where appropriate (#5463)
This commit is contained in:
John Cowen
John Cowen
parent
b5b32c10c4
commit
e615d9f7eb
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,<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>');
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
left: 3px;
|
||||
margin-top: -9px;
|
||||
background-color: $color-transparent;
|
||||
}
|
||||
%with-clipboard {
|
||||
padding-left: 38px !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
2
ui-v2/app/styles/components/type-icon/index.scss
Normal file
2
ui-v2/app/styles/components/type-icon/index.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
5
ui-v2/app/styles/components/type-icon/layout.scss
Normal file
5
ui-v2/app/styles/components/type-icon/layout.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
%type-icon {
|
||||
display: inline-block;
|
||||
text-indent: 20px;
|
||||
padding: 3px;
|
||||
}
|
||||
6
ui-v2/app/styles/components/type-icon/skin.scss
Normal file
6
ui-v2/app/styles/components/type-icon/skin.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
%type-icon {
|
||||
border-radius: 4px;
|
||||
|
||||
background: $gray-100;
|
||||
color: $gray-400;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import './with-tooltip/index';
|
||||
%app-view h1 span {
|
||||
%app-view h1 span[data-tooltip] {
|
||||
@extend %with-pseudo-tooltip;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
%with-pseudo-tooltip {
|
||||
text-indent: -9000px;
|
||||
font-size: 0;
|
||||
top: -9px;
|
||||
top: -7px;
|
||||
}
|
||||
|
||||
%with-pseudo-tooltip::after,
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
|
@ -34,6 +35,13 @@
|
|||
{{item.Name}}
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
{{#if (eq item.Kind 'connect-proxy')}}
|
||||
<span class="kind-proxy">Proxy</span>
|
||||
{{else}}
|
||||
|
||||
{{/if}}
|
||||
</td>
|
||||
<td style={{totalWidth}}>
|
||||
{{healthcheck-info
|
||||
passing=item.ChecksPassing warning=item.ChecksWarning critical=item.ChecksCritical
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue