Skip to content

Commit

Permalink
[8.8] [ML] Transforms/DFA: Render EuiDataGrad for more than 0 rows. (#…
Browse files Browse the repository at this point in the history 
…156403) (#156503)

# Backport

This will backport the following commits from `main` to `8.8`:
- [[ML] Transforms/DFA: Render EuiDataGrad for more than 0 rows.
(#156403)](#156403)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Walter
Rafelsberger","email":"walter.rafelsberger@elastic.co"},"sourceCommit":{"committedDate":"2023-05-03T10:22:39Z","message":"[ML]
Transforms/DFA: Render EuiDataGrad for more than 0 rows.
(#156403)\n\nFixes the React dev mode warning \"Warning: Can't perform a
React state\r\nupdate on an unmounted component.\" by only rendering
`EuiDataGrid` if\r\nthere's more than 0
rows.","sha":"3f52ff6fceddbce0d538dce410e734b2131b4eb3","branchLabelMapping":{"^v8.9.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug",":ml","release_note:skip","v8.8.0","v8.9.0"],"number":156403,"url":"#156403
Transforms/DFA: Render EuiDataGrad for more than 0 rows.
(#156403)\n\nFixes the React dev mode warning \"Warning: Can't perform a
React state\r\nupdate on an unmounted component.\" by only rendering
`EuiDataGrid` if\r\nthere's more than 0
rows.","sha":"3f52ff6fceddbce0d538dce410e734b2131b4eb3"}},"sourceBranch":"main","suggestedTargetBranches":["8.8"],"targetPullRequestStates":[{"branch":"8.8","label":"v8.8.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.9.0","labelRegex":"^v8.9.0$","isSourceBranch":true,"state":"MERGED","url":"#156403
Transforms/DFA: Render EuiDataGrad for more than 0 rows.
(#156403)\n\nFixes the React dev mode warning \"Warning: Can't perform a
React state\r\nupdate on an unmounted component.\" by only rendering
`EuiDataGrid` if\r\nthere's more than 0
rows.","sha":"3f52ff6fceddbce0d538dce410e734b2131b4eb3"}}]}] BACKPORT-->

Co-authored-by: Walter Rafelsberger <walter.rafelsberger@elastic.co>
  • Loading branch information
@kibanamachine @walterra
kibanamachine and walterra committed May 3, 2023
1 parent 5fb469c commit ec982a7
Showing 1 changed file with 69 additions and 67 deletions.
136 changes: 69 additions & 67 deletions x-pack/plugins/ml/public/application/components/data_grid/data_grid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
},
Expand Down

0 comments on commit ec982a7

Please sign in to comment.