create sysbatch pages and components

hashicorp · Aug 27, 2021 · 3c50ac7 · 3c50ac7
1 parent 04e69f4
commit 3c50ac7
Show file tree

Hide file tree

Showing 14 changed files with 131 additions and 71 deletions.
diff --git a/ui/app/components/job-page/parts/job-client-summary.js b/ui/app/components/job-page/parts/job-client-summary.js
@@ -0,0 +1,25 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { classNames } from '@ember-decorators/component';
+import classic from 'ember-classic-decorator';
+
+@classic
+@classNames('boxed-section')
+export default class JobClientSummary extends Component {
+  @service store;
+
+  job = null;
+  jobClientStatus = null;
+
+  @computed
+  get isExpanded() {
+    const storageValue = window.localStorage.nomadExpandJobClientSummary;
+    return storageValue != null ? JSON.parse(storageValue) : true;
+  }
+
+  persist(item, isOpen) {
+    window.localStorage.nomadExpandJobClientSummary = isOpen;
+    this.notifyPropertyChange('isExpanded');
+  }
+}
diff --git a/ui/app/components/job-page/parts/summary.js b/ui/app/components/job-page/parts/summary.js
@@ -7,9 +7,12 @@ import classic from 'ember-classic-decorator';
 @classNames('boxed-section')
 export default class Summary extends Component {
   job = null;
+  forceCollapsed = false;
 
   @computed
   get isExpanded() {
+    if (this.forceCollapsed) return false;
+
     const storageValue = window.localStorage.nomadExpandJobSummary;
     return storageValue != null ? JSON.parse(storageValue) : true;
   }

diff --git a/ui/app/components/job-page/sysbatch.js b/ui/app/components/job-page/sysbatch.js
@@ -0,0 +1,15 @@
+import AbstractJobPage from './abstract';
+import classic from 'ember-classic-decorator';
+import { inject as service } from '@ember/service';
+import jobClientStatus from 'nomad-ui/utils/properties/job-client-status';
+
+@classic
+export default class Sysbatch extends AbstractJobPage {
+  @service store;
+
+  @jobClientStatus('nodes', 'job') jobClientStatus;
+
+  get nodes() {
+    return this.store.peekAll('node');
+  }
+}
diff --git a/ui/app/components/job-page/system.js b/ui/app/components/job-page/system.js
@@ -1,5 +1,15 @@
 import AbstractJobPage from './abstract';
 import classic from 'ember-classic-decorator';
+import { inject as service } from '@ember/service';
+import jobClientStatus from 'nomad-ui/utils/properties/job-client-status';
 
 @classic
-export default class System extends AbstractJobPage {}
+export default class System extends AbstractJobPage {
+  @service store;
+
+  @jobClientStatus('nodes', 'job') jobClientStatus;
+
+  get nodes() {
+    return this.store.peekAll('node');
+  }
+}
diff --git a/ui/app/controllers/jobs/job/clients.js b/ui/app/controllers/jobs/job/clients.js
@@ -33,7 +33,7 @@ export default class ClientsController extends Controller.extend(
   sortDescending = true;
 
   @alias('model') job;
-  @jobClientStatus('nodes', 'job.status', 'job.allocations') jobClientStatus;
+  @jobClientStatus('nodes', 'job') jobClientStatus;
 
   @alias('uniqueNodes') listToSort;
   @alias('listSorted') listToSearch;
@@ -59,6 +59,10 @@ export default class ClientsController extends Controller.extend(
     return result;
   }
 
+  get nodes() {
+    return this.store.peekAll('node');
+  }
+
   @action
   gotoClient(client) {
     console.log('goToClient', client);

diff --git a/ui/app/controllers/jobs/job/index.js b/ui/app/controllers/jobs/job/index.js
@@ -4,19 +4,10 @@ import Controller from '@ember/controller';
 import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting';
 import { action } from '@ember/object';
 import classic from 'ember-classic-decorator';
-import jobClientStatus from 'nomad-ui/utils/properties/job-client-status';
 
 @classic
 export default class IndexController extends Controller.extend(WithNamespaceResetting) {
   @service system;
-  @service store;
-
-  @jobClientStatus('nodes', 'job') jobClientStatus;
-
-  // TODO: use watch
-  get nodes() {
-    return this.store.peekAll('node');
-  }
 
   queryParams = [
     {

diff --git a/ui/app/models/job.js b/ui/app/models/job.js
@@ -7,7 +7,7 @@ import RSVP from 'rsvp';
 import { assert } from '@ember/debug';
 import classic from 'ember-classic-decorator';
 
-const JOB_TYPES = ['service', 'batch', 'system'];
+const JOB_TYPES = ['service', 'batch', 'system', 'sysbatch'];
 
 @classic
 export default class Job extends Model {

diff --git a/ui/app/routes/jobs/job/clients.js b/ui/app/routes/jobs/job/clients.js
@@ -1,3 +1,5 @@
 import Route from '@ember/routing/route';
 
-export default class ClientsRoute extends Route {}
+export default class ClientsRoute extends Route {
+  // TODO: add watcher for nodes.
+}
diff --git a/ui/app/templates/components/job-page/parts/job-client-summary.hbs b/ui/app/templates/components/job-page/parts/job-client-summary.hbs
@@ -0,0 +1,35 @@
+<ListAccordion data-test-job-summary @source={{array this.job}} @key="id" @startExpanded={{this.isExpanded}} @onToggle={{action this.persist}} as |a|>
+  <a.head @buttonLabel={{if a.isOpen "collapse" "expand"}}>
+    <div class="columns">
+      <div class="column is-minimum nowrap">
+        Job Status in Client
+        <span class="badge {{if a.isOpen "is-white" "is-light"}}">
+          {{this.jobClientStatus.totalNodes}}
+        </span>
+      </div>
+
+      {{#unless a.isOpen}}
+        <div class="column">
+          <div class="inline-chart bumper-left">
+            <ClientStatusBar @jobClientStatus={{this.jobClientStatus}} @isNarrow={{true}} />
+          </div>
+        </div>
+      {{/unless}}
+    </div>
+  </a.head>
+  <a.body>
+    <ClientStatusBar @jobClientStatus={{this.jobClientStatus}} class="split-view" as |chart|>
+      <ol data-test-legend class="legend">
+        {{#each chart.data as |datum index|}}
+          <li class="{{datum.className}} {{if (eq datum.label chart.activeDatum.label) "is-active"}} {{if (eq datum.value 0) "is-empty"}}">
+            <span class="color-swatch {{if datum.className datum.className (concat "swatch-" index)}}" />
+            <span class="value" data-test-legend-value="{{datum.className}}">{{datum.value}}</span>
+            <span class="label">
+              {{datum.label}}
+            </span>
+          </li>
+        {{/each}}
+      </ol>
+    </ClientStatusBar>
+  </a.body>
+</ListAccordion>
diff --git a/ui/app/templates/components/job-page/parts/summary.hbs b/ui/app/templates/components/job-page/parts/summary.hbs
@@ -1,59 +1,4 @@
 <ListAccordion data-test-job-summary @source={{array this.job}} @key="id" @startExpanded={{this.isExpanded}} @onToggle={{action this.persist}} as |a|>
-  <a.head @buttonLabel={{if a.isOpen "collapse" "expand"}}>
-    <div class="columns">
-      <div class="column is-minimum nowrap">
-        {{#if a.item.hasChildren}}
-          Children Status
-          <span class="badge {{if a.isOpen "is-white" "is-light"}}">
-            {{a.item.summary.totalChildren}}
-          </span>
-        {{else}}
-          Client Status
-          <span class="badge {{if a.isOpen "is-white" "is-light"}}">
-            {{this.jobClientStatus.totalNodes}}
-          </span>
-        {{/if}}
-      </div>
-
-      {{#unless a.isOpen}}
-        <div class="column">
-          <div class="inline-chart bumper-left">
-            {{#if a.item.hasChildren}}
-              {{#if (gt a.item.totalChildren 0)}}
-                <ChildrenStatusBar @job={{a.item}} @isNarrow={{true}} />
-              {{else}}
-                <em class="is-faded">No Children</em>
-              {{/if}}
-            {{else}}
-              <ClientStatusBar @jobClientStatus={{this.jobClientStatus}} @isNarrow={{true}} />
-            {{/if}}
-          </div>
-        </div>
-      {{/unless}}
-    </div>
-  </a.head>
-  <a.body>
-    {{#component (if a.item.hasChildren "children-status-bar" "client-status-bar")
-    jobClientStatus=this.jobClientStatus
-    class="split-view" as |chart|}}
-    <ol data-test-legend class="legend">
-      {{#each chart.data as |datum index|}}
-        <li class="{{datum.className}} {{if (eq datum.label chart.activeDatum.label) "is-active"}} {{if (eq datum.value 0) "is-empty"}}">
-          <span class="color-swatch {{if datum.className datum.className (concat "swatch-" index)}}" />
-          <span class="value" data-test-legend-value="{{datum.className}}">{{datum.value}}</span>
-          <span class="label">
-            {{datum.label}}
-          </span>
-        </li>
-      {{/each}}
-    </ol>
-  {{/component}}
-  </a.body>
-</ListAccordion>
-
-<br/>
-
-<ListAccordion data-test-job-summary @source={{array this.job}} @key="id" @startExpanded={{false}} @onToggle={{action this.persist}} as |a|>
   <a.head @buttonLabel={{if a.isOpen "collapse" "expand"}}>
     <div class="columns">
       <div class="column is-minimum nowrap">

diff --git a/ui/app/templates/components/job-page/service.hbs b/ui/app/templates/components/job-page/service.hbs
@@ -19,7 +19,7 @@
     {{/each}}
   {{/if}}
 
-  <JobPage::Parts::Summary @job={{this.job}} @jobClientStatus={{this.jobClientStatus}} />
+  <JobPage::Parts::Summary @job={{this.job}} />
 
   <JobPage::Parts::PlacementFailures @job={{this.job}} />
 

diff --git a/ui/app/templates/components/job-page/sysbatch.hbs b/ui/app/templates/components/job-page/sysbatch.hbs
@@ -0,0 +1,29 @@
+<JobPage::Parts::Body @job={{this.job}}>
+  <JobPage::Parts::Error @errorMessage={{this.errorMessage}} @onDismiss={{action "clearErrorMessage"}} />
+
+  <JobPage::Parts::Title @job={{this.job}} @handleError={{action "handleError"}} />
+
+  <div class="boxed-section job-stats">
+    <div class="boxed-section-body">
+      <span data-test-job-stat="type"><strong>Type:</strong> {{this.job.type}} | </span>
+      <span data-test-job-stat="priority"><strong>Priority:</strong> {{this.job.priority}} </span>
+      {{#if (and this.job.namespace this.system.shouldShowNamespaces)}}
+        <span data-test-job-stat="namespace"> | <strong>Namespace:</strong> {{this.job.namespace.name}}</span>
+      {{/if}}
+    </div>
+  </div>
+
+  <JobPage::Parts::JobClientSummary @job={{this.job}} @jobClientStatus={{this.jobClientStatus}} />
+
+  <JobPage::Parts::Summary @job={{this.job}} @forceCollapsed=true />
+
+  <JobPage::Parts::PlacementFailures @job={{this.job}} />
+
+  <JobPage::Parts::TaskGroups
+    @job={{this.job}}
+    @sortProperty={{this.sortProperty}}
+    @sortDescending={{this.sortDescending}}
+    @gotoTaskGroup={{this.gotoTaskGroup}} />
+
+  <JobPage::Parts::RecentAllocations @job={{this.job}} />
+</JobPage::Parts::Body>
diff --git a/ui/app/templates/components/job-page/system.hbs b/ui/app/templates/components/job-page/system.hbs
@@ -19,7 +19,9 @@
     {{/each}}
   {{/if}}
 
-  <JobPage::Parts::Summary @job={{this.job}} @jobClientStatus={{this.jobClientStatus}} />
+  <JobPage::Parts::JobClientSummary @job={{this.job}} @jobClientStatus={{this.jobClientStatus}} />
+
+  <JobPage::Parts::Summary @job={{this.job}} />
 
   <JobPage::Parts::PlacementFailures @job={{this.job}} />
 

diff --git a/ui/app/templates/jobs/job/index.hbs b/ui/app/templates/jobs/job/index.hbs
@@ -1,7 +1,6 @@
 {{page-title "Job " this.model.name}}
 {{component (concat "job-page/" this.model.templateType)
   job=this.model
-  jobClientStatus=this.jobClientStatus
   sortProperty=this.sortProperty
   sortDescending=this.sortDescending
   currentPage=this.currentPage