Use page-layout for job routes

hashicorp · Jul 30, 2018 · 7aeba80 · 7aeba80
1 parent cd3f8ab
commit 7aeba80
Show file tree

Hide file tree

Showing 12 changed files with 226 additions and 260 deletions.
diff --git a/ui/app/templates/components/job-page/parts/body.hbs b/ui/app/templates/components/job-page/parts/body.hbs
@@ -1,6 +1,4 @@
-{{#gutter-menu class="page-body"}}
-  {{partial "jobs/job/subnav"}}
-  <section class="section">
-    {{yield}}
-  </section>
-{{/gutter-menu}}
+{{partial "jobs/job/subnav"}}
+<section class="section">
+  {{yield}}
+</section>
diff --git a/ui/app/templates/jobs.hbs b/ui/app/templates/jobs.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/jobs/index.hbs b/ui/app/templates/jobs/index.hbs
@@ -1,60 +1,58 @@
-{{#gutter-menu class="page-body"}}
-  <section class="section">
-    {{#if isForbidden}}
-      {{partial "partials/forbidden-message"}}
-    {{else}}
-      {{#if filteredJobs.length}}
-        <div class="content">
-          <div>{{search-box data-test-jobs-search searchTerm=(mut searchTerm) placeholder="Search jobs..."}}</div>
-        </div>
-      {{/if}}
-      {{#list-pagination
-        source=sortedJobs
-        size=pageSize
-        page=currentPage as |p|}}
-        {{#list-table
-          source=p.list
-          sortProperty=sortProperty
-          sortDescending=sortDescending
-          class="with-foot" as |t|}}
-          {{#t.head}}
-            {{#t.sort-by prop="name"}}Name{{/t.sort-by}}
-            {{#t.sort-by prop="status"}}Status{{/t.sort-by}}
-            {{#t.sort-by prop="type"}}Type{{/t.sort-by}}
-            {{#t.sort-by prop="priority"}}Priority{{/t.sort-by}}
-            <th>Groups</th>
-            <th class="is-3">Summary</th>
-          {{/t.head}}
-          {{#t.body key="model.id" as |row|}}
-            {{job-row data-test-job-row job=row.model onClick=(action "gotoJob" row.model)}}
-          {{/t.body}}
-        {{/list-table}}
-        <div class="table-foot">
-          <nav class="pagination">
-            <div class="pagination-numbers">
-              {{p.startsAt}}&ndash;{{p.endsAt}} of {{sortedJobs.length}}
-              {{#if searchTerm}}
-                <em>({{dec sortedJobs.length filteredJobs.length}} hidden by search term)</em>
-              {{/if}}
-            </div>
-            {{#p.prev class="pagination-previous"}} &lt; {{/p.prev}}
-            {{#p.next class="pagination-next"}} &gt; {{/p.next}}
-            <ul class="pagination-list"></ul>
-          </nav>
-        </div>
-      {{else}}
-        <div data-test-empty-jobs-list class="empty-message">
-          {{#if (eq filteredJobs.length 0)}}
-            <h3 data-test-empty-jobs-list-headline class="empty-message-headline">No Jobs</h3>
-            <p class="empty-message-body">
-              The cluster is currently empty.
-            </p>
-          {{else if searchTerm}}
-            <h3 data-test-empty-jobs-list-headline class="empty-message-headline">No Matches</h3>
-            <p class="empty-message-body">No jobs match the term <strong>{{searchTerm}}</strong></p>
-          {{/if}}
-        </div>
-      {{/list-pagination}}
+<section class="section">
+  {{#if isForbidden}}
+    {{partial "partials/forbidden-message"}}
+  {{else}}
+    {{#if filteredJobs.length}}
+      <div class="content">
+        <div>{{search-box data-test-jobs-search searchTerm=(mut searchTerm) placeholder="Search jobs..."}}</div>
+      </div>
     {{/if}}
-  </section>
-{{/gutter-menu}}
+    {{#list-pagination
+      source=sortedJobs
+      size=pageSize
+      page=currentPage as |p|}}
+      {{#list-table
+        source=p.list
+        sortProperty=sortProperty
+        sortDescending=sortDescending
+        class="with-foot" as |t|}}
+        {{#t.head}}
+          {{#t.sort-by prop="name"}}Name{{/t.sort-by}}
+          {{#t.sort-by prop="status"}}Status{{/t.sort-by}}
+          {{#t.sort-by prop="type"}}Type{{/t.sort-by}}
+          {{#t.sort-by prop="priority"}}Priority{{/t.sort-by}}
+          <th>Groups</th>
+          <th class="is-3">Summary</th>
+        {{/t.head}}
+        {{#t.body key="model.id" as |row|}}
+          {{job-row data-test-job-row job=row.model onClick=(action "gotoJob" row.model)}}
+        {{/t.body}}
+      {{/list-table}}
+      <div class="table-foot">
+        <nav class="pagination">
+          <div class="pagination-numbers">
+            {{p.startsAt}}&ndash;{{p.endsAt}} of {{sortedJobs.length}}
+            {{#if searchTerm}}
+              <em>({{dec sortedJobs.length filteredJobs.length}} hidden by search term)</em>
+            {{/if}}
+          </div>
+          {{#p.prev class="pagination-previous"}} &lt; {{/p.prev}}
+          {{#p.next class="pagination-next"}} &gt; {{/p.next}}
+          <ul class="pagination-list"></ul>
+        </nav>
+      </div>
+    {{else}}
+      <div data-test-empty-jobs-list class="empty-message">
+        {{#if (eq filteredJobs.length 0)}}
+          <h3 data-test-empty-jobs-list-headline class="empty-message-headline">No Jobs</h3>
+          <p class="empty-message-body">
+            The cluster is currently empty.
+          </p>
+        {{else if searchTerm}}
+          <h3 data-test-empty-jobs-list-headline class="empty-message-headline">No Matches</h3>
+          <p class="empty-message-body">No jobs match the term <strong>{{searchTerm}}</strong></p>
+        {{/if}}
+      </div>
+    {{/list-pagination}}
+  {{/if}}
+</section>
diff --git a/ui/app/templates/jobs/job/definition.hbs b/ui/app/templates/jobs/job/definition.hbs
@@ -1,10 +1,8 @@
-{{#gutter-menu class="page-body"}}
-  {{partial "jobs/job/subnav"}}
-  <section class="section">
-    <div class="boxed-section">
-      <div class="boxed-section-body is-dark">
-        {{json-viewer data-test-definition-view json=model.definition}}
-      </div>
+{{partial "jobs/job/subnav"}}
+<section class="section">
+  <div class="boxed-section">
+    <div class="boxed-section-body is-dark">
+      {{json-viewer data-test-definition-view json=model.definition}}
     </div>
-  </section>
-{{/gutter-menu}}
+  </div>
+</section>
diff --git a/ui/app/templates/jobs/job/deployments.hbs b/ui/app/templates/jobs/job/deployments.hbs
@@ -1,6 +1,4 @@
-{{#gutter-menu class="page-body"}}
-  {{partial "jobs/job/subnav"}}
-  <section class="section">
-    {{job-deployments-stream deployments=model.deployments}}
-  </section>
-{{/gutter-menu}}
+{{partial "jobs/job/subnav"}}
+<section class="section">
+  {{job-deployments-stream deployments=model.deployments}}
+</section>
diff --git a/ui/app/templates/jobs/job/evaluations.hbs b/ui/app/templates/jobs/job/evaluations.hbs
@@ -1,49 +1,46 @@
-{{#gutter-menu class="page-body"}}
-  {{partial "jobs/job/subnav"}}
-  <section class="section">
-    <div class="boxed-section">
-      <div class="boxed-section-head">
-        Evaluations
-      </div>
-      <div class="boxed-section-body {{if sortedEvaluations.length "is-full-bleed"}}">
-        {{#if sortedEvaluations.length}}
-          {{#list-table
-            source=sortedEvaluations
-            sortProperty=sortProperty
-            sortDescending=sortDescending as |t|}}
-            {{#t.head}}
-              <th>ID</th>
-              {{#t.sort-by prop="priority"}}Priority{{/t.sort-by}}
-              {{#t.sort-by prop="triggeredBy"}}Triggered By{{/t.sort-by}}
-              {{#t.sort-by prop="status"}}Status{{/t.sort-by}}
-              {{#t.sort-by prop="hasPlacementFailures"}}Placement Failures{{/t.sort-by}}
-            {{/t.head}}
-            {{#t.body as |row|}}
-              <tr data-test-evaluation="{{row.model.shortId}}">
-                <td data-test-id>{{row.model.shortId}}</td>
-                <td data-test-priority>{{row.model.priority}}</td>
-                <td data-test-triggered-by>{{row.model.triggeredBy}}</td>
-                <td data-test-status>{{row.model.status}}</td>
-                <td data-test-blocked>
-                  {{#if (eq row.model.status "blocked")}}
-                    N/A - In Progress
-                  {{else if row.model.hasPlacementFailures}}
-                    True
-                  {{else}}
-                    False
-                  {{/if}}
-                </td>
-              </tr>
-            {{/t.body}}
-          {{/list-table}}
-        {{else}}
-          <div data-test-empty-evaluations-list class="empty-message">
-            <h3 data-test-empty-evaluations-list-headline class="empty-message-headline">No Evaluations</h3>
-            <p class="empty-message-body">This is most likely due to garbage collection.</p>
-          </div>
-        {{/if}}
+{{partial "jobs/job/subnav"}}
+<section class="section">
+  <div class="boxed-section">
+    <div class="boxed-section-head">
+      Evaluations
     </div>
-    </div>
-  </section>
-{{/gutter-menu}}
-
+    <div class="boxed-section-body {{if sortedEvaluations.length "is-full-bleed"}}">
+      {{#if sortedEvaluations.length}}
+        {{#list-table
+          source=sortedEvaluations
+          sortProperty=sortProperty
+          sortDescending=sortDescending as |t|}}
+          {{#t.head}}
+            <th>ID</th>
+            {{#t.sort-by prop="priority"}}Priority{{/t.sort-by}}
+            {{#t.sort-by prop="triggeredBy"}}Triggered By{{/t.sort-by}}
+            {{#t.sort-by prop="status"}}Status{{/t.sort-by}}
+            {{#t.sort-by prop="hasPlacementFailures"}}Placement Failures{{/t.sort-by}}
+          {{/t.head}}
+          {{#t.body as |row|}}
+            <tr data-test-evaluation="{{row.model.shortId}}">
+              <td data-test-id>{{row.model.shortId}}</td>
+              <td data-test-priority>{{row.model.priority}}</td>
+              <td data-test-triggered-by>{{row.model.triggeredBy}}</td>
+              <td data-test-status>{{row.model.status}}</td>
+              <td data-test-blocked>
+                {{#if (eq row.model.status "blocked")}}
+                  N/A - In Progress
+                {{else if row.model.hasPlacementFailures}}
+                  True
+                {{else}}
+                  False
+                {{/if}}
+              </td>
+            </tr>
+          {{/t.body}}
+        {{/list-table}}
+      {{else}}
+        <div data-test-empty-evaluations-list class="empty-message">
+          <h3 data-test-empty-evaluations-list-headline class="empty-message-headline">No Evaluations</h3>
+          <p class="empty-message-body">This is most likely due to garbage collection.</p>
+        </div>
+      {{/if}}
+  </div>
+  </div>
+</section>
diff --git a/ui/app/templates/jobs/job/loading.hbs b/ui/app/templates/jobs/job/loading.hbs
@@ -1,4 +1,2 @@
-{{#gutter-menu class="page-body"}}
-  {{partial "jobs/job/subnav"}}
-  <section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>
-{{/gutter-menu}}
+{{partial "jobs/job/subnav"}}
+<section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>