Merge pull request #11780 from hashicorp/f-ui/job-page-refactor

fix:   authorization bug for `job-client-status-summary`

ui/app/components/job-page.js

@@ -0,0 +1,26 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import messageForError from 'nomad-ui/utils/message-from-adapter-error';
+
+export default class JobPage extends Component {
+  @tracked errorMessage = null;
+
+  @action
+  clearErrorMessage() {
+    this.errorMessage = null;
+  }
+
+  @action
+  handleError(errorObject) {
+    this.errorMessage = errorObject;
+  }
+
+  @action
+  setError(err) {
+    this.errorMessage = {
+      title: 'Could Not Force Launch',
+      description: messageForError(err, 'submit jobs'),
+    };
+  }
+}

ui/app/components/job-page/parameterized-child.js

@@ -1,10 +1,8 @@
 import { computed } from '@ember/object';
 import { alias } from '@ember/object/computed';
-import PeriodicChildJobPage from './periodic-child';
-import classic from 'ember-classic-decorator';
+import Component from '@glimmer/component';
 
-@classic
-export default class ParameterizedChild extends PeriodicChildJobPage {
+export default class ParameterizedChild extends Component {
   @alias('job.decodedPayload') payload;
 
   @computed('payload')

ui/app/components/job-page/parts/children.js

@@ -19,9 +19,6 @@ export default class Children extends Component.extend(Sortable) {
   sortDescending = null;
   currentPage = null;
 
-  // Provide an action with access to the router
-  gotoJob() {}
-
   @readOnly('userSettings.pageSize') pageSize;
 
   @computed('job.taskGroups.[]')

ui/app/components/job-page/parts/job-client-status-summary.js

@@ -1,27 +1,40 @@
 import Component from '@ember/component';
 import { action, computed } from '@ember/object';
+import { inject as service } from '@ember/service';
 import { classNames } from '@ember-decorators/component';
 import classic from 'ember-classic-decorator';
 import jobClientStatus from 'nomad-ui/utils/properties/job-client-status';
 
 @classic
 @classNames('boxed-section')
 export default class JobClientStatusSummary extends Component {
+  @service router;
+  @service store;
+
+  @jobClientStatus('nodes', 'job') jobClientStatus;
+
+  get nodes() {
+    return this.store.peekAll('node');
+  }
+
   job = null;
-  nodes = null;
-  forceCollapsed = false;
-  gotoClients() {}
 
-  @computed('forceCollapsed')
-  get isExpanded() {
-    if (this.forceCollapsed) return false;
+  @action
+  gotoClients(statusFilter) {
+    this.router.transitionTo('jobs.job.clients', this.job, {
+      queryParams: {
+        status: JSON.stringify(statusFilter),
+        namespace: this.job.get('namespace.name'),
+      },
+    });
+  }
 
+  @computed
+  get isExpanded() {
     const storageValue = window.localStorage.nomadExpandJobClientStatusSummary;
     return storageValue != null ? JSON.parse(storageValue) : true;
   }
 
-  @jobClientStatus('nodes', 'job') jobClientStatus;
-
   @action
   onSliceClick(ev, slice) {
     /* eslint-disable-next-line ember/no-string-prototype-extensions */

ui/app/components/job-page/parts/task-groups.js

@@ -1,5 +1,6 @@
 import Component from '@ember/component';
-import { computed } from '@ember/object';
+import { action, computed } from '@ember/object';
+import { inject as service } from '@ember/service';
 import { alias } from '@ember/object/computed';
 import Sortable from 'nomad-ui/mixins/sortable';
 import { classNames } from '@ember-decorators/component';
@@ -8,14 +9,18 @@ import classic from 'ember-classic-decorator';
 @classic
 @classNames('boxed-section')
 export default class TaskGroups extends Component.extend(Sortable) {
+  @service router;
+
   job = null;
 
   // Provide a value that is bound to a query param
   sortProperty = null;
   sortDescending = null;
 
-  // Provide an action with access to the router
-  gotoTaskGroup() {}
+  @action
+  gotoTaskGroup(taskGroup) {
+    this.router.transitionTo('jobs.job.task-group', this.job, taskGroup);
+  }
 
   @computed('job.taskGroups.[]')
   get taskGroups() {

ui/app/components/job-page/periodic.js

@@ -1,27 +1,11 @@
-import AbstractJobPage from './abstract';
-import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
-import classic from 'ember-classic-decorator';
-import messageForError from 'nomad-ui/utils/message-from-adapter-error';
-
-@classic
-export default class Periodic extends AbstractJobPage {
-  @service store;
-
-  errorMessage = null;
+import Component from '@glimmer/component';
 
+export default class Periodic extends Component {
   @action
-  forceLaunch() {
-    this.job.forcePeriodic().catch((err) => {
-      this.set('errorMessage', {
-        title: 'Could Not Force Launch',
-        description: messageForError(err, 'submit jobs'),
-      });
+  forceLaunch(setError) {
+    this.args.job.forcePeriodic().catch((err) => {
+      setError(err);
     });
   }
-
-  @action
-  clearErrorMessage() {
-    this.set('errorMessage', null);
-  }
 }

ui/app/components/job-row.js

@@ -1,5 +1,6 @@
-import { inject as service } from '@ember/service';
 import Component from '@ember/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
 import { lazyClick } from '../helpers/lazy-click';
 import { classNames, tagName } from '@ember-decorators/component';
 import classic from 'ember-classic-decorator';
@@ -8,18 +9,25 @@ import classic from 'ember-classic-decorator';
 @tagName('tr')
 @classNames('job-row', 'is-interactive')
 export default class JobRow extends Component {
-  @service system;
+  @service router;
   @service store;
+  @service system;
 
   job = null;
 
   // One of independent, parent, or child. Used to customize the template
   // based on the relationship of this job to others.
   context = 'independent';
 
-  onClick() {}
-
   click(event) {
-    lazyClick([this.onClick, event]);
+    lazyClick([this.gotoJob, event]);
+  }
+
+  @action
+  gotoJob() {
+    const { job } = this;
+    this.router.transitionTo('jobs.job', job.plainId, {
+      queryParams: { namespace: job.get('namespace.name') },
+    });
   }
 }

ui/app/components/job-subnav.js

@@ -1,5 +1,13 @@
-import Component from '@ember/component';
-import { tagName } from '@ember-decorators/component';
+import { inject as service } from '@ember/service';
+import Component from '@glimmer/component';
 
-@tagName('')
-export default class JobSubnav extends Component {}
+export default class JobSubnav extends Component {
+  @service can;
+
+  get shouldRenderClientsTab() {
+    const { job } = this.args;
+    return (
+      job?.hasClientStatus && !job?.hasChildren && this.can.can('read client')
+    );
+  }
+}

ui/app/components/list-accordion/accordion-head.js

@@ -9,10 +9,8 @@ export default class AccordionHead extends Component {
   'data-test-accordion-head' = true;
 
   buttonLabel = 'toggle';
-  tooltip = '';
   isOpen = false;
   isExpandable = true;
-  isDisabled = false;
   item = null;
 
   onClose() {}

ui/app/controllers/jobs/index.js

@@ -260,11 +260,4 @@ export default class IndexController extends Controller.extend(
   setFacetQueryParam(queryParam, selection) {
     this.set(queryParam, serialize(selection));
   }
-
-  @action
-  gotoJob(job) {
-    this.transitionToRoute('jobs.job', job.get('plainId'), {
-      queryParams: { namespace: job.get('namespace.name') },
-    });
-  }
 }

ui/app/controllers/jobs/job/clients.js

@@ -67,9 +67,7 @@ export default class ClientsController extends Controller.extend(
 
   @computed('store')
   get allNodes() {
-    return this.store.peekAll('node').length
-      ? this.store.peekAll('node')
-      : this.store.findAll('node');
+    return this.store.peekAll('node');
   }
 
   @computed('allNodes', 'jobClientStatus.byNode')

ui/app/controllers/jobs/job/index.js

@@ -1,8 +1,7 @@
-import { inject as service } from '@ember/service';
-import { computed } from '@ember/object';
 import Controller from '@ember/controller';
+import { alias } from '@ember/object/computed';
+import { inject as service } from '@ember/service';
 import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting';
-import { action } from '@ember/object';
 import classic from 'ember-classic-decorator';
 
 @classic
@@ -25,42 +24,8 @@ export default class IndexController extends Controller.extend(
 
   currentPage = 1;
 
-  @computed('model.job')
-  get job() {
-    return this.model.job;
-  }
-
-  @computed('model.nodes.[]')
-  get nodes() {
-    return this.model.nodes;
-  }
+  @alias('model') job;
 
   sortProperty = 'name';
   sortDescending = false;
-
-  @action
-  gotoTaskGroup(taskGroup) {
-    this.transitionToRoute(
-      'jobs.job.task-group',
-      taskGroup.get('job'),
-      taskGroup
-    );
-  }
-
-  @action
-  gotoJob(job) {
-    this.transitionToRoute('jobs.job', job, {
-      queryParams: { jobNamespace: job.get('namespace.name') },
-    });
-  }
-
-  @action
-  gotoClients(statusFilter) {
-    this.transitionToRoute('jobs.job.clients', this.job, {
-      queryParams: {
-        status: JSON.stringify(statusFilter),
-        namespace: this.job.get('namespace.name'),
-      },
-    });
-  }
 }