Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Extract telegrafs org view to use react router

pull/12007/head
Brandon Farmer 2019-02-20 10:48:44 -08:00
parent 626651b3f2
commit 9d71670717
4 changed files with 146 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
ui/src/index.tsx
View File

@ -39,6 +39,9 @@ import GetLinks from 'src/shared/containers/GetLinks'
import GetMe from 'src/shared/containers/GetMe'
import SourcesPage from 'src/sources/components/SourcesPage'
import ConfigurationPage from 'src/configuration/components/ConfigurationPage'
import OrgDashboardsIndex from 'src/organizations/containers/OrgDashboardsIndex'
import OrgMembersIndex from 'src/organizations/containers/OrgMembersIndex'
import OrgTelegrafsIndex from 'src/organizations/containers/OrgTelegrafsIndex'
import OnboardingWizardPage from 'src/onboarding/containers/OnboardingWizardPage'
@ -119,6 +122,18 @@ class Root extends PureComponent {
path="buckets_tab"
component={OrgBucketIndex}
/>
<Route
path="dashboards_tab"
component={OrgDashboardsIndex}
/>
<Route
path="members_tab"
component={OrgMembersIndex}
/>
<Route
path="telegrafs_tab"
component={OrgTelegrafsIndex}
/>
<Route
path=":tab"
component={OrganizationView}

2
ui/src/me/components/account/Tokens.tsx
View File

@ -96,7 +96,7 @@ const mdtp = {
onNotify: notify,
}
export default connect<Props>(
export default connect<{}, Props>(
null,
mdtp
)(Tokens)

129
ui/src/organizations/containers/OrgTelegrafsIndex.tsx Normal file
View File

@ -0,0 +1,129 @@
// Libraries
import React, {Component} from 'react'
import {withRouter, WithRouterProps} from 'react-router'
import {connect} from 'react-redux'
import {AppState} from 'src/types/v2'
// Components
import OrganizationNavigation from 'src/organizations/components/OrganizationNavigation'
import OrgHeader from 'src/organizations/containers/OrgHeader'
import {Tabs} from 'src/clockface'
import {Page} from 'src/pageLayout'
import Collectors from 'src/organizations/components/Collectors'
// Decorators
import {ErrorHandling} from 'src/shared/decorators/errors'
import {Bucket, Organization, Telegraf} from '@influxdata/influx'
import {client} from 'src/utils/api'
// Components
import {SpinnerContainer, TechnoSpinner} from 'src/clockface'
import TabbedPageSection from 'src/shared/components/tabbed_page/TabbedPageSection'
import GetOrgResources from 'src/organizations/components/GetOrgResources'
import * as NotificationsActions from 'src/types/actions/notifications'
import * as notifyActions from 'src/shared/actions/notifications'
const getBuckets = async (org: Organization) => {
return client.buckets.getAllByOrg(org.name)
}
const getCollectors = async (org: Organization) => {
return client.telegrafConfigs.getAllByOrg(org)
}
interface RouterProps {
params: {
orgID: string
}
}
interface DispatchProps {
notify: NotificationsActions.PublishNotificationActionCreator
}
interface StateProps {
org: Organization
}
type Props = WithRouterProps & RouterProps & DispatchProps & StateProps
@ErrorHandling
class OrgTelegrafsIndex extends Component<Props> {
constructor(props) {
super(props)
}
public render() {
const {org, notify} = this.props
return (
<Page titleTag={org.name}>
<OrgHeader orgID={org.id} />
<Page.Contents fullWidth={false} scrollable={true}>
<div className="col-xs-12">
<Tabs>
<OrganizationNavigation tab={'telegrafs_tab'} orgID={org.id} />
<Tabs.TabContents>
<TabbedPageSection
id="org-view-tab--telegrafs"
url="telegrafs_tab"
title="Telegraf"
>
<GetOrgResources<Telegraf>
organization={org}
fetcher={getCollectors}
>
{(collectors, loading, fetch) => (
<SpinnerContainer
loading={loading}
spinnerComponent={<TechnoSpinner />}
>
<GetOrgResources<Bucket>
organization={org}
fetcher={getBuckets}
>
{(buckets, loading) => (
<SpinnerContainer
loading={loading}
spinnerComponent={<TechnoSpinner />}
>
<Collectors
collectors={collectors}
onChange={fetch}
notify={notify}
buckets={buckets}
orgName={org.name}
/>
</SpinnerContainer>
)}
</GetOrgResources>
</SpinnerContainer>
)}
</GetOrgResources>
</TabbedPageSection>
</Tabs.TabContents>
</Tabs>
</div>
</Page.Contents>
</Page>
)
}
}
const mstp = (state: AppState, props: WithRouterProps) => {
const {orgs} = state
const org = orgs.find(o => o.id === props.params.orgID)
return {
org,
}
}
const mdtp: DispatchProps = {
notify: notifyActions.notify,
}
export default connect<StateProps, DispatchProps, {}>(
mstp,
mdtp
)(withRouter<{}>(OrgTelegrafsIndex))

49
ui/src/organizations/containers/OrganizationView.tsx
View File

@ -7,10 +7,6 @@ import _ from 'lodash'
// APIs
import {client} from 'src/utils/api'
const getCollectors = async (org: Organization) => {
return client.telegrafConfigs.getAllByOrg(org)
}
const getScrapers = async (): Promise<ScraperTargetResponse[]> => {
return await client.scrapers.getAll()
}
@ -33,7 +29,6 @@ import {SpinnerContainer, TechnoSpinner} from 'src/clockface'
import TabbedPageSection from 'src/shared/components/tabbed_page/TabbedPageSection'
import Variables from 'src/organizations/components/Variables'
import OrgTasksPage from 'src/organizations/components/OrgTasksPage'
import Collectors from 'src/organizations/components/Collectors'
import Scrapers from 'src/organizations/components/Scrapers'
import GetOrgResources from 'src/organizations/components/GetOrgResources'
import OrganizationTabs from 'src/organizations/components/OrganizationTabs'
@ -41,12 +36,7 @@ import OrgHeader from 'src/organizations/containers/OrgHeader'
// Types
import {AppState} from 'src/types/v2'
import {
Bucket,
Organization,
Telegraf,
ScraperTargetResponse,
} from '@influxdata/influx'
import {Bucket, Organization, ScraperTargetResponse} from '@influxdata/influx'
import * as NotificationsActions from 'src/types/actions/notifications'
import {Variable} from '@influxdata/influx'
@ -113,43 +103,6 @@ class OrganizationView extends PureComponent<Props> {
)}
</GetOrgResources>
</TabbedPageSection>
<TabbedPageSection
id="org-view-tab--telegrafs"
url="telegrafs_tab"
title="Telegraf"
>
<GetOrgResources<Telegraf>
organization={org}
fetcher={getCollectors}
>
{(collectors, loading, fetch) => (
<SpinnerContainer
loading={loading}
spinnerComponent={<TechnoSpinner />}
>
<GetOrgResources<Bucket>
organization={org}
fetcher={getBuckets}
>
{(buckets, loading) => (
<SpinnerContainer
loading={loading}
spinnerComponent={<TechnoSpinner />}
>
<Collectors
collectors={collectors}
onChange={fetch}
notify={notify}
buckets={buckets}
orgName={org.name}
/>
</SpinnerContainer>
)}
</GetOrgResources>
</SpinnerContainer>
)}
</GetOrgResources>
</TabbedPageSection>
<TabbedPageSection
id="org-view-tab--scrapers"
url="scrapers_tab"