fix(ui): TE-1951 always show investigate button

startreedata · Nov 29, 2023 · b45d215 · b45d215
1 parent 92ff3a4
commit b45d215
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 10 deletions.
diff --git a/thirdeye-ui/src/app/components/anomalies-view/feedback-card/feedback-card.component.tsx b/thirdeye-ui/src/app/components/anomalies-view/feedback-card/feedback-card.component.tsx
@@ -43,7 +43,7 @@ export const FeedbackCard: FunctionComponent<FeedbackCardProps> = ({
 
     return (
         <Grid container alignItems="center" justifyContent="space-between">
-            <Grid item>
+            <Grid item md sm={6} xs={12}>
                 {t("message.anomaly-confirmed-to-be-a")}
                 {feedback?.type === AnomalyFeedbackType.NOT_ANOMALY ? (
                     <Typography color="error" component="span" variant="body2">
@@ -65,12 +65,8 @@ export const FeedbackCard: FunctionComponent<FeedbackCardProps> = ({
                 {lastUpdatedStr &&
                     t("message.on", { lastUpdatedStr: lastUpdatedStr })}
             </Grid>
-            <Grid item>
-                <Grid
-                    container
-                    alignItems="center"
-                    justifyContent="space-between"
-                >
+            <Grid item md sm={6} xs={12}>
+                <Grid container alignItems="center" justifyContent="flex-end">
                     <Grid item>
                         <AnomalyFeedbackModal
                             showNo

diff --git a/...-ui/src/app/components/anomalies-view/feedback-collector/feedback-collector.component.tsx b/...-ui/src/app/components/anomalies-view/feedback-collector/feedback-collector.component.tsx
@@ -15,10 +15,12 @@
 import { Button, Grid, Typography } from "@material-ui/core";
 import React, { FunctionComponent, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { Link as RouterLink } from "react-router-dom";
 import {
     AnomalyFeedback,
     AnomalyFeedbackType,
 } from "../../../rest/dto/anomaly.interfaces";
+import { getRootCauseAnalysisForAnomalyInvestigateV2Path } from "../../../utils/routes/routes.util";
 import { AnomalyFeedbackModal } from "../../anomaly-feedback/modal/anomaly-feedback-modal.component";
 import { FeedbackCollectorProps } from "./feedback-collector.interfaces";
 
@@ -35,7 +37,7 @@ export const FeedbackCollector: FunctionComponent<FeedbackCollectorProps> = ({
     return (
         <>
             <Grid container alignItems="center" justifyContent="space-between">
-                <Grid item>
+                <Grid item lg md={5} sm={12}>
                     <Typography variant="h4">
                         {t("label.confirm-anomaly")}
                     </Typography>
@@ -45,8 +47,8 @@ export const FeedbackCollector: FunctionComponent<FeedbackCollectorProps> = ({
                         )}
                     </Typography>
                 </Grid>
-                <Grid item>
-                    <Grid container>
+                <Grid item lg md={7} sm={12}>
+                    <Grid container justifyContent="flex-end">
                         <Grid item>
                             <AnomalyFeedbackModal
                                 noOnly
@@ -82,6 +84,7 @@ export const FeedbackCollector: FunctionComponent<FeedbackCollectorProps> = ({
                                     return (
                                         <Button
                                             color="primary"
+                                            variant="outlined"
                                             onClick={openCallback}
                                         >
                                             {t(
@@ -93,6 +96,21 @@ export const FeedbackCollector: FunctionComponent<FeedbackCollectorProps> = ({
                                 onFeedbackUpdate={onFeedbackUpdate}
                             />
                         </Grid>
+                        <Grid item>
+                            <Button
+                                color="primary"
+                                component={RouterLink}
+                                size="medium"
+                                to={`${getRootCauseAnalysisForAnomalyInvestigateV2Path(
+                                    anomaly?.id
+                                )}`}
+                                variant="contained"
+                            >
+                                {t("label.investigate-entity", {
+                                    entity: t("label.anomaly"),
+                                })}
+                            </Button>
+                        </Grid>
                     </Grid>
                 </Grid>
             </Grid>