From 5af6eddee7a3fba31886fdfe14e32657207ea3d3 Mon Sep 17 00:00:00 2001 From: Beth Legesse Date: Thu, 2 Dec 2021 13:13:51 -0600 Subject: [PATCH 01/15] feat: created new dashboard paginated files --- .../DashboardCardsPaginated.tsx | 175 +++++++++++++++ .../DashboardsIndexContentsPaginated.tsx | 178 +++++++++++++++ .../DashboardsIndexPaginated.tsx | 204 ++++++++++++++++++ src/shared/containers/SetOrg.tsx | 17 +- src/shared/containers/index.tsx | 3 + src/tasks/pagination/TasksList.tsx | 3 +- 6 files changed, 576 insertions(+), 4 deletions(-) create mode 100644 src/dashboards/components/dashboard_index/DashboardCardsPaginated.tsx create mode 100644 src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx create mode 100644 src/dashboards/components/dashboard_index/DashboardsIndexPaginated.tsx diff --git a/src/dashboards/components/dashboard_index/DashboardCardsPaginated.tsx b/src/dashboards/components/dashboard_index/DashboardCardsPaginated.tsx new file mode 100644 index 0000000000..7fe774137f --- /dev/null +++ b/src/dashboards/components/dashboard_index/DashboardCardsPaginated.tsx @@ -0,0 +1,175 @@ +// Libraries +import React, {PureComponent} from 'react' +import {connect} from 'react-redux' +import memoizeOne from 'memoize-one' + +// Components +import DashboardCard from 'src/dashboards/components/dashboard_index/DashboardCard' +import {TechnoSpinner} from '@influxdata/clockface' +import AssetLimitAlert from 'src/cloud/components/AssetLimitAlert' + +// Selectors +import {getSortedResources, SortTypes} from 'src/shared/utils/sort' + +// Types +import {AppState, Dashboard, RemoteDataState} from 'src/types' +import {Sort} from 'src/clockface' +import {LimitStatus} from 'src/cloud/actions/limits' + +// Utils +import {extractDashboardLimits} from 'src/cloud/utils/limits' +import {isFlagEnabled} from 'src/shared/utils/featureFlag' +import {CLOUD} from 'src/shared/constants' + +let getPinnedItems +if (CLOUD) { + getPinnedItems = require('src/shared/contexts/pinneditems').getPinnedItems +} + +interface StateProps { + limitStatus: LimitStatus['status'] +} + +interface OwnProps { + dashboards: Dashboard[] + sortKey: string + sortDirection: Sort + sortType: SortTypes + onFilterChange: (searchTerm: string) => void +} + +class DashboardCards extends PureComponent { + private _observer + private _isMounted = true + private _spinner + + private memGetSortedResources = memoizeOne( + getSortedResources + ) + + state = { + pages: 1, + windowSize: 0, + pinnedItems: [], + } + + public componentDidMount() { + if (isFlagEnabled('pinnedItems') && CLOUD) { + getPinnedItems() + .then(res => { + if (this._isMounted) { + this.setState(prev => ({...prev, pinnedItems: res, windowSize: 15})) + } + }) + .catch(err => { + console.error(err) + }) + } else { + this.setState(prev => ({...prev, windowSize: 15})) + } + } + + public componentWillUnmount() { + this._isMounted = false + } + + private registerSpinner = elem => { + this._spinner = elem + + if (!elem) { + return + } + + let count = 1.0 + const threshold = [] + + while (count > 0) { + threshold.push(count) + count -= 0.1 + } + + threshold.reverse() + + this._observer = new IntersectionObserver(this.measure, { + threshold, + rootMargin: '60px 0px', + }) + + this._observer.observe(this._spinner) + } + + private measure = entries => { + if ( + entries + .map(e => e.isIntersecting) + .reduce((prev, curr) => prev || curr, false) + ) { + this.setState({ + pages: this.state.pages + 1, + }) + } + } + + public render() { + const { + dashboards, + sortDirection, + sortKey, + sortType, + onFilterChange, + } = this.props + const sortedDashboards = this.memGetSortedResources( + dashboards, + sortKey, + sortDirection, + sortType + ) + console.log('working?' , sortedDashboards) + const {windowSize, pages, pinnedItems} = this.state + + return ( +
+
+ {sortedDashboards + .filter(d => d.status === RemoteDataState.Done) + .slice(0, pages * windowSize) + .map(({id, name, description, labels, meta}) => ( + item?.metadata.dashboardID === id) + } + /> + ))} + +
+ {/* {windowSize * pages < dashboards.length && ( +
+ +
+ )} */} +
+ ) + } +} + +const mstp = (state: AppState) => { + return { + limitStatus: extractDashboardLimits(state), + } +} + +export default connect(mstp)(DashboardCards) diff --git a/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx b/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx new file mode 100644 index 0000000000..8bd0cd3ea2 --- /dev/null +++ b/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx @@ -0,0 +1,178 @@ +// Libraries +import React, {Component, createRef, RefObject} from 'react' +import {connect, ConnectedProps} from 'react-redux' +import {withRouter, RouteComponentProps} from 'react-router-dom' + +// Components +import Table from 'src/dashboards/components/dashboard_index/Table' +import FilterList from 'src/shared/components/FilterList' +import DashboardsTableEmpty from 'src/dashboards/components/dashboard_index/DashboardsTableEmpty' +import DashboardCardsPaginated from 'src/dashboards/components/dashboard_index/DashboardCardsPaginated' + +// Actions +import {retainRangesDashTimeV1 as retainRangesDashTimeV1Action} from 'src/dashboards/actions/ranges' +import {checkDashboardLimits as checkDashboardLimitsAction} from 'src/cloud/actions/limits' +import {createDashboard} from 'src/dashboards/actions/thunks' + +// Decorators +import {ErrorHandling} from 'src/shared/decorators/errors' + +// Types +import {Dashboard, AppState, ResourceType, Pageable, RemoteDataState} from 'src/types' +import {Sort} from '@influxdata/clockface' +import {getAll} from 'src/resources/selectors' +import {SortTypes} from 'src/shared/utils/sort' +import {DashboardSortKey} from 'src/shared/components/resource_sort_dropdown/generateSortItems' + +// Utils +import {PaginationNav} from '@influxdata/clockface' + + +interface OwnProps { + onFilterChange: (searchTerm: string) => void + searchTerm: string + filterComponent?: JSX.Element + sortDirection: Sort + sortType: SortTypes + sortKey: DashboardSortKey + pageHeight: number + pageWidth: number +} + +type ReduxProps = ConnectedProps +type Props = ReduxProps & OwnProps & RouteComponentProps<{orgID: string}> + +const FilterDashboards = FilterList() + +@ErrorHandling +class DashboardsIndexContents extends Component + implements Pageable { + + private paginationRef: RefObject + public currentPage: number = 1 + public rowsPerPage: number = 10 + public totalPages: number + + constructor(props) { + super(props) + this.paginationRef = createRef() + + } + + public componentDidMount() { + const {dashboards} = this.props + + const dashboardIDs = dashboards.map(d => d.id) + this.props.retainRangesDashTimeV1(dashboardIDs) + this.props.checkDashboardLimits() + } + + public paginate = page => { + + } + + public render() { + const { + searchTerm, + status, + dashboards, + filterComponent, + onFilterChange, + sortDirection, + sortType, + sortKey, + onCreateDashboard, + } = this.props + + this.totalPages = Math.max( + Math.ceil(dashboards.length / this.rowsPerPage), + 1 + ) + if (status === RemoteDataState.Done && !dashboards.length) { + return ( + + ) + } + + return ( + <> + + {filteredDashboards => ( + + // + )} + + + + ) + + + } + private summonImportOverlay = (): void => { + const { + history, + match: { + params: {orgID}, + }, + } = this.props + history.push(`/orgs/${orgID}/dashboards-list/import`) + } + + private summonImportFromTemplateOverlay = (): void => { + const { + history, + match: { + params: {orgID}, + }, + } = this.props + history.push(`/orgs/${orgID}/dashboards-list/import/template`) + } +} + +const mstp = (state: AppState) => { + return { + dashboards: getAll(state, ResourceType.Dashboards), + status: state.resources.dashboards.status + } +} + +const mdtp = { + retainRangesDashTimeV1: retainRangesDashTimeV1Action, + checkDashboardLimits: checkDashboardLimitsAction, + onCreateDashboard: createDashboard as any, +} + +const connector = connect(mstp, mdtp) + +export default connector(withRouter(DashboardsIndexContents)) diff --git a/src/dashboards/components/dashboard_index/DashboardsIndexPaginated.tsx b/src/dashboards/components/dashboard_index/DashboardsIndexPaginated.tsx new file mode 100644 index 0000000000..691de86e03 --- /dev/null +++ b/src/dashboards/components/dashboard_index/DashboardsIndexPaginated.tsx @@ -0,0 +1,204 @@ +// Libraries +import React, {PureComponent} from 'react' +import {Route, RouteComponentProps, Switch} from 'react-router-dom' +import {connect, ConnectedProps} from 'react-redux' +import {AutoSizer} from 'react-virtualized' + +// Decorators +import {ErrorHandling} from 'src/shared/decorators/errors' + +// Components +import DashboardsIndexContents from 'src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated' +import {ComponentSize, Page, Sort} from '@influxdata/clockface' +import SearchWidget from 'src/shared/components/search_widget/SearchWidget' +import AddResourceDropdown from 'src/shared/components/AddResourceDropdown' +import GetAssetLimits from 'src/cloud/components/GetAssetLimits' +import RateLimitAlert from 'src/cloud/components/RateLimitAlert' +import ResourceSortDropdown from 'src/shared/components/resource_sort_dropdown/ResourceSortDropdown' +import DashboardImportOverlay from 'src/dashboards/components/DashboardImportOverlay' +import CreateFromTemplateOverlay from 'src/templates/components/createFromTemplateOverlay/CreateFromTemplateOverlay' +import DashboardExportOverlay from 'src/dashboards/components/DashboardExportOverlay' + +// Utils +import {pageTitleSuffixer} from 'src/shared/utils/pageTitles' +import {extractDashboardLimits} from 'src/cloud/utils/limits' + +// Actions +import {createDashboard as createDashboardAction, getDashboards} from 'src/dashboards/actions/thunks' +import {setDashboardSort, setSearchTerm} from 'src/dashboards/actions/creators' +import {getLabels} from 'src/labels/actions/thunks' + +// Types +import {AppState, ResourceType} from 'src/types' +import {SortTypes} from 'src/shared/utils/sort' +import {DashboardSortKey} from 'src/shared/components/resource_sort_dropdown/generateSortItems' + +import ErrorBoundary from 'src/shared/components/ErrorBoundary' + +type ReduxProps = ConnectedProps +type Props = ReduxProps & RouteComponentProps<{orgID: string}> + +interface State { + searchTerm: string +} + +@ErrorHandling +class DashboardIndex extends PureComponent { + constructor(props: Props) { + super(props) + + this.state = { + searchTerm: props.searchTerm, + } + } + + componentDidMount() { + this.props.getDashboards() + this.props.getLabels() + } + + componentWillUnmount() { + this.props.setSearchTerm(this.state.searchTerm) + } + + public render() { + const {createDashboard, sortOptions, limitStatus} = this.props + const {searchTerm} = this.state + + return ( + <> + + + + + + + + + + + + + + + + + + + + {({width, height}) => { + return ( + + + + )}} + + + + + + + + + + + + ) + } + + private handleFilterDashboards = (searchTerm: string): void => { + this.setState({searchTerm}) + } + + private handleSort = ( + sortKey: DashboardSortKey, + sortDirection: Sort, + sortType: SortTypes + ): void => { + this.props.setDashboardSort({sortKey, sortDirection, sortType}) + } + + private summonImportOverlay = (): void => { + const { + history, + match: { + params: {orgID}, + }, + } = this.props + history.push(`/orgs/${orgID}/dashboards-list/import`) + } + + private summonTemplatePage = (): void => { + const { + history, + match: { + params: {orgID}, + }, + } = this.props + history.push(`/orgs/${orgID}/settings/templates`) + } +} + +const mstp = (state: AppState) => { + const {sortOptions, searchTerm} = state.resources.dashboards + console.log("its the one"); + return { + limitStatus: extractDashboardLimits(state), + sortOptions, + searchTerm, + } +} + +const mdtp = { + createDashboard: createDashboardAction, + setDashboardSort, + setSearchTerm, + getDashboards, + getLabels, +} + +const connector = connect(mstp, mdtp) + +export default connector(DashboardIndex) diff --git a/src/shared/containers/SetOrg.tsx b/src/shared/containers/SetOrg.tsx index aa1c9f4613..be13650e96 100644 --- a/src/shared/containers/SetOrg.tsx +++ b/src/shared/containers/SetOrg.tsx @@ -15,6 +15,7 @@ import { TaskRunsPagePaginated, TaskEditPage, DashboardsIndex, + DashboardsIndexPaginated, DataExplorerPage, DashboardContainer, FlowPage, @@ -179,13 +180,23 @@ const SetOrg: FC = () => { - + /> {/* Dashboards */} - + ) : ( + + )} + {/* */} export const DashboardsIndex = lazy(() => import('src/dashboards/components/dashboard_index/DashboardsIndex') ) +export const DashboardsIndexPaginated = lazy(() => + import('src/dashboards/components/dashboard_index/DashboardsIndexPaginated') +) export const DashboardContainer = lazy(() => import('src/dashboards/components/DashboardContainer') ) diff --git a/src/tasks/pagination/TasksList.tsx b/src/tasks/pagination/TasksList.tsx index 3a9cf7ce3d..d98b894331 100644 --- a/src/tasks/pagination/TasksList.tsx +++ b/src/tasks/pagination/TasksList.tsx @@ -186,7 +186,8 @@ export default class TasksList extends PureComponent startIndex + this.rowsPerPage, this.props.totalCount ) - + console.log({'start index': startIndex, 'end index': endIndex}) + console.log('current page ', this.currentPage) const rows = [] for (let i = startIndex; i < endIndex; i++) { const task = sortedTasks[i] From 7dbe6346e10c6d0ff004b8ebc6bd8cbb3e1edd2b Mon Sep 17 00:00:00 2001 From: Beth Legesse Date: Fri, 3 Dec 2021 16:41:27 -0600 Subject: [PATCH 02/15] feat: adding function to render dashboards --- .../dashboard_index/DashboardsIndexContentsPaginated.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx b/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx index 8bd0cd3ea2..340c4115d4 100644 --- a/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx +++ b/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx @@ -71,6 +71,12 @@ class DashboardsIndexContents extends Component } + public renderDashboardCards(filteredDashboards) { + // similar to tasksList pagination line 184-186 + // use start and end index to loop over filteredDash and push + return filteredDashboards + } + public render() { const { searchTerm, @@ -109,7 +115,8 @@ class DashboardsIndexContents extends Component > {filteredDashboards => ( Date: Mon, 6 Dec 2021 11:13:16 -0600 Subject: [PATCH 03/15] chore: clean up --- .../dashboard_index/DashboardCardsPaginated.tsx | 6 +++--- .../DashboardsIndexContentsPaginated.tsx | 17 +++++++++++++---- .../DashboardsIndexPaginated.tsx | 2 +- 3 files changed, 17 insertions(+), 8 deletions(-) diff --git a/src/dashboards/components/dashboard_index/DashboardCardsPaginated.tsx b/src/dashboards/components/dashboard_index/DashboardCardsPaginated.tsx index 7fe774137f..74f2ef7d82 100644 --- a/src/dashboards/components/dashboard_index/DashboardCardsPaginated.tsx +++ b/src/dashboards/components/dashboard_index/DashboardCardsPaginated.tsx @@ -128,11 +128,11 @@ class DashboardCards extends PureComponent { const {windowSize, pages, pinnedItems} = this.state return ( -
+
{sortedDashboards - .filter(d => d.status === RemoteDataState.Done) - .slice(0, pages * windowSize) + // .filter(d => d.status === RemoteDataState.Done) + // .slice(0, pages * windowSize) .map(({id, name, description, labels, meta}) => ( } public renderDashboardCards(filteredDashboards) { - // similar to tasksList pagination line 184-186 - // use start and end index to loop over filteredDash and push - return filteredDashboards + + const startIndex = this.rowsPerPage * Math.max(this.currentPage - 1, 0) + const endIndex = Math.min(startIndex + this.rowsPerPage, this.props.dashboards.length) + const rows = [] + for (let i = startIndex; i < endIndex; i++) { + const dashboard = filteredDashboards[i] + if(dashboard) { + rows.push( + dashboard + ) + } + } + return rows } public render() { @@ -116,7 +126,6 @@ class DashboardsIndexContents extends Component {filteredDashboards => ( { scrollbarSize={ComponentSize.Large} autoHideScrollbar={true} > - + {({width, height}) => { return ( From 449ed97084f202b647db883bea243858d748e0f9 Mon Sep 17 00:00:00 2001 From: Beth Legesse Date: Mon, 6 Dec 2021 12:40:28 -0600 Subject: [PATCH 04/15] feat: pagination is working --- .../DashboardsIndexContentsPaginated.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx b/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx index ba5c9e7b36..787e47ce2c 100644 --- a/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx +++ b/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx @@ -50,7 +50,7 @@ class DashboardsIndexContents extends Component private paginationRef: RefObject public currentPage: number = 1 - public rowsPerPage: number = 10 + public rowsPerPage: number = 12 public totalPages: number constructor(props) { @@ -59,6 +59,7 @@ class DashboardsIndexContents extends Component } + public componentDidMount() { const {dashboards} = this.props @@ -68,6 +69,10 @@ class DashboardsIndexContents extends Component } public paginate = page => { + this.currentPage = page + // const url = new URL(location.href) + this.forceUpdate() + console.log('current page ', this.currentPage) } @@ -79,9 +84,7 @@ class DashboardsIndexContents extends Component for (let i = startIndex; i < endIndex; i++) { const dashboard = filteredDashboards[i] if(dashboard) { - rows.push( - dashboard - ) + rows.push(dashboard) } } return rows @@ -100,6 +103,8 @@ class DashboardsIndexContents extends Component onCreateDashboard, } = this.props + console.log('dash lenght ', dashboards.length) + this.totalPages = Math.max( Math.ceil(dashboards.length / this.rowsPerPage), 1 From 0dc28655d50154f2e2bfe1716523decf3bdbd06c Mon Sep 17 00:00:00 2001 From: Beth Legesse Date: Mon, 6 Dec 2021 13:15:32 -0600 Subject: [PATCH 05/15] chore: moved filter one component higher --- .../DashboardCardsPaginated.tsx | 24 +++---- .../DashboardsIndexContentsPaginated.tsx | 66 +++++++++---------- .../DashboardsIndexPaginated.tsx | 24 +++++-- 3 files changed, 65 insertions(+), 49 deletions(-) diff --git a/src/dashboards/components/dashboard_index/DashboardCardsPaginated.tsx b/src/dashboards/components/dashboard_index/DashboardCardsPaginated.tsx index 74f2ef7d82..d95cd65ba3 100644 --- a/src/dashboards/components/dashboard_index/DashboardCardsPaginated.tsx +++ b/src/dashboards/components/dashboard_index/DashboardCardsPaginated.tsx @@ -1,7 +1,7 @@ // Libraries import React, {PureComponent} from 'react' import {connect} from 'react-redux' -import memoizeOne from 'memoize-one' +// import memoizeOne from 'memoize-one' // Components import DashboardCard from 'src/dashboards/components/dashboard_index/DashboardCard' @@ -43,9 +43,9 @@ class DashboardCards extends PureComponent { private _isMounted = true private _spinner - private memGetSortedResources = memoizeOne( - getSortedResources - ) + // private memGetSortedResources = memoizeOne( + // getSortedResources + // ) state = { pages: 1, @@ -118,19 +118,19 @@ class DashboardCards extends PureComponent { sortType, onFilterChange, } = this.props - const sortedDashboards = this.memGetSortedResources( - dashboards, - sortKey, - sortDirection, - sortType - ) - console.log('working?' , sortedDashboards) + // const sortedDashboards = this.memGetSortedResources( + // dashboards, + // sortKey, + // sortDirection, + // sortType + // ) + // console.log('working?' , sortedDashboards) const {windowSize, pages, pinnedItems} = this.state return (
- {sortedDashboards + {dashboards // .filter(d => d.status === RemoteDataState.Done) // .slice(0, pages * windowSize) .map(({id, name, description, labels, meta}) => ( diff --git a/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx b/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx index 787e47ce2c..bdeda2a9dc 100644 --- a/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx +++ b/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx @@ -2,10 +2,11 @@ import React, {Component, createRef, RefObject} from 'react' import {connect, ConnectedProps} from 'react-redux' import {withRouter, RouteComponentProps} from 'react-router-dom' +import memoizeOne from 'memoize-one' // Components import Table from 'src/dashboards/components/dashboard_index/Table' -import FilterList from 'src/shared/components/FilterList' +// import FilterList from 'src/shared/components/FilterList' import DashboardsTableEmpty from 'src/dashboards/components/dashboard_index/DashboardsTableEmpty' import DashboardCardsPaginated from 'src/dashboards/components/dashboard_index/DashboardCardsPaginated' @@ -20,8 +21,8 @@ import {ErrorHandling} from 'src/shared/decorators/errors' // Types import {Dashboard, AppState, ResourceType, Pageable, RemoteDataState} from 'src/types' import {Sort} from '@influxdata/clockface' -import {getAll} from 'src/resources/selectors' -import {SortTypes} from 'src/shared/utils/sort' +// import {getAll} from 'src/resources/selectors' +import {SortTypes, getSortedResources} from 'src/shared/utils/sort' import {DashboardSortKey} from 'src/shared/components/resource_sort_dropdown/generateSortItems' // Utils @@ -37,12 +38,13 @@ interface OwnProps { sortKey: DashboardSortKey pageHeight: number pageWidth: number + dashboards: any } type ReduxProps = ConnectedProps type Props = ReduxProps & OwnProps & RouteComponentProps<{orgID: string}> -const FilterDashboards = FilterList() +// const FilterDashboards = FilterList() @ErrorHandling class DashboardsIndexContents extends Component @@ -52,13 +54,16 @@ class DashboardsIndexContents extends Component public currentPage: number = 1 public rowsPerPage: number = 12 public totalPages: number - + + private memGetSortedResources = memoizeOne( + getSortedResources + ) constructor(props) { super(props) this.paginationRef = createRef() } - + public componentDidMount() { const {dashboards} = this.props @@ -91,6 +96,7 @@ class DashboardsIndexContents extends Component } public render() { + const { searchTerm, status, @@ -103,12 +109,21 @@ class DashboardsIndexContents extends Component onCreateDashboard, } = this.props - console.log('dash lenght ', dashboards.length) + // console.log('dash lenght ', dashboards.length) + console.log({'sort type': sortType, 'sort key': sortKey}) + const sortedDashboards = this.memGetSortedResources( + dashboards, + sortKey, + sortDirection, + sortType + ) + console.log('sorted dash ', sortedDashboards) this.totalPages = Math.max( Math.ceil(dashboards.length / this.rowsPerPage), 1 ) + if (status === RemoteDataState.Done && !dashboards.length) { return ( return ( <> - - {filteredDashboards => ( - - //
- )} - + + + + const mstp = (state: AppState) => { return { - dashboards: getAll(state, ResourceType.Dashboards), + // dashboards: getAll(state, ResourceType.Dashboards), status: state.resources.dashboards.status } } diff --git a/src/dashboards/components/dashboard_index/DashboardsIndexPaginated.tsx b/src/dashboards/components/dashboard_index/DashboardsIndexPaginated.tsx index 4a50c052be..dad9833030 100644 --- a/src/dashboards/components/dashboard_index/DashboardsIndexPaginated.tsx +++ b/src/dashboards/components/dashboard_index/DashboardsIndexPaginated.tsx @@ -10,6 +10,7 @@ import {ErrorHandling} from 'src/shared/decorators/errors' // Components import DashboardsIndexContents from 'src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated' import {ComponentSize, Page, Sort} from '@influxdata/clockface' +import FilterList from 'src/shared/components/FilterList' import SearchWidget from 'src/shared/components/search_widget/SearchWidget' import AddResourceDropdown from 'src/shared/components/AddResourceDropdown' import GetAssetLimits from 'src/cloud/components/GetAssetLimits' @@ -27,9 +28,10 @@ import {extractDashboardLimits} from 'src/cloud/utils/limits' import {createDashboard as createDashboardAction, getDashboards} from 'src/dashboards/actions/thunks' import {setDashboardSort, setSearchTerm} from 'src/dashboards/actions/creators' import {getLabels} from 'src/labels/actions/thunks' +import {getAll} from 'src/resources/selectors' // Types -import {AppState, ResourceType} from 'src/types' +import {AppState, ResourceType, Dashboard} from 'src/types' import {SortTypes} from 'src/shared/utils/sort' import {DashboardSortKey} from 'src/shared/components/resource_sort_dropdown/generateSortItems' @@ -42,6 +44,8 @@ interface State { searchTerm: string } +const FilterDashboards = FilterList() + @ErrorHandling class DashboardIndex extends PureComponent { constructor(props: Props) { @@ -62,7 +66,7 @@ class DashboardIndex extends PureComponent { } public render() { - const {createDashboard, sortOptions, limitStatus} = this.props + const {createDashboard, sortOptions, limitStatus, dashboards} = this.props const {searchTerm} = this.state return ( @@ -114,15 +118,26 @@ class DashboardIndex extends PureComponent { {({width, height}) => { return ( + + {filteredDashboards => ( + + )} + )}} @@ -183,8 +198,9 @@ class DashboardIndex extends PureComponent { const mstp = (state: AppState) => { const {sortOptions, searchTerm} = state.resources.dashboards - console.log("its the one"); - return { + // console.log("its the one"); + return { + dashboards: getAll(state, ResourceType.Dashboards), limitStatus: extractDashboardLimits(state), sortOptions, searchTerm, From bec865418a67b4a46f55acafeb2c4af625324914 Mon Sep 17 00:00:00 2001 From: Beth Legesse Date: Tue, 7 Dec 2021 10:51:18 -0600 Subject: [PATCH 06/15] chore: clean up --- .../DashboardsIndexContentsPaginated.tsx | 50 ++++++++++++------- .../DashboardsIndexPaginated.tsx | 1 + 2 files changed, 32 insertions(+), 19 deletions(-) diff --git a/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx b/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx index bdeda2a9dc..7424b583fe 100644 --- a/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx +++ b/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx @@ -39,6 +39,7 @@ interface OwnProps { pageHeight: number pageWidth: number dashboards: any + totalDashboards: number } type ReduxProps = ConnectedProps @@ -71,23 +72,41 @@ class DashboardsIndexContents extends Component const dashboardIDs = dashboards.map(d => d.id) this.props.retainRangesDashTimeV1(dashboardIDs) this.props.checkDashboardLimits() + + const params = new URLSearchParams(window.location.search) + const urlPageNumber = parseInt(params.get('page'), 10) + console.log('url page num ', urlPageNumber, this.totalPages) + + const passedInPageIsValid = + urlPageNumber && urlPageNumber <= this.totalPages && urlPageNumber > 0 + if (passedInPageIsValid) { + this.currentPage = urlPageNumber + console.log('its valid') + } } public paginate = page => { this.currentPage = page - // const url = new URL(location.href) + const url = new URL(location.href) + url.searchParams.set('page', page) + history.replaceState(null, '', url.toString()) this.forceUpdate() - console.log('current page ', this.currentPage) } - public renderDashboardCards(filteredDashboards) { + public renderDashboardCards() { + const sortedDashboards = this.memGetSortedResources( + this.props.dashboards, + this.props.sortKey, + this.props.sortDirection, + this.props.sortType + ) const startIndex = this.rowsPerPage * Math.max(this.currentPage - 1, 0) - const endIndex = Math.min(startIndex + this.rowsPerPage, this.props.dashboards.length) + const endIndex = Math.min(startIndex + this.rowsPerPage, this.props.totalDashboards) const rows = [] for (let i = startIndex; i < endIndex; i++) { - const dashboard = filteredDashboards[i] + const dashboard = sortedDashboards[i] if(dashboard) { rows.push(dashboard) } @@ -109,20 +128,13 @@ class DashboardsIndexContents extends Component onCreateDashboard, } = this.props - // console.log('dash lenght ', dashboards.length) - console.log({'sort type': sortType, 'sort key': sortKey}) - - const sortedDashboards = this.memGetSortedResources( - dashboards, - sortKey, - sortDirection, - sortType - ) - console.log('sorted dash ', sortedDashboards) this.totalPages = Math.max( - Math.ceil(dashboards.length / this.rowsPerPage), - 1 - ) + Math.ceil(dashboards.length / this.rowsPerPage), + 1 + ) + console.log('total pages ', this.totalPages) + // console.log('sorted dash ', sortedDashboards) + if (status === RemoteDataState.Done && !dashboards.length) { return ( @@ -140,7 +152,7 @@ class DashboardsIndexContents extends Component { pageWidth={width} pageHeight={height} dashboards={filteredDashboards} + totalDashboards={dashboards.length} searchTerm={searchTerm} onFilterChange={this.handleFilterDashboards} sortDirection={sortOptions.sortDirection} From 5d311b68031930f6879935650a9a8e646fe686e0 Mon Sep 17 00:00:00 2001 From: Beth Legesse Date: Tue, 7 Dec 2021 10:58:29 -0600 Subject: [PATCH 07/15] feat: adding a spinner to dashboardsIndexPaginated --- .../DashboardsIndexPaginated.tsx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/src/dashboards/components/dashboard_index/DashboardsIndexPaginated.tsx b/src/dashboards/components/dashboard_index/DashboardsIndexPaginated.tsx index c9a2fd7c92..b7f4dbdd8e 100644 --- a/src/dashboards/components/dashboard_index/DashboardsIndexPaginated.tsx +++ b/src/dashboards/components/dashboard_index/DashboardsIndexPaginated.tsx @@ -9,7 +9,7 @@ import {ErrorHandling} from 'src/shared/decorators/errors' // Components import DashboardsIndexContents from 'src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated' -import {ComponentSize, Page, Sort} from '@influxdata/clockface' +import {ComponentSize, Page, Sort, SpinnerContainer, TechnoSpinner} from '@influxdata/clockface' import FilterList from 'src/shared/components/FilterList' import SearchWidget from 'src/shared/components/search_widget/SearchWidget' import AddResourceDropdown from 'src/shared/components/AddResourceDropdown' @@ -29,6 +29,7 @@ import {createDashboard as createDashboardAction, getDashboards} from 'src/dashb import {setDashboardSort, setSearchTerm} from 'src/dashboards/actions/creators' import {getLabels} from 'src/labels/actions/thunks' import {getAll} from 'src/resources/selectors' +import {getResourcesStatus} from 'src/resources/selectors/getResourcesStatus' // Types import {AppState, ResourceType, Dashboard} from 'src/types' @@ -66,11 +67,14 @@ class DashboardIndex extends PureComponent { } public render() { - const {createDashboard, sortOptions, limitStatus, dashboards} = this.props + const {createDashboard, sortOptions, limitStatus, dashboards, remoteDataState} = this.props const {searchTerm} = this.state return ( - <> + } + > { component={DashboardImportOverlay} /> - + ) } @@ -199,12 +203,16 @@ class DashboardIndex extends PureComponent { const mstp = (state: AppState) => { const {sortOptions, searchTerm} = state.resources.dashboards - // console.log("its the one"); + const remoteDataState = getResourcesStatus(state, [ + ResourceType.Dashboards, + ResourceType.Labels, + ]) return { dashboards: getAll(state, ResourceType.Dashboards), limitStatus: extractDashboardLimits(state), sortOptions, searchTerm, + remoteDataState, } } From 8daad7467203c2300b8dac703e4e3dcac7e7595b Mon Sep 17 00:00:00 2001 From: Beth Legesse Date: Tue, 7 Dec 2021 12:42:27 -0600 Subject: [PATCH 08/15] feat: usibility fixes with url --- .../DashboardCardsPaginated.tsx | 2 +- .../DashboardsIndexContentsPaginated.tsx | 138 +++++++++--------- .../DashboardsIndexPaginated.tsx | 108 ++++++++++---- src/shared/containers/SetOrg.tsx | 14 +- 4 files changed, 153 insertions(+), 109 deletions(-) diff --git a/src/dashboards/components/dashboard_index/DashboardCardsPaginated.tsx b/src/dashboards/components/dashboard_index/DashboardCardsPaginated.tsx index d95cd65ba3..d134cafecd 100644 --- a/src/dashboards/components/dashboard_index/DashboardCardsPaginated.tsx +++ b/src/dashboards/components/dashboard_index/DashboardCardsPaginated.tsx @@ -124,7 +124,7 @@ class DashboardCards extends PureComponent { // sortDirection, // sortType // ) - // console.log('working?' , sortedDashboards) + // console.log('working?' , sortedDashboards) const {windowSize, pages, pinnedItems} = this.state return ( diff --git a/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx b/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx index 7424b583fe..de2a192e79 100644 --- a/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx +++ b/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx @@ -5,8 +5,6 @@ import {withRouter, RouteComponentProps} from 'react-router-dom' import memoizeOne from 'memoize-one' // Components -import Table from 'src/dashboards/components/dashboard_index/Table' -// import FilterList from 'src/shared/components/FilterList' import DashboardsTableEmpty from 'src/dashboards/components/dashboard_index/DashboardsTableEmpty' import DashboardCardsPaginated from 'src/dashboards/components/dashboard_index/DashboardCardsPaginated' @@ -19,16 +17,19 @@ import {createDashboard} from 'src/dashboards/actions/thunks' import {ErrorHandling} from 'src/shared/decorators/errors' // Types -import {Dashboard, AppState, ResourceType, Pageable, RemoteDataState} from 'src/types' +import { + Dashboard, + AppState, + Pageable, + RemoteDataState, +} from 'src/types' import {Sort} from '@influxdata/clockface' -// import {getAll} from 'src/resources/selectors' import {SortTypes, getSortedResources} from 'src/shared/utils/sort' import {DashboardSortKey} from 'src/shared/components/resource_sort_dropdown/generateSortItems' // Utils import {PaginationNav} from '@influxdata/clockface' - interface OwnProps { onFilterChange: (searchTerm: string) => void searchTerm: string @@ -38,33 +39,28 @@ interface OwnProps { sortKey: DashboardSortKey pageHeight: number pageWidth: number - dashboards: any + dashboards: Dashboard[] totalDashboards: number } type ReduxProps = ConnectedProps type Props = ReduxProps & OwnProps & RouteComponentProps<{orgID: string}> -// const FilterDashboards = FilterList() @ErrorHandling -class DashboardsIndexContents extends Component - implements Pageable { - - private paginationRef: RefObject - public currentPage: number = 1 - public rowsPerPage: number = 12 - public totalPages: number - - private memGetSortedResources = memoizeOne( - getSortedResources - ) - constructor(props) { - super(props) - this.paginationRef = createRef() - - } - +class DashboardsIndexContents extends Component implements Pageable { + private paginationRef: RefObject + public currentPage: number = 1 + public rowsPerPage: number = 12 + public totalPages: number + + private memGetSortedResources = memoizeOne( + getSortedResources + ) + constructor(props) { + super(props) + this.paginationRef = createRef() + } public componentDidMount() { const {dashboards} = this.props @@ -75,13 +71,19 @@ class DashboardsIndexContents extends Component const params = new URLSearchParams(window.location.search) const urlPageNumber = parseInt(params.get('page'), 10) - console.log('url page num ', urlPageNumber, this.totalPages) const passedInPageIsValid = urlPageNumber && urlPageNumber <= this.totalPages && urlPageNumber > 0 if (passedInPageIsValid) { this.currentPage = urlPageNumber - console.log('its valid') + } + } + + public componentDidUpdate() { + // if the user filters the list while on a page that is + // outside the new filtered list put them on the last page of the new list + if (this.currentPage > this.totalPages) { + this.paginate(this.totalPages) } } @@ -91,23 +93,25 @@ class DashboardsIndexContents extends Component url.searchParams.set('page', page) history.replaceState(null, '', url.toString()) this.forceUpdate() - } - public renderDashboardCards() { + public renderDashboardCards() { const sortedDashboards = this.memGetSortedResources( this.props.dashboards, this.props.sortKey, this.props.sortDirection, this.props.sortType ) - + const startIndex = this.rowsPerPage * Math.max(this.currentPage - 1, 0) - const endIndex = Math.min(startIndex + this.rowsPerPage, this.props.totalDashboards) + const endIndex = Math.min( + startIndex + this.rowsPerPage, + this.props.totalDashboards + ) const rows = [] for (let i = startIndex; i < endIndex; i++) { const dashboard = sortedDashboards[i] - if(dashboard) { + if (dashboard) { rows.push(dashboard) } } @@ -115,12 +119,10 @@ class DashboardsIndexContents extends Component } public render() { - const { searchTerm, status, dashboards, - filterComponent, onFilterChange, sortDirection, sortType, @@ -132,45 +134,38 @@ class DashboardsIndexContents extends Component Math.ceil(dashboards.length / this.rowsPerPage), 1 ) - console.log('total pages ', this.totalPages) - // console.log('sorted dash ', sortedDashboards) - - - if (status === RemoteDataState.Done && !dashboards.length) { - return ( - - ) - } - + + if (status === RemoteDataState.Done && !dashboards.length) { + return ( + + ) + } + return ( - <> - - - - - - + <> + + + + ) - - } private summonImportOverlay = (): void => { const { @@ -195,8 +190,7 @@ class DashboardsIndexContents extends Component const mstp = (state: AppState) => { return { - // dashboards: getAll(state, ResourceType.Dashboards), - status: state.resources.dashboards.status + status: state.resources.dashboards.status, } } diff --git a/src/dashboards/components/dashboard_index/DashboardsIndexPaginated.tsx b/src/dashboards/components/dashboard_index/DashboardsIndexPaginated.tsx index b7f4dbdd8e..bfd6cfe415 100644 --- a/src/dashboards/components/dashboard_index/DashboardsIndexPaginated.tsx +++ b/src/dashboards/components/dashboard_index/DashboardsIndexPaginated.tsx @@ -9,7 +9,13 @@ import {ErrorHandling} from 'src/shared/decorators/errors' // Components import DashboardsIndexContents from 'src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated' -import {ComponentSize, Page, Sort, SpinnerContainer, TechnoSpinner} from '@influxdata/clockface' +import { + ComponentSize, + Page, + Sort, + SpinnerContainer, + TechnoSpinner, +} from '@influxdata/clockface' import FilterList from 'src/shared/components/FilterList' import SearchWidget from 'src/shared/components/search_widget/SearchWidget' import AddResourceDropdown from 'src/shared/components/AddResourceDropdown' @@ -25,7 +31,10 @@ import {pageTitleSuffixer} from 'src/shared/utils/pageTitles' import {extractDashboardLimits} from 'src/cloud/utils/limits' // Actions -import {createDashboard as createDashboardAction, getDashboards} from 'src/dashboards/actions/thunks' +import { + createDashboard as createDashboardAction, + getDashboards, +} from 'src/dashboards/actions/thunks' import {setDashboardSort, setSearchTerm} from 'src/dashboards/actions/creators' import {getLabels} from 'src/labels/actions/thunks' import {getAll} from 'src/resources/selectors' @@ -60,6 +69,33 @@ class DashboardIndex extends PureComponent { componentDidMount() { this.props.getDashboards() this.props.getLabels() + + let sortType: SortTypes = this.props.sortOptions.sortType + const params = new URLSearchParams(window.location.search) + console.log('sort type ', sortType) + let sortKey: DashboardSortKey = 'name' + if (params.get('sortKey') === 'name' ) { + sortKey = 'name' + } else if(params.get('sortKey') === 'meta.updatedAt') { + sortKey = 'meta.updatedAt' + sortType = SortTypes.Date + } + + let sortDirection: Sort = this.props.sortOptions.sortDirection + if (params.get('sortDirection') === Sort.Ascending) { + sortDirection = Sort.Ascending + } else if (params.get('sortDirection') === Sort.Descending) { + sortDirection = Sort.Descending + } + + let searchTerm: string = '' + if (params.get('searchTerm') !== null) { + searchTerm = params.get('searchTerm') + this.props.setSearchTerm(searchTerm) + this.setState({searchTerm}) + } + + this.props.setDashboardSort({sortKey, sortDirection, sortType}) } componentWillUnmount() { @@ -67,13 +103,19 @@ class DashboardIndex extends PureComponent { } public render() { - const {createDashboard, sortOptions, limitStatus, dashboards, remoteDataState} = this.props + const { + createDashboard, + sortOptions, + limitStatus, + dashboards, + remoteDataState, + } = this.props const {searchTerm} = this.state return ( } + spinnerComponent={} > { scrollbarSize={ComponentSize.Large} autoHideScrollbar={true} > - + {({width, height}) => { - return ( + return ( - {filteredDashboards => ( - - - )} - + searchKeys={['name', 'labels[].name']} + sortByKey="name" + > + {filteredDashboards => ( + + )} + - )}} - - + ) + }} + @@ -169,6 +210,10 @@ class DashboardIndex extends PureComponent { } private handleFilterDashboards = (searchTerm: string): void => { + const url = new URL(location.href) + url.searchParams.set('searchTerm', searchTerm) + history.replaceState(null, '', url.toString()) + this.setState({searchTerm}) } @@ -177,6 +222,11 @@ class DashboardIndex extends PureComponent { sortDirection: Sort, sortType: SortTypes ): void => { + const url = new URL(location.href) + url.searchParams.set('sortKey', sortKey) + url.searchParams.set('sortDirection', sortDirection) + history.replaceState(null, '', url.toString()) + this.props.setDashboardSort({sortKey, sortDirection, sortType}) } @@ -207,7 +257,7 @@ const mstp = (state: AppState) => { ResourceType.Dashboards, ResourceType.Labels, ]) - return { + return { dashboards: getAll(state, ResourceType.Dashboards), limitStatus: extractDashboardLimits(state), sortOptions, diff --git a/src/shared/containers/SetOrg.tsx b/src/shared/containers/SetOrg.tsx index be13650e96..a482f34241 100644 --- a/src/shared/containers/SetOrg.tsx +++ b/src/shared/containers/SetOrg.tsx @@ -180,18 +180,18 @@ const SetOrg: FC = () => { + /> {/* Dashboards */} {true ? ( + path={`${orgPath}/dashboards-list`} + component={DashboardsIndexPaginated} + /> ) : ( + path={`${orgPath}/dashboards-list`} + component={DashboardsIndex} + /> )} {/* Date: Wed, 8 Dec 2021 11:11:46 -0600 Subject: [PATCH 09/15] feat: feature flag added to ui --- .../components/dashboard_index/DashboardsIndexPaginated.tsx | 1 - src/shared/containers/SetOrg.tsx | 6 +----- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/src/dashboards/components/dashboard_index/DashboardsIndexPaginated.tsx b/src/dashboards/components/dashboard_index/DashboardsIndexPaginated.tsx index bfd6cfe415..d0900a57ae 100644 --- a/src/dashboards/components/dashboard_index/DashboardsIndexPaginated.tsx +++ b/src/dashboards/components/dashboard_index/DashboardsIndexPaginated.tsx @@ -72,7 +72,6 @@ class DashboardIndex extends PureComponent { let sortType: SortTypes = this.props.sortOptions.sortType const params = new URLSearchParams(window.location.search) - console.log('sort type ', sortType) let sortKey: DashboardSortKey = 'name' if (params.get('sortKey') === 'name' ) { sortKey = 'name' diff --git a/src/shared/containers/SetOrg.tsx b/src/shared/containers/SetOrg.tsx index a482f34241..18cb02a3c0 100644 --- a/src/shared/containers/SetOrg.tsx +++ b/src/shared/containers/SetOrg.tsx @@ -182,7 +182,7 @@ const SetOrg: FC = () => { component={DataExplorerPage} /> {/* Dashboards */} - {true ? ( + {isFlagEnabled('paginatedDashboards') ? ( { component={DashboardsIndex} /> )} - {/* */} Date: Wed, 8 Dec 2021 13:30:01 -0600 Subject: [PATCH 10/15] chore: clean up --- .../DashboardCardsPaginated.tsx | 85 ++----------------- .../DashboardsIndexContentsPaginated.tsx | 10 +-- 2 files changed, 7 insertions(+), 88 deletions(-) diff --git a/src/dashboards/components/dashboard_index/DashboardCardsPaginated.tsx b/src/dashboards/components/dashboard_index/DashboardCardsPaginated.tsx index d134cafecd..363987a34e 100644 --- a/src/dashboards/components/dashboard_index/DashboardCardsPaginated.tsx +++ b/src/dashboards/components/dashboard_index/DashboardCardsPaginated.tsx @@ -1,19 +1,13 @@ // Libraries import React, {PureComponent} from 'react' import {connect} from 'react-redux' -// import memoizeOne from 'memoize-one' // Components import DashboardCard from 'src/dashboards/components/dashboard_index/DashboardCard' -import {TechnoSpinner} from '@influxdata/clockface' import AssetLimitAlert from 'src/cloud/components/AssetLimitAlert' -// Selectors -import {getSortedResources, SortTypes} from 'src/shared/utils/sort' - // Types -import {AppState, Dashboard, RemoteDataState} from 'src/types' -import {Sort} from 'src/clockface' +import {AppState, Dashboard} from 'src/types' import {LimitStatus} from 'src/cloud/actions/limits' // Utils @@ -32,24 +26,15 @@ interface StateProps { interface OwnProps { dashboards: Dashboard[] - sortKey: string - sortDirection: Sort - sortType: SortTypes onFilterChange: (searchTerm: string) => void } class DashboardCards extends PureComponent { - private _observer + private _isMounted = true - private _spinner - // private memGetSortedResources = memoizeOne( - // getSortedResources - // ) state = { - pages: 1, - windowSize: 0, pinnedItems: [], } @@ -58,81 +43,31 @@ class DashboardCards extends PureComponent { getPinnedItems() .then(res => { if (this._isMounted) { - this.setState(prev => ({...prev, pinnedItems: res, windowSize: 15})) + this.setState(prev => ({...prev, pinnedItems: res})) } }) .catch(err => { console.error(err) }) - } else { - this.setState(prev => ({...prev, windowSize: 15})) - } + } } public componentWillUnmount() { this._isMounted = false } - private registerSpinner = elem => { - this._spinner = elem - - if (!elem) { - return - } - - let count = 1.0 - const threshold = [] - - while (count > 0) { - threshold.push(count) - count -= 0.1 - } - - threshold.reverse() - - this._observer = new IntersectionObserver(this.measure, { - threshold, - rootMargin: '60px 0px', - }) - - this._observer.observe(this._spinner) - } - - private measure = entries => { - if ( - entries - .map(e => e.isIntersecting) - .reduce((prev, curr) => prev || curr, false) - ) { - this.setState({ - pages: this.state.pages + 1, - }) - } - } - public render() { const { dashboards, - sortDirection, - sortKey, - sortType, onFilterChange, } = this.props - // const sortedDashboards = this.memGetSortedResources( - // dashboards, - // sortKey, - // sortDirection, - // sortType - // ) - // console.log('working?' , sortedDashboards) - const {windowSize, pages, pinnedItems} = this.state + + const {pinnedItems} = this.state return (
{dashboards - // .filter(d => d.status === RemoteDataState.Done) - // .slice(0, pages * windowSize) .map(({id, name, description, labels, meta}) => ( { limitStatus={this.props.limitStatus} />
- {/* {windowSize * pages < dashboards.length && ( -
- -
- )} */}
) } diff --git a/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx b/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx index de2a192e79..1b6e239d4f 100644 --- a/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx +++ b/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx @@ -46,7 +46,6 @@ interface OwnProps { type ReduxProps = ConnectedProps type Props = ReduxProps & OwnProps & RouteComponentProps<{orgID: string}> - @ErrorHandling class DashboardsIndexContents extends Component implements Pageable { private paginationRef: RefObject @@ -124,12 +123,9 @@ class DashboardsIndexContents extends Component implements Pageable { status, dashboards, onFilterChange, - sortDirection, - sortType, - sortKey, onCreateDashboard, } = this.props - + this.totalPages = Math.max( Math.ceil(dashboards.length / this.rowsPerPage), 1 @@ -151,11 +147,7 @@ class DashboardsIndexContents extends Component implements Pageable { - Date: Wed, 8 Dec 2021 13:32:20 -0600 Subject: [PATCH 11/15] fix: prettier --- .../DashboardCardsPaginated.tsx | 38 ++++++++----------- .../DashboardsIndexContentsPaginated.tsx | 9 +---- .../DashboardsIndexPaginated.tsx | 4 +- 3 files changed, 20 insertions(+), 31 deletions(-) diff --git a/src/dashboards/components/dashboard_index/DashboardCardsPaginated.tsx b/src/dashboards/components/dashboard_index/DashboardCardsPaginated.tsx index 363987a34e..fe0e86e60f 100644 --- a/src/dashboards/components/dashboard_index/DashboardCardsPaginated.tsx +++ b/src/dashboards/components/dashboard_index/DashboardCardsPaginated.tsx @@ -30,10 +30,8 @@ interface OwnProps { } class DashboardCards extends PureComponent { - private _isMounted = true - state = { pinnedItems: [], } @@ -49,7 +47,7 @@ class DashboardCards extends PureComponent { .catch(err => { console.error(err) }) - } + } } public componentWillUnmount() { @@ -57,31 +55,27 @@ class DashboardCards extends PureComponent { } public render() { - const { - dashboards, - onFilterChange, - } = this.props + const {dashboards, onFilterChange} = this.props const {pinnedItems} = this.state return (
- {dashboards - .map(({id, name, description, labels, meta}) => ( - item?.metadata.dashboardID === id) - } - /> - ))} + {dashboards.map(({id, name, description, labels, meta}) => ( + item?.metadata.dashboardID === id) + } + /> + ))} implements Pageable { onFilterChange, onCreateDashboard, } = this.props - + this.totalPages = Math.max( Math.ceil(dashboards.length / this.rowsPerPage), 1 diff --git a/src/dashboards/components/dashboard_index/DashboardsIndexPaginated.tsx b/src/dashboards/components/dashboard_index/DashboardsIndexPaginated.tsx index d0900a57ae..330927ba55 100644 --- a/src/dashboards/components/dashboard_index/DashboardsIndexPaginated.tsx +++ b/src/dashboards/components/dashboard_index/DashboardsIndexPaginated.tsx @@ -73,9 +73,9 @@ class DashboardIndex extends PureComponent { let sortType: SortTypes = this.props.sortOptions.sortType const params = new URLSearchParams(window.location.search) let sortKey: DashboardSortKey = 'name' - if (params.get('sortKey') === 'name' ) { + if (params.get('sortKey') === 'name') { sortKey = 'name' - } else if(params.get('sortKey') === 'meta.updatedAt') { + } else if (params.get('sortKey') === 'meta.updatedAt') { sortKey = 'meta.updatedAt' sortType = SortTypes.Date } From f1c83eaabcf21028edf8b2177b4dbea853f58be1 Mon Sep 17 00:00:00 2001 From: Beth Legesse Date: Wed, 8 Dec 2021 13:49:01 -0600 Subject: [PATCH 12/15] chore: clean up --- src/tasks/pagination/TasksList.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/tasks/pagination/TasksList.tsx b/src/tasks/pagination/TasksList.tsx index d98b894331..54e59e944f 100644 --- a/src/tasks/pagination/TasksList.tsx +++ b/src/tasks/pagination/TasksList.tsx @@ -186,8 +186,7 @@ export default class TasksList extends PureComponent startIndex + this.rowsPerPage, this.props.totalCount ) - console.log({'start index': startIndex, 'end index': endIndex}) - console.log('current page ', this.currentPage) + const rows = [] for (let i = startIndex; i < endIndex; i++) { const task = sortedTasks[i] From bea23b1101f3cf00aeef0e4d1793d4c570577688 Mon Sep 17 00:00:00 2001 From: Beth Legesse Date: Wed, 8 Dec 2021 13:49:22 -0600 Subject: [PATCH 13/15] fix: prettier --- src/tasks/pagination/TasksList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tasks/pagination/TasksList.tsx b/src/tasks/pagination/TasksList.tsx index 54e59e944f..3a9cf7ce3d 100644 --- a/src/tasks/pagination/TasksList.tsx +++ b/src/tasks/pagination/TasksList.tsx @@ -186,7 +186,7 @@ export default class TasksList extends PureComponent startIndex + this.rowsPerPage, this.props.totalCount ) - + const rows = [] for (let i = startIndex; i < endIndex; i++) { const task = sortedTasks[i] From b72b3fc1ffa873697ec21e9cf657a19ef119fedd Mon Sep 17 00:00:00 2001 From: Beth Legesse Date: Thu, 9 Dec 2021 11:19:30 -0600 Subject: [PATCH 14/15] fix: fixing pagination controls position --- .../DashboardsIndexContentsPaginated.tsx | 16 ++++++++++++++++ .../dashboard_index/DashboardsIndexPaginated.tsx | 4 ++-- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx b/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx index 398746321f..950c0aa452 100644 --- a/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx +++ b/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx @@ -7,6 +7,7 @@ import memoizeOne from 'memoize-one' // Components import DashboardsTableEmpty from 'src/dashboards/components/dashboard_index/DashboardsTableEmpty' import DashboardCardsPaginated from 'src/dashboards/components/dashboard_index/DashboardCardsPaginated' +import {ResourceList} from '@influxdata/clockface' // Actions import {retainRangesDashTimeV1 as retainRangesDashTimeV1Action} from 'src/dashboards/actions/ranges' @@ -41,6 +42,8 @@ interface OwnProps { type ReduxProps = ConnectedProps type Props = ReduxProps & OwnProps & RouteComponentProps<{orgID: string}> +const DEFAULT_PAGINATION_CONTROL_HEIGHT = 62 + @ErrorHandling class DashboardsIndexContents extends Component implements Pageable { private paginationRef: RefObject @@ -121,6 +124,11 @@ class DashboardsIndexContents extends Component implements Pageable { onCreateDashboard, } = this.props + const heightWithPagination = + this.paginationRef?.current?.clientHeight || + DEFAULT_PAGINATION_CONTROL_HEIGHT + const height = this.props.pageHeight - heightWithPagination + this.totalPages = Math.max( Math.ceil(dashboards.length / this.rowsPerPage), 1 @@ -139,10 +147,17 @@ class DashboardsIndexContents extends Component implements Pageable { return ( <> + + + + implements Pageable { ) } + private summonImportOverlay = (): void => { const { history, diff --git a/src/dashboards/components/dashboard_index/DashboardsIndexPaginated.tsx b/src/dashboards/components/dashboard_index/DashboardsIndexPaginated.tsx index 330927ba55..03c0628436 100644 --- a/src/dashboards/components/dashboard_index/DashboardsIndexPaginated.tsx +++ b/src/dashboards/components/dashboard_index/DashboardsIndexPaginated.tsx @@ -154,12 +154,12 @@ class DashboardIndex extends PureComponent { - + {({width, height}) => { return ( From 5e23f6a932da653528917cc880d26e485315402b Mon Sep 17 00:00:00 2001 From: Beth Legesse Date: Thu, 9 Dec 2021 11:19:59 -0600 Subject: [PATCH 15/15] fix: prettier --- .../DashboardsIndexContentsPaginated.tsx | 14 +++++++------- .../dashboard_index/DashboardsIndexPaginated.tsx | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx b/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx index 950c0aa452..fca237bb53 100644 --- a/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx +++ b/src/dashboards/components/dashboard_index/DashboardsIndexContentsPaginated.tsx @@ -125,8 +125,8 @@ class DashboardsIndexContents extends Component implements Pageable { } = this.props const heightWithPagination = - this.paginationRef?.current?.clientHeight || - DEFAULT_PAGINATION_CONTROL_HEIGHT + this.paginationRef?.current?.clientHeight || + DEFAULT_PAGINATION_CONTROL_HEIGHT const height = this.props.pageHeight - heightWithPagination this.totalPages = Math.max( @@ -147,15 +147,15 @@ class DashboardsIndexContents extends Component implements Pageable { return ( <> - + - + { scrollbarSize={ComponentSize.Large} autoHideScrollbar={true} > - + {({width, height}) => { return (