Skip to content

Temporarily removed visualizations for 3.0-alpha1. #1272

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
peterzhuamazon merged 3 commits into from
Mar 16, 2025
Merged

Temporarily removed visualizations for 3.0-alpha1. #1272

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ee7a285
Refactored vega-based visualizations to chart.js.
AWSHurneyt Mar 15, 2025
d3e350d
Removed visualizations as chart.js dependency is also not building in…
AWSHurneyt Mar 16, 2025
64695b4
Updated snapshots.
AWSHurneyt Mar 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,13 +78,16 @@
"jest-environment-jsdom": "^27.5.1",
"lint-staged": "^10.2.0",
"string.prototype.replaceall": "1.0.7",
"ts-loader": "^6.2.1"
"ts-loader": "^6.2.1",
"@types/chart.js": "^2.9.37"
},
"engines": {
"yarn": "^1.21.1"
},
"dependencies": {
"formik": "^2.2.6",
"react-graph-vis": "^1.0.7"
"react-graph-vis": "^1.0.7",
"chart.js": "^4.4.8",
"chartjs-adapter-moment": "^1.0.1"
}
}
79 changes: 28 additions & 51 deletions public/pages/Alerts/containers/Alerts/Alerts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,20 +17,14 @@ import {
EuiToolTip,
EuiEmptyPrompt,
EuiTableSelectionType,
EuiIcon,
EuiTabbedContent,
EuiText,
} from '@elastic/eui';
import { FieldValueSelectionFilterConfigType } from '@elastic/eui/src/components/search_bar/filters/field_value_selection_filter';
import dateMath from '@elastic/datemath';
import React, { Component } from 'react';
import { ContentPanel } from '../../../../components/ContentPanel';
import {
getAlertsVisualizationSpec,
getChartTimeUnit,
getDomainRange,
TimeUnit,
} from '../../../Overview/utils/helpers';
import { getChartTimeUnit, TimeUnit } from '../../../Overview/utils/helpers';
import moment from 'moment';
import {
ALERT_STATE,
Expand Down Expand Up @@ -58,13 +52,11 @@ import {
errorNotificationToast,
getDuration,
renderTime,
renderVisualization,
setBreadcrumbs,
successNotificationToast,
} from '../../../../utils/helpers';
import { NotificationsStart } from 'opensearch-dashboards/public';
import { match, RouteComponentProps, withRouter } from 'react-router-dom';
import { ChartContainer } from '../../../../components/Charts/ChartContainer';
import {
AlertItem,
CorrelationAlertTableItem,
Expand All @@ -77,6 +69,7 @@ import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
import { DataStore } from '../../../../store/DataStore';
import { ThreatIntelAlertsTable } from '../../components/ThreatIntelAlertsTable/ThreatIntelAlertsTable';
import { PageHeader } from '../../../../components/PageHeader/PageHeader';
// import { createBarChartWrapper } from '../../../../utils/chartUtils';

type FilterAlertParams =
| { alerts: AlertItem[]; timeField: 'last_notification_time' }
Expand Down Expand Up @@ -121,11 +114,13 @@ export interface AlertsState {
selectedTabId: AlertTabId;
}

const groupByOptions = [
export const alertsGroupByOptions = [
{ text: 'Alert status', value: 'status' },
{ text: 'Alert severity', value: 'severity' },
];

const ALERTS_VIEW_CHART = 'alerts-view';

export class Alerts extends Component<AlertsProps, AlertsState> {
private abortControllers: AbortController[] = [];

Expand Down Expand Up @@ -248,7 +243,7 @@ export class Alerts extends Component<AlertsProps, AlertsState> {
/>
),
});
renderVisualization(this.generateVisualizationSpec(filteredAlerts), 'alerts-view');
// this.getChart(this.getVisData(filteredAlerts));
};

filterCorrelationAlerts = () => {
Expand All @@ -272,7 +267,7 @@ export class Alerts extends Component<AlertsProps, AlertsState> {
/>
),
});
renderVisualization(this.generateVisualizationSpec(filteredCorrelationAlerts), 'alerts-view');
// this.getChart(this.getVisData(filteredCorrelationAlerts));
};

filterThreatIntelAlerts = () => {
Expand All @@ -296,28 +291,19 @@ export class Alerts extends Component<AlertsProps, AlertsState> {
/>
),
});
renderVisualization(this.generateVisualizationSpec(filteredAlerts), 'alerts-view');
// this.getChart(this.getVisData(filteredAlerts));
};

