From 4f92594424804be9b7b3eb44208c8e3fc97a5038 Mon Sep 17 00:00:00 2001 From: Harshil Shah Date: Sun, 1 Dec 2024 16:02:21 +0530 Subject: [PATCH] fixed the next set of issues --- .../alert-json-editor-modal.component.tsx | 17 ++++-- .../alert-json-editor-modal.interfaces.ts | 9 ++- .../preview-chart-v3.component.tsx | 1 + .../chart-content-v2.component.tsx | 54 +++++++++++++++++- .../chart-content-v2.interfaces.ts | 1 + .../enumeration-items-table.component.tsx | 56 ++++++++++++------- .../enumeration-items-table.interfaces.ts | 1 + .../threshold-setup-v3.component.tsx | 32 ----------- .../src/app/locale/languages/en-us.json | 1 + .../alerts-create-easy-page.component.tsx | 17 ++++++ .../alerts-create-easy-page.styles.ts | 1 + 11 files changed, 131 insertions(+), 59 deletions(-) diff --git a/thirdeye-ui/src/app/components/alert-json-editor-modal/alert-json-editor-modal.component.tsx b/thirdeye-ui/src/app/components/alert-json-editor-modal/alert-json-editor-modal.component.tsx index dbe9482aa9..efbeac94ff 100644 --- a/thirdeye-ui/src/app/components/alert-json-editor-modal/alert-json-editor-modal.component.tsx +++ b/thirdeye-ui/src/app/components/alert-json-editor-modal/alert-json-editor-modal.component.tsx @@ -21,7 +21,14 @@ import { EditableAlert } from "../../rest/dto/alert.interfaces"; import { AlertJsonEditorModalProps } from "./alert-json-editor-modal.interfaces"; export const AlertJsonEditorModal: FunctionComponent = - ({ alert, onSubmitChanges }) => { + ({ + alert, + onSubmitChanges, + isReadOnly = false, + buttonText, + isDisabled = false, + cancelButtonText, + }) => { const { t } = useTranslation(); const { showDialog } = useDialogProviderV1(); @@ -47,12 +54,13 @@ export const AlertJsonEditorModal: FunctionComponent ), width: "md", okButtonText: t("label.apply-changes"), - cancelButtonText: t("label.cancel"), + cancelButtonText: cancelButtonText ?? t("label.cancel"), + hideOkButton: isReadOnly, onOk: () => { setLocalAlert((current) => { // Wait for previous state updates to finish before // calling onSubmitChanges - onSubmitChanges(current, true); + onSubmitChanges?.(current, true); return current; }); @@ -64,10 +72,11 @@ export const AlertJsonEditorModal: FunctionComponent <> ); diff --git a/thirdeye-ui/src/app/components/alert-json-editor-modal/alert-json-editor-modal.interfaces.ts b/thirdeye-ui/src/app/components/alert-json-editor-modal/alert-json-editor-modal.interfaces.ts index ec1e42ee17..61d9d7c827 100644 --- a/thirdeye-ui/src/app/components/alert-json-editor-modal/alert-json-editor-modal.interfaces.ts +++ b/thirdeye-ui/src/app/components/alert-json-editor-modal/alert-json-editor-modal.interfaces.ts @@ -17,5 +17,12 @@ import { EditableAlert } from "../../rest/dto/alert.interfaces"; export interface AlertJsonEditorModalProps { alert: EditableAlert; - onSubmitChanges: (contents: EditableAlert, isTotalChange?: boolean) => void; + buttonText?: React.ReactNode; + isReadOnly?: boolean; + isDisabled?: boolean; + cancelButtonText?: string; + onSubmitChanges?: ( + contents: EditableAlert, + isTotalChange?: boolean + ) => void; } diff --git a/thirdeye-ui/src/app/components/alert-wizard-v2/alert-template/preview-chart/preview-chart-v3.component.tsx b/thirdeye-ui/src/app/components/alert-wizard-v2/alert-template/preview-chart/preview-chart-v3.component.tsx index ad2a0355c0..b4068f6dd6 100644 --- a/thirdeye-ui/src/app/components/alert-wizard-v2/alert-template/preview-chart/preview-chart-v3.component.tsx +++ b/thirdeye-ui/src/app/components/alert-wizard-v2/alert-template/preview-chart/preview-chart-v3.component.tsx @@ -248,6 +248,7 @@ export const PreviewChartV3: FunctionComponent = ({ } > = ({ evaluationTimeRange, legendsPlacement, showDeleteIcon = true, + isSearchEnabled = false, }) => { const sharedWizardClasses = useAlertWizardV2Styles(); const previewChartClasses = usePreviewChartStyles(); + const [searchTerm, setSearchTerm] = useState(""); const { t } = useTranslation(); const detectionEvaluations = useMemo(() => { @@ -199,6 +209,47 @@ export const ChartContentV2: FunctionComponent = ({ )} + {isSearchEnabled && ( + + + + + ), + endAdornment: ( + + {searchTerm && ( + { + setSearchTerm(""); + }} + > + + + )} + + ), + }} + placeholder={t("label.search-entity", { + entity: t("label.dimensions"), + })} + value={searchTerm} + onChange={(e) => { + setSearchTerm(e.target.value); + }} + /> + + )} + {workingDetectionEvaluations && workingDetectionEvaluations[0]?.enumerationItem && ( @@ -216,6 +267,7 @@ export const ChartContentV2: FunctionComponent = ({ alertEvaluation?.alert.template )} legendsPlacement={legendsPlacement} + searchTerm={searchTerm} showOnlyActivity={showOnlyActivity} timezone={determineTimezoneFromAlertInEvaluation( alertEvaluation?.alert.template diff --git a/thirdeye-ui/src/app/components/alert-wizard-v3/preview-chart/chart-content-v2/chart-content-v2.interfaces.ts b/thirdeye-ui/src/app/components/alert-wizard-v3/preview-chart/chart-content-v2/chart-content-v2.interfaces.ts index d9a11bb04e..781ca3115a 100644 --- a/thirdeye-ui/src/app/components/alert-wizard-v3/preview-chart/chart-content-v2/chart-content-v2.interfaces.ts +++ b/thirdeye-ui/src/app/components/alert-wizard-v3/preview-chart/chart-content-v2/chart-content-v2.interfaces.ts @@ -26,6 +26,7 @@ export interface ChartContentProps { showOnlyActivity?: boolean; hideCallToActionPrompt?: boolean; showDeleteIcon?: boolean; + isSearchEnabled?: boolean; alert: EditableAlert; onAlertPropertyChange?: (contents: Partial) => void; evaluationTimeRange: TimeRange; diff --git a/thirdeye-ui/src/app/components/alert-wizard-v3/preview-chart/enumeration-items-table/enumeration-items-table.component.tsx b/thirdeye-ui/src/app/components/alert-wizard-v3/preview-chart/enumeration-items-table/enumeration-items-table.component.tsx index c8ade46f5b..b6c953fe2d 100644 --- a/thirdeye-ui/src/app/components/alert-wizard-v3/preview-chart/enumeration-items-table/enumeration-items-table.component.tsx +++ b/thirdeye-ui/src/app/components/alert-wizard-v3/preview-chart/enumeration-items-table/enumeration-items-table.component.tsx @@ -29,32 +29,46 @@ export const EnumerationItemsTable: FunctionComponent { return ( - {detectionEvaluations.map((detectionEvaluation) => { - return ( - - onDeleteClick(detectionEvaluation) - } - /> - ); - })} + {detectionEvaluations + .filter((detectionEvaluation) => + detectionEvaluation.enumerationItem?.params?.queryFilters + ?.toString() + .toLowerCase() + .includes(searchTerm?.toLowerCase() ?? "") + ) + .map((detectionEvaluation) => { + return ( + + onDeleteClick(detectionEvaluation) + } + /> + ); + })} diff --git a/thirdeye-ui/src/app/components/alert-wizard-v3/preview-chart/enumeration-items-table/enumeration-items-table.interfaces.ts b/thirdeye-ui/src/app/components/alert-wizard-v3/preview-chart/enumeration-items-table/enumeration-items-table.interfaces.ts index ed92b9c003..ea328a00e7 100644 --- a/thirdeye-ui/src/app/components/alert-wizard-v3/preview-chart/enumeration-items-table/enumeration-items-table.interfaces.ts +++ b/thirdeye-ui/src/app/components/alert-wizard-v3/preview-chart/enumeration-items-table/enumeration-items-table.interfaces.ts @@ -21,6 +21,7 @@ export interface EnumerationItemsTableProps { onDeleteClick: (detectionEvaluation: DetectionEvaluation) => void; timezone: string | undefined; hideTime: boolean; + searchTerm?: string; showOnlyActivity?: boolean; hideDelete?: boolean; alert?: any; diff --git a/thirdeye-ui/src/app/components/alert-wizard-v3/threshold-setup/threshold-setup-v3.component.tsx b/thirdeye-ui/src/app/components/alert-wizard-v3/threshold-setup/threshold-setup-v3.component.tsx index 67739e6f44..17af47bead 100644 --- a/thirdeye-ui/src/app/components/alert-wizard-v3/threshold-setup/threshold-setup-v3.component.tsx +++ b/thirdeye-ui/src/app/components/alert-wizard-v3/threshold-setup/threshold-setup-v3.component.tsx @@ -19,7 +19,6 @@ import { useTranslation } from "react-i18next"; import { PageContentsCardV1 } from "../../../platform/components"; import { TemplatePropertiesObject } from "../../../rest/dto/alert.interfaces"; import { isValidISO8601 } from "../../../utils/alerts/alerts.util"; -import { AlertJsonEditorModal } from "../../alert-json-editor-modal/alert-json-editor-modal.component"; import { PreviewChartV3 } from "../../alert-wizard-v2/alert-template/preview-chart/preview-chart-v3.component"; import { InputSection } from "../../form-basics/input-section/input-section.component"; import { ParseMarkdown } from "../../parse-markdown/parse-markdown.component"; @@ -105,42 +104,11 @@ export const ThresholdSetupV3: FunctionComponent = ({ return ( - - - - {algorithmOptionConfig && - t("label.entity-setup", { - entity: algorithmOptionConfig.algorithmOption - .title, - multidimension: - algorithmOptionConfig.algorithmOption - .alertTemplateForMultidimension === - alert.template?.name - ? `(${t("label.multidimension")})` - : "", - })} - - - - { - onAlertPropertyChange(newAlert, isTotalChange); - - setLocalAlertTemplateProperties({ - ...newAlert.templateProperties, - }); - }} - /> - - - {inputFieldConfigs.length > 0 && ( )} - {inputFieldConfigs.length > 0 && inputFieldConfigs.map((config) => { diff --git a/thirdeye-ui/src/app/locale/languages/en-us.json b/thirdeye-ui/src/app/locale/languages/en-us.json index e3743abe5e..7a7d7800cf 100644 --- a/thirdeye-ui/src/app/locale/languages/en-us.json +++ b/thirdeye-ui/src/app/locale/languages/en-us.json @@ -618,6 +618,7 @@ "view-detection-failures": "View Detection Failures", "view-entity": "View {{entity}}", "view-investigation": "View Investigation", + "view-json": "View JSON", "view-logs": "View Logs", "view-recent-entities": "View recent {{entity}}", "view-recipe": "View recipe", diff --git a/thirdeye-ui/src/app/pages/alerts-create-page/alerts-create-easy-page/alerts-create-easy-page.component.tsx b/thirdeye-ui/src/app/pages/alerts-create-page/alerts-create-easy-page/alerts-create-easy-page.component.tsx index de7901aec0..ed7d77ef35 100644 --- a/thirdeye-ui/src/app/pages/alerts-create-page/alerts-create-easy-page/alerts-create-easy-page.component.tsx +++ b/thirdeye-ui/src/app/pages/alerts-create-page/alerts-create-easy-page/alerts-create-easy-page.component.tsx @@ -42,6 +42,7 @@ import { import DimensionImage from "../../../../assets/images/dimensions.png"; import { AdditonalFiltersDrawer } from "../../../components/additional-filters-drawer/additional-filters-drawer.component"; import { AlertCompositeFiltersModal } from "../../../components/alert-composite-filters-modal/alert-composite-filters-modal.component"; +import { AlertJsonEditorModal } from "../../../components/alert-json-editor-modal/alert-json-editor-modal.component"; // Remove "createNewStartingAlertThreshold as" for fallback import { createNewStartingAlertThreshold as createNewStartingAlert } from "../../../components/alert-wizard-v2/alert-template/alert-template.utils"; import { AvailableAlgorithmOption } from "../../../components/alert-wizard-v3/alert-type-selection/alert-type-selection.interfaces"; @@ -1882,6 +1883,21 @@ export const AlertsCreateEasyPage: FunctionComponent = () => { +