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

Add draftScript state to TimeMachine (#4602)

pull/4607/head
Alirie Gray 2018-10-17 13:06:14 -07:00 committed by GitHub
parent 04e89f7a6b
commit 02799a17af
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 77 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
ui/src/dashboards/components/CellEditorOverlay.tsx
View File

@ -45,6 +45,8 @@ import {ColorString, ColorNumber} from 'src/types/colors'
interface ConnectedProps {
queryDrafts: CellQuery[]
script: string
draftScript: string
onChangeScript: (script: string) => void
type: CellType
axes: Axes | null
tableOptions: TableOptions
@ -205,7 +207,7 @@ class CellEditorOverlay extends Component<Props, State> {
private collectCell = (): Cell | NewDefaultCell => {
const {
cell,
script,
draftScript,
queryDrafts,
type,
axes,
@ -226,7 +228,7 @@ class CellEditorOverlay extends Component<Props, State> {
if (this.isFluxQuery) {
queries = [
{
query: script,
query: draftScript,
queryConfig: null,
source: getDeep<string>(queryDrafts, '0.source', ''),
type: QueryType.Flux,
@ -311,26 +313,31 @@ class CellEditorOverlay extends Component<Props, State> {
const ConnectedCellEditorOverlay = (props: PassedProps) => {
return (
<Subscribe to={[TimeMachineContainer]}>
{(timeMachineContainer: TimeMachineContainer) => (
<CellEditorOverlay
{...props}
queryDrafts={timeMachineContainer.state.queryDrafts}
script={timeMachineContainer.state.script}
type={timeMachineContainer.state.type}
axes={timeMachineContainer.state.axes}
tableOptions={timeMachineContainer.state.tableOptions}
fieldOptions={timeMachineContainer.state.fieldOptions}
timeFormat={timeMachineContainer.state.timeFormat}
decimalPlaces={timeMachineContainer.state.decimalPlaces}
note={timeMachineContainer.state.note}
noteVisibility={timeMachineContainer.state.noteVisibility}
thresholdsListColors={timeMachineContainer.state.thresholdsListColors}
thresholdsListType={timeMachineContainer.state.thresholdsListType}
gaugeColors={timeMachineContainer.state.gaugeColors}
lineColors={timeMachineContainer.state.lineColors}
onResetTimeMachine={timeMachineContainer.reset}
/>
)}
{(container: TimeMachineContainer) => {
const {state} = container
return (
<CellEditorOverlay
{...props}
queryDrafts={state.queryDrafts}
script={state.script}
draftScript={state.draftScript}
onChangeScript={container.handleChangeScript}
type={state.type}
axes={state.axes}
tableOptions={state.tableOptions}
fieldOptions={state.fieldOptions}
timeFormat={state.timeFormat}
decimalPlaces={state.decimalPlaces}
note={state.note}
noteVisibility={state.noteVisibility}
thresholdsListColors={state.thresholdsListColors}
thresholdsListType={state.thresholdsListType}
gaugeColors={state.gaugeColors}
lineColors={state.lineColors}
onResetTimeMachine={container.reset}
/>
)
}}
</Subscribe>
)
}

31
ui/src/data_explorer/containers/DataExplorer.tsx
View File

@ -95,6 +95,7 @@ interface PassedProps {
interface ConnectedProps {
queryDrafts: CellQuery[]
timeRange: TimeRange
draftScript: string
script: string
onUpdateQueryDrafts: (queryDrafts: CellQuery[]) => void
onChangeScript: TimeMachineContainer['handleChangeScript']
@ -309,7 +310,7 @@ export class DataExplorer extends PureComponent<Props, State> {
sendDashboardCell,
handleGetDashboards,
notify,
script,
draftScript,
} = this.props
const {isSendToDashboardVisible, isStaticLegend} = this.state
@ -320,7 +321,7 @@ export class DataExplorer extends PureComponent<Props, State> {
notify={notify}
onCancel={this.toggleSendToDashboard}
queryConfig={this.activeQueryConfig}
script={script}
script={draftScript}
source={source}
isFluxQuery={this.isFluxQuery}
rawText={this.rawText}
@ -437,17 +438,21 @@ export class DataExplorer extends PureComponent<Props, State> {
const ConnectedDataExplorer = (props: PassedProps & WithRouterProps) => {
return (
<Subscribe to={[TimeMachineContainer]}>
{(timeMachineContainer: TimeMachineContainer) => (
<DataExplorer
{...props}
queryDrafts={timeMachineContainer.state.queryDrafts}
timeRange={timeMachineContainer.state.timeRange}
script={timeMachineContainer.state.script}
onChangeScript={timeMachineContainer.handleChangeScript}
onUpdateQueryDrafts={timeMachineContainer.handleUpdateQueryDrafts}
onResetTimeMachine={timeMachineContainer.reset}
/>
)}
{(container: TimeMachineContainer) => {
const {state} = container
return (
<DataExplorer
{...props}
queryDrafts={state.queryDrafts}
draftScript={state.draftScript}
timeRange={state.timeRange}
script={state.script}
onChangeScript={container.handleChangeScript}
onUpdateQueryDrafts={container.handleUpdateQueryDrafts}
onResetTimeMachine={container.reset}
/>
)
}}
</Subscribe>
)
}

31
ui/src/shared/components/TimeMachine/FluxQueryMaker.tsx
View File

@ -26,7 +26,9 @@ const VALID_SCRIPT_STATUS = {type: 'success', text: ''}
interface Props {
script: string
draftScript: string
onChangeScript: (script: string) => void
onChangeDraftScript: (draftScript: string) => void
source: Source
onUpdateStatus?: (status: ScriptStatus) => void
links: Links
@ -35,7 +37,6 @@ interface Props {
interface State {
suggestions: Suggestion[]
draftScript: string
draftScriptStatus: ScriptStatus
isWizardActive: boolean
}
@ -49,7 +50,6 @@ class FluxQueryMaker extends PureComponent<Props, State> {
this.state = {
suggestions: [],
draftScript: props.script,
draftScriptStatus: {type: 'none', text: ''},
isWizardActive: false,
}
@ -61,13 +61,8 @@ class FluxQueryMaker extends PureComponent<Props, State> {
}
public render() {
const {notify, source} = this.props
const {
suggestions,
draftScript,
draftScriptStatus,
isWizardActive,
} = this.state
const {notify, source, draftScript} = this.props
const {suggestions, draftScriptStatus, isWizardActive} = this.state
const divisions = [
{
@ -140,8 +135,8 @@ class FluxQueryMaker extends PureComponent<Props, State> {
}
private handleSubmitScript = () => {
const {onChangeScript, onUpdateStatus} = this.props
const {draftScript, draftScriptStatus} = this.state
const {onChangeScript, onUpdateStatus, draftScript} = this.props
const {draftScriptStatus} = this.state
onChangeScript(draftScript)
@ -159,19 +154,23 @@ class FluxQueryMaker extends PureComponent<Props, State> {
}
private handleAddToScript = (draftScript): void => {
this.setState({draftScript}, this.handleSubmitScript)
const {onChangeDraftScript} = this.props
onChangeDraftScript(draftScript)
this.handleSubmitScript()
}
private handleChangeDraftScript = async (
draftScript: string
): Promise<void> => {
this.setState({draftScript}, () =>
this.debouncer.call(this.checkDraftScript, CHECK_SCRIPT_DELAY)
)
const {onChangeDraftScript} = this.props
await onChangeDraftScript(draftScript)
this.debouncer.call(this.checkDraftScript, CHECK_SCRIPT_DELAY)
}
private checkDraftScript = async () => {
const {draftScript} = this.state
const {draftScript} = this.props
if (draftScript.trim() === '') {
// Don't attempt to validate an empty script

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

@ -46,8 +46,10 @@ import {Links, ScriptStatus} from 'src/types/flux'
interface ConnectedProps {
script: string
draftScript: string
queryDrafts: CellQuery[]
onChangeScript: (script: string) => void
onChangeDraftScript: (draftScript: string) => void
onUpdateQueryDrafts: TimeMachineContainer['handleUpdateQueryDrafts']
onAddQuery: () => void
onDeleteQuery: (queryID: string) => void
@ -310,6 +312,8 @@ class TimeMachine extends PureComponent<Props, State> {
const {
script,
onChangeScript,
draftScript,
onChangeDraftScript,
fluxLinks,
onUpdateScriptStatus,
notify,
@ -318,9 +322,11 @@ class TimeMachine extends PureComponent<Props, State> {
return (
<FluxQueryMaker
notify={notify}
draftScript={draftScript}
source={this.source}
script={script}
onChangeScript={onChangeScript}
onChangeDraftScript={onChangeDraftScript}
links={fluxLinks}
onUpdateStatus={onUpdateScriptStatus}
/>
@ -545,10 +551,12 @@ const ConnectedTimeMachine = (props: PassedProps) => {
<TimeMachine
{...props}
script={state.script}
draftScript={state.draftScript}
queryDrafts={state.queryDrafts}
timeRange={state.timeRange}
onUpdateTimeRange={container.handleUpdateTimeRange}
onChangeScript={container.handleChangeScript}
onChangeDraftScript={container.handleUpdateDraftScript}
onUpdateQueryDrafts={container.handleUpdateQueryDrafts}
onAddQuery={container.handleAddQuery}
onDeleteQuery={container.handleDeleteQuery}

6
ui/src/shared/utils/TimeMachineContainer.ts
View File

@ -67,6 +67,7 @@ const LOCAL_STORAGE_DELAY_MS = 1000
const DEFAULT_STATE = () => ({
script: '',
draftScript: '',
queryDrafts: [],
timeRange: DEFAULT_TIME_RANGE,
type: CellType.Line,
@ -85,6 +86,7 @@ const DEFAULT_STATE = () => ({
export interface TimeMachineState {
script: string
draftScript: string
queryDrafts: CellQuery[]
timeRange: TimeRange
type: CellType
@ -126,6 +128,10 @@ export class TimeMachineContainer extends Container<TimeMachineState> {
return this.setAndPersistState({script})
}
public handleUpdateDraftScript = (draftScript: string) => {
return this.setAndPersistState({draftScript})
}
public handleUpdateTimeRange = (timeRange: TimeRange) => {
return this.setAndPersistState({timeRange})
}

1
ui/src/shared/utils/timeMachine.ts
View File

@ -29,6 +29,7 @@ export function initialStateFromCell(
if (get(cell, 'queries.0.type') === QueryType.Flux) {
initialState.script = get(cell, 'queries.0.query', '')
initialState.draftScript = get(cell, 'queries.0.query', '')
}
if (cell.tableOptions) {