Skip to content

Commit

Permalink
fix(ui): Advanced and JSON Editor Bug Bash
Browse files Browse the repository at this point in the history
  • Loading branch information
@harshilvelotio
harshilvelotio committed Jan 8, 2025
1 parent 517d1f6 commit 89accd2
Show file tree
Hide file tree
Showing 9 changed files with 53 additions and 98 deletions.
33 changes: 1 addition & 32 deletions thirdeye-ui/src/app/components/alert-wizard-v2/alert-details/alert-details-v2.component.tsx
View file
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
5 changes: 0 additions & 5 deletions thirdeye-ui/src/app/components/alert-wizard-v2/alert-json-v2/alert-json.component.tsx
View file
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
39 changes: 22 additions & 17 deletions ...deye-ui/src/app/components/alert-wizard-v2/alert-template/alert-template-v2.component.tsx
View file
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,34 @@ 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-documentation-on-all-available-algorithms"
)}
</Typography>
</Box>
</Link>
</Button>
</Box>
</Grid>
Expand Down
5 changes: 2 additions & 3 deletions thirdeye-ui/src/app/locale/languages/en-us.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -357,6 +357,7 @@
"investigation-name": "Investigation name",
"investigation-preview": "Investigation preview",
"json-alert": "JSON Alert",
"json-alert-setup": "JSON Alert Setup",
"json-editor": "JSON Editor",
"last-1-hour": "Last 1 Hour",
"last-12-hours": "Last 12 Hours",
Expand Down Expand Up @@ -518,7 +519,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 All @@ -535,6 +535,7 @@
"show-log": "Show log",
"show-previous-period-to-compare": "Show previous period to compare",
"simple": "Simple",
"simple-alert-setup": "Simple Alert Setup",
"single-metric": "Single Metric",
"skip": "Skip",
"slack": "Slack",
Expand Down Expand Up @@ -722,7 +723,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",
"dataset-datasource-required": "Datasource is required",
"dataset-name-required": "Dataset name is required",
Expand Down Expand Up @@ -898,7 +898,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
4 changes: 3 additions & 1 deletion thirdeye-ui/src/app/pages/alerts-all-page-v2/alerts-all-page.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -319,7 +319,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
9 changes: 8 additions & 1 deletion ...erts-create-page/alerts-create-advanced-page-v2/alerts-create-advanced-page.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,14 @@ export const AlertsCreateAdvancedPage: FunctionComponent = () => {
<Grid item xs={12}>
<AlertTemplate
alert={alert}
alertTemplateOptions={alertTemplateOptions}
alertTemplateOptions={alertTemplateOptions.sort(
(a, b) =>
a.name < b.name
? -1
: a.name > b.name
? 1
: 0
)}
selectedAlertTemplate={selectedAlertTemplate}
setSelectedAlertTemplate={setSelectedAlertTemplate}
onAlertPropertyChange={onAlertPropertyChange}
Expand Down
20 changes: 16 additions & 4 deletions thirdeye-ui/src/app/pages/alerts-create-page/alerts-create-base-page.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
* the License.
*/
import { AxiosError } from "axios/index";
import React, { FunctionComponent, useMemo, useState } from "react";
import React, { FunctionComponent, useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
import { useAppBarConfigProvider } from "../../components/app-bar/app-bar-config-provider/app-bar-config-provider.component";
Expand Down Expand Up @@ -55,6 +55,20 @@ export const AlertsCreateBasePage: FunctionComponent<AlertsCreatePageProps> = ({

const [singleNewSubscriptionGroup, setSingleNewSubscriptionGroup] =
useState<SubscriptionGroup>(createEmptySubscriptionGroup());
const [pageTitle, setPageTitle] = useState("");
useEffect(() => {
setPageTitle(
location.pathname.includes("advanced-v2")
? t("label.advanced-alert")
: location.pathname.includes("easy-alert")
? t("label.simple-alert-setup")
: location.pathname.includes("json-editor-v2")
? t("label.json-alert-setup")
: t("label.create-entity", {
entity: t("label.alert"),
})
);
}, []);

const createAlertAndUpdateSubscriptionGroups = useMemo(() => {
return handleCreateAlertClickGenerator(notify, t, (savedAlert) => {
Expand Down Expand Up @@ -120,9 +134,7 @@ export const AlertsCreateBasePage: FunctionComponent<AlertsCreatePageProps> = ({
<AlertsEditCreateBasePageComponent
isEditRequestInFlight={isEditRequestInFlight}
newSubscriptionGroup={singleNewSubscriptionGroup}
pageTitle={t("label.create-entity", {
entity: t("label.alert"),
})}
pageTitle={pageTitle}
selectedSubscriptionGroups={subscriptionGroups}
startingAlertConfiguration={startingAlertConfiguration}
onNewSubscriptionGroupChange={setSingleNewSubscriptionGroup}
Expand Down
16 changes: 0 additions & 16 deletions ...pp/pages/alerts-create-page/alerts-create-easy-page/alerts-create-easy-page.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -961,22 +961,6 @@ export const AlertsCreateEasyPage: FunctionComponent = () => {
alignContent="center"
justifyContent="space-between"
>
<Grid item xs={12}>
<Box display="flex">
<Typography
className={classes.header}
variant="h5"
>
{t("label.alert-wizard")}
</Typography>
</Box>
<Box>
<Typography variant="body2">
{t("message.lets-get-started")}
</Typography>
</Box>
</Grid>

<Grid item xs={12}>
<Grid container>
<Grid item xs={4}>
Expand Down
20 changes: 1 addition & 19 deletions ...eye-ui/src/app/pages/alerts-edit-create-common/alerts-edit-create-base-page.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,12 @@ import { alertsBasicHelpCards } from "../../components/help-drawer-v1/help-drawe
import { HelpDrawerV1 } from "../../components/help-drawer-v1/help-drawer-v1.component";
import { PageHeader } from "../../components/page-header/page-header.component";
import {
HelpLinkIconV1,
PageHeaderActionsV1,
PageHeaderTextV1,
PageV1,
TooltipV1,
useDialogProviderV1,
} from "../../platform/components";
import { DialogType } from "../../platform/components/dialog-provider-v1/dialog-provider-v1.interfaces";
import { THIRDEYE_DOC_LINK } from "../../utils/constants/constants.util";
import { getAlertsAllPath } from "../../utils/routes/routes.util";
import {
AlertsEditCreateBasePageComponentProps,
Expand Down Expand Up @@ -118,22 +115,7 @@ export const AlertsEditCreateBasePageComponent: FunctionComponent<AlertsEditCrea
</PageHeaderActionsV1>
}
>
<PageHeaderTextV1>
{pageTitle}
<TooltipV1
placement="top"
title={t("label.view-configuration-docs") as string}
>
<span>
<HelpLinkIconV1
displayInline
enablePadding
externalLink
href={`${THIRDEYE_DOC_LINK}/getting-started/create-your-first-alert`}
/>
</span>
</TooltipV1>
</PageHeaderTextV1>
<PageHeaderTextV1>{pageTitle}</PageHeaderTextV1>
</PageHeader>

<AlertsSimpleAdvancedJsonContainerPage
Expand Down

0 comments on commit 89accd2

Please sign in to comment.