feat(ui): TE-2363 allow user to opt in to be notified for historical anomalies when creating a subscription

thirdeye-ui/src/app/components/info-label/info-label.component.tsx

@@ -0,0 +1,57 @@
+/*
+ * Copyright 2024 StarTree Inc
+ *
+ * Licensed under the StarTree Community License (the "License"); you may not use
+ * this file except in compliance with the License. You may obtain a copy of the
+ * License at http://www.startree.ai/legal/startree-community-license
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the
+ * License is distributed on an "AS IS" BASIS, WITHOUT * WARRANTIES OF ANY KIND,
+ * either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under
+ * the License.
+ */
+/*
+There is a component similar to this but that is scoped to alert-wizard-v2 component.
+Since this is a general purpose component we should shift that to here eventually.
+Info icon should always be sitting a bit on the top side,
+and should not be aligned with the rest of the element,
+which is what is happening with the existing component.
+*/
+import React, { FunctionComponent } from "react";
+import { InfoLabelProps } from "./info-label.interfaces";
+import { Grid, Tooltip, Typography } from "@material-ui/core";
+import InfoIconOutlined from "@material-ui/icons/InfoOutlined";
+
+export const InfoLabel: FunctionComponent<InfoLabelProps> = ({
+    label,
+    tooltipText = "",
+}) => {
+    return (
+        <Grid container alignItems="center">
+            <Grid item lg={12} md={12} sm={12} xs={12}>
+                <Typography variant="body2">
+                    {label}
+                    {tooltipText && (
+                        <Tooltip
+                            arrow
+                            interactive
+                            placement="top"
+                            title={
+                                <Typography variant="caption">
+                                    {tooltipText}
+                                </Typography>
+                            }
+                        >
+                            <InfoIconOutlined
+                                color="secondary"
+                                fontSize="small"
+                            />
+                        </Tooltip>
+                    )}
+                </Typography>
+            </Grid>
+        </Grid>
+    );
+};

thirdeye-ui/src/app/components/info-label/info-label.interfaces.tsx

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2024 StarTree Inc
+ *
+ * Licensed under the StarTree Community License (the "License"); you may not use
+ * this file except in compliance with the License. You may obtain a copy of the
+ * License at http://www.startree.ai/legal/startree-community-license
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the
+ * License is distributed on an "AS IS" BASIS, WITHOUT * WARRANTIES OF ANY KIND,
+ * either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under
+ * the License.
+ */
+export interface InfoLabelProps {
+    label: string;
+    tooltipText?: string;
+}

thirdeye-ui/src/app/components/subscription-group-wizard/subscription-group-details/properties-form/properties-form.component.tsx

@@ -18,17 +18,19 @@ import {
     CardContent,
     CardHeader,
     Grid,
+    Switch,
     TextField,
 } from "@material-ui/core";
 import React, { FunctionComponent } from "react";
 import { useTranslation } from "react-i18next";
 import { CronEditor } from "../../../cron-editor-v1/cron-editor-v1.component";
 import { InputSection } from "../../../form-basics/input-section/input-section.component";
 import { PropertiesFormProps } from "./properties-form.interfaces";
+import { InfoLabel } from "../../../info-label/info-label.component";
 
 // Refer: SubscriptionGroupPropertiesForm
 export const PropertiesForm: FunctionComponent<PropertiesFormProps> = ({
-    values: { name, cron },
+    values: { name, cron, notifyHistoricalAnomalies },
     onChange,
     customHeader,
 }) => {
@@ -42,6 +44,12 @@ export const PropertiesForm: FunctionComponent<PropertiesFormProps> = ({
         onChange((stateProp) => ({ ...stateProp, name }));
     };
 
+    const handleUpdateNotifyHistoricAnomalies = (
+        notifyHistoricalAnomalies: boolean
+    ): void => {
+        onChange((stateProp) => ({ ...stateProp, notifyHistoricalAnomalies }));
+    };
+
     return (
         <Grid item xs={12}>
             <Card>
@@ -77,6 +85,26 @@ export const PropertiesForm: FunctionComponent<PropertiesFormProps> = ({
                         cron={cron}
                         handleUpdateCron={handleUpdateCron}
                     />
+                    <InputSection
+                        inputComponent={
+                            <Switch
+                                defaultChecked={!!notifyHistoricalAnomalies}
+                                onChange={(e) => {
+                                    handleUpdateNotifyHistoricAnomalies(
+                                        e.target.checked
+                                    );
+                                }}
+                            />
+                        }
+                        labelComponent={
+                            <InfoLabel
+                                label={t("label.notifyHistoricalAnomalies")}
+                                tooltipText={t(
+                                    "info.notifyHistoricalAnomalies"
+                                )}
+                            />
+                        }
+                    />
                 </CardContent>
             </Card>
         </Grid>

thirdeye-ui/src/app/components/subscription-group-wizard/subscription-group-details/properties-form/properties-form.interfaces.ts

@@ -19,6 +19,7 @@ import { SubscriptionGroup } from "../../../../rest/dto/subscription-group.inter
 interface FormValues {
     name: string;
     cron: string;
+    notifyHistoricalAnomalies?: boolean;
 }
 
 export interface PropertiesFormProps {

thirdeye-ui/src/app/components/subscription-group-wizard/subscription-group-details/subscription-group-details.component.tsx

@@ -23,6 +23,9 @@ export const SubscriptionGroupDetails: FunctionComponent<SubscriptionGroupDetail
         const propertiesFormValues = {
             cron: subscriptionGroup.cron,
             name: subscriptionGroup.name,
+            notifyHistoricalAnomalies: Boolean(
+                subscriptionGroup.notifyHistoricalAnomalies
+            ),
         };
 
         return (

thirdeye-ui/src/app/locale/languages/en-us.json

@@ -45,6 +45,9 @@
         "unknown": "Unknown error occurred.",
         "unknown-rca-algorithm": "Unknown error running the RCA algorithm."
     },
+    "info": {
+        "notifyHistoricalAnomalies": "By default, notifications are only sent for anomalies detected on times greater than the alert creation time. If enabled, notifications will also be sent for anomalies detected on times less than the alert creation time."
+    },
     "label": {
         "1-minute": "1 Minute",
         "15-minutes": "15 Minutes",
@@ -375,6 +378,7 @@
         "none": "None",
         "not-saved": "not saved",
         "notifications": "notifications",
+        "notifyHistoricalAnomalies": "Notify Historical Anomalies",
         "num-dimensions": "{{num}} dimensions",
         "ok": "Ok",
         "onboard": "Onboard",

thirdeye-ui/src/app/rest/dto/subscription-group.interfaces.ts

@@ -33,6 +33,7 @@ export interface SubscriptionGroup {
     owner: User;
     notificationSchemes?: NotificationSchemes;
     specs: NotificationSpec[];
+    notifyHistoricalAnomalies?: boolean; // optional as its only coming when this property is set
 }
 
 export enum SpecType {