github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[ML] Transforms/DFA: Render EuiDataGrad for more than 0 rows. (#156403)

Browse source 
Fixes the React dev mode warning "Warning: Can't perform a React state
update on an unmounted component." by only rendering `EuiDataGrid` if
there's more than 0 rows.
This commit is contained in:
Walter Rafelsberger 2023-05-03 12:22:39 +02:00 • committed by GitHub
parent 36c31f5c3f
commit 3f52ff6fce
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 69 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

136
x-pack/plugins/ml/public/application/components/data_grid/data_grid.tsx
View file

@ -346,74 +346,76 @@ export const DataGrid: FC<Props> = memo(
<EuiSpacer size="m" />
</div>
)}
<EuiMutationObserver
observerOptions={{ subtree: true, attributes: true, childList: true }}
onMutation={onMutation}
>
{(mutationRef) => (
<div css={cssOverride} ref={mutationRef}>
<EuiDataGrid
aria-label={isWithHeader(props) ? props.title : ''}
columns={columnsWithCharts.map((c) => {
c.initialWidth = 165;
return c;
})}
columnVisibility={{ visibleColumns, setVisibleColumns }}
trailingControlColumns={trailingControlColumns}
gridStyle={euiDataGridStyle}
rowCount={rowCount}
renderCellValue={renderCellValue}
renderCellPopover={renderCellPopover}
sorting={{ columns: sortingColumns, onSort }}
toolbarVisibility={{
...euiDataGridToolbarSettings,
...(chartsButtonVisible
? {
additionalControls: (
<EuiToolTip
content={i18n.translate(
'xpack.ml.dataGrid.histogramButtonToolTipContent',
{
defaultMessage:
'Queries run to fetch histogram chart data will use a sample size per shard of {samplerShardSize} documents.',
values: {
samplerShardSize: DEFAULT_SAMPLER_SHARD_SIZE,
},
}
)}
>
<EuiButtonEmpty
aria-pressed={chartsVisible === true}
className={`euiDataGrid__controlBtn${
chartsVisible === true ? ' euiDataGrid__controlBtn--active' : ''
}`}
data-test-subj={`${dataTestSubj}HistogramButton`}
size="xs"
iconType="visBarVertical"
color="text"
onClick={toggleChartVisibility}
disabled={chartsVisible === undefined}
{rowCount > 0 && (
<EuiMutationObserver
observerOptions={{ subtree: true, attributes: true, childList: true }}
onMutation={onMutation}
>
{(mutationRef) => (
<div css={cssOverride} ref={mutationRef}>
<EuiDataGrid
aria-label={isWithHeader(props) ? props.title : ''}
columns={columnsWithCharts.map((c) => {
c.initialWidth = 165;
return c;
})}
columnVisibility={{ visibleColumns, setVisibleColumns }}
trailingControlColumns={trailingControlColumns}
gridStyle={euiDataGridStyle}
rowCount={rowCount}
renderCellValue={renderCellValue}
renderCellPopover={renderCellPopover}
sorting={{ columns: sortingColumns, onSort }}
toolbarVisibility={{
...euiDataGridToolbarSettings,
...(chartsButtonVisible
? {
additionalControls: (
<EuiToolTip
content={i18n.translate(
'xpack.ml.dataGrid.histogramButtonToolTipContent',
{
defaultMessage:
'Queries run to fetch histogram chart data will use a sample size per shard of {samplerShardSize} documents.',
values: {
samplerShardSize: DEFAULT_SAMPLER_SHARD_SIZE,
},
}
)}
>
<FormattedMessage
id="xpack.ml.dataGrid.histogramButtonText"
defaultMessage="Histogram charts"
/>
</EuiButtonEmpty>
</EuiToolTip>
),
}
: {}),
}}
pagination={{
...pagination,
pageSizeOptions: [5, 10, 25],
onChangeItemsPerPage,
onChangePage,
}}
/>
</div>
)}
</EuiMutationObserver>
<EuiButtonEmpty
aria-pressed={chartsVisible === true}
className={`euiDataGrid__controlBtn${
chartsVisible === true ? ' euiDataGrid__controlBtn--active' : ''
}`}
data-test-subj={`${dataTestSubj}HistogramButton`}
size="xs"
iconType="visBarVertical"
color="text"
onClick={toggleChartVisibility}
disabled={chartsVisible === undefined}
>
<FormattedMessage
id="xpack.ml.dataGrid.histogramButtonText"
defaultMessage="Histogram charts"
/>
</EuiButtonEmpty>
</EuiToolTip>
),
}
: {}),
}}
pagination={{
...pagination,
pageSizeOptions: [5, 10, 25],
onChangeItemsPerPage,
onChangePage,
}}
/>
</div>
)}
</EuiMutationObserver>
)}
</div>
);
},