Put all js in one place, and load from a file

.github/workflows/dashboard.yml

@@ -59,23 +59,16 @@ jobs:
           path: tf_oss_dashboard/old.json
           retention-days: 5
 
-      - name: "Upload dashboard"
-        uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
-        with:
-          name: Dashboard
-          path: tf_oss_dashboard/dashboard.html
-          retention-days: 5
-
       - name: Setup Pages
         uses: actions/configure-pages@v3
 
       - name: Move dashboard around
-        run: cd tf_oss_dashboard; mkdir _site; mv dashboard.html ./_site/index.html; mv favicon.png ./_site/favicon.png
+        run: cd tf_oss_dashboard; mkdir .site; mv -t .site *
 
-      - name: Upload artifact
+      - name: Upload pages artifact
         uses: actions/upload-pages-artifact@v1
         with:
-          path: './tf_oss_dashboard/_site'
+          path: './tf_oss_dashboard/.site'
 
       - name: Deploy to GitHub Pages
         id: deployment

tf_oss_dashboard/dashboard.py

@@ -130,12 +130,6 @@ for category, items in yaml_config["categories"].items():
 for name, jobs in sorted(by_name.items(), key=lambda x: x[0]):
   by_group[category_map.get(name, "Everything Else")][name] = jobs
 
-with open("style.css", "r") as f:
-  css = f.read()
-
-with open("script.js", "r") as f:
-  js = f.read()
-
 with open("help.md", "r") as f:
   helptext = cmarkgfm.github_flavored_markdown_to_html(f.read())
 
@@ -146,4 +140,4 @@ env = Environment(
 template = env.get_template('template.html.pug')
 now = arrow.now().to('US/Pacific').format("ddd, MMM D [at] h:mma ZZZ")
 isonow = arrow.now().to('US/Pacific').isoformat() 
-print(template.render(records=by_name, by_group=by_group, by_commit=by_commit, css=css, js=js, helptext=helptext, now=now, isonow=isonow, yaml=yaml_config))
+print(template.render(records=by_name, by_group=by_group, by_commit=by_commit, helptext=helptext, now=now, isonow=isonow, yaml=yaml_config))

tf_oss_dashboard/help.md

@@ -19,6 +19,8 @@ Here are some tips and notes about the dashboard:
 - You can zoom out to fit more jobs on the page at once.
 - Click on a star to favorite that job. Favorites are displayed in the
   "Favorites" section at the top, in the same order as they are on the page.
+  You can't favorite anything from the Build Cop Failures section -- find it in
+  its regular place instead to favorite it.
 - You can copy the URL while a commit modal is open to share that commit.
   - Add `#<commit-id>` to the dashboard URL to find a specific commit.
   - Add `#<cl-number>` to the dashboard URL to find a specific CL (this is one

tf_oss_dashboard/script.js

 //////////////////////////////////////////////////////////////////////////////
-// FAVORITES REORDER HANDLING
+// HTML BODY STYLE TOGGLES
+//////////////////////////////////////////////////////////////////////////////
+// Set styles upon page load
+if (localStorage.getItem('cb') == 'true') {
+  $("#colorblind").prop("checked", true)
+  $("body").toggleClass("colorblind")
+}
+if (localStorage.getItem('showfailures') == 'true') {
+  $("#showfailures").prop("checked", true)
+  $("body").toggleClass("showfailures")
+}
+// Set styles when navbar items toggled
+$("#colorblind").change(function(e) {
+  localStorage.setItem('cb', $(this).prop('checked'))
+  $("body").toggleClass("colorblind")
+})
+$("#showfailures").change(function(e) {
+  localStorage.setItem('showfailures', $(this).prop('checked'))
+  $("body").toggleClass("showfailures")
+})
+
+//////////////////////////////////////////////////////////////////////////////
+// AUTO REFRESH AND TIMESTAMP HANDLING
+//////////////////////////////////////////////////////////////////////////////
+let autorefreshready = false
+let modal_is_open = false;
+function humanizeTimestamp() {
+  if (!modal_is_open && autorefreshready) {
+    location.reload()
+  }
+  let str = moment($('#tf-now').attr("data-isonow"), moment.ISO_8601).fromNow()
+  $('#tf-ago').text("(" + str + ")")
+}
+function setAutoRefreshReady() {
+  autorefreshready = true
+}
+setInterval(setAutoRefreshReady, 300000) // Every 5 mins, refresh unless modal is open
+setInterval(humanizeTimestamp, 60500) // Every 1 min, update the timestamp
+humanizeTimestamp()
+
+//////////////////////////////////////////////////////////////////////////////
+// FAVORITES HANDLING
 //////////////////////////////////////////////////////////////////////////////
 function reorder() {
   let favorites = JSON.parse(localStorage.getItem('favorites') || '{}')
@@ -42,10 +83,19 @@ $('.favorite').each(function() {
 reorder()
 
 //////////////////////////////////////////////////////////////////////////////
-// MODAL CLICKED-JOB HANDLING
+// MODAL HANDLING
+// NOTE: These all go into jQuery's $(function() {}), which executes the content
+// only after the whole page has loaded and the DOM is ready. This allows us
+// to have all of the scripts in one file: since the script is loaded just
+// after the navbar is placed, the code above can modify the page for styles
+// and card placement before the rest of the modals (which take up most of the
+// page size) are loaded. This means there's generally no flashing when the page
+// loads.
 //////////////////////////////////////////////////////////////////////////////
-let modal_is_open = false;
+$(function() {
 
+  // Highlight the clicked job when a modal appears (doesn't work when a commit
+  // is linked directly).
   $(".commit-modal").on('show.bs.modal', function(e) {
     modal_is_open = true;
     let source = e.relatedTarget
@@ -54,10 +104,12 @@ $(".commit-modal").on('show.bs.modal', function(e) {
       return $(this).text() === name
     }).closest("tr").toggleClass("tf-table-highlight")
     $(this).attr("data-tf-trigger", name)
+
     // Set the window location hash to this commit ID without corrupting history
     history.replaceState(undefined, undefined, "#" + $(this).attr("id"))
   })
 
+  // Undo the previous when the modal is hidden
   $(".commit-modal").on('hidden.bs.modal', function(e) {
     modal_is_open = false;
     let name = $(this).attr("data-tf-trigger") 
@@ -87,36 +139,4 @@ if (window.location.hash.length <= 1) {
     let cl = $(".modal[data-cl=" + window.location.hash.substring(1) + "]")
     new bootstrap.Modal("#" + cl.attr('id')).show()
   }
-
-
-//////////////////////////////////////////////////////////////////////////////
-// AUTO REFRESH AND TIMESTAMP HANDLING
-//////////////////////////////////////////////////////////////////////////////
-let autorefreshready = false
-function humanizeTimestamp() {
-  if (!modal_is_open && autorefreshready) {
-    location.reload()
-  }
-  let str = moment($('#tf-now').attr("data-isonow"), moment.ISO_8601).fromNow()
-  $('#tf-ago').text("(" + str + ")")
-}
-function autoRefreshIsReady() {
-  autorefreshready = true
-}
-setInterval(autoRefreshIsReady, 300000) // Every 5 mins, refresh unless modal is open
-setInterval(humanizeTimestamp, 60500) // Every 1 min, update the timestamp
-humanizeTimestamp()
-
-//////////////////////////////////////////////////////////////////////////////
-// HTML BODY STYLE TOGGLES
-// See extra script tag in template.html.pug just under the navbar.
-//////////////////////////////////////////////////////////////////////////////
-$("#colorblind").change(function(e) {
-  localStorage.setItem('cb', $(this).prop('checked'))
-  $("body").toggleClass("colorblind")
-})
-$("#showfailures").change(function(e) {
-  localStorage.setItem('showfailures', $(this).prop('checked'))
-  $("body").toggleClass("showfailures")
 })
-

tf_oss_dashboard/template.html.pug

@@ -8,7 +8,7 @@ html(lang="en")
     script(src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous")
     script(src="https://code.jquery.com/jquery-3.6.4.slim.min.js" integrity="sha256-a2yjHM4jnF9f54xUQakjZGaqYs/V1CYvWpoqZzC2/Bw=" crossorigin="anonymous")
     script(src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment.min.js" crossorigin="anonymous" referrerpolicy="no-referrer")
-    style !{css}
+    link(rel="stylesheet" href="style.css")
   body
     nav.navbar.navbar-dark.navbar-expand-lg.py-0.mb-2
       .container-fluid.py-0
@@ -30,16 +30,7 @@ html(lang="en")
             a.nav-link(href="https://github.com/tensorflow/tensorflow/commits/master") Commits
           li.nav-item
             a.nav-link(href="https://github.com/tensorflow/build/issues/142") Suggestions
-    //- putting this here means there's no flash when the page reloads...
-    script(type="text/javascript").
-      if (localStorage.getItem('cb') == 'true') {
-        $("#colorblind").prop("checked", true)
-        $("body").toggleClass("colorblind")
-      }
-      if (localStorage.getItem('showfailures') == 'true') {
-        $("#showfailures").prop("checked", true)
-        $("body").toggleClass("showfailures")
-      }
+
     .d-flex.flex-column.gap-1.m-1
       .favorites-section.d-none
         .fw-bold.ps-4
@@ -86,6 +77,8 @@ html(lang="en")
                     else
                       a.badge.p-2(title="#{test['date_human']} - #{test['commit_summary']}" class=test["state"] data-bs-toggle='modal' data-bs-target=test["commit_id"])
 
+    //- putting this here means there's usually no flash when the page reloads
+    script(src="script.js")
 
     each commit, jobs in by_commit.items()
       .modal.modal-lg.fade.commit-modal(tabindex='-1' aria-labelledby=commit id=commit data-cl=jobs[0].get("cl", "none") aria-hidden='true')
@@ -127,4 +120,3 @@ html(lang="en")
         .modal-content
           .modal-header.fw-bold Dashboard Help
           .modal-body !{helptext}
-    script !{js}