-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Use page-layout for allocations routes
- Loading branch information
1 parent
0d0a7f4
commit cd3f8ab
Showing
4 changed files
with
164 additions
and
173 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,3 @@ | ||
| <div class="page-layout"> | ||
| {{#global-header class="page-header"}} | ||
| {{app-breadcrumbs}} | ||
| {{/global-header}} | ||
| {{#page-layout}} | ||
| {{outlet}} | ||
| </div> | ||
| {{/page-layout}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,100 +1,98 @@ | ||
| {{#gutter-menu class="page-body"}} | ||
| <section class="section"> | ||
| <h1 data-test-title class="title"> | ||
| Allocation {{model.name}} | ||
| <span class="bumper-left tag {{model.statusClass}}">{{model.clientStatus}}</span> | ||
| <span class="tag is-hollow is-small no-text-transform">{{model.id}}</span> | ||
| </h1> | ||
| <section class="section"> | ||
| <h1 data-test-title class="title"> | ||
| Allocation {{model.name}} | ||
| <span class="bumper-left tag {{model.statusClass}}">{{model.clientStatus}}</span> | ||
| <span class="tag is-hollow is-small no-text-transform">{{model.id}}</span> | ||
| </h1> | ||
|
|
||
| <div class="boxed-section is-small"> | ||
| <div data-test-allocation-details class="boxed-section-body inline-definitions"> | ||
| <span class="label">Allocation Details</span> | ||
| <span class="pair job-link"><span class="term">Job</span> | ||
| {{#link-to "jobs.job" model.job (query-params jobNamespace=model.job.namespace.id) data-test-job-link}}{{model.job.name}}{{/link-to}} | ||
| </span> | ||
| <span class="pair node-link"><span class="term">Client</span> | ||
| {{#link-to "clients.client" model.node data-test-client-link}}{{model.node.shortId}}{{/link-to}} | ||
| </span> | ||
| </div> | ||
| <div class="boxed-section is-small"> | ||
| <div data-test-allocation-details class="boxed-section-body inline-definitions"> | ||
| <span class="label">Allocation Details</span> | ||
| <span class="pair job-link"><span class="term">Job</span> | ||
| {{#link-to "jobs.job" model.job (query-params jobNamespace=model.job.namespace.id) data-test-job-link}}{{model.job.name}}{{/link-to}} | ||
| </span> | ||
| <span class="pair node-link"><span class="term">Client</span> | ||
| {{#link-to "clients.client" model.node data-test-client-link}}{{model.node.shortId}}{{/link-to}} | ||
| </span> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="boxed-section"> | ||
| <div class="boxed-section-head"> | ||
| Tasks | ||
| </div> | ||
| <div class="boxed-section-body is-full-bleed"> | ||
| {{#list-table | ||
| source=sortedStates | ||
| sortProperty=sortProperty | ||
| sortDescending=sortDescending | ||
| class="is-striped" as |t|}} | ||
| {{#t.head}} | ||
| <th class="is-narrow"></th> | ||
| {{#t.sort-by prop="name"}}Name{{/t.sort-by}} | ||
| {{#t.sort-by prop="state"}}State{{/t.sort-by}} | ||
| <th>Last Event</th> | ||
| {{#t.sort-by prop="events.lastObject.time"}}Time{{/t.sort-by}} | ||
| <th>Addresses</th> | ||
| {{/t.head}} | ||
| {{#t.body as |row|}} | ||
| <tr | ||
| data-test-task-row={{row.model.task.name}} | ||
| onclick={{action "taskClick" row.model.allocation row.model}} | ||
| class="is-interactive"> | ||
| <td class="is-narrow"> | ||
| {{#if (not row.model.driverStatus.healthy)}} | ||
| <span data-test-icon="unhealthy-driver" class="tooltip text-center" aria-label="{{row.model.driver}} is unhealthy"> | ||
| {{x-icon "warning" class="is-warning"}} | ||
| </span> | ||
| {{/if}} | ||
| </td> | ||
| <td data-test-name> | ||
| {{#link-to "allocations.allocation.task" row.model.allocation row.model class="is-primary"}} | ||
| {{row.model.name}} | ||
| {{/link-to}} | ||
| </td> | ||
| <td data-test-state>{{row.model.state}}</td> | ||
| <td data-test-message> | ||
| {{#if row.model.events.lastObject.message}} | ||
| {{row.model.events.lastObject.message}} | ||
| {{else}} | ||
| <em>No message</em> | ||
| {{/if}} | ||
| </td> | ||
| <td data-test-time>{{moment-format row.model.events.lastObject.time "MM/DD/YY HH:mm:ss"}}</td> | ||
| <td data-test-ports> | ||
| <ul> | ||
| {{#with row.model.resources.networks.firstObject as |network|}} | ||
| {{#each network.reservedPorts as |port|}} | ||
| <li data-test-port> | ||
| <strong>{{port.Label}}:</strong> | ||
| <a href="http://{{network.ip}}:{{port.Value}}" target="_blank">{{network.ip}}:{{port.Value}}</a> | ||
| </li> | ||
| {{/each}} | ||
| {{#each network.dynamicPorts as |port|}} | ||
| <li> | ||
| <strong>{{port.Label}}:</strong> | ||
| <a href="http://{{network.ip}}:{{port.Value}}" target="_blank">{{network.ip}}:{{port.Value}}</a> | ||
| </li> | ||
| {{/each}} | ||
| {{/with}} | ||
| </ul> | ||
| </td> | ||
| </tr> | ||
| {{/t.body}} | ||
| {{/list-table}} | ||
| </div> | ||
| <div class="boxed-section"> | ||
| <div class="boxed-section-head"> | ||
| Tasks | ||
| </div> | ||
| <div class="boxed-section-body is-full-bleed"> | ||
| {{#list-table | ||
| source=sortedStates | ||
| sortProperty=sortProperty | ||
| sortDescending=sortDescending | ||
| class="is-striped" as |t|}} | ||
| {{#t.head}} | ||
| <th class="is-narrow"></th> | ||
| {{#t.sort-by prop="name"}}Name{{/t.sort-by}} | ||
| {{#t.sort-by prop="state"}}State{{/t.sort-by}} | ||
| <th>Last Event</th> | ||
| {{#t.sort-by prop="events.lastObject.time"}}Time{{/t.sort-by}} | ||
| <th>Addresses</th> | ||
| {{/t.head}} | ||
| {{#t.body as |row|}} | ||
| <tr | ||
| data-test-task-row={{row.model.task.name}} | ||
| onclick={{action "taskClick" row.model.allocation row.model}} | ||
| class="is-interactive"> | ||
| <td class="is-narrow"> | ||
| {{#if (not row.model.driverStatus.healthy)}} | ||
| <span data-test-icon="unhealthy-driver" class="tooltip text-center" aria-label="{{row.model.driver}} is unhealthy"> | ||
| {{x-icon "warning" class="is-warning"}} | ||
| </span> | ||
| {{/if}} | ||
| </td> | ||
| <td data-test-name> | ||
| {{#link-to "allocations.allocation.task" row.model.allocation row.model class="is-primary"}} | ||
| {{row.model.name}} | ||
| {{/link-to}} | ||
| </td> | ||
| <td data-test-state>{{row.model.state}}</td> | ||
| <td data-test-message> | ||
| {{#if row.model.events.lastObject.message}} | ||
| {{row.model.events.lastObject.message}} | ||
| {{else}} | ||
| <em>No message</em> | ||
| {{/if}} | ||
| </td> | ||
| <td data-test-time>{{moment-format row.model.events.lastObject.time "MM/DD/YY HH:mm:ss"}}</td> | ||
| <td data-test-ports> | ||
| <ul> | ||
| {{#with row.model.resources.networks.firstObject as |network|}} | ||
| {{#each network.reservedPorts as |port|}} | ||
| <li data-test-port> | ||
| <strong>{{port.Label}}:</strong> | ||
| <a href="http://{{network.ip}}:{{port.Value}}" target="_blank">{{network.ip}}:{{port.Value}}</a> | ||
| </li> | ||
| {{/each}} | ||
| {{#each network.dynamicPorts as |port|}} | ||
| <li> | ||
| <strong>{{port.Label}}:</strong> | ||
| <a href="http://{{network.ip}}:{{port.Value}}" target="_blank">{{network.ip}}:{{port.Value}}</a> | ||
| </li> | ||
| {{/each}} | ||
| {{/with}} | ||
| </ul> | ||
| </td> | ||
| </tr> | ||
| {{/t.body}} | ||
| {{/list-table}} | ||
| </div> | ||
| </div> | ||
|
|
||
| {{#if model.hasRescheduleEvents}} | ||
| <div class="boxed-section" data-test-reschedule-events> | ||
| <div class="boxed-section-head is-hollow"> | ||
| Reschedule Events | ||
| </div> | ||
| <div class="boxed-section-body"> | ||
| {{reschedule-event-timeline allocation=model}} | ||
| </div> | ||
| {{#if model.hasRescheduleEvents}} | ||
| <div class="boxed-section" data-test-reschedule-events> | ||
| <div class="boxed-section-head is-hollow"> | ||
| Reschedule Events | ||
| </div> | ||
| <div class="boxed-section-body"> | ||
| {{reschedule-event-timeline allocation=model}} | ||
| </div> | ||
| {{/if}} | ||
| </section> | ||
| {{/gutter-menu}} | ||
| </div> | ||
| {{/if}} | ||
| </section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,85 +1,83 @@ | ||
| {{#gutter-menu class="page-body"}} | ||
| {{partial "allocations/allocation/task/subnav"}} | ||
| <section class="section"> | ||
| <h1 class="title" data-test-title> | ||
| {{model.name}} | ||
| <span class="bumper-left tag {{model.stateClass}}" data-test-state>{{model.state}}</span> | ||
| </h1> | ||
| {{partial "allocations/allocation/task/subnav"}} | ||
| <section class="section"> | ||
| <h1 class="title" data-test-title> | ||
| {{model.name}} | ||
| <span class="bumper-left tag {{model.stateClass}}" data-test-state>{{model.state}}</span> | ||
| </h1> | ||
|
|
||
| <div class="boxed-section is-small"> | ||
| <div class="boxed-section-body inline-definitions"> | ||
| <span class="label">Task Details</span> | ||
| <span class="pair" data-test-started-at> | ||
| <span class="term">Started At</span> | ||
| {{moment-format model.startedAt "MM/DD/YY HH:mm:ss"}} | ||
| </span> | ||
| {{#if model.finishedAt}} | ||
| <span class="pair"> | ||
| <span class="term">Finished At</span> | ||
| {{moment-format model.finishedAt "MM/DD/YY HH:mm:ss"}} | ||
| </span> | ||
| {{/if}} | ||
| <div class="boxed-section is-small"> | ||
| <div class="boxed-section-body inline-definitions"> | ||
| <span class="label">Task Details</span> | ||
| <span class="pair" data-test-started-at> | ||
| <span class="term">Started At</span> | ||
| {{moment-format model.startedAt "MM/DD/YY HH:mm:ss"}} | ||
| </span> | ||
| {{#if model.finishedAt}} | ||
| <span class="pair"> | ||
| <span class="term">Driver</span> | ||
| {{model.task.driver}} | ||
| <span class="term">Finished At</span> | ||
| {{moment-format model.finishedAt "MM/DD/YY HH:mm:ss"}} | ||
| </span> | ||
| </div> | ||
| {{/if}} | ||
| <span class="pair"> | ||
| <span class="term">Driver</span> | ||
| {{model.task.driver}} | ||
| </span> | ||
| </div> | ||
| </div> | ||
|
|
||
| {{#if ports.length}} | ||
| <div class="boxed-section" data-test-task-addresses> | ||
| <div class="boxed-section-head"> | ||
| Addresses | ||
| </div> | ||
| <div class="boxed-section-body is-full-bleed"> | ||
| {{#list-table source=ports as |t|}} | ||
| {{#t.head}} | ||
| <th class="is-1">Dynamic?</th> | ||
| <th class="is-2">Name</th> | ||
| <th>Address</th> | ||
| {{/t.head}} | ||
| {{#t.body as |row|}} | ||
| <tr data-test-task-address> | ||
| <td data-test-task-address-is-dynamic>{{if row.model.isDynamic "Yes" "No"}}</td> | ||
| <td data-test-task-address-name>{{row.model.name}}</td> | ||
| <td data-test-task-address-address> | ||
| <a href="http://{{network.ip}}:{{row.model.port}}" target="_blank"> | ||
| {{network.ip}}:{{row.model.port}} | ||
| </a> | ||
| </td> | ||
| </tr> | ||
| {{/t.body}} | ||
| {{/list-table}} | ||
| </div> | ||
| </div> | ||
| {{/if}} | ||
|
|
||
| <div class="boxed-section"> | ||
| {{#if ports.length}} | ||
| <div class="boxed-section" data-test-task-addresses> | ||
| <div class="boxed-section-head"> | ||
| Recent Events | ||
| Addresses | ||
| </div> | ||
| <div class="boxed-section-body is-full-bleed"> | ||
| {{#list-table source=(reverse model.events) class="is-striped" as |t|}} | ||
| {{#list-table source=ports as |t|}} | ||
| {{#t.head}} | ||
| <th class="is-3">Time</th> | ||
| <th class="is-1">Type</th> | ||
| <th>Description</th> | ||
| <th class="is-1">Dynamic?</th> | ||
| <th class="is-2">Name</th> | ||
| <th>Address</th> | ||
| {{/t.head}} | ||
| {{#t.body as |row|}} | ||
| <tr data-test-task-event> | ||
| <td data-test-task-event-time>{{moment-format row.model.time "MM/DD/YY HH:mm:ss"}}</td> | ||
| <td data-test-task-event-type>{{row.model.type}}</td> | ||
| <td data-test-task-event-message> | ||
| {{#if row.model.message}} | ||
| {{row.model.message}} | ||
| {{else}} | ||
| <em>No message</em> | ||
| {{/if}} | ||
| <tr data-test-task-address> | ||
| <td data-test-task-address-is-dynamic>{{if row.model.isDynamic "Yes" "No"}}</td> | ||
| <td data-test-task-address-name>{{row.model.name}}</td> | ||
| <td data-test-task-address-address> | ||
| <a href="http://{{network.ip}}:{{row.model.port}}" target="_blank"> | ||
| {{network.ip}}:{{row.model.port}} | ||
| </a> | ||
| </td> | ||
| </tr> | ||
| {{/t.body}} | ||
| {{/list-table}} | ||
| </div> | ||
| </div> | ||
| </section> | ||
| {{/gutter-menu}} | ||
| {{/if}} | ||
|
|
||
| <div class="boxed-section"> | ||
| <div class="boxed-section-head"> | ||
| Recent Events | ||
| </div> | ||
| <div class="boxed-section-body is-full-bleed"> | ||
| {{#list-table source=(reverse model.events) class="is-striped" as |t|}} | ||
| {{#t.head}} | ||
| <th class="is-3">Time</th> | ||
| <th class="is-1">Type</th> | ||
| <th>Description</th> | ||
| {{/t.head}} | ||
| {{#t.body as |row|}} | ||
| <tr data-test-task-event> | ||
| <td data-test-task-event-time>{{moment-format row.model.time "MM/DD/YY HH:mm:ss"}}</td> | ||
| <td data-test-task-event-type>{{row.model.type}}</td> | ||
| <td data-test-task-event-message> | ||
| {{#if row.model.message}} | ||
| {{row.model.message}} | ||
| {{else}} | ||
| <em>No message</em> | ||
| {{/if}} | ||
| </td> | ||
| </tr> | ||
| {{/t.body}} | ||
| {{/list-table}} | ||
| </div> | ||
| </div> | ||
| </section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,4 @@ | ||
| {{#gutter-menu class="page-body"}} | ||
| {{partial "allocations/allocation/task/subnav"}} | ||
| <section class="section"> | ||
| {{task-log data-test-task-log allocation=model.allocation task=model.name}} | ||
| </section> | ||
| {{/gutter-menu}} | ||
| {{partial "allocations/allocation/task/subnav"}} | ||
| <section class="section"> | ||
| {{task-log data-test-task-log allocation=model.allocation task=model.name}} | ||
| </section> |