maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[ML] Fix decoding in the URL state (#54915) (#55120)

Browse source 
* [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
This commit is contained in:
Dima Arnautov 2020-01-17 11:52:25 +01:00 committed by GitHub
parent f7dad8961d
commit c40f08ea4b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 114 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
x-pack/legacy/plugins/ml/public/application/components/field_type_icon/_field_type_icon.scss
View file

@ -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%);
}
}

18
x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/fields_stats/_field_stats_card.scss
View file

@ -17,7 +17,7 @@
border-color: $euiColorVis5;
.field-type-icon-container {
background-color: rgba($euiColorVis5, 0.5);
background-color: rgba($euiColorVis5, 0.2);
}
}
@ -26,7 +26,7 @@
border-color: $euiColorVis7;
.field-type-icon-container {
background-color: rgba($euiColorVis7, 0.5);
background-color: rgba($euiColorVis7, 0.2);
}
}
@ -35,7 +35,7 @@
border-color: $euiColorVis2;
.field-type-icon-container {
background-color: rgba($euiColorVis2, 0.5);
background-color: rgba($euiColorVis2, 0.2);
}
}
@ -44,7 +44,7 @@
border-color: $euiColorVis8;
.field-type-icon-container {
background-color: rgba($euiColorVis8, 0.5);
background-color: rgba($euiColorVis8, 0.2);
}
}
@ -53,7 +53,7 @@
border-color: $euiColorVis3;
.field-type-icon-container {
background-color: rgba($euiColorVis3, 0.5);
background-color: rgba($euiColorVis3, 0.2);
}
}
@ -62,7 +62,7 @@
border-color: $euiColorVis0;
.field-type-icon-container {
background-color: rgba($euiColorVis0, 0.5);
background-color: rgba($euiColorVis0, 0.2);
}
}
@ -71,7 +71,7 @@
border-color: $euiColorVis1;
.field-type-icon-container {
background-color: rgba($euiColorVis1, 0.5);
background-color: rgba($euiColorVis1, 0.2);
}
}
@ -80,7 +80,7 @@
border-color: $euiColorVis9;
.field-type-icon-container {
background-color: rgba($euiColorVis9, 0.5);
background-color: rgba($euiColorVis9, 0.2);
}
}
@ -90,7 +90,7 @@
border-color: $euiColorVis6;
.field-type-icon-container {
background-color: rgba($euiColorVis6, 0.5);
background-color: rgba($euiColorVis6, 0.2);
}
}

2
x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/fields_stats/fields_stats.js
View file

@ -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>
))}

18
x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/_field_data_card.scss
View file

@ -9,7 +9,7 @@
border-color: $euiColorVis5;
.field-type-icon-container {
background-color: rgba($euiColorVis5, 0.5);
background-color: rgba($euiColorVis5, 0.2);
}
}
@ -18,7 +18,7 @@
border-color: $euiColorVis7;
.field-type-icon-container {
background-color: rgba($euiColorVis7, 0.5);
background-color: rgba($euiColorVis7, 0.2);
}
}
@ -27,7 +27,7 @@
border-color: $euiColorVis2;
.field-type-icon-container {
background-color: rgba($euiColorVis2, 0.5);
background-color: rgba($euiColorVis2, 0.2);
}
}
@ -36,7 +36,7 @@
border-color: $euiColorVis8;
.field-type-icon-container {
background-color: rgba($euiColorVis8, 0.5);
background-color: rgba($euiColorVis8, 0.2);
}
}
@ -45,7 +45,7 @@
border-color: $euiColorVis3;
.field-type-icon-container {
background-color: rgba($euiColorVis3, 0.5);
background-color: rgba($euiColorVis3, 0.2);
}
}
@ -54,7 +54,7 @@
border-color: $euiColorVis0;
.field-type-icon-container {
background-color: rgba($euiColorVis0, 0.5);
background-color: rgba($euiColorVis0, 0.2);
}
}
@ -63,7 +63,7 @@
border-color: $euiColorVis1;
.field-type-icon-container {
background-color: rgba($euiColorVis1, 0.5);
background-color: rgba($euiColorVis1, 0.2);
}
}
@ -72,7 +72,7 @@
border-color: $euiColorVis9;
.field-type-icon-container {
background-color: rgba($euiColorVis9, 0.5);
background-color: rgba($euiColorVis9, 0.2);
}
}
@ -82,7 +82,7 @@
border-color: $euiColorVis6;
.field-type-icon-container {
background-color: rgba($euiColorVis6, 0.5);
background-color: rgba($euiColorVis6, 0.2);
}
}

81
x-pack/legacy/plugins/ml/public/application/util/url_state.test.ts Normal file
View file

@ -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
x-pack/legacy/plugins/ml/public/application/util/url_state.ts
View file

@ -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