Add orgView actions and reducers and remove getResourceByOrg from tasks

ui/src/organizations/actions/orgView.ts

@@ -0,0 +1,28 @@
+import {Task, Organization} from 'src/types/v2'
+
+import {client} from 'src/utils/api'
+
+export enum ActionTypes {
+  GetTasks = 'GET_TASKS',
+  PopulateTasks = 'POPULATE_TASKS',
+}
+
+export type Actions = PopulateTasks
+
+export interface PopulateTasks {
+  type: ActionTypes.PopulateTasks
+  payload: {tasks: Task[]}
+}
+
+export const populateTasks = (tasks: Task[]): PopulateTasks => ({
+  type: ActionTypes.PopulateTasks,
+  payload: {tasks},
+})
+
+export const getTasks = (org: Organization) => async dispatch => {
+  const tasks = await client.tasks.getAllByOrg(org.name)
+  const organization = await client.organizations.get(org.id)
+  const tasksWithOrg = tasks.map(t => ({...t, organization}))
+
+  dispatch(populateTasks(tasksWithOrg))
+}

ui/src/organizations/containers/OrgTasksIndex.tsx

@@ -10,30 +10,17 @@ import {Tabs} from 'src/clockface'
 import {Page} from 'src/pageLayout'
 import {SpinnerContainer, TechnoSpinner} from '@influxdata/clockface'
 import TabbedPageSection from 'src/shared/components/tabbed_page/TabbedPageSection'
-import GetOrgResources from 'src/organizations/components/GetOrgResources'
 import OrgTasksPage from 'src/organizations/components/OrgTasksPage'
 
 //Actions
 import * as NotificationsActions from 'src/types/actions/notifications'
 import * as notifyActions from 'src/shared/actions/notifications'
-
-// APIs
-import {client} from 'src/utils/api'
+import {getTasks as getTasksAction} from 'src/organizations/actions/orgView'
 
 // Types
 import {Organization} from '@influxdata/influx'
 import {AppState, Task} from 'src/types/v2'
