Bug 1374298 - Filter ping by type in about:telemetry r?chutten draft
authorflyingrub <flyinggrub@gmail.com>
Mon, 19 Jun 2017 16:42:04 +0200
changeset 598194 9ddc281ec151b91f64adf3cd1fa417c3c3ef5283
parent 595693 df7cccaf1627d59f4adf653d5a5a64fa51fcc1c6
child 634430 a739d9f1feeaab426ec36a01140dafecfdb03e6c
push id65155
push userbmo:flyinggrub@gmail.com
push dateWed, 21 Jun 2017 14:32:06 +0000
reviewerschutten
bugs1374298
milestone56.0a1
Bug 1374298 - Filter ping by type in about:telemetry r?chutten Allow to select ping by their type. MozReview-Commit-ID: K7ukYocsAbt
toolkit/content/aboutTelemetry.js
toolkit/content/aboutTelemetry.xhtml
toolkit/locales/en-US/chrome/global/aboutTelemetry.dtd
--- a/toolkit/content/aboutTelemetry.js
+++ b/toolkit/content/aboutTelemetry.js
@@ -262,16 +262,17 @@ var Settings = {
     homeExplanation.innerHTML = explanation;
     this.attachObservers()
   }
 };
 
 var PingPicker = {
   viewCurrentPingData: null,
   _archivedPings: null,
+  TYPE_ALL: "all",
 
   attachObservers() {
     let elements = document.getElementsByName("choose-ping-source");
     for (let el of elements) {
       el.addEventListener("change", () => this.onPingSourceChanged());
     }
 
     let displays = document.getElementsByName("choose-ping-display");
@@ -285,16 +286,19 @@ var PingPicker = {
 
     document.getElementById("choose-ping-week").addEventListener("change", () => {
       this._renderPingList();
       this._updateArchivedPingData();
     });
     document.getElementById("choose-ping-id").addEventListener("change", () => {
       this._updateArchivedPingData()
     });
+    document.getElementById("choose-ping-type").addEventListener("change", () => {
+      this.filterDisplayedPings();
+    });
 
     document.getElementById("newer-ping")
             .addEventListener("click", () => this._movePingIndex(-1));
     document.getElementById("older-ping")
             .addEventListener("click", () => this._movePingIndex(1));
     document.getElementById("choose-payload")
             .addEventListener("change", () => displayPingData(gPingData));
     document.getElementById("scalars-processes")
@@ -429,31 +433,65 @@ var PingPicker = {
     let pingSelector = document.getElementById("choose-ping-id");
     removeAllChildNodes(pingSelector);
 
     let weekRange = this._getSelectedWeek();
     let pings = this._archivedPings.filter(
       (p) => p.timestampCreated >= weekRange.startDate.getTime() &&
              p.timestampCreated < weekRange.endDate.getTime());
 
+    let pingTypes = new Set();
+    pingTypes.add(this.TYPE_ALL);
     for (let p of pings) {
+      pingTypes.add(p.type);
       let date = new Date(p.timestampCreated);
       let text = shortDateString(date)
-                 + " " + shortTimeString(date)
-                 + " - " + p.type;
+                 + " " + shortTimeString(date);
 
       let option = document.createElement("option");
       let content = document.createTextNode(text);
       option.appendChild(content);
       option.setAttribute("value", p.id);
+      option.dataset.type = p.type;
       if (id && p.id == id) {
         option.selected = true;
       }
       pingSelector.appendChild(option);
     }
+    this._renderPingTypes(pingTypes);
+  },
+
+  filterDisplayedPings() {
+    let pingSelector = document.getElementById("choose-ping-id");
+    let typeSelector = document.getElementById("choose-ping-type");
+    let type = typeSelector.options[typeSelector.selectedIndex].value;
+    if (type == this.TYPE_ALL) {
+      pingSelector.children.forEach(option => option.hidden = false);
+      pingSelector.children[0].selected = true;
+    } else {
+      let first;
+      pingSelector.children.forEach((option) => {
+        if (first && option.dataset.type == type) {
+          option.selected = true;
+          first = false;
+        }
+        option.hidden = option.dataset.type != type;
+      });
+    }
+  },
+
+  _renderPingTypes(pingTypes) {
+    let pingTypeSelector = document.getElementById("choose-ping-type");
+    removeAllChildNodes(pingTypeSelector);
+    pingTypes.forEach((type) => {
+      let option = document.createElement("option");
+      option.appendChild(document.createTextNode(type));
+      option.setAttribute("value", type);
+      pingTypeSelector.appendChild(option);
+    });
   },
 
   _getSelectedPingName() {
     if (this.viewCurrentPingData) return "current";
 
     let pingSelector = document.getElementById("choose-ping-id");
     let selected = pingSelector.selectedOptions.item(0);
     return selected.textContent;
--- a/toolkit/content/aboutTelemetry.xhtml
+++ b/toolkit/content/aboutTelemetry.xhtml
@@ -115,24 +115,29 @@
           </div>
           <div id="archived-ping-picker" class="hidden">
             &aboutTelemetry.choosePing;<br />
             <button id="newer-ping" type="button">&aboutTelemetry.showNewerPing;</button>
             <button id="older-ping" type="button">&aboutTelemetry.showOlderPing;</button><br />
             <table>
               <tr>
                   <th>&aboutTelemetry.archiveWeekHeader;</th>
+                  <th>&aboutTelemetry.pingType;</th>
                   <th>&aboutTelemetry.archivePingHeader;</th>
               </tr>
               <tr>
                   <td>
                       <select id="choose-ping-week">
                       </select>
                   </td>
                   <td>
+                      <select id="choose-ping-type">
+                      </select>
+                  </td>
+                  <td>
                       <select id="choose-ping-id">
                       </select>
                   </td>
               </tr>
             </table>
           </div>
           <table>
               <tr>
--- a/toolkit/locales/en-US/chrome/global/aboutTelemetry.dtd
+++ b/toolkit/locales/en-US/chrome/global/aboutTelemetry.dtd
@@ -51,16 +51,20 @@ Older ping &gt;&gt;
 <!ENTITY aboutTelemetry.rawPingData "
 Raw ping data…
 ">
 
 <!ENTITY aboutTelemetry.archiveWeekHeader "
 Week
 ">
 
+<!ENTITY aboutTelemetry.pingType "
+Ping Type
+">
+
 <!ENTITY aboutTelemetry.archivePingHeader "
 Ping
 ">
 
 <!ENTITY aboutTelemetry.generalDataSection "
   General Data
 ">