Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Index Management] Add data streams functionality to indices tab #67940

Merged
merged 11 commits into from
Jun 4, 2020
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
* you may not use this file except in compliance with the Elastic License.
*/

import './mocks';

export { nextTick, getRandomString, findTestSubject, TestBed } from '../../../../../test_utils';

export { setupEnvironment, WithAppDependencies, services } from './setup_environment';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/

export { syncUrlHashQueryParam } from './sync_url_hash_query_param.js';
(window as any).Worker = class Worker {
onmessage() {}
postMessage() {}
};
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import { WithAppDependencies, services, TestSubjects } from '../helpers';
const testBedConfig: TestBedConfig = {
store: () => indexManagementStore(services as any),
memoryRouter: {
initialEntries: [`/indices?includeHidden=true`],
initialEntries: [`/indices`],
componentRoutePath: `/:section(indices|templates)`,
},
doMountAsync: true,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { WithAppDependencies, services, TestSubjects } from '../helpers';
const testBedConfig: TestBedConfig = {
store: () => indexManagementStore(services as any),
memoryRouter: {
initialEntries: [`/indices?includeHidden=true`],
initialEntries: [`/indices?includeHiddenIndices=true`],
componentRoutePath: `/:section(indices|templates)`,
},
doMountAsync: true,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,16 +33,14 @@ describe('<IndexManagementHome />', () => {
});
});

