Text updates

public/components/IconToolTip/IconToolTip.js

@@ -0,0 +1,28 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { EuiIcon, EuiToolTip } from '@elastic/eui';
+
+const IconToolTip = ({ iconType, content, position = 'top' }) => (
+  <EuiToolTip position={position} content={content}>
+    <EuiIcon type={iconType} />
+  </EuiToolTip>
+);
+
+IconToolTip.propTypes = {
+  iconType: PropTypes.string.isRequired,
+  content: PropTypes.string,
+  position: PropTypes.string,
+};
+
+export default IconToolTip;

public/components/IconToolTip/index.js

@@ -0,0 +1,14 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import IconToolTip from './IconToolTip';
+
+export default IconToolTip;

public/pages/CreateMonitor/components/MonitorExpressions/expressions/ForExpression.js

@@ -29,13 +29,16 @@ import { EuiText, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import { UNITS_OF_TIME } from './utils/constants';
 import { FormikFieldNumber, FormikSelect } from '../../../../../components/FormControls';
 import { hasError, isInvalid, validatePositiveInteger } from '../../../../../utils/validate';
+import IconToolTip from '../../../../../components/IconToolTip';
+import { TIME_RANGE_TOOLTIP_TEXT } from '../../../containers/CreateMonitor/utils/constants';
 
 class ForExpression extends Component {
   render() {
     return (
       <div>
         <EuiText size="xs">
-          <strong>Time range for the last</strong>
+          <strong>Time range for the last </strong>
+          <IconToolTip content={TIME_RANGE_TOOLTIP_TEXT} iconType="questionInCircle" />
         </EuiText>
         <EuiSpacer size={'s'} />
         <EuiFlexGroup style={{ maxWidth: 600 }}>

public/pages/CreateMonitor/components/MonitorExpressions/expressions/GroupByExpression.js

@@ -33,6 +33,11 @@ import GroupByItem from './GroupByItem';
 import { GROUP_BY_ERROR } from './utils/constants';
 import { MONITOR_TYPE } from '../../../../../utils/constants';
 import { inputLimitText } from '../../../../../utils/helpers';
+import {
+  GROUP_BY_TOOLTIP_TEXT,
+  TIME_RANGE_TOOLTIP_TEXT,
+} from '../../../containers/CreateMonitor/utils/constants';
+import IconToolTip from '../../../../../components/IconToolTip';
 
 export const MAX_NUM_QUERY_LEVEL_GROUP_BYS = 1;
 export const MAX_NUM_BUCKET_LEVEL_GROUP_BYS = 2;
@@ -103,8 +108,9 @@ class GroupByExpression extends Component {
     return (
       <div id="groupBy">
         <EuiText size="xs">
-          <strong>Group by</strong>
-          {!isBucketLevelMonitor ? <i> - optional</i> : null}
+          <strong>Group by </strong>
+          {!isBucketLevelMonitor ? <i>- optional </i> : null}
+          <IconToolTip content={GROUP_BY_TOOLTIP_TEXT} iconType="questionInCircle" />
         </EuiText>
         <EuiSpacer size={'s'} />
 

public/pages/CreateMonitor/components/MonitorExpressions/expressions/MetricExpression.js

@@ -26,14 +26,18 @@
 
 import React, { Component } from 'react';
 import { connect } from 'formik';
-import { EuiText, EuiButtonEmpty, EuiSpacer, EuiBadge } from '@elastic/eui';
+import { EuiText, EuiButtonEmpty, EuiSpacer, EuiBadge, EuiToolTip, EuiIcon } from '@elastic/eui';
 import { getIndexFields } from './utils/dataTypes';
 import { getMetricExpressionAllowedTypes, validateAggregationsDuplicates } from './utils/helpers';
 import _ from 'lodash';
-import { FORMIK_INITIAL_AGG_VALUES } from '../../../containers/CreateMonitor/utils/constants';
+import {
+  FORMIK_INITIAL_AGG_VALUES,
+  METRIC_TOOLTIP_TEXT,
+} from '../../../containers/CreateMonitor/utils/constants';
 import { MetricItem } from './index';
 import { MONITOR_TYPE } from '../../../../../utils/constants';
 import { inputLimitText } from '../../../../../utils/helpers';
+import IconToolTip from '../../../../../components/IconToolTip';
 
 export const MAX_NUM_QUERY_LEVEL_METRICS = 1;
 export const MAX_NUM_BUCKET_LEVEL_METRICS = 5;
@@ -111,7 +115,8 @@ class MetricExpression extends Component {
       <div id="aggregations">
         <EuiText size="xs">
           <strong>Metrics</strong>
-          <i> - optional</i>
+          <i> - optional </i>
+          <IconToolTip content={METRIC_TOOLTIP_TEXT} iconType="questionInCircle" />
         </EuiText>
         <EuiSpacer size="s" />
 

public/pages/CreateMonitor/components/MonitorExpressions/expressions/WhereExpression.js

@@ -63,14 +63,19 @@ import {
   FormikFieldText,
 } from '../../../../../components/FormControls';
 import { getFilteredIndexFields, getIndexFields } from './utils/dataTypes';
-import { FORMIK_INITIAL_VALUES } from '../../../containers/CreateMonitor/utils/constants';
+import {
+  FILTERS_TOOLTIP_TEXT,
+  FORMIK_INITIAL_VALUES,
+  TIME_RANGE_TOOLTIP_TEXT,
+} from '../../../containers/CreateMonitor/utils/constants';
 import { DATA_TYPES } from '../../../../../utils/constants';
 import {
   TRIGGER_COMPARISON_OPERATORS,
   TRIGGER_OPERATORS_MAP,
 } from '../../../../CreateTrigger/containers/DefineBucketLevelTrigger/DefineBucketLevelTrigger';
 import { FORMIK_INITIAL_TRIGGER_VALUES } from '../../../../CreateTrigger/containers/CreateTrigger/utils/constants';
 import { inputLimitText } from '../../../../../utils/helpers';
+import IconToolTip from '../../../../../components/IconToolTip';
 
 const propTypes = {
   formik: PropTypes.object.isRequired,
@@ -243,7 +248,8 @@ class WhereExpression extends Component {
       <div>
         <EuiText size="xs">
           <strong>{whereFilterHeader}</strong>
-          <i> - optional</i>
+          <i> - optional </i>
+          <IconToolTip content={FILTERS_TOOLTIP_TEXT} iconType="questionInCircle" />
         </EuiText>
         <EuiSpacer size={'s'} />
 

public/pages/CreateMonitor/components/MonitorType/MonitorType.js

@@ -44,14 +44,14 @@ const onChangeDefinition = (e, form) => {
 
 const queryLevelDescription = (
   <EuiText color={'subdued'} size={'xs'} style={{ paddingBottom: '10px', paddingTop: '0px' }}>
-    Per query monitors run a specified query and allow you to define triggers based on the result of
-    that query.
+    Per query monitors run a specified query and define triggers that check the results of that
+    query.
   </EuiText>
 );
 
 const bucketLevelDescription = (
   <EuiText color={'subdued'} size={'xs'} style={{ paddingBottom: '10px', paddingTop: '0px' }}>
-    Per bucket monitors allow you to group results into buckets and define triggers that run per
+    Per bucket monitors allow you to group results into buckets and define triggers that check each
     bucket.
   </EuiText>
 );

public/pages/CreateMonitor/components/Schedule/Schedule.js

@@ -38,9 +38,9 @@ const Schedule = ({ isAd }) => (
     {isAd ? (
       <EuiText color={'subdued'} size={'xs'} style={{ maxWidth: '400px' }}>
         <p>
-          Define how often the monitor collects data and determines how often you may receive
-          alerts. We recommend scheduling the monitor at least twice the detector interval to avoid
-          missing anomaly results.
+          Define how often the monitor collects data and how often you may receive alerts. We
+          recommend setting this frequency to two times the detector interval to avoid missing
+          anomalous results from delayed processing time.
         </p>
       </EuiText>
     ) : null}

public/pages/CreateMonitor/containers/CreateMonitor/utils/constants.js

@@ -75,3 +75,9 @@ export const FORMIK_INITIAL_AGG_VALUES = {
 };
 
 export const DEFAULT_COMPOSITE_AGG_SIZE = 50;
+
+export const METRIC_TOOLTIP_TEXT = 'Extracted statistics such as simple calculations of data.';
+export const TIME_RANGE_TOOLTIP_TEXT = 'The time frame of data the plugin should monitor.';
+export const FILTERS_TOOLTIP_TEXT =
+  'Use a filter to retrieve a subset of the original data source.';
+export const GROUP_BY_TOOLTIP_TEXT = 'Specify a field whose every unique value can trigger alerts.';

public/pages/CreateMonitor/containers/MonitorDetails/MonitorDetails.js

@@ -30,7 +30,7 @@ import ContentPanel from '../../../../components/ContentPanel';
 import FormikFieldText from '../../../../components/FormControls/FormikFieldText';
 import { hasError, isInvalid, required, validateMonitorName } from '../../../../utils/validate';
 import Schedule from '../../components/Schedule';
-import MonitorDefinitionCard from '../../components/MonitorDefinitionCards';
+import MonitorDefinitionCard from '../../components/MonitorDefinitionCard';
 import MonitorType from '../../components/MonitorType';
 import AnomalyDetectors from '../AnomalyDetectors/AnomalyDetectors';
 
@@ -62,7 +62,6 @@ function renderEmptyMessage(message) {
   );
 }
 
-// TODO: Make sure that resetResponse is defined in Query and passed to MonitorDetails
 const MonitorDetails = ({
   values,
   errors,

release-notes/opensearch-alerting-dashboards-plugin.release-notes-1.1.0.0.md

@@ -38,6 +38,7 @@ Compatible with OpenSearch Dashboards 1.1.0
 
 * Show Error Toast Message whenever action execution fails from backend due to incorrect configurations ([#22](https://github.com/opensearch-project/alerting-dashboards-plugin/pull/22))
 * Bucket level alerting dev UX review feedback ([#93](https://github.com/opensearch-project/alerting-dashboards-plugin/pull/93))
+* Text updates ([#105](https://github.com/opensearch-project/alerting-dashboards-plugin/pull/105))
 
 ### Maintenance