open-nomad/ui/app/templates/components/scale-events-chart.hbs
Michael Lange 9c73d03332 Use named-blocks and contextual components to reduce the responsibility of LineChart
Now chart primitives are partially applied by LineChart but the
invocations are left to the caller.
2021-02-24 18:58:01 -08:00

37 lines
1 KiB
Handlebars

<LineChart
@timeseries={{true}}
@xProp="time"
@yProp="count"
@data={{this.data}}>
<:svg as |c|>
<c.Area
@curve="stepAfter"
@data={{this.data}} />
</:svg>
<:after as |c|>
<c.VAnnotations
@annotations={{this.annotations}}
@key="event.uid"
@activeAnnotation={{this.activeEvent}}
@annotationClick={{action this.toggleEvent}} />
</:after>
</LineChart>
{{#if this.activeEvent}}
<div data-test-event-details>
<div class="event">
<div data-test-type class="type">
{{#if this.activeEvent.event.error}}
{{x-icon "cancel-circle-fill" class="is-danger"}}
{{else}}
{{x-icon "info-circle-fill" class="is-grey"}}
{{/if}}
</div>
<div>
<p data-test-timestamp class="timestamp">{{format-month-ts this.activeEvent.event.time}}</p>
<p data-test-message class="message">{{this.activeEvent.event.message}}</p>
</div>
</div>
<JsonViewer @json={{this.activeEvent.event.meta}} @fluidHeight={{true}} />
</div>
{{/if}}