[ui] Separate Diffs and Versions from the /versions endpoint as far a…

…s Ember is concerned (#24145)

* Separate Diffs and Versions from the /versions endpoint as far as Ember is concerned

* Back to async true

* Handle undefined-diffs case

ui/app/components/job-version.js

@@ -19,6 +19,7 @@ export default class JobVersion extends Component {
   @service router;
 
   @alias('args.version') version;
+  @alias('args.diff') diff;
   @tracked isOpen = false;
   @tracked isEditing = false;
   @tracked editableTag;
@@ -29,7 +30,11 @@ export default class JobVersion extends Component {
   constructor() {
     super(...arguments);
     this.initializeEditableTag();
-    if (this.args.diffsExpanded && this.version.diff) {
+    this.versionsDidUpdate();
+  }
+
+  @action versionsDidUpdate() {
+    if (this.args.diffsExpanded && this.diff) {
       this.isOpen = true;
     }
   }
@@ -47,9 +52,9 @@ export default class JobVersion extends Component {
     this.editableTag.jobName = this.version.get('job.plainId');
   }
 
-  @computed('version.diff')
+  @computed('diff')
   get changeCount() {
-    const diff = this.version.diff;
+    const diff = this.diff;
     const taskGroups = diff.TaskGroups || [];
 
     if (!diff) {

ui/app/components/job-versions-stream.js

@@ -19,7 +19,9 @@ export default class JobVersionsStream extends Component {
   // Passes through to the job-diff component
   verbose = true;
 
-  @computed('versions.[]')
+  diffs = [];
+
+  @computed('versions.[]', 'diffs.[]')
   get annotatedVersions() {
     const versions = this.versions.sortBy('submitTime').reverse();
     return versions.map((version, index) => {
@@ -38,7 +40,8 @@ export default class JobVersionsStream extends Component {
         }
       }
 
-      return { version, meta };
+      const diff = this.diffs.objectAt(index);
+      return { version, meta, diff };
     });
   }
 }

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

@@ -58,6 +58,21 @@ export default class VersionsController extends Controller.extend(
     });
   }
 
+  @tracked diffs = [];
+
+  @action async versionsDidUpdate() {
+    try {
+      const diffs = await this.job.getVersions(this.diffVersion);
+      if (diffs.Diffs) {
+        this.diffs = diffs.Diffs;
+      } else {
+        this.diffs = [];
+      }
+    } catch (error) {
+      console.error('error fetching diffs', error);
+    }
+  }
+
   get diffsExpanded() {
     return this.diffVersion !== '';
   }

ui/app/routes/jobs/job/versions.js

@@ -15,21 +15,8 @@ import { inject as service } from '@ember/service';
 export default class VersionsRoute extends Route.extend(WithWatchers) {
   @service store;
 
-  queryParams = {
-    diffVersion: {
-      refreshModel: true,
-    },
-  };
-
-  async model(params) {
+  async model() {
     const job = this.modelFor('jobs.job');
-    const versions = await job.getVersions(params.diffVersion);
-
-    job.versions = job.versions.map((v, i) => {
-      const diff = versions.Diffs[i];
-      v.set('diff', diff);
-      return v;
-    });
     return job;
   }
 

ui/app/serializers/job.js

@@ -210,7 +210,9 @@ export default class JobSerializer extends ApplicationSerializer {
       },
       versions: {
         links: {
-          related: buildURL(`${jobURL}/versions`, { namespace, diffs: true }),
+          related: buildURL(`${jobURL}/versions`, {
+            namespace,
+          }),
         },
       },
       deployments: {

ui/app/templates/components/job-version.hbs

@@ -3,6 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
+{{did-update this.versionsDidUpdate this.diff}}
 <section class="job-version">
   <div class="boxed-section {{if this.version.versionTag "tagged"}}" data-test-tagged-version={{if this.version.versionTag "true" "false"}}>
     <header class="boxed-section-head is-light inline-definitions">
@@ -16,7 +17,7 @@
         <span data-test-version-submit-time class="submit-date">{{format-ts this.version.submitTime}}</span>
       </span>
       <div class="pull-right">
-        {{#if this.version.diff}}
+        {{#if this.diff}}
           <Hds::Button
             class="is-light is-small"
             @size="small"
@@ -33,7 +34,7 @@
     </header>
     {{#if this.isOpen}}
       <div class="boxed-section-body is-dark">
-        <JobDiff @diff={{this.version.diff}} @verbose={{this.verbose}} />
+        <JobDiff @diff={{this.diff}} @verbose={{this.verbose}} />
       </div>
     {{/if}}
     <footer class="boxed-section-foot {{if this.isEditing "editing"}}">

ui/app/templates/components/job-versions-stream.hbs

@@ -10,6 +10,6 @@
     </li>
   {{/if}}
   <li data-test-version class="timeline-object">
-    <JobVersion @version={{record.version}} @verbose={{this.verbose}} @handleError={{@handleError}} @diffsExpanded={{@diffsExpanded}} />
+    <JobVersion @version={{record.version}} @diff={{record.diff}} @verbose={{this.verbose}} @handleError={{@handleError}} @diffsExpanded={{@diffsExpanded}} />
   </li>
 {{/each}}

ui/app/templates/jobs/job/versions.hbs

@@ -4,6 +4,7 @@
 ~}}
 
 {{page-title "Job " this.job.name " versions"}}
+{{did-update this.versionsDidUpdate this.job.versions}}
 <JobSubnav @job={{this.job}} />
 <section class="section">
 
@@ -56,5 +57,5 @@
     </div>
   {{/if}}
 
-  <JobVersionsStream @versions={{this.model.versions}} @verbose={{true}} @handleError={{action this.handleError}} @diffsExpanded={{this.diffsExpanded}} />
+  <JobVersionsStream @versions={{this.model.versions}} @diffs={{this.diffs}} @verbose={{true}} @handleError={{action this.handleError}} @diffsExpanded={{this.diffsExpanded}} />
 </section>