github.com/thomasobenaus/nomad@v0.11.1/ui/app/templates/allocations/allocation/index.hbs (about)

     1  {{title "Allocation " model.name}}
     2  <section class="section">
     3    {{#if error}}
     4      <div data-test-inline-error class="notification is-danger">
     5        <div class="columns">
     6          <div class="column">
     7            <h3 data-test-inline-error-title class="title is-4">{{error.title}}</h3>
     8            <p data-test-inline-error-body>{{error.description}}</p>
     9          </div>
    10          <div class="column is-centered is-minimum">
    11            <button data-test-inline-error-close class="button is-danger" onclick={{action onDismiss}}>Okay</button>
    12          </div>
    13        </div>
    14      </div>
    15    {{/if}}
    16  
    17    <h1 data-test-title class="title with-headroom with-flex">
    18      <div>
    19        Allocation {{model.name}}
    20        <span class="bumper-left tag {{model.statusClass}}">{{model.clientStatus}}</span>
    21      </div>
    22      <div>
    23        {{#if model.isRunning}}
    24          <div class="two-step-button">
    25            {{exec/open-button job=model.job allocation=model}}
    26          </div>
    27          {{two-step-button
    28            data-test-stop
    29            alignRight=true
    30            idleText="Stop"
    31            cancelText="Cancel"
    32            confirmText="Yes, Stop"
    33            confirmationMessage="Are you sure? This will reschedule the allocation on a different client."
    34            awaitingConfirmation=stopAllocation.isRunning
    35            disabled=(or stopAllocation.isRunning restartAllocation.isRunning)
    36            onConfirm=(perform stopAllocation)}}
    37          {{two-step-button
    38            data-test-restart
    39            alignRight=true
    40            idleText="Restart"
    41            cancelText="Cancel"
    42            confirmText="Yes, Restart"
    43            confirmationMessage="Are you sure? This will restart the allocation in-place."
    44            awaitingConfirmation=restartAllocation.isRunning
    45            disabled=(or stopAllocation.isRunning restartAllocation.isRunning)
    46            onConfirm=(perform restartAllocation)}}
    47        {{/if}}
    48      </div>
    49    </h1>
    50  
    51    <span class="tag is-hollow is-small is-alone no-text-transform">
    52      {{model.id}}
    53      {{copy-button clipboardText=model.id}}
    54    </span>
    55  
    56    <div class="boxed-section is-small">
    57      <div data-test-allocation-details class="boxed-section-body inline-definitions">
    58        <span class="label">Allocation Details</span>
    59        <span class="pair job-link"><span class="term">Job</span>
    60          {{#link-to "jobs.job" model.job (query-params jobNamespace=model.job.namespace.id) data-test-job-link}}{{model.job.name}}{{/link-to}}
    61        </span>
    62        <span class="pair node-link"><span class="term">Client</span>
    63          {{#link-to "clients.client" model.node data-test-client-link}}{{model.node.shortId}}{{/link-to}}
    64        </span>
    65      </div>
    66    </div>
    67  
    68    <div class="boxed-section">
    69      <div class="boxed-section-head is-hollow">
    70        Resource Utilization
    71      </div>
    72      <div class="boxed-section-body">
    73        {{#if model.isRunning}}
    74          <div class="columns">
    75            <div class="column">
    76              {{primary-metric resource=model metric="cpu"}}
    77            </div>
    78            <div class="column">
    79              {{primary-metric resource=model metric="memory"}}
    80            </div>
    81          </div>
    82        {{else}}
    83          <div data-test-resource-error class="empty-message">
    84            <h3 data-test-resource-error-headline class="empty-message-headline">Allocation isn't running</h3>
    85            <p class="empty-message-body">Only running allocations utilize resources.</p>
    86          </div>
    87        {{/if}}
    88      </div>
    89    </div>
    90  
    91    <div class="boxed-section">
    92      <div class="boxed-section-head">
    93        Tasks
    94      </div>
    95      <div class="boxed-section-body {{if sortedStates.length "is-full-bleed"}}">
    96        {{#if sortedStates.length}}
    97          {{#list-table
    98            source=sortedStates
    99            sortProperty=sortProperty
   100            sortDescending=sortDescending
   101            class="is-striped" as |t|}}
   102            {{#t.head}}
   103              <th class="is-narrow"></th>
   104              {{#t.sort-by prop="name"}}Name{{/t.sort-by}}
   105              {{#t.sort-by prop="state"}}State{{/t.sort-by}}
   106              <th>Last Event</th>
   107              {{#t.sort-by prop="events.lastObject.time"}}Time{{/t.sort-by}}
   108              <th>Volumes</th>
   109              <th>Addresses</th>
   110              <th>CPU</th>
   111              <th>Memory</th>
   112            {{/t.head}}
   113            {{#t.body as |row|}}
   114              {{task-row
   115                data-test-task-row=row.model.name
   116                task=row.model
   117                onClick=(action "taskClick" row.model.allocation row.model)}}
   118            {{/t.body}}
   119          {{/list-table}}
   120        {{else}}
   121          <div data-test-empty-tasks-list class="empty-message">
   122            <h3 data-test-empty-tasks-list-headline class="empty-message-headline">No Tasks</h3>
   123            <p data-test-empty-tasks-list-body class="empty-message-body">Allocations will not have tasks until they are in a running state.</p>
   124          </div>
   125        {{/if}}
   126      </div>
   127    </div>
   128  
   129    {{#if network.ports.length}}
   130      <div class="boxed-section" data-test-allocation-ports>
   131        <div class="boxed-section-head">
   132          Ports
   133        </div>
   134        <div class="boxed-section-body is-full-bleed">
   135          {{#list-table source=network.ports as |t|}}
   136            {{#t.head}}
   137              <th class="is-2">Name</th>
   138              <th class="is-1">Dynamic?</th>
   139              <th>Host Address</th>
   140              <th>Mapped Port</th>
   141            {{/t.head}}
   142            {{#t.body as |row|}}
   143              <tr data-test-allocation-port>
   144                <td data-test-allocation-port-name>{{row.model.name}}</td>
   145                <td data-test-allocation-port-is-dynamic>{{if row.model.isDynamic "Yes" "No"}}</td>
   146                <td data-test-allocation-port-address>
   147                  <a href="http://{{network.ip}}:{{row.model.port}}" target="_blank" rel="noopener noreferrer">{{network.ip}}:{{row.model.port}}</a>
   148                </td>
   149                <td data-test-allocation-port-to>{{row.model.to}}</td>
   150              </tr>
   151            {{/t.body}}
   152          {{/list-table}}
   153        </div>
   154      </div>
   155    {{/if}}
   156  
   157    {{#if services.length}}
   158      <div class="boxed-section">
   159        <div class="boxed-section-head">
   160          Services
   161        </div>
   162        <div class="boxed-section-body is-full-bleed">
   163          {{#list-table source=services as |t|}}
   164            {{#t.head}}
   165              <th class="is-2">Name</th>
   166              <th class="is-1">Port</th>
   167              <td>Tags</td>
   168              <td>Connect?</td>
   169              <td>Upstreams</td>
   170            {{/t.head}}
   171            {{#t.body as |row|}}
   172              <tr data-test-service>
   173                <td data-test-service-name>{{row.model.name}}</td>
   174                <td data-test-service-port>{{row.model.portLabel}}</td>
   175                <td data-test-service-tags>{{join ", " row.model.tags}}</td>
   176                <td data-test-service-connect>{{if row.model.connect "Yes" "No"}}</td>
   177                <td data-test-service-upstreams>
   178                  {{#each row.model.connect.sidecarService.proxy.upstreams as |upstream|}}
   179                    {{upstream.destinationName}}:{{upstream.localBindPort}}
   180                  {{/each}}
   181                </td>
   182              </tr>
   183            {{/t.body}}
   184          {{/list-table}}
   185        </div>
   186      </div>
   187    {{/if}}
   188  
   189    {{#if model.hasRescheduleEvents}}
   190      <div class="boxed-section" data-test-reschedule-events>
   191        <div class="boxed-section-head is-hollow">
   192          Reschedule Events
   193        </div>
   194        <div class="boxed-section-body">
   195          {{reschedule-event-timeline allocation=model}}
   196        </div>
   197      </div>
   198    {{/if}}
   199  
   200    {{#if model.wasPreempted}}
   201      <div class="boxed-section is-warning" data-test-was-preempted>
   202        <div class="boxed-section-head">Preempted By</div>
   203        <div class="boxed-section-body">
   204          {{#if (not preempter)}}
   205            <div class="empty-message">
   206              <h3 class="empty-message-headline">Allocation is gone</h3>
   207              <p class="empty-message-body">This allocation has been stopped and garbage collected.</p>
   208            </div>
   209          {{else}}
   210            <div class="boxed-section is-small">
   211              <div class="boxed-section-body inline-definitions">
   212                <span class="pair">
   213                  <span data-test-allocation-status class="tag {{preempter.statusClass}}">
   214                    {{preempter.clientStatus}}
   215                  </span>
   216                </span>
   217                <span class="pair">
   218                  <span class="term" data-test-allocation-name>{{preempter.name}}</span>
   219                  {{#link-to "allocations.allocation" preempter data-test-allocation-id}}{{preempter.shortId}}{{/link-to}}
   220                </span>
   221                <span class="pair job-link"><span class="term">Job</span>
   222                  {{#link-to "jobs.job" preempter.job (query-params jobNamespace=preempter.job.namespace.id) data-test-job-link}}{{preempter.job.name}}{{/link-to}}
   223                </span>
   224                <span class="pair job-priority"><span class="term">Priority</span>
   225                  <span data-test-job-priority>{{preempter.job.priority}}</span>
   226                </span>
   227                <span class="pair node-link"><span class="term">Client</span>
   228                  {{#link-to "clients.client" preempter.node data-test-client-link}}{{preempter.node.shortId}}{{/link-to}}
   229                </span>
   230                <span class="pair"><span class="term">Reserved CPU</span>
   231                  <span data-test-allocation-cpu>{{preempter.resources.cpu}} MHz</span>
   232                </span>
   233                <span class="pair"><span class="term">Reserved Memory</span>
   234                  <span data-test-allocation-memory>{{preempter.resources.memory}} MiB</span>
   235                </span>
   236              </div>
   237            </div>
   238          {{/if}}
   239        </div>
   240      </div>
   241    {{/if}}
   242  
   243    {{#if (and model.preemptedAllocations.isFulfilled model.preemptedAllocations.length)}}
   244      <div class="boxed-section" data-test-preemptions>
   245        <div class="boxed-section-head">Preempted Allocations</div>
   246        <div class="boxed-section-body">
   247          {{#list-table
   248            source=model.preemptedAllocations
   249            class="allocations is-isolated" as |t|}}
   250            {{#t.head}}
   251              <th class="is-narrow"></th>
   252              <th>ID</th>
   253              <th>Task Group</th>
   254              <th>Created</th>
   255              <th>Modified</th>
   256              <th>Status</th>
   257              <th>Version</th>
   258              <th>Node</th>
   259              <th>CPU</th>
   260              <th>Memory</th>
   261            {{/t.head}}
   262            {{#t.body as |row|}}
   263              {{allocation-row allocation=row.model context="job" data-test-allocation=row.model.id}}
   264            {{/t.body}}
   265          {{/list-table}}
   266        </div>
   267      </div>
   268    {{/if}}
   269  </section>