Skip to content

Commit 9c2d584

Browse files
jackiehanyangjackiehanyang
committed
bug fixes (#737)
Signed-off-by: Jackie Han <jkhanjob@gmail.com>
1 parent 1bed6ab commit 9c2d584

File tree

11 files changed

+86
-59
lines changed

11 files changed

+86
-59
lines changed

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,13 @@
2525
"devDependencies": {
2626
"@testing-library/user-event": "^12.1.6",
2727
"@types/react-plotly.js": "^2.6.0",
28-
"@types/redux-mock-store": "^1.0.1",
28+
"@types/redux-mock-store": "^1.0.6",
2929
"babel-polyfill": "^6.26.0",
3030
"eslint-plugin-no-unsanitized": "^3.0.2",
3131
"eslint-plugin-prefer-object-spread": "^1.2.1",
3232
"lint-staged": "^9.2.0",
3333
"moment": "^2.24.0",
34-
"redux-mock-store": "^1.5.3",
34+
"redux-mock-store": "^1.5.4",
3535
"start-server-and-test": "^1.11.7"
3636
},
3737
"dependencies": {

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

+18-14
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ import { RouteComponentProps } from 'react-router-dom';
6868

6969
interface OverviewProps extends RouteComponentProps {
7070
setActionMenu: (menuMount: MountPoint | undefined) => void;
71+
landingDataSourceId: string | undefined;
7172
}
7273

7374
export function DashboardOverview(props: OverviewProps) {
@@ -91,11 +92,11 @@ export function DashboardOverview(props: OverviewProps) {
9192
const queryParams = getDataSourceFromURL(props.location);
9293
const [MDSOverviewState, setMDSOverviewState] = useState<MDSStates>({
9394
queryParams,
94-
selectedDataSourceId: queryParams.dataSourceId
95-
? queryParams.dataSourceId
96-
: undefined,
95+
selectedDataSourceId: queryParams.dataSourceId === undefined
96+
? undefined
97+
: queryParams.dataSourceId,
9798
});
98-
99+
99100
const getDetectorOptions = (detectorsIdMap: {
100101
[key: string]: DetectorListItem;
101102
}) => {
@@ -215,13 +216,15 @@ export function DashboardOverview(props: OverviewProps) {
215216

216217
useEffect(() => {
217218
const { history, location } = props;
218-
const updatedParams = {
219-
dataSourceId: MDSOverviewState.selectedDataSourceId,
220-
};
221-
history.replace({
222-
...location,
223-
search: queryString.stringify(updatedParams),
224-
});
219+
if (dataSourceEnabled) {
220+
const updatedParams = {
221+
dataSourceId: MDSOverviewState.selectedDataSourceId,
222+
};
223+
history.replace({
224+
...location,
225+
search: queryString.stringify(updatedParams),
226+
});
227+
}
225228
intializeDetectors();
226229
}, [MDSOverviewState]);
227230

@@ -274,9 +277,10 @@ export function DashboardOverview(props: OverviewProps) {
274277
componentType={'DataSourceSelectable'}
275278
componentConfig={{
276279
fullWidth: false,
277-
activeOption: MDSOverviewState.selectedDataSourceId !== undefined
278-
? [{ id: MDSOverviewState.selectedDataSourceId }]
279-
: undefined,
280+
activeOption: props.landingDataSourceId === undefined
281+
|| MDSOverviewState.selectedDataSourceId === undefined
282+
? undefined
283+
: [{ id: MDSOverviewState.selectedDataSourceId }],
280284
savedObjects: getSavedObjectsClient(),
281285
notifications: getNotifications(),
282286
onSelectedDataSources: (dataSources) =>

‎public/pages/DefineDetector/containers/DefineDetector.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ export const DefineDetector = (props: DefineDetectorProps) => {
9898

9999
const [MDSCreateState, setMDSCreateState] = useState<MDSStates>({
100100
queryParams: MDSQueryParams,
101-
selectedDataSourceId: dataSourceId ? dataSourceId : undefined,
101+
selectedDataSourceId: dataSourceId === undefined? undefined : dataSourceId,
102102
});
103103

104104
// To handle backward compatibility, we need to pass some fields via

‎public/pages/DetectorsList/containers/List/List.tsx

+25-16
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ import {
8484
} from '../../../../../server/utils/helpers';
8585
import { CoreStart, MountPoint } from '../../../../../../../src/core/public';
8686
import { CoreServicesContext } from '../../../../components/CoreServices/CoreServices';
87-
import { DataSourceSelectableConfig } from '../../../../../../../src/plugins/data_source_management/public';
87+
import { DataSourceOption, DataSourceSelectableConfig } from '../../../../../../../src/plugins/data_source_management/public';
8888
import {
8989
getDataSourceManagementPlugin,
9090
getDataSourceEnabled,
@@ -206,25 +206,25 @@ export const DetectorList = (props: ListProps) => {
206206
selectedIndices: queryParams.indices
207207
? queryParams.indices.split(',')
208208
: ALL_INDICES,
209-
selectedDataSourceId: queryParams.dataSourceId
210-
? queryParams.dataSourceId
211-
: undefined,
209+
selectedDataSourceId: queryParams.dataSourceId === undefined
210+
? undefined
211+
: queryParams.dataSourceId,
212212
});
213213

214214
// Set breadcrumbs on page initialization
215215
useEffect(() => {
216216
if (dataSourceEnabled) {
217217
core.chrome.setBreadcrumbs([
218-
BREADCRUMBS.ANOMALY_DETECTOR,
219-
BREADCRUMBS.DETECTORS,
218+
MDS_BREADCRUMBS.ANOMALY_DETECTOR(state.selectedDataSourceId),
219+
MDS_BREADCRUMBS.DETECTORS(state.selectedDataSourceId),
220220
]);
221221
} else {
222222
core.chrome.setBreadcrumbs([
223-
MDS_BREADCRUMBS.ANOMALY_DETECTOR(state.selectedDataSourceId),
224-
MDS_BREADCRUMBS.DETECTORS(state.selectedDataSourceId),
223+
BREADCRUMBS.ANOMALY_DETECTOR,
224+
BREADCRUMBS.DETECTORS,
225225
]);
226226
}
227-
}, []);
227+
}, [state.selectedDataSourceId]);
228228

229229
// Getting all initial indices
230230
const [indexQuery, setIndexQuery] = useState('');
@@ -238,12 +238,21 @@ export const DetectorList = (props: ListProps) => {
238238
// Refresh data if user change any parameters / filter / sort
239239
useEffect(() => {
240240
const { history, location } = props;
241-
const updatedParams = {
242-
...state.queryParams,
243-
indices: state.selectedIndices.join(','),
241+
let updatedParams = {
244242
from: state.page * state.queryParams.size,
245-
dataSourceId: state.selectedDataSourceId,
246-
};
243+
size: state.queryParams.size,
244+
search: state.queryParams.search,
245+
indices: state.selectedIndices.join(','),
246+
sortDirection: state.queryParams.sortDirection,
247+
sortField: state.queryParams.sortField,
248+
} as GetDetectorsQueryParams;
249+
250+
if (dataSourceEnabled) {
251+
updatedParams = {
252+
...updatedParams,
253+
dataSourceId: state.selectedDataSourceId,
254+
}
255+
}
247256

248257
history.replace({
249258
...location,
@@ -588,8 +597,8 @@ export const DetectorList = (props: ListProps) => {
588597
});
589598
};
590599

591-
const handleDataSourceChange = ([event]) => {
592-
const dataSourceId = event?.id;
600+
const handleDataSourceChange = (dataSources: DataSourceOption[]) => {
601+
const dataSourceId = dataSources[0].id;
593602

594603
if (dataSourceEnabled && dataSourceId === undefined) {
595604
getNotifications().toasts.addDanger(

‎public/pages/DetectorsList/utils/__tests__/helpers.test.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ describe('helpers spec', () => {
3030
indices: '',
3131
sortField: 'name',
3232
sortDirection: SORT_DIRECTION.ASC,
33-
dataSourceId: '',
33+
dataSourceId: undefined,
3434
});
3535
});
3636
test('should default values if missing from queryParams', () => {
@@ -43,7 +43,7 @@ describe('helpers spec', () => {
4343
indices: '',
4444
sortField: 'name',
4545
sortDirection: SORT_DIRECTION.ASC,
46-
dataSourceId:'',
46+
dataSourceId: undefined,
4747
});
4848
});
4949
test('should return queryParams from location', () => {
@@ -59,7 +59,7 @@ describe('helpers spec', () => {
5959
indices: 'someIndex',
6060
sortField: 'name',
6161
sortDirection: SORT_DIRECTION.DESC,
62-
dataSourceId:'',
62+
dataSourceId: undefined,
6363
});
6464
});
6565
});

‎public/pages/DetectorsList/utils/helpers.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -47,10 +47,12 @@ export const getURLQueryParams = (location: {
4747
typeof sortDirection !== 'string'
4848
? DEFAULT_QUERY_PARAMS.sortDirection
4949
: (sortDirection as SORT_DIRECTION),
50-
dataSourceId: typeof dataSourceId !== 'string' ? '' : dataSourceId,
50+
dataSourceId: dataSourceId === undefined ? undefined : dataSourceId,
5151
};
5252
};
5353

54+
55+
5456
// For realtime detectors: cannot have 'Finished' state
5557
export const getDetectorStateOptions = () => {
5658
return Object.values(DETECTOR_STATE)

‎public/pages/Overview/containers/AnomalyDetectionOverview.tsx

+17-13
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ import { MDSStates } from '../../../models/interfaces';
7070

7171
interface AnomalyDetectionOverviewProps extends RouteComponentProps {
7272
setActionMenu: (menuMount: MountPoint | undefined) => void;
73+
landingDataSourceId: string | undefined;
7374
}
7475

7576
export function AnomalyDetectionOverview(props: AnomalyDetectionOverviewProps) {
@@ -103,9 +104,9 @@ export function AnomalyDetectionOverview(props: AnomalyDetectionOverviewProps) {
103104
const queryParams = getDataSourceFromURL(props.location);
104105
const [MDSOverviewState, setMDSOverviewState] = useState<MDSStates>({
105106
queryParams,
106-
selectedDataSourceId: queryParams.dataSourceId
107-
? queryParams.dataSourceId
108-
: undefined,
107+
selectedDataSourceId: queryParams.dataSourceId === undefined
108+
? undefined
109+
: queryParams.dataSourceId,
109110
});
110111

111112
// Set breadcrumbs on page initialization
@@ -120,14 +121,16 @@ export function AnomalyDetectionOverview(props: AnomalyDetectionOverviewProps) {
120121
// Getting all initial sample detectors & indices
121122
useEffect(() => {
122123
const { history, location } = props;
123-
const updatedParams = {
124-
dataSourceId: MDSOverviewState.selectedDataSourceId,
125-
};
126-
history.replace({
127-
...location,
128-
search: queryString.stringify(updatedParams),
129-
});
124+
if (dataSourceEnabled && props.landingDataSourceId !== undefined) {
125+
const updatedParams = {
126+
dataSourceId: MDSOverviewState.selectedDataSourceId,
127+
};
130128

129+
history.replace({
130+
...location,
131+
search: queryString.stringify(updatedParams),
132+
});
133+
}
131134
fetchData();
132135
}, [MDSOverviewState]);
133136

@@ -247,9 +250,10 @@ export function AnomalyDetectionOverview(props: AnomalyDetectionOverviewProps) {
247250
componentType={'DataSourceSelectable'}
248251
componentConfig={{
249252
fullWidth: false,
250-
activeOption: MDSOverviewState.selectedDataSourceId !== undefined
251-
? [{ id: MDSOverviewState.selectedDataSourceId }]
252-
: undefined,
253+
activeOption: props.landingDataSourceId === undefined
254+
|| MDSOverviewState.selectedDataSourceId === undefined
255+
? undefined
256+
: [{ id: MDSOverviewState.selectedDataSourceId }],
253257
savedObjects: getSavedObjectsClient(),
254258
notifications: getNotifications(),
255259
onSelectedDataSources: (dataSources) =>

‎public/pages/main/Main.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@ export function Main(props: MainProps) {
4848
const adState = useSelector((state: AppState) => state.ad);
4949
const totalDetectors = adState.totalDetectors;
5050
const queryParams = getURLQueryParams(props.location);
51-
const dataSourceId = queryParams.dataSourceId ? queryParams.dataSourceId : '';
52-
51+
const dataSourceId = queryParams.dataSourceId === undefined ? undefined : queryParams.dataSourceId;
52+
5353
const sideNav = [
5454
{
5555
name: Navigation.AnomalyDetection,
@@ -99,6 +99,7 @@ export function Main(props: MainProps) {
9999
render={(props: RouteComponentProps) => (
100100
<DashboardOverview
101101
setActionMenu={setHeaderActionMenu}
102+
landingDataSourceId={dataSourceId}
102103
{...props}
103104
/>
104105
)}
@@ -155,6 +156,7 @@ export function Main(props: MainProps) {
155156
render={(props: RouteComponentProps) => (
156157
<AnomalyDetectionOverview
157158
setActionMenu={setHeaderActionMenu}
159+
landingDataSourceId={dataSourceId}
158160
{...props}
159161
/>
160162
)}
@@ -165,11 +167,13 @@ export function Main(props: MainProps) {
165167
totalDetectors > 0 ? (
166168
<DashboardOverview
167169
setActionMenu={setHeaderActionMenu}
170+
landingDataSourceId={dataSourceId}
168171
{...props}
169172
/>
170173
) : (
171174
<AnomalyDetectionOverview
172175
setActionMenu={setHeaderActionMenu}
176+
landingDataSourceId={dataSourceId}
173177
{...props}
174178
/>
175179
)

‎public/pages/utils/helpers.ts

+5-2
Original file line numberDiff line numberDiff line change
@@ -165,10 +165,13 @@ export const constructHrefWithDataSourceId = (
165165
url.set(DETECTORS_QUERY_PARAMS.SEARCH, DEFAULT_QUERY_PARAMS.search);
166166
url.set(DETECTORS_QUERY_PARAMS.INDICES, DEFAULT_QUERY_PARAMS.indices);
167167
url.set(DETECTORS_QUERY_PARAMS.SORT_FIELD, DEFAULT_QUERY_PARAMS.sortField);
168-
url.set(DETECTORS_QUERY_PARAMS.SORT_DIRECTION, SORT_DIRECTION.ASC);
168+
url.set(DETECTORS_QUERY_PARAMS.SORT_DIRECTION, SORT_DIRECTION.ASC)
169+
if (dataSourceEnabled) {
170+
url.set(DETECTORS_QUERY_PARAMS.DATASOURCEID, '');
171+
}
169172
}
170173

171-
if (dataSourceEnabled && dataSourceId) {
174+
if (dataSourceEnabled && dataSourceId !== undefined) {
172175
url.set('dataSourceId', dataSourceId);
173176
}
174177

‎server/utils/constants.ts

+1
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export enum DETECTORS_QUERY_PARAMS {
5454
SORT_FIELD = 'sortField',
5555
SORT_DIRECTION = 'sortDirection',
5656
NAME = 'name',
57+
DATASOURCEID = 'dataSourceId',
5758
}
5859

5960
export enum AD_DOC_FIELDS {

‎yarn.lock

+5-5
Original file line numberDiff line numberDiff line change
@@ -136,10 +136,10 @@
136136
"@types/scheduler" "*"
137137
csstype "^3.0.2"
138138

139-
"@types/redux-mock-store@^1.0.1":
140-
version "1.0.3"
141-
resolved "https://registry.yarnpkg.com/@types/redux-mock-store/-/redux-mock-store-1.0.3.tgz#895de4a364bc4836661570aec82f2eef5989d1fb"
142-
integrity sha512-Wqe3tJa6x9MxMN4DJnMfZoBRBRak1XTPklqj4qkVm5VBpZnC8PSADf4kLuFQ9NAdHaowfWoEeUMz7NWc2GMtnA==
139+
"@types/redux-mock-store@^1.0.6":
140+
version "1.0.6"
141+
resolved "https://registry.yarnpkg.com/@types/redux-mock-store/-/redux-mock-store-1.0.6.tgz#0a03b2655028b7cf62670d41ac1de5ca1b1f5958"
142+
integrity sha512-eg5RDfhJTXuoJjOMyXiJbaDb1B8tfTaJixscmu+jOusj6adGC0Krntz09Tf4gJgXeCqCrM5bBMd+B7ez0izcAQ==
143143
dependencies:
144144
redux "^4.0.5"
145145

@@ -1432,7 +1432,7 @@ readable-stream@^3.6.0, readable-stream@^3.6.2:
14321432
string_decoder "^1.1.1"
14331433
util-deprecate "^1.0.1"
14341434

1435-
redux-mock-store@^1.5.3:
1435+
redux-mock-store@^1.5.4:
14361436
version "1.5.4"
14371437
resolved "https://registry.yarnpkg.com/redux-mock-store/-/redux-mock-store-1.5.4.tgz#90d02495fd918ddbaa96b83aef626287c9ab5872"
14381438
integrity sha512-xmcA0O/tjCLXhh9Fuiq6pMrJCwFRaouA8436zcikdIpYWWCjU76CRk+i2bHx8EeiSiMGnB85/lZdU3wIJVXHTA==

0 commit comments

Comments
 (0)