feat(sampledata): Allow users to query buckets in 'other' org (#17207)

* feat(sampledata): Query appropriate org in queries

* feat(sampledata): Add bucket resource fetching to Dashboard and DE

* feat(sampledata): Get orgID from query in refreshing view

* feat(sampledata): Be the change you want to see

* feat(sampledata): Only use loading state if resource has not been loaded before

* feat(sampledata )Get buckets from api endpoint rather than through query

* feat(sampledata): Direct load tag selector and values queries to correct org

* feat(sampledata): Protect against buckets that have no orgID.

ui/src/authorizations/actions/thunks.ts

@@ -36,10 +36,12 @@ import {
   NotificationAction,
   Authorization,
   AuthEntities,
+  ResourceType,
 } from 'src/types'
 
 // Selectors
 import {getOrg} from 'src/organizations/selectors'
+import {getStatus} from 'src/resources/selectors'
 
 type GetAuthorizations = (
   dispatch: Dispatch<Action | NotificationAction>,
@@ -50,8 +52,15 @@ export const getAuthorizations = () => async (
   getState: GetState
 ) => {
   try {
-    dispatch(setAuthorizations(RemoteDataState.Loading))
-    const org = getOrg(getState())
+    const state = getState()
+    if (
+      getStatus(state, ResourceType.Authorizations) ===
+      RemoteDataState.NotStarted
+    ) {
+      dispatch(setAuthorizations(RemoteDataState.Loading))
+    }
+
+    const org = getOrg(state)
     const resp = await api.getAuthorizations({query: {orgID: org.id}})
 
     if (resp.status !== 200) {

ui/src/buckets/actions/thunks.ts

@@ -17,11 +17,13 @@ import {
   Bucket,
   BucketEntities,
   Label,
+  ResourceType,
 } from 'src/types'
 
 // Utils
 import {getErrorMessage} from 'src/utils/api'
 import {getOrg} from 'src/organizations/selectors'
+import {getLabels, getStatus} from 'src/resources/selectors'
 
 // Actions
 import {
@@ -46,7 +48,6 @@ import {
   addBucketLabelFailed,
   removeBucketLabelFailed,
 } from 'src/shared/copy/notifications'
-import {getLabels} from 'src/resources/selectors'
 
 type Action = BucketAction | NotifyAction
 
@@ -55,8 +56,11 @@ export const getBuckets = () => async (
   getState: GetState
 ) => {
   try {
-    dispatch(setBuckets(RemoteDataState.Loading))
-    const org = getOrg(getState())
+    const state = getState()
+    if (getStatus(state, ResourceType.Buckets) === RemoteDataState.NotStarted) {
+      dispatch(setBuckets(RemoteDataState.Loading))
+    }
+    const org = getOrg(state)
 
     const resp = await api.getBuckets({query: {orgID: org.id}})
 

ui/src/buckets/components/BucketsTab.tsx

@@ -41,6 +41,7 @@ import {
 import {prettyBuckets} from 'src/shared/utils/prettyBucket'
 import {extractBucketLimits} from 'src/cloud/utils/limits'
 import {getOrg} from 'src/organizations/selectors'
+import {getAll} from 'src/resources/selectors'
 
 // Types
 import {
@@ -51,7 +52,6 @@ import {
   ResourceType,
 } from 'src/types'
 import {SortTypes} from 'src/shared/utils/sort'
-import {getAll} from 'src/resources/selectors'
 
 interface StateProps {
   org: Organization

ui/src/checks/actions/thunks.ts

@@ -18,7 +18,7 @@ import {reportError} from 'src/shared/utils/errors'
 import {createView} from 'src/views/helpers'
 import {getOrg} from 'src/organizations/selectors'
 import {toPostCheck, builderToPostCheck} from 'src/checks/utils'
-import {getAll} from 'src/resources/selectors'
+import {getAll, getStatus} from 'src/resources/selectors'
 
 // Actions
 import {
@@ -66,8 +66,11 @@ export const getChecks = () => async (
   getState: GetState
 ) => {
   try {
-    dispatch(setChecks(RemoteDataState.Loading))
-    const {id: orgID} = getOrg(getState())
+    const state = getState()
+    if (getStatus(state, ResourceType.Checks) === RemoteDataState.NotStarted) {
+      dispatch(setChecks(RemoteDataState.Loading))
+    }
+    const {id: orgID} = getOrg(state)
 
     const resp = await api.getChecks({query: {orgID}})
 

ui/src/dashboards/actions/thunks.ts

@@ -48,7 +48,7 @@ import {getSaveableView} from 'src/timeMachine/selectors'
 import {incrementCloneName} from 'src/utils/naming'
 import {isLimitError} from 'src/cloud/utils/limits'
 import {getOrg} from 'src/organizations/selectors'
-import {getAll, getByID} from 'src/resources/selectors'
+import {getAll, getByID, getStatus} from 'src/resources/selectors'
 
 // Constants
 import * as copy from 'src/shared/copy/notifications'
@@ -193,10 +193,17 @@ export const getDashboards = () => async (
   getState: GetState
 ): Promise<void> => {
   try {
-    const org = getOrg(getState())
     const {setDashboards} = creators
 
-    dispatch(setDashboards(RemoteDataState.Loading))
+    const state = getState()
+    if (
+      getStatus(state, ResourceType.Dashboards) === RemoteDataState.NotStarted
+    ) {
+      dispatch(setDashboards(RemoteDataState.Loading))
+    }
+
+    const org = getOrg(state)
+
     const resp = await api.getDashboards({query: {orgID: org.id}})
 
     if (resp.status !== 200) {

ui/src/dashboards/components/DashboardContainer.tsx

@@ -4,6 +4,7 @@ import {connect} from 'react-redux'
 
 // Components
 import GetResource from 'src/resources/components/GetResource'
+import GetResources from 'src/resources/components/GetResources'
 import DashboardPage from 'src/dashboards/components/DashboardPage'
 import GetTimeRange from 'src/dashboards/components/GetTimeRange'
 import DashboardRoute from 'src/shared/components/DashboardRoute'
@@ -43,9 +44,11 @@ const DashboardContainer: FC<Props> = ({autoRefresh, dashboard, children}) => {
   return (
     <DashboardRoute>
       <GetResource resources={[{type: ResourceType.Dashboards, id: dashboard}]}>
-        <GetTimeRange />
-        <DashboardPage autoRefresh={autoRefresh} />
-        {children}
+        <GetResources resources={[ResourceType.Buckets]}>
+          <GetTimeRange />
+          <DashboardPage autoRefresh={autoRefresh} />
+          {children}
+        </GetResources>
       </GetResource>
     </DashboardRoute>
   )

ui/src/dataExplorer/components/DataExplorerPage.tsx

@@ -21,7 +21,7 @@ const DataExplorerPage: SFC = ({children}) => {
   return (
     <Page titleTag={pageTitleSuffixer(['Data Explorer'])}>
       {children}
-      <GetResources resources={[ResourceType.Variables]}>
+      <GetResources resources={[ResourceType.Variables, ResourceType.Buckets]}>
         <Page.Header fullWidth={true}>
           <Page.Title title="Data Explorer" />
         </Page.Header>

ui/src/dataLoaders/actions/telegrafEditor.ts

@@ -1,20 +1,32 @@
-import {Bucket} from 'src/types'
-import {getTelegrafPlugins} from 'src/client'
-import {RemoteDataState} from 'src/types'
 import {Dispatch} from 'react'
+
+import {getTelegrafPlugins} from 'src/client'
+
 import {
   TelegrafEditorPluginState,
   TelegrafEditorActivePluginState,
   TelegrafEditorBasicPlugin,
 } from 'src/dataLoaders/reducers/telegrafEditor'
 
+// Utils
+
+// Types
+import {Bucket, RemoteDataState, ResourceType, GetState} from 'src/types'
+import {getStatus} from 'src/resources/selectors'
+
 export type PluginResourceAction =
   | ReturnType<typeof setPlugins>
   | ReturnType<typeof setPluginLoadingState>
 
 export const getPlugins = () => async (
-  dispatch: Dispatch<PluginResourceAction>
+  dispatch: Dispatch<PluginResourceAction>,
+  getState: GetState
 ) => {
+  const state = getState()
+  if (getStatus(state, ResourceType.Plugins) === RemoteDataState.NotStarted) {
+    dispatch(setPluginLoadingState(RemoteDataState.Loading))
+  }
+
   dispatch(setPluginLoadingState(RemoteDataState.Loading))
 
   const result = await getTelegrafPlugins({}, {})

ui/src/labels/actions/thunks.ts

@@ -20,6 +20,7 @@ import {
   GetState,
   Label,
   LabelEntities,
+  ResourceType,
 } from 'src/types'
 
 // Actions
@@ -40,14 +41,19 @@ import {
 // Utils
 import {getOrg} from 'src/organizations/selectors'
 import {viewableLabels} from 'src/labels/selectors'
+import {getStatus} from 'src/resources/selectors'
 
 export const getLabels = () => async (
   dispatch: Dispatch<Action>,
   getState: GetState
 ) => {
   try {
-    const org = getOrg(getState())
-    dispatch(setLabels(RemoteDataState.Loading))
+    const state = getState()
+    if (getStatus(state, ResourceType.Labels) === RemoteDataState.NotStarted) {
+      dispatch(setLabels(RemoteDataState.Loading))
+    }
+
+    const org = getOrg(state)
 
     const resp = await apiGetLabels({query: {orgID: org.id}})
 

ui/src/members/actions/thunks.ts

@@ -1,4 +1,5 @@
 // Libraries
+import {Dispatch} from 'react'
 import {get} from 'lodash'
 import {normalize} from 'normalizr'
 
@@ -7,10 +8,14 @@ import * as api from 'src/client'
 import {memberSchema, arrayOfMembers} from 'src/schemas'
 
 // Types
-import {RemoteDataState, GetState} from 'src/types'
+import {
+  RemoteDataState,
+  GetState,
+  Member,
+  MemberEntities,
+  ResourceType,
+} from 'src/types'
 import {AddResourceMemberRequestBody} from '@influxdata/influx'
-import {Dispatch} from 'react'
-import {Member, MemberEntities} from 'src/types'
 
 // Actions
 import {
@@ -29,14 +34,19 @@ import {
 
 // Selectors
 import {getOrg} from 'src/organizations/selectors'
+import {getStatus} from 'src/resources/selectors'
 
 export const getMembers = () => async (
   dispatch: Dispatch<Action>,
   getState: GetState
 ) => {
   try {
-    const {id} = getOrg(getState())
-    dispatch(setMembers(RemoteDataState.Loading))
+    const state = getState()
+    if (getStatus(state, ResourceType.Members) === RemoteDataState.NotStarted) {
+      dispatch(setMembers(RemoteDataState.Loading))
+    }
+
+    const {id} = getOrg(state)
 
     const [ownersResp, membersResp] = await Promise.all([
       api.getOrgsOwners({orgID: id}),

ui/src/notifications/endpoints/actions/thunks.ts

@@ -27,7 +27,7 @@ import * as api from 'src/client'
 // Utils
 import {incrementCloneName} from 'src/utils/naming'
 import {getOrg} from 'src/organizations/selectors'
-import {getAll} from 'src/resources/selectors'
+import {getAll, getStatus} from 'src/resources/selectors'
 import {toPostNotificationEndpoint} from 'src/notifications/endpoints/utils'
 import * as copy from 'src/shared/copy/notifications'
 
@@ -50,9 +50,15 @@ export const getEndpoints = () => async (
   getState: GetState
 ) => {
   try {
-    dispatch(setEndpoints(RemoteDataState.Loading))
+    const state = getState()
+    if (
+      getStatus(state, ResourceType.NotificationEndpoints) ===
+      RemoteDataState.NotStarted
+    ) {
+      dispatch(setEndpoints(RemoteDataState.Loading))
+    }
 
-    const {id: orgID} = getOrg(getState())
+    const {id: orgID} = getOrg(state)
 
     const resp = await api.getNotificationEndpoints({
       query: {orgID},

ui/src/notifications/rules/actions/thunks.ts

@@ -31,7 +31,7 @@ import {setLabelOnResource} from 'src/labels/actions/creators'
 // Utils
 import {draftRuleToPostRule} from 'src/notifications/rules/utils'
 import {getOrg} from 'src/organizations/selectors'
-import {getAll} from 'src/resources/selectors'
+import {getAll, getStatus} from 'src/resources/selectors'
 
 // Types
 import {
@@ -54,8 +54,16 @@ export const getNotificationRules = () => async (
   getState: GetState
 ) => {
   try {
-    dispatch(setRules(RemoteDataState.Loading))
-    const {id: orgID} = getOrg(getState())
+    const state = getState()
+    if (
+      getStatus(state, ResourceType.NotificationRules) ===
+      RemoteDataState.NotStarted
+    ) {
+      dispatch(setRules(RemoteDataState.Loading))
+    }
+
+    const {id: orgID} = getOrg(state)
+
     const resp = await api.getNotificationRules({query: {orgID}})
 
     if (resp.status !== 200) {

ui/src/scrapers/actions/thunks.ts

@@ -8,7 +8,13 @@ import {client} from 'src/utils/api'
 import {arrayOfScrapers, scraperSchema} from 'src/schemas'
 
 // Types
-import {RemoteDataState, GetState, Scraper, ScraperEntities} from 'src/types'
+import {
+  RemoteDataState,
+  GetState,
+  Scraper,
+  ScraperEntities,
+  ResourceType,
+} from 'src/types'
 import {Dispatch} from 'react'
 
 // Actions
@@ -32,6 +38,7 @@ import {
 
 // Selectors
 import {getOrg} from 'src/organizations/selectors'
+import {getStatus} from 'src/resources/selectors'
 
 type Action = ScraperAction | NotifyAction
 
@@ -40,7 +47,13 @@ export const getScrapers = () => async (
   getState: GetState
 ) => {
   try {
-    const org = getOrg(getState())
+    const state = getState()
+    if (
+      getStatus(state, ResourceType.Scrapers) === RemoteDataState.NotStarted
+    ) {
+      dispatch(setScrapers(RemoteDataState.Loading))
+    }
+    const org = getOrg(state)
 
     dispatch(setScrapers(RemoteDataState.Loading))