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

Resource List sorts from state instead of redux state

pull/13508/head
Palak Bhojani 2019-04-18 16:49:01 -07:00
parent 732ec9b20a
commit eff0b3e21f
22 changed files with 485 additions and 1269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
ui/src/authorizations/components/TokenList.tsx
View File

@ -1,6 +1,5 @@
// Libraries
import React, {PureComponent} from 'react'
import {connect} from 'react-redux'
// Components
import {EmptyState} from '@influxdata/clockface'
@ -12,14 +11,13 @@ import ViewTokenOverlay from 'src/authorizations/components/ViewTokenOverlay'
import {Authorization} from '@influxdata/influx'
import {SortTypes} from 'src/shared/selectors/sort'
import {ComponentSize, Sort} from '@influxdata/clockface'
import {AppState} from 'src/types'
// Selectors
import {getSortedResource} from 'src/shared/selectors/sort'
import {getSortedResources} from 'src/shared/selectors/sort'
type SortKey = keyof Authorization
interface OwnProps {
interface Props {
auths: Authorization[]
searchTerm: string
sortKey: string
@ -28,37 +26,24 @@ interface OwnProps {
onClickColumn: (nextSort: Sort, sortKey: SortKey) => void
}
interface StateProps {
sortedAuths: Authorization[]
}
type Props = OwnProps & StateProps
interface State {
isTokenOverlayVisible: boolean
authInView: Authorization
sortedAuths: Authorization[]
}
class TokenList extends PureComponent<Props, State> {
export default class TokenList extends PureComponent<Props, State> {
public static getDerivedStateFromProps(props: Props) {
return {
sortedAuths: getSortedResources(props.auths, props),
}
}
constructor(props) {
super(props)
this.state = {
isTokenOverlayVisible: false,
authInView: null,
sortedAuths: this.props.sortedAuths,
}
}
componentDidUpdate(prevProps) {
const {auths, sortedAuths: sortedAuths, sortKey, sortDirection} = this.props
if (
prevProps.sortDirection !== sortDirection ||
prevProps.sortKey !== sortKey ||
prevProps.auths.length !== auths.length
) {
this.setState({sortedAuths: sortedAuths})
sortedAuths: this.props.auths,
}
}
@ -133,11 +118,3 @@ class TokenList extends PureComponent<Props, State> {
)
}
}
const mstp = (state: AppState, props: OwnProps): StateProps => {
return {
sortedAuths: getSortedResource(state.tokens.list, props),
}
}
export default connect<StateProps, {}, OwnProps>(mstp)(TokenList)

52
ui/src/buckets/components/BucketList.tsx
View File

@ -12,15 +12,19 @@ import {IndexList} from 'src/clockface'
import {setBucketInfo} from 'src/dataLoaders/actions/steps'
// Selectors
import {getSortedResource} from 'src/shared/selectors/sort'
import {getSortedResources} from 'src/shared/selectors/sort'
// Types
import {OverlayState} from 'src/types'
import {OverlayState, Bucket} from 'src/types'
import {DataLoaderType} from 'src/types/dataLoaders'
import {setDataLoadersType} from 'src/dataLoaders/actions/dataLoaders'
import {AppState} from 'src/types'
import {Sort} from '@influxdata/clockface'
import {SortTypes} from 'src/shared/selectors/sort'
import {BucketRetentionRules} from '@influxdata/influx'
// Utils
import {ruleToString} from 'src/utils/formatting'
type SortKey = keyof PrettyBucket
@ -43,7 +47,6 @@ interface DispatchProps {
interface StateProps {
dataLoaderType: DataLoaderType
sortedBuckets: PrettyBucket[]
}
type Props = OwnProps & StateProps & DispatchProps
@ -54,7 +57,33 @@ interface State {
sortedBuckets: PrettyBucket[]
}
const prettyBuckets = (buckets: Bucket[]): PrettyBucket[] => {
return buckets.map(b => {
const expire = b.retentionRules.find(
rule => rule.type === BucketRetentionRules.TypeEnum.Expire
)
if (!expire) {
return {
...b,
ruleString: 'forever',
}
}
return {
...b,
ruleString: ruleToString(expire.everySeconds),
}
})
}
class BucketList extends PureComponent<Props & WithRouterProps, State> {
public static getDerivedStateFromProps(props: Props) {
return {
sortedBuckets: getSortedResources(prettyBuckets(props.buckets), props),
}
}
constructor(props) {
super(props)
const bucketID = get(this, 'props.buckets.0.id', null)
@ -62,19 +91,7 @@ class BucketList extends PureComponent<Props & WithRouterProps, State> {
this.state = {
bucketID,
bucketOverlayState: OverlayState.Closed,
sortedBuckets: this.props.sortedBuckets,
}
}
componentDidUpdate(prevProps) {
const {buckets, sortedBuckets, sortKey, sortDirection} = this.props
if (
prevProps.sortDirection !== sortDirection ||
prevProps.sortKey !== sortKey ||
prevProps.buckets.length !== buckets.length
) {
this.setState({sortedBuckets})
sortedBuckets: prettyBuckets(this.props.buckets),
}
}
@ -163,10 +180,9 @@ class BucketList extends PureComponent<Props & WithRouterProps, State> {
}
}
const mstp = (state: AppState, props: OwnProps): StateProps => {
const mstp = (state: AppState): StateProps => {
return {
dataLoaderType: state.dataLoading.dataLoaders.type,
sortedBuckets: getSortedResource(props.buckets, props),
}
}

1
ui/src/buckets/components/BucketRow.tsx
View File

@ -38,6 +38,7 @@ interface Props {
class BucketRow extends PureComponent<Props & WithRouterProps> {
public render() {
const {bucket, onDeleteBucket} = this.props
return (
<>
<IndexList.Row>

43
ui/src/dashboards/components/dashboard_index/DashboardCards.tsx
View File

@ -1,18 +1,17 @@
// Libraries
import React, {PureComponent} from 'react'
import {connect} from 'react-redux'
// Components
import DashboardCard from 'src/dashboards/components/dashboard_index/DashboardCard'
// Selectors
import {getSortedResource} from 'src/shared/selectors/sort'
import {getSortedResources} from 'src/shared/selectors/sort'
// Types
import {Dashboard, AppState} from 'src/types'
import {Dashboard} from 'src/types'
import {Sort} from 'src/clockface'
interface OwnProps {
interface Props {
dashboards: Dashboard[]
sortKey: string
sortDirection: Sort
@ -23,33 +22,20 @@ interface OwnProps {
onFilterChange: (searchTerm: string) => void
}
interface StateProps {
sortedDashboards: Dashboard[]
}
export enum SortTypes {
String = 'string',
Date = 'date',
}
type Props = OwnProps & StateProps
class DashboardCards extends PureComponent<Props> {
public state = {
sortedDashboards: this.props.sortedDashboards,
}
componentDidUpdate(prevProps) {
const {sortDirection, sortKey, sortedDashboards, dashboards} = this.props
if (
prevProps.sortDirection !== sortDirection ||
prevProps.sortKey !== sortKey ||
prevProps.dashboards.length !== dashboards.length
) {
this.setState({sortedDashboards})
export default class DashboardCards extends PureComponent<Props> {
public static getDerivedStateFromProps(props: Props) {
return {
sortedDashboards: getSortedResources(props.dashboards, props),
}
}
public state = {
sortedDashboards: this.props.dashboards,
}
public render() {
const {
@ -58,7 +44,6 @@ class DashboardCards extends PureComponent<Props> {
onUpdateDashboard,
onFilterChange,
} = this.props
const {sortedDashboards} = this.state
return sortedDashboards.map(dashboard => (
@ -73,11 +58,3 @@ class DashboardCards extends PureComponent<Props> {
))
}
}
const mstp = (state: AppState, props: OwnProps) => {
return {
sortedDashboards: getSortedResource(state.dashboards.list, props),
}
}
export default connect<StateProps, {}, OwnProps>(mstp)(DashboardCards)

41
ui/src/labels/components/LabelList.tsx
View File

@ -1,6 +1,5 @@
// Libraries
import React, {PureComponent} from 'react'
import {connect} from 'react-redux'
// Components
import {IndexList, Overlay} from 'src/clockface'
@ -15,17 +14,16 @@ import {ILabel} from '@influxdata/influx'
import {OverlayState} from 'src/types'
import {Sort} from '@influxdata/clockface'
import {SortTypes} from 'src/shared/selectors/sort'
import {AppState} from 'src/types'
// Decorators
import {ErrorHandling} from 'src/shared/decorators/errors'
// Selectors
import {getSortedResource} from 'src/shared/selectors/sort'
import {getSortedResources} from 'src/shared/selectors/sort'
type SortKey = keyof ILabel
interface OwnProps {
interface Props {
labels: ILabel[]
emptyState: JSX.Element
onUpdateLabel: (label: ILabel) => void
@ -36,12 +34,6 @@ interface OwnProps {
onClickColumn: (mextSort: Sort, sortKey: SortKey) => void
}
interface StateProps {
sortedLabels: ILabel[]
}
type Props = OwnProps & StateProps
interface State {
labelID: string
overlayState: OverlayState
@ -49,23 +41,16 @@ interface State {
}
@ErrorHandling
class LabelList extends PureComponent<Props, State> {
export default class LabelList extends PureComponent<Props, State> {
public static getDerivedStateFromProps(props: Props) {
return {
sortedLabels: getSortedResources(props.labels, props),
}
}
public state: State = {
labelID: null,
overlayState: OverlayState.Closed,
sortedLabels: this.props.sortedLabels,
}
componentDidUpdate(prevProps) {
const {labels, sortedLabels, sortKey, sortDirection} = this.props
if (
prevProps.sortDirection !== sortDirection ||
prevProps.sortKey !== sortKey ||
prevProps.labels.length !== labels.length
) {
this.setState({sortedLabels})
}
sortedLabels: this.props.labels,
}
public render() {
@ -150,11 +135,3 @@ class LabelList extends PureComponent<Props, State> {
return validateLabelUniqueness(names, name)
}
}
const mstp = (state: AppState, props: OwnProps): StateProps => {
return {
sortedLabels: getSortedResource(state.labels.list, props),
}
}
export default connect<StateProps, {}, OwnProps>(mstp)(LabelList)

40
ui/src/members/components/MemberList.tsx
View File

@ -1,6 +1,5 @@
// Libraries
import React, {PureComponent} from 'react'
import {connect} from 'react-redux'
// Components
import {IndexList} from 'src/clockface'
@ -9,15 +8,14 @@ import MemberRow from 'src/members/components/MemberRow'
// Types
import {Member} from 'src/types'
import {SortTypes} from 'src/shared/selectors/sort'
import {AppState} from 'src/types'
import {Sort} from '@influxdata/clockface'
// Selectors
import {getSortedResource} from 'src/shared/selectors/sort'
import {getSortedResources} from 'src/shared/selectors/sort'
type SortKey = keyof Member
interface OwnProps {
interface Props {
members: Member[]
emptyState: JSX.Element
onDelete: (member: Member) => void
@ -27,27 +25,15 @@ interface OwnProps {
onClickColumn: (nextSort: Sort, sortKey: SortKey) => void
}
interface StateProps {
sortedMembers: Member[]
}
type Props = OwnProps & StateProps
class MemberList extends PureComponent<Props> {
public state = {
sortedMembers: this.props.sortedMembers,
export default class MemberList extends PureComponent<Props> {
public static getDerivedStateFromProps(props: Props) {
return {
sortedMembers: getSortedResources(props.members, props),
}
}
componentDidUpdate(prevProps) {
const {members, sortedMembers, sortKey, sortDirection} = this.props
if (
prevProps.sortDirection !== sortDirection ||
prevProps.sortKey !== sortKey ||
prevProps.members.length !== members.length
) {
this.setState({sortedMembers})
}
public state = {
sortedMembers: this.props.members,
}
public render() {
@ -96,11 +82,3 @@ class MemberList extends PureComponent<Props> {
))
}
}
const mstp = (state: AppState, props: OwnProps): StateProps => {
return {
sortedMembers: getSortedResource(state.members.list, props),
}
}
export default connect<StateProps, {}, OwnProps>(mstp)(MemberList)

5
ui/src/members/components/Members.test.tsx
View File

@ -1,6 +1,6 @@
// Libraries
import React from 'react'
import {renderWithRedux} from 'src/mockState'
import {shallow} from 'enzyme'
// Components
import MemberList from 'src/members/components/MemberList'
@ -15,7 +15,7 @@ const setup = (override?) => {
...override,
}
const wrapper = renderWithRedux(<MemberList {...props} />)
const wrapper = shallow(<MemberList {...props} />)
return {wrapper}
}
@ -24,6 +24,7 @@ describe('MemberList', () => {
describe('rendering', () => {
it('renders', () => {
const {wrapper} = setup()
expect(wrapper.exists()).toBe(true)
expect(wrapper).toMatchSnapshot()
})
})

246
ui/src/members/components/__snapshots__/Members.test.tsx.snap
View File

@ -1,179 +1,75 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`MemberList rendering renders 1`] = `
Object {
"asFragment": [Function],
"baseElement": <body>
<div>
<table
class="index-list"
>
<thead
class="index-list--header"
>
<tr>
<th
class="index-list--header-cell index-list--align-left index-list--sortable"
style="width: 20%;"
>
Username
<span
class="index-list--sort-arrow"
>
<span
class="icon caret-down"
/>
</span>
</th>
<th
class="index-list--header-cell index-list--align-left index-list--sortable"
style="width: 20%;"
>
Role
<span
class="index-list--sort-arrow"
>
<span
class="icon caret-down"
/>
</span>
</th>
<th
class="index-list--header-cell index-list--align-left"
style="width: 60%;"
>
</th>
</tr>
</thead>
<tbody
class="index-list--empty"
>
<tr
class="index-list--empty-row"
>
<td
colspan="3"
>
<div
class="index-list--empty-cell"
data-testid="empty-state"
/>
</td>
</tr>
</tbody>
</table>
</div>
</body>,
"container": <div>
<table
class="index-list"
>
<thead
class="index-list--header"
>
<tr>
<th
class="index-list--header-cell index-list--align-left index-list--sortable"
style="width: 20%;"
>
Username
<span
class="index-list--sort-arrow"
>
<span
class="icon caret-down"
/>
</span>
</th>
<th
class="index-list--header-cell index-list--align-left index-list--sortable"
style="width: 20%;"
>
Role
<span
class="index-list--sort-arrow"
>
<span
class="icon caret-down"
/>
</span>
</th>
<th
class="index-list--header-cell index-list--align-left"
style="width: 60%;"
>
</th>
</tr>
</thead>
<tbody
class="index-list--empty"
>
<tr
class="index-list--empty-row"
>
<td
colspan="3"
>
<div
class="index-list--empty-cell"
data-testid="empty-state"
/>
</td>
</tr>
</tbody>
</table>
</div>,
"debug": [Function],
"getAllByAltText": [Function],
"getAllByDisplayValue": [Function],
"getAllByLabelText": [Function],
"getAllByPlaceholderText": [Function],
"getAllByRole": [Function],
"getAllBySelectText": [Function],
"getAllByTestId": [Function],
"getAllByText": [Function],
"getAllByTitle": [Function],
"getAllByValue": [Function],
"getByAltText": [Function],
"getByDisplayValue": [Function],
"getByLabelText": [Function],
"getByPlaceholderText": [Function],
"getByRole": [Function],
"getBySelectText": [Function],
"getByTestId": [Function],
"getByText": [Function],
"getByTitle": [Function],
"getByValue": [Function],
"queryAllByAltText": [Function],
"queryAllByDisplayValue": [Function],
"queryAllByLabelText": [Function],
"queryAllByPlaceholderText": [Function],
"queryAllByRole": [Function],
"queryAllBySelectText": [Function],
"queryAllByTestId": [Function],
"queryAllByText": [Function],
"queryAllByTitle": [Function],
"queryAllByValue": [Function],
"queryByAltText": [Function],
"queryByDisplayValue": [Function],
"queryByLabelText": [Function],
"queryByPlaceholderText": [Function],
"queryByRole": [Function],
"queryBySelectText": [Function],
"queryByTestId": [Function],
"queryByText": [Function],
"queryByTitle": [Function],
"queryByValue": [Function],
"rerender": [Function],
"store": Object {
"dispatch": [Function],
"getState": [Function],
"replaceReducer": [Function],
"subscribe": [Function],
Symbol(observable): [Function],
},
"unmount": [Function],
}
<IndexList>
<IndexListHeader>
<IndexListHeaderCell
alignment="left"
columnName="Username"
sort="none"
sortKey="name"
width="20%"
/>
<IndexListHeaderCell
alignment="left"
columnName="Role"
sort="none"
sortKey="role"
width="20%"
/>
<IndexListHeaderCell
alignment="left"
columnName=""
width="60%"
/>
</IndexListHeader>
<IndexListBody
columnCount={3}
data-testid="members-list"
emptyState={<React.Fragment />}
>
<MemberRow
key="1"
member={
Object {
"id": "1",
"links": Object {
"self": "/api/v2/users/1",
},
"name": "John",
"role": "owner",
"status": "active",
}
}
/>
<MemberRow
key="2"
member={
Object {
"id": "2",
"links": Object {
"self": "/api/v2/users/2",
},
"name": "Jane",
"role": "owner",
"status": "active",
}
}
/>
<MemberRow
key="3"
member={
Object {
"id": "3",
"links": Object {
"self": "/api/v2/users/3",
},
"name": "Smith",
"role": "owner",
"status": "active",
}
}
/>
</IndexListBody>
</IndexList>
`;

40
ui/src/scrapers/components/ScraperList.tsx
View File

@ -1,6 +1,5 @@
// Libraries
import React, {PureComponent} from 'react'
import {connect} from 'react-redux'
// Components
import {IndexList} from 'src/clockface'
@ -8,16 +7,15 @@ import ScraperRow from 'src/scrapers/components/ScraperRow'
// Types
import {ScraperTargetResponse} from '@influxdata/influx'
import {AppState} from 'src/types'
import {SortTypes} from 'src/shared/selectors/sort'
import {Sort} from '@influxdata/clockface'
// Selectors
import {getSortedResource} from 'src/shared/selectors/sort'
import {getSortedResources} from 'src/shared/selectors/sort'
type SortKey = keyof ScraperTargetResponse
interface OwnProps {
interface Props {
scrapers: ScraperTargetResponse[]
emptyState: JSX.Element
onDeleteScraper: (scraper) => void
@ -28,27 +26,15 @@ interface OwnProps {
onClickColumn: (nextSort: Sort, sortKey: SortKey) => void
}
interface StateProps {
sortedScrapers: ScraperTargetResponse[]
}
type Props = OwnProps & StateProps
class ScraperList extends PureComponent<Props> {
public state = {
sortedScrapers: this.props.sortedScrapers,
export default class ScraperList extends PureComponent<Props> {
public static getDerivedStateFromProps(props: Props) {
return {
sortedScrapers: getSortedResources(props.scrapers, props),
}
}
componentDidUpdate(prevProps) {
const {scrapers, sortedScrapers, sortKey, sortDirection} = this.props
if (
prevProps.sortDirection !== sortDirection ||
prevProps.sortKey !== sortKey ||
prevProps.scrapers.length !== scrapers.length
) {
this.setState({sortedScrapers})
}
public state = {
sortedScrapers: this.props.scrapers,
}
public render() {
@ -104,11 +90,3 @@ class ScraperList extends PureComponent<Props> {
return
}
}
const mstp = (state: AppState, props: OwnProps): StateProps => {
return {
sortedScrapers: getSortedResource(state.scrapers.list, props),
}
}
export default connect<StateProps, {}, OwnProps>(mstp)(ScraperList)

5
ui/src/scrapers/components/Scrapers.test.tsx
View File

@ -1,6 +1,6 @@
// Libraries
import React from 'react'
import {renderWithRedux} from 'src/mockState'
import {shallow} from 'enzyme'
// Components
import ScraperList from 'src/scrapers/components/ScraperList'
@ -17,7 +17,7 @@ const setup = (override?) => {
...override,
}
const wrapper = renderWithRedux(<ScraperList {...props} />)
const wrapper = shallow(<ScraperList {...props} />)
return {wrapper}
}
@ -26,6 +26,7 @@ describe('ScraperList', () => {
describe('rendering', () => {
it('renders', () => {
const {wrapper} = setup()
expect(wrapper.exists()).toBe(true)
expect(wrapper).toMatchSnapshot()
})
})

254
ui/src/scrapers/components/__snapshots__/Scrapers.test.tsx.snap
View File

@ -1,191 +1,73 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ScraperList rendering renders 1`] = `
Object {
"asFragment": [Function],
"baseElement": <body>
<div>
<table
class="index-list"
>
<thead
class="index-list--header"
>
<tr>
<th
class="index-list--header-cell index-list--align-left index-list--sortable"
style="width: 50%;"
>
Name
<span
class="index-list--sort-arrow"
>
<span
class="icon caret-down"
/>
</span>
</th>
<th
class="index-list--header-cell index-list--align-left index-list--sortable"
style="width: 20%;"
>
Target URL
<span
class="index-list--sort-arrow"
>
<span
class="icon caret-down"
/>
</span>
</th>
<th
class="index-list--header-cell index-list--align-left"
style="width: 15%;"
>
Bucket
</th>
<th
class="index-list--header-cell index-list--align-left"
style="width: 15%;"
>
</th>
</tr>
</thead>
<tbody
class="index-list--empty"
>
<tr
class="index-list--empty-row"
>
<td
colspan="4"
>
<div
class="index-list--empty-cell"
data-testid="empty-state"
/>
</td>
</tr>
</tbody>
</table>
</div>
</body>,
"container": <div>
<table
class="index-list"
<Fragment>
<IndexList>
<IndexListHeader>
<IndexListHeaderCell
alignment="left"
columnName="Name"
sort="none"
sortKey="name"
width="50%"
/>
<IndexListHeaderCell
alignment="left"
columnName="Target URL"
sort="none"
sortKey="url"
width="20%"
/>
<IndexListHeaderCell
alignment="left"
columnName="Bucket"
width="15%"
/>
<IndexListHeaderCell
alignment="left"
columnName=""
width="15%"
/>
</IndexListHeader>
<IndexListBody
columnCount={4}
emptyState={<React.Fragment />}
>
<thead
class="index-list--header"
>
<tr>
<th
class="index-list--header-cell index-list--align-left index-list--sortable"
style="width: 50%;"
>
Name
<span
class="index-list--sort-arrow"
>
<span
class="icon caret-down"
/>
</span>
</th>
<th
class="index-list--header-cell index-list--align-left index-list--sortable"
style="width: 20%;"
>
Target URL
<span
class="index-list--sort-arrow"
>
<span
class="icon caret-down"
/>
</span>
</th>
<th
class="index-list--header-cell index-list--align-left"
style="width: 15%;"
>
Bucket
</th>
<th
class="index-list--header-cell index-list--align-left"
style="width: 15%;"
>
</th>
</tr>
</thead>
<tbody
class="index-list--empty"
>
<tr
class="index-list--empty-row"
>
<td
colspan="4"
>
<div
class="index-list--empty-cell"
data-testid="empty-state"
/>
</td>
</tr>
</tbody>
</table>
</div>,
"debug": [Function],
"getAllByAltText": [Function],
"getAllByDisplayValue": [Function],
"getAllByLabelText": [Function],
"getAllByPlaceholderText": [Function],
"getAllByRole": [Function],
"getAllBySelectText": [Function],
"getAllByTestId": [Function],
"getAllByText": [Function],
"getAllByTitle": [Function],
"getAllByValue": [Function],
"getByAltText": [Function],
"getByDisplayValue": [Function],
"getByLabelText": [Function],
"getByPlaceholderText": [Function],
"getByRole": [Function],
"getBySelectText": [Function],
"getByTestId": [Function],
"getByText": [Function],
"getByTitle": [Function],
"getByValue": [Function],
"queryAllByAltText": [Function],
"queryAllByDisplayValue": [Function],
"queryAllByLabelText": [Function],
"queryAllByPlaceholderText": [Function],
"queryAllByRole": [Function],
"queryAllBySelectText": [Function],
"queryAllByTestId": [Function],
"queryAllByText": [Function],
"queryAllByTitle": [Function],
"queryAllByValue": [Function],
"queryByAltText": [Function],
"queryByDisplayValue": [Function],
"queryByLabelText": [Function],
"queryByPlaceholderText": [Function],
"queryByRole": [Function],
"queryBySelectText": [Function],
"queryByTestId": [Function],
"queryByText": [Function],
"queryByTitle": [Function],
"queryByValue": [Function],
"rerender": [Function],
"store": Object {
"dispatch": [Function],
"getState": [Function],
"replaceReducer": [Function],
"subscribe": [Function],
Symbol(observable): [Function],
},
"unmount": [Function],
}
<ScraperRow
key="03636a0bfe351000"
onDeleteScraper={[MockFunction]}
onUpdateScraper={[MockFunction]}
scraper={
Object {
"bucket": "a",
"bucketID": "03636a0aabb51001",
"id": "03636a0bfe351000",
"name": "new target",
"orgID": "03636a0aabb51000",
"organization": "a",
"type": "prometheus",
"url": "http://localhost:9999/metrics",
}
}
/>
<ScraperRow
key="03636a0bfe351001"
onDeleteScraper={[MockFunction]}
onUpdateScraper={[MockFunction]}
scraper={
Object {
"bucket": "a",
"bucketID": "03636a0aabb51001",
"id": "03636a0bfe351001",
"name": "new target",
"orgID": "03636a0aabb51000",
"organization": "a",
"type": "prometheus",
"url": "http://localhost:9999/metrics",
}
}
/>
</IndexListBody>
</IndexList>
</Fragment>
`;

2
ui/src/shared/selectors/sort.ts
View File

@ -26,7 +26,7 @@ function orderByType(data, type) {
}
}
export const getSortedResource = createSelector(
export const getSortedResources = createSelector(
resourceList,
sortSelector,
(resourceList, sort) => {

5
ui/src/tasks/components/TasksList.test.tsx
View File

@ -1,6 +1,6 @@
// Libraries
import React from 'react'
import {renderWithRedux} from 'src/mockState'
import {shallow} from 'enzyme'
// Components
import TasksList from 'src/tasks/components/TasksList'
@ -23,7 +23,7 @@ const setup = (override?) => {
...override,
}
const wrapper = renderWithRedux(<TasksList {...props} />)
const wrapper = shallow(<TasksList {...props} />)
return {wrapper}
}
@ -41,6 +41,7 @@ describe('TasksList', () => {
describe('rendering', () => {
it('renders', () => {
const {wrapper} = setup()
expect(wrapper.exists()).toBe(true)
expect(wrapper).toMatchSnapshot()
})
})

41
ui/src/tasks/components/TasksList.tsx
View File

@ -1,6 +1,5 @@
// Libraries
import React, {PureComponent} from 'react'
import {connect} from 'react-redux'
import _ from 'lodash'
// Components
@ -11,7 +10,6 @@ import TaskCard from 'src/tasks/components/TaskCard'
import EmptyTasksList from 'src/tasks/components/EmptyTasksList'
import {ITask as Task} from '@influxdata/influx'
import {SortTypes} from 'src/shared/selectors/sort'
import {AppState} from 'src/types'
import {Sort} from '@influxdata/clockface'
import {
@ -21,9 +19,9 @@ import {
} from 'src/tasks/actions'
// Selectors
import {getSortedResource} from 'src/shared/selectors/sort'
import {getSortedResources} from 'src/shared/selectors/sort'
interface OwnProps {
interface Props {
tasks: Task[]
searchTerm: string
onActivate: (task: Task) => void
@ -45,12 +43,6 @@ interface OwnProps {
onClickColumn: (nextSort: Sort, sortKey: SortKey) => void
}
interface StateProps {
sortedTasks: Task[]
}
type Props = OwnProps & StateProps
type SortKey = keyof Task
interface State {
@ -59,24 +51,18 @@ interface State {
sortedTasks: Task[]
}
class TasksList extends PureComponent<Props, State> {
export default class TasksList extends PureComponent<Props, State> {
public static getDerivedStateFromProps(props: Props) {
return {
sortedTasks: getSortedResources(props.tasks, props),
}
}
constructor(props) {
super(props)
this.state = {
taskLabelsEdit: null,
isEditingTaskLabels: false,
sortedTasks: this.props.sortedTasks,
}
}
componentDidUpdate(prevProps) {
const {tasks, sortedTasks, sortKey, sortDirection} = this.props
if (
prevProps.sortDirection !== sortDirection ||
prevProps.sortKey !== sortKey ||
prevProps.tasks.length !== tasks.length
) {
this.setState({sortedTasks})
sortedTasks: this.props.tasks,
}
}
@ -150,6 +136,7 @@ class TasksList extends PureComponent<Props, State> {
onRunTask,
onFilterChange,
} = this.props
const {sortedTasks} = this.state
return sortedTasks.map(task => (
@ -167,11 +154,3 @@ class TasksList extends PureComponent<Props, State> {
))
}
}
const mstp = (state: AppState, props: OwnProps): StateProps => {
return {
sortedTasks: getSortedResource(state.tasks.list, props),
}
}
export default connect<StateProps, {}, OwnProps>(mstp)(TasksList)

334
ui/src/tasks/components/__snapshots__/TasksList.test.tsx.snap
View File

@ -1,243 +1,103 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`TasksList rendering renders 1`] = `
Object {
"asFragment": [Function],
"baseElement": <body>
<div>
<div
class="resource-list"
>
<div
class="resource-list--header"
>
<div
class="resource-list--filter"
/>
<div
class="resource-list--sorting"
>
<div
class="resource-list--sorter"
title="Sort Name in asc order"
>
Name
</div>
<div
class="resource-list--sorter"
title="Sort Active in asc order"
>
Active
</div>
<div
class="resource-list--sorter"
title="Sort Schedule in asc order"
>
Schedule
</div>
<div
class="resource-list--sorter"
title="Sort Last Completed in asc order"
>
Last Completed
</div>
</div>
</div>
<div
class="resource-list--body"
>
<div
class="empty-state empty-state--lg"
data-testid="empty-state"
>
<h4
class="empty-state--text"
data-testid="empty-state--text"
>
Looks
like
you
don't
have
any
<em>
Tasks
</em>
,
why
not
create
one?
</h4>
<div
class="dropdown dropdown-sm dropdown-primary dropdown-truncate dropdown--action"
style="width: 160px;"
>
<button
class="dropdown--button button button-stretch button-primary button-sm"
data-testid="dropdown-button"
title="Create Task"
type="button"
>
<span
class="dropdown--icon icon plus"
/>
<span
class="dropdown--selected"
>
Create Task
</span>
<span
class="dropdown--caret icon caret-down"
/>
</button>
</div>
</div>
</div>
</div>
</div>
</body>,
"container": <div>
<div
class="resource-list"
>
<div
class="resource-list--header"
>
<div
class="resource-list--filter"
<Fragment>
<ResourceList>
<ResourceListHeader>
<ResourceListSorter
name="Name"
sort="none"
sortKey="name"
/>
<ResourceListSorter
name="Active"
sort="none"
sortKey="status"
/>
<ResourceListSorter
name="Schedule"
sort="none"
sortKey="every"
/>
<ResourceListSorter
name="Last Completed"
sort="none"
sortKey="latestCompleted"
/>
</ResourceListHeader>
<ResourceListBody
emptyState={
<EmptyTasksLists
onCreate={[Function]}
onImportTask={[Function]}
searchTerm=""
/>
<div
class="resource-list--sorting"
>
<div
class="resource-list--sorter"
title="Sort Name in asc order"
>
Name
</div>
<div
class="resource-list--sorter"
title="Sort Active in asc order"
>
Active
</div>
<div
class="resource-list--sorter"
title="Sort Schedule in asc order"
>
Schedule
</div>
<div
class="resource-list--sorter"
title="Sort Last Completed in asc order"
>
Last Completed
</div>
</div>
</div>
<div
class="resource-list--body"
>
<div
class="empty-state empty-state--lg"
data-testid="empty-state"
>
<h4
class="empty-state--text"
data-testid="empty-state--text"
>
Looks
like
you
don't
have
any
<em>
Tasks
</em>
,
why
not
create
one?
</h4>
<div
class="dropdown dropdown-sm dropdown-primary dropdown-truncate dropdown--action"
style="width: 160px;"
>
<button
class="dropdown--button button button-stretch button-primary button-sm"
data-testid="dropdown-button"
title="Create Task"
type="button"
>
<span
class="dropdown--icon icon plus"
/>
<span
class="dropdown--selected"
>
Create Task
</span>
<span
class="dropdown--caret icon caret-down"
/>
</button>
</div>
</div>
</div>
</div>
</div>,
"debug": [Function],
"getAllByAltText": [Function],
"getAllByDisplayValue": [Function],
"getAllByLabelText": [Function],
"getAllByPlaceholderText": [Function],
"getAllByRole": [Function],
"getAllBySelectText": [Function],
"getAllByTestId": [Function],
"getAllByText": [Function],
"getAllByTitle": [Function],
"getAllByValue": [Function],
"getByAltText": [Function],
"getByDisplayValue": [Function],
"getByLabelText": [Function],
"getByPlaceholderText": [Function],
"getByRole": [Function],
"getBySelectText": [Function],
"getByTestId": [Function],
"getByText": [Function],
"getByTitle": [Function],
"getByValue": [Function],
"queryAllByAltText": [Function],
"queryAllByDisplayValue": [Function],
"queryAllByLabelText": [Function],
"queryAllByPlaceholderText": [Function],
"queryAllByRole": [Function],
"queryAllBySelectText": [Function],
"queryAllByTestId": [Function],
"queryAllByText": [Function],
"queryAllByTitle": [Function],
"queryAllByValue": [Function],
"queryByAltText": [Function],
"queryByDisplayValue": [Function],
"queryByLabelText": [Function],
"queryByPlaceholderText": [Function],
"queryByRole": [Function],
"queryBySelectText": [Function],
"queryByTestId": [Function],
"queryByText": [Function],
"queryByTitle": [Function],
"queryByValue": [Function],
"rerender": [Function],
"store": Object {
"dispatch": [Function],
"getState": [Function],
"replaceReducer": [Function],
"subscribe": [Function],
Symbol(observable): [Function],
},
"unmount": [Function],
}
>
<Connect(withRouter(TaskCard))
key="task-id--02ef9deff2141000"
onActivate={[Function]}
onDelete={[Function]}
onSelect={[Function]}
task={
Object {
"cron": "2 0 * * *",
"flux": "option task = {
name: \\"pasdlak\\",
cron: \\"2 0 * * *\\"
}
from(bucket: \\"inbucket\\")
|> range(start: -1h)",
"id": "02ef9deff2141000",
"labels": Array [],
"name": "pasdlak",
"org": "default",
"orgID": "02ee9e2a29d73000",
"status": "active",
}
}
/>
<Connect(withRouter(TaskCard))
key="task-id--02f12c50dba72000"
onActivate={[Function]}
onDelete={[Function]}
onSelect={[Function]}
task={
Object {
"every": "1m0s",
"flux": "option task = {
name: \\"somename\\",
every: 1m,
}
from(bucket: \\"inbucket\\")
|> range(start: -task.every)",
"id": "02f12c50dba72000",
"labels": Array [
Object {
"id": "0001",
"name": "Trogdor",
"properties": Object {
"color": "#44ffcc",
"description": "Burninating the countryside",
},
},
Object {
"id": "0002",
"name": "Strawberry",
"properties": Object {
"color": "#ff0054",
"description": "It is a great fruit",
},
},
],
"name": "somename",
"org": "default",
"orgID": "02ee9e2a29d73000",
"status": "active",
}
}
/>
</ResourceListBody>
</ResourceList>
</Fragment>
`;

41
ui/src/telegrafs/components/CollectorList.tsx
View File

@ -1,6 +1,5 @@
// Libraries
import React, {PureComponent} from 'react'
import {connect} from 'react-redux'
import _ from 'lodash'
// Components
@ -10,18 +9,14 @@ import CollectorRow from 'src/telegrafs/components/CollectorRow'
// Types
import {ITelegraf as Telegraf} from '@influxdata/influx'
import {Sort} from '@influxdata/clockface'
import {SortTypes} from 'src/shared/selectors/sort'
import {AppState} from 'src/types'
import {SortTypes, getSortedResources} from 'src/shared/selectors/sort'
//Utils
import {getDeep} from 'src/utils/wrappers'
// Selectors
import {getSortedResource} from 'src/shared/selectors/sort'
type SortKey = keyof Telegraf
interface OwnProps {
interface Props {
collectors: Telegraf[]
emptyState: JSX.Element
onDelete: (telegraf: Telegraf) => void
@ -34,27 +29,13 @@ interface OwnProps {
onClickColumn: (nextSort: Sort, sortKey: SortKey) => void
}
interface StateProps {
sortedCollectors: Telegraf[]
}
type Props = OwnProps & StateProps
class CollectorList extends PureComponent<Props> {
public state = {
sortedCollectors: this.props.sortedCollectors,
export default class CollectorList extends PureComponent<Props> {
public static getDerivedStateFromProps(props: Props) {
return {sortedCollectors: getSortedResources(props.collectors, props)}
}
componentDidUpdate(prevProps) {
const {collectors, sortedCollectors, sortKey, sortDirection} = this.props
if (
prevProps.sortDirection !== sortDirection ||
prevProps.sortKey !== sortKey ||
prevProps.collectors.length !== collectors.length
) {
this.setState({sortedCollectors})
}
public state = {
sortedCollectors: this.props.collectors,
}
public render() {
@ -111,11 +92,3 @@ class CollectorList extends PureComponent<Props> {
}
}
}
const mstp = (state: AppState, props: OwnProps): StateProps => {
return {
sortedCollectors: getSortedResource(state.telegrafs.list, props),
}
}
export default connect<StateProps, {}, OwnProps>(mstp)(CollectorList)

5
ui/src/telegrafs/components/Collectors.test.tsx
View File

@ -1,6 +1,6 @@
// Libraries
import React from 'react'
import {renderWithRedux} from 'src/mockState'
import {shallow} from 'enzyme'
// Components
import CollectorList from 'src/telegrafs/components/CollectorList'
@ -19,7 +19,7 @@ const setup = (override?) => {
...override,
}
const wrapper = renderWithRedux(<CollectorList {...props} />)
const wrapper = shallow(<CollectorList {...props} />)
return {wrapper}
}
@ -28,6 +28,7 @@ describe('CollectorList', () => {
describe('rendering', () => {
it('renders', () => {
const {wrapper} = setup()
expect(wrapper.exists()).toBe(true)
expect(wrapper).toMatchSnapshot()
})
})

215
ui/src/telegrafs/components/__snapshots__/Collectors.test.tsx.snap
View File

@ -1,165 +1,60 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`CollectorList rendering renders 1`] = `
Object {
"asFragment": [Function],
"baseElement": <body>
<div>
<table
class="index-list"
>
<thead
class="index-list--header"
>
<tr>
<th
class="index-list--header-cell index-list--align-left index-list--sortable"
style="width: 50%;"
>
Name
<span
class="index-list--sort-arrow"
>
<span
class="icon caret-down"
/>
</span>
</th>
<th
class="index-list--header-cell index-list--align-left"
style="width: 25%;"
>
Bucket
</th>
<th
class="index-list--header-cell index-list--align-left"
style="width: 25%;"
>
</th>
</tr>
</thead>
<tbody
class="index-list--empty"
>
<tr
class="index-list--empty-row"
>
<td
colspan="3"
>
<div
class="index-list--empty-cell"
data-testid="empty-state"
/>
</td>
</tr>
</tbody>
</table>
</div>
</body>,
"container": <div>
<table
class="index-list"
<Fragment>
<IndexList>
<IndexListHeader>
<IndexListHeaderCell
alignment="left"
columnName="Name"
sort="none"
sortKey="name"
width="50%"
/>
<IndexListHeaderCell
alignment="left"
columnName="Bucket"
width="25%"
/>
<IndexListHeaderCell
alignment="left"
columnName=""
width="25%"
/>
</IndexListHeader>
<IndexListBody
columnCount={3}
emptyState={<React.Fragment />}
>
<thead
class="index-list--header"
>
<tr>
<th
class="index-list--header-cell index-list--align-left index-list--sortable"
style="width: 50%;"
>
Name
<span
class="index-list--sort-arrow"
>
<span
class="icon caret-down"
/>
</span>
</th>
<th
class="index-list--header-cell index-list--align-left"
style="width: 25%;"
>
Bucket
</th>
<th
class="index-list--header-cell index-list--align-left"
style="width: 25%;"
>
</th>
</tr>
</thead>
<tbody
class="index-list--empty"
>
<tr
class="index-list--empty-row"
>
<td
colspan="3"
>
<div
class="index-list--empty-cell"
data-testid="empty-state"
/>
</td>
</tr>
</tbody>
</table>
</div>,
"debug": [Function],
"getAllByAltText": [Function],
"getAllByDisplayValue": [Function],
"getAllByLabelText": [Function],
"getAllByPlaceholderText": [Function],
"getAllByRole": [Function],
"getAllBySelectText": [Function],
"getAllByTestId": [Function],
"getAllByText": [Function],
"getAllByTitle": [Function],
"getAllByValue": [Function],
"getByAltText": [Function],
"getByDisplayValue": [Function],
"getByLabelText": [Function],
"getByPlaceholderText": [Function],
"getByRole": [Function],
"getBySelectText": [Function],
"getByTestId": [Function],
"getByText": [Function],
"getByTitle": [Function],
"getByValue": [Function],
"queryAllByAltText": [Function],
"queryAllByDisplayValue": [Function],
"queryAllByLabelText": [Function],
"queryAllByPlaceholderText": [Function],
"queryAllByRole": [Function],
"queryAllBySelectText": [Function],
"queryAllByTestId": [Function],
"queryAllByText": [Function],
"queryAllByTitle": [Function],
"queryAllByValue": [Function],
"queryByAltText": [Function],
"queryByDisplayValue": [Function],
"queryByLabelText": [Function],
"queryByPlaceholderText": [Function],
"queryByRole": [Function],
"queryBySelectText": [Function],
"queryByTestId": [Function],
"queryByText": [Function],
"queryByTitle": [Function],
"queryByValue": [Function],
"rerender": [Function],
"store": Object {
"dispatch": [Function],
"getState": [Function],
"replaceReducer": [Function],
"subscribe": [Function],
Symbol(observable): [Function],
},
"unmount": [Function],
}
<Connect(withRouter(CollectorRow))
bucket=""
collector={
Object {
"id": "03636a150fb51000",
"name": "Name this Configuration",
"organizationID": "03636a0aabb51000",
}
}
key="03636a150fb51000"
onDelete={[MockFunction]}
onOpenInstructions={[MockFunction]}
onUpdate={[MockFunction]}
/>
<Connect(withRouter(CollectorRow))
bucket=""
collector={
Object {
"id": "03636a150fb51001",
"name": "Name this Configuration",
"organizationID": "03636a0aabb51000",
}
}
key="03636a150fb51001"
onDelete={[MockFunction]}
onOpenInstructions={[MockFunction]}
onUpdate={[MockFunction]}
/>
</IndexListBody>
</IndexList>
</Fragment>
`;

41
ui/src/templates/components/TemplatesList.tsx
View File

@ -1,6 +1,5 @@
// Libraries
import React, {PureComponent} from 'react'
import {connect} from 'react-redux'
import _ from 'lodash'
// Components
@ -11,15 +10,14 @@ import TemplateCard from 'src/templates/components/TemplateCard'
// Types
import {TemplateSummary} from '@influxdata/influx'
import {SortTypes} from 'src/shared/selectors/sort'
import {AppState} from 'src/types'
import {Sort} from 'src/clockface'
// Selectors
import {getSortedResource} from 'src/shared/selectors/sort'
import {getSortedResources} from 'src/shared/selectors/sort'
type SortKey = 'meta.name'
interface OwnProps {
interface Props {
templates: TemplateSummary[]
searchTerm: string
onFilterChange: (searchTerm: string) => void
@ -30,28 +28,15 @@ interface OwnProps {
onClickColumn: (nextSort: Sort, sortKey: SortKey) => void
}
interface StateProps {
sortedTemplates: TemplateSummary[]
}
type Props = OwnProps & StateProps
class TemplatesList extends PureComponent<Props> {
public state = {
sortedTemplates: this.props.sortedTemplates,
}
componentDidUpdate(prevProps) {
const {templates, sortedTemplates, sortKey, sortDirection} = this.props
if (
prevProps.sortDirection !== sortDirection ||
prevProps.sortKey !== sortKey ||
prevProps.templates.length !== templates.length
) {
this.setState({sortedTemplates})
export default class TemplatesList extends PureComponent<Props> {
public static getDerivedStateFromProps(props: Props) {
return {
sortedTemplates: getSortedResources(props.templates, props),
}
}
public state = {
sortedTemplates: this.props.templates,
}
public render() {
const {
@ -100,11 +85,3 @@ class TemplatesList extends PureComponent<Props> {
))
}
}
const mstp = (state: AppState, props: OwnProps): StateProps => {
return {
sortedTemplates: getSortedResource(state.templates.items, props),
}
}
export default connect<StateProps, {}, OwnProps>(mstp)(TemplatesList)

43
ui/src/variables/components/VariableList.tsx
View File

@ -1,6 +1,5 @@
// Libraries
import React, {PureComponent} from 'react'
import {connect} from 'react-redux'
// Components
import {IndexList, Overlay} from 'src/clockface'
@ -11,16 +10,14 @@ import UpdateVariableOverlay from 'src/variables/components/UpdateVariableOverla
import {IVariable as Variable} from '@influxdata/influx'
import {OverlayState} from 'src/types'
import {SortTypes} from 'src/shared/selectors/sort'
import {AppState} from 'src/types'
import {Sort} from '@influxdata/clockface'
// Selectors
import {getSortedResource} from 'src/shared/selectors/sort'
import {extractVariablesList} from 'src/variables/selectors'
import {getSortedResources} from 'src/shared/selectors/sort'
type SortKey = keyof Variable
interface OwnProps {
interface Props {
variables: Variable[]
emptyState: JSX.Element
onDeleteVariable: (variable: Variable) => void
@ -32,38 +29,25 @@ interface OwnProps {
onClickColumn: (nextSort: Sort, sortKey: SortKey) => void
}
interface StateProps {
sortedVariables: Variable[]
}
type Props = OwnProps & StateProps
interface State {
variableID: string
variableOverlayState: OverlayState
sortedVariables: Variable[]
}
class VariableList extends PureComponent<Props, State> {
export default class VariableList extends PureComponent<Props, State> {
public static getDerivedStateFromProps(props: Props) {
return {
sortedVariables: getSortedResources(props.variables, props),
}
}
constructor(props) {
super(props)
this.state = {
variableID: null,
variableOverlayState: OverlayState.Closed,
sortedVariables: this.props.sortedVariables,
}
}
componentDidUpdate(prevProps) {
const {variables, sortedVariables, sortKey, sortDirection} = this.props
if (
prevProps.sortDirection !== sortDirection ||
prevProps.sortKey !== sortKey ||
prevProps.variables.length !== variables.length
) {
this.setState({sortedVariables})
sortedVariables: this.props.variables,
}
}
@ -148,12 +132,3 @@ class VariableList extends PureComponent<Props, State> {
this.props.onUpdateVariable(variable)
}
}
const mstp = (state: AppState, props: OwnProps): StateProps => {
const variables = extractVariablesList(state)
return {
sortedVariables: getSortedResource(variables, props),
}
}
export default connect<StateProps, {}, OwnProps>(mstp)(VariableList)

5
ui/src/variables/components/Variables.test.tsx
View File

@ -1,6 +1,6 @@
// Libraries
import React from 'react'
import {renderWithRedux} from 'src/mockState'
import {shallow} from 'enzyme'
// Components
import VariableList from 'src/variables/components/VariableList'
@ -16,7 +16,7 @@ const setup = (override?) => {
...override,
}
const wrapper = renderWithRedux(<VariableList {...props} />)
const wrapper = shallow(<VariableList {...props} />)
return {wrapper}
}
@ -25,6 +25,7 @@ describe('VariableList', () => {
describe('rendering', () => {
it('renders', () => {
const {wrapper} = setup()
expect(wrapper.exists()).toBe(true)
expect(wrapper).toMatchSnapshot()
})
})

254
ui/src/variables/components/__snapshots__/Variables.test.tsx.snap
View File

@ -1,197 +1,67 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`VariableList rendering renders 1`] = `
Object {
"asFragment": [Function],
"baseElement": <body>
<div>
<table
class="index-list"
>
<thead
class="index-list--header"
>
<tr>
<th
class="index-list--header-cell index-list--align-left index-list--sortable"
style="width: 60%;"
>
Name
<span
class="index-list--sort-arrow"
>
<span
class="icon caret-down"
/>
</span>
</th>
<th
class="index-list--header-cell index-list--align-left"
style="width: 40%;"
>
Type
</th>
</tr>
</thead>
<tbody
class="index-list--empty"
>
<tr
class="index-list--empty-row"
>
<td
colspan="3"
>
<div
class="index-list--empty-cell"
data-testid="empty-state"
/>
</td>
</tr>
</tbody>
</table>
<div
class="ScrollbarsCustom dapper-scrollbars overlay"
style="position: relative; width: 100%; height: 100%;"
>
<div
class="ScrollbarWrapper dapper-scrollbars--wrapper"
style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; overflow: hidden;"
>
<div
class="ScrollbarContent"
style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; overflow-y: hidden; overflow-x: hidden;"
>
<div
class="overlay--transition"
data-testid="overlay-children"
/>
<div
class="overlay--mask"
/>
</div>
</div>
</div>
</div>
</body>,
"container": <div>
<table
class="index-list"
<Fragment>
<IndexList>
<IndexListHeader>
<IndexListHeaderCell
alignment="left"
columnName="Name"
sort="none"
sortKey="name"
width="60%"
/>
<IndexListHeaderCell
alignment="left"
columnName="Type"
width="40%"
/>
</IndexListHeader>
<IndexListBody
columnCount={3}
emptyState={<React.Fragment />}
>
<thead
class="index-list--header"
>
<tr>
<th
class="index-list--header-cell index-list--align-left index-list--sortable"
style="width: 60%;"
>
Name
<span
class="index-list--sort-arrow"
>
<span
class="icon caret-down"
/>
</span>
</th>
<th
class="index-list--header-cell index-list--align-left"
style="width: 40%;"
>
Type
</th>
</tr>
</thead>
<tbody
class="index-list--empty"
>
<tr
class="index-list--empty-row"
>
<td
colspan="3"
>
<div
class="index-list--empty-cell"
data-testid="empty-state"
/>
</td>
</tr>
</tbody>
</table>
<div
class="ScrollbarsCustom dapper-scrollbars overlay"
style="position: relative; width: 100%; height: 100%;"
>
<div
class="ScrollbarWrapper dapper-scrollbars--wrapper"
style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; overflow: hidden;"
>
<div
class="ScrollbarContent"
style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; overflow-y: hidden; overflow-x: hidden;"
>
<div
class="overlay--transition"
data-testid="overlay-children"
/>
<div
class="overlay--mask"
/>
</div>
</div>
</div>
</div>,
"debug": [Function],
"getAllByAltText": [Function],
"getAllByDisplayValue": [Function],
"getAllByLabelText": [Function],
"getAllByPlaceholderText": [Function],
"getAllByRole": [Function],
"getAllBySelectText": [Function],
"getAllByTestId": [Function],
"getAllByText": [Function],
"getAllByTitle": [Function],
"getAllByValue": [Function],
"getByAltText": [Function],
"getByDisplayValue": [Function],
"getByLabelText": [Function],
"getByPlaceholderText": [Function],
"getByRole": [Function],
"getBySelectText": [Function],
"getByTestId": [Function],
"getByText": [Function],
"getByTitle": [Function],
"getByValue": [Function],
"queryAllByAltText": [Function],
"queryAllByDisplayValue": [Function],
"queryAllByLabelText": [Function],
"queryAllByPlaceholderText": [Function],
"queryAllByRole": [Function],
"queryAllBySelectText": [Function],
"queryAllByTestId": [Function],
"queryAllByText": [Function],
"queryAllByTitle": [Function],
"queryAllByValue": [Function],
"queryByAltText": [Function],
"queryByDisplayValue": [Function],
"queryByLabelText": [Function],
"queryByPlaceholderText": [Function],
"queryByRole": [Function],
"queryBySelectText": [Function],
"queryByTestId": [Function],
"queryByText": [Function],
"queryByTitle": [Function],
"queryByValue": [Function],
"rerender": [Function],
"store": Object {
"dispatch": [Function],
"getState": [Function],
"replaceReducer": [Function],
"subscribe": [Function],
Symbol(observable): [Function],
},
"unmount": [Function],
}
<Connect(withRouter(VariableRow))
onDeleteVariable={[MockFunction]}
onEditVariable={[Function]}
variable={
Object {
"arguments": Object {
"type": "query",
"values": Object {
"language": "flux",
"query": "1 + 1 ",
},
},
"name": "a little variable",
"orgID": "0",
}
}
/>
</IndexListBody>
</IndexList>
<Overlay
visible={false}
>
<UpdateVariableOverlay
onCloseOverlay={[Function]}
onUpdateVariable={[Function]}
variables={
Array [
Object {
"arguments": Object {
"type": "query",
"values": Object {
"language": "flux",
"query": "1 + 1 ",
},
},
"name": "a little variable",
"orgID": "0",
},
]
}
/>
</Overlay>
</Fragment>
`;