open-nomad/ui/app/components/evaluation-sidebar/related-evaluations.hbs
Jai 7690fda6ba
Epic: Evaluation Detail Sidebar (#12370)
* chore: prettify gutter-menu

* chore:  add portal packages

* styling:  add styles sidebar and portal behavior

* ui:  sidebar component

* ui:  create and implement statechart for evals

* ui:  actor-relationship service and provider component

* ui:  d3 hierarchy computation

* chore:  add render-modifiers and curved arrows

* ui:  create evaluation actor div

* fix related evaluations schema

* ui:  register/deregister evaluation divs

* ui:  handle resize behavior

* bug:  infinite re-render cycle

* fix:  conditional logic to prevent infinite render of flex resizing

* ui: related evaluations schema and request param

* ui: fix testing for evaluations

* refact: make related-evals a proper has-many

* chore: don't pauseTest

* temp:  debug d3 hierarchy

* ui:  move derived state logic into backing component class for detail

* ui:  deprecated related evaluations logic in statechart

* ui:  update evaluation models

* ui:  update logic to paint svg in non-viewable scroll region

* ui:  update styling

* ui:  testing for eval detail view

* ui:  delete detail from template directory

* ui:  break detail component down

* ui:  static data for /evaluation/:id endpoint

* ui:  fix styling of d3 viz

* ui:  add query parameter adapter for evals

* ui:  last minute design requests

* wip:  address browser updating detail view behavior

* refact: handle query-state change in statechart

* conditional class looking for currentEval equality (#12411)

* F UI/evaluation detail sidebar rel evals (#12415)

* ui:  remove busy id alias from statechart

* ui: edit related evaluations viz error message

* ui:  bug fixes on related evaluations view (#12423)

* ui:  remove busy id alias from statechart

* ui: edit related evaluations viz error message

* ui:  update error state

* ui:  related evaluation outline styling

* Related evaluation stylefile and non-link if it matches the active sidebar (#12428)

* Adds tabbable and keyboard pressable evaluation table rows (#12433)

* ui:  fix failing eval list tests (#12437)

* ui:  move styling into classes (#12438)

* fix test failures (#12444)

* ui:  move styling into classes

* ui:  eslint disable

* ui:  allocations have evaluations as async relationships

* ui:  fix evaluation refresh button (#12447)

* ui:  move styling into classes

* ui:  eslint disable

* ui:  allocations have evaluations as async relationships

* ui:  refresh bug

* ui:  final touches on sidebar (#12462)

* chore: turn off template linting rules

Temporarily turning off template linting because we dont have a set CSS convention and the release needs to go out ASAP.

* doc:  deprecate out of date comments and vars

* ui:  edit mirage server fetch logic

* ui:  style sidebar relative

* Modification to mocked related evals and manually set 100% height on svg (#12460)

* F UI/evaluation detail sidebar final touches (#12463)

* chore: turn off template linting rules

Temporarily turning off template linting because we dont have a set CSS convention and the release needs to go out ASAP.

* doc:  deprecate out of date comments and vars

* ui:  edit mirage server fetch logic

* ui:  style sidebar relative

* ui:  account for new related eval added to chain

Co-authored-by: Michael Klein <michael@firstiwaslike.com>
Co-authored-by: Phil Renaud <phil@riotindustries.com>
2022-04-05 14:34:37 -04:00

60 lines
1.9 KiB
Handlebars

<div class="boxed-section">
<div class="boxed-section-head">
Related Evaluations
</div>
<div class="boxed-section-body related-evaluations" data-test-eval-container>
<div class="sidebar-content" {{on-resize @fns.handleResize}}>
{{#if (and @data.width @data.height)}}
<Providers::ActorsRelationships as |actors|>
<svg
width={{@data.width}}
height="100%"
style="z-index: 10; inset: 0; position: absolute; pointer-events: none"
{{did-update actors.fns.recalcCurves @data.width}}
>
{{#each actors.data.relationships as |r|}}
<path
d={{r.d}}
stroke="#7E8FA8"
strokeWidth="1"
fill="none"
></path>
<circle
cx={{r.sx}}
cy={{r.sy}}
r="4"
fill="white"
stroke="black"
></circle>
<circle
cx={{r.ex}}
cy={{r.ey}}
r="4"
fill="white"
stroke="black"
></circle>
{{/each}}
</svg>
</Providers::ActorsRelationships>
{{/if}}
<div>
<EvaluationSidebar::EvaluationActor
@eval={{@data.parentEvaluation}}
@activeEvaluationID={{@data.activeEvaluationID}}
@onClick={{fn @fns.handleEvaluationClick @data.parentEvaluation}}
/>
</div>
{{#each @data.descendentsMap as |evals|}}
<div class="evaluation-actors">
{{#each evals as |eval|}}
<EvaluationSidebar::EvaluationActor
@eval={{eval.data}}
@activeEvaluationID={{@data.activeEvaluationID}}
@onClick={{fn @fns.handleEvaluationClick eval.data}}
/>
{{/each}}
</div>
{{/each}}
</div>
</div>
</div>