Convert component to TypeScript
Alex P
Iris Scholten
parent
ecef89968b
commit
8034d37ca9
|
|
@ -1,101 +0,0 @@
|
||||||
import React, {Component} from 'react'
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
|
|
||||||
import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
|
|
||||||
|
|
||||||
import DashboardsTable from 'src/dashboards/components/DashboardsTable'
|
|
||||||
import SearchBar from 'src/hosts/components/SearchBar'
|
|
||||||
import FancyScrollbar from 'shared/components/FancyScrollbar'
|
|
||||||
import {ErrorHandling} from 'src/shared/decorators/errors'
|
|
||||||
|
|
||||||
@ErrorHandling
|
|
||||||
class DashboardsPageContents extends Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props)
|
|
||||||
|
|
||||||
this.state = {
|
|
||||||
searchTerm: '',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
filterDashboards = searchTerm => {
|
|
||||||
this.setState({searchTerm})
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const {
|
|
||||||
dashboards,
|
|
||||||
onDeleteDashboard,
|
|
||||||
onCreateDashboard,
|
|
||||||
onCloneDashboard,
|
|
||||||
onExportDashboard,
|
|
||||||
dashboardLink,
|
|
||||||
} = this.props
|
|
||||||
const {searchTerm} = this.state
|
|
||||||
|
|
||||||
let tableHeader
|
|
||||||
if (dashboards === null) {
|
|
||||||
tableHeader = 'Loading Dashboards...'
|
|
||||||
} else if (dashboards.length === 1) {
|
|
||||||
tableHeader = '1 Dashboard'
|
|
||||||
} else {
|
|
||||||
tableHeader = `${dashboards.length} Dashboards`
|
|
||||||
}
|
|
||||||
const filteredDashboards = dashboards.filter(d =>
|
|
||||||
d.name.toLowerCase().includes(searchTerm.toLowerCase())
|
|
||||||
)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<FancyScrollbar className="page-contents">
|
|
||||||
<div className="container-fluid">
|
|
||||||
<div className="row">
|
|
||||||
<div className="col-md-12">
|
|
||||||
<div className="panel">
|
|
||||||
<div className="panel-heading">
|
|
||||||
<h2 className="panel-title">{tableHeader}</h2>
|
|
||||||
<div className="dashboards-page--actions">
|
|
||||||
<SearchBar
|
|
||||||
placeholder="Filter by Name..."
|
|
||||||
onSearch={this.filterDashboards}
|
|
||||||
/>
|
|
||||||
<Authorized requiredRole={EDITOR_ROLE}>
|
|
||||||
<button
|
|
||||||
className="btn btn-sm btn-primary"
|
|
||||||
onClick={onCreateDashboard}
|
|
||||||
>
|
|
||||||
<span className="icon plus" /> Create Dashboard
|
|
||||||
</button>
|
|
||||||
</Authorized>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="panel-body">
|
|
||||||
<DashboardsTable
|
|
||||||
dashboards={filteredDashboards}
|
|
||||||
onDeleteDashboard={onDeleteDashboard}
|
|
||||||
onCreateDashboard={onCreateDashboard}
|
|
||||||
onCloneDashboard={onCloneDashboard}
|
|
||||||
onExportDashboard={onExportDashboard}
|
|
||||||
dashboardLink={dashboardLink}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</FancyScrollbar>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const {arrayOf, func, shape, string} = PropTypes
|
|
||||||
|
|
||||||
DashboardsPageContents.propTypes = {
|
|
||||||
dashboards: arrayOf(shape()),
|
|
||||||
onDeleteDashboard: func.isRequired,
|
|
||||||
onCreateDashboard: func.isRequired,
|
|
||||||
onCloneDashboard: func.isRequired,
|
|
||||||
onExportDashboard: func.isRequired,
|
|
||||||
dashboardLink: string.isRequired,
|
|
||||||
}
|
|
||||||
|
|
||||||
export default DashboardsPageContents
|
|
||||||
|
|
@ -0,0 +1,120 @@
|
||||||
|
import React, {Component} from 'react'
|
||||||
|
import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
|
||||||
|
|
||||||
|
import DashboardsTable from 'src/dashboards/components/DashboardsTable'
|
||||||
|
import SearchBar from 'src/hosts/components/SearchBar'
|
||||||
|
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
|
||||||
|
import {ErrorHandling} from 'src/shared/decorators/errors'
|
||||||
|
import {Dashboard} from 'src/types/dashboard'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
dashboards: Dashboard[]
|
||||||
|
onDeleteDashboard: () => void
|
||||||
|
onCreateDashboard: () => void
|
||||||
|
onCloneDashboard: () => void
|
||||||
|
onExportDashboard: () => void
|
||||||
|
dashboardLink: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface State {
|
||||||
|
searchTerm: string
|
||||||
|
}
|
||||||
|
|
||||||
|
@ErrorHandling
|
||||||
|
class DashboardsPageContents extends Component<Props, State> {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
searchTerm: '',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public render() {
|
||||||
|
const {
|
||||||
|
onDeleteDashboard,
|
||||||
|
onCreateDashboard,
|
||||||
|
onCloneDashboard,
|
||||||
|
onExportDashboard,
|
||||||
|
dashboardLink,
|
||||||
|
} = this.props
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FancyScrollbar className="page-contents">
|
||||||
|
<div className="container-fluid">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-md-12">
|
||||||
|
<div className="panel">
|
||||||
|
{this.renderPanelHeading}
|
||||||
|
<div className="panel-body">
|
||||||
|
<DashboardsTable
|
||||||
|
dashboards={this.filteredDashboards}
|
||||||
|
onDeleteDashboard={onDeleteDashboard}
|
||||||
|
onCreateDashboard={onCreateDashboard}
|
||||||
|
onCloneDashboard={onCloneDashboard}
|
||||||
|
onExportDashboard={onExportDashboard}
|
||||||
|
dashboardLink={dashboardLink}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</FancyScrollbar>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
private renderPanelHeading(): JSX.Element {
|
||||||
|
const {onCreateDashboard} = this.props
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="panel-heading">
|
||||||
|
<h2 className="panel-title">{this.panelTitle}</h2>
|
||||||
|
<div className="dashboards-page--actions">
|
||||||
|
<SearchBar
|
||||||
|
placeholder="Filter by Name..."
|
||||||
|
onSearch={this.filterDashboards}
|
||||||
|
/>
|
||||||
|
<button className="btn btn-sm btn-primary">
|
||||||
|
<span className="icon import" /> Import Dashboard
|
||||||
|
</button>
|
||||||
|
<Authorized requiredRole={EDITOR_ROLE}>
|
||||||
|
<button
|
||||||
|
className="btn btn-sm btn-primary"
|
||||||
|
onClick={onCreateDashboard}
|
||||||
|
>
|
||||||
|
<span className="icon plus" /> Create Dashboard
|
||||||
|
</button>
|
||||||
|
</Authorized>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
private get filteredDashboards(): Dashboard[] {
|
||||||
|
const {dashboards} = this.props
|
||||||
|
const {searchTerm} = this.state
|
||||||
|
|
||||||
|
return dashboards.filter(d =>
|
||||||
|
d.name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
private get panelTitle(): string {
|
||||||
|
const {dashboards} = this.props
|
||||||
|
|
||||||
|
if (dashboards === null) {
|
||||||
|
return 'Loading Dashboards...'
|
||||||
|
} else if (dashboards.length === 1) {
|
||||||
|
return '1 Dashboard'
|
||||||
|
}
|
||||||
|
|
||||||
|
return `${dashboards.length} Dashboards`
|
||||||
|
}
|
||||||
|
|
||||||
|
private filterDashboards = (searchTerm: string): void => {
|
||||||
|
this.setState({searchTerm})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DashboardsPageContents
|
||||||
Loading…
Reference in New Issue