Skip to content

Commit

Permalink
fix(ui): TE-XX redirect to new json and advanced editors (#1629)
Browse files Browse the repository at this point in the history
* added close button to alert modal

* fix(ui): TE-XX redirect create new json and advanced editor paths

* added edit json alert

* added subscription groups to advnaced and json editors

* fixed build errors

* fix(ui): Advanced and JSON Editor Bug Bash

* fix(ui): Updated Link text for view algorithms documentation

* fix(ui): Changes for Create alert dropdown

* fix(ui): Changes for Alert editor dropdown

* fix(ui): Changes for Alert editor dropdown in header

---------

Co-authored-by: Nalin Patidar <[email protected]>
  • Loading branch information
harshilvelotio and nalin-patidar authored Feb 6, 2025
1 parent a7d6cda commit 25a8dba
Show file tree
Hide file tree
Showing 16 changed files with 509 additions and 136 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,9 @@
* See the License for the specific language governing permissions and limitations under
* the License.
*/
import {
Box,
FormHelperText,
Grid,
TextField,
Typography,
} from "@material-ui/core";
import { FormHelperText, Grid, TextField } from "@material-ui/core";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { easyAlertStyles } from "../../../pages/alerts-create-page/alerts-create-easy-page/alerts-create-easy-page.styles";
import { InputSectionV2 } from "../../form-basics/input-section-v2/input-section-v2.component";
import { AlertDetailsProps } from "./alert-details.interfaces";
import { AlertFrequency } from "./alert-frequency-v2/alert-frequency.component";
Expand All @@ -34,7 +27,6 @@ function AlertDetails({
const [description, setDescription] = useState(alert.description);
const [nameHasError, setNameHasError] = useState(false);
const { t } = useTranslation();
const easyAlertClasses = easyAlertStyles();

const handleNameChange = (
e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
Expand All @@ -55,29 +47,6 @@ function AlertDetails({

return (
<Grid container>
<Grid item xs={12}>
<Box marginBottom={2} marginTop={2}>
<Grid
container
alignContent="center"
justifyContent="space-between"
>
<Grid item>
<Typography
className={easyAlertClasses.header}
variant="h5"
>
{t("label.advanced-alert-old")}
</Typography>
<Typography variant="body2">
{t(
"message.create-your-alert-filling-out-the-fields"
)}
</Typography>
</Grid>
</Grid>
</Box>
</Grid>
<Grid item xs={4}>
<InputSectionV2
inputComponent={
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -69,11 +69,6 @@ export const AlertJson: FunctionComponent<AlertJsonProps> = ({
alignContent="center"
justifyContent="space-between"
>
<Grid item>
<Typography className={classes.header} variant="h5">
{t("label.advanced-json-editor")}
</Typography>
</Grid>
<PageHeaderActionsV1>
<HelpDrawerV1
title={`${t("label.need-help")}?`}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ import { easyAlertStyles } from "../../../pages/alerts-create-page/alerts-create
import { AlertTemplate as AlertTemplateType } from "../../../rest/dto/alert-template.interfaces";
import { TemplatePropertiesObject } from "../../../rest/dto/alert.interfaces";
import { getAlertTemplatesCreatePath } from "../../../utils/routes/routes.util";
import { AlertTemplatesInformationLinks } from "../../alert-wizard-v3/alert-templates-information-links/alert-templates-information-links";
import { InputSectionV2 } from "../../form-basics/input-section-v2/input-section-v2.component";
import { useAlertWizardV2Styles } from "../alert-wizard-v2.styles";
import { AlertTemplatePropertiesBuilder } from "./alert-template-properties-builder/alert-template-properties-builder-v2.component";
Expand Down Expand Up @@ -171,16 +170,10 @@ function AlertTemplate({
<Typography className={classes.header} variant="h6">
{t("label.detection-template")}
</Typography>
<Typography variant="body2">
{t("label.select-the-detection-type-for-your-data")}
</Typography>
</Box>
</Grid>
<Grid item xs={4}>
<InputSectionV2
description={t(
"message.select-a-template-to-monitor-an-detect-anomalies"
)}
inputComponent={
<>
<Autocomplete<AlertTemplateType>
Expand Down Expand Up @@ -222,22 +215,32 @@ function AlertTemplate({
/>
</Grid>
<Grid item xs={4}>
<Box alignItems="center" display="flex" height="100%">
<Box alignItems="flex-end" display="flex" height="100%">
<Button
className={easyAlertClasses.infoButton}
color="primary"
size="small"
variant="outlined"
>
<Box component="span" display="flex" mr={1}>
<Icon
fontSize={24}
icon="mdi:info-circle-outline"
/>
</Box>
<Box component="span">
<AlertTemplatesInformationLinks />
</Box>
<Link
className={
easyAlertClasses.recommendedAlgorithmContainer
}
href="https://dev.startree.ai/docs/startree-enterprise-edition/startree-thirdeye/concepts/anomaly-detection-algorithms#detection-algorithms"
target="_blank"
>
<Box component="span" display="flex" mr={1}>
<Icon
fontSize={24}
icon="mdi:info-circle-outline"
/>
</Box>
<Box>
<Typography variant="caption">
{t("message.view-algorithms-documentation")}
</Typography>
</Box>
</Link>
</Button>
</Box>
</Grid>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
/*
* Copyright 2023 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 { Box, Grid, TextField } from "@material-ui/core";
import { Autocomplete } from "@material-ui/lab";
import React, { FunctionComponent, useMemo } from "react";
import { useTranslation } from "react-i18next";
import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
import { AppRouteRelative } from "../../../utils/routes/routes.util";
import { ALERT_CREATION_NAVIGATE_DROPDOWN_TEST_IDS } from "./navigate-alert-creation-flows-dropdown.interface";
import { useNavigateAlertCreationFlowsDropdownStyles } from "./navigate-alert-creation-flows-dropdown.styles";

export const NavigateAlertCreationFlowsDropdown: FunctionComponent = () => {
const { t } = useTranslation();
const classes = useNavigateAlertCreationFlowsDropdownStyles();
const navigate = useNavigate();
const location = useLocation();
const [searchParams] = useSearchParams();

/**
* `/alerts/73/update/simple`
* `/alerts/create/new/advanced`
* `/alerts/create/new/new-user/select-type`
* `/alerts/create/copy/69689/json-editor`
* `/alerts/create/copy/69689/new-user/select-type`
* `/welcome/create-alert/simple`
* `/welcome/create-alert/new-user/select-type`
*/
const routePathPrefix = useMemo(() => {
let endIdx = 4;

if (location.pathname.includes(AppRouteRelative.WELCOME)) {
endIdx = 3;
}

if (
location.pathname.includes(
AppRouteRelative.ALERTS_CREATE_COPY.replace("/:id", "")
)
) {
endIdx = 5;
}

return location.pathname.split("/").slice(0, endIdx).join("/");
}, [location]);

const shortcutCreateMenuItems = [
{
matcher: (path: string) =>
path.endsWith(AppRouteRelative.ALERTS_CREATE_ADVANCED_V2),
navLink: AppRouteRelative.ALERTS_CREATE_ADVANCED_V2,
text: t("label.advanced-setup"),
},
{
matcher: (path: string) =>
path.endsWith(AppRouteRelative.ALERTS_CREATE_JSON_EDITOR_V2),
navLink: AppRouteRelative.ALERTS_CREATE_JSON_EDITOR_V2,
text: t("label.json-setup"),
},
];

const currentPage = useMemo(() => {
return shortcutCreateMenuItems.find((candidate) => {
return candidate.matcher(location.pathname);
});
}, [location]);

return (
<Grid container alignContent="center">
<Grid item>
<Box paddingTop={1}>
{t("label.alert-editor")}
{": "}
</Box>
</Grid>

<Grid item>
<Autocomplete
disableClearable
className={classes.autocomplete}
data-testid={
ALERT_CREATION_NAVIGATE_DROPDOWN_TEST_IDS.DROPDOWN_CONTAINER
}
getOptionLabel={(option) => option.text}
options={shortcutCreateMenuItems}
renderInput={(params) => (
<TextField
{...params}
InputProps={{
...params.InputProps,
/**
* Override class name so
* the size of input is smaller
*/
className: classes.autoCompleteInput,
}}
variant="outlined"
/>
)}
size="small"
value={currentPage}
onChange={(_, selectedValue) => {
navigate(
`${routePathPrefix}/${
selectedValue.navLink
}?${searchParams.toString()}`
);
}}
/>
</Grid>
</Grid>
);
};
6 changes: 3 additions & 3 deletions thirdeye-ui/src/app/locale/languages/en-us.json
Original file line number Diff line number Diff line change
Expand Up @@ -361,7 +361,9 @@
"investigation-name": "Investigation name",
"investigation-preview": "Investigation preview",
"json-alert": "JSON Alert",
"json-alert-setup": "JSON Alert Setup",
"json-editor": "JSON Editor",
"json-setup": "JSON Setup",
"last-1-hour": "Last 1 Hour",
"last-12-hours": "Last 12 Hours",
"last-15-minutes": "Last 15 Minutes",
Expand Down Expand Up @@ -522,7 +524,6 @@
"select-granularity": "Select granularity",
"select-how-often-to-check-for-anomalies": "Select how often to check for anomalies (\"Time Interval\"): more often for fast-changing metrcs, less often for stable ones.",
"select-subscription-groups": "Select subscription groups",
"select-the-detection-type-for-your-data": "Select the Detection Type for your data",
"select-the-time-increment-that-the-data-is-aggregated-to": "Select the time increment that the data is aggregated to",
"selected": "Selected",
"selected-count": "{{count}} selected",
Expand Down Expand Up @@ -733,7 +734,6 @@
"create-my-first-entity": "Create my first {{entity}}",
"create-sample-alert-description": "Quickly preview ThirdEye by using a sample alert",
"create-success": "{{entity}} created successfully",
"create-your-alert-filling-out-the-fields": "Create your alert filling out the fields",
"create-your-first-alert-documentation": "create your first alert documentation",
"custom-apache-pinot-source": "Custom Apache Pinot source",
"dataset-datasource-required": "Datasource is required",
Expand Down Expand Up @@ -914,7 +914,6 @@
"select-a-dimension-to-generate-the-anomaly-preview": "Select a dimension to generate the anomaly preview",
"select-a-metric": "Select a metric",
"select-a-metric-to-detect-anomalies": "Select a metric to detect anomalies",
"select-a-template-to-monitor-an-detect-anomalies": "Select a template to monitor an detect anomalies",
"select-a-template-to-preview": "Select a template to preview the alert",
"select-aggregation-function": "Select aggregation function",
"select-aggregation-function-to-combine-multiple-data-value-into-a-single-result": "Select an aggregation function to combine multiple data values into a single statistic",
Expand Down Expand Up @@ -991,6 +990,7 @@
"validation-failed": "Validation failed",
"values-need-to-be-one-of-the-following-values": "\"{{propertyKey}}\" values need to be one of the following values: {{expectedKeys}}",
"values-need-to-be-one-of-the-following-values-it-is": "\"{{propertyKey}}\" values need to be one of the following values: {{expectedKeys}}. It is: {{valueForProperty}}",
"view-algorithms-documentation": "View algorithms documentation",
"view-detection-configuration": "View detection configuration",
"view-documentation": "View documentation",
"view-documentation-on-all-available-algorithms": "View documentation on all available algorithms",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,11 @@ import { getUiAlerts } from "../../utils/alerts/alerts.util";
import { notifyIfErrors } from "../../utils/notifications/notifications.util";
import { getErrorMessages } from "../../utils/rest/rest.util";
import {
getAlertsCreateAdvanceV2Path,
getAlertsCreateNewJsonEditorV2Path,
getAlertsCeateUpdatedPath,
getAlertsCreateAdvancePath,
getAlertsCreateNewJsonEditorPath,
// getAlertsCreateAdvancePath,
// getAlertsCreateNewJsonEditorPath,
getAlertsCreatePath,
// getAlertsEasyCreatePath,
} from "../../utils/routes/routes.util";
Expand Down Expand Up @@ -214,11 +216,11 @@ export const AlertsAllPage: FunctionComponent = () => {
},
{
id: "advancedAlert",
text: t("label.advanced-alert"),
text: t("label.advanced-setup"),
},
{
id: "jsonAlert",
text: t("label.json-alert"),
text: t("label.json-setup"),
},
];

Expand All @@ -227,9 +229,11 @@ export const AlertsAllPage: FunctionComponent = () => {
navigate(getAlertsCeateUpdatedPath());
// navigate(getAlertsCreatePath());
} else if (alertType === "advancedAlert") {
navigate(getAlertsCreateAdvancePath());
navigate(getAlertsCreateAdvanceV2Path());
// navigate(getAlertsCreateAdvancePath());
} else if (alertType === "jsonAlert") {
navigate(getAlertsCreateNewJsonEditorPath());
navigate(getAlertsCreateNewJsonEditorV2Path());
// navigate(getAlertsCreateNewJsonEditorPath());
}
};

Expand Down Expand Up @@ -318,7 +322,9 @@ export const AlertsAllPage: FunctionComponent = () => {
type={DropdownButtonTypeV1.Regular}
onClick={handleAlertRedirect}
>
{t("label.create")}
{t("label.create-entity", {
entity: t("label.alert"),
})}
</DropdownButtonV1>
</PageHeaderActionsV1>
}
Expand Down
Loading

0 comments on commit 25a8dba

Please sign in to comment.