John Cowen b6915793d0 ui: Remove custom css-vars 'polyfill' and use native CSS props (#7249)
* ui: Remove custom css-vars 'polyfill' and use native CSS props

Previously we used a sort of polyfill for certain places where we needed
CSS property-like behavior. This meant duplicating code between JS and
CSS, specifically some of our SVG icons.

We moved to CSS props only in the places where they are beneficial and
populated the variables with our already existing SASS variables.

This means we no longer have to duplicate CSS and we can remove our
custom css-var helper/polyfill.
2020-05-12 17:13:54 +00:00

116 lines
4.2 KiB
Handlebars

{{title item.ID}}
{{#app-view class="instance show"}}
{{#block-slot name='notification' as |status type|}}
{{partial 'dc/services/notifications'}}
{{/block-slot}}
{{#block-slot name='breadcrumbs'}}
<ol>
<li><a data-test-back href={{href-to 'dc.services'}}>All Services</a></li>
<li><a data-test-back href={{href-to 'dc.services.show'}}>Service ({{item.Service}})</a></li>
<li><strong>Instance</strong></li>
</ol>
{{/block-slot}}
{{#block-slot name='header'}}
<h1>
{{ item.ID }}
{{#let (service/external-source item) as |externalSource| }}
{{#if externalSource }}
<span data-test-external-source={{externalSource}} style={{concat 'background-image: var(--' externalSource '-icon)'}} data-tooltip="Registered via {{externalSource}}">Registered via {{externalSource}}</span>
{{/if}}
{{/let}}
{{#if (eq item.Kind 'connect-proxy')}}
<span class="kind-proxy">Proxy</span>
{{else if (eq item.Kind 'mesh-gateway')}}
<span class="kind-proxy">Mesh Gateway</span>
{{/if}}
</h1>
<dl>
<dt>Service Name</dt>
<dd><a href="{{href-to 'dc.services.show' item.Service}}">{{item.Service}}</a></dd>
</dl>
<dl>
<dt>Node Name</dt>
<dd><a href="{{href-to 'dc.nodes.show' item.Node.Node}}">{{item.Node.Node}}</a></dd>
</dl>
{{#if proxy.ServiceName}}
<dl>
{{#if proxy.ServiceProxy.DestinationServiceID}}
<dt data-test-proxy-type="sidecar-proxy">Sidecar Proxy</dt>
<dd><a href="{{href-to 'dc.services.instance' proxy.ServiceName proxy.Node proxy.ServiceID}}">{{proxy.ServiceID}}</a></dd>
{{else}}
<dt data-test-proxy-type="proxy">Proxy</dt>
<dd><a href="{{href-to 'dc.services.show' proxy.ServiceName}}">{{proxy.ServiceName}}</a></dd>
{{/if}}
</dl>
{{/if}}
{{#if (eq item.Kind 'connect-proxy')}}
{{#if item.Proxy.DestinationServiceID}}
<dl>
<dt data-test-proxy-destination="instance">Dest. Service Instance</dt>
<dd><a href="{{href-to 'dc.services.instance' item.Proxy.DestinationServiceName item.Node.Node item.Proxy.DestinationServiceID}}">{{item.Proxy.DestinationServiceID}}</a></dd>
</dl>
<dl>
<dt>Local Service Address</dt>
<dd>{{item.Proxy.LocalServiceAddress}}:{{item.Proxy.LocalServicePort}}</dd>
</dl>
{{else}}
<dl>
<dt data-test-proxy-destination="service">Dest. Service</dt>
<dd><a href="{{href-to 'dc.services.show' item.Proxy.DestinationServiceName}}">{{item.Proxy.DestinationServiceName}}</a></dd>
</dl>
{{/if}}
{{/if}}
{{/block-slot}}
{{#block-slot name='content'}}
{{tab-nav
items=(compact
(array
'Service Checks'
'Node Checks'
(if
(eq item.Kind 'connect-proxy')
'Upstreams' ''
)
(if
(and (eq item.Kind 'connect-proxy') (gt item.Proxy.Expose.Paths.length 0))
'Exposed Paths' ''
)
(if
(eq item.Kind 'mesh-gateway')
'Addresses' ''
)
'Tags'
'Meta Data'
)
)
selected=selectedTab
}}
{{#each
(compact
(array
(hash id=(slugify 'Service Checks') partial='dc/services/servicechecks')
(hash id=(slugify 'Node Checks') partial='dc/services/nodechecks')
(if
(eq item.Kind 'connect-proxy')
(hash id=(slugify 'Upstreams') partial='dc/services/upstreams') ''
)
(if
(and (eq item.Kind 'connect-proxy') (gt item.Proxy.Expose.Paths.length 0))
(hash id=(slugify 'Exposed Paths') partial='dc/services/exposedpaths') ''
)
(if
(eq item.Kind 'mesh-gateway')
(hash id=(slugify 'Addresses') partial='dc/services/addresses') ''
)
(hash id=(slugify 'Tags') partial='dc/services/tags')
(hash id=(slugify 'Meta Data') partial='dc/services/metadata')
)
) key="id" as |panel|
}}
{{#tab-section id=panel.id selected=(eq (if selectedTab selectedTab '') panel.id) onchange=(action "change")}}
{{partial panel.partial}}
{{/tab-section}}
{{/each}}
{{/block-slot}}
{{/app-view}}