Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(ui): Use ResourceList component for Scrapers List #13888

Merged
merged 1 commit into from
May 13, 2019
Merged

chore(ui): Use ResourceList component for Scrapers List #13888

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
### UI Improvements
1. [#13835](https://github.com/influxdata/influxdb/pull/13835): Render checkboxes in query builder tag selection lists
1. [#13856](https://github.com/influxdata/influxdb/pull/13856): Fix jumbled card text in Telegraf configuration wizard
1. [#13888](https://github.com/influxdata/influxdb/pull/13888): Change scrapers in scrapers list to be resource cards

## v2.0.0-alpha.9 [2019-05-01]

Expand Down
16 changes: 8 additions & 8 deletions ui/cypress/e2e/scrapers.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,12 @@ describe('Scrapers', () => {
})
})

describe('from the org view', () => {
describe('from the org settings', () => {
it('can create a scraper from the create button in the page header', () => {
const newScraper = '🐍craper'
const newURL = 'http://google.com'

cy.getByTestID('table-row').should('have.length', 0)
cy.getByTestID('resource-card').should('have.length', 0)

cy.getByTestID('create-scraper-button-header').click()
cy.getByTestID('overlay--container').within(() => {
Expand All @@ -36,14 +36,14 @@ describe('Scrapers', () => {
cy.getByTestID('create-scraper--submit').click()
})

cy.getByTestID('table-row').should('have.length', 1)
cy.getByTestID('resource-card').should('have.length', 1)
})

it('can create a scraper from the create button in the empty state', () => {
const newScraper = '🐍craper'
const newURL = 'http://google.com'

cy.getByTestID('table-row').should('have.length', 0)
cy.getByTestID('resource-card').should('have.length', 0)

cy.getByTestID('create-scraper-button-empty').click()
cy.getByTestID('overlay--container').within(() => {
Expand All @@ -56,7 +56,7 @@ describe('Scrapers', () => {
cy.getByTestID('create-scraper--submit').click()
})

cy.getByTestID('table-row').should('have.length', 1)
cy.getByTestID('resource-card').should('have.length', 1)
})

it('can update scrapers name', () => {
Expand All @@ -73,7 +73,7 @@ describe('Scrapers', () => {
})
})

cy.getByTestID('table-cell').within(() => {
cy.getByTestID('resource-card').within(() => {
cy.getByTestID('editable-name').click()
cy.getByTestID('input-field').type(`${newScraperName}{enter}`)
})
Expand All @@ -92,13 +92,13 @@ describe('Scrapers', () => {
})
})

cy.getByTestID('table-row').should('have.length', 2)
cy.getByTestID('resource-card').should('have.length', 2)

cy.getByTestID('confirmation-button')
.last()
.click({force: true})

cy.getByTestID('table-row').should('have.length', 1)
cy.getByTestID('resource-card').should('have.length', 1)
})
})
})
34 changes: 18 additions & 16 deletions ui/src/scrapers/components/ScraperList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React, {PureComponent} from 'react'
import memoizeOne from 'memoize-one'

// Components
import {IndexList} from 'src/clockface'
import {ResourceList} from 'src/clockface'
import ScraperRow from 'src/scrapers/components/ScraperRow'

// Types
Expand Down Expand Up @@ -37,35 +37,37 @@ export default class ScraperList extends PureComponent<Props> {

return (
<>
<IndexList>
<IndexList.Header>
<IndexList.HeaderCell
<ResourceList>
<ResourceList.Header>
<ResourceList.Sorter
name={this.headerKeys[0]}
sortKey={this.headerKeys[0]}
sort={sortKey === this.headerKeys[0] ? sortDirection : Sort.None}
columnName="Name"
width="50%"
onClick={onClickColumn}
/>
<IndexList.HeaderCell
<ResourceList.Sorter
name={this.headerKeys[1]}
sortKey={this.headerKeys[1]}
sort={sortKey === this.headerKeys[1] ? sortDirection : Sort.None}
columnName="Target URL"
width="20%"
onClick={onClickColumn}
/>
<IndexList.HeaderCell columnName="Bucket" width="15%" />
<IndexList.HeaderCell columnName="" width="15%" />
</IndexList.Header>
<IndexList.Body columnCount={4} emptyState={emptyState}>
<ResourceList.Sorter
name={this.headerKeys[2]}
sortKey={this.headerKeys[2]}
sort={sortKey === this.headerKeys[2] ? sortDirection : Sort.None}
onClick={onClickColumn}
/>
</ResourceList.Header>
<ResourceList.Body emptyState={emptyState}>
{this.scrapersList}
</IndexList.Body>
</IndexList>
</ResourceList.Body>
</ResourceList>
</>
)
}

private get headerKeys(): SortKey[] {
return ['name', 'url']
return ['name', 'url', 'bucket']
}

public get scrapersList(): JSX.Element[] {
Expand Down
58 changes: 34 additions & 24 deletions ui/src/scrapers/components/ScraperRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,12 @@
import React, {PureComponent} from 'react'

// Components
import {
ComponentSize,
IndexList,
ConfirmationButton,
Alignment,
} from 'src/clockface'
import {ResourceList, Context} from 'src/clockface'
import {ScraperTargetResponse} from '@influxdata/influx'
import EditableName from 'src/shared/components/EditableName'

// Constants
import {DEFAULT_SCRAPER_NAME} from 'src/dashboards/constants'
import {IconFont, ComponentColor} from '@influxdata/clockface'

interface Props {
scraper: ScraperTargetResponse
Expand All @@ -22,33 +17,48 @@ interface Props {

export default class ScraperRow extends PureComponent<Props> {
public render() {
const {scraper, onDeleteScraper} = this.props
const {scraper} = this.props
return (
<>
<IndexList.Row>
<IndexList.Cell>
<EditableName
<ResourceList.Card
name={() => (
<ResourceList.EditableName
onUpdate={this.handleUpdateScraperName}
name={scraper.name}
noNameString={DEFAULT_SCRAPER_NAME}
buttonTestID="editable-name"
inputTestID="input-field"
/>
</IndexList.Cell>
<IndexList.Cell>{scraper.url}</IndexList.Cell>
<IndexList.Cell>{scraper.bucket}</IndexList.Cell>
<IndexList.Cell revealOnHover={true} alignment={Alignment.Right}>
<ConfirmationButton
size={ComponentSize.ExtraSmall}
text="Delete"
confirmText="Confirm"
returnValue={scraper}
onConfirm={onDeleteScraper}
/>
</IndexList.Cell>
</IndexList.Row>
)}
metaData={() => [
<>Bucket: {scraper.bucket}</>,
<>URL: {scraper.url}</>,
]}
contextMenu={() => this.contextMenu}
/>
</>
)
}

private get contextMenu(): JSX.Element {
return (
<Context>
<Context.Menu icon={IconFont.Trash} color={ComponentColor.Danger}>
<Context.Item
label="Delete"
action={this.handleDeleteScraper}
testID="confirmation-button"
/>
</Context.Menu>
</Context>
)
}

private handleDeleteScraper = () => {
const {onDeleteScraper, scraper} = this.props
onDeleteScraper(scraper)
}

private handleUpdateScraperName = async (name: string) => {
const {onUpdateScraper, scraper} = this.props
await onUpdateScraper({...scraper, name})
Expand Down
38 changes: 14 additions & 24 deletions ui/src/scrapers/components/__snapshots__/Scrapers.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,25 @@

exports[`ScraperList rendering renders 1`] = `
<Fragment>
<IndexList>
<IndexListHeader>
<IndexListHeaderCell
alignment="left"
columnName="Name"
<ResourceList>
<ResourceListHeader>
<ResourceListSorter
name="name"
sort="none"
sortKey="name"
width="50%"
/>
<IndexListHeaderCell
alignment="left"
columnName="Target URL"
<ResourceListSorter
name="url"
sort="none"
sortKey="url"
width="20%"
/>
<IndexListHeaderCell
alignment="left"
columnName="Bucket"
width="15%"
/>
<IndexListHeaderCell
alignment="left"
columnName=""
width="15%"
<ResourceListSorter
name="bucket"
sort="none"
sortKey="bucket"
/>
</IndexListHeader>
<IndexListBody
columnCount={4}
</ResourceListHeader>
<ResourceListBody
emptyState={<React.Fragment />}
>
<ScraperRow
Expand Down Expand Up @@ -67,7 +57,7 @@ exports[`ScraperList rendering renders 1`] = `
}
}
/>
</IndexListBody>
</IndexList>
</ResourceListBody>
</ResourceList>
</Fragment>
`;