From ea2eee20d6be6b27d9fd2287fbaaca326dda55f4 Mon Sep 17 00:00:00 2001 From: Deniz Kusefoglu Date: Tue, 26 Feb 2019 14:04:39 -0800 Subject: [PATCH 01/14] Remove OrganizationView and use separate containers instead --- ui/cypress/e2e/buckets.test.ts | 2 +- ui/cypress/e2e/variables.test.ts | 2 +- .../components/resource_list/ResourceCard.tsx | 2 +- .../components/dashboard_index/TableRow.tsx | 2 +- ui/src/index.tsx | 35 ++-- ui/src/me/components/GettingStarted.tsx | 2 +- ui/src/me/components/OrgsList.tsx | 2 +- .../components/CompletionAdvancedButton.tsx | 2 +- .../components/OrgTaskEditPage.tsx | 4 +- .../organizations/components/OrgTaskPage.tsx | 2 +- .../organizations/components/OrgTasksPage.tsx | 4 +- .../components/OrganizationNavigation.tsx | 28 +-- .../components/OrganizationsIndexContents.tsx | 2 +- .../containers/OrgBucketsIndex.tsx | 20 +- .../containers/OrgDashboardsIndex.tsx | 25 +-- .../containers/OrgMembersIndex.tsx | 22 +-- .../containers/OrgScrapersIndex.tsx | 130 +++++++++++++ .../containers/OrgTasksIndex.tsx | 114 ++++++++++++ .../containers/OrgTelegrafsIndex.tsx | 18 +- .../containers/OrgVariablesIndex.tsx | 112 ++++++++++++ .../containers/OrganizationView.tsx | 171 ------------------ 21 files changed, 441 insertions(+), 260 deletions(-) create mode 100644 ui/src/organizations/containers/OrgScrapersIndex.tsx create mode 100644 ui/src/organizations/containers/OrgTasksIndex.tsx create mode 100644 ui/src/organizations/containers/OrgVariablesIndex.tsx delete mode 100644 ui/src/organizations/containers/OrganizationView.tsx diff --git a/ui/cypress/e2e/buckets.test.ts b/ui/cypress/e2e/buckets.test.ts index d2fbc4a5c8..5d2f1f2487 100644 --- a/ui/cypress/e2e/buckets.test.ts +++ b/ui/cypress/e2e/buckets.test.ts @@ -12,7 +12,7 @@ describe('Buckets', () => { cy.wrap(body.org).as('org') cy.wrap(bucket).as('bucket') cy.fixture('routes').then(({orgs}) => { - cy.visit(`${orgs}/${id}/buckets_tab`) + cy.visit(`${orgs}/${id}/buckets`) }) }) }) diff --git a/ui/cypress/e2e/variables.test.ts b/ui/cypress/e2e/variables.test.ts index 0040023662..0bf0551e47 100644 --- a/ui/cypress/e2e/variables.test.ts +++ b/ui/cypress/e2e/variables.test.ts @@ -6,7 +6,7 @@ describe('Variables', () => { cy.signin().then(({body}) => { cy.wrap(body.org).as('org') - cy.visit(`organizations/${body.org.id}/variables_tab`) + cy.visit(`organizations/${body.org.id}/variables`) }) }) diff --git a/ui/src/clockface/components/resource_list/ResourceCard.tsx b/ui/src/clockface/components/resource_list/ResourceCard.tsx index c0b6dc879d..73c2d0777e 100644 --- a/ui/src/clockface/components/resource_list/ResourceCard.tsx +++ b/ui/src/clockface/components/resource_list/ResourceCard.tsx @@ -94,7 +94,7 @@ export default class ResourceListCard extends PureComponent { return (
{owner.name} diff --git a/ui/src/dashboards/components/dashboard_index/TableRow.tsx b/ui/src/dashboards/components/dashboard_index/TableRow.tsx index 48bac0b3b2..50c1e8a66b 100644 --- a/ui/src/dashboards/components/dashboard_index/TableRow.tsx +++ b/ui/src/dashboards/components/dashboard_index/TableRow.tsx @@ -197,7 +197,7 @@ export default class DashboardsIndexTableRow extends PureComponent { const ownerOrg = orgs.find(o => o.id === dashboard.orgID) return ( - + {ownerOrg.name} ) diff --git a/ui/src/index.tsx b/ui/src/index.tsx index 4add3cb4c2..083a6a45c3 100644 --- a/ui/src/index.tsx +++ b/ui/src/index.tsx @@ -23,7 +23,6 @@ import TaskPage from 'src/tasks/containers/TaskPage' import TasksPage from 'src/tasks/containers/TasksPage' import TaskRunsPage from 'src/tasks/components/TaskRunsPage' import OrganizationsIndex from 'src/organizations/containers/OrganizationsIndex' -import OrganizationView from 'src/organizations/containers/OrganizationView' import OrgTaskPage from 'src/organizations/components/OrgTaskPage' import OrgTaskEditPage from 'src/organizations/components/OrgTaskEditPage' import OrgBucketIndex from 'src/organizations/containers/OrgBucketsIndex' @@ -39,6 +38,9 @@ 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 OrgVariablesIndex from 'src/organizations/containers/OrgVariablesIndex' +import OrgScrapersIndex from 'src/organizations/containers/OrgScrapersIndex' +import OrgTasksIndex from 'src/organizations/containers/OrgTasksIndex' import OnboardingWizardPage from 'src/onboarding/containers/OnboardingWizardPage' @@ -105,31 +107,30 @@ class Root extends PureComponent { + - + - + - - + + + diff --git a/ui/src/me/components/GettingStarted.tsx b/ui/src/me/components/GettingStarted.tsx index 17fbcd645f..1e67e5ce9e 100644 --- a/ui/src/me/components/GettingStarted.tsx +++ b/ui/src/me/components/GettingStarted.tsx @@ -67,7 +67,7 @@ class GettingStarted extends PureComponent { const firstOrgID = orgs[0].id - return `/organizations/${firstOrgID}/telegrafs_tab` + return `/organizations/${firstOrgID}/telegrafs` } } diff --git a/ui/src/me/components/OrgsList.tsx b/ui/src/me/components/OrgsList.tsx index 967fadee9b..bb8018a786 100644 --- a/ui/src/me/components/OrgsList.tsx +++ b/ui/src/me/components/OrgsList.tsx @@ -28,7 +28,7 @@ export default class UserDashboardList extends PureComponent {
    {orgs.map(({id, name}) => (
  • - {name} + {name}
    • ))}
diff --git a/ui/src/onboarding/components/CompletionAdvancedButton.tsx b/ui/src/onboarding/components/CompletionAdvancedButton.tsx index af148beb09..fe0acd06c7 100644 --- a/ui/src/onboarding/components/CompletionAdvancedButton.tsx +++ b/ui/src/onboarding/components/CompletionAdvancedButton.tsx @@ -34,7 +34,7 @@ class CompletionAdvancedButton extends PureComponent { const {router, orgs, onExit} = this.props const id = _.get(orgs, '0.id', null) if (id) { - router.push(`/organizations/${id}/buckets_tab`) + router.push(`/organizations/${id}/buckets`) } else { onExit() } diff --git a/ui/src/organizations/components/OrgTaskEditPage.tsx b/ui/src/organizations/components/OrgTaskEditPage.tsx index 2aebb83d46..246646968e 100644 --- a/ui/src/organizations/components/OrgTaskEditPage.tsx +++ b/ui/src/organizations/components/OrgTaskEditPage.tsx @@ -65,7 +65,7 @@ class OrgTaskEditPage extends PureComponent< const { params: {id, orgID}, } = this.props - await this.props.selectTaskByID(id, `/organizations/${orgID}/tasks_tab/`) + await this.props.selectTaskByID(id, `/organizations/${orgID}/tasks/`) const {currentTask} = this.props @@ -134,7 +134,7 @@ class OrgTaskEditPage extends PureComponent< private handleSave = () => { const {params} = this.props - this.props.updateScript(`/organizations/${params.orgID}/tasks_tab/`) + this.props.updateScript(`/organizations/${params.orgID}/tasks/`) } private handleCancel = () => { diff --git a/ui/src/organizations/components/OrgTaskPage.tsx b/ui/src/organizations/components/OrgTaskPage.tsx index 648d9a3e8c..3d3986c510 100644 --- a/ui/src/organizations/components/OrgTaskPage.tsx +++ b/ui/src/organizations/components/OrgTaskPage.tsx @@ -130,7 +130,7 @@ class OrgTaskPage extends PureComponent< this.props.saveNewScript( newScript, taskOptions, - `/organizations/${params.orgID}/tasks_tab/` + `/organizations/${params.orgID}/tasks/` ) } diff --git a/ui/src/organizations/components/OrgTasksPage.tsx b/ui/src/organizations/components/OrgTasksPage.tsx index 682ea5f56d..e3a95dd555 100644 --- a/ui/src/organizations/components/OrgTasksPage.tsx +++ b/ui/src/organizations/components/OrgTasksPage.tsx @@ -138,7 +138,7 @@ class OrgTasksPage extends PureComponent { private handleSelectTask = (task: Task) => { const {selectTask, orgID} = this.props - selectTask(task, `/organizations/${orgID}/tasks_tab/${task.id}`) + selectTask(task, `/organizations/${orgID}/tasks/${task.id}`) } private get filteredTasks() { @@ -183,7 +183,7 @@ class OrgTasksPage extends PureComponent { private handleCreateTask = () => { const {router, orgID} = this.props - router.push(`/organizations/${orgID}/tasks_tab/new`) + router.push(`/organizations/${orgID}/tasks/new`) } private handleToggleImportOverlay = (): void => { diff --git a/ui/src/organizations/components/OrganizationNavigation.tsx b/ui/src/organizations/components/OrganizationNavigation.tsx index 99c4c21ab0..923c5b77c4 100644 --- a/ui/src/organizations/components/OrganizationNavigation.tsx +++ b/ui/src/organizations/components/OrganizationNavigation.tsx @@ -25,44 +25,44 @@ class OrganizationNavigation extends PureComponent { ) diff --git a/ui/src/organizations/components/OrganizationsIndexContents.tsx b/ui/src/organizations/components/OrganizationsIndexContents.tsx index 4b03fd95bf..136b143a9e 100644 --- a/ui/src/organizations/components/OrganizationsIndexContents.tsx +++ b/ui/src/organizations/components/OrganizationsIndexContents.tsx @@ -48,7 +48,7 @@ class OrganizationsPageContents extends Component { return orgs.map(o => ( - {o.name} + {o.name} { return client.buckets.getAllByOrg(org.name) } @@ -60,11 +58,11 @@ class OrgBucketsIndex extends Component {
- + diff --git a/ui/src/organizations/containers/OrgDashboardsIndex.tsx b/ui/src/organizations/containers/OrgDashboardsIndex.tsx index f26b98c5d4..b47b71d03c 100644 --- a/ui/src/organizations/containers/OrgDashboardsIndex.tsx +++ b/ui/src/organizations/containers/OrgDashboardsIndex.tsx @@ -1,28 +1,29 @@ +// Libraries import React, {Component} from 'react' import {withRouter, WithRouterProps} from 'react-router' import {connect} from 'react-redux' -import {AppState, Dashboard} from 'src/types/v2' // Components +import {ErrorHandling} from 'src/shared/decorators/errors' import OrganizationNavigation from 'src/organizations/components/OrganizationNavigation' import OrgHeader from 'src/organizations/containers/OrgHeader' import {Tabs} from 'src/clockface' import {Page} from 'src/pageLayout' - -// Decorators -import {ErrorHandling} from 'src/shared/decorators/errors' - -import {Organization} from '@influxdata/influx' -import {getDashboards} from 'src/organizations/apis' - -// Components import {SpinnerContainer, TechnoSpinner} from '@influxdata/clockface' import TabbedPageSection from 'src/shared/components/tabbed_page/TabbedPageSection' +import Dashboards from 'src/organizations/components/Dashboards' import GetOrgResources from 'src/organizations/components/GetOrgResources' +//Actions import * as NotificationsActions from 'src/types/actions/notifications' import * as notifyActions from 'src/shared/actions/notifications' -import Dashboards from 'src/organizations/components/Dashboards' + +// APIs +import {getDashboards} from 'src/organizations/apis' + +// Types +import {Organization} from '@influxdata/influx' +import {AppState, Dashboard} from 'src/types/v2' interface RouterProps { params: { @@ -55,11 +56,11 @@ class OrgDashboardsIndex extends Component {
- + diff --git a/ui/src/organizations/containers/OrgMembersIndex.tsx b/ui/src/organizations/containers/OrgMembersIndex.tsx index d824741894..23b3b22159 100644 --- a/ui/src/organizations/containers/OrgMembersIndex.tsx +++ b/ui/src/organizations/containers/OrgMembersIndex.tsx @@ -1,28 +1,26 @@ import React, {Component} from 'react' import {withRouter, WithRouterProps} from 'react-router' import {connect} from 'react-redux' -import {AppState} from 'src/types/v2' -import {ResourceOwner} from '@influxdata/influx' // Components +import {ErrorHandling} from 'src/shared/decorators/errors' 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 Members from 'src/organizations/components/Members' - -// Decorators -import {ErrorHandling} from 'src/shared/decorators/errors' - -import {Organization} from '@influxdata/influx' - -// Components import {SpinnerContainer, TechnoSpinner} from '@influxdata/clockface' import TabbedPageSection from 'src/shared/components/tabbed_page/TabbedPageSection' import GetOrgResources from 'src/organizations/components/GetOrgResources' +import Members from 'src/organizations/components/Members' +// APIs import {client} from 'src/utils/api' +// Types +import {ResourceOwner} from '@influxdata/influx' +import {Organization} from '@influxdata/influx' +import {AppState} from 'src/types/v2' + interface RouterProps { params: { orgID: string @@ -59,11 +57,11 @@ class OrgMembersIndex extends Component {
- + diff --git a/ui/src/organizations/containers/OrgScrapersIndex.tsx b/ui/src/organizations/containers/OrgScrapersIndex.tsx new file mode 100644 index 0000000000..4856d9f25c --- /dev/null +++ b/ui/src/organizations/containers/OrgScrapersIndex.tsx @@ -0,0 +1,130 @@ +// Libraries +import React, {Component} from 'react' +import {withRouter, WithRouterProps} from 'react-router' +import {connect} from 'react-redux' + +// Components +import {Page} from 'src/pageLayout' +import {Tabs} from 'src/clockface' +import TabbedPageSection from 'src/shared/components/tabbed_page/TabbedPageSection' +import {SpinnerContainer, TechnoSpinner} from '@influxdata/clockface' +import OrgHeader from 'src/organizations/containers/OrgHeader' +import OrganizationNavigation from 'src/organizations/components/OrganizationNavigation' +import GetOrgResources from 'src/organizations/components/GetOrgResources' +import Scrapers from 'src/organizations/components/Scrapers' + +// APIs +import {client} from 'src/utils/api' + +// Decorators +import {ErrorHandling} from 'src/shared/decorators/errors' + +// Actions +import * as NotificationsActions from 'src/types/actions/notifications' +import * as notifyActions from 'src/shared/actions/notifications' + +// Types +import {Organization, ScraperTargetResponse, Bucket} from '@influxdata/influx' +import {AppState} from 'src/types/v2' + +const getScrapers = async (): Promise => { + return await client.scrapers.getAll() +} + +const getBuckets = async (org: Organization): Promise => { + return client.buckets.getAllByOrg(org.name) +} + +interface RouterProps { + params: { + orgID: string + } +} + +interface DispatchProps { + notify: NotificationsActions.PublishNotificationActionCreator +} + +interface StateProps { + org: Organization +} + +type Props = WithRouterProps & RouterProps & DispatchProps & StateProps + +@ErrorHandling +class OrgScrapersIndex extends Component { + public render() { + const {org, notify} = this.props + + return ( + + + +
+ + + + + + organization={org} + fetcher={getScrapers} + > + {(scrapers, loading, fetch) => { + return ( + } + > + + organization={org} + fetcher={getBuckets} + > + {(buckets, loading) => ( + } + > + + + )} + + + ) + }} + + + + +
+ + + ) + } +} + +const mstp = (state: AppState, props: Props) => { + const {orgs} = state + const org = orgs.find(o => o.id === props.params.orgID) + return { + org, + } +} + +const mdtp: DispatchProps = { + notify: notifyActions.notify, +} + +export default connect( + mstp, + mdtp +)(withRouter<{}>(OrgScrapersIndex)) diff --git a/ui/src/organizations/containers/OrgTasksIndex.tsx b/ui/src/organizations/containers/OrgTasksIndex.tsx new file mode 100644 index 0000000000..26a6a52c03 --- /dev/null +++ b/ui/src/organizations/containers/OrgTasksIndex.tsx @@ -0,0 +1,114 @@ +import React, {Component} from 'react' +import {withRouter, WithRouterProps} from 'react-router' +import {connect} from 'react-redux' + +// Components +import {ErrorHandling} from 'src/shared/decorators/errors' +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 {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' + +// Types +import {Organization} from '@influxdata/influx' +import {AppState} from 'src/types/v2' +import {Task} from 'src/tasks/containers/TasksPage' + +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 +} + +interface RouterProps { + params: { + orgID: string + } +} + +interface DispatchProps { + notify: NotificationsActions.PublishNotificationActionCreator +} + +interface StateProps { + org: Organization +} + +type Props = WithRouterProps & RouterProps & DispatchProps & StateProps + +@ErrorHandling +class OrgTasksIndex extends Component { + public render() { + const {org, router} = this.props + + return ( + + + +
+ + + + + organization={org} fetcher={getTasks}> + {(tasks, loading, fetch) => ( + } + > + + + )} + + + + +
+ + + ) + } +} + +const mstp = (state: AppState, props: Props) => { + const {orgs} = state + const org = orgs.find(o => o.id === props.params.orgID) + return { + org, + } +} + +const mdtp: DispatchProps = { + notify: notifyActions.notify, +} + +export default connect( + mstp, + mdtp +)(withRouter<{}>(OrgTasksIndex)) diff --git a/ui/src/organizations/containers/OrgTelegrafsIndex.tsx b/ui/src/organizations/containers/OrgTelegrafsIndex.tsx index ec0f91308b..616a2ece90 100644 --- a/ui/src/organizations/containers/OrgTelegrafsIndex.tsx +++ b/ui/src/organizations/containers/OrgTelegrafsIndex.tsx @@ -5,26 +5,24 @@ import {connect} from 'react-redux' import {AppState} from 'src/types/v2' // Components +import {ErrorHandling} from 'src/shared/decorators/errors' 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 '@influxdata/clockface' import TabbedPageSection from 'src/shared/components/tabbed_page/TabbedPageSection' import GetOrgResources from 'src/organizations/components/GetOrgResources' +// Actions import * as NotificationsActions from 'src/types/actions/notifications' import * as notifyActions from 'src/shared/actions/notifications' +// Types +import {Bucket, Organization, Telegraf} from '@influxdata/influx' +import {client} from 'src/utils/api' + const getBuckets = async (org: Organization) => { return client.buckets.getAllByOrg(org.name) } @@ -63,11 +61,11 @@ class OrgTelegrafsIndex extends Component {
- + diff --git a/ui/src/organizations/containers/OrgVariablesIndex.tsx b/ui/src/organizations/containers/OrgVariablesIndex.tsx new file mode 100644 index 0000000000..46d77c7e60 --- /dev/null +++ b/ui/src/organizations/containers/OrgVariablesIndex.tsx @@ -0,0 +1,112 @@ +// Libraries +import React, {Component} from 'react' +import {withRouter, WithRouterProps} from 'react-router' +import {connect} from 'react-redux' + +// Components +import {ErrorHandling} from 'src/shared/decorators/errors' +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 {SpinnerContainer, TechnoSpinner} from '@influxdata/clockface' +import TabbedPageSection from 'src/shared/components/tabbed_page/TabbedPageSection' +import GetOrgResources from 'src/organizations/components/GetOrgResources' +import Variables from 'src/organizations/components/Variables' + +// APIs +import {client} from 'src/utils/api' + +//Actions +import * as NotificationsActions from 'src/types/actions/notifications' +import * as notifyActions from 'src/shared/actions/notifications' + +// Types +import {Organization, Variable} from '@influxdata/influx' +import {AppState} from 'src/types/v2' + +const getVariables = async (org: Organization): Promise => { + return await client.variables.getAllByOrg(org.name) +} + +interface RouterProps { + params: { + orgID: string + } +} + +interface DispatchProps { + notify: NotificationsActions.PublishNotificationActionCreator +} + +interface StateProps { + org: Organization +} + +type Props = WithRouterProps & RouterProps & DispatchProps & StateProps + +@ErrorHandling +class OrgVariablesIndex extends Component { + public render() { + const {org, notify} = this.props + + return ( + + + +
+ + + + + + organization={org} + fetcher={getVariables} + > + {(variables, loading, fetch) => { + return ( + } + > + + + ) + }} + + + + +
+ + + ) + } +} + +const mstp = (state: AppState, props: Props) => { + const {orgs} = state + const org = orgs.find(o => o.id === props.params.orgID) + return { + org, + } +} + +const mdtp: DispatchProps = { + notify: notifyActions.notify, +} + +export default connect( + mstp, + mdtp +)(withRouter<{}>(OrgVariablesIndex)) diff --git a/ui/src/organizations/containers/OrganizationView.tsx b/ui/src/organizations/containers/OrganizationView.tsx deleted file mode 100644 index d0b0f267b2..0000000000 --- a/ui/src/organizations/containers/OrganizationView.tsx +++ /dev/null @@ -1,171 +0,0 @@ -// Libraries -import React, {PureComponent} from 'react' -import {WithRouterProps} from 'react-router' -import {connect} from 'react-redux' -import _ from 'lodash' - -// APIs -import {client} from 'src/utils/api' - -// Actions -import {updateOrg} from 'src/organizations/actions' -import * as notifyActions from 'src/shared/actions/notifications' - -// Components -import {Page} from 'src/pageLayout' -import {SpinnerContainer, TechnoSpinner} from '@influxdata/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 Scrapers from 'src/organizations/components/Scrapers' -import GetOrgResources from 'src/organizations/components/GetOrgResources' -import OrganizationTabs from 'src/organizations/components/OrganizationTabs' -import OrgHeader from 'src/organizations/containers/OrgHeader' - -// Types -import {AppState} from 'src/types/v2' -import {Bucket, Organization, ScraperTargetResponse} from '@influxdata/influx' -import * as NotificationsActions from 'src/types/actions/notifications' - -// Decorators -import {ErrorHandling} from 'src/shared/decorators/errors' -import {Task} from 'src/types/v2' - -const getScrapers = async (): Promise => { - return await client.scrapers.getAll() -} - -const getBuckets = async (org: Organization): Promise => { - return client.buckets.getAllByOrg(org.name) -} - -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 as Task[] -} - -interface StateProps { - org: Organization -} - -interface DispatchProps { - onUpdateOrg: typeof updateOrg - notify: NotificationsActions.PublishNotificationActionCreator -} - -type Props = StateProps & WithRouterProps & DispatchProps - -@ErrorHandling -class OrganizationView extends PureComponent { - public render() { - const {org, params, notify, router} = this.props - - return ( - - - -
- - - organization={org} fetcher={getTasks}> - {(tasks, loading, fetch) => ( - } - > - - - )} - - - - - organization={org} - fetcher={getScrapers} - > - {(scrapers, loading, fetch) => { - return ( - } - > - - organization={org} - fetcher={getBuckets} - > - {(buckets, loading) => ( - } - > - - - )} - - - ) - }} - - - - - - -
- - - ) - } -} - -const mstp = (state: AppState, props: WithRouterProps) => { - const {orgs} = state - const org = orgs.find(o => o.id === props.params.orgID) - return { - org, - } -} - -const mdtp: DispatchProps = { - onUpdateOrg: updateOrg, - notify: notifyActions.notify, -} - -export default connect( - mstp, - mdtp -)(OrganizationView) From 5001034b0b4fdca7a49849aafc12421a675ee4f4 Mon Sep 17 00:00:00 2001 From: Deniz Kusefoglu Date: Wed, 27 Feb 2019 12:06:24 -0800 Subject: [PATCH 02/14] Add route and components for task export overlay --- ui/src/index.tsx | 8 +- .../components/OrgExportOverlay.tsx | 89 +++++++++++++++++++ .../components/OrgTaskExportOverlay.tsx | 55 ++++++++++++ .../containers/OrgTasksIndex.tsx | 74 ++++++++------- ui/src/tasks/components/TaskRow.tsx | 7 +- 5 files changed, 193 insertions(+), 40 deletions(-) create mode 100644 ui/src/organizations/components/OrgExportOverlay.tsx create mode 100644 ui/src/organizations/components/OrgTaskExportOverlay.tsx diff --git a/ui/src/index.tsx b/ui/src/index.tsx index 083a6a45c3..f12e3b0fb9 100644 --- a/ui/src/index.tsx +++ b/ui/src/index.tsx @@ -41,6 +41,7 @@ import OrgTelegrafsIndex from 'src/organizations/containers/OrgTelegrafsIndex' import OrgVariablesIndex from 'src/organizations/containers/OrgVariablesIndex' import OrgScrapersIndex from 'src/organizations/containers/OrgScrapersIndex' import OrgTasksIndex from 'src/organizations/containers/OrgTasksIndex' +import OrgTaskExportOverlay from 'src/organizations/components/OrgTaskExportOverlay' import OnboardingWizardPage from 'src/onboarding/containers/OnboardingWizardPage' @@ -130,7 +131,12 @@ class Root extends PureComponent { path="scrapers" component={OrgScrapersIndex} /> - + + + diff --git a/ui/src/organizations/components/OrgExportOverlay.tsx b/ui/src/organizations/components/OrgExportOverlay.tsx new file mode 100644 index 0000000000..4e4c3ac970 --- /dev/null +++ b/ui/src/organizations/components/OrgExportOverlay.tsx @@ -0,0 +1,89 @@ +import React, {PureComponent} from 'react' +import {get} from 'lodash' + +// Components +import { + OverlayTechnology, + OverlayBody, + OverlayContainer, + OverlayHeading, + OverlayFooter, +} from 'src/clockface' +import {Button, ComponentColor} from '@influxdata/clockface' +import {Controlled as ReactCodeMirror} from 'react-codemirror2' + +// Utils +import {downloadTextFile} from 'src/shared/utils/download' + +// Styles +import 'src/shared/components/ExportOverlay.scss' + +interface Props { + resourceName: string + resource: object + onDismissOverlay: () => void +} + +class OrgExportOverlay extends PureComponent { + public render() { + const {onDismissOverlay, resourceName, resource} = this.props + + const options = { + tabIndex: 1, + mode: 'json', + readonly: true, + lineNumbers: true, + autoRefresh: true, + theme: 'time-machine', + completeSingle: false, + } + + return ( + + + + +
+ +
+ + {this.submitButton} + + + ) + } + + private doNothing = () => {} + + private get submitButton(): JSX.Element { + const {resourceName} = this.props + return ( +