Compile AngularJS template partials into legacy.js

resources/js/angular/controllers/filters.js

@@ -1,3 +1,5 @@
+import filterRowTemplate from '../views/partials/filterRow.html';
+import filterButtonsTemplate from '../views/partials/filterButtons.html';
 
 export function FiltersController($scope, $rootScope, $http, $timeout) {
 
@@ -454,14 +456,14 @@ export function FiltersController($scope, $rootScope, $http, $timeout) {
   });
 }
 
-export const filterRow = ["VERSION", function (VERSION) {
+export const filterRow = function () {
   return {
-    templateUrl: 'assets/js/angular/views/partials/filterRow.html?id=' + VERSION,
+    template: filterRowTemplate,
   };
-}];
+};
 
-export const filterButtons = ["VERSION", function (VERSION) {
+export const filterButtons = function () {
   return {
-    templateUrl: 'assets/js/angular/views/partials/filterButtons.html?id=' + VERSION,
+    template: filterButtonsTemplate,
   };
-}];
+};

resources/js/angular/directives/build.js

@@ -1,5 +1,7 @@
-export function build(VERSION) {
+import buildTemplate from '../views/partials/build.html';
+
+export function build() {
   return {
-    templateUrl: 'assets/js/angular/views/partials/build.html?id=' + VERSION,
+    template: buildTemplate,
   }
 }

resources/js/angular/directives/buildgroup.js

@@ -1,5 +1,7 @@
-export function buildgroup(VERSION) {
+import buildgroupTemplate from '../views/partials/buildgroup.html';
+
+export function buildgroup() {
   return {
-    templateUrl: 'assets/js/angular/views/partials/buildgroup.html?id=' + VERSION,
+    template: buildgroupTemplate,
   }
 }

resources/js/angular/directives/daterange.js

@@ -1,7 +1,9 @@
-export function daterange(VERSION) {
+import daterangeTemplate from '../views/partials/daterange.html';
+
+export function daterange() {
   return {
     restrict: 'A',
-    templateUrl: 'assets/js/angular/views/partials/daterange.html?id=' + VERSION,
+    template: daterangeTemplate,
     link: function (scope, element, attrs, ngModelCtrl) {
       var format = "yy-mm-dd",
 

resources/js/angular/directives/timeline.js

@@ -1,5 +1,6 @@
 import d3 from 'd3';
 import nv from 'nvd3';
+import timelineTemplate from '../views/partials/timeline.html';
 
 var timelineController =
   function TimelineChartController($http, $scope) {
@@ -261,10 +262,10 @@ var timelineController =
 };
 timelineController.$inject = ["$http", "$scope"];
 
-export function timeline(VERSION) {
+export function timeline() {
   return {
     restrict: 'A',
-    templateUrl: 'assets/js/angular/views/partials/timeline.html?id=' + VERSION,
+    template: timelineTemplate,
     controller: timelineController
   };
 }

resources/js/angular/legacy.js

@@ -23,8 +23,16 @@ const CDash = angular.module('CDash', [
   'ui.bootstrap',
 ]);
 
-import { VERSION } from '../../../public/assets/js/angular/version.js';
-CDash.constant('VERSION', VERSION);
+// filterdataTemplate.html and subProjectTable.html are only ever reached via
+// ng-include in server-rendered view HTML (not through Angular DI), so their
+// content is pre-loaded into $templateCache under the same path ng-include
+// requests, instead of being fetched over HTTP.
+import filterdataTemplateHtml from './views/partials/filterdataTemplate.html';
+import subProjectTableHtml from './views/partials/subProjectTable.html';
+CDash.run(["$templateCache", function ($templateCache) {
+  $templateCache.put('assets/js/angular/views/partials/filterdataTemplate.html', filterdataTemplateHtml);
+  $templateCache.put('assets/js/angular/views/partials/subProjectTable.html', subProjectTableHtml);
+}]);
 
 import { ManageSubProjectController, filter_subproject_groups } from "./controllers/manageSubProject";
 CDash.controller('ManageSubProjectController', ["$scope", "$http", "apiLoader", ManageSubProjectController]);
@@ -86,16 +94,16 @@ import { renderTimer } from './services/renderTimer.js';
 CDash.factory('renderTimer', ["$timeout", renderTimer]);
 
 import { build } from './directives/build.js';
-CDash.directive('build', ["VERSION", build]);
+CDash.directive('build', build);
 
 import { timeline } from './directives/timeline.js';
-CDash.directive('timeline', ["VERSION", timeline]);
+CDash.directive('timeline', timeline);
 
 import { daterange } from './directives/daterange.js';
-CDash.directive('daterange', ["VERSION", daterange]);
+CDash.directive('daterange', daterange);
 
 import { buildgroup } from './directives/buildgroup.js';
-CDash.directive('buildgroup', ["VERSION", buildgroup]);
+CDash.directive('buildgroup', buildgroup);
 
 import { autocomplete } from './directives/autocomplete.js';
 CDash.directive('autoComplete', ["$parse", autocomplete]);

resources/js/angular/views/index.html

@@ -48,7 +48,7 @@
         </div>
 
         <!-- Filters -->
-        <ng-include src="'assets/js/angular/views/partials/filterdataTemplate.html?id=' + VERSION"></ng-include>
+        <ng-include src="'assets/js/angular/views/partials/filterdataTemplate.html'"></ng-include>
       </div> <!-- End index-top -->
 
       <!-- Timeline chart -->
@@ -151,7 +151,7 @@
       </div>
 
       <!-- Display subproject dependencies -->
-      <ng-include ng-if="::cdash.subproject.dependencies.length > 0" ng-init="cdash.tableName = 'SubProject Dependencies'; cdash.subprojects = cdash.subproject.dependencies" src="'assets/js/angular/views/partials/subProjectTable.html?id=' + VERSION"></ng-include>
+      <ng-include ng-if="::cdash.subproject.dependencies.length > 0" ng-init="cdash.tableName = 'SubProject Dependencies'; cdash.subprojects = cdash.subproject.dependencies" src="'assets/js/angular/views/partials/subProjectTable.html'"></ng-include>
 
       <!-- BuildGroups -->
       <div ng-repeat="buildgroup in cdash.buildgroups | orderBy:'position'| limitTo:buildgroup_limit" class="buildgroup"

resources/js/angular/views/queryTests.html

@@ -12,7 +12,7 @@ <h3 id="numtests">Query {{cdash.dashboard.projectname}} Tests: {{cdash.builds.le
     <span ng-show="cdash.showmatchingoutput">Hide Matching Output</span>
   </a>
 </div>
-<ng-include src="'assets/js/angular/views/partials/filterdataTemplate.html?id=' + VERSION"></ng-include>
+<ng-include src="'assets/js/angular/views/partials/filterdataTemplate.html'"></ng-include>
 
 <!-- Hide a div for javascript to know if time status is on -->
 <div ng-if="cdash.project.showtesttime == 1" id="showtesttimediv" style="display:none"></div>

resources/js/angular/views/testOverview.html

@@ -11,7 +11,7 @@
             <span ng-show="showfilters != 0">Hide Filters</span>
           </a>
         </div>
-        <ng-include src="'assets/js/angular/views/partials/filterdataTemplate.html?id=' + VERSION"></ng-include>
+        <ng-include src="'assets/js/angular/views/partials/filterdataTemplate.html'"></ng-include>
 
         <div class="form-inline pull-right">
           <select class="form-group"

resources/js/angular/views/viewSubProjects.html

@@ -111,7 +111,7 @@ <h3>Project</h3>
 
 
       <!-- SubProjects table -->
-      <ng-include ng-init="cdash.tableName = 'SubProjects'" src="'assets/js/angular/views/partials/subProjectTable.html?id=' + VERSION"></ng-include>
+      <ng-include ng-init="cdash.tableName = 'SubProjects'" src="'assets/js/angular/views/partials/subProjectTable.html'"></ng-include>
 
       <table width="100%" cellspacing="0" cellpadding="0">
         <tr>

webpack.mix.js

@@ -1,4 +1,5 @@
 const mix = require('laravel-mix');
+const path = require('path');
 mix.disableNotifications();
 mix.options({
   clearConsole: false,
@@ -10,17 +11,8 @@ mix.sourceMaps(true, 'source-map');
 // Hash the built files to create a version identifier.  Use the mix() helper in PHP to automatically append the identifier to a path.
 mix.version();
 
-// Write out version file for angular.js
-const fs = require('fs');
-const dir = 'public/assets/js/angular';
-if (!fs.existsSync(dir)) {
-  fs.mkdirSync(dir, { recursive: true });
-}
-fs.writeFileSync(`${dir}/version.js`, `export const VERSION = '${new Date().getTime().toString()}';`);
-
 // Copy angularjs files to build directory.
 mix.copy('resources/js/angular/views/*.html', 'public/assets/js/angular/views/');
-mix.copy('resources/js/angular/views/partials/*.html', 'public/assets/js/angular/views/partials/');
 
 // Copy CSS files
 mix.css('resources/css/cdash.css', 'public/assets/css/cdash.css');
@@ -33,14 +25,41 @@ mix.sass('resources/sass/app.scss', 'public/assets/css/app.css');
 mix.js('resources/js/vue/app.js', 'public/assets/js').vue();
 mix.js('resources/js/angular/legacy.js', 'public/assets/js/legacy.js');
 
+const partialsDir = path.resolve(__dirname, 'resources/js/angular/views/partials');
+
 mix.webpackConfig({
   stats: {
     children: true,
   },
+  module: {
+    rules: [
+      {
+        // Import AngularJS partial templates as raw strings, so their content
+        // is inlined into legacy.js and covered by its own content hash.
+        test: /\.html$/,
+        include: partialsDir,
+        type: 'asset/source',
+      },
+    ],
+  },
   output: {
     chunkFilename: 'assets/js/[contenthash].js',
   },
   optimization: {
     runtimeChunk: false,
   },
 });
+
+// Mix registers its own project-wide rule sending every *.html file through
+// html-loader (for Vue's <template src> imports). Webpack runs a module through
+// every rule that matches it, so without this exclusion our partials would be
+// wrapped by html-loader *and* by the asset/source rule above, leaving AngularJS
+// with html-loader's generated JS source text instead of the template's HTML.
+mix.override((webpackConfig) => {
+  for (const rule of webpackConfig.module.rules) {
+    const usesHtmlLoader = Array.isArray(rule.use) && rule.use.some((u) => String(u.loader || u).includes('html-loader'));
+    if (usesHtmlLoader) {
+      rule.exclude = partialsDir;
+    }
+  }
+});