Skip to content

Commit

Permalink
fix(ui): TE-2635 fix chart load issue on date change in alert details (
Browse files Browse the repository at this point in the history
…#1775)

* fix(ui): TE-2635 fix chart load issue on date change in alert details

* added e2e test for date range

* run e2e on PRs not in draft

* push event added

* action fix

* fix broken test
  • Loading branch information
nalin-patidar authored Jan 24, 2025
1 parent bb32e82 commit aec90e0
Show file tree
Hide file tree
Showing 6 changed files with 107 additions and 14 deletions.
9 changes: 9 additions & 0 deletions .github/workflows/fe-e2e.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,20 @@ on:
push:
branches:
- master
pull_request:
types:
- opened
- edited
- ready_for_review
- synchronize
branches:
- master
workflow_dispatch:
jobs:
test:
timeout-minutes: 60
runs-on: ubuntu-latest
if: github.event.pull_request.draft == false
steps:
- name: Pull Repository
uses: actions/checkout@v4
Expand Down
67 changes: 67 additions & 0 deletions thirdeye-ui/e2e/pages/alert-detail.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,41 @@ export class AlertDetailsPage extends BasePage {
this.alertsApiResponseData = await alertsApiResponse.json();
}

async resolveDetailsPageApis() {
await Promise.all([
this.page.waitForResponse(
(response) =>
response.url().includes("/api/alerts/insights") &&
response.status() === 200
),
this.page.waitForResponse(
(response) =>
response.url().includes("/api/alerts") &&
response.status() === 200
),
this.page.waitForResponse(
(response) =>
response.url().includes("/api/enumeration-items") &&
response.status() === 200
),
this.page.waitForResponse(
(response) =>
response.url().includes("/api/anomalies") &&
response.status() === 200
),
this.page.waitForResponse(
(response) =>
response.url().includes("/stats") &&
response.status() === 200
),
this.page.waitForResponse(
(response) =>
response.url().includes("/api/alerts/evaluate") &&
response.status() === 200
),
]);
}

async resolveAnomaliesApis() {
const [anomaliesApiResponse] = await Promise.all([
this.page.waitForResponse(
Expand Down Expand Up @@ -277,4 +312,36 @@ export class AlertDetailsPage extends BasePage {
.filter({ hasText: "Heatmap & Dimension Drills" })
).toBeDefined();
}

async applyDateChange() {
const calnedarButton = this.page.getByTestId("open-calendar-button");
await calnedarButton.click();
const availableDates = this.page.locator(
".MuiPickersDay-day:not(.MuiPickersDay-daySelected):not(.MuiPickersDay-dayDisabled)"
);
const count = await availableDates.count();
const newStartDate = availableDates.nth(1);
const newEndDate = availableDates.nth(count - 2);
newStartDate.click();
newEndDate.click();
const applyDateBtn = this.page.getByTestId("apply-button");
applyDateBtn.click();
await Promise.all([
this.page.waitForResponse(
(response) =>
response.url().includes(`/api/anomalies`) &&
response.status() === 200
),
this.page.waitForResponse(
(response) =>
response.url().includes(`/stats`) &&
response.status() === 200
),
this.page.waitForResponse(
(response) =>
response.url().includes(`/api/alerts/evaluate`) &&
response.status() === 200
),
]);
}
}
12 changes: 9 additions & 3 deletions thirdeye-ui/e2e/pages/alert-list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,10 @@ export class AlertListPage extends BasePage {

const jsonEditor = this.page.locator(".CodeMirror");
await jsonEditor.click();
const editedAlert = `{"id": ${topAlert.id}, "name": "Clicks_SUM_mean-variance-rule-dup-edit","description": "","template": {"name": "startree-mean-variance"},"templateProperties": {"dataSource": "pinot","dataset": "AdCampaignData","aggregationColumn": "Clicks","aggregationFunction": "SUM","monitoringGranularity": "P1D","timezone": "UTC","queryFilters": "","sensitivity": "-6","lookback": "P21D"},"cron": "0 0 5 ? * MON-FRI *","auth": {"namespace": null}}`;
const date = new Date();
const editedAlert = `{"id": ${
topAlert.id
}, "name": "Clicks_SUM_mean-variance-rule-dup-edit${date.getTime()}","description": "","template": {"name": "startree-mean-variance"},"templateProperties": {"dataSource": "pinot","dataset": "AdCampaignData","aggregationColumn": "Clicks","aggregationFunction": "SUM","monitoringGranularity": "P1D","timezone": "UTC","queryFilters": "","sensitivity": "-6","lookback": "P21D"},"cron": "0 0 5 ? * MON-FRI *","auth": {"namespace": null}}`;
await this.page.evaluate((editedAlert) => {
const editor = document.querySelector(".CodeMirror")?.CodeMirror;
editor.setValue(editedAlert);
Expand Down Expand Up @@ -253,10 +256,13 @@ export class AlertListPage extends BasePage {
await expect(saveButtonAfterLoadChart).toBeEnabled();
await expect(saveButtonAfterLoadChart).toHaveText("Update Alert");

const updateApiRequest = this.page.waitForRequest("/api/alerts");
const updateApiResponse = this.page.waitForResponse("/api/alerts");
saveButtonAfterLoadChart.click();

const updateButtonModal = this.page.locator(`.MuiDialog-paper button`);
const updateBtn = updateButtonModal.nth(1);
const updateApiRequest = this.page.waitForRequest("/api/alerts");
const updateApiResponse = this.page.waitForResponse("/api/alerts");
updateBtn.click();
const updateAlertRequest = await updateApiRequest;

const updateAlertResponse = await updateApiResponse;
Expand Down
9 changes: 9 additions & 0 deletions thirdeye-ui/e2e/tests/alert-details.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,3 +51,12 @@ test("Active and Deactivate alerts", async ({ page }) => {
await alertDetailsPage.resolveApis();
await alertDetailsPage.checkAlertIsActiveOrDeactive(true);
});

test("User can select date range for anomalies", async ({ page }) => {
const alertDetailsPage = new AlertDetailsPage(page);
await alertDetailsPage.goToAlertDetailsPage();
await alertDetailsPage.resolveApis();
await alertDetailsPage.openFirstAlert();
await alertDetailsPage.resolveDetailsPageApis();
await alertDetailsPage.applyDateChange();
});
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export interface TimeRangeSelectorProps {

export const TIME_SELECTOR_TEST_IDS = {
TIME_RANGE_SELECTOR: "time-range-selector",
OPEN_BUTTON: "open-button",
OPEN_BUTTON: "open-calendar-button",
APPLY_BUTTON: "apply-button",
MONTH_LINK: "month-link",
DATE_LINK: "date-link",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -121,12 +121,6 @@ export const AlertsViewPage: FunctionComponent = () => {
retryNumber: number,
prevInterval?: NodeJS.Timeout
): Promise<void> => {
// let taskSubType: TaskSubtype | undefined;
// if (searchParams.get("update")) {
// taskSubType = TaskSubtype.DETECTION_HISTORICAL_DATA_AFTER_UPDATE;
// } else if (searchParams.has(QUERY_PARAM_KEY_ANOMALIES_RETRY)) {
// taskSubType = TaskSubtype.DETECTION_HISTORICAL_DATA_AFTER_CREATE;
// }
clearInterval(prevInterval);
if (
searchParams.get("alert") ||
Expand All @@ -136,7 +130,6 @@ export const AlertsViewPage: FunctionComponent = () => {
try {
setTaskStatusLoading(true);
const taskStatus = await getTasks({
// taskSubType: taskSubType,
alertOrSubGroupId: Number(alertId),
status: [TaskStatus.RUNNING, TaskStatus.WAITING],
});
Expand All @@ -156,13 +149,13 @@ export const AlertsViewPage: FunctionComponent = () => {
);
}, 5000 * Math.pow(2, retryNumber));
} else {
// setRefreshAttempts(0);
setTaskStatusLoading(false);
getAlertQuery.refetch();
getEnumerationItemsQuery.refetch();
getAnomaliesQuery.refetch();
getAlertInsight({ alertId: Number(alertId) });
fetchStats();
setNextAttemptTime(0);
}
} catch (e) {
setTaskStatusLoading(false);
Expand All @@ -181,6 +174,7 @@ export const AlertsViewPage: FunctionComponent = () => {
getAnomaliesQuery.refetch();
getAlertInsight({ alertId: Number(alertId) });
fetchStats();
setNextAttemptTime(0);
}
};

Expand All @@ -202,15 +196,13 @@ export const AlertsViewPage: FunctionComponent = () => {
queryFn: () => {
return getAlert(Number(alertId));
},
// enabled: false,
});

const getEnumerationItemsQuery = useFetchQuery({
queryKey: ["enumerationItems", alertId],
queryFn: () => {
return getEnumerationItems({ alertId: Number(alertId) });
},
// enabled: false,
});

const getAnomaliesQuery = useFetchQuery({
Expand All @@ -225,6 +217,16 @@ export const AlertsViewPage: FunctionComponent = () => {
enabled: false,
});

const handleRefetchAnomalies = (): void => {
getAnomaliesQuery.refetch();
};

useEffect(() => {
if (nextAttemptTime === 0) {
handleRefetchAnomalies();
}
}, [startTime, endTime]);

const [searchTerm, sortOrder, sortKey] = useMemo(
() => [
searchParams.get(QUERY_PARAM_KEY_FOR_SEARCH),
Expand Down

0 comments on commit aec90e0

Please sign in to comment.