github.com/manicqin/nomad@v0.9.5/ui/app/templates/clients/client.hbs (about)

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