Skip to content

Commit

Permalink
fixed the next set of issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@harshilvelotio
harshilvelotio committed Dec 1, 2024
1 parent 4fdbf55 commit 4f92594
Show file tree
Hide file tree
Showing 11 changed files with 131 additions and 59 deletions.
17 changes: 13 additions & 4 deletions thirdeye-ui/src/app/components/alert-json-editor-modal/alert-json-editor-modal.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,14 @@ import { EditableAlert } from "../../rest/dto/alert.interfaces";
import { AlertJsonEditorModalProps } from "./alert-json-editor-modal.interfaces";

export const AlertJsonEditorModal: FunctionComponent<AlertJsonEditorModalProps> =
({ alert, onSubmitChanges }) => {
({
alert,
onSubmitChanges,
isReadOnly = false,
buttonText,
isDisabled = false,
cancelButtonText,
}) => {
const { t } = useTranslation();
const { showDialog } = useDialogProviderV1();

Expand All @@ -47,12 +54,13 @@ export const AlertJsonEditorModal: FunctionComponent<AlertJsonEditorModalProps>
),
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;
});
Expand All @@ -64,10 +72,11 @@ export const AlertJsonEditorModal: FunctionComponent<AlertJsonEditorModalProps>
<>
<Button
color="primary"
disabled={isDisabled}
variant="outlined"
onClick={handleAdvancedEditorBtnClick}
>
{t("label.json-editor")}
{buttonText ?? t("label.json-editor")}
</Button>
</>
);
Expand Down
9 changes: 8 additions & 1 deletion thirdeye-ui/src/app/components/alert-json-editor-modal/alert-json-editor-modal.interfaces.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
1 change: 1 addition & 0 deletions ...pp/components/alert-wizard-v2/alert-template/preview-chart/preview-chart-v3.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,6 +248,7 @@ export const PreviewChartV3: FunctionComponent<PreviewChartProps> = ({
}
>
<ChartContentV2
isSearchEnabled
alert={alert}
alertEvaluation={evaluation}
evaluationTimeRange={evaluationTimeRange}
Expand Down
54 changes: 53 additions & 1 deletion .../components/alert-wizard-v3/preview-chart/chart-content-v2/chart-content-v2.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,15 @@
* See the License for the specific language governing permissions and limitations under
* the License.
*/
import { Box, Button, Grid } from "@material-ui/core";
import {
Box,
Button,
Grid,
IconButton,
InputAdornment,
TextField,
} from "@material-ui/core";
import { Close, Search } from "@material-ui/icons";
import RefreshIcon from "@material-ui/icons/Refresh";
import { Alert } from "@material-ui/lab";
import { isEqual } from "lodash";
Expand Down Expand Up @@ -45,9 +53,11 @@ export const ChartContentV2: FunctionComponent<ChartContentProps> = ({
evaluationTimeRange,
legendsPlacement,
showDeleteIcon = true,
isSearchEnabled = false,
}) => {
const sharedWizardClasses = useAlertWizardV2Styles();
const previewChartClasses = usePreviewChartStyles();
const [searchTerm, setSearchTerm] = useState("");
const { t } = useTranslation();

const detectionEvaluations = useMemo(() => {
Expand Down Expand Up @@ -199,6 +209,47 @@ export const ChartContentV2: FunctionComponent<ChartContentProps> = ({
</Box>
)}

{isSearchEnabled && (
<Box
display="flex"
justifyContent="flex-end"
marginTop={1}
ml={2}
mr={1}
>
<TextField
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Search />
</InputAdornment>
),
endAdornment: (
<InputAdornment position="end">
{searchTerm && (
<IconButton
aria-label="clear search"
onClick={() => {
setSearchTerm("");
}}
>
<Close />
</IconButton>
)}
</InputAdornment>
),
}}
placeholder={t("label.search-entity", {
entity: t("label.dimensions"),
})}
value={searchTerm}
onChange={(e) => {
setSearchTerm(e.target.value);
}}
/>
</Box>
)}

{workingDetectionEvaluations &&
workingDetectionEvaluations[0]?.enumerationItem && (
<Box marginTop={1}>
Expand All @@ -216,6 +267,7 @@ export const ChartContentV2: FunctionComponent<ChartContentProps> = ({
alertEvaluation?.alert.template
)}
legendsPlacement={legendsPlacement}
searchTerm={searchTerm}
showOnlyActivity={showOnlyActivity}
timezone={determineTimezoneFromAlertInEvaluation(
alertEvaluation?.alert.template
Expand Down
1 change: 1 addition & 0 deletions .../components/alert-wizard-v3/preview-chart/chart-content-v2/chart-content-v2.interfaces.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export interface ChartContentProps {
showOnlyActivity?: boolean;
hideCallToActionPrompt?: boolean;
showDeleteIcon?: boolean;
isSearchEnabled?: boolean;
alert: EditableAlert;
onAlertPropertyChange?: (contents: Partial<EditableAlert>) => void;
evaluationTimeRange: TimeRange;
Expand Down
56 changes: 35 additions & 21 deletions ...ert-wizard-v3/preview-chart/enumeration-items-table/enumeration-items-table.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,32 +29,46 @@ export const EnumerationItemsTable: FunctionComponent<EnumerationItemsTableProps
alert,
evaluationTimeRange,
legendsPlacement,
searchTerm,
}) => {
return (
<Card variant="outlined">
<CardContent>
<Grid container>
{detectionEvaluations.map((detectionEvaluation) => {
return (
<EnumerationItemRow
alert={alert}
anomalies={detectionEvaluation.anomalies}
detectionEvaluation={detectionEvaluation}
evaluationTimeRange={evaluationTimeRange}
hideDelete={hideDelete}
hideTime={hideTime}
key={generateNameForDetectionResult(
detectionEvaluation
)}
legendsPlacement={legendsPlacement}
showOnlyActivity={showOnlyActivity}
timezone={timezone}
onDeleteClick={() =>
onDeleteClick(detectionEvaluation)
}
/>
);
})}
{detectionEvaluations
.filter((detectionEvaluation) =>
detectionEvaluation.enumerationItem?.params?.queryFilters
?.toString()
.toLowerCase()
.includes(searchTerm?.toLowerCase() ?? "")
)
.map((detectionEvaluation) => {
return (
<EnumerationItemRow
alert={alert}
anomalies={
detectionEvaluation.anomalies
}
detectionEvaluation={
detectionEvaluation
}
evaluationTimeRange={
evaluationTimeRange
}
hideDelete={hideDelete}
hideTime={hideTime}
key={generateNameForDetectionResult(
detectionEvaluation
)}
legendsPlacement={legendsPlacement}
showOnlyActivity={showOnlyActivity}
timezone={timezone}
onDeleteClick={() =>
onDeleteClick(detectionEvaluation)
}
/>
);
})}
</Grid>
</CardContent>
</Card>
Expand Down
1 change: 1 addition & 0 deletions ...ert-wizard-v3/preview-chart/enumeration-items-table/enumeration-items-table.interfaces.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export interface EnumerationItemsTableProps {
onDeleteClick: (detectionEvaluation: DetectionEvaluation) => void;
timezone: string | undefined;
hideTime: boolean;
searchTerm?: string;
showOnlyActivity?: boolean;
hideDelete?: boolean;
alert?: any;
Expand Down
32 changes: 0 additions & 32 deletions ...ye-ui/src/app/components/alert-wizard-v3/threshold-setup/threshold-setup-v3.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -105,42 +104,11 @@ export const ThresholdSetupV3: FunctionComponent<ThresholdSetupProps> = ({

return (
<PageContentsCardV1>
<Grid container alignItems="center" justifyContent="space-between">
<Grid item>
<Typography variant="h5">
{algorithmOptionConfig &&
t("label.entity-setup", {
entity: algorithmOptionConfig.algorithmOption
.title,
multidimension:
algorithmOptionConfig.algorithmOption
.alertTemplateForMultidimension ===
alert.template?.name
? `(${t("label.multidimension")})`
: "",
})}
</Typography>
</Grid>
<Grid item>
<AlertJsonEditorModal
alert={alert}
onSubmitChanges={(newAlert, isTotalChange) => {
onAlertPropertyChange(newAlert, isTotalChange);

setLocalAlertTemplateProperties({
...newAlert.templateProperties,
});
}}
/>
</Grid>
</Grid>

{inputFieldConfigs.length > 0 && (
<Grid item xs={12}>
<Box padding={2} />
</Grid>
)}

<Box display="flex" flexDirection="row">
{inputFieldConfigs.length > 0 &&
inputFieldConfigs.map((config) => {
Expand Down
1 change: 1 addition & 0 deletions thirdeye-ui/src/app/locale/languages/en-us.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
17 changes: 17 additions & 0 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 @@ -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";
Expand Down Expand Up @@ -1882,6 +1883,21 @@ export const AlertsCreateEasyPage: FunctionComponent = () => {
<Grid
container
>
<AlertJsonEditorModal
isReadOnly
alert={
alert
}
buttonText={t(
"label.view-json"
)}
cancelButtonText={t(
"label.close"
)}
isDisabled={
!algorithmOption
}
/>
<Button
className={
classes.infoButton
Expand Down Expand Up @@ -1987,6 +2003,7 @@ export const AlertsCreateEasyPage: FunctionComponent = () => {
</Grid>
) : (
<ChartContentV2
isSearchEnabled
showLoadButton
showOnlyActivity
alert={
Expand Down
1 change: 1 addition & 0 deletions ...rc/app/pages/alerts-create-page/alerts-create-easy-page/alerts-create-easy-page.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ export const easyAlertStyles = makeStyles((theme) => ({
backgroundColor: "#f3f9ff",
textWrap: "nowrap",
textTransform: "none",
marginLeft: theme.spacing(1),
},
algorithmContainer: {
marginBottom: theme.spacing(2),
Expand Down

0 comments on commit 4f92594

Please sign in to comment.