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

Merge pull request #12208 from influxdata/feat/dont-show-modal-if-script-same 

Show confirmation modal only if script changed
pull/12216/head
Brandon Farmer 2019-02-27 10:51:37 -08:00 committed by GitHub
parent c4275fb484 e09253e461
commit b08ea901f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 94 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ui/src/timeMachine/actions/index.ts
View File

@ -25,6 +25,7 @@ export type Action =
| SetTimeRangeAction
| SetTypeAction
| SetActiveQueryText
| SetActiveQueryEdited
| SubmitScriptAction
| SetIsViewingRawDataAction
| SetGeomAction
@ -121,6 +122,18 @@ export const setType = (type: ViewType): SetTypeAction => ({
payload: {type},
})
interface SetActiveQueryEdited {
type: 'SET_ACTIVE_QUERY_EDITED'
payload: {manuallyEdited: boolean}
}
export const setActiveQueryEdited = (
manuallyEdited: boolean
): SetActiveQueryEdited => ({
type: 'SET_ACTIVE_QUERY_EDITED',
payload: {manuallyEdited},
})
interface SetActiveQueryText {
type: 'SET_ACTIVE_QUERY_TEXT'
payload: {text: string}

10
ui/src/timeMachine/components/QueriesSwitcher.tsx
View File

@ -29,6 +29,7 @@ import {AppState, QueryEditMode, SourceType} from 'src/types/v2'
interface StateProps {
editMode: QueryEditMode
manuallyEdited: boolean
}
interface DispatchProps {
@ -108,6 +109,11 @@ class TimeMachineQueriesSwitcher extends PureComponent<Props, State> {
}
private handleShowOverlay = (): void => {
if (!this.props.manuallyEdited) {
this.props.onEditWithBuilder()
return
}
this.setState({isOverlayVisible: true})
}
@ -124,8 +130,8 @@ class TimeMachineQueriesSwitcher extends PureComponent<Props, State> {
}
const mstp = (state: AppState) => {
const editMode = getActiveQuery(state).editMode
return {editMode, sourceType: SourceType.V2}
const {editMode, manuallyEdited} = getActiveQuery(state)
return {editMode, sourceType: SourceType.V2, manuallyEdited}
}
const mdtp = {

2
ui/src/timeMachine/components/TimeMachine.tsx
View File

@ -90,7 +90,7 @@ class TimeMachine extends Component<Props, State> {
}
}
private handleResizerChange = resizerHandlePosition => {
private handleResizerChange = (resizerHandlePosition: number[]): void => {
this.setState({resizerHandlePosition})
}

29
ui/src/timeMachine/components/TimeMachineFluxEditor.tsx
View File

@ -10,7 +10,11 @@ import VariablesToolbar from 'src/timeMachine/components/variableToolbar/Variabl
import ToolbarTab from 'src/timeMachine/components/ToolbarTab'
// Actions
import {setActiveQueryText, submitScript} from 'src/timeMachine/actions'
import {
setActiveQueryText,
submitScript,
setActiveQueryEdited,
} from 'src/timeMachine/actions'
// Utils
import {getActiveQuery} from 'src/timeMachine/selectors'
@ -31,6 +35,7 @@ interface StateProps {
interface DispatchProps {
onSetActiveQueryText: typeof setActiveQueryText
onSubmitScript: typeof submitScript
onSetActiveQueryEdited: typeof setActiveQueryEdited
}
interface State {
@ -40,7 +45,7 @@ interface State {
type Props = StateProps & DispatchProps
class TimeMachineFluxEditor extends PureComponent<Props, State> {
constructor(props) {
constructor(props: Props) {
super(props)
this.state = {
@ -48,8 +53,16 @@ class TimeMachineFluxEditor extends PureComponent<Props, State> {
}
}
public componentDidMount() {
this.props.onSetActiveQueryEdited(false)
}
public componentWillUnmount() {
this.props.onSetActiveQueryEdited(false)
}
public render() {
const {activeQueryText, onSetActiveQueryText, onSubmitScript} = this.props
const {activeQueryText, onSubmitScript} = this.props
const divisions = [
{
@ -59,7 +72,7 @@ class TimeMachineFluxEditor extends PureComponent<Props, State> {
<FluxEditor
script={activeQueryText}
status={{type: '', text: ''}}
onChangeScript={onSetActiveQueryText}
onChangeScript={this.handleChangeScript}
onSubmitScript={onSubmitScript}
suggestions={[]}
/>
@ -97,6 +110,13 @@ class TimeMachineFluxEditor extends PureComponent<Props, State> {
)
}
private handleChangeScript = (script: string) => {
const {onSetActiveQueryText} = this.props
onSetActiveQueryText(script)
this.props.onSetActiveQueryEdited(true)
}
private get rightDivision(): JSX.Element {
const {displayFluxFunctions} = this.state
@ -125,6 +145,7 @@ const mstp = (state: AppState) => {
const mdtp = {
onSetActiveQueryText: setActiveQueryText,
onSubmitScript: submitScript,
onSetActiveQueryEdited: setActiveQueryEdited,
}
export default connect<StateProps, DispatchProps, {}>(

31
ui/src/timeMachine/reducers/index.test.ts
View File

@ -106,7 +106,9 @@ describe('timeMachinesReducer', () => {
expect(nextTimeMachine.activeTab).toEqual(TimeMachineTab.Queries)
expect(nextTimeMachine.activeQueryIndex).toEqual(0)
expect(
_.map(nextTimeMachine.draftQueries, q => _.omit(q, ['hidden']))
_.map(nextTimeMachine.draftQueries, q =>
_.omit(q, ['hidden', 'manuallyEdited'])
)
).toEqual(view.properties.queries)
})
})
@ -123,6 +125,7 @@ describe('timeMachineReducer', () => {
editMode: QueryEditMode.Builder,
builderConfig: {buckets: [], tags: [], functions: []},
hidden: false,
manuallyEdited: false,
}
const queryB: DashboardQuery = {
@ -135,8 +138,8 @@ describe('timeMachineReducer', () => {
state.view.properties.queries = [queryA, queryB]
state.draftQueries = [
{...queryA, text: 'baz', hidden: false},
{...queryB, text: 'buzz', hidden: false},
{...queryA, text: 'baz', hidden: false, manuallyEdited: false},
{...queryB, text: 'buzz', hidden: false, manuallyEdited: false},
]
const actual = timeMachineReducer(state, submitScript()).view.properties
@ -161,6 +164,7 @@ describe('timeMachineReducer', () => {
editMode: QueryEditMode.Builder,
builderConfig: {buckets: [], tags: [], functions: []},
hidden: false,
manuallyEdited: false,
},
{
text: 'bar',
@ -169,6 +173,7 @@ describe('timeMachineReducer', () => {
editMode: QueryEditMode.Advanced,
builderConfig: {buckets: [], tags: [], functions: []},
hidden: false,
manuallyEdited: false,
},
]
@ -183,6 +188,7 @@ describe('timeMachineReducer', () => {
editMode: QueryEditMode.Builder,
builderConfig: {buckets: [], tags: [], functions: []},
hidden: false,
manuallyEdited: false,
},
{
text: '',
@ -191,6 +197,7 @@ describe('timeMachineReducer', () => {
editMode: QueryEditMode.Builder,
builderConfig: {buckets: [], tags: [], functions: []},
hidden: false,
manuallyEdited: false,
},
])
})
@ -209,6 +216,7 @@ describe('timeMachineReducer', () => {
editMode: QueryEditMode.Advanced,
builderConfig: {buckets: [], tags: [], functions: []},
hidden: false,
manuallyEdited: false,
},
{
text: 'bar',
@ -217,6 +225,7 @@ describe('timeMachineReducer', () => {
editMode: QueryEditMode.Builder,
builderConfig: {buckets: [], tags: [], functions: []},
hidden: false,
manuallyEdited: false,
},
]
@ -231,6 +240,7 @@ describe('timeMachineReducer', () => {
editMode: QueryEditMode.Advanced,
builderConfig: {buckets: [], tags: [], functions: []},
hidden: false,
manuallyEdited: false,
},
{
text: 'bar',
@ -239,6 +249,7 @@ describe('timeMachineReducer', () => {
editMode: QueryEditMode.Advanced,
builderConfig: {buckets: [], tags: [], functions: []},
hidden: false,
manuallyEdited: false,
},
])
})
@ -257,6 +268,7 @@ describe('timeMachineReducer', () => {
editMode: QueryEditMode.Advanced,
builderConfig: {buckets: [], tags: [], functions: []},
hidden: false,
manuallyEdited: false,
},
{
text: 'bar',
@ -265,6 +277,7 @@ describe('timeMachineReducer', () => {
editMode: QueryEditMode.Builder,
builderConfig: {buckets: [], tags: [], functions: []},
hidden: false,
manuallyEdited: false,
},
]
@ -279,6 +292,7 @@ describe('timeMachineReducer', () => {
editMode: QueryEditMode.Advanced,
builderConfig: {buckets: [], tags: [], functions: []},
hidden: false,
manuallyEdited: false,
},
{
text: 'bar',
@ -287,6 +301,7 @@ describe('timeMachineReducer', () => {
editMode: QueryEditMode.Advanced,
builderConfig: {buckets: [], tags: [], functions: []},
hidden: false,
manuallyEdited: false,
},
])
})
@ -387,6 +402,7 @@ describe('timeMachineReducer', () => {
editMode: QueryEditMode.Advanced,
builderConfig: {buckets: [], tags: [], functions: []},
hidden: false,
manuallyEdited: false,
},
]
@ -401,6 +417,7 @@ describe('timeMachineReducer', () => {
editMode: QueryEditMode.Advanced,
builderConfig: {buckets: [], tags: [], functions: []},
hidden: false,
manuallyEdited: false,
},
{
text: '',
@ -413,6 +430,7 @@ describe('timeMachineReducer', () => {
functions: [],
},
hidden: false,
manuallyEdited: false,
},
])
})
@ -430,6 +448,7 @@ describe('timeMachineReducer', () => {
editMode: QueryEditMode.Builder,
builderConfig: {buckets: [], tags: [], functions: []},
hidden: false,
manuallyEdited: false,
},
{
text: 'b',
@ -438,6 +457,7 @@ describe('timeMachineReducer', () => {
editMode: QueryEditMode.Builder,
builderConfig: {buckets: [], tags: [], functions: []},
hidden: false,
manuallyEdited: false,
},
{
text: 'c',
@ -446,6 +466,7 @@ describe('timeMachineReducer', () => {
editMode: QueryEditMode.Advanced,
builderConfig: {buckets: [], tags: [], functions: []},
hidden: false,
manuallyEdited: false,
},
]
})
@ -492,6 +513,7 @@ describe('timeMachineReducer', () => {
editMode: QueryEditMode.Advanced,
builderConfig,
hidden: false,
manuallyEdited: false,
},
{
text: 'bar',
@ -500,6 +522,7 @@ describe('timeMachineReducer', () => {
editMode: QueryEditMode.Builder,
builderConfig,
hidden: false,
manuallyEdited: false,
},
]
@ -516,6 +539,7 @@ describe('timeMachineReducer', () => {
editMode: QueryEditMode.Advanced,
builderConfig,
hidden: false,
manuallyEdited: false,
},
{
text: 'bar',
@ -525,6 +549,7 @@ describe('timeMachineReducer', () => {
name: 'test query',
builderConfig,
hidden: false,
manuallyEdited: false,
},
])
})

17
ui/src/timeMachine/reducers/index.ts
View File

@ -66,7 +66,7 @@ export interface TimeMachinesState {
export const initialStateHelper = (): TimeMachineState => ({
timeRange: {lower: 'now() - 1h'},
view: createView(),
draftQueries: [{...defaultViewQuery(), hidden: false}],
draftQueries: [{...defaultViewQuery(), hidden: false, manuallyEdited: false}],
isViewingRawData: false,
activeTab: TimeMachineTab.Queries,
activeQueryIndex: 0,
@ -108,6 +108,7 @@ export const timeMachinesReducer = (
const draftQueries = _.map(cloneDeep(view.properties.queries), q => ({
...q,
hidden: false,
manuallyEdited: false,
}))
const queryBuilder = initialQueryBuilderState(draftQueries[0].builderConfig)
const activeQueryIndex = 0
@ -191,6 +192,18 @@ export const timeMachineReducer = (
return {...state, draftQueries}
}
case 'SET_ACTIVE_QUERY_EDITED': {
const {manuallyEdited} = action.payload
const draftQueries = [...state.draftQueries]
draftQueries[state.activeQueryIndex] = {
...draftQueries[state.activeQueryIndex],
manuallyEdited,
}
return {...state, draftQueries}
}
case 'SUBMIT_SCRIPT': {
return produce(state, draftState => {
submitQueries(draftState)
@ -488,7 +501,7 @@ export const timeMachineReducer = (
return produce(state, draftState => {
draftState.draftQueries = [
...state.draftQueries,
{...defaultViewQuery(), hidden: false},
{...defaultViewQuery(), hidden: false, manuallyEdited: false},
]
draftState.activeQueryIndex = draftState.draftQueries.length - 1

5
ui/src/timeMachine/selectors/index.ts
View File

@ -1,4 +1,5 @@
import {AppState, DashboardQuery} from 'src/types/v2'
import {AppState} from 'src/types/v2'
import {DashboardDraftQuery} from 'src/types/v2/dashboards'
export const getActiveTimeMachine = (state: AppState) => {
const {activeTimeMachineID, timeMachines} = state.timeMachines
@ -7,7 +8,7 @@ export const getActiveTimeMachine = (state: AppState) => {
return timeMachine
}
export const getActiveQuery = (state: AppState): DashboardQuery => {
export const getActiveQuery = (state: AppState): DashboardDraftQuery => {
const {draftQueries, activeQueryIndex} = getActiveTimeMachine(state)
return draftQueries[activeQueryIndex]

1
ui/src/types/v2/dashboards.ts
View File

@ -69,6 +69,7 @@ export interface DashboardQuery {
export interface DashboardDraftQuery extends DashboardQuery {
hidden: boolean
manuallyEdited: boolean
}
export interface Legend {
type?: string