Skip to content

Commit 67f0a08

Browse files
jackiehanyangjackiehanyang
committed
addressing comments and run prettier
Signed-off-by: Jackie Han <jkhanjob@gmail.com>
1 parent f166bd2 commit 67f0a08

File tree

34 files changed

+742
-498
lines changed

34 files changed

+742
-498
lines changed

‎public/anomaly_detection_app.tsx

+1-4
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,7 @@ import { Provider } from 'react-redux';
1818
import configureStore from './redux/configureStore';
1919
import { CoreServicesContext } from './components/CoreServices/CoreServices';
2020

21-
export function renderApp(
22-
coreStart: CoreStart,
23-
params: AppMountParameters,
24-
) {
21+
export function renderApp(coreStart: CoreStart, params: AppMountParameters) {
2522
const http = coreStart.http;
2623
const store = configureStore(http);
2724

‎public/pages/AnomalyCharts/containers/AnomalyDetailsChart.tsx

+15-5
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,10 @@ import {
8181
} from '../utils/constants';
8282
import { HeatmapCell } from './AnomalyHeatmapChart';
8383
import { ANOMALY_AGG, MIN_END_TIME, MAX_END_TIME } from '../../utils/constants';
84-
import { DATA_SOURCE_ID, MAX_HISTORICAL_AGG_RESULTS } from '../../../utils/constants';
84+
import {
85+
DATA_SOURCE_ID,
86+
MAX_HISTORICAL_AGG_RESULTS,
87+
} from '../../../utils/constants';
8588
import { searchResults } from '../../../redux/reducers/anomalyResults';
8689
import {
8790
DAY_IN_MILLI_SECS,
@@ -120,7 +123,8 @@ export const AnomalyDetailsChart = React.memo(
120123
(props: AnomalyDetailsChartProps) => {
121124
const dispatch = useDispatch();
122125
const location = useLocation();
123-
const dataSourceId = new URLSearchParams(location.search).get(DATA_SOURCE_ID) || '';
126+
const dataSourceId =
127+
new URLSearchParams(location.search).get(DATA_SOURCE_ID) || '';
124128
const [showAlertsFlyout, setShowAlertsFlyout] = useState<boolean>(false);
125129
const [alertAnnotations, setAlertAnnotations] = useState<any[]>([]);
126130
const [isLoadingAlerts, setIsLoadingAlerts] = useState<boolean>(false);
@@ -177,7 +181,9 @@ export const AnomalyDetailsChart = React.memo(
177181
zoomRange.endDate,
178182
taskId
179183
);
180-
dispatch(searchResults(anomalyDataRangeQuery, resultIndex, dataSourceId, true))
184+
dispatch(
185+
searchResults(anomalyDataRangeQuery, resultIndex, dataSourceId, true)
186+
)
181187
.then((response: any) => {
182188
// Only retrieve buckets that are in the anomaly results range. This is so
183189
// we don't show aggregate results for where there is no data at all
@@ -196,7 +202,9 @@ export const AnomalyDetailsChart = React.memo(
196202
taskId,
197203
selectedAggId
198204
);
199-
dispatch(searchResults(historicalAggQuery, resultIndex, dataSourceId, true))
205+
dispatch(
206+
searchResults(historicalAggQuery, resultIndex, dataSourceId, true)
207+
)
200208
.then((response: any) => {
201209
const aggregatedAnomalies = parseHistoricalAggregatedAnomalies(
202210
response,
@@ -232,7 +240,9 @@ export const AnomalyDetailsChart = React.memo(
232240
zoomRange.endDate,
233241
taskId
234242
);
235-
dispatch(searchResults(anomalyDataRangeQuery, resultIndex, dataSourceId, true))
243+
dispatch(
244+
searchResults(anomalyDataRangeQuery, resultIndex, dataSourceId, true)
245+
)
236246
.then((response: any) => {
237247
const dataStartDate = get(
238248
response,

‎public/pages/Dashboard/Components/AnomaliesDistribution.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,8 @@ export const AnomaliesDistributionChart = (
4444
) => {
4545
const dispatch = useDispatch();
4646
const location = useLocation();
47-
const dataSourceId = new URLSearchParams(location.search).get(DATA_SOURCE_ID) || '';
47+
const dataSourceId =
48+
new URLSearchParams(location.search).get(DATA_SOURCE_ID) || '';
4849

4950
const [anomalyDistribution, setAnomalyDistribution] = useState(
5051
[] as object[]

‎public/pages/Dashboard/Components/AnomaliesLiveChart.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,11 @@ import {
5151
getLatestAnomalyResultsForDetectorsByTimeRange,
5252
getLatestAnomalyResultsByTimeRange,
5353
} from '../utils/utils';
54-
import { DATA_SOURCE_ID, MAX_ANOMALIES, SPACE_STR } from '../../../utils/constants';
54+
import {
55+
DATA_SOURCE_ID,
56+
MAX_ANOMALIES,
57+
SPACE_STR,
58+
} from '../../../utils/constants';
5559
import { ALL_CUSTOM_AD_RESULT_INDICES } from '../../utils/constants';
5660
import { searchResults } from '../../../redux/reducers/anomalyResults';
5761
import { useLocation } from 'react-router-dom';
@@ -70,7 +74,8 @@ const MAX_LIVE_DETECTORS = 10;
7074
export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
7175
const dispatch = useDispatch();
7276
const location = useLocation();
73-
const dataSourceId = new URLSearchParams(location.search).get(DATA_SOURCE_ID) || '';
77+
const dataSourceId =
78+
new URLSearchParams(location.search).get(DATA_SOURCE_ID) || '';
7479

7580
const [liveTimeRange, setLiveTimeRange] = useState<LiveTimeRangeState>({
7681
startDateTime: moment().subtract(31, 'minutes'),

‎public/pages/Dashboard/Container/DashboardOverview.tsx

+56-33
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,21 @@ import {
3535
ALL_INDICES_MESSAGE,
3636
} from '../utils/constants';
3737
import { AppState } from '../../../redux/reducers';
38-
import { CatIndex, IndexAlias, MDSQueryParams } from '../../../../server/models/types';
39-
import { getAllDetectorsQueryParamsWithDataSourceId, getVisibleOptions } from '../../utils/helpers';
38+
import {
39+
CatIndex,
40+
IndexAlias,
41+
MDSQueryParams,
42+
} from '../../../../server/models/types';
43+
import {
44+
getAllDetectorsQueryParamsWithDataSourceId,
45+
getVisibleOptions,
46+
} from '../../utils/helpers';
4047
import { BREADCRUMBS } from '../../../utils/constants';
4148
import { DETECTOR_STATE } from '../../../../server/utils/constants';
42-
import { getDetectorStateOptions, getURLQueryParams } from '../../DetectorsList/utils/helpers';
49+
import {
50+
getDetectorStateOptions,
51+
getURLQueryParams,
52+
} from '../../DetectorsList/utils/helpers';
4353
import { DashboardHeader } from '../Components/utils/DashboardHeader';
4454
import { EmptyDashboard } from '../Components/EmptyDashboard/EmptyDashboard';
4555
import {
@@ -49,7 +59,12 @@ import {
4959
import { CoreServicesContext } from '../../../components/CoreServices/CoreServices';
5060
import { CoreStart, MountPoint } from '../../../../../../src/core/public';
5161
import { DataSourceSelectableConfig } from '../../../../../../src/plugins/data_source_management/public';
52-
import { getDataSourceManagementPlugin, getDataSourcePlugin, getNotifications, getSavedObjectsClient } from '../../../services';
62+
import {
63+
getDataSourceManagementPlugin,
64+
getDataSourcePlugin,
65+
getNotifications,
66+
getSavedObjectsClient,
67+
} from '../../../services';
5368
import { RouteComponentProps } from 'react-router-dom';
5469

5570
interface OverviewProps extends RouteComponentProps {
@@ -70,7 +85,7 @@ export function DashboardOverview(props: OverviewProps) {
7085
const errorGettingDetectors = adState.errorMessage;
7186
const isLoadingDetectors = adState.requesting;
7287

73-
const dataSourceEnabled = getDataSourcePlugin().dataSourceEnabled;
88+
const dataSourceEnabled = getDataSourcePlugin()?.dataSourceEnabled || false;
7489

7590
const [currentDetectors, setCurrentDetectors] = useState(
7691
Object.values(allDetectorList)
@@ -82,7 +97,9 @@ export function DashboardOverview(props: OverviewProps) {
8297
const queryParams = getURLQueryParams(props.location);
8398
const [MDSOverviewState, setMDSOverviewState] = useState<MDSOverviewState>({
8499
queryParams,
85-
selectedDataSourceId: queryParams.dataSourceId ? queryParams.dataSourceId : '',
100+
selectedDataSourceId: queryParams.dataSourceId
101+
? queryParams.dataSourceId
102+
: '',
86103
});
87104

88105
const getDetectorOptions = (detectorsIdMap: {
@@ -140,7 +157,7 @@ export function DashboardOverview(props: OverviewProps) {
140157
selectedDataSourceId: dataSourceId,
141158
});
142159
}
143-
}
160+
};
144161

145162
const opensearchState = useSelector((state: AppState) => state.opensearch);
146163

@@ -191,7 +208,13 @@ export function DashboardOverview(props: OverviewProps) {
191208
};
192209

193210
const intializeDetectors = async () => {
194-
dispatch(getDetectorList(getAllDetectorsQueryParamsWithDataSourceId(MDSOverviewState.selectedDataSourceId)));
211+
dispatch(
212+
getDetectorList(
213+
getAllDetectorsQueryParamsWithDataSourceId(
214+
MDSOverviewState.selectedDataSourceId
215+
)
216+
)
217+
);
195218
dispatch(getIndices('', MDSOverviewState.selectedDataSourceId));
196219
dispatch(getAliases('', MDSOverviewState.selectedDataSourceId));
197220
};
@@ -204,10 +227,8 @@ export function DashboardOverview(props: OverviewProps) {
204227
history.replace({
205228
...location,
206229
search: queryString.stringify(updatedParams),
207-
})
208-
if (dataSourceEnabled ? MDSOverviewState.selectedDataSourceId : true) {
209-
intializeDetectors();
210-
}
230+
});
231+
intializeDetectors();
211232
}, [MDSOverviewState]);
212233

213234
useEffect(() => {
@@ -237,28 +258,31 @@ export function DashboardOverview(props: OverviewProps) {
237258
filterSelectedDetectors(
238259
selectedDetectorsName,
239260
selectedDetectorStates,
240-
selectedIndices,
261+
selectedIndices
241262
);
242263
}, [selectedDetectorsName, selectedIndices, selectedDetectorStates]);
243264

244-
const DataSourceMenu =
245-
getDataSourceManagementPlugin().ui.getDataSourceMenu<DataSourceSelectableConfig>();
246-
const renderDataSourceComponent = useMemo(() => {
247-
return (
248-
<DataSourceMenu
249-
setMenuMountPoint={props.setActionMenu}
250-
componentType={'DataSourceSelectable'}
251-
componentConfig={{
252-
fullWidth: false,
253-
activeOption:[{ id: MDSOverviewState.selectedDataSourceId }],
254-
savedObjects: getSavedObjectsClient(),
255-
notifications: getNotifications(),
256-
onSelectedDataSources: (dataSources) =>
257-
handleDataSourceChange(dataSources),
258-
}}
259-
/>
260-
);
261-
}, [getSavedObjectsClient(), getNotifications(), props.setActionMenu]);
265+
let renderDataSourceComponent = null;
266+
if (dataSourceEnabled) {
267+
const DataSourceMenu =
268+
getDataSourceManagementPlugin().ui.getDataSourceMenu<DataSourceSelectableConfig>();
269+
renderDataSourceComponent = useMemo(() => {
270+
return (
271+
<DataSourceMenu
272+
setMenuMountPoint={props.setActionMenu}
273+
componentType={'DataSourceSelectable'}
274+
componentConfig={{
275+
fullWidth: false,
276+
activeOption: [{ id: MDSOverviewState.selectedDataSourceId }],
277+
savedObjects: getSavedObjectsClient(),
278+
notifications: getNotifications(),
279+
onSelectedDataSources: (dataSources) =>
280+
handleDataSourceChange(dataSources),
281+
}}
282+
/>
283+
);
284+
}, [getSavedObjectsClient(), getNotifications(), props.setActionMenu]);
285+
}
262286

263287
return (
264288
<div style={{ height: '1200px' }}>
@@ -312,8 +336,7 @@ export function DashboardOverview(props: OverviewProps) {
312336
</EuiFlexItem>
313337
</EuiFlexGroup>
314338
<EuiSpacer />
315-
<AnomaliesLiveChart
316-
selectedDetectors={currentDetectors} />
339+
<AnomaliesLiveChart selectedDetectors={currentDetectors} />
317340
<EuiSpacer />
318341
<EuiFlexGroup justifyContent="spaceBetween">
319342
<EuiFlexItem grow={6}>

‎public/pages/DetectorConfig/containers/DetectorConfig.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ interface DetectorConfigProps extends RouteComponentProps {
2929
export function DetectorConfig(props: DetectorConfigProps) {
3030
const dispatch = useDispatch();
3131
const location = useLocation();
32-
const dataSourceId = new URLSearchParams(location.search).get(DATA_SOURCE_ID) || '';
32+
const dataSourceId =
33+
new URLSearchParams(location.search).get(DATA_SOURCE_ID) || '';
3334
const detector = useSelector(
3435
(state: AppState) => state.ad.detectors[props.detectorId]
3536
);

0 commit comments

Comments
 (0)