-
-const getTasks = async (org: Organization): Promise<Task[]> => {
-  const tasks = await client.tasks.getAllByOrg(org.name)
-  const mappedTasks = tasks.map(task => {
-    return {
-      ...task,
-      organization: org,
-    }
-  })
-  return mappedTasks
-}
+import {RemoteDataState} from 'src/types'
 
 interface RouterProps {
   params: {
@@ -43,18 +30,38 @@ interface RouterProps {
 
 interface DispatchProps {
   notify: NotificationsActions.PublishNotificationActionCreator
+  getTasks: typeof getTasksAction
 }
 
 interface StateProps {
   org: Organization
+  tasks: Task[]
 }
 
 type Props = WithRouterProps & RouterProps & DispatchProps & StateProps
 
+interface State {
+  loadingState: RemoteDataState
+}
+
 @ErrorHandling
-class OrgTasksIndex extends Component<Props> {
+class OrgTasksIndex extends Component<Props, State> {
+  public state = {
+    loadingState: RemoteDataState.NotStarted,
+  }
+
+  public componentDidMount = async () => {
+    this.setState({loadingState: RemoteDataState.Loading})
+
+    const {getTasks, org} = this.props
+
+    const tasks = await getTasks(org)
+    console.log(tasks)
+    this.setState({loadingState: RemoteDataState.Done})
+  }
+
   public render() {
-    const {org, router} = this.props
+    const {org} = this.props
 
     return (
       <>
@@ -70,25 +77,7 @@ class OrgTasksIndex extends Component<Props> {
                     url="tasks"
                     title="Tasks"
                   >
-                    <GetOrgResources<Task>
-                      organization={org}
-                      fetcher={getTasks}
-                    >
-                      {(tasks, loading, fetch) => (
-                        <SpinnerContainer
-                          loading={loading}
-                          spinnerComponent={<TechnoSpinner />}
-                        >
-                          <OrgTasksPage
-                            tasks={tasks}
-                            orgName={org.name}
-                            orgID={org.id}
-                            onChange={fetch}
-                            router={router}
-                          />
-                        </SpinnerContainer>
-                      )}
-                    </GetOrgResources>
+                    {this.tasksPage}
                   </TabbedPageSection>
                 </Tabs.TabContents>
               </Tabs>
@@ -99,18 +88,50 @@ class OrgTasksIndex extends Component<Props> {
       </>
     )
   }
+
+  private get tasksPage() {
+    const {org, tasks, router} = this.props
+    const {loadingState} = this.state
+    return (
+      <SpinnerContainer
+        loading={loadingState}
+        spinnerComponent={<TechnoSpinner />}
+      >
+        <OrgTasksPage
+          tasks={tasks}
+          orgName={org.name}
+          orgID={org.id}
+          onChange={this.updateTasks}
+          router={router}
+        />
+      </SpinnerContainer>
+    )
+  }
+
+  private updateTasks() {
+    const {getTasks, org} = this.props
+
+    getTasks(org)
+  }
 }
 
-const mstp = (state: AppState, props: Props) => {
-  const {orgs} = state
+const mstp = (state: AppState, props: Props): StateProps => {
+  const {
+    orgs,
+    orgView: {tasks},
+  } = state
+
   const org = orgs.find(o => o.id === props.params.orgID)
+
   return {
     org,
+    tasks,
   }
 }
 
 const mdtp: DispatchProps = {
   notify: notifyActions.notify,
+  getTasks: getTasksAction,
 }
 
 export default connect<StateProps, DispatchProps, {}>(

ui/src/organizations/reducers/orgView.ts

@@ -0,0 +1,36 @@
+import {
+  Variable,
+  Telegraf,
+  ScraperTargetResponse,
+  Bucket,
+} from '@influxdata/influx'
+import {Task} from 'src/types/v2'
+import {Dashboard} from 'src/types'
+import {ActionTypes, Actions} from 'src/organizations/actions/orgView'
+
+export interface OrgViewState {
+  tasks: Task[]
+  telegrafs: Telegraf[]
+  scrapers: ScraperTargetResponse[]
+  variables: Variable[]
+  dashboards: Dashboard[]
+  buckets: Bucket[]
+}
+
+const defaultState: OrgViewState = {
+  tasks: [],
+  telegrafs: [],
+  scrapers: [],
+  variables: [],
+  dashboards: [],
+  buckets: [],
+}
+
+export default (state = defaultState, action: Actions): OrgViewState => {
+  switch (action.type) {
+    case ActionTypes.PopulateTasks:
+      return {...state, tasks: action.payload.tasks}
+    default:
+      return state
+  }
+}

ui/src/store/configureStore.ts

@@ -17,6 +17,7 @@ import dashboardsReducer from 'src/dashboards/reducers/v2/dashboards'
 import viewsReducer from 'src/dashboards/reducers/v2/views'
 import {timeMachinesReducer} from 'src/timeMachine/reducers'
 import orgsReducer from 'src/organizations/reducers/orgs'
+import orgViewReducer from 'src/organizations/reducers/orgView'
 import onboardingReducer from 'src/onboarding/reducers'
 import noteEditorReducer from 'src/dashboards/reducers/v2/notes'
 import dataLoadingReducer from 'src/dataLoaders/reducers'
@@ -38,6 +39,7 @@ export const rootReducer = combineReducers<ReducerState>({
   views: viewsReducer,
   tasks: tasksReducer,
   orgs: orgsReducer,
+  orgView: orgViewReducer,
   me: meReducer,
   onboarding: onboardingReducer,
   noteEditor: noteEditorReducer,

ui/src/types/v2/index.ts

@@ -37,6 +37,7 @@ import {OnboardingState} from 'src/onboarding/reducers'
 import {ProtosState} from 'src/protos/reducers'
 import {VariablesState} from 'src/variables/reducers'
 import {Label} from 'src/types/v2/labels'
+import {OrgViewState} from 'src/organizations/reducers/orgView'
 
 export interface AppState {
   VERSION: string
@@ -51,6 +52,7 @@ export interface AppState {
   tasks: TaskState
   timeRange: TimeRange
   orgs: Organization[]
+  orgView: OrgViewState
   me: MeState
   onboarding: OnboardingState
   noteEditor: NoteEditorState