diff --git a/ui/src/organizations/actions/orgView.ts b/ui/src/organizations/actions/orgView.ts new file mode 100644 index 0000000000..8e168fa1b1 --- /dev/null +++ b/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)) +} diff --git a/ui/src/organizations/containers/OrgTasksIndex.tsx b/ui/src/organizations/containers/OrgTasksIndex.tsx index 33678dfaf4..cdecde2b28 100644 --- a/ui/src/organizations/containers/OrgTasksIndex.tsx +++ b/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 => { - 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 { +class OrgTasksIndex extends Component { + 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 { url="tasks" title="Tasks" > - - organization={org} - fetcher={getTasks} - > - {(tasks, loading, fetch) => ( - } - > - - - )} - + {this.tasksPage} @@ -99,18 +88,50 @@ class OrgTasksIndex extends Component { ) } + + private get tasksPage() { + const {org, tasks, router} = this.props + const {loadingState} = this.state + return ( + } + > + + + ) + } + + 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( diff --git a/ui/src/organizations/reducers/orgView.ts b/ui/src/organizations/reducers/orgView.ts new file mode 100644 index 0000000000..6c948cf240 --- /dev/null +++ b/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 + } +} diff --git a/ui/src/store/configureStore.ts b/ui/src/store/configureStore.ts index 76a0fc25e6..7c710d543d 100644 --- a/ui/src/store/configureStore.ts +++ b/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({ views: viewsReducer, tasks: tasksReducer, orgs: orgsReducer, + orgView: orgViewReducer, me: meReducer, onboarding: onboardingReducer, noteEditor: noteEditorReducer, diff --git a/ui/src/types/v2/index.ts b/ui/src/types/v2/index.ts index 3a2c921989..bbc6063039 100644 --- a/ui/src/types/v2/index.ts +++ b/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