Avoid runtime errors in case of limits missing in redux

ui/src/buckets/components/BucketsTab.tsx

@@ -21,16 +21,16 @@ import {
 
 // Utils
 import {prettyBuckets} from 'src/shared/utils/prettyBucket'
+import {extractBucketLimits} from 'src/cloud/utils/limits'
 
 // Types
-import {Organization} from '@influxdata/influx'
 import {
   IconFont,
   ComponentSize,
   ComponentColor,
   Sort,
 } from '@influxdata/clockface'
-import {OverlayState, AppState, Bucket} from 'src/types'
+import {OverlayState, AppState, Bucket, Organization} from 'src/types'
 import {SortTypes} from 'src/shared/utils/sort'
 
 interface StateProps {
@@ -217,18 +217,10 @@ class BucketsTab extends PureComponent<Props, State> {
   }
 }
 
-const mstp = ({
-  buckets,
-  orgs,
-  cloud: {
-    limits: {
-      buckets: {limitStatus},
-    },
-  },
-}: AppState): StateProps => ({
+const mstp = ({buckets, orgs, cloud: {limits}}: AppState): StateProps => ({
   buckets: buckets.list,
   org: orgs.org,
-  limitStatus,
+  limitStatus: extractBucketLimits(limits),
 })
 
 const mdtp = {

ui/src/cloud/actions/limits.ts

@@ -18,6 +18,11 @@ import {
 
 // Types
 import {RemoteDataState} from '@influxdata/clockface'
+import {
+  extractDashboardMax,
+  extractBucketMax,
+  extractTaskMax,
+} from 'src/cloud/utils/limits'
 
 export enum LimitStatus {
   OK = 'ok',
@@ -170,16 +175,13 @@ export const checkDashboardLimits = () => (
   try {
     const {
       dashboards: {list},
-      cloud: {
-        limits: {
-          dashboards: {maxAllowed},
-        },
-      },
+      cloud: {limits},
     } = getState()
 
+    const dashboardsMax = extractDashboardMax(limits)
     const dashboardsCount = list.length
 
-    if (maxAllowed <= dashboardsCount) {
+    if (dashboardsCount >= dashboardsMax) {
       dispatch(setDashboardLimitStatus(LimitStatus.EXCEEDED))
       dispatch(notify(resourceLimitReached('dashboards')))
     } else {
@@ -197,16 +199,13 @@ export const checkBucketLimits = () => async (
   try {
     const {
       buckets: {list},
-      cloud: {
-        limits: {
-          buckets: {maxAllowed},
-        },
-      },
+      cloud: {limits},
     } = getState()
 
+    const bucketsMax = extractBucketMax(limits)
     const bucketsCount = list.length
 
-    if (maxAllowed <= bucketsCount) {
+    if (bucketsCount >= bucketsMax) {
       dispatch(setBucketLimitStatus(LimitStatus.EXCEEDED))
       dispatch(notify(resourceLimitReached('buckets')))
     } else {
@@ -224,16 +223,13 @@ export const checkTaskLimits = () => async (
   try {
     const {
       tasks: {list},
-      cloud: {
-        limits: {
-          tasks: {maxAllowed},
-        },
-      },
+      cloud: {limits},
     } = getState()
 
+    const tasksMax = extractTaskMax(limits)
     const tasksCount = list.length
 
-    if (maxAllowed <= tasksCount) {
+    if (tasksCount >= tasksMax) {
       dispatch(setTaskLimitStatus(LimitStatus.EXCEEDED))
       dispatch(notify(resourceLimitReached('tasks')))
     } else {

ui/src/cloud/utils/limits.ts

@@ -1,5 +1,6 @@
 import {get} from 'lodash'
 import {RATE_LIMIT_ERROR_STATUS} from 'src/shared/constants/errors'
+import {LimitsState} from 'src/cloud/reducers/limits'
 
 export const isLimitError = error => {
   return get(error, 'response.status', '') === RATE_LIMIT_ERROR_STATUS
@@ -8,3 +9,27 @@ export const isLimitError = error => {
 export const extractMessage = error => {
   return get(error, 'response.data.message', '')
 }
+
+export const extractBucketLimits = (limits: LimitsState) => {
+  return get(limits, 'buckets.limitStatus')
+}
+
+export const extractBucketMax = (limits: LimitsState) => {
+  return get(limits, 'buckets.maxAllowed', Infinity)
+}
+
+export const extractDashboardLimits = (limits: LimitsState) => {
+  return get(limits, 'dashboards.limitStatus')
+}
+
+export const extractDashboardMax = (limits: LimitsState) => {
+  return get(limits, 'dashboard.maxAllowed', Infinity)
+}
+
+export const extractTaskLimits = (limits: LimitsState) => {
+  return get(limits, 'tasks.limitStatus')
+}
+
+export const extractTaskMax = (limits: LimitsState) => {
+  return get(limits, 'task.maxAllowed', Infinity)
+}

ui/src/dashboards/components/dashboard_index/DashboardsIndex.tsx

@@ -28,6 +28,7 @@ import {checkDashboardLimits as checkDashboardLimitsAction} from 'src/cloud/acti
 import {AppState} from 'src/types'
 import {LimitStatus} from 'src/cloud/actions/limits'
 import {ComponentStatus} from 'src/clockface'
+import {extractDashboardLimits} from 'src/cloud/utils/limits'
 
 interface DispatchProps {
   handleDeleteDashboard: typeof deleteDashboardAsync
@@ -160,15 +161,11 @@ class DashboardIndex extends PureComponent<Props, State> {
 
 const mstp = (state: AppState): StateProps => {
   const {
-    cloud: {
-      limits: {
-        dashboards: {limitStatus},
-      },
-    },
+    cloud: {limits},
   } = state
 
   return {
-    limitStatus,
+    limitStatus: extractDashboardLimits(limits),
   }
 }
 

ui/src/tasks/containers/TasksPage.tsx

@@ -36,6 +36,7 @@ import {AppState, Task, TaskStatus, RemoteDataState} from 'src/types'
 import {InjectedRouter, WithRouterProps} from 'react-router'
 import {Sort} from '@influxdata/clockface'
 import {SortTypes} from 'src/shared/utils/sort'
+import {extractTaskLimits} from 'src/cloud/utils/limits'
 
 interface PassedInProps {
   router: InjectedRouter
@@ -266,18 +267,14 @@ class TasksPage extends PureComponent<Props, State> {
 
 const mstp = ({
   tasks: {status, list, searchTerm, showInactive},
-  cloud: {
-    limits: {
-      tasks: {limitStatus},
-    },
-  },
+  cloud: {limits},
 }: AppState): ConnectedStateProps => {
   return {
     tasks: list,
     status: status,
     searchTerm,
     showInactive,
-    limitStatus,
+    limitStatus: extractTaskLimits(limits),
   }
 }