Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix various bugs #504

Merged
merged 8 commits into from
Jun 8, 2023
Merged

Fix various bugs #504

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8c6a8bd
fix bug bash bugs
jackiehanyang Jun 7, 2023
a9f28c1
bug fix
jackiehanyang Jun 7, 2023
be37b70
yarn prettier
jackiehanyang Jun 7, 2023
dc15cff
bug fix
jackiehanyang Jun 7, 2023
c233860
bug fixes
jackiehanyang Jun 8, 2023
b8af76e
clean up code
jackiehanyang Jun 8, 2023
12f25c4
Merge branch 'featureAnywhere' into bugbash
jackiehanyang Jun 8, 2023
9cf2919
removed unused snapshot
jackiehanyang Jun 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 27 additions & 13 deletions public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AddAnomalyDetector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ import {
import {
focusOnFirstWrongFeature,
initialFeatureValue,
validateFeatures,
ohltyler marked this conversation as resolved.
Show resolved Hide resolved
} from '../../../../public/pages/ConfigureModel/utils/helpers';
import {
getIndices,
Expand Down Expand Up @@ -157,11 +158,22 @@ function AddAnomalyDetector({

const notifications = getNotifications();
const handleValidationAndSubmit = (formikProps) => {
if (!isEmpty(formikProps.errors)) {
focusOnFirstWrongFeature(formikProps.errors, formikProps.setFieldTouched);
notifications.toasts.addDanger('One or more input fields is invalid');
if (formikProps.values.featureList.length !== 0) {
amitgalitz marked this conversation as resolved.
Show resolved Hide resolved
formikProps.setFieldTouched('featureList', true);
formikProps.validateForm().then((errors) => {
if (!isEmpty(errors)) {
focusOnFirstWrongFeature(errors, formikProps.setFieldTouched);
notifications.toasts.addDanger(
'One or more input fields is invalid.'
);
} else {
handleSubmit(formikProps);
}
});
} else {
handleSubmit(formikProps);
notifications.toasts.addDanger(
'One or more features are required to check for anomalies.'
ohltyler marked this conversation as resolved.
Show resolved Hide resolved
);
}
};

Expand Down Expand Up @@ -203,9 +215,9 @@ function AddAnomalyDetector({
formikProps.setSubmitting(true);
try {
const detectorToCreate = formikToDetector(formikProps.values);
dispatch(createDetector(detectorToCreate))
await dispatch(createDetector(detectorToCreate))
.then(async (response) => {
dispatch(startDetector(response.response.id))
await dispatch(startDetector(response.response.id))
.then((startDetectorResponse) => {})
.catch((err: any) => {
notifications.toasts.addDanger(
Expand All @@ -222,7 +234,7 @@ function AddAnomalyDetector({
const augmentVisSavedObjectToCreate: ISavedAugmentVis =
getAugmentVisSavedObject(detectorId);

createAugmentVisSavedObject(
await createAugmentVisSavedObject(
augmentVisSavedObjectToCreate,
savedObjectLoader,
uiSettings
Expand Down Expand Up @@ -426,6 +438,7 @@ function AddAnomalyDetector({
initialValues={initialDetectorValue}
onSubmit={handleSubmit}
validateOnChange={true}
validate={validateFeatures}
ohltyler marked this conversation as resolved.
Show resolved Hide resolved
>
{(formikProps) => (
<>
Expand Down Expand Up @@ -532,8 +545,8 @@ function AddAnomalyDetector({
subTitle={
<EuiText size="m">
<p>
Detector interval: {intervalValue} minutes; Window
delay: {delayValue} minutes
Detector interval: {intervalValue} minute(s); Window
delay: {delayValue} minute(s)
</p>
</EuiText>
}
Expand Down Expand Up @@ -584,7 +597,7 @@ function AddAnomalyDetector({
</EuiFlexItem>
<EuiFlexItem>
<EuiText>
<p className="minutes">minutes</p>
<p className="minutes">minute(s)</p>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
Expand Down Expand Up @@ -618,7 +631,7 @@ function AddAnomalyDetector({
</EuiFlexItem>
<EuiFlexItem>
<EuiText>
<p className="minutes">minutes</p>
<p className="minutes">minute(s)</p>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
Expand Down Expand Up @@ -788,8 +801,6 @@ function AddAnomalyDetector({
isOpen={accordionsOpen.modelFeatures}
onToggle={() => onAccordionToggle('modelFeatures')}
>
<EuiSpacer size="s" />

<FieldArray name="featureList">
{({
push,
Expand All @@ -811,6 +822,8 @@ function AddAnomalyDetector({
/>
)
)}

<EuiSpacer size="m" />
<EuiPanel paddingSize="none">
<EuiButton
className="featureButton"
Expand Down Expand Up @@ -841,6 +854,7 @@ function AddAnomalyDetector({
}}
</FieldArray>
</EnhancedAccordion>
<EuiSpacer size="m" />
</div>
)}
</div>
Expand Down
57 changes: 41 additions & 16 deletions public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/helpers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import { dispatch } from 'd3';
import { matchDetector } from 'public/redux/reducers/ad';
import { validateDetectorName } from 'public/utils/utils';
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import { FEATURE_TYPE } from '../../../../public/models/interfaces';
import { FeaturesFormikValues } from '../../../../public/pages/ConfigureModel/models/interfaces';
import { find, get, isEmpty, snakeCase } from 'lodash';
import { find, snakeCase } from 'lodash';
import { AGGREGATION_TYPES } from '../../../../public/pages/ConfigureModel/utils/constants';

export function visFeatureListToFormik(
featureList,
Expand All @@ -17,7 +20,7 @@ export function visFeatureListToFormik(
featureType: FEATURE_TYPE.SIMPLE,
importance: 1,
newFeature: false,
aggregationBy: 'sum',
aggregationBy: visAggregationTypeToFormik(feature),
aggregationOf: visAggregationToFormik(feature),
aggregationQuery: JSON.stringify(
visAggregationQueryToFormik(feature, seriesParams)
Expand All @@ -44,18 +47,40 @@ const getFeatureNameFromVisParams = (id, seriesParams) => {
};

function visAggregationToFormik(value) {
return [
{
label: value.params.field.name,
type: 'number',
},
];
if (Object.values(value.params).length !== 0) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we add a regression test for this?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sure, will add a test case for this later. Looked up react best practice guidance. It seems like this is the best practice on how to check if an array is empty as react doesn't have built-in Array.isEmpty() method

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just meant adding a test where this conditional is false. Also, you may use lodash isEmpty() fn that we use other places in the plugin

return [
{
label: value.params?.field?.name,
type: value.type,
},
];
}
// for count type of vis, there's no field name in the embeddable schema
jackiehanyang marked this conversation as resolved.
Show resolved Hide resolved
return [];
}

function visAggregationQueryToFormik(value, seriesParams) {
return {
[snakeCase(getFeatureNameFromVisParams(value.id, seriesParams))]: {
sum: { field: value.params.field.name },
},
};
if (Object.values(value.params).length !== 0) {
return {
[snakeCase(getFeatureNameFromVisParams(value.id, seriesParams))]: {
[visAggregationTypeToFormik(value)]: {
field: value.params?.field?.name,
},
},
};
}
// for count type of vis, there's no field name in the embeddable schema
ohltyler marked this conversation as resolved.
Show resolved Hide resolved
// return '' as the csutom expression query
jackiehanyang marked this conversation as resolved.
Show resolved Hide resolved
return '';
}

function visAggregationTypeToFormik(feature) {
const aggType = feature.__type.name;
if (AGGREGATION_TYPES.some((type) => type.value === aggType)) {
return aggType;
}
if (aggType === 'count') {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we define count as value_count in our code across the board?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes https://github.com/opensearch-project/anomaly-detection-dashboards-plugin/blob/main/public/pages/ConfigureModel/utils/constants.tsx#L58

return 'value_count';
}
return 'sum';
}
15 changes: 14 additions & 1 deletion public/pages/ConfigureModel/components/FeatureAccordion/FeatureAccordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
EuiCheckbox,
EuiButtonIcon,
} from '@elastic/eui';
import './styles.scss';
import { Field, FieldProps } from 'formik';
import {
required,
Expand Down Expand Up @@ -80,6 +81,18 @@ export const FeatureAccordion = (props: FeatureAccordionProps) => {
};

const featureButtonContent = (feature: any, index: number) => {
if (props.displayMode === 'flyout') {
return (
<div id={`featureAccordionHeaders.${index}`}>
<EuiTitle size="xxs">
<h5 style={{ marginTop: '-5px', fontWeight: 400 }}>
{feature.featureName ? feature.featureName : 'Add feature'}
</h5>
</EuiTitle>
{showSubtitle ? showFeatureDescription(feature) : null}
</div>
);
}
return (
<div id={`featureAccordionHeaders.${index}`}>
<EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
Expand Down Expand Up @@ -125,7 +138,7 @@ export const FeatureAccordion = (props: FeatureAccordionProps) => {
buttonClassName={
props.index === 0
? 'euiAccordionForm__noTopPaddingButton'
: 'euiAccordionForm__button'
: 'euiFormAccordion_button'
}
className="euiAccordion__noTopBorder"
paddingSize="l"
Expand Down
3 changes: 3 additions & 0 deletions public/pages/ConfigureModel/components/FeatureAccordion/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.euiFormAccordion_button {
padding: 20px 16px 0 0;
}
4 changes: 2 additions & 2 deletions public/utils/contextMenu/getActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { FLYOUT_MODES } from '../../../public/components/FeatureAnywhereContextM
const grouping: Action['grouping'] = [
{
id: 'ad-dashboard-context-menu',
getDisplayName: () => 'Anomaly Detector',
getDisplayName: () => 'Anomaly Detection',
getIconType: () => APM_TRACE,
},
];
Expand Down Expand Up @@ -54,7 +54,7 @@ export const getActions = () => {
title: i18n.translate(
'dashboard.actions.adMenuItem.createAnomalyDetector.displayName',
{
defaultMessage: 'Create anomaly detector',
defaultMessage: 'Add anomaly detector',
}
),
icon: 'plusInCircle' as EuiIconType,
Expand Down