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

chore: cleaning up code styling (#18223)

pull/18230/head^2
Alex Boatwright 2020-05-26 14:17:50 -07:00 committed by GitHub
parent 70073ff793
commit 30f8978974
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 195 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
ui/src/notebooks/components/Header.tsx
View File

@ -1,126 +0,0 @@
import React, {FC, useContext, useCallback, useMemo} from 'react'
import {Page} from '@influxdata/clockface'
import {NotebookContext} from 'src/notebooks/context/notebook'
import {TimeProvider, TimeContext, TimeBlock} from 'src/notebooks/context/time'
import AppSettingProvider, {AppSettingContext} from 'src/notebooks/context/app'
import AddButtons from 'src/notebooks/components/AddButtons'
import TimeRangeDropdown from 'src/shared/components/TimeRangeDropdown'
import AutoRefreshDropdown from 'src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown'
import {AutoRefreshStatus, RemoteDataState} from 'src/types'
import {TimeZoneDropdown} from 'src/shared/components/TimeZoneDropdown'
import {SubmitQueryButton} from 'src/timeMachine/components/SubmitQueryButton'
const FULL_WIDTH = true
const ConnectedTimeZoneDropdown = React.memo(() => {
const {timeZone, onSetTimeZone} = useContext(AppSettingContext)
return <TimeZoneDropdown timeZone={timeZone} onSetTimeZone={onSetTimeZone} />
})
const ConnectedTimeRangeDropdown = ({context, update}) => {
const {range} = context
const updateRange = range => {
update({
range,
})
}
return useMemo(() => {
return <TimeRangeDropdown timeRange={range} onSetTimeRange={updateRange} />
}, [range])
}
const ConnectedAutoRefreshDropdown = ({context, update}) => {
const {refresh} = context
const updateRefresh = (interval: number) => {
const status =
interval === 0 ? AutoRefreshStatus.Paused : AutoRefreshStatus.Active
update({
refresh: {
status,
interval,
},
} as TimeBlock)
}
return useMemo(
() => (
<AutoRefreshDropdown
selected={refresh}
onChoose={updateRefresh}
showManualRefresh={false}
/>
),
[refresh]
)
}
const EnsureTimeContextExists: FC = () => {
const {id} = useContext(NotebookContext)
const {timeContext, addTimeContext, updateTimeContext} = useContext(
TimeContext
)
const update = useCallback(
data => {
updateTimeContext(id, data)
},
[id]
)
if (!timeContext.hasOwnProperty(id)) {
addTimeContext(id)
return null
}
return (
<>
<ConnectedTimeZoneDropdown />
<ConnectedTimeRangeDropdown context={timeContext[id]} update={update} />
<ConnectedAutoRefreshDropdown context={timeContext[id]} update={update} />
</>
)
}
const Header: FC = () => {
function submit() {} // eslint-disable-line @typescript-eslint/no-empty-function
return (
<>
<Page.Header fullWidth={FULL_WIDTH}>
<Page.Title title="Notebooks" />
</Page.Header>
<Page.ControlBar fullWidth={FULL_WIDTH}>
<Page.ControlBarLeft>
<AddButtons />
</Page.ControlBarLeft>
<Page.ControlBarRight>
<div className="notebook-header--buttons">
<EnsureTimeContextExists />
<SubmitQueryButton
submitButtonDisabled={false}
queryStatus={RemoteDataState.NotStarted}
onSubmit={submit}
/>
</div>
</Page.ControlBarRight>
</Page.ControlBar>
</>
)
}
export default () => (
<TimeProvider>
<AppSettingProvider>
<Header />
</AppSettingProvider>
</TimeProvider>
)
export {Header}

2
ui/src/notebooks/components/Notebook.tsx
View File

@ -2,7 +2,7 @@ import React, {FC} from 'react'
import {Page} from '@influxdata/clockface'
import {NotebookProvider} from 'src/notebooks/context/notebook'
import Header from 'src/notebooks/components/Header'
import Header from 'src/notebooks/components/header'
import PipeList from 'src/notebooks/components/PipeList'
// NOTE: uncommon, but using this to scope the project

33
ui/src/notebooks/components/NotebookPipe.tsx Normal file
View File

@ -0,0 +1,33 @@
import React, {FC, createElement, useMemo} from 'react'
import {PipeContextProps, PipeData} from 'src/notebooks'
import Pipe from 'src/notebooks/components/Pipe'
import NotebookPanel from 'src/notebooks/components/panel/NotebookPanel'
export interface NotebookPipeProps {
index: number
data: PipeData
onUpdate: (index: number, pipe: PipeData) => void
}
const NotebookPipe: FC<NotebookPipeProps> = ({index, data, onUpdate}) => {
const panel: FC<PipeContextProps> = useMemo(
() => props => {
const _props = {
...props,
index,
}
return createElement(NotebookPanel, _props)
},
[index]
)
const _onUpdate = (data: PipeData) => {
onUpdate(index, data)
}
return <Pipe data={data} onUpdate={_onUpdate} Context={panel} />
}
export default NotebookPipe

32
ui/src/notebooks/components/PipeList.tsx
View File

@ -1,34 +1,6 @@
import React, {FC, useContext, useCallback, createElement, useMemo} from 'react'
import {PipeContextProps, PipeData} from 'src/notebooks'
import Pipe from 'src/notebooks/components/Pipe'
import React, {FC, useContext, useCallback} from 'react'
import {NotebookContext} from 'src/notebooks/context/notebook'
import NotebookPanel from 'src/notebooks/components/panel/NotebookPanel'
interface NotebookPipeProps {
index: number
data: PipeData
onUpdate: (index: number, pipe: PipeData) => void
}
const NotebookPipe: FC<NotebookPipeProps> = ({index, data, onUpdate}) => {
const panel: FC<PipeContextProps> = useMemo(
() => props => {
const _props = {
...props,
index,
}
return createElement(NotebookPanel, _props)
},
[index]
)
const _onUpdate = (data: PipeData) => {
onUpdate(index, data)
}
return <Pipe data={data} onUpdate={_onUpdate} Context={panel} />
}
import NotebookPipe from 'src/notebooks/components/NotebookPipe'
const PipeList: FC = () => {
const {id, pipes, updatePipe} = useContext(NotebookContext)

34
ui/src/notebooks/components/header/AutoRefreshDropdown.tsx Normal file
View File

@ -0,0 +1,34 @@
import React, {FC, useMemo} from 'react'
import {default as StatelessAutoRefreshDropdown} from 'src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown'
import {TimeContextProps} from 'src/notebooks/components/header/Buttons'
import {TimeBlock} from 'src/notebooks/context/time'
import {AutoRefreshStatus} from 'src/types'
const AutoRefreshDropdown: FC<TimeContextProps> = ({context, update}) => {
const {refresh} = context
const updateRefresh = (interval: number) => {
const status =
interval === 0 ? AutoRefreshStatus.Paused : AutoRefreshStatus.Active
update({
refresh: {
status,
interval,
},
} as TimeBlock)
}
return useMemo(
() => (
<StatelessAutoRefreshDropdown
selected={refresh}
onChoose={updateRefresh}
showManualRefresh={false}
/>
),
[refresh]
)
}
export default AutoRefreshDropdown

57
ui/src/notebooks/components/header/Buttons.tsx Normal file
View File

@ -0,0 +1,57 @@
import React, {FC, useContext, useCallback} from 'react'
import {NotebookContext} from 'src/notebooks/context/notebook'
import {TimeProvider, TimeContext, TimeBlock} from 'src/notebooks/context/time'
import AppSettingProvider from 'src/notebooks/context/app'
import TimeZoneDropdown from 'src/notebooks/components/header/TimeZoneDropdown'
import TimeRangeDropdown from 'src/notebooks/components/header/TimeRangeDropdown'
import AutoRefreshDropdown from 'src/notebooks/components/header/AutoRefreshDropdown'
import {SubmitQueryButton} from 'src/timeMachine/components/SubmitQueryButton'
import {RemoteDataState} from 'src/types'
export interface TimeContextProps {
context: TimeBlock
update: (data: TimeBlock) => void
}
const Buttons: FC = () => {
const {id} = useContext(NotebookContext)
const {timeContext, addTimeContext, updateTimeContext} = useContext(
TimeContext
)
const update = useCallback(
(data: TimeBlock) => {
updateTimeContext(id, data)
},
[id]
)
function submit() {} // eslint-disable-line @typescript-eslint/no-empty-function
if (!timeContext.hasOwnProperty(id)) {
addTimeContext(id)
return null
}
return (
<TimeProvider>
<AppSettingProvider>
<div className="notebook-header--buttons">
<TimeZoneDropdown />
<TimeRangeDropdown context={timeContext[id]} update={update} />
<AutoRefreshDropdown context={timeContext[id]} update={update} />
<SubmitQueryButton
submitButtonDisabled={false}
queryStatus={RemoteDataState.NotStarted}
onSubmit={submit}
/>
</div>
</AppSettingProvider>
</TimeProvider>
)
}
export default Buttons

25
ui/src/notebooks/components/header/TimeRangeDropdown.tsx Normal file
View File

@ -0,0 +1,25 @@
import React, {FC, useMemo} from 'react'
import {default as StatelessTimeRangeDropdown} from 'src/shared/components/TimeRangeDropdown'
import {TimeContextProps} from 'src/notebooks/components/header/Buttons'
import {TimeBlock} from 'src/notebooks/context/time'
const TimeRangeDropdown: FC<TimeContextProps> = ({context, update}) => {
const {range} = context
const updateRange = range => {
update({
range,
} as TimeBlock)
}
return useMemo(() => {
return (
<StatelessTimeRangeDropdown
timeRange={range}
onSetTimeRange={updateRange}
/>
)
}, [range])
}
export default TimeRangeDropdown

18
ui/src/notebooks/components/header/TimeZoneDropdown.tsx Normal file
View File

@ -0,0 +1,18 @@
import React, {FC, useContext} from 'react'
import {AppSettingContext} from 'src/notebooks/context/app'
import {TimeZoneDropdown as StatelessTimeZoneDropdown} from 'src/shared/components/TimeZoneDropdown'
const TimeZoneDropdown: FC = React.memo(() => {
const {timeZone, onSetTimeZone} = useContext(AppSettingContext)
return (
<StatelessTimeZoneDropdown
timeZone={timeZone}
onSetTimeZone={onSetTimeZone}
/>
)
})
export default TimeZoneDropdown

25
ui/src/notebooks/components/header/index.tsx Normal file
View File

@ -0,0 +1,25 @@
import React, {FC} from 'react'
import {Page} from '@influxdata/clockface'
import AddButtons from 'src/notebooks/components/AddButtons'
import Buttons from 'src/notebooks/components/header/Buttons'
const FULL_WIDTH = true
const Header: FC = () => (
<>
<Page.Header fullWidth={FULL_WIDTH}>
<Page.Title title="Notebooks" />
</Page.Header>
<Page.ControlBar fullWidth={FULL_WIDTH}>
<Page.ControlBarLeft>
<AddButtons />
</Page.ControlBarLeft>
<Page.ControlBarRight>
<Buttons />
</Page.ControlBarRight>
</Page.ControlBar>
</>
)
export default Header