alert list refatored code

thirdeye-ui/src/app/components/revamp/alert/alert-list/alert-accuracy-colored/index.tsx

@@ -0,0 +1,155 @@
+/*
+ * Copyright 2025 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.
+ */
+import React, { FunctionComponent, useEffect, useMemo } from "react";
+import { SkeletonV1, TooltipV1 } from "../../../../../platform/components";
+import { Typography, useTheme } from "@material-ui/core";
+import { LoadingErrorStateSwitch } from "../../../../page-states/loading-error-state-switch/loading-error-state-switch.component";
+import { getAlertAccuracyData } from "../../../../../utils/alerts/alerts.util";
+import { AlertAccuracyColoredProps } from "./interface";
+import { useInView } from "react-intersection-observer";
+import { useTranslation } from "react-i18next";
+import { capitalize } from "lodash";
+import { AnomalyFeedbackType } from "../../../../../rest/dto/anomaly.interfaces";
+
+export const AlertAccuracyColored: FunctionComponent<AlertAccuracyColoredProps> =
+    ({
+        typographyProps,
+        label,
+        defaultSkeletonProps,
+        alertStats,
+        triggerViewCallback,
+    }) => {
+        const theme = useTheme();
+        const { t } = useTranslation();
+
+        const { ref, inView } = useInView({
+            triggerOnce: true,
+            delay: 250,
+            threshold: 1,
+        });
+
+        useEffect(() => {
+            if (inView && triggerViewCallback) {
+                triggerViewCallback();
+            }
+        }, [inView]);
+
+        const { noAnomalyData, typographyColor, accuracyString } =
+            useMemo(() => {
+                if (alertStats) {
+                    const { accuracy, colorScheme, noAnomalyData } =
+                        getAlertAccuracyData(alertStats);
+
+                    const accuracyString = `${(100 * accuracy).toFixed(2)}%`;
+
+                    const color = theme.palette[colorScheme].main;
+
+                    return {
+                        noAnomalyData,
+                        typographyColor: !noAnomalyData ? { color } : undefined,
+                        accuracyString,
+                    };
+                }
+
+                return {
+                    noAnomalyData: undefined,
+                    typographyColor: undefined,
+                    accuracyString: undefined,
+                };
+            }, [alertStats]);
+
+        let displayValue: string | undefined = capitalize(
+            t("message.no-entity-data", {
+                entity: t("label.anomaly"),
+            })
+        );
+
+        if (!noAnomalyData) {
+            if (label) {
+                displayValue = `${label}: ${accuracyString}`;
+            } else {
+                displayValue = accuracyString;
+            }
+        }
+
+        return (
+            <TooltipV1
+                delay={50}
+                placement="bottom"
+                title={
+                    !!alertStats && (
+                        <table>
+                            <tbody>
+                                <tr>
+                                    <td>
+                                        {t("message.total-reported-anomalies")}
+                                    </td>
+                                    <td>{alertStats?.stats?.totalCount}</td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        {t("message.anomalies-with-feedback")}
+                                    </td>
+                                    <td>
+                                        {alertStats?.stats?.countWithFeedback}
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        {t("message.misreported-anomalies")}
+                                    </td>
+                                    <td>
+                                        {
+                                            alertStats?.stats?.feedbackStats[
+                                                AnomalyFeedbackType.NOT_ANOMALY
+                                            ]
+                                        }
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    )
+                }
+            >
+                <div>
+                    <Typography
+                        color="secondary"
+                        innerRef={ref}
+                        style={{
+                            ...typographyColor,
+                            ...(typographyProps?.color
+                                ? { color: typographyProps.color }
+                                : {}),
+                        }}
+                        variant="body1"
+                        {...typographyProps}
+                    >
+                        <LoadingErrorStateSwitch
+                            isError={false}
+                            isLoading={alertStats?.loading}
+                            loadingState={
+                                <SkeletonV1
+                                    width={50}
+                                    {...defaultSkeletonProps}
+                                />
+                            }
+                        >
+                            <>{displayValue}</>
+                        </LoadingErrorStateSwitch>
+                    </Typography>
+                </div>
+            </TooltipV1>
+        );
+    };

