Skip to content

Commit

Permalink
[ML] Fix decoding in the URL state (#54915) (#55120)
Browse files Browse the repository at this point in the history
* [ML] condition for rison decode in getUrlState

* [ML] fix icon alignment

* [ML] use Set

* [ML] add export, fix typo

* [ML] setUrlState test

* [ML] fields stats width
  • Loading branch information
darnautov authored Jan 17, 2020
1 parent f7dad89 commit c40f08e
Show file tree
Hide file tree
Showing 6 changed files with 114 additions and 24 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,16 @@ $icon-size: 20px;
border-radius: 4px;
width: $icon-size;
height: $icon-size;
line-height: $icon-size;;
line-height: $icon-size;
text-align: center;
position: relative;

.field-type-icon {
padding: 0;
display: inline !important;
vertical-align: initial;
display: inline-block !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
border-color: $euiColorVis5;

.field-type-icon-container {
background-color: rgba($euiColorVis5, 0.5);
background-color: rgba($euiColorVis5, 0.2);
}
}

Expand All @@ -26,7 +26,7 @@
border-color: $euiColorVis7;

.field-type-icon-container {
background-color: rgba($euiColorVis7, 0.5);
background-color: rgba($euiColorVis7, 0.2);
}
}

Expand All @@ -35,7 +35,7 @@
border-color: $euiColorVis2;

.field-type-icon-container {
background-color: rgba($euiColorVis2, 0.5);
background-color: rgba($euiColorVis2, 0.2);
}
}

Expand All @@ -44,7 +44,7 @@
border-color: $euiColorVis8;

.field-type-icon-container {
background-color: rgba($euiColorVis8, 0.5);
background-color: rgba($euiColorVis8, 0.2);
}
}

Expand All @@ -53,7 +53,7 @@
border-color: $euiColorVis3;

.field-type-icon-container {
background-color: rgba($euiColorVis3, 0.5);
background-color: rgba($euiColorVis3, 0.2);
}
}

Expand All @@ -62,7 +62,7 @@
border-color: $euiColorVis0;

.field-type-icon-container {
background-color: rgba($euiColorVis0, 0.5);
background-color: rgba($euiColorVis0, 0.2);
}
}

Expand All @@ -71,7 +71,7 @@
border-color: $euiColorVis1;

.field-type-icon-container {
background-color: rgba($euiColorVis1, 0.5);
background-color: rgba($euiColorVis1, 0.2);
}
}

Expand All @@ -80,7 +80,7 @@
border-color: $euiColorVis9;

.field-type-icon-container {
background-color: rgba($euiColorVis9, 0.5);
background-color: rgba($euiColorVis9, 0.2);
}
}

Expand All @@ -90,7 +90,7 @@
border-color: $euiColorVis6;

.field-type-icon-container {
background-color: rgba($euiColorVis6, 0.5);
background-color: rgba($euiColorVis6, 0.2);
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export class FieldsStats extends Component {
<div className="fields-stats">
<EuiFlexGrid gutterSize="m">
{this.state.fields.map(f => (
<EuiFlexItem key={f.name} style={{ minWidth: '360px' }}>
<EuiFlexItem key={f.name} style={{ width: '360px' }}>
<FieldStatsCard field={f} />
</EuiFlexItem>
))}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
border-color: $euiColorVis5;

.field-type-icon-container {
background-color: rgba($euiColorVis5, 0.5);
background-color: rgba($euiColorVis5, 0.2);
}
}

Expand All @@ -18,7 +18,7 @@
border-color: $euiColorVis7;

.field-type-icon-container {
background-color: rgba($euiColorVis7, 0.5);
background-color: rgba($euiColorVis7, 0.2);
}
}

Expand All @@ -27,7 +27,7 @@
border-color: $euiColorVis2;

.field-type-icon-container {
background-color: rgba($euiColorVis2, 0.5);
background-color: rgba($euiColorVis2, 0.2);
}
}

Expand All @@ -36,7 +36,7 @@
border-color: $euiColorVis8;

.field-type-icon-container {
background-color: rgba($euiColorVis8, 0.5);
background-color: rgba($euiColorVis8, 0.2);
}
}

Expand All @@ -45,7 +45,7 @@
border-color: $euiColorVis3;

.field-type-icon-container {
background-color: rgba($euiColorVis3, 0.5);
background-color: rgba($euiColorVis3, 0.2);
}
}

Expand All @@ -54,7 +54,7 @@
border-color: $euiColorVis0;

.field-type-icon-container {
background-color: rgba($euiColorVis0, 0.5);
background-color: rgba($euiColorVis0, 0.2);
}
}

Expand All @@ -63,7 +63,7 @@
border-color: $euiColorVis1;

.field-type-icon-container {
background-color: rgba($euiColorVis1, 0.5);
background-color: rgba($euiColorVis1, 0.2);
}
}

