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

Allow CEO dropdowns to change queries

pull/4327/head
Brandon Farmer 2018-08-30 16:30:56 -07:00
parent eaa481d502
commit a12e49a2f8
3 changed files with 61 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -91,7 +91,7 @@ interface State {
@ErrorHandling
class CellEditorOverlay extends Component<Props, State> {
private overlayRef: HTMLDivElement
private overlayRef: React.RefObject<HTMLDivElement> = React.createRef()
public constructor(props: Props) {
super(props)
@ -105,30 +105,28 @@ class CellEditorOverlay extends Component<Props, State> {
}
public componentDidMount() {
if (this.overlayRef) {
this.overlayRef.focus()
}
this.handleResetFocus()
}
public render() {
const {
fluxLinks,
script,
notify,
services,
onCancel,
templates,
timeRange,
editQueryStatus,
addQuery,
cell,
deleteQuery,
editQueryStatus,
fluxLinks,
notify,
onCancel,
queryDrafts,
renameCell,
script,
services,
source,
sources,
updateQueryDrafts,
renameCell,
addQuery,
deleteQuery,
templates,
timeRange,
updateEditorTimeRange,
updateQueryDrafts,
updateScript,
queryStatus,
} = this.props
@ -140,7 +138,7 @@ class CellEditorOverlay extends Component<Props, State> {
className="deceo--overlay"
onKeyDown={this.handleKeyDown}
tabIndex={0}
ref={this.onRef}
ref={this.overlayRef}
>
<TimeMachine
fluxLinks={fluxLinks}
@ -228,10 +226,6 @@ class CellEditorOverlay extends Component<Props, State> {
}
}
private onRef = (r: HTMLDivElement) => {
this.overlayRef = r
}
private handleSaveCell = () => {
const {isStaticLegend} = this.state
const {
@ -304,7 +298,7 @@ class CellEditorOverlay extends Component<Props, State> {
}
e.target.blur()
this.overlayRef.focus()
this.handleResetFocus()
}
break
}
@ -315,7 +309,9 @@ class CellEditorOverlay extends Component<Props, State> {
}
private handleResetFocus = () => {
this.overlayRef.focus()
if (this.overlayRef.current) {
this.overlayRef.current.focus()
}
}
}

25
ui/src/shared/components/FillQuery.tsx
View File

@ -27,6 +27,7 @@ interface State {
selected: Item
currentNumberValue: string
resetNumberValue: string
value: string
}
@ErrorHandling
@ -37,6 +38,28 @@ class FillQuery extends PureComponent<Props, State> {
value: NULL_STRING,
}
public static getDerivedStateFromProps(props: Props, state: State) {
if (state.value === props.value) {
return false
}
const isNumberValue: boolean = !isNaN(Number(props.value))
if (isNumberValue) {
return {
selected: queryFills.find(fill => fill.type === NUMBER),
currentNumberValue: props.value,
resetNumberValue: props.value,
value: props.value,
}
}
return {
selected: queryFills.find(fill => fill.type === props.value),
value: props.value,
}
}
private numberInput: HTMLElement
constructor(props) {
@ -49,11 +72,13 @@ class FillQuery extends PureComponent<Props, State> {
selected: queryFills.find(fill => fill.type === NUMBER),
currentNumberValue: props.value,
resetNumberValue: props.value,
value: props.value,
}
: {
selected: queryFills.find(fill => fill.type === props.value),
currentNumberValue: '0',
resetNumberValue: '0',
value: props.value,
}
}

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

@ -470,7 +470,7 @@ class TimeMachine extends PureComponent<Props, State> {
onDeleteQuery={this.handleDeleteQuery}
onAddQuery={this.handleAddQuery}
activeQueryIndex={activeQueryIndex}
activeQuery={this.getActiveQuery()}
activeQuery={this.activeQuery}
setActiveQueryIndex={this.handleSetActiveQueryIndex}
initialGroupByTime={AUTO_GROUP_BY}
/>
@ -483,7 +483,7 @@ class TimeMachine extends PureComponent<Props, State> {
return isInCEO ? QueryUpdateState.CEO : QueryUpdateState.DE
}
private getActiveQuery = (): QueryConfig => {
private get activeQuery(): QueryConfig {
const {activeQueryIndex} = this.state
const queriesWorkingDraft = this.queriesWorkingDraft
@ -549,7 +549,7 @@ class TimeMachine extends PureComponent<Props, State> {
private handleEditRawText = async (text: string): Promise<void> => {
const {templates, updateQueryDrafts, queryDrafts} = this.props
const id = this.getActiveQuery().id
const id = this.activeQuery.id
const url = getDeep<string>(this.source, 'links.queries', '')
const userDefinedTempVarsInQuery = this.findUserDefinedTempVarsInQuery(
@ -564,33 +564,35 @@ class TimeMachine extends PureComponent<Props, State> {
const nextQueries = queryDrafts.map(q => {
const {queryConfig} = q
if (queryConfig.id === id) {
const isQuerySupportedByExplorer = !isUsingUserDefinedTempVars
if (isUsingUserDefinedTempVars) {
if (
isUsingUserDefinedTempVars ||
_.isEmpty(newQueryConfig.database)
) {
return {
...q,
queryConfig: {
...queryConfig,
rawText: text,
status: {loading: true},
isQuerySupportedByExplorer,
isQuerySupportedByExplorer: false,
},
query: text,
text,
}
}
// preserve query range and groupBy
let groupBy = newQueryConfig.groupBy
if (text.indexOf(':interval:') >= 0) {
groupBy = queryConfig.groupBy
}
return {
...q,
queryConfig: {
...newQueryConfig,
status: {loading: true},
rawText: text,
range: queryConfig.range,
groupBy: queryConfig.groupBy,
source: queryConfig.source,
isQuerySupportedByExplorer,
groupBy,
isQuerySupportedByExplorer: true,
},
query: text,
text,
@ -653,9 +655,9 @@ class TimeMachine extends PureComponent<Props, State> {
private handleDeleteQuery = (index: number) => {
const {queryDrafts, deleteQuery, isInCEO} = this.props
const queryToDelete = queryDrafts.find((__, i) => i === index)
const activeQuery = this.getActiveQuery()
const activeQueryId = this.activeQuery.id
const activeQueryIndex = queryDrafts.findIndex(
query => query.id === activeQuery.id
query => query.id === activeQueryId
)
let newIndex: number
if (index === activeQueryIndex) {