Merge pull request #4533 from hashicorp/f-ui-refactor-page-chrome

UI: Refactor page chrome
hashicorp · Aug 6, 2018 · 11bc25b · 11bc25b
2 parents 6e80a28 + 7aeba80
commit 11bc25b
Show file tree

Hide file tree

Showing 39 changed files with 746 additions and 839 deletions.
diff --git a/ui/app/components/gutter-menu.js b/ui/app/components/gutter-menu.js
@@ -4,6 +4,7 @@ import { computed } from '@ember/object';
 
 export default Component.extend({
   system: service(),
+  router: service(),
 
   sortedNamespaces: computed('system.namespaces.@each.name', function() {
     const namespaces = this.get('system.namespaces').toArray() || [];
@@ -31,5 +32,11 @@ export default Component.extend({
     });
   }),
 
-  onNamespaceChange() {},
+  gotoJobsForNamespace(namespace) {
+    if (!namespace || !namespace.get('id')) return;
+
+    this.get('router').transitionTo('jobs', {
+      queryParams: { namespace: namespace.get('id') },
+    });
+  },
 });
diff --git a/ui/app/components/job-page/abstract.js b/ui/app/components/job-page/abstract.js
@@ -11,7 +11,6 @@ export default Component.extend({
   sortDescending: null,
 
   // Provide actions that require routing
-  onNamespaceChange() {},
   gotoTaskGroup() {},
   gotoJob() {},
 

diff --git a/ui/app/components/page-layout.js b/ui/app/components/page-layout.js
@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  classNames: ['page-layout'],
+});
diff --git a/ui/app/controllers/jobs.js b/ui/app/controllers/jobs.js
@@ -18,12 +18,6 @@ export default Controller.extend({
   // But query param defaults can't be CPs: https://github.com/emberjs/ember.js/issues/9819
   syncNamespaceService: forwardNamespace('jobNamespace', 'system.activeNamespace'),
   syncNamespaceParam: forwardNamespace('system.activeNamespace', 'jobNamespace'),
-
-  actions: {
-    refreshRoute() {
-      return true;
-    },
-  },
 });
 
 function forwardNamespace(source, destination) {

diff --git a/ui/app/controllers/jobs/index.js b/ui/app/controllers/jobs/index.js
@@ -58,9 +58,5 @@ export default Controller.extend(Sortable, Searchable, {
     gotoJob(job) {
       this.transitionToRoute('jobs.job', job.get('plainId'));
     },
-
-    refresh() {
-      this.send('refreshRoute');
-    },
   },
 });
diff --git a/ui/app/routes/jobs.js b/ui/app/routes/jobs.js
@@ -21,7 +21,7 @@ export default Route.extend(WithForbiddenState, {
 
   model() {
     return this.get('store')
-      .findAll('job')
+      .findAll('job', { reload: true })
       .catch(notifyForbidden(this));
   },
 

diff --git a/ui/app/routes/jobs/index.js b/ui/app/routes/jobs/index.js
@@ -10,10 +10,4 @@ export default Route.extend(WithWatchers, {
 
   watch: watchAll('job'),
   watchers: collect('watch'),
-
-  actions: {
-    refreshRoute() {
-      return true;
-    },
-  },
 });
diff --git a/ui/app/templates/allocations.hbs b/ui/app/templates/allocations.hbs
@@ -1,6 +1,3 @@
-<div class="page-layout">
-  {{#global-header class="page-header"}}
-    {{app-breadcrumbs}}
-  {{/global-header}}
+{{#page-layout}}
   {{outlet}}
-</div>
+{{/page-layout}}
diff --git a/ui/app/templates/allocations/allocation/index.hbs b/ui/app/templates/allocations/allocation/index.hbs
@@ -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>