github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/app/components/allocation-service-sidebar.hbs (about)

     1  <div
     2    class="sidebar has-subnav service-sidebar {{if this.isSideBarOpen "open"}}"
     3    {{on-click-outside
     4      @fns.closeSidebar
     5      capture=true
     6    }}
     7  >
     8    {{#if @service}}
     9      {{keyboard-commands this.keyCommands}}
    10      <header class="detail-header">
    11        <h1 class="title">
    12          {{@service.name}}
    13          {{#if (not-eq @service.provider "consul")}}
    14            <span class="aggregate-status">
    15              {{#if (eq this.aggregateStatus 'Unhealthy')}}
    16                <FlightIcon @name="x-square-fill" @color="#c84034" />
    17                Unhealthy
    18              {{else}}
    19                <FlightIcon @name="check-square-fill" @color="#25ba81" />
    20                Healthy
    21              {{/if}}
    22            </span>
    23          {{/if}}
    24        </h1>
    25        <button
    26          data-test-close-service-sidebar
    27          class="button is-borderless"
    28          type="button"
    29          {{on "click" @fns.closeSidebar}}
    30        >
    31          {{x-icon "cancel"}}
    32        </button>
    33      </header>
    34  
    35      <div class="boxed-section is-small">
    36        <div
    37          class="boxed-section-body inline-definitions"
    38        >
    39          <span class="label">
    40            Service Details
    41          </span>
    42  
    43          <div>
    44            {{#if @service.connect}}
    45              <span class="pair">
    46                <span class="term">
    47                  Connect
    48                </span>
    49                <span>True</span>
    50              </span>
    51            {{/if}}
    52            <span class="pair">
    53              <span class="term">
    54                Allocation
    55              </span>
    56              <LinkTo
    57                @route="allocations.allocation"
    58                @model={{@allocation}}
    59                @query={{hash service=""}}
    60              >
    61                {{@allocation.shortId}}
    62              </LinkTo>
    63            </span>
    64            <span class="pair">
    65              <span class="term">
    66                IP Address &amp; Port
    67              </span>
    68              <a
    69                href="http://{{this.address}}"
    70                target="_blank"
    71                rel="noopener noreferrer"
    72              >
    73                {{this.address}}
    74              </a>
    75            </span>
    76            <span class="pair">
    77              <span class="term">
    78                Client
    79              </span>
    80              <Tooltip @text={{@allocation.node.name}}>
    81                <LinkTo
    82                  @route="clients.client"
    83                  @model={{@allocation.node}}
    84                >
    85                  {{@allocation.node.shortId}}
    86                </LinkTo>
    87              </Tooltip>
    88            </span>
    89            {{#if @service.tags.length}}
    90              <span class="pair is-wrappable">
    91                <span class="term">
    92                  Tags
    93                </span>
    94                {{#each @service.tags as |tag|}}
    95                  <span class="tag is-service">{{tag}}</span>
    96                {{/each}}
    97                {{#each @service.canary_tags as |tag|}}
    98                  <span class="tag canary is-service">{{tag}}</span>
    99                {{/each}}
   100              </span>
   101            {{/if}}
   102          </div>
   103        </div>
   104      </div>
   105      {{#if this.checks.length}}
   106        <ListTable class="health-checks" @source={{this.checks}} as |t|>
   107          <t.head>
   108            <th class="name">
   109              Check Name
   110            </th>
   111            <th class="status">
   112              Status
   113            </th>
   114            <td class="output">
   115              Output
   116            </td>
   117          </t.head>
   118          <t.body as |row|>
   119            <tr data-service-health={{row.model.Status}}>
   120              <td class="name">
   121                <span title={{row.model.Check}}>{{row.model.Check}}</span>
   122              </td>
   123              <td class="status">
   124                <span>
   125                  {{#if (eq row.model.Status "success")}}
   126                    <FlightIcon @name="check-square-fill" @color="#25ba81" />
   127                    Healthy
   128                  {{else if (eq row.model.Status "failure")}}
   129                    <FlightIcon @name="x-square-fill" @color="#c84034" />
   130                    Unhealthy
   131                  {{else if (eq row.model.Status "pending")}}
   132                    Pending
   133                  {{/if}}
   134                </span>
   135              </td>
   136              <td class="service-output">
   137                <code>
   138                  {{row.model.Output}}
   139                </code>
   140              </td>
   141            </tr>
   142            <tr class="service-status-indicators">
   143              <td colspan="3">
   144                <div>
   145                  {{#each (dedupe-by-property (filter-by "Check" row.model.Check @service.healthChecks) prop="Timestamp") as |check|}}
   146                    <ServiceStatusIndicator @check={{check}} />
   147                  {{/each}}
   148                </div>
   149              </td>
   150            </tr>
   151          </t.body>
   152        </ListTable>
   153      {{/if}}
   154      {{#if (eq @service.provider "consul")}}
   155      <table class="table is-fixed connect-info">
   156        <tbody>
   157          {{#if @service.onUpdate}}
   158            <tr>
   159              <td><strong>On Update</strong></td>
   160              <td>{{@service.onUpdate}}</td>
   161            </tr>
   162          {{/if}}
   163          {{#if @service.connect.sidecarService.proxy.upstreams}}
   164            <tr>
   165              <td><strong>Upstreams</strong></td>
   166              <td>
   167                  {{#each
   168                    @service.connect.sidecarService.proxy.upstreams as |upstream|
   169                  }}
   170                    <span class="tag">{{upstream.destinationName}}:{{upstream.localBindPort}}</span>
   171                  {{/each}}
   172              </td>
   173            </tr>
   174          {{/if}}
   175        </tbody>
   176      </table>
   177      {{/if}}
   178      {{#if (and (eq @service.provider "consul") this.consulRedirectLink)}}
   179      <div data-test-consul-link-notice class="notification is-info">
   180        <p>
   181          Nomad cannot read health check information from Consul services, but you can <a href={{this.consulRedirectLink}} target="_blank" rel="noopener noreferrer">view this information in your Consul UI</a>.
   182        </p>
   183      </div>
   184      {{/if}}
   185    {{/if}}
   186  </div>