Remold the allocation detail and task detail pages

Now that there is a task detail page, some of the content from the allocation detail page is better suited there.
hashicorp · Nov 14, 2017 · b3dc736 · b3dc736
1 parent d820c72
commit b3dc736
Show file tree

Hide file tree

Showing 11 changed files with 443 additions and 167 deletions.
diff --git a/ui/app/controllers/allocations/allocation/task/index.js b/ui/app/controllers/allocations/allocation/task/index.js
@@ -0,0 +1,23 @@
+import Ember from 'ember';
+
+const { Controller, computed } = Ember;
+
+export default Controller.extend({
+  network: computed.alias('model.resources.networks.firstObject'),
+  ports: computed('network.reservedPorts.[]', 'network.dynamicPorts.[]', function() {
+    return this.get('network.reservedPorts')
+      .map(port => ({
+        name: port.Label,
+        port: port.Value,
+        isDynamic: false,
+      }))
+      .concat(
+        this.get('network.dynamicPorts').map(port => ({
+          name: port.Label,
+          port: port.Value,
+          isDynamic: true,
+        }))
+      )
+      .sortBy('name');
+  }),
+});
diff --git a/ui/app/models/task-state.js b/ui/app/models/task-state.js
@@ -22,4 +22,15 @@ export default Fragment.extend({
 
   resources: fragment('resources'),
   events: fragmentArray('task-event'),
+
+  stateClass: computed('state', function() {
+    const classMap = {
+      pending: 'is-pending',
+      running: 'is-primary',
+      finished: 'is-complete',
+      failed: 'is-error',
+    };
+
+    return classMap[this.get('state')] || 'is-dark';
+  }),
 });
diff --git a/ui/app/styles/components/breadcrumbs.scss b/ui/app/styles/components/breadcrumbs.scss
@@ -4,11 +4,6 @@
     opacity: 0.7;
     text-decoration: none;
 
-    &:hover {
-      color: $primary-invert;
-      opacity: 1;
-    }
-
     + .breadcrumb {
       margin-left: 15px;
       &::before {
@@ -23,4 +18,9 @@
       opacity: 1;
     }
   }
+
+  a.breadcrumb:hover {
+    color: $primary-invert;
+    opacity: 1;
+  }
 }
