From a5f51c61af0824bcbd9fb2f859004e795acd5cd7 Mon Sep 17 00:00:00 2001 From: Delmer Date: Tue, 19 Feb 2019 12:34:06 -0500 Subject: [PATCH] fix(ui): add ordering to org resources (#11938) fix(ui): add ordering to org reosources --- CHANGELOG.md | 1 + ui/src/configuration/components/GetLabels.tsx | 6 ++- .../components/GetOrgResources.tsx | 51 +++++++++++++++++-- .../containers/OrgBucketsIndex.tsx | 2 +- .../containers/OrgDashboardsIndex.tsx | 2 +- .../containers/OrgMembersIndex.tsx | 2 +- .../containers/OrganizationView.tsx | 12 ++--- ui/src/shared/components/FetchLabels.tsx | 6 ++- ui/src/tasks/components/TaskForm.tsx | 2 +- 9 files changed, 67 insertions(+), 17 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a38cafbb384..31cb1690edd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,7 @@ ### UI Improvements 1. [11764](https://github.com/influxdata/influxdb/pull/11764): Move the download telegraf config button to view config overlay 1. [11879](https://github.com/influxdata/influxdb/pull/11879): Combine permissions for user by type +1. [11938](https://github.com/influxdata/influxdb/pull/11938): Add ordering to UI list items ## v2.0.0-alpha.2 [2019-02-07] diff --git a/ui/src/configuration/components/GetLabels.tsx b/ui/src/configuration/components/GetLabels.tsx index 6829cbfa40d..e151e8870ab 100644 --- a/ui/src/configuration/components/GetLabels.tsx +++ b/ui/src/configuration/components/GetLabels.tsx @@ -1,5 +1,6 @@ // Libraries import {PureComponent} from 'react' +import _ from 'lodash' // APIs import {client} from 'src/utils/api' @@ -26,7 +27,10 @@ export default class GetLabels extends PureComponent { public async componentDidMount() { const labels = await client.labels.getAll() - this.setState({labels, loading: RemoteDataState.Done}) + this.setState({ + labels: _.orderBy(labels, ['name']), + loading: RemoteDataState.Done, + }) } public render() { diff --git a/ui/src/organizations/components/GetOrgResources.tsx b/ui/src/organizations/components/GetOrgResources.tsx index 27a6c5b24b4..043a71f7cd8 100644 --- a/ui/src/organizations/components/GetOrgResources.tsx +++ b/ui/src/organizations/components/GetOrgResources.tsx @@ -1,5 +1,6 @@ // Libraries import {PureComponent} from 'react' +import _ from 'lodash' // Types import {RemoteDataState} from 'src/types' @@ -8,21 +9,32 @@ import {RemoteDataState} from 'src/types' import {ErrorHandling} from 'src/shared/decorators/errors' import {Organization} from '@influxdata/influx' -interface Props { +interface PassedProps { organization: Organization - fetcher: (org: Organization) => Promise + fetcher: (org: Organization) => Promise children: ( - resources: T, + resources: T[], loading: RemoteDataState, fetch?: () => void ) => JSX.Element } interface State { - resources: T + resources: T[] loading: RemoteDataState } +interface DefaultProps { + orderBy?: { + keys: Array + orders?: string[] + } +} + +type Props = DefaultProps & PassedProps + +const DEFAULT_SORT_KEY = 'name' + @ErrorHandling export default class GetOrgResources extends PureComponent< Props, @@ -30,6 +42,7 @@ export default class GetOrgResources extends PureComponent< > { constructor(props: Props) { super(props) + this.state = { resources: null, loading: RemoteDataState.NotStarted, @@ -55,7 +68,35 @@ export default class GetOrgResources extends PureComponent< const {fetcher, organization} = this.props if (organization) { const resources = await fetcher(organization) - this.setState({resources, loading: RemoteDataState.Done}) + this.setState({ + resources: this.order(resources), + loading: RemoteDataState.Done, + }) + } + } + + // Todo: improve typing for unpacking array + private order(resources: T[]): T[] { + const {orderBy} = this.props + + const defaultKeys = this.extractDefaultKeys(resources) + if (orderBy) { + return _.orderBy(resources, orderBy.keys, orderBy.orders) + } else if (defaultKeys.length !== 0) { + return _.orderBy(resources, defaultKeys) + } else { + return resources } } + + private extractDefaultKeys(resources: T[]): Array { + return this.hasKeyOf(resources, DEFAULT_SORT_KEY) ? [DEFAULT_SORT_KEY] : [] + } + + private hasKeyOf( + resources: T[], + key: string | number | symbol + ): key is keyof T { + return key in resources[0] + } } diff --git a/ui/src/organizations/containers/OrgBucketsIndex.tsx b/ui/src/organizations/containers/OrgBucketsIndex.tsx index 309f385f0ea..e5b45aea071 100644 --- a/ui/src/organizations/containers/OrgBucketsIndex.tsx +++ b/ui/src/organizations/containers/OrgBucketsIndex.tsx @@ -67,7 +67,7 @@ class OrgBucketsIndex extends Component { url="buckets_tab" title="Buckets" > - + organization={org} fetcher={getBuckets} > diff --git a/ui/src/organizations/containers/OrgDashboardsIndex.tsx b/ui/src/organizations/containers/OrgDashboardsIndex.tsx index 2fa62781ef8..89e6e99a8cb 100644 --- a/ui/src/organizations/containers/OrgDashboardsIndex.tsx +++ b/ui/src/organizations/containers/OrgDashboardsIndex.tsx @@ -62,7 +62,7 @@ class OrgDashboardsIndex extends Component { url="dashboards_tab" title="Dashboards" > - + organization={org} fetcher={getDashboards} > diff --git a/ui/src/organizations/containers/OrgMembersIndex.tsx b/ui/src/organizations/containers/OrgMembersIndex.tsx index 7d685319bad..ad82b38b79b 100644 --- a/ui/src/organizations/containers/OrgMembersIndex.tsx +++ b/ui/src/organizations/containers/OrgMembersIndex.tsx @@ -66,7 +66,7 @@ class OrgMembersIndex extends Component { url="members_tab" title="Members" > - + organization={org} fetcher={getOwnersAndMembers} > diff --git a/ui/src/organizations/containers/OrganizationView.tsx b/ui/src/organizations/containers/OrganizationView.tsx index 06c1c80ca85..b7bbac0c437 100644 --- a/ui/src/organizations/containers/OrganizationView.tsx +++ b/ui/src/organizations/containers/OrganizationView.tsx @@ -96,7 +96,7 @@ class OrganizationView extends PureComponent { url="tasks_tab" title="Tasks" > - organization={org} fetcher={getTasks}> + organization={org} fetcher={getTasks}> {(tasks, loading, fetch) => ( { url="telegrafs_tab" title="Telegraf" > - + organization={org} fetcher={getCollectors} > @@ -127,7 +127,7 @@ class OrganizationView extends PureComponent { loading={loading} spinnerComponent={} > - + organization={org} fetcher={getBuckets} > @@ -155,7 +155,7 @@ class OrganizationView extends PureComponent { url="scrapers_tab" title="Scrapers" > - + organization={org} fetcher={getScrapers} > @@ -165,7 +165,7 @@ class OrganizationView extends PureComponent { loading={loading} spinnerComponent={} > - + organization={org} fetcher={getBuckets} > @@ -193,7 +193,7 @@ class OrganizationView extends PureComponent { url="variables_tab" title="Variables" > - + organization={org} fetcher={getVariables} > diff --git a/ui/src/shared/components/FetchLabels.tsx b/ui/src/shared/components/FetchLabels.tsx index 05396388b25..db7e705219c 100644 --- a/ui/src/shared/components/FetchLabels.tsx +++ b/ui/src/shared/components/FetchLabels.tsx @@ -1,5 +1,6 @@ // Libraries import React, {PureComponent} from 'react' +import _ from 'lodash' // Components import {EmptyState, SpinnerContainer, TechnoSpinner} from 'src/clockface' @@ -36,7 +37,10 @@ class FetchLabels extends PureComponent { public async componentDidMount() { const labels = await client.labels.getAll() - this.setState({loading: RemoteDataState.Done, labels}) + this.setState({ + loading: RemoteDataState.Done, + labels: _.orderBy(labels, ['name']), + }) } public render() { diff --git a/ui/src/tasks/components/TaskForm.tsx b/ui/src/tasks/components/TaskForm.tsx index 3146aa4bfe7..a220aefe3f8 100644 --- a/ui/src/tasks/components/TaskForm.tsx +++ b/ui/src/tasks/components/TaskForm.tsx @@ -157,7 +157,7 @@ export default class TaskForm extends PureComponent { {isInOverlay && ( - + organization={this.toOrganization} fetcher={getBuckets} >