Merge pull request #45 from newrelic/kav/statusWidgetUpdates

feat: nrql status std colors + custom poll
newrelic · Jun 30, 2023 · a01e91f · a01e91f
2 parents 0e4b519 + 40ef8de
commit a01e91f
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 10 deletions.
diff --git a/visualizations/nrql-status-widget/bottomMetrics.js b/visualizations/nrql-status-widget/bottomMetrics.js
@@ -20,7 +20,8 @@ export default class BottomMetrics extends React.Component {
       mainProps,
       displayTimeline,
       hideLabels,
-      fontSizeMultiplier
+      fontSizeMultiplier,
+      pollInterval
     } = this.props;
 
     const {
@@ -93,6 +94,7 @@ export default class BottomMetrics extends React.Component {
             leftStatus={this.state.leftStatus}
             metricLabelRight={metricLabelRight}
             hideLabels={hideLabels}
+            pollInterval={pollInterval}
           />
         )}
         {queryRight && (
@@ -114,6 +116,7 @@ export default class BottomMetrics extends React.Component {
             leftStatus={this.state.leftStatus}
             metricLabelLeft={metricLabelLeft}
             hideLabels={hideLabels}
+            pollInterval={pollInterval}
           />
         )}
       </div>

diff --git a/visualizations/nrql-status-widget/nr1.json b/visualizations/nrql-status-widget/nr1.json
@@ -16,12 +16,53 @@
       "description": "NRQL query eg. SELECT count(*) FROM TransactionError",
       "type": "nrql"
     },
+    {
+      "name": "pollInterval",
+      "title": "Optional Poll Interval (seconds)",
+      "description": "",
+      "type": "enum",
+      "items": [
+        {
+          "title": "Default - auto",
+          "value": null
+        },
+        {
+          "title": "5s",
+          "value": 5000
+        },
+        {
+          "title": "10s",
+          "value": 10000
+        },
+        {
+          "title": "15s",
+          "value": 15000
+        },
+        {
+          "title": "30s",
+          "value": 30000
+        },
+        {
+          "title": "45s",
+          "value": 45000
+        },
+        {
+          "title": "1m",
+          "value": 60000
+        },
+        {
+          "title": "5m",
+          "value": 300000
+        }
+      ]
+    },
     {
       "name": "enableFlash",
       "title": "Enable flash/pulse effect when not healthy",
       "description": "",
       "type": "boolean"
-    },    {
+    },
+    {
       "name": "fontMultiplier",
       "title": "Font multiplier - increase the font size (default: 1)",
       "description": "",

diff --git a/visualizations/nrql-status-widget/status-widget.js b/visualizations/nrql-status-widget/status-widget.js
@@ -101,7 +101,8 @@ export default class StatusWidget extends React.Component {
       sloBudget,
       sloBar,
       sloDaysToView,
-      fontMultiplier
+      fontMultiplier,
+      pollInterval
     } = this.props;
     let { displayTimeline, metricLabel, queryLeft, queryRight } = this.props;
 
@@ -244,7 +245,9 @@ export default class StatusWidget extends React.Component {
         <NrqlQuery
           query={finalQuery}
           accountIds={[parseInt(accountId)]}
-          pollInterval={NrqlQuery.AUTO_POLL_INTERVAL}
+          pollInterval={
+            pollInterval ? parseInt(pollInterval) : NrqlQuery.AUTO_POLL_INTERVAL
+          }
         >
           {({ data, loading, error }) => {
             if (loading) {
@@ -389,6 +392,7 @@ export default class StatusWidget extends React.Component {
                   height={height}
                   mainProps={this.props}
                   fontSizeMultiplier={fontSizeMultiplier}
+                  pollInterval={pollInterval}
                 />
 
                 {displayTimeline && (

diff --git a/visualizations/nrql-status-widget/styles.scss b/visualizations/nrql-status-widget/styles.scss
@@ -1,5 +1,9 @@
+// crit #f5554b
+// orange #f07a0e
+// yell #ffd23d
+// green #01a76a
 .healthy-bg {
-  background-color: #3a845e;
+  background-color: #01a76a;
 }
 
 .critical-bg {
@@ -14,7 +18,7 @@
     background-color: #222;
   }
   50% {
-    background-color: #a1251a;
+    background-color: #f5554b;
   }
   100% {
     background-color: #222;
@@ -33,7 +37,7 @@
     background-color: #222;
   }
   50% {
-    background-color: #f8d45c;
+    background-color: #ffd23d;
   }
   100% {
     background-color: #222;
@@ -60,15 +64,15 @@
 }
 
 .healthy-solid-bg {
-  background-color: #3a845e;
+  background-color: #01a76a;
 }
 
 .critical-solid-bg {
-  background-color: #a1251a;
+  background-color: #f5554b;
 }
 
 .warning-solid-bg {
-  background-color: #f8d45c;
+  background-color: #ffd23d;
 }
 
 .unknown-solid-bg {