diff --git a/ui/app/templates/allocations/allocation/index.hbs b/ui/app/templates/allocations/allocation/index.hbs
@@ -1,5 +1,8 @@
 {{#global-header class="page-header"}}
-  Allocations
+  <span class="breadcrumb">Allocations</span>
+  {{#link-to "allocations.allocation" model class="breadcrumb"}}
+    {{model.shortId}}
+  {{/link-to}}
 {{/global-header}}
 {{#gutter-menu class="page-body"}}
   <section class="section">
@@ -21,92 +24,59 @@
       </div>
     </div>
 
-    <div class="message">
-      <div class="message-header">
+    <div class="boxed-section">
+      <div class="boxed-section-head">
         Tasks
       </div>
-      {{#list-table
-        source=sortedStates
-        sortProperty=sortProperty
-        sortDescending=sortDescending
-        class="is-striped tasks" as |t|}}
-        {{#t.head}}
-          {{#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>
-            <td>
-              {{#link-to "allocations.allocation.task" row.model.allocation row.model}}
-                {{row.model.task.name}}
-              {{/link-to}}
-            </td>
-            <td>{{row.model.state}}</td>
-            <td>
-              {{#if row.model.events.lastObject.displayMessage}}
-                {{row.model.events.lastObject.displayMessage}}
-              {{else}}
-                <em>No message</em>
-              {{/if}}
-            </td>
-            <td>{{moment-format row.model.events.lastObject.time "MM/DD/YY HH:mm:ss [UTC]"}}</td>
-            <td>
-              <ul>
-                {{#each row.model.resources.networks.firstObject.reservedPorts as |port|}}
-                  <li>
-                    <strong>{{port.Label}}:</strong>
-                    <a href="http://{{row.model.allocation.node.address}}:{{port.Value}}" target="_blank">{{row.model.allocation.node.address}}:{{port.Value}}</a>
-                  </li>
-                {{/each}}
-                {{#each row.model.resources.networks.firstObject.dynamicPorts as |port|}}
-                  <li>
-                    <strong>{{port.Label}}:</strong>
-                    <a href="http://{{row.model.allocation.node.address}}:{{port.Value}}" target="_blank">{{row.model.allocation.node.address}}:{{port.Value}}</a>
-                  </li>
-                {{/each}}
-              </ul>
-            </td>
-          </tr>
-        {{/t.body}}
-      {{/list-table}}
-    </div>
-
-    {{#each model.states as |state|}}
-      <div class="message task-state-events">
-        <div class="message-header">
-          {{state.task.name}} ({{state.state}}) Started: {{moment-format state.startedAt "MM/DD/YY HH:mm:ss [UTC]"}}
-          {{#unless state.isActive}}
-            Ended: {{moment-format state.finishedAt "MM/DD/YY HH:mm:ss [UTC]"}}
-          {{/unless}}
-        </div>
-        <table class="table is-striped task-events">
-          <thead>
+      <div class="boxed-section-body is-full-bleed">
+        {{#list-table
+          source=sortedStates
+          sortProperty=sortProperty
+          sortDescending=sortDescending
+          class="is-striped tasks" as |t|}}
+          {{#t.head}}
+            {{#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>
-              <td class="is-3">Time</td>
-              <td class="is-1">Type</td>
-              <td>Description</td>
+              <td>
+                {{#link-to "allocations.allocation.task" row.model.allocation row.model}}
+                  {{row.model.task.name}}
+                {{/link-to}}
+              </td>
+              <td>{{row.model.state}}</td>
+              <td>
+                {{#if row.model.events.lastObject.displayMessage}}
+                  {{row.model.events.lastObject.displayMessage}}
+                {{else}}
+                  <em>No message</em>
+                {{/if}}
+              </td>
+              <td>{{moment-format row.model.events.lastObject.time "MM/DD/YY HH:mm:ss [UTC]"}}</td>
+              <td>
+                <ul>
+                  {{#each row.model.resources.networks.firstObject.reservedPorts as |port|}}
+                    <li>
+                      <strong>{{port.Label}}:</strong>
+                      <a href="http://{{row.model.allocation.node.address}}:{{port.Value}}" target="_blank">{{row.model.allocation.node.address}}:{{port.Value}}</a>
+                    </li>
+                  {{/each}}
+                  {{#each row.model.resources.networks.firstObject.dynamicPorts as |port|}}
+                    <li>
+                      <strong>{{port.Label}}:</strong>
+                      <a href="http://{{row.model.allocation.node.address}}:{{port.Value}}" target="_blank">{{row.model.allocation.node.address}}:{{port.Value}}</a>
+                    </li>
+                  {{/each}}
+                </ul>
+              </td>
             </tr>
-          </thead>
-          <tbody>
-            {{#each (reverse state.events) as |event|}}
-              <tr>
-                <td>{{moment-format event.time "MM/DD/YY HH:mm:ss [UTC]"}}</td>
-                <td>{{event.type}}</td>
-                <td>
-                  {{#if event.displayMessage}}
-                    {{event.displayMessage}}
-                  {{else}}
-                    <em>No message</em>
-                  {{/if}}
-                </td>
-              </tr>
-            {{/each}}
-          </tbody>
-        </table>
+          {{/t.body}}
+        {{/list-table}}
       </div>
-   {{/each}}
+    </div>
   </section>
 {{/gutter-menu}}
diff --git a/ui/app/templates/allocations/allocation/task/index.hbs b/ui/app/templates/allocations/allocation/task/index.hbs
@@ -1,12 +1,94 @@
 {{#global-header class="page-header"}}
+  <span class="breadcrumb">Allocations</span>
+  {{#link-to "allocations.allocation" model.allocation class="breadcrumb"}}
+    {{model.allocation.shortId}}
+  {{/link-to}}
+  {{#link-to "allocations.allocation.task" model.allocation model class="breadcrumb"}}
+    {{model.name}}
+  {{/link-to}}
 {{/global-header}}
 {{#gutter-menu class="page-body"}}
   {{partial "allocations/allocation/task/subnav"}}
   <section class="section">
-    <ul>
-      <li>Name: {{model.name}}</li>
-      <li>State: {{model.state}}</li>
-      <li>CPU: {{model.resources.cpu}}</li>
-    </ul>
+    <h1 class="title">
+      {{model.name}}
+      <span class="bumper-left tag {{model.stateClass}}">{{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">
+          <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}}
+        <span class="pair">
+          <span class="term">Driver</span>
+          {{model.task.driver}}
+        </span>
+      </div>
+    </div>
+
+    {{#if ports.length}}
+      <div class="boxed-section">
+        <div class="boxed-section-head">
+          Addresses
+        </div>
+        <div class="boxed-section-body is-full-bleed">
+          {{#list-table source=ports class="addresses-list" 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>
+                <td>{{if row.model.isDynamic "Yes" "No"}}</td>
+                <td>{{row.model.name}}</td>
+                <td>
+                  <a href="http://{{model.allocation.node.address}}:{{row.model.port}}" target="_blank">
+                    {{model.allocation.node.address}}:{{row.model.port}}
+                  </a>
+                </td>
+              </tr>
+            {{/t.body}}
+          {{/list-table}}
+        </div>
+      </div>
+    {{/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 task-events" 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>
+              <td>{{moment-format row.model.time "MM/DD/YY HH:mm:ss"}}</td>
+              <td>{{row.model.type}}</td>
+              <td>
+                {{#if row.model.displayMessage}}
+                  {{row.model.displayMessage}}
+                {{else}}
+                  <em>No message</em>
+                {{/if}}
+              </td>
+            </tr>
+          {{/t.body}}
+        {{/list-table}}
+      </div>
+    </div>
   </section>
 {{/gutter-menu}}
diff --git a/ui/app/templates/allocations/allocation/task/subnav.hbs b/ui/app/templates/allocations/allocation/task/subnav.hbs
@@ -1,5 +1,5 @@
 <div class="tabs is-subnav">
   <ul>
-    <li>{{#link-to "allocations.allocation.task.index" task.allocation task activeClass="is-active"}}Overview{{/link-to}}</li>
+    <li>{{#link-to "allocations.allocation.task.index" model.allocation model activeClass="is-active"}}Overview{{/link-to}}</li>
   </ul>
 </div>
diff --git a/ui/mirage/common.js b/ui/mirage/common.js
@@ -41,8 +41,19 @@ export function generateNetworks(options = {}) {
       MBits: 10,
       ReservedPorts: Array(
         faker.random.number({
-          min: options.minPorts || 0,
-          max: options.maxPorts || 3,
+          min: options.minPorts != null ? options.minPorts : 0,
+          max: options.maxPorts != null ? options.maxPorts : 2,
+        })
+      )
+        .fill(null)
+        .map(() => ({
+          Label: faker.hacker.noun(),
+          Value: faker.random.number({ min: 5000, max: 60000 }),
+        })),
+      DynamicPorts: Array(
+        faker.random.number({
+          min: options.minPorts != null ? options.minPorts : 0,
+          max: options.maxPorts != null ? options.maxPorts : 2,
         })
       )
         .fill(null)

diff --git a/ui/mirage/factories/allocation.js b/ui/mirage/factories/allocation.js
@@ -36,6 +36,24 @@ export default Factory.extend({
     },
   }),
 
+  withoutTaskWithPorts: trait({
+    afterCreate(allocation, server) {
+      const taskGroup = server.db.taskGroups.findBy({ name: allocation.taskGroup });
+      const resources = taskGroup.taskIds.map(id =>
+        server.create(
+          'task-resources',
+          {
+            allocation,
+            name: server.db.tasks.find(id).name,
+          },
+          'withoutReservedPorts'
+        )
+      );
+
+      allocation.update({ taskResourcesIds: resources.mapBy('id') });
+    },
+  }),
+
   afterCreate(allocation, server) {
     Ember.assert(
       '[Mirage] No jobs! make sure jobs are created before allocations',

diff --git a/ui/mirage/factories/task-resources.js b/ui/mirage/factories/task-resources.js
@@ -9,4 +9,8 @@ export default Factory.extend({
   withReservedPorts: trait({
     resources: () => generateResources({ networks: { minPorts: 1 } }),
   }),
+
+  withoutReservedPorts: trait({
+    resources: () => generateResources({ networks: { minPorts: 0, maxPorts: 0 } }),
+  }),
 });