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

[ML] Fix "Show charts" control state (#110602)

Browse source 
* [ML] fix show charts state

* [ML] fix export
This commit is contained in:
Dima Arnautov 2021-08-31 19:54:13 +02:00 committed by GitHub
parent 3f7c461cd5
commit 95eab7ccca
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 43 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
x-pack/plugins/ml/public/application/components/controls/checkbox_showcharts/checkbox_showcharts.tsx
View file

@ -8,34 +8,22 @@
import React, { FC, useCallback, useMemo } from 'react';
import { EuiCheckbox, htmlIdGenerator } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { useExplorerUrlState } from '../../../explorer/hooks/use_explorer_url_state';
const SHOW_CHARTS_DEFAULT = true;
export const useShowCharts = (): [boolean, (v: boolean) => void] => {
const [explorerUrlState, setExplorerUrlState] = useExplorerUrlState();
const showCharts = explorerUrlState?.mlShowCharts ?? SHOW_CHARTS_DEFAULT;
const setShowCharts = useCallback(
(v: boolean) => {
setExplorerUrlState({ mlShowCharts: v });
},
[setExplorerUrlState]
);
return [showCharts, setShowCharts];
};
export interface CheckboxShowChartsProps {
showCharts: boolean;
setShowCharts: (update: boolean) => void;
}
/*
* React component for a checkbox element to toggle charts display.
*/
export const CheckboxShowCharts: FC = () => {
const [showCharts, setShowCharts] = useShowCharts();
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setShowCharts(e.target.checked);
};
export const CheckboxShowCharts: FC<CheckboxShowChartsProps> = ({ showCharts, setShowCharts }) => {
const onChange = useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => {
setShowCharts(e.target.checked);
},
[setShowCharts]
);
const id = useMemo(() => htmlIdGenerator()(), []);

2
x-pack/plugins/ml/public/application/components/controls/checkbox_showcharts/index.ts
View file

@ -5,4 +5,4 @@
* 2.0.
*/
export { useShowCharts, CheckboxShowCharts } from './checkbox_showcharts';
export { CheckboxShowCharts } from './checkbox_showcharts';

5
x-pack/plugins/ml/public/application/explorer/explorer.js
View file

@ -498,7 +498,10 @@ export class ExplorerUI extends React.Component {
</EuiFlexItem>
{chartsData.seriesToPlot.length > 0 && selectedCells !== undefined && (
<EuiFlexItem grow={false}>
<CheckboxShowCharts />
<CheckboxShowCharts
showCharts={showCharts}
setShowCharts={explorerService.setShowCharts}
/>
</EuiFlexItem>
)}
</EuiFlexGroup>

1
x-pack/plugins/ml/public/application/explorer/explorer_constants.ts
View file

@ -34,6 +34,7 @@ export const EXPLORER_ACTION = {
SET_VIEW_BY_PER_PAGE: 'setViewByPerPage',
SET_VIEW_BY_FROM_PAGE: 'setViewByFromPage',
SET_SWIM_LANE_SEVERITY: 'setSwimLaneSeverity',
SET_SHOW_CHARTS: 'setShowCharts',
};
export const FILTER_ACTION = {

7
x-pack/plugins/ml/public/application/explorer/explorer_dashboard_service.ts
View file

@ -83,6 +83,10 @@ const explorerAppState$: Observable<ExplorerAppState> = explorerState$.pipe(
appState.mlExplorerSwimlane.severity = state.swimLaneSeverity;
}
if (state.showCharts !== undefined) {
appState.mlShowCharts = state.showCharts;
}
if (state.filterActive) {
appState.mlExplorerFilter.influencersFilterQuery = state.influencersFilterQuery;
appState.mlExplorerFilter.filterActive = state.filterActive;
@ -168,6 +172,9 @@ export const explorerService = {
setSwimLaneSeverity: (payload: number) => {
explorerAction$.next({ type: EXPLORER_ACTION.SET_SWIM_LANE_SEVERITY, payload });
},
setShowCharts: (payload: boolean) => {
explorerAction$.next({ type: EXPLORER_ACTION.SET_SHOW_CHARTS, payload });
},
};
export type ExplorerService = typeof explorerService;

7
x-pack/plugins/ml/public/application/explorer/reducers/explorer_reducer/reducer.ts
View file

@ -158,6 +158,13 @@ export const explorerReducer = (state: ExplorerState, nextAction: Action): Explo
};
break;
case EXPLORER_ACTION.SET_SHOW_CHARTS:
nextState = {
...state,
showCharts: payload,
};
break;
default:
nextState = state;
}

2
x-pack/plugins/ml/public/application/explorer/reducers/explorer_reducer/state.ts
View file

@ -59,6 +59,7 @@ export interface ExplorerState {
viewBySwimlaneOptions: string[];
swimlaneLimit?: number;
swimLaneSeverity?: number;
showCharts: boolean;
}
function getDefaultIndexPattern() {
@ -112,5 +113,6 @@ export function getExplorerDefaultState(): ExplorerState {
viewByPerPage: SWIM_LANE_DEFAULT_PAGE_SIZE,
viewByFromPage: 1,
swimlaneLimit: undefined,
showCharts: true,
};
}

14
x-pack/plugins/ml/public/application/routing/routes/explorer.tsx
View file

@ -26,7 +26,6 @@ import { useExplorerData } from '../../explorer/actions';
import { explorerService } from '../../explorer/explorer_dashboard_service';
import { getDateFormatTz } from '../../explorer/explorer_utils';
import { useJobSelection } from '../../components/job_selector/use_job_selection';
import { useShowCharts } from '../../components/controls/checkbox_showcharts';
import { useTableInterval } from '../../components/controls/select_interval';
import { useTableSeverity } from '../../components/controls/select_severity';
import { useUrlState } from '../../util/url_state';
@ -196,6 +195,10 @@ const ExplorerUrlStateManager: FC<ExplorerUrlStateManagerProps> = ({ jobsWithTim
if (severity !== undefined) {
explorerService.setSwimLaneSeverity(severity);
}
if (explorerUrlState.mlShowCharts !== undefined) {
explorerService.setShowCharts(explorerUrlState.mlShowCharts);
}
}, []);
/** Sync URL state with {@link explorerService} state */
@ -214,7 +217,6 @@ const ExplorerUrlStateManager: FC<ExplorerUrlStateManagerProps> = ({ jobsWithTim
}
}, [explorerData]);
const [showCharts] = useShowCharts();
const [tableInterval] = useTableInterval();
const [tableSeverity] = useTableSeverity();
@ -267,7 +269,11 @@ const ExplorerUrlStateManager: FC<ExplorerUrlStateManagerProps> = ({ jobsWithTim
}
}, [JSON.stringify(loadExplorerDataConfig), selectedCells?.showTopFieldValues]);
if (explorerState === undefined || refresh === undefined || showCharts === undefined) {
if (
explorerState === undefined ||
refresh === undefined ||
explorerAppState?.mlShowCharts === undefined
) {
return null;
}
@ -277,7 +283,7 @@ const ExplorerUrlStateManager: FC<ExplorerUrlStateManagerProps> = ({ jobsWithTim
{...{
explorerState,
setSelectedCells,
showCharts,
showCharts: explorerState.showCharts,
severity: tableSeverity.val,
stoppedPartitions,
invalidTimeRangeError,