diff --git a/x-pack/legacy/plugins/ml/public/application/components/field_type_icon/_field_type_icon.scss b/x-pack/legacy/plugins/ml/public/application/components/field_type_icon/_field_type_icon.scss index 864df28f2c0554..741974c56987e8 100644 --- a/x-pack/legacy/plugins/ml/public/application/components/field_type_icon/_field_type_icon.scss +++ b/x-pack/legacy/plugins/ml/public/application/components/field_type_icon/_field_type_icon.scss @@ -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%); } } diff --git a/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/fields_stats/_field_stats_card.scss b/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/fields_stats/_field_stats_card.scss index 2702817a557492..48aab16d85be6c 100644 --- a/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/fields_stats/_field_stats_card.scss +++ b/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/fields_stats/_field_stats_card.scss @@ -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); } } diff --git a/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/fields_stats/fields_stats.js b/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/fields_stats/fields_stats.js index 29051a45d719f8..5dfae43f223b1d 100644 --- a/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/fields_stats/fields_stats.js +++ b/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/fields_stats/fields_stats.js @@ -32,7 +32,7 @@ export class FieldsStats extends Component {
{this.state.fields.map(f => ( - + ))} diff --git a/x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/_field_data_card.scss b/x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/_field_data_card.scss index d517be0a9358d2..6790b947f6f597 100644 --- a/x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/_field_data_card.scss +++ b/x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/_field_data_card.scss @@ -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); } } diff --git a/x-pack/legacy/plugins/ml/public/application/util/url_state.test.ts b/x-pack/legacy/plugins/ml/public/application/util/url_state.test.ts new file mode 100644 index 00000000000000..91bbef2dba6c2b --- /dev/null +++ b/x-pack/legacy/plugins/ml/public/application/util/url_state.test.ts @@ -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', + }); + }); +}); diff --git a/x-pack/legacy/plugins/ml/public/application/util/url_state.ts b/x-pack/legacy/plugins/ml/public/application/util/url_state.ts index 4402155815a5b1..546944b1a33bff 100644 --- a/x-pack/legacy/plugins/ml/public/application/util/url_state.ts +++ b/x-pack/legacy/plugins/ml/public/application/util/url_state.ts @@ -18,13 +18,18 @@ import { getNestedProperty } from './object_utils'; export type SetUrlState = (attribute: string | Dictionary, value?: any) => void; export type UrlState = [Dictionary, SetUrlState]; -function getUrlState(search: string) { +const decodedParams = new Set(['_a', '_g']); +export function getUrlState(search: string): Dictionary { const urlState: Dictionary = {}; const parsedQueryString = queryString.parse(search); try { Object.keys(parsedQueryString).forEach(a => { - urlState[a] = decode(parsedQueryString[a]) as Dictionary; + if (decodedParams.has(a)) { + urlState[a] = decode(parsedQueryString[a]) as Dictionary; + } else { + urlState[a] = parsedQueryString[a]; + } }); } catch (error) { // eslint-disable-next-line no-console