Skip to content

Commit 2ccadad

Browse files
jovancvetkovic3006jovancvetkovic3006
authored
Feature/charts should show the entire time range selected in the filter opensearch-project#258 (opensearch-project#265)
* [FEATURE] Set default time range to 24 hrs and share the same setting for all UI pages opensearch-project#253 [FEATURE] Charts should show the entire time range selected in the filter opensearch-project#258 Signed-off-by: Jovan Cvetkovic <[email protected]> * [FEATURE] Set default time range to 24 hrs and share the same setting for all UI pages opensearch-project#253 [FEATURE] Charts should show the entire time range selected in the filter opensearch-project#258 [FEATURE] Add chart data to the tooltips opensearch-project#263 Signed-off-by: Jovan Cvetkovic <[email protected]> * [FEATURE] Set default time range to 24 hrs and share the same setting for all UI pages opensearch-project#253 [FEATURE] Charts should show the entire time range selected in the filter opensearch-project#258 [FEATURE] Add chart data to the tooltips opensearch-project#263 Signed-off-by: Jovan Cvetkovic <[email protected]> * [FEATURE] Set default time range to 24 hrs and share the same setting for all UI pages opensearch-project#253 [FEATURE] Charts should show the entire time range selected in the filter opensearch-project#258 [FEATURE] Add chart data to the tooltips opensearch-project#263 Signed-off-by: Jovan Cvetkovic <[email protected]> * [FEATURE] Set default time range to 24 hrs and share the same setting for all UI pages opensearch-project#253 [FEATURE] Charts should show the entire time range selected in the filter opensearch-project#258 [FEATURE] Add chart data to the tooltips opensearch-project#263 Signed-off-by: Jovan Cvetkovic <[email protected]> * [FEATURE] Set default time range to 24 hrs and share the same setting for all UI pages opensearch-project#253 [FEATURE] Charts should show the entire time range selected in the filter opensearch-project#258 [FEATURE] Add chart data to the tooltips opensearch-project#263 Signed-off-by: Jovan Cvetkovic <[email protected]> * [FEATURE] Set default time range to 24 hrs and share the same setting for all UI pages opensearch-project#253 [FEATURE] Charts should show the entire time range selected in the filter opensearch-project#258 [FEATURE] Add chart data to the tooltips opensearch-project#263 Signed-off-by: Jovan Cvetkovic <[email protected]> * PR 265 Code review Signed-off-by: Jovan Cvetkovic <[email protected]> * PR 265 Code review Signed-off-by: Jovan Cvetkovic <[email protected]> Signed-off-by: Jovan Cvetkovic <[email protected]>
1 parent 742ebdd commit 2ccadad

File tree

11 files changed

+446
-272
lines changed

11 files changed

+446
-272
lines changed

‎public/pages/Alerts/containers/Alerts/Alerts.tsx

