github.com/anuvu/nomad@v0.8.7-atom1/ui/app/templates/clients/client.hbs (about)

     1  {{#global-header class="page-header"}}
     2    <li>
     3      {{#link-to "clients.index" data-test-breadcrumb="clients"}}Clients{{/link-to}}
     4    </li>
     5    <li class="is-active">
     6      {{#link-to "clients.client" model.id data-test-breadcrumb="client"}}{{model.shortId}}{{/link-to}}
     7    </li>
     8  {{/global-header}}
     9  {{#gutter-menu class="page-body"}}
    10    <section class="section">
    11      <h1 data-test-title class="title">
    12        <span data-test-node-status="{{model.compositeStatus}}" class="node-status-light {{model.compositeStatus}}"></span>
    13        {{or model.name model.shortId}}
    14        <span class="tag is-hollow is-small no-text-transform">{{model.id}}</span>
    15      </h1>
    16  
    17      <div class="boxed-section is-small">
    18        <div class="boxed-section-body inline-definitions">
    19          <span class="label">Client Details</span>
    20          <span class="pair" data-test-status-definition>
    21            <span class="term">Status</span>
    22            <span class="status-text node-{{model.status}}">{{model.status}}</span>
    23          </span>
    24          <span class="pair" data-test-address-definition>
    25            <span class="term">Address</span>
    26            {{model.httpAddr}}
    27          </span>
    28          <span class="pair" data-test-draining>
    29            <span class="term">Draining</span>
    30            {{#if model.isDraining}}
    31              <span class="status-text is-info">true</span>
    32            {{else}}
    33              false
    34            {{/if}}
    35          </span>
    36          <span class="pair" data-test-eligibility>
    37            <span class="term">Eligibility</span>
    38            {{#if model.isEligible}}
    39              {{model.schedulingEligibility}}
    40            {{else}}
    41              <span class="status-text is-warning">{{model.schedulingEligibility}}</span>
    42            {{/if}}
    43          </span>
    44          <span class="pair" data-test-datacenter-definition>
    45            <span class="term">Datacenter</span>
    46            {{model.datacenter}}
    47          </span>
    48          <span class="pair" data-test-driver-health>
    49            <span class="term">Drivers</span>
    50            {{#if model.unhealthyDrivers.length}}
    51              {{x-icon "warning" class="is-text is-warning"}}
    52              {{model.unhealthyDrivers.length}} of {{model.detectedDrivers.length}} {{pluralize "driver" model.detectedDrivers.length}} unhealthy
    53            {{else}}
    54              All healthy
    55            {{/if}}
    56          </span>
    57        </div>
    58      </div>
    59  
    60      {{#if model.drainStrategy}}
    61        <div class="boxed-section is-small is-info">
    62          <div class="boxed-section-body inline-definitions">
    63            <span class="label">Drain Strategy</span>
    64            <span class="pair" data-test-drain-deadline>
    65              <span class="term">Deadline</span>
    66              {{#if model.drainStrategy.isForced}}
    67                <span class="badge is-danger">Forced Drain</span>
    68              {{else if model.drainStrategy.hasNoDeadline}}
    69                No deadline
    70              {{else}}
    71                {{format-duration model.drainStrategy.deadline}}
    72              {{/if}}
    73            </span>
    74            {{#if model.drainStrategy.forceDeadline}}
    75              <span class="pair" data-test-drain-forced-deadline>
    76                <span class="term">Forced Deadline</span>
    77                {{moment-format model.drainStrategy.forceDeadline "MM/DD/YY HH:mm:ss"}}
    78                ({{moment-from-now model.drainStrategy.forceDeadline interval=1000}})
    79              </span>
    80            {{/if}}
    81            <span class="pair" data-test-drain-ignore-system-jobs>
    82              <span class="term">Ignore System Jobs?</span>
    83              {{if model.drainStrategy.ignoreSystemJobs "Yes" "No"}}
    84            </span>
    85          </div>
    86        </div>
    87      {{/if}}
    88  
    89      <div class="boxed-section">
    90        <div class="boxed-section-head">
    91          <div>Allocations <span class="badge is-white">{{model.allocations.length}}</span></div>
    92          {{search-box
    93            searchTerm=(mut searchTerm)
    94            placeholder="Search allocations..."
    95            class="is-inline pull-right"
    96            inputClass="is-compact"}}
    97        </div>
    98        <div class="boxed-section-body is-full-bleed">
    99          {{#list-pagination
   100            source=sortedAllocations
   101            size=pageSize
   102            page=currentPage as |p|}}
   103            {{#list-table
   104              source=p.list
   105              sortProperty=sortProperty
   106              sortDescending=sortDescending
   107              class="with-foot" as |t|}}
   108              {{#t.head}}
   109                <th class="is-narrow"></th>
   110                {{#t.sort-by prop="shortId"}}ID{{/t.sort-by}}
   111                {{#t.sort-by prop="modifyIndex" title="Modify Index"}}Modified{{/t.sort-by}}
   112                {{#t.sort-by prop="name"}}Name{{/t.sort-by}}
   113                {{#t.sort-by prop="statusIndex"}}Status{{/t.sort-by}}
   114                {{#t.sort-by prop="job.name"}}Job{{/t.sort-by}}
   115                {{#t.sort-by prop="jobVersion"}}Version{{/t.sort-by}}
   116                <th>CPU</th>
   117                <th>Memory</th>
   118              {{/t.head}}
   119              {{#t.body as |row|}}
   120                {{allocation-row
   121                  allocation=row.model
   122                  context="node"
   123                  onClick=(action "gotoAllocation" row.model)
   124                  data-test-allocation=row.model.id}}
   125              {{/t.body}}
   126            {{/list-table}}
   127            <div class="table-foot">
   128              <nav class="pagination">
   129                <div class="pagination-numbers">
   130                  {{p.startsAt}}&ndash;{{p.endsAt}} of {{sortedAllocations.length}}
   131                </div>
   132                {{#p.prev class="pagination-previous"}} &lt; {{/p.prev}}
   133                {{#p.next class="pagination-next"}} &gt; {{/p.next}}
   134                <ul class="pagination-list"></ul>
   135              </nav>
   136            </div>
   137          {{/list-pagination}}
   138        </div>
   139      </div>
   140  
   141      <div data-test-client-events class="boxed-section">
   142        <div class="boxed-section-head">
   143          Client Events
   144        </div>
   145        <div class="boxed-section-body is-full-bleed">
   146          {{#list-table source=sortedEvents class="is-striped" as |t|}}
   147            {{#t.head}}
   148              <th class="is-2">Time</th>
   149              <th class="is-2">Subsystem</th>
   150              <th>Message</th>
   151            {{/t.head}}
   152            {{#t.body as |row|}}
   153              <tr data-test-client-event>
   154                <td data-test-client-event-time>{{moment-format row.model.time "MM/DD/YY HH:mm:ss"}}</td>
   155                <td data-test-client-event-subsystem>{{row.model.subsystem}}</td>
   156                <td data-test-client-event-message>
   157                  {{#if row.model.message}}
   158                    {{#if row.model.driver}}
   159                      <span class="badge is-secondary is-small">{{row.model.driver}}</span>
   160                    {{/if}}
   161                    {{row.model.message}}
   162                  {{else}}
   163                    <em>No message</em>
   164                  {{/if}}
   165                </td>
   166              </tr>
   167            {{/t.body}}
   168          {{/list-table}}
   169        </div>
   170      </div>
   171  
   172      <div data-test-driver-status class="boxed-section">
   173        <div class="boxed-section-head">
   174          Driver Status
   175        </div>
   176        <div class="boxed-section-body">
   177          {{#list-accordion source=sortedDrivers key="name" as |a|}}
   178            {{#a.head buttonLabel="details" isExpandable=a.item.detected}}
   179              <div class="columns inline-definitions {{unless a.item.detected "is-faded"}}">
   180                <div class="column is-1">
   181                  <span data-test-name>{{a.item.name}}</span>
   182                </div>
   183                <div class="column is-2">
   184                  {{#if a.item.detected}}
   185                    <span data-test-health>
   186                      <span class="color-swatch {{a.item.healthClass}}"></span>
   187                      {{if a.item.healthy "Healthy" "Unhealthy"}}
   188                    </span>
   189                  {{/if}}
   190                </div>
   191                <div class="column">
   192                  <span class="pair">
   193                    <span class="term">Detected</span>
   194                    <span data-test-detected>{{if a.item.detected "Yes" "No"}}</span>
   195                  </span>
   196                  <span class="is-pulled-right">
   197                    <span class="pair">
   198                      <span class="term">Last Updated</span>
   199                      <span data-test-last-updated>{{moment-from-now a.item.updateTime interval=1000}}</span>
   200                    </span>
   201                  </span>
   202                </div>
   203              </div>
   204            {{/a.head}}
   205            {{#a.body}}
   206              <p data-test-health-description class="message">{{a.item.healthDescription}}</p>
   207              <div data-test-driver-attributes class="boxed-section">
   208                <div class="boxed-section-head">
   209                   {{capitalize a.item.name}} Attributes
   210                </div>
   211                {{#if a.item.attributes.attributesStructured}}
   212                  <div class="boxed-section-body is-full-bleed">
   213                    {{attributes-table
   214                      attributes=a.item.attributesShort
   215                      class="attributes-table"}}
   216                  </div>
   217                {{else}}
   218                  <div class="boxed-section-body">
   219                    <div class="empty-message">
   220                      <h3 class="empty-message-headline">No Driver Attributes</h3>
   221                    </div>
   222                  </div>
   223                {{/if}}
   224              </div>
   225            {{/a.body}}
   226          {{/list-accordion}}
   227        </div>
   228      </div>
   229  
   230      <div class="boxed-section">
   231        <div class="boxed-section-head">
   232          Attributes
   233        </div>
   234        <div class="boxed-section-body is-full-bleed">
   235          {{attributes-table
   236            data-test-attributes
   237            attributes=model.attributes.attributesStructured
   238            class="attributes-table"}}
   239        </div>
   240        <div class="boxed-section-head">
   241          Meta
   242        </div>
   243        {{#if model.meta.attributesStructured}}
   244          <div class="boxed-section-body is-full-bleed">
   245            {{attributes-table
   246              data-test-meta
   247              attributes=model.meta.attributesStructured
   248              class="attributes-table"}}
   249          </div>
   250        {{else}}
   251          <div class="boxed-section-body">
   252            <div data-test-empty-meta-message class="empty-message">
   253              <h3 class="empty-message-headline">No Meta Attributes</h3>
   254              <p class="empty-message-body">This client is configured with no meta attributes.</p>
   255            </div>
   256          </div>
   257        {{/if}}
   258      </div>
   259    </section>
   260  {{/gutter-menu}}