github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/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    {{lifecycle-chart taskStates=model.states}}
    92  
    93    <div class="boxed-section">
    94      <div class="boxed-section-head">
    95        Tasks
    96      </div>
    97      <div class="boxed-section-body {{if sortedStates.length "is-full-bleed"}}">
    98        {{#if sortedStates.length}}
    99          {{#list-table
   100            source=sortedStates
   101            sortProperty=sortProperty
   102            sortDescending=sortDescending
   103            class="is-striped" as |t|}}
   104            {{#t.head}}
   105              <th class="is-narrow"></th>
   106              {{#t.sort-by prop="name"}}Name{{/t.sort-by}}
   107              {{#t.sort-by prop="state"}}State{{/t.sort-by}}
   108              <th>Last Event</th>
   109              {{#t.sort-by prop="events.lastObject.time"}}Time{{/t.sort-by}}
   110              <th>Volumes</th>
   111              <th>Addresses</th>
   112              <th>CPU</th>
   113              <th>Memory</th>
   114            {{/t.head}}
   115            {{#t.body as |row|}}
   116              {{task-row
   117                data-test-task-row=row.model.name
   118                task=row.model
   119                onClick=(action "taskClick" row.model.allocation row.model)}}
   120            {{/t.body}}
   121          {{/list-table}}
   122        {{else}}
   123          <div data-test-empty-tasks-list class="empty-message">
   124            <h3 data-test-empty-tasks-list-headline class="empty-message-headline">No Tasks</h3>
   125            <p data-test-empty-tasks-list-body class="empty-message-body">Allocations will not have tasks until they are in a running state.</p>
   126          </div>
   127        {{/if}}
   128      </div>
   129    </div>
   130  
   131    {{#if network.ports.length}}
   132      <div class="boxed-section" data-test-allocation-ports>
   133        <div class="boxed-section-head">
   134          Ports
   135        </div>
   136        <div class="boxed-section-body is-full-bleed">
   137          {{#list-table source=network.ports as |t|}}
   138            {{#t.head}}
   139              <th class="is-2">Name</th>
   140              <th class="is-1">Dynamic?</th>
   141              <th>Host Address</th>
   142              <th>Mapped Port</th>
   143            {{/t.head}}
   144            {{#t.body as |row|}}
   145              <tr data-test-allocation-port>
   146                <td data-test-allocation-port-name>{{row.model.name}}</td>
   147                <td data-test-allocation-port-is-dynamic>{{if row.model.isDynamic "Yes" "No"}}</td>
   148                <td data-test-allocation-port-address>
   149                  <a href="http://{{network.ip}}:{{row.model.port}}" target="_blank" rel="noopener noreferrer">{{network.ip}}:{{row.model.port}}</a>
   150                </td>
   151                <td data-test-allocation-port-to>{{row.model.to}}</td>
   152              </tr>
   153            {{/t.body}}
   154          {{/list-table}}
   155        </div>
   156      </div>
   157    {{/if}}
   158  
   159    {{#if services.length}}
   160      <div class="boxed-section">
   161        <div class="boxed-section-head">
   162          Services
   163        </div>
   164        <div class="boxed-section-body is-full-bleed">
   165          {{#list-table source=services as |t|}}
   166            {{#t.head}}
   167              <th class="is-2">Name</th>
   168              <th class="is-1">Port</th>
   169              <td>Tags</td>
   170              <td>Connect?</td>
   171              <td>Upstreams</td>
   172            {{/t.head}}
   173            {{#t.body as |row|}}
   174              <tr data-test-service>
   175                <td data-test-service-name>{{row.model.name}}</td>
   176                <td data-test-service-port>{{row.model.portLabel}}</td>
   177                <td data-test-service-tags>{{join ", " row.model.tags}}</td>
   178                <td data-test-service-connect>{{if row.model.connect "Yes" "No"}}</td>
   179                <td data-test-service-upstreams>
   180                  {{#each row.model.connect.sidecarService.proxy.upstreams as |upstream|}}
   181                    {{upstream.destinationName}}:{{upstream.localBindPort}}
   182                  {{/each}}
   183                </td>
   184              </tr>
   185            {{/t.body}}
   186          {{/list-table}}
   187        </div>
   188      </div>
   189    {{/if}}
   190  
   191    {{#if model.hasRescheduleEvents}}
   192      <div class="boxed-section" data-test-reschedule-events>
   193        <div class="boxed-section-head is-hollow">
   194          Reschedule Events
   195        </div>
   196        <div class="boxed-section-body">
   197          {{reschedule-event-timeline allocation=model}}
   198        </div>
   199      </div>
   200    {{/if}}
   201  
   202    {{#if model.wasPreempted}}
   203      <div class="boxed-section is-warning" data-test-was-preempted>
   204        <div class="boxed-section-head">Preempted By</div>
   205        <div class="boxed-section-body">
   206          {{#if (not preempter)}}
   207            <div class="empty-message">
   208              <h3 class="empty-message-headline">Allocation is gone</h3>
   209              <p class="empty-message-body">This allocation has been stopped and garbage collected.</p>
   210            </div>
   211          {{else}}
   212            <div class="boxed-section is-small">
   213              <div class="boxed-section-body inline-definitions">
   214                <span class="pair">
   215                  <span data-test-allocation-status class="tag {{preempter.statusClass}}">
   216                    {{preempter.clientStatus}}
   217                  </span>
   218                </span>
   219                <span class="pair">
   220                  <span class="term" data-test-allocation-name>{{preempter.name}}</span>
   221                  {{#link-to "allocations.allocation" preempter data-test-allocation-id}}{{preempter.shortId}}{{/link-to}}
   222                </span>
   223                <span class="pair job-link"><span class="term">Job</span>
   224                  {{#link-to "jobs.job" preempter.job (query-params jobNamespace=preempter.job.namespace.id) data-test-job-link}}{{preempter.job.name}}{{/link-to}}
   225                </span>
   226                <span class="pair job-priority"><span class="term">Priority</span>
   227                  <span data-test-job-priority>{{preempter.job.priority}}</span>
   228                </span>
   229                <span class="pair node-link"><span class="term">Client</span>
   230                  {{#link-to "clients.client" preempter.node data-test-client-link}}{{preempter.node.shortId}}{{/link-to}}
   231                </span>
   232                <span class="pair"><span class="term">Reserved CPU</span>
   233                  <span data-test-allocation-cpu>{{preempter.resources.cpu}} MHz</span>
   234                </span>
   235                <span class="pair"><span class="term">Reserved Memory</span>
   236                  <span data-test-allocation-memory>{{preempter.resources.memory}} MiB</span>
   237                </span>
   238              </div>
   239            </div>
   240          {{/if}}
   241        </div>
   242      </div>
   243    {{/if}}
   244  
   245    {{#if (and model.preemptedAllocations.isFulfilled model.preemptedAllocations.length)}}
   246      <div class="boxed-section" data-test-preemptions>
   247        <div class="boxed-section-head">Preempted Allocations</div>
   248        <div class="boxed-section-body">
   249          {{#list-table
   250            source=model.preemptedAllocations
   251            class="allocations is-isolated" as |t|}}
   252            {{#t.head}}
   253              <th class="is-narrow"></th>
   254              <th>ID</th>
   255              <th>Task Group</th>
   256              <th>Created</th>
   257              <th>Modified</th>
   258              <th>Status</th>
   259              <th>Version</th>
   260              <th>Node</th>
   261              <th>CPU</th>
   262              <th>Memory</th>
   263            {{/t.head}}
   264            {{#t.body as |row|}}
   265              {{allocation-row allocation=row.model context="job" data-test-allocation=row.model.id}}
   266            {{/t.body}}
   267          {{/list-table}}
   268        </div>
   269      </div>
   270    {{/if}}
   271  </section>