Add time range picker and other small UI fixes (#6)

* add time range picker Previously, dashboards and reports lacked useful time range pickers. This commit adds reasonable-default pickers to the following views: + Overview + Details + Bolt + Reports/all_reports + Reports/hosts_with_failures + Reports/hosts_with_corrective_changes Also: + removes auto-refresh in panels throughout + ensures consistent panel loading behaviour throughout Signed-off-by: JD Welch <[email protected]> * add time range to bolt dashboard Signed-off-by: JD Welch <[email protected]>
puppetlabs · Apr 2, 2019 · 14c7ba8 · 14c7ba8
1 parent 0d9969e
commit 14c7ba8
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 62 deletions.
diff --git a/default/data/ui/views/all_reports.xml b/default/data/ui/views/all_reports.xml
@@ -1,5 +1,14 @@
-<dashboard theme="light">
+<form theme="light">
   <label>All summary reports by last submission time</label>
+  <fieldset submitButton="false">
+    <input type="time" token="reportTimeRange" searchWhenChanged="true">
+      <label>Time range:</label>
+      <default>
+        <earliest>-7d@h</earliest>
+        <latest>now</latest>
+      </default>
+    </input>
+  </fieldset>
   <row>
     <panel>
       <table>
@@ -13,15 +22,16 @@
 | rename run_time_rnd as "Execution Time (seconds)"
 | sort - "Report Time"
 | table Host, "Report Time", "Execution Time (seconds)"</query>
-          <earliest>-24h@h</earliest>
-          <latest>now</latest>
+          <earliest>0</earliest>
+          <latest></latest>
         </search>
-        <option name="count">40</option>
+        <option name="count">20</option>
         <option name="dataOverlayMode">none</option>
         <option name="drilldown">cell</option>
         <option name="percentagesRow">false</option>
+        <option name="refresh.display">progressbar</option>
         <option name="totalsRow">false</option>
       </table>
     </panel>
   </row>
-</dashboard>
+</form>
diff --git a/default/data/ui/views/bolt.xml b/default/data/ui/views/bolt.xml
@@ -1,14 +1,23 @@
-<dashboard script="overview.js" theme="light">
+<form script="overview.js" theme="light">
   <label>Bolt</label>
+  <fieldset submitButton="false">
+    <input type="time" token="boltTimeRange" searchWhenChanged="true">
+      <label>Time range:</label>
+      <default>
+        <earliest>-7d@h</earliest>
+        <latest>now</latest>
+      </default>
+    </input>
+  </fieldset>
   <row>
     <panel>
-      <title>All Bolt runs (last 7 days)</title>
+      <title>All Bolt runs</title>
       <chart>
         <search>
           <query>sourcetype="puppet:bolt" event_type="bolt_apply"
 | timechart count(_raw)</query>
-          <earliest>-7d@h</earliest>
-          <latest>now</latest>
+          <earliest>$boltTimeRange.earliest$</earliest>
+          <latest>$boltTimeRange.latest$</latest>
         </search>
         <option name="charting.axisTitleX.text">Time</option>
         <option name="charting.axisTitleX.visibility">visible</option>
@@ -19,7 +28,7 @@
         <option name="charting.chart.showDataLabels">all</option>
         <option name="charting.drilldown">all</option>
         <option name="charting.legend.placement">none</option>
-        <option name="refresh.display">progressbar</option>
+        <option name="refresh.display">preview</option>
       </chart>
     </panel>
   </row>
@@ -36,12 +45,12 @@
 | rename "log" as "Log"
 | table Host, "Report Time", "Log"
 | sort - "Report Time"</query>
-          <earliest>-7d@h</earliest>
-          <latest>now</latest>
+          <earliest>$boltTimeRange.earliest$</earliest>
+          <latest>$boltTimeRange.latest$</latest>
         </search>
         <option name="drilldown">cell</option>
-        <option name="refresh.display">progressbar</option>
+        <option name="refresh.display">preview</option>
       </table>
     </panel>
   </row>
-</dashboard>
+</form>
diff --git a/default/data/ui/views/details.xml b/default/data/ui/views/details.xml
@@ -1,27 +1,37 @@
-<dashboard script="overview.js" theme="light">
+<form script="overview.js" theme="light">
   <label>Details</label>
+  <fieldset submitButton="false">
+    <input type="time" token="detailsTimeRange" searchWhenChanged="true">
+      <label>Time range:</label>
+      <default>
+        <earliest>-7d@h</earliest>
+        <latest>now</latest>
+      </default>
+    </input>
+  </fieldset>
   <row>
     <panel>
       <title>Hosts by OS family</title>
       <chart>
         <search>
           <query>sourcetype="puppet:detailed" 
 | top facts.osfamily limit=100</query>
-          <earliest>-24h@h</earliest>
-          <latest>now</latest>
+          <earliest>$detailsTimeRange.earliest$</earliest>
+          <latest>$detailsTimeRange.latest$</latest>
         </search>
         <option name="charting.chart">pie</option>
         <option name="charting.drilldown">none</option>
+        <option name="refresh.display">preview</option>
       </chart>
     </panel>
     <panel>
-      <title>Free memory by host (avg, last 7d)</title>
+      <title>Free memory by host (average)</title>
       <chart>
         <search>
           <query>sourcetype="puppet:detailed" 
 | chart avg(facts.memoryfree_mb) by host</query>
-          <earliest>-7d@h</earliest>
-          <latest>now</latest>
+          <earliest>$detailsTimeRange.earliest$</earliest>
+          <latest>$detailsTimeRange.latest$</latest>
         </search>
         <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
         <option name="charting.axisLabelsY.majorUnit">1000</option>
@@ -49,15 +59,15 @@
 | search "logs.data{}.source"=Class*
 | rename "logs.data{}.source" as "Class"
 | table Class</query>
-          <earliest>-7d@h</earliest>
-          <latest>now</latest>
+          <earliest>$detailsTimeRange.earliest$</earliest>
+          <latest>$detailsTimeRange.latest$</latest>
           <sampleRatio>1</sampleRatio>
         </search>
         <option name="count">20</option>
         <option name="dataOverlayMode">none</option>
         <option name="drilldown">row</option>
         <option name="percentagesRow">false</option>
-        <option name="refresh.display">progressbar</option>
+        <option name="refresh.display">preview</option>
         <option name="rowNumbers">false</option>
         <option name="totalsRow">false</option>
         <option name="wrap">true</option>
@@ -81,19 +91,19 @@
 | rename strf_time as "Report Time"
 | sort -"Report Time"
 | table "Host" "OS Family" "Architecture" "Uptime" "IPv4 address" "Report Time"</query>
-          <earliest>-24h@h</earliest>
-          <latest>now</latest>
+          <earliest>$detailsTimeRange.earliest$</earliest>
+          <latest>$detailsTimeRange.latest$</latest>
           <sampleRatio>1</sampleRatio>
         </search>
         <option name="count">20</option>
         <option name="dataOverlayMode">none</option>
         <option name="drilldown">none</option>
         <option name="percentagesRow">false</option>
-        <option name="refresh.display">progressbar</option>
+        <option name="refresh.display">preview</option>
         <option name="rowNumbers">false</option>
         <option name="totalsRow">false</option>
         <option name="wrap">true</option>
       </table>
     </panel>
   </row>
-</dashboard>
+</form>
diff --git a/default/data/ui/views/hosts_with_corrective_changes.xml b/default/data/ui/views/hosts_with_corrective_changes.xml
@@ -1,5 +1,14 @@
-<dashboard theme="light">
-  <label>Hosts with corrective changes (last 24h)</label>
+<form theme="light">
+  <label>Hosts with corrective changes</label>
+  <fieldset submitButton="false">
+    <input type="time" token="reportTimeRange">
+      <label>Time range:</label>
+      <default>
+        <earliest>-7d@h</earliest>
+        <latest>now</latest>
+      </default>
+    </input>
+  </fieldset>
   <row>
     <panel>
       <table>
@@ -16,16 +25,16 @@
 | rename run_time_rnd as "Execution Time (seconds)"
 | sort -"Report Time"
 | table Host, "Corrective Change", "Report Time", "Execution Time (seconds)"</query>
-          <earliest>-24h@h</earliest>
-          <latest>now</latest>
+          <earliest>$reportTimeRange.earliest$</earliest>
+          <latest>$reportTimeRange.latest$</latest>
         </search>
         <option name="count">20</option>
         <option name="dataOverlayMode">none</option>
         <option name="drilldown">row</option>
         <option name="percentagesRow">false</option>
-        <option name="refresh.display">progressbar</option>
+        <option name="refresh.display">preview</option>
         <option name="totalsRow">false</option>
       </table>
     </panel>
   </row>
-</dashboard>
+</form>
diff --git a/default/data/ui/views/hosts_with_failures.xml b/default/data/ui/views/hosts_with_failures.xml
@@ -1,5 +1,14 @@
-<dashboard theme="light">
-  <label>Hosts with resource failures (last 24h)</label>
+<form theme="light">
+  <label>Hosts with resource failures</label>
+  <fieldset submitButton="false">
+    <input type="time" token="reportTimeRange" searchWhenChanged="true">
+      <label>Time range:</label>
+      <default>
+        <earliest>-7d@h</earliest>
+        <latest>now</latest>
+      </default>
+    </input>
+  </fieldset>
   <row>
     <panel>
       <table>
@@ -15,16 +24,17 @@
 | rename run_time_rnd as "Execution Time (seconds)"
 | sort -"Report Time"
 | table Host, "Report Time", "Execution Time (seconds)"</query>
-          <earliest>-24h@h</earliest>
-          <latest>now</latest>
+          <earliest>$reportTimeRange.earliest$</earliest>
+          <latest>$reportTimeRange.latest$</latest>
         </search>
         <option name="count">20</option>
         <option name="dataOverlayMode">none</option>
         <option name="drilldown">cell</option>
         <option name="percentagesRow">false</option>
+        <option name="refresh.display">progressbar</option>
         <option name="totalsRow">false</option>
         <option name="wrap">false</option>
       </table>
     </panel>
   </row>
-</dashboard>
+</form>
diff --git a/default/data/ui/views/overview.xml b/default/data/ui/views/overview.xml
@@ -1,6 +1,15 @@
-<dashboard script="overview.js" theme="light">
+<form script="overview.js" theme="light">
   <label>Overview</label>
   <description>Report data generated by Puppet</description>
+  <fieldset submitButton="false">
+    <input type="time" token="overviewTimeRange" searchWhenChanged="true">
+      <label>Time range:</label>
+      <default>
+        <earliest>-7d@h</earliest>
+        <latest>now</latest>
+      </default>
+    </input>
+  </fieldset>
   <row>
     <panel>
       <title>All hosts</title>
@@ -9,11 +18,9 @@
           <query>sourcetype="puppet:summary" 
 | stats count by host 
 | stats count</query>
-          <earliest>-24h@h</earliest>
-          <latest>now</latest>
+          <earliest>$overviewTimeRange.earliest$</earliest>
+          <latest>$overviewTimeRange.latest$</latest>
           <sampleRatio>1</sampleRatio>
-          <refresh>30s</refresh>
-          <refreshType>delay</refreshType>
         </search>
         <option name="colorBy">value</option>
         <option name="colorMode">none</option>
@@ -31,7 +38,6 @@
         <option name="trellis.size">medium</option>
         <option name="trendColorInterpretation">standard</option>
         <option name="trendDisplayMode">absolute</option>
-        <option name="underLabel">reported in the past day</option>
         <option name="unit">hosts</option>
         <option name="unitPosition">after</option>
         <option name="useColors">0</option>
@@ -43,17 +49,14 @@
       <single>
         <search>
           <query>sourcetype="puppet:summary" | stats count</query>
-          <earliest>-24h@h</earliest>
-          <latest>now</latest>
-          <refresh>30s</refresh>
-          <refreshType>delay</refreshType>
+          <earliest>$overviewTimeRange.earliest$</earliest>
+          <latest>$overviewTimeRange.latest$</latest>
         </search>
         <option name="drilldown">all</option>
         <option name="field">count</option>
         <option name="height">70</option>
         <option name="rangeColors">["0x53a051","0x0877a6","0xf8be34","0xf1813f","0xdc4e41"]</option>
         <option name="refresh.display">preview</option>
-        <option name="underLabel">collected in the past day</option>
         <option name="unit">reports</option>
         <option name="unitPosition">after</option>
         <drilldown>
@@ -62,19 +65,19 @@
       </single>
     </panel>
     <panel>
-      <title>Hosts with corrective changes (last 24h)</title>
+      <title>Hosts with corrective changes</title>
       <single>
         <search>
           <query>sourcetype="puppet:summary" 
 | search corrective_change=true
 | dedup certname 
 | stats count</query>
-          <earliest>-24h@h</earliest>
-          <latest>now</latest>
+          <earliest>$overviewTimeRange.earliest$</earliest>
+          <latest>$overviewTimeRange.latest$</latest>
         </search>
         <option name="drilldown">all</option>
         <option name="rangeColors">["0x53a051","0x0877a6","0xf8be34","0xf1813f","0xdc4e41"]</option>
-        <option name="refresh.display">progressbar</option>
+        <option name="refresh.display">preview</option>
         <option name="trellis.enabled">0</option>
         <option name="trellis.size">large</option>
         <option name="trellis.splitBy">_aggregation</option>
@@ -85,19 +88,19 @@
       </single>
     </panel>
     <panel>
-      <title>Hosts with failures (last 24h)</title>
+      <title>Hosts with failures</title>
       <single>
         <search>
           <query>sourcetype="puppet:summary" 
 | search status=failed
 | dedup certname
 | stats count</query>
-          <earliest>-24h@h</earliest>
-          <latest>now</latest>
+          <earliest>$overviewTimeRange.earliest$</earliest>
+          <latest>$overviewTimeRange.latest$</latest>
         </search>
         <option name="drilldown">all</option>
         <option name="rangeColors">["0x53a051","0x0877a6","0xf8be34","0xf1813f","0xdc4e41"]</option>
-        <option name="refresh.display">progressbar</option>
+        <option name="refresh.display">preview</option>
         <option name="underLabel">hosts with failures</option>
         <drilldown>
           <link target="_blank">/app/TA-puppet-report-viewer/hosts_with_failures</link>
@@ -114,18 +117,17 @@
 | spath "metrics.changes" 
 | search "metrics.changes"&gt;0
 | timechart count(metrics.changes)</query>
-          <earliest>0</earliest>
-          <latest></latest>
+          <earliest>$overviewTimeRange.earliest$</earliest>
+          <latest>$overviewTimeRange.latest$</latest>
         </search>
         <option name="charting.axisTitleX.text">Time</option>
         <option name="charting.axisTitleY.text">Changes</option>
         <option name="charting.axisY.abbreviation">none</option>
         <option name="charting.chart">line</option>
         <option name="charting.drilldown">all</option>
         <option name="charting.legend.placement">none</option>
-        <option name="refresh.display">progressbar</option>
+        <option name="refresh.display">preview</option>
       </chart>
     </panel>
-
   </row>
-</dashboard>
+</form>