private renderVisAsPerTab() {
switch (this.state.selectedTabId) {
case AlertTabId.DetectionRules:
renderVisualization(
this.generateVisualizationSpec(this.state.filteredAlerts),
'alerts-view'
);
// this.getChart(this.getVisData(this.state.filteredAlerts));
break;
case AlertTabId.Correlations:
renderVisualization(
this.generateVisualizationSpec(this.state.filteredCorrelationAlerts),
'alerts-view'
);
// this.getChart(this.getVisData(this.state.filteredCorrelationAlerts));
break;
case AlertTabId.ThreatIntel:
renderVisualization(
this.generateVisualizationSpec(this.state.filteredThreatIntelAlerts),
'alerts-view'
);
// this.getChart(this.getVisData(this.state.filteredThreatIntelAlerts));
break;
}
}
Expand Down Expand Up @@ -518,39 +504,28 @@ export class Alerts extends Component<AlertsProps, AlertsState> {
this.setState({ flyoutCorrelationData: alertItem ? { alertItem } : undefined });
}

generateVisualizationSpec(alerts: (AlertItem | CorrelationAlertTableItem | ThreatIntelAlert)[]) {
const visData = alerts.map((alert) => {
// getChart(data: any) {
// createBarChartWrapper(data, this.state.groupBy, ALERTS_VIEW_CHART, this.props.dateTimeFilter);
// }

getVisData(alerts: (AlertItem | CorrelationAlertTableItem | ThreatIntelAlert)[]) {
return alerts.map((alert) => {
const time = new Date(alert.start_time);
time.setMilliseconds(0);
time.setSeconds(0);

return {
alert: 1,
time,
time: time.getTime(),
status: alert.state,
severity: parseAlertSeverityToOption(alert.severity)?.label || alert.severity,
};
});
const {
dateTimeFilter = {
startTime: DEFAULT_DATE_RANGE.start,
endTime: DEFAULT_DATE_RANGE.end,
},
} = this.props;
const chartTimeUnits = getChartTimeUnit(dateTimeFilter.startTime, dateTimeFilter.endTime);
return getAlertsVisualizationSpec(visData, this.state.groupBy, {
timeUnit: chartTimeUnits.timeUnit,
dateFormat: chartTimeUnits.dateFormat,
domain: getDomainRange(
[dateTimeFilter.startTime, dateTimeFilter.endTime],
chartTimeUnits.timeUnit.unit
),
});
}

createGroupByControl(): React.ReactNode {
return createSelectComponent(
groupByOptions,
alertsGroupByOptions,
this.state.groupBy,
'alert-vis-groupBy',
(event) => {
Expand Down Expand Up @@ -1024,8 +999,8 @@ export class Alerts extends Component<AlertsProps, AlertsState> {
content: (
<>
<EuiSpacer size="m" />
{this.getAlertsGraph(alerts, loading)}
<EuiSpacer size="m" />
{/*{this.getAlertsGraph(alerts, loading)}*/}
{/*<EuiSpacer size="m" />*/}
<ContentPanel title={'Alerts'} actions={[this.getContelPanelActions()]}>
<EuiInMemoryTable
columns={this.getColumns()}
Expand All @@ -1049,8 +1024,8 @@ export class Alerts extends Component<AlertsProps, AlertsState> {
content: (
<>
<EuiSpacer size="m" />
{this.getAlertsGraph(alerts, loading)}
<EuiSpacer size="m" />
{/*{this.getAlertsGraph(alerts, loading)}*/}
{/*<EuiSpacer size="m" />*/}
<ContentPanel title={'Alerts'} actions={[this.getContelPanelActions()]}>
<ThreatIntelAlertsTable
alerts={alertsFiltered ? filteredThreatIntelAlerts : threatIntelAlerts}
Expand All @@ -1071,8 +1046,8 @@ export class Alerts extends Component<AlertsProps, AlertsState> {
content: (
<>
<EuiSpacer size="m" />
{this.getAlertsGraph(alerts, loading)}
<EuiSpacer size="m" />
{/*{this.getAlertsGraph(alerts, loading)}*/}
{/*<EuiSpacer size="m" />*/}
<ContentPanel title={'Alerts'} actions={[this.getContelPanelActions()]}>
<EuiInMemoryTable
columns={this.getCorrelationColumns()}
Expand Down Expand Up @@ -1181,7 +1156,9 @@ export class Alerts extends Component<AlertsProps, AlertsState> {
}
/>
) : (
<ChartContainer chartViewId={'alerts-view'} loading={loading} />
<div id="chart-container">
<canvas id={ALERTS_VIEW_CHART}></canvas>
</div>
)}
</EuiFlexItem>
</EuiFlexGroup>
Expand Down
Loading
Loading