Lines changed: 67 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@ import { ContentPanel } from '../../../../components/ContentPanel';
2525
import {
2626
getAlertsVisualizationSpec,
2727
getChartTimeUnit,
28-
getDateFormatByTimeUnit,
28+
getDomainRange,
29+
TimeUnit,
2930
} from '../../../Overview/utils/helpers';
3031
import moment from 'moment';
3132
import {
@@ -54,6 +55,8 @@ import {
5455
} from '../../../../utils/helpers';
5556
import { NotificationsStart } from 'opensearch-dashboards/public';
5657
import { match, withRouter } from 'react-router-dom';
58+
import { DateTimeFilter } from '../../../Overview/models/interfaces';
59+
import { ChartContainer } from '../../../../components/Charts/ChartContainer';
5760

5861
export interface AlertsProps {
5962
alertService: AlertsService;
@@ -63,12 +66,12 @@ export interface AlertsProps {
6366
opensearchService: OpenSearchService;
6467
notifications: NotificationsStart;
6568
match: match;
69+
dateTimeFilter?: DateTimeFilter;
70+
setDateTimeFilter?: Function;
6671
}
6772

6873
export interface AlertsState {
6974
groupBy: string;
70-
startTime: string;
71-
endTime: string;
7275
recentlyUsedRanges: DurationRange[];
7376
selectedItems: AlertItem[];
7477
alerts: AlertItem[];
@@ -77,7 +80,8 @@ export interface AlertsState {
7780
filteredAlerts: AlertItem[];
7881
detectors: { [key: string]: Detector };
7982
loading: boolean;
80-
timeUnit: string;
83+
timeUnit: TimeUnit;
84+
dateFormat: string;
8185
}
8286

8387
const groupByOptions = [
@@ -90,25 +94,38 @@ class Alerts extends Component<AlertsProps, AlertsState> {
9094

9195
constructor(props: AlertsProps) {
9296
super(props);
97+
98+
const {
99+
dateTimeFilter = {
100+
startTime: DEFAULT_DATE_RANGE.start,
101+
endTime: DEFAULT_DATE_RANGE.end,
102+
},
103+
} = props;
104+
const timeUnits = getChartTimeUnit(dateTimeFilter.startTime, dateTimeFilter.endTime);
93105
this.state = {
106+
loading: true,
94107
groupBy: 'status',
95-
startTime: DEFAULT_DATE_RANGE.start,
96-
endTime: DEFAULT_DATE_RANGE.end,
97108
recentlyUsedRanges: [DEFAULT_DATE_RANGE],
98109
selectedItems: [],
99110
alerts: [],
100111
alertsFiltered: false,
101112
filteredAlerts: [],
102113
detectors: {},
103-
loading: false,
104-
timeUnit: 'yearmonthdatehoursminutes',
114+
timeUnit: timeUnits.timeUnit,
115+
dateFormat: timeUnits.dateFormat,
105116
};
106117
}
107118

108119
componentDidUpdate(prevProps: Readonly<AlertsProps>, prevState: Readonly<AlertsState>) {
120+
const {
121+
dateTimeFilter = {
122+
startTime: DEFAULT_DATE_RANGE.start,
123+
endTime: DEFAULT_DATE_RANGE.end,
124+
},
125+
} = this.props;
109126
const alertsChanged =
110-
prevState.startTime !== this.state.startTime ||
111-
prevState.endTime !== this.state.endTime ||
127+
prevProps.dateTimeFilter?.startTime !== dateTimeFilter.startTime ||
128+
prevProps.dateTimeFilter?.endTime !== dateTimeFilter.endTime ||
112129
prevState.alerts !== this.state.alerts ||
113130
prevState.alerts.length !== this.state.alerts.length;
114131

@@ -120,9 +137,15 @@ class Alerts extends Component<AlertsProps, AlertsState> {
120137
}
121138

122139
filterAlerts = () => {
123-
const { alerts, startTime, endTime } = this.state;
124-
const startMoment = dateMath.parse(startTime);
125-
const endMoment = dateMath.parse(endTime);
140+
const { alerts } = this.state;
141+
const {
142+
dateTimeFilter = {
143+
startTime: DEFAULT_DATE_RANGE.start,
144+
endTime: DEFAULT_DATE_RANGE.end,
145+
},
146+
} = this.props;
147+
const startMoment = dateMath.parse(dateTimeFilter.startTime);
148+
const endMoment = dateMath.parse(dateTimeFilter.endTime);
126149
const filteredAlerts = alerts.filter((alert) =>
127150
moment(alert.last_notification_time).isBetween(moment(startMoment), moment(endMoment))
128151
);
@@ -226,10 +249,20 @@ class Alerts extends Component<AlertsProps, AlertsState> {
226249
severity: parseAlertSeverityToOption(alert.severity)?.label || alert.severity,
227250
};
228251
});
229-
252+
const {
253+
dateTimeFilter = {
254+
startTime: DEFAULT_DATE_RANGE.start,
255+
endTime: DEFAULT_DATE_RANGE.end,
256+
},
257+
} = this.props;
258+
const chartTimeUnits = getChartTimeUnit(dateTimeFilter.startTime, dateTimeFilter.endTime);
230259
return getAlertsVisualizationSpec(visData, this.state.groupBy, {
231-
timeUnit: this.state.timeUnit,
232-
dateFormat: getDateFormatByTimeUnit(this.state.startTime, this.state.endTime),
260+
timeUnit: chartTimeUnits.timeUnit,
261+
dateFormat: chartTimeUnits.dateFormat,
262+
domain: getDomainRange(
263+
[dateTimeFilter.startTime, dateTimeFilter.endTime],
264+
chartTimeUnits.timeUnit.unit
265+
),
233266
});
234267
}
235268

@@ -313,13 +346,17 @@ class Alerts extends Component<AlertsProps, AlertsState> {
313346
recentlyUsedRanges = recentlyUsedRanges.slice(0, MAX_RECENTLY_USED_TIME_RANGES);
314347
const endTime = start === end ? DEFAULT_DATE_RANGE.end : end;
315348

316-
const timeUnit = getChartTimeUnit(start, endTime);
349+
const timeUnits = getChartTimeUnit(start, endTime);
317350
this.setState({
318-
startTime: start,
319-
endTime: endTime,
320351
recentlyUsedRanges: recentlyUsedRanges,
321-
timeUnit,
352+
...timeUnits,
322353
});
354+
355+
this.props.setDateTimeFilter &&
356+
this.props.setDateTimeFilter({
357+
startTime: start,
358+
endTime: endTime,
359+
});
323360
};
324361

325362
onRefresh = async () => {
@@ -375,11 +412,15 @@ class Alerts extends Component<AlertsProps, AlertsState> {
375412
filteredAlerts,
376413
flyoutData,
377414
loading,
378-
startTime,
379-
endTime,
380415
recentlyUsedRanges,
381416
} = this.state;
382417

418+
const {
419+
dateTimeFilter = {
420+
startTime: DEFAULT_DATE_RANGE.start,
421+
endTime: DEFAULT_DATE_RANGE.end,
422+
},
423+
} = this.props;
383424
const severities = new Set();
384425
const statuses = new Set();
385426
filteredAlerts.forEach((alert) => {
@@ -455,8 +496,8 @@ class Alerts extends Component<AlertsProps, AlertsState> {
455496
</EuiFlexItem>
456497
<EuiFlexItem grow={false}>
457498
<EuiSuperDatePicker
458-
start={startTime}
459-
end={endTime}
499+
start={dateTimeFilter.startTime}
500+
end={dateTimeFilter.endTime}
460501
recentlyUsedRanges={recentlyUsedRanges}
461502
isLoading={loading}
462503
onTimeChange={this.onTimeChange}
@@ -474,7 +515,7 @@ class Alerts extends Component<AlertsProps, AlertsState> {
474515
{this.createGroupByControl()}
475516
</EuiFlexItem>
476517
<EuiFlexItem>
477-
<div id="alerts-view"></div>
518+
<ChartContainer chartViewId={'alerts-view'} loading={loading} />
478519
</EuiFlexItem>
479520
</EuiFlexGroup>
480521
</EuiPanel>
@@ -491,6 +532,7 @@ class Alerts extends Component<AlertsProps, AlertsState> {
491532
search={search}
492533
sorting={sorting}
493534
selection={selection}
535+
loading={loading}
494536
/>
495537
</ContentPanel>
496538
</EuiFlexItem>

‎public/pages/Findings/containers/Findings/Findings.tsx

Lines changed: 52 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,12 @@ import {
2828
DEFAULT_DATE_RANGE,
2929
MAX_RECENTLY_USED_TIME_RANGES,
3030
OS_NOTIFICATION_PLUGIN,
31-
ROUTES,
3231
} from '../../../../utils/constants';
3332
import {
3433
getChartTimeUnit,
35-
getDateFormatByTimeUnit,
34+
getDomainRange,
3635
getFindingsVisualizationSpec,
36+
TimeUnit,
3737
} from '../../../Overview/utils/helpers';
3838
import { CoreServicesContext } from '../../../../components/core_services';
3939
import { Finding } from '../../models/interfaces';
@@ -51,7 +51,8 @@ import {
5151
} from '../../../../utils/helpers';
5252
import { DetectorHit, RuleSource } from '../../../../../server/models/interfaces';
5353
import { NotificationsStart } from 'opensearch-dashboards/public';
54-
import { ruleSeverity } from '../../../Rules/utils/constants';
54+
import { DateTimeFilter } from '../../../Overview/models/interfaces';
55+
import { ChartContainer } from '../../../../components/Charts/ChartContainer';
5556

5657
interface FindingsProps extends RouteComponentProps {
5758
detectorService: DetectorsService;
@@ -61,6 +62,8 @@ interface FindingsProps extends RouteComponentProps {
6162
ruleService: RuleService;
6263
notifications: NotificationsStart;
6364
match: match;
65+
dateTimeFilter?: DateTimeFilter;
66+
setDateTimeFilter?: Function;
6467
}
6568

6669
interface FindingsState {
@@ -69,13 +72,12 @@ interface FindingsState {
6972
findings: FindingItemType[];
7073
notificationChannels: FeatureChannelList[];
7174
rules: { [id: string]: RuleSource };
72-
startTime: string;
73-
endTime: string;
7475
recentlyUsedRanges: DurationRange[];
7576
groupBy: FindingsGroupByType;
7677
filteredFindings: FindingItemType[];
7778
plugins: string[];
78-
timeUnit: string;
79+
timeUnit: TimeUnit;
80+
dateFormat: string;
7981
}
8082

8183
interface FindingVisualizationData {
@@ -99,19 +101,26 @@ class Findings extends Component<FindingsProps, FindingsState> {
99101

100102
constructor(props: FindingsProps) {
101103
super(props);
104+
105+
const {
106+
dateTimeFilter = {
107+
startTime: DEFAULT_DATE_RANGE.start,
108+
endTime: DEFAULT_DATE_RANGE.end,
109+
},
110+
} = props;
111+
const timeUnits = getChartTimeUnit(dateTimeFilter.startTime, dateTimeFilter.endTime);
102112
this.state = {
103-
loading: false,
113+
loading: true,
104114
detectors: [],
105115
findings: [],
106116
notificationChannels: [],
107117
rules: {},
108-
startTime: DEFAULT_DATE_RANGE.start,
109-
endTime: DEFAULT_DATE_RANGE.end,
110118
recentlyUsedRanges: [DEFAULT_DATE_RANGE],
111119
groupBy: 'logType',
112120
filteredFindings: [],
113121
plugins: [],
114-
timeUnit: 'yearmonthdatehoursminutes',
122+
timeUnit: timeUnits.timeUnit,
123+
dateFormat: timeUnits.dateFormat,
115124
};
116125
}
117126

@@ -246,13 +255,17 @@ class Findings extends Component<FindingsProps, FindingsState> {
246255
if (recentlyUsedRanges.length > MAX_RECENTLY_USED_TIME_RANGES)
247256
recentlyUsedRanges = recentlyUsedRanges.slice(0, MAX_RECENTLY_USED_TIME_RANGES);
248257
const endTime = start === end ? DEFAULT_DATE_RANGE.end : end;
249-
const timeUnit = getChartTimeUnit(start, endTime);
258+
const timeUnits = getChartTimeUnit(start, endTime);
250259
this.setState({
251-
startTime: start,
252-
endTime: endTime,
253260
recentlyUsedRanges: recentlyUsedRanges,
254-
timeUnit,
261+
...timeUnits,
255262
});
263+
264+
this.props.setDateTimeFilter &&
265+
this.props.setDateTimeFilter({
266+
startTime: start,
267+
endTime: endTime,
268+
});
256269
};
257270

258271
generateVisualizationSpec() {
@@ -269,10 +282,20 @@ class Findings extends Component<FindingsProps, FindingsState> {
269282
ruleSeverity: this.state.rules[finding.queries[0].id].level,
270283
});
271284
});
272-
285+
const {
286+
dateTimeFilter = {
287+
startTime: DEFAULT_DATE_RANGE.start,
288+
endTime: DEFAULT_DATE_RANGE.end,
289+
},
290+
} = this.props;
291+
const chartTimeUnits = getChartTimeUnit(dateTimeFilter.startTime, dateTimeFilter.endTime);
273292
return getFindingsVisualizationSpec(visData, this.state.groupBy, {
274-
timeUnit: this.state.timeUnit,
275-
dateFormat: getDateFormatByTimeUnit(this.state.startTime, this.state.endTime),
293+
timeUnit: chartTimeUnits.timeUnit,
294+
dateFormat: chartTimeUnits.dateFormat,
295+
domain: getDomainRange(
296+
[dateTimeFilter.startTime, dateTimeFilter.endTime],
297+
chartTimeUnits.timeUnit.unit
298+
),
276299
});
277300
}
278301

@@ -293,16 +316,15 @@ class Findings extends Component<FindingsProps, FindingsState> {
293316
};
294317

295318
render() {
296-
const {
297-
loading,
298-
notificationChannels,
299-
rules,
300-
startTime,
301-
endTime,
302-
recentlyUsedRanges,
303-
} = this.state;
319+
const { loading, notificationChannels, rules, recentlyUsedRanges } = this.state;
304320
let { findings } = this.state;
305321

322+
const {
323+
dateTimeFilter = {
324+
startTime: DEFAULT_DATE_RANGE.start,
325+
endTime: DEFAULT_DATE_RANGE.end,
326+
},
327+
} = this.props;
306328
if (Object.keys(rules).length > 0) {
307329
findings = findings.map((finding) => {
308330
const rule = rules[finding.queries[0].id];
@@ -325,8 +347,8 @@ class Findings extends Component<FindingsProps, FindingsState> {
325347
</EuiFlexItem>
326348
<EuiFlexItem grow={false}>
327349
<EuiSuperDatePicker
328-
start={startTime}
329-
end={endTime}
350+
start={dateTimeFilter.startTime}
351+
end={dateTimeFilter.endTime}
330352
recentlyUsedRanges={recentlyUsedRanges}
331353
isLoading={loading}
332354
onTimeChange={this.onTimeChange}
@@ -344,7 +366,7 @@ class Findings extends Component<FindingsProps, FindingsState> {
344366
{this.createGroupByControl()}
345367
</EuiFlexItem>
346368
<EuiFlexItem>
347-
<div id="findings-view" style={{ width: '100%' }}></div>
369+
<ChartContainer chartViewId={'findings-view'} loading={loading} />
348370
</EuiFlexItem>
349371
</EuiFlexGroup>
350372
</EuiPanel>
@@ -359,8 +381,8 @@ class Findings extends Component<FindingsProps, FindingsState> {
359381
findings={findings}
360382
loading={loading}
361383
rules={rules}
362-
startTime={startTime}
363-
endTime={endTime}
384+
startTime={dateTimeFilter.startTime}
385+
endTime={dateTimeFilter.endTime}
364386
onRefresh={this.onRefresh}
365387
notificationChannels={parseNotificationChannelsToOptions(notificationChannels)}
366388
refreshNotificationChannels={this.getNotificationChannels}

0 commit comments

Comments
 (0)