Merge pull request #48 from newrelic/kav/tableFix

fix: status table crash
newrelic · Dec 1, 2023 · 6d0ea10 · 6d0ea10
2 parents 605bbae + 29e3c04
commit 6d0ea10
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 35 deletions.
diff --git a/visualizations/shared/errorState.js b/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]}

diff --git a/visualizations/status-table/status-table-widget.js b/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) {