test('sets the hash query param base on include hidden indices toggle', () => {
test('toggles the include hidden button through URL hash correctly', () => {
const { actions } = testBed;
expect(actions.getIncludeHiddenIndicesToggleStatus()).toBe(true);
expect(window.location.hash.includes('includeHidden=true')).toBe(true);
actions.clickIncludeHiddenIndicesToggle();
expect(window.location.hash.includes('includeHidden=true')).toBe(false);
expect(actions.getIncludeHiddenIndicesToggleStatus()).toBe(false);
// Note: this test modifies the shared location.hash state, we put it back the way it was
actions.clickIncludeHiddenIndicesToggle();
expect(actions.getIncludeHiddenIndicesToggleStatus()).toBe(true);
expect(window.location.hash.includes('includeHidden=true')).toBe(true);
});
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,10 @@ import React from 'react';
import { DetailPanel } from './detail_panel';
import { IndexTable } from './index_table';

export function IndexList({
match: {
params: { filter },
},
location,
}) {
export function IndexList() {
return (
<div className="im-snapshotTestSubject" data-test-subj="indicesList">
<IndexTable filterFromURI={filter} location={location} />
<IndexTable />
<DetailPanel />
</div>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@
*/

import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import {
getDetailPanelIndexName,
getPageOfIndices,
getPager,
getFilter,
isDetailPanelOpen,
showHiddenIndices,
getSortField,
isSortAscending,
getIndicesAsArray,
Expand All @@ -26,23 +26,21 @@ import {
pageChanged,
pageSizeChanged,
sortChanged,
showHiddenIndicesChanged,
loadIndices,
reloadIndices,
toggleChanged,
} from '../../../../store/actions';

import { IndexTable as PresentationComponent } from './index_table';

const mapStateToProps = (state) => {
const mapStateToProps = (state, props) => {
return {
allIndices: getIndicesAsArray(state),
isDetailPanelOpen: isDetailPanelOpen(state),
detailPanelIndexName: getDetailPanelIndexName(state),
indices: getPageOfIndices(state),
pager: getPager(state),
indices: getPageOfIndices(state, props),
pager: getPager(state, props),
filter: getFilter(state),
showHiddenIndices: showHiddenIndices(state),
sortField: getSortField(state),
isSortAscending: isSortAscending(state),
indicesLoading: indicesLoading(state),
Expand All @@ -65,9 +63,6 @@ const mapDispatchToProps = (dispatch) => {
sortChanged: (sortField, isSortAscending) => {
dispatch(sortChanged({ sortField, isSortAscending }));
},
showHiddenIndicesChanged: (showHiddenIndices) => {
dispatch(showHiddenIndicesChanged({ showHiddenIndices }));
},
toggleChanged: (toggleName, toggleValue) => {
dispatch(toggleChanged({ toggleName, toggleValue }));
},
Expand All @@ -80,10 +75,12 @@ const mapDispatchToProps = (dispatch) => {
loadIndices: () => {
dispatch(loadIndices());
},
reloadIndices: () => {
dispatch(reloadIndices());
reloadIndices: (indexNames) => {
dispatch(reloadIndices(indexNames));
},
};
};

export const IndexTable = connect(mapStateToProps, mapDispatchToProps)(PresentationComponent);
export const IndexTable = withRouter(
connect(mapStateToProps, mapDispatchToProps)(PresentationComponent)
);
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import React, { Component, Fragment } from 'react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { Route } from 'react-router-dom';
import { parse } from 'query-string';
import qs from 'query-string';

import {
EuiButton,
Expand Down Expand Up @@ -66,6 +66,9 @@ const HEADERS = {
size: i18n.translate('xpack.idxMgmt.indexTable.headers.storageSizeHeader', {
defaultMessage: 'Storage size',
}),
data_stream: i18n.translate('xpack.idxMgmt.indexTable.headers.dataStreamHeader', {
defaultMessage: 'Data stream',
}),
};

export class IndexTable extends Component {
Expand Down Expand Up @@ -97,17 +100,14 @@ export class IndexTable extends Component {

componentDidMount() {
this.props.loadIndices();
this.interval = setInterval(this.props.reloadIndices, REFRESH_RATE_INDEX_LIST);
const {
filterChanged,
filterFromURI,
showHiddenIndicesChanged,
showHiddenIndices,
location,
} = this.props;

if (filterFromURI) {
const decodedFilter = decodeURIComponent(filterFromURI);
this.interval = setInterval(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a note for our future selves: this is the code we want 4 (or more!) 👀 on when we get flakiness in our tests 😊

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi! I am the future self 😊 : don't worry, it's okay, there is jest. useFakeTimers() that gives us control over this.

() => this.props.reloadIndices(this.props.indices.map((i) => i.name)),
REFRESH_RATE_INDEX_LIST
);
const { location, filterChanged } = this.props;
const { filter } = qs.parse((location && location.search) || '');
if (filter) {
const decodedFilter = decodeURIComponent(filter);

try {
const filter = EuiSearchBar.Query.parse(decodedFilter);
Expand All @@ -116,17 +116,30 @@ export class IndexTable extends Component {
this.setState({ filterError: e });
}
}

// Check if the we have the includeHidden query param
const { includeHidden } = parse((location && location.search) || '');
const nextValue = includeHidden === 'true';
if (nextValue !== showHiddenIndices) {
showHiddenIndicesChanged(nextValue);
}
}
componentWillUnmount() {
clearInterval(this.interval);
}

readURLParams() {
const { location } = this.props;
const { includeHiddenIndices } = qs.parse((location && location.search) || '');
return {
includeHiddenIndices: includeHiddenIndices === 'true',
};
}

setIncludeHiddenParam(hidden) {
const { pathname, search } = this.props.location;
const params = qs.parse(search);
if (hidden) {
params.includeHiddenIndices = 'true';
} else {
delete params.includeHiddenIndices;
}
this.props.history.push(pathname + '?' + qs.stringify(params));
}

onSort = (column) => {
const { sortField, isSortAscending, sortChanged } = this.props;

Expand Down Expand Up @@ -416,8 +429,6 @@ export class IndexTable extends Component {
render() {
const {
filter,
showHiddenIndices,
showHiddenIndicesChanged,
indices,
loadIndices,
indicesLoading,
Expand All @@ -426,6 +437,8 @@ export class IndexTable extends Component {
pager,
} = this.props;

const { includeHiddenIndices } = this.readURLParams();

let emptyState;

if (indicesLoading) {
Expand Down Expand Up @@ -477,8 +490,8 @@ export class IndexTable extends Component {
<EuiSwitch
id="checkboxShowHiddenIndices"
data-test-subj="indexTableIncludeHiddenIndicesToggle"
checked={showHiddenIndices}
onChange={(event) => showHiddenIndicesChanged(event.target.checked)}
checked={includeHiddenIndices}
onChange={(event) => this.setIncludeHiddenParam(event.target.checked)}
label={
<FormattedMessage
id="xpack.idxMgmt.indexTable.hiddenIndicesSwitchLabel"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ type SortField =
| 'replica'
| 'documents'
| 'size'
| 'primary_size';
| 'primary_size'
| 'data_stream';

type Unit = 'kb' | 'mb' | 'gb' | 'tb' | 'pb';

Expand Down Expand Up @@ -55,6 +56,7 @@ const sorters = {
documents: numericSort('documents'),
size: byteSort('size'),
primary_size: byteSort('primary_size'),
data_stream: stringSort('data_stream'),
};

export const sortTable = (array = [], sortField: SortField, isSortAscending: boolean) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,13 @@

import { createAction } from 'redux-actions';
import { i18n } from '@kbn/i18n';
import { getIndexNamesForCurrentPage } from '../selectors';
import { reloadIndices as request } from '../../services';
import { loadIndices } from './load_indices';
import { notificationService } from '../../services/notification';

export const reloadIndicesSuccess = createAction('INDEX_MANAGEMENT_RELOAD_INDICES_SUCCESS');
export const reloadIndices = (indexNames) => async (dispatch, getState) => {
export const reloadIndices = (indexNames) => async (dispatch) => {
let indices;
indexNames = indexNames || getIndexNamesForCurrentPage(getState());
try {
indices = await request(indexNames);
} catch (error) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,4 @@ export const pageSizeChanged = createAction('INDEX_MANAGEMENT_PAGE_SIZE_CHANGED'

export const sortChanged = createAction('INDEX_MANAGEMENT_SORT_CHANGED');

export const showHiddenIndicesChanged = createAction(
'INDEX_MANAGEMENT_SHOW_HIDDEN_INDICES_CHANGED'
);

export const toggleChanged = createAction('INDEX_MANAGEMENT_TOGGLE_CHANGED');

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
pageChanged,
pageSizeChanged,
sortChanged,
showHiddenIndicesChanged,
toggleChanged,
} from '../actions';

Expand All @@ -20,7 +19,6 @@ export const defaultTableState = {
currentPage: 0,
sortField: 'index.name',
isSortAscending: true,
showHiddenIndices: false,
};

export const tableState = handleActions(
Expand All @@ -33,14 +31,6 @@ export const tableState = handleActions(
currentPage: 0,
};
},
[showHiddenIndicesChanged](state, action) {
const { showHiddenIndices } = action.payload;

return {
...state,
showHiddenIndices,
};
},
[toggleChanged](state, action) {
const { toggleName, toggleValue } = action.payload;
const toggleNameToVisibleMap = { ...state.toggleNameToVisibleMap };
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,5 @@
import { ExtensionsService } from '../../../services';

export declare function setExtensionsService(extensionsService: ExtensionsService): any;

export const getFilteredIndices: (state: any, props: any) => any;
Loading