Skip to content
This repository has been archived by the owner on Aug 2, 2022. It is now read-only.

Commit

Permalink
add where clause filters support on visual monitor (#42)
Browse files Browse the repository at this point in the history
* Support where clause filters in visual graph monitor Closes #42
  • Loading branch information
mihirsoni authored May 7, 2019
1 parent 8c1cef0 commit 6668b59
Show file tree
Hide file tree
Showing 23 changed files with 1,172 additions and 67 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,21 @@
import React, { Component } from 'react';
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';

import { ForExpression, OfExpression, OverExpression, WhenExpression } from './expressions';
import {
ForExpression,
OfExpression,
OverExpression,
WhenExpression,
WhereExpression,
} from './expressions';

export const DEFAULT_CLOSED_STATES = {
WHEN: false,
OF_FIELD: false,
THRESHOLD: false,
OVER: false,
FOR_THE_LAST: false,
WHERE: false,
};

export default class MonitorExpressions extends Component {
Expand Down Expand Up @@ -83,6 +90,10 @@ export default class MonitorExpressions extends Component {
<EuiFlexItem grow={false}>
<ForExpression {...this.getExpressionProps()} />
</EuiFlexItem>

<EuiFlexItem grow={false}>
<WhereExpression {...this.getExpressionProps()} dataTypes={dataTypes} />
</EuiFlexItem>
</EuiFlexGroup>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -88,5 +88,33 @@ exports[`MonitorExpressions renders 1`] = `
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
class="euiPopover euiPopover--anchorDownLeft euiPopover--withTitle"
id="where-popover"
>
<div
class="euiPopover__anchor"
>
<button
class="euiExpression euiExpression-isClickable euiExpression-isUppercase euiExpression--secondary"
>
<span
class="euiExpression__description"
>
where
</span>
<span
class="euiExpression__value"
>
Select a field
</span>
</button>
</div>
</div>
</div>
</div>
`;
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ import { EuiPopover, EuiExpression } from '@elastic/eui';

import { FormikComboBox } from '../../../../../components/FormControls';
import { POPOVER_STYLE, EXPRESSION_STYLE, Expressions } from './utils/constants';
import { getOptions } from './utils/dataTypes';
import { getOfExpressionAllowedTypes } from './utils/helpers';
import { getIndexFields } from './utils/dataTypes';

// TODO: EuiComboBox has an internal setState issue, waiting for EUI to fix it, remove this TODO when it is fixed

Expand Down Expand Up @@ -60,7 +61,7 @@ class OfExpression extends Component {
openExpression,
dataTypes,
} = this.props;
const options = getOptions(dataTypes, values);
const options = getIndexFields(dataTypes, getOfExpressionAllowedTypes(values));
const expressionWidth =
Math.max(
...options.map(({ options }) =>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,228 @@
/*
* Copyright 2019 Amazon.com, Inc. or its affiliates. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License").
* You may not use this file except in compliance with the License.
* A copy of the License is located at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* or in the "license" file accompanying this file. This file is distributed
* on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
* express or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'formik';
import { EuiFlexGroup, EuiFlexItem, EuiPopover, EuiExpression, EuiText } from '@elastic/eui';
import _ from 'lodash';
import {
Expressions,
POPOVER_STYLE,
EXPRESSION_STYLE,
WHERE_BOOLEAN_FILTERS,
} from './utils/constants';
import {
getOperators,
displayText,
validateRange,
isNullOperator,
isRangeOperator,
} from './utils/whereHelpers';
import { isInvalid, required } from '../../../../../utils/validate';
import {
FormikComboBox,
FormikSelect,
FormikFieldNumber,
FormikFieldText,
} from '../../../../../components/FormControls';
import { getIndexFields } from './utils/dataTypes';
import { FORMIK_INITIAL_VALUES } from '../../../containers/CreateMonitor/utils/constants';
import { DATA_TYPES } from '../../../../../utils/constants';

const propTypes = {
formik: PropTypes.object.isRequired,
dataTypes: PropTypes.object.isRequired,
onMadeChanges: PropTypes.func.isRequired,
openedStates: PropTypes.object.isRequired,
openExpression: PropTypes.func.isRequired,
};

class WhereExpression extends Component {
constructor(props) {
super(props);
}

handleFieldChange = (option, field, form) => {
this.props.onMadeChanges();
this.resetValues();
form.setFieldValue(field.name, option);
// User can remove where condition
if (option.length === 0) {
this.resetValues();
form.setFieldError('where', undefined);
}
};

handleOperatorChange = (e, field) => {
this.props.onMadeChanges();
field.onChange(e);
};

handleChangeWrapper = (e, field) => {
this.props.onMadeChanges();
field.onChange(e);
};

handleClosePopOver = async () => {
const {
formik: { values },
closeExpression,
} = this.props;
// Explicitly invoking validation, this component unmount after it closes.
if (values.where.fieldName.length > 0) {
await this.props.formik.validateForm();
}
closeExpression(Expressions.WHERE);
};

resetValues = () => {
const { formik } = this.props;
formik.setValues({
...formik.values,
where: { ...FORMIK_INITIAL_VALUES.where },
});
};

renderBetweenAnd = () => {
const {
formik: { values },
} = this.props;
return (
<EuiFlexGroup alignItems="center">
<EuiFlexItem>
<FormikFieldNumber
name="where.fieldRangeStart"
fieldProps={{
validate: value => validateRange(value, values.where),
}}
inputProps={{ onChange: this.handleChangeWrapper, isInvalid }}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiText textAlign="center">TO</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<FormikFieldNumber
name="where.fieldRangeEnd"
fieldProps={{
validate: value => validateRange(value, values.where),
}}
inputProps={{ onChange: this.handleChangeWrapper, isInvalid }}
/>
</EuiFlexItem>
</EuiFlexGroup>
);
};

renderValueField = (fieldType, fieldOperator) => {
if (fieldType == DATA_TYPES.NUMBER) {
return isRangeOperator(fieldOperator) ? (
this.renderBetweenAnd()
) : (
<FormikFieldNumber
name="where.fieldValue"
fieldProps={{ validate: required }}
inputProps={{ onChange: this.handleChangeWrapper, isInvalid }}
/>
);
} else if (fieldType == DATA_TYPES.BOOLEAN) {
return (
<FormikSelect
name="where.fieldValue"
fieldProps={{ validate: required }}
inputProps={{
onChange: this.handleChangeWrapper,
options: WHERE_BOOLEAN_FILTERS,
isInvalid,
}}
/>
);
} else {
return (
<FormikFieldText
name="where.fieldValue"
fieldProps={{ validate: required }}
inputProps={{ onChange: this.handleChangeWrapper, isInvalid }}
/>
);
}
};

render() {
const {
formik: { values },
openedStates,
openExpression,
dataTypes,
} = this.props;
const indexFields = getIndexFields(dataTypes, ['number', 'text', 'keyword', 'boolean']);
const fieldType = _.get(values, 'where.fieldName[0].type', 'number');
const fieldOperator = _.get(values, 'where.operator', 'is');

return (
<EuiPopover
id="where-popover"
button={
<EuiExpression
description="where"
value={displayText(values.where)}
isActive={openedStates.WHERE}
onClick={() => openExpression(Expressions.WHERE)}
/>
}
isOpen={openedStates.WHERE}
closePopover={this.handleClosePopOver}
panelPaddingSize="none"
ownFocus
withTitle
anchorPosition="downLeft"
>
<div style={POPOVER_STYLE}>
<EuiFlexGroup style={{ ...EXPRESSION_STYLE }}>
<EuiFlexItem grow={false} style={{ width: 200 }}>
<FormikComboBox
name="where.fieldName"
inputProps={{
placeholder: 'Select a field',
options: indexFields,
onChange: this.handleFieldChange,
isClearable: false,
singleSelection: { asPlainText: true },
}}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<FormikSelect
name="where.operator"
inputProps={{
onChange: this.handleOperatorChange,
options: getOperators(fieldType),
}}
/>
</EuiFlexItem>
{!isNullOperator(fieldOperator) && (
<EuiFlexItem>{this.renderValueField(fieldType, fieldOperator)}</EuiFlexItem>
)}
</EuiFlexGroup>
</div>
</EuiPopover>
);
}
}

WhereExpression.propTypes = propTypes;

export default connect(WhereExpression);
Loading

0 comments on commit 6668b59

Please sign in to comment.