* [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:
parent
f7dad8961d
commit
c40f08ea4b
|
@ -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%);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
))}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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',
|
||||
});
|
||||
});
|
||||
});
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue