feat: add timerange support to timeline widget

README.md

@@ -1,15 +1,14 @@
 [![New Relic One Catalog Project header](https://github.com/newrelic/opensource-website/raw/master/src/images/categories/New_Relic_One_Catalog_Project.png)](https://opensource.newrelic.com/oss-category/#new-relic-one-catalog-project)
 
-
 # Status Widget Pack
 
+
 This nerdpack contains three status widget custom visualizations to be used with dashboards.
 - NRQL Status Widget (Configurable variations)
 - NRQL Status Timeline Widget
 - NRQL Status Table Widget
 - Entity Status Widget (2 modes: Summary & Table)
 
-
 ![NRQL Status Widget](screenshots/nrql-status-widget-1.png)
 <img src="screenshots/nrql-status-widget-2.png" alt="statuswidget2" width="300"/>
 

docs/CHANGELOG.md

@@ -1,3 +1,31 @@
+# [2.42.0](https://github.com/newrelic/nr1-status-widgets/compare/v2.41.0...v2.42.0) (2024-01-08)
+
+
+### Features
+
+* dummy commit ([71619b4](https://github.com/newrelic/nr1-status-widgets/commit/71619b4913fbc471c476498be53fbe5a52227c7b))
+
+# [2.41.0](https://github.com/newrelic/nr1-status-widgets/compare/v2.40.0...v2.41.0) (2024-01-08)
+
+
+### Features
+
+* dummy commit ([726d463](https://github.com/newrelic/nr1-status-widgets/commit/726d46360905023fd14ca85669b827259e964607))
+
+# [2.40.0](https://github.com/newrelic/nr1-status-widgets/compare/v2.39.2...v2.40.0) (2024-01-03)
+
+
+### Features
+
+* dummy commit ([5f6f0a3](https://github.com/newrelic/nr1-status-widgets/commit/5f6f0a32aa30b8735739573b152754031c10ec2c))
+
+## [2.39.2](https://github.com/newrelic/nr1-status-widgets/compare/v2.39.1...v2.39.2) (2023-12-06)
+
+
+### Bug Fixes
+
+* status table crash ([29e3c04](https://github.com/newrelic/nr1-status-widgets/commit/29e3c0408383670d2b462a03a9dbd96a9992ba37))
+
 ## [2.39.1](https://github.com/newrelic/nr1-status-widgets/compare/v2.39.0...v2.39.1) (2023-11-09)
 
 

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "nr1-status-widgets",
-  "version": "2.39.1",
+  "version": "2.42.0",
   "scripts": {
     "start": "nr1 nerdpack:serve",
     "test": "exit 0",

visualizations/shared/errorState.js

@@ -3,8 +3,6 @@ import { Card, CardBody, HeadingText } from 'nr1';
 
 export default class ErrorState extends React.Component {
   render() {
-    const { errors } = this.props;
-
     return (
       <Card className="ErrorState">
         <CardBody className="ErrorState-cardBody">
@@ -15,7 +13,7 @@ export default class ErrorState extends React.Component {
           >
             Oops! Something went wrong.
           </HeadingText>
-          {(errors || []).map((error, i) => (
+          {(this.props?.errors || []).map((error, i) => (
             <HeadingText
               key={i}
               spacingType={[HeadingText.SPACING_TYPE.MEDIUM]}

visualizations/status-table/status-table-widget.js

@@ -63,41 +63,45 @@ export default function StatusTableWidget(props) {
   const [finalQuery, setQuery] = useState(null);
   const [inputErrors, setInputErrors] = useState([]);
   const filterClause = filters ? `WHERE ${filters}` : '';
-
-  if (inputErrors.length > 0) {
-    return <ErrorState errors={inputErrors} />;
-  }
+  const [column, setColumn] = useState(parseInt(defaultSortNo || 0));
+  const [sortedCellConfigs, setCellConfigs] = useState([]);
+  const [sortingType, setSortingType] = useState(
+    TableHeaderCell.SORTING_TYPE[
+      defaultSortNo ? defaultSortDir || 'NONE' : 'NONE'
+    ]
+  );
 
   useEffect(() => {
-    let tempQuery = subVariables(query, selectedVariables);
+    if (query) {
+      let tempQuery = subVariables(query, selectedVariables);
 
-    if (useTimeRange) {
-      tempQuery += ` ${timeRangeToNrql(timeRange)}`;
-    }
+      if (useTimeRange) {
+        tempQuery += ` ${timeRangeToNrql(timeRange)}`;
+      }
 
-    if (enableFilters) {
-      tempQuery += ` ${filterClause}`;
-    }
+      if (enableFilters) {
+        tempQuery += ` ${filterClause}`;
+      }
 
-    setQuery(tempQuery);
+      setQuery(tempQuery);
+    }
 
     const inputErrors = discoverErrors(props);
     setInputErrors(inputErrors);
   }, [query, selectedVariables, enableFilters, filterClause, timeRange]);
 
   useEffect(() => {
-    fetchData();
-    interval.stop();
-    interval.start();
-    return interval.stop;
-  }, [finalQuery, pollInterval]);
+    const configs = (cellConfigs || []).sort((a, b) => {
+      const aNo = !isEmpty(a.priority) ? a.priority : 99999;
+      const bNo = !isEmpty(b.priority) ? b.priority : 99999;
+      return parseInt(aNo) - parseInt(bNo);
+    });
 
-  const interval = useInterval(() => {
-    fetchData();
-  }, (pollInterval || 60) * 1000);
+    setCellConfigs(configs);
+  }, [cellConfigs]);
 
   const fetchData = async () => {
-    if (finalQuery) {
+    if (finalQuery && accountId) {
       const result = await NrqlQuery.query({
         query: finalQuery,
         accountIds: [parseInt(accountId)],
@@ -107,18 +111,20 @@ export default function StatusTableWidget(props) {
     }
   };
 
-  const sortedCellConfigs = (cellConfigs || []).sort((a, b) => {
-    const aNo = !isEmpty(a.priority) ? a.priority : 99999;
-    const bNo = !isEmpty(b.priority) ? b.priority : 99999;
-    return parseInt(aNo) - parseInt(bNo);
-  });
+  const interval = useInterval(() => {
+    fetchData();
+  }, (pollInterval || 60) * 1000);
 
-  const [column, setColumn] = useState(parseInt(defaultSortNo || 0));
-  const [sortingType, setSortingType] = useState(
-    TableHeaderCell.SORTING_TYPE[
-      defaultSortNo ? defaultSortDir || 'NONE' : 'NONE'
-    ]
-  );
+  useEffect(() => {
+    fetchData();
+    interval.stop();
+    interval.start();
+    return interval.stop;
+  }, [finalQuery, accountId, pollInterval]);
+
+  if (inputErrors.length > 0) {
+    return <ErrorState errors={inputErrors} />;
+  }
 
   const onClickTableHeaderCell = (nextColumn, { nextSortingType }) => {
     if (nextColumn === column) {