diff --git a/thirdeye-ui/src/app/components/alert-wizard-v2/alert-details/alert-details-v2.component.tsx b/thirdeye-ui/src/app/components/alert-wizard-v2/alert-details/alert-details-v2.component.tsx index b79f93d8bd..5ddd478fcf 100644 --- a/thirdeye-ui/src/app/components/alert-wizard-v2/alert-details/alert-details-v2.component.tsx +++ b/thirdeye-ui/src/app/components/alert-wizard-v2/alert-details/alert-details-v2.component.tsx @@ -12,16 +12,10 @@ * 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 { NavigateAlertCreationFlowsDropdown } from "../../alert-wizard-v3/navigate-alert-creation-flows-dropdown/navigate-alert-creation-flows-dropdown-v2"; 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"; @@ -34,7 +28,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 @@ -56,27 +49,11 @@ function AlertDetails({ return ( - - - - - {t("label.advanced-alert-old")} - - - {t( - "message.create-your-alert-filling-out-the-fields" - )} - - + + + - + = ({ alert, @@ -63,17 +64,19 @@ export const AlertJson: FunctionComponent = ({ return ( + + + + + + + - - - {t("label.advanced-json-editor")} - - {t("label.detection-template")} - - {t("label.select-the-detection-type-for-your-data")} - @@ -222,22 +215,32 @@ function AlertTemplate({ /> - + diff --git a/thirdeye-ui/src/app/components/alert-wizard-v3/navigate-alert-creation-flows-dropdown/navigate-alert-creation-flows-dropdown-v2.tsx b/thirdeye-ui/src/app/components/alert-wizard-v3/navigate-alert-creation-flows-dropdown/navigate-alert-creation-flows-dropdown-v2.tsx new file mode 100644 index 0000000000..309b7840c6 --- /dev/null +++ b/thirdeye-ui/src/app/components/alert-wizard-v3/navigate-alert-creation-flows-dropdown/navigate-alert-creation-flows-dropdown-v2.tsx @@ -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 ( + + + + {t("label.alert-editor")} + {": "} + + + + + option.text} + options={shortcutCreateMenuItems} + renderInput={(params) => ( + + )} + size="small" + value={currentPage} + onChange={(_, selectedValue) => { + navigate( + `${routePathPrefix}/${ + selectedValue.navLink + }?${searchParams.toString()}` + ); + }} + /> + + + ); +}; diff --git a/thirdeye-ui/src/app/locale/languages/en-us.json b/thirdeye-ui/src/app/locale/languages/en-us.json index d423a5db4d..7c967460e4 100644 --- a/thirdeye-ui/src/app/locale/languages/en-us.json +++ b/thirdeye-ui/src/app/locale/languages/en-us.json @@ -277,7 +277,7 @@ "duplicate": "Duplicate", "duplicate-entity": "Duplicate {{entity}}", "duration": "Duration", - "easy-alert": "Easy Alert", + "easy-alert": "Simple Setup", "edit": "Edit", "edit-entity": "Edit {{entity}}", "eg": "e.g.", @@ -356,8 +356,9 @@ "investigation-details": "Investigation details", "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", @@ -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", @@ -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", @@ -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", @@ -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", @@ -972,6 +971,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", diff --git a/thirdeye-ui/src/app/pages/alerts-all-page-v2/alerts-all-page.component.tsx b/thirdeye-ui/src/app/pages/alerts-all-page-v2/alerts-all-page.component.tsx index 5a8f0e0a05..e43cf3c5b9 100644 --- a/thirdeye-ui/src/app/pages/alerts-all-page-v2/alerts-all-page.component.tsx +++ b/thirdeye-ui/src/app/pages/alerts-all-page-v2/alerts-all-page.component.tsx @@ -50,8 +50,8 @@ import { getUiAlerts } from "../../utils/alerts/alerts.util"; import { notifyIfErrors } from "../../utils/notifications/notifications.util"; import { getErrorMessages } from "../../utils/rest/rest.util"; import { - getAlertsCreateAdvancePath, - getAlertsCreateNewJsonEditorPath, + getAlertsCreateAdvanceV2Path, + getAlertsCreateNewJsonEditorV2Path, getAlertsCreatePath, getAlertsEasyCreatePath, } from "../../utils/routes/routes.util"; @@ -213,11 +213,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"), }, ]; @@ -226,9 +226,11 @@ export const AlertsAllPage: FunctionComponent = () => { navigate(getAlertsEasyCreatePath()); // navigate(getAlertsCreatePath()); } else if (alertType === "advancedAlert") { - navigate(getAlertsCreateAdvancePath()); + navigate(getAlertsCreateAdvanceV2Path()); + // navigate(getAlertsCreateAdvancePath()); } else if (alertType === "jsonAlert") { - navigate(getAlertsCreateNewJsonEditorPath()); + navigate(getAlertsCreateNewJsonEditorV2Path()); + // navigate(getAlertsCreateNewJsonEditorPath()); } }; @@ -317,7 +319,9 @@ export const AlertsAllPage: FunctionComponent = () => { type={DropdownButtonTypeV1.Regular} onClick={handleAlertRedirect} > - {t("label.create")} + {t("label.create-entity", { + entity: t("label.alert"), + })} } diff --git a/thirdeye-ui/src/app/pages/alerts-create-page/alerts-create-advanced-page-v2/alerts-create-advanced-page.component.tsx b/thirdeye-ui/src/app/pages/alerts-create-page/alerts-create-advanced-page-v2/alerts-create-advanced-page.component.tsx index 3714a7fa92..306f01d8b2 100644 --- a/thirdeye-ui/src/app/pages/alerts-create-page/alerts-create-advanced-page-v2/alerts-create-advanced-page.component.tsx +++ b/thirdeye-ui/src/app/pages/alerts-create-page/alerts-create-advanced-page-v2/alerts-create-advanced-page.component.tsx @@ -18,6 +18,7 @@ import React, { FunctionComponent } from "react"; import { useTranslation } from "react-i18next"; import { useOutletContext } from "react-router-dom"; import { AlertDetails } from "../../../components/alert-wizard-v2/alert-details/alert-details-v2.component"; +import { AlertNotifications } from "../../../components/alert-wizard-v2/alert-notifications/alert-notifications.component"; import { AlertTemplate } from "../../../components/alert-wizard-v2/alert-template/alert-template-v2.component"; import { PageContentsGridV1 } from "../../../platform/components"; import { AlertsSimpleAdvancedJsonContainerPageOutletContextProps } from "../../alerts-edit-create-common/alerts-edit-create-common-page.interfaces"; @@ -33,6 +34,7 @@ export const AlertsCreateAdvancedPage: FunctionComponent = () => { const { alert, handleAlertPropertyChange: onAlertPropertyChange, + handleSubscriptionGroupChange: onSubscriptionGroupsChange, selectedAlertTemplate, setSelectedAlertTemplate, alertTemplateOptions, @@ -53,12 +55,28 @@ export const AlertsCreateAdvancedPage: FunctionComponent = () => { + a.name < b.name + ? -1 + : a.name > b.name + ? 1 + : 0 + )} selectedAlertTemplate={selectedAlertTemplate} setSelectedAlertTemplate={setSelectedAlertTemplate} onAlertPropertyChange={onAlertPropertyChange} /> + + + = ({ startingAlertConfiguration, @@ -55,11 +55,27 @@ export const AlertsCreateBasePage: FunctionComponent = ({ const [singleNewSubscriptionGroup, setSingleNewSubscriptionGroup] = useState(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) => { const isNewCreateEasyAlert = - location.pathname.includes("easy-alert"); + location.pathname.includes("easy-alert") || + location.pathname.includes("json-editor-v2") || + location.pathname.includes("advanced-v2"); if ( isNewCreateEasyAlert && searchParams.get(QUERY_PARAM_KEYS.IS_FIRST_ALERT) @@ -118,9 +134,7 @@ export const AlertsCreateBasePage: FunctionComponent = ({ { + + + + + + + { alignContent="center" justifyContent="space-between" > - - - - {t("label.alert-wizard")} - - - - - {t("message.lets-get-started")} - - - - diff --git a/thirdeye-ui/src/app/pages/alerts-create-page/alerts-create-json-page-v2/alerts-create-json-page-v2.component.tsx b/thirdeye-ui/src/app/pages/alerts-create-page/alerts-create-json-page-v2/alerts-create-json-page-v2.component.tsx index bee5e2a36e..50b659a8c0 100644 --- a/thirdeye-ui/src/app/pages/alerts-create-page/alerts-create-json-page-v2/alerts-create-json-page-v2.component.tsx +++ b/thirdeye-ui/src/app/pages/alerts-create-page/alerts-create-json-page-v2/alerts-create-json-page-v2.component.tsx @@ -18,6 +18,7 @@ import React, { FunctionComponent, useMemo } from "react"; import { useTranslation } from "react-i18next"; import { useNavigate, useOutletContext } from "react-router-dom"; import { AlertJson } from "../../../components/alert-wizard-v2/alert-json-v2/alert-json.component"; +import { AlertNotifications } from "../../../components/alert-wizard-v2/alert-notifications/alert-notifications.component"; import { determinePropertyFieldConfiguration, hasRequiredPropertyValuesSet, @@ -41,6 +42,7 @@ export const AlertsCreateJSONPage: FunctionComponent = () => { alert, handleAlertPropertyChange: onAlertPropertyChange, selectedAlertTemplate, + handleSubscriptionGroupChange: onSubscriptionGroupsChange, handleSubmitAlertClick, } = useOutletContext(); @@ -90,6 +92,15 @@ export const AlertsCreateJSONPage: FunctionComponent = () => { + + + } > - - {pageTitle} - - - - - - + {pageTitle} { const { t } = useTranslation(); @@ -44,6 +44,8 @@ export const AlertsUpdateAdvancedPage: FunctionComponent = () => { isEditRequestInFlight, handleSubmitAlertClick, onPageExit, + selectedSubscriptionGroups, + handleSubscriptionGroupChange: onSubscriptionGroupsChange, } = useOutletContext(); const classes = easyAlertStyles(); @@ -56,7 +58,7 @@ export const AlertsUpdateAdvancedPage: FunctionComponent = () => { }, []); return ( - <> + @@ -82,21 +84,54 @@ export const AlertsUpdateAdvancedPage: FunctionComponent = () => { }} /> + + + - - handleSubmitAlertClick(alert)} - nextButtonIsDisabled={ - !isSubmitBtnEnabled || isEditRequestInFlight - } - nextButtonLabel={submitBtnLabel} - /> - + + + + - + ); }; diff --git a/thirdeye-ui/src/app/pages/alerts-update-page/alerts-update-json-page-v2.component.tsx b/thirdeye-ui/src/app/pages/alerts-update-page/alerts-update-json-page-v2.component.tsx new file mode 100644 index 0000000000..151fd134e6 --- /dev/null +++ b/thirdeye-ui/src/app/pages/alerts-update-page/alerts-update-json-page-v2.component.tsx @@ -0,0 +1,178 @@ +/* + * 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 { Icon } from "@iconify/react"; +import { Box, Button, Divider, Grid, ThemeProvider } from "@material-ui/core"; +import React, { FunctionComponent, useEffect, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { useNavigate, useOutletContext } from "react-router-dom"; +import { AlertJson } from "../../components/alert-wizard-v2/alert-json-v2/alert-json.component"; +import { AlertNotifications } from "../../components/alert-wizard-v2/alert-notifications/alert-notifications.component"; +import { PreviewChart } from "../../components/alert-wizard-v2/alert-template/preview-chart/preview-chart.component"; +import { GranularityValue } from "../../components/alert-wizard-v3/select-metric/select-metric.utils"; +import { + PageContentsCardV1, + PageContentsGridV1, + useDialogProviderV1, +} from "../../platform/components"; +import { DialogType } from "../../platform/components/dialog-provider-v1/dialog-provider-v1.interfaces"; +import { getAlertsAllPath } from "../../utils/routes/routes.util"; +import { createAlertPageTheme } from "../alerts-create-page/alerts-create-easy-page/alerts-create-easy-page.styles"; +import { alertJsonPageStyles } from "../alerts-create-page/alerts-create-json-page-v2/alerts-create-json-page-v2.styles"; +import { AlertsSimpleAdvancedJsonContainerPageOutletContextProps } from "../alerts-edit-create-common/alerts-edit-create-common-page.interfaces"; + +export const AlertsUpdateJSONPageV2: FunctionComponent = () => { + const { t } = useTranslation(); + + const { showDialog } = useDialogProviderV1(); + const classes = alertJsonPageStyles(); + const navigate = useNavigate(); + + const [submitBtnLabel, setSubmitBtnLabel] = useState( + t("label.update-entity", { + entity: t("label.alert"), + }) + ); + const [isSubmitBtnEnabled, setIsSubmitBtnEnabled] = useState(false); + const [isAlertValid, setIsAlertValid] = useState(true); + const { + alert, + handleAlertPropertyChange: onAlertPropertyChange, + selectedSubscriptionGroups, + handleSubscriptionGroupChange: onSubscriptionGroupsChange, + handleSubmitAlertClick, + isEditRequestInFlight, + } = useOutletContext(); + + useEffect(() => { + setIsSubmitBtnEnabled(false); + setSubmitBtnLabel( + t("message.preview-alert-in-chart-before-submitting") + ); + }, []); + + const onCreateAlertClick: () => void = async () => { + if ( + alert.templateProperties.monitoringGranularity && + (alert.templateProperties.monitoringGranularity === + GranularityValue.ONE_MINUTE || + alert.templateProperties.monitoringGranularity === + GranularityValue.FIVE_MINUTES) + ) { + showDialog({ + type: DialogType.ALERT, + contents: t( + "message.monitoring-granularity-below-15-minutes-warning" + ), + okButtonText: t("label.confirm"), + cancelButtonText: t("label.cancel"), + onOk: () => handleSubmitAlertClick(alert), + }); + } else { + handleSubmitAlertClick(alert); + } + }; + + return ( + <> + + + + + + + + + + { + setIsSubmitBtnEnabled(true); + setSubmitBtnLabel( + t("label.update-entity", { + entity: t("label.alert"), + }) + ); + }} + /> + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/thirdeye-ui/src/app/routers/alerts/alerts.router.tsx b/thirdeye-ui/src/app/routers/alerts/alerts.router.tsx index 211cf1372c..8860d3e391 100644 --- a/thirdeye-ui/src/app/routers/alerts/alerts.router.tsx +++ b/thirdeye-ui/src/app/routers/alerts/alerts.router.tsx @@ -105,6 +105,12 @@ const AlertsUpdateAdvancedPageV2 = lazy(() => ).then((module) => ({ default: module.AlertsUpdateAdvancedPage })) ); +const AlertsUpdateJSONPageV2 = lazy(() => + import( + /* webpackChunkName: "alerts-update-json-page" */ "../../pages/alerts-update-page/alerts-update-json-page-v2.component" + ).then((module) => ({ default: module.AlertsUpdateJSONPageV2 })) +); + const PageNotFoundPage = lazy(() => import( /* webpackChunkName: "page-not-found-page" */ "../../pages/page-not-found-page/page-not-found-page.component" @@ -361,7 +367,7 @@ export const AlertsRouter: FunctionComponent = () => { ); }} to={ - AppRouteRelative.ALERTS_UPDATE_JSON_EDITOR + AppRouteRelative.ALERTS_UPDATE_JSON_EDITOR_V2 } /> } @@ -391,6 +397,10 @@ export const AlertsRouter: FunctionComponent = () => { element={} path={AppRouteRelative.ALERTS_UPDATE_JSON_EDITOR} /> + } + path={AppRouteRelative.ALERTS_UPDATE_JSON_EDITOR_V2} + /> {/* No match found, render page not found */} diff --git a/thirdeye-ui/src/app/utils/routes/routes.util.ts b/thirdeye-ui/src/app/utils/routes/routes.util.ts index 24a1a8e95b..162e649592 100644 --- a/thirdeye-ui/src/app/utils/routes/routes.util.ts +++ b/thirdeye-ui/src/app/utils/routes/routes.util.ts @@ -52,6 +52,7 @@ export const AppRouteRelative = { ALERTS_UPDATE_ADVANCED: "advanced", ALERTS_UPDATE_ADVANCED_V2: "advanced-v2", ALERTS_UPDATE_JSON_EDITOR: "json-editor", + ALERTS_UPDATE_JSON_EDITOR_V2: "json-editor-v2", ANOMALIES: "anomalies", ANOMALIES_LIST: "anomalies-list", ANOMALIES_ALL: "all", @@ -148,7 +149,9 @@ export const AppRoute = { ALERTS_CREATE_NEW: `/${AppRouteRelative.ALERTS}/${AppRouteRelative.ALERTS_CREATE}/${AppRouteRelative.ALERTS_CREATE_NEW}`, ALERTS_CREATE_EXISTING: `/${AppRouteRelative.ALERTS}/${AppRouteRelative.ALERTS_CREATE}/${AppRouteRelative.ALERTS_CREATE_COPY}`, ALERTS_CREATE_NEW_ADVANCED: `/${AppRouteRelative.ALERTS}/${AppRouteRelative.ALERTS_CREATE}/${AppRouteRelative.ALERTS_CREATE_NEW}/${AppRouteRelative.ALERTS_CREATE_ADVANCED}`, + ALERTS_CREATE_NEW_ADVANCED_V2: `/${AppRouteRelative.ALERTS}/${AppRouteRelative.ALERTS_CREATE}/${AppRouteRelative.ALERTS_CREATE_NEW}/${AppRouteRelative.ALERTS_CREATE_ADVANCED_V2}`, ALERTS_CREATE_NEW_JSON_EDITOR: `/${AppRouteRelative.ALERTS}/${AppRouteRelative.ALERTS_CREATE}/${AppRouteRelative.ALERTS_CREATE_NEW}/${AppRouteRelative.ALERTS_CREATE_JSON_EDITOR}`, + ALERTS_CREATE_NEW_JSON_EDITOR_V2: `/${AppRouteRelative.ALERTS}/${AppRouteRelative.ALERTS_CREATE}/${AppRouteRelative.ALERTS_CREATE_NEW}/${AppRouteRelative.ALERTS_CREATE_JSON_EDITOR_V2}`, ALERTS_CREATE_EXISTING_ADVANCED: `/${AppRouteRelative.ALERTS}/${AppRouteRelative.ALERTS_CREATE}/${AppRouteRelative.ALERTS_CREATE_COPY}/${AppRouteRelative.ALERTS_CREATE_ADVANCED}`, ALERTS_CREATE_EXISTING_JSON_EDITOR: `/${AppRouteRelative.ALERTS}/${AppRouteRelative.ALERTS_CREATE}/${AppRouteRelative.ALERTS_CREATE_COPY}/${AppRouteRelative.ALERTS_CREATE_JSON_EDITOR}`, ALERTS_ALERT: `/${AppRouteRelative.ALERTS}/${AppRouteRelative.ALERTS_ALERT}`, @@ -316,12 +319,24 @@ export const getAlertsCreateAdvancePath = (): string => { ); }; +export const getAlertsCreateAdvanceV2Path = (): string => { + return createPathWithRecognizedQueryString( + AppRoute.ALERTS_CREATE_NEW_ADVANCED_V2 + ); +}; + export const getAlertsCreateNewJsonEditorPath = (): string => { return createPathWithRecognizedQueryString( AppRoute.ALERTS_CREATE_NEW_JSON_EDITOR ); }; +export const getAlertsCreateNewJsonEditorV2Path = (): string => { + return createPathWithRecognizedQueryString( + AppRoute.ALERTS_CREATE_NEW_JSON_EDITOR_V2 + ); +}; + export const getAlertsUpdatePath = (id: number): string => { let path: string = AppRoute.ALERTS_UPDATE; path = path.replace(PLACEHOLDER_ROUTE_ID, `${id}`);