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

Move TimeMachine activeTab state to Redux

pull/10616/head
Christopher Henn 2018-11-16 16:44:10 -08:00 committed by Chris Henn
parent 7e3f968484
commit 43199e4468
10 changed files with 161 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
ui/src/dashboards/components/VEO.tsx
View File

@ -20,7 +20,6 @@ import {VEO_TIME_MACHINE_ID} from 'src/shared/constants/timeMachine'
// Types
import {Source, AppState} from 'src/types/v2'
import {NewView, View} from 'src/types/v2/dashboards'
import {TimeMachineTab} from 'src/types/v2/timeMachine'
interface StateProps {
draftView: NewView
@ -41,19 +40,7 @@ interface OwnProps {
type Props = OwnProps & StateProps & DispatchProps
interface State {
activeTab: TimeMachineTab
}
class VEO extends PureComponent<Props, State> {
constructor(props) {
super(props)
this.state = {
activeTab: TimeMachineTab.Queries,
}
}
class VEO extends PureComponent<Props, {}> {
public componentDidMount() {
const {onSetActiveTimeMachine, view} = this.props
const draftScript: string = get(view, 'properties.queries.0.text', '')
@ -63,7 +50,6 @@ class VEO extends PureComponent<Props, State> {
public render() {
const {draftView, onSetName, onHide} = this.props
const {activeTab} = this.state
return (
<div className="veo">
@ -71,20 +57,14 @@ class VEO extends PureComponent<Props, State> {
key={draftView.name}
name={draftView.name}
onSetName={onSetName}
activeTab={activeTab}
onSetActiveTab={this.handleSetActiveTab}
onCancel={onHide}
onSave={this.handleSave}
/>
<TimeMachine activeTab={activeTab} />
<TimeMachine />
</div>
)
}
private handleSetActiveTab = (activeTab: TimeMachineTab): void => {
this.setState({activeTab})
}
private handleSave = (): void => {
const {view, draftView, draftScript, onSave} = this.props

19
ui/src/dashboards/components/VEOHeader.tsx
View File

@ -13,28 +13,16 @@ import {
} from 'src/clockface'
import {Page} from 'src/pageLayout'
// Types
import {TimeMachineTab} from 'src/types/v2/timeMachine'
interface Props {
name: string
onSetName: (name: string) => void
activeTab: TimeMachineTab
onSetActiveTab: (activeTab: TimeMachineTab) => void
onCancel: () => void
onSave: () => void
}
class VEOHeader extends PureComponent<Props> {
public render() {
const {
name,
onSetName,
activeTab,
onSetActiveTab,
onCancel,
onSave,
} = this.props
const {name, onSetName, onCancel, onSave} = this.props
return (
<div className="veo-header">
@ -43,10 +31,7 @@ class VEOHeader extends PureComponent<Props> {
<VEOHeaderName name={name} onRename={onSetName} />
</Page.Header.Left>
<Page.Header.Center>
<TimeMachineTabs
activeTab={activeTab}
onSetActiveTab={onSetActiveTab}
/>
<TimeMachineTabs />
</Page.Header.Center>
<Page.Header.Right>
<Button

25
ui/src/dataExplorer/components/DataExplorer.tsx
View File

@ -1,5 +1,5 @@
// Libraries
import React, {PureComponent, ComponentClass} from 'react'
import React, {PureComponent} from 'react'
import {connect} from 'react-redux'
// Components
@ -10,38 +10,25 @@ import {setActiveTimeMachine} from 'src/shared/actions/v2/timeMachines'
// Utils
import {DE_TIME_MACHINE_ID} from 'src/shared/constants/timeMachine'
import {TimeMachineTab} from 'src/types/v2/timeMachine'
import {HoverTimeProvider} from 'src/dashboards/utils/hoverTime'
interface StateProps {}
interface DispatchProps {
onSetActiveTimeMachine: typeof setActiveTimeMachine
}
interface PassedProps {
activeTab: TimeMachineTab
}
interface State {}
type Props = StateProps & DispatchProps & PassedProps
class DataExplorer extends PureComponent<Props, State> {
constructor(props: Props) {
class DataExplorer extends PureComponent<DispatchProps, {}> {
constructor(props: DispatchProps) {
super(props)
props.onSetActiveTimeMachine(DE_TIME_MACHINE_ID)
}
public render() {
const {activeTab} = this.props
return (
<div className="data-explorer">
<div className="time-machine-page">
<HoverTimeProvider>
<TimeMachine activeTab={activeTab} />
<TimeMachine />
</HoverTimeProvider>
</div>
</div>
@ -53,7 +40,7 @@ const mdtp: DispatchProps = {
onSetActiveTimeMachine: setActiveTimeMachine,
}
export default connect(
export default connect<{}, DispatchProps, {}>(
null,
mdtp
)(DataExplorer) as ComponentClass<PassedProps, State>
)(DataExplorer)

62
ui/src/dataExplorer/components/DataExplorerPage.tsx
View File

@ -1,54 +1,28 @@
// Libraries
import React, {PureComponent} from 'react'
import React, {SFC} from 'react'
// Components
import DataExplorer from 'src/dataExplorer/components/DataExplorer'
import TimeMachineTabs from 'src/shared/components/TimeMachineTabs'
import {Page} from 'src/pageLayout'
// Types
import {TimeMachineTab} from 'src/types/v2/timeMachine'
interface State {
activeTab: TimeMachineTab
}
class DataExplorerPage extends PureComponent<null, State> {
constructor(props) {
super(props)
this.state = {
activeTab: TimeMachineTab.Queries,
}
}
public render() {
const {activeTab} = this.state
return (
<Page>
<Page.Header fullWidth={true}>
<Page.Header.Left>
<Page.Title title="Data Explorer" />
</Page.Header.Left>
<Page.Header.Center>
<TimeMachineTabs
activeTab={activeTab}
onSetActiveTab={this.handleSetActiveTab}
/>
</Page.Header.Center>
<Page.Header.Right />
</Page.Header>
<Page.Contents fullWidth={true} scrollable={false}>
<DataExplorer activeTab={activeTab} />
</Page.Contents>
</Page>
)
}
private handleSetActiveTab = (activeTab: TimeMachineTab): void => {
this.setState({activeTab})
}
const DataExplorerPage: SFC<{}> = () => {
return (
<Page>
<Page.Header fullWidth={true}>
<Page.Header.Left>
<Page.Title title="Data Explorer" />
</Page.Header.Left>
<Page.Header.Center>
<TimeMachineTabs />
</Page.Header.Center>
<Page.Header.Right />
</Page.Header>
<Page.Contents fullWidth={true} scrollable={false}>
<DataExplorer />
</Page.Contents>
</Page>
)
}
export default DataExplorerPage

14
ui/src/shared/actions/v2/timeMachines.ts
View File

@ -2,10 +2,12 @@
import {TimeMachineState} from 'src/shared/reducers/v2/timeMachines'
import {TimeRange, ViewType} from 'src/types/v2'
import {Axes, DecimalPlaces} from 'src/types/v2/dashboards'
import {TimeMachineTab} from 'src/types/v2/timeMachine'
import {Color} from 'src/types/colors'
export type Action =
| SetActiveTimeMachineAction
| SetActiveTabAction
| SetNameAction
| SetTimeRangeAction
| SetTypeAction
@ -40,6 +42,18 @@ export const setActiveTimeMachine = (
payload: {activeTimeMachineID, initialState},
})
interface SetActiveTabAction {
type: 'SET_ACTIVE_TAB'
payload: {activeTab: TimeMachineTab}
}
export const setActiveTab = (
activeTab: TimeMachineTab
): SetActiveTabAction => ({
type: 'SET_ACTIVE_TAB',
payload: {activeTab},
})
interface SetNameAction {
type: 'SET_VIEW_NAME'
payload: {name: string}

89
ui/src/shared/components/TimeMachine.tsx
View File

@ -1,5 +1,5 @@
// Libraries
import React, {PureComponent} from 'react'
import React, {SFC} from 'react'
import {connect} from 'react-redux'
import {get} from 'lodash'
@ -18,7 +18,6 @@ import {getActiveTimeMachine} from 'src/shared/selectors/timeMachines'
import {HANDLE_HORIZONTAL} from 'src/shared/constants'
// Types
import {TimeMachineTab} from 'src/types/v2/timeMachine'
import {AppState, DashboardQuery} from 'src/types/v2'
interface StateProps {
@ -26,57 +25,43 @@ interface StateProps {
queries: DashboardQuery[]
}
interface OwnProps {
activeTab: TimeMachineTab
}
const TimeMachine: SFC<StateProps> = props => {
const {queryLink, queries} = props
type Props = OwnProps & StateProps
return (
<div className="time-machine">
<TimeSeries link={queryLink} queries={queries}>
{queriesState => {
const divisions = [
{
handleDisplay: 'none',
render: () => <TimeMachineVis queriesState={queriesState} />,
headerOrientation: HANDLE_HORIZONTAL,
size: 0.33,
},
{
handlePixels: 8,
render: () => <TimeMachineBottom />,
headerOrientation: HANDLE_HORIZONTAL,
size: 0.67,
},
]
class TimeMachine extends PureComponent<Props> {
public render() {
const {activeTab, queryLink, queries} = this.props
return (
<div className="time-machine">
<TimeSeries link={queryLink} queries={queries}>
{queriesState => {
const divisions = [
{
name: '',
handleDisplay: 'none',
headerButtons: [],
menuOptions: [],
render: () => <TimeMachineVis queriesState={queriesState} />,
headerOrientation: HANDLE_HORIZONTAL,
size: 0.33,
},
{
name: '',
handlePixels: 8,
headerButtons: [],
menuOptions: [],
render: () => <TimeMachineBottom activeTab={activeTab} />,
headerOrientation: HANDLE_HORIZONTAL,
size: 0.67,
},
]
return (
<>
<TimeMachineControls queriesState={queriesState} />
<div className="time-machine-container">
<Threesizer
orientation={HANDLE_HORIZONTAL}
divisions={divisions}
/>
</div>
</>
)
}}
</TimeSeries>
</div>
)
}
return (
<>
<TimeMachineControls queriesState={queriesState} />
<div className="time-machine-container">
<Threesizer
orientation={HANDLE_HORIZONTAL}
divisions={divisions}
/>
</div>
</>
)
}}
</TimeSeries>
</div>
)
}
const mstp = (state: AppState) => {
@ -87,7 +72,7 @@ const mstp = (state: AppState) => {
return {queryLink, queries}
}
export default connect<StateProps, {}, OwnProps>(
export default connect<StateProps, {}, {}>(
mstp,
null
)(TimeMachine)

21
ui/src/shared/components/TimeMachineBottom.tsx
View File

@ -1,19 +1,23 @@
// Libraries
import React, {SFC} from 'react'
import {connect} from 'react-redux'
// Components
import TimeMachineQueryEditor from 'src/shared/components/TimeMachineQueryEditor'
import ViewOptions from 'src/shared/components/view_options/ViewOptions'
// Utils
import {getActiveTimeMachine} from 'src/shared/selectors/timeMachines'
// Types
import {TimeMachineTab} from 'src/types/v2/timeMachine'
import {AppState} from 'src/types/v2'
interface Props {
interface StateProps {
activeTab: TimeMachineTab
}
const TimeMachineBottom: SFC<Props> = props => {
const TimeMachineBottom: SFC<StateProps> = props => {
const {activeTab} = props
if (activeTab === TimeMachineTab.Queries) {
@ -31,4 +35,13 @@ const TimeMachineBottom: SFC<Props> = props => {
return null
}
export default TimeMachineBottom
const mstp = (state: AppState) => {
const {activeTab} = getActiveTimeMachine(state)
return {activeTab}
}
export default connect<StateProps, {}, {}>(
mstp,
null
)(TimeMachineBottom)

87
ui/src/shared/components/TimeMachineTabs.tsx
View File

@ -1,44 +1,69 @@
// Libraries
import React, {PureComponent} from 'react'
import React, {SFC} from 'react'
import {connect} from 'react-redux'
// Components
import {Radio, ButtonShape} from 'src/clockface'
// Actions
import {setActiveTab} from 'src/shared/actions/v2/timeMachines'
// Utils
import {getActiveTimeMachine} from 'src/shared/selectors/timeMachines'
// Types
import {TimeMachineTab} from 'src/types/v2/timeMachine'
import {AppState} from 'src/types/v2'
interface Props {
interface StateProps {
activeTab: TimeMachineTab
onSetActiveTab: (activeTab: TimeMachineTab) => void
}
class TimeMachineTabs extends PureComponent<Props> {
public render() {
const {activeTab, onSetActiveTab} = this.props
return (
<Radio shape={ButtonShape.StretchToFit}>
<Radio.Button
id="deceo-tab-queries"
titleText="Queries"
value={TimeMachineTab.Queries}
active={activeTab === TimeMachineTab.Queries}
onClick={onSetActiveTab}
>
Queries
</Radio.Button>
<Radio.Button
id="deceo-tab-vis"
titleText="Visualization"
value={TimeMachineTab.Visualization}
active={activeTab === TimeMachineTab.Visualization}
onClick={onSetActiveTab}
>
Visualization
</Radio.Button>
</Radio>
)
}
interface DispatchProps {
onSetActiveTab: typeof setActiveTab
}
export default TimeMachineTabs
interface OwnProps {}
type Props = StateProps & DispatchProps & OwnProps
const TimeMachineTabs: SFC<Props> = ({activeTab, onSetActiveTab}) => {
return (
<Radio shape={ButtonShape.StretchToFit}>
<Radio.Button
id="deceo-tab-queries"
titleText="Queries"
value={TimeMachineTab.Queries}
active={activeTab === TimeMachineTab.Queries}
onClick={onSetActiveTab}
>
Queries
</Radio.Button>
<Radio.Button
id="deceo-tab-vis"
titleText="Visualization"
value={TimeMachineTab.Visualization}
active={activeTab === TimeMachineTab.Visualization}
onClick={onSetActiveTab}
>
Visualization
</Radio.Button>
</Radio>
)
return null
}
const mstp = (state: AppState) => {
const {activeTab} = getActiveTimeMachine(state)
return {activeTab}
}
const mdtp = {
onSetActiveTab: setActiveTab,
}
export default connect<StateProps, DispatchProps, OwnProps>(
mstp,
mdtp
)(TimeMachineTabs)

2
ui/src/shared/components/threesizer/Threesizer.tsx
View File

@ -37,7 +37,7 @@ interface DivisionProps {
style?: CSSProperties
size?: number
headerButtons?: JSX.Element[]
menuOptions: MenuItem[]
menuOptions?: MenuItem[]
render: (visibility: string, pixels: number) => ReactElement<any>
}

8
ui/src/shared/reducers/v2/timeMachines.ts
View File

@ -14,12 +14,14 @@ import {
import {TimeRange} from 'src/types/v2'
import {NewView} from 'src/types/v2/dashboards'
import {Action} from 'src/shared/actions/v2/timeMachines'
import {TimeMachineTab} from 'src/types/v2/timeMachine'
export interface TimeMachineState {
view: NewView
timeRange: TimeRange
draftScript: string
isViewingRawData: boolean
activeTab: TimeMachineTab
}
export interface TimeMachinesState {
@ -34,6 +36,7 @@ const initialStateHelper = (): TimeMachineState => ({
view: createView(),
draftScript: '',
isViewingRawData: false,
activeTab: TimeMachineTab.Queries,
})
const INITIAL_STATE: TimeMachinesState = {
@ -156,6 +159,11 @@ const timeMachineReducer = (
return {...state, isViewingRawData}
}
case 'SET_ACTIVE_TAB': {
const {activeTab} = action.payload
return {...state, activeTab}
}
case 'SET_AXES': {
const {axes} = action.payload