Kenia 7243f1f4f9
ui: Topology Intentions Popovers (#9137)
* Refactor grid styling for Topology page

* Crate TopologyMetrics Button component and move styling

* Create intention ID

* fixup button styling

* Return a link to the create intention page

* Rename Button to Popover component

* Fixup serializer test

* ui: Inline Topology Intention Actions  (#9153)

* Add arrow and dot to/from metrics back in

* Add addional space to have metrics wrap and show in smaller screens

* Move logic for finding positioning

* Use color variables

Co-authored-by: John Cowen <johncowen@users.noreply.github.com>
2020-11-12 10:40:15 -05:00

64 lines
1.7 KiB
Handlebars

<a class="card"
href={{href-to "dc.services.show.index" @item.Name}}
data-permission={{service/intention-permissions @item}}
id="{{@item.Namespace}}{{@item.Name}}"
>
<p>
{{@item.Name}}
</p>
<div class="details">
{{#if (and (and nspace (env 'CONSUL_NSPACES_ENABLED')) @type)}}
<dl class="nspace">
<dt>
<Tooltip>
Namespace
</Tooltip>
</dt>
<dd>
{{@item.Namespace}}
</dd>
</dl>
{{/if}}
{{#if (eq @item.Datacenter @dc)}}
{{#let (service/health-percentage @item) as |percentage|}}
{{#if (not-eq percentage.passing 0)}}
<span class="passing">{{percentage.passing}}%</span>
{{/if}}
{{#if (not-eq percentage.warning 0)}}
<span class="warning">{{percentage.warning}}%</span>
{{/if}}
{{#if (not-eq percentage.critical 0)}}
<span class="critical">{{percentage.critical}}%</span>
{{/if}}
{{/let}}
{{else}}
<dl class="health">
<dt>
<Tooltip>
We are unable to determine the health status of services in remote datacenters.
</Tooltip>
</dt>
<dd>
Health
</dd>
</dl>
{{/if}}
</div>
{{#if (and @hasMetricsProvider (not-eq @service.Kind 'ingress-gateway'))}}
{{#if (eq @type 'upstream')}}
<TopologyMetrics::Stats
@endpoint='upstream-summary-for-service'
@service={{@service.Service}}
@item={{@item.Name}}
@noMetricsReason={{@noMetricsReason}}
/>
{{else}}
<TopologyMetrics::Stats
@endpoint='downstream-summary-for-service'
@service={{@service.Service}}
@item={{@item.Name}}
@noMetricsReason={{@noMetricsReason}}
/>
{{/if}}
{{/if}}
</a>