open-consul/ui-v2/app/components/healthcheck-list/index.hbs

<ul data-test-healthchecks>
{{#each (sort-by (action 'sortChecksByImportance') items) as |item| }}
{{! TODO: this component and its child should be moved to a single component }}
  <HealthcheckOutput @data-test-node-healthcheck={{item.Name}} @class={{item.Status}} @tagName="li">
      <BlockSlot @name="header">
        <h3>{{item.Name}}</h3>
      </BlockSlot>
      <BlockSlot @name="content">
      <dl>
        <dt>ServiceName</dt>
        <dd>{{or item.ServiceName '-'}}</dd>
      </dl>
      <dl>
        <dt>CheckID</dt>
        <dd>{{or item.CheckID '-'}}</dd>
      </dl>
      <dl>
        <dt>Type</dt>
        <dd>
          {{item.Type}}
{{#if (and exposed (contains item.Type (array 'http' 'grpc')))}}
          <em data-test-exposed="true" data-tooltip="Expose.checks is set to true, so all registered HTTP and gRPC check paths are exposed through Envoy for the Consul agent.">Exposed</em>
{{/if}}
        </dd>
      </dl>
      <dl>
        <dt>Notes</dt>
        <dd>{{or item.Notes '-'}}</dd>
      </dl>
      <dl>
{{#if (not-eq item.Type 'ttl')}}
        <dt>Output</dt>
        <dd>
            <pre><code>{{item.Output}}</code></pre>
    <FeedbackDialog @type="inline">
      <BlockSlot @name="action" as |success error|>
          <CopyButton @success={{action success}} @error={{action error}} @clipboardText={{item.Output}} @title="copy output to clipboard" />
      </BlockSlot>
      <BlockSlot @name="success" as |transition|>
        <p class={{transition}}>
          Copied output!
        </p>
      </BlockSlot>
      <BlockSlot @name="error" as |transition|>
        <p class={{transition}}>
          Sorry, something went wrong!
        </p>
      </BlockSlot>
    </FeedbackDialog>
        </dd>
{{/if}}
      </dl>
      </BlockSlot>
    </HealthcheckOutput>
{{/each}}
</ul>