From aa00983b2129216da9cbcd2bcc6e7a75df308cc1 Mon Sep 17 00:00:00 2001
From: Austin Anderson <angerson@google.com>
Date: Mon, 22 May 2023 18:51:10 -0700
Subject: [PATCH] Add analytics warning and fix half-page-size navbar
---
tf_oss_dashboard/script.js | 11 ++++++++
tf_oss_dashboard/style.css | 2 +-
tf_oss_dashboard/template.html.pug | 45 ++++++++++++++++++------------
3 files changed, 39 insertions(+), 19 deletions(-)
diff --git a/tf_oss_dashboard/script.js b/tf_oss_dashboard/script.js
index 346a756..b041c78 100644
--- a/tf_oss_dashboard/script.js
+++ b/tf_oss_dashboard/script.js
@@ -156,6 +156,8 @@ $(function () {
}
}
+ // When a user clicks a "Reveal All" button in a commit view, reveal all
+ // badges on all job cards that refer to that same commit.
let revealed = null
$(".tf-reveal").click(function() {
if (revealed !== null) {
@@ -164,4 +166,13 @@ $(function () {
revealed = $(this).attr("data-tf-reveal")
$(".badge[data-bs-target='" + revealed + "']").removeClass("tf-last-clicked").addClass("tf-revealed")
})
+
+ // Display warning banner if use of analytics cookies hasn't been acknowledged
+ if (location.hostname !== "" && !Cookies.get("tf-cookies-accepted")) {
+ $(".tf-cookie-warning").removeClass("d-none")
+ }
+ $(".tf-cookie-warning").click(function() {
+ $(this).addClass("d-none")
+ Cookies.set("tf-cookies-accepted", true)
+ })
})
diff --git a/tf_oss_dashboard/style.css b/tf_oss_dashboard/style.css
index 22cdba6..4eb857b 100644
--- a/tf_oss_dashboard/style.css
+++ b/tf_oss_dashboard/style.css
@@ -19,7 +19,7 @@ body {
/* =============================== */
/* NAVBAR AND TOGGLE FEATURES */
/* =============================== */
-.navbar {
+.navbar-dark {
background-color: #002 !important;
}
diff --git a/tf_oss_dashboard/template.html.pug b/tf_oss_dashboard/template.html.pug
index d96097d..eca5642 100644
--- a/tf_oss_dashboard/template.html.pug
+++ b/tf_oss_dashboard/template.html.pug
@@ -7,6 +7,7 @@ html(lang="en")
link(href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous")
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://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js")
script(src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment.min.js" crossorigin="anonymous" referrerpolicy="no-referrer")
link(rel="stylesheet" href="style.css")
//- Google Analytics. Conditionally enabled if "gtag" is set in config.yaml
@@ -18,26 +19,34 @@ html(lang="en")
gtag('js', new Date());
gtag('config', "#{yaml['gtag']}");
body
+ .tf-cookie-warning.p-2.bg-warning.navbar-text.d-none
+ .text-center The TensorFlow GitHub CI Dashboard uses cookies from Google to analyze traffic.
+ a(href="https://policies.google.com/technologies/cookies") Learn more.
+ a.fw-bold.ps-4#tf-accept-cookies(role="button") Ok, got it
+
nav.navbar.navbar-dark.navbar-expand-lg.py-0.mb-2
.container-fluid.py-0
- .d-flex.flex-row
- a(href=).navbar-brand TensorFlow GitHub CI
- .navbar-text#tf-now(data-isonow=isonow) Last updated on
- a(title="Check the dashboard deployment GitHub Actions workflow" href="https://github.com/tensorflow/build/actions/workflows/dashboard.yml") #{now}
- |
- a#tf-ago
- .tf-refresh-timer(title="The page auto-refreshes every 5 minutes (delayed if a modal is open) to check and see if the dashboard has been updated.")
- ul.navbar-nav
- .form-check.form-switch.m-auto
- input.form-check-input(title="Toggle failure section" type="checkbox" role="switch" id="tf-show-buildcop")
- .form-check.form-switch.m-auto
- input.form-check-input(title="Toggle colorblind view" type="checkbox" role="switch" id="tf-colorblind")
- li.nav-item
- a.nav-link(role="button" data-bs-toggle="modal" data-bs-target="#tf-help-modal") Help
- li.nav-item
- 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
+ a(href=).navbar-brand TensorFlow GitHub CI
+ .align-self-start.navbar-text#tf-now(data-isonow=isonow) Updated
+ a(title="Check the dashboard deployment GitHub Actions workflow" href="https://github.com/tensorflow/build/actions/workflows/dashboard.yml") #{now}
+ |
+ a#tf-ago
+ .ps-1.tf-refresh-timer(title="The page auto-refreshes every 5 minutes (delayed if a modal is open) to check and see if the dashboard has been updated.")
+ .flex-grow-1
+ button.navbar-toggler(type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggle" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation")
+ span.navbar-toggler-icon
+ .collapse.navbar-collapse#navbarToggle
+ ul.navbar-nav.ms-auto
+ .form-check.form-switch.m-auto
+ input.form-check-input(title="Toggle failure section" type="checkbox" role="switch" id="tf-show-buildcop")
+ .form-check.form-switch.m-auto
+ input.form-check-input(title="Toggle colorblind view" type="checkbox" role="switch" id="tf-colorblind")
+ li.nav-item
+ a.nav-link(role="button" data-bs-toggle="modal" data-bs-target="#tf-help-modal") Help
+ li.nav-item
+ 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 usually no flash when the page reloads
script(src="script.js")
--
GitLab