thirdeye-ui/src/app/components/revamp/alert/alert-list/alert-accuracy-colored/interface.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2025 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.
+ */
+import type { TypographyProps } from "@material-ui/core";
+import type { ReactElement } from "react";
+import { SkeletonV1Props } from "../../../../../platform/components/skeleton-v1/skeleton-v1.interfaces";
+
+export interface AlertAccuracyColoredProps {
+    alertId: number;
+    renderCustomLoading?: ReactElement;
+    defaultSkeletonProps?: SkeletonV1Props;
+    typographyProps?: Partial<TypographyProps>;
+    label?: string;
+    start?: number;
+    end?: number;
+    alertStats?: any;
+    triggerViewCallback?: any;
+}

thirdeye-ui/src/app/components/revamp/alert/alert-list/alert-card/index.tsx

@@ -0,0 +1,129 @@
+/*
+ * Copyright 2025 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.
+ */
+import { Grid, Typography } from "@material-ui/core";
+import { forEach } from "lodash";
+import React, { FunctionComponent } from "react";
+import { useTranslation } from "react-i18next";
+import { UiAlert } from "../../../../../rest/dto/ui-alert.interfaces";
+import { useAlertCardStyles } from "./styles";
+import { NoDataIndicator } from "../../../../no-data-indicator/no-data-indicator.component";
+
+type AlertCardV1Props = {
+    uiAlert: UiAlert;
+    showCreatedBy?: boolean;
+};
+
+export const AlertCardV1: FunctionComponent<AlertCardV1Props> = (
+    props: AlertCardV1Props
+) => {
+    const classes = useAlertCardStyles();
+    const { t } = useTranslation();
+
+    const getAllSubscriptionGroupsName = (uiAlert: UiAlert): string => {
+        const subScriptingGroups: Array<string | number> = [];
+        forEach(uiAlert.subscriptionGroups, (Obj) => {
+            if (Obj.name) {
+                subScriptingGroups.push(Obj.name);
+            }
+        });
+
+        return subScriptingGroups.join(", ");
+    };
+
+    const getDetectionTypes = (uiAlert: UiAlert): string => {
+        return uiAlert.detectionTypes.join(", ");
+    };
+
+    if (!props.uiAlert) {
+        return <NoDataIndicator />;
+    }
+
+    return (
+        <Grid container>
+            {/* Created By */}
+            {props.showCreatedBy && (
+                <Grid item xs={6}>
+                    <Grid item>
+                        <Typography
+                            className={classes.fontMedium}
+                            variant="body2"
+                        >
+                            {t("label.created-by")}:
+                        </Typography>
+                    </Grid>
+                    <Grid item>
+                        <Typography variant="body2">
+                            {props.uiAlert.createdBy || "-"}
+                        </Typography>
+                    </Grid>
+                </Grid>
+            )}
+
+            {/* Detection Type */}
+            {props.uiAlert.detectionTypes.length > 0 && (
+                <Grid item xs={6}>
+                    <Grid item>
+                        <Typography
+                            className={classes.fontMedium}
+                            variant="body2"
+                        >
+                            {t("label.detection-type")}:
+                        </Typography>
+                    </Grid>
+
+                    <Grid item>
+                        <Typography variant="body2">
+                            {getDetectionTypes(props.uiAlert) || "-"}
+                        </Typography>
+                    </Grid>
+                </Grid>
+            )}
+
+            {/* Description */}
+            <Grid item xs={12}>
+                <Grid item>
+                    <Typography className={classes.fontMedium} variant="body2">
+                        {t("label.description")}:
+                    </Typography>
+                </Grid>
+
+                <Grid item>
+                    <Typography variant="body2">
+                        {props.uiAlert?.alert?.description || t("label.none")}
+                    </Typography>
+                </Grid>
+            </Grid>
+
+            {/* Subscription Groups */}
+            <Grid item xs={6}>
+                <Grid item>
+                    <Typography className={classes.fontMedium} variant="body2">
+                        {t("label.subscription-groups")}:
+                    </Typography>
+                </Grid>
+
+                <Grid item>
+                    <Typography variant="body2">
+                        {props.uiAlert.subscriptionGroups.length > 0 &&
+                            getAllSubscriptionGroupsName(props.uiAlert)}
+                        {props.uiAlert.subscriptionGroups.length === 0 && (
+                            <span>{t("label.none")}</span>
+                        )}
+                    </Typography>
+                </Grid>
+            </Grid>
+        </Grid>
+    );
+};

thirdeye-ui/src/app/components/revamp/alert/alert-list/alert-card/styles.ts

@@ -0,0 +1,21 @@
+/*
+ * Copyright 2025 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.
+ */
+import { makeStyles } from "@material-ui/core";
+
+export const useAlertCardStyles = makeStyles(() => ({
+    fontMedium: {
+        fontWeight: 500,
+    },
+}));