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

Misc. UI Polish (#12115) 

* Increase size of download button in config overlay

* Make button copy match overlay title

* Open overlay on name click instead of button

* Add missing blank header cell

* Fix highlighting of buckets tab

* Cleanup tasks header

* Fix org creation overlay

Also having fun with randomized error messages

* Fix empty state of variables page

* Remove unused functions

* Cleanup

* Update snapshot
pull/12144/head
alexpaxton 2019-02-22 16:48:08 -08:00 committed by GitHub
parent e1e1433386
commit 29a4ab0d27
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 130 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui/src/organizations/components/CollectorList.tsx
View File

@ -28,7 +28,8 @@ export default class CollectorList extends PureComponent<Props> {
<IndexList>
<IndexList.Header>
<IndexList.HeaderCell columnName="Name" width="50%" />
<IndexList.HeaderCell columnName="Bucket" width="50%" />
<IndexList.HeaderCell columnName="Bucket" width="25%" />
<IndexList.HeaderCell columnName="" width="25%" />
</IndexList.Header>
<IndexList.Body columnCount={3} emptyState={emptyState}>
{this.collectorsList}

9
ui/src/organizations/components/CollectorRow.tsx
View File

@ -47,6 +47,7 @@ export default class CollectorRow extends PureComponent<Props> {
onUpdate={this.handleUpdateName}
name={collector.name}
noNameString={DEFAULT_COLLECTOR_NAME}
onEditName={this.handleOpenConfig}
/>
<EditableDescription
description={collector.description}
@ -61,13 +62,7 @@ export default class CollectorRow extends PureComponent<Props> {
<Button
size={ComponentSize.ExtraSmall}
color={ComponentColor.Secondary}
text={'View'}
onClick={this.handleOpenConfig}
/>
<Button
size={ComponentSize.ExtraSmall}
color={ComponentColor.Secondary}
text={'Setup Details'}
text={'Setup Instructions'}
onClick={this.handleOpenInstructions}
/>
<ConfirmationButton

58
ui/src/organizations/components/CreateOrgOverlay.tsx
View File

@ -1,5 +1,6 @@
// Libraries
import React, {PureComponent, ChangeEvent} from 'react'
import _ from 'lodash'
// Components
import {
@ -13,6 +14,7 @@ import {
OverlayBody,
OverlayHeading,
OverlayContainer,
OverlayFooter,
Input,
} from 'src/clockface'
@ -47,13 +49,13 @@ export default class CreateOrgOverlay extends PureComponent<Props, State> {
const {org, nameInputStatus, errorMessage} = this.state
return (
<OverlayContainer>
<OverlayContainer maxWidth={500}>
<OverlayHeading
title="Create Organization"
onDismiss={this.props.onCloseModal}
/>
<OverlayBody>
<Form onSubmit={this.handleCreateOrg}>
<Form onSubmit={this.handleCreateOrg}>
<OverlayBody>
<Form.Element label="Name" errorMessage={errorMessage}>
<Input
placeholder="Give your organization a name"
@ -64,24 +66,31 @@ export default class CreateOrgOverlay extends PureComponent<Props, State> {
status={nameInputStatus}
/>
</Form.Element>
<Form.Footer>
<Button
text="Cancel"
color={ComponentColor.Danger}
onClick={onCloseModal}
/>
<Button
text="Create"
type={ButtonType.Submit}
color={ComponentColor.Primary}
/>
</Form.Footer>
</Form>
</OverlayBody>
</OverlayBody>
<OverlayFooter>
<Button text="Cancel" onClick={onCloseModal} />
<Button
text="Create"
type={ButtonType.Submit}
color={ComponentColor.Primary}
status={this.submitButtonStatus}
/>
</OverlayFooter>
</Form>
</OverlayContainer>
)
}
private get submitButtonStatus(): ComponentStatus {
const {org} = this.state
if (org.name) {
return ComponentStatus.Default
}
return ComponentStatus.Disabled
}
private handleCreateOrg = async () => {
const {org} = this.state
const {onCreateOrg, onCloseModal} = this.props
@ -98,7 +107,7 @@ export default class CreateOrgOverlay extends PureComponent<Props, State> {
return this.setState({
org,
nameInputStatus: ComponentStatus.Error,
errorMessage: `Organization ${key} cannot be empty`,
errorMessage: this.randomErrorMessage(key),
})
}
@ -108,4 +117,17 @@ export default class CreateOrgOverlay extends PureComponent<Props, State> {
errorMessage: '',
})
}
private randomErrorMessage = (key: string): string => {
const messages = [
`Imagine that! An organization without a ${key}`,
`An organization needs a ${key}`,
`You're not getting far without a ${key}`,
`The organization formerly known as...`,
`Pick a ${key}, any ${key}`,
`Any ${key} will do`,
]
return _.sample(messages)
}
}

84
ui/src/organizations/components/OrgTasksPage.tsx
View File

@ -1,15 +1,13 @@
// Libraries
import React, {PureComponent, ChangeEvent} from 'react'
import React, {PureComponent} from 'react'
import {connect} from 'react-redux'
import {InjectedRouter} from 'react-router'
import _ from 'lodash'
// Components
import {Input, IconFont} from 'src/clockface'
import FilterList from 'src/shared/components/Filter'
import TasksHeader from 'src/tasks/components/TasksHeader'
import TasksList from 'src/tasks/components/TasksList'
import {Page} from 'src/pageLayout'
import {ErrorHandling} from 'src/shared/decorators/errors'
import ImportOverlay from 'src/shared/components/ImportOverlay'
@ -95,47 +93,37 @@ class OrgTasksPage extends PureComponent<Props, State> {
return (
<>
<Page titleTag="Tasks">
<Input
icon={IconFont.Search}
placeholder="Filter tasks..."
widthPixels={290}
value={searchTerm}
onChange={this.handleFilterChange}
onBlur={this.handleFilterBlur}
/>
<TasksHeader
onCreateTask={this.handleCreateTask}
setSearchTerm={setSearchTerm}
setShowInactive={this.handleToggle}
showInactive={showInactive}
toggleOverlay={this.handleToggleImportOverlay}
showOrgDropdown={false}
showFilter={false}
/>
<FilterList<Task>
searchTerm={searchTerm}
searchKeys={['name', 'labels[].name']}
list={this.filteredTasks}
>
{ts => (
<TasksList
searchTerm={searchTerm}
tasks={ts}
totalCount={this.totalTaskCount}
onActivate={this.handleActivate}
onDelete={this.handleDelete}
onCreate={this.handleCreateTask}
onClone={this.handleClone}
onSelect={this.handleSelectTask}
onAddTaskLabels={onAddTaskLabels}
onRemoveTaskLabels={onRemoveTaskLabels}
onUpdate={this.handleUpdateTask}
onRunTask={onRunTask}
/>
)}
</FilterList>
</Page>
<TasksHeader
onCreateTask={this.handleCreateTask}
setSearchTerm={setSearchTerm}
setShowInactive={this.handleToggle}
showInactive={showInactive}
toggleOverlay={this.handleToggleImportOverlay}
showOrgDropdown={false}
isFullPage={false}
/>
<FilterList<Task>
searchTerm={searchTerm}
searchKeys={['name', 'labels[].name']}
list={this.filteredTasks}
>
{ts => (
<TasksList
searchTerm={searchTerm}
tasks={ts}
totalCount={this.totalTaskCount}
onActivate={this.handleActivate}
onDelete={this.handleDelete}
onCreate={this.handleCreateTask}
onClone={this.handleClone}
onSelect={this.handleSelectTask}
onAddTaskLabels={onAddTaskLabels}
onRemoveTaskLabels={onRemoveTaskLabels}
onUpdate={this.handleUpdateTask}
onRunTask={onRunTask}
/>
)}
</FilterList>
{this.importOverlay}
</>
)
@ -218,14 +206,6 @@ class OrgTasksPage extends PureComponent<Props, State> {
private handleValidateTask = (): boolean => {
return true
}
private handleFilterBlur = (e: ChangeEvent<HTMLInputElement>): void => {
this.props.setSearchTerm(e.target.value)
}
private handleFilterChange = (e: ChangeEvent<HTMLInputElement>): void => {
this.props.setSearchTerm(e.target.value)
}
}
const mstp = ({

3
ui/src/organizations/components/TelegrafConfigOverlay.tsx
View File

@ -9,7 +9,7 @@ import OverlayContainer from 'src/clockface/components/overlays/OverlayContainer
import OverlayTechnology from 'src/clockface/components/overlays/OverlayTechnology'
import OverlayHeading from 'src/clockface/components/overlays/OverlayHeading'
import TelegrafConfig from 'src/organizations/components/TelegrafConfig'
import {ComponentSize, ComponentColor, Button} from '@influxdata/clockface'
import {ComponentColor, Button} from '@influxdata/clockface'
import {OverlayFooter} from 'src/clockface'
// Utils
@ -66,7 +66,6 @@ export class TelegrafConfigOverlay extends PureComponent<Props> {
</OverlayBody>
<OverlayFooter>
<Button
size={ComponentSize.ExtraSmall}
color={ComponentColor.Secondary}
text={'Download Config'}
onClick={this.handleDownloadConfig}

7
ui/src/organizations/components/Variables.tsx
View File

@ -49,12 +49,13 @@ export default class Variables extends PureComponent<Props, State> {
if (_.isEmpty(searchTerm)) {
return (
<EmptyState size={ComponentSize.Medium}>
<EmptyState size={ComponentSize.Large}>
<EmptyState.Text
text={`${orgName} does not own any Variables , why not create one?`}
highlightWords={['Buckets']}
highlightWords={['Variables']}
/>
<Button
size={ComponentSize.Medium}
text="Create Variable"
icon={IconFont.Plus}
color={ComponentColor.Primary}
@ -65,7 +66,7 @@ export default class Variables extends PureComponent<Props, State> {
}
return (
<EmptyState size={ComponentSize.Medium}>
<EmptyState size={ComponentSize.Large}>
<EmptyState.Text text="No Variables match your query" />
</EmptyState>
)

7
ui/src/organizations/components/__snapshots__/Collectors.test.tsx.snap
View File

@ -12,7 +12,12 @@ exports[`CollectorList rendering renders 1`] = `
<IndexListHeaderCell
alignment="left"
columnName="Bucket"
width="50%"
width="25%"
/>
<IndexListHeaderCell
alignment="left"
columnName=""
width="25%"
/>
</IndexListHeader>
<IndexListBody

2
ui/src/organizations/containers/OrgBucketsIndex.tsx
View File

@ -60,7 +60,7 @@ class OrgBucketsIndex extends Component<Props> {
<Page.Contents fullWidth={false} scrollable={true}>
<div className="col-xs-12">
<Tabs>
<OrganizationNavigation tab={'bucket_tab'} orgID={org.id} />
<OrganizationNavigation tab={'buckets_tab'} orgID={org.id} />
<Tabs.TabContents>
<TabbedPageSection
id="org-view-tab--buckets"

64
ui/src/tasks/components/TasksHeader.tsx
View File

@ -4,6 +4,7 @@ import {Page} from 'src/pageLayout'
// Components
import {SlideToggle, ComponentSize} from '@influxdata/clockface'
import {Tabs, ComponentSpacer, Alignment, Stack} from 'src/clockface'
import SearchWidget from 'src/shared/components/search_widget/SearchWidget'
import TaskOrgDropdown from 'src/tasks/components/TasksOrgDropdown'
import AddResourceDropdown from 'src/shared/components/AddResourceDropdown'
@ -17,16 +18,16 @@ interface Props {
showInactive: boolean
toggleOverlay: () => void
showOrgDropdown?: boolean
showFilter?: boolean
isFullPage?: boolean
}
export default class TasksHeader extends PureComponent<Props> {
public static defaultProps: {
showOrgDropdown: boolean
showFilter: boolean
isFullPage: boolean
} = {
showOrgDropdown: true,
showFilter: true,
isFullPage: true,
}
public render() {
@ -35,29 +36,51 @@ export default class TasksHeader extends PureComponent<Props> {
setShowInactive,
showInactive,
toggleOverlay,
isFullPage,
} = this.props
if (isFullPage) {
return (
<Page.Header fullWidth={false}>
<Page.Header.Left>
<Page.Title title={this.pageTitle} />
</Page.Header.Left>
<Page.Header.Right>
<SlideToggle.Label text="Show Inactive" />
<SlideToggle
active={showInactive}
size={ComponentSize.ExtraSmall}
onChange={setShowInactive}
/>
{this.filterSearch}
{this.orgDropDown}
<AddResourceDropdown
onSelectNew={onCreateTask}
onSelectImport={toggleOverlay}
resourceName="Task"
/>
</Page.Header.Right>
</Page.Header>
)
}
return (
<Page.Header fullWidth={false}>
<Page.Header.Left>
<Page.Title title={this.pageTitle} />
</Page.Header.Left>
<Page.Header.Right>
<Tabs.TabContentsHeader>
{this.filterSearch}
<ComponentSpacer align={Alignment.Right} stackChildren={Stack.Columns}>
<SlideToggle.Label text="Show Inactive" />
<SlideToggle
active={showInactive}
size={ComponentSize.ExtraSmall}
onChange={setShowInactive}
/>
{this.filterSearch}
{this.orgDropDown}
<AddResourceDropdown
onSelectNew={onCreateTask}
onSelectImport={toggleOverlay}
resourceName="Task"
/>
</Page.Header.Right>
</Page.Header>
</ComponentSpacer>
</Tabs.TabContentsHeader>
)
}
@ -71,17 +94,14 @@ export default class TasksHeader extends PureComponent<Props> {
}
private get filterSearch(): JSX.Element {
const {setSearchTerm, showFilter} = this.props
const {setSearchTerm} = this.props
if (showFilter) {
return (
<SearchWidget
placeholderText="Filter tasks by name..."
onSearch={setSearchTerm}
/>
)
}
return <></>
return (
<SearchWidget
placeholderText="Filter tasks by name..."
onSearch={setSearchTerm}
/>
)
}
private get orgDropDown(): JSX.Element {