Make date picker visible.

ybettan · Apr 6, 2018 · c4cb6bf · c4cb6bf
1 parent 198fbca
commit c4cb6bf
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 8 deletions.
diff --git a/triage/index.html b/triage/index.html
@@ -6,7 +6,10 @@
 <title>Kubernetes Aggregated Test Results</title>
 </head>
 <body>
-<h1 class="clearoptions">Kubernetes Aggregated Failures</h1>
+<h1 class="clearoptions">Kubernetes Aggregated Failures
+from
+<input id="date" onfocus="(this.type='date')" placeholder="today" onchange="getData();">
+</h1>
 <b>Show clusters for SIG:</b><span id="btn-sig-group">
 	<button id="btn-sig-api-machinery" class="toggle sig-api-machinery">api-machinery</button>
 	<button id="btn-sig-apps" class="toggle sig-apps">apps</button>
@@ -26,7 +29,6 @@ <h1 class="clearoptions">Kubernetes Aggregated Failures</h1>
 </span>
 <br><br>
 <form id="options" onchange="rerender();">
-<input id="date" type="hidden">
 Sort by
 <label><input id="sort" name="sort" type="radio" value="total">total count</label>
 <label><input name="sort" type="radio" value="day" checked>count in last day</label>
@@ -45,9 +47,11 @@ <h1 class="clearoptions">Kubernetes Aggregated Failures</h1>
 </table>
 </form>
 <div id="summary"></div>
-<div id="clusters">
+<div id="load-status">
   <h2>Loading... <span id="loading-progress"></span></h2>
 </div>
+<div id="clusters">
+</div>
 </body>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 <script src="model.js"></script>

diff --git a/triage/interactive.js b/triage/interactive.js
@@ -18,8 +18,8 @@ function readOptions() {
     let el = document.getElementById(id);
     if (el.type === "checkbox") return el.checked;
     if (el.type === "radio") return el.form[el.name].value;
-    if (el.type === "select-one") return el.value;
-    if (el.type === "text" || el.type === "hidden") {
+    if (el.type === "select-one" || el.type === "date") return el.value;
+    if (el.type === "text") {
       if (id.startsWith("filter")) {
         if (el.value === "") {
           return null;
@@ -58,8 +58,6 @@ function readOptions() {
     sig: readSigs(),
   };
 
-  console.log(opts.sig);
-
   var url = '';
   if (opts.date) url += '&date=' + opts.date;
   if (!opts.ci) url += '&ci=0';
@@ -139,12 +137,19 @@ function renderSubset(start, count) {
   }
 }
 
+function setElementVisibility(id, visible) {
+  document.getElementById(id).style.display = visible ? null : 'none';
+}
+
 // Clear the page and reinitialize the renderer and filtering. Render a few failures.
 function rerender(maxCount) {
   if (!clusteredAll) return;
 
   console.log('rerender!');
 
+  setElementVisibility('load-status', false);
+  setElementVisibility('clusters', true);
+
   options = readOptions();
   clustered = clusteredAll.refilter(options);
 
@@ -281,18 +286,28 @@ function getData(clusterId) {
   var url = '/k8s-gubernator/triage/'
   var date = document.getElementById('date');
   if (date && date.value) {
-    url += 'history/' + date.value + '.json';
+    url += 'history/' + date.value.replace(/-/g, '') + '.json';
   } else if (clusterId) {
     url += 'slices/failure_data_' + clusterId.slice(0, 2) + '.json';
   } else {
     url += 'failure_data.json'
   }
 
+  setElementVisibility('load-status', true);
+  setElementVisibility('clusters', false);
   var setLoading = t => document.getElementById("loading-progress").innerText = t;
   var toMB = b => Math.round(b / 1024 / 1024 * 100) / 100;
 
   get(url,
     req => {
+      if (req.status >= 300) {
+        if (req.status == 401) {
+          setLoading(`error ${req.status}: missing data (bad date?): ${req.response}`);
+        } else {
+          setLoading(`error ${req.status}: ${req.response}`)
+        }
+        return;
+      }
       setLoading(`parsing ${toMB(req.response.length)}MB.`);
       setTimeout(() => {
         var data = JSON.parse(req.response);
@@ -341,4 +356,6 @@ function load() {
 
   document.addEventListener('click', clickHandler, false);
   document.addEventListener('scroll', scrollHandler);
+
+  document.getElementById('date').max = new Date().toISOString().slice(0, 10);
 }