Expand All @@ -72,7 +72,7 @@
border-color: $euiColorVis9;

.field-type-icon-container {
background-color: rgba($euiColorVis9, 0.5);
background-color: rgba($euiColorVis9, 0.2);
}
}

Expand All @@ -82,7 +82,7 @@
border-color: $euiColorVis6;

.field-type-icon-container {
background-color: rgba($euiColorVis6, 0.5);
background-color: rgba($euiColorVis6, 0.2);
}
}

Expand Down
81 changes: 81 additions & 0 deletions x-pack/legacy/plugins/ml/public/application/util/url_state.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import { renderHook, act } from '@testing-library/react-hooks';
import { getUrlState, useUrlState } from './url_state';

const mockHistoryPush = jest.fn();

jest.mock('react-router-dom', () => ({
useHistory: () => ({
push: mockHistoryPush,
}),
useLocation: () => ({
search:
"?_a=(mlExplorerFilter:(),mlExplorerSwimlane:(viewByFieldName:action),query:(query_string:(analyze_wildcard:!t,query:'*')))&_g=(ml:(jobIds:!(dec-2)),refreshInterval:(display:Off,pause:!f,value:0),time:(from:'2019-01-01T00:03:40.000Z',mode:absolute,to:'2019-08-30T11:55:07.000Z'))&savedSearchId=571aaf70-4c88-11e8-b3d7-01146121b73d",
}),
}));

describe('getUrlState', () => {
test('properly decode url with _g and _a', () => {
expect(
getUrlState(
"?_a=(mlExplorerFilter:(),mlExplorerSwimlane:(viewByFieldName:action),query:(query_string:(analyze_wildcard:!t,query:'*')))&_g=(ml:(jobIds:!(dec-2)),refreshInterval:(display:Off,pause:!f,value:0),time:(from:'2019-01-01T00:03:40.000Z',mode:absolute,to:'2019-08-30T11:55:07.000Z'))&savedSearchId=571aaf70-4c88-11e8-b3d7-01146121b73d"
)
).toEqual({
_a: {
mlExplorerFilter: {},
mlExplorerSwimlane: {
viewByFieldName: 'action',
},
query: {
query_string: {
analyze_wildcard: true,
query: '*',
},
},
},
_g: {
ml: {
jobIds: ['dec-2'],
},
refreshInterval: {
display: 'Off',
pause: false,
value: 0,
},
time: {
from: '2019-01-01T00:03:40.000Z',
mode: 'absolute',
to: '2019-08-30T11:55:07.000Z',
},
},
savedSearchId: '571aaf70-4c88-11e8-b3d7-01146121b73d',
});
});
});

describe('useUrlState', () => {
beforeEach(() => {
mockHistoryPush.mockClear();
});

test('pushes a properly encoded search string to history', () => {
const { result } = renderHook(() => useUrlState('_a'));

act(() => {
const [, setUrlState] = result.current;
setUrlState({
query: {},
});
});

expect(mockHistoryPush).toHaveBeenCalledWith({
search:
'_a=%28mlExplorerFilter%3A%28%29%2CmlExplorerSwimlane%3A%28viewByFieldName%3Aaction%29%2Cquery%3A%28%29%29&_g=%28ml%3A%28jobIds%3A%21%28dec-2%29%29%2CrefreshInterval%3A%28display%3AOff%2Cpause%3A%21f%2Cvalue%3A0%29%2Ctime%3A%28from%3A%272019-01-01T00%3A03%3A40.000Z%27%2Cmode%3Aabsolute%2Cto%3A%272019-08-30T11%3A55%3A07.000Z%27%29%29&savedSearchId=%27571aaf70-4c88-11e8-b3d7-01146121b73d%27',
});
});
});
9 changes: 7 additions & 2 deletions x-pack/legacy/plugins/ml/public/application/util/url_state.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,18 @@ import { getNestedProperty } from './object_utils';
export type SetUrlState = (attribute: string | Dictionary<any>, value?: any) => void;
export type UrlState = [Dictionary<any>, SetUrlState];

function getUrlState(search: string) {
const decodedParams = new Set(['_a', '_g']);
export function getUrlState(search: string): Dictionary<any> {
const urlState: Dictionary<any> = {};
const parsedQueryString = queryString.parse(search);

try {
Object.keys(parsedQueryString).forEach(a => {
urlState[a] = decode(parsedQueryString[a]) as Dictionary<any>;
if (decodedParams.has(a)) {
urlState[a] = decode(parsedQueryString[a]) as Dictionary<any>;
} else {
urlState[a] = parsedQueryString[a];
}
});
} catch (error) {
// eslint-disable-next-line no-console
Expand Down

0 comments on commit c40f08e

Please